/* 이 파일은 은하수가 만들었습니다. 고치는 자리는 기획 문서입니다. */
:root {
  --ink: #1c1a17;
  --ink-soft: #5d574e;
  --paper: #fbfaf7;
  --panel: #f2efe9;
  --line: #ddd8ce;
  --mark: #8a5a10;
  --mark-soft: #f6ecd8;
  --top-h: 52px;
  --nav-w: 288px;
  --pad: 16px;
  /*
   * 표의 한 칸이 넓어질 수 있는 만큼. 칸의 글자 크기로 센 것이라(0.95rem) 스물두 글자쯤입니다.
   *
   * 이 수가 없으면 문장이 든 칸이 **한 줄로** 서서 표를 화면 몇 배로 늘리고, 이 수가 작으면 낱말
   * 하나가 든 칸까지 접힙니다. 접히는 것은 문장뿐이어야 합니다.
   */
  --cell-max: 22em;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8e4dc;
    --ink-soft: #a49d92;
    --paper: #1a1917;
    --panel: #232220;
    --line: #38352f;
    --mark: #e0b968;
    --mark-soft: #322c1e;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.75 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", Roboto, sans-serif;
  overflow-wrap: break-word;
}

a { color: var(--mark); }

.skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 40;
  padding: 10px 14px;
  background: var(--panel);
}
.skip:focus { inset-inline-start: 0; }

/* ── 맨 윗줄 ── */

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 4px;
  height: calc(var(--top-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0
    max(8px, env(safe-area-inset-left));
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.top__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  padding-inline: 4px;
}

.top button {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 1.1rem;
  cursor: pointer;
}
.top button:hover { background: var(--mark-soft); }
.top button[aria-expanded="true"] { background: var(--mark-soft); color: var(--mark); }

/* ── 찾기 ── */

.find {
  position: sticky;
  top: calc(var(--top-h) + env(safe-area-inset-top));
  z-index: 19;
  padding: var(--pad);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.find__box {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  /* 16px보다 작으면 iOS가 이 칸을 누를 때 화면을 확대합니다. */
  font-size: 16px;
}

.find__list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  max-height: 50vh;
  overflow-y: auto;
}
.find__list li { border-bottom: 1px solid var(--line); }
.find__list a {
  display: block;
  padding: 11px 4px;
  min-height: 44px;
  text-decoration: none;
}
.find__where {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.find__none { padding: 8px 4px; color: var(--ink-soft); }

/* ── 목차 ── */

.shade {
  position: fixed;
  inset: 0;
  z-index: 24;
  background: rgba(0, 0, 0, 0.45);
  border: 0;
  padding: 0;
}

.nav {
  position: fixed;
  z-index: 25;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(var(--nav-w), 86vw);
  padding: calc(var(--pad) + env(safe-area-inset-top)) var(--pad)
    calc(var(--pad) + env(safe-area-inset-bottom));
  overflow-y: auto;
  background: var(--panel);
  border-inline-end: 1px solid var(--line);
  transform: translateX(-101%);
  /*
   * 닫힌 칸은 **없는 칸입니다.**
   *
   * 밀어내기(transform)만으로는 그 칸이 화면 밖에 있으면서 여전히 초점을 받습니다 — Tab을 누른 사람은
   * 보이지 않는 링크 스물두 개를 지나야 본문에 닿고, 화면 낭독기는 그것을 읽습니다. 실제 브라우저에서
   * 재어 보고 고친 자리입니다(가려졌는지 물었을 때 "보인다"고 답했습니다).
   */
  visibility: hidden;
  transition: transform 0.18s ease-out, visibility 0.18s;
}
.nav--open {
  transform: none;
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
  html { scroll-behavior: auto; }
}

.nav h2 {
  margin: 0 0 8px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.nav__group {
  margin: 18px 0 6px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink-soft);
}

.nav ul { margin: 0; padding: 0; list-style: none; }
.nav a {
  display: block;
  padding: 9px 10px;
  min-height: 44px;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
}
.nav a:hover { background: var(--mark-soft); }
.nav a[aria-current="page"] {
  background: var(--mark-soft);
  color: var(--mark);
  font-weight: 700;
}

/* ── 본문 ── */

.main {
  padding: var(--pad) max(var(--pad), env(safe-area-inset-right))
    calc(48px + env(safe-area-inset-bottom)) max(var(--pad), env(safe-area-inset-left));
}

.doc {
  max-width: 46rem;
  margin: 0 auto;
}

.doc h1 {
  margin: 8px 0 4px;
  font-size: clamp(1.5rem, 5.6vw, 2.1rem);
  line-height: 1.3;
}
.doc h2,
.doc h3,
.doc h4,
.doc h5,
.doc h6 {
  margin: 1.9em 0 0.5em;
  line-height: 1.35;
  scroll-margin-top: calc(var(--top-h) + env(safe-area-inset-top) + 12px);
}
.doc h2 { font-size: 1.32rem; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.doc h3 { font-size: 1.12rem; }
.doc h4, .doc h5, .doc h6 { font-size: 1rem; }

.doc__where {
  margin: 0 0 18px;
  font-size: 0.84rem;
  color: var(--ink-soft);
}

.doc p, .doc li { font-size: 1.02rem; }
.doc ul, .doc ol { padding-inline-start: 1.35em; }
.doc li { margin: 0.25em 0; }

.doc blockquote {
  margin: 1.2em 0;
  padding: 2px 0 2px 14px;
  border-inline-start: 3px solid var(--line);
  color: var(--ink-soft);
}

.doc code {
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--panel);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  overflow-wrap: anywhere;
}

.doc pre {
  margin: 1.2em 0;
  padding: 12px 14px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.doc pre code { padding: 0; background: none; white-space: pre; overflow-wrap: normal; }

.doc hr { margin: 2em 0; border: 0; border-top: 1px solid var(--line); }

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

/*
 * 값이 가리킨 그림.
 *
 * **픽셀 아트입니다.** 부드럽게 늘리면 게임에서 보는 그림과 다른 그림이 되고, 표의 한 칸에서 그 차이는
 * "이게 그 아이콘인가"를 답하지 못하게 만듭니다. 세우는 크기는 만들 때 이미 정해져 옵니다(줄이기만
 * 합니다) — 여기서 다시 늘리면 그 계산이 두 곳에 생깁니다.
 */
.shot {
  display: inline-block;
  vertical-align: middle;
  image-rendering: pixelated;
}

/*
 * 시트에서 오려 낸 한 칸.
 *
 * 창을 씌우고 그림을 그 안에서 옮깁니다. 상자의 크기와 옮긴 자리는 인라인의 **수**로 오고, 여기 있는
 * 것은 그 수가 뜻을 갖게 하는 규칙뿐입니다: 넘치는 것을 자르고(overflow), 옮기는 기준을 왼쪽 위로 두고
 * (transform-origin), 그리고 밑틀의 max-width가 그 그림을 **줄이지 못하게** 합니다 — 줄어들면 오려 낸
 * 자리가 어긋나 다른 칸이 섭니다.
 */
.cut {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
}
.cut img {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  max-width: none;
  transform-origin: 0 0;
  image-rendering: pixelated;
}

/*
 * 눌러서 크게 보는 그림.
 *
 * 표의 칸은 48화소입니다. 1536×1024짜리 배경은 그 칸에서 색 몇 개이고, 배경을 고르는 사람이 알아야
 * 하는 것은 그 색이 아닙니다. 그래서 낸 폴더의 그림으로 가는 길이 하나 있습니다 — 스크립트도, 밖에서
 * 받아 오는 것도 없이.
 *
 * 손가락이 닿는 자리는 **그림보다 큽니다.** 24화소짜리 아이콘을 누르려고 조준하는 표는 폰에서 읽는
 * 표가 아닙니다(44화소는 손가락 하나의 크기입니다). 밑줄은 지웁니다 — 링크인 것은 테두리가 말합니다.
 */
.peek {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 2px;
  border-radius: 6px;
  text-decoration: none;
}
.peek:hover, .peek:focus-visible { background: var(--mark-soft); }

/*
 * 표는 접지 않고 **굴립니다.** 기획서의 표는 칸이 다섯이 흔하고, 360px에 접으면 칸마다 한 글자입니다.
 *
 * "overflow-x: auto" 하나로는 그 일이 일어나지 않았습니다. 굴러가는 것은 **넘치는** 표뿐인데 표의 폭이
 * 100%이면 넘칠 수가 없어서, 브라우저는 넘치는 대신 칸을 **누릅니다.** 그리고 한국어는 글자마다 줄을
 * 바꿀 수 있어서 눌리는 폭의 밑바닥이 한 글자입니다 — 390px에서 다섯 칸 표를 재어 보니 굴림이 0px
 * (356=356), 코드 한 칸("sword_slash")이 여섯 줄, 줄 하나의 높이가 125px이었습니다. 스타일시트에는
 * "overflow-x"가 멀쩡히 적혀 있었고, 그것을 단정하는 테스트도 통과하고 있었습니다.
 *
 * 그래서 폭은 **내용이 정합니다**("max-content"): 좁은 표는 칸을 채우고("min-width: 100%"), 넓은 표는
 * 넘쳐서 굴러갑니다. 눌리는 자리가 없습니다.
 */
.wrap {
  /*
   * 폰에서는 본문의 여백까지 씁니다. 굴리는 표에게 그 32px은 여백이 아니라 **한 칸**입니다(390px에서
   * 356 → 388). 안전 여백은 그대로입니다 — ".main"의 패딩이 max(--pad, env(...))라 --pad만큼만
   * 되돌리면 노치 쪽에 남는 것은 건드리지 않습니다.
   */
  margin: 1.2em calc(-1 * var(--pad));
  overflow-x: auto;
  /* 다 굴린 손짓이 페이지를 좌우로 끌고 가지 않도록. */
  overscroll-behavior-x: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  -webkit-overflow-scrolling: touch;
}
.wrap table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.wrap th, .wrap td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  text-align: start;
  vertical-align: top;
  /* 문장이 든 칸은 여기서 접힙니다. 낱말 하나가 든 칸은 이 수에 닿지 않아 그대로 한 줄입니다. */
  max-width: var(--cell-max);
}
.wrap th { background: var(--panel); font-weight: 700; white-space: nowrap; }
.wrap tr:last-child td { border-bottom: 0; }

/*
 * 표 안의 코드는 **낱말입니다.**
 *
 * 밑틀의 "overflow-wrap: anywhere"가 여기까지 오면 "sword_slash"가 글자 사이에서 끊겨 여섯 줄로 서고,
 * 그 칸은 이름을 읽을 수 없는 칸이 됩니다. 밑틀(".doc code")과 특이도가 같아 **뒤에 있어야** 이깁니다.
 */
.wrap code { overflow-wrap: normal; }

/*
 * 칸이 붙는 쪽은 **문서가 적습니다**(| ---: |). 규칙이 없으면 그 선언은 조용히 사라집니다 — 오른쪽에
 * 맞춰 둔 수치 열이 왼쪽에 서고, 그것을 적은 사람은 자기가 잘못 적은 줄 압니다. 이름은 html.ts가 답니다.
 */
.wrap .al-l { text-align: start; }
.wrap .al-c { text-align: center; }
.wrap .al-r { text-align: end; }

/* 풀리지 않은 자리는 **풀리지 않았다고 말합니다.** 조용히 비우면 문서가 수치를 잃은 채로 참인 척합니다. */
.gap {
  padding: 0.1em 0.35em;
  border-radius: 4px;
  border: 1px dashed var(--line);
  color: var(--ink-soft);
  font-size: 0.9em;
}

/* 아무 데도 닿지 않는 링크는 링크로 그리지 않습니다. */
.dead { color: var(--ink-soft); border-bottom: 1px dotted var(--line); }

.toc {
  margin: 0 0 24px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.toc summary {
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink-soft);
  min-height: 24px;
}
.toc ul { margin: 10px 0 0; padding-inline-start: 1.1em; }
.toc li { margin: 0.15em 0; font-size: 0.94rem; }
.toc .toc--deep { margin-inline-start: 1em; }

.back {
  margin: 40px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.back h2 { margin: 0 0 8px; font-size: 0.86rem; letter-spacing: 0.04em; color: var(--ink-soft); }
.back ul { margin: 0; padding: 0; list-style: none; }
.back li { margin: 0.2em 0; }
.back a { display: inline-block; padding: 6px 0; }

.foot {
  max-width: 46rem;
  margin: 36px auto 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.84rem;
  color: var(--ink-soft);
}

/* ── 넓은 화면 ── */

@media (min-width: 900px) {
  body { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .top { grid-column: 1 / -1; }
  .find { grid-column: 1 / -1; }
  /*
   * **밑틀을 이겨야 합니다.** ".top button"의 display: grid는 클래스 하나와 타입 하나(0,1,1)이고
   * ".top__menu"는 클래스 하나(0,1,0)라, 이름만 적으면 미디어 쿼리 안이어도 밑틀이 이깁니다 — 스타일은
   * 멀쩡히 적혀 있고 단추는 넓은 화면에서 그대로 서 있습니다. 실제 브라우저에서 재어 보고 고친
   * 자리입니다.
   */
  .top button.top__menu { display: none; }
  .nav {
    position: sticky;
    top: calc(var(--top-h) + env(safe-area-inset-top));
    z-index: 1;
    grid-column: 1;
    align-self: start;
    inset-block: auto;
    width: auto;
    max-height: calc(100vh - var(--top-h));
    transform: none;
    /* 늘 서 있는 칸입니다 — 좁은 화면에서 숨겨 둔 것을 여기서 되돌립니다. */
    visibility: visible;
    transition: none;
  }
  .shade { display: none; }
  .main { grid-column: 2; padding-inline: 32px; }
  .doc, .foot { margin-inline: 0; }
  /* 넓은 화면에서 표는 본문의 폭입니다. 여백까지 쓰는 것은 폰의 32px을 되찾는 일이었습니다. */
  .wrap { margin-inline: 0; }
}

@media print {
  .top, .nav, .find, .shade, .toc { display: none; }
  body { display: block; }
}