/*
 * 문서 페이지의 틀 한 벌 (#476) — `notice`·`faq`·`terms`·`privacy`가 전부 이 파일 하나를 쓴다.
 *
 * ## 게임 화면과 같은 틀이다 (#476 재작업)
 *
 * **게임에서 문서로 넘어가도 형식이 바뀌지 않아야 한다.** 1차(#478)는 화면 전체 폭을 쓰는 독립
 * 페이지였고, 사용자가 폰에서 "게임 화면과 다른 틀"로 지적했다. 그래서 이 파일은 두 가지를 그대로
 * 옮긴다.
 *
 * 1. **셸** — `src/shell.css`의 `#stage`(좌우 사이드 슬롯 + 가운데 칸) · `#footer`(20px) ·
 *    `#ad-bottom`(50px + 안전 영역). 슬롯은 **광고를 싣지 않고 자리만 지킨다** — 빈 게임 화면과
 *    같은 옅은 바탕이다. 문턱(1060 · 760)과 폭(300 · 160)도 같다
 * 2. **캔버스** — 가운데 칸 안의 `.doc`가 게임 캔버스와 같은 상자다. Phaser `Scale.FIT`은 칼럼
 *    380×730을 비율 그대로 남는 칸에 맞추므로, 여기서도 **칸의 폭·높이 중 빡빡한 쪽**에 맞춘다
 *    (`container-type: size` + `cqw`·`cqh`). 그 안의 모든 치수는 **논리 픽셀 단위 `--u`**
 *    (= 칼럼 폭 / 380)로 적는다 — 캔버스가 커지면 글자도 같이 커지는 게임과 같은 배율이다
 *
 * 칼럼 안의 자리는 게임 값의 사본이다: 최상단 줄 `TOP_ROW`(y 14 · 높이 32) · 제목 `titleS` 15/600,
 * 본문 시작 `CONTENT_TOP` 62, [돌아가기]는 봇 난이도 화면의 [닫기](`DIFFICULTY_ACTIONS.closeTop` 628 ·
 * 높이 44 · 폭 `FORM_WIDTH` 332, ghost 버튼). 최상단 줄 오른쪽(설정 기어 자리)은 비운다.
 *
 * **사본이 원본과 같은지는 `src/theme/__tests__/pageCopies.test.ts`가 문다** — 아래 `:root`의
 * 숫자 변수(`--col-w` …)를 TS 상수와, 셸 값을 `shell.css`와 대조한다. 값을 고치는 곳은 원본이고,
 * 이 파일은 따라 고친다.
 *
 * ## 색과 글자와 반경은 테마가 정한다 (D703-9)
 *
 * 이 파일에는 색 리터럴과 글꼴 이름이 없다. `--bg`·`--text`·`--accent`·`--font-body`·`--type-*`·`--radius-*` 같은 변수는
 * 빌드가 `client/themes/*`의 매니페스트에서 만든 `/themes.css`가 정한다(문서가 이 파일보다 먼저 링크한다). `docs.js`가
 * `kubbo.lastTheme`을 `<html data-theme>`에 넣어서 지난 테마의 블록이 켜지고, 값이 없거나 모르는 id면 arcade다.
 *
 * ## 게임 번들을 쓰지 않는다
 *
 * 문서는 게임을 내려받을 이유가 없다. 그래서 `shell.css`를 링크하지 못하고(번들 소스다) 셸을
 * 옮겨 적는다. `themes.css`는 번들이 아니라 작은 정적 파일이다.
 *
 * **페이지마다 인라인 `<style>`을 두지 않는다.** 문서에 고유한 모양(공지·FAQ 접이식)도 여기 둔다.
 */

:root {
  /* ── 셸 사본 — `src/shell.css` ── */
  --ad-bottom-h: 50px;
  --ad-side-w: 300px;
  --ad-side-h: 600px;
  --footer-h: 20px;

  /* ── 캔버스 안 좌표 사본 (논리 픽셀, 단위 없음) ──
     config.ts `COLUMN_WIDTH`·`COLUMN_HEIGHT`·`FORM_MARGIN`,
     widgets/layout.ts `TOP_ROW`·`TOP_TITLE.width`·`CONTENT_TOP`,
     solo/layout.ts `DIFFICULTY_ACTIONS.closeTop`·`closeHeight` */
  --col-w: 380;
  --col-h: 730;
  --form-margin: 24;
  --top-row-y: 14;
  --top-row-h: 44;
  --top-title-w: 140;
  --content-top: 62;
  --close-top: 628;
  --button-h: 44;
}

* { box-sizing: border-box; }

/* ══════════ 셸 — `src/shell.css`와 같은 자리 ══════════ */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  display: flex;
  flex-direction: column;
  height: 100svh;
  color: var(--text);
  -webkit-text-size-adjust: 100%;
}

#stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 게임의 `#game` 자리. 남는 폭 전부를 먹고, 그 안에서 `.doc`가 캔버스처럼 FIT으로 선다 */
.doc-slot {
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ad-side {
  flex: 0 0 var(--ad-side-w);
  width: var(--ad-side-w);
  height: var(--ad-side-h);
  max-height: 100%;
  background: var(--ad-bg);
}

@media (max-width: 1059px) {
  :root { --ad-side-w: 160px; }
}

@media (max-width: 759px) {
  .ad-side { display: none; }
}

#footer {
  flex: 0 0 auto;
  height: var(--footer-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  font: 12px/1 var(--font-body);
  color: var(--text-dim);
  overflow: hidden;
  white-space: nowrap;
}

#footer a { color: inherit; text-decoration: none; }
#footer a:hover { text-decoration: underline; }

#ad-bottom {
  flex: 0 0 auto;
  height: var(--ad-bottom-h);
  margin-bottom: env(safe-area-inset-bottom);
  background: var(--ad-bg);
}

/* ══════════ 캔버스 자리 — 380×730을 FIT으로 ══════════ */

.doc {
  /* 칸의 폭과 높이 중 빡빡한 쪽에 맞춘다 — Phaser `Scale.FIT`과 같은 답 */
  width: min(100cqw, 100cqh * var(--col-w) / var(--col-h));
  height: min(100cqh, 100cqw * var(--col-h) / var(--col-w));
  flex: 0 0 auto;
  position: relative;
  container-type: size;
  overflow: hidden;
  background: var(--bg);
  font-family: var(--font-body);
  word-break: keep-all;
  overflow-wrap: anywhere;

  /* 논리 픽셀 1 — 자식에게서 `cqw`는 이 상자의 폭이다 */
  --u: calc(100cqw / var(--col-w));
}

/* ── 최상단 줄: 제목 가운데 하나뿐이다. 언어 토글은 두지 않는다 — 문서 언어는 게임에서 고른 언어를 따른다 (#608) ── */

.doc-head {
  position: absolute;
  top: calc(var(--top-row-y) * var(--u));
  left: 0;
  right: 0;
  height: calc(var(--top-row-h) * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 한 줄 맞춤은 `docs.js`가 한다 (#576 D1) — 재서 넘치면 크기·자간을 같은 비율로 줄이고 `nowrap`을 건다.
   `white-space`를 여기 두지 않는 이유: 스크립트가 없으면 오늘처럼 줄바꿈으로 선다 */
.doc-head h1 {
  margin: 0;
  max-width: calc(var(--top-title-w) * var(--u));
  text-align: center;
  font-size: calc(var(--type-title-size) * var(--u));
  font-weight: var(--type-title-weight);
  letter-spacing: calc(var(--type-title-spacing) * var(--u));
  line-height: 1;
  color: var(--text);
}

/* ── 본문: 최상단 줄 아래부터 [돌아가기] 위까지만 스크롤 ── */

.doc-body {
  position: absolute;
  top: calc(var(--content-top) * var(--u));
  /* [돌아가기] 윗변에서 16 위까지 — 최상단 줄과 본문 사이 16과 같은 여백 */
  bottom: calc((var(--col-h) - var(--close-top) + 16) * var(--u));
  left: 0;
  right: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 데스크톱의 굵은 스크롤바가 칼럼 폭을 먹지 않게 */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  padding: 0 calc(var(--form-margin) * var(--u));
  font-size: calc(var(--type-body-size) * var(--u));
  line-height: var(--type-body-line);
}

.doc-body h2 {
  font-size: calc(var(--type-title-size) * var(--u));
  font-weight: var(--type-title-weight);
  line-height: 1.4;
  margin: 1.6em 0 .5em;
}
.doc-body > :first-child,
.doc-body > section:first-child > h2:first-child { margin-top: 0; }

/* 약관·처리방침의 소절 머리 (#576) — 본문 크기에 굵기만 올린다. FAQ의 질문(`h3.faq-q`)은 `summary` 안이라 안 걸린다 */
.doc-body > section > h3 {
  font-size: 1em;
  font-weight: 600;
  line-height: 1.45;
  margin: 1.2em 0 .4em;
}

.doc-body p,
.doc-body ul,
.doc-body ol { margin: 0 0 1em; }
.doc-body ul,
.doc-body ol { padding-left: 1.4em; }
.doc-body li { margin-bottom: .35em; }

.doc-body strong { color: var(--text-strong); }
.doc-body a { color: var(--accent); }

.doc-body code {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius-chip) * var(--u));
  padding: .1em .35em;
  font-size: .9em;
}

.lead { color: var(--text-dim); }

/* 표는 제 칸 안에서만 가로로 민다 */
.box { overflow-x: auto; margin: 0 0 1em; }
.doc-body table { border-collapse: collapse; width: 100%; }
.doc-body th,
.doc-body td {
  border: 1px solid var(--border);
  padding: .45em .7em;
  text-align: left;
  vertical-align: top;
}
.doc-body th { background: var(--surface); font-weight: 600; white-space: nowrap; }

/* 색 견본 */
.sw {
  display: inline-block;
  width: .75em;
  height: .75em;
  border-radius: calc(var(--radius-chip) * var(--u));
  margin-right: .4em;
  vertical-align: -.05em;
}
.sw-red { background: var(--red); }
.sw-green { background: var(--green); }
.sw-blue { background: var(--blue); }

/* ── [돌아가기]: 봇 난이도 화면의 [닫기]와 같은 자리·모양 (ghost 버튼) ── */

.doc-foot {
  position: absolute;
  top: calc(var(--close-top) * var(--u));
  left: calc(var(--form-margin) * var(--u));
  right: calc(var(--form-margin) * var(--u));
  height: calc(var(--button-h) * var(--u));
}

.doc-back {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: calc(var(--type-button-size) * var(--u));
  /* 게임의 [닫기]는 `ghost` 버튼이다 — 시안 C에서 채우지 않는 테두리 버튼(#467), 글자는 `button` 역할 16/800 */
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  text-decoration: none;
  background: transparent;
  border: calc(var(--stroke-base) * var(--u)) solid var(--border);
  border-radius: calc(var(--radius-button) * var(--u));
}
.doc-back:hover,
.doc-back:focus-visible { border-color: var(--accent); outline: none; }

/* ══════════ 접이식 — 공지·FAQ가 같은 `<details>`를 쓴다 ══════════
 *
 * **`<details>`/`<summary>`인 이유는 크롤러와 심사관이다** (#476) — 접혀 있어도 본문이 HTML 안에
 * 있어 읽힌다. 누를 때 스크립트로 불러오지 않는다. 펼침·접힘은 브라우저가 한다(스크립트 0).
 */

.fold {
  border-bottom: 1px solid var(--border);
}

/* 제목·날짜가 왼쪽 칸에 위아래로, ⌄가 오른쪽 칸에 선다. `<summary>`에는 제목 요소와 글줄
   요소만 들어갈 수 있어(감싸는 `div` 불가) 칸 나눔을 grid가 한다 */
.fold > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: calc(12 * var(--u));
  padding: calc(12 * var(--u)) 0;
  cursor: pointer;
  list-style: none;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

.fold > summary > * { grid-column: 1; }

/* ⌄ — 글자가 아니라 선 둘이다(문자열 없음). 펼치면 ⌃로 돌아간다 */
.fold > summary::after {
  content: "";
  grid-column: 2;
  grid-row: 1 / span 2;
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  margin-right: calc(4 * var(--u));
  border-right: calc(1.5 * var(--u)) solid var(--text-dim);
  border-bottom: calc(1.5 * var(--u)) solid var(--text-dim);
  transform: translateY(-25%) rotate(45deg);
}
.fold[open] > summary::after { transform: translateY(25%) rotate(-135deg); }

.fold-body { padding: 0 0 calc(14 * var(--u)); }
.fold-body > :last-child { margin-bottom: 0; }

/* ── 공지사항 (notice.html) ── */

.doc-body .notice-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.notice-list > li { margin: 0; }

.notice-title {
  margin: 0;
  font-size: calc(var(--type-body-size) * var(--u));
  font-weight: 600;
  line-height: 1.45;
}

/* `[공지]` — 괄호는 모양이다. 데이터(`.notice-kind`의 글자)는 종류 이름 그대로 둔다 */
.notice-kind::before { content: "["; }
.notice-kind::after { content: "] "; }

.notice-date {
  display: block;
  margin-top: calc(2 * var(--u));
  font-size: calc(var(--type-label-size) * var(--u));
  line-height: 1.4;
  color: var(--text-dim);
}

/* 글이 하나도 없으면 목록 대신 이 한 줄이 선다 — 데이터가 비는 날 빈 화면을 보이지 않는다 */
.notice-empty { display: none; color: var(--text-dim); }
.notice-list:not(:has(> li)) + .notice-empty { display: block; }

/* ── FAQ (faq.html) — 묶음 제목 아래 질문이 접힌 채 ── */

.faq-group { margin-top: calc(24 * var(--u)); }
.faq-group > h2 {
  margin: 0;
  padding-bottom: calc(8 * var(--u));
  border-bottom: 1px solid var(--border);
}

.faq-q {
  margin: 0;
  font-size: calc(var(--type-body-size) * var(--u));
  font-weight: 600;
  line-height: 1.45;
}