/* 리뷰 할인 계산기 — 스테인리스 계산대 위 분홍 카드 전표 한 장.
   토큰 정본 = han/디자인/DESIGN_ReviewDiscountCalc.md · 예약 행 = han/디자인/_값예약.md (2026-10-27 19:1x · 20:0x 갱신).
   강조(--dojang)는 채움 전용 — 글자색·선색으로 쓰지 않는다. */
/* 면 토큰: --chit */
@font-face {
  /* Orbit — SIL OFL 1.1 (fonts/OFL-Orbit.txt · 출처 fonts/출처.txt) · KS X 1001 2,350자 서브셋. 표제·판정 숫자 전용. */
  font-family: "RDC Orbit";
  src: url("fonts/Orbit-ksx1001.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  /* 띄어쓰기(U+20)·쉼표(U+2C)는 뺀다 — Orbit 의 두 글리프가 고정폭이라 「리뷰  할인」「3, 060」처럼 벌어져 읽힘. 두 글자만 시스템 서체로 떨어진다. */
  unicode-range: U+21-2B, U+2D-7E, U+B7, U+2014, U+2026, U+2212, U+AC00-D7A3;
}
:root {
  --steel: #9fb7c4;     /* 지면 — 스테인리스 계산대 */
  --chit: #f5d7ca;      /* 면 — 분홍 카드 전표지 */
  --dojang: #a0306e;    /* 강조 — 자홍 도장(채움 전용) */
  --ink: #1f1b1d;       /* 전표 위 먹 */
  --ink-soft: #4d4246;  /* 전표 보조 글자 */
  --steel-ink: #14232b; /* 계산대 위 글자 */
  --rule: #1f1b1d;
  --loss: #8ea6b3;      /* 차트 손해 구역(계산대 그늘) */
  --display: "RDC Orbit", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; line-height: 1.53; }
body {
  background: var(--steel);
  color: var(--steel-ink);
  font: 400 16px/1.53 "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  word-break: keep-all;           /* 한글 어절 중간 끊김 0(게이트 R1 #1) — 줄바꿈은 띄어쓰기에서만 */
  overflow-wrap: break-word;      /* 한 어절이 칸보다 길 때만 마지막 수단 */
  -webkit-text-size-adjust: 100%;
}
a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--steel-ink); outline-offset: 2px; }
[hidden] { display: none !important; }

.till {
  max-width: 1400px; margin: 0 auto; padding: 12px 20px 8px;
  min-height: 100vh; display: flex; flex-direction: column; gap: 10px;
}

/* ── 머리 ── */
.top { display: flex; align-items: center; gap: 18px; }
h1 { margin: 0; font: 400 28px/1.15 var(--display); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
h1 .sub { font: 400 16px/1.4 "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; }
.tabs { display: flex; margin-left: auto; border: 2px solid var(--steel-ink); }
.tabs button {
  font: inherit; font-weight: 600; min-height: 44px; padding: 0 18px; border: 0; border-radius: 0;
  background: transparent; color: var(--steel-ink); cursor: pointer;
}
.tabs button + button { border-left: 2px solid var(--steel-ink); }
.tabs button[aria-selected="true"] { background: var(--steel-ink); color: var(--steel); }
.open-inputs { display: none; }

/* ── 책상(1440): 입력 2열 · 판정(차트) · 전표 · 합계 ── */
.desk {
  flex: 1; display: grid; gap: 16px 20px; align-content: start;
  grid-template-columns: 330px 320px 300px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "a b chart chart" "a sums slip copy";
}
/* 1440: 폼·합계 상자를 격자에 풀어(display: contents) 입력 2열 높이를 맞춘다 — 가운데 열 아래 = 합계 3칸(게이트 재판정 R1 ②) */
.inputs { display: contents; }
.colA { grid-area: a; } .colB { grid-area: b; }
.sheet-copy { display: none; }
.sheet-head { display: none; }
.colA, .colB { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.verdict { grid-area: chart; min-width: 0; }
.slip { grid-area: slip; }
.sums-box { display: contents; }
.sums { grid-area: sums; align-self: start; border-top: 2px solid var(--steel-ink); padding-top: 6px; }
.copybox { grid-area: copy; min-width: 0; }

.grp { margin: 0; padding: 4px 0 2px; border: 0; border-top: 2px solid var(--steel-ink); min-width: 0; }
.grp legend { padding: 0 6px 0 0; font-weight: 800; font-size: 16px; }
.grp legend small { font-weight: 400; font-size: 16px; }
.row { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.row label { flex: 1; min-width: 0; font-size: 16px; }
.tiers { display: flex; column-gap: 10px; }
.tiers .row { flex: 1 1 0; flex-direction: column; align-items: stretch; gap: 0; }
.slide { flex-wrap: wrap; row-gap: 0; }
.slide label { flex: 0 0 100%; }
.slide input[type=range] { flex: 1; min-width: 0; accent-color: var(--steel-ink); height: 44px; margin: 0; }
.unit { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; }
.unit input {
  width: 6.2em; font: inherit; font-weight: 600; text-align: right; padding: 4px 6px; min-height: 44px;
  border: 0; border-bottom: 2px solid var(--steel-ink); border-radius: 0; background: rgba(255, 255, 255, 0.35); color: var(--steel-ink);
}
.tiers .unit input { width: 100%; }
.seg { display: flex; flex-wrap: wrap; margin: 2px 0; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 2px solid var(--steel-ink); font-size: 16px; }
.seg label + label span { border-left: 0; }
.seg input:checked + span { background: var(--steel-ink); color: var(--steel); font-weight: 800; }
.seg input:focus-visible + span { outline: 3px solid var(--steel-ink); outline-offset: 2px; }
.tog { display: flex; gap: 8px; align-items: center; min-height: 44px; font-size: 16px; cursor: pointer; }
.tog input { width: 20px; height: 20px; accent-color: var(--steel-ink); flex: none; }
.tog:has(input:checked) span { font-weight: 600; }
.assume summary { cursor: pointer; font-weight: 800; min-height: 44px; display: flex; align-items: center; font-size: 16px; }
.ref { margin: 2px 0 0; font-size: 16px; line-height: 1.4; padding-left: 8px; border-left: 3px solid var(--steel-ink); }

/* ── 전표(면 1곳) — 톱니 가장자리가 시그니처 기하 ── */
.slip { background: var(--chit); color: var(--ink); padding: 14px 16px 22px; position: relative; align-self: start; }
.slip::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10'%3E%3Cpath d='M0 0h14L7 10z' fill='%23f5d7ca'/%3E%3C/svg%3E") 0 0 / 14px 10px repeat-x;
}
.slip h2 { margin: 0 0 6px; font-size: 16px; font-weight: 800; border-bottom: 1px dashed var(--rule); padding-bottom: 4px; }
.lines { list-style: none; margin: 0; padding: 0; }
.lines li { display: flex; justify-content: space-between; gap: 10px; font-size: 16px; line-height: 1.6; }
.lines li span { color: var(--ink-soft); }
.lines li b { font-weight: 600; white-space: nowrap; }
.lines li.void { color: var(--ink-soft); }
.lines li.hot span { color: var(--ink); font-weight: 800; }
.lines li.hot b { background: var(--dojang); color: var(--chit); padding: 0 6px; font-weight: 800; }
.total { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0 0; padding-top: 6px; border-top: 2px solid var(--rule); }
.total span { font-weight: 800; }
.total b { font: 400 28px/1.2 var(--display); white-space: nowrap; }
.slip.neg .total b::before { content: "손해 "; font-size: 16px; }
.then { margin: 2px 0 0; font-size: 16px; color: var(--ink-soft); }

/* ── 판정 ── */
.ex { display: inline-block; margin: 0 0 4px; font-size: 16px; border: 1px solid var(--steel-ink); padding: 0 6px; }
.vh { margin: 0; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; font-size: 19px; font-weight: 600; }
.vh b { font: 400 33px/1.2 var(--display); white-space: nowrap; }
body[data-verdict="gain"] .vh b, body[data-verdict="loss"] .vh b, body[data-verdict="loss_each"] .vh b, body[data-verdict="base_loss"] .vh b { background: var(--dojang); color: var(--chit); padding: 0 10px; }
.vline { margin: 2px 0 4px; font-weight: 600; font-size: 16px; }
.chart { margin: 0; }
.chart svg { display: block; width: 100%; height: auto; max-height: 300px; }
.chart figcaption { font-size: 16px; }
.c-loss { fill: var(--loss); }
.c-grid { stroke: var(--steel-ink); stroke-opacity: 0.18; stroke-width: 1; }
.c-zero { stroke: var(--steel-ink); stroke-width: 2; }
.c-line { stroke: var(--steel-ink); stroke-width: 3; }
.c-line.c-now { stroke-width: 2; stroke-dasharray: 6 5; }
.c-cross { stroke: var(--steel-ink); stroke-width: 2; }
.c-mark { fill: var(--dojang); stroke: var(--chit); stroke-width: 2; }
.c-tick, .c-tag, .c-crosslabel { fill: var(--steel-ink); font-size: 14px; }
.c-crosslabel, .c-tag { font-weight: 800; }
.sums { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.sums div { min-width: 0; }
.sums dt { font-size: 16px; }
.sums dd { margin: 0; font-size: 19px; font-weight: 800; }
.copybox { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.copytext { margin: 0; font: 400 16px/1.45 "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; white-space: pre-wrap; padding-left: 8px; border-left: 3px solid var(--steel-ink); }
.grab, .open-inputs, .close {
  font: inherit; font-weight: 800; min-height: 44px; padding: 0 16px; border: 2px solid var(--steel-ink); border-radius: 0;
  background: var(--steel-ink); color: var(--steel); cursor: pointer;
}
.grab:disabled { opacity: 0.5; cursor: default; }

/* ── 꼬리 ── */
.foot { display: flex; flex-wrap: wrap; gap: 0 18px; align-items: baseline; font-size: 14px; border-top: 2px solid var(--steel-ink); padding-top: 4px; }
.foot p { margin: 0; }
.foot .promo { font-weight: 800; }
.colophon summary { cursor: pointer; min-height: 44px; line-height: 44px; }   /* list-item 유지(▶ 표지) + 높이 44 */
.colophon p { margin: 4px 0; max-width: 70ch; }

/* ── 중간 폭 ── */
@media (max-width: 1180px) and (min-width: 721px) {
  .desk { grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto; grid-template-areas: "chart chart" "sums slip" "copy slip" "a b"; }
}

/* ── 좁은 화면(폰): 첫 화면 = 판정 + 전표, 입력판은 덮개 ── */
@media (max-width: 720px) {
  .till { padding: 8px 16px 6px; gap: 8px; }
  .top { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 8px; }
  .top h1 { flex-direction: column; align-items: flex-start; gap: 0; font-size: 23px; }
  .tabs { margin-left: 0; grid-column: 1 / -1; }
  .tabs button { flex: 1; padding: 0 6px; }
  .desk { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "chart" "slip"; gap: 8px; }
  .sums-box, .sums, .copybox { display: none; }
  .inputs { display: grid; }
  .colA, .colB { grid-area: auto; }
  html.js body.sheet-open .sheet-copy { display: block; margin-top: 10px; }
  .ex { margin: 0 0 2px; }
  .vh { font-size: 16px; gap: 10px; }
  .vh b { font-size: 28px; }
  .chart svg { max-height: 172px; }
  .chart figcaption { font-size: 14px; }
  .c-tick, .c-tag, .c-crosslabel { font-size: 25px; }
  .slip { padding: 8px 14px 16px; }
  .slip h2 { margin-bottom: 2px; }
  .lines li { line-height: 1.5; }
  .total { margin-top: 4px; padding-top: 4px; }
  .total b { font-size: 23px; }
  .then { font-size: 14px; }
  .foot { gap: 0 10px; font-size: 14px; line-height: 1.4; }
  .foot .mark { display: none; }
  html.js .open-inputs { display: inline-flex; align-items: center; grid-column: 2; grid-row: 1; }
  html.js .inputs { display: none; }
  .inputs { grid-template-columns: minmax(0, 1fr); }
  html.js body.sheet-open .inputs {
    display: grid; position: fixed; inset: 0; z-index: 10; overflow-y: auto; overscroll-behavior: contain;
    background: var(--steel); padding: 12px 16px 24px; align-content: start;
  }
  html.js body.sheet-open .sheet-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
  .sheet-head b { font-weight: 800; }
  html.js body.sheet-open .close { display: inline-flex; align-items: center; margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print { .open-inputs, .grab, .tabs { display: none; } }