:root { --bg:#f6f7f9; --fg:#1d2733; --muted:#6a7787; --line:#d9dee5; --card:#fff; --accent:#1f5eff; --warn:#fff4d6; --warnfg:#7a5400; --bad:#fde8e8; --badfg:#9b1c1c; --ok:#e6f6ec; --okfg:#176b3a; --prov:#fff0c2; }
@media (prefers-color-scheme: dark) { :root { --bg:#12161c; --fg:#e6ebf1; --muted:#93a0b0; --line:#2b3440; --card:#1b222b; --accent:#6c93ff; --warn:#3b3114; --warnfg:#f2d27a; --bad:#3d1f1f; --badfg:#f1a3a3; --ok:#16301f; --okfg:#8fd6a8; --prov:#3b3114; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:14px/1.45 system-ui, "Malgun Gothic", sans-serif; }
header { display:flex; gap:12px; align-items:center; padding:8px 16px; background:var(--card); border-bottom:1px solid var(--line); flex-wrap:wrap; }
header nav { display:flex; gap:4px; flex:1; }
button, input, select { font:inherit; color:inherit; background:var(--card); border:1px solid var(--line); border-radius:6px; padding:5px 10px; }
button { cursor:pointer; } button:disabled { opacity:.5; cursor:default; }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
button.link { border:0; background:none; color:var(--accent); }
nav button.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.notice { margin:8px 16px; color:var(--muted); font-size:12.5px; }
section { padding:0 16px 24px; }
.bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0; }
.seg button { border-radius:0; margin-left:-1px; } .seg button.on { background:var(--accent); color:#fff; }
.muted { color:var(--muted); font-size:12.5px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px 16px; margin:12px 0; }
.card.narrow { max-width:360px; margin:12vh auto; } .card label { display:block; margin:8px 0; } .card input { width:100%; }
.row { display:flex; gap:8px; flex-wrap:wrap; } .row input, .row select { flex:1 1 140px; }
.err { color:var(--badfg); min-height:1.2em; }
.tablewrap { overflow:auto; max-height:68vh; border:1px solid var(--line); border-radius:8px; background:var(--card); }
table { border-collapse:collapse; width:100%; }
th, td { padding:3px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
thead th { position:sticky; top:0; background:var(--card); z-index:2; }
tr.cat td { background:var(--bg); font-weight:700; position:sticky; }
td.prod { white-space:nowrap; } td.prod .p { font-weight:600; } td.prod .o { color:var(--muted); margin-left:6px; }
td.cell { min-width:92px; } td.cell input { width:72px; text-align:right; padding:3px 6px; }
td.cell small { display:block; color:var(--muted); font-size:11px; }
td.cell.unset { background:var(--warn); } td.cell.unset small { color:var(--warnfg); }
td.cell.prov small::after { content:" · 잠정"; color:var(--warnfg); }
td.cell.dirty input { border-color:var(--accent); background:var(--ok); }
td.cell.stale small::after { content:" · 단가 변경됨"; color:var(--badfg); }
tr.addon td.prod .p { font-weight:400; }
.sums { display:flex; gap:12px; flex-wrap:wrap; margin:8px 0; }
.sums .box { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:6px 12px; min-width:150px; }
.sums .box b { display:block; font-size:16px; } .sums .box span { color:var(--muted); font-size:12px; }
.banner { padding:8px 12px; border-radius:8px; margin:6px 0; } .banner.warn { background:var(--warn); color:var(--warnfg); } .banner.bad { background:var(--bad); color:var(--badfg); } .banner.ok { background:var(--ok); color:var(--okfg); }
.savebar { position:sticky; bottom:0; background:var(--bg); padding:8px 0; }
dialog { border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--fg); max-width:560px; width:92vw; }
dialog label { display:block; margin:8px 0; } dialog input, dialog select, dialog textarea { width:100%; }
dialog menu { display:flex; gap:8px; justify-content:flex-end; padding:0; }
#toast { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); background:#1d2733; color:#fff; padding:8px 14px; border-radius:8px; opacity:0; transition:opacity .2s; pointer-events:none; }
#toast.show { opacity:1; }
.badge { padding:1px 6px; border-radius:10px; font-size:11px; background:var(--prov); color:var(--warnfg); } .badge.ok { background:var(--ok); color:var(--okfg); } .badge.none { background:var(--bad); color:var(--badfg); }
@media (max-width: 640px) { td.cell input { width:56px; } header { padding:6px 10px; } section { padding:0 8px 24px; } }

.datebar { padding:0 16px; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:12px; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
.st { padding:1px 8px; border-radius:10px; font-size:12px; white-space:nowrap; } .st.ok { background:var(--ok); color:var(--okfg); } .st.diff, .st.review { background:var(--bad); color:var(--badfg); } .st.not_entered { background:var(--warn); color:var(--warnfg); } .st.holiday { background:var(--bg); color:var(--muted); border:1px solid var(--line); }
tr.total td { font-weight:700; border-top:2px solid var(--line); } .diffbig { font-size:18px; font-weight:700; }

/* ───────── +/- 입력, 태블릿·모바일·PC 반응형 ───────── */
button { touch-action: manipulation; }
.stp { display:flex; align-items:center; gap:4px; }
.stp button { width:44px; height:44px; font-size:22px; line-height:1; padding:0; border-radius:8px; }
.stp button.plus { background:var(--accent); color:#fff; border-color:var(--accent); }
td.cell .stp input { width:58px; height:44px; text-align:center; font-size:17px; padding:0; }
td.cell small { margin-top:2px; }
.chips { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0; } .chips button.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.mobileonly { display:none; }
#tapInfo.warnfg { color:var(--warnfg); font-weight:700; }
nav#tabs { overflow-x:auto; white-space:nowrap; scrollbar-width:thin; }
nav#tabs button { flex:0 0 auto; }
@media (max-width: 759px) {
  body { font-size:15px; }
  input, select, button { font-size:16px; }
  .mobileonly { display:flex; }
  #patronSel button { flex:1; padding:10px 0; font-size:16px; }
  #grid[data-only="customer"] [data-p]:not([data-p="customer"]),
  #grid[data-only="caddy"] [data-p]:not([data-p="caddy"]),
  #grid[data-only="staff"] [data-p]:not([data-p="staff"]) { display:none; }
  .stp button { width:48px; height:48px; } td.cell .stp input { width:64px; height:48px; font-size:18px; }
  td.cell { min-width:0; } td.prod { white-space:normal; } td.prod .o { display:block; margin-left:0; }
  .tablewrap { max-height:60vh; }
  .sums { flex-wrap:nowrap; overflow-x:auto; } .sums .box { min-width:140px; flex:0 0 auto; }
  header { gap:6px; } header strong { flex:1 0 100%; } header nav { flex:1 0 100%; order:3; } #who { font-size:12px; }
  .datebar { padding:0 8px; } .datebar input[type=date] { flex:1; }
  .grid2 { grid-template-columns:1fr; } .row input, .row select { flex:1 1 100%; }
  .savebar { padding:8px 8px calc(8px + env(safe-area-inset-bottom)); } #saveBtn { flex:1; padding:12px; }
  dialog { width:96vw; } table { font-size:13px; } th, td { padding:3px 5px; }
}
@media (min-width: 760px) and (max-width: 1099px) {  /* 태블릿: 세 이용구분을 모두 보여 주되 터치 크기 유지 */
  .stp button { width:46px; height:46px; } td.cell .stp input { width:60px; height:46px; }
  .tablewrap { max-height:64vh; }
}
@media (hover: none) { button:hover { filter:none; } }

.pn { display:none; }
@media (max-width: 759px) { .pn { display:block; font-weight:600; font-size:13px; } }

.st.imported { background:var(--bg); color:var(--okfg); border:1px solid var(--okfg); }
#impReport table { margin:6px 0 14px; } code { background:var(--bg); padding:1px 4px; border-radius:4px; }

/* 표 머리글·짧은 열은 줄바꿈하지 않고, 좁은 화면에서는 표를 가로로 스크롤한다 */
.tablewrap th, #impReport th { white-space:nowrap; }
#impReport td:nth-child(-n+3), #mgrid td:not(:last-child), #batchGrid td { white-space:nowrap; }
#impReport { overflow-x:auto; }

/* ───────── 분석 화면 (데이터 시각화) ───────── */
.viz { --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a; --viz-ink:#0b0b0b; --viz-ink2:#52514e; --viz-muted:#898781; --viz-grid:#e1e0d9; --viz-axis:#c3c2b7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .viz { --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70; --viz-ink:#ffffff; --viz-ink2:#c3c2b7; --viz-muted:#898781; --viz-grid:#2c2c2a; --viz-axis:#383835; } }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin:10px 0; }
.kpi { position:relative; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; }
.kpi .kl { color:var(--viz-ink2, var(--muted)); font-size:12.5px; } .kpi b { font-size:22px; line-height:1.2; } .kpi .ks { color:var(--muted); font-size:12px; } .kpi .kd { position:absolute; top:8px; right:10px; color:var(--muted); cursor:help; }
.vcard { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:12px 0; min-width:0; }
.vcard h3 { margin:0 0 8px; font-size:15px; }
.right { text-align:right; }
.def { margin-top:8px; font-size:12.5px; color:var(--muted); } .def summary { cursor:pointer; } .def dl { display:grid; grid-template-columns:90px 1fr; gap:2px 10px; margin:6px 0 0; } .def dt { font-weight:700; } .def dd { margin:0; }
.chart { width:100%; height:auto; display:block; } .chart .grid { stroke:var(--viz-grid); stroke-width:1; } .chart .axis { stroke:var(--viz-axis); stroke-width:1; } .chart .tick { fill:var(--viz-muted); font-size:11px; }
.hbars { display:flex; flex-direction:column; gap:7px; } .hrow { display:grid; grid-template-columns:minmax(80px,150px) 1fr minmax(70px,auto); gap:8px; align-items:center; }
.hrow .hl { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; } .hrow .ht { background:var(--bg); border-radius:4px; height:12px; overflow:hidden; } .hrow .hb { display:block; height:100%; border-radius:0 4px 4px 0; } .hrow .hv { text-align:right; font-variant-numeric:tabular-nums; font-size:13px; }
.viz-tip { position:absolute; z-index:50; display:none; background:#1d2733; color:#fff; padding:5px 9px; border-radius:6px; font-size:12px; pointer-events:none; max-width:220px; }
.filters .seg button { padding:6px 10px; } .filters { align-items:center; }
@media (max-width: 759px) { .kpis { grid-template-columns:repeat(2,1fr); } .kpi b { font-size:18px; } .hrow { grid-template-columns:90px 1fr auto; } .def dl { grid-template-columns:1fr; } .def dt { margin-top:4px; } }
.vcard td, .vcard th { white-space:nowrap; } .kpi .kl { padding-right:18px; }

.envbanner { background:#b42318; color:#fff; text-align:center; padding:6px 10px; font-weight:700; position:sticky; top:0; z-index:60; }
.guide { max-width:860px; line-height:1.7; } .guide h1 { font-size:20px; } .guide h2 { font-size:17px; margin-top:22px; border-bottom:1px solid var(--line); padding-bottom:4px; } .guide h3 { font-size:15px; }
.guide table { margin:8px 0; } .guide code, .guide pre { background:var(--bg); border-radius:4px; } .guide pre { padding:8px 10px; overflow-x:auto; } .guide li { margin:2px 0; }

[hidden] { display:none !important; }