/* 톡장부 — 밝은 바탕·높은 대비·큰 글자(40~60대 사장님, 폰 먼저) */
:root {
  --primary: #0f5f58;      /* 흰 글자 대비 7.4:1 */
  --primary-ink: #ffffff;
  --primary-soft: #e6f2f1;
  --accent: #b4430a;       /* 문의 버튼(흰 글자 5.6:1) */
  --accent-soft: #fdf0e8;
  --ink: #1b2625;
  --muted: #4f5d5c;        /* 흰 바탕 6.6:1 */
  --line: #d5dedd;
  --bg: #f6f8f7;
  --card: #ffffff;
  --warn: #8a5300;
  --warn-bg: #fff4dc;
  --warn-line: #f0c36d;
  --danger: #b42318;
  --ok: #1d6b34;
  --radius: 12px;
  --tap: 48px;
  font-size: 17px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere;
}
#app { max-width: 980px; margin: 0 auto; padding: 0 16px calc(88px + env(safe-area-inset-bottom)); }
h1 { font-size: 1.35rem; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 1.3rem; margin: 8px 0 6px; }
h3 { font-size: 1.08rem; margin: 22px 0 8px; }
h3 small { color: var(--muted); font-weight: 400; font-size: .9rem; }
a { color: var(--primary); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hint { color: var(--muted); margin: 4px 0 12px; font-size: .95rem; }
.row { display: flex; align-items: center; }
.wrap { flex-wrap: wrap; }
.gap { gap: 10px; }
.end { justify-content: flex-end; }

/* 머리 */
.top { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 8px; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { border-radius: 9px; }
.sub { margin: 0; color: var(--muted); font-size: .88rem; }
.trust { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 9px 12px; border-radius: 10px;
  background: var(--primary-soft); color: var(--primary); font-size: .92rem; font-weight: 600; }
.trust svg { flex: none; }

/* 탭: 폰은 아래 고정, 넓은 화면은 위 */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.tabs button { position: relative; min-height: 62px; border: 0; background: none; color: var(--muted); font: inherit; font-size: .78rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; padding: 6px 2px; }
.tabs svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabs button[aria-selected="true"] { color: var(--primary); font-weight: 700; }
.tabs button[aria-selected="true"]::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--primary); }
.badge { position: absolute; top: 6px; right: calc(50% - 26px); min-width: 20px; height: 20px; border-radius: 10px; background: var(--accent); color: #fff;
  font-size: .72rem; line-height: 20px; padding: 0 5px; }
@media (min-width: 760px) {
  #app { padding-bottom: 40px; }
  .tabs { position: sticky; top: 0; bottom: auto; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; }
  .tabs button { flex-direction: row; font-size: .95rem; min-height: 52px; gap: 8px; }
  .tabs button[aria-selected="true"]::before { top: auto; bottom: 0; border-radius: 3px 3px 0 0; }
  .badge { position: static; }
}

.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
@media (min-width: 760px) { .panel { padding: 22px 26px; } .hint { font-size: 1rem; } }

/* 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); padding: 0 18px;
  border-radius: 10px; border: 1.5px solid transparent; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s; -webkit-tap-highlight-color: transparent; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .tabs button:focus-visible, summary:focus-visible {
  outline: 3px solid #f5a623; outline-offset: 2px; }
.btn.primary { background: var(--primary); color: var(--primary-ink); }
.btn.primary:hover { background: #0b4b45; }
.btn.accent { background: var(--accent); color: #fff; }
.btn.accent:hover { background: #923607; }
.btn.ghost { background: var(--card); color: var(--primary); border-color: var(--primary); }
.btn.ghost:hover { background: var(--primary-soft); }
.btn.text { background: none; color: var(--muted); padding: 0 10px; }
.btn.danger { background: var(--card); color: var(--danger); border-color: var(--danger); }
.btn.big { min-height: 56px; font-size: 1.08rem; padding: 0 26px; }
.btn.small { min-height: 40px; padding: 0 12px; font-size: .9rem; }
.btn.icon { min-width: 44px; min-height: 44px; padding: 0; border-color: var(--line); color: var(--muted); background: var(--card); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* 입력 */
textarea, input, select { font: inherit; color: var(--ink); background: #fff; border: 1.5px solid #b9c6c4; border-radius: 10px; padding: 10px 12px; width: 100%; min-height: var(--tap); }
::placeholder { color: #8a9695; }
textarea { resize: vertical; line-height: 1.5; font-size: 1rem; }
#chat { min-height: 150px; height: 150px; margin-bottom: 12px; }
@media (min-width: 760px) { #chat { height: 220px; } }
.field { display: flex; flex-direction: column; gap: 4px; font-size: .92rem; color: var(--muted); }
.field > span { font-weight: 600; }
.field.inline { flex-direction: row; align-items: center; gap: 8px; }
.field.inline select, .field.inline input { width: auto; min-width: 140px; }
.grid2 { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid2 { grid-template-columns: 1fr 1fr; } .grid2 .wide { grid-column: 1 / -1; } }
.check { display: inline-flex; gap: 8px; align-items: center; min-height: var(--tap); cursor: pointer; }
.check input { width: 22px; height: 22px; min-height: 0; }
details { margin-top: 14px; }
details > summary { cursor: pointer; font-weight: 700; color: var(--primary); min-height: var(--tap); display: flex; align-items: center; }
.howto ol { margin: 6px 0 0; padding-left: 22px; }
.howto li { margin-bottom: 8px; }
.tpl .field { margin-top: 10px; }
.sheet-make { margin: 10px 0 14px; padding: 12px; border-radius: 12px; background: #eef7f4; border: 1.5px solid #9cc9bd; }
.sheet-make .field { margin: 8px 0; }
.promise { margin: 6px 0 14px; padding: 14px; border-radius: 12px; background: #eef7f4; border: 1.5px solid #9cc9bd; }
.promise b { display: block; font-size: 1.08rem; }
.promise .tpl-sample { font-family: inherit; font-weight: 600; display: block; margin: 8px 0; padding: 8px 10px; background: #fff; border-radius: 8px; font-size: .98rem; white-space: normal; word-break: keep-all; }
.promise p { margin: 0 0 10px; }
.pro-card { margin-top: 16px; padding: 14px; border: 1.5px dashed #b9c6c4; border-radius: 12px; }
.pro-card p { margin: 6px 0 10px; }
.bulk-ok { grid-column: 1 / -1; justify-self: start; }
#tpl-box { scroll-margin-top: 96px; }
.tpl .field select { margin-bottom: 6px; }
.tpl textarea[readonly], .tpl input[readonly] { background: #f6f8f7; }
.inline-details { margin-top: 0; flex-basis: 100%; }
.inline-details > summary { display: inline-flex; }

/* 문의 카드 */
.cta-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px;
  padding: 14px 16px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid #f2c7ad; }
.cta-card p { margin: 2px 0 0; color: #5c3a25; font-size: .93rem; }
.offer { margin-top: 24px; padding: 16px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid #f2c7ad; }
.offer h3 { margin-top: 0; }
.tiers { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.tiers li { background: #fff; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; }
.tiers span { color: var(--muted); font-size: .92rem; }

/* 정리 결과 */
.summary { margin: 0 0 8px; }
.summary b { font-size: 1.1rem; }
.notice { padding: 10px 12px; border-radius: 10px; margin: 8px 0; font-size: .94rem; }
.notice.warn { background: var(--warn-bg); border: 1px solid var(--warn-line); color: #5b3800; }
.notice.info { background: var(--primary-soft); color: #0b3f3a; }
.notice .btn { margin-top: 8px; }
.order { border: 1.5px solid var(--line); border-radius: var(--radius); margin: 14px 0; overflow: hidden; }
.order.flagged { border-color: var(--warn-line); }
.order.once { border-color: var(--primary); }
.order-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; padding: 12px 14px; background: #f9fbfa; border-bottom: 1px solid var(--line); }
.order-head .field { flex: 1 1 150px; }
.cust-note { flex-basis: 100%; margin: 0; color: var(--warn); font-weight: 700; font-size: .92rem; }
.order-head .total { margin-left: auto; text-align: right; font-weight: 800; font-size: 1.15rem; white-space: nowrap; }
.order-head .total small { display: block; font-weight: 500; color: var(--muted); font-size: .9rem; }
.lines { width: 100%; }
.line { display: grid; grid-template-columns: 1fr 74px 62px; gap: 6px 8px; padding: 10px 14px; border-bottom: 1px solid #edf1f0; align-items: center; }
.line:last-child { border-bottom: 0; }
.line .c-prod { grid-column: 1 / 2; }
.line .c-qty { grid-column: 2 / 3; }
.line .c-unit { grid-column: 3 / 4; }
.line .c-price { grid-column: 1 / 2; }
.line .c-amt { grid-column: 2 / 4; text-align: right; font-weight: 700; }
.line .c-del { position: absolute; }
.line input, .line select { min-height: 44px; padding: 8px 10px; }
.line .c-amt { white-space: nowrap; min-height: 44px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.line .meta { grid-column: 1 / -1; font-size: .95rem; color: var(--muted); }
.line .meta .src { display: block; }
.line .flags { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; }
.flag { display: flex; gap: 6px; align-items: flex-start; background: var(--warn-bg); color: #5b3800; border-radius: 8px; padding: 6px 9px; font-size: .94rem; font-weight: 600; }
.flag svg { flex: none; margin-top: 2px; }
.line.is-flag { background: #fffaf0; }
.note { color: var(--ok); font-size: .92rem; }
.mini { font-size: .88rem; color: var(--muted); display: block; margin-bottom: 2px; }
@media (min-width: 760px) {
  .line { grid-template-columns: minmax(150px, 2fr) 90px 80px 120px 150px 44px; }
  .line .c-prod, .line .c-qty, .line .c-unit, .line .c-price, .line .c-amt { grid-column: auto; }
  .line .mini { display: none; }
  .lines-head { display: grid; grid-template-columns: minmax(150px, 2fr) 90px 80px 120px 150px 44px; gap: 8px; padding: 8px 14px; font-size: .95rem; color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--line); }
}
@media (max-width: 759px) { .lines-head { display: none; } }
.add-line { margin: 10px 14px 14px; }
.result-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.result-actions .btn { flex: 1 1 150px; }
/* 처음 방문 */
.first-time { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; margin-bottom: 12px;
  border-radius: var(--radius); background: var(--accent-soft); border: 1px solid #f2c7ad; }
/* 장부 */
.seg { display: inline-flex; border: 1.5px solid var(--primary); border-radius: 10px; overflow: hidden; margin: 6px 0 12px; }
.seg button { min-height: 44px; padding: 0 18px; border: 0; background: #fff; color: var(--primary); font: inherit; font-weight: 700; cursor: pointer; }
.seg button[aria-selected="true"] { background: var(--primary); color: #fff; }
.filters { margin-bottom: 10px; }
.card-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid #edf1f0; }
.card-row .who { font-weight: 800; font-size: 1.05rem; flex: 1 1 160px; }
.card-row .who small { display: block; font-weight: 500; color: var(--muted); font-size: .85rem; }
.card-row .amt { font-weight: 800; font-size: 1.08rem; white-space: nowrap; }
.pay-status { font-weight: 800; font-size: .92rem; padding: 4px 10px; border-radius: 6px; }
.pay-status.unpaid { color: var(--danger); background: #fdecea; }
.pay-status.paid { color: var(--ok); background: #e7f4ea; }
.warn-small { display: block; color: #7a4600; font-size: .9rem; font-weight: 800; }
.card-row .who small.warn-small { color: #7a4600; font-weight: 800; }
.unpaid-sum { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; }
.unpaid-sum .amt { text-align: right; white-space: nowrap; font-weight: 800; font-size: 1.08rem; }
.unpaid-sum .who { font-weight: 800; font-size: 1.05rem; flex: 1 1 auto; }
.unpaid-sum .who small { display: block; font-weight: 500; color: var(--muted); font-size: .88rem; }
.card-row .amt small { white-space: normal; }
.paid-toggle { min-height: 40px; padding: 0 14px; border-radius: 20px; font: inherit; font-weight: 700; cursor: pointer; border: 1.5px solid var(--danger); color: var(--danger); background: #fff; }
.paid-toggle[aria-pressed="true"] { border-color: var(--ok); color: #fff; background: var(--ok); }
.empty { color: var(--muted); padding: 16px 0; }
.sum-box { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 10px; background: var(--warn-bg); margin: 8px 0; font-weight: 800; }

/* 사전 */
.list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.item { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (max-width: 759px) { .item.cust .field { grid-column: 1 / -1; } .item.prod { grid-template-columns: 1fr 1fr; } .item.prod .field:nth-child(2) { grid-column: 1 / -1; order: 3; } .item.prod .check, .item.prod > .btn { order: 4; } .item.cust { grid-template-columns: 1fr; } }
@media (min-width: 760px) { .item.prod { grid-template-columns: 1.2fr 1.4fr 1.6fr auto auto; align-items: end; } .item.cust { grid-template-columns: 1.2fr 1.6fr 2fr auto; align-items: end; } }
.item .field { font-size: .85rem; }
.item input { min-height: 44px; padding: 8px 10px; }
.item .check { min-height: 44px; font-size: .9rem; }

.foot { color: var(--muted); font-size: .95rem; padding: 4px 4px 20px; }
.flag-text { color: var(--warn); }
.ver { color: var(--muted); font-size: .9rem; }

#toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: #1b2625; color: #fff;
  padding: 12px 18px; border-radius: 12px; z-index: 50; max-width: calc(100% - 32px); font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
dialog { border: 0; border-radius: 16px; padding: 0; width: min(520px, calc(100% - 32px)); box-shadow: 0 12px 40px rgba(0,0,0,.3); }
dialog::backdrop { background: rgba(0,0,0,.45); }
.dlg-inner { padding: 20px; }
.dlg-inner h3 { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- 인쇄: 거래명세서 ---------- */
#print { display: none; }
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; font-size: 10.5pt; }
  #app, #toast, dialog { display: none !important; }
  #print { display: block; }
  .inv { page-break-after: always; break-after: page; color: #000; }
  .inv:last-child { page-break-after: auto; break-after: auto; }
}
.inv h1 { text-align: center; font-size: 20pt; letter-spacing: .5em; margin: 0 0 2mm; }
.inv .copy { text-align: center; margin: 0 0 4mm; font-size: 9.5pt; }
.inv table { width: 100%; border-collapse: collapse; }
.inv td, .inv th { border: 1px solid #000; padding: 1.6mm 2mm; vertical-align: middle; }
.inv th { background: #eef3f2; font-weight: 700; }
.inv .parties { margin-bottom: 3mm; }
.inv .parties th.side { width: 7mm; writing-mode: vertical-rl; text-align: center; letter-spacing: .3em; }
.inv .parties .k { width: 20mm; background: #f6f8f7; font-weight: 700; text-align: center; }
.inv .sumline { margin: 2mm 0 3mm; border: 1.5px solid #000; padding: 2.5mm 3mm; display: flex; justify-content: space-between; font-weight: 700; font-size: 11.5pt; }
.inv .items td.n { text-align: right; white-space: nowrap; }
.inv .items td.c { text-align: center; }
.inv .items tfoot td { font-weight: 700; }
.inv .bottom { margin-top: 3mm; display: flex; justify-content: space-between; gap: 6mm; font-size: 9.5pt; }
.inv .inv-warn { margin: 0 0 2mm; font-size: 9.5pt; font-weight: 700; }
.inv .meta-line { font-size: 9.5pt; margin: 0 0 2mm; display: flex; justify-content: space-between; }
/* 거래처 주문서 */
.sh-days { margin: 6px 0 12px; }
.sh-list { display: grid; gap: 8px; margin: 10px 0 14px; }
.sh-row { display: grid; grid-template-columns: 1fr 96px 84px; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--line, #d9e2e0); border-radius: 10px; background: #fff; }
.sh-row .sh-name { font-weight: 600; word-break: keep-all; }
.sh-row input { text-align: right; }
.sh-unit { color: #44514f; }
.sh-preview { margin: 10px 0; padding: 10px 12px; background: #f6f8f7; border-radius: 10px; }
.sh-preview pre { white-space: pre-wrap; word-break: break-all; font: inherit; margin: 6px 0 0; }
.sheet-page .app { max-width: 720px; margin: 0 auto; padding: 0 16px; }
.sheet-page .top { padding-left: 0; padding-right: 0; }
/* 글자 크게(5060) */
body.big { font-size: 1.15rem; }
body.big .btn { font-size: 1.08rem; min-height: 52px; }
body.big input, body.big select, body.big textarea { font-size: 1.12rem; }
.refer { margin: 14px 0; padding: 12px; border-radius: 12px; background: #fff7ef; border: 1.5px solid #f0c9a8; }
.refer p { margin: 6px 0 10px; }
#btn-big { white-space: nowrap; flex-shrink: 0; }
/* 주문서 뒤 말·메모 — 주문 단위 한 번 확인(10/24 약속 ①) */
.once-box { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.once-box > div { flex: 1 1 220px; }
.once-box p { margin: 4px 0 0; word-break: break-all; }
.once-box .once-ok { flex: 1 1 100%; }
.once-box { background: #eef7f5; border: 2px solid var(--primary); color: #0b3f3a; }
.once-text { color: var(--primary); font-weight: 800; }
.auto-badge { display: inline-block; align-self: center; padding: 4px 10px; border-radius: 999px; background: #e7f4ea; color: var(--ok); font-weight: 800; font-size: .9rem; }
.card-row .who small.once-small, .once-small { display: block; color: var(--primary); font-weight: 800; font-size: .9rem; }
.ok-text { color: var(--ok); font-weight: 700; }
.before-after { background: var(--primary-soft); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; font-size: .95rem; }