/* web/shell.css — 세 페이지(사주 · 운세 · 질문점)가 **함께 쓰는 겉.**
 *
 * 배경 사진 · 브랜드 · 두 구역 네비를 한 곳에만 적는다. 앞 판은 질문점 페이지가
 * 이걸 따로 적어서 **페이지를 옮길 때마다 뒷배경이 바뀌었고**(사진 ↔ 크림 단색),
 * 사주 페이지 네비는 라벨 색이 --text-faint(어두운 갈색)라 사진 위에서 안 보여
 * **빈칸처럼 보였다**(2026-09-29 사용자 지적). 둘 다 "겉을 두 군데에 적은" 병이다.
 *
 * 색은 index.html :root 의 토큰을 그대로 쓴다. 여기서 새 색을 만들지 않는다.
 */

/* ── 색 토큰 ── 세 페이지가 **같은 표 하나**를 쓴다.
   앞 판은 사주 82개 · 운세 18개 · 질문점 23개로 각자 복사본을 들고 있었다.
   값이 아직 어긋나지 않았을 뿐이고, 운세·질문점에는 --measure 와 상태색이
   아예 없었다(2026-10-08 사용자 지적: "레이아웃도 CSS도 다름").
   표는 여기 한 곳에만 있다 — 페이지 안에서 :root 를 다시 열지 말 것.
   페이지 전용 값(질문점의 --yao-*)만 그 페이지에 남긴다. */
:root {
  /* ── 색 토큰 ─────────────────────────────────────────────────
     **선택자 안에 #hex 를 직접 적지 않는다.** 눈대중으로 비슷한 갈색을
     하나 더 찍는 순간 이 표가 무너진다 — 한때 갈색만 스무 가지였다.
     이름은 역할이다. 글자(ink/text/muted) · 면(surface/chip) · 선(line).
     오행 열 색은 docs/PALETTE_OHAENG.md 의 검증기 출력이라 손대지 않는다. */
  /* 글자 — --accent 가 이 화면의 주 강조색이다(버튼 바탕, 누른 칸 윤곽,
     행 라벨). 한때 선택자 안에 22번 박혀 있었다. */
  --accent:#6b4a28;
  --ink:#2a2118; --text-strong:#4b3a22; --text:#5c4a32;
  --muted:#6a5a48; --text-faint:#7a6a52; --text-dim:#796a54;
  --text-warn:#7a4e16;
  /* 면 */
  --surface-raised:#fffdf8; --surface:#fff7e4; --surface-sel:#fff1c8;
  --surface-warm:#f3e6c8; --surface-mute:#e7ddca; --bg-deep:#1a140e;
  /* 칩 */
  --chip:#e6d9bd; --chip-mute:#e2dcd2; --chip-soft:#f2eee6;
  --gwiin-bg:#f3e0b4; --gwiin-ink:#6b4a10; --void-ink:#5c5041;
  /* 선 */
  --line:#b89a6a; --line-soft:#d7c39a; --line-faint:#d8cbb2;
  --line-warm:#c9b68e; --line-strong:#ad8a51; --gold:#c4a46a;
  --gold-soft:#bca575; --chapter-line:#d9c7a6; --hl-line:#cbbba0;
  --print-line:#bbbbbb;
  /* 한 군데씩 쓰는 것 */
  --btn-ghost:#796449; --bar-fill:#8a6230; --bar-track:#ead9b6;
  --far-ink:#7a5c4a; --far-line:#c0a89a; --mark-ink:#6b6047;
  --hz-ink:#7a5a30; --pre-ink:#6b5a52; --fold-ink:#6b5535;
  --summary-ink:#61472d; --empty-ink:#9a8963; --shadow:#000000;
  --flow-line:#6f6152; --rule-line:#e6dcc9;
  /* 상태 — 오류·낡음·알림 */
  --banner-line:#d9b3a5; --banner-text:#7a3a22; --danger-bg:#fdf6f3;
  --danger-code:#f2e3dd; --danger-line:#d9b8a8; --danger-text:#5c2a1a;
  --stale-bar:#bb5555; --stale-bg:#fdf3f2; --stale-code:#f3e3e0;
  --stale-line:#cc9999; --stale-text:#7a3b32;
  /* 순차 도착 안내 — 경고색을 쓰지 않는다 */
  --queue-bg:#eef2e6; --queue-btn-hover:#f4f7ee; --queue-btn-line:#9fae87;
  --queue-hint:#66704f; --queue-ink:#44512f; --queue-line:#bcc9a8;
  /* 통근·무근 칩 */
  --root-no-bg:#efeaea; --root-no-ink:#7a5c5c; --root-yes-bg:#e7efe9;
  --root-yes-ink:#20613f;
  /* 오행 — 검증기 출력. 눈대중 금지 */
  --el-geum-bg:#e8e7ee; --el-geum-ink:#5b5963; --el-hwa-bg:#f6e3de;
  --el-hwa-ink:#9d2f11; --el-mok-bg:#dbede5; --el-mok-ink:#178b69;
  --el-su-bg:#e0e8f7; --el-su-ink:#3769c7; --el-to-bg:#f1e6d8;
  --el-to-ink:#a67117;
  /* 같은 오행 색의 **작은 글자용**. 위의 잉크는 28px 볼드(원국 표의 한 글자)를
     기준으로 검증된 값이라 3:1 만 넘기면 됐다. 12px 라벨에 그대로 쓰면
     목 3.50 · 토 3.41 · 수 4.26 으로 소형 텍스트 기준 4.5:1 에 못 미친다.
     색상은 그대로 두고 밝기만 낮춰 4.5 를 맞춘 값이다. */
  --el-mok-ink-sm:#14775a; --el-hwa-ink-sm:#9d2f11; --el-to-ink-sm:#8c5f13;
  --el-geum-ink-sm:#5b5963; --el-su-ink-sm:#3565c0;
  --paper:rgba(246,236,214,.88);   /* 폼·카드 바탕. 사진 위라서 반투명이다 */
  /* 산문 블록 폭. 40em 은 글자 크기마다 폭이 달라(같은 카드 안 480~653px) 글이 왼쪽에 몰려 보였다
     (2026-10-01 사용자 제보 · HANDOVER §62-3). 사용자 결정: 폭을 하나로 맞추고 탭 안을 꽉 채운다 = 원래대로. */
  --measure:100%;
}

/* ── 글의 통 ── 사주 기준으로 셋을 맞춘다(2026-10-08).
   앞 판은 사주 920px / 운세·질문점 760px 였고, 카드 모양도 둘이 달랐다
   (반투명 크림·라운드 4px·깊은 그림자  ↔  흰 종이·라운드 12px·얕은 그림자). */
main { position:relative; z-index:1; max-width:920px; margin:0 auto; padding:28px 16px 72px; }

/* 면 — 폼·카드·구역 상자가 한 모양이다. 사진 위라 바탕은 반투명 크림이다.
   #out > section 도 넣는다 — 운세·질문점은 결과를 #out 안에 <section> 으로 찍는다.
   사주는 #out > .card > section 이라 여기 안 걸린다(이중 상자가 되지 않는다). */
form, .card, main > section, #out > section {
  background:var(--paper); border:1px solid var(--line);
  border-radius:4px; padding:18px; box-shadow:0 12px 40px rgba(0,0,0,.35);
  margin:0 0 16px;
}
main > section:last-of-type { margin-bottom:0; }

input, select {
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line-soft); border-radius:4px; padding:8px;
  width:100%; min-width:0; max-width:100%;
}
/* textarea 만 font:inherit 를 준다 — 브라우저 기본이 고정폭이라 질문칸이 타자기가 된다. */
textarea {
  font:inherit; background:var(--surface); color:var(--ink);
  border:1px solid var(--line-soft); border-radius:4px; padding:8px;
  width:100%; min-width:0; max-width:100%;
}
input[type="checkbox"], input[type="radio"] { width:auto; }
button {
  background:var(--accent); color:var(--surface-warm); border:0;
  border-radius:4px; padding:9px 18px; font-weight:700; cursor:pointer;
}
button.ghost { background:var(--btn-ghost); color:var(--surface-warm); border:0; }
button.go { background:var(--accent); color:var(--surface-warm); border:0;
  border-radius:4px; padding:9px 18px; font-weight:700; }
label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); min-width:0; }
.row { display:flex; gap:10px; align-items:center; margin-top:12px; flex-wrap:wrap; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
@media (max-width:700px) { .grid { grid-template-columns:1fr; } }

body {
  margin:0; min-height:100vh; color:var(--ink);
  font-family:"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  background:var(--bg-deep, #1a140e);
}
/* 배경 사진은 ::before 한 장에만 얹는다(position:fixed 라 따라오지 않는다). */
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-repeat:no-repeat; background-position:center; background-size:cover;
  background-image:linear-gradient(180deg,rgba(20,14,8,.35),rgba(20,14,8,.55)),
    url("/static/assets/study.png");
  background-image:linear-gradient(180deg,rgba(20,14,8,.35),rgba(20,14,8,.55)),
    image-set(url("/static/assets/study.webp") type("image/webp"),
              url("/static/assets/study.png") type("image/png"));
}
body.has-result::before {
  background-image:linear-gradient(180deg,rgba(20,14,8,.35),rgba(20,14,8,.55)),
    url("/static/assets/hall.png");
  background-image:linear-gradient(180deg,rgba(20,14,8,.35),rgba(20,14,8,.55)),
    image-set(url("/static/assets/hall.webp") type("image/webp"),
              url("/static/assets/hall.png") type("image/png"));
}
h1.brand { color:var(--surface); letter-spacing:.08em; font-size:28px; margin:0; }
h1.brand span { font-size:15px; font-weight:400; color:var(--line-soft); margin-left:10px;
  vertical-align:middle; letter-spacing:.15em; }
.sub { color:var(--surface-warm); margin:8px 0 14px; font-size:13px;
  text-shadow:0 1px 4px var(--shadow, #000); }

/* ── 두 구역 네비 ─────────────────────────────────────────────
   사진 위에 **밝은 띠**를 깐다. 앞 판은 띠 없이 선 두 줄만 그어서 라벨이 사진에
   묻혔다. 구역 라벨도 띠 안에서 읽히는 색을 쓴다. */
nav.zones {
  position:sticky; top:0; z-index:20;
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;
  background:rgba(255,247,228,.94); backdrop-filter:blur(4px);
  border:1px solid var(--line-soft); border-radius:12px;
  padding:7px 12px; margin:0 0 16px; box-shadow:0 2px 10px rgba(0,0,0,.18);
}
nav.zones .zone { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
nav.zones .zlabel { font-size:11px; color:var(--muted); font-weight:600; letter-spacing:.02em; }
nav.zones a {
  font-size:13px; padding:3px 11px; border-radius:999px; text-decoration:none;
  border:1px solid var(--line-soft); background:var(--surface-raised); color:var(--text);
}
/* 지금 쪽을 **굵게 하지 않는다.** 맑은 고딕 볼드가 더 넓어 칸 폭이 흔들린다.
   바탕·테두리·글자색과 안쪽 테두리 한 겹으로 드러낸다(레이아웃을 안 민다). */
nav.zones a[aria-current="page"] { background:var(--surface-sel); border-color:var(--line);
  color:var(--text-strong); box-shadow:inset 0 0 0 1px var(--line); }
nav.zones .state { font-size:10px; color:var(--text-faint); margin-left:3px; }
@media (max-width:520px) { nav.zones { gap:6px; } nav.zones .zone { width:100%; } }
@media print { nav.zones { display:none !important; } }