/* 블로그 전용 스타일(목록·상세 공용, 2026-10-07 시안 A 이식). templates/blog/{list,detail}.html 의
 * extra_head 에서만 링크된다.
 *
 * 원본: design_mockups/blog_A_list.html · blog_A_detail.html(오너 채택 시안 A, 생성기 _src_blog_A/) +
 *       _notes_blog_A.md. 이식 계약은 스크래치패드 port3/PLAN.md 7절.
 * 헤더·푸터·스킵 링크·.sprite/.ico/.sr-only 는 base.css 소관이다(여기서 다시 정의하지 말 것).
 * 이 파일은 body.page-blog .ftr 의 위쪽 여백만 건드린다(홈 home.css 와 같은 방식).
 *
 * ⚠ 'reduced-motion' 미디어 게이트로 움직임을 끄지 않는다(구매자 대부분이 reduce 를 보고한다 — 오너 규칙).
 *   진입 효과는 '보이는 상태'가 기본이다(H1 강조 밑줄은 다 그어진 상태가 CSS 기본).
 * ⚠ CSS 순서 속성·역방향 flex 금지(DOM 순서 = 읽기 순서). 상세 레일은 DOM 상 본문 뒤이고
 *   배치는 grid 열로만 한다.
 * ⚠ 상세 인라인 <style> 의 두 규칙(.post-body .table-scroll{…position:relative…},
 *   .post-body .body-cta a{…})은 blog/tests.py 가 HTML 에서 문자열로 찾는다 — 여기로 옮기지 말 것.
 * ⚠ 토스트는 .bd-toast(base.js 가 로드 5초 뒤 .toast 를 지운다). z-index 는 base.css 척도:
 *   읽기 진행 바 1200 · 토스트 10000. 헤더(1000) 아래로 깔리는 값을 쓰지 말 것.
 * ⚠ base.css 의 전역 h1/h2(파랑·가운데·margin), label, input, .btn(폭 100%·그라디언트·모바일 min-height)
 *   이 새어 들어온다 — 아래 :where() 리셋과 .page-blog .btn 이 명시적으로 덮는다.
 */

/* ── 토큰 ─────────────────────────────────────────────────────────
   공용 값은 base.css 의 --site-* 를 가리킨다(괄호 안 값은 그 토큰이 없을 때의 안전값 — 같은 값).
   블로그 전용 값만 여기서 직접 정한다. --site-* 를 여기서 다시 정의하지 말 것. */
:root {
  --bg: var(--site-bg, #1a1a1a);
  --bg-raise: var(--site-bg-raise, #1e1e1e);
  --surface: var(--site-surface, #232323);
  --surface-2: var(--site-surface-2, #2a2a2a);
  --surface-3: #333333;
  --surface-hover: #262626;
  --on-brand: #fff;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --line: var(--site-line, rgba(255, 255, 255, .08));
  --line-2: var(--site-line-2, rgba(255, 255, 255, .14));

  --text: var(--site-text, #f0f0f0);
  --text-body: #d6d6d6;   /* 운영 블로그 본문색(시안이 새로 쓴 유일한 색) */
  --text-2: var(--site-text-2, #b0b0b0);
  --text-3: var(--site-text-3, #949494);

  --brand: var(--site-brand, #0057d1);
  --brand-hover: var(--site-brand-hover, #0a63e6);
  --brand-press: var(--site-brand-press, #004bb5);
  --accent: var(--site-accent, #7aa5f2);
  --accent-soft: rgba(90, 140, 235, .14);
  --focus: var(--site-focus, #a8c6ff);
  --logo-blue: var(--site-logo-blue, #2d5bff);
  --logo-sky: var(--site-logo-sky, #00aaff);
  --brand-edge: linear-gradient(90deg, var(--brand), var(--logo-blue) 52%, var(--logo-sky));

  --shadow-lg: 0 40px 80px -32px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .4);
  --shadow-md: var(--site-shadow-md, 0 18px 40px -18px rgba(0, 0, 0, .55));

  --r-xs: var(--site-r-xs, 6px);
  --r-sm: var(--site-r-sm, 10px);
  --r-md: var(--site-r-md, 14px);
  --r-lg: 20px;
  --r-xl: 28px;

  /* z 축: base.css 척도(헤더 1000 · 스킵 1100 · 읽기 진행 바 1200 · 토스트 10000) */
  --z-progress: 1200;
  --z-toast: 10000;

  /* 본문·제목은 DB 의 자유 문장이라 고정 서브셋(LUT Sans)으로 덮을 수 없다 → Pretendard 동적 서브셋(jsDelivr,
     비차단 로드). 실패하면 시스템 글꼴로 그려질 뿐이다. 모노는 Geist Mono 를 싣지 않는다. */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Pretendard Variable", monospace;

  --gutter: var(--site-gutter, clamp(20px, 4vw, 40px));
  --ease: var(--site-ease, cubic-bezier(.2, .8, .2, 1));
  --anchor-gap: calc(var(--site-hdr-h, 65px) + 23px);   /* 88px: sticky 헤더 + 여유 */
}
/* 가나·한자는 Pretendard 에 없다 → ja·zh 화면(UI 또는 번역 글)은 현지 글꼴을 바로 뒤에 둔다. */
body.page-blog.ui-ja, html[lang="ja"] body.page-blog {
  --font: "Pretendard Variable", Pretendard, "Yu Gothic UI", Meiryo, "Hiragino Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.page-blog.ui-zh, html[lang="zh"] body.page-blog {
  --font: "Pretendard Variable", Pretendard, "Microsoft YaHei UI", "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ── 바탕 ─────────────────────────────────────────────────────────
   html[lang] body.page-blog: base.css 의 html[lang="en"] body(Poppins) 규칙보다 특이도가 높아야 한다. */
*::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html[lang] body.page-blog {
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--noise), var(--bg);
  word-break: normal;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss06";
}
/* keep-all 은 한국어 어절 규칙이다. 한국어 글 페이지에서 화면 언어가 ja·zh 가 아닐 때만 전체에 건다.
   ja·zh 화면 문구는 줄을 나눌 수 있어야 한다 — 그 경우 한국어 콘텐츠 블록(제목·요약·본문·서가)에만 건다. */
html[lang="ko"] body.page-blog:not(.ui-ja):not(.ui-zh) { word-break: keep-all; }
html[lang="ko"] body.page-blog :is(.bl-hero .eyebrow, .bl-hero .h1, .hero-lead, .post-title, .post-lead, .post-body, .feat h2, .feat-ex, .feat-toc, .gcard h3, .gcard-ex, .rcard h3, .rcard-ex, .shelf li, .gkeys, .chips, .same-list, .crumbs, .toc-list) { word-break: keep-all; }
html[lang="ja"] body.page-blog { word-break: normal; word-break: auto-phrase; }
body.page-blog .ftr { margin-top: 0; }

:where(body.page-blog #main) img { max-width: 100%; height: auto; display: block; }
:where(body.page-blog #main) a { color: inherit; text-decoration: none; }
:where(body.page-blog #main) :is(button, input) { font: inherit; color: inherit; }
:where(body.page-blog #main) :is(h1, h2, h3, h4) { margin: 0; color: inherit; text-align: left; text-wrap: balance; }
:where(body.page-blog #main) p { margin: 0; text-wrap: pretty; }
:where(body.page-blog #main) :is(ul, ol, dl, dd, figure, blockquote) { margin: 0; padding: 0; }
:where(body.page-blog #main) :is(ul, ol) { list-style: none; }
:where(body.page-blog #main) label { display: inline; margin: 0; color: inherit; font-size: inherit; }
:where(body.page-blog #main) table { border-collapse: collapse; }
:where(body.page-blog #main) :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
:where(body.page-blog #main) [id] { scroll-margin-top: var(--anchor-gap); }
body.page-blog [hidden] { display: none !important; }
.page-blog .nw { white-space: nowrap; }
.page-blog .mono { font-family: var(--mono); font-feature-settings: normal; }
.page-blog .num { font-variant-numeric: tabular-nums; }
/* 줄 머리 '·' 방지: 앞 글자와 '·' 를 한 덩어리로(blog_tags.dotkeep · 상세 JS). 텍스트는 원문 그대로다. */
.page-blog .dk { white-space: nowrap; }
.page-blog .wrap { width: min(100% - 2 * max(var(--gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)), 1200px); margin-inline: auto; }

/* ── 버튼(홈 그대로). base.css .btn(폭 100%·그라디언트·translateZ·모바일 min-height 48px)을 덮는다 ── */
.page-blog .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: auto; min-height: 0; height: 52px; padding: 0 24px; border-radius: 12px; border: 0; background-image: none; font-size: 1rem; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; cursor: pointer; transform: none; backface-visibility: visible; -webkit-backface-visibility: visible; user-select: auto; -webkit-user-select: auto; transition: background-color .2s, transform .22s var(--ease), box-shadow .22s; }
.page-blog .btn .ico { width: 18px; height: 18px; stroke-width: 2; transition: transform .22s var(--ease); }
.page-blog .btn-primary { background: var(--brand); color: var(--on-brand); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 14px 32px -14px rgba(0, 0, 0, .8); }
.page-blog .btn-primary:hover { background: var(--brand-hover); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 18px 36px -14px rgba(0, 80, 210, .95); }
.page-blog .btn-primary:hover .ico { transform: translateX(3px); }
.page-blog .btn-primary:active { background: var(--brand-press); transform: translateY(1px) scale(.985); }
.page-blog .btn-ghost { background: rgba(255, 255, 255, .04); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.page-blog .btn-ghost:hover { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); transform: translateY(-1px); }
.page-blog .btn-ghost:hover .ico { transform: translateX(3px); }
.page-blog .btn-ghost:active { transform: translateY(1px) scale(.985); }
.page-blog .btn-sm { height: 44px; padding: 0 18px; font-size: .9375rem; border-radius: var(--r-sm); }
.page-blog .tlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); padding: 6px 2px; border-bottom: 1px solid var(--line-2); transition: border-color .2s, color .2s; }
.page-blog .tlink .ico { width: 17px; height: 17px; color: var(--accent); transition: transform .22s var(--ease); }
.page-blog .tlink:hover { border-color: var(--accent); }
.page-blog .tlink:hover .ico.down { transform: translateY(2px); }
.page-blog .tlink:hover .ico.right { transform: translateX(3px); }

/* 주제 칩. 칩·태그만 완전 둥근 모서리, 카드 20px, 버튼 12px 규칙 */
.page-blog .topic { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-size: .8125rem; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; }
.page-blog .topic .ico { width: 14px; height: 14px; stroke-width: 2; }
.page-blog a.topic { transition: background-color .2s, color .2s; }
.page-blog a.topic:hover { background: rgba(90, 140, 235, .24); color: #a9c4f7; }

/* 공식 배지(옛 vbadge-official 과 같은 의미 — 템플릿이 두 클래스를 함께 단다) */
.page-blog .official { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 7px; border-radius: 99px; border: 1px solid rgba(122, 165, 242, .36); background: rgba(0, 87, 209, .14); color: var(--accent); font-size: .75rem; font-weight: 700; flex: none; }
.page-blog .official svg { width: 12px; height: 12px; fill: currentColor; }

/* ════════════════════════════════════════════════════════════════
   블로그 목록 · 가이드 라이브러리
   ════════════════════════════════════════════════════════════════ */
.page-blog .sec { padding-block: clamp(56px, 7vw, 96px); position: relative; }
.page-blog .h2s { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.125rem); font-weight: 750; letter-spacing: -.03em; line-height: 1.22; }

/* ── 히어로: K2 문법 헤드라인 + 새로 올라온 가이드 ───────────────── */
/* 위 여백은 가격 시안 A(.p-hero)와 같은 값. 왼쪽 열은 위로 붙인다 */
.bl-hero { position: relative; overflow-x: clip; padding-block: clamp(32px, 3.4vw, 48px) clamp(48px, 5vw, 72px); }
.bl-hero::before { content: ""; position: absolute; right: -14%; top: -220px; width: 70%; height: 860px; background: radial-gradient(closest-side, rgba(0, 87, 209, .2), rgba(0, 87, 209, .05) 55%, transparent 75%); pointer-events: none; }
.bl-hero::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 560px; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(46% 70% at 78% 42%, #000 10%, transparent 70%); mask-image: radial-gradient(46% 70% at 78% 42%, #000 10%, transparent 70%); pointer-events: none; }
.bl-hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.bl-hero .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .9375rem; font-weight: 500; color: var(--text-2); margin-bottom: 18px; }
.bl-hero .eyebrow .ico { width: 18px; height: 18px; color: var(--accent); }
.bl-hero .h1 { font-size: clamp(2rem, 1.05rem + 2.75vw, 3.375rem); font-weight: 800; letter-spacing: -.038em; line-height: 1.15; }
.bl-hero .h1 .soft { color: var(--text-2); font-weight: 700; }
.bl-hero .k2-line { display: block; }
/* 로케일 값의 <em> 이 K2 강조구다(이탤릭 아님). 홈 K2 의 강조 밑줄(로고 그라디언트)이 CSS 기본으로 다 그어져 있고,
   그어지는 움직임은 blog.js 가 Web Animations(fill: backwards)로 한 번만 붙인다. JS 가 없거나 멈춰도 밑줄은 보인다. */
.bl-hero .h1 em { position: relative; display: inline-block; font-style: normal; white-space: nowrap; }
.bl-hero .h1 em::after { content: ""; position: absolute; left: .02em; right: .05em; bottom: -.03em; height: .068em; border-radius: .034em; background: var(--brand-edge); transform-origin: left center; }
.bl-hero .hero-lead { margin-top: 22px; font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); color: var(--text-2); max-width: 29em; }
.bl-hero .hero-facts { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; font-size: .875rem; color: var(--text-3); }
.bl-hero .hero-facts li { display: inline-flex; align-items: baseline; gap: 0; line-height: 1.2; }
/* 구분선은 항목 앞에 긋는다(li + li). 서버가 보이는 항목만 렌더한다 */
.bl-hero .hero-facts li + li { padding-left: 18px; margin-left: 18px; border-left: 1px solid var(--line-2); }
.bl-hero .hero-facts b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; margin-inline: 3px 1px; }
.bl-hero .hero-facts li:first-child { align-self: center; }
/* 2쪽 이후: 히어로는 H1 + 사실 줄만 */
.bl-hero--solo .wrap { grid-template-columns: minmax(0, 1fr); }
.bl-hero--sub { padding-bottom: 24px; }
.bl-hero--sub .h1 { font-size: clamp(1.75rem, 1.1rem + 1.8vw, 2.5rem); }

/* 새로 올라온 가이드(피처): 이중 베젤 카드. 카드 전체가 링크 하나(제목 a 의 ::after) */
.feat { position: relative; border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface) 86%, transparent); border: 1px solid var(--line-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 0 8px rgba(255, 255, 255, .022), var(--shadow-lg); padding: clamp(22px, 2.4vw, 32px); transition: border-color .25s, transform .35s var(--ease); }
.feat:hover { border-color: rgba(255, 255, 255, .26); transform: translateY(-2px); }
.feat:has(a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 10px; }
.feat a:focus-visible { outline: none; }
.feat-k { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.feat-new { display: inline-flex; align-items: center; gap: 10px; font-size: .8125rem; font-weight: 650; color: var(--accent); }
.feat-new::before { content: ""; width: 20px; height: 1px; background: currentColor; }
.feat-k time { font-family: var(--mono); font-size: .8125rem; color: var(--text-3); }
.feat .topic { margin-top: 18px; }
.feat h2 { margin-top: 12px; font-size: clamp(1.3125rem, 1.05rem + .8vw, 1.625rem); font-weight: 750; letter-spacing: -.028em; line-height: 1.38; }
.feat h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* 요약은 검색 결과와 같은 문장이라 자르지 않는다 */
.feat-ex { margin-top: 12px; font-size: .9688rem; line-height: 1.75; color: var(--text-2); }
.feat-toc { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.feat-toc > p { font-size: .8125rem; font-weight: 600; color: var(--text-3); margin-bottom: 10px; }
.feat-toc ol { display: grid; gap: 7px; }
.feat-toc li { position: relative; padding-left: 18px; font-size: .9063rem; color: var(--text-2); line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feat-toc li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 2px; border-radius: 1px; background: var(--brand-edge); }
.feat-toc li.more { color: var(--text-3); font-size: .8438rem; }
.feat-toc li.more::before { background: var(--line-2); }
.feat-foot { margin-top: 22px; display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; font-size: .8438rem; color: var(--text-3); }
.feat-foot > span { display: inline-flex; align-items: center; gap: 6px; }
.feat-foot .ico { width: 16px; height: 16px; }
.feat-go { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; font-size: .9375rem; font-weight: 650; color: var(--text); }
.feat-go i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); transition: transform .3s var(--ease), background-color .2s; }
.feat-go .ico { width: 17px; height: 17px; stroke-width: 2.1; }
.feat:hover .feat-go i { transform: translateX(3px); background: var(--brand-hover); }

/* ── 주제나 게임으로 찾기 ───────────────────────────────────────── */
.page-blog .finder { padding-block: 8px clamp(40px, 5vw, 64px); }
.finder-grid { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 16px; align-items: stretch; }
.finder-grid--solo { grid-template-columns: minmax(0, 1fr); }
/* 두 칸은 같은 높이로 늘어나고, 늘어난 높이는 각 칸의 줄(게임 7줄 · 주제 7줄)이 고르게 나눠 갖는다(빈 바닥 없음).
   게임이 15개 이상이면(서버가 .gkeys--3) 넓은 화면에서 3열로 바꾸고 높이 맞춤을 끈다(아래 반응형). */
.games { position: relative; overflow: hidden; display: flex; flex-direction: column; border-radius: var(--r-lg); background: radial-gradient(120% 110% at 0% 0%, rgba(0, 87, 209, .24), transparent 56%), var(--surface); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); padding: clamp(24px, 2.6vw, 34px); }
.games-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tile-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: rgba(0, 87, 209, .24); color: #a9c4f7; box-shadow: inset 0 0 0 1px rgba(122, 165, 242, .2); }
.tile-ic .ico { width: 21px; height: 21px; }
.games-head h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
.games-head .cnt { font-family: var(--mono); font-size: .875rem; color: var(--text-3); }
.games-head .tlink { margin-left: auto; font-size: .875rem; }
.games-sub { margin-top: 12px; font-size: .9375rem; color: var(--text-2); }
/* 게임 열쇠: 게임 이름만. 누르면 그 글로 바로 간다. 14 = 2열 x 7줄이라 어느 폭에서도 빈 칸이 없다 */
.gkeys { flex: 1 1 auto; margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(46px, 1fr); gap: 8px; }
.gkeys a { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px 0 16px; border-radius: 12px; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px var(--line); font-size: .9688rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; color: var(--text); transition: background-color .2s, box-shadow .2s, transform .2s var(--ease); }
.gkeys .ico { width: 16px; height: 16px; color: var(--text-3); transition: transform .22s var(--ease), color .2s; }
.gkeys a:hover { background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); }
.gkeys a:hover .ico { color: var(--accent); transform: translateX(3px); }
.gkeys a:active { transform: scale(.98); }

.topics { display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035); padding: clamp(18px, 2vw, 24px) clamp(12px, 1.6vw, 18px) clamp(10px, 1.2vw, 14px); }
.topics h3 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em; padding: 0 8px 10px; }
.topics ul { flex: 1 1 auto; display: grid; grid-auto-rows: 1fr; }
.topics li + li { border-top: 1px solid var(--line); }
.topics li { display: flex; align-items: center; }
.topics a { flex: 1; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 18px; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; transition: background-color .2s; }
.topics a:hover { background: rgba(255, 255, 255, .05); }
.t-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--accent); }
.t-ic .ico { width: 18px; height: 18px; }
.t-name { font-size: .9688rem; font-weight: 600; min-width: 0; }
.t-cnt { font-family: var(--mono); font-size: .8125rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.t-go { width: 18px; height: 18px; color: var(--text-3); transition: transform .22s var(--ease), color .2s; }
.topics a:hover .t-go { transform: translateY(2px); color: var(--accent); }

/* ── 최근 가이드(1쪽 6편 / 2쪽부터 8편) ─────────────────────────── */
.page-blog .recent { padding-block: clamp(24px, 3vw, 40px) clamp(56px, 6vw, 80px); }
.page-blog .recent--sub { padding-top: 24px; }
.recent-head { display: flex; align-items: end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 26px; }
.recent-head .tlink { font-size: .9375rem; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.gcard { position: relative; height: 100%; display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035); padding: clamp(22px, 2.4vw, 30px); transition: background-color .25s, transform .35s var(--ease); }
.gcard:hover { background: var(--surface-hover); transform: translateY(-2px); }
.gcard:has(a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.gcard a:focus-visible { outline: none; }
.gcard-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gcard-meta time { margin-left: auto; font-family: var(--mono); font-size: .8125rem; color: var(--text-3); }
.gcard h3 { margin-top: 16px; font-size: 1.1875rem; font-weight: 700; letter-spacing: -.022em; line-height: 1.45; text-wrap: pretty; }
.gcard h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.gcard-ex { margin-top: 10px; font-size: .9375rem; line-height: 1.72; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bl-empty { padding: 56px 24px; border-radius: var(--r-lg); border: 1px dashed var(--line-2); text-align: center; color: var(--text-3); font-size: .9375rem; }

/* 페이지 이동: 서버 ?page=N 링크 그대로(1쪽은 파라미터 없는 주소) */
.pager { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; }
.pager-pos { font-size: .875rem; color: var(--text-3); }
.pager-pos b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.pager-links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pager-links a, .pager-links span { min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; border-radius: var(--r-sm); font-size: .9375rem; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; transition: background-color .2s, color .2s; }
.pager-links a:hover { background: rgba(255, 255, 255, .07); color: var(--text); }
.pager-links [aria-current] { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.pager-links .ico { width: 17px; height: 17px; }

/* ── 전체 가이드 서가(1쪽 전용 · 모든 글의 링크가 초기 HTML 에 있다 = 크롤 경로) ── */
.page-blog .lib { border-top: 1px solid var(--line); background: var(--noise), linear-gradient(180deg, var(--bg-raise), var(--bg) 70%); }
.lib-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 32px; }
.lib-head h2 .count { margin-left: 12px; font-family: var(--mono); font-size: .5em; font-weight: 500; letter-spacing: 0; color: var(--text-3); vertical-align: .32em; }
.lib-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
html:not(.js) .lib-tools, html:not(.js) .lib-status { display: none; }
.seg { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.seg button { height: 36px; padding: 0 15px; border: 0; border-radius: 9px; background: none; color: var(--text-2); font-size: .9063rem; font-weight: 600; cursor: pointer; transition: background-color .2s, color .2s; }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--surface-3); color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.filter { position: relative; display: flex; align-items: center; }
.filter > .ico { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--text-3); pointer-events: none; }
/* base.css 의 전역 input(패딩 14px 20px · 2px 테두리 · 회색 배경 · focus 시 outline 없음)을 덮는다 */
.filter input { width: 300px; max-width: 100%; height: 44px; margin: 0; padding: 0 42px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font-size: .9375rem; box-shadow: none; transition: border-color .2s, box-shadow .2s; }
.filter input::placeholder { color: var(--text-3); opacity: 1; }
.filter input:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px rgba(122, 165, 242, .22); }
.filter input::-webkit-search-cancel-button { display: none; }
.filter-clear { position: absolute; right: 6px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--text-3); display: grid; place-items: center; cursor: pointer; }
.filter-clear:hover { color: var(--text); background: rgba(255, 255, 255, .07); }
.filter-clear .ico { width: 16px; height: 16px; }
.lib-status { margin-top: 16px; font-size: .875rem; color: var(--text-3); min-height: 1.5em; }
.lib-status b { color: var(--text); font-weight: 600; }
.shelves { margin-top: 30px; columns: 2; column-gap: clamp(36px, 5vw, 72px); }
.shelf { break-inside: avoid; padding-bottom: 34px; }
.shelf h3 { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line-2); font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.shelf h3 .ico { width: 18px; height: 18px; color: var(--accent); }
.shelf h3 .num { margin-left: auto; font-family: var(--mono); font-size: .8125rem; font-weight: 500; color: var(--text-3); }
.shelf li { display: grid; grid-template-columns: 6.4em minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 8px 0; }
.shelf time { font-family: var(--mono); font-size: .8125rem; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.shelf a { font-size: .9688rem; line-height: 1.6; color: var(--text-2); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s; }
.shelf a:hover { color: var(--text); text-decoration-color: var(--accent); }
.shelf mark { background: rgba(122, 165, 242, .26); color: var(--text); border-radius: 3px; padding: 0 1px; }
.lib-empty { margin-top: 26px; padding: 26px 28px; border-radius: var(--r-lg); border: 1px dashed var(--line-2); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.lib-empty p { color: var(--text-2); font-size: .9688rem; flex: 1 1 22em; }
.lib-empty p b { color: var(--text); }
.lib-empty p a { display: inline-flex; align-items: center; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--line-2); transition: border-color .2s; }
.lib-empty p a:hover { border-color: var(--accent); }

/* ── 이 블로그를 운영하는 제품(목록의 조용한 접점 하나, data-cta="blog_list") ── */
.page-blog .madeby { padding-block: clamp(8px, 2vw, 24px) clamp(72px, 9vw, 112px); }
.madeby-card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); align-items: center; gap: 28px clamp(28px, 4vw, 56px); border-radius: var(--r-xl); background: radial-gradient(110% 140% at 100% 100%, rgba(0, 87, 209, .28), transparent 58%), var(--surface); border: 1px solid var(--line-2); padding-left: clamp(24px, 4.4vw, 56px); }
.madeby-copy { padding-block: clamp(32px, 4.4vw, 56px); }
.madeby-k { display: inline-flex; align-items: center; gap: 10px; font-size: .9375rem; font-weight: 700; color: var(--text); }
.madeby-k img { width: 26px; height: 26px; }
.madeby h2 { margin-top: 16px; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); font-weight: 750; letter-spacing: -.03em; line-height: 1.25; }
.madeby-body { margin-top: 12px; color: var(--text-2); max-width: 30em; }
.madeby .btn { margin-top: 26px; }
.madeby-note { margin-top: 14px; font-size: .8125rem; color: var(--text-3); }
.madeby-shot { align-self: end; padding-top: clamp(28px, 4vw, 48px); }
.madeby-shot img { width: 100%; max-width: 560px; margin-left: auto; border-radius: 12px 0 0 0; box-shadow: -24px -24px 60px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06); }

/* ════════════════════════════════════════════════════════════════
   블로그 상세 · 가이드 한 권
   본문 타이포는 오너 지정값: 본문 18px(모바일도) · 행간 1.9 · H2 최대 26px · H3 최대 21px · 제목 최대 34px · 본문 폭 720px
   ════════════════════════════════════════════════════════════════ */

/* 읽기 진행(상단 3px 바, 장식). scroll 이벤트 없이 CSS 스크롤 타임라인으로 그린다.
   지원하지 않는 브라우저는 blog.js 가 IntersectionObserver 구간 40개로 채운다(html.progress-io) */
.bd-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: var(--z-progress); pointer-events: none; }
.bd-progress i { display: block; height: 100%; background: var(--brand-edge); transform-origin: left center; transform: scaleX(0); }
@supports (animation-timeline: scroll()) {
  .bd-progress i { animation: bd-prog linear both; animation-timeline: scroll(root block); }
}
@keyframes bd-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
html.progress-io .bd-progress i { animation: none; transition: transform .25s var(--ease); }
html.progress-io body.page-blog { position: relative; }
.progress-marks { position: absolute; left: 0; top: 0; width: 1px; height: 100%; opacity: 0; pointer-events: none; }
.progress-marks i { position: absolute; left: 0; width: 1px; }

/* 2열: 본문(article) → 오른쪽 레일(aside). DOM 순서 그대로, 배치는 grid 만 */
.post-wrap { width: min(100% - 2 * max(var(--gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)), 1200px); margin-inline: auto; padding-block: clamp(18px, 2.6vw, 32px) clamp(72px, 9vw, 112px); display: grid; grid-template-columns: minmax(0, 1fr); }
.post { width: 100%; max-width: 720px; margin-inline: auto; min-width: 0; }
.rail { display: none; }

/* 브레드크럼(JSON-LD BreadcrumbList 와 같은 2단계 + 현재 글) */
.crumbs ol { display: flex; align-items: center; gap: 4px; font-size: .8438rem; color: var(--text-3); min-width: 0; }
.crumbs li { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.crumbs li:last-child { min-width: 0; flex: 1; }
.crumbs li:last-child span { overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.crumbs a { padding: 4px 2px; border-radius: 4px; transition: color .2s; }
.crumbs a:hover { color: var(--text); }
.crumbs .ico { width: 14px; height: 14px; flex: none; }

/* 글 머리: 주제 칩 · 제목 · 요약 리드 · 날짜/읽는 시간/링크 복사 · 공식 고지 */
.post-head { padding-top: clamp(22px, 3vw, 36px); }
.post-head .post-title { margin-top: 16px; font-size: clamp(1.625rem, 1.15rem + 1.6vw, 2.125rem); font-weight: 800; letter-spacing: -.032em; line-height: 1.38; text-align: left; text-wrap: pretty; }
.post-lead { margin-top: 16px; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.8; color: var(--text-2); }
.post-meta { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; font-size: .875rem; color: var(--text-3); }
.post-meta > span { display: inline-flex; align-items: center; gap: 7px; }
.post-meta .ico { width: 16px; height: 16px; }
.post-meta time, .post-meta b { color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.copy-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: var(--text-2); font-size: .8438rem; font-weight: 600; cursor: pointer; transition: color .2s, border-color .2s, background-color .2s, transform .2s var(--ease); }
.copy-btn .ico { width: 16px; height: 16px; }
.copy-btn:hover { color: var(--text); border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06); }
.copy-btn:active { transform: scale(.98); }
.post-disclose { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; align-items: flex-start; gap: 10px; font-size: .8438rem; line-height: 1.6; color: var(--text-3); }

/* 이 글의 순서: 1200px 미만은 본문 위 접이식, 이상은 오른쪽 레일. 둘 다 JS 가 본문 H2 로 만든다(번호·게이지 없음) */
.toc-skip { position: absolute; left: -9999px; }
@media (max-width: 1199px) { .toc-skip { display: none; } }
.toc-skip:focus { position: static; display: inline-flex; margin-top: 12px; padding: 6px 10px; border-radius: var(--r-xs); background: var(--surface-2); font-size: .875rem; }
.toc-inline { margin-top: 26px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
html:not(.js) .toc-inline, html:not(.js) .rail-toc { display: none; }
.toc-inline summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 15px 18px; font-size: .9688rem; font-weight: 650; border-radius: var(--r-md); }
.toc-inline summary::-webkit-details-marker { display: none; }
.toc-inline summary .ico { width: 18px; height: 18px; color: var(--accent); }
.toc-inline summary .cnt { font-size: .8438rem; font-weight: 500; color: var(--text-3); }
.toc-inline summary .chev { margin-left: auto; color: var(--text-3); transition: transform .25s var(--ease); }
.toc-inline[open] summary .chev { transform: rotate(180deg); }
.toc-inline .toc-list { padding: 0 10px 12px; }
.toc-list a { position: relative; display: block; padding: 7px 10px 7px 18px; border-radius: 8px; font-size: .875rem; line-height: 1.5; color: var(--text-3); transition: color .2s, background-color .2s; }
.toc-list a::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px; border-radius: 1px; background: var(--line-2); transition: background-color .2s; }
.toc-list a:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.toc-list a[aria-current="true"] { color: var(--text); }
.toc-list a[aria-current="true"]::before { background: linear-gradient(180deg, var(--logo-sky), var(--brand)); }

/* ── 본문(서버 HTML 그대로 + JS 점진적 향상) ───────────────────── */
.post-body { margin-top: 10px; font-size: 1.125rem; line-height: 1.9; color: var(--text-body); overflow-wrap: anywhere; }
.post-body > * { margin-top: 1.1em; }
.post-body h2 { position: relative; margin-top: 2.5em; padding-top: 1.1em; border-top: 1px solid var(--line); font-size: clamp(1.375rem, 1.15rem + .7vw, 1.625rem); font-weight: 750; letter-spacing: -.028em; line-height: 1.45; color: var(--text); }
.post-body h2::before { content: ""; position: absolute; left: 0; top: -1px; width: 32px; height: 2px; border-radius: 1px; background: var(--brand-edge); }
.post-body > h2:first-child { margin-top: 1.6em; }
.post-body h2 + * { margin-top: .75em; }
.post-body h3 { margin-top: 1.9em; font-size: clamp(1.1875rem, 1.05rem + .4vw, 1.3125rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.5; color: var(--text); }
.post-body h3 + * { margin-top: .5em; }
.post-body a:not([class]) { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(122, 165, 242, .45); text-underline-offset: 4px; transition: text-decoration-color .2s, color .2s; }
.post-body a:not([class]):hover { color: #a9c4f7; text-decoration-color: currentColor; }
.post-body strong { color: var(--text); font-weight: 650; }
.post-body code { font-family: var(--mono); font-size: .82em; padding: .16em .45em; border-radius: 6px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); color: #e8e8e8; overflow-wrap: anywhere; }
.post-body pre { overflow-x: auto; padding: 14px 16px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.post-body pre code { padding: 0; background: none; box-shadow: none; }
.post-body blockquote { padding: 4px 0 4px 18px; border-left: 2px solid var(--line-2); color: var(--text-2); }
.post-body img { border-radius: 12px; }
.post-body hr { border: 0; border-top: 1px solid var(--line); }
/* H2 앵커(운영과 같은 sec-NN id). 누르면 그 섹션 주소를 복사한다 */
.h-anchor { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-left: 6px; vertical-align: -.2em; border-radius: 8px; color: var(--text-3); opacity: .45; text-decoration: none !important; transition: opacity .2s, color .2s, background-color .2s; }
.h-anchor .ico { width: 17px; height: 17px; }
.post-body h2:hover .h-anchor, .h-anchor:focus-visible { opacity: 1; }
.h-anchor:hover { color: var(--text); background: rgba(255, 255, 255, .06); }

/* 목록: 글머리 기호는 작은 블루 막대. 항목마다 굵은 이름으로 시작하는 목록(설정 항목형)은 카드 줄로 */
.post-body ul > li { position: relative; padding-left: 1.2em; }
.post-body ul > li::before { content: ""; position: absolute; left: .15em; top: .86em; width: 7px; height: 2px; border-radius: 1px; background: var(--accent); }
.post-body li + li { margin-top: .5em; }
.post-body ul.ul-defs { display: grid; gap: 8px; }
.post-body ul.ul-defs > li { margin: 0; padding: 14px 18px 14px 20px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 1.0625rem; line-height: 1.8; }
.post-body ul.ul-defs > li::before { left: 0; top: 16px; bottom: 16px; width: 2px; height: auto; background: linear-gradient(180deg, var(--logo-sky), var(--brand)); }
.post-body ul.ul-defs > li > strong:first-child { color: var(--text); }
/* 번호 단계(<ol>): 번호 원 + 세로 연결선. 번호는 글 안의 순서다(섹션 번호가 아니다) */
.post-body ol { counter-reset: step; }
.post-body ol > li { counter-increment: step; position: relative; margin: 0; padding: 0 0 1.05em 46px; }
.post-body ol > li:last-child { padding-bottom: 0; }
.post-body ol > li::before { content: counter(step); position: absolute; left: 0; top: 2px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: .875rem; font-weight: 600; color: var(--text); background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(122, 165, 242, .45); }
.post-body ol > li::after { content: ""; position: absolute; left: 15px; top: 38px; bottom: 6px; width: 1px; background: var(--line-2); }
.post-body ol > li:last-child::after { content: none; }

/* 표 — 래퍼(.table-scroll)의 규칙은 상세 템플릿 인라인 <style> 에 있다(시험 고정). 여기는 표 안쪽만 */
.post-body table { width: 100%; font-size: .9375rem; line-height: 1.6; font-variant-numeric: tabular-nums; }
.post-body .table-scroll table { min-width: 540px; }
.post-body th { text-align: left; font-size: .8125rem; font-weight: 650; color: var(--text-2); background: rgba(255, 255, 255, .035); padding: 12px 18px; }
.post-body .table-scroll th { white-space: nowrap; }
.post-body td { padding: 13px 18px; border-top: 1px solid var(--line); vertical-align: top; color: var(--text-body); }
.post-body td:first-child { color: var(--text); font-weight: 600; }
.post-body tr.auto-row td { background: rgba(0, 87, 209, .16); }
.post-body tr.auto-row td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.post-body .table-legend { margin-top: .75em; display: flex; align-items: center; gap: 10px; font-size: .875rem; line-height: 1.6; color: var(--text-3); }
.legend-swatch { flex: none; width: 16px; height: 16px; border-radius: 4px; background: rgba(0, 87, 209, .3); box-shadow: inset 3px 0 0 var(--accent); }

/* 글쓴이 주(※ 문단) */
.post-body .editor-note { position: relative; display: flex; gap: 12px; padding: 14px 18px 14px 20px; border-radius: 12px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--line); font-size: 1rem; line-height: 1.8; color: var(--text-2); }
.post-body .editor-note::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 1px; background: var(--text-3); }
.editor-note .ico { width: 18px; height: 18px; margin-top: 5px; color: var(--text-3); }

/* 본문 CTA(.body-cta, 서버 promote_body_cta). 조용한 보조 버튼: 볼드는 하단 CTA 하나뿐.
   버튼 본체 규칙(.post-body .body-cta a{…})은 상세 템플릿 인라인 <style> 에 있다(시험 고정). */
.post-body .body-cta { margin-top: 1.4em; }
.post-body .body-cta a::after { content: ""; width: 17px; height: 17px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .22s var(--ease); }
.post-body .body-cta a:hover { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); }
.post-body .body-cta a:hover::after { transform: translateX(3px); }

/* 자주 묻는 질문 → 아코디언(첫 항목만 열림) */
.post-body .faq-item { margin-top: 0; border-bottom: 1px solid var(--line); }
.post-body h2 + .faq-item { margin-top: .6em; border-top: 1px solid var(--line); }
.post-body .faq-q { margin: 0; font-size: inherit; }
.faq-q button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 2px; border: 0; background: none; text-align: left; font-size: 1.125rem; font-weight: 650; line-height: 1.55; color: var(--text); cursor: pointer; }
.faq-q button:hover { color: #fff; }
.faq-q .chev { flex: none; width: 20px; height: 20px; color: var(--text-3); transition: transform .3s var(--ease); }
.faq-item.open .faq-q .chev { transform: rotate(180deg); color: var(--accent); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility .32s; }
.faq-item.open .faq-a-inner { visibility: visible; }
.faq-a-inner > p { margin: 0 0 18px; color: var(--text-2); }
.faq-a-inner > :is(ul, ol) { margin: 0 0 18px; }

/* 체크리스트: 눌러서 지우는 항목 + 완료 수(세션 한정, 저장 없음) */
.post-body .checklist-meta { margin-top: .9em; display: flex; justify-content: flex-end; gap: 6px; font-size: .8438rem; color: var(--text-3); }
.checklist-meta b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.post-body ul.checklist { margin-top: .5em; display: grid; gap: 8px; }
.post-body ul.checklist > li { margin: 0; padding: 0; }
.post-body ul.checklist > li::before { content: none; }
.check { width: 100%; display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 0; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-align: left; font-size: 1.0625rem; line-height: 1.7; color: var(--text-body); cursor: pointer; transition: background-color .2s, box-shadow .2s; }
.check:hover { background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--line-2); }
.check__box { flex: none; width: 22px; height: 22px; margin-top: 3px; border-radius: 6px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--text-3); color: transparent; transition: background-color .2s, box-shadow .2s, color .2s; }
.check__box .ico { width: 14px; height: 14px; stroke-width: 3; }
.check[aria-pressed="true"] .check__box { background: var(--brand); box-shadow: none; color: #fff; }
.check[aria-pressed="true"] .check__label { color: var(--text-3); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .28); }

/* ── 제품 카드(레일 · 흐름 공용). 조용한 접점: 수치 칩은 하단 CTA 에만 둔다 ── */
.pcard { border-radius: var(--r-lg); background: radial-gradient(120% 90% at 100% 0%, rgba(0, 87, 209, .2), transparent 62%), var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); padding: 20px 20px 18px; }
.pcard-head { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 700; color: var(--text); }
.pcard-head img { width: 26px; height: 26px; }
.pcard-tag { margin-top: 10px; font-size: .875rem; line-height: 1.65; color: var(--text-2); }
.page-blog .pcard .btn { margin-top: 16px; width: 100%; }
.pcard-note { margin-top: 12px; font-size: .75rem; line-height: 1.55; color: var(--text-3); }
/* 흐름 카드: 선택자는 .pcard--flow 로 건다(본문 안 한정 .post-body .pcard--flow 로 걸면 표 없는 글에서
   카드가 본문 밖에 남아 1200px 이상에서 레일 카드와 함께 보인다) */
.pcard--flow { margin-top: 1.6em; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 20px; }
.pcard--flow .pcard-head, .pcard--flow .pcard-tag, .pcard--flow .pcard-note { grid-column: 1; }
.pcard--flow .pcard-tag { margin-top: 4px; font-size: .9375rem; }
.page-blog .pcard--flow .btn { grid-column: 2; grid-row: 1 / span 2; margin: 0; width: auto; }
.pcard--flow .pcard-note { margin-top: 6px; }
/* 무료 도구 링크 띠(2026-11-06, tools/links.py): 본문 바로 아래, 제품 카드보다 앞. 링크 1~2개라 한 줄 목록. */
.tool-strip { margin-top: 1.6em; padding: 16px 18px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.tool-strip-k { margin: 0 0 8px; font-size: .8125rem; font-weight: 600; color: var(--text-3); }
.tool-strip ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.tool-strip a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--accent); text-decoration: none; }
.tool-strip a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tool-strip .ico { width: 14px; height: 14px; }

/* 레일: 하나의 sticky 묶음. 제품 카드는 항상 보이는 고정 높이 블록이고, 목차는 남는 높이만 쓴다.
   목차 줄이 그 높이를 넘으면 목록 안에서만 스크롤한다(얇은 스크롤바 + 페이드 + 현재 섹션 자동 노출). */
.rail-in { position: sticky; top: var(--anchor-gap); max-height: calc(100dvh - var(--anchor-gap) - 16px); display: flex; flex-direction: column; gap: 14px; }
.rail-toc { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 16px 10px 10px; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line); background: var(--bg-raise); timeline-scope: --toc; }
.rail-toc h2 { flex: none; display: flex; align-items: baseline; justify-content: space-between; padding: 0 10px 8px; font-size: .875rem; font-weight: 650; line-height: 1.7; color: var(--text-2); }
.rail-toc h2 span { font-size: .8125rem; font-weight: 500; color: var(--text-3); }
.toc-scroll { position: relative; flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
.rail-toc .toc-list { position: relative; flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; scroll-timeline: --toc block; }
.rail-toc .toc-list::-webkit-scrollbar { width: 6px; }
.rail-toc .toc-list::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(255, 255, 255, .22); }
.rail-toc .toc-list a { font-size: .8438rem; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 위·아래 페이드: 목록에 더 올라갈/내려갈 줄이 있을 때만(스크롤 타임라인이 활성일 때만 보인다) */
.toc-scroll::before, .toc-scroll::after { content: ""; position: absolute; z-index: 1; left: 0; right: 8px; height: 36px; pointer-events: none; opacity: 0; }
.toc-scroll::before { top: 0; background: linear-gradient(var(--bg-raise) 15%, rgba(30, 30, 30, 0)); }
.toc-scroll::after { bottom: 0; background: linear-gradient(rgba(30, 30, 30, 0), var(--bg-raise) 85%); }
@supports (animation-timeline: scroll()) {
  .toc-scroll::before { animation: bd-tocfade-top linear both; animation-timeline: --toc; }
  .toc-scroll::after { animation: bd-tocfade-bot linear both; animation-timeline: --toc; }
}
@keyframes bd-tocfade-top { 0% { opacity: 0; } 12%, 100% { opacity: 1; } }
@keyframes bd-tocfade-bot { 0%, 88% { opacity: 1; } 100% { opacity: 0; } }
.rail-top { flex: none; display: inline-flex; align-items: center; gap: 6px; margin: 6px 10px 2px; font-size: .8125rem; color: var(--text-3); transition: color .2s; }
.rail-top:hover { color: var(--text); }
.rail-top .ico { width: 15px; height: 15px; }
.rail .pcard { flex: none; }
/* 아주 낮은 창(높이 540px 이하)은 sticky 를 풀어 레일이 글과 함께 흐르게 한다(카드가 화면 밖으로 잘리지 않게) */
@media (max-height: 540px) {
  .rail-in { position: static; max-height: none; }
  .rail-toc .toc-list { overflow: visible; }
}

/* ── 하단 CTA(이 페이지에서 유일하게 볼드) ─────────────────────── */
.post-cta { position: relative; overflow: hidden; margin-top: 64px; border-radius: var(--r-xl); background: radial-gradient(110% 140% at 100% 100%, rgba(0, 87, 209, .32), transparent 58%), var(--surface); border: 1px solid var(--line-2); padding: clamp(26px, 3.6vw, 40px); }
.post-cta .wm { position: absolute; right: -36px; top: 50%; height: 120%; width: auto; max-width: none; transform: translateY(-50%); opacity: .07; pointer-events: none; }
.post-cta > :not(.wm) { position: relative; }
.post-cta h2 { font-size: clamp(1.375rem, 1.15rem + .8vw, 1.75rem); font-weight: 750; letter-spacing: -.03em; line-height: 1.32; }
.post-cta p { margin-top: 12px; max-width: 33em; font-size: 1rem; line-height: 1.75; color: var(--text-2); }
.post-cta .btn { margin-top: 24px; }
.trust { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .875rem; color: var(--text-2); }
.trust li { display: inline-flex; align-items: center; gap: 7px; }
.trust .ico { width: 16px; height: 16px; color: var(--accent); stroke-width: 2.4; }
.trust b { color: var(--text); font-weight: 650; }

/* ── 이어 읽기: 함께 보면 좋은 글(고리 4편) + 같은 주제의 가이드 ─── */
.next { margin-top: 64px; }
.next-h { font-size: 1.375rem; font-weight: 750; letter-spacing: -.025em; }
.rcards { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rcard { position: relative; height: 100%; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035); padding: 20px 22px 22px; transition: background-color .25s, transform .35s var(--ease); }
.rcard:hover { background: var(--surface-hover); transform: translateY(-2px); }
.rcard:has(a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.rcard a:focus-visible { outline: none; }
.rcard h3 { margin-top: 14px; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.016em; line-height: 1.5; text-wrap: pretty; }
.rcard h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.rcard-ex { margin-top: 8px; font-size: .875rem; line-height: 1.7; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.same { margin-top: 28px; padding: 22px 22px 24px; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line); }
.same-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.same-head h3 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em; }
.same-head .cnt { font-family: var(--mono); font-size: .8125rem; color: var(--text-3); }
.same-head .tlink { margin-left: auto; font-size: .875rem; }
.chips { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px; border-radius: 99px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line-2); font-size: .9063rem; font-weight: 600; color: var(--text); transition: background-color .2s, box-shadow .2s, transform .2s var(--ease); }
.chips a:hover { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); transform: translateY(-1px); }
.chips a[aria-current] { background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(122, 165, 242, .5); }
.page-blog .now { font-size: .75rem; font-weight: 600; color: var(--accent); }
/* 게임 밖 주제는 제목 목록(2~14편이라 칩보다 목록이 읽기 쉽다, 시안 노트 7절) */
.same-list { margin-top: 12px; display: grid; gap: 2px; }
.same-list li { position: relative; padding: 6px 0 6px 18px; }
.same-list li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 7px; height: 2px; border-radius: 1px; background: var(--line-2); }
.same-list a { font-size: .9375rem; line-height: 1.6; color: var(--text-2); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s; }
.same-list a:hover { color: var(--text); text-decoration-color: var(--accent); }
.same-list a[aria-current] { color: var(--text); }
.same-list .now { margin-left: 8px; }

.post-foot { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.post-foot .btn .ico { transform: none; }

/* 복사 알림(.toast 는 base.js 가 지우므로 이름이 다르다) */
.bd-toast { position: fixed; left: 50%; bottom: 28px; z-index: var(--z-toast); display: flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); padding: 11px 16px; border-radius: 12px; background: var(--surface-3); color: var(--text); box-shadow: var(--shadow-md), inset 0 0 0 1px var(--line-2); font-size: .9063rem; font-weight: 600; line-height: 1.5; opacity: 0; transform: translate(-50%, 14px); transition: opacity .25s, transform .35s var(--ease); pointer-events: none; }
.bd-toast .ico { width: 17px; height: 17px; color: var(--accent); stroke-width: 2.4; }
.bd-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ── 반응형 ─────────────────────────────────────────────────────
   상세 레일 1200px: 레일·흐름 카드·접이식 목차의 표시 전환은 CSS 만 한다(JS 에 폭 임계값이 없다 —
   흐름 카드는 폭과 무관하게 첫 표 뒤로 옮기고, 1200px 이상에서는 CSS 가 숨긴다). */
/* 2열 히어로: 피처 카드 윗변을 H1 의 시각적 윗변에 맞춘다(눈썹 한 줄 + 여백 18px + H1 반행간 ≈ 51px) */
@media (min-width: 1081px) {
  .bl-hero:not(.bl-hero--solo) .feat { margin-top: 51px; }
  /* 게임 15개 이상: 넓은 화면은 3열 */
  .gkeys--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 46px; flex: none; }
}
/* 게임 15개 이상이면 모든 폭에서 두 칸 높이 맞춤을 끈다(게임 칸이 길어져 주제 줄 간격이 벌어지지 않게) */
.finder-grid:has(.gkeys--3) { align-items: start; }
.finder-grid:has(.gkeys--3) .topics ul { grid-auto-rows: auto; }
@media (max-width: 1080px) {
  .bl-hero .wrap { grid-template-columns: minmax(0, 1fr); }
}
/* 히어로가 한 줄로 내려오는 태블릿 폭: 새 가이드 카드를 넓게 쓰고, 안쪽을 [제목·요약 | 이 글의 순서] 두 칸으로 */
@media (min-width: 761px) and (max-width: 1080px) {
  .feat { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-areas: "k k" "topic toc" "title toc" "ex toc" "foot foot"; column-gap: 32px; align-items: start; }
  .feat-k { grid-area: k; }
  .feat .topic { grid-area: topic; justify-self: start; }
  .feat h2 { grid-area: title; }
  .feat-ex { grid-area: ex; }
  .feat-toc { grid-area: toc; margin-top: 18px; padding: 2px 0 0 28px; border-top: 0; border-left: 1px solid var(--line); }
  .feat-toc li { white-space: normal; }
  .feat-foot { grid-area: foot; }
}
@media (max-width: 900px) {
  .finder-grid { grid-template-columns: minmax(0, 1fr); }
  .madeby-card { grid-template-columns: minmax(0, 1fr); padding-right: clamp(24px, 4.4vw, 56px); }
  .madeby-copy { padding-bottom: 0; }
  .madeby-shot { padding-top: 0; margin-right: calc(-1 * clamp(24px, 4.4vw, 56px)); }
}
@media (max-width: 760px) {
  .cards { grid-template-columns: minmax(0, 1fr); }
  .shelves { columns: 1; }
  .lib-tools { width: 100%; }
  .filter { flex: 1 1 100%; }
  .filter input { width: 100%; }
}
@media (max-width: 560px) {
  /* 사실 줄 2열 격자(구분선 없음): [공식][가이드 N편] / 셋째 항목이 둘째 줄 전체 */
  .bl-hero .hero-facts { display: grid; grid-template-columns: repeat(2, max-content); gap: 12px 28px; align-items: center; }
  .bl-hero .hero-facts li + li { padding-left: 0; margin-left: 0; border-left: 0; }
  .bl-hero .hero-facts li:first-child { justify-self: start; }
  .bl-hero .hero-facts li:nth-child(n+3) { grid-column: 1 / -1; }
  .gkeys { grid-auto-rows: minmax(48px, auto); }
  .gkeys a { padding: 0 12px 0 14px; }
  .feat-toc li { white-space: normal; }
  /* 카드 머리: 장식 아이콘을 빼서 한 줄에 '게임별 최적화 N편 · 서가에서 보기'(오른쪽 정렬) */
  .games-head .tile-ic { display: none; }
  .games-head .tlink { margin-left: auto; }
  .shelf li { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 9px 0; }
  .pager { justify-content: center; }
  .pager-pos { width: 100%; text-align: center; }
}
@media (min-width: 1200px) {
  .post-wrap { grid-template-columns: minmax(0, 720px) 320px; column-gap: 64px; justify-content: space-between; }
  .post { margin-inline: 0; }
  .rail { display: block; }
  .toc-inline, .pcard--flow { display: none; }
}
@media (max-width: 640px) {
  .copy-btn { margin-left: 0; }
  .pcard--flow { grid-template-columns: minmax(0, 1fr); }
  .page-blog .pcard--flow .btn { grid-column: 1; grid-row: auto; margin-top: 10px; }
  .rcards { grid-template-columns: minmax(0, 1fr); }
  .page-blog .post-cta .btn { width: 100%; }
  .same-head .tlink { margin-left: 0; }
  .post-body ul.ul-defs > li { padding: 13px 14px 13px 18px; }
  .post-body th, .post-body td { padding-inline: 14px; }
}