/* 탑과 용병단 공식 홈페이지
 *
 * 색은 게임에서 그대로 가져온다 — 사이트와 앱이 다른 세계로 보이면 안 된다.
 * 글자는 시스템 스택이다. 한글 웹폰트를 얹으면 제목만 다른 얼굴로 떨어지거나 로딩 전에
 * 다른 폭으로 그려진다. 개성은 색·간격·금색 강조와 숫자용 고정폭이 낸다.
 *
 * **숫자는 고정폭으로 쓴다.** 버전(1.5.0)과 층(20층)은 이 게임에서 주소에 가깝다. 사람이
 * 읽는 문장은 시스템 산세리프, 자리를 가리키는 숫자는 고정폭 — 이 한 가지 구분이 이 사이트의
 * 성격이다. 고정폭에는 숫자와 마침표만 들어가므로 한글이 깨질 자리가 없다.
 */

:root {
  color-scheme: dark;
  --void: #0b0c14;
  --bg: #12131e;
  --panel: #171827;
  --panel-hi: #1c1e30;
  --line: #2a2d42;
  --line-soft: rgba(125, 167, 217, 0.16);
  --ink: #c3c6d6;
  --ink-strong: #e6e8f2;
  --dim: #8a8fa6;
  --gold: #f0b541;
  --ember: #e0703f;
  --link: #7da7d9;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
    "Malgun Gothic", "Noto Sans KR", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 46rem;
  --wrap-wide: 64rem;
  --wrap-note: 71rem;

  /* 패치 노트 캡처의 상한. `scripts/crop-note-shots.py` 가 이 두 줄을 읽어
     「화면에서 40% 아래로 줄어드는 그림」을 실패시킨다. 여기가 정본이다. */
  --shot-w: 28rem;
  --shot-h: 21rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.75 var(--sans);
  overflow-x: hidden;
  word-break: keep-all;
}
main { flex: 1 0 auto; }

a { color: var(--link); }
a:focus-visible,
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

img { max-width: 100%; height: auto; }

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem; top: 1rem; z-index: 10;
  background: var(--panel); color: var(--ink-strong);
  padding: .5rem .9rem; border: 1px solid var(--gold);
}

/* ---- 상단 내비 ---- */

.topnav {
  position: sticky; top: 0; z-index: 5;
  background: rgba(11, 12, 20, .92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.topnav-inner {
  max-width: var(--wrap-wide); margin: 0 auto;
  display: flex; align-items: center; gap: 1rem;
  padding: .6rem 1.25rem;
  flex-wrap: wrap;
}
.brand {
  color: var(--gold); text-decoration: none; font-weight: 700;
  letter-spacing: .02em; white-space: nowrap;
}
.topnav-links { display: flex; gap: 1rem; flex: 1 1 auto; flex-wrap: wrap; }
.topnav-links a {
  color: var(--ink); text-decoration: none; font-size: .9375rem;
  padding: .25rem 0; border-bottom: 2px solid transparent;
}
.topnav-links a:hover { color: var(--ink-strong); }
.topnav-links a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }
.topnav-end { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.lang { color: var(--dim); text-decoration: none; font-size: .875rem; white-space: nowrap; }
.lang:hover { color: var(--ink-strong); }

/* ---- 공통 ---- */

main { max-width: var(--wrap); margin: 0 auto; padding: 2.25rem 1.25rem 5rem; width: 100%; }
main.wide { max-width: 80rem; padding-top: clamp(3.5rem, 8vw, 7rem); }

h1 { font-size: 1.75rem; line-height: 1.3; margin: 0 0 .4rem; color: var(--ink-strong); letter-spacing: -.01em; }
h2 { font-size: 1.2rem; margin: 2.75rem 0 .75rem; color: var(--gold); }
h3 { font-size: 1rem; margin: 1.75rem 0 .5rem; color: var(--ink-strong); }
p, li { color: var(--ink); }
li { margin: .3rem 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 3.5rem 0; }

.ver {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.tag {
  display: inline-block;
  padding: .1rem .5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .75rem;
  color: var(--dim);
  white-space: nowrap;
}
.tag-latest { border-color: var(--gold); color: var(--gold); }

.btn {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: .1rem;
  padding: .7rem 1.15rem;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-strong);
  text-decoration: none;
  border-radius: 4px;
}
.btn:hover { background: var(--panel-hi); border-color: var(--line-soft); }
.btn small { color: var(--dim); font-size: .75rem; }
.btn-primary { border-color: var(--gold); color: var(--gold); }
.btn-primary small { color: rgba(240, 181, 65, .72); }
.btn-sm { padding: .35rem .8rem; font-size: .875rem; border-radius: 3px; }

/* ---- 페이지 머리 밴드 ---- */

.band {
  padding: 3.25rem 1.25rem 2.5rem;
  background: linear-gradient(180deg, var(--void), var(--bg));
  border-bottom: 1px solid var(--line);
}
.band-inner { max-width: var(--wrap); margin: 0 auto; }
/* 안내는 본문이 80rem 이라 머리띠도 같은 폭이어야 제목과 첫 줄이 한 선에 선다 */
/* main.wide 의 좌우 패딩(1.25rem)만큼 뺀 폭이라야 제목과 본문 첫 칸이 한 선에 선다 */
.band-guide .band-inner { max-width: calc(80rem - 2.5rem); }
.band h1 { color: var(--gold); font-size: 2.1rem; }
.band p { color: var(--dim); margin: .45rem 0 0; max-width: 38rem; }
.note-ver { margin: 0 0 .35rem; display: flex; gap: .7rem; align-items: baseline; }
.note-ver .ver { color: var(--gold); font-size: 1.6rem; }
.note-ver time { color: var(--dim); font-size: .875rem; }
.crumb { margin: 0 0 .9rem; font-size: .875rem; }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

/* ---- 패치 노트 사다리 ----
   버전은 순서가 곧 내용이다(탑의 층처럼). 3열 격자 대신 왼쪽 선에 눈금을 찍어 내려가게 둔다 —
   릴리스가 손에 꼽는 게임에서 격자는 빈 화면으로 읽힌다. 모바일에서도 같은 모양이라
   반응형 분기가 하나 준다. */

.ladder { list-style: none; margin: 0; padding: .25rem 0 0 1.5rem; position: relative; max-width: var(--wrap); }
.ladder::before {
  content: ""; position: absolute; left: 4px; top: .5rem; bottom: .5rem;
  width: 1px; background: var(--line);
}
.ladder-row { position: relative; margin: 0 0 1rem; }
.ladder-row::before {
  content: ""; position: absolute; left: -1.5rem; top: 1.4rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--line);
}
.ladder-row:first-child::before { background: var(--gold); border-color: var(--gold); }

.note-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  text-decoration: none;
  position: relative;
}
.note-card:hover { background: var(--panel-hi); border-color: var(--line-soft); }
.note-card img {
  width: 92px; height: 130px; object-fit: cover; object-position: top;
  border: 1px solid var(--line); border-radius: 3px; display: block;
}
.note-card-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 .4rem; }
.note-card-meta time { color: var(--dim); font-size: .8125rem; font-family: var(--mono); }
.note-card h2 { margin: 0 0 .3rem; font-size: 1.0625rem; color: var(--ink-strong); }
.note-card-summary { margin: 0; color: var(--dim); font-size: .9375rem; line-height: 1.6; }

/* ---- 패치 노트 본문 ---- */

/* 절과 항목의 무게를 갈라 둔다. 예전에는 「창단할 때 난이도를 고릅니다」와 「장비 이름이
   접히던 것」이 똑같은 점 하나였다. 이제 그림이 붙은 아홉 가지는 제목을 갖고(캡션을 올린
   것이다 — 그 문장이 이미 「무엇이 달라졌는가」를 한 줄로 적고 있었다), 잔 수정은 조밀한
   목록으로 내려간다. */
.note-section { scroll-margin-top: 4.5rem; }
.note-section + .note-section { margin-top: 2.75rem; border-top: 1px solid var(--line); }
.note-section h2 { color: var(--gold); font-size: 1.25rem; margin: 1.6rem 0 .9rem; letter-spacing: -.01em; }
.note-section ul { margin: 0; padding-left: 1.15rem; }
.note-section li { margin: .45rem 0; }
.note-section li::marker { color: var(--line-soft); }

.note-fold { margin: 1.6rem 0 0; }
.note-fold > summary {
  display: flex; align-items: baseline; gap: .6rem; cursor: pointer;
  list-style: none; padding: .1rem 0;
}
.note-fold > summary::-webkit-details-marker { display: none; }
.note-fold > summary h2 { margin: 0; }
.note-fold > summary::after {
  content: ""; width: 7px; height: 7px; margin-bottom: .2em;
  border-right: 1.5px solid var(--dim); border-bottom: 1.5px solid var(--dim);
  transform: rotate(45deg);
}
.note-fold[open] > summary::after { transform: rotate(-135deg); margin-bottom: 0; }
.note-fold > summary:hover h2 { color: var(--ember); }
.fold-n { color: var(--dim); font-size: .8125rem; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.note-fold > ul { margin-top: .9rem; }

.note-item { margin: 0 0 1.75rem; }
.note-item h3 { font-size: 1.0625rem; line-height: 1.5; color: var(--ink-strong); margin: 0 0 .5rem; }
.note-item-shots { display: flex; flex-direction: column; gap: 1rem; }

/* 자리를 가리키는 숫자는 고정폭이다. 이 파일 머리말이 사이트의 성격으로 적어 둔 그 규칙을
   본문에도 적용한다 — 전/후를 가르는 숫자가 산문에 묻혀 있으면 아무도 찾지 못한다. */
.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--ink-strong);
}

/* 절 목차. 요약을 따로 쓰면 리드와 같은 말을 두 번 하게 된다. 절 이름이 이미 이 버전에
   무엇이 들어갔는지 말하고 있고, 누르면 그리로 간다. */
.note-jump { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.15rem 0 0; }
.note-jump a {
  font-size: .8125rem; color: var(--ink); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 999px; padding: .25rem .75rem;
  background: rgba(23, 24, 39, .6);
}
.note-jump a:hover { color: var(--gold); border-color: var(--line-soft); }

/* 화면이 바뀐 것은 글로만 적으면 전달되지 않는다. 캡처는 실제 화면 그대로 넣고 캡션으로
   무엇을 보라는지 말한다 — 캡션이 없으면 그림이 장식이 된다.

   **폭만 묶으면 안 된다 (2026-08-31 실측).** 이 규칙은 원래 `max-width: 30rem` 에
   `max-height: 34rem` 이었다. 그러면 세로로 긴 폰 캡처가 높이에 걸려 252px 폭으로 줄고,
   그 폭에서는 화면 안의 글자가 안 읽힌다. 한 장이 544px 를 먹으면서 읽히지도 않는 것이다.
   렌더 폭이 252·378·416·480px 로 갈려 왼쪽 선도 서지 않았다. 1.6.0 노트가 데스크톱
   7,440px(화면 8.3개)·폰 8,532px(화면 10.1개)였다.

   그래서 둘을 같이 바꿨다. 그림은 `scripts/crop-note-shots.py` 가 바뀐 자리만 남겨 눕히고,
   여기서는 높이 21rem 짜리 판에 담아 어느 캡처든 같은 사각형으로 놓는다. 판 색이 앱 배경과
   같은 `--void` 라 남는 여백은 화면의 일부로 읽힌다. 판이 높이를 미리 잡으므로 그림이
   내려오면서 글이 밀리지도 않는다. */
.note-shot { margin: 1.25rem 0 1.5rem; max-width: 34rem; }
.note-shot img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: var(--shot-h);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--void);
}
.note-shot figcaption {
  margin: .5rem 0 0;
  color: var(--dim);
  font-size: .8125rem;
  line-height: 1.55;
}

/* 넓은 화면에서는 캡처를 글 아래가 아니라 **옆**에 세운다.
   46rem 한 줄로 두면 1440px 화면에서 좌우로 350px 씩 그냥 빈다. 캡처가 자름 상자를 거쳐
   누웠으므로 28rem 폭이면 지금 크기 그대로 들어가고, 절의 높이가 「글 + 그림」이 아니라
   「글과 그림 중 큰 쪽」이 된다.

   float 는 자기 **뒤**에 오는 글만 비켜 가게 하므로 생성기가 그림을 항목 앞에 낸다
   (`renderBlocks`). 그리고 float 는 줄 상자만 줄이고 블록 폭은 그대로 두므로, 목록에
   최대 폭을 따로 걸지 않으면 그림 아래로 흐르는 줄이 71rem 까지 늘어난다. */
@media (min-width: 74rem) {
  main.note-main { max-width: var(--wrap-note); }
  .band-note .band-inner { max-width: var(--wrap-note); }
  .note-section > ul { max-width: 40rem; }
  .note-item {
    display: grid;
    grid-template-columns: minmax(0, 40rem) var(--shot-w);
    gap: 0 3rem;
    align-items: start;
    margin: 0 0 2.25rem;
  }
  .note-item .note-shot { margin: .3rem 0 0; max-width: var(--shot-w); }

  /* 그림이 없는 긴 절(「고친 것」이 열세 줄이다)은 두 단으로 흘린다. 한 단으로 두면
     오른쪽 28rem 이 통째로 빈다. */
  .note-section.cols ul { max-width: none; column-count: 2; column-gap: 3rem; padding-left: 0; font-size: .9375rem; }
  /* 단이 나뉘면 마지막 항목의 글머리 기호가 단 상자 밖으로 나가 사라진다(크로뮴 실측).
     기호를 글 안쪽으로 들이고 음수 들여쓰기로 원래의 걸린 모양을 되살린다. */
  .note-section.cols li {
    break-inside: avoid;
    list-style-position: inside;
    text-indent: -1.15rem;
    padding-left: 1.15rem;
  }
}

/* ---- 홈 ---- */

.hero {
  position: relative;
  min-height: min(49rem, calc(100svh - 4.5rem));
  display: flex;
  align-items: stretch;
  padding: 0 1.25rem;
  text-align: left;
  background:
    linear-gradient(90deg, rgba(11, 12, 20, .97) 0%, rgba(11, 12, 20, .85) 35%, rgba(11, 12, 20, .25) 78%, rgba(11, 12, 20, .76) 100%),
    linear-gradient(0deg, var(--bg) 0%, transparent 38%),
    url("/img/hero.webp") 62% center / cover no-repeat;
  border-bottom: 1px solid var(--line);
}
.hero-inner { width: min(80rem, 100%); min-height: min(49rem, calc(100svh - 4.5rem)); margin: 0 auto; padding: clamp(5rem, 13vw, 10rem) 0 5rem; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.hero img.icon {
  width: 3.5rem; height: 3.5rem; border-radius: .55rem;
  border: 1px solid var(--line); display: block; margin: 0 0 1.35rem;
}
.hero h1 { max-width: 12em; font-size: clamp(3.2rem, 8vw, 6.8rem); line-height: 1.08; color: var(--ink-strong); margin-bottom: 1rem; letter-spacing: -.06em; text-wrap: balance; }
.tagline { max-width: 38rem; color: var(--ink-strong); font-size: clamp(1.05rem, 2vw, 1.3rem); margin: 0 0 .45rem; }
.subline { color: var(--dim); font-size: .9375rem; margin: 0 0 1.5rem; }
.nowrap { white-space: nowrap; }

.cta-row { display: flex; flex-wrap: wrap; gap: .625rem; justify-content: flex-start; margin: 0 0 1.25rem; }
.badges { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-start; margin: 0; padding: 0; }
.badges li {
  font-size: .8125rem; color: var(--dim);
  border: 1px solid var(--line); border-radius: 999px; padding: .15rem .6rem; margin: 0;
}

.features { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.features li {
  margin: 0; padding: 1.25rem 1rem 1.4rem;
  background: transparent; border-top: 1px solid var(--line);
}
.features li:nth-child(-n + 2) { border-top: 0; }
.features li:nth-child(even) { padding-left: 2rem; border-left: 1px solid var(--line); }
.features b { color: var(--gold); display: block; margin-bottom: .2rem; }
.features span { color: var(--ink); }

.shots { display: flex; gap: 1rem; overflow-x: auto; padding: .4rem 0 1.1rem; margin: 1rem 0 0; scroll-snap-type: x mandatory; }
.shots figure { flex: 0 0 13rem; margin: 0; scroll-snap-align: start; }
.shots img { border: 1px solid var(--line); border-radius: 4px; display: block; width: 100%; }
.shots figcaption { color: var(--dim); font-size: .8125rem; margin-top: .35rem; text-align: center; }

.callout {
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
  background: rgba(23, 24, 39, .72); border-radius: 0;
  padding: 1rem 1.15rem; margin: 1rem 0 0;
}
.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }

.lede {
  border-left: 3px solid var(--gold);
  padding: .1rem 0 .1rem 1rem;
  margin: 1.5rem 0 0;
  color: var(--ink-strong);
}
.contact {
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 1rem 1.15rem; margin: 1rem 0 0;
}
.contact > a { font-size: 1.0625rem; }
.meta { color: var(--dim); font-size: .875rem; margin: 0 0 2rem; }

main.wide > h2 { padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -.04em; }
main.wide > p { max-width: 48rem; }

/* ---- 꼬리말 ---- */

.sitefoot { border-top: 1px solid var(--line); background: var(--void); }
.sitefoot-inner {
  max-width: var(--wrap-wide); margin: 0 auto;
  padding: 1.5rem 1.25rem 2.5rem;
  display: flex; flex-wrap: wrap; gap: 1rem;
  color: var(--dim); font-size: .875rem;
}
.sitefoot-inner a { color: var(--dim); }

/* ---- 좁은 폭 ---- */

@media (max-width: 32rem) {

  .topnav-inner { gap: .6rem .9rem; padding: .55rem 1rem; }
  .topnav-links { order: 3; flex-basis: 100%; gap: .9rem; }
  .topnav-end { margin-left: auto; }
  .band { padding: 2.25rem 1.25rem 1.75rem; }
  .band h1 { font-size: 1.6rem; }
  main { padding-top: 1.75rem; }
  .hero { min-height: 42rem; padding: 0 1rem; background-position: 67% center; }
  .hero-inner { min-height: 42rem; padding: 5rem 0 4rem; }
  .hero img.icon { width: 3rem; height: 3rem; margin-bottom: 1rem; }
  .hero h1 { max-width: 100%; font-size: clamp(2.8rem, 13vw, 4.8rem); }
  .hero .cta-row { width: 100%; }
  .hero .cta-row .btn { flex: 1 1 100%; }
  .features { gap: 0; }
  .features { grid-template-columns: 1fr; }
  .features li, .features li:nth-child(-n + 2) { padding-left: 0; padding-right: 0; border-top: 1px solid var(--line); border-left: 0; }
  .features li:first-child { border-top: 0; }
  .note-shot img { max-height: 15.5rem; }
  .note-card { grid-template-columns: 68px minmax(0, 1fr); gap: .8rem; padding: .85rem; }
  .note-card img { width: 68px; height: 96px; }
  .shots figure { flex-basis: 11rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---- 네임드 소개 ---------------------------------------------------------
   일러스트가 주인공인 페이지다. 그림을 카드 위에 통째로 세우고 글은 그 아래 둔다.
   전용 키아트(src/assets/illustrations)는 세로 3:4 와 2:3 이 섞여 있어 aspect-ratio 로
   한 모양으로 묶고, 얼굴이 잘리지 않게 위쪽을 기준으로 채운다.                     */

.named-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.1rem;
  margin: 1.2rem 0 2rem;
}

.named-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(174, 109, 219, 0.28);
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.02);
}

.named-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 18%;
  background: #10111c;
}

.named-copy {
  padding: 0.85rem 0.9rem 0.95rem;
}

.named-copy h3 {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
}

.named-copy p {
  margin: 0 0 0.45rem;
  font-size: 0.9rem;
  line-height: 1.55;
}

.named-tags {
  color: #c8a6e8;
  font-size: 0.82rem !important;
  letter-spacing: 0.02em;
}

.named-meet {
  margin-bottom: 0 !important;
  color: #9aa0b5;
  font-size: 0.82rem !important;
}

/* 프레스 킷 */
.press-facts { border-collapse: collapse; width: 100%; margin: .6rem 0 1.2rem; font-size: .95rem; }
.press-facts th, .press-facts td { text-align: left; vertical-align: top; padding: .42rem .5rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.press-facts th { width: 6.5rem; color: #d9c07a; font-weight: 600; white-space: nowrap; }
.press-facts a { word-break: break-all; }
.press-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; margin: .6rem 0 1rem; }
.press-grid a { display: block; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; overflow: hidden; background: #0b0c14; }
.press-grid img { display: block; width: 100%; height: auto; }

/* 게임 안내 (/guide/) — 말 찾기와 절 앵커 (TG-273) */
.guide-terms { margin: 0 0 1.75rem; }
/*
 * 내비가 sticky 라 앵커로 뛰면 절 제목이 그 밑에 깔린다. 상수를 박지 않고 변수로 두는 이유:
 * 내비는 32rem 아래에서 두 줄이 되어 58px 에서 102px 로 뛴다(실측). 한 값으로 박으면 한쪽이
 * 반드시 틀린다 — 좁은 폭에서 제목이 사라지거나 넓은 폭에서 빈 띠가 생긴다.
 */
:root { --nav-h: 58px; }
#main [id] { scroll-margin-top: calc(var(--nav-h) + 0.6rem); }
.guide-todo { color: var(--dim); font-style: italic; border-left: 2px solid var(--line-soft); padding-left: .7rem; }

/* 첫 장 — 「무엇이 있나」 수치 카드와 장 카드 */
/* 머리띠 바로 아래 첫 제목은 위 여백을 줄인다 — 고르는 카드를 빨리 보게 한다 */
#main > h2:first-child { margin-top: 1.1rem; }
.guide-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .4rem; margin: .9rem 0 .9rem; }
.guide-facts div {
  border: 1px solid var(--line-soft); border-radius: 9px; padding: .5rem .6rem;
  background: rgba(255,255,255,.02);
}
.guide-facts b { display: block; color: var(--gold); font-size: 1.1rem; line-height: 1.2; }
.guide-facts span { display: block; color: var(--dim); font-size: .76rem; margin-top: .15rem; }
.guide-lede { margin: 0 0 .2rem; font-size: .9rem; }

/* 색인 — 갈래 제목 아래 주제 링크를 조밀하게. 설명은 붙이지 않는다(레퍼런스 셋이 그렇다) */
.guide-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.1rem 1.4rem; margin: 1.1rem 0 0; }
.guide-group h3 {
  margin: 0 0 .5rem; padding-bottom: .35rem; font-size: .92rem; color: var(--gold);
  border-bottom: 1px solid var(--line-soft);
}
.guide-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .1rem .8rem; }
.guide-links a { display: block; padding: .32rem 0; text-decoration: none; color: var(--text); font-size: .93rem; }
.guide-links a:hover { color: var(--gold); }

/* 주제 페이지 — 넓은 화면에서는 왼쪽에 목차, 오른쪽에 본문. 좁으면 목차를 접고 갈래 줄이 선다 */
.guide-layout { display: grid; grid-template-columns: 1fr; gap: 2.4rem; }
/*
 * 안내는 넓은 폭(80rem)을 쓰되 랜딩 페이지의 옷까지 물려받지는 않는다 — main.wide 의 위 여백
 * (clamp 3.5~7rem)과 큰 제목(clamp 1.8~3rem)은 히어로가 있는 소개 페이지용이다.
 */
main.wide.guide-main { padding-top: 2.25rem; }
main.wide.guide-main > h2 { padding-top: 0; border-top: 0; font-size: 1.2rem; letter-spacing: normal; }
.guide-body { min-width: 0; max-width: 60rem; }

/* 주제 그림 — 실제 게임 화면의 그 자리만 찍은 것이라 폭이 제각각이다. 원본 폭을 넘기지 않는다 */
.guide-shot { margin: 0 0 1.6rem; }
.guide-shot img {
  display: block; max-width: min(100%, 26rem); height: auto;
  border: 1px solid var(--line-soft); border-radius: 10px; background: #0b0c14;
}
.guide-shot figcaption { margin-top: .5rem; color: var(--dim); font-size: .84rem; }
.guide-side { display: none; }
.guide-side a { text-decoration: none; color: var(--dim); }
.guide-side-home { display: block; color: var(--gold); font-weight: 600; margin-bottom: 1rem; }
.guide-side h3 {
  margin: 1.1rem 0 .4rem; font-size: .8rem; color: var(--text); opacity: .75;
  letter-spacing: .02em;
}
.guide-side ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line-soft); }
.guide-side li a { display: block; padding: .28rem 0 .28rem .7rem; font-size: .88rem; margin-left: -1px; }
.guide-side li a:hover { color: var(--gold); }
.guide-side li a[aria-current="page"] {
  color: var(--gold); border-left: 2px solid var(--gold); margin-left: -2px; font-weight: 600;
}

@media (min-width: 64rem) {
  /* 목차 + 본문이 넓은 폭을 채운다. 글줄만 60rem 에서 끊어 읽기 어려워지지 않게 한다 */
  .guide-layout { grid-template-columns: 14rem minmax(0, 1fr); }
  .guide-side { display: block; position: sticky; top: calc(var(--nav-h) + 1.5rem); align-self: start; max-height: calc(100vh - var(--nav-h) - 3rem); overflow-y: auto; }
  /* 목차가 옆에 있으면 갈래 줄은 같은 말을 두 번 한다 */
  .guide-layout .guide-strip { display: none; }
}

/* 내비가 32rem 아래에서 두 줄로 접힌다 — 앵커 오프셋이 그것을 따라온다. 이 블록은 파일 끝에
   있어야 한다: 위쪽 @media (max-width: 32rem) 안에 두면 뒤에 오는 기본값 58px 이 덮는다(실측). */

/* 장 줄 — 장 페이지 맨 위. 가로로 굴러가고 지금 장이 켜져 있다 (TG-273) */
.guide-strip {
  display: flex; gap: .35rem; overflow-x: auto; margin: 0 0 1.5rem;
  padding-bottom: .35rem; scrollbar-width: none;
}
.guide-strip::-webkit-scrollbar { display: none; }
.guide-strip a {
  flex: 0 0 auto; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--line-soft); border-radius: 999px;
  padding: .38rem .8rem; color: var(--dim); font-size: .88rem;
}
.guide-strip a:hover { color: var(--gold); border-color: rgba(255,255,255,.24); }
.guide-strip a[aria-current="page"] {
  color: #0d0f18; background: var(--gold); border-color: var(--gold); font-weight: 600;
}

/* 장 끝의 앞뒤 이동 */
.guide-steps {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem; align-items: stretch;
  margin: 2.5rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line-soft);
}
.guide-step {
  display: block; text-decoration: none; border: 1px solid var(--line-soft); border-radius: 10px;
  padding: .6rem .8rem; background: rgba(255,255,255,.02);
}
.guide-step-next { text-align: right; }
.guide-step span { display: block; color: var(--dim); font-size: .76rem; }
.guide-step b { display: block; color: var(--gold); font-size: .96rem; margin-top: .15rem; }
.guide-step:hover { border-color: rgba(255,255,255,.24); }
.guide-step-home {
  align-self: center; text-decoration: none; color: var(--dim); font-size: .84rem;
  padding: .5rem .6rem; white-space: nowrap;
}
.guide-step-home:hover { color: var(--gold); }

@media (max-width: 32rem) {
  :root { --nav-h: 102px; }
}