/* 리스팅폴리시 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); }
/* 형제 도구 — 옆 매대. 한 줄로 흘려 쓰고 낱말 사이에 쉼표를 둬요(문장 속 인라인 링크 = U9-b② 예외). */
.stall { margin: 12px 0 0; font-size: 15px; line-height: 1.9; color: var(--ink-faint); }
.stall a { color: var(--ink-soft); }

@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%; }
}

/* ── 한 화면 (2026-09-28 대표 지시 「스크롤 없이 한 화면에서」) ──────────────────────────────
   넓은 화면: 왼쪽 = 입력 + 남는 이름(줄 긋기 → 다시 쓴 이름 → 복사), 오른쪽 = 왜 빠지나 / 태그 두 장.
   좁은 화면: 입력 아래 세 장(남는 이름·왜 빠지나·태그) 탭. 카테고리·태그 입력은 접어 둔다.
   바닥(못 잡는 것·만든 이야기·옆 매대)은 바닥 줄 버튼으로 여는 겹창. 페이지는 스크롤되지 않는다. */
.app .wrap { max-width: 1200px; height: 100dvh; padding: 16px 16px 24px; display: flex; flex-direction: column; }
.app .top { margin-bottom: 16px; flex: 0 0 auto; }
.app main {
  flex: 1 1 auto; min-height: 0;
  display: grid; column-gap: 48px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "bench tabs" "result side";
}
.app .bench { grid-area: bench; }
.app .tabs { grid-area: tabs; align-self: end; display: flex; gap: 8px; }
.app .result { grid-area: result; margin-top: 16px; padding-top: 16px; min-height: 0; }
.app .why, .app .tagsec { grid-area: side; min-height: 0; margin-top: 16px; padding-top: 16px; border-top: 2px solid var(--ink); }
.app .why h2, .app .tagsec h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; border: 0; }
.app .pager { grid-area: side; align-self: end; display: flex; align-items: center; gap: 16px; padding: 8px 0 0; background: var(--paper); }
.app .pager[hidden] { display: none; }
.app textarea { field-sizing: fixed; min-height: 0; height: 118px; }
.app #tabResult { display: none; }
.app main[data-tab="tabWhy"] .tagsec, .app main[data-tab="tabTags"] .why, .app main[data-tab="tabResult"] .tagsec { display: none; }
/* 스크립트가 없으면 장 나누기가 없다 — 그때만 이유 칸이 제 안에서 넘친다(페이지는 그대로). 스크립트가 돌면 장으로 나뉘어 넘침 0. */
.app .why { overflow-y: auto; }
.app main[data-tab="tabTags"] .pager { display: none; }
.reasons li.off { display: none; }
.result.dense .draft { font-size: 19px; line-height: 1.46; }
.result.dense .remain { font-size: 24px; }
.result.xdense .draft { font-size: 15px; }
.result.xdense .remain { font-size: 19px; }
/* 마지막 안전판 — 한도를 한참 넘긴 입력(수백 자)이 와도 페이지는 밀리지 않는다(결과 칸 안에서만 넘친다) */
.app .result { overflow-y: auto; }
.tab { background: transparent; color: var(--ink); border: 2px solid var(--rule); padding: 8px 16px; min-height: 48px; }
.tab[aria-selected="true"] { border-color: var(--ink); font-weight: 900; }
.ghost { background: transparent; color: var(--ink); border: 2px solid var(--rule); padding: 8px 16px; min-height: 48px; }
#auxBtn { display: none; }
/* 바닥 글(못 잡는 것·만든 이야기·옆 매대)은 이름표 옆 단추로 여는 겹장 — 첫 화면은 입력·결과만 */
.told-open { font-size: 15px; color: var(--ink-soft); background: transparent; border: 0; border-bottom: 2px solid var(--rule); padding: 8px 0; margin-left: 16px; min-height: 48px; }
.sheet[popover] { margin: auto; max-width: 65ch; max-height: 100dvh; padding: 0 24px 24px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); overflow: auto; }
.sheet::backdrop { background: var(--ink); opacity: .5; }
.sheet footer { margin-top: 0; border-top: 0; }
.sheet-close { margin: 16px 0 0; background: transparent; color: var(--ink); border: 2px solid var(--rule); padding: 8px 16px; min-height: 48px; }
.app .told { margin-top: 0; }

@media (max-width: 720px) {
  .app .wrap { padding: 16px 16px 0; }
  .app .top { margin-bottom: 8px; }
  .app h1 { font-size: 24px; }
  .app main { display: flex; flex-direction: column; }
  .app textarea { height: 118px; min-height: 0; padding: 8px 16px; }
  .app .bench { position: relative; }
  .app .bench .row { margin-top: 8px; gap: 8px; flex-wrap: nowrap; }
  #auxBtn { font-size: 15px; padding: 8px; flex: 0 0 auto; }
  .app .bench .primary { padding: 8px 12px; }
  .app .primary { width: auto; flex: 1 1 auto; padding: 8px 16px; margin-left: 0; min-height: 48px; }
  #auxBtn { display: block; }
  .app .aux { display: none; }
  body.aux-open .aux { display: grid; }
  body.aux-open .tabs, body.aux-open .result, body.aux-open .why, body.aux-open .tagsec, body.aux-open .pager { display: none !important; }
  .app .tabs { margin-top: 8px; align-self: stretch; }
  .app .tab { flex: 1 1 0; padding: 8px 4px; font-size: 15px; }
  .app #tabResult { display: block; }
  .app .result, .app .why, .app .tagsec { flex: 1 1 auto; margin-top: 8px; padding-top: 8px; }
  .app main[data-tab="tabResult"] .why, .app main[data-tab="tabResult"] .tagsec, .app main[data-tab="tabResult"] .pager { display: none; }
  .app main[data-tab="tabWhy"] .result, .app main[data-tab="tabTags"] .result { display: none; }
  .app .tally { margin: 0 0 8px; }
  .app .draft { margin: 0 0 8px; line-height: 1.46; }
  .app .result .row { margin-top: 8px; gap: 8px; }
  .app .result.dense .draft { font-size: 15px; }
  .app .result.dense .remain { font-size: 19px; }
  .app .result.xdense .remain { font-size: 15px; }
  .app .result.xdense .tally .hint { display: none; }
  .app .wrap { padding-bottom: 16px; }
}

@media print {
  .app .wrap { height: auto; display: block; max-width: none; }
  .app main { display: block; }
  .tabs, .pager, .told-open, .sheet-close, #auxBtn, .bench .row button { display: none !important; }
  .app .why, .app .tagsec, .app .result, .reasons li.off { display: block !important; }
  .app .why h2, .app .tagsec h2 { position: static; width: auto; height: auto; clip: auto; margin: 24px 0 8px; }
  .sheet[popover] { display: block; position: static; inset: auto; margin: 24px 0 0; padding: 0; max-width: none; max-height: none; border: 0; border-top: 2px solid var(--rule); overflow: visible; }
}