:root{--bg:#f4f6fa;--side:#eceff5;--card:#fff;--line:#dfe4ee;--row:#f1f4f9;--trk:#e6eaf2;--seg:#e9edf5;
--tx:#161b26;--tx2:#566074;--tx3:#8a93a5;--red:#d63f3f;--blue:#2f6fd0;--green:#1f9d62;--amber:#b97a0a;--coral:#d4683f;
--on-accent:#fff;--scrim:rgba(10,14,22,.45);--ch-coupang:#3b6fd4;--ch-naver:#2fa860;--ch-mail:#c0392b;--keyline:#9bd3b8;--warn-bg:#fff4d6;--warn-line:#e3c26a;--warn-tx:#6b4a00}
@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--bg:#0d1017;--side:#0a0d13;--card:#131824;--line:#232a3a;--row:#171c2a;--trk:#1d2434;--seg:#222a3c;
--tx:#eef1f7;--tx2:#9aa3b5;--tx3:#667086;--red:#ef5d5d;--blue:#6aa3f0;--green:#4cc38a;--amber:#e8b04a;--coral:#e0876a;--scrim:rgba(0,0,0,.6);--on-accent:#0d1017;--keyline:#2f7a55;--warn-bg:#2a2210;--warn-line:#6b5420;--warn-tx:#f0cf85}}
:root[data-theme=dark]{--bg:#0d1017;--side:#0a0d13;--card:#131824;--line:#232a3a;--row:#171c2a;--trk:#1d2434;--seg:#222a3c;
--tx:#eef1f7;--tx2:#9aa3b5;--tx3:#667086;--red:#ef5d5d;--blue:#6aa3f0;--green:#4cc38a;--amber:#e8b04a;--coral:#e0876a;--scrim:rgba(0,0,0,.6);--on-accent:#0d1017;--keyline:#2f7a55;--warn-bg:#2a2210;--warn-line:#6b5420;--warn-tx:#f0cf85}

*{box-sizing:border-box;margin:0}
html{color-scheme:light dark}
body{background:var(--bg);color:var(--tx);font-family:-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;font-size:14px;line-height:1.5}
ul{list-style:none;padding:0}
a{color:inherit;text-decoration:none}
.muted{color:var(--tx2)}

.shell{display:flex;min-height:100vh}
.side{width:13rem;flex:none;background:var(--side);border-right:1px solid var(--line);padding:16px 12px;color:var(--tx2);
  position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column}
.brand{display:flex;gap:8px;align-items:center;color:var(--tx);font-weight:700}
.side .brand{margin-bottom:18px}
.main{flex:1;min-width:0;padding:20px 24px}
.page-title{font-size:22px;margin-bottom:14px}
.topbar,.scrim{display:none}

.nav .item a,.nav .item.dim,.nav .chan{padding:8px 10px;border-radius:8px;display:flex;align-items:center;gap:10px;min-height:36px}
.nav .item.on a{background:var(--seg);color:var(--tx);font-weight:600}
.nav .item a:hover{background:var(--row)}
.nav .dim{opacity:.55;cursor:default}
.soon{margin-left:auto;font-size:11px;color:var(--tx3)}
.i{width:1.25rem;height:1.25rem;flex:none;display:grid;place-items:center}
.sub{font-size:11px;color:var(--tx3);margin:10px 10px 2px 10px}
.ic{width:1.25rem;height:1.25rem;border-radius:6px;display:grid;place-items:center;flex:none;color:var(--on-accent)}
.ic .i{width:.875rem;height:.875rem}
.ch-coupang{background:var(--ch-coupang)}.ch-naver{background:var(--ch-naver)}.ch-mail{background:var(--ch-mail)}
.dot{width:.45rem;height:.45rem;border-radius:50%;margin-left:auto;background:var(--tx3);flex:none}
.dot.ok{background:var(--green)}.dot.warn{background:var(--amber)}.dot.bad{background:var(--red)}
.nav .dim .dot{margin-left:6px}
details.grp{margin-top:8px}
details.grp summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.12em;color:var(--tx3);padding:8px 10px;font-weight:700}
details.grp summary::-webkit-details-marker{display:none}
.chev{width:.5rem;height:.5rem;border-right:2px solid var(--tx3);border-bottom:2px solid var(--tx3);transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
details:not([open]) .chev{transform:rotate(-45deg)}
.logout{margin-top:auto;padding-top:16px}
.logout button{width:100%;background:none;border:1px solid var(--line);color:var(--tx2);border-radius:8px;padding:7px;cursor:pointer;font:inherit}
.logout button:hover{background:var(--row)}

.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}
.card h2{font-size:16px;margin-bottom:6px}
.soon-card{max-width:560px}

.login-page{display:grid;place-items:center;min-height:100vh;padding:16px}
.login-card{width:100%;max-width:360px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px 24px;text-align:center}
.login-card h1{font-size:20px;margin:10px 0 4px}
.login-card form{margin-top:18px;text-align:left}
.login-card label{display:block;font-size:12px;color:var(--tx2);margin-bottom:4px}
.login-card input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--tx);font:inherit}
.login-card input:focus{outline:2px solid var(--blue);outline-offset:1px}
.error{color:var(--red);font-size:13px;margin-top:10px}
.primary{width:100%;margin-top:14px;padding:10px;border:0;border-radius:8px;background:var(--blue);color:var(--on-accent);font:inherit;font-weight:600;cursor:pointer}

@media (max-width:760px){
  .topbar{display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:20;background:var(--side);border-bottom:1px solid var(--line);padding:8px 16px}
  .burger{background:none;border:0;color:var(--tx);padding:6px;cursor:pointer;display:grid;place-items:center}
  .side{position:fixed;left:0;top:0;z-index:40;transform:translateX(-100%);transition:transform .2s;width:16rem}
  body.menu-open .side{transform:none}
  body.menu-open .scrim{display:block;position:fixed;inset:0;z-index:30;background:var(--scrim)}
  .side>.brand{display:none}
  .main{padding:16px}
  .page-title{font-size:20px}
}
.logo{object-fit:contain;flex:none}
/* 입고·판매자 화면: 휴대폰에서 누르기 쉬운 큰 입력 칸 */
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--tx);font:inherit;cursor:pointer;text-decoration:none}
.primary-btn{background:var(--blue);color:var(--on-accent);border-color:transparent;font-weight:600}
.btn.danger{color:var(--red)}
.list{display:grid;gap:8px}
.row-card a{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;color:inherit;text-decoration:none;min-height:44px}
.chip{margin-left:auto;font-size:12px;padding:2px 10px;border-radius:99px;background:var(--seg);color:var(--tx)}
.main .card{margin-bottom:12px;max-width:640px}
.form{display:grid;gap:12px}
.form label{display:grid;gap:4px;font-size:13px;color:var(--tx2)}
.form input,.form select,.form textarea{width:100%;min-height:48px;padding:10px 12px;font:inherit;font-size:16px;color:var(--tx);background:var(--bg);border:1px solid var(--line);border-radius:10px}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--blue);outline-offset:1px}
.form fieldset{border:1px solid var(--line);border-radius:10px;padding:10px;display:grid;gap:8px}
.form .primary{margin-top:4px;min-height:48px}
.steps{padding-left:20px;margin-bottom:10px}

/* ---- HQ · 판매 현황 · 알림 ---- */
.dash{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;max-width:80rem}
.dash>*,.grid>*,.kpis>*{min-width:0}
.main .dash .card{max-width:none;margin-bottom:0}
.when{font-size:.8125rem;color:var(--tx3);font-weight:400;margin-left:.5rem}
.neg{color:var(--red)}.pos{color:var(--green)}.mute{color:var(--tx3)}.warn-t{color:var(--amber)}
.sr{position:absolute;left:-999rem}
.eyebrow{font-size:.75rem;letter-spacing:.12em;color:var(--tx2)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.blk{display:grid;gap:8px}
.blk>h2,.h h2{font-size:1rem}
.h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.h h2{margin:0}
.count{min-width:1.5rem;padding:0 .5rem;text-align:center;border-radius:99px;background:var(--seg);color:var(--tx2);font-size:.75rem;font-weight:700}
.count.on{background:var(--red);color:var(--on-accent)}
.tag{display:inline-block;font-size:.6875rem;line-height:1.5;padding:0 .4rem;border-radius:.375rem;background:var(--seg);color:var(--tx2);font-weight:400}
.tags{margin-top:.375rem}
.chev-r{color:var(--tx3)}
.more{display:inline-block;margin-top:.5rem;font-size:.8125rem;color:var(--blue);min-height:2rem;line-height:2rem}
.card-link{display:block;color:inherit}

.status-strip{display:grid;gap:6px}
.strip-line{display:flex;flex-wrap:wrap;gap:.25rem 1rem;font-size:.8125rem;color:var(--tx2);align-items:center}
.src-stat{display:inline-flex;align-items:center;gap:.375rem}
.src-stat .dot{margin-left:0}
.strip-when{margin-left:auto;color:var(--tx3)}
.strip-warn{display:flex;gap:.5rem;align-items:flex-start;background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-tx);border-radius:.625rem;padding:.5rem .75rem;font-size:.8125rem}
.warn-i{display:inline-grid;place-items:center;width:1.1rem;height:1.1rem;flex:none;border-radius:50%;background:currentColor;font-size:.7rem;line-height:1}
.warn-i{color:inherit}
.strip-warn .warn-i{background:var(--warn-tx);color:var(--warn-bg)}
.flag-line .warn-i{background:var(--red);color:var(--card)}

.ask{display:flex;align-items:center;gap:.625rem;background:var(--card);border:1px dashed var(--line);border-radius:.75rem;padding:.75rem .875rem;color:var(--tx3);opacity:.7}
.ask kbd{font:inherit;font-size:.6875rem;border:1px solid var(--line);border-radius:.3125rem;padding:0 .375rem}
.ask .soon{margin-left:auto}
.ask kbd{margin-left:.25rem}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:12px}
.k small{font-size:.75rem;color:var(--tx2)}
.k .v,.sum .v{font-size:1.5rem;font-weight:700;margin-top:.25rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.k .v em,.sum .v em{font-size:.8125rem;font-style:normal;color:var(--tx2);font-weight:400}
.k .v.small-v{font-size:.9375rem;font-weight:600;line-height:1.5}
.k .d,.sum .d{font-size:.75rem;margin-top:.125rem;color:var(--tx2)}
.k.key{border-color:var(--keyline)}
.k{cursor:default}
.sum{display:block;color:inherit}
.sum:hover{border-color:var(--tx3)}
.sum-head{display:flex;justify-content:space-between;margin-bottom:.25rem}
.sum-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:.5rem 1rem}
.small-v{font-size:.9375rem}

.period{display:flex}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:.5rem;overflow:hidden;font-size:.8125rem}
.seg span{padding:.375rem .75rem;color:var(--tx2)}
.seg .on{background:var(--seg);color:var(--tx);font-weight:700}
.seg .off{opacity:.6}
.seg small{font-size:.625rem;color:var(--tx3)}

.todos{display:grid;gap:8px}
.todo{display:flex;gap:.75rem;align-items:flex-start;padding:.625rem .75rem;border-left:3px solid var(--line);background:var(--row);border-radius:.5rem}
.todo.overdue{border-left-color:var(--red)}
.todo.untagged-todo{border-left-color:var(--amber)}
.todo.done{opacity:.6}
.todo.done .todo-head{text-decoration:line-through}
.todo-body{flex:1;min-width:0;display:grid;gap:.25rem}
.todo-head strong{color:var(--tx)}
.todo-rest{color:var(--tx2);overflow-wrap:anywhere}
.chk{display:contents}
.check{width:1.375rem;height:1.375rem;flex:none;border-radius:.375rem;border:2px solid var(--tx3);background:var(--card);color:var(--on-accent);cursor:pointer;display:grid;place-items:center;padding:0;margin-top:.0625rem;position:relative}
.check::after{content:"";position:absolute;inset:-.5rem}
.check:hover{border-color:var(--green)}
.check.on{background:var(--green);border-color:var(--green);cursor:default;font-size:.8rem;font-weight:700}
.check:focus-visible,.picker select:focus-visible,.btn:focus-visible,.more:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.picker{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.picker select{flex:1;min-width:10rem;min-height:2.25rem;padding:0 .5rem;font:inherit;color:var(--tx);background:var(--bg);border:1px solid var(--line);border-radius:.5rem}
.btn.small{min-height:2.25rem;padding:0 .75rem;font-size:.8125rem}

.prod{display:grid;gap:.25rem;align-content:start;color:var(--tx2);font-size:.8125rem}
.prod h3{font-size:.9375rem;color:var(--tx)}
.prod h3 span{color:var(--tx3);font-weight:400;font-size:.75rem}
.prod h3 a:hover{text-decoration:underline}
.prod .big{font-size:1.125rem;font-weight:700;color:var(--tx);font-variant-numeric:tabular-nums}
.prod .big .small-v{font-size:.8125rem;font-weight:600}
.prod .line a{text-decoration:underline;text-underline-offset:2px}
.prod .note a{color:var(--blue)}
.card.flagged,.card.bad{border-color:var(--red)}
.future{border-style:dashed;opacity:.65}
.future .h h2{color:var(--tx2)}
.mini{display:grid;gap:.5rem}
.mini li{display:flex;gap:.5rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.mini li.col{display:grid;gap:.125rem;justify-content:stretch}
.chip{margin-left:0}

.alerts{display:grid;gap:8px}
.alert{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:.625rem;padding:.625rem .875rem;display:grid;gap:.25rem}
.alert.bad{border-left-color:var(--red)}
.a-head{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.chip.kind{margin-left:0;font-size:.6875rem}
.a-text{overflow-wrap:anywhere}
.a-text a{text-decoration:underline;text-underline-offset:2px}
.note-line{font-size:.75rem}

.tbl-wrap{overflow-x:auto}
.tbl{border-collapse:collapse;width:100%}
.tbl th,.tbl td{padding:.5rem .5rem;border-bottom:1px solid var(--line);text-align:left}
.tbl th{font-size:.75rem;color:var(--tx3);font-weight:600}
.tbl .r{text-align:right;font-variant-numeric:tabular-nums}
.detail .card{display:block}
.detail h2{font-size:1rem;margin-bottom:.5rem}
.detail .flag-line{display:flex;gap:.5rem;align-items:center}
@media (max-width:760px){.strip-when{margin-left:0;flex-basis:100%}.kpis .k .v{font-size:1.25rem}}