/* 리스팅폴리시 v2 — 크라프트 박스 옆면에 유성 매직으로 쓴 상품명.
   이름이 바뀌면 줄을 긋고 옆에 다시 쓴다 — 이 도구의 동작과 같은 실물(DESIGN.md 0패스).
   단일면(면 == 지면, 카드 0) · 0 radius + 2px 잉크 괘선 · 그림자 0 · 웨이트 300/500/900 · 스케일 1.25/19(15/19/24/30/37 — 1.25/17 은 11호와 겹쳐 비킴, 2026-09-11;
   46 단은 v2.1 에서 미사용: 머리명사 인라인 확대가 첫 줄 행간을 부풀려 독립 게이트 지문 3) · 행간 1.46 · 자간 0.
   유채 1병(녹 153°) — 상태(빠진 말/남는 말/보고 정할 말)는 색이 아니라 굵기·관통선·점선으로.
   무용 장치 = 비웠을 때 플레이스홀더 4종 순환(app.js) — 테이프 조각 .tape 는 정렬 실수로 읽혀 폐기(독립 게이트 2026-09-11 지문 4). 회전 요소 0. */

:root {
  --paper:     #B8A78B;  /* 지면 60% — 크라프트 박스 옆면 (L 69.2 · C 16.8 · h 84) */
  --tag:       #B8A78B;  /* 면 = 지면(단일면). 형제 검사기 로스터 호환용 선언 — 값은 --paper 와 같다 */
  /* 면 토큰: --tag */   /* ← 고정 형식 선언(산문 아님). 형제 검사기가 「면(카드)」 키를 이 줄에서 읽는다. */
  --ink:       #1F1A14;  /* 본문 30% — 유성 매직 검정. 줄 긋기 관통선 색 */
  --ink-soft:  #3F362C;  /* 보조 본문·이유 문장 */
  --ink-faint: #45392B;  /* 캡션·글자수·빠진 말의 글자색 */
  --rule:      #8C7D66;  /* 2px 괘선(비텍스트) · 점선 밑줄(보고 정할 말) */
  --seal:      #0B3D22;  /* 강조 10% — 남는 말에 찍히는 초록: 버튼 채움·링크·복사 버튼 윤곽 (L 22.1 · C 26.8 · h 153) */
  --flag:      #0B3D22;  /* 머리 상품명 밑선. 값은 --seal 과 같다 — 잉크 1병 */
  --sans: "Pretendard", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:     #1C1710;
    --tag:       #1C1710;
    --ink:       #E6D9C4;
    --ink-soft:  #C9B99F;
    --ink-faint: #B3A389;
    --rule:      #4A3F31;
    --seal:      #7FCF9E;
    --flag:      #7FCF9E;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.46;
  letter-spacing: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--seal); text-underline-offset: 3px; }
/* 열은 가운데 정렬 65ch 로 되돌린다(2차의 왼쪽 정렬 + padding-left:64 폐지).
   근거: 재판정 2026-09-11 지문 4·판단 2ⓐ — 왼쪽 정렬은 **지표를 맞추려 한 레이아웃 변경**이었고 기각됐다. 전체 프레임 pHash 는 열 위치가 지배해(같은 페이지끼리 32/63) 골격 대리로 쓸 수 없고,
   위치 불변 pHash(내용 바운딩 크롭)로 재면 원복 상태가 이미 UD 대비 34/63 ≥ 26 이라 지문 7 은 CSS 변경 없이 종결된다. 실증: 블라인드 6회 중 4회가 빈 오른쪽 절반을 「가운데 정렬 없음·검수 안 된 티」로 인용.
   공방작업_표준 절 13(지표를 맞추려 설계를 바꾸지 않는다) 사례. */
.wrap { max-width: 65ch; margin: 0 auto; padding: 32px 16px 64px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 머리: 이름표 + h1. DOM 은 h1 이 먼저(킥커 아님), 화면은 이름표가 위 ── */
.top { display: flex; flex-direction: column-reverse; margin-bottom: 24px; }
.brand { font-size: 15px; font-weight: 500; color: var(--ink-soft); padding: 8px 0 0; }
h1 { font-size: 37px; font-weight: 900; line-height: 1.2; margin: 8px 0 0; }

/* ── 입력 ── */
textarea, input[type="text"] {
  display: block; width: 100%; margin: 0;
  font-family: var(--sans); font-size: 19px; font-weight: 500; line-height: 1.46;
  color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink); border-radius: 0; padding: 16px;
  word-break: keep-all;
}
textarea { resize: vertical; min-height: 118px; field-sizing: content; }   /* field-sizing: 지원 브라우저는 내용만큼 자란다(폰에서 4줄 상품명이 잘리지 않게) */
textarea:focus, input[type="text"]:focus { outline: 2px solid var(--seal); outline-offset: 2px; border-color: var(--seal); }
::placeholder { color: var(--ink-faint); opacity: 1; font-weight: 300; }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 16px; }
.count { font-size: 15px; color: var(--ink-faint); }
.count.over { color: var(--ink); font-weight: 900; }

button {
  font-family: var(--sans); font-size: 19px; font-weight: 500; line-height: 1.46;
  border-radius: 0; cursor: pointer; letter-spacing: 0;
}
button:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }
.primary { background: var(--seal); color: var(--paper); border: 2px solid var(--seal); padding: 16px 24px; margin-left: auto; }
.copy { background: transparent; color: var(--seal); border: 2px solid var(--seal); padding: 8px 16px; }

.aux { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.aux label { display: block; font-size: 15px; color: var(--ink-soft); }
.aux input { margin-top: 8px; padding: 8px 16px; }
@media (max-width: 640px) { .aux { grid-template-columns: 1fr; } }

/* ── 결과: 매직으로 그은 선 아래, 줄 그은 원문 → 다시 쓴 이름 ── */
.result { margin-top: 32px; padding-top: 24px; border-top: 2px solid var(--ink); }
.tally { margin: 0 0 16px; font-size: 19px; font-weight: 500; }
.tally .hint { font-size: 15px; color: var(--ink-soft); }   /* 토글 발견 단서 — 첫 뷰포트 설명 문장 1개(허용 상한) */
.draft { margin: 0 0 24px; font-size: 24px; line-height: 1.7; }
/* 낱말 토글 — 시그니처 = 동작. 빠진 말은 색이 아니라 형태(관통선 + 300 + faint) */
.w { display: inline; padding: 0; margin: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-weight: 500; }
.draft del { text-decoration-line: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--ink); font-weight: 300; color: var(--ink-faint); }
.w.ask { text-decoration-line: underline; text-decoration-style: dotted; text-decoration-thickness: 2px; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.w:hover { outline: 2px solid var(--rule); outline-offset: 1px; }
.remain { margin: 0; font-size: 30px; font-weight: 500; line-height: 1.15; }
/* 머리명사 = 굵기(900)와 밑선만. 크기는 수식어와 같다 — 인라인 확대는 첫 줄 line box 만 부풀려 둘째 줄과 리듬이 어긋난다(독립 게이트 2026-09-11 지문 3, §9-2-b ③) */
.remain .head { font-weight: 900; border-bottom: 3px solid var(--flag); }
.remain .empty { font-size: 19px; color: var(--ink-soft); }
.remain.settle { animation: settle 180ms ease-out; }
@keyframes settle { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .remain.settle { animation: none; } }
.proof { font-size: 15px; color: var(--ink-soft); }

/* ── 절: 왜 빠지나 · 태그 ── */
h2 { font-size: 24px; font-weight: 900; line-height: 1.2; margin: 48px 0 16px; padding-top: 24px; border-top: 2px solid var(--rule); }
.reasons { list-style: none; margin: 0; padding: 0; }
.reasons li { margin: 0 0 16px; color: var(--ink-soft); }
.reasons .src { font-size: 15px; white-space: nowrap; }
.taglist { margin: 0 0 16px; font-size: 19px; font-weight: 900; }
.taglist.none { font-weight: 500; color: var(--ink-soft); }

/* ── 바닥 ── */
footer { margin-top: 64px; padding-top: 24px; border-top: 2px solid var(--rule); }
.promos a { display: block; margin: 0 0 8px; }   /* 자사 2줄 — 착지처가 ?src= 를 집계할 때 게시(현재 미게시, app.js LEAD_URLS 참조) */
.ad { margin: 24px 0 0; }
.ad .adlabel { display: block; font-size: 15px; color: var(--ink-faint); margin-bottom: 8px; }
.told { margin: 24px 0 16px; font-size: 15px; color: var(--ink-soft); }
.shop { margin: 0; font-size: 15px; color: var(--ink-faint); }

@media (max-width: 480px) {
  .wrap { padding-top: 24px; }
  textarea { min-height: 160px; }
  .draft { font-size: 19px; }
  .remain { font-size: 24px; }
  .primary { margin-left: 0; width: 100%; }
}