/* 노광 기록 — 세 화면이 공유하는 단 하나의 토큰층.
   이 파일은 site/ 의 두 화면이 <link> 로 읽고, 가이드북은 build_site.py 가 그대로 인라인한다.
   토큰을 고칠 곳은 여기 한 곳뿐이다. */

:root {
  /* 존 램프 — 화면의 모든 무채색은 이 열한 칸 중 하나에 스냅한다. 사이 값을 만들지 않는다. */
  --z0:  #16171a;
  --z1:  #24262a;
  --z2:  #34373c;
  --z3:  #45484e;
  --z4:  #575b61;
  --z5:  #6b6f76;
  --z6:  #82868d;
  --z7:  #9a9ea4;
  --z8:  #b4b7bc;
  --z9:  #cfd1d4;
  --z10: #e9eaeb;

  /* 지본과 시트 — 라이트박스 위에 겹쳐 놓인 종이. 어두운 방이 아니라 백라이트 쪽이다. */
  --paper: #e6e5e0;
  --sheet: #f0efeb;
  --clear: #f9f8f6;
  --ink:   var(--z0);
  --rule:  #c9c8c2;

  /* 필터 — 이 화면에서 유일한 유채색. 계조 등급과 활성 상태에만 쓴다. 장식으로 쓰지 않는다. */
  --mag: #d4007a;
  --mag-ink: #a8005f;
  --mag-soft: #f7d6e8;

  --face-display: 'Gothic A1', 'Pretendard Variable', Pretendard, sans-serif;
  --face-text: 'Pretendard Variable', Pretendard, system-ui, sans-serif;
  --face-data: 'Azeret Mono', ui-monospace, monospace;

  --page: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
  accent-color: var(--mag);
}

/* 해치 — 미보유·부재·충돌을 나르는 척도. 밀도가 곧 수치다.
   .hatch 는 --d(선 간격)와 --w(선 굵기)로 여덟 단계를 만든다. */
.hatch {
  background-image: repeating-linear-gradient(
    45deg,
    var(--hatch-ink, var(--z4)) 0 var(--w, 1px),
    transparent var(--w, 1px) var(--d, 7px)
  );
}
.hatch.d1 { --d: 11px; --w: .5px }
.hatch.d2 { --d: 9px;  --w: .5px }
.hatch.d3 { --d: 7px;  --w: .75px }
.hatch.d4 { --d: 6px;  --w: 1px }
.hatch.d5 { --d: 5px;  --w: 1px }
.hatch.d6 { --d: 4px;  --w: 1.25px }
.hatch.d7 { --d: 3px;  --w: 1.25px }
.hatch.d8 { --d: 2.5px; --w: 1.5px }
/* 직각으로 겹친 두 해치 = 충돌. 해당 없음·모순을 뜻하며 미보유와 다르다. */
.hatch.conflict {
  background-image:
    repeating-linear-gradient(45deg,  var(--z5) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, var(--z5) 0 1px, transparent 1px 6px);
}

*, *::before, *::after { box-sizing: border-box }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face-text);
  font-size: 16px;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 한국어는 어절 중간에서 끊지 않는다(body에서 상속). 좁은 칸에서 넘칠 때만 글자 단위로 끊는다. 본문은 마지막 줄에 어절 하나만 남기지 않고, 제목은 줄 길이를 고르게 나눈다. */
h1, h2, h3, h4, h5, h6, p, li, td, th, dd, dt, figcaption, blockquote, label, button, a { overflow-wrap: anywhere }
p, li, td, dd, dt, figcaption, blockquote { text-wrap: pretty }
h1, h2, h3, h4, h5, h6, caption { text-wrap: balance }
h1, h2, h3, h4 { margin: 0; font-family: var(--face-display); font-weight: 800; line-height: 1.12; letter-spacing: -.02em }
p { margin: 0 }
a { color: inherit }
img { display: block; max-width: 100%; -webkit-user-drag: none; user-select: none }
button, input, select { font: inherit; color: inherit }

/* 라틴·숫자·계기값 전용. 한글에는 절대 쓰지 않는다 — 모노에 한글 글리프가 없어 자간만 남는다. */
.data {
  font-family: var(--face-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.legend {
  font-family: var(--face-data);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--z3);
}
/* 한글 범례는 모노를 쓰지 않고 자간도 벌리지 않는다. */
.legend-ko {
  font-family: var(--face-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--z3);
}

/* 브라우저가 그리는 표면도 이 세계에 속한다. */
::selection { background: var(--mag); color: var(--clear) }
:focus-visible { outline: 2px solid var(--mag); outline-offset: 2px }
input { caret-color: var(--mag) }
* { scrollbar-width: thin; scrollbar-color: var(--z6) var(--z10) }
*::-webkit-scrollbar { width: 10px; height: 10px }
*::-webkit-scrollbar-track { background: var(--z10) }
*::-webkit-scrollbar-thumb { background: var(--z6); border: 2px solid var(--z10) }
*::-webkit-scrollbar-thumb:hover { background: var(--z4) }

/* 손가락이 닿는 것은 44px 아래로 내려가지 않는다. */
a.tap, button, [role="button"], input[type="search"], summary {
  min-height: 44px;
}

.skip-link {
  position: fixed; z-index: 60; top: 8px; left: 8px;
  display: flex; align-items: center;
  padding: 10px 16px;
  background: var(--ink); color: var(--clear);
  transform: translateY(-160%);
}
.skip-link:focus { transform: none }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── 세력 = 필터 호수 ────────────────────────────────────────────────
   세력을 색이 아니라 계조 곡선으로 가른다.
   저호수(성당교회)는 중간톤이 넓고 부드럽다 — 되돌릴 여지가 남아 있는 쪽.
   고호수(가드너)는 중간톤이 없고 흑과 백만 남는다 — 욕망만 남은 쪽.
   호수는 괘선 톤·라벨 톤·특성 곡선 셋을 동시에 정한다. 본문 대비는 호수와 무관하게 항상 지킨다. */

[data-grade]       { --g-rule: var(--z7); --g-label: var(--z3) }
[data-grade="0"]   { --g-rule: var(--z9); --g-label: var(--z4) }
[data-grade="1"]   { --g-rule: var(--z8); --g-label: var(--z4) }
[data-grade="2"]   { --g-rule: var(--z7); --g-label: var(--z3) }
[data-grade="2.5"] { --g-rule: var(--z6); --g-label: var(--z3) }
[data-grade="3.5"] { --g-rule: var(--z5); --g-label: var(--z2) }
[data-grade="5"]   { --g-rule: var(--z3); --g-label: var(--z1) }
[data-grade="—"]   { --g-rule: var(--z1); --g-label: var(--z0) }

.curve { display: block; width: 34px; height: 34px; flex: none }
.curve rect { fill: none; stroke: var(--g-rule); stroke-width: 1 }
.curve line { stroke: var(--g-rule); stroke-width: .5 }
.curve path { fill: none; stroke: var(--g-label); stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round }
.curve.solid path { stroke: var(--mag) }

.grade {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--face-data); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; color: var(--g-label);
}
.grade b { font-weight: 600 }
.grade i { font-style: normal; color: var(--z3) }