/* 슬롭게이트 — 두 벌 대조판(2026-09-11 재디자인).
   얼굴: 같은 안내문을 사람과 기계가 한 벌씩 쓴 것을 **나란히 놓은 조판면**이 첫 화면 전부다.
         사진·SVG·생성 이미지 0 — 전부 HTML 텍스트의 자체 조판(매체 지배 방식 ⓒ).
   활자: 혼종 — 왼쪽(사람)은 명조 500, 오른쪽(기계)은 고딕 400. 활자 자체가 판정의 대조축이다.
   radius 문법: 0 + 3px 이중 괘선(두 단 사이·붙여넣기 칸 위). 둥근 모서리 0.
   시그니처: 레이아웃 구조 — 왼쪽 원고는 붙여넣어도 화면에서 떠나지 않는다. 짚은 자리는 굵기 대비(.hit 700)로만 표시한다.
   색은 2026-09-10 형제 전 쌍 검사를 통과한 값 그대로다(이번 회차는 색을 옮기지 않는다).
   검사: tests/series_check.mjs · tests/design_check.mjs · tests/scan.mjs · tests/prerender.mjs */

:root {
  --paper: #ffe7f0;          /* 지면 — 붉은 기 밴 블러시 갱지 (Lab L93.8 C9.8 h351.9 · b*−1.4 쿨) */
  --paper-raised: #ffecf3;   /* 그 위에 올린 한 장 (#FFF 아님 — 백지 대비 dE 9.13) */
  /* 면 토큰: --paper-raised */   /* ← 고정 형식 선언(산문 아님). 형제 검사기가 「면(카드)」 키를
        이 줄에서 읽는다. RLP 면 키를 레일 홈(--stage-rail)으로 오인한 사고가 3라운드를
        생존한 원인이 산문 설명에 헛맞춘 것이라, 선언을 기계가 읽는 형태로 승격했다.
        선언이 없으면 검사기가 EXIT=1 (누락을 침묵시키지 않는다). */
  --ink: #1b1e24;            /* 쿨 근흑 잉크 — 괘선도 이 색이라 채도 0에서도 골격이 남는다 */
  --ink-soft: #565d69;
  --ink-faint: #6b7383;
  --rule: #f0ccda;           /* 헤어라인 — 표 안쪽 칸 경계 */
  --pencil: #d40037;         /* 강조 (Lab L44.6 C78.2 h25.3 · 테라코타(h≈40~50) 아님) */
  --pencil-mark: #e5004a;    /* 짚은 자리의 잉크 */
  --pencil-soft: #ffc9dc;    /* 선택 영역 */
  --approve: #2f6a58;        /* 사람 쪽 표제 */
  --graphite: #545b69;       /* 표 머리글 */
  --graphite-soft: #e6e6ee;  /* 표 머리글 띠 */
  --serif: "Iowan Old Style", "Apple Garamond", Georgia, "Nanum Myeongjo", "AppleMyungjo", serif;
  --sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", sans-serif;
  --mono: "SF Mono", ui-monospace, "D2Coding", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #191319;
    --paper-raised: #221b23;
    --ink: #f0e7ec;
    --ink-soft: #ac9fa8;
    --ink-faint: #7d7178;
    --rule: #3d323b;
    --pencil: #f77e9c;
    --pencil-mark: #ff6d90;
    --pencil-soft: #4a1f30;
    --approve: #7fbfa6;
    --graphite: #aeb0bd;
    --graphite-soft: #2d2b34;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.45; 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: 2px; }
:focus-visible { outline: 3px solid var(--pencil); outline-offset: 2px; }

.wrap { max-width: 76rem; margin: 0 auto; padding: 0 20px 72px; }

/* 헤더 줄 없음 — 첫 화면은 표제와 대조판뿐이다(제품 이름은 <title> 과 푸터 콜로폰에 있다).
   2026-09-11 본사 조율자 실측 반영: 호평 실물 9종에 띠 스트립 0건 → 자사 슬롯을 표 아래 인라인 캡션으로 옮겼다(.promo-note). */
h1 {
  margin: 26px 0 20px; font-size: 38px; font-weight: 700; line-height: 1.12;
}
h1 em { font-family: var(--serif); font-weight: 500; font-style: normal; }

/* ── 대조판: 1행 = 두 벌, 2행 = 붙여넣기 칸. 첫 화면을 이 판이 채운다. ── */
.board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "hand slop" "paste paste";
  /* 첫 화면을 판이 채우되 **붙여넣기 칸의 버튼까지** 접힘선 위에 오게 잡은 값(1440×900 실측은 tests/e2e_shots.mjs ② 가 매번 재확인한다). */
  min-height: calc(100svh - 140px);
}
.col { margin: 0; padding: 4px 0 30px; min-width: 0; display: flex; flex-direction: column; }
.hand {
  grid-area: hand; font-family: var(--serif); font-weight: 500;
  padding-right: 30px; border-right: 3px double var(--ink);
}
.sample { grid-area: slop; font-family: var(--sans); font-weight: 400; padding-left: 30px; }
.col h2 { margin: 0 0 14px; font-size: 16px; font-weight: 700; font-family: var(--sans); }
.hand h2 { color: var(--approve); }
.sample h2 { color: var(--ink); }
.col p { margin: 0 0 12px; }
.hit { font-weight: 700; color: var(--pencil-mark); }
/* 세는 줄은 **제가 세는 본문 바로 아래**에 붙는다. 종전에는 단 바닥으로 밀어 두 단의 아래끝을 맞췄는데,
   기계 쪽 본문이 짧아 그 사이가 비면서 「한 줄만 덩그러니 떠 있다」로 읽혔다(2026-09-11 독립 게이트 M2 · 판정자 1·3 독립 지적).
   짚은 자리를 세는 줄이 짚은 글에서 떨어지면, 세 자리 한 규칙이라는 이 제품의 주장이 시각에서 끊긴다. */
.tally { margin: 18px 0 0; font-size: 16px; font-weight: 500; color: var(--ink-soft); }

/* ── 붙여넣기 칸: 판의 아래 단 전폭 ── */
.paste { grid-area: paste; align-self: end; border-top: 3px double var(--ink); padding: 16px 0 0; }
.paste label { display: block; font-size: 16px; color: var(--ink-soft); margin-bottom: 8px; }
.paste textarea {
  display: block; width: 100%; resize: vertical; min-height: 88px;
  background: var(--paper-raised); color: var(--ink);
  border: 1px solid var(--ink); border-radius: 0; padding: 12px 14px;
  font: 400 16px/1.45 var(--sans);
}
.paste-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.count { font-family: var(--mono); font-size: 16px; color: var(--ink-soft); }
.count.over { color: var(--pencil); font-weight: 700; }
.paste button {
  min-height: 44px; padding: 10px 18px; border-radius: 0; cursor: pointer;
  font: 700 16px/1.45 var(--sans);
}
.run { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
.back { background: transparent; color: var(--ink); border: 1px solid var(--ink); font-weight: 500; }

/* ── 짚은 자리 표 (첫 화면 밖) ── */
.result { margin-top: 88px; }
.result table { width: 100%; border-collapse: collapse; }
.result caption { text-align: left; font-weight: 700; font-size: 21px; padding-bottom: 12px; }
.result th, .result td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.result th { background: var(--graphite-soft); color: var(--graphite); font-weight: 700; font-size: 16px; }
.result td:first-child { font-weight: 700; }
.result td:last-child { font-family: var(--serif); font-weight: 500; }
.result tbody tr:last-child td { border-bottom: 1px solid var(--ink); }
.empty { color: var(--ink-soft); }

/* 자사 슬롯 = 표 바로 아래 한 문장(카드·라벨·점선 자리 0). 첫 화면 밖이고, 방금 읽은 표에 붙는 말이라 광고가 아니라 주석으로 읽힌다. */
.promo-note { margin: 18px 0 0; font-size: 16px; color: var(--ink-soft); max-width: 62ch; }
.promo-note a { color: var(--pencil); }

footer { margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--rule); }
footer p { margin: 0; font-size: 16px; color: var(--ink-faint); max-width: 62ch; }
/* 형제 도구 — 같은 손이 짠 다른 칸. 대조판과 달리 한 줄로 흘려 쓰고 가운뎃점으로 끊습니다(문장 속 인라인 = U9-b② 예외). */
.paired { margin: 10px 0 0; max-width: 62ch; font-size: 15px; line-height: 1.9; color: var(--ink-faint); }
.paired a { color: var(--ink); }

@media (max-width: 760px) {
  /* 폰에서는 두 단을 좌우로 세울 수 없다(390px 에 16px 두 단 = 한 줄 11자, 못 읽는다) → 위아래로 세운다.
     **순서는 H1 의 질문 순서를 따른다**: 「어느 쪽이 사람이 쓴 안내문일까요」 → 사람 쪽이 먼저다.
     종전에는 기계 쪽을 위로 올렸는데, 폰에서 답이 질문보다 먼저 나와 대조가 헛돌았다
     (2026-09-11 독립 게이트 M1 · 블라인드 3인 전원 독립 지적 · series_check R9 ⓒ 경고와 같은 자리). */
  .board { grid-template-columns: 1fr; grid-template-areas: "hand" "slop" "paste"; min-height: 0; }   /* 왼쪽 단이 위로 — 1280 의 좌→우 읽기 차례를 폰에서 위→아래로 그대로 옮긴다(두 뷰포트 차례 일치) */
  .hand { padding-right: 0; padding-bottom: 22px; border-right: 0; }
  .sample { padding-left: 0; padding-top: 22px; border-top: 3px double var(--ink); }
  h1 { font-size: 28px; }
  .result caption { font-size: 21px; }
  .result th, .result td { padding: 8px 10px; }
}

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

@media print {
  .paste { display: none; }
  body { background: #fff; color: #000; }
  .board { min-height: 0; }
  .hand { border-right: 3px double #000; }
  .result { break-inside: avoid; }
}