/* 슬롭게이트 — 두 벌 대조 교정지(2026-10-20 리뉴얼 · 설계 docs/RENEWAL_2026-10-20.md).
   얼굴: 같은 우엉김밥 안내문을 기계와 사장이 한 벌씩 쓴 것을 **한 화면**에 나란히 놓은 조판면. 문서는 스크롤하지 않고 판 안에서만 흐른다.
   활자: 두 가족이 곧 판정이다 — 편집자·사장의 목소리(표제·사장 원고·주석·라벨·발치)는 자체 호스팅 부리 「SG Buri」(마루 부리 OFL 서브셋, fonts/출처.md),
         기계가 쓴 것·붙여넣은 글은 **그 기기의 시스템 고딕**(호스팅 0 — 모든 블로그를 보여 주는 바로 그 서체).
   radius 문법: 0 + 3px 이중 괘선(두 단 사이 · 붙여넣기 칸 위). 둥근 모서리 0. 그림자 0. 모션 0(사용자 동작 응답만).
   시그니처: 레이아웃 구조 — 붙여넣어도 사장 원고는 화면에서 떠나지 않는다. 짚은 자리는 굵기 700 하나로만 표시한다(밑줄·취소선·배경 0).
   색은 2026-09-10 형제 전 쌍 검사를 통과한 값 그대로다(이번 회차도 색을 옮기지 않는다 — 발주 ④ⓐ).
   검사: tests/series_check.mjs · tests/design_check.mjs · tests/scan.mjs · tests/prerender.mjs · tests/e2e_shots.mjs */

@font-face { font-family: "SG Buri"; src: url(fonts/SGBuri-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SG Buri"; src: url(fonts/SGBuri-Light.woff2) format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }

:root {
  --paper: #ffe7f0;          /* 지면 — 붉은 기 밴 블러시 교정지 (Lab L93.8 C9.8 h351.9 · b*−1.4 쿨) */
  --paper-raised: #ffecf3;   /* 그 위에 올린 한 장 — 붙여넣기 칸·발치 펼침 안내 (#FFF 아님 — 백지 대비 dE 9.13) */
  /* 면 토큰: --paper-raised */   /* ← 고정 형식 선언(산문 아님). 형제 검사기가 「면(카드)」 키를 이 줄에서 읽는다. 선언이 없으면 EXIT=1. */
  --ink: #1b1e24;            /* 잉크 — 글자와 3px 이중 괘선. 채도 0에서도 골격이 남는다 */
  --ink-soft: #565d69;
  --rule: #f0ccda;           /* 헤어라인 — 주석 사이 구획 1곳 */
  --pencil: #d40037;         /* 빨간 펜 (Lab L44.6 C78.2 h25.3 · 테라코타 아님) — 짚은 자리·링크·한도 초과. 지면 대비 4.65 */
  --pencil-mark: #e5004a;    /* 시그니처 잉크(형제 검사기 대조값 — 본문 16px 에는 대비 4.05 라 쓰지 않는다) */
  --pencil-soft: #ffc9dc;    /* 선택 영역 */
  --approve: #2f6a58;        /* 사장 쪽 — 표제와 주석의 인용 (지면 대비 5.40) */
  --graphite: #545b69;       /* 기계 쪽 표제·보조 글자 */
  --graphite-soft: #e6e6ee;
  --serif: "SG Buri", "AppleMyungjo", "Nanum Myeongjo", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #191319;
    --paper-raised: #221b23;
    --ink: #f0e7ec;
    --ink-soft: #ac9fa8;
    --rule: #3d323b;
    --pencil: #f77e9c;
    --pencil-mark: #ff6d90;
    --pencil-soft: #4a1f30;
    --approve: #7fbfa6;
    --graphite: #aeb0bd;
    --graphite-soft: #2d2b34;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-size: 16px; line-height: 1.56; font-weight: 400;
  word-break: keep-all; overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--pencil-soft); color: var(--ink); }
a { color: var(--pencil); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--pencil); outline-offset: 2px; }

/* ── 종이 한 장: 머리 · 판 · 붙여넣기 · 발치. 판만 늘고 줄며 넘치는 글은 판 안에서만 흐른다(문서 스크롤 0 — tests/e2e_shots.mjs 가 390·1440 에서 잰다). ── */
.wrap {
  height: 100vh; height: 100svh;
  padding: 0 20px;
  display: grid; row-gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "head" "board" "paste" "foot";
}

/* 표제 — 대담함은 여기 한 곳. Light 300 한 줄, 한 낱말 강조 0. */
h1 { grid-area: head; margin: 18px 0 0; font-size: 28px; font-weight: 300; line-height: 1.2; letter-spacing: 0; }

/* ── 판: 왼쪽 = 기계가 쓴 것(붙여넣으면 갈리는 쪽 · 짚은 자리와 주석) · 오른쪽 = 사장이 쓴 것(남는 쪽). ── */
.board {
  grid-area: board; min-height: 0;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "slop hand";
}
.col { margin: 0; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 2px 0 20px; }
.sample { grid-area: slop; padding-right: 32px; border-right: 3px double var(--ink); }
.hand { grid-area: hand; padding-left: 32px; }
.col h2 { margin: 0 0 10px; font-size: 16px; font-weight: 400; }
.sample h2 { color: var(--graphite); }
.hand h2 { color: var(--approve); }
.col p { margin: 0 0 12px; }
/* 기계 원고와 붙여넣은 글만 시스템 고딕 — 활자가 판정의 대조축이다. 주석의 짚은 말(.said)도 같은 꼴이라 본문 표시와 눈으로 이어진다. */
.body { font-family: var(--sans); }
.hit { font-weight: 700; color: var(--pencil); font-family: var(--sans); }

/* 주석 — 기계 원고 바로 아래, 같은 단 안에서 이어진다(표를 다른 장으로 밀지 않는다). 한 줄 = 짚은 말 / 왜 걸리나 / 사장의 문장. */
.result { margin-top: 20px; border-top: 1px solid var(--rule); padding-top: 12px; }
.tally { margin: 0 0 6px; color: var(--ink-soft); }
.notes { list-style: none; margin: 0; padding: 0; }
.notes li { padding: 10px 0; border-bottom: 1px solid var(--rule); }
/* 한 줄 상자 안에 두 서체를 섞지 않는다(§9-2-b line box 균일) — 짚은 말·이유·인용을 각각 제 줄에 둔다. */
.said { display: block; font-weight: 700; color: var(--pencil); font-family: var(--sans); }
.why { display: block; }
.echo { display: block; color: var(--approve); quotes: "「" "」"; }
.echo::before { content: open-quote; }
.echo::after { content: close-quote; }
.fix { display: block; color: var(--ink-soft); }   /* 붙여넣은 글의 주석 셋째 줄 = 엔진 처방문(인용이 아니라 지시) — 인용 부호·사장 쪽 색을 쓰지 않는다 */
.notes .empty { color: var(--ink-soft); }
/* 자사 슬롯 = 주석 끝 한 문장(카드·라벨·점선 자리 0). 방금 읽은 주석에 붙는 말이라 광고가 아니라 메모로 읽힌다. */
.promo-note { margin: 14px 0 0; color: var(--ink-soft); }
.promo-note a { color: var(--pencil); }

/* 폰 전용 넘김 표시 — 판 바닥에 붙어(sticky) 「아래에 사장 원고가 더 있다」를 말한다. 판 끝에 닿으면 app.js 가 숨긴다. 1440 에서는 두 단이 다 보이므로 없다. */
.turn { display: none; }

/* ── 붙여넣기 칸: 판 아래 전폭, 위에 이중 괘선. 1440 에서는 칸과 버튼이 한 줄. ── */
.paste {
  grid-area: paste; border-top: 3px double var(--ink); padding-top: 12px;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "ta" "acts"; row-gap: 8px; column-gap: 16px;
}
.paste-head { grid-area: label; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 12px; color: var(--ink-soft); }
.paste-head .count { margin-left: auto; white-space: nowrap; }
.paste label { display: block; }
.paste textarea {
  grid-area: ta; display: block; width: 100%; min-height: 64px; resize: vertical;
  background: var(--paper-raised); color: var(--ink);
  border: 1px solid var(--ink); border-radius: 0; padding: 8px 12px;
  font: 400 16px/1.56 var(--sans);
}
.paste textarea::placeholder { color: var(--ink-soft); opacity: 1; }
.paste-row { grid-area: acts; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.count { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.count.over { color: var(--pencil); }
.paste button {
  min-height: 44px; padding: 8px 16px; border-radius: 0; cursor: pointer;
  font: 400 16px/1.56 var(--serif); word-break: keep-all;
}
.run { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
.back { background: transparent; color: var(--ink); border: 1px solid var(--ink); }

/* ── 발치: 왼쪽 자소서 경로 · 오른쪽 「검사 범위」 펼침(2026-10-20 말투 교정 전 「하는 일과 안 하는 일」)(펼쳐도 문서 높이가 늘지 않게 위로 띄운다). ── */
footer {
  grid-area: foot; position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--rule); padding-bottom: 4px;
}
footer a, .about summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-soft); white-space: nowrap; }
.about summary { cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.about summary::-webkit-details-marker { display: none; }
.about .pop {
  position: absolute; right: 0; bottom: 100%; z-index: 1;
  width: min(34rem, calc(100vw - 40px));
  background: var(--paper-raised); border: 1px solid var(--ink); padding: 12px 14px 10px;
}
.pop p { margin: 0 0 8px; }
.paired { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.paired a { color: var(--ink); white-space: normal; }

@media (min-width: 900px) {
  .wrap { padding: 0 32px; row-gap: 14px; }
  h1 { margin-top: 24px; font-size: 51px; line-height: 1.12; }
  .paste { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label label" "ta acts"; align-items: start; }
  .paste-row { align-self: center; }
}

@media (max-width: 899px) {
  /* 폰에서는 두 단을 좌우로 세울 수 없다(390px 에 16px 두 단 = 한 줄 11자). 판 한 장이 위→아래로 흐른다 —
     순서는 1440 의 좌→우 그대로(기계가 쓴 것 → 사장이 쓴 것). 문서는 그대로 서 있고 판 안에서만 움직인다. */
  /* 판 안 차례(2026-10-20 독립 판정 ①): 기계 원고 → **사장 원고** → 주석. 사장 원고가 기계 원고 바로 뒤에 와서 「두 벌」이 폰에서도 이어지고,
     기계 원고가 짧으면(붙여넣은 글) 첫 화면에 두 벌이 같이 선다. .sample 을 display:contents 로 풀어 자식을 판의 격자 항목으로 둔다. */
  .board { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: none; align-content: start; overflow: auto; overscroll-behavior: contain; min-height: 0; }
  .sample { display: contents; }
  /* 격자 이름(slop/hand)은 1440 전용 — 폰에서 남아 있으면 암시적 트랙을 만들어 배치가 깨진다. 전부 auto 로 풀고 order 로만 차례를 정한다. */
  .sample, .hand, .body, .result, .turn, .sample h2 { grid-area: auto; }
  /* min-height:0 은 1440 의 스크롤 단 전용 — 폰에서 그대로 두면 격자 행이 내용 0 으로 계산돼 사장 원고가 다음 행(주석) 밑으로 겹친다(2026-10-20 R2 실측). */
  .col { overflow: visible; padding: 0; min-height: auto; }
  .sample h2 { order: 1; } .body { order: 2; }
  .hand { order: 3; padding-left: 0; margin-top: 20px; padding-top: 20px; border-top: 3px double var(--ink); }
  .result { order: 4; margin-top: 20px; }
  .turn { order: 5; display: block; position: sticky; bottom: 0; margin: 8px 0 0; padding: 6px 0 2px; background: var(--paper); color: var(--ink-soft); border-top: 1px solid var(--rule); }
  .turn.end { display: none; }
  .about .pop { width: min(34rem, calc(100vw - 32px)); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  .wrap { height: auto; display: block; }
  .board { display: grid; }
  .col { overflow: visible; }
  .paste, .about { display: none; }
  body { background: #fff; color: #000; }
  .sample { border-right: 3px double #000; }
  .result { break-inside: avoid; }
}