/* 3판 뼈대 (T-968) — 머리·꼬리·커서·그레인·절 리듬. 장면 안쪽 모양은 각 장면 CSS 가 맡는다. */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.75;
  letter-spacing: -0.01em;
  overflow-x: clip;
  transition: background-color .6s var(--ease);
}

/* 한글은 낱말 안에서 줄이 바뀌면 안 된다("확인 / 은 사람이"처럼 갈라진다).
   keep-all 로 낱말 단위로만 끊고, 정말 안 들어가는 긴 덩어리만 강제로 접는다. */
h1, h2, h3, p, li, .sec-title, .sec-lead {
  word-break: keep-all;
  overflow-wrap: break-word;
}
/* 큰 제목 줄간격: 1.06 은 라틴 기준이라 한글 받침이 붙는다. */
h1, h2, h3 { line-height: 1.16; letter-spacing: -0.035em; margin: 0; font-weight: 700; }
p { margin: 0; }
a { color: inherit; }
img, canvas, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad-side); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--accent); color: var(--accent-text);
  padding: 10px 16px; border-radius: 0 0 var(--r-btn) 0; text-decoration: none;
}
.skip-link:focus { left: 0; }

:where(a, button, input, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── 머리 ───────────────────────────────────────────────── */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; gap: var(--gap-4);
  padding: 14px var(--pad-side);
  mix-blend-mode: normal;
  transition: background-color .35s var(--ease), border-color .35s var(--ease),
              box-shadow .35s var(--ease);
  border-bottom: 1px solid transparent;
}
/* 5판 유리 질감: 뒤가 비치고 흐려지며, 윗변에 1px 밝은 선, 아래로 옅은 그림자.
   3판에서는 이 효과가 스크롤 내내 헤더 밑을 다시 그려 프레임을 먹어 뺐었다
   (perf_diag.js: 27.9 → 19.5ms). 5판은 그때보다 페이지가 훨씬 가벼워져 다시 넣고,
   perf.js 로 재서 판단했다(수치는 0910_v5 보고서). */
.site-header.is-stuck {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border-bottom-color: var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-top), 0 10px 26px var(--glass-shadow);
}
/* 뒤 흐리기를 못 하는 브라우저는 예전처럼 거의 불투명한 바탕으로 가린다 */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .site-header.is-stuck { background: color-mix(in srgb, var(--bg) 95%, transparent); }
}
.site-name {
  font-weight: 700; font-size: 0.98rem; letter-spacing: -0.02em;
  text-decoration: none; display: inline-flex; align-items: center; gap: 9px;
}
.site-name .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
  animation: pulse 2.6s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 11px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.site-nav { margin-left: auto; display: flex; gap: var(--gap-6); font-size: var(--t-small); }
.site-nav a { text-decoration: none; color: var(--muted); transition: color .2s; }
.site-nav a:hover { color: var(--text); }
@media (max-width: 720px) { .site-nav { display: none; } }

.mode-toggle {
  margin-left: var(--gap-4);
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 7px 13px;
  font-size: var(--t-tiny); cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.mode-toggle:hover { border-color: var(--accent); }
.mode-toggle .icon { width: 15px; height: 15px; }

/* 스크롤 진행 막대 */
.progress-rail {
  position: fixed; left: 0; top: 0; height: 2px; z-index: 70;
  width: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: var(--accent); opacity: .9;
}

/* ── 그레인: 이미지 파일 없이 SVG 잡음 한 장을 깐다 (xmlns 지우면 안 됨) ── */
.grain {
  position: fixed; inset: -50%; z-index: 5; pointer-events: none;
  /* overlay 블렌드를 쓰지 않는다. 화면 전체에 깔린 고정 레이어를 overlay 로 섞으면 매 프레임
     페이지 전체를 다시 합성해서 1440 평균 프레임이 27.9ms → 10.7ms 로 갈렸다(perf_diag.js 실측).
     어두운 바탕에서는 보통 섞기 + 낮은 불투명도가 거의 같은 질감을 낸다. */
  opacity: .035; mix-blend-mode: normal;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 8s steps(6) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

/* ── 커스텀 커서: 잔상 두 겹. 손가락 입력이면 아예 안 만든다(boot.js) ── */
.cursor-dot, .cursor-ring {
  position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none;
  border-radius: 50%; opacity: 0;
  will-change: transform;
}
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--accent); }
.cursor-ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  transition: width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease),
              background-color .25s var(--ease), border-color .25s var(--ease);
}
.cursor-ring.is-hot {
  width: 62px; height: 62px; margin: -31px 0 0 -31px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: var(--accent);
}
html.has-cursor, html.has-cursor * { cursor: none; }
html.has-cursor :where(input, textarea) { cursor: text; }

/* ── 절 공통 리듬 ───────────────────────────────────────── */
.sec { position: relative; padding: var(--gap-32) 0; }
.sec-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-tiny); letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); font-family: var(--font-mono);
  margin-bottom: var(--gap-6);
}
.sec-label::before { content: ""; width: 26px; height: 1px; background: currentColor; }
/* 16ch 이면 한글 제목이 세 줄로 접혀 절 하나를 제목만으로 채운다. 20ch = 두 줄. */
.sec-title { font-size: var(--t-huge); max-width: 20ch; }
.sec-lead { margin-top: var(--gap-6); color: var(--muted); font-size: var(--t-lead); max-width: 52ch; }
.note {
  font-size: var(--t-tiny); color: var(--faint); line-height: 1.6;
  border-left: 2px solid var(--border); padding-left: 10px;
}
.ph { /* 사장이 채울 자리표시자 */
  color: var(--accent);
  font-family: var(--font-mono); font-size: .92em;
  border-bottom: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent);
}

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--accent); color: var(--accent-text);
  border: 0; border-radius: var(--r-btn);
  padding: 14px 22px; font-weight: 700; font-size: var(--t-body);
  text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 30%, transparent); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--accent); box-shadow: none; }

/* ── 꼬리 ───────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border);
  padding: var(--gap-16) 0 var(--gap-12);
  color: var(--muted); font-size: var(--t-small);
}
.site-footer .row { display: flex; flex-wrap: wrap; gap: var(--gap-6); justify-content: space-between; }

/* ── 움직임 줄이기: 장식 움직임은 전부 정지. 글은 하나도 안 숨긴다 ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .grain { animation: none; }
  .cursor-dot, .cursor-ring { display: none; }
}