/* 텔레그램 한글 가이드 포털 — 디자인 토큰 + 홈·글·허브 (2026-09-29 색·형태 개편: '유아틱하다' → 신뢰감 / 기본색 = 텔레그램 공식 파랑)
   원칙: 컨테이너 1200px · 좌우 여백 비움(PC 사이드 레일 광고) · 풀블리드 띠·100vh·하단 고정 요소 없음 · JS 0(예외: 다크/라이트 전환 버튼 인라인 몇 줄) · 글꼴 Pretendard 한 파일(가변·한글 서브셋 461KB, 자체 호스팅)
   색 규칙: 텔레그램 공식 파랑 한 계열(--brand #2AABEE 로고·그라데이션 / --primary #1F7AC0 버튼·링크, telegram.org 링크색 계열) + 무채색. 남색은 쓰지 않는다(2026-09-29 운영자: '예전 톤'). 초록·주황·빨강은 '상태'(콜아웃·검증·경고)에만 쓴다. 트랙마다 다른 색을 주지 않는다.
   컴포넌트 예시 마크업은 docs/COMPONENTS.md. 본문(원고)은 .tg-* 클래스만 쓰고 style= 을 쓰지 않는다. */

/* ── 1. 토큰 ─────────────────────────────────────────── */
:root {
  /* 브랜드 — 텔레그램 공식 파랑(로고 그라데이션 #2AABEE → #229ED9). 채움(버튼·표시선·점·진행 막대·로고)에 쓴다 */
  --brand: #2AABEE;
  --brand-2: #229ED9;        /* 공식 파랑 아래쪽 */
  --brand-grad: linear-gradient(180deg, #2AABEE, #229ED9);  /* 로고·아이콘 칸 */
  --primary: #1F7AC0;        /* 버튼·선택 상태 채움 — 흰 글자 4.6:1 */
  --primary-hover: #1D6FB0;
  --on-brand: #FFFFFF;       /* 파랑 채움 위 글자 */
  /* 링크·강조 글자 — 같은 색상환(청색 200°)의 어두운 단계. 흰 바탕에서 글자 대비 확보 */
  --link: #1F7AC0;           /* 링크 글자 (4.6:1) */
  --link-ink: #1A6BAA;       /* 강조 글자 (5.6:1) */
  --link-hover: #155A91;
  /* 글자 */
  --ink: #0A2036;          /* 제목·본문 */
  --ink-2: #32465A;        /* 보조 글자 (9.6:1) */
  --muted: #5B6B7F;        /* 흐린 글자 (5.1:1, 연한 면 위에서도 4.9:1) */
  /* 면·선 */
  color-scheme: light;
  --bg: #FFFFFF;           /* 페이지 바탕 */
  --surface: #FFFFFF;      /* 카드·패널 바탕 (다크에서 한 단 올라온다) */
  --icon: #1F7AC0;         /* 연한 면 위 아이콘 */
  --art-filter: none;      /* 밝은 바탕 그림(표지·삽화) — 다크에서만 눈부심을 줄인다 */
  --soft: #F4F8FB;         /* 연한 면(파랑 기운 도는 차가운 회색) */
  --soft-2: #EAF1F6;
  --line: #E1E9F0;
  --line-2: #CBD8E3;
  --blue-soft: #EAF6FD;    /* 텔레그램 파랑 연한 면 — 안내·선택 */
  --blue-line: #CDE7F7;
  /* 남색 면 — 히어로·썸네일 바탕·바닥 */
  --navy: #0A2036;
  --navy-2: #0F3A5F;
  --navy-ink: #C9DCEA;     /* 남색 위 본문 (12:1) */
  --navy-mute: #9DB6CB;    /* 남색 위 보조 (7.8:1) */
  /* 상태색 — 콜아웃·검증·경고에만. 채도 낮춤 */
  --ok: #12A150;       --ok-ink: #067647;    --ok-soft: #ECFDF3;   --ok-line: #ABEFC6;
  --warn: #DC8A0B;     --warn-ink: #93400D;  --warn-soft: #FFF8EB; --warn-line: #F3DDB1;
  --err: #D92D20;      --err-ink: #B42318;   --err-soft: #FEF3F2;  --err-line: #FBD5D0;
  /* 스크린샷 번호 원 — 그림 속 원 색(tools/screenshots/annotate.py)과 같아야 한다. 바꾸지 않는다 */
  --fig-red: #EF4444;  --fig-blue: #1E88E5;  --fig-green: #10B981;  --fig-gray: #94A3B8;
  /* 옛 이름(다른 곳에서 참조할 수 있어 유지) → 새 계열로 접음 */
  --mint: var(--ok);   --mint-ink: var(--ok-ink);   --mint-soft: var(--ok-soft);
  --amber: var(--warn); --amber-ink: var(--warn-ink); --amber-soft: var(--warn-soft);
  --red: var(--err);    --red-ink: var(--err-ink);    --red-soft: var(--err-soft);
  --purple: var(--brand); --purple-soft: var(--blue-soft);
  --pink: var(--brand);   --pink-soft: var(--blue-soft);
  --gold: var(--warn);   --gold-soft: var(--warn-soft);
  /* 트랙 액센트: 전부 같은 파랑. (부모에 a-xx 를 붙이는 마크업은 그대로 동작) */
  --a-dl: var(--brand);  --a-st: var(--brand);  --a-ht: var(--brand);  --a-fx: var(--brand);
  --a-sc: var(--brand);  --a-ch: var(--brand);  --a-stk: var(--brand); --a-fq: var(--brand);
  --a-dl-soft: var(--blue-soft); --a-st-soft: var(--blue-soft); --a-ht-soft: var(--blue-soft); --a-fx-soft: var(--blue-soft);
  --a-sc-soft: var(--blue-soft); --a-ch-soft: var(--blue-soft); --a-stk-soft: var(--blue-soft); --a-fq-soft: var(--blue-soft);
  --acc: var(--brand); --acc-soft: var(--blue-soft);
  /* 형태 — 각을 줄여 단단하게. 큰 둥근 모서리(18~22px)는 쓰지 않는다 */
  --wrap: 1200px;
  --r-s: 6px; --r-m: 10px; --r-l: 12px; --r-xl: 16px;
  --sh-1: 0 1px 2px rgba(10,32,54,.06);
  --sh-2: 0 14px 34px -18px rgba(10,32,54,.32);
  --font: "Pretendard", "Pretendard Fallback", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "D2Coding", monospace;
  --fs: 17px;
  /* 홈 섹션 틀(2026-10-03, docs/HOME_REDESIGN_PLAN.md 4-1) — 면 4종 · 8px 격자 간격 · 글자 크기 */
  --sec-alt: #EEF3F8;      /* S1 옅은 면 (흰색과 1.12:1, 위아래 1px 선) */
  --sec-line: var(--line);
  --stage: #0B1626;        /* 남색 무대(영상 팁) — 썸네일 칸과 같은 남색 */
  --stage-line: transparent;
  --stage-ink: #C9DCEA;  --stage-mute: #9DB6CB;   /* 무대 위 글자 (13.9:1 / 9.4:1) */
  --band: linear-gradient(120deg, #1F7AC0, #1A6BAA);   /* 파랑 띠 — 흰 글자 4.56:1 이상 */
  --band-glow: rgba(42,171,238,.35);
  --thumb-line: transparent;   /* 글 썸네일 칸 테두리(다크에서만 보인다) */
  --sp-sec: 72px; --sp-head: 24px; --sp-gap: 24px; --sp-row: 12px; --row-s: 76px;
  --t-h2: 26px; --t-l: 24px; --t-m: 17px; --t-s: 15px; --t-meta: 12.5px;
  --sec-grid: rgba(10,40,80,.06);  --sec-glow: rgba(42,171,238,.14);  --deco-blend: multiply;   /* 옅은 면 장식(격자 · 빛 · 3D 오브젝트 합성) */
}
@media (max-width: 640px) {
  :root { --sp-sec: 48px; --sp-head: 16px; --sp-gap: 16px; --sp-row: 8px; --row-s: 68px; --t-h2: 21px; --t-l: 20px; --t-m: 16px; }
}

/* ── 1-1. 다크 테마 ──────────────────────────────────────
   [data-theme="dark"] = 사용자가 고른 다크. 고른 적이 없고(data-theme 없음) OS 가 다크면 자동으로 다크.
   두 블록의 값은 같아야 한다(한쪽만 고치지 않는다). 남색(--navy)·공식 파랑(--brand)·상태 채움색은 테마와 무관하게 그대로. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --link: #6CC0F5;  --link-ink: #8ED0F8;  --link-hover: #B0E0FA;
  --ink: #E8EEF4;   --ink-2: #B7C4D1;     --muted: #8FA1B3;
  --bg: #0E1621;    --surface: #152230;   --soft: #182839;   --soft-2: #1E3247;
  --line: #223547;  --line-2: #2E475D;
  --sec-alt: #080E17;  --stage: #04080F;  --stage-line: rgba(255,255,255,.08);  --thumb-line: var(--line-2);  --sec-grid: rgba(255,255,255,.04);  --sec-glow: rgba(42,171,238,.16);  --deco-blend: screen;
  --blue-soft: #11293C;  --blue-line: #1E4560;  --icon: #8ED0F8;  --art-filter: brightness(.86);
  --ok-ink: #5FD394;   --ok-soft: #0F2A1E;   --ok-line: #1C5A3A;
  --warn-ink: #F2B24C; --warn-soft: #2C2312; --warn-line: #5C4715;
  --err-ink: #FF8A80;  --err-soft: #2E1614;  --err-line: #6A2B27;
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 14px 34px -18px rgba(0,0,0,.75);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --link: #6CC0F5;  --link-ink: #8ED0F8;  --link-hover: #B0E0FA;
    --ink: #E8EEF4;   --ink-2: #B7C4D1;     --muted: #8FA1B3;
    --bg: #0E1621;    --surface: #152230;   --soft: #182839;   --soft-2: #1E3247;
    --line: #223547;  --line-2: #2E475D;
    --sec-alt: #080E17;  --stage: #04080F;  --stage-line: rgba(255,255,255,.08);  --thumb-line: var(--line-2);  --sec-grid: rgba(255,255,255,.04);  --sec-glow: rgba(42,171,238,.16);  --deco-blend: screen;
    --blue-soft: #11293C;  --blue-line: #1E4560;  --icon: #8ED0F8;  --art-filter: brightness(.86);
    --ok-ink: #5FD394;   --ok-soft: #0F2A1E;   --ok-line: #1C5A3A;
    --warn-ink: #F2B24C; --warn-soft: #2C2312; --warn-line: #5C4715;
    --err-ink: #FF8A80;  --err-soft: #2E1614;  --err-line: #6A2B27;
    --sh-1: 0 1px 2px rgba(0,0,0,.4);
    --sh-2: 0 14px 34px -18px rgba(0,0,0,.75);
  }
}

/* 라이트·다크 두 벌 그림(docs/ART_DIRECTION.md) — 보이는 한 장만 내려받는다(loading=lazy + display:none 은 받지 않는다) */
.tg-th-d { display: none !important; }
:root[data-theme="dark"] .tg-th-l { display: none !important; }
:root[data-theme="dark"] .tg-th-d { display: block !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tg-th-l { display: none !important; } :root:not([data-theme="light"]) .tg-th-d { display: block !important; } }
:root { --art-bg: #F6FAFE; --thumb-bg: #0B1626; }   /* --thumb-bg = 글 썸네일 칸(두 테마 같은 남색, 2026-10-03) */
:root[data-theme="dark"] { --art-bg: #0B1626; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --art-bg: #0B1626; } }

/* ── 2. 바탕 ─────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--fs); line-height: 1.7;
  word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid rgba(34,158,217,.6); outline-offset: 2px; border-radius: 6px; }
img { max-width: 100%; height: auto; }
svg { flex: none; }
h1, h2, h3 { line-height: 1.35; margin: 0 0 .5em; letter-spacing: -.025em; color: var(--ink); }
h1 { font-size: 32px; font-weight: 800; }
h2 { font-size: 24px; font-weight: 800; }
h3 { font-size: 19px; font-weight: 700; }
p { margin: 0 0 1.1em; }
.tg-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
main.tg-wrap { padding-top: 28px; padding-bottom: 64px; min-height: 60vh; }
.tg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tg-skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--bg); padding: 8px 12px; }
.tg-skip:focus { left: 8px; top: 8px; z-index: 100; }
/* 스테이징 안내 — 눈에 띄되 튀지 않게 남색 띠 */
.tg-staging { background: var(--primary); color: #fff; text-align: center; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; padding: 6px 12px; border-bottom: 1px solid rgba(255,255,255,.08); }

/* ── 3. 머리 (64px) · 모바일은 메뉴 가로 스크롤 칩 ───────── */
.tg-header { position: relative; z-index: 60; border-bottom: 1px solid var(--line); background: var(--bg); }
.tg-mnav { display: none; }
.tg-header-in { position: relative; display: flex; align-items: center; gap: 24px; height: 64px; }
.tg-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; color: var(--ink); white-space: nowrap; letter-spacing: -.03em; }
.tg-brand:hover { text-decoration: none; }
.tg-logo { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(10,32,54,.2); flex-shrink: 0; }
.tg-logo img, .tg-logo svg { display: block; width: 100%; height: 100%; border-radius: 8px; object-fit: contain; }
.tg-nav { display: flex; align-self: stretch; margin: 0 auto; }
.tg-nav-l { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.tg-nav-i { display: flex; align-items: center; }   /* 머리 높이 전체 — 메뉴에서 판으로 내려갈 때 틈이 없다 */
.tg-nav-a { position: relative; color: var(--ink-2); padding: 7px 11px; border-radius: 8px; font-size: 15.5px; font-weight: 600; white-space: nowrap; }
.tg-nav-a:hover, .tg-nav-i.open > .tg-nav-a { color: var(--ink); text-decoration: none; background: var(--soft); }
@media (hover: hover) { .tg-nav-i.has-mega:hover > .tg-nav-a { color: var(--ink); background: var(--soft); } }
.tg-nav-a.on { color: var(--ink); font-weight: 700; }
.tg-nav-a.on::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: -14px; height: 2px; border-radius: 2px; background: var(--brand); }

/* 메가 메뉴 판 (docs/NAV_PLAN.md 3-1) — 여닫기는 CSS: 마우스(hover 되는 기기만)는 0.12초 머물면 열리고 떠나도 0.18초 유예,
   JS 없으면 키보드 포커스로 열림, JS 는 .open(아래 화살표)·.shut(Esc)만 붙인다. 판 바탕·선은 토큰(라이트·다크) */
.tg-mega { position: absolute; left: 16px; right: 16px; top: calc(100% + 1px); z-index: 70; visibility: hidden; opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .16s ease .18s, transform .16s ease .18s, visibility 0s linear .34s; }
@media (hover: hover) { .tg-nav-i:hover > .tg-mega { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity .16s ease .12s, transform .16s ease .12s, visibility 0s linear .12s; } }
.tg-nav-i.open > .tg-mega, :root:not(.js) .tg-nav-i:focus-within > .tg-mega { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: none; }
.tg-nav-i.shut > .tg-mega { visibility: hidden; opacity: 0; pointer-events: none; transition: none; }
.tg-mega-in { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 8px 32px; padding: 24px 28px 16px; max-height: calc(100vh - 96px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; box-shadow: var(--sh-2); }
.tg-mega-in.no-rail { grid-template-columns: minmax(0, 1fr); }
.tg-mega ul { list-style: none; margin: 0; padding: 0; }
.tg-mega-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 4px 28px; align-content: start; }
.tg-mega-h { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); letter-spacing: .01em; }
.tg-mega-col a { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 -8px; padding: 6px 8px; border-radius: 8px;
  color: var(--ink); font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.tg-mega-col a:hover { background: var(--soft); color: var(--ink); text-decoration: none; }
.tg-mega small { color: var(--muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tg-mega-rail { align-self: stretch; padding: 16px 18px; border-radius: 10px; background: var(--soft); }   /* 판 높이까지 — 칸마다 바닥이 들쭉날쭉하지 않게(2026-10-03) */
.tg-mega-rail a { display: block; padding: 6px 0; color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.tg-mega-rail a:hover { color: var(--link); }
.tg-mega-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px 20px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.tg-mega-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 13px; }
.tg-mega-chips b { margin-right: 4px; color: var(--muted); font-weight: 700; }
.tg-mega-chips a { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); font-weight: 600; }
.tg-mega-chips a:hover { border-color: var(--brand); color: var(--link); text-decoration: none; }
.tg-mega-all { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--link); font-size: 14px; font-weight: 700; white-space: nowrap; }
/* 판 크기(docs/MEGA_MENU_PLAN.md 2절) — s 640 · m 860 은 머리 가운데. 1,100~1,280px 실측으로 메뉴 8개(컨테이너 220~813px)를 늘 덮는다.
   열기 애니메이션의 translateY 를 translateX(-50%) 와 함께 쓴다 */
@media (min-width: 1100px) {
  .tg-mega.is-s, .tg-mega.is-m { left: 50%; right: auto; transform: translate(-50%, -6px); }
  .tg-mega.is-s { width: 640px; }
  .tg-mega.is-m { width: 920px; }   /* B단계: 소개 블록 + 주제 두 열 + 레일이 한 줄에 들어가는 폭(1,100px 에서도 메뉴 8개를 덮는다) */
  .tg-nav-i.open > .tg-mega.is-s, .tg-nav-i.open > .tg-mega.is-m, :root:not(.js) .tg-nav-i:focus-within > .tg-mega.is-s, :root:not(.js) .tg-nav-i:focus-within > .tg-mega.is-m { transform: translate(-50%, 0); }
  .tg-mega.is-s .tg-mega-in, .tg-mega.is-m .tg-mega-in { border-top: 1px solid var(--line); border-radius: 12px; }
  .tg-mega.is-s .tg-mega-in { grid-template-columns: minmax(0, 1fr) 220px; }
  .tg-mega.is-m .tg-mega-in { grid-template-columns: minmax(0, 1fr) 240px; }
  /* 소개 블록 첫 칸 */
  .tg-mega.is-s .tg-mega-in.has-intro { grid-template-columns: 200px minmax(0, 1fr); }
  .tg-mega.is-m .tg-mega-in.has-intro { grid-template-columns: 190px minmax(0, 1fr) 210px; gap: 8px 26px; }
  .tg-mega.is-m .has-intro .tg-mega-cols { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 4px 22px; }
  .tg-mega.is-l .tg-mega-cols { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 24px; }
}

/* 소개 블록(docs/MEGA_MENU_PLAN.md 원칙 2) — 섹션 표지 · 이름 · 한 줄 · 대표 행동 하나. 1,099px 이하(전체 폭 판)에서는 감춘다 */
.tg-mega-intro { display: none; }
@media (min-width: 1100px) {
  .tg-mega-intro { display: flex; flex-direction: column; gap: 6px; align-self: stretch; padding: 12px; border-radius: 12px; background: var(--soft); }
  /* 판이 소개 블록보다 길면 표지가 남는 높이를 채운다(빈 바닥 대신 그림, 2026-10-03) */
  .tg-mega-art { display: block; flex: 1 0 auto; aspect-ratio: 2 / 1; max-height: 190px; margin: -2px -2px 4px; border-radius: 8px; background: var(--surface) center / cover no-repeat; filter: var(--art-filter); }
  /* 보안 판은 표지를 원래 크기(2:1)로 — 키우면 방패가 크게 잘린다(2026-10-03 운영자). 남는 높이는 버튼을 바닥으로 내려 채운다 */
  #tg-mega-security .tg-mega-art { flex: none; }
  #tg-mega-security .tg-mega-go { margin-top: auto; }
}
/* 판 안 그림(.tg-lz, C단계로 넓힘) — 판이 열릴 때만 받는다. 닫힌 판의 배경은 그리지 않으므로 내려받지 않는다(--l 라이트 · --d 다크) */
.tg-lz { background-color: var(--soft); background-position: center; background-repeat: no-repeat; background-size: cover; }
.tg-nav-i.open .tg-lz, :root:not(.js) .tg-nav-i:focus-within .tg-lz { background-image: var(--l); }
:root[data-theme="dark"] .tg-nav-i.open .tg-lz, :root[data-theme="dark"]:not(.js) .tg-nav-i:focus-within .tg-lz { background-image: var(--d); }
@media (hover: hover) {
  .tg-nav-i:hover .tg-lz { background-image: var(--l); }
  :root[data-theme="dark"] .tg-nav-i:hover .tg-lz { background-image: var(--d); }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-nav-i.open .tg-lz { background-image: var(--d); }
}
@media (prefers-color-scheme: dark) and (hover: hover) {
  :root:not([data-theme="light"]) .tg-nav-i:hover .tg-lz { background-image: var(--d); }
}
/* 시작하기 12단계 번호 */
.tg-mega-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%;
  background: var(--blue-soft); color: var(--link-ink); font-size: 12px; font-style: normal; font-weight: 800; }
.tg-mega-col a:has(.tg-mega-num) { justify-content: flex-start; align-items: center; }
.tg-mega-num.is-mark { border-radius: 6px; font-size: 11.5px; }
/* 다운로드 기기 타일 — 열 칸 전체 폭 3×2 */
.tg-mega-col.is-tiles, .tg-mega-col.is-stats, .tg-mega-col.is-wide { grid-column: 1 / -1; }
.tg-mega-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 6px !important; }
.tg-mega-tiles a { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 6px 8px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-align: center; }
.tg-mega-tiles a:hover { border-color: var(--brand); text-decoration: none; }
.tg-mega-dev { width: 56px; height: 40px; margin-bottom: 3px; background-color: transparent !important; background-size: contain !important; }
/* 판 폭 두 줄 목록(다운로드 주제) */
.tg-mega-col.is-wide ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
/* 숫자 타일 한 줄(채널 찾기) — 큰 숫자 + 이름 */
.tg-mega-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 10px !important; }
.tg-mega-rail .tg-mega-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tg-mega .tg-mega-rail .tg-mega-stats a { flex-direction: row; align-items: center; justify-content: flex-start; gap: 7px; padding: 8px 10px; }   /* 레일 안은 숫자·이름 한 줄 */
.tg-mega-rail .tg-mega-stats b { font-size: 16px; }
.tg-mega-rail .tg-mega-stats span { font-size: 12.5px; white-space: nowrap; }
@media (min-width: 1100px) { .tg-mega.is-l .tg-mega-in:has(.tg-mega-rail .tg-mega-stats) { grid-template-columns: minmax(0, 1fr) 296px; } }   /* 숫자 타일 2×2 + 모음 이름이 한 줄에 들도록 */
.tg-mega .tg-mega-stats a { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; margin: 0; padding: 9px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.tg-mega .tg-mega-stats a:hover { border-color: var(--brand); background: var(--surface); }
.tg-mega-stats b { color: var(--link-ink); font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tg-mega-stats b.is-ic { display: inline-flex; height: 24px; align-items: center; }
.tg-mega-stats span { color: var(--ink-2); font-size: 13px; font-weight: 600; }
/* 열 머리 아이콘 · 숫자 배지 · 분류 대표 표지(2026-10-03 — 글자만 있던 열) */
.tg-mega-h { display: flex; align-items: center; gap: 6px; }
.tg-mega-hi { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: var(--blue-soft); color: var(--link-ink); }
.tg-mega-rail a.has-n { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tg-mega-col small, .tg-mega-rail small, .tg-mega-also small, .tg-mega-chips small { flex: none; display: inline-block; min-width: 26px; padding: 1px 7px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 11.5px; font-weight: 700; line-height: 1.5; text-align: center; }
.tg-mega-col a:hover small { background: var(--blue-soft); color: var(--link-ink); }
.tg-mega-rail small { background: var(--surface); }   /* 레일 면(--soft) 위 */
.tg-mega-ava { flex: none; width: 26px; height: 26px; margin-right: 8px; border-radius: 7px; background-color: var(--soft); background-size: contain; }
.tg-mega-col a:has(.tg-mega-ava) { align-items: center; }
.tg-mega-col a:has(.tg-mega-ava) > span { flex: 1; }
.tg-mega-tiles b { font-size: 14px; font-weight: 700; }
.tg-mega-tiles em { color: var(--muted); font-size: 12px; font-style: normal; font-weight: 500; }
/* 레일 카드(첫 글 썸네일) · 스티커 표지 2×2 */
/* 레일 카드는 가로(썸네일 왼쪽) — 세로 카드가 레일을 판에서 가장 긴 칸으로 만들던 것(2026-10-03) */
.tg-mega-card a { display: flex; align-items: center; gap: 10px; padding: 0 0 10px !important; color: var(--ink) !important; font-weight: 650; }
.tg-mega-card b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.tg-mega-thumb { flex: none; display: block; width: 80px; aspect-ratio: 16 / 9; border-radius: 6px; filter: var(--art-filter); }
.tg-mega-covers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px !important; }
.tg-mega-covers a { display: block; padding: 0 !important; }
.tg-mega-covers .tg-lz { display: block; aspect-ratio: 1; border-radius: 8px; background-size: contain; background-color: var(--surface); }
.tg-mega-rail .tg-mega-h + ul + .tg-mega-h, .tg-mega-rail ul + .tg-mega-h { margin-top: 12px; }
.tg-mega-rail a.has-d { display: flex; flex-direction: column; }
.tg-mega-rail a.has-d em { color: var(--muted); font-size: 12px; font-style: normal; }
.tg-mega-it { color: var(--ink); font-size: 17px; font-weight: 750; letter-spacing: -.02em; }
.tg-mega-tx { color: var(--ink-2); font-size: 13.5px; line-height: 1.55; }
.tg-mega-go { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding: 9px 12px; border-radius: 10px;
  background: var(--primary); color: var(--on-brand); font-size: 14px; font-weight: 700; }
.tg-mega-go:hover { background: var(--primary-hover); color: var(--on-brand); text-decoration: none; }
.tg-mega-q { position: relative; display: flex; align-items: center; margin-top: 6px; }
.tg-mega-q svg { position: absolute; left: 10px; color: var(--muted); pointer-events: none; }
.tg-mega-q input { width: 100%; height: 38px; padding: 0 10px 0 32px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); font: inherit; font-size: 14px; color: var(--ink); }
.tg-mega-q input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(42,171,238,.22); }
/* 이름 + 설명 줄(작은·중간 판의 주제) — 숫자 대신 뜻 */
.tg-mega-col a.has-d { padding: 7px 8px; }
.tg-mega-col a.has-d span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tg-mega-col a.has-d em { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--muted); font-size: 12.5px; font-style: normal; font-weight: 500; line-height: 1.45; }
/* 작은 판: 레일을 주제 아래 한 줄로 */
.tg-mega-also { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 13px; }
.tg-mega-also b { margin-right: 2px; color: var(--muted); font-size: 12.5px; font-weight: 700; }   /* 머리를 같은 줄 앞에(줄 하나 아낌) */
.tg-mega-also a { color: var(--ink-2); }
.tg-mega-also a:hover { color: var(--link); }
.tg-mega-stat { color: var(--muted); font-size: 13px; font-weight: 600; }
@media (max-width: 900px) { .tg-mnav-home.is-go { margin-bottom: 6px; background: var(--primary); color: var(--on-brand); } .tg-mnav-home.is-go svg { color: var(--on-brand); } }
@media (min-width: 1100px) and (hover: hover) { .tg-nav-i:hover > .tg-mega.is-s, .tg-nav-i:hover > .tg-mega.is-m { transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .tg-mega, .tg-nav-i:hover > .tg-mega { transform: none; transition: none; } }
@media (prefers-reduced-motion: reduce) and (min-width: 1100px) { .tg-mega.is-s, .tg-mega.is-m, .tg-nav-i:hover > .tg-mega.is-s, .tg-nav-i:hover > .tg-mega.is-m { transform: translateX(-50%); } }
@media (max-width: 1099px) { .tg-mega-in { grid-template-columns: minmax(0, 1fr) 220px; padding: 20px 22px 14px; gap: 8px 24px; } .tg-mega-cols { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
.tg-hsearch { position: relative; display: flex; align-items: center; flex: 0 1 200px; min-width: 120px; }
.tg-hsearch svg { position: absolute; left: 11px; color: var(--muted); pointer-events: none; }
.tg-hsearch input { width: 100%; height: 38px; padding: 0 12px 0 36px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft);
  font: inherit; font-size: 14.5px; color: var(--ink); }
.tg-hsearch input:focus { outline: none; border-color: var(--link); background: var(--surface); box-shadow: 0 0 0 3px rgba(42,171,238,.22); }

.tg-theme { display: none; flex: 0 0 auto; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 10px;
  background: var(--soft); color: var(--ink-2); cursor: pointer; }
.js .tg-theme { display: inline-flex; }
.tg-theme:hover { border-color: var(--line-2); color: var(--ink); }
.tg-theme .i-sun { display: none; }
.tg-theme .i-moon { display: inline-flex; }
:root[data-theme="dark"] .tg-theme .i-sun { display: inline-flex; }
:root[data-theme="dark"] .tg-theme .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-theme .i-sun { display: inline-flex; }
  :root:not([data-theme="light"]) .tg-theme .i-moon { display: none; }
}

/* ── 4. 바닥 (남색) ───────────────────────────────────── */
.tg-footer { background: var(--soft); color: var(--muted); padding: 40px 0 44px; font-size: 14px; border-top: 1px solid var(--line); }
.tg-footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 18px; }
.tg-footer .tg-brand { font-size: 16px; color: var(--ink); }
.tg-footer .tg-logo { width: 28px; height: 28px; box-shadow: none; }
.tg-footer-nav, .tg-footer-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.tg-footer-nav a, .tg-footer-links a { color: var(--ink-2); }
.tg-footer-nav a:hover, .tg-footer-links a:hover { color: var(--link); }
.tg-footer-links { padding-top: 18px; border-top: 1px solid var(--line); margin-bottom: 10px; }
.tg-footer-links a { font-weight: 700; }
.tg-footer-note { margin: 0; color: var(--muted); line-height: 1.65; }
.tg-footer-note b { color: var(--ink-2); }
@media (max-width: 640px) {   /* 바닥 링크 높이 24px — 손가락으로 누르기 작았다 → 누르는 칸 40px(글자·모양 그대로, 2026-10-03) */
  .tg-footer-nav, .tg-footer-links { gap: 0 18px; }
  .tg-footer-nav a, .tg-footer-links a { display: inline-flex; align-items: center; min-height: 40px; }
  .tg-footer-links { padding-top: 8px; }
}

/* ── 5. 공통 조각 ────────────────────────────────────── */
.tg-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; color: var(--link-ink); letter-spacing: .01em; }
.tg-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.tg-badge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; font-size: 12.5px; font-weight: 700; color: var(--ink-2);
  background: var(--soft); border: 1px solid var(--line); padding: 2px 9px; border-radius: 6px; }
.tg-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.tg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 46px; padding: 0 20px; border-radius: 10px;
  font-weight: 700; font-size: 15.5px; white-space: nowrap; border: 1px solid transparent; background: var(--primary); color: var(--on-brand); }
.tg-btn:hover { text-decoration: none; }
.tg-btn.tone-primary { background: var(--primary); color: var(--on-brand); box-shadow: 0 1px 2px rgba(10,32,54,.18); }
/* 보조 버튼 — 옛 amber·mint 톤 이름은 그대로 두고 모양만 중립으로 */
.tg-btn.tone-amber, .tone-mint.tg-btn, .tg-btn.tone-mint { background: var(--surface); color: var(--link-ink); border-color: var(--line-2); }
.tg-btn.tone-ghost { background: var(--surface); color: var(--link-ink); border-color: var(--link); }
.tg-entry-card:hover .tg-btn.tone-primary { background: var(--primary-hover); }
.tg-entry-card:hover .tg-btn.tone-amber, .tg-entry-card:hover .tg-btn.tone-mint { border-color: var(--link); background: var(--blue-soft); }
.tg-note, .tg-empty { color: var(--ink-2); background: var(--soft); border: 1px solid var(--line); padding: 14px 18px; border-radius: var(--r-m); font-size: 15px; }
.tg-count { color: var(--ink-2); font-size: 15px; }
.tg-crumb { font-size: 13.5px; color: var(--muted); margin-bottom: 14px; }
.tg-crumb a { color: var(--muted); }
.tg-sec { margin-top: 60px; }
.tg-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.tg-sec-h h2 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 23px; }
.tg-sec-h h2 i { width: 4px; height: 20px; border-radius: 2px; background: var(--brand); }
.tg-sec-h a { font-size: 14.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.tg-sec-h a:hover { color: var(--link-ink); }

/* ── 6. 홈 ───────────────────────────────────────────── */
/* 6-2 히어로 (2026-09-29 확정: 라이트 = B안 '라이트 오로라' · 다크 = A안 '다크 글로우', 키 비주얼 DSN-003 안티 3D 렌더)
   화면 폭 전체 띠(홈 첫 화면 하나만 — 운영자 승인 시안). 글·검색은 1200px 컨테이너 안. 그림은 테마에 맞는 한 장만 받는다(CSS 배경) */
:root { --hero-bg: #F6FAFE; --hero-grid: rgba(10,40,80,.045); }
:root[data-theme="dark"] { --hero-bg: #070F1C; --hero-grid: rgba(255,255,255,.035); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hero-bg: #070F1C; --hero-grid: rgba(255,255,255,.035); } }
html, body { overflow-x: clip; }
.tg-hero { position: relative; isolation: isolate; margin: -28px calc(50% - 50vw) 0; padding: 0 calc(50vw - 50%); background: var(--hero-bg); }
.tg-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--hero-grid) 1px, transparent 1px), linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(60% 70% at 25% 40%, #000, transparent 75%); mask-image: radial-gradient(60% 70% at 25% 40%, #000, transparent 75%); }
.tg-hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 150px; z-index: 0; pointer-events: none; background: linear-gradient(transparent, var(--bg)); }
.tg-hero-kv { position: absolute; z-index: -2; top: 0; bottom: 0; right: max(-160px, calc((100% - 1200px) / 2 - 40px)); aspect-ratio: 3 / 2; min-height: 680px; pointer-events: none; }
/* 오브젝트 레이어 — 좌표는 무대(3:2) 안의 %. 라이트 multiply(흰 바탕 지움) · 다크 screen(검정 바탕 지움) */
.kv-stage { --mx: 0; --my: 0; --blend: multiply; position: absolute; inset: 0; background: var(--hero-bg); isolation: isolate; }
:root[data-theme="dark"] .kv-stage { --blend: screen; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kv-stage { --blend: screen; } }
.kvl { position: absolute; display: block; background: var(--l) center / contain no-repeat; mix-blend-mode: var(--blend);
  transform: translate(calc(var(--mx) * var(--z) * 1px), calc(var(--my) * var(--z) * 1px)); transition: transform .8s cubic-bezier(.2,.7,.2,1); will-change: transform, translate; }
:root[data-theme="dark"] .kvl { background-image: var(--d); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kvl { background-image: var(--d); } }
.kvl-book    { --z: 14; left: 45%; top: 32%; width: 50%; animation: kv-book 9s ease-in-out infinite; }
.kvl-plane   { --z: 42; left: 64%; top: 17%; width: 21%; animation: kv-plane 7s ease-in-out infinite; }
.kvl-bubble1 { --z: 30; left: 43%; top: 22%; width: 16%; animation: kv-bub 8s ease-in-out -1s infinite; }
.kvl-bubble2 { --z: 36; left: 85%; top: 54%; width: 13%; animation: kv-bub 8s ease-in-out -5s infinite reverse; }
/* 배경 영상 — 라이트 .kv-v-l · 다크 .kv-v-d (테마별 한 편). 영상이 있으면 오브젝트 레이어(.kv-stage)는 숨긴다. 가장자리는 둥글게 녹여 히어로 바탕과 잇는다 */
.kv-video { position: absolute; left: 36%; top: 50%; width: 76%; height: auto; transform: translate(0, -50%); pointer-events: none; background: var(--hero-bg);
  -webkit-mask-image: radial-gradient(ellipse 66% 70% at 50% 52%, #000 72%, transparent 100%); mask-image: radial-gradient(ellipse 66% 70% at 50% 52%, #000 72%, transparent 100%); }
.tg-hero-kv:has(.kv-video) .kv-stage { display: none; }
.kv-v-d { display: none; }
:root[data-theme="dark"] .kv-v-l { display: none; }
:root[data-theme="dark"] .kv-v-d { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kv-v-l { display: none; } :root:not([data-theme="light"]) .kv-v-d { display: block; } }
/* 책 뒤 빛(호흡) · 바닥 그림자(책과 함께 숨 쉰다) */
.kv-glow { position: absolute; left: 44%; top: 14%; width: 56%; aspect-ratio: 1; border-radius: 50%; transform: translate(calc(var(--mx) * 6px), calc(var(--my) * 6px));
  background: radial-gradient(closest-side, rgba(42,171,238,.42), rgba(42,171,238,.16) 55%, transparent 100%); filter: blur(8px); animation: kv-glow 9s ease-in-out infinite; }
:root[data-theme="dark"] .kv-glow { background: radial-gradient(closest-side, rgba(42,171,238,.55), rgba(31,122,192,.22) 55%, transparent 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kv-glow { background: radial-gradient(closest-side, rgba(42,171,238,.55), rgba(31,122,192,.22) 55%, transparent 100%); } }
.kv-floor { position: absolute; left: 50%; top: 83%; width: 40%; height: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(10,50,100,.20), transparent);
  animation: kv-floor 9s ease-in-out infinite; }
:root[data-theme="dark"] .kv-floor { background: radial-gradient(closest-side, rgba(42,171,238,.32), transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kv-floor { background: radial-gradient(closest-side, rgba(42,171,238,.32), transparent); } }
@keyframes kv-book  { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -12px; rotate: -1.2deg; } }
@keyframes kv-plane { 0%, 100% { translate: 0 0; rotate: 0deg; } 35% { translate: 18px -16px; rotate: -3deg; } 70% { translate: 6px -4px; rotate: 1.5deg; } }
@keyframes kv-bub   { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -14px; rotate: 2deg; } }
@keyframes kv-glow  { 0%, 100% { opacity: .75; scale: .96; } 50% { opacity: 1; scale: 1.04; } }
@keyframes kv-floor { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .65; scale: .88; } }
@media (prefers-reduced-motion: reduce) { .kvl, .kv-glow, .kv-floor { animation: none; transition: none; } }
.tg-hero-in { position: relative; z-index: 1; max-width: 620px; min-height: 680px; padding: 92px 0 128px; display: flex; flex-direction: column; justify-content: center; }
.tg-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; height: 34px; padding: 0 14px 0 6px; border-radius: 999px; font-size: 13.5px; font-weight: 650;
  color: var(--ink-2); background: color-mix(in srgb, var(--surface) 82%, transparent); border: 1px solid var(--line); box-shadow: 0 6px 18px -10px rgba(10,50,100,.25); }
.tg-hero-eyebrow b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: var(--brand-grad); }
.tg-hero h1 { margin: 22px 0 18px; font-size: 64px; line-height: 1.1; letter-spacing: -.05em; font-weight: 800; color: var(--ink); }
.tg-hero h1 em { font-style: normal; background: linear-gradient(100deg, #2AABEE 0%, #1F7AC0 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tg-hero-sub { margin: 0 0 32px; max-width: 540px; font-size: 19px; line-height: 1.6; font-weight: 450; color: var(--ink-2); }
.tg-hero .tg-bigsearch { max-width: 580px; margin: 0; }
.tg-hero .tg-bigsearch input { height: 66px; border-radius: 20px; border-color: rgba(10,50,100,.08); background: #fff; color: #0A2036;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 24px 48px -24px rgba(20,90,160,.45), 0 2px 6px rgba(10,40,80,.06); }
.tg-hero .tg-bigsearch input::placeholder { color: #7D8A99; }
.tg-hero .tg-bigsearch > svg { left: 22px; z-index: 1; color: #66768A; }
.tg-hero .tg-bigsearch button { width: 50px; height: 50px; border-radius: 14px; right: 8px; }
.tg-hero .tg-popular { max-width: 600px; }
.tg-hero .tg-popular a { background: color-mix(in srgb, var(--surface) 75%, transparent); }
.tg-hero-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 30px 0 0; padding: 0; list-style: none; font-size: 14px; font-weight: 550; color: var(--muted); }
.tg-hero-trust li { display: inline-flex; align-items: center; gap: 7px; margin: 0; }
.tg-hero-trust svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; color: var(--link); background: var(--blue-soft); }
/* 다크(A안): 유리 검색창·칩, 강조 글자 밝은 파랑 */
:root[data-theme="dark"] .tg-hero h1 em { background-image: linear-gradient(100deg, #9BE0FF 0%, #2AABEE 55%, #1F8FD8 100%); }
:root[data-theme="dark"] .tg-hero .tg-bigsearch input { background: rgba(255,255,255,.06); color: #EEF4FA; border-color: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(42,171,238,.10), 0 30px 60px -30px rgba(42,171,238,.55); }
:root[data-theme="dark"] .tg-hero .tg-bigsearch input::placeholder { color: #7F92A6; }
:root[data-theme="dark"] .tg-hero .tg-bigsearch > svg { color: #8497AB; }
:root[data-theme="dark"] .tg-hero .tg-popular a, :root[data-theme="dark"] .tg-hero-eyebrow { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.11); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-hero h1 em { background-image: linear-gradient(100deg, #9BE0FF 0%, #2AABEE 55%, #1F8FD8 100%); }
  :root:not([data-theme="light"]) .tg-hero .tg-bigsearch input { background: rgba(255,255,255,.06); color: #EEF4FA; border-color: rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(42,171,238,.10), 0 30px 60px -30px rgba(42,171,238,.55); }
  :root:not([data-theme="light"]) .tg-hero .tg-bigsearch input::placeholder { color: #7F92A6; }
  :root:not([data-theme="light"]) .tg-hero .tg-bigsearch > svg { color: #8497AB; }
  :root:not([data-theme="light"]) .tg-hero .tg-popular a, :root:not([data-theme="light"]) .tg-hero-eyebrow { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.11); }
}
.tg-bigsearch { position: relative; display: flex; align-items: center; max-width: 720px; margin: 0 auto; }
.tg-bigsearch > svg { position: absolute; left: 20px; color: var(--muted); pointer-events: none; }
.tg-bigsearch input { width: 100%; height: 62px; padding: 0 72px 0 56px; border: 1px solid var(--line-2); border-radius: var(--r-l); background: var(--surface);
  font: inherit; font-size: 17px; color: var(--ink); }
.tg-bigsearch input::placeholder { color: var(--muted); }
.tg-bigsearch input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(42,171,238,.22); }
.tg-bigsearch button { position: absolute; right: 7px; width: 48px; height: 48px; border: 0; border-radius: 12px; color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #2AABEE, #1F8FD8); box-shadow: 0 8px 18px -8px rgba(31,122,192,.8); }
.tg-bigsearch button:hover { background: linear-gradient(180deg, #229ED9, #1F7AC0); }
.tg-bigsearch.is-inline { margin: 12px 0 0; }
.hb-search { max-width: 560px; margin-top: 18px; }
.hb-problems { margin-top: 40px; }
.tg-popular { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.tg-popular a { padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); }
.tg-popular a:hover { border-color: var(--brand); color: var(--link); text-decoration: none; }

/* 6-3 입구 카드 3 — 벤토(첫 칸 넓게) + 카드 머리 3D 썸네일(DSN-004, 테마별 한 장, 카드 너비 꽉 채움). 다크 카드 바탕 = 다크 썸네일 바탕 #0F1A2B */
:root { --entry-bg: #FFFFFF; }
:root[data-theme="dark"] { --entry-bg: #0F1A2B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --entry-bg: #0F1A2B; } }
.tg-entry { position: relative; z-index: 2; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; margin-top: -64px; }
.tg-entry-card { position: relative; display: flex; flex-direction: column; border-radius: var(--r-l); overflow: hidden; color: var(--ink);
  background: var(--entry-bg); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(10,40,80,.04), 0 24px 48px -32px rgba(10,50,100,.35);
  transition: transform .25s, box-shadow .25s, border-color .25s; }
.tg-entry-card:hover { text-decoration: none; transform: translateY(-4px); border-color: var(--blue-line); box-shadow: 0 32px 60px -30px rgba(20,90,160,.45); }
.tg-entry-art { display: block; height: 200px; background: var(--ic-l) center / cover no-repeat; border-bottom: 1px solid var(--line); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.tg-entry-card:hover .tg-entry-art { transform: scale(1.04); }
.tg-entry-card:nth-child(3) .tg-entry-art { background-position: center 34%; }
:root[data-theme="dark"] .tg-entry-art { background-image: var(--ic-d); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tg-entry-art { background-image: var(--ic-d); } }
.tg-entry-body { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; padding: 20px 26px 24px; background: var(--entry-bg); }
.tg-entry-body .tg-kicker { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--link); }
.tg-entry-body b { margin: 6px 0 8px; font-size: 24px; line-height: 1.3; letter-spacing: -.035em; font-weight: 750; }
.tg-entry-body small { font-size: 15.5px; line-height: 1.6; color: var(--muted); margin-bottom: 18px; padding-right: 48px; }
.tg-entry-body .tg-btn { margin-top: auto; align-self: flex-start; height: 46px; padding: 0 20px; border-radius: var(--r-m); color: #fff;
  background: var(--band);   /* 흰 글자 4.56:1 이상(공식 파랑 #2AABEE 위 흰 글자는 2.6:1 — 2026-10-03) */ box-shadow: 0 10px 22px -10px rgba(31,122,192,.8); }
.tg-entry-go { position: absolute; right: 22px; bottom: 22px; width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center;
  color: var(--ink-2); background: var(--soft); transition: .25s; }
.tg-entry-card:hover .tg-entry-go { color: #fff; background: linear-gradient(180deg, #2AABEE, #1F8FD8); }
@media (prefers-reduced-motion: reduce) { .tg-entry-art { transition: none; } .tg-entry-card:hover .tg-entry-art { transform: none; } }

@media (max-width: 1099px) {
  .tg-hero h1 { font-size: 52px; }
  .tg-hero-in { max-width: 540px; }
  .tg-hero-kv { right: -220px; }
}
@media (max-width: 900px) {
  .tg-hero { display: flex; flex-direction: column; }
  .tg-hero-in { order: 1; min-height: 0; max-width: none; padding: 40px 0 0; }
  .tg-hero-kv { order: 2; position: relative; top: auto; bottom: auto; right: auto; width: 150%; min-height: 0; aspect-ratio: 3 / 2; margin: 0 0 -8% -50%; }
  .tg-hero-kv:has(.kv-video) { width: auto; aspect-ratio: 900 / 720; margin: -4px calc(50% - 50vw) 36px; }
  .kv-video { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transform: none;
    -webkit-mask-image: radial-gradient(ellipse 70% 66% at 50% 50%, #000 66%, transparent 100%); mask-image: radial-gradient(ellipse 70% 66% at 50% 50%, #000 66%, transparent 100%); }
  .tg-hero::before { height: 90px; }
  .tg-hero h1 { font-size: 42px; }
  .tg-hero-sub { font-size: 17px; margin-bottom: 24px; }
  .tg-hero-trust { margin-top: 22px; }
  .tg-entry { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: -48px; }
  .tg-entry-card { flex-direction: row; }
  .tg-entry-art { flex: 0 0 38%; height: auto; min-height: 150px; border-bottom: 0; border-right: 1px solid var(--line); }
  .tg-entry-body { padding: 16px 18px 18px; }
  .tg-entry-body small { margin-bottom: 12px; padding-right: 40px; }
  .tg-entry-body b { font-size: 20px; margin: 4px 0 4px; }
  .tg-entry-go { right: 18px; bottom: auto; top: 50%; margin-top: -22px; }
}
@media (max-width: 640px) {
  .tg-hero h1 { font-size: 34px; }
  .tg-hero-in { padding-top: 28px; }
  .tg-hero-eyebrow { font-size: 12.5px; height: 30px; }
  .tg-hero .tg-bigsearch input { height: 58px; padding-left: 50px; font-size: 16px; border-radius: 16px; }
  .tg-hero .tg-bigsearch > svg { left: 17px; }
  .tg-hero .tg-bigsearch button { width: 44px; height: 44px; border-radius: 12px; }
  .tg-popular a { font-size: 13.5px; padding: 6px 12px; }
  .tg-hero-trust { font-size: 13px; gap: 6px 14px; }
  .tg-entry-art { flex-basis: 34%; min-height: 128px; }
  .tg-entry-body { padding: 14px 14px 16px; }
  .tg-entry-body b { font-size: 18px; }
  .tg-entry-body small { font-size: 14px; }
  .tg-entry-body .tg-btn { height: 40px; font-size: 14.5px; padding: 0 16px; }
}

/* 6-4 OS 카드 5 */

/* 6-5 지금 많이 찾는 문제 8 */
.tg-problems { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tg-problems a { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px 18px; border: 1px solid var(--line); border-radius: var(--r-m); color: var(--ink); background: var(--surface); }
.tg-problems a:hover { border-color: var(--link); box-shadow: var(--sh-2); text-decoration: none; }
.tg-problems b { font-size: 15.5px; line-height: 1.45; font-weight: 700; }
.tg-dot { flex: 0 0 30px; height: 30px; border-radius: 8px; background: var(--blue-soft); border: 1px solid var(--blue-line); position: relative; }
.tg-dot::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--brand); }

/* 6-6 매거진 그리드 (특집 1 가로 + 카드 6) — 그림 칸은 남색(썸네일 무대와 이어진다) */
.tg-mag { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tg-mcard { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; background: var(--surface); color: var(--ink);
  transition: border-color .15s, box-shadow .15s; }
.tg-mcard:hover { text-decoration: none; border-color: var(--line-2); box-shadow: var(--sh-2); }
.tg-mcard-art { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--art-bg); overflow: hidden; }
.tg-mcard-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tg-ph-ic { color: var(--navy-mute); display: inline-flex; }
/* 영상 카드: 자동재생 영상(첫 특집 카드 하나) · 배지(자동재생 표시 · 재생 시간) */
.tg-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--navy); }
.tg-tag { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 6px; background: rgba(8,18,40,.78);
  color: #fff; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .01em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tg-tag-auto { left: 12px; top: 12px; }
.tg-tag-auto i { width: 6px; height: 6px; border-radius: 50%; background: #FF5A5F; }
.tg-dur { right: 12px; bottom: 12px; font-variant-numeric: tabular-nums; }
.tg-dur svg { margin-left: -2px; }
@media (prefers-reduced-motion: reduce) { .tg-vid, .tg-tag-auto { display: none; } }
.tg-mcard-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px 18px; flex: 1; }
.tg-mcard-body b { font-size: 17px; line-height: 1.45; letter-spacing: -.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tg-mcard-body small { font-size: 15px; color: var(--muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tg-mcard-meta { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 13px; color: var(--muted); margin-top: auto; }
.tg-mcard-meta span + span::before { content: "·"; margin: 0 7px; }
.tg-mcard.is-feature { grid-column: 1 / -1; flex-direction: row; }
.tg-mcard.is-feature .tg-mcard-art { flex: 0 0 52%; aspect-ratio: 16 / 9; }
.tg-mcard.is-feature .tg-mcard-body { justify-content: center; padding: 28px 36px; gap: 12px; }
.tg-mcard.is-feature b { font-size: 27px; line-height: 1.35; }
.tg-mcard.is-ph .tg-mcard-body b { color: var(--ink-2); }

/* 3D 그림 칸(DSN-008·009) — 그림이 있을 때만 */
.tg-tcard-art { display: block; width: 84px; height: 84px; margin: -10px 0 -6px -10px; border-radius: var(--r-m); overflow: hidden; background: var(--art-bg); transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.tg-tcard:hover .tg-tcard-art { transform: translateY(-3px) scale(1.04); }
.tg-tcard:has(.tg-tcard-art) { background: linear-gradient(180deg, var(--art-bg), var(--surface) 60%); }
.tg-tcard-art img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 6-6b 홈 매거진 (2026-09-29 개편) — 섹션마다 레이아웃을 바꿔 리듬: 3단 특집 · 4열 그림 · 전폭 띠 · 순위 · 어두운 영상 띠 · 2단
   카드 한 장 = partials/mz-card (.mc-lg 큰 특집 · .mc-md 그림 카드 · .mc-sm 작은 그림 + 제목 · .mc-row 가로 · .mc-ov 그림 위 글자) */
.mz-demo { margin: 18px 0 0; padding: 8px 14px; border-radius: 10px; background: var(--warn-soft); color: var(--warn-ink); font-size: 13.5px; font-weight: 600; text-align: center; }
.mc { display: flex; flex-direction: column; gap: 12px; min-width: 0; color: var(--ink); }
.mc:hover { text-decoration: none; }
.mc-art { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r-m); overflow: hidden; background: var(--thumb-bg); border: 1px solid var(--thumb-line); }   /* --thumb-line: 다크에서만 테두리(남색 칸이 바탕에 녹지 않게) */
.mc-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.mc:hover .mc-art img { transform: scale(1.045); }
.mc-ph { position: absolute; inset: 0; display: grid; place-items: center; color: #4FB8EE; opacity: .7; }   /* 남색 칸 위 */
.mc-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mc-kicker { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--link); }
.mc-title { font-size: 17px; line-height: 1.42; font-weight: 700; letter-spacing: -.025em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s; }
.mc:hover .mc-title { color: var(--link); }
.mc-desc { font-size: 15px; line-height: 1.6; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mc-meta { display: flex; flex-wrap: wrap; gap: 0; font-size: 12.5px; color: var(--muted); }
.mc-meta span + span::before { content: "·"; margin: 0 6px; }
.mc-meta:empty { display: none; }
.mc-lg .mc-title { font-size: 28px; line-height: 1.3; letter-spacing: -.04em; font-weight: 800; }
.mc-lg .mc-art { border-radius: var(--r-l); }
.mc-sm { flex-direction: row; align-items: center; gap: 14px; }
.mc-sm .mc-art { flex: 0 0 112px; aspect-ratio: 16 / 9; border-radius: var(--r-m); }
/* 작은 칸의 3D 썸네일은 가운데 물체를 키운다(가장자리는 단색 남색이라 잘려도 잃는 것 없음). 공식 포스터는 확대하지 않는다 */
.mc-sm .mc-art:not(.is-poster) img { transform: scale(1.3); }
.mc-sm:hover .mc-art:not(.is-poster) img { transform: scale(1.36); }
.mc .mc-art.is-poster img, .mc:hover .mc-art.is-poster img { transform: none; }
.mc-sm .mc-title { font-size: 15px; }
.mc-sm .mc-kicker { font-size: 12px; }
.mc-row { flex-direction: row; align-items: center; gap: 18px; }
.mc-row .mc-art { flex: 0 0 44%; }
.mc-row .mc-title { font-size: 20px; line-height: 1.38; }
.mc-row .mc-desc { -webkit-line-clamp: 2; }
/* 그림 위 글자 — 어두운 띠 안. 공식 영상 포스터가 정사각이라 칸은 가득 채워 자른다 */

/* A. 새 글 3단: 큰 특집 | 중간 2 | 번호 목록 4 */
/* C. 4열 그림 + 목록 2열 */
/* D. 시작하기 띠 — 공식 파랑 띠(.hm-sec.is-band, 2026-10-03). 글자는 모두 흰색(반투명 흰 글자 쓰지 않음).
   윗줄 = 문구 | 3D 그림(DSN-010, 검정 바탕 → screen 으로 바탕만 지움), 아랫줄 = 12단계 칩 전폭 */
.mz-band-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.mz-band-in:has(> .mz-band-art) { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); align-items: center; }
.mz-band-in > .mz-steps { grid-column: 1 / -1; }
.mz-band-art { justify-self: end; margin-block: -76px -36px; pointer-events: none; }   /* 그림 위아래 빈 곳만큼 당겨 윗줄 높이는 문구 높이 그대로 */
.mz-band-art img { display: block; width: auto; max-width: 100%; height: 360px; object-fit: contain; mix-blend-mode: screen; }
.mz-band-copy { max-width: 600px; }
.mz-band h2 { margin: 0 0 16px; font-size: 32px; line-height: 1.25; letter-spacing: -.04em; color: #fff; }
.mz-band h2 em { font-style: normal; color: #fff; }
.mz-band p { margin: 0 0 24px; font-size: 16.5px; line-height: 1.65; color: #fff; max-width: 520px; }
.mz-band-cta { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 24px; border-radius: var(--r-m); font-weight: 700; font-size: 16px; color: #155A91;
  background: #fff; box-shadow: 0 12px 28px -14px rgba(4,30,60,.6); }
.mz-band-cta:hover { text-decoration: none; background: #EAF6FD; }
.mz-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.mz-steps li { margin: 0; }
.mz-steps a { display: flex; align-items: center; gap: 10px; height: 100%; min-height: 56px; padding: 10px 14px 10px 10px; border-radius: var(--r-m); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.35;
  background: rgba(8,40,72,.28); border: 1px solid rgba(255,255,255,.2); transition: background .2s, border-color .2s; }   /* 칩 바탕을 띠보다 어둡게 — 흰 글자 6.3:1 */
.mz-steps a:hover { text-decoration: none; background: rgba(8,40,72,.44); border-color: rgba(255,255,255,.5); }
.mz-steps b { flex: 0 0 30px; height: 30px; border-radius: var(--r-s); display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #1A6BAA; background: #fff; }
.mz-steps span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* E. 문제 해결: 순위 2열 | 새 글 */
.mz-split { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.mz-split.is-solo { grid-template-columns: minmax(0, 1fr); }
.mz-rank { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.mz-rank li { margin: 0; border-bottom: 1px solid var(--line); }
.mz-rank a { display: flex; align-items: center; gap: 16px; padding: 16px 4px; color: var(--ink); }
.mz-rank a:hover { text-decoration: none; }
.mz-rank a:hover b { color: var(--link); }
.mz-rank-n { flex: 0 0 38px; font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -.05em; color: var(--link-ink); }   /* 공식 파랑 그라데이션 글자 → 강조 글자(2026-10-03) */
.mz-rank li:nth-child(n+4) .mz-rank-n { color: var(--muted); }
.mz-rank b { flex: 1; font-size: 16px; font-weight: 700; letter-spacing: -.02em; transition: color .2s; }
.mz-rank svg { color: var(--muted); }
.mz-side { --link: var(--link-ink); display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: var(--r-l); background: var(--soft); border: 1px solid var(--line); }
.mz-side-h { margin: 0; font-size: 14px; font-weight: 800; color: var(--ink-2); }
.mz-side .mc-sm .mc-art { flex-basis: 88px; }
/* F. 어두운 영상 띠 — 테마와 무관 */
/* G. 2단(사용법 | 보안) */
/* ── 6-10. 홈 섹션 틀 (2026-10-03, docs/HOME_REDESIGN_PLAN.md 2절) ──
   면 4종: S0 기본(.hm-sec) · S1 옅은 면(.is-alt) · 파랑 띠(.is-band) · 남색 무대(.is-stage). 같은 면이 두 섹션 연달아 오지 않는다.
   면이 바뀌므로 섹션 사이는 바깥 여백 대신 안쪽 여백 --sp-sec(72 / 640px 이하 48). 색이 있는 면은 화면 끝까지(전폭). 허브·목록이 같이 쓰는 .tg-sec 류는 그대로 둔다 */
.hm-sec { position: relative; padding-block: var(--sp-sec); }
.hm-sec.is-alt, .hm-sec.is-band, .hm-sec.is-stage { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); }
.hm-sec.is-alt { background: var(--sec-alt); border-block: 1px solid var(--sec-line); --link: var(--link-ink); }   /* S1 위 작은 링크 글자는 --link-ink(5.05:1) */
.hm-sec.is-band { isolation: isolate; overflow: hidden; color: #fff; background: radial-gradient(36% 70% at 100% 0%, var(--band-glow), transparent 70%), var(--band); }
.hm-sec.is-stage { color: var(--stage-ink); background: var(--stage); border-block: 1px solid var(--stage-line); }
main.tg-wrap:has(> .hm-sec:last-child) { padding-bottom: 0; }   /* 마지막 섹션의 안쪽 여백이 곧 바닥까지의 간격 */
.hm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin-bottom: var(--sp-head); }
.hm-head-t { min-width: 0; }
.hm-k { display: block; margin-bottom: 6px; font-size: var(--t-meta); font-weight: 800; letter-spacing: .04em; color: var(--link-ink); }
.hm-head h2 { margin: 0; font-size: var(--t-h2); line-height: 1.3; letter-spacing: -.035em; font-weight: 800; color: var(--ink); }
.hm-desc { margin: 6px 0 0; font-size: var(--t-s); line-height: 1.6; color: var(--muted); }
.hm-more { flex: 0 0 auto; font-size: 14.5px; font-weight: 700; color: var(--link-ink); white-space: nowrap; }
.hm-more:hover { color: var(--link-hover); }
.hm-sub { display: flex; align-items: center; gap: 12px; margin: calc(var(--sp-gap) * 2) 0 var(--sp-head); font-size: var(--t-s); font-weight: 800; color: var(--ink-2); }
.hm-sub::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
/* 띠 · 무대 위 머리는 같은 틀을 밝은 글자로 */
.is-band .hm-k { color: #fff; margin-bottom: 12px; }
.is-stage .hm-k { color: var(--stage-mute); }
.is-stage .hm-head h2 { color: #fff; }
.is-stage .hm-more { color: var(--stage-ink); }
.is-stage .hm-more:hover { color: #fff; }
/* ── 6-11. 홈 카드 배치 (2026-10-03 3단계 '균형', docs/HOME_REDESIGN_PLAN.md 2-4 · 2-7) ──
   카드 3단계: L 특집(.mc-lg) · M 그림 카드(.mc-md) · S 줄(.mc-s · .hm-tile). 한 줄에 한 종류 · 제목 2줄 고정 · 두 칸 높이 맞춤.
   간격은 --sp-gap(카드 사이) · --sp-row(줄 사이)만 */
.hm-sec .mc-title { min-height: calc(2em * 1.42); }   /* G2: 줄 수가 카드 높이를 바꾸지 않게 */
.hm-sec .mc-lg .mc-title { font-size: var(--t-l); line-height: 1.3; min-height: calc(2em * 1.3); -webkit-line-clamp: 2; }
.hm-sec .mc-lg .mc-desc { -webkit-line-clamp: 2; }
.hm-sec .mc-md .mc-title { font-size: var(--t-m); }
/* S 줄: 96px 16:9 그림 + 제목 2줄 + 보조 한 줄(분류 · 날짜) */
.mc-s { gap: 14px; }
.mc-s .mc-art { flex: 0 0 96px; }
.mc-s .mc-body { gap: 4px; }
.mc-s .mc-title { font-size: var(--t-s); }
/* S 줄 제목(2026-10-03 운영자): 한 줄 + 말줄임, 바로 아래 '분류 · 날짜' — 그림과 가운데 맞춤. 2줄 칸을 비워 두던 것(한 줄 제목 아래 빈 줄 · 그림과 어긋남) 없앰.
   칸이 좁은 보드와 760px 이하는 한 줄이면 10자 남짓만 남아 2줄까지(빈 줄은 두지 않는다). 전체 제목은 title 툴팁 */
.hm-sec .mc-s .mc-title { min-height: 0; -webkit-line-clamp: 1; }
.hm-board .mc-s .mc-title { -webkit-line-clamp: 2; }
.hm-split > .mc-lg .mc-title { min-height: 0; }   /* 새 글 특집도 한 줄 제목 아래 빈 줄 없이 — 오른쪽 목록이 높이를 따라온다 */
.mc-s .tg-dur { right: 4px; bottom: 4px; height: 18px; padding: 0 5px; gap: 3px; font-size: 11px; }
.is-alt .mc-s, .is-alt .hm-cards .mc-md { padding: var(--sp-row); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); }   /* S1 위 카드는 흰 면(2-1 규칙 3) */
.is-alt .mc-s:hover, .is-alt .hm-cards .mc-md:hover { border-color: var(--link); text-decoration: none; }
/* 격자 — 같은 칸 */
.hm-g2, .hm-g4, .hm-g5 { display: grid; gap: var(--sp-gap); }
.hm-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-row) var(--sp-gap); }
.hm-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hm-g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hm-rows { display: grid; gap: var(--sp-row); }
/* ③ 새 글: L(7/12) | S 목록(5/12) — 목록 줄이 왼쪽 높이를 똑같이 나눠 가진다(G3 나) */
.hm-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: calc(var(--sp-gap) * 1.5); align-items: stretch; }
.hm-split.is-solo { grid-template-columns: minmax(0, 1fr); }
.hm-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(var(--n, 6), minmax(var(--row-s), 1fr)); }
.hm-list li { display: flex; align-items: center; margin: 0; border-top: 1px solid var(--line); }
.hm-list li:first-child { border-top: 0; }
.hm-list li > .mc { flex: 1; }
/* S 타일(partials/hm-tile) */
.hm-tile { display: flex; align-items: center; gap: 12px; min-height: var(--row-s); padding: var(--sp-row) 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); transition: border-color .15s, box-shadow .15s; }
a.hm-tile:hover { text-decoration: none; border-color: var(--link); box-shadow: var(--sh-2); }
.hm-tile b { font-size: var(--t-s); line-height: 1.42; font-weight: 700; letter-spacing: -.02em; }
.hm-tile small { font-size: 13px; line-height: 1.45; color: var(--muted); }
.hm-tile-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }   /* S 줄 글(.mc-s .mc-body)과 같은 4px */
.hm-tile-art { flex: 0 0 auto; display: block; overflow: hidden; border-radius: var(--r-m); background: var(--art-bg); }
.hm-tile-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-tile-ic { flex: 0 0 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-m); background: var(--brand-grad); color: #fff; }
/* 기기 타일: 그림 64 · 이름 · 공식 다운로드(높이 40) · 설치 방법 */
.hm-tile.is-os { flex-direction: column; align-items: stretch; gap: var(--sp-row); padding: 16px; }
.hm-tile-top { display: flex; align-items: center; gap: 12px; }
.is-os .hm-tile-art { width: 64px; height: 48px; }
.is-os .hm-tile-t b { font-size: 16px; }
.hm-os-get { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: var(--r-m); background: var(--blue-soft); border: 1px solid var(--blue-line); color: var(--link-ink); font-size: 14.5px; font-weight: 700; }
.hm-os-get:hover { background: var(--primary); border-color: var(--primary); color: var(--on-brand); text-decoration: none; }
.hm-os-how { align-self: center; font-size: 13.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
/* 문제 번호 타일: 1~3 위 = 파랑 채움 + 흰 글자(4.6:1), 4~8 = 옅은 파랑 + 강조 글자. 공식 파랑 글자 쓰지 않음 */
.hm-ranks { list-style: none; margin: 0; padding: 0; gap: var(--sp-row) var(--sp-gap); }
.hm-ranks li { margin: 0; display: flex; }
.hm-ranks .hm-tile { flex: 1; }
.hm-rank-n { flex: 0 0 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-m); background: var(--primary); color: var(--on-brand); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hm-ranks li:nth-child(n+4) .hm-rank-n { background: var(--blue-soft); color: var(--link-ink); }
.is-rank b { flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.is-rank svg { flex: 0 0 auto; color: var(--muted); }
/* 주제 타일: 아이콘 56 · 이름 · 편수, 높이 96 */
.hm-tile.is-topic { min-height: 96px; gap: 14px; }
.is-topic .hm-tile-art { width: 56px; height: 56px; }
.is-topic .hm-tile-t b { font-size: var(--t-m); }
/* ⑦ 영상 팁: L(2×2) + M 4 — 남색 무대 위 글자 토큰 */
.hm-sec.is-stage { --ink: #FFFFFF; --muted: var(--stage-mute); --link: #8ED0F8; --line: rgba(255,255,255,.12); }
.hm-tips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-gap); align-items: start; }
.hm-tips.has-lead > .mc-lg { grid-column: span 2; grid-row: span 2; }
.hm-tips.has-lead > .mc-md .mc-kicker { display: none; }   /* 작은 칸 두 줄 높이 = L 높이(차 57 → 9px) */
/* ⑧ 새로 올라온 것: 4열 보드 — 칸 머리(이름 + 실측 수 ›) + 같은 S 줄 수. 줄은 테두리 없이 위 선으로만 나눈다 */
.hm-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-gap); }
.hm-bcol { display: flex; flex-direction: column; min-width: 0; }
.hm-bhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 var(--sp-row); padding-bottom: var(--sp-row); border-bottom: 2px solid var(--ink); font-size: var(--t-s); font-weight: 800; }
.hm-bhead h3 { margin: 0; font-size: inherit; font-weight: inherit; }
.hm-bhead a { color: var(--ink); white-space: nowrap; }
.hm-bhead i { font-style: normal; }
.hm-bhead a span { margin-left: 2px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.hm-bhead a:hover { color: var(--link-ink); text-decoration: none; }
.hm-bhead .hm-bextra { font-size: 13px; font-weight: 700; color: var(--link-ink); }
.hm-brows { flex: 1; display: grid; grid-auto-rows: 1fr; }   /* 칸 높이가 같으니 줄 높이도 네 칸이 같다 — 줄이 칸을 가로질러 맞는다 */
.hm-brows > * { min-height: var(--row-s); padding: var(--sp-row) 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
.hm-brows > :first-child { border-top: 0; }
.hm-brows > a.hm-tile:hover { box-shadow: none; }
.hm-brows > a:hover b { color: var(--link); }
.hm-brows .mc-s { align-items: center; }
.hm-brows .hm-tile b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.is-stk .hm-tile-art { width: 54px; height: 54px; background: var(--soft); }
.is-stk .hm-tile-art img { object-fit: contain; padding: 4px; }
.hm-avs { flex: 0 0 auto; display: flex; }
.hm-avs .ch-av { box-shadow: 0 0 0 2px var(--bg); }
.hm-avs .ch-av + .ch-av { margin-left: -10px; }
/* ⑨ 사용법 | 보안: 두 칸 같은 구조(M 2 + S 2, G3 가). 두 칸이 줄(머리 · 그림 카드 · S · S)을 subgrid 로 나눠 가져
   제목이 한 줄이든 두 줄이든 옆 칸과 같은 높이 — 그래서 S 줄 제목은 2줄 칸을 비워 두지 않는다 */
.hm-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: calc(var(--sp-gap) * 2); align-items: stretch; }
.hm-col { position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--sp-row); min-width: 0; }
.hm-col .hm-head { margin-bottom: calc(var(--sp-head) - var(--sp-row)); }
.hm-col > .hm-g2 { margin-bottom: calc(var(--sp-head) - var(--sp-row)); }
.hm-col .hm-rows { display: contents; }
.hm-col .mc-s .mc-title { min-height: 0; }
/* 면 장식(2026-10-03 운영자 '허해 보여'): 위쪽에만 옅은 격자(히어로와 같은 56px) + 양쪽 위 파랑 빛 + 칸마다 3D 오브젝트(천천히 떠오름). JS 없음 */
#home-howto { isolation: isolate; overflow: hidden; }
#home-howto::before, #home-howto::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
#home-howto::before { background-image: linear-gradient(var(--sec-grid) 1px, transparent 1px), linear-gradient(90deg, var(--sec-grid) 1px, transparent 1px); background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 0%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse 75% 85% at 50% 0%, #000 25%, transparent 75%); }
#home-howto::after { background: radial-gradient(32% 55% at 22% 0%, var(--sec-glow), transparent 70%), radial-gradient(32% 55% at 78% 0%, var(--sec-glow), transparent 70%); }
.hm-col > :not(.hm-deco) { position: relative; z-index: 1; }
.hm-deco { position: absolute; z-index: 0; top: -64px; right: 56px; width: 184px; aspect-ratio: 1; pointer-events: none;
  background: var(--l) center / contain no-repeat; mix-blend-mode: var(--deco-blend);
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
  animation: hm-float 7s ease-in-out infinite; }
.hm-col + .hm-col .hm-deco { animation-delay: -3.5s; }
:root[data-theme="dark"] .hm-deco { background-image: var(--d); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hm-deco { background-image: var(--d); } }
@keyframes hm-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .hm-deco { animation: none; } }
@media (max-width: 1100px) {
  .is-os .hm-tile-top { flex-direction: column; text-align: center; }
  .is-os .hm-tile-t { align-items: center; }
}
@media (max-width: 900px) {
  .hm-g4, .hm-tips, .hm-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-tips.has-lead > .mc-lg { grid-row: auto; }
}
@media (max-width: 760px) {
  .hm-split, .hm-two, .hm-g2 { grid-template-columns: minmax(0, 1fr); }
  .hm-col + .hm-col { margin-top: calc(var(--sp-gap) * 2); }
  .hm-sec .mc-s .mc-title { -webkit-line-clamp: 2; }
  .hm-list { grid-template-rows: none; }
  .hm-list li { padding: var(--sp-row) 0; }
  .hm-list li:first-child { border-top: 1px solid var(--line); }
}
/* 640px 이하 — 섹션별 모바일 개수(새 글 L1+S3 · 기기 5줄 · 설치 S2 · 문제 1열 + 새 글 S2 · 영상 M3 · 사용법│보안 S3). 숨긴 카드의 그림은 lazy 라 받지 않는다 */
@media (max-width: 640px) {
  .hm-list li:nth-child(n+4) { display: none; }
  .hm-g5 { grid-template-columns: minmax(0, 1fr); gap: var(--sp-row); }
  .hm-tile.is-os { flex-direction: row; align-items: center; padding: var(--sp-row) 12px; }
  .is-os .hm-tile-top { flex-direction: row; text-align: left; flex: 1; min-width: 0; }
  .is-os .hm-tile-t { align-items: flex-start; }
  .is-os .hm-tile-art { width: 48px; height: 36px; }
  .hm-os-get { margin-top: 0; padding: 0 12px; }
  .hm-os-get span { display: none; }
  .hm-os-get::after { content: "받기"; }
  .hm-os-how { display: none; }
  #home-dl .hm-g2 > :nth-child(n+3) { display: none; }
  /* 문제 8: 타일 8장 사이 틈 대신 한 상자 안 줄 목록(선으로 나눔) */
  .hm-ranks { grid-template-columns: minmax(0, 1fr); gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
  .hm-ranks .hm-tile { border: 0; border-radius: 0; min-height: 60px; }
  .hm-ranks li + li .hm-tile { border-top: 1px solid var(--line); }
  .hm-cards { grid-template-columns: minmax(0, 1fr); gap: var(--sp-row); }
  .hm-cards .mc-md { flex-direction: row; align-items: center; gap: 14px; }
  .hm-cards .mc-md .mc-art { flex: 0 0 96px; }
  .hm-cards .mc-md .mc-art:not(.is-poster) img { transform: scale(1.3); }
  .hm-cards .mc-md .mc-kicker { display: none; }
  .hm-cards .mc-md .mc-title { font-size: var(--t-s); }
  .hm-cards .mc-md .tg-dur { right: 4px; bottom: 4px; height: 18px; padding: 0 5px; gap: 3px; font-size: 11px; }
  #home-fix .hm-cards > :nth-child(n+3) { display: none; }
  /* 영상 팁: L 1(전폭) + M 2(2열) — 세 장을 한 줄씩 쌓던 것(약 900px)을 반으로(2026-10-03 5단계). L 없으면 M 4(2열 × 2줄) */
  .hm-tips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-gap) var(--sp-row); }
  .hm-tips.has-lead > .mc-lg { grid-column: 1 / -1; }
  .hm-tips.has-lead > :nth-child(n+4), .hm-tips > :nth-child(n+5) { display: none; }
  .hm-tips .mc-md .mc-title { font-size: var(--t-s); }
  .hm-tips .mc-md .tg-dur { right: 6px; bottom: 6px; height: 18px; padding: 0 5px; gap: 3px; font-size: 11px; }
  .hm-tips .mc-lg .mc-desc { display: none; }
  #home-howto .hm-rows > :nth-child(n+2) { display: none; }
  .hm-deco { top: -36px; right: 48px; width: 112px; }
  .hm-board { grid-template-columns: minmax(0, 1fr); gap: calc(var(--sp-gap) * 1.5); }
  .hm-brows > :nth-child(n+3) { display: none; }
  .hm-brows { grid-auto-rows: auto; }
  .hm-brows .hm-tile b, .hm-brows .mc-title { min-height: 0; }   /* 한 칸씩 쌓이면 칸끼리 줄을 맞출 일이 없다 — 한 줄 이름 아래 빈 줄 없앰 */
  .is-topic .hm-tile-art { width: 40px; height: 40px; }
  .hm-tile.is-topic { min-height: 72px; gap: 10px; padding: var(--sp-row); }
}
.mz-soon { display: flex; flex-direction: column; gap: 8px; min-height: 200px; justify-content: center; padding: 28px; border-radius: var(--r-l); color: var(--ink);
  background: radial-gradient(80% 100% at 100% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%), var(--soft); border: 1px dashed var(--line-2); }
.mz-soon:hover { text-decoration: none; border-color: var(--brand); }
.mz-soon b { font-size: 19px; letter-spacing: -.03em; }
.mz-soon small { font-size: 15px; color: var(--muted); }
.mz-soon span { margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--link); }
/* I. 키워드 */
.mz-kw { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: calc(var(--sp-gap) * 2); padding-top: var(--sp-gap); border-top: 1px solid var(--line); }
.mz-kw-k { margin-right: 6px; font-size: 14px; font-weight: 800; color: var(--ink); }
.mz-kw a { padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); }
.mz-kw a:hover { border-color: var(--brand); color: var(--link); text-decoration: none; }
@media (max-width: 1099px) {
  .mz-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mz-band-in { gap: 32px; }
}
@media (max-width: 900px) {
  .mz-split, .mz-band-in, .mz-band-in:has(> .mz-band-art) { grid-template-columns: minmax(0, 1fr); }
  .mz-band-art { display: none; }   /* 좁은 화면은 칩이 주인공 — 그림이 문구를 밀어내지 않게 */
  .mc-lg .mc-title { font-size: 24px; }
  .mz-band h2 { font-size: 28px; }
  .mz-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mz-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 3열이면 단계 이름이 '어디에 먼저…' 로 잘렸다 */
  .mz-rank { grid-template-columns: minmax(0, 1fr); }
  .mz-rank-n { font-size: 26px; flex-basis: 30px; }
  .mc-sm .mc-art { flex-basis: 96px; }
  .mc-row { flex-direction: column; align-items: stretch; }
  .mc-row .mc-art { flex: none; }
  .mz-band h2 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .mc-art img { transition: none; } .mc:hover .mc-art img { transform: none; } }

/* 6-7 트랙 카드 8 — 색 없이 아이콘 칸 하나 (트랙 구분은 이름·아이콘·편수로) */
.tg-tracks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tg-tcard { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--surface); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.tg-tcard:hover { text-decoration: none; border-color: var(--link); box-shadow: var(--sh-2); }
.tg-tcard-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tg-tcard-ic { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--r-m); background: var(--brand-grad); color: #fff; }
.tg-tcard-n { font-size: 12.5px; font-weight: 700; color: var(--ink-2); background: var(--soft); border: 1px solid var(--line); padding: 1px 9px; border-radius: 6px; }
.tg-tcard b { font-size: 18px; letter-spacing: -.02em; }
.tg-tcard small { font-size: 14px; color: var(--muted); line-height: 1.55; }

/* 6-8 채널 랭킹 자리 */
.tg-chlist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.tg-chlist li { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--soft); }
.tg-ch-av { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.tg-ch-t { display: flex; flex-direction: column; line-height: 1.4; }
.tg-ch-t b { font-size: 15px; color: var(--ink-2); }
.tg-ch-t small { font-size: 13px; color: var(--muted); }

/* 6-9 스티커·소식·FAQ */
/* 홈 모바일 줄이기(2026-10-03 운영자 승인 — 375px 에서 약 12,500px, 휴대폰 15화면). 칸마다 '전체 ›' 링크가 있어 나머지는 허브에서 본다 */

/* ── 7. 목록 카드 · 목록 머리 ─────────────────────────── */
.tg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 16px 0 8px; }
.tg-card { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px 18px; color: var(--ink); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.tg-card:hover { border-color: var(--link); box-shadow: var(--sh-2); text-decoration: none; }
.tg-card-board { font-size: 12.5px; color: var(--link-ink); font-weight: 700; }
.tg-card-title { font-size: 16px; line-height: 1.45; }
.tg-card-meta { font-size: 12.5px; color: var(--muted); }
.tg-phead { margin-bottom: 20px; }
.tg-phead-sub { font-weight: 400; color: var(--ink-2); font-size: .7em; }
.tg-phead-lead { color: var(--ink-2); font-size: 17px; max-width: 760px; }
.tg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.tg-chips a { border: 1px solid var(--line); border-radius: 8px; padding: 5px 13px; font-size: 14px; color: var(--ink); background: var(--surface); }
.tg-chips a:hover { border-color: var(--link); text-decoration: none; }
.tg-chips a.on { background: var(--primary); color: var(--on-brand); border-color: var(--brand); font-weight: 700; }
.tg-pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 28px 0 0; }
.tg-pager a, .tg-pager span { min-width: 38px; text-align: center; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; }
.tg-pager .on { background: var(--primary); color: var(--on-brand); border-color: var(--brand); font-weight: 700; }
.tg-list { padding-left: 20px; }
.tg-list li { margin: 4px 0; }

/* 7-1 게시판 목록 (2026-09-29 새 디자인) — 머리 · 특집 1 · 3열 그림 카드 · 쪽 번호 */
.lh { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 32px; align-items: center; overflow: hidden;
  margin: 0 0 40px; padding: 36px 40px; border-radius: var(--r-l); border: 1px solid var(--line);
  background: radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%), var(--art-bg); }
.lh.no-art { grid-template-columns: minmax(0, 1fr); }
.lh-k { font-size: 13.5px; font-weight: 700; letter-spacing: .02em; color: var(--link-ink); }   /* 목록 머리 옅은 바탕 위 4.35 → 5.3:1(2026-10-03) */
.lh h1 { margin: 8px 0 12px; font-size: 42px; line-height: 1.2; letter-spacing: -.045em; font-weight: 800; text-wrap: balance; }   /* 좁은 화면에서 끝 글자 하나만 떨어지지 않게(2026-10-03) */
.lh p { margin: 0 0 22px; max-width: 560px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.lh-copy > p:last-child { margin-bottom: 0; }   /* 소개 문단 뒤에 찾기·칩이 없는 머리(시작하기 등)는 아래가 비어 보였다(2026-10-03) */
.lh-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ah-meta + .lh-chips { margin-top: 12px; }   /* 숫자 칩과 분류 칩이 붙어 있었다(소식 목록, 2026-10-03) */
.lh-chips a { padding: 8px 16px; border-radius: 999px; font-size: 14.5px; font-weight: 650; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); }
.lh-chips a:hover { border-color: var(--brand); color: var(--link); text-decoration: none; }
.lh-chips a small { margin-left: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.lh-chips a.on small { color: var(--on-brand); }
.lh-chips a.on { background: var(--primary); border-color: transparent; color: var(--on-brand); box-shadow: 0 8px 18px -10px rgba(31,122,192,.8); }   /* 공식 파랑 위 흰 글자 3.5:1 → --primary 4.6:1(2026-10-03) */
.lh-art { display: block; aspect-ratio: 2 / 1; margin: -10px -12px -10px 0; }
.lh-art img { display: block; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: radial-gradient(ellipse 72% 80% at 55% 50%, #000 60%, transparent 100%); mask-image: radial-gradient(ellipse 72% 80% at 55% 50%, #000 60%, transparent 100%); }
/* 둥근 흐림만으로는 변 가운데가 다 지워지지 않아 그림 바탕(밝은 면)이 머리의 파란 기운 위에 사각형으로 보였다(2026-10-03 모바일 점검)
   → 네 변 8% 띠에서 0 으로 가는 흐림을 겹친다(교집합) */
@supports (mask-composite: intersect) {
  .lh-art img { mask-image: radial-gradient(ellipse 72% 80% at 55% 50%, #000 60%, transparent 100%), linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
    mask-composite: intersect; }
}

.ls-feature { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.ls-feature .mc-row .mc-art { flex-basis: 52%; border-radius: var(--r-l); }
.ls-feature .mc-row .mc-title { font-size: 28px; line-height: 1.3; letter-spacing: -.04em; font-weight: 800; -webkit-line-clamp: 3; }
.ls-feature .mc-row .mc-desc { -webkit-line-clamp: 3; font-size: 16px; }
.ls-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; }
/* 목록 첫 쪽 맨 위 블록(boards.*.first · popular, 2026-10-02) */
.ls-top { margin: 8px 0 48px; }
.ls-first-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; padding: 18px 20px; border: 1px solid var(--blue-line); border-radius: var(--r-l); background: var(--blue-soft); --link: var(--link-ink); }   /* 옅은 파랑 면 위 분류 글자 4.15 → 5:1 */
.ls-pop-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 22px; }
.ls-all-h { margin: 60px 0 0; }   /* 머리는 hm-head(아래 여백 --sp-head) — 위 섹션과 tg-sec 같은 간격 */
.ls-pop-g.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .ls-pop-g, .ls-pop-g.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ls-first-g { grid-template-columns: minmax(0, 1fr); } .ls-pop-g, .ls-pop-g.is-3 { grid-template-columns: minmax(0, 1fr); } }
.ls-grid .mc-md .mc-title { font-size: 18px; }
.ls-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 56px 0 0; }
.ls-pg-nums { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); }
.ls-pg-nums a, .ls-pg-nums span { min-width: 40px; height: 40px; padding: 0 12px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 15px; font-weight: 650; color: var(--ink-2); }
.ls-pg-nums a:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
.ls-pg-nums .on { background: var(--primary); color: var(--on-brand); box-shadow: 0 6px 14px -8px rgba(31,122,192,.8); }
.ls-pg-nums .ls-pg-gap { min-width: 0; padding: 0 2px; color: var(--muted); }
.ls-pg-nums .is-mb { display: none; }
.ls-pg-edge { display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 15px; font-weight: 650; }
.ls-pg-edge:hover { border-color: var(--brand); color: var(--link); text-decoration: none; }
@media (max-width: 1099px) { .ls-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lh { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); } }
@media (max-width: 900px) {
  .lh { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; }
  .lh-art { order: -1; margin: -12px -8px 0; }
  .lh h1 { font-size: 32px; }
  .ls-feature .mc-row { flex-direction: column; align-items: stretch; }
  .ls-feature .mc-row .mc-art { flex: none; }
  .ls-feature .mc-row .mc-title { font-size: 23px; }
}
@media (max-width: 640px) {
  .lh { border-radius: var(--r-l); margin-bottom: 28px; }
  .lh h1 { font-size: 28px; }
  .lh p { font-size: 15.5px; }
  /* 소식 목록(ls-news): 첫 화면에 소식이 없었다(832px) — 표지·숫자 칩(최근 발표일 = 첫 카드 날짜, 모은 기간 = 연도 칩) 숨김, 연도 칩 4줄 → 작게(2026-10-03) */
  .ls-news .lh-art, .ls-news .ah-meta { display: none; }
  .ls-news .lh-chips { gap: 6px; }
  .ls-news .lh-chips a { padding: 6px 11px; font-size: 13.5px; }
  /* 게시판 목록 머리(ls-hd) 모바일(2026-10-03 운영 가이드 점검): 허브 표지 그림 190px + 분류 칩 5줄 → 첫 글 918px.
     표지 숨김 · 분류 칩 한 줄 가로 밀기(고른 칩은 '전체' 바로 뒤로). 소식(연도 칩)은 위 규칙대로 여러 줄 */
  .ls-hd .lh-art { display: none; }
  .ls-hd:not(.ls-news) .lh-chips { flex-wrap: nowrap; overflow-x: auto; margin-right: -22px; padding: 2px 22px 2px 0;   /* 머리 카드 안쪽 여백(22px)까지 — 카드 테두리에서 잘린다 */ scrollbar-width: none; }
  .ls-hd:not(.ls-news) .lh-chips::-webkit-scrollbar { display: none; }
  .ls-hd:not(.ls-news) .lh-chips a { flex: none; padding: 6px 12px; font-size: 13.5px; }
  .ls-hd:not(.ls-news) .lh-chips a:first-child { order: -2; }
  .ls-hd:not(.ls-news) .lh-chips a.on:not(:first-child) { order: -1; }
  .ls-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ls-pg-edge span { display: none; }
  .ls-pg-edge { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .ls-pg-nums a, .ls-pg-nums span { min-width: 36px; height: 36px; padding: 0 8px; }
  .ls-pg-nums .ls-pg-gap { min-width: 0; padding: 0 1px; }
  .ls-pg-nums .is-far, .ls-pg-nums .is-dk { display: none; }
  .ls-pg-nums .is-mb { display: inline-grid; }   /* 모바일은 지금 쪽 앞뒤 1쪽 + 첫·마지막 쪽(1 … 9 10 11 … 21) — 앞뒤 3쪽이면 403px 로 넘쳤다 */
  .ls-pager { gap: 8px; }
}

/* 8-1 허브 (2026-09-30 새 디자인) — 머리는 목록(.lh)과 같은 틀 + 진행 막대, 목차는 썸네일 가로 카드 2열 */
.hb-stat { display: flex; flex-direction: column; gap: 10px; max-width: 460px; }
.hb-num { font-size: 15px; color: var(--ink-2); }
.hb-num b { font-size: 34px; font-weight: 800; letter-spacing: -.04em; color: var(--link); margin-right: 2px; }
.hb-num small { font-size: 14px; color: var(--muted); }
.hb-bar { display: block; height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.hb-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2AABEE, #1F7AC0); }
.hb-mod { margin-top: 48px; }
.hb-mod-h { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.hb-mod-code { display: inline-grid; place-items: center; min-width: 44px; height: 30px; padding: 0 10px; border-radius: 10px; font-size: 13px; font-weight: 800; color: #fff; background: var(--brand-grad); }
.hb-mod-h h2 { margin: 0; font-size: 24px; letter-spacing: -.035em; }
.hb-mod .hm-head { align-items: flex-end; }
.hb-mod-n { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--muted); }
.hb-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.hb-item { margin: 0; min-width: 0; }
.hb-item a { display: flex; align-items: center; gap: 14px; height: 100%; padding: 12px 16px 12px 12px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  transition: border-color .2s, box-shadow .2s, transform .2s; }
.hb-item a:hover { text-decoration: none; border-color: var(--blue-line); box-shadow: var(--sh-2); transform: translateY(-2px); }
.hb-item a:hover b { color: var(--link); }
.hb-n { flex: 0 0 38px; font-size: 22px; font-weight: 800; letter-spacing: -.04em; text-align: center; color: var(--link-ink); }   /* 공식 파랑 외곽선 글자 → 강조 글자(2026-10-03) */
.hb-art { flex: 0 0 120px; aspect-ratio: 16 / 9; border-radius: var(--r-m); overflow: hidden; background: var(--thumb-bg); border: 1px solid var(--thumb-line); }
.hb-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hb-t { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.hb-t b { font-size: 15.5px; line-height: 1.42; font-weight: 700; letter-spacing: -.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s; }
.hb-t small { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.hb-t em { font-style: normal; font-weight: 800; font-size: 11.5px; padding: 1px 7px; border-radius: 6px; color: var(--ink-2); border: 1px solid var(--line-2); }
.hb-item.is-wait { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 18px; border: 1px dashed var(--line-2); background: transparent; }
.hb-item.is-wait .hb-n { color: var(--muted); }
.hb-n.is-dot { color: var(--muted); font-size: 26px; }   /* 부록 행(번호 밖) */
.hb-item.is-wait b { font-weight: 500; color: var(--muted); }
.hb-wait { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--muted); padding: 3px 10px; border-radius: 999px; background: var(--soft); }
/* 같은 허브에 붙는 다른 트랙(사용법 ← 프리미엄): 머리의 바로 가기 + 절 머리 */
.hb-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* 섹션 내비 (docs/NAV_PLAN.md 3-3) — 섹션 홈 + 주제 칩 한 줄. 넘치면 가로로 민다(줄바꿈 없음). 지금 주제 = 파랑 채움 */
.tg-snav { display: flex; gap: 6px; margin: 0 0 24px; padding: 2px 2px 8px; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.tg-snav a { flex: none; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2);
  font-size: 14px; font-weight: 650; white-space: nowrap; }
.tg-snav a:hover { border-color: var(--brand); color: var(--link); text-decoration: none; }
.tg-snav a.on { background: var(--primary); border-color: var(--primary); color: var(--on-brand); }
.tg-snav .tg-snav-home { background: var(--soft); color: var(--ink); }
.lh + .tg-snav { margin-top: -12px; }
.tg-crumb + .tg-snav { margin: -6px 0 18px; }

/* 허브 주제 카드 (3-4) — 이름·글 수 · 한 줄 설명 · 대표 글 3 · 모두 보기. 그림 없이 글자만(같은 그림 반복 금지) */
.tp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tp-card { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 18px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface);
  scroll-margin-top: 16px; }
.tp-card h3 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.tp-card h3 a { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--ink); }   /* 편수까지 링크(2026-10-03) */
.tp-card h3 a:hover { text-decoration: none; }
.tp-card h3 a:hover span { color: var(--link); }
.tp-card h3 small { flex: none; color: var(--muted); font-size: 13px; font-weight: 700; }
.tp-card p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.tp-card ul { flex: 1; margin: 4px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.tp-card li a { display: block; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.tp-card li a:hover { color: var(--link); text-decoration: none; }
.tp-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--link); font-size: 14px; font-weight: 700; }
.tp-card:hover { border-color: var(--line-2); }
.tp-sec:first-of-type { margin-top: 40px; }
.hb-pop { margin-top: 40px; }
/* 모바일 '많이 찾는 글'(허브 · 게시판 목록 첫 쪽) = 작은 가로 카드 — 큰 카드 6장이 2,000px 넘게 차지하던 것(2026-10-03 운영자 승인) */
@media (max-width: 600px) {
  .hb-pop .ls-grid, .ls-pop-g, .ls-grid { gap: 14px; }
  .hb-pop .mc-md, .ls-pop-g .mc-md { flex-direction: row; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
  .hb-pop .mc-md:last-child, .ls-pop-g .mc-md:last-child { padding-bottom: 0; border-bottom: 0; }
  .hb-pop .mc-md .mc-art, .ls-pop-g .mc-md .mc-art { flex: 0 0 112px; aspect-ratio: 16 / 9; border-radius: 12px; }
  .hb-pop .mc-md .mc-art:not(.is-poster) img, .ls-pop-g .mc-md .mc-art:not(.is-poster) img { transform: scale(1.3); }
  .hb-pop .mc-md .mc-title, .ls-pop-g .mc-md .mc-title { font-size: 15px; }
  .hb-pop .mc-md .mc-desc, .ls-pop-g .mc-md .mc-desc { display: none; }
  /* 전체 글(.ls-grid)도 같은 작은 가로 카드(2026-10-03 보안 허브 점검 — 큰 그림 18장 6,066px) */
  .ls-grid .mc-md { flex-direction: row; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
  .ls-grid .mc-md:last-child { padding-bottom: 0; border-bottom: 0; }
  .ls-grid .mc-md .mc-art { flex: 0 0 112px; aspect-ratio: 16 / 9; border-radius: var(--r-m); }
  .ls-grid .mc-md .mc-art:not(.is-poster) img { transform: scale(1.3); }
  .ls-grid .mc-md .mc-title { font-size: 15px; }
  .ls-grid .mc-md .mc-desc { display: none; }
  .ls-grid .mc-md .mc-kicker { display: none; }   /* 한 게시판 목록 안에서는 줄마다 같은 분류 이름 — 모바일에서 뺌 */
  .ls-grid .mc-md .tg-dur { right: 6px; bottom: 6px; height: 18px; padding: 0 5px; gap: 3px; font-size: 11px; }
  .hb-pop .mc-md .tg-dur, .ls-pop-g .mc-md .tg-dur { right: 6px; bottom: 6px; height: 18px; padding: 0 5px; gap: 3px; font-size: 11px; }
}
/* 주제 카드 마지막 줄 — 빈칸 없이 남는 폭을 나눠 갖는다(2026-10-03 사용법 허브 점검: 5개 = 3 + 2 · 2개 = 3칸 중 2칸).
   1100px 이상 6칸 격자에 카드 2칸씩 → 마지막 줄 2장이면 3칸씩 · 1장이면 6칸. 641~1099px 2열 → 홀수면 마지막 1장이 한 줄 */
@media (min-width: 1100px) {
  .tp-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tp-grid > .tp-card { grid-column: span 2; }
  .tp-grid > .tp-card:nth-child(3n+1):nth-last-child(2), .tp-grid > .tp-card:nth-child(3n+1):nth-last-child(2) + .tp-card { grid-column: span 3; }
  .tp-grid > .tp-card:nth-child(3n+1):last-child { grid-column: 1 / -1; }
}
@media (max-width: 1099px) { .tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tp-grid > .tp-card:nth-child(odd):last-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .tp-grid { grid-template-columns: minmax(0, 1fr); } .tp-card { padding: 18px; } .lh + .tg-snav { margin-top: 0; }
  .tp-card p, .tp-card .tp-more { display: none; }   /* 모바일: 소개 한 줄 · 'N편 모두 보기' 숨김 — 제목이 주제 쪽 링크이고 편수가 붙어 있다(카드 283px × 18 → 7,408px) */
  /* 모바일에선 제목이 주제 쪽 유일한 길인데 링크처럼 안 보였다 → 제목 링크 색 + 'N편 ›' · 숨긴 '모두 보기' 대신 마지막 글 아래 선 없앰(2026-10-03) */
  .tp-card h3 a span { color: var(--link); }
  .tp-card h3 small::after { content: ' ›'; }
  .tp-card li:last-child a { border-bottom: 0; padding-bottom: 0; }
  .fq-hd .lh-art, .fq-hd .ah-meta { display: none; }   /* FAQ — 첫 화면에 질문이 없었다(많이 찾는 질문 848/840px). 질문·주제 수는 바로 아래 주제 칩에 있다(2026-10-03) */
  .hb-start .lh-art { display: none; }   /* 시작하기 허브도 — 첫 화면에 12단계가 1단계 하나뿐이었다(2026-10-03) */
  .hb-fix .lh-art { display: none; }   /* 문제 해결 허브도 — 문제 순위 1위가 첫 화면 끝에 걸쳤다(360px 788/780, 2026-10-03) */
  .hb-howto .lh-art { display: none; }   /* 사용법 허브: 첫 화면에 글이 없었다(많이 찾는 글 691/732px) — 표지 그림 빼고 소개·묶음 칩·많이 찾는 글 */
  .tp-hd .lh-art { display: none; }   /* 주제 페이지도 — 허브와 같은 표지라 첫 화면에 글이 2편뿐이었다(첫 글 615px, 2026-10-03) */
}
/* 좁은 화면은 칩 줄이 넘치므로 지금 주제를 '홈' 바로 뒤로 당겨 첫 화면에 보이게 한다(JS 없이) */
@media (max-width: 900px) { .tg-snav .tg-snav-home { order: -2; } .tg-snav a.on, .ch-nav a.on { order: -1; } }
.hb-jump a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 700; }
.hb-jump a:hover { text-decoration: none; border-color: var(--blue-line); color: var(--link); }
.hb-jump small { font-weight: 600; color: var(--muted); }
.hb-also { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.hb-also-h { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.hb-also-h h2 { margin: 0; font-size: 30px; letter-spacing: -.04em; }
.hb-also-h .hb-num { margin: 0; }
.hb-also-h .hb-num b { font-size: 26px; }
@media (max-width: 900px) { .hb-list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .hb-art { flex-basis: 88px; }
  .hb-n { flex-basis: 28px; font-size: 18px; }
  .hb-item a, .hb-item.is-wait { gap: 10px; padding: 10px 12px 10px 8px; }
  .hb-mod-h h2 { font-size: 20px; }
  .hb-num b { font-size: 28px; }
}

/* 8-2 검색 결과 (2026-09-30 새 디자인) */
.sh { position: relative; isolation: isolate; overflow: hidden; margin: 0 0 32px; padding: 44px 40px 36px; border-radius: 26px; border: 1px solid var(--line); text-align: center;
  background: radial-gradient(60% 120% at 50% -20%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 65%), var(--art-bg); }
.sh-k { font-size: 13.5px; font-weight: 700; letter-spacing: .02em; color: var(--link); }
.sh h1 { margin: 8px 0 22px; font-size: 36px; line-height: 1.25; letter-spacing: -.045em; font-weight: 800; }
.sh h1 em { font-style: normal; background: linear-gradient(100deg, #2AABEE, #1F7AC0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sh-form { max-width: 640px; margin: 0 auto; }
.sh-form input { height: 64px; border-radius: 20px; border-color: rgba(10,50,100,.08); box-shadow: 0 22px 44px -24px rgba(20,90,160,.45), 0 2px 6px rgba(10,40,80,.06); }
.sh-form button { width: 50px; height: 50px; border-radius: 14px; right: 7px; }
.sh-pop { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 18px; }
.sh-pop span { font-size: 13.5px; font-weight: 700; color: var(--muted); margin-right: 4px; }
.sh-pop a { padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); }
.sh-pop a:hover { border-color: var(--brand); color: var(--link); text-decoration: none; }
.sr-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.sr-count { margin: 0; font-size: 15px; color: var(--muted); }
.sr-count b { font-size: 26px; font-weight: 800; letter-spacing: -.04em; color: var(--ink); margin-right: 2px; }
.sr-facets small { font-size: 12.5px; font-weight: 700; opacity: .7; margin-left: 2px; }
.sr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sr-list li { margin: 0; }
.sr-item { display: flex; align-items: flex-start; gap: 20px; padding: 16px; margin: 0 -16px; border-radius: 18px; color: var(--ink); transition: background .2s; }
.sr-item:hover { text-decoration: none; background: var(--soft); }
.sr-item:hover b { color: var(--link); }
.sr-art { position: relative; flex: 0 0 200px; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--art-bg); border: 1px solid var(--line); }
.sr-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sr-art .tg-dur { right: 8px; bottom: 8px; }
.sr-t { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; padding-top: 2px; }
.sr-t b { font-size: 18px; line-height: 1.42; font-weight: 700; letter-spacing: -.025em; transition: color .2s; }
.sr-t small { font-size: 15px; line-height: 1.6; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-t em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.sr-t mark, .sr-t b mark { color: inherit; background: color-mix(in srgb, var(--brand) 22%, transparent); border-radius: 4px; padding: 0 2px; }
.sr-more { margin: 32px 0 0; text-align: center; }
.sr-more a { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 26px; border-radius: 999px; font-weight: 700; color: var(--link); background: var(--surface); border: 1px solid var(--line-2); }
.sr-more a:hover { border-color: var(--brand); text-decoration: none; }
.sr-empty { padding: 8px 0 0; }
.sr-empty h2 { font-size: 24px; letter-spacing: -.035em; margin: 0 0 8px; }
.sr-empty > p { margin: 0 0 24px; color: var(--muted); }
@media (max-width: 640px) {
  .sh { padding: 28px 18px 24px; border-radius: 20px; }
  .sh h1 { font-size: 26px; }
  .sh-form input { height: 56px; border-radius: 16px; }
  .sh-form button { width: 44px; height: 44px; }
  .sr-item { gap: 12px; padding: 12px; margin: 0 -12px; }
  .sr-art { flex-basis: 108px; }
  .sr-t b { font-size: 15.5px; }
  .sr-t small { display: none; }
  /* 검색 결과 모바일(2026-10-03): 첫 결과가 786px(첫 화면 밖) — 결과가 있으면 '많이 찾는 것' 숨김, 게시판 칩은 건수 옆 한 줄 가로 밀기 */
  .sh.has-res { padding-bottom: 20px; }
  .sh.has-res .sh-pop { display: none; }
  .sh.has-res h1 { margin-bottom: 16px; }
  .sr-bar { flex-wrap: nowrap; gap: 12px; margin-bottom: 8px; padding-bottom: 12px; }
  .sr-count { flex: none; }
  .sr-facets { flex-wrap: nowrap; min-width: 0; overflow-x: auto; margin-right: -16px; padding: 2px 16px 2px 0; scrollbar-width: none; }
  .sr-facets::-webkit-scrollbar { display: none; }
  .sr-facets a { flex: none; padding: 6px 12px; font-size: 13.5px; }
  .sr-facets a:first-child { order: -2; }   /* 고른 게시판 칩은 '전체' 바로 옆으로 — 한 줄 밀기라 뒤쪽 칩을 고르면 화면 밖에 있었다 */
  .sr-facets a.on:not(:first-child) { order: -1; }
  .sr-item.is-desc .sr-t small { display: -webkit-box; font-size: 13px; line-height: 1.5; }   /* 제목에 검색어가 없는 결과는 맞은 설명을 보여 준다 */
}

/* 9-0 글 머리 (2026-09-30 새 디자인) */
.ah { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 36px; align-items: center; overflow: hidden;
  margin: 0 0 40px; padding: 36px 40px; border-radius: 26px; border: 1px solid var(--line);
  background: radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 60%), var(--art-bg); }
.ah.no-art { grid-template-columns: minmax(0, 1fr); }
.ah-k { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; }
.ah-k a { color: var(--link); }
.ah-step { display: inline-flex; align-items: baseline; gap: 3px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; letter-spacing: .03em; color: #fff; background: var(--brand-grad); }
.ah-step small { font-weight: 600; opacity: .85; }
.ah h1 { margin: 12px 0 14px; font-size: 38px; line-height: 1.24; letter-spacing: -.045em; font-weight: 800; }
.ah-desc { margin: 0 0 20px; max-width: 620px; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ah-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ah-meta li { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px; border-radius: 10px; font-size: 13px; background: var(--surface); border: 1px solid var(--line); }
.ah-meta span { color: var(--muted); }
.ah-meta b { color: var(--ink); font-weight: 700; }
.ah-art { display: block; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: var(--thumb-bg); border: 1px solid var(--thumb-line); }
.ah-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 목차: 지금 읽는 절 */
.tg-toc a.on { color: var(--link); font-weight: 700; border-left-color: var(--brand); }
.tg-progress > b em { font-style: normal; font-size: 26px; font-weight: 800; letter-spacing: -.04em; color: var(--link); }
.tg-side-in > .tg-progress + .tg-toc { margin-top: 24px; }
.tg-side-in > .tg-progress { margin-top: 0; }
/* 참고 문서 링크 칩 */
.tg-sources ul { list-style: none; margin: 0; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; }
.tg-sources li { margin: 0; }
.tg-sources a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 10px; font-size: 14px; color: var(--ink-2); background: var(--soft); border: 1px solid var(--line); text-decoration: none; }
.tg-sources a:hover { border-color: var(--brand); color: var(--link); }
.tg-sources a svg { color: var(--muted); }
.ar-rel { padding-top: 48px; border-top: 1px solid var(--line); }
@media (max-width: 1099px) { .ah { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); } }
@media (max-width: 900px) {
  .ah { grid-template-columns: minmax(0, 1fr); padding: 24px 22px; }
  .ah-art { order: -1; }
  .ah h1 { font-size: 30px; }
}
@media (max-width: 640px) {
  .ah { border-radius: 20px; margin-bottom: 28px; padding: 20px 18px; }
  .ah h1 { font-size: 26px; }
  .ah-desc { font-size: 15px; }
  .ah-art { width: 52%; }   /* 글 썸네일은 모바일에서 작게(높이 절반 — 본문 '결론부터'가 첫 화면 아래였다, 2026-10-03 운영자 '작게') */
  .ah-meta li { padding: 5px 10px; font-size: 12.5px; }
}

/* ── 8. 허브 ─────────────────────────────────────────── */
.tg-hubhead { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 32px; align-items: center; padding: 28px 32px; border: 1px solid var(--line);
  border-radius: var(--r-xl); background: linear-gradient(135deg, var(--soft), var(--bg) 62%); margin-bottom: 32px; }
.tg-hubhead.no-art { grid-template-columns: minmax(0, 1fr); }
.tg-hubhead h1 { font-size: 34px; margin: 8px 0 10px; }
.tg-hubhead p { color: var(--ink-2); font-size: 17px; margin: 0 0 10px; max-width: 640px; }
.tg-hubhead .tg-hubstat { font-size: 14.5px; color: var(--muted); margin: 0; }
.tg-hubhead .tg-hubstat b { color: var(--ink); }
.tg-hubhead-art { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--r-l); background: var(--surface); }
.tg-hubmod { margin-top: 36px; }
.tg-hubmod h2 { display: flex; align-items: center; gap: 10px; font-size: 21px; margin-bottom: 14px; }
.tg-hubmod h2 span { font-size: 13px; font-weight: 800; color: var(--link-ink); background: var(--blue-soft); border: 1px solid var(--blue-line); padding: 1px 10px; border-radius: 6px; }
.tg-rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.tg-rows li + li { border-top: 1px solid var(--line); }
.tg-rows li > a, .tg-rows li.is-wait { display: flex; align-items: center; gap: 16px; padding: 14px 20px; color: var(--ink); }
.tg-rows li > a:hover { background: var(--soft); text-decoration: none; }
.tg-rows-n { flex: 0 0 38px; height: 38px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px;
  background: var(--primary); color: #fff; }
.is-wait .tg-rows-n { background: var(--soft); color: var(--muted); border: 1px solid var(--line); }
.tg-rows-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.45; }
.tg-rows-t b { font-size: 16px; font-weight: 700; }
.is-wait .tg-rows-t b { font-weight: 500; color: var(--ink-2); }
.tg-rows-t small { font-size: 13px; color: var(--muted); }
.tg-lv { font-size: 12px; font-weight: 800; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 1px 7px; }
.tg-wait { font-size: 12.5px; font-weight: 700; color: var(--muted); background: var(--soft); border: 1px solid var(--line); border-radius: 6px; padding: 2px 10px; white-space: nowrap; }
.tg-rows-go { color: var(--link); display: inline-flex; }

/* ── 9. 글 (본문 760 + 사이드 280) ─────────────────────── */
.tg-doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.tg-article { min-width: 0; max-width: 760px; }

.tg-metabar { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--muted); padding: 11px 0; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.tg-metabar b { color: var(--ink); font-weight: 700; margin-right: 5px; }
.tg-lead { position: relative; margin: 0 0 32px; padding: 22px 24px 20px; border-radius: 20px; border: 1px solid var(--blue-line);
  background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 60%), var(--blue-soft); }
.tg-lead-h { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 15px; font-weight: 800; color: var(--link); }
.tg-lead-h span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: var(--brand-grad); }
.tg-lead ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tg-lead li { display: flex; gap: 12px; align-items: flex-start; margin: 0; font-weight: 600; line-height: 1.6; }
.tg-lead li b { flex: 0 0 26px; height: 26px; margin-top: 1px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--link); background: var(--surface); border: 1px solid var(--blue-line); }
.tg-toc-m { border: 1px solid var(--line); border-radius: var(--r-m); padding: 0 18px; margin-bottom: 28px; background: var(--surface); }
.tg-toc-m summary { display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; font-weight: 700; font-size: 15px; list-style: none; }
.tg-toc-m summary::-webkit-details-marker { display: none; }
.tg-toc-m summary::after { content: "펼치기"; margin-left: auto; font-size: 13px; color: var(--muted); font-weight: 600; }
.tg-toc-m[open] summary::after { content: "접기"; }
.tg-toc-m ol { margin: 0 0 14px; padding-left: 22px; font-size: 15px; }
.tg-toc-m li { margin: 4px 0; }
.ah-meta:not(:has(li)) { display: none; }   /* 칩이 하나도 없으면 빈 줄을 남기지 않는다 */
@media (max-width: 640px) { .tg-crumb-cur { display: none; } }
.tg-side { display: none; }

/* 9-1 본문 (.tg-post 안) */
.tg-post > :first-child { margin-top: 0; }
/* 소식(공식 블로그 옮김) 그림·영상 — 세로 휴대폰 화면이 많아 높이를 묶고 가운데 */
.tg-post .nw-fig, .tg-post .nw-video { margin: 0 0 1.3em; text-align: center; }
/* 소식 그림·영상: 원고에 width·height(tools/news_dims.py), 화면에 --w(원래 폭)·--r(가로/세로 비)(ArticleRenderer, 2026-10-03).
   폭 = min(칸, 원래 폭, 높이 제한 × 비율), 높이 = 비율대로 → 불러오기 전에 자리가 잡히고, 세로로 긴 그림도 상자 양옆이 비지 않는다 */
.tg-post .nw-fig img { display: inline-block; width: auto; max-width: 100%; max-height: 78vh; height: auto; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--art-bg); }
.tg-post .nw-video video { display: inline-block; max-width: 100%; max-height: 72vh; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--art-bg); }
.tg-post .nw-fig img[style*='--r'] { width: min(100%, var(--w), calc(78vh * var(--r))); max-height: none; }
.tg-post .nw-video video[style*='--r'] { width: min(100%, var(--w), calc(72vh * var(--r))); height: auto; max-height: none; }
.tg-post blockquote { margin: 0 0 1.2em; padding: 12px 16px; border-left: 3px solid var(--brand); background: var(--soft); border-radius: 0 var(--r-m) var(--r-m) 0; }
.tg-post blockquote p:last-child { margin-bottom: 0; }
.nw-credit { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; margin: 0 0 24px; padding: 12px 16px; border-radius: var(--r-m); border: 1px solid var(--blue-line); background: var(--blue-soft); font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.nw-credit > svg { flex: 0 0 auto; margin-top: 3px; color: var(--link); }
.nw-credit > span { flex: 1 1 260px; }
.nw-credit a { color: var(--link); font-weight: 700; }
.nw-credit .nw-src { margin-left: auto; white-space: nowrap; }
@media (max-width: 640px) {   /* 안내 상자 126px — '원문 보기' 가 따로 한 줄이라 본문 첫 문장이 첫 화면 밖(816px)이었다 → 한 덩어리 글로, 링크는 문장 끝에(2026-10-03) */
  .nw-credit { display: block; margin-bottom: 16px; padding: 10px 12px; font-size: 13px; line-height: 1.55; }
  .nw-credit > svg { display: inline-block; vertical-align: -3px; margin: 0 4px 0 0; }
  .nw-credit .nw-src { margin-left: 6px; }
}
.tg-post h2 { font-size: 25px; margin: 48px 0 16px; padding-top: 24px; border-top: 1px solid var(--line); }
.tg-post h3 { font-size: 19.5px; margin: 32px 0 10px; }
.tg-post p { margin: 0 0 1.15em; }
.tg-post ul, .tg-post ol { margin: 0 0 1.2em; padding-left: 24px; }
.tg-post li { margin: .35em 0; }
.tg-post li::marker { color: var(--link); font-weight: 700; }
.tg-post strong, .tg-post b { font-weight: 700; }
.tg-post code { font-family: var(--mono); font-size: .88em; background: var(--soft); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }
.tg-post pre { font-family: var(--mono); font-size: 14px; line-height: 1.6; background: var(--navy); color: #E6EEF6; border-radius: var(--r-m); padding: 16px 18px; overflow-x: auto; margin: 0 0 1.3em; }
.tg-post pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.tg-post kbd { font-family: var(--mono); font-size: .85em; padding: 1px 7px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); }
.tg-post blockquote { margin: 0 0 1.3em; padding: 12px 20px; border-left: 3px solid var(--line-2); background: var(--soft); border-radius: 0 var(--r-s) var(--r-s) 0; color: var(--ink-2); }
.tg-post blockquote p:last-child { margin: 0; }
.tg-post table { border-collapse: collapse; width: 100%; margin: 0 0 1.4em; font-size: 15.5px; line-height: 1.6; }
.tg-post th, .tg-post td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.tg-post th { background: var(--soft); font-weight: 700; }
.tg-post img { border-radius: var(--r-s); }
.tg-post hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.tg-post a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(15,106,163,.4); }
.tg-placeholder { color: var(--warn-ink); background: var(--warn-soft); padding: 10px 14px; border-radius: var(--r-s); font-size: 15px; }

/* 9-2 .tg-path 경로 칩 — 라디오 + CSS 탭(JS 없음). 탭 순서 = 창 순서 (PC · 안드로이드 · iOS) */
.tg-path { position: relative; display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 1.3em; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--soft); }
.tg-path > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tg-path > label { flex: 1 1 0; min-width: 0; text-align: center; padding: 7px 10px; border-radius: 7px; font-size: 14.5px; font-weight: 700; color: var(--muted); cursor: pointer; }
.tg-path > label:hover { color: var(--ink); }
.tg-path > input:checked + label { background: var(--surface); color: var(--link-ink); box-shadow: var(--sh-1), 0 0 0 1px var(--line); }
.tg-path > input:focus-visible + label { outline: 3px solid rgba(34,158,217,.6); outline-offset: 1px; }
.tg-path__pane { display: none; flex: 0 0 100%; padding: 12px 8px 6px; }
.tg-path > input:nth-of-type(1):checked ~ .tg-path__pane:nth-of-type(1),
.tg-path > input:nth-of-type(2):checked ~ .tg-path__pane:nth-of-type(2),
.tg-path > input:nth-of-type(3):checked ~ .tg-path__pane:nth-of-type(3) { display: block; }
.tg-path__pane ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 0; padding: 0; }
.tg-path__pane li { display: inline-flex; align-items: center; margin: 0; }
.tg-path__pane li + li::before { content: "›"; margin: 0 8px; color: var(--muted); font-weight: 700; }
.tg-path__pane li::marker { content: none; }
.tg-path__pane li > span, .tg-path__pane li > a { display: inline-block; padding: 5px 12px; border-radius: 7px; background: var(--surface); border: 1px solid var(--line-2); font-size: 14.5px;
  font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1.5; }
.tg-path__pane li:first-child > span, .tg-path__pane li:first-child > a { background: var(--blue-soft); border-color: var(--blue-line); color: var(--link-ink); }
.tg-path__pane li:last-child > span, .tg-path__pane li:last-child > a { background: var(--primary); border-color: var(--primary); color: var(--on-brand); }
.tg-path__pane li > a:hover { border-color: var(--link); }
.tg-path__pane p { margin: 10px 0 0; font-size: 14px; color: var(--muted); }

/* 9-3 .tg-fig 스크린샷 + 번호 설명 (PC: 옆 · 모바일: 아래). 마크업은 tools/screenshots/render_figure.py 가 만든다
   img width/height = 표시 크기(캡처 ÷ 2) — 그 크기보다 키우지 않는다. 번호 색 = 그림 속 원 색(li.is-red|blue|green|gray) */
.tg-fig { margin: 0 0 1.5em; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.tg-fig > img, .tg-fig__scroll > img { display: block; width: auto; max-width: 100%; max-height: 720px; height: auto; margin: 0 auto; border-radius: var(--r-s); background: var(--soft); border: 1px solid var(--line); }
.tg-fig__scroll { display: block; }
.tg-fig__hint { display: none; }
.tg-fig figcaption { margin-top: 12px; font-size: 15px; color: var(--ink-2); line-height: 1.6; }
.tg-fig figcaption > b { display: block; color: var(--ink); margin-bottom: 6px; }
.tg-fig .tg-fig__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tg-fig .tg-fig__legend li { position: relative; padding-left: 34px; margin: 0; }
.tg-fig .tg-fig__legend li::marker { content: none; }
.tg-fig__n { position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; background: var(--fig-red); color: #fff; font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; }
.tg-fig .is-blue .tg-fig__n { background: var(--fig-blue); }
.tg-fig .is-green .tg-fig__n { background: var(--fig-green); }
.tg-fig .is-gray .tg-fig__n { background: var(--fig-gray); }
.tg-fig .tg-fig__note { margin: 10px 0 0; font-size: 14px; color: var(--muted); }

/* 9-3b .tg-video 공식 영상 ([[video:이름|설명]] → AssetController::videoHtml). 세로·정사각 영상이 화면을 다 먹지 않게 높이 제한 */
.tg-video { margin: 0 0 1.5em; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--soft); }
.tg-video > video { display: block; width: auto; max-width: 100%; max-height: 560px; height: auto; margin: 0 auto; border-radius: var(--r-s); background: #000; }
.tg-video figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); text-align: center; }
.tg-video figcaption > span { display: block; }
.tg-video .tg-video__len { margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* 9-4 .tg-callout (is-info · is-warn · is-danger · is-ok) — 상태색은 여기서만 */
.tg-callout { position: relative; margin: 0 0 1.3em; padding: 14px 18px 14px 52px; border-radius: var(--r-m); background: var(--blue-soft); border: 1px solid var(--blue-line); font-size: 16px; }
.tg-callout::before { content: ""; position: absolute; left: 18px; top: 16px; width: 22px; height: 22px; background: var(--link);
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E"); }
.tg-callout > b:first-child, .tg-callout > strong:first-child { display: block; margin-bottom: 2px; }
.tg-callout p:last-child, .tg-callout ul:last-child { margin-bottom: 0; }
.tg-callout.is-warn { background: var(--warn-soft); border-color: var(--warn-line); }
.tg-callout.is-warn::before { background: var(--warn);
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E"); }
.tg-callout.is-danger { background: var(--err-soft); border-color: var(--err-line); }
.tg-callout.is-danger::before { background: var(--err);
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E"); }
.tg-callout.is-ok { background: var(--ok-soft); border-color: var(--ok-line); }
.tg-callout.is-ok::before { background: var(--ok);
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E"); }

/* 9-5 .tg-mistakes 자주 하는 실수 (증상 · 원인 · 해결) */
.tg-mistakes { margin: 0 0 1.4em; border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.tg-post .tg-mistakes table { margin: 0; border: 0; font-size: 15px; }
.tg-post .tg-mistakes th { background: var(--primary); color: #fff; border: 0; border-bottom: 1px solid var(--primary); }
.tg-post .tg-mistakes td { border: 0; border-top: 1px solid var(--line); }
.tg-post .tg-mistakes td:first-child { font-weight: 700; color: var(--ink); width: 30%; }
.tg-post .tg-mistakes td + td, .tg-post .tg-mistakes th + th { border-left: 1px solid var(--line); }
.tg-post .tg-mistakes th + th { border-left-color: rgba(255,255,255,.14); }

/* 9-6 FAQ · 출처 · 수정일 */
.tg-faq, .tg-sources, .tg-related { margin-top: 48px; }
.tg-faq h2, .tg-sources h2, .tg-related h2 { font-size: 23px; margin-bottom: 14px; }
.tg-faq details { border: 1px solid var(--line); border-radius: var(--r-m); margin-bottom: 10px; background: var(--surface); }
.tg-faq details[open] { border-color: var(--line-2); }
.tg-faq summary { position: relative; padding: 14px 48px 14px 18px; font-weight: 700; cursor: pointer; list-style: none; }
.tg-faq summary::-webkit-details-marker { display: none; }
.tg-faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 400; color: var(--link); }
.tg-faq details[open] summary::after { content: "−"; }
.tg-faq details p { margin: 0; padding: 0 18px 16px; color: var(--ink-2); }
.tg-sources ul { padding-left: 20px; font-size: 15px; margin: 0; }
.tg-updated { color: var(--muted); font-size: 13.5px; margin-top: 36px; }

/* 9-7 .tg-recap 한눈에 정리 (filezilla.kr .recap 과 같은 구조: 220px 정사각 삽화 + 번호 3줄) */
.tg-recap { margin: 52px 0 8px; padding: 26px 26px 28px; border-radius: var(--r-l); background: var(--soft); border: 1px solid var(--line); }
.tg-recap-head { margin-bottom: 18px; }
.tg-recap-head .k { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--link-ink); }
.tg-recap-head h2 { margin: 6px 0 0; padding: 0; border: 0; font-size: 26px; letter-spacing: -.03em; }
.tg-recap-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: center; }
.tg-recap-body.no-art { grid-template-columns: minmax(0, 1fr); }
.tg-recap-art { width: 220px; height: 220px; border-radius: var(--r-m); object-fit: cover; background: var(--art-bg); border: 1px solid var(--line); }
.tg-recap-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.tg-recap-list li { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px 18px 14px 62px; margin: 0; }
.tg-recap-list .rn { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: 15px; color: #fff; background: var(--primary); }
.tg-recap-list .r1 .rn, .tg-recap-list .r2 .rn, .tg-recap-list .r3 .rn { background: var(--primary); }
.tg-recap-list b { display: block; font-size: 16.5px; letter-spacing: -.02em; line-height: 1.4; }
.tg-recap-list p { margin: 3px 0 0; font-size: 14.5px; color: var(--muted); line-height: 1.55; }

/* 9-8 이전·다음 · 관련 글 · PC 안내 */
.an { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 44px; }
.an-card { display: flex; align-items: center; gap: 14px; min-height: 96px; padding: 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: border-color .2s, box-shadow .2s, transform .2s; }
.an-card:hover { text-decoration: none; border-color: var(--blue-line); box-shadow: var(--sh-2); transform: translateY(-2px); }
.an-art { flex: 0 0 112px; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--art-bg); }
.an-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.an-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.an-t small { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 800; color: var(--link); }
.an-t b { font-size: 15.5px; line-height: 1.42; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.an-next { text-align: right; }
.an-next .an-t small { justify-content: flex-end; }
.tp-an { margin-top: 40px; }   /* 주제 페이지 목록 끝 이전·다음 주제(그림 없는 글자 카드) */
.tp-an .an-card { min-height: 0; padding: 14px 18px; }
.tp-an .an-next:first-child { grid-column: 2; }
.tp-an b em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--muted); }
.tp-home { margin: 16px 0 0; text-align: center; font-size: 14.5px; font-weight: 700; }
@media (max-width: 640px) {   /* 9-8 기본 규칙보다 뒤에 와야 이긴다 — 9-0 모바일 블록에 있던 .an 한 열·.an-art 88px 가 아래 기본 규칙에 져서 글 상세 이전·다음이 146px 두 열이었다(2026-10-03) */
  .an { grid-template-columns: minmax(0, 1fr); }
  .an-art { flex-basis: 88px; }
  .an > span:empty { display: none; }   /* 첫 단계의 빈 '이전' 자리 */
  .tp-an { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 28px; }
  .tp-an .an-next:first-child { grid-column: auto; }
}
.tg-related ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tg-related a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-m); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.tg-related a:hover { border-color: var(--link); box-shadow: var(--sh-2); text-decoration: none; }
.tg-related b { font-size: 15.5px; line-height: 1.45; }
.tg-pcnudge { display: none; align-items: center; gap: 16px; margin-top: 32px; padding: 16px 20px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--soft); }
.tg-pcnudge-ic { flex: 0 0 44px; height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-grad); color: #fff; }
.tg-pcnudge > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; line-height: 1.5; }
.tg-pcnudge b { font-size: 16px; }
.tg-pcnudge small { font-size: 14px; color: var(--muted); }
.tg-pcnudge a { font-weight: 700; font-size: 14.5px; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .tg-pcnudge { display: flex; } }

/* 9-9 사이드: 목차 + 트랙 진행 (≥1100px, sticky) */
.tg-toc b, .tg-progress small { display: block; font-size: 13px; font-weight: 800; color: var(--muted); letter-spacing: .02em; margin-bottom: 8px; }
.tg-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.tg-toc a { display: block; padding: 5px 0 5px 14px; margin-left: -2px; border-left: 2px solid transparent; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.tg-toc a:hover { color: var(--link-ink); border-left-color: var(--link); text-decoration: none; }
.tg-progress { margin-top: 22px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--soft); }
.tg-progress > b { display: block; font-size: 17px; margin-bottom: 8px; }
.tg-progress progress { display: block; width: 100%; height: 6px; border: 0; border-radius: 3px; background: var(--line); overflow: hidden; -webkit-appearance: none; appearance: none; }
.tg-progress progress::-webkit-progress-bar { background: var(--line-2); border-radius: 3px; }
.tg-progress progress::-webkit-progress-value { background: var(--brand); border-radius: 3px; }
.tg-progress progress::-moz-progress-bar { background: var(--brand); border-radius: 3px; }
.tg-progress a { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 700; }

/* 9-10 .dl 다운로드 패널 (2026-09-30 새 디자인) — 라디오 + CSS 탭. 탭 = 3D 기기 그림 카드, 판 = 큰 공식 버튼 + 옆 칸.
   버튼은 광고와 헷갈리지 않게 고정 모양. 기기 그림 바탕 = --art-bg 라서 탭 바탕도 --art-bg(선택해도 바탕색은 그대로, 테두리만) */
.dl { margin: 0 0 56px; padding: 28px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-1); }
.dl-h h2 { margin: 0 0 4px; font-size: 24px; letter-spacing: -.035em; }
.dl-h p { margin: 0 0 20px; font-size: 15px; color: var(--muted); }
.dl.is-single .dl-h h2 { margin-bottom: 16px; }
.dl-tabs { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 12px; }
.dl-tabs > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.dl-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 8px 8px 14px; border-radius: var(--r-l); border: 1px solid var(--line);
  background: var(--art-bg); text-align: center; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.dl-tab-art { display: grid; place-items: center; width: 100%; max-width: 150px; aspect-ratio: 4 / 3; }
.dl-tab-art img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.dl-tab-art i { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--r-l); color: var(--link); background: var(--surface); border: 1px solid var(--blue-line); }
.dl-tab b { font-size: 15.5px; font-weight: 750; letter-spacing: -.02em; color: var(--ink); }
.dl-tab small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dl-tab:hover { border-color: var(--blue-line); transform: translateY(-2px); }
.dl-tab:hover .dl-tab-art img { transform: translateY(-3px) scale(1.03); }
.dl-tabs > input:checked + .dl-tab { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent), var(--sh-2); }
.dl-tabs > input:checked + .dl-tab b { color: var(--link-ink); }   /* 옅은 면 위 4.35 → 5.3:1 */
.dl-tabs > input:checked + .dl-tab::after { content: ''; position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-grad);
  box-shadow: 0 4px 10px -4px rgba(31,122,192,.9); }
.dl-tabs > input:checked + .dl-tab::before { content: ''; position: absolute; z-index: 1; top: 16px; right: 16.5px; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.dl-tabs > input:focus-visible + .dl-tab { outline: 3px solid rgba(34,158,217,.6); outline-offset: 2px; }
.dl-pane { display: none; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; margin-top: 6px; padding: 22px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--art-bg); }
.dl-tabs > input:nth-of-type(1):checked ~ .dl-pane:nth-of-type(1),
.dl-tabs > input:nth-of-type(2):checked ~ .dl-pane:nth-of-type(2),
.dl-tabs > input:nth-of-type(3):checked ~ .dl-pane:nth-of-type(3),
.dl-tabs > input:nth-of-type(4):checked ~ .dl-pane:nth-of-type(4),
.dl-tabs > input:nth-of-type(5):checked ~ .dl-pane:nth-of-type(5),
.dl-tabs > input:nth-of-type(6):checked ~ .dl-pane:nth-of-type(6) { display: grid; }
.dl-pane.is-open { display: grid; margin-top: 0; }
.dl.is-single .dl-tabs { display: block; }
.dl-main { min-width: 0; }
.dl-go { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 18px; min-height: 104px; padding: 20px 24px; border-radius: var(--r-l); color: #fff;
  background: linear-gradient(135deg, #2AABEE 0%, #1F8FD8 55%, #1F7AC0 100%); box-shadow: 0 20px 36px -20px rgba(31,122,192,.95), inset 0 1px 0 rgba(255,255,255,.25); transition: box-shadow .2s, transform .2s; }
.dl-go::before { content: ''; position: absolute; z-index: -1; inset: -40% -10% auto auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.28), transparent); }
.dl-go:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 26px 44px -22px rgba(31,122,192,1), inset 0 1px 0 rgba(255,255,255,.25); }
.dl-go-ic { flex: 0 0 60px; height: 60px; display: grid; place-items: center; border-radius: var(--r-m); background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32); }
.dl-go-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dl-go-t small { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; opacity: .88; }
.dl-go-t b { font-size: 21px; line-height: 1.3; font-weight: 800; letter-spacing: -.03em; }
.dl-go-t em { font-style: normal; font-size: 14px; opacity: .9; }
.dl-go-arrow { margin-left: auto; flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.18); transition: transform .2s; }
.dl-go:hover .dl-go-arrow { transform: translateX(4px); }
.dl-alt-h { margin: 18px 0 8px; font-size: 13px; font-weight: 800; color: var(--muted); }
.dl-alt { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.dl-alt-btn { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.dl-alt-btn > svg { flex: 0 0 auto; color: var(--link); }
.dl-alt-btn span { display: flex; flex-direction: column; min-width: 0; }
.dl-alt-btn b { font-size: 15px; line-height: 1.35; font-weight: 700; }
.dl-alt-btn small { font-size: 12.5px; color: var(--muted); }
.dl-alt-btn:hover { text-decoration: none; border-color: var(--blue-line); box-shadow: var(--sh-1); }
.dl-alt-btn:hover b { color: var(--link); }
.dl-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding-left: 24px; border-left: 1px solid var(--line); }
.dl-note { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.dl-note b { display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: var(--muted); }
.dl-ver { display: flex; flex-direction: column; padding: 12px 16px; border-radius: var(--r-m); border: 1px solid var(--blue-line); background: var(--blue-soft); --link: var(--link-ink); }   /* '공식 GitHub 기준' 링크 4.15 → 5:1 */
.dl-ver span { font-size: 12.5px; font-weight: 800; color: var(--muted); }
.dl-ver b { font-size: 26px; line-height: 1.2; font-weight: 800; letter-spacing: -.03em; color: var(--link-ink); }
.dl-ver small { font-size: 12.5px; color: var(--muted); }
.dl-guides ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.dl-guides li { margin: 0; border-bottom: 1px solid var(--line); }
.dl-guides a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; font-size: 14.5px; font-weight: 650; color: var(--ink); }
.dl-guides a svg { flex: 0 0 auto; color: var(--muted); transition: transform .2s, color .2s; }
.dl-guides a:hover { text-decoration: none; color: var(--link); }
.dl-guides a:hover svg { color: var(--link); transform: translateX(3px); }
.dl-foot { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; font-size: 13.5px; color: var(--muted); }
.dl-foot svg { flex: 0 0 auto; color: var(--link); }
@media (max-width: 1100px) { .dl-pane { grid-template-columns: minmax(0, 1fr) 280px; } }
@media (max-width: 900px) {
  .dl-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dl.dl-n2 .dl-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl-pane { grid-template-columns: minmax(0, 1fr); }
  .dl-side { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .dl { margin-bottom: 40px; padding: 18px 14px; }
  .dl-h h2 { font-size: 21px; }
  .dl-h p { margin-bottom: 14px; font-size: 14px; }
  .dl-tabs { gap: 8px; }
  .dl-tab { padding: 4px 4px 10px; }
  .dl-tab b { font-size: 14px; }
  .dl-tab small { display: none; }
  .dl-tabs > input:checked + .dl-tab::after { top: 6px; right: 6px; width: 18px; height: 18px; }
  .dl-tabs > input:checked + .dl-tab::before { top: 11px; right: 11px; width: 7px; height: 4px; }
  .dl-pane { padding: 14px; }
  .dl-go { gap: 12px; min-height: 88px; padding: 16px; }
  .dl-go-ic { flex-basis: 48px; height: 48px; }
  .dl-go-t b { font-size: 17.5px; }
  .dl-go-t em { font-size: 13px; }
  .dl-go-arrow { width: 36px; height: 36px; }
  /* 다운로드 허브(머리 바로 뒤가 다운로드 판)는 첫 화면에 공식 다운로드 버튼이 들어오게(2026-10-03: 375px 에서 963px 아래) */
  .lh:has(+ .dl) .lh-art { display: none; }
  .lh + .dl .dl-h p { display: none; }
  .dl-tab-art { max-width: 60px; }   /* 76 → 60(2026-10-03 360px 에서도 공식 다운로드 버튼 전체가 첫 화면에) */
  .lh:has(+ .dl) .ah-meta { display: none; }   /* 기기 수 · 최신 PC 버전 — 버전은 윈도우 판 아래 '최신 PC 버전'에 다시 나온다 */
  .lh:has(+ .dl) .lh-copy > p { margin-bottom: 0; }
  .dl-go-t b { text-wrap: balance; }   /* '윈도우 64비트 설치 / 파일' → '윈도우 64비트 / 설치 파일' */
  .dl-alt { grid-template-columns: minmax(0, 1fr); }
  .dl-guides ul { grid-template-columns: minmax(0, 1fr); }
}

/* 9-11 용어 사전 /glossary (2026-09-30) — 머리 오른쪽 = 설정 여는 곳 카드, 흔히 부르는 말 카드, 기기별 대조표(좁은 화면은 카드) */
.gl-hd { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); }
.gl-where { padding: 20px 22px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-2); }
.gl-where-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 15px; font-weight: 800; color: var(--ink); }
.gl-where-h svg { color: var(--link); }
.gl-where ul { list-style: none; margin: 0; padding: 0; }
.gl-where li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: baseline; margin: 0; padding: 9px 0; border-top: 1px solid var(--line); }
.gl-where-p { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.gl-where-p svg { flex: 0 0 auto; color: var(--link); }
.gl-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13.5px; }
.gl-crumbs em { font-style: normal; font-weight: 700; padding: 2px 8px; border-radius: 7px; color: var(--ink); background: var(--blue-soft); border: 1px solid var(--blue-line); }
.gl-crumbs i { font-style: normal; color: var(--muted); }
.gl-common { margin-top: 8px; }
.gl-say { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.gl-say li { margin: 0; min-width: 0; }
.gl-say a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: border-color .2s, box-shadow .2s, transform .2s; }
.gl-say a:hover { text-decoration: none; border-color: var(--blue-line); box-shadow: var(--sh-2); transform: translateY(-2px); }
.gl-say-from { font-size: 13.5px; color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.gl-say b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--link); }
.gl { position: relative; margin-top: 56px; }
.gl-diff-in { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.gl-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 8px; padding: 12px 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.gl-bar h2 { margin: 0; font-size: 24px; letter-spacing: -.035em; }
.gl-jump { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-jump a { padding: 6px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 650; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); }
.gl-jump a:hover { text-decoration: none; border-color: var(--brand); color: var(--link); }
.gl-switch { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--ink-2); cursor: pointer; user-select: none; }
.gl-switch small { font-size: 12px; font-weight: 800; padding: 1px 8px; border-radius: 999px; color: var(--link); background: var(--blue-soft); border: 1px solid var(--blue-line); }
.gl-switch-k { position: relative; flex: 0 0 auto; width: 42px; height: 24px; border-radius: 999px; background: var(--line-2); transition: background .2s; }
.gl-switch-k::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.gl-diff-in:checked ~ .gl-bar .gl-switch-k { background: var(--brand-grad); }
.gl-diff-in:checked ~ .gl-bar .gl-switch-k::after { transform: translateX(18px); }
.gl-diff-in:focus-visible ~ .gl-bar .gl-switch { outline: 3px solid rgba(34,158,217,.6); outline-offset: 4px; border-radius: 8px; }
.gl-diff-in:checked ~ .gl-grp tbody tr:not(.is-diff) { display: none; }
.gl-diff-in:checked ~ .gl-grp:not(.has-diff) { display: none; }
.gl-grp { margin-top: 32px; scroll-margin-top: 80px; }
.gl-fold-in { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.gl-grp h3 label { display: inline-flex; align-items: center; gap: 8px; cursor: default; }
@media (max-width: 760px) {
  /* 묶음 접기: 제목(라벨)을 누르면 펼친다. 분류 건너뛰기·용어 닻으로 들어오거나 '기기마다 다른 것만'을 켜면 저절로 펼친다 */
  .gl-grp h3 { margin-bottom: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
  .gl-grp h3 label { display: flex; width: 100%; cursor: pointer; }
  .gl-grp h3 label::after { content: ''; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; }
  .gl-grp .gl-tb { display: none; margin-top: 12px; }
  .gl-fold-in:checked ~ .gl-tb, .gl-grp:target .gl-tb, .gl-grp:has(tr:target) .gl-tb, .gl-grp:has(.gl-alias:target) .gl-tb, .gl-diff-in:checked ~ .gl-grp .gl-tb { display: block; }
  .gl-fold-in:checked ~ h3 label::after, .gl-grp:target h3 label::after, .gl-grp:has(tr:target) h3 label::after, .gl-grp:has(.gl-alias:target) h3 label::after, .gl-diff-in:checked ~ .gl-grp h3 label::after { transform: rotate(-135deg); }
  .gl-fold-in:focus-visible ~ h3 { outline: 3px solid rgba(34,158,217,.6); outline-offset: 2px; }
  .gl-grp { margin-top: 10px; }
}
.gl-grp h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 19px; letter-spacing: -.03em; }
.gl-grp h3 small { font-size: 13px; font-weight: 700; color: var(--muted); }
.gl-tb { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); font-size: 14.5px; }
.gl-tb thead th { padding: 11px 14px; text-align: left; font-size: 12.5px; font-weight: 800; color: var(--muted); background: var(--art-bg); border-bottom: 1px solid var(--line); }
.gl-tb thead th svg { vertical-align: -3px; margin-right: 5px; color: var(--link); }
.gl-tb thead th:first-child { width: 22%; }
.gl-tb tbody tr { scroll-margin-top: 80px; }
.gl-tb tbody tr:target, .gl-tb tbody tr:has(.gl-alias:target) { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.gl-alias { display: block; height: 0; scroll-margin-top: 96px; }   /* 옛 순번 주소(#t07) — 줄 맨 위에 둔다 */
.gl-tb tbody th, .gl-tb td { padding: 12px 14px; vertical-align: top; text-align: left; border-bottom: 1px solid var(--line); }
.gl-tb tbody tr:last-child > * { border-bottom: 0; }
.gl-tb tbody th { font-weight: 400; }
.gl-tb tbody th b { display: block; font-size: 15.5px; font-weight: 800; letter-spacing: -.02em; }
.gl-tb tbody th small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.gl-go { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--link); }
/* 한 문장으로(2026-10-03 모바일 점검 — flex 라 아이콘이 혼자 한 줄, '.lh p' 에 밀려 15.5px 본문 크기였다) */
.lh .gl-about { display: block; margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.gl-about svg { display: inline-block; vertical-align: -3px; margin-right: 6px; color: var(--link); }
.gl-about a { color: var(--link); font-weight: 700; }
.gl-tnote { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.gl-badge { display: inline-block; margin-top: 6px; padding: 1px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 800; color: var(--link); background: var(--blue-soft); border: 1px solid var(--blue-line); }
.gl-tb td b { display: block; font-weight: 650; }
.gl-tb td small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.gl-tb td.is-alt { background: var(--blue-soft); }
.gl-tb td.is-alt b { color: var(--link); font-weight: 800; }
.gl-tb td.is-none { color: var(--line-2); }
.gl-note { margin-top: 28px; padding: 18px 20px; border-radius: 16px; background: var(--art-bg); border: 1px solid var(--line); font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.gl-note p { margin: 0; }
.gl-note p + p { margin-top: 8px; }
.gl-note b { margin-right: 6px; color: var(--ink); }
@media (max-width: 1100px) { .gl-say { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .gl-hd { grid-template-columns: minmax(0, 1fr); }
  .gl-bar { position: static; }
  .gl-switch { margin-left: 0; }
  /* 막대가 고정이 아니라 80px 띄울 까닭이 없다 — 앞 용어 카드 끝이 보이던 것(2026-10-03) */
  .gl-tb tbody tr { scroll-margin-top: 16px; }
  .gl-alias { scroll-margin-top: 32px; }
}
@media (max-width: 760px) {
  .gl-say { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  /* 머리가 991px 이었다(2026-10-03): 설정 위치는 기기 이름 뒤에 경로를 이어 흘리고(좁은 칸에선 '안드로이 / 드' 로 끊겼다), 숫자 칩은 테두리 없는 작은 글 */
  .gl-where li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; }
  .gl-where-p { flex: none; }
  .gl-hd .ah-meta { gap: 2px 14px; }
  .gl-hd .ah-meta li { padding: 0; border: 0; background: none; font-size: 12.5px; }
  .gl-tb, .gl-tb tbody, .gl-tb tr, .gl-tb th, .gl-tb td { display: block; }
  .gl-tb { border: 0; border-radius: 0; background: none; overflow: visible; }
  .gl-tb thead { display: none; }
  .gl-tb tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 10px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }
  .gl-tb tbody th { grid-column: 1 / -1; background: var(--art-bg); }
  .gl-tb tbody th .gl-badge { margin: 0 0 0 6px; }
  .gl-tb td { padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .gl-tb tbody tr > td:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .gl-tb td::before { content: attr(data-l); display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 800; color: var(--muted); }
  .gl-tb tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
  .gl-tb tbody tr:last-child > td:last-child { border-bottom: 0; }
  .gl-tb tbody tr.is-same > td:not(:first-of-type) { display: none; }
  .gl-tb tbody tr.is-same > td:first-of-type { grid-column: 1 / -1; border-bottom: 0; }
  .gl-tb tbody tr.is-same > td:first-of-type::before { content: attr(data-all); }
}

/* 9-12 소개 /about (2026-09-30) — 머리 그림은 홈 히어로의 펼친 책 레이어(섞기 + 천천히 떠다님) */
.ab-art { display: block; margin: -20px -8px -30px 0; }
.ab-art img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; animation: nf-drift 8s ease-in-out infinite; }
:root[data-theme="dark"] .ab-art img { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ab-art img { mix-blend-mode: screen; } }
@media (prefers-reduced-motion: reduce) { .ab-art img { animation: none; } }
.ab-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #fff; background: var(--brand-grad); box-shadow: 0 10px 20px -12px rgba(31,122,192,.9); }
.ab-what { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ab-what > div { padding: 22px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.ab-what b { display: block; margin: 14px 0 6px; font-size: 17px; font-weight: 800; letter-spacing: -.025em; }
.ab-what p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.ab-rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; counter-reset: none; }
.ab-rules li { display: grid; grid-template-columns: 44px 32px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; margin: 0; padding: 20px 0; border-top: 1px solid var(--line); }
.ab-n { grid-row: 1 / 3; align-self: start; font-size: 26px; font-weight: 800; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.2px var(--brand); line-height: 1.1; }
.ab-rule-ic { color: var(--link); display: inline-flex; }
.ab-rules b { font-size: 17px; font-weight: 800; letter-spacing: -.025em; }
.ab-rules p { grid-column: 2 / 4; margin: 6px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.ab-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ab-stats li { margin: 0; padding: 22px 22px 20px; border-radius: 20px; border: 1px solid var(--blue-line);
  background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%), var(--blue-soft); }
.ab-stats b { display: block; font-size: 40px; line-height: 1.1; font-weight: 800; letter-spacing: -.045em; color: var(--link); }
.ab-stats b small { margin-left: 3px; font-size: 17px; font-weight: 700; color: var(--ink-2); letter-spacing: 0; }
.ab-stats span { display: block; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.ab-stats-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.ab-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ab-ed { position: relative; display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.ab-ed .ab-ic { flex: 0 0 auto; color: var(--link); background: var(--surface); border: 1px solid var(--line); box-shadow: none; }
.ab-ed b { display: block; margin: 8px 0 4px; font-size: 19px; font-weight: 800; letter-spacing: -.025em; }
.ab-ed p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.ab-ed a { color: var(--link); font-weight: 700; }
.ab-notice { display: flex; gap: 16px; align-items: flex-start; margin: 56px 0 0; padding: 22px 24px; border-radius: 20px; border: 1px solid var(--line); background: var(--art-bg); }
.ab-notice-ic { flex: 0 0 auto; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--link); background: var(--surface); border: 1px solid var(--blue-line); }
.ab-notice h2 { margin: 2px 0 6px; font-size: 17px; }
.ab-notice p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.ab-go { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ab-go a { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: border-color .2s, box-shadow .2s, transform .2s; }
.ab-go a:hover { text-decoration: none; border-color: var(--blue-line); box-shadow: var(--sh-2); transform: translateY(-2px); }
.ab-go b { margin-top: 10px; font-size: 16.5px; font-weight: 800; }
.ab-go small { font-size: 13.5px; color: var(--muted); }
.ab-go i { position: absolute; top: 20px; right: 20px; color: var(--muted); transition: transform .2s, color .2s; }
.ab-go a:hover i { color: var(--link); transform: translateX(3px); }
@media (max-width: 900px) {
  .ab-what, .ab-rules, .ab-contact { grid-template-columns: minmax(0, 1fr); }
  .ab-stats, .ab-go { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-art { order: -1; justify-self: center; width: 100%; max-width: 380px; margin: 0; }
}
@media (max-width: 640px) {
  /* 사이트 소개 모바일(2026-10-03): 첫 화면이 머리뿐(본문 781px) — 책 그림은 브랜드라 남기되 작게(운영자 '작게'), 숫자 칩은 아래 '숫자로 보는 사이트'·위 소개 줄과 같아 숨김 */
  .ab-art { max-width: 170px; margin: -6px auto -10px; }
  .ab-hd .ah-meta { display: none; }
  .ab-stats b { font-size: 32px; }
  .ab-stats li, .ab-go a { padding: 16px; }
  .ab-ed { padding: 18px; gap: 12px; }
  .ab-notice { padding: 18px; }
}

/* 9-13 FAQ 목록 (2026-09-30 새 디자인) — 질문 목록(<details>), 주제별 묶음 */
.fq-form { max-width: 560px; margin: 0 0 18px; }
.fq-form input { height: 56px; border-radius: var(--r-l); }
.fq-topics { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 12px 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.fq-topics a { padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 650; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); }
.fq-topics a small { margin-left: 2px; font-size: 12px; font-weight: 800; color: var(--muted); }
.fq-topics a:hover { text-decoration: none; border-color: var(--brand); color: var(--link); }
.fq-grp { margin-top: 40px; scroll-margin-top: 70px; }
.fq-alias { display: block; height: 0; scroll-margin-top: 30px; }   /* 합친 옛 묶음 닻(#fq-dl) — 바로 아래 '일반' 묶음으로 */
.fq-grp-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.fq-grp-art { flex: 0 0 56px; height: 56px; border-radius: var(--r-l); overflow: hidden; background: var(--art-bg); border: 1px solid var(--line); }
.fq-grp-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fq-grp-h h2 { margin: 0; font-size: 22px; letter-spacing: -.035em; }
.fq-grp-n { font-size: 13px; font-weight: 800; padding: 1px 9px; border-radius: 999px; color: var(--link-ink); background: var(--blue-soft); border: 1px solid var(--blue-line); }   /* 옅은 파랑 면 위 4.15 → 5:1 */
.fq-grp-go { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--link); }
.fq-list { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); overflow: hidden; }
.fq-item { border-top: 1px solid var(--line); scroll-margin-top: 70px; }
.fq-item:first-child { border-top: 0; }
.fq-item summary { display: flex; align-items: center; gap: 14px; padding: 18px 22px; cursor: pointer; list-style: none; transition: background .2s; }
.fq-item summary::-webkit-details-marker { display: none; }
.fq-item summary:hover { background: var(--art-bg); }
.fq-item summary:hover b { color: var(--link); }
.fq-item summary:focus-visible { outline: 3px solid rgba(34,158,217,.6); outline-offset: -3px; }
.fq-item summary b { flex: 1; min-width: 0; font-size: 16.5px; line-height: 1.5; font-weight: 700; letter-spacing: -.02em; transition: color .2s; }
.fq-k { flex: 0 0 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; font-size: 14px; font-weight: 800; color: var(--link-ink); background: var(--blue-soft); border: 1px solid var(--blue-line); }
.fq-k.is-a { color: var(--on-brand); background: var(--primary); border-color: transparent; }   /* 공식 파랑 위 흰 글자 3.0 → 4.6:1(2026-10-03) */
.fq-chev { flex: 0 0 auto; width: 10px; height: 10px; margin: 0 4px 4px 0; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s; }
.fq-item[open] summary { background: var(--art-bg); }
.fq-item[open] summary b { color: var(--link-ink); }   /* 펼친 질문(옅은 면 위) 4.35 → 5.3:1 */
.fq-item[open] .fq-chev { transform: rotate(-135deg); margin-bottom: -4px; border-color: var(--link); }
.fq-rest { border-top: 1px solid var(--line); }
.fq-rest > summary { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; cursor: pointer; list-style: none; font-size: 14.5px; font-weight: 700; color: var(--link); }
.fq-rest > summary::-webkit-details-marker { display: none; }
.fq-rest > summary:hover { background: var(--art-bg); }
.fq-rest > summary .fq-chev { border-color: var(--link); }
.fq-rest[open] > summary { display: none; }
.fq-rest > .fq-item:first-of-type { border-top: 0; }
.fq-a { display: flex; gap: 14px; padding: 4px 22px 22px; background: var(--art-bg); }
.fq-a > div { flex: 1; min-width: 0; }
.fq-a p { margin: 4px 0 0; font-size: 15.5px; line-height: 1.75; color: var(--ink); }
.fq-a-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; }
.fq-a-foot a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--link); background: var(--surface); border: 1px solid var(--blue-line); }
.fq-a-foot a:hover { text-decoration: none; border-color: var(--link); }
.fq-a-foot small { font-size: 12.5px; color: var(--muted); }
.fq-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 56px; padding: 26px 28px; border-radius: var(--r-l); border: 1px solid var(--blue-line);
  background: radial-gradient(80% 140% at 100% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%), var(--blue-soft); }
.fq-more h2 { margin: 0 0 4px; font-size: 20px; letter-spacing: -.03em; }
.fq-more p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.fq-more-go { display: flex; flex-wrap: wrap; gap: 8px; }
.fq-more-go a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 12px; font-size: 14.5px; font-weight: 700; color: var(--ink); background: var(--surface); border: 1px solid var(--line); }
.fq-more-go a svg { color: var(--link); }
.fq-more-go a:hover { text-decoration: none; border-color: var(--brand); color: var(--link); }
@media (max-width: 640px) {
  .fq-topics { position: static; }
  .fq-grp-art { flex-basis: 44px; height: 44px; }
  .fq-grp-h h2 { font-size: 19px; }
  .fq-grp-go { display: none; }
  .fq-item summary { gap: 10px; padding: 14px 14px; }
  .fq-item summary b { font-size: 15.5px; }
  .fq-k { flex-basis: 28px; height: 28px; font-size: 13px; }
  .fq-a { gap: 10px; padding: 2px 14px 16px; }
  .fq-a p { font-size: 15px; }
  .fq-more { padding: 20px 18px; }
}

/* 9-14 채널 모음 (2026-09-30 새 디자인) — 목록 .chl-* · 상세 .chd-* · 카드 .ch-card · 프로필 .ch-av */
.ch-av { position: relative; flex: 0 0 var(--s); width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(160deg, #7FD2FA, #2AABEE 55%, #1F7AC0); box-shadow: 0 0 0 1px var(--line); }
.ch-av img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.ch-av i { position: absolute; font-style: normal; font-weight: 800; font-size: calc(var(--s) * .42); color: #fff; }
.ch-ok { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 6px; vertical-align: 1px; border-radius: 50%; color: #fff; background: var(--brand-grad); }
.ch-ok.is-lg { width: 26px; height: 26px; margin-left: 10px; vertical-align: 4px; }
.ch-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--ink-2); background: var(--soft); border: 1px solid var(--line); white-space: nowrap; }
.ch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ch-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  transition: border-color .2s, box-shadow .2s, transform .2s; }
.ch-card:hover { text-decoration: none; border-color: var(--blue-line); box-shadow: var(--sh-2); transform: translateY(-2px); }
.ch-card:hover .ch-card-id b { color: var(--link); }
.ch-card-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ch-card-id { display: flex; flex-direction: column; min-width: 0; }
.ch-card-id b { display: flex; align-items: center; min-width: 0; font-size: 16px; font-weight: 800; letter-spacing: -.02em; line-height: 1.35; transition: color .2s; }
.ch-card-id b > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-card-id b .ch-ok { flex: 0 0 auto; }
.ch-card-id small { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-card-desc { flex: 1; font-size: 14px; line-height: 1.6; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ch-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ch-subs { margin-right: auto; font-size: 13px; color: var(--muted); }
.ch-subs b { font-size: 15px; font-weight: 800; color: var(--ink); }
.is-wait { color: var(--muted); font-weight: 600; }
.chl-form { max-width: 560px; margin: 0 0 18px; }
.chl-form input { height: 56px; border-radius: var(--r-l); }
.chl-week { margin: 0 0 40px; padding: 22px 24px; border-radius: var(--r-l); border: 1px solid var(--blue-line);
  background: radial-gradient(80% 140% at 100% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%), var(--blue-soft); }
.chl-week-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 14px; }
.chl-week-h h2 { margin: 0; font-size: 20px; letter-spacing: -.03em; }
.chl-week-h small { font-size: 12.5px; color: var(--muted); }
.chl-week ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.chl-week li { margin: 0; min-width: 0; }
.chl-week a { display: flex; align-items: center; gap: 10px; height: 100%; padding: 10px 12px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.chl-week a:hover { text-decoration: none; border-color: var(--brand); }
.chl-rank { flex: 0 0 auto; font-size: 22px; font-weight: 800; color: var(--link-ink); min-width: 16px; }   /* 공식 파랑 외곽선 글자 → 강조 글자(2026-10-03) */
.chl-week-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.chl-week-t b { font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chl-week-t small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chl-week-n { display: none; }
.chl-bar { margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); scroll-margin-top: 16px; }
.chl-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 32px 0 24px; border-bottom: 1px solid var(--line); }
.chl-tabs a { padding: 10px 16px; margin-bottom: -1px; font-size: 15px; font-weight: 800; color: var(--muted); border-bottom: 3px solid transparent; }
.chl-tabs a:hover { text-decoration: none; color: var(--ink); }
.chl-tabs a.on { color: var(--ink); border-bottom-color: var(--brand); }
.chl-tabs small { font-size: 12px; font-weight: 700; color: var(--muted); }
/* 채널·봇 공통 내비(partials/ch-nav, 2026-10-02) — 한 줄, 넘치면 가로로 민다 */
.ch-nav { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.ch-nav a { flex: none; white-space: nowrap; }
.lh + .ch-nav { margin-top: 20px; }
/* 좁은 화면: 6칸 중 3칸이 오른쪽에 숨어 넘길 수 있다는 표시가 없었다(2026-10-03) → 줄을 바꿔 모두 보이게 */
@media (max-width: 600px) {
  .ch-nav { flex-wrap: wrap; overflow: visible; gap: 0 2px; }
  .ch-nav a { padding: 9px 10px; font-size: 14.5px; }
}
.chc-n { margin-top: auto; padding-top: 6px; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--link-ink); }
.chl-cats { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.chr-hd { margin: 8px 0 0; }
.chc-list { list-style: none; margin: 28px 0; padding: 0; display: grid; gap: 14px; }
.chc-list > li { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: start; }
.chc-list .chr-rank { padding-top: 18px; }
.chc-note { margin: 8px 4px 0; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.chl-cols-sub { margin: -10px 0 16px; font-size: 15px; color: var(--muted); }
/* 채널 허브 큐레이션 6 줄(2026-10-03) — 홈 보드의 hm-tile collection 과 같은 줄, 3열 → 900px 2열 → 640px 1열 */
.chl-cols + .chl-bar { margin-top: 48px; }   /* 큐레이션 줄과 분류 칩 사이 */
.chl-colrows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-row) var(--sp-gap); }
.chl-colrows .hm-tile b { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 900px) { .chl-colrows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .chl-colrows { grid-template-columns: minmax(0, 1fr); } }
.chc-others { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
.chc-others li { display: flex; }   /* 카드 높이를 글 양과 상관없이 같게(2026-10-02 운영자) */
.chc-others a { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.chc-others a:hover { text-decoration: none; border-color: var(--blue-line); }
.chc-others small { font-size: 13px; color: var(--muted); line-height: 1.6; }
/* 모음 카드는 글 양·탭과 상관없이 같은 크기 — 제목 2줄 · 소개 6줄까지 보이고 넘치면 … (2026-10-02 운영자) */
.chc-cards b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.7; min-height: 3.4em; }
.chc-cards small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; min-height: 9.6em; }
.chr-hd h1 { margin: 6px 0 8px; font-size: clamp(26px, 4vw, 36px); letter-spacing: -.03em; }
.chr-hd p { margin: 0; max-width: 760px; color: var(--ink-2); line-height: 1.7; }
.chr-hd p + p { margin-top: 10px; }   /* 소개 문단이 한 덩어리로 붙어 있었다(2026-10-03) */
/* 채널 큐레이션 모바일(2026-10-03): 한 열이라 '같은 높이' 카드가 빈 곳만 남겼다 — 높이는 내용대로·소개 3줄, 지역 이동 칩 한 줄,
   상세는 순위 숫자를 카드 모서리 원으로(카드가 폭을 다 쓰게) · 아래 '다른 모음' 은 제목만 */
@media (max-width: 640px) {
  .hb-jump-tail { display: none; }
  .chc-others { grid-auto-rows: auto; }
  .chc-cards b, .chc-cards small { min-height: 0; }
  .chc-cards small { -webkit-line-clamp: 3; }
  .chc-more { gap: 8px; }
  .chc-more small { display: none; }
  .chc-more a { padding: 12px 14px; }
  .chc-more b { line-height: 1.5; }
  .chc-list { gap: 18px; }
  .chc-list > li { position: relative; grid-template-columns: minmax(0, 1fr); }
  .chc-list .chr-rank { position: absolute; z-index: 1; left: -6px; top: -8px; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0;
    border-radius: 50%; font-size: 13px; color: var(--on-brand); background: var(--primary); box-shadow: 0 0 0 3px var(--bg); }
}
.chl-cats.is-sub { margin-top: 10px; }
/* 줄 이름표(스티커 목록 — 주제·형식 두 줄이 모두 '전체'로 시작해 구분이 안 됐다, 2026-10-03) */
.chl-lab { flex: none; align-self: center; min-width: 2.6em; font-size: 13px; font-weight: 800; color: var(--muted); }
.chr-surge { margin: 28px 0 8px; padding: 18px 20px; border-radius: var(--r-l); background: var(--soft); border: 1px solid var(--line); }
.chr-surge h2 { margin: 0 0 10px; font-size: 18px; }
.chr-surge ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 16px; }
.chr-surge a { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--ink); }
.chr-surge b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.chr-up { font-size: 13px; font-weight: 700; color: var(--ok-ink); white-space: nowrap; }
.chr-list { list-style: none; margin: 20px 0 8px; padding: 0; border-top: 1px solid var(--line); }
.chr-list li { display: grid; grid-template-columns: 40px 56px 1fr auto; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.chr-rank { font-size: 18px; font-weight: 800; text-align: center; color: var(--ink); }
.chr-move em { font-style: normal; font-size: 13px; font-weight: 800; color: var(--muted); }
.chr-move .is-up { color: var(--ok-ink); }
.chr-move .is-down { color: var(--err-ink); }
.chr-move .is-new { padding: 1px 6px; border-radius: 6px; color: var(--link-ink); background: var(--blue-soft); }
.chr-ch { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); }
.chr-ch:hover { text-decoration: none; }
.chr-ch span { display: flex; flex-direction: column; min-width: 0; }
.chr-ch b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.chr-ch small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.chr-val { font-size: 15px; font-weight: 800; color: var(--ink); white-space: nowrap; }
/* 채널 순위(2026-10-03 모바일 점검): 등락이 없는 주엔 칸을 빼고, 모바일은 등락을 순위 숫자 아래로 쌓아 이름 칸을 넓힌다 ·
   평균 조회는 모바일에서 '1,470만' 짧게 · 거르기 칩은 묶음 이름표 + 한 줄 가로 밀기(고른 칩을 앞으로) */
.chr-list.no-move li { grid-template-columns: 40px 1fr auto; }
.chr-val-short { display: none; }
.chr-hd b { white-space: nowrap; }
@media (max-width: 640px) {
  .chr-list li, .chr-list.no-move li { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 0 8px; }
  .chr-list .chr-rank { grid-column: 1; grid-row: 1; align-self: end; }
  .chr-list .chr-move { grid-column: 1; grid-row: 2; align-self: start; text-align: center; }
  .chr-list .chr-move em { font-size: 11px; }
  .chr-list .chr-move .is-new { padding: 0 3px; }
  .chr-list .chr-ch { grid-column: 2; grid-row: 1 / span 2; }
  .chr-list .chr-val { grid-column: 3; grid-row: 1 / span 2; }
  .chr-list.no-move .chr-rank { grid-row: 1 / span 2; align-self: center; }
  .chr-val-full { display: none; }
  .chr-val-short { display: inline; }
  .chr-bar .chl-cats { flex-wrap: nowrap; align-items: center; overflow-x: auto; margin-right: -16px; padding: 2px 16px 2px 0; scrollbar-width: none; }
  .chr-bar .chl-cats::-webkit-scrollbar { display: none; }
  .chr-bar .chl-cats a { flex: none; padding: 6px 12px; font-size: 13.5px; }
  .chr-bar .chl-lab { order: -3; min-width: 0; margin-right: 2px; }
  .chr-bar .chl-cats a:first-of-type { order: -2; }
  .chr-bar .chl-cats a.on:not(:first-of-type) { order: -1; }
  .chr-bar .chl-cats + .chl-cats { margin-top: 6px; }
}
.chl-cats a, .chl-more > summary { padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 650; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); }
.chl-cats a small, .chl-more > summary small { margin-left: 2px; font-size: 12px; font-weight: 800; color: var(--muted); }
.chl-cats a:hover, .chl-more > summary:hover { text-decoration: none; border-color: var(--brand); color: var(--link); }
.chl-cats a.on { color: var(--on-brand); background: var(--primary); border-color: transparent; box-shadow: 0 8px 18px -10px rgba(31,122,192,.8); }
.chl-cats a.on small { color: var(--on-brand); }
.chl-more { display: contents; }
.chl-more > summary { list-style: none; cursor: pointer; }
.chl-more > summary::-webkit-details-marker { display: none; }
.chl-more[open] > summary { display: none; }
.chl-more > div { display: contents; }
.chl-sort { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 14px; }
.chl-count { font-size: 15px; font-weight: 800; }
.chl-sort nav { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line); }
.chl-sort nav a { padding: 6px 12px; border-radius: var(--r-m); font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.chl-sort nav a:hover { text-decoration: none; color: var(--link); }
.chl-sort nav a.on { background: var(--surface); color: var(--link); box-shadow: var(--sh-1); }
.ch-warn { display: flex; gap: 14px; align-items: flex-start; margin-top: 48px; padding: 18px 22px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--art-bg); }
.ch-warn p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.ch-warn b { color: var(--ink); }
.ch-warn-ic { flex: 0 0 auto; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--link); background: var(--surface); border: 1px solid var(--blue-line); }
.ch-warn.is-invest { border-color: color-mix(in srgb, #E8A33D 45%, var(--line)); background: color-mix(in srgb, #E8A33D 8%, var(--surface)); }
.ch-warn.is-invest .ch-warn-ic { color: #B86E0A; border-color: color-mix(in srgb, #E8A33D 45%, var(--line)); }
.ch-warn.is-side { margin: 0; }
.ch-warn.is-side b { display: block; margin-bottom: 4px; font-size: 15px; }
.ch-warn.is-side + .ch-warn.is-side { margin-top: 12px; }   /* 봇 상세: 외부 봇 안내가 둘째 상자 (2026-10-03) */
.chd-hd { position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; overflow: hidden;
  margin: 0 0 36px; padding: 32px 36px; border-radius: var(--r-l); border: 1px solid var(--line);
  background: radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%), var(--art-bg); }
.chd-hd > .ch-av { box-shadow: 0 0 0 4px var(--surface), 0 18px 36px -18px rgba(20,90,160,.6); }
.chd-id { min-width: 0; }
.chd-id h1 { margin: 6px 0 2px; font-size: 34px; line-height: 1.25; letter-spacing: -.04em; font-weight: 800; word-break: keep-all; }
.chd-handle { margin: 0 0 14px; font-size: 15px; font-weight: 600; color: var(--muted); user-select: all; }
.chd-dormant { margin: 0 0 14px; padding: 8px 12px; border-radius: 8px; font-size: 14px; line-height: 1.6; color: var(--warn-ink); background: var(--warn-soft); border: 1px solid var(--warn-line); }
.chd-dormant b { margin-right: 6px; font-weight: 800; }
.ch-act { align-self: flex-start; font-size: 12px; font-weight: 700; line-height: 1.6; color: var(--muted); }
.ch-act.is-dormant { padding: 1px 8px; border-radius: 6px; color: var(--warn-ink); background: var(--warn-soft); border: 1px solid var(--warn-line); }
.chd-stats b.is-sm { font-size: 18px; line-height: 1.5; }
.chd-topics { display: flex; flex-wrap: wrap; gap: 6px; }
.chd-aud { font-size: 15px; color: var(--ink-2); }
.chd-aud b { margin-right: 8px; color: var(--ink); }
.chd-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 16px 0 8px; }
.chd-facts div { padding: 12px 14px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line); }
.chd-facts dt { font-size: 12px; font-weight: 800; color: var(--muted); }
.chd-facts dd { margin: 2px 0 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.chd-facts small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.chd-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.chd-posts li { margin: 0; padding: 14px 16px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); }
.chd-posts p { margin: 6px 0; font-size: 15px; line-height: 1.65; color: var(--ink); overflow-wrap: anywhere; }
.chd-posts a { font-size: 13px; font-weight: 700; }
.chd-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; color: var(--muted); }
.chd-post-meta time { font-weight: 700; color: var(--ink-2); }
.chd-post-k { padding: 0 6px; border-radius: 6px; background: var(--soft-2); }
.chd-post-v { margin-left: auto; }
.chd-report { margin-top: 14px; padding: 16px 18px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--surface); }
.chd-report b { font-size: 15px; color: var(--ink); }
.chd-report p { margin: 6px 0 10px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.chd-report a { font-size: 14px; font-weight: 800; }
.chd-report small { display: block; margin-top: 6px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.chd-report small a { font-size: 12px; font-weight: 600; }
.chl-submit { margin: 32px 0 0; padding: 14px 18px; border-radius: var(--r-l); background: var(--blue-soft); border: 1px solid var(--blue-line); font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.chl-submit a { color: var(--link-ink); }   /* 옅은 파랑 면 위 링크 4.15 → 5:1 */
.chd-trend { margin: 0; color: var(--link); }
.chd-trend svg { display: block; width: 100%; height: 140px; border-radius: 12px; background: var(--soft); }
.chd-trend figcaption { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.chd-trend figcaption b { color: var(--ink); }
.chd-trend .is-up { color: var(--ok-ink); font-weight: 700; }
.chd-trend .is-down { color: var(--err-ink); font-weight: 700; }
.chd-stats b.is-dormant { color: var(--warn-ink); }
.chd-stats { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chd-stats li { display: flex; flex-direction: column; margin: 0; padding: 10px 14px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); min-width: 130px; }
.chd-stats span { font-size: 12px; font-weight: 800; color: var(--muted); }
.chd-stats b { font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--link); }
.chd-stats b.is-wait { font-size: 16px; color: var(--muted); }
.chd-stats small { font-size: 12px; color: var(--muted); }
.chd-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.chd-cats .ch-tag:hover { text-decoration: none; border-color: var(--brand); color: var(--link); }
.chd-open { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-radius: var(--r-l); color: #fff; align-self: center;
  background: linear-gradient(135deg, #2AABEE 0%, #1F8FD8 55%, #1F7AC0 100%); box-shadow: 0 20px 36px -20px rgba(31,122,192,.95), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .2s, box-shadow .2s; }
.chd-open:hover { text-decoration: none; transform: translateY(-2px); }
.chd-open > svg { flex: 0 0 auto; }
.chd-open span { display: flex; flex-direction: column; }
.chd-open b { font-size: 17px; font-weight: 800; }
.chd-open small { font-size: 12.5px; opacity: .85; }
.chd-body { display: grid; grid-template-columns: minmax(0, 760px) 320px; justify-content: space-between; gap: 40px; }
.chd-sec { margin: 0 0 36px; }
.chd-sec h2 { margin: 0 0 12px; font-size: 22px; letter-spacing: -.035em; }
.chd-sec p { margin: 0 0 10px; font-size: 16px; line-height: 1.8; color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; }
.chd-sec p.chd-src { font-size: 13px; color: var(--muted); }
.chd-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 10px; }
.chd-steps li { counter-increment: s; position: relative; margin: 0; padding: 14px 16px 14px 58px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--surface); }
.chd-steps li::before { content: counter(s); position: absolute; left: 16px; top: 14px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-m); font-size: 14px; font-weight: 800; color: #fff; background: var(--brand-grad); }
.chd-steps b { display: block; font-size: 15.5px; font-weight: 800; }
.chd-steps span { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.chd-steps em { font-style: normal; font-weight: 700; padding: 1px 7px; border-radius: 6px; color: var(--ink); background: var(--blue-soft); border: 1px solid var(--blue-line); }
.chd-side { position: sticky; top: 24px; align-self: start; }
@media (max-width: 1100px) {
  .ch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chl-week ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chd-body { grid-template-columns: minmax(0, 1fr); }
  .chd-side { position: static; }
  .chd-main > :last-child { margin-bottom: 0; }   /* 한 단이면 구역 아래 여백 36 + 칸 사이 40 이 겹쳐 76px 이었다(2026-10-03) */
}
@media (max-width: 900px) {
  .chd-hd { grid-template-columns: auto minmax(0, 1fr); }
  .chd-open { grid-column: 1 / -1; justify-self: stretch; }
}
@media (max-width: 640px) {
  .ch-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* 채널 목록 모바일(2026-10-03 점검): 첫 화면에 채널이 없었다(이번 주 875px) → 표지 그림·숫자 칩 숨김(운영 원칙이 든 소개 문단은 남김).
     카드 24개가 1열 220px 씩 5,519px → 소개 1줄 · 여백 조금 좁게 */
  .chl-hd .lh-art, .chl-hd .ah-meta { display: none; }
  .chl-hd .chl-form { margin-bottom: 0; }
  .ch-card { gap: 8px; padding: 14px 16px; }
  .ch-card-desc { -webkit-line-clamp: 1; }
  .chl-week { padding: 16px; }
  .chl-week ol { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .chl-week-n { display: block; margin-left: auto; font-size: 12px; color: var(--muted); }
  .chl-week-n b { font-size: 14px; color: var(--link); }
  .chd-hd { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 24px 18px; gap: 16px; }
  .chd-hd > .ch-av { --s: 96px !important; }
  .chd-id h1 { font-size: 26px; }
  .chd-stats, .chd-cats { justify-content: center; }
  .chd-stats li { min-width: 0; flex: 1; }
  /* 숫자 상자 3개 — 2+1 두 줄이 360px 에서 '텔레그램에서 열기'를 첫 화면 끝으로 밀었다 → 한 줄 3칸(2026-10-03) */
  .chd-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .chd-stats li { padding: 8px 4px; }
  .chd-stats span { font-size: 11.5px; }
  .chd-stats b { font-size: 19px; }
  .chd-stats b.is-sm, .chd-stats b.is-wait { font-size: 15px; }
  .chd-stats small { font-size: 11px; line-height: 1.35; word-break: keep-all; text-wrap: balance; }
}
/* 봇 상세 모바일(2026-10-03): 숫자 상자가 '월간 사용자' 하나라 3칸 자리 왼쪽에 외따로 100px — 한 줄 알약으로 가운데 · 사진 72px */
@media (max-width: 640px) {
  .bt-hd.chd-hd > .ch-av { --s: 72px !important; }
  .chd-stats.bt-stat { display: flex; justify-content: center; margin-bottom: 4px; }
  .bt-stat li { flex: none; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 8px; padding: 7px 16px; border-radius: 999px; }
  .bt-stat b { font-size: 17px; }
  .bt-stat small { text-wrap: nowrap; }
}

/* 9-15 스티커 모음 (2026-09-30 새 디자인) — 목록 카드 .stk-card · 상세 .stk-hd · 미리보기 .stk-grid */
.stk-grid-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 14px; }
.stk-card { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--ink); }
.stk-card:hover { text-decoration: none; }
.stk-card-art { position: relative; display: grid; place-items: center; aspect-ratio: 1; margin-bottom: 8px; border-radius: var(--r-l); background: var(--art-bg); border: 1px solid var(--line); overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s; }
.stk-card-art img { width: 78%; height: 78%; object-fit: contain; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.stk-card:hover .stk-card-art { border-color: var(--blue-line); box-shadow: var(--sh-2); transform: translateY(-2px); }
.stk-card:hover .stk-card-art img { transform: scale(1.06) rotate(-2deg); }
.stk-card:hover b { color: var(--link); }
.stk-empty { display: grid; place-items: center; color: var(--line-2); font-style: normal; }
.stk-badge { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 800; color: var(--on-brand); background: var(--primary); box-shadow: 0 4px 10px -4px rgba(31,122,192,.8); }   /* 공식 파랑 위 흰 글자 3.0:1 → --primary 4.6:1(2026-10-03) */
.stk-card b { font-size: 14.5px; font-weight: 800; letter-spacing: -.02em; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .2s; }
.stk-card small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stk-card-n { margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--muted); }
.stk-hd { position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; overflow: hidden;
  margin: 0 0 32px; padding: 30px 36px; border-radius: 26px; border: 1px solid var(--line);
  background: radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%), var(--art-bg); }
.stk-hd-art { display: grid; place-items: center; width: 180px; height: 180px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 36px -22px rgba(20,90,160,.6); }
.stk-hd-art img, .stk-hd-art video, .stk-hd-art .stk-lot { width: 82%; height: 82%; object-fit: contain; }
/* 못 불러온 애니메이션: 정지 표지가 깔린 칸(머리·첫 칸)은 그대로 두고, 빈 칸만 숨긴다 */
.stk-cell:has(> .stk-lot.is-fail:not([style*="background-image"])) { display: none; }
.stk-lot.is-fail { animation: none; }
.stk-hd-id { min-width: 0; }
.stk-hd-id h1 { margin: 6px 0 0; font-size: 34px; line-height: 1.25; letter-spacing: -.04em; font-weight: 800; word-break: keep-all; }
.stk-en { margin: 2px 0 14px; font-size: 15px; font-weight: 600; color: var(--muted); }
.stk-hd-id .ah-meta a { color: var(--ink); }
.stk-desc { margin: 14px 0 0; max-width: 640px; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
html:not(.js) .stk-vid { display: none; }   /* JS 가 없으면 noscript 의 영상을 쓴다 */
/* 긴 소개(80자 넘게)는 모바일에서 3줄 + '더 보기'(체크박스, JS 없음) — 360px 에서 7줄이 '텔레그램에 추가'를 첫 화면 밖으로 밀었다(2026-10-03) */
.stk-more, .stk-more-c { display: none; }
.stk-prev { margin: 0 0 40px; }
.stk-prev h2 { margin: 0 0 14px; font-size: 22px; letter-spacing: -.035em; }
.stk-prev h2 small { font-size: 14px; font-weight: 700; color: var(--muted); }
.stk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; padding: 18px; border-radius: 22px; background: var(--art-bg); border: 1px solid var(--line); }
.stk-cell { display: grid; place-items: center; aspect-ratio: 1; border-radius: 16px; background: var(--surface); overflow: hidden; }
.stk-cell img, .stk-cell video { width: 86%; height: 86%; object-fit: contain; }
.stk-lot { display: block; width: 86%; height: 86%; background: center / contain no-repeat; }
.stk-lot svg { display: block; }
/* 글자색 이모지 팩(tint — 흰색 단색 lottie, 2026-10-03): 텔레그램처럼 흰 채움·선을 글자색으로. 표지(배경 그림)는 회색 대신 표지 */
.is-tint .stk-lot svg [fill^="rgb"] { fill: var(--ink); }
.is-tint .stk-lot svg [stroke^="rgb"] { stroke: var(--ink); }
/* 애니메이션을 만드는 동안(아직 svg 없음) 칸이 비어 보이지 않게 은은한 반짝임 */
.stk-lot:empty:not([style*="background-image"]) { border-radius: 14px; background: linear-gradient(100deg, var(--art-bg) 30%, color-mix(in srgb, var(--brand) 10%, var(--art-bg)) 50%, var(--art-bg) 70%) 0 0 / 250% 100%; animation: stk-wait 1.4s linear infinite; }
@keyframes stk-wait { to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .stk-lot:empty { animation: none; } }
.stk-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.stk-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.stk-tags .ch-tag { padding: 6px 12px; font-size: 13.5px; }
.stk-tags .ch-tag:hover { text-decoration: none; border-color: var(--brand); color: var(--link); }
.sg-meta { margin-top: 16px; }
.sg-steps { max-width: 900px; }
.sg-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sg-cat { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: border-color .2s, box-shadow .2s, transform .2s; }
.sg-cat:hover { text-decoration: none; border-color: var(--blue-line); box-shadow: var(--sh-2); transform: translateY(-2px); }
.sg-cat:hover b { color: var(--link); }
.sg-cat-art { flex: 0 0 64px; height: 64px; display: grid; place-items: center; border-radius: 16px; background: var(--art-bg); overflow: hidden; }
.sg-cat-art img { width: 80%; height: 80%; object-fit: contain; }
.sg-cat > span:last-child { display: flex; flex-direction: column; }
.sg-cat b { font-size: 16px; font-weight: 800; transition: color .2s; }
.sg-cat small { font-size: 13px; color: var(--muted); }
@media (max-width: 900px) { .sg-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 스티커 안내 모바일(2026-10-03 점검): 첫 화면에 '추가하는 법'이 없었다(3단계 865~982px) → 표지 그림·숫자 칩을 빼고(소개 문단은 남김),
   많이 본 12(4줄)는 6(2줄)만 — 위에 '전체 보기', 분류 5칸은 1열 큰 줄 대신 2열 작은 칸 */
@media (max-width: 640px) {
  .sg-lhd .lh-art, .sg-lhd .sg-meta, .sg-lhd .lh-chips { display: none; }   /* 머리 분류 칩은 아래 섹션 메뉴('스티커 모음')·'분류별로 찾기'와 같은 길 */
  .sg-lhd .lh-copy > p { margin-bottom: 0; }
  .sg-top .stk-card:nth-child(n+7) { display: none; }
  .sg-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sg-cat { gap: 10px; padding: 10px; border-radius: 12px; }
  .sg-cat-art { flex-basis: 48px; height: 48px; border-radius: 10px; }
  .sg-cat b { font-size: 15px; }
  .sg-cat small { font-size: 12.5px; }
}
@media (max-width: 1100px) { .stk-grid-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .stk-hd { grid-template-columns: auto minmax(0, 1fr); }
  .stk-hd .chd-open { grid-column: 1 / -1; justify-self: stretch; }
}
@media (max-width: 640px) {
  .stk-grid-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
  .stk-lhd .lh-art { display: none; }   /* 첫 화면에 스티커가 하나도 안 보였다(첫 카드 1,033px) — 표지 그림을 빼고 찾기·칩·카드를 올린다(2026-10-03) */
  .stk-lhd .ah-meta, .stk-lhd .lh-copy > p { display: none; }   /* 팩 수·분류 수는 바로 아래 칩 숫자와 같고, 소개 문단은 다운로드 허브처럼 모바일에선 뺀다 */
  .stk-bar .chl-cats { gap: 6px; }
  .stk-bar .chl-cats a { padding: 6px 11px; font-size: 13.5px; }   /* 형식 줄(이름표 + 3칩)이 360px 에서도 한 줄 */
  .stk-bar .chl-lab { min-width: 0; margin-right: 2px; }
  .stk-card b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }   /* 3열에서 이름이 잘렸다 → 두 줄까지 */
  .stk-hd { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 24px 18px; gap: 14px; }
  .stk-hd-art { width: 140px; height: 140px; border-radius: 24px; }
  .stk-hd-id h1 { font-size: 26px; }
  .stk-hd-id .ah-meta { justify-content: center; }
  .stk-more-c { display: block; }
  .stk-desc.is-long { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .stk-more { display: inline-block; margin-top: 4px; padding: 4px 8px; font-size: 14px; font-weight: 700; color: var(--link); cursor: pointer; }
  .stk-more-c:focus-visible + .stk-desc + .stk-more { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
  .stk-more-c:checked + .stk-desc { display: block; }
  .stk-more-c:checked + .stk-desc + .stk-more { display: none; }
  .stk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 10px; border-radius: 18px; }
  .stk-cell { border-radius: 10px; }
}

/* 봇·미니 앱 목록(2026-10-03 모바일 점검): 분류로 가기 칩 · 모바일은 머리 소개 3줄 + '더 보기'(체크 상자) · 봇 카드 설명 2줄(무엇을 하는지가 핵심 — 1줄에서 47/50 잘림) */
.bt-jump { margin: 0 0 8px; }
.bt-jump a small { margin-left: 2px; font-size: 12px; font-weight: 800; color: var(--muted); }
.bt-more, .bt-more-c { display: none; }
.chr-hd .bt-more + p { margin-top: 10px; }   /* 숨은 '더 보기' 가 사이에 끼어 p + p 간격이 빠진다 */
@media (max-width: 640px) {
  .bt-jump { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding: 2px 16px 2px 0; scrollbar-width: none; }
  .bt-jump::-webkit-scrollbar { display: none; }
  .bt-jump a { flex: none; padding: 6px 12px; font-size: 13.5px; }
  .bt-more-c { display: block; }
  .bt-intro { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .bt-more { display: inline-block; margin: 2px 0 0 -8px; padding: 4px 8px; font-size: 14px; font-weight: 700; color: var(--link); cursor: pointer; }
  .bt-more-c:focus-visible ~ .bt-more { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
  .bt-more-c:checked + .bt-intro { display: block; }
  .bt-more-c:checked ~ .bt-more { display: none; }
  .bt-more-c:not(:checked) ~ .chd-src { display: none; }   /* '…확인한 값' 출처 줄도 펼치면 나온다 */
  .bt-jump + .tg-sec { margin-top: 24px; }
  .bt-card .ch-card-desc { -webkit-line-clamp: 2; }
}

/* 9-16 가이드 목차 co_id=guide (2026-09-30) */
.gi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) {   /* 많이 찾는 것 칩 3줄(170px) → 한 줄 가로 밀기(목록 머리와 같게, 2026-10-03) */
  .gi-hd .lh-chips { flex-wrap: nowrap; overflow-x: auto; margin-right: -22px; padding: 2px 22px 2px 0; scrollbar-width: none; }
  .gi-hd .lh-chips::-webkit-scrollbar { display: none; }
  .gi-hd .lh-chips a { flex: none; padding: 6px 12px; font-size: 13.5px; }
}
.gi-card { display: flex; flex-direction: column; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.gi-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; color: var(--ink); transition: background .2s; }
.gi-head:hover { text-decoration: none; background: var(--art-bg); }
.gi-head:hover b { color: var(--link); }
.gi-art { flex: 0 0 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--art-bg); overflow: hidden; color: var(--link); }
.gi-art img { width: 100%; height: 100%; object-fit: cover; }
.gi-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.gi-t b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; transition: color .2s; }
.gi-t small { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.gi-n { flex: 0 0 auto; font-size: 13px; font-weight: 800; padding: 2px 10px; border-radius: 999px; color: var(--link); background: var(--blue-soft); border: 1px solid var(--blue-line); }
.gi-first { list-style: none; counter-reset: gi; margin: 0; padding: 4px 18px 14px; border-top: 1px solid var(--line); }
.gi-first li { counter-increment: gi; margin: 0; }
.gi-first a { display: flex; gap: 10px; padding: 8px 0; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.gi-first a::before { content: counter(gi); flex: 0 0 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; font-size: 12px; font-weight: 800; color: var(--link); background: var(--blue-soft); }
.gi-first a:hover { text-decoration: none; color: var(--link); }
@media (max-width: 900px) { .gi-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── 10. 404 ─────────────────────────────────────────── */
/* 404 (2026-09-30 새 디자인) */
.nf { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 24px; align-items: center; overflow: hidden;
  margin: 8px 0 0; padding: 48px 48px 44px; border-radius: 26px; border: 1px solid var(--line);
  background: radial-gradient(60% 120% at 90% 10%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 62%), var(--art-bg); }
.nf-code { margin: 0; font-size: 132px; line-height: .9; font-weight: 800; letter-spacing: -.06em;
  background: linear-gradient(160deg, #7FD2FA 0%, #2AABEE 45%, #1F7AC0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nf h1 { margin: 14px 0 12px; font-size: 34px; letter-spacing: -.045em; font-weight: 800; }
.nf-sub { margin: 0 0 26px; max-width: 520px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.nf-form { max-width: 560px; margin: 0; }
.nf-form input { height: 62px; border-radius: 18px; border-color: rgba(10,50,100,.08); box-shadow: 0 22px 44px -24px rgba(20,90,160,.45), 0 2px 6px rgba(10,40,80,.06); }
.nf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.nf-home { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 18px; margin-right: 6px; border-radius: 12px; font-weight: 700; font-size: 15px; color: #fff;
  background: linear-gradient(180deg, #2AABEE, #1F8FD8); box-shadow: 0 10px 22px -10px rgba(31,122,192,.8); }
.nf-home:hover { text-decoration: none; background: linear-gradient(180deg, #229ED9, #1F7AC0); }
.nf-chip { padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); }
.nf-chip:hover { border-color: var(--brand); color: var(--link); text-decoration: none; }
.nf-art { position: relative; display: block; }
.nf-art img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; transform: rotate(-14deg) translate(-4%, 6%); animation: nf-drift 7s ease-in-out infinite; }
:root[data-theme="dark"] .nf-art img { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nf-art img { mix-blend-mode: screen; } }
.nf-trail { position: absolute; left: -6%; bottom: 8%; width: 60%; height: 42%; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--brand) 45%, transparent);
  border-color: transparent transparent color-mix(in srgb, var(--brand) 45%, transparent) transparent; transform: rotate(-18deg); }
@keyframes nf-drift { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 10px -14px; rotate: 3deg; } }
@media (prefers-reduced-motion: reduce) { .nf-art img { animation: none; } }
@media (max-width: 900px) {
  .nf { grid-template-columns: minmax(0, 1fr); padding: 32px 26px; }
  .nf-art { order: -1; max-width: 260px; margin: -10px auto 0; }
  .nf-code { font-size: 96px; }
}
@media (max-width: 640px) {
  .nf { border-radius: 20px; padding: 24px 18px; }
  .nf-code { font-size: 76px; }
  .nf h1 { font-size: 26px; }
  .nf-sub { font-size: 15.5px; }
  .nf-form input { height: 56px; border-radius: 16px; }
}

/* ── 11. 반응형 ──────────────────────────────────────── */
@media (min-width: 1100px) {
  .tg-doc { grid-template-columns: minmax(0, 760px) 280px; justify-content: space-between; }
  .tg-side { display: block; }
  .tg-side-in { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; }
  .tg-toc-m { display: none; }
  .tg-fig:has(> figcaption) { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 18px; align-items: start; }
  .tg-fig:has(> figcaption) > figcaption { margin-top: 0; }
}
@media (max-width: 1099px) {
  .tg-nav-a { padding: 7px 8px; font-size: 15px; }
  .tg-nav-a.on::after { left: 8px; right: 8px; }
  .tg-hsearch { flex-basis: 160px; }
  .tg-problems, .tg-tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tg-hubhead { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 900px) {
  /* 메뉴를 둘째 줄 가로 스크롤 칩으로 (하단 메뉴 금지) */
  .tg-brand { font-size: 17px; }
  /* 모바일 머리: 한 줄(로고 · 테마 · ☰). 메뉴·검색은 ☰ 판 안으로 */
  .tg-header-in { height: 60px; gap: 8px; }
  .tg-brand { margin-right: auto; min-width: 0; }
  .tg-nav, .tg-hsearch { display: none; }
  .tg-mnav { display: block; }
  .tg-mnav > summary { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line);
    background: var(--soft); color: var(--ink); cursor: pointer; list-style: none; }
  .tg-mnav > summary::-webkit-details-marker { display: none; }
  .tg-mnav > summary:focus-visible { outline: 3px solid rgba(34,158,217,.6); outline-offset: 2px; }
  .tg-mnav .i-close, .tg-mnav[open] .i-open { display: none; }
  .tg-mnav[open] .i-close { display: inline-flex; }
  .tg-mnav[open] > summary { background: var(--primary); border-color: var(--primary); color: #fff; }
  .tg-mnav-panel { position: absolute; left: 0; right: 0; top: 100%; padding: 14px 16px 18px; background: var(--bg); border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -24px rgba(10,40,80,.45); animation: tg-mnav-in .18s ease-out; }
  @keyframes tg-mnav-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .tg-mnav-search { position: relative; display: flex; align-items: center; margin-bottom: 12px; }
  .tg-mnav-search svg { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
  .tg-mnav-search input { width: 100%; height: 48px; padding: 0 14px 0 42px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); font: inherit; font-size: 16px; color: var(--ink); }
  .tg-mnav-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(42,171,238,.22); }
  /* 메뉴마다 <details> 아코디언 — 펼치면 '전체 보기' + 2차 주제(메가 메뉴와 같은 판) */
  .tg-mnav-list { display: flex; flex-direction: column; gap: 8px; }
  .tg-mnav-g, .tg-mnav-g1 { border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
  .tg-mnav-g > summary, .tg-mnav-g1 { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 14px 0 16px;
    color: var(--ink); font-size: 16px; font-weight: 650; cursor: pointer; list-style: none; }
  .tg-mnav-g > summary::-webkit-details-marker { display: none; }
  .tg-mnav-g > summary:focus-visible { outline-offset: -3px; }
  .tg-mnav-g > summary svg, .tg-mnav-g1 svg { color: var(--muted); transition: transform .15s ease; }
  .tg-mnav-g[open] { background: var(--surface); }
  .tg-mnav-g[open] > summary svg { transform: rotate(180deg); }
  .tg-mnav-g.on, .tg-mnav-g1.on { border-color: var(--brand); }
  .tg-mnav-g1:hover, .tg-mnav-g1:active { border-color: var(--brand); text-decoration: none; }
  .tg-mnav-sub { padding: 0 14px 14px; }
  .tg-mnav-home { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 12px; border-radius: 10px;
    background: var(--blue-soft); color: var(--link-ink); font-size: 15px; font-weight: 700; }
  .tg-mnav-home:hover { text-decoration: none; }
  .tg-mnav-h { margin: 14px 0 2px; color: var(--muted); font-size: 12.5px; font-weight: 700; }
  .tg-mnav-sub ul { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; margin: 0; padding: 0; list-style: none; }
  .tg-mnav-sub li a { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 44px; border-bottom: 1px solid var(--line);
    color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.35; }
  .tg-mnav-sub li a:hover { color: var(--link); text-decoration: none; }
  .tg-mnav-sub small { flex: none; color: var(--muted); font-size: 12px; font-weight: 600; }
  @media (max-width: 380px) { .tg-mnav-sub ul { grid-template-columns: minmax(0, 1fr); } }
  @media (prefers-reduced-motion: reduce) { .tg-mnav-g > summary svg { transition: none; } }
  @media (prefers-reduced-motion: reduce) { .tg-mnav-panel { animation: none; } }
  .tg-mag { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .tg-mcard.is-feature { flex-direction: column; }
  .tg-mcard.is-feature .tg-mcard-art { flex: none; }
  .tg-mcard.is-feature .tg-mcard-body { padding: 18px 20px; }
  .tg-mcard.is-feature b { font-size: 22px; }
  .tg-chlist { grid-template-columns: minmax(0, 1fr); }
  .tg-hubhead { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .tg-hubhead-art { order: -1; }
}
@media (max-width: 640px) {
  :root { --fs: 16px; }
  h1 { font-size: 26px; }
  main.tg-wrap { padding-top: 20px; }
  .tg-sec { margin-top: 44px; }
  .tg-sec-h h2 { font-size: 20px; }
  .tg-problems { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tg-problems a { min-height: 56px; }
  .tg-mag { grid-template-columns: minmax(0, 1fr); }
  .tg-mcard:not(.is-feature) { flex-direction: row; align-items: stretch; }
  .tg-mcard:not(.is-feature) .tg-mcard-art { flex: 0 0 38%; aspect-ratio: auto; min-height: 96px; }
  .tg-mcard:not(.is-feature) .tg-mcard-body { padding: 12px 14px; gap: 6px; }
  .tg-mcard:not(.is-feature) .tg-mcard-body b { font-size: 15.5px; }
  .tg-tracks { gap: 10px; }
  .tg-tcard { padding: 14px 14px 16px; }
  .tg-tcard small { font-size: 13px; }
  .tg-post h2 { font-size: 22px; margin-top: 40px; }
  .tg-post table { font-size: 14.5px; }
  .tg-post tr > :first-child:nth-last-child(2) { min-width: 90px; }   /* 두 열 표 첫 열이 71px 이라 네 줄로 끊겼다(2026-10-03) */
  /* 가로로 긴 글귀 캡처(is-wide — ArticleRenderer::markWide): 원래 크기로 두고 옆으로 밀어 읽는다 */
  .tg-fig.is-wide .tg-fig__scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; border-radius: var(--r-s); }
  .tg-fig.is-wide .tg-fig__scroll > img { max-width: none; width: auto; margin: 0; }
  .tg-fig.is-wide .tg-fig__hint { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); text-align: right; }
  .tg-post .tg-mistakes thead { display: none; }
  .tg-post .tg-mistakes tr { display: block; padding: 12px 14px; border-top: 1px solid var(--line); }
  .tg-post .tg-mistakes tr:first-child { border-top: 0; }
  .tg-post .tg-mistakes td { display: block; border: 0 !important; padding: 2px 0; width: auto !important; }
  .tg-post .tg-mistakes td[data-label]::before { content: attr(data-label) " · "; font-weight: 700; color: var(--link-ink); }
  .tg-recap { padding: 20px 16px; }
  .tg-recap-body { grid-template-columns: minmax(0, 1fr); }
  .tg-recap-art { width: 100%; height: auto; aspect-ratio: 1 / 1; max-width: 220px; margin: 0 auto; }
  .tg-related ul { grid-template-columns: minmax(0, 1fr); }
  .tg-path > label { font-size: 13.5px; padding: 7px 4px; }
  .tg-hubhead h1 { font-size: 27px; }
  .tg-rows li > a, .tg-rows li.is-wait { gap: 12px; padding: 12px 14px; }
  .tg-rows-n { flex-basis: 32px; height: 32px; font-size: 13px; }
  .tg-rows-t b { font-size: 15px; }
  .tg-rows .tg-lv { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tg-entry-card, .tg-mcard, .tg-tcard, .tg-card, .an-card, .tg-related a { transition: none; }
}
@media print {
  .tg-header, .tg-footer, .tg-side, .tg-toc-m, .an, .ar-rel, .tg-pcnudge, .tg-staging { display: none !important; }
  .tg-path__pane { display: block !important; }
}

/* 9-10 다운로드 패널 — 좁은 화면 */
@media (max-width: 700px) {
}