/* Shop Manager operator console. Hand-written, no framework, no external fonts or CDNs.
   One token set (light and dark), one card, one table, one badge set: the console is dense
   operational data, so every panel has to line up without inventing a spacing or colour.
   The owner reads it on a phone as often as on a desktop, so the layout is phone-first:
   the five sections become a bottom tab bar and wide tables turn into cards (.stack). */

:root{
  color-scheme:light dark;
  /* light: surfaces climb page < panel; inset is the well inside a panel */
  --bg:#eef2f7;--surface:#ffffff;--surface-2:#e8edf5;--inset:#f4f6fa;
  --border:#bcc7d8;--border-soft:#d8e0ec;--control-border:#7a889e;
  --text:#101827;--text-muted:#45546b;--text-dim:#5a6a82;
  --link:#1559c4;--primary:#1b5fd1;--primary-hover:#144db0;--on-primary:#ffffff;
  --primary-soft:rgba(27,95,209,.10);
  --success:#0b7342;--success-soft:rgba(11,115,66,.11);--success-line:rgba(11,115,66,.35);
  --warning:#8a5600;--warning-soft:rgba(190,120,0,.14);--warning-line:rgba(138,86,0,.4);
  --danger:#b8242a;--danger-solid:#b8242a;--danger-soft:rgba(184,36,42,.10);--danger-line:rgba(184,36,42,.38);
  --info:#0a6679;--info-soft:rgba(10,102,121,.11);--info-line:rgba(10,102,121,.35);
  --track:#d3dbe8;
  --shadow:0 1px 2px rgba(16,24,39,.08),0 6px 18px rgba(16,24,39,.06);
  /* spacing: 4px base */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
  /* type: nothing between these steps */
  --t-xs:.75rem;--t-sm:.8125rem;--t-md:.9375rem;--t-lg:1.0625rem;--t-xl:1.375rem;--t-num:1.625rem;--t-hero:2.25rem;
  --radius:12px;--radius-sm:8px;--radius-pill:999px;
  --nav-h:52px;--tabbar-h:60px;
  /* Pretendard and Apple SD Gothic Neo first: Korean glyphs are drawn by the
     phone's own Korean face, Latin and digits fall back to the system face. */
  --sans:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code","D2Coding",Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0a0f16;--surface:#121923;--surface-2:#1b2432;--inset:#0d141d;
    --border:#33415a;--border-soft:#222d3e;--control-border:#6b7b96;
    --text:#e8edf5;--text-muted:#a8b5c9;--text-dim:#8b9ab0;
    --link:#7db3ff;--primary:#2f6ae0;--primary-hover:#2558c4;--on-primary:#ffffff;
    --primary-soft:rgba(88,150,255,.15);
    --success:#45d393;--success-soft:rgba(69,211,147,.13);--success-line:rgba(69,211,147,.38);
    --warning:#f5b544;--warning-soft:rgba(245,181,68,.13);--warning-line:rgba(245,181,68,.4);
    --danger:#ff8184;--danger-solid:#c4363c;--danger-soft:rgba(255,129,132,.13);--danger-line:rgba(255,129,132,.4);
    --info:#52d2e4;--info-soft:rgba(82,210,228,.12);--info-line:rgba(82,210,228,.36);
    --track:#243044;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.3);
  }
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.55;font-size:var(--t-md);-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:anywhere}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.3}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--radius-sm)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--primary);color:var(--on-primary);padding:var(--s2) var(--s4);border-radius:0 0 var(--radius-sm) 0;font-weight:700}
.skip-link:focus{left:0;text-decoration:none}

/* ---------- app shell ---------- */
.app-header{position:sticky;top:0;z-index:100;background:var(--surface);border-bottom:1px solid var(--border-soft);padding:0 var(--s4);min-height:var(--nav-h);display:flex;align-items:center;gap:var(--s4)}
.app-brand{font-size:var(--t-md);font-weight:800;color:var(--text);letter-spacing:-.02em;white-space:nowrap}
.app-nav{display:flex;gap:var(--s1);align-items:center;flex:1}
.app-nav a{color:var(--text-muted);padding:var(--s2) var(--s3);border-radius:var(--radius-sm);font-size:var(--t-md);font-weight:600;white-space:nowrap;transition:background .15s,color .15s}
.app-nav a:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.app-nav a.current{background:var(--primary-soft);color:var(--link);box-shadow:inset 0 -2px 0 var(--primary)}
.logout-btn{background:transparent;color:var(--text-muted);border:1px solid var(--control-border);padding:var(--s2) var(--s3);border-radius:var(--radius-sm);font-size:var(--t-sm);font-weight:600}
.logout-btn:hover:not(:disabled){background:var(--danger-soft);color:var(--danger);border-color:var(--danger-line)}
.wrap{max-width:1320px;margin:0 auto;padding:var(--s5) var(--s4) var(--s6)}

.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s4);flex-wrap:wrap}
.page-heading h1{font-size:var(--t-xl);font-weight:800;color:var(--text);letter-spacing:-.02em}
.page-heading p{font-size:var(--t-sm);color:var(--text-muted);margin-top:var(--s1)}
.crumbs{display:flex;gap:var(--s2);align-items:center;font-size:var(--t-sm);color:var(--text-muted);margin-bottom:var(--s2);flex-wrap:wrap}
.crumbs a{color:var(--text-muted)}
.crumbs span[aria-hidden]{color:var(--text-dim)}

.section-tabs{display:flex;gap:var(--s1);margin-bottom:var(--s4);overflow-x:auto;border-bottom:1px solid var(--border-soft);scrollbar-width:none}
.section-tabs::-webkit-scrollbar{display:none}
.section-tab{padding:var(--s2) var(--s3);font-size:var(--t-sm);font-weight:600;color:var(--text-muted);white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.section-tab:hover{color:var(--text);text-decoration:none}
.section-tab.current{color:var(--text);border-bottom-color:var(--primary)}

/* ---------- panels ---------- */
.panel{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);padding:var(--s4);margin-bottom:var(--s4);box-shadow:var(--shadow)}
.panel h2{font-size:var(--t-lg);font-weight:700;color:var(--text);margin-bottom:var(--s2)}
.panel h3{font-size:var(--t-md);font-weight:700;color:var(--text);margin:var(--s4) 0 var(--s2)}
.panel>p+*{margin-top:var(--s3)}
.muted{color:var(--text-muted);font-size:var(--t-sm)}
.impact-warning{color:var(--warning);font-size:var(--t-sm);line-height:1.45;margin-top:var(--s2);font-weight:600}
.cp-head,.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2) var(--s3);flex-wrap:wrap;margin-bottom:var(--s3)}
.cp-head h2,.panel-head h2{margin:0}
.actions{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}
.actions a{display:inline-flex;align-items:center;min-height:40px;padding:var(--s2) var(--s3);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text);font-size:var(--t-sm);font-weight:600;border:1px solid var(--border-soft)}
.actions a:hover{border-color:var(--primary);color:var(--link);text-decoration:none}
.link-muted{color:var(--text);font-weight:600}
.link-muted:hover{color:var(--link)}

/* long explanations stay available but do not push the numbers off the screen */
details.help{margin:var(--s2) 0}
details.help>summary{cursor:pointer;color:var(--text-muted);font-size:var(--t-sm);font-weight:600;padding:var(--s1) 0;list-style:none}
details.help>summary::-webkit-details-marker{display:none}
details.help>summary::before{content:"\25B8  ";color:var(--text-dim)}
details.help[open]>summary::before{content:"\25BE  "}
details.help>p{margin-top:var(--s2);color:var(--text-muted);font-size:var(--t-sm);line-height:1.6}
details.fold{border:1px solid var(--border-soft);border-radius:var(--radius-sm);background:var(--inset);margin-top:var(--s3)}
details.fold>summary{cursor:pointer;padding:var(--s3);font-weight:700;font-size:var(--t-sm);list-style:none;display:flex;gap:var(--s2);align-items:baseline;flex-wrap:wrap;min-height:44px}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::before{content:"\25B8";color:var(--text-dim)}
details.fold[open]>summary::before{content:"\25BE"}
details.fold>.fold-body{padding:0 var(--s3) var(--s3)}
details.panel>summary{cursor:pointer;min-height:44px;display:flex;gap:var(--s2);align-items:baseline;flex-wrap:wrap}

/* loading placeholder: the channel roll-up takes seconds, so say so */
.skeleton .skeleton-bar{height:12px;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--surface-2),var(--inset),var(--surface-2));background-size:200% 100%;animation:shimmer 1.4s linear infinite;margin-top:var(--s3)}
.skeleton .skeleton-bar.short{width:55%}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.skeleton .skeleton-bar{animation:none}.toast.show{animation:none}}

/* ---------- numbers: one tile for every metric ---------- */
.kpi-row,.cards,.metric-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s2);margin-bottom:var(--s3)}
.kpi,.card,.metric{background:var(--inset);border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:var(--s3);display:flex;flex-direction:column;gap:2px;min-width:0}
.kpi-label,.card-label,.metric>span{font-size:var(--t-xs);font-weight:600;color:var(--text-muted)}
.kpi-value,.card-value,.metric>strong{font-size:var(--t-num);font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.15;letter-spacing:-.02em}
.kpi-note{font-size:var(--t-xs);color:var(--text-dim);font-variant-numeric:tabular-nums}
.kpi.ok .kpi-value,.card.ok .card-value{color:var(--success)}
.kpi.warn .kpi-value,.card.warn .card-value{color:var(--warning)}
.kpi.danger .kpi-value,.card.danger .card-value{color:var(--danger)}
.kpi.info .kpi-value,.card.info .card-value{color:var(--info)}
.kpi.accent{border-color:var(--primary);background:var(--primary-soft)}
.kpi-row.small .kpi-value{font-size:var(--t-lg)}
a.kpi{color:inherit}
a.kpi:hover{text-decoration:none;border-color:var(--primary)}

/* a gauge: how much of a cap is used. <progress> keeps the value readable by
   screen readers and needs no inline style. */
.gauge-block{margin:var(--s3) 0}
.gauge-top{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap}
.gauge-num{font-size:var(--t-hero);font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.gauge-of{font-size:var(--t-md);color:var(--text-muted);font-variant-numeric:tabular-nums}
.gauge-top .badge{margin-left:auto}
progress.gauge{appearance:none;-webkit-appearance:none;display:block;width:100%;height:10px;border:0;border-radius:var(--radius-pill);background:var(--track);overflow:hidden;margin:var(--s2) 0}
progress.gauge::-webkit-progress-bar{background:var(--track);border-radius:var(--radius-pill)}
progress.gauge::-webkit-progress-value{background:var(--success);border-radius:var(--radius-pill)}
progress.gauge::-moz-progress-bar{background:var(--success);border-radius:var(--radius-pill)}
progress.gauge.warn::-webkit-progress-value{background:var(--warning)}
progress.gauge.warn::-moz-progress-bar{background:var(--warning)}
progress.gauge.danger::-webkit-progress-value{background:var(--danger)}
progress.gauge.danger::-moz-progress-bar{background:var(--danger)}
progress.gauge.primary::-webkit-progress-value{background:var(--link)}
progress.gauge.primary::-moz-progress-bar{background:var(--link)}
progress.gauge.thin{height:6px;margin:var(--s1) 0 0}
.gauge-sub{font-size:var(--t-sm);color:var(--text-muted);font-variant-numeric:tabular-nums}
.slot-bar{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.slot-bar progress.gauge{flex:1;min-width:110px;margin:0;height:8px}
.slot-num{font-size:var(--t-xs);color:var(--text-muted);font-variant-numeric:tabular-nums}

/* definition grid of small facts (dt label, dd value) */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--s2);margin:var(--s3) 0}
.stat{background:var(--inset);border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:var(--s2) var(--s3);min-width:0}
.stat dt{font-size:var(--t-xs);font-weight:600;color:var(--text-muted)}
.stat dd{font-size:var(--t-lg);font-weight:800;font-variant-numeric:tabular-nums;line-height:1.3}
.stat dd small{font-size:var(--t-xs);font-weight:500;color:var(--text-dim);margin-left:var(--s1)}
.stat.warn dd{color:var(--warning)}.stat.danger dd{color:var(--danger)}.stat.ok dd{color:var(--success)}
a.stat{color:inherit;display:block}
a.stat:hover{text-decoration:none;border-color:var(--primary)}
dl.facts{display:grid;grid-template-columns:max-content 1fr;gap:var(--s1) var(--s4);font-size:var(--t-sm)}
dl.facts dt{color:var(--text-muted);font-weight:600}
dl.facts dd{min-width:0}

/* ---------- store cards (overview) ---------- */
.store-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:var(--s4);margin-bottom:var(--s4)}
.store-card{margin-bottom:0}
.store-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap}
.store-head h2{margin:0;font-size:var(--t-xl);letter-spacing:-.02em}
.reason-list{list-style:none;display:flex;flex-direction:column;gap:var(--s1);margin:var(--s2) 0}
.reason-list li{display:grid;grid-template-columns:1fr auto;gap:0 var(--s3);align-items:baseline;padding:var(--s2) var(--s3);background:var(--inset);border:1px solid var(--border-soft);border-radius:var(--radius-sm)}
.reason-list li:hover{border-color:var(--primary)}
.reason-list a.reason-name{color:var(--text);font-weight:600;min-height:24px}
.reason-list .reason-count{font-weight:800;font-variant-numeric:tabular-nums;text-align:right}
.reason-list .reason-meta{grid-column:1 / -1;display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;font-size:var(--t-xs);color:var(--text-muted)}
.reason-list progress.gauge{grid-column:1 / -1}
.section-label{font-size:var(--t-xs);font-weight:700;color:var(--text-muted);letter-spacing:.04em;margin:var(--s4) 0 var(--s1)}
.callout{display:flex;gap:var(--s2);align-items:baseline;flex-wrap:wrap;padding:var(--s2) var(--s3);border-radius:var(--radius-sm);border:1px solid var(--border-soft);background:var(--inset);font-size:var(--t-sm);margin:var(--s2) 0}
.callout.warn{border-color:var(--warning-line);background:var(--warning-soft)}
.callout.danger{border-color:var(--danger-line);background:var(--danger-soft)}
.callout.info{border-color:var(--info-line);background:var(--info-soft)}
.callout.ok{border-color:var(--success-line);background:var(--success-soft)}
.callout strong{font-weight:700}

/* ---------- status badges: colour never carries the meaning alone ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:var(--radius-pill);font-size:var(--t-xs);font-weight:700;white-space:nowrap;border:1px solid transparent;line-height:1.5}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.badge-ok,.badge-completed{background:var(--success-soft);color:var(--success);border-color:var(--success-line)}
.badge-warn{background:var(--warning-soft);color:var(--warning);border-color:var(--warning-line)}
.badge-warn::before{border-radius:1px;transform:rotate(45deg)}
.badge-error,.badge-failed{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-line)}
.badge-error::before,.badge-failed::before{border-radius:1px}
.badge-info{background:var(--info-soft);color:var(--info);border-color:var(--info-line)}
.badge-running{background:var(--primary-soft);color:var(--link);border-color:var(--primary)}
.badge-running::before{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){.badge-running::before{animation:none}}
.badge-neutral,.badge-queued,.badge-cancelled,.badge-idle{background:var(--surface-2);color:var(--text-muted);border-color:var(--border-soft)}
.badge-queued::before,.badge-idle::before{background:transparent;border:1.5px solid currentColor}

/* ---------- tables ---------- */
.table-wrap{overflow:auto;max-height:70vh;border:1px solid var(--border-soft);border-radius:var(--radius-sm);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
thead th{position:sticky;top:0;z-index:1;background:var(--surface-2);color:var(--text-muted);font-size:var(--t-xs);font-weight:700;padding:var(--s2) var(--s3);border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
tbody td{padding:var(--s2) var(--s3);border-bottom:1px solid var(--border-soft);vertical-align:top}
tbody tr:hover{background:var(--primary-soft)}
tbody tr:last-child td{border-bottom:none}
th.num,td.num,td.tnum{text-align:right}
th.num{text-align:right}
.tnum,td.num,.num,.code{font-variant-numeric:tabular-nums}
.code{white-space:nowrap}
.mono{font-family:var(--mono);font-size:.92em}
.empty,td.empty{color:var(--text-dim);text-align:center;padding:var(--s5)}
.diagnostic,.status-list{white-space:normal;min-width:12rem;max-width:26rem;overflow-wrap:anywhere;line-height:1.5}
.margin-table .margin-amt{font-weight:700;color:var(--success)}
.margin-table .margin-amt.warn{color:var(--warning)}
.margin-table .margin-amt.danger{color:var(--danger)}
.margin-table .margin-rate{color:var(--text-muted)}
.margin-table .purchase-price{color:var(--text-muted)}
.margin-table .sale-price{font-weight:600}
.suspend-table td:first-child{font-weight:600}
.rule-table{min-width:64rem}
.rule-table td{white-space:nowrap}
.rule-table td:first-child{min-width:10rem;max-width:18rem;white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
.rule-table .rule-scope{min-width:12rem;white-space:normal;word-break:keep-all;font-size:var(--t-sm);color:var(--text-muted)}
.rule-table .rule-input{min-width:0}
.rule-table select[name=enabled],.rule-table input[name=rounding_unit]{min-width:5.5rem}
.rule-actions{display:flex;gap:var(--s1);flex-wrap:wrap}
.rule-inline-form{display:inline}
.rule-edit-row .rule-scope-edit{display:flex;flex-direction:column;gap:2px}
.matrix-table{min-width:26rem}
.matrix-table td{white-space:nowrap}
.matrix-table th:not(:first-child),.matrix-table td:not(:first-child){text-align:center}
.matrix-rate{font-weight:700;color:var(--success)}
.matrix-empty{font-size:var(--t-xs);padding:2px var(--s2)}
.supplier-matrix{margin-bottom:var(--s4)}
.supplier-matrix h3{margin-top:0}
.pager{display:flex;align-items:center;justify-content:center;gap:var(--s3);margin-top:var(--s3)}
.pager-btn{display:inline-flex;align-items:center;min-height:40px;padding:var(--s2) var(--s4);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text);font-weight:600;font-size:var(--t-sm)}
.pager-btn:hover{text-decoration:none;border-color:var(--primary)}
.pager-info{font-size:var(--t-sm);color:var(--text-muted);font-variant-numeric:tabular-nums}

/* ---------- cards and boards ---------- */
.channel-health{border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:var(--s3);margin-bottom:var(--s3);background:var(--inset)}
.channel-health:last-child{margin-bottom:0}
.ch-header{display:flex;align-items:baseline;gap:var(--s2);margin-bottom:var(--s2);flex-wrap:wrap}
.ch-header strong{font-size:var(--t-lg);color:var(--text)}
.job-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s2);margin-bottom:var(--s3)}
.job-card{background:var(--inset);border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:var(--s3)}
.job-card.bad{border-color:var(--danger-line)}
.jc-header{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s2)}
.jc-name{font-size:var(--t-sm);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jc-body{display:flex;flex-direction:column;gap:2px}
.jc-row{display:flex;justify-content:space-between;gap:var(--s3);font-size:var(--t-xs)}
.jc-label{color:var(--text-muted)}
.jc-value{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.jc-value.danger{color:var(--danger)}
.active-runs{display:flex;flex-direction:column;gap:var(--s1)}
.run-strip{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);background:var(--inset);border:1px solid var(--border-soft);border-radius:var(--radius-sm);font-size:var(--t-sm);flex-wrap:wrap}
.run-strip form{margin-left:auto}
.run-strip button{font-size:var(--t-xs);padding:2px var(--s2)}
.rs-type{font-weight:600}
.rs-id{color:var(--text-dim);font-size:var(--t-xs);font-family:var(--mono)}
.rs-time{color:var(--text-muted);font-size:var(--t-xs);white-space:nowrap}
.mini-list{list-style:none;display:flex;flex-direction:column;gap:var(--s1)}
.mini-list li{display:flex;align-items:center;gap:var(--s2) var(--s3);flex-wrap:wrap;padding:var(--s2) var(--s3);background:var(--inset);border:1px solid var(--border-soft);border-radius:var(--radius-sm);font-size:var(--t-sm)}
.mini-list .grow{flex:1;min-width:8rem}
.mini-list .when{color:var(--text-muted);font-size:var(--t-xs);font-variant-numeric:tabular-nums;white-space:nowrap}
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:var(--s4);margin-bottom:var(--s4)}
.two-col>.panel{margin-bottom:0}

/* ---------- controls ---------- */
button{font:inherit;background:var(--primary);color:var(--on-primary);border:1px solid var(--primary);border-radius:var(--radius-sm);padding:var(--s2) var(--s3);font-size:var(--t-sm);font-weight:600;cursor:pointer;transition:background .15s,border-color .15s;min-height:36px}
button:hover:not(:disabled){background:var(--primary-hover);border-color:var(--primary-hover)}
button:disabled{opacity:.5;cursor:not-allowed}
button.secondary{background:var(--surface-2);color:var(--text);border-color:var(--control-border)}
button.secondary:hover:not(:disabled){border-color:var(--primary);background:var(--inset)}
button.danger{background:var(--danger-solid);border-color:var(--danger-solid);color:#fff}
.switch{background:var(--surface-2);color:var(--text-muted);border:1px solid var(--control-border);border-radius:var(--radius-pill);padding:var(--s1) var(--s3);font-size:var(--t-sm);font-weight:700;display:inline-flex;align-items:center;gap:var(--s2)}
.switch::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor}
.switch:hover:not(:disabled){background:var(--inset);border-color:var(--text-dim)}
.switch.on{background:var(--success-soft);color:var(--success);border-color:var(--success-line)}
.switch.on::before{background:currentColor}
.switch.on:hover:not(:disabled){background:var(--success-soft);border-color:var(--success)}
input,select,textarea{font:inherit;background:var(--inset);color:var(--text);border:1px solid var(--control-border);border-radius:var(--radius-sm);padding:var(--s2) var(--s3);font-size:var(--t-sm);max-width:100%;min-height:36px}
textarea{min-height:0}
input[type=checkbox]{width:auto;min-height:0;padding:0;accent-color:var(--primary)}
input::placeholder{color:var(--text-dim)}
input[type=search]{min-width:min(320px,100%)}
form:has(>input[type=search]){display:flex;gap:var(--s2);margin-bottom:var(--s3);flex-wrap:wrap}
label{font-size:var(--t-sm)}
.impact-confirm{display:block;margin:var(--s2) 0;line-height:1.4}
.impact-confirm input{margin-right:var(--s1)}
.inline-form{display:flex;gap:var(--s3);align-items:flex-end;flex-wrap:wrap}
.inline-form label{display:flex;flex-direction:column;gap:var(--s1);font-weight:600;color:var(--text-muted);font-size:var(--t-xs)}
.rule-input{width:100%}
.rule-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3);margin-bottom:var(--s3)}
.rule-field{display:flex;flex-direction:column;gap:var(--s1)}
.rule-field span{font-size:var(--t-xs);color:var(--text-muted);font-weight:600}
.rule-form-hint{margin-bottom:var(--s3)}
.rule-create-form.flash{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-soft)}
.supplier-tabs,.chips{display:flex;gap:var(--s2);flex-wrap:wrap;margin:var(--s3) 0}
.supplier-tab,.chip{display:inline-flex;align-items:center;min-height:36px;padding:var(--s1) var(--s3);border-radius:var(--radius-pill);background:var(--surface-2);color:var(--text-muted);font-size:var(--t-sm);font-weight:600;border:1px solid var(--border-soft)}
.supplier-tab:hover,.chip:hover{border-color:var(--primary);color:var(--link);text-decoration:none}
.supplier-tab.current,.chip.current{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.job-progress{display:none}
.htmx-request .job-progress,.htmx-request.job-progress{display:inline}
.success{color:var(--success);font-size:var(--t-sm);font-weight:600}
.error,.error-inline{color:var(--danger);font-size:var(--t-sm);font-weight:600}
.error-inline{padding:var(--s2) var(--s3);border:1px solid var(--danger-line);background:var(--danger-soft);border-radius:var(--radius-sm);margin:var(--s2) 0}

/* a background refresh that failed keeps the last good data, dimmed */
.is-stale{opacity:.6}
.is-stale::before{content:"최신 정보를 불러오지 못해 이전 데이터를 표시 중입니다";display:block;color:var(--warning);font-size:var(--t-xs);font-weight:700;margin-bottom:var(--s1)}

/* ---------- login ---------- */
.login{display:flex;align-items:center;justify-content:center;min-height:80vh;padding:var(--s5)}
.login .panel{max-width:380px;width:100%}
.login h1{font-size:var(--t-xl);font-weight:800;margin-bottom:var(--s1)}
.login p{color:var(--text-muted);margin-bottom:var(--s4)}
.login label{display:block;margin-bottom:var(--s3);font-weight:600;color:var(--text-muted)}
.login input{width:100%;margin-top:var(--s1);min-height:44px}
.login button{width:100%;margin-top:var(--s2);padding:var(--s3);min-height:44px}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:var(--s4);right:var(--s4);z-index:200;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:var(--s3) var(--s4);box-shadow:var(--shadow);font-size:var(--t-sm);max-width:380px;display:none}
.toast.show{display:block;animation:rise .25s ease-out}
.toast.success{border-color:var(--success)}
.toast.error{border-color:var(--danger)}
@keyframes rise{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ---------- phone ---------- */
@media(max-width:900px){
	.rule-table .rule-input{min-width:7rem}
  .wrap{padding:var(--s4) var(--s3) var(--s6)}
  .store-grid,.two-col{grid-template-columns:1fr}
  .job-board{grid-template-columns:1fr}
  .table-wrap{max-height:none}
  /* keep the row's identity visible while scrolling wide tables sideways */
  .table-wrap:not(.stack-wrap) td:first-child,.table-wrap:not(.stack-wrap) th:first-child{position:sticky;left:0;background:var(--surface);box-shadow:1px 0 0 var(--border-soft)}
  .table-wrap:not(.stack-wrap) thead th:first-child{background:var(--surface-2);z-index:2}
}
@media(max-width:720px){
  /* the five sections become a thumb-reach tab bar; the header keeps brand and logout */
  body{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}
  .app-header{padding:0 var(--s3);justify-content:space-between}
  .app-nav{position:fixed;left:0;right:0;bottom:0;z-index:150;display:grid;grid-template-columns:repeat(5,1fr);gap:0;background:var(--surface);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom);flex:none}
  .app-nav a{display:flex;align-items:center;justify-content:center;min-height:var(--tabbar-h);padding:0 var(--s1);border-radius:0;font-size:var(--t-sm);box-shadow:none;border-top:3px solid transparent}
  .app-nav a.current{background:var(--primary-soft);box-shadow:none;border-top-color:var(--primary)}
  .toast{left:var(--s3);right:var(--s3);bottom:calc(var(--tabbar-h) + var(--s3) + env(safe-area-inset-bottom));max-width:none}
  .page-heading h1{font-size:var(--t-lg)}
  .gauge-num{font-size:2rem}
  .actions a,.pager-btn{min-height:44px}
  button,input,select{min-height:44px}
  input[type=checkbox]{min-height:0}
  .switch{min-height:44px}
  .run-strip button{min-height:36px}
  dl.facts{grid-template-columns:1fr;gap:0}
  dl.facts dd{margin-bottom:var(--s2)}

  /* stacked tables: each row becomes a two-column card, each cell shows its column label above its value */
  .stack-wrap{border:0;background:transparent;overflow:visible;max-height:none}
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
  table.stack thead{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
  table.stack tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s2) var(--s3);background:var(--inset);border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:var(--s3);margin-bottom:var(--s2)}
  table.stack tbody tr:hover{background:var(--inset)}
  table.stack td{display:block;border:0;padding:0;text-align:left;min-width:0}
  table.stack td::before{display:block;content:attr(data-label);color:var(--text-muted);font-size:var(--t-xs);font-weight:600;margin-bottom:1px}
  table.stack td:not([data-label])::before{content:none}
  table.stack td.num,table.stack td.tnum{text-align:left}
  table.stack td.cell-main,table.stack td.status-list,table.stack td.diagnostic,table.stack td.impact,table.stack td.empty{grid-column:1 / -1}
  table.stack td:has(form){grid-column:1 / -1}
  table.stack td.empty{text-align:center}
  table.stack td.cell-main{font-weight:700;font-size:var(--t-md)}
  table.stack .status-list,table.stack .diagnostic{max-width:none;min-width:0}
  table.stack td.status-list .badge{margin:0 var(--s1) var(--s1) 0}
}
@media(max-width:430px){
  :root{--t-num:1.375rem}
  .panel{padding:var(--s3)}
  .kpi-row,.cards,.metric-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-brand{font-size:var(--t-sm)}
}
@media print{.app-nav,.logout-btn,.toast{display:none}}