/* 팔아미터(~/Desktop/micro_research/web/src/app/globals.css) 색·글꼴을 복사해 온 것. 바느질 테마. */
:root {
  color-scheme: light;
  --paper: #e4eaef;
  --sheet: #f8fafb;
  --thread: #1c2640;
  --thread-soft: #4b5670;
  --chalk: #24549f;
  --basting: #b3263f;
  --notice: #ffe9a8;
  --line: rgb(28 38 64 / 0.12);
  --pink: 9px;
  --font-display: 'Hahmlet', serif;
  --font-body: 'IBM Plex Sans KR', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: 100%; }
/* 큰 글씨: 글자 크기는 모두 rem. 아이폰(사파리·앱 WebView)은 OS 글자 크기(Dynamic Type)를 따른다(기본 17px). */
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html { font: -apple-system-body; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--thread);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  word-break: keep-all;
}
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: var(--chalk); }
:focus-visible { outline: 3px solid var(--chalk); outline-offset: 2px; }

.page { max-width: 480px; margin: 0 auto; padding: 8px 16px 64px; }

.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px;
}
.top-title { font-family: var(--font-display); font-size: 1.3125rem; font-weight: 700; }
.top-sub { margin-left: 8px; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; color: var(--thread-soft); }
.top a { font-size: 1rem; font-weight: 500; }
.top-links { display: flex; gap: 14px; white-space: nowrap; }
.ledger-link {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 48px; margin-top: 8px; padding: 0 4px;
  color: var(--thread); font-size: 1rem; text-decoration: none; border-bottom: 1px dashed rgb(28 38 64 / 0.3);
}
.ledger-link strong { font-variant-numeric: tabular-nums; }
.month-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 48px; }
.month-nav strong { font-family: var(--font-display); font-size: 1.25rem; }
.month-nav a:last-child { justify-self: end; }
.section-title { margin-top: 28px; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; }

.tabs { display: flex; gap: 18px; overflow-x: auto; }
.tab {
  display: inline-flex; align-items: center; gap: 6px; min-height: 48px;
  color: var(--thread-soft); font-weight: 500; text-decoration: none; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.tab[aria-current='page'] { color: var(--thread); font-weight: 700; border-bottom: 3px dashed var(--thread); }
.tab-count { font-variant-numeric: tabular-nums; }

/* 지그재그 가위로 자른 천 끝 */
.swatch-shadow { filter: drop-shadow(0 1px 1px rgb(28 38 64 / 0.35)); }
.fabric {
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% 0 / calc(2 * var(--pink)) calc(100% + 1px) repeat-x;
  background: var(--sheet);
  margin-top: 12px;
  padding: 22px 20px 36px;
}

.card { margin-top: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--sheet); }

.money {
  margin-top: 8px; padding: 14px 16px; background: var(--notice); border-radius: 6px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.money-label { font-size: 1rem; font-weight: 500; }
.money-value { font-family: var(--font-display); font-size: 1.6875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.money-sub { font-size: 0.9375rem; color: var(--thread-soft); }

/* 버튼: 팔아미터 solid / dashed(done) / text 세 단계 */
.solid-button, .line-button {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 54px; padding: 10px 16px; border-radius: 6px;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.solid-button { border: 0; background: var(--thread); color: #fff; }
.line-button { border: 2px dashed var(--thread); background: transparent; color: var(--thread); }
.text-button {
  min-height: 44px; border: 0; background: transparent; color: var(--thread-soft);
  font: inherit; font-size: 1rem; text-decoration: underline; cursor: pointer;
}
.buttons { display: grid; gap: 10px; margin-top: 16px; }
.buttons.two { grid-template-columns: 1fr 1fr; }
button:disabled { cursor: not-allowed; opacity: 0.55; }

/* 입력 */
.field { margin-top: 18px; }
.field-label { display: block; margin-bottom: 6px; font-size: 1rem; font-weight: 700; }
.field-hint { margin-top: 4px; font-size: 0.875rem; color: var(--thread-soft); }
.field input[type='text'], .field input[type='tel'], .field input[type='number'],
.field input[type='date'], .field input[type='password'] {
  width: 100%; min-height: 54px; padding: 0 14px;
  border: 1px solid rgb(28 38 64 / 0.32); border-radius: 6px; background: #fff;
  color: var(--thread); font: inherit; font-size: 1.25rem;
}
.field input[type='number'] { appearance: textfield; }
.field input::-webkit-inner-spin-button, .field input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip {
  min-height: 40px; padding: 4px 14px; border: 1px solid rgb(28 38 64 / 0.32); border-radius: 20px;
  background: #fff; color: var(--thread); font: inherit; font-size: 1rem; cursor: pointer;
}
.chip[aria-pressed='true'] { background: var(--thread); color: #fff; border-color: var(--thread); }
.segment { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.segment .chip { min-height: 50px; border-radius: 6px; font-size: 1.125rem; }
.photo-pick {
  display: flex; align-items: center; justify-content: center; min-height: 120px;
  border: 2px dashed rgb(28 38 64 / 0.4); border-radius: 8px; background: #fff;
  color: var(--thread-soft); cursor: pointer; overflow: hidden;
}
.photo-pick img { width: 100%; max-height: 260px; object-fit: cover; display: block; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* 목록 한 줄 */
.rows { margin-top: 8px; }
.row { padding: 14px 0; border-bottom: 1px solid var(--line); }
.row-main { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.row-no { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.row-item { font-weight: 500; }
.row-price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-meta { margin-top: 2px; font-size: 0.9375rem; color: var(--thread-soft); }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.row-actions .solid-button, .row-actions .line-button { width: auto; min-height: 44px; padding: 6px 14px; font-size: 1rem; }
.late { color: var(--basting); font-weight: 700; }
.tag { display: inline-block; padding: 0 8px; border-radius: 4px; font-size: 0.875rem; font-weight: 700; }
.tag-unpaid { background: var(--notice); }
.tag-paid { background: #e3ebf6; color: var(--chalk); }
.empty { margin-top: 32px; text-align: center; color: var(--thread-soft); }

/* 손님 보관증 */
.ticket-shop { font-size: 1rem; font-weight: 500; }
.ticket-no { margin-top: 18px; font-family: var(--font-display); font-size: 2.75rem; line-height: 1.1; font-weight: 700; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.ticket-no-label { font-size: 0.875rem; color: var(--thread-soft); }
.ticket-item { margin-top: 14px; font-family: var(--font-display); font-size: 1.625rem; font-weight: 700; line-height: 1.35; }
.ticket-photo { width: 100%; margin-top: 14px; border-radius: 6px; display: block; max-height: 280px; object-fit: cover; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 20px; }
.step { padding-top: 8px; border-top: 3px dotted rgb(28 38 64 / 0.3); font-size: 0.9375rem; color: var(--thread-soft); }
.step.is-done { border-top: 3px solid var(--thread); color: var(--thread); }
.step.is-now { border-top: 3px dashed var(--thread); color: var(--thread); font-weight: 700; }
.ticket-status { margin-top: 16px; font-size: 1.3125rem; font-weight: 700; }
.ticket-status.ready { color: var(--basting); }
.facts { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 6px 12px; margin-top: 16px; }
.facts dt { color: var(--thread-soft); }
.facts dd { font-weight: 500; }
.note { margin-top: 18px; font-size: 0.9375rem; color: var(--thread-soft); }

.qr { display: flex; justify-content: center; margin-top: 16px; }
.qr svg { width: 220px; height: 220px; background: #fff; padding: 8px; border-radius: 6px; }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  max-width: 440px; width: calc(100% - 32px); padding: 14px 16px; border-radius: 8px;
  background: var(--thread); color: #fff; font-weight: 500; text-align: center;
}

/* ── 인수증·위변조 방지 (2단계) ── */
.qty { display: grid; grid-template-columns: 54px 1fr 54px; gap: 8px; }
.qty .chip { min-height: 54px; border-radius: 6px; font-size: 1.375rem; }
.qty input { text-align: center; }
.two-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mini-field { display: flex; flex-direction: column; gap: 4px; }
.mini-field .field-hint { margin: 0; }
details.more { margin-top: 18px; }
details.more summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; cursor: pointer; color: var(--chalk); }
.field select, .field textarea {
  width: 100%; border: 1px solid rgb(28 38 64 / 0.32); border-radius: 6px; background: #fff;
  color: var(--thread); font: inherit; font-size: 1.125rem;
}
.field select { min-height: 54px; padding: 0 12px; }
.field textarea { padding: 10px 12px; line-height: 1.5; resize: vertical; }
.buttons.two a, .buttons.two button { width: 100%; }

.cam-guide { margin-top: 4px; padding: 12px 14px; background: var(--notice); border-radius: 6px; font-size: 1rem; line-height: 1.5; }
.cam { position: relative; margin-top: 12px; aspect-ratio: 3 / 4; max-height: 60vh; background: #0f1524; border-radius: 8px; overflow: hidden; }
.cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; color: #fff; text-align: center; font-size: 1rem; }
.shutter { min-height: 64px; font-size: 1.25rem; }

.thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.thumb .row-meta { margin-top: 4px; font-size: 0.8125rem; }
.thumb .row-actions { margin-top: 4px; gap: 4px; }
.thumb .row-actions .line-button { min-height: 40px; padding: 4px 10px; font-size: 0.875rem; }
.thumb .row-actions .text-button { min-height: 40px; font-size: 0.875rem; }
.shot-frame { position: relative; line-height: 0; border-radius: 6px; overflow: hidden; background: #fff; }
.shot-frame img { width: 100%; display: block; }
.marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.marks ellipse { fill: none; stroke: var(--basting); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-width: 3px; }
.is-excluded .shot-frame { opacity: 0.35; }

.evidence { margin-top: 24px; padding-top: 4px; border-top: 2px dashed rgb(28 38 64 / 0.25); }
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.shot { margin: 0; }
.shot figcaption { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; margin-top: 4px; font-size: 0.8125rem; line-height: 1.4; }
.shot-n { font-weight: 700; }
.shot-memo { font-weight: 500; color: var(--basting); }
.shot-meta { color: var(--thread-soft); }
.shot-dl { font-size: 0.875rem; }
.hash { display: inline; }
.hash summary { display: inline; cursor: pointer; font-family: ui-monospace, Menlo, monospace; text-decoration: underline dotted; list-style: none; }
.hash summary::-webkit-details-marker { display: none; }
.hash code { display: block; word-break: break-all; font-size: 0.6875rem; }
.sig { margin-top: 12px; }
.sig img { width: 160px; max-width: 50%; border: 1px solid var(--line); border-radius: 6px; background: #fff; display: block; }
.evidence .line-button { margin-top: 12px; }
.qty-tag { font-family: var(--font-body); font-size: 1rem; font-weight: 500; color: var(--thread-soft); }
.facts dd { word-break: break-word; }

dialog.sheet {
  width: 100%; max-width: 480px; margin: auto auto 0; padding: 20px 16px 16px; border: 0; border-radius: 14px 14px 0 0;
  background: var(--sheet); color: var(--thread);
}
dialog.sheet::backdrop { background: rgb(28 38 64 / 0.5); }
.sheet-title { font-family: var(--font-display); font-size: 1.3125rem; font-weight: 700; }
.mark-frame { margin-top: 12px; cursor: crosshair; }

.hand-over { margin-top: 4px; padding: 10px 14px; background: var(--thread); color: #fff; border-radius: 6px; font-weight: 700; text-align: center; }
.receipt-sum .ticket-item { margin-top: 4px; font-size: 1.375rem; }
.mini-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.mini-shots figcaption { display: none; }
.consent { margin-top: 16px; padding: 12px 14px; border-left: 4px solid var(--thread); background: var(--sheet); font-weight: 700; line-height: 1.5; }
.pad-wrap { position: relative; margin-top: 8px; }
#pad { width: 100%; height: 200px; display: block; border: 2px dashed var(--thread); border-radius: 8px; background: #fff; touch-action: none; }
.pad-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--thread-soft); pointer-events: none; }

.record { background: #fff; padding: 8px 0; }
.rec-title { margin-top: 12px; font-family: var(--font-display); font-size: 1.375rem; }
.rec-verify { margin-top: 10px; padding: 10px 12px; border-radius: 6px; font-weight: 700; }
.rec-verify.ok { background: #e3f1e6; color: #1d5b2c; }
.rec-verify.bad { background: #fbe3e7; color: var(--basting); }
table.rec { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 0.875rem; }
table.rec th, table.rec td { padding: 5px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.rec th { width: 34%; color: var(--thread-soft); font-weight: 500; }
table.rec code { word-break: break-all; font-size: 0.75rem; }
table.hist th { width: auto; }
.rec-photo { margin-top: 12px; display: grid; gap: 8px; }
.rec-photo .shot { max-width: 260px; }
.rec-sig { width: 220px; border: 1px solid var(--line); border-radius: 6px; }

@media print {
  body { background: #fff; font-size: 0.75rem; }
  .no-print, .toast { display: none !important; }
  .page { max-width: none; padding: 0; }
  .rec-photo { break-inside: avoid; grid-template-columns: 220px 1fr; align-items: start; }
  .hash summary { display: none; }
  .hash code { display: block; }
}

[hidden] { display: none !important; }

/* ── 디자인 다듬기 (2026-11-13, 기능 변화 없음) ── */
:root { --ok: #1d6b3a; --ok-bg: #e2f2e7; --warn: #8a5a00; --warn-bg: #fff1cc; --bad-bg: #fbe3e7; --radius: 10px; }
.page { padding: 4px 16px 72px; }
.top { position: sticky; top: 0; z-index: 5; margin: 0 -16px; padding: 0 16px; background: var(--paper); border-bottom: 1px solid var(--line); }
.top-title { font-size: 1.25rem; }
.card { border-radius: var(--radius); padding: 16px; }
.section-title { margin-top: 24px; font-size: 1.1875rem; }
.note { font-size: 0.9375rem; line-height: 1.55; }
.field-hint { line-height: 1.5; }
.buttons { margin-top: 14px; }
.buttons.two > :only-child { grid-column: 1 / -1; }
.solid-button, .line-button { border-radius: 8px; min-height: 52px; }
.line-button { border-width: 1.5px; }
.solid-button:active, .line-button:active, .step-row:active { transform: translateY(1px); }

/* 접수 마무리 카드 */
.finish { padding: 8px 16px 12px; }
.finish .field-label { margin: 8px 0 2px; color: var(--thread-soft); font-size: 0.875rem; }
.step-row {
  display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 8px; width: 100%;
  min-height: 56px; padding: 0; border: 0; border-top: 1px solid var(--line); background: none;
  color: var(--thread); font: inherit; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer;
}
.finish .field-label + .step-row { border-top: 0; }
div.step-row { cursor: default; }
.step-icon { font-size: 1.25rem; text-align: center; }
.step-state { color: var(--chalk); font-weight: 500; font-size: 1rem; }
div.step-row .step-state { color: var(--thread-soft); }
.record-link { margin-top: 12px; text-align: right; font-size: 1rem; }
.record-link a { font-weight: 500; }

/* 사진: 원본 자리·대조 표시 */
.shot-frame { min-height: 80px; background: #ece7dd; }
.shot-frame img:not([src]) { display: none; }
.shot-empty { display: flex; align-items: center; justify-content: center; min-height: 120px; padding: 12px; color: var(--thread-soft); font-size: 0.8125rem; line-height: 1.4; text-align: center; }
.local-ok .shot-empty, .local-bad .shot-empty { display: none; }
.no-local .shot-empty { font-size: 0; }
.no-local .shot-empty::after { content: '이 기기에 원본 없음'; font-size: 0.8125rem; }
.shot-check:empty { display: none; }
.shot-check { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; line-height: 1.6; }
.local-ok .shot-check, .local-ok > .shot-check { background: var(--ok-bg); color: var(--ok); }
.no-local .shot-check { background: var(--warn-bg); color: var(--warn); }
.local-bad .shot-check { background: var(--bad-bg); color: var(--basting); }
.shot figcaption { gap: 4px 8px; }
.hash summary { padding: 0 6px; border-radius: 4px; background: rgb(28 38 64 / 0.06); text-decoration: none; font-size: 0.75rem; }
.thumbs { gap: 14px; }
.thumb .shot-frame { border-radius: 8px; }
.thumb .row-meta { display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: center; }
.thumb .row-actions { display: flex; gap: 6px; align-items: center; }
.thumb .row-actions .line-button { min-height: 36px; padding: 2px 10px; border-width: 1.5px; font-size: 0.875rem; }
.cam { aspect-ratio: 4 / 5; max-height: 56vh; border-radius: var(--radius); }
.cam-guide { border-radius: var(--radius); }
.shutter { border-radius: 999px; }

/* 손님 보관증: 지문 목록 */
.prints { display: grid; gap: 8px; margin-top: 12px; }
.print {
  display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.print.is-excluded { opacity: 0.55; }
.print.matched { border-color: var(--ok); background: var(--ok-bg); }
.print-n {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--thread); color: #fff; font-size: 0.875rem; font-weight: 700;
}
.print-body { display: grid; gap: 2px; font-size: 0.875rem; line-height: 1.45; }
.print-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.print-match { color: var(--ok); font-weight: 700; }
details.verify { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: rgb(28 38 64 / 0.04); }
details.verify summary { min-height: 40px; display: flex; align-items: center; color: var(--chalk); font-weight: 700; font-size: 0.9375rem; cursor: pointer; }
details.verify .line-button { margin-top: 10px; min-height: 48px; }
.sig-line { margin-top: 12px; font-size: 0.9375rem; }
.evidence .line-button { width: 100%; }

/* 서명·기록 */
.hand-over { border-radius: var(--radius); }
.consent { border-radius: 0 8px 8px 0; font-size: 1rem; }
#pad { border-radius: var(--radius); border-width: 1.5px; }
.rec-verify.warn { background: var(--warn-bg); color: var(--warn); }
.rec-verify:not(.ok):not(.bad):not(.warn) { background: rgb(28 38 64 / 0.05); }

/* 목록 */
.row { padding: 16px 0; }
.row-actions .solid-button, .row-actions .line-button { border-radius: 8px; }
.money { border-radius: var(--radius); }
.tabs { position: sticky; top: 56px; z-index: 4; background: var(--paper); }

/* ── 폰 화면 넘침 고침 (2026-11-13 대표 폰 스크린샷) ── */
/* 1) 큰 금액이 두 줄로 끊김: 금액은 한 줄 고정, 설명 칸이 줄어들게 */
.money { align-items: center; }
.money > div, .money > .money-label { flex: 1 1 auto; min-width: 0; }
.money-value { flex: none; white-space: nowrap; font-size: clamp(22px, 7.2vw, 27px); }
/* 2) iOS 사파리 날짜 칸이 카드 밖으로 넘침: 기본 모양을 끄고 폭을 칸에 맞춤 */
.field input { min-width: 0; max-width: 100%; }
.field input[type='date'] {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0;
  text-align: left; line-height: 54px; background: #fff;
}
.field input[type='date']::-webkit-date-and-time-value { text-align: left; }
.two-inputs > * { min-width: 0; }
/* 3) 사파리 아래 주소창에 마지막 버튼이 가리지 않게 */
.page { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

/* ── 쉬운 접수 흐름 (2026-11-13) ── */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 10px 0 4px; }
.flow li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 6px; border-top: 3px solid rgb(28 38 64 / 0.15); color: var(--thread-soft); font-size: 0.8125rem; text-align: center; line-height: 1.3; }
.flow li span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgb(28 38 64 / 0.12); font-size: 0.75rem; font-weight: 700; }
.flow li.done { border-top-color: var(--thread); color: var(--thread); }
.flow li.done span { background: var(--thread); color: #fff; }
.flow li.now { border-top-color: var(--chalk); color: var(--thread); font-weight: 700; }
.flow li.now span { background: var(--chalk); color: #fff; }
.opt { font-weight: 500; color: var(--thread-soft); font-size: 0.875rem; }
.chip[aria-pressed='true'] { background: var(--thread); color: #fff; border-color: var(--thread); }
.shutter-bar { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 3; margin-top: 12px; }
.shutter-bar .shutter { width: 100%; min-height: 68px; font-size: 1.3125rem; box-shadow: 0 6px 18px rgb(28 38 64 / 0.25); }
details.qr-box summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; color: var(--chalk); cursor: pointer; }
.local-ok .shot-check { display: none; }
.hash summary { font-family: inherit; }
.hash code { margin-top: 2px; }

/* ── 강조색 오렌지로 통일 + 상단 헝겊(팔아미터 과일 천 색) (2026-11-13) ── */
:root {
  --accent: #E0813A;        /* 헝겊·주 버튼 바탕 (팔아미터 fruit fabric) */
  --accent-ink: #2A1608;    /* 오렌지 위 글자 */
  --chalk: #A4511B;         /* 링크·작은 강조 글자(밝은 바탕에서 읽히는 진한 오렌지) */
  --notice: #FBE3CC;        /* 옅은 오렌지(후불 표시·안내 상자) */
}
.fabric.hero { background: var(--accent); color: var(--accent-ink); padding: 20px 20px 34px; }
.hero-meta { font-size: 0.9375rem; line-height: 1.45; font-weight: 500; }
.hero-headline { margin: 18px 0 10px; font-family: var(--font-display); font-size: 1.6875rem; line-height: 1.35; font-weight: 700; letter-spacing: -0.01em; }
.hero-num { white-space: nowrap; }
.hero-sub { font-size: 0.9375rem; color: rgb(42 22 8 / 0.8); }
.hero-link { display: inline-block; padding: 10px 0; line-height: 1.5; margin-top: 6px; color: var(--accent-ink); font-size: 0.9375rem; text-decoration: underline; text-underline-offset: 3px; }
.hero + .tabs, .swatch-shadow + .tabs { margin-top: 8px; }

/* 주 버튼·고른 칩·현재 단계·현재 탭 = 오렌지 */
.solid-button { background: var(--accent); color: var(--accent-ink); }
.row-actions .solid-button { background: var(--accent); color: var(--accent-ink); }
.chip[aria-pressed='true'] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.tab[aria-current='page'] { border-bottom-color: var(--accent); }
.flow li.now { border-top-color: var(--accent); }
.flow li.now span { background: var(--accent); color: var(--accent-ink); }
.hand-over { background: var(--accent); color: var(--accent-ink); }
.consent { border-left-color: var(--accent); }
.step-state { color: var(--chalk); }
.print-n { background: var(--accent); color: var(--accent-ink); }
.line-button { border-color: var(--accent-ink); }
:focus-visible { outline-color: var(--accent); }
.tag-unpaid { background: var(--notice); color: var(--accent-ink); }
.cam-guide { background: var(--notice); }
.money { background: var(--notice); }

/* 손님 화면 미리보기 */
.record-link { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.preview-bar { position: sticky; top: 0; z-index: 6; margin: 0 -16px 8px; padding: 10px 16px; background: var(--accent); color: var(--accent-ink); font-size: 0.875rem; font-weight: 700; }

/* ── 소셜 로그인 버튼 (각 서비스 표기 지침의 색) ── */
.social { display: grid; gap: 10px; margin-top: 16px; }
.social-btn {
  display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 10px;
  min-height: 54px; padding: 0 18px; border-radius: 8px; font-weight: 700; font-size: 1.0625rem; text-decoration: none;
}
.social-btn svg { width: 20px; height: 20px; fill: currentColor; }
.social-btn span { text-align: center; }
.social-btn small { font-size: 0.75rem; font-weight: 500; }
.social-kakao { background: #FEE500; color: rgb(0 0 0 / 0.85); }
.social-naver { background: #03C75A; color: #fff; }
.social-apple { background: #000; color: #fff; }
.social-btn.is-off { opacity: 0.45; cursor: not-allowed; }
.social-btn.is-done { opacity: 0.7; }
.card .social { margin-top: 10px; }
details.pin-login { margin-top: 16px; }
details.pin-login summary { min-height: 44px; display: flex; align-items: center; color: var(--chalk); font-weight: 700; cursor: pointer; }
.welcome { background: var(--notice); }

/* ════════════════════════════════════════════════════════════════
   정리 (2026-11-13): 팔아미터처럼 "종이 위에 바로, 상자는 헝겊만"
   - 바탕 4가지: 종이(--paper) · 흰 천(--sheet) · 오렌지(--accent) · 옅은 오렌지(--notice)
   - 선: 구분은 가는 실선, 점선은 "누를 수 있는 보조 버튼"에만
   - 모서리: 8px(버튼·입력·사진) · 알약(칩·태그)
   - 글자: 13 · 15 · 18 · 22 · 27 (+ 보관 번호 44)
   ════════════════════════════════════════════════════════════════ */
:root { --r: 8px; --pill: 999px; --t-xs: 0.8125rem; --t-s: 0.9375rem; --t-m: 1.125rem; --t-l: 1.375rem; --t-xl: 1.6875rem; }

/* 1) 카드 상자 걷어내기: 종이 위에 바로 놓고 제목·여백으로 나눈다 */
.card {
  margin-top: 28px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
.card + .card { padding-top: 24px; border-top: 1px solid var(--line); }
.card.late, .card.welcome { padding: 12px 14px; border-radius: var(--r); background: var(--notice); }
.card.late { color: var(--basting); }
.finish .step-row:first-of-type { border-top: 1px solid var(--line); }
details.qr-box, details.pin-login { padding-top: 4px; }

/* 2) 색 4가지: 그 밖의 바탕은 없앤다(빨강은 글자에만) */
.shot-frame { background: var(--sheet); }
.hash summary { background: none; padding: 0; text-decoration: underline dotted; color: var(--thread-soft); }
details.verify { background: none; padding: 0; margin-top: 16px; border-top: 1px solid var(--line); padding-top: 8px; }
.tag-paid { background: none; color: var(--thread-soft); border: 1px solid var(--line); }
.tag-unpaid { background: var(--notice); color: var(--accent-ink); }
.print, .money { border-radius: var(--r); }
.print.matched { background: var(--notice); border-color: var(--accent); }
.print-match { color: var(--accent-ink); }
.no-local .shot-check, .local-bad .shot-check { background: none; padding: 0; color: var(--basting); }
.rec-verify, .rec-verify.ok, .rec-verify.bad, .rec-verify.warn {
  background: var(--sheet); border-left: 4px solid var(--thread); border-radius: 0 var(--r) var(--r) 0; color: var(--thread);
}
.rec-verify.bad { border-left-color: var(--basting); color: var(--basting); }
.rec-verify.warn { border-left-color: var(--accent); }
.consent { background: none; padding: 4px 0 4px 14px; border-radius: 0; }
.cam-guide { background: var(--notice); border-radius: var(--r); }
.hand-over { border-radius: var(--r); }

/* 3) 선: 구분은 실선, 점선은 보조 버튼에만 */
.evidence { border-top: 1px solid var(--line); }
.tab { border-bottom-style: solid; }
.tab[aria-current='page'] { border-bottom: 3px solid var(--accent); }
.step { border-top: 3px solid rgb(28 38 64 / 0.15); }
.step.is-done, .step.is-now { border-top: 3px solid var(--thread); }
.step.is-now { border-top-color: var(--accent); }
.row { border-bottom: 1px solid var(--line); }
.line-button { border: 2px dashed var(--accent-ink); background: transparent; }
#pad { border: 1px solid rgb(28 38 64 / 0.32); background: #fff; }
.top { border-bottom: 1px solid var(--line); }

/* 4) 모서리 2가지 */
.solid-button, .line-button, .field input, .field select, .field textarea, .cam, .shot-frame, .thumb .shot-frame,
.social-btn, .qr svg, #pad, .sig img, .rec-sig, .preview-bar { border-radius: var(--r); }
.chip, .tag, .shot-check, .shutter, .segment .chip { border-radius: var(--pill); }
.segment .chip { border-radius: var(--r); }
.fabric.hero { border-radius: 0; }
.preview-bar { border-radius: 0; }

/* 5) 글자 5단계 */
body { font-size: var(--t-m); }
.top-title, .section-title, .sheet-title, .ticket-item, .rec-title, .month-nav strong { font-size: var(--t-l); }
.hero-headline, .money-value, .row-no { font-size: var(--t-xl); }
.row-no { font-size: var(--t-l); }
.ticket-no { font-size: 2.75rem; }
.field-label, .money-label, .note, .field-hint, .row-meta, .hero-meta, .hero-sub, .hero-link, .cam-guide,
.ticket-shop, .ticket-status, .step-state, .record-link, details.verify summary, details.qr-box summary, details.pin-login summary,
.thumb .row-actions .line-button, .row-actions .solid-button, .row-actions .line-button, .print-body, .sig-line, .consent,
.facts, .shot figcaption, .preview-bar, .tab, .chip, .opt { font-size: var(--t-s); }
.ticket-status { font-size: var(--t-m); }
.field-hint, .shot-meta, .shot-check, .tag, .flow li, .hash summary, .hash code, .ticket-no-label, .print-n, .social-btn small,
table.rec, .rec-verify + .rec-verify { font-size: var(--t-xs); }
.solid-button, .line-button, .social-btn, .step-row, .field input, .field select, .field textarea, .segment .chip { font-size: var(--t-m); }
.shutter-bar .shutter { font-size: var(--t-l); }

/* 6) 아래 탭 막대 */
body.has-nav .page { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: var(--sheet); border-top: 1px solid var(--line);
}
.bottom-nav a {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; justify-content: center;
  color: var(--thread-soft); font-size: var(--t-xs); font-weight: 500; text-decoration: none;
}
.bottom-nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bottom-nav a[aria-current='page'] { color: var(--accent-ink); font-weight: 700; }
.bottom-nav a[aria-current='page'] svg { stroke: var(--accent); stroke-width: 2.4; }
body.has-nav .shutter-bar { bottom: calc(80px + env(safe-area-inset-bottom)); }
@media (min-width: 520px) { .bottom-nav { left: 50%; right: auto; width: 480px; transform: translateX(-50%); border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }
@media print { .bottom-nav { display: none; } }

/* 7) 같은 말 두 번 안 하기: 사진 칸 안 문구만 남김 */
.no-local .shot-check { display: none; }
.no-local .shot-empty::after { content: '이 폰에 사진 없음'; }
.step-row { grid-template-columns: 1fr auto; }
details.qr-box { margin-top: 16px; }
details.qr-box[open] .qr { margin-bottom: 8px; }
.login-links .social-btn { min-height: 48px; font-size: var(--t-s); }
/* 남은 예외 정리 */
input, .qty input, .qty .chip { border-radius: var(--r); }
.hash summary { border-radius: 0; }
.flow li span { background: rgb(28 38 64 / 0.06); font-size: var(--t-xs); }
.flow li.done span { background: var(--thread); }
.text-button, .top a, .record-link a, .ledger-link, a.hero-link { font-size: var(--t-s); }
.finish .field-label, .field-label { font-size: var(--t-s); }
.print-n, .flow li span { font-size: var(--t-xs); }
.field input[type], .row-actions input { border-radius: var(--r); }
.thumb .row-actions .text-button { font-size: var(--t-s); }

/* ── S1: 찾기·빈 화면·연결 끊김·정정·나란히 보기·백업·계정 삭제 ── */
.offline-bar { position: sticky; top: 0; z-index: 20; margin: 0; padding: 10px 16px; background: var(--thread); color: #fff; font-size: 0.8125rem; text-align: center; }
.offline-bar[hidden] { display: none !important; }
button.is-busy { position: relative; color: transparent !important; }
button.is-busy::after { content: '···'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--accent-ink); font-weight: 700; letter-spacing: 2px; animation: busy 1s steps(3) infinite; }
button.line-button.is-busy::after { color: var(--thread); }
@keyframes busy { 0% { opacity: .35 } 50% { opacity: 1 } 100% { opacity: .35 } }
.search { margin: 16px 0 4px; }
.search input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid rgb(28 38 64 / .32); border-radius: 8px; background: var(--sheet); font: inherit; font-size: 0.9375rem; -webkit-appearance: none; }
#results .empty, #board .empty { margin-top: 24px; }
.empty-first { margin: 32px 0 8px; text-align: center; }
.empty-first .empty { margin-top: 6px; }
.empty-title { margin: 0; font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; }
.backup-nag { margin: 12px 0 0; padding: 10px 14px; border-radius: 8px; background: var(--notice); font-size: 0.8125rem; }
.backup-nag a { color: var(--accent-ink); text-decoration: none; }
.fixes { list-style: none; margin: 0; padding: 0; }
.fixes li { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); }
.fix-what { font-size: 0.9375rem; }
.cmp-head, .cmp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cmp-head { position: sticky; top: 49px; z-index: 4; padding: 8px 0; background: var(--paper); font-size: 0.8125rem; font-weight: 700; color: var(--thread-soft); }
.cmp-row { margin-bottom: 12px; }
.cmp-cell { margin: 0; min-width: 0; }
.cmp-cell .row-meta { font-size: 0.8125rem; }
.cmp-none { display: grid; place-items: center; min-height: 120px; border: 1px dashed var(--line); border-radius: 8px; }
.cmp-cell.no-local .shot-empty { display: grid; }
.ref-thumbs .thumb { width: 72px; }
.ref-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.check { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; font-size: 0.9375rem; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); }
.danger summary { cursor: pointer; font-weight: 700; color: var(--thread-soft); }
.danger[open] summary { color: var(--basting); }
.steps-list { margin: 12px 0; padding-left: 20px; font-size: 0.9375rem; display: grid; gap: 8px; }
.danger-button { border-color: var(--basting) !important; color: var(--basting) !important; }

/* 큰 글씨일 때 넘치지 않게: 버튼·줄 글자는 줄바꿈 허용, 돈 금액은 줄바꿈 금지 유지 */
.solid-button, .line-button, .text-button, .tab, .chip, .step-row { white-space: normal; overflow-wrap: anywhere; height: auto; }
.row-main { flex-wrap: wrap; row-gap: 4px; }
.money-value, .row-price, .hero-num { white-space: nowrap; }
/* 아래 탭 막대: 글씨가 커져도 4칸 유지, 글자는 15px까지만 */
.bottom-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bottom-nav span { font-size: min(var(--t-xs), 15px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* 보관함 탭: 줄바꿈 대신 옆으로 밀기 */
.tab { white-space: nowrap; flex: none; }
/* 큰 금액 제목: 화면 폭을 넘지 않게 */
.hero-headline, .hero-num { font-size: min(var(--t-xl), 9.5vw); }
.money-value { font-size: min(var(--t-xl), 9vw); }

/* ── 첫 실행 안내 ── */
.welcome-track { min-height: 52vh; display: grid; align-items: center; }
.welcome-slide { text-align: center; padding: 24px 8px 0; }
.welcome-icon { width: 96px; height: 96px; fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.welcome-step { margin: 16px 0 4px; color: var(--thread-soft); font-size: var(--t-xs); }
.welcome-title { margin: 0 0 12px; font-family: var(--font-display); font-size: var(--t-xl); line-height: 1.3; }
.welcome-text { margin: 0 auto; max-width: 30em; font-size: var(--t-m); line-height: 1.6; color: var(--thread); }
.welcome-dots { display: flex; justify-content: center; gap: 8px; list-style: none; padding: 0; margin: 16px 0; }
.welcome-dots li { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.welcome-dots li.on { width: 22px; border-radius: 999px; background: var(--accent); }
/* 큰 글씨면 머리띠가 높아지므로 고정 탭 위치도 글자 크기를 따라 */
.tabs { top: calc(var(--t-l) * 1.4 + 25px); }

/* ── 다듬기 (2026-11-14): 러프한 느낌 줄이기 ──
   1) 점선 보조 버튼 → 흰 천 + 얇은 실선(점선은 '초안'처럼 보였음)
   2) 주황은 화면당 주 버튼·머리 카드에만, 목록 버튼은 흰 천
   3) 간격 8의 배수, 목록 줄 위계(물건 이름 > 보관 번호)
   4) 자주 누르는 버튼은 아래에 고정 */
.line-button {
  border: 1.5px solid rgb(28 38 64 / 0.22); background: var(--sheet); color: var(--thread);
  box-shadow: 0 1px 0 rgb(28 38 64 / 0.06);
}
.line-button:active { background: #eef2f5; }
.solid-button { box-shadow: 0 1px 0 rgb(42 22 8 / 0.25); }
.solid-button:active { filter: brightness(0.95); }

/* 머리 카드(보관함): 작게, 한눈에 */
.fabric.hero.hero-compact { padding: 14px 18px 26px; }
.hero-compact .hero-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hero-compact .hero-link { padding: 0; margin: 0; font-weight: 700; text-decoration: none; white-space: nowrap; }
.hero-compact .hero-headline { margin: 6px 0 4px; font-size: min(var(--t-l), 7vw); line-height: 1.3; }
.hero-compact .hero-num { font-size: inherit; }
.hero-compact .hero-sub { font-size: var(--t-xs); }

/* 목록 줄: 물건 이름이 주인공 */
.row { padding: 16px 0; }
.row-main { align-items: baseline; }
.row .row-item { font-size: var(--t-m); font-weight: 700; color: var(--thread); text-decoration: none; }
.row .row-no { font-family: var(--font-body); font-size: var(--t-xs); font-weight: 700; color: var(--chalk); text-decoration: none; letter-spacing: 0.02em; }
.row .row-meta { margin-top: 4px; }
.row-actions { margin-top: 12px; gap: 8px; }
.row-actions .line-button, .row-actions .solid-button { min-height: 44px; padding: 0 16px; }

/* 아래 고정 주 버튼(탭 막대 바로 위) */
.sticky-cta {
  position: fixed; left: 0; right: 0; z-index: 15;
  bottom: calc(64px + env(safe-area-inset-bottom));
  padding: 16px 16px 8px;
  background: linear-gradient(to bottom, rgb(228 234 239 / 0), var(--paper) 40%);
}
body:not(.has-nav) .sticky-cta { bottom: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.sticky-cta .solid-button { width: 100%; min-height: 56px; box-shadow: 0 6px 16px rgb(42 22 8 / 0.18); }
@media (min-width: 520px) { .sticky-cta { left: 50%; right: auto; width: 480px; transform: translateX(-50%); } }
body.has-nav .page:has(.sticky-cta) { padding-bottom: calc(180px + env(safe-area-inset-bottom)); }

/* 상세: 자주 안 쓰는 링크는 '더 보기' 안에 */
details.more-links { margin-top: 16px; }
details.more-links summary {
  min-height: 48px; display: flex; align-items: center; cursor: pointer; list-style: none;
  color: var(--thread-soft); font-size: var(--t-s); font-weight: 700;
}
details.more-links summary::-webkit-details-marker { display: none; }
details.more-links summary::after { content: '▾'; margin-left: 6px; }
details.more-links[open] summary::after { content: '▴'; }

/* 손님 서명: 서명 칸이 첫 화면에 오도록 인수증 요약을 촘촘히 */
.hand-over { padding: 8px 14px; font-size: var(--t-s); }
.receipt-sum { padding: 12px 14px; }
.receipt-sum .ticket-item { margin-top: 2px; font-size: var(--t-m); }
.receipt-sum .facts { grid-template-columns: 64px minmax(0, 1fr); gap: 2px 10px; margin-top: 8px; font-size: var(--t-xs); line-height: 1.5; }
.receipt-sum .row-meta { margin-top: 6px; }
.consent { margin-top: 12px; font-size: var(--t-xs); line-height: 1.5; }
#pad { height: 180px; border: 1.5px solid rgb(28 38 64 / 0.32); }

/* 로그인: 펼쳐진 PIN 칸 */
details.pin-login[open] summary { color: var(--thread); }

/* ════════════════════════════════════════════════════════════════
   디자인 v2 (2026-11-14, 대표 결정: 정돈된 기본기 + 브랜드 표시 하나, 주황 A안 #F07A2D)
   - 글꼴: 시스템 고딕(장식 서체 없음). 숫자는 굵게, 고른 폭.
   - 색: 바탕 옅은 회색, 카드 흰색, 글자 진한 남색. 주황은 주 버튼·아이콘·손님 보관증 머리에만.
   - 간격 8의 배수, 모서리 카드 16 / 버튼·입력 12 / 칩 알약.
   - 이 블록이 최종 규칙(위쪽 규칙을 덮음).
   ════════════════════════════════════════════════════════════════ */
:root {
  --font-body: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif;
  --font-display: var(--font-body);
  --paper: #F2F4F6;          /* 바탕 */
  --sheet: #FFFFFF;          /* 카드 */
  --fill: #F2F4F6;           /* 보조 버튼·칩 바탕 */
  --fill-strong: #E5E8EB;
  --thread: #191F28;         /* 글자(진한 남색 계열 검정) */
  --thread-soft: #5B6573;    /* 보조 글자 */
  --line: #E5E8EB;
  --accent: #F07A2D;         /* 주황 A안: 주 버튼·아이콘·보관증 머리 */
  --accent-ink: #2A1608;     /* 주황 위 글자: 진한 밤색(흰 글자는 대비 2.8:1로 부족, 이 색은 약 6:1) */
  --accent-soft: #FFF1E8;
  --chalk: #191F28;          /* 링크도 남색 */
  --notice: #FFF1E8;
  --basting: #D22D35;        /* 늦음·오류 */
  --r: 12px; --r-card: 16px; --pill: 999px;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.04), 0 2px 8px rgb(0 0 0 / 0.04);
}
body { background: var(--paper); color: var(--thread); font-family: var(--font-body); letter-spacing: -0.01em; }
a { color: var(--thread); text-underline-offset: 3px; }
.page { padding-left: 20px; padding-right: 20px; }

/* 머리말 */
.top { min-height: 56px; border-bottom: 0; }
.top-title { font-family: var(--font-body); font-weight: 800; letter-spacing: -0.02em; }
.top-sub { color: var(--thread-soft); font-weight: 500; }
.top a { color: var(--thread-soft); font-weight: 600; text-decoration: none; }

/* 카드: 흰 바탕 + 아주 옅은 그림자, 테두리 없음 */
.card, .summary, .ticket, .search input { box-shadow: var(--shadow-card); }
.card { margin-top: 12px; padding: 20px; border: 0; border-radius: var(--r-card); background: var(--sheet); }
.card.late, .card.welcome { background: var(--accent-soft); box-shadow: none; }
.card.late { color: var(--basting); }

/* 버튼: 주 버튼(주황) / 보조(회색 채움) / 글자 */
.solid-button, .line-button {
  min-height: 56px; border-radius: var(--r); font-family: var(--font-body); font-weight: 700; letter-spacing: -0.01em;
  box-shadow: none; transition: transform 0.06s ease, filter 0.1s ease;
}
.solid-button { background: var(--accent); color: var(--accent-ink); border: 0; }
.line-button { background: var(--fill); color: var(--thread); border: 0; }
.solid-button:active, .line-button:active { transform: scale(0.98); }
.line-button:active { background: var(--fill-strong); }
.text-button { color: var(--thread-soft); text-decoration: none; font-weight: 600; }
.danger-button { background: #FDECEC !important; border: 0 !important; color: var(--basting) !important; }
.row-actions .line-button, .row-actions .solid-button { min-height: 40px; padding: 0 14px; border-radius: 10px; font-size: var(--t-s); }

/* 입력 */
.field-label { font-weight: 700; color: var(--thread); }
.field input[type='text'], .field input[type='tel'], .field input[type='number'], .field input[type='date'],
.field input[type='password'], .field select, .field textarea, .search input {
  border: 1.5px solid transparent; border-radius: var(--r); background: var(--sheet); color: var(--thread);
  box-shadow: inset 0 0 0 1px var(--line);
}
.field input:focus, .field select:focus, .field textarea:focus, .search input:focus {
  outline: none; border-color: var(--thread); box-shadow: none;
}
.search input { box-shadow: var(--shadow-card); }

/* 칩·선택: 선택됨은 남색(주황 아님) */
.chip { border: 0; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line); color: var(--thread); font-weight: 500; }
.chip[aria-pressed='true'], .segment .chip[aria-pressed='true'] { background: var(--thread); color: #fff; box-shadow: none; }
.segment .chip { border-radius: var(--r); }
.tag { border-radius: 6px; font-weight: 700; padding: 2px 8px; }
.tag-paid { background: var(--fill); color: var(--thread-soft); border: 0; }
.tag-unpaid { background: var(--accent-soft); color: #C2410C; }

/* 탭: 선택됨 남색 밑줄 */
.tab { color: var(--thread-soft); font-weight: 600; }
.tab[aria-current='page'] { color: var(--thread); border-bottom: 2px solid var(--thread); font-weight: 800; }
.tab-count { font-variant-numeric: tabular-nums; }

/* 접수 단계 막대 */
.flow li { border-top-width: 3px; border-top-color: var(--line); }
.flow li.done, .flow li.now { border-top-color: var(--thread); color: var(--thread); }
.flow li.done span, .flow li.now span { background: var(--thread); color: #fff; }

/* 아래 탭 막대 */
.bottom-nav { background: rgb(255 255 255 / 0.94); backdrop-filter: saturate(1.8) blur(16px); -webkit-backdrop-filter: saturate(1.8) blur(16px); border-top: 1px solid var(--line); }
.bottom-nav a { color: #8B95A1; }
.bottom-nav a[aria-current='page'] { color: var(--thread); }
.bottom-nav a[aria-current='page'] svg { stroke: var(--thread); stroke-width: 2.2; }

/* 아래 고정 주 버튼 */
.sticky-cta { background: linear-gradient(to bottom, rgb(242 244 246 / 0), var(--paper) 45%); }
.sticky-cta .solid-button { box-shadow: 0 8px 20px rgb(240 122 45 / 0.28); }

/* 요약 카드(보관함·장부) */
.summary { margin-top: 8px; padding: 20px; border-radius: var(--r-card); background: var(--sheet); }
.summary-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--thread-soft); font-size: var(--t-s); font-weight: 500; }
.summary-meta a { color: var(--thread-soft); font-weight: 700; text-decoration: none; white-space: nowrap; }
.summary-label { margin-top: 12px; color: var(--thread-soft); font-size: var(--t-s); font-weight: 600; }
.summary-num { margin-top: 2px; font-size: min(2rem, 9vw); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.25; }
.summary-facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.summary-facts div { display: flex; flex-direction: column; }
.summary-facts dt { color: var(--thread-soft); font-size: var(--t-xs); }
.summary-facts dd { font-weight: 700; font-size: var(--t-s); font-variant-numeric: tabular-nums; }

/* 목록 */
.rows { margin-top: 4px; }
.row { padding: 18px 0; border-bottom: 1px solid var(--line); }
.row .row-item { font-weight: 700; letter-spacing: -0.02em; }
.row .row-no { color: var(--thread-soft); font-family: var(--font-body); font-weight: 700; }
.row-price { font-family: var(--font-body); font-weight: 800; font-variant-numeric: tabular-nums; }
.row-meta { color: var(--thread-soft); }
.late { color: var(--basting); }
.empty-title { font-weight: 800; }

/* 접수 상세의 마무리 줄·더 보기 */
.step-row { border-color: var(--line); }
.step-label { font-weight: 700; }
.step-state { color: var(--thread-soft); }
details.qr-box summary, details.pin-login summary { color: var(--thread); }

/* 로그인 소개 */
.intro { padding: 32px 4px 8px; }
.intro-icon { width: 64px; height: 64px; display: block; border-radius: 15px; box-shadow: 0 6px 16px rgb(240 122 45 / 0.25); }
.intro-title { margin-top: 20px; font-size: min(1.75rem, 8vw); font-weight: 800; line-height: 1.35; letter-spacing: -0.03em; }
.intro-sub { margin-top: 8px; color: var(--thread-soft); font-size: var(--t-s); }
details.pin-login { padding: 4px 20px 20px; }
.social-btn { border-radius: var(--r); }

/* ── 보관증(사장님 상세·손님 화면 공통) ── */
.ticket { margin-top: 16px; border-radius: var(--r-card); background: var(--sheet); overflow: hidden; }
.ticket-head {
  position: relative; padding: 20px 20px 32px; background: var(--fill); color: var(--thread);
  /* 아래 끝 톱니(보관증 꼬리표) — 브랜드 표시는 여기 하나 */
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% 0 / 16px calc(100% + 1px) repeat-x;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% 0 / 16px calc(100% + 1px) repeat-x;
}
.ticket-customer .ticket-head { background: var(--accent); color: var(--accent-ink); }
.ticket-shop { font-size: var(--t-s); font-weight: 600; opacity: 0.9; }
.ticket-no { margin-top: 16px; font-family: var(--font-body); font-size: 2.5rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.ticket-no-label { font-size: var(--t-xs); font-weight: 600; opacity: 0.8; color: inherit; }
.ticket-item { margin-top: 12px; font-family: var(--font-body); font-size: var(--t-l); font-weight: 800; letter-spacing: -0.02em; }
.ticket-notes { margin-top: 4px; font-size: var(--t-s); opacity: 0.85; }
.qty-tag { color: inherit; opacity: 0.8; font-family: var(--font-body); }
.ticket-body { padding: 4px 20px 24px; }
.steps { margin-top: 16px; }
.step { border-top: 3px solid var(--line); color: var(--thread-soft); font-weight: 600; }
.step.is-done, .step.is-now { border-top-color: var(--thread); color: var(--thread); }
.step.is-now { border-top-color: var(--accent); }
.ticket-status { margin-top: 16px; font-weight: 800; letter-spacing: -0.02em; }
.ticket-status.ready { color: #C2410C; }
.money { margin-top: 16px; padding: 16px; border-radius: var(--r); background: var(--fill); }
.money-label { color: var(--thread-soft); font-weight: 600; font-size: var(--t-s); }
.money-value { font-family: var(--font-body); font-weight: 800; letter-spacing: -0.02em; }
.section-title { margin-top: 32px; font-family: var(--font-body); font-weight: 800; letter-spacing: -0.02em; }
.evidence { border-top: 0; }
.note { color: var(--thread-soft); }
.facts { gap: 8px 16px; }
.facts dt { color: var(--thread-soft); font-weight: 500; }
.facts dd { font-weight: 600; }
.preview-bar { background: var(--thread); color: #fff; }

/* 손님 서명 */
.hand-over { background: var(--thread); color: #fff; border-radius: var(--r); font-weight: 700; }
.receipt-sum { box-shadow: var(--shadow-card); }
.consent { border-left: 3px solid var(--accent); }
#pad { border: 0; border-radius: var(--r-card); box-shadow: inset 0 0 0 1.5px var(--fill-strong); background: #fff; }

/* 첫 실행 안내 */
.welcome-icon { stroke: var(--accent); }
.welcome-title { font-family: var(--font-body); font-weight: 800; letter-spacing: -0.03em; }
.welcome-dots li.on { background: var(--thread); }

/* 장부 달 이동 */
.month-nav strong { font-family: var(--font-body); font-weight: 800; }
.month-nav a { color: var(--thread-soft); text-decoration: none; font-weight: 600; }
.ledger-link { border-bottom: 1px solid var(--line); }

/* 촬영 셔터 */
.shutter-bar .shutter { box-shadow: 0 8px 20px rgb(240 122 45 / 0.3); }
/* 보조 버튼: 회색 바탕 위에선 흰 버튼+얇은 선, 흰 카드 안에선 회색 채움 */
.line-button { background: var(--sheet); box-shadow: inset 0 0 0 1px var(--fill-strong); }
.card .line-button, .ticket .line-button, .summary .line-button, .receipt-sum .line-button { background: var(--fill); box-shadow: none; }
.line-button:active { background: var(--fill-strong); }
/* 요약 카드(보관함·장부)에 헝겊 디자인: 주황 천 + 아래 톱니 끝 (대표 요청 11-14) */
.summary {
  padding: 18px 20px 30px; border-radius: var(--r-card) var(--r-card) 0 0;
  background: var(--accent); color: var(--accent-ink); box-shadow: none;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% 0 / 16px calc(100% + 1px) repeat-x;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% 0 / 16px calc(100% + 1px) repeat-x;
}
.summary-meta, .summary-meta a, .summary-label, .summary-facts dt { color: rgb(42 22 8 / 0.78); }
.summary-num, .summary-facts dd { color: var(--accent-ink); }
.summary-facts { border-top-color: rgb(42 22 8 / 0.18); }

/* ── 브랜드 색: 딥 틸 (2026-11-14 대표 결정, 주황 A안 대체) ──
   흰 글자 대비 5.1:1. 주 버튼·아이콘·보관증 머리·요약 카드에만. 후불 표시는 브랜드와 구분해 호박색 */
:root {
  --accent: #0E7C6B;
  --accent-ink: #FFFFFF;
  --accent-soft: #E6F3F0;
  --notice: #E6F3F0;
}
.sticky-cta .solid-button, .shutter-bar .shutter { box-shadow: 0 8px 20px rgb(14 124 107 / 0.28); }
.intro-icon { box-shadow: 0 6px 16px rgb(14 124 107 / 0.25); }
.summary-meta, .summary-meta a, .summary-label, .summary-facts dt { color: rgb(255 255 255 / 0.82); }
.summary-facts { border-top-color: rgb(255 255 255 / 0.25); }
.tag-unpaid { background: #FFF4E0; color: #8A5300; }
.ticket-status.ready { color: var(--accent); }
.solid-button:active { filter: brightness(0.92); }
/* 보관증 인증 줄(보증서 느낌) */
.ticket-seal { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border-radius: var(--r); background: var(--accent-soft); color: var(--thread); font-size: var(--t-xs); line-height: 1.55; }
.ticket-seal b { font-weight: 700; }
.ticket-seal-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; }

/* ── 브랜드 색: 딥 에메랄드 (2026-11-14 대표 결정, 딥 틸 대체) ── 흰 글자 대비 7.8:1 */
:root { --accent: #0B5D4B; --accent-ink: #FFFFFF; --accent-soft: #E6F0EC; --notice: #E6F0EC; }
.sticky-cta .solid-button, .shutter-bar .shutter { box-shadow: 0 8px 20px rgb(11 93 75 / 0.28); }
.intro-icon { box-shadow: 0 6px 16px rgb(11 93 75 / 0.25); }

/* ── 랜딩(2026-11-14) ── */
.lp-hero { padding: 24px 0 8px; }
.lp-eyebrow { color: var(--accent); font-size: var(--t-s); font-weight: 700; }
.lp-title { margin-top: 10px; font-size: min(2rem, 8.6vw); font-weight: 800; line-height: 1.3; letter-spacing: -0.03em; }
.lp-sub { margin-top: 14px; color: var(--thread-soft); font-size: var(--t-m); line-height: 1.6; }
.lp-cta { margin-top: 24px; }
.lp-note { margin-top: 8px; color: var(--thread-soft); font-size: var(--t-xs); }
.lp-sec { margin-top: 40px; }
.lp-sec.card { padding: 24px 20px; }
.lp-h2 { font-size: var(--t-l); font-weight: 800; letter-spacing: -0.02em; }
.lp-h3 { margin-top: 28px; font-size: var(--t-m); font-weight: 800; }
.lp-pains { margin-top: 14px; display: grid; gap: 10px; }
.lp-pains li { padding: 14px 16px; border-radius: var(--r); background: var(--sheet); box-shadow: var(--shadow-card); font-size: var(--t-s); line-height: 1.5; }
.lp-steps { margin-top: 14px; display: grid; gap: 14px; counter-reset: s; }
.lp-steps li { display: grid; grid-template-columns: 32px 1fr; gap: 2px 12px; counter-increment: s; }
.lp-steps li::before { content: counter(s); grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.lp-steps b { font-size: var(--t-m); }
.lp-steps span { color: var(--thread-soft); font-size: var(--t-s); line-height: 1.55; }
.lp-shots { margin-top: 20px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.lp-shots figure { flex: 0 0 72%; margin: 0; scroll-snap-align: start; }
.lp-shots img { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: 0 2px 12px rgb(0 0 0 / 0.08); }
.lp-shots figcaption { margin-top: 6px; color: var(--thread-soft); font-size: var(--t-xs); text-align: center; }
.lp-faq { margin-top: 14px; }
.lp-faq dt { margin-top: 16px; font-weight: 700; }
.lp-faq dd { margin-top: 4px; color: var(--thread-soft); font-size: var(--t-s); line-height: 1.55; }
.chip-radio { position: relative; }
.chip-radio input { position: absolute; opacity: 0; pointer-events: none; }
.chip-radio span { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 14px; border-radius: var(--pill); background: var(--sheet); box-shadow: inset 0 0 0 1px var(--fill-strong); font-size: var(--t-s); cursor: pointer; }
.chip-radio input:checked + span { background: var(--thread); color: #fff; box-shadow: none; }
.chip-radio input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.check { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: var(--t-s); line-height: 1.5; }
.consent-detail { margin: 6px 0 0 30px; font-size: var(--t-xs); color: var(--thread-soft); }
.consent-detail summary { cursor: pointer; text-decoration: underline; }
.lp-done { padding: 12px 0; }
.lp-foot { margin: 40px 0 24px; color: var(--thread-soft); font-size: var(--t-xs); line-height: 1.6; }
.lp-sec .two-inputs { grid-template-columns: 1fr 1fr; margin-top: 10px; }
.lp-sec .mini-field input { width: 100%; min-height: 48px; padding: 0 12px; border-radius: var(--r); border: 0; box-shadow: inset 0 0 0 1px var(--line); font: inherit; }

/* 개인정보 처리방침(/privacy) */
.policy { font-size: var(--t-sm); line-height: 1.7; padding-bottom: 40px; }
.policy .policy-h { font-size: var(--t-md, 17px); margin: 28px 0 8px; }
.policy p { margin: 8px 0; }
.policy-table { overflow-x: auto; margin: 10px 0; }
.policy-table table { border-collapse: collapse; width: 100%; font-size: var(--t-xs); }
.policy-table th, .policy-table td { border: 1px solid #DDE2E8; padding: 8px; text-align: left; vertical-align: top; }
.policy-table th { background: var(--accent-soft); }

/* 버튼으로 쓰는 step-row(분쟁 중 표시) */
button.step-row { width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.field select + .field-hint, .field select { margin-bottom: 6px; }

/* 약관·처리방침 링크 (2026-11-14) */
.policy-links { text-align: center; margin: 24px 0 8px; }
.policy-links a { color: inherit; }