/* nxaccount.com — 앰버 블랙의 게임 진행 기록판. 모바일(360px) 기준으로 쓰고 넓은 화면에서 늘린다.
   토큰은 base.html :root. 그림자·광택·자동 움직임 없음. */

/* ── 1. 기본 ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 16px; line-height: 1.65;
  word-break: keep-all; overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--primary); text-underline-offset: 3px; }
a:hover { color: var(--text); }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.4; word-break: keep-all; overflow-wrap: break-word; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
[hidden] { display: none !important; }
.num { font-family: var(--font-number); font-weight: 600; font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skiplink { position: absolute; left: 12px; top: -60px; z-index: 10; padding: 12px 16px; background: var(--primary); color: var(--on-primary); font-weight: 600; border-radius: var(--radius); }
.skiplink:focus { top: 12px; }

/* ── 2. 헤더 (문서 흐름 안 — 고정하지 않는다) ───────────── */
.topbar { background: var(--bg); border-bottom: 1px solid var(--line); }
.topbar__in { max-width: var(--container); margin: 0 auto; padding: 8px var(--gutter) 10px; }
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; color: var(--text); text-decoration: none; min-width: 0; }
.brand__mark { flex: none; }
.brand__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.brand__name { font-weight: var(--weight-title); font-size: 18px; letter-spacing: -.01em; }
.brand__tag { font-size: 13px; color: var(--text-dim); }
.brand-row__find {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none;
}
.brand-row__find:hover { border-color: var(--primary); color: var(--primary); }
.guide-nav ul { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.guide-nav a {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 4px 6px; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text); font-size: 15px; font-weight: 600; text-decoration: none; line-height: 1.3;
}
.guide-nav a:hover { border-color: var(--primary); }
.guide-nav a[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* ── 3. 공통 지면 ─────────────────────────────────── */
.stage { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) 56px; }
.band { margin-top: 40px; }
.band__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.band__h { font-size: 20px; font-weight: var(--weight-strong); padding-bottom: 10px; border-bottom: 2px solid var(--primary); margin-bottom: 4px; flex: 1; }
.band__head { border-bottom: 2px solid var(--primary); margin-bottom: 4px; }
.band__head .band__h { border-bottom: 0; margin-bottom: 0; }
.band__more { flex: none; display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
.band__note { margin: 12px 0; color: var(--text-dim); font-size: 15px; }
.empty-note { padding: 20px; margin-top: 12px; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); color: var(--text-dim); }

.trail ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--text-dim); }
.trail li { display: inline-flex; align-items: center; min-width: 0; }
.trail li + li::before { content: "›"; padding: 0 6px; color: var(--border); }
.trail a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-dim); }
.trail a:hover { color: var(--primary); }
@media (max-width: 599px) { .guide-head .trail li:last-child { display: none; } }
.trail [aria-current] { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; }

/* 목록 행 — 기록판 한 줄 */
.log-list { list-style: none; }
.log-row { display: grid; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.log-row__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; font-weight: 600; color: var(--text-dim); }
.log-row__cat { color: var(--primary); }
.log-row__game { color: var(--accent); }
.log-row__title { font-size: 18px; font-weight: var(--weight-strong); margin-top: 4px; }
.log-row__title a { color: var(--text); text-decoration: none; }
.log-row__title a:hover { color: var(--primary); text-decoration: underline; }
.log-row__sum { margin-top: 6px; color: var(--text-dim); font-size: 15px; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.log-row__foot { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 13px; color: var(--text-dim); }
.log-row__thumb { display: block; border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.log-row__thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* ── 4. 홈 ─────────────────────────────────────────── */
.intro { margin: 0 calc(-1 * var(--gutter)); padding: 28px var(--gutter) 28px; background: var(--surface); border-bottom: 1px solid var(--line); }
.intro__in { max-width: var(--reading-width); }
.intro__kicker { font-size: 13px; font-weight: 600; color: var(--primary); }
.intro__title { margin-top: 8px; font-size: 28px; font-weight: var(--weight-title); letter-spacing: -.01em; }
.intro__lede { margin-top: 12px; font-size: 17px; line-height: 1.7; }
.intro__by { margin-top: 12px; font-size: 15px; color: var(--text-dim); }
.intro__by strong { color: var(--text); }
.intro__notice { display: inline-block; margin-top: 14px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; color: var(--text-dim); }

.game-grid, .cat-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.game-grid a, .cat-grid a {
  display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; height: 100%; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); text-decoration: none;
}
.game-grid a:hover, .cat-grid a:hover { border-color: var(--primary); }
.game-grid__name, .cat-grid__name { font-weight: var(--weight-strong); font-size: 16px; line-height: 1.35; }
.game-grid__n, .cat-grid__n { font-size: 13px; color: var(--text-dim); }
.cat-grid { grid-template-columns: minmax(0, 1fr); }
.cat-grid__desc { font-size: 14px; color: var(--text-dim); line-height: 1.5; }
.game-more { margin-top: 8px; }
.game-more summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--primary); font-weight: 600; font-size: 15px; }

.run-route { list-style: none; margin-top: 12px; display: grid; gap: 10px; counter-reset: none; }
.run-route__step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.run-route__no { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--primary); color: var(--on-primary); border-radius: var(--radius); font-size: 18px; }
.run-route__when { font-size: 13px; font-weight: 600; color: var(--primary); }
.run-route__title { font-size: 17px; font-weight: var(--weight-strong); margin-top: 2px; }
.run-route__title a { color: var(--text); text-decoration: none; }
.run-route__title a:hover { color: var(--primary); text-decoration: underline; }
.run-route__sum { margin-top: 6px; font-size: 15px; color: var(--text-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.time-rows { list-style: none; margin-top: 12px; display: grid; gap: 10px; }
.time-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.time-row__badge { display: flex; align-items: baseline; justify-content: center; gap: 2px; padding: 10px 0; background: var(--primary-soft); color: var(--primary); border-radius: var(--radius); font-weight: 600; font-size: 14px; }
.time-row__badge .num { font-size: 24px; line-height: 1; }
.time-row__title { font-size: 17px; font-weight: var(--weight-strong); }
.time-row__title a { color: var(--text); text-decoration: none; }
.time-row__title a:hover { color: var(--primary); text-decoration: underline; }
.time-row__sum { margin-top: 4px; font-size: 15px; color: var(--text-dim); }

.ev-list { list-style: none; margin-top: 12px; display: grid; gap: 10px; }
.ev-item { padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: var(--radius); }
.ev-item__state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
.ev-item__game { color: var(--accent); font-weight: 600; }
.state { display: inline-block; padding: 2px 8px; border: 1px solid var(--border); border-radius: 4px; color: var(--text-dim); font-weight: 600; }
.state--end { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); }
.ev-item__title { margin-top: 6px; font-size: 17px; font-weight: var(--weight-strong); }
.ev-item__title a { color: var(--text); text-decoration: none; }
.ev-item__title a:hover { color: var(--primary); text-decoration: underline; }
.ev-item__date { margin-top: 6px; font-size: 13px; color: var(--text-dim); }

/* ── 5. 카테고리·태그 ─────────────────────────────── */
.list-head { padding: 12px 0 8px; max-width: var(--post-width); }
.list-head__title { margin-top: 4px; font-size: 28px; font-weight: var(--weight-title); }
.list-head__hash { color: var(--primary); margin-right: 2px; }
.list-head__desc { margin-top: 10px; font-size: 16px; color: var(--text-dim); max-width: var(--reading-width); }
.list-head__count { margin-top: 10px; font-size: 14px; color: var(--text-dim); }
.start-here { margin-top: 20px; padding: 16px; background: var(--primary-soft); border-radius: var(--radius); border-top: 4px solid var(--primary); max-width: var(--post-width); }
.start-here__k { font-size: 14px; font-weight: 600; color: var(--primary); }
.start-here__title { margin-top: 6px; font-size: 18px; font-weight: var(--weight-strong); }
.start-here__title a { color: var(--text); }
.start-here__sum { margin-top: 6px; font-size: 15px; color: var(--text-dim); }
.game-chips { margin-top: 20px; }
.game-chips__k { font-size: 14px; font-weight: 600; color: var(--text-dim); }
.game-chips ul, .tag-row, .guide-head__conds { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.game-chips a, .tag-row a, .guide-head__conds a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: 22px;
  color: var(--text); font-size: 15px; text-decoration: none;
}
.game-chips a:hover, .tag-row a:hover, .guide-head__conds a:hover { border-color: var(--primary); color: var(--primary); }
.band--list { margin-top: 16px; max-width: var(--post-width); }

/* ── 6. 글 ─────────────────────────────────────────── */
.guide { max-width: var(--post-width); margin: 0 auto; }
.guide-head { padding: 8px 0 0; }
.guide-head__labels { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.label { display: inline-flex; align-items: center; min-height: 32px; padding: 2px 10px; border-radius: 4px; font-size: 14px; font-weight: 600; text-decoration: none; }
a.label { min-height: 44px; }
.label--cat { background: var(--primary); color: var(--on-primary); }
.label--cat:hover { color: var(--on-primary); text-decoration: underline; }
.label--game { border: 1px solid var(--accent); color: var(--accent); }
.label--end, .label--warn { border: 1px solid var(--warn); color: var(--warn); background: var(--warn-soft); }
.guide-head__title { margin-top: 10px; font-size: 28px; font-weight: var(--weight-title); line-height: 1.4; letter-spacing: -.01em; }
.guide-head__lede { margin-top: 12px; font-size: 17px; line-height: 1.7; color: var(--text-dim); max-width: var(--reading-width); }
.guide-head__by { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 14px; font-size: 14px; color: var(--text-dim); }
.guide-head__author { color: var(--text); font-weight: 600; }
.guide-head__conds { margin-top: 12px; }
.guide-head__conds a { min-height: 44px; font-size: 14px; }
.guide-cover { margin: 20px 0 0; }
.guide-cover img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); background: var(--surface); }
.guide-state { margin-top: 20px; max-width: var(--reading-width); }

.route-toc { margin-top: 24px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); max-width: var(--reading-width); }
.route-toc__h { font-size: 15px; font-weight: 600; color: var(--primary); }
.route-toc__list { list-style: none; counter-reset: toc; margin-top: 6px; }
.route-toc__list a { counter-increment: toc; display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; min-height: 44px; color: var(--text); text-decoration: none; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; }
.route-toc__list li:first-child a { border-top: 0; }
.route-toc__list a::before { content: counter(toc, decimal-leading-zero); flex: none; min-width: 2.2ch; font-family: var(--font-number); font-weight: 600; color: var(--primary); white-space: nowrap; }
.route-toc__list a:hover { color: var(--primary); }

.guide-foot { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); max-width: var(--reading-width); }
.tag-row { margin-top: 0; }
.tag-row a { font-size: 14px; }
.guide-foot__note { margin-top: 14px; font-size: 14px; color: var(--text-dim); }
.next-guides { margin-top: 40px; }

/* 광고 — 광고 코드(라벨 외 자식)가 없으면 숨긴다. 들어오면 높이를 미리 잡는다 */
.ad-slot { position: relative; margin: 32px 0; min-height: 250px; display: flex; align-items: center; justify-content: center; background: var(--surface); border-radius: var(--radius); }
.ad-label { position: absolute; top: 6px; left: 10px; font-size: 12px; color: var(--text-dim); }
.ad-slot:not(:has(> :not(.ad-label))) { display: none; }

/* ── 7. 본문 (.post-body) ─────────────────────────── */
.post-body { margin-top: 28px; font-size: 17px; line-height: 1.8; counter-reset: sec; word-break: keep-all; overflow-wrap: break-word; }
.post-body > * { max-width: var(--reading-width); }
.post-body > :is(table, .scroll-x, .table-scroll, .step, .timeline, .stats-grid, figure, .image-grid, .before-after, .video-embed, .pros-cons) { max-width: none; }
.post-body > * + * { margin-top: 1em; }
.post-body > :is(blockquote, div, aside, figure, table, nav, ul.timeline, dl, details) + :is(p, h3, h4, ul, ol) { margin-top: 1.4em; }
.post-body p, .post-body li { word-break: keep-all; overflow-wrap: break-word; }
.post-body a { color: var(--primary); text-decoration: underline; text-decoration-thickness: 1px; }
.post-body a:hover { color: var(--text); text-decoration-thickness: 2px; }
.post-body strong { color: var(--text); font-weight: 700; }
.post-body ul, .post-body ol { padding-left: 1.3em; }
.post-body li + li { margin-top: .4em; }
.post-body li::marker { color: var(--primary); }

.post-body > h2 {
  counter-increment: sec; position: relative; padding-left: 50px; min-height: 32px;
  margin-top: 2.4em; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 22px; font-weight: var(--weight-strong); line-height: 1.45; scroll-margin-top: 16px;
}
.post-body > h2::before {
  content: counter(sec, decimal-leading-zero); position: absolute; left: 0; top: 19px; display: flex; align-items: center; justify-content: center;
  min-width: 36px; height: 32px; padding: 0 4px; background: var(--primary); color: var(--on-primary); border-radius: 4px;
  font-family: var(--font-number); font-weight: 600; font-size: 16px; white-space: nowrap; overflow-wrap: normal;
}
.post-body > h2:first-child { margin-top: 0; }
.post-body h3 { margin-top: 1.8em; font-size: 19px; font-weight: var(--weight-strong); color: var(--text); scroll-margin-top: 16px; }
.post-body h4 { font-size: 17px; font-weight: var(--weight-strong); }
.post-body > h2 + *, .post-body > h3 + * { margin-top: .6em; }

/* 본문 컴포넌트 시각 — 실제 게임 공략 사이트(Game8 · Icy Veins · Prydwen)의 상자 모양을 따왔다. 출처는 DESIGN.md 표 참고.
   알림 상자 다섯 개는 서로 모양이 다르다: warn=모서리 ! 공지 / error=머리 띠 / info=제목+가는 선 카드 / success=킥커 칩 / note=점선 메타 줄 */

/* 첫 인용 — Icy Veins 글머리 소개 상자(테두리 + 5px 모서리) + 골드 따옴표 */
.post-body blockquote { position: relative; margin: 0; padding: 16px 18px 16px 50px; background: var(--surface); border: 1px solid var(--border); border-radius: 5px; font-size: 18px; line-height: 1.7; }
.post-body blockquote::before { content: "“"; position: absolute; left: 14px; top: 8px; font-family: Georgia, serif; font-size: 46px; line-height: 1; color: var(--primary); }
.post-body blockquote p + p { margin-top: .6em; }
.post-body blockquote cite { display: block; margin-top: 8px; font-size: 14px; font-style: normal; color: var(--text-dim); }

/* 알림 상자 공통 */
.post-body :is(.warn-box, .info-box, .success-box, .error-box, .note-box) { position: relative; font-size: 16px; line-height: 1.7; }
.post-body :is(.warn-box, .info-box, .success-box, .error-box, .note-box) > div > * + * { margin-top: .5em; }
.post-body .badge { display: inline-block; font-size: 14px; font-weight: 700; line-height: 1.5; white-space: nowrap; }

/* warn — Game8 공지 상자: 가는 1px 선, 거의 각진 모서리, 왼쪽 위 모서리에 반쯤 걸친 원형 「!」, ◆ 붙은 색 글자 라벨이 문장 앞에 */
.post-body .warn-box { margin-top: 1.6em; padding: 16px 16px 14px 18px; background: var(--bg); border: 1px solid var(--warn); border-radius: 2px; }
.post-body .warn-box::before { content: "!"; position: absolute; left: -9px; top: -12px; width: 24px; height: 24px; border-radius: 50%; background: var(--warn); color: var(--on-primary); font: 700 15px/24px var(--font-number); text-align: center; }
.post-body .warn-box > .badge { margin-right: 6px; color: var(--warn); }
.post-body .warn-box > .badge::before { content: "◆"; margin-right: 4px; font-size: 11px; vertical-align: 2px; }
.post-body .warn-box > div { display: inline; }

/* error — Prydwen 'LAST REVIEW UPDATE' 상자: 상자 폭 가득 단색 머리 띠(가운데 굵은 글자) + 어두운 몸통, 모서리 없음 */
.post-body .error-box { padding: 0 16px 14px; background: var(--surface); border: 1px solid var(--warn); }
.post-body .error-box > .badge { display: block; margin: 0 -16px 12px; padding: 7px 16px; background: var(--warn); color: var(--on-primary); text-align: center; letter-spacing: .06em; }
.post-body .error-box > .badge::before { content: "⊘"; margin-right: 6px; }

/* info — Prydwen 장단점 카드: 어두운 면 + 색 제목 + 그 아래 가는 가로선, 내용은 선 아래 */
.post-body .info-box { padding: 14px 18px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
.post-body .info-box > .badge { display: block; margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--border); color: var(--accent); letter-spacing: .06em; }

/* success — Icy Veins 'Starter Information' 킥커: 테두리만 있는 작은 칩(✓ 아이콘) 위, 큰 둥근(8px) 테두리 상자 */
.post-body .success-box { padding: 14px 16px 16px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.post-body .success-box > .badge { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 1px 10px; border: 1px solid var(--ok); border-radius: 4px; background: var(--ok-soft); color: var(--ok); font-size: 13px; }
.post-body .success-box > .badge::before { content: "✓"; }

/* note — Game8 '최종 업데이트' 메타 줄 + Prydwen 제목 앞 작은 사각: 상자 없이 위아래 점선, 흐린 작은 글자 */
.post-body .note-box { padding: 10px 0; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); font-size: 15px; color: var(--text-dim); }
.post-body .note-box strong { color: var(--text); }
.post-body .note-box > .badge { margin-right: 8px; color: var(--text); font-size: 13px; }
.post-body .note-box > .badge::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: var(--primary); vertical-align: 1px; }
.post-body .note-box > div { display: inline; }

/* 번호 목록 공통(결론·체크리스트·오늘 할 일) */
.post-body :is(.summary-box, .key-points, .prep-box) ol { list-style: none; padding: 0; counter-reset: item; }
.post-body :is(.summary-box, .key-points, .prep-box) ol > li { counter-increment: item; position: relative; }

/* 결론 — Prydwen 순위 카드: 폭 가득 골드 띠(가운데 제목) → 어두운 몸통. 번호는 골드 테두리 칸 */
.post-body .summary-box { padding: 0 18px 16px; background: var(--surface); border: 1px solid var(--line); }
.post-body .summary-box > :is(h3, h4) { margin: 0 -18px 14px; padding: 8px 18px; background: var(--primary); color: var(--on-primary); text-align: center; font-size: 15px; font-weight: 700; letter-spacing: .04em; }
.post-body .summary-box ol > li { padding-left: 40px; min-height: 30px; }
.post-body .summary-box ol > li + li { margin-top: 10px; }
.post-body .summary-box ol > li::before { content: counter(item); position: absolute; left: 0; top: 2px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--primary); color: var(--primary); font: 600 15px/1 var(--font-number); }
.post-body .summary-box ul { padding-left: 1.2em; }
.post-body .summary-box > p { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-dim); }

/* 우선순위 체크리스트 — Game8 'Things You Need to do First' 표: 테두리 상자, 회색 머리 칸에 가운데 제목, 항목 사이 점선.
   체크박스 아이콘 대신 골드 Chakra 순서 번호 (체크박스처럼 꾸미지 않는다) */
.post-body .prep-box { padding: 0; background: var(--bg); border: 1px solid var(--border); }
.post-body .prep-box > :is(h3, h4) { margin: 0; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); text-align: center; font-size: 15px; font-weight: 700; color: var(--text); }
.post-body .prep-box ol { padding: 2px 14px; }
.post-body .prep-box ol > li { padding: 10px 0 10px 38px; margin: 0; font-weight: 600; }
.post-body .prep-box ol > li + li { border-top: 1px dotted var(--border); }
.post-body .prep-box ol > li::before { content: counter(item, decimal-leading-zero); position: absolute; left: 0; top: 10px; font: 600 16px/1.7 var(--font-number); color: var(--primary); }
.post-body .prep-box > :not(h3, h4, ol, .prep-grid) { padding: 10px 14px; }
.post-body .prep-grid { display: grid; gap: 0; padding: 2px 14px; }
.post-body .prep-grid > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px dotted var(--border); }
.post-body .prep-grid > div:first-child { border-top: 0; }
.post-body .prep-grid > div > span:last-child { font-family: var(--font-number); font-weight: 600; color: var(--primary); white-space: nowrap; }

/* 오늘 할 일 — Icy Veins 'Raider.io Resources' 상자: 가운데 제목, 항목마다 골드 1px 테두리 줄 */
.post-body .key-points { padding: 14px 16px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
.post-body .key-points > :is(h3, h4) { margin: 0 0 10px; text-align: center; font-size: 16px; font-weight: 700; color: var(--primary); }
.post-body .key-points ol > li, .post-body .key-points ul > li { padding: 9px 12px 9px 42px; margin: 0; background: var(--bg); border: 1px solid var(--primary); border-radius: 3px; list-style: none; position: relative; }
.post-body .key-points ul { padding: 0; }
.post-body .key-points :is(ol, ul) > li + li { margin-top: 8px; }
.post-body .key-points ol > li::before { content: counter(item); position: absolute; left: 14px; top: 9px; font: 600 16px/1.7 var(--font-number); color: var(--primary); }
.post-body .key-points > p { margin-top: 10px; font-size: 15px; color: var(--text-dim); }

/* 목차 — Game8 'List of Contents': 위 3px 골드 선, 목록 아이콘 + 굵은 제목, 줄마다 가는 선 + 오른쪽 ⌄ */
.post-body .toc-box { padding: 0 14px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--primary); }
.post-body .toc-box > :is(h3, h4) { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 0; font-size: 16px; font-weight: 700; color: var(--text); }
.post-body .toc-box > :is(h3, h4)::before { content: ""; flex: none; width: 16px; height: 12px; background: linear-gradient(var(--primary) 0 2px, transparent 2px 5px, var(--primary) 5px 7px, transparent 7px 10px, var(--primary) 10px 12px); }
.post-body .toc-box ol { list-style: none; padding: 0; counter-reset: toc; }
.post-body .toc-box li { counter-increment: toc; margin: 0; border-top: 1px solid var(--line); }
.post-body .toc-box a { display: flex; gap: 12px; align-items: flex-start; padding: 10px 26px 10px 0; min-height: 44px; position: relative; color: var(--text); text-decoration: none; font-size: 15px; font-weight: 600; line-height: 1.5; }
.post-body .toc-box a::before { content: counter(toc, decimal-leading-zero); flex: none; min-width: 2.2ch; font-family: var(--font-number); font-weight: 600; color: var(--primary); white-space: nowrap; }
.post-body .toc-box a::after { content: ""; position: absolute; right: 6px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim); transform: rotate(45deg); }
.post-body .toc-box a:hover { color: var(--primary); }

/* 단계 — Prydwen 순위 카드 머리: 왼쪽 단색 골드 기둥(번호) + 오른쪽 어두운 면, 제목은 골드 + 아래 가는 선 */
.post-body .step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0; align-items: stretch; padding: 0; background: var(--surface); border: 1px solid var(--line); }
.post-body .step + .step { margin-top: 10px; }
.post-body .step .num { display: flex; align-items: flex-start; justify-content: center; padding-top: 13px; background: var(--primary); color: var(--on-primary); font-family: var(--font-number); font-weight: 600; font-size: 18px; line-height: 1.4; white-space: nowrap; }
.post-body .step .body { padding: 12px 14px 14px; min-width: 0; }
.post-body .step .body > * + * { margin-top: .5em; }
.post-body .step .body h4 { padding-bottom: 9px; border-bottom: 1px solid var(--line); font-size: 18px; line-height: 1.5; color: var(--primary); }
.post-body .step .body > p:last-child:has(> .tag), .post-body .step .tag-list { font-size: 14px; }

/* 시간순 — Game8 이벤트 'Dates' 표: 왼쪽 시간 칸(회색 면, 가운데) | 오른쪽 내용, 줄마다 가는 선 */
.post-body .timeline { list-style: none; padding: 0; border: 1px solid var(--line); }
.post-body .timeline li { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); margin: 0; }
.post-body .timeline li + li { margin-top: 0; border-top: 1px solid var(--line); }
.post-body .timeline .time { display: flex; align-items: center; justify-content: center; padding: 10px 8px; background: var(--surface-2); border-right: 1px solid var(--line); font-family: var(--font-number); font-weight: 600; color: var(--primary); font-size: 15px; text-align: center; }
.post-body .timeline .event { padding: 10px 12px; min-width: 0; }

/* 효율 비교표 — Game8 a-table: 칸마다 1px 격자, 회색 머리 칸 가운데 굵게. 숫자는 오른쪽 */
.post-body :is(.scroll-x, .table-scroll) { overflow-x: auto; }
.post-body table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; border: 1px solid var(--border); }
.post-body > table { display: block; overflow-x: auto; }
.post-body caption { caption-side: top; text-align: left; padding: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--text-dim); }
.post-body th, .post-body td { padding: 10px 12px; text-align: left; vertical-align: middle; border: 1px solid var(--line); word-break: keep-all; overflow-wrap: break-word; }
.post-body thead th { background: var(--surface-2); color: var(--text); font-weight: 700; font-size: 14px; text-align: center; white-space: nowrap; border-color: var(--border); }
.post-body tbody th { font-weight: 700; color: var(--text); }
.post-body td.is-num, .post-body th.is-num { text-align: right; font-family: var(--font-number); font-weight: 600; font-variant-numeric: tabular-nums; }
.post-body .compare-table tbody tr:has(.highlight) { background: var(--primary-soft); }

/* 통계 — Icy Veins 개요 6칸 타일: 바깥 8px 둥근 테두리 하나, 칸 사이 1px 선, 가운데 정렬 */
.post-body .stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.post-body .stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 10px; background: var(--bg); text-align: center; min-width: 0; }
.post-body .stat .label { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.post-body .stat .value { font-size: 18px; font-weight: 700; color: var(--primary); line-height: 1.45; }
.post-body .stats-grid > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* 장단점 — Prydwen PROS / CONS 카드: 색 제목 + 가는 가로선, 어두운 면 */
.post-body .pros-cons { display: grid; gap: 10px; }
.post-body .pros-cons > div { padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
.post-body .pros-cons h4 { margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--border); font-size: 15px; letter-spacing: .06em; }
.post-body .pros-cons .pros h4 { color: var(--ok); }
.post-body .pros-cons .cons h4 { color: var(--warn); }

/* 텍스트 강조 */
.post-body .lead { font-size: 19px; line-height: 1.7; color: var(--text); }
.post-body .highlight { background: var(--primary-soft); color: var(--primary); font-weight: 700; padding: 0 4px; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.post-body .pull-quote { padding: 8px 0 8px 18px; border-left: 4px solid var(--accent); font-size: 20px; font-weight: 600; line-height: 1.6; color: var(--text); }
.post-body .kbd, .post-body kbd { display: inline-block; padding: 0 6px; min-width: 1.6em; text-align: center; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; background: var(--surface-2); font-family: var(--font-number); font-size: .85em; line-height: 1.5; white-space: nowrap; }
.post-body code { font-size: .9em; padding: 0 4px; background: var(--surface-2); border-radius: 3px; }

/* 미디어 — 섹션 이미지는 폭 가득 3:2 (늦게 와도 자리가 흔들리지 않게) */
.post-body figure { margin: 0; }
.post-body > * + figure { margin-top: 1.4em; }
.post-body figure img, .post-body img { display: block; max-width: 100%; height: auto; border-radius: var(--radius); }
.post-body > figure > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--surface); }
.post-body figcaption { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--text-dim); }
.post-body .image-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.post-body .image-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.post-body .before-after { display: grid; gap: 8px; }
.post-body .before-after > div { position: relative; }
.post-body .before-after .label { position: absolute; top: 8px; left: 8px; padding: 2px 8px; background: var(--bg); color: var(--text); font-size: 13px; font-weight: 700; border-radius: 4px; }
.post-body .video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.post-body .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 다음 공략 — Icy Veins 'Beginner Guides' CTA 띠: 어두운 면 위아래 가는 선, 큰 굵은 제목, 단색 버튼 */
.post-body .cta-box { padding: 20px 18px 22px; background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.post-body .cta-box > :is(h3, h4) { font-size: 21px; font-weight: 700; line-height: 1.4; color: var(--text); }
.post-body .cta-box > * + * { margin-top: 8px; }
.post-body .cta-button, .cta-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 18px; margin-top: 14px;
  background: var(--accent); color: var(--on-primary) !important; border-radius: 4px; font-weight: 700; font-size: 16px; line-height: 1.4; text-decoration: none !important; text-align: center;
}
.post-body .cta-button:hover { background: var(--text); }
.post-body .cta-box .badge { margin-right: 8px; padding: 0 8px; border: 1px solid var(--border); border-radius: 4px; color: var(--text-dim); font-size: 13px; vertical-align: 2px; }

/* 기타 */
.post-body hr, .post-body .divider { border: 0; height: 0; border-top: 2px dashed var(--line); margin: 2em 0; }
/* 접기 — Prydwen 아코디언: 어두운 막대 + 굵은 제목 + 오른쪽 꺾쇠(열리면 뒤집힘), 모서리 없음 */
.post-body .spoiler { background: var(--surface); border: 1px solid var(--line); }
.post-body .spoiler summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 16px; background: var(--surface-2); cursor: pointer; font-weight: 700; list-style: none; }
.post-body .spoiler summary::-webkit-details-marker { display: none; }
.post-body .spoiler summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-top: -5px; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text); transform: rotate(45deg); }
.post-body .spoiler[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.post-body .spoiler > :not(summary) { margin: 0; padding: 12px 16px 14px; }
.post-body .footnote { display: block; padding-left: 2.4em; text-indent: -2.4em; font-size: 14px; line-height: 1.7; color: var(--text-dim); }
.post-body .footnote + .footnote { margin-top: .4em; }
.post-body .footnote .num { color: var(--accent); margin-right: 4px; }
.post-body .footnote a { color: var(--accent); }
.post-body sup.footnote-ref { font-family: var(--font-number); font-size: .7em; color: var(--accent); }
.post-body .price-tag { display: inline-flex; align-items: baseline; gap: 2px; padding: 0 6px; background: var(--primary-soft); border-radius: 4px; color: var(--primary); white-space: nowrap; }
.post-body .price-tag .amount { font-family: var(--font-number); font-weight: 600; }
.post-body .faq dt { position: relative; margin-top: 1em; padding: 10px 14px 10px 40px; background: var(--surface-2); font-weight: 700; }
.post-body .faq dt::before { content: "Q"; position: absolute; left: 14px; top: 10px; font-family: var(--font-number); color: var(--primary); }
.post-body .faq dt:first-child { margin-top: 0; }
.post-body .faq dd { margin: 0; padding: 10px 14px 12px 40px; border: 1px solid var(--surface-2); border-top: 0; }
.post-body .tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.post-body .tag-list .tag { display: inline-block; padding: 2px 10px; border: 1px solid var(--border); border-radius: 14px; font-size: 13px; color: var(--text-dim); }
.post-body .inline-ad { margin: 2em 0; }
.post-body img[data-img-pending] { min-height: 120px; }

/* ── 8. 푸터 ───────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); background: var(--surface); }
.footer__in { max-width: var(--container); margin: 0 auto; padding: 28px var(--gutter) 36px; display: grid; gap: 14px; font-size: 14px; color: var(--text-dim); }
.footer__name { color: var(--text); font-size: 16px; }
.footer__id p { margin-top: 6px; }
.footer__notice { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); }
.footer__links { display: flex; flex-wrap: wrap; gap: 0 4px; }
.footer__links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 10px 0 0; color: var(--text); }
.footer__note, .footer__copy { font-size: 13px; }

/* ── 9. 표 → 행 카드 (≤720px, site.js 가 data-label 을 붙였을 때만) ── */
@media (max-width: 720px) {
  .post-body :is(.scroll-x, .table-scroll).is-stacked { overflow: visible; border: 0; background: none; }
  .post-body table.is-stacked, .post-body table.is-stacked :is(tbody, tr, th, td) { display: block; width: auto; }
  .post-body table.is-stacked caption { display: block; padding: 0 0 8px; }
  .post-body table.is-stacked thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* Prydwen 순위 카드: 첫 칸이 카드 머리 띠(회색 면 + 골드 글자), 1순위 행은 단색 골드 띠 */
  .post-body table.is-stacked { border: 0; }
  .post-body table.is-stacked tbody tr { background: var(--surface); border: 1px solid var(--line); }
  .post-body table.is-stacked tbody tr + tr { margin-top: 10px; }
  .post-body table.is-stacked tbody :is(th, td) { border: 0; padding: 8px 14px; text-align: left; }
  .post-body table.is-stacked tbody > tr > :first-child:not([data-label]) { padding: 9px 14px; background: var(--surface-2); font-size: 17px; font-weight: 700; color: var(--primary); }
  .post-body table.is-stacked tbody tr:has(.highlight) > :first-child:not([data-label]) { background: var(--primary); color: var(--on-primary); }
  .post-body table.is-stacked tbody tr:has(.highlight) > :first-child .highlight { background: var(--on-primary); color: var(--primary); }
  .post-body table.is-stacked td[data-label] { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 12px; border-top: 1px dotted var(--line); }
  .post-body table.is-stacked tbody tr > :first-child + td[data-label] { border-top: 0; }
  .post-body table.is-stacked td[data-label]::before { content: attr(data-label); font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--text-dim); padding-top: 2px; text-align: left; }
  .post-body table.is-stacked td.is-num { text-align: left; }
}

/* ── 10. 넓은 화면 ─────────────────────────────────── */
@media (min-width: 600px) {
  .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-body .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .post-body .stats-grid > .stat:last-child:nth-child(odd) { grid-column: auto; }
  .post-body .pros-cons, .post-body .before-after { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-body .image-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .log-row--thumb { grid-template-columns: minmax(0, 1fr) 200px; align-items: start; }
  .log-row--thumb .log-row__thumb { order: 2; }
}
@media (min-width: 768px) {
  :root { --gutter: 24px; }
  .topbar__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 10px; padding-bottom: 10px; }
  .brand-row { flex: none; }
  .guide-nav ul { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 0; }
  .guide-nav a { background: transparent; border-color: transparent; padding: 4px 12px; }
  .guide-nav a:hover { border-color: var(--line); }
  .intro { margin: 0; padding: 40px 32px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
  .intro__title { font-size: 36px; }
  .band { margin-top: 48px; }
  .band__h { font-size: 22px; }
  .run-route { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .run-route__step { grid-template-columns: minmax(0, 1fr); border-radius: 0; border-right-width: 0; position: relative; }
  .run-route__step:first-child { border-radius: var(--radius) 0 0 var(--radius); }
  .run-route__step:last-child { border-radius: 0 var(--radius) var(--radius) 0; border-right-width: 1px; }
  .time-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
  .ev-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .log-list--two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
  .guide-head__title, .list-head__title { font-size: 34px; }
  .post-body > h2 { font-size: 26px; }
  .post-body > h2 { padding-left: 60px; }
  .post-body > h2::before { min-width: 44px; height: 38px; font-size: 18px; }
  .post-body .step { grid-template-columns: 64px minmax(0, 1fr); }
  .post-body .step .num { font-size: 22px; padding-top: 14px; }
  .post-body .step .body { padding: 14px 20px 16px; }
  .footer__in { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; gap: 16px 40px; }
  .footer__notice, .footer__note, .footer__copy { grid-column: 1 / -1; }
  .footer__links { justify-content: flex-end; grid-column: 2; grid-row: 1; }
}
@media (min-width: 1100px) {
  .guide-head__title, .list-head__title { font-size: 40px; }
  .intro__title { font-size: 40px; }
  .game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
@media print {
  .topbar, .ad-slot, .footer, .route-toc, .next-guides { display: none !important; }
  body { background: #fff; color: #000; }
}

/* QA 자동 수정 (관문 A) */
.trail a, .footer__links a { padding-inline: 16px; }

/* QA 자동 수정 (관문 A) */
.post-body li::before { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 767px) {
  .post-body .step { grid-template-columns: 44px minmax(0, 1fr); }
  .post-body .step .body { padding-right: 10px; padding-left: 10px; }
  .post-body .step .body h4 { font-size: 17px; }
  .guide-head__title { font-size: 24px; line-height: 1.35; }
}

/* QA 자동 수정 (관문 A) */
.post-body :is(.summary-box, .key-points, .prep-box) ol > li::before { flex-shrink: 0; white-space: nowrap; min-width: 2.4ch; }
.post-body .faq dd p { min-width: 0; }

/* QA 자동 수정 (관문 A) */
@media (max-width: 767px) { .post-body .faq dd { min-height: 3.2em; } }

/* QA 자동 수정 (관문 A) */
@media (max-width: 767px) { .guide-head__title { font-size: 24px; line-height: 1.3; } }