/* =====================================================================
 * LINKCHART 테마 — 공통 (PC·모바일)
 * 인플루언서 랭킹(인플랭크)과 같은 네오 브루탈리즘 디자인
 * ===================================================================== */
:root {
  --lc-bg: #F3F3F3;
  --lc-bg-alt: #F0F0F0;
  --lc-card: #FFFFFF;
  --lc-ink: #1A1A1A;
  --lc-black: #000000;
  --lc-sub: #4A4A4A;
  --lc-muted: #7A7A7A;
  --lc-main: #FF6B6B;      /* 코랄 */
  --lc-sec: #4ECDC4;       /* 민트 */
  --lc-yellow: #FDE047;
  --lc-soft: #FFF6C7;
  --lc-bd: 3px solid #000;
  --lc-bd-thin: 2px solid #000;
  --lc-sh-card: 8px 8px 0 0 #000;
  --lc-sh: 5px 5px 0 0 #000;
  --lc-sh-sm: 3px 3px 0 0 #000;
  --lc-font-display: "Space Grotesk", "Pretendard Variable", Pretendard, sans-serif;
  --lc-font: "Public Sans", "Pretendard Variable", Pretendard, -apple-system, "Malgun Gothic", sans-serif;
}

/* ---------- 바탕 ---------- */
body {
  background-color: var(--lc-bg) !important;
  background-image: radial-gradient(#000 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
  background-attachment: fixed !important;
  color: var(--lc-ink);
  font-family: var(--lc-font) !important;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}
body, input, button, select, textarea { font-family: var(--lc-font); }
a { color: var(--lc-ink); }
::selection { background: var(--lc-yellow); color: #000; }

/* ---------- 로고 ---------- */
.lc-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--lc-ink) !important; text-decoration: none !important;
  font-family: var(--lc-font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.03em; line-height: 1; }
.lc-logo__mark { width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: var(--lc-main); color: #fff;
  border: var(--lc-bd-thin); box-shadow: var(--lc-sh-sm); transform: rotate(-4deg); }
.lc-logo__text { font-weight: 700; }

/* ---------- 버튼 (눌리는 느낌) ---------- */
.lc-btn,
.btn_submit, .btn_b01, .btn_b02, .btn_b03, .btn_b04, .btn_cancel, .btn_close, .btn_admin, a.btn_frmline, button.btn_frmline, .btn_frmline {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: var(--lc-bd-thin) !important; border-radius: 0 !important; box-shadow: var(--lc-sh-sm) !important;
  font-weight: 800 !important; text-decoration: none !important; cursor: pointer;
  transition: transform .12s, box-shadow .12s, background .12s;
}
.lc-btn:hover,
.btn_submit:hover, .btn_b01:hover, .btn_b02:hover, .btn_b03:hover, .btn_b04:hover, .btn_cancel:hover, .btn_close:hover, .btn_admin:hover, .btn_frmline:hover {
  transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 #000 !important;
}
.lc-btn:active,
.btn_submit:active, .btn_b01:active, .btn_b02:active, .btn_b03:active, .btn_cancel:active { transform: translate(3px, 3px); box-shadow: none !important; }
.btn_submit, .btn_b02, .lc-btn--main { background: var(--lc-main) !important; color: #fff !important; }
.btn_b01, .btn_b03, .btn_b04, .btn_cancel, .btn_close, .btn_frmline, .lc-btn--white { background: var(--lc-card) !important; color: var(--lc-ink) !important; }
.btn_admin, .lc-btn--black { background: var(--lc-black) !important; color: #fff !important; }
.lc-btn { height: 44px; padding: 0 20px; font-size: 15px; white-space: nowrap; }
.lc-btn--lg { height: 54px; padding: 0 28px; font-size: 17px; box-shadow: var(--lc-sh) !important; }

/* ---------- 입력칸 ---------- */
.frm_input, #container textarea, #container select, .frm_file, .full_input, .sch_input, #ol_id, #ol_pw {
  border: var(--lc-bd-thin) !important; border-radius: 0 !important; background: var(--lc-card) !important;
  color: var(--lc-ink); box-shadow: none; font-weight: 600;
}
.frm_input:focus, #container textarea:focus, #container select:focus, .sch_input:focus, #ol_id:focus, #ol_pw:focus {
  outline: 0; box-shadow: 4px 4px 0 0 var(--lc-main) !important;
}
.frm_input.required, .frm_input.required:focus { background: var(--lc-card) !important; }

/* ---------- 페이지 제목 ---------- */
#container_title { margin-bottom: 18px; }
#container_title span {
  display: inline-block !important; background: var(--lc-card); border: var(--lc-bd-thin); box-shadow: var(--lc-sh);
  padding: 6px 16px; margin: 0 0 6px !important; line-height: 1.3 !important;
  font-family: var(--lc-font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.03em; color: var(--lc-ink);
}

/* ---------- 표 (게시판 목록 등) ---------- */
.tbl_head01 table, .tbl_head02 table { background: var(--lc-card); border: var(--lc-bd) !important; box-shadow: var(--lc-sh); border-collapse: collapse; }
.tbl_head01 thead th, .tbl_head02 thead th {
  background: var(--lc-yellow) !important; color: #000 !important; font-weight: 800 !important;
  border: 0 !important; border-bottom: var(--lc-bd-thin) !important; height: auto; padding: 12px 6px !important;
}
.tbl_head01 thead th a { color: #000 !important; }
.tbl_head01 td, .tbl_head02 td { color: var(--lc-ink) !important; border: 0 !important; border-bottom: 1.5px solid #000 !important; height: auto !important; padding: 12px 8px !important; }
.tbl_head01 tbody tr:last-child td { border-bottom: 0 !important; }
.tbl_head01 tbody tr:hover td { background: var(--lc-soft) !important; }
.tbl_head01 .bo_notice td, .tbl_head01 tr.bo_notice td { background: #FFF1F1 !important; }
.tbl_head01 .bo_tit a, .tbl_head01 td a { color: var(--lc-ink); font-weight: 700; }
.empty_table { padding: 50px 0 !important; font-weight: 700; color: var(--lc-sub) !important; }
.tbl_frm01 table { background: var(--lc-card); border: var(--lc-bd) !important; box-shadow: var(--lc-sh); }
.tbl_frm01 th { background: var(--lc-soft) !important; border: 0 !important; border-bottom: 1.5px solid #000 !important; font-weight: 800; color: #000; }
.tbl_frm01 td { border: 0 !important; border-bottom: 1.5px solid #000 !important; }

/* ---------- 페이지 번호 ---------- */
.pg_wrap { margin-top: 18px; }
.pg_page, .pg_current {
  border: var(--lc-bd-thin) !important; border-radius: 0 !important; min-width: 34px !important; height: 34px !important; line-height: 30px !important;
  font-weight: 800; margin: 0 3px 6px 0; box-shadow: 2px 2px 0 0 #000;
}
.pg_page { background-color: var(--lc-card) !important; color: #000 !important; }
.pg_page:hover { background-color: var(--lc-soft) !important; }
.pg_current { background: var(--lc-black) !important; color: #fff !important; }

/* ---------- 게시판 ---------- */
#bo_list, #bo_gall, #bo_v, #bo_w { font-size: 14px; }
#bo_btn_top { margin-bottom: 14px; }
#bo_list_total { font-weight: 800; }
.bo_cate_ul a, #bo_cate a { border: var(--lc-bd-thin) !important; border-radius: 0 !important; background: var(--lc-card) !important; color: #000 !important; font-weight: 800; }
#bo_cate_on, #bo_cate a:hover { background: var(--lc-black) !important; color: #fff !important; }
#bo_v, #bo_w .bo_w_tit, .write_div, #bo_vc article {
  background: var(--lc-card); border: var(--lc-bd) !important; box-shadow: var(--lc-sh-card); border-radius: 0 !important;
}
#bo_v { padding: 26px; }
#bo_v_title .bo_v_tit { font-family: var(--lc-font-display); font-weight: 700; letter-spacing: -0.02em; }
#bo_v_info { border-bottom: 1.5px solid #000 !important; }
#bo_vc article { padding: 14px; margin-bottom: 14px; }
.cmt_btn { background: var(--lc-yellow) !important; border: var(--lc-bd-thin) !important; color: #000 !important; font-weight: 800; }
#bo_gall .gall_box { border: var(--lc-bd) !important; box-shadow: var(--lc-sh); background: var(--lc-card); border-radius: 0 !important; }

/* ---------- 로그인 · 회원가입 ---------- */
.mbskin, .register, #register_form, #fregister {
  background: var(--lc-card); border: var(--lc-bd) !important; box-shadow: var(--lc-sh-card); border-radius: 0 !important;
}
.mbskin .mbskin_box, #mb_login .mbskin_box { border: 0 !important; box-shadow: none !important; }
.mbskin h1, .mbskin_box h1 { font-family: var(--lc-font-display); font-weight: 700; letter-spacing: -0.02em; }
#login_fs .btn_submit, .mbskin .btn_submit { width: 100%; height: 48px; font-size: 16px; }

/* ---------- 오른쪽 로그인 박스 · 설문 ---------- */
#aside #ol_before, #aside #ol_after, #aside #poll, #aside .ol {
  background: var(--lc-card) !important; border: var(--lc-bd) !important; box-shadow: var(--lc-sh) !important; border-radius: 0 !important;
}
#ol_before .login-sns, #ol_after_hd { border-radius: 0 !important; }
#ol_after_hd { background: var(--lc-soft) !important; border-bottom: var(--lc-bd-thin); }
#ol_after_private li a { border-radius: 0 !important; }

/* ---------- 맨 위로 버튼 ---------- */
#top_btn {
  background: var(--lc-yellow) !important; color: #000 !important; border: var(--lc-bd-thin) !important; border-radius: 0 !important;
  box-shadow: var(--lc-sh-sm); font-weight: 900; transition: transform .12s, box-shadow .12s;
}
#top_btn:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 #000; background: var(--lc-yellow) !important; color: #000 !important; }

/* ---------- 하단 ---------- */
#ft.lc-ft { background: var(--lc-card) !important; border-top: var(--lc-bd); margin-top: 60px; padding: 36px 20px 44px; color: var(--lc-sub); }
.lc-ft__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.lc-ft__brand .lc-logo { font-size: 20px; }
.lc-ft__brand .lc-logo__mark { width: 32px; height: 32px; }
.lc-ft__nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.lc-ft__nav a { color: var(--lc-ink); font-weight: 800; font-size: 14px; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; text-decoration-color: transparent; }
.lc-ft__nav a:hover { text-decoration-color: var(--lc-main); }
.lc-ft__copy { flex-basis: 100%; margin: 0; font-size: 13px; font-weight: 600; color: var(--lc-muted); }

/* =====================================================================
 * 메인 화면
 * ===================================================================== */
#container:has(.lc-main) { float: none !important; width: 100% !important; margin: 0 !important; }
/* 게임을 "사이트 상단·하단 포함"으로 둔 경우: 오른쪽 로그인 박스 없이 전체 너비 */
#container:has(> .cr), #container:has(> .rps-page), #container:has(> .pd) { float: none !important; width: 100% !important; }
.lc-main { padding: 32px 0 20px; }
.lc-main * { box-sizing: border-box; }
.lc-card { display: flex; flex-direction: column; background: var(--lc-card); border: var(--lc-bd); box-shadow: var(--lc-sh); color: var(--lc-ink); text-decoration: none !important; }
a.lc-card { transition: transform .15s, box-shadow .15s; }
a.lc-card:hover { transform: translate(4px, 4px); box-shadow: 1px 1px 0 0 #000; }
.lc-card__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: var(--lc-bd); }
.lc-card__head b { font-family: var(--lc-font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.lc-bg-main { background: var(--lc-main); }
.lc-bg-sec { background: var(--lc-sec); }
.lc-bg-yellow { background: var(--lc-yellow); }

/* 인사 */
.lc-intro { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: stretch; margin-bottom: 52px; }
.lc-badge { display: inline-block; background: var(--lc-yellow); border: var(--lc-bd-thin); box-shadow: var(--lc-sh-sm); padding: 6px 14px; font-weight: 900; font-size: 14px; transform: rotate(-2deg); }
.lc-intro__title { margin: 22px 0 10px; font-family: var(--lc-font-display); font-weight: 700; font-size: 48px; line-height: 1.15; letter-spacing: -0.04em; }
.lc-hl { position: relative; display: inline-block; z-index: 0; white-space: nowrap; }
.lc-hl::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: 4px; height: 16px; background: var(--lc-sec); z-index: -1; }
.lc-intro__text p { margin: 0; font-size: 17px; font-weight: 600; color: var(--lc-sub); }
.lc-me { background: var(--lc-card); border: var(--lc-bd); box-shadow: var(--lc-sh-card); padding: 22px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.lc-me__label { font-weight: 800; color: var(--lc-sub); }
.lc-me__point { font-family: var(--lc-font-display); font-weight: 700; font-size: 38px; letter-spacing: -0.03em; line-height: 1.1; }
.lc-me__point small { font-size: 20px; margin-left: 2px; }
.lc-me__btns { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.lc-me__btns .lc-btn { flex: 1; }

/* 섹션 */
.lc-section { margin-bottom: 56px; }
.lc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.lc-title { display: inline-block; margin: 0; background: var(--lc-card); border: var(--lc-bd-thin); box-shadow: var(--lc-sh); padding: 6px 16px;
  font-family: var(--lc-font-display); font-weight: 700; font-size: 28px; letter-spacing: -0.03em; }
.lc-desc { margin: 14px 0 0; color: var(--lc-sub); font-size: 15px; font-weight: 600; }

/* 게임 카드 */
.lc-games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.lc-game { box-shadow: var(--lc-sh-card); }
.lc-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: var(--lc-card); border: var(--lc-bd-thin); font-size: 22px; }
.lc-live { margin-left: auto; font-style: normal; font-family: var(--lc-font-display); font-weight: 700; font-size: 12px; background: #000; color: #fff; padding: 2px 8px; }
.lc-live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3CFF8F; margin-right: 5px; vertical-align: 1px; animation: lc-blink 1s infinite; }
@keyframes lc-blink { 50% { opacity: .2; } }
.lc-game__body { flex: 1; padding: 16px 18px 6px; display: flex; flex-direction: column; gap: 12px; }
.lc-game__body p { margin: 0; font-size: 15px; font-weight: 600; color: var(--lc-sub); line-height: 1.55; }
.lc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lc-chips span { font-size: 12px; font-weight: 800; color: var(--lc-muted); margin-right: 2px; }
.lc-chips i { font-style: normal; font-family: var(--lc-font-display); font-weight: 700; font-size: 13px; padding: 1px 7px; border: 1.5px solid #000; background: var(--lc-card); }
.lc-chips i.mid { background: #D9F7F5; }
.lc-chips i.hi { background: var(--lc-yellow); }
.lc-stat { font-size: 14px; font-weight: 700; color: var(--lc-sub); }
.lc-stat b { color: var(--lc-ink); font-family: var(--lc-font-display); }
.lc-game > .lc-btn { margin: 14px 18px 18px; }

/* 인플루언서 랭킹 띠 */
.lc-band { margin: 0 0 56px; padding: 34px 32px; background: var(--lc-card); border: var(--lc-bd); box-shadow: var(--lc-sh-card); }
.lc-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.lc-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.lc-pills span { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: var(--lc-card); border: var(--lc-bd-thin); box-shadow: 3px 3px 0 0 #000; font-weight: 800; font-size: 14px; }
.lc-pills i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #000; }

/* 미니 앱 */
.lc-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.lc-app { padding: 20px; gap: 8px; }
.lc-app__ico { width: 48px; height: 48px; display: grid; place-items: center; border: var(--lc-bd-thin); background: var(--lc-soft); font-size: 24px; margin-bottom: 6px; }
.lc-app b { font-size: 17px; font-weight: 900; letter-spacing: -0.02em; }
.lc-app p { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--lc-sub); line-height: 1.5; }
.lc-apps .lc-app:nth-child(2) .lc-app__ico { background: #D9F7F5; }
.lc-apps .lc-app:nth-child(3) .lc-app__ico { background: #FFE3E3; }
.lc-apps .lc-app:nth-child(4) .lc-app__ico { background: var(--lc-yellow); }

/* 커뮤니티 */
.lc-boards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.lc-board .lc-card__head b { font-size: 18px; }
.lc-more { margin-left: auto; width: 32px; height: 32px; display: grid; place-items: center; background: var(--lc-card); border: var(--lc-bd-thin); box-shadow: 2px 2px 0 0 #000;
  font-weight: 900; font-size: 18px; color: #000 !important; text-decoration: none !important; transition: transform .12s, box-shadow .12s; }
.lc-more:hover { transform: translate(2px, 2px); box-shadow: none; }
.lc-board ul { list-style: none; margin: 0; padding: 0; }
.lc-board li + li { border-top: 1.5px solid #000; }
.lc-board li a { display: flex; align-items: center; gap: 8px; padding: 11px 16px; color: var(--lc-ink); text-decoration: none; font-weight: 700; font-size: 14px; }
.lc-board li a:hover { background: var(--lc-soft); }
.lc-board li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-board li em { font-style: normal; color: var(--lc-main); font-weight: 800; font-size: 12px; }
.lc-board li time { flex: none; font-family: var(--lc-font-display); font-size: 12px; font-weight: 600; color: var(--lc-muted); }
.lc-empty { margin: 0; padding: 28px 16px; text-align: center; font-weight: 700; color: var(--lc-sub); }
.lc-empty a { color: var(--lc-ink); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--lc-main); }

@media (max-width: 1080px) {
  .lc-games, .lc-boards { grid-template-columns: repeat(2, 1fr); }
  .lc-apps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .lc-main { padding: 18px 14px 10px; }
  .lc-intro { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
  .lc-intro__title { font-size: 32px; }
  .lc-intro__title br { display: none; }
  .lc-hl::after { height: 10px; bottom: 3px; }
  .lc-intro__text p { font-size: 15px; }
  .lc-games, .lc-boards, .lc-apps { grid-template-columns: 1fr; gap: 20px; }
  .lc-apps { grid-template-columns: 1fr 1fr; gap: 14px; }
  .lc-app { padding: 14px; }
  .lc-app p { display: none; }
  .lc-title { font-size: 22px; }
  .lc-section { margin-bottom: 40px; }
  .lc-band { padding: 24px 18px; margin-bottom: 40px; }
  .lc-btn--lg { width: 100%; }
  #ft.lc-ft { margin-top: 40px; padding: 26px 16px 70px; }
}
@media (prefers-reduced-motion: reduce) { .lc-live::before { animation: none; } }