/* 목업(mockup.html) <style> 그대로. 외부 글꼴 @font-face 4개만 제거(시스템 글꼴) */
:root{
  --bg:#F6F7F9; --surface:#FFFFFF; --surface2:#EEF1F5; --border:#DDE2E8;
  --ink:#1E2530; --ink-muted:#5A6675; --accent:#2B5C8E; --accent-hover:#234A74;
  --input-border:#1F4E78; --auto-bg:#EEF1F5; --auto-text:#595959;
  --danger:#C0392B; --success:#2E7D50;
  --st-wait:#5B6675; --st-transit:#2F6FB5; --st-ok:#2E7D50; --st-pending:#A66A00;
  --st-done:#1F7A80; --st-as:#B8500B; --st-return:#7352A8; --st-disposed:#4B5563;
  --radius:10px; --radius-sm:6px;
}
[data-theme="dark"]{
  --bg:#12161B; --surface:#1A2027; --surface2:#222A33; --border:#2E3742;
  --ink:#E4E8EC; --ink-muted:#9BA7B4; --accent:#7DB0E0; --accent-hover:#9CC4EA;
  --input-border:#5E8FBF; --auto-bg:#222A33; --auto-text:#9BA7B4;
  --danger:#E5786D; --success:#6CC38D;
}
*{box-sizing:border-box;}
body{
  margin:0; font-family:'Pretendard', -apple-system, 'Apple SD Gothic Neo', '맑은 고딕', sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.5;
}
.app{ display:flex; min-height:100vh; }

/* ===== Sidebar ===== */
.sidebar{
  width:220px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:16px 0; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar .logo{ padding:0 16px 16px; font-weight:700; font-size:15px; border-bottom:1px solid var(--border); margin-bottom:12px;}
.sidebar .logo span{ color:var(--accent); }
.nav-group{ margin-bottom:4px; }
.nav-group-title{
  font-size:11px; color:var(--ink-muted); font-weight:600; padding:10px 16px 4px;
  text-transform:uppercase; letter-spacing:.03em;
}
.nav-item{
  display:flex; align-items:center; gap:8px; padding:9px 16px; color:var(--ink-muted);
  cursor:pointer; font-size:13.5px; font-weight:500; border-left:3px solid transparent;
}
.nav-item:hover{ background:var(--surface2); color:var(--ink); }
.nav-item.active{ background:var(--surface2); color:var(--accent); border-left-color:var(--accent); font-weight:600; }
.sidebar-bottom{ margin-top:auto; padding:12px 16px 0; border-top:1px solid var(--border); font-size:12.5px; color:var(--ink-muted); }

/* ===== Main ===== */
.main{ flex:1; min-width:0; }
.topbar{
  display:flex; align-items:center; gap:16px; padding:0 24px; height:56px;
  background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:5;
}
.search-box{
  flex:1; max-width:360px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:7px 12px; font-size:13px; color:var(--ink-muted);
}
.rate-ticker{ font-size:12.5px; color:var(--ink-muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.rate-ticker b{ color:var(--ink); font-weight:600; }
.topbar-right{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.role-toggle{ display:flex; border:1px solid var(--border); border-radius:999px; overflow:hidden; font-size:12px; }
.role-toggle button{
  border:none; background:var(--surface); color:var(--ink-muted); padding:5px 12px; cursor:pointer; font-family:inherit;
}
.role-toggle button.active{ background:var(--accent); color:#fff; }
.theme-btn{ border:1px solid var(--border); background:var(--surface); border-radius:999px; width:30px; height:30px; cursor:pointer; color:var(--ink-muted); }
.user-chip{ font-size:13px; font-weight:500; display:flex; align-items:center; gap:6px; }
.avatar{ width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }

.content{ padding:24px; max-width:1360px; }
.page-title{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.page-title h1{ font-size:19px; margin:0; font-weight:700; }
.page-title .meta{ font-size:12.5px; color:var(--ink-muted); }
.btn{
  border:1px solid var(--border); background:var(--surface); color:var(--ink); padding:7px 14px;
  border-radius:var(--radius-sm); font-size:13px; font-weight:500; cursor:pointer; font-family:inherit;
}
.btn.primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover{ background:var(--accent-hover); }
.btn-row{ display:flex; gap:8px; }

/* ===== KPI Cards (Dashboard) ===== */
.kpi-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:10px; }
.kpi-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 14px;
  cursor:pointer; transition:border-color .15s;
}
.kpi-card:hover{ border-color:var(--accent); }
.kpi-label{ font-size:12.5px; color:var(--ink-muted); font-weight:600; margin-bottom:2px; }
.kpi-sub{ font-size:11px; color:var(--ink-muted); margin-bottom:10px; }
.kpi-num{ font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; }
.kpi-unit{ font-size:13px; font-weight:500; color:var(--ink-muted); margin-left:3px;}
.kpi-divider{ height:1px; background:var(--border); margin:10px 0 8px; }
.kpi-detail{ font-size:11.5px; color:var(--ink-muted); display:flex; flex-direction:column; gap:3px; font-variant-numeric:tabular-nums;}
.kpi-chip{
  display:inline-block; font-size:10.5px; padding:2px 7px; border-radius:999px; margin-top:6px; font-weight:600;
}
.chip-blue{ background:rgba(47,111,181,.12); color:var(--st-transit); }
.chip-green{ background:rgba(46,125,80,.12); color:var(--st-ok); }
.chip-amber{ background:rgba(166,106,0,.12); color:var(--st-pending); }
.chip-teal{ background:rgba(31,122,128,.12); color:var(--st-done); }
.chip-red{ background:rgba(192,57,43,.12); color:var(--danger); }

.excel-match{ font-size:12px; color:var(--ink-muted); background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 12px; margin-bottom:10px; }
.sub-chips{ display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.sub-chip{ font-size:12px; padding:5px 11px; border-radius:999px; background:var(--surface); border:1px solid var(--border); color:var(--ink-muted); font-weight:500;}

.two-col{ display:grid; grid-template-columns:1.3fr 1fr; gap:16px; }
.panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; }
.panel h3{ font-size:13.5px; margin:0 0 12px; font-weight:600; display:flex; align-items:center; gap:6px;}
.todo-item{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); font-size:13px; cursor:pointer;}
.todo-item:last-child{ border-bottom:none; }
.todo-item .dot{ width:7px; height:7px; border-radius:50%; background:var(--danger); margin-right:8px; flex-shrink:0; display:inline-block;}
.todo-item .label{ display:flex; align-items:center; flex:1; }
.todo-item .count{ font-weight:600; color:var(--ink-muted); margin-right:10px; }
.todo-item .arrow{ color:var(--ink-muted); }
.rate-box{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); font-size:13.5px; font-variant-numeric:tabular-nums;}
.rate-box:last-of-type{ border-bottom:none; margin-bottom:10px;}
.rate-status{ font-size:11.5px; color:var(--success); font-weight:600; }
.event-item{ font-size:12px; color:var(--ink-muted); padding:5px 0; border-bottom:1px dashed var(--border); }
.event-item b{ color:var(--ink); font-weight:600; }

/* ===== Status badges ===== */
.badge{
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600;
  padding:3px 9px; border-radius:999px;
}
.badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.b-po{ background:rgba(91,102,117,.12); color:var(--st-wait); }
.b-transit{ background:rgba(47,111,181,.12); color:var(--st-transit); }
.b-received{ background:rgba(47,111,181,.12); color:var(--st-transit); border:1px dashed var(--st-transit);}
.b-done{ background:rgba(31,122,128,.12); color:var(--st-done); }
.b-stock{ background:rgba(46,125,80,.12); color:var(--st-ok); }
.b-label-wait{ background:rgba(166,106,0,.12); color:var(--st-pending); border:1px dashed var(--st-pending); }
.b-ship-wait{ background:rgba(166,106,0,.18); color:var(--st-pending); font-weight:700; }
.b-disposed{ background:rgba(75,85,99,.12); color:var(--st-disposed); text-decoration:line-through; }
.b-hold{ background:rgba(115,82,168,.12); color:var(--st-return); }
.badge-plain{ display:inline-flex; align-items:center; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--surface2); color:var(--ink-muted); }
.badge-plain.ok{ color:var(--success); }

/* ===== Table ===== */
.filter-bar{ display:flex; gap:10px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.filter-bar input, .filter-bar select{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:6px 10px; font-size:12.5px; color:var(--ink); font-family:inherit;
}
.chip-filter{ display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.chip-filter span{
  font-size:12px; padding:5px 11px; border-radius:999px; background:var(--surface); border:1px solid var(--border);
  cursor:pointer; font-weight:500; color:var(--ink-muted);
}
.chip-filter span.active{ background:var(--accent); color:#fff; border-color:var(--accent); }
table{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;}
thead th{
  background:var(--surface2); font-size:12px; font-weight:600; text-align:left; padding:10px 12px;
  color:var(--ink-muted); border-bottom:1px solid var(--border);
}
thead th.num{ text-align:right; }
tbody td{ padding:10px 12px; border-bottom:1px solid var(--border); font-size:13px; font-variant-numeric:tabular-nums;}
tbody td.num{ text-align:right; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background:var(--surface2); }
.masked{ color:var(--ink-muted); font-style:italic; font-size:12px; }
.lock-field{ background:var(--auto-bg); color:var(--auto-text); border-radius:4px; padding:4px 8px; font-size:12.5px; display:inline-flex; align-items:center; gap:4px;}
.input-field{ border:1.5px solid var(--input-border); border-radius:4px; padding:4px 8px; font-size:12.5px; background:var(--surface); color:var(--ink);}
.table-footer{ display:flex; justify-content:space-between; font-size:12px; color:var(--ink-muted); margin-top:8px; padding:0 2px;}

/* ===== Tabs ===== */
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:16px; }
.tab{ padding:9px 16px; font-size:13px; font-weight:500; color:var(--ink-muted); cursor:pointer; border-bottom:2px solid transparent; }
.tab.active{ color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }

/* ===== Mobile phone mockup ===== */
.phone-frame{
  width:300px; border:10px solid #1a1a1a; border-radius:32px; overflow:hidden; background:var(--bg);
  box-shadow:0 10px 30px rgba(0,0,0,.15); flex-shrink:0;
}
.phone-screen{ height:580px; overflow-y:auto; display:flex; flex-direction:column; }
.phone-top{ display:flex; align-items:center; gap:8px; padding:10px 12px; background:var(--surface); border-bottom:1px solid var(--border); font-size:13px; font-weight:600;}
.phone-body{ padding:12px; flex:1; }
.phone-kpi-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px;}
.phone-kpi{ background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:10px; }
.phone-kpi .l{ font-size:11px; color:var(--ink-muted); font-weight:600; }
.phone-kpi .n{ font-size:18px; font-weight:700; margin-top:2px;}
.phone-kpi .s{ font-size:10px; color:var(--ink-muted); }
.phone-tabbar{ display:flex; background:var(--surface); border-top:1px solid var(--border); }
.phone-tabbar div{ flex:1; text-align:center; padding:10px 0; font-size:10.5px; color:var(--ink-muted); }
.phone-tabbar div.active{ color:var(--accent); font-weight:700; }

.caption{ font-size:11.5px; color:var(--ink-muted); margin-top:10px; line-height:1.6; }
.caption b{ color:var(--ink); }
.section-note{ background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 14px; font-size:12px; color:var(--ink-muted); margin-bottom:16px;}
.screen{ display:none; }
.screen.active{ display:block; }
.flex-row{ display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; }
.timeline-item{ padding:10px 0; border-bottom:1px solid var(--border); font-size:12.5px; }
.timeline-item .t{ color:var(--ink-muted); font-size:11.5px; font-variant-numeric:tabular-nums;}
.timeline-item .d{ margin-top:2px; }
.rate-row{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border); font-size:12.5px; font-variant-numeric:tabular-nums;}

/* ===== 여기부터 추가분 (목업에 없는 것: 로그인·배너·근거 칩·상세 패널·폼) ===== */
[hidden]{ display:none !important; }
.btn:disabled, .theme-btn:disabled, input:disabled, select:disabled{ cursor:not-allowed; opacity:.55; }
.btn-small{ padding:4px 10px; font-size:12px; }
.btn-danger{ color:var(--danger); }
.nav-item{ text-decoration:none; }
a.kpi-card{ display:block; color:inherit; text-decoration:none; }
.kpi-card.no-link{ cursor:default; }
.kpi-card.no-link:hover{ border-color:var(--border); }

/* 로그인 */
.login-body{ display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px; }
.login-card{ width:100%; max-width:380px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:28px; }
.login-logo{ font-weight:700; font-size:16px; margin-bottom:18px; }
.login-logo span{ color:var(--accent); }
.login-card h1{ font-size:17px; margin:0 0 14px; font-weight:700; }
.login-submit{ width:100%; margin-top:6px; padding:9px 14px; }
.login-actions{ margin-top:6px; }
.login-actions .btn{ flex:1; }

/* 폼 */
.field{ display:block; margin-bottom:12px; font-size:12.5px; color:var(--ink-muted); }
.field > span{ display:block; margin-bottom:4px; font-weight:500; }
.field input, .field select, .field textarea{
  width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:7px 10px; font-size:13px; color:var(--ink); font-family:inherit;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--input-border); }
.form-error{ color:var(--danger); font-size:12.5px; margin:0 0 10px; }
.form-ok{ color:var(--success); font-size:12.5px; margin:0 0 10px; }

/* 2차 개발 예정 배너 */
.phase-banner{
  display:flex; align-items:center; gap:8px; background:rgba(166,106,0,.1); border:1px solid rgba(166,106,0,.35);
  color:var(--st-pending); border-radius:var(--radius-sm); padding:9px 14px; font-size:13px; font-weight:600; margin-bottom:16px;
}
.notice-banner{
  background:rgba(47,111,181,.1); border:1px solid rgba(47,111,181,.3); color:var(--st-transit);
  border-radius:var(--radius-sm); padding:9px 14px; font-size:13px; font-weight:500; margin-bottom:12px;
}
.error-banner{
  background:rgba(192,57,43,.1); border:1px solid rgba(192,57,43,.3); color:var(--danger);
  border-radius:var(--radius-sm); padding:9px 14px; font-size:13px; margin-bottom:12px;
}
.phase-tag{ font-size:11px; font-weight:600; color:var(--st-pending); background:rgba(166,106,0,.1); padding:1px 7px; border-radius:999px; }
.empty-row td{ text-align:center; color:var(--ink-muted); padding:22px 12px; }
.placeholder-box{ flex:1; text-align:center; padding:10px; background:var(--surface2); border-radius:6px; }
.placeholder-box .l{ font-size:11.5px; color:var(--ink-muted); }
.placeholder-box .n{ font-size:20px; font-weight:700; margin-top:2px; color:var(--ink-muted); }
.placeholder-boxes{ display:flex; gap:8px; align-items:stretch; }
.placeholder-boxes .arrow{ align-self:center; color:var(--ink-muted); padding:0 4px; }
.mb16{ margin-bottom:16px; }
.mb24{ margin-bottom:24px; }
.mt14{ margin-top:14px; }
.h2-title h1{ font-size:16px; }
.chip-filter.static span{ cursor:default; }
.tabs.static .tab{ cursor:default; }

/* 라벨비 근거 칩 (대표 전용, 설계서 11-17 6번) */
.source-chip{ display:inline-block; font-size:11px; font-weight:600; padding:1px 8px; border-radius:999px; margin-left:6px; vertical-align:middle; }
.source-CATEGORY, .source-NONE{ background:var(--surface2); color:var(--ink-muted); }
.source-SERIES{ background:rgba(47,111,181,.12); color:var(--st-transit); }
.source-MODEL{ background:rgba(166,106,0,.12); color:var(--st-pending); }
.source-MODEL_DIRECT{ background:rgba(115,82,168,.12); color:var(--st-return); }
.source-BRAND{ background:rgba(31,122,128,.12); color:var(--st-done, #1F7A80); }

/* 마진 경고색 (대표 답변 7, 설계서 20-6). 음수 = 빨강, 임계값 미만 = 주황 */
.margin-cell{ font-variant-numeric:tabular-nums; }
td.margin-negative, .margin-negative{ background:rgba(192,57,43,.14); color:var(--danger); font-weight:700; }
td.margin-low, .margin-low{ background:rgba(166,106,0,.14); color:var(--st-pending); font-weight:700; }
tr.row-margin-negative td:first-child{ box-shadow:inset 3px 0 0 var(--danger); }
tr.row-margin-low td:first-child{ box-shadow:inset 3px 0 0 var(--st-pending); }
.margin-legend{ display:flex; gap:10px; align-items:center; font-size:11.5px; color:var(--ink-muted); flex-wrap:wrap; }
.margin-legend span.swatch{ padding:1px 8px; border-radius:999px; }

/* 4개 날짜 타임라인 (설계서 11-16) */
.timeline-strip{ display:flex; align-items:stretch; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px; margin-bottom:16px; overflow-x:auto; }
.tl-step{ flex:1; min-width:110px; text-align:center; padding:8px 6px; border-radius:6px; background:var(--surface2); color:var(--ink-muted); }
.tl-step.done{ background:rgba(47,111,181,.12); color:var(--ink); }
.tl-label{ font-size:11px; font-weight:600; }
.tl-date{ font-size:13px; font-weight:700; margin-top:2px; font-variant-numeric:tabular-nums; }
.tl-sub{ display:block; font-size:11px; margin-top:2px; color:var(--ink-muted); }
.tl-gap{ align-self:center; font-size:11px; color:var(--ink-muted); min-width:44px; text-align:center; white-space:nowrap; }

/* 2차 화면 공용 */
tr.clickable{ cursor:pointer; }
.chip-filter span{ cursor:pointer; }
.chip-filter.static span{ cursor:default; }
.inline-select{ font-size:12px; padding:3px 6px; border:1px solid var(--border); border-radius:4px; background:var(--surface); color:var(--ink); }
.inline-input{ font-size:12px; padding:3px 6px; border:1px solid var(--border); border-radius:4px; background:var(--surface); color:var(--ink); }
.btn-tiny{ padding:3px 10px; font-size:11px; }
.detail-head{ display:flex; align-items:center; gap:10px; margin:24px 0 10px; }
.detail-head h2{ font-size:16px; font-weight:700; margin:0; }
.doc-frame{ width:100%; max-width:800px; height:900px; border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; display:block; margin:0 auto; }
.rate-input{ width:120px; text-align:right; }
.table-footer{ display:flex; justify-content:space-between; align-items:center; }
.currency-chip{ font-size:11px; font-weight:600; color:var(--st-pending); background:rgba(166,106,0,.12); padding:1px 7px; border-radius:999px; font-style:normal; white-space:nowrap; }

/* 상품 표·상세 패널 */
.table-scroll{ overflow-x:auto; }
.product-table td, .product-table th{ white-space:nowrap; }
.product-table td.wrap{ white-space:normal; min-width:120px; }
.product-table tbody tr{ cursor:pointer; }
.product-table tr.inactive td{ color:var(--ink-muted); text-decoration:line-through; }
.pager{ display:flex; align-items:center; gap:8px; }
.drawer-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.25); z-index:20; }
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:560px; max-width:100%; background:var(--surface);
  border-left:1px solid var(--border); z-index:21; display:flex; flex-direction:column;
}
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); }
.drawer-head h2{ font-size:15px; margin:0; font-weight:700; }
.drawer-body{ flex:1; overflow-y:auto; padding:16px 18px; }
.drawer-foot{ display:flex; gap:8px; padding:12px 18px; border-top:1px solid var(--border); flex-wrap:wrap; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.form-grid .full{ grid-column:1 / -1; }
.form-section{ font-size:12.5px; font-weight:600; margin:10px 0 8px; padding-top:10px; border-top:1px solid var(--border); }
.form-section.first{ border-top:none; padding-top:0; margin-top:0; }
.calc-row{ display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--border); font-size:12.5px; font-variant-numeric:tabular-nums; }
.calc-row .k{ color:var(--ink-muted); }

/* 계정 관리 */
.once-box{ background:rgba(46,125,80,.1); border:1px solid rgba(46,125,80,.35); border-radius:var(--radius-sm); padding:10px 14px; margin-top:12px; font-size:13px; }
.once-box code{ font-size:14px; font-weight:700; user-select:all; }
.users-actions{ white-space:nowrap; }
.users-actions .btn + .btn{ margin-left:4px; }
.filter-bar input.invalid{ border-color:var(--danger); }

/* ---- 목업 아래 덮어쓰기(목업 <style> 본문은 그대로 둔다) ---- */
/* 표가 있는 화면은 창 너비를 따라 늘어난다. 글 위주 화면(대시보드 등)은 읽기 좋게 기존 최대폭 유지 */
.content{ max-width:1360px; min-width:0; }
.content:has(table){ max-width:none; }
/* 표 자체가 스크롤: 세로로 내려도 헤더가 고정된다 */
.table-scroll{ overflow:auto; max-height:calc(100vh - 190px); }
.table-scroll table{ overflow:visible; }
thead th{ position:sticky; top:0; z-index:2; }

/* 상품 목록: 같은 브랜드·시리즈·이름인데 가격이 다른 행 (데이터 품질 표시, 막지 않음) */
.product-table tr.row-price-conflict td{ background:rgba(255,193,7,.14); }
.price-conflict-mark{ color:#b26a00; font-weight:700; cursor:help; }
.tier-fallback-note{ font-size:11px; color:var(--st-pending); white-space:nowrap; }

/* 상품마스터: 일괄 가격 툴바·체크박스·가격 인라인 수정 */
.bulk-bar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px; padding:8px 12px; background:var(--surface); border:1px solid var(--border); border-radius:6px; font-size:13px; }
.bulk-bar select, .bulk-bar input{ font-size:13px; padding:4px 6px; }
.product-table .sel-cell{ width:32px; text-align:center; }
.product-table td.price-cell{ position:relative; cursor:pointer; }
.product-table td.price-cell:hover{ background:rgba(0,120,255,.08); outline:1px dashed var(--border); }
.price-editor{ position:fixed; z-index:50; display:flex; flex-direction:column; gap:6px; min-width:230px; padding:10px; text-align:left; background:var(--surface); border:1px solid var(--border); border-radius:6px; box-shadow:0 4px 14px rgba(0,0,0,.18); }
.price-editor input{ font-size:12.5px; padding:4px 6px; }
.price-options{ max-height:260px; overflow-y:auto; border:1px solid var(--border); border-radius:4px; }
.price-empty{ padding:5px 8px; font-size:12px; color:var(--ink-muted); }
.price-option{ display:grid; grid-template-columns:auto 1fr auto; gap:8px; width:100%; padding:5px 8px; font-size:12.5px; text-align:left; background:transparent; border:0; border-top:1px solid var(--border); cursor:pointer; }
.price-option:hover{ background:rgba(0,0,0,.06); }
.po-model{ font-weight:600; } .po-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .po-price{ font-variant-numeric:tabular-nums; }

/* =====================================================================
   모바일 대응 (점진적 개선): 아래 규칙은 모두 미디어쿼리 안에 있어 데스크탑(>768px) 화면은 그대로다.
   - 햄버거 버튼/배경막은 데스크탑에서 숨김
   - 768px 이하: 사이드바 → 슬라이드 메뉴, 표 → 카드(입력칸 있는 편집 표는 가로 스크롤), 드로어 → 풀스크린, 터치 타겟 44px
   - 480px 이하: 여백·글자 한 단계 더 줄임
   ===================================================================== */
.menu-btn, .sidebar-backdrop{ display:none; }
html{ -webkit-text-size-adjust:100%; }

@media (max-width:768px){
  body.menu-open{ overflow:hidden; }
  .app{ display:block; }
  .menu-btn{
    display:inline-flex; align-items:center; justify-content:center; flex:0 0 44px; width:44px; height:44px;
    border:1px solid var(--border); background:var(--surface); color:var(--ink); border-radius:var(--radius-sm); font-size:20px; cursor:pointer;
  }
  .sidebar{
    position:fixed; top:0; left:0; bottom:0; height:100dvh; width:78%; max-width:300px; z-index:40;
    transform:translateX(-100%); transition:transform .2s ease; box-shadow:none; padding-bottom:calc(16px + env(safe-area-inset-bottom));
  }
  .sidebar.open{ transform:translateX(0); box-shadow:0 0 24px rgba(0,0,0,.3); }
  .sidebar-backdrop{ position:fixed; inset:0; z-index:39; background:rgba(0,0,0,.4); display:none; }
  body.menu-open .sidebar-backdrop{ display:block; }
  .nav-item{ min-height:44px; padding:10px 16px; font-size:14.5px; }

  /* 상단바: 한 줄(☰ 검색 아바타 로그아웃), 환율 티커는 아래 줄 */
  .topbar{ flex-wrap:wrap; height:auto; gap:8px 10px; padding:8px 12px; }
  .search-box{ order:2; flex:1 1 0; min-width:0; max-width:none; min-height:44px; }
  .topbar-right{ order:3; margin-left:0; gap:8px; }
  .topbar-right .theme-btn, .user-chip > span{ display:none; }
  .rate-ticker{ order:4; flex:1 0 100%; white-space:normal; font-size:12px; }

  .content{ padding:14px 12px calc(24px + env(safe-area-inset-bottom)); }
  .page-title{ flex-wrap:wrap; gap:8px; }

  /* 터치 타겟 44px, 입력 글자 16px(iOS 자동 확대 방지) */
  .btn, .btn-small, .btn-tiny{ min-height:44px; padding:8px 14px; font-size:14px; }
  input:not([type=checkbox]):not([type=radio]), select, textarea,
  .field input, .field select, .field textarea, .filter-bar input, .filter-bar select,
  .inline-input, .inline-select, .bulk-bar select, .bulk-bar input, .price-editor select, .price-editor input{
    min-height:44px; font-size:16px; max-width:100%;
  }
  textarea{ min-height:88px; }
  input[type=checkbox], input[type=radio]{ width:22px; height:22px; margin:0; }
  .chip-filter span, .sub-chip{ min-height:40px; display:inline-flex; align-items:center; padding:6px 14px; font-size:13px; }
  .tabs{ overflow-x:auto; white-space:nowrap; flex-wrap:nowrap; }
  .tab{ min-height:44px; display:flex; align-items:center; flex:0 0 auto; }

  /* 필터·툴바: 줄바꿈하며 칸이 폭을 채운다(인라인 width 무시) */
  .filter-bar{ gap:8px; }
  .filter-bar > input, .filter-bar > select, .filter-bar > label{ flex:1 1 140px; width:auto !important; min-width:0; }
  .bulk-bar{ gap:8px; }
  .bulk-bar > select, .bulk-bar > input{ flex:1 1 120px; width:auto !important; }
  .btn-row{ flex-wrap:wrap; }
  .btn-row .btn{ flex:1 1 auto; }
  .price-editor{ left:12px !important; right:12px !important; min-width:0; width:auto; }
  .rate-input{ width:100%; }

  /* 대시보드 */
  .kpi-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .two-col{ grid-template-columns:1fr; }
  .placeholder-boxes{ flex-wrap:wrap; }

  /* 폼 */
  .form-grid{ grid-template-columns:1fr; }
  .field input, .field select, .field textarea{ width:100%; }
  .doc-frame{ height:70vh; }
  .timeline-strip{ -webkit-overflow-scrolling:touch; }

  /* 드로어(상품 상세·라벨·매장 등) → 풀스크린 */
  .drawer{ width:100%; max-width:100%; height:100dvh; border-left:none; }
  .drawer-head{ padding:10px 14px; position:sticky; top:0; background:var(--surface); }
  .drawer-body{ padding:14px; -webkit-overflow-scrolling:touch; }
  .drawer-foot{ padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:var(--surface); }
  .drawer-foot .btn{ flex:1 1 40%; }

  /* 표: 기본은 카드형 리스트 */
  .table-scroll{ max-height:none; overflow-x:auto; }
  table[data-cards]:not([data-scroll]){ display:block; border:none; background:transparent; overflow:visible; }
  table[data-cards]:not([data-scroll]) thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  table[data-cards]:not([data-scroll]) tbody{ display:block; }
  table[data-cards]:not([data-scroll]) tr{
    display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    margin-bottom:10px; padding:6px 12px; position:relative;
  }
  table[data-cards]:not([data-scroll]) tbody tr:hover{ background:var(--surface); }
  table[data-cards]:not([data-scroll]) td{
    display:flex; justify-content:space-between; align-items:center; gap:12px; padding:7px 0; text-align:right;
    border-bottom:1px dashed var(--border); white-space:normal !important; min-width:0 !important; overflow-wrap:anywhere; font-size:13.5px;
  }
  table[data-cards]:not([data-scroll]) td:last-child{ border-bottom:none; }
  table[data-cards]:not([data-scroll]) td::before{
    content:attr(data-label); flex:0 0 34%; max-width:40%; text-align:left; color:var(--ink-muted); font-size:12px; font-weight:600;
  }
  table[data-cards]:not([data-scroll]) td:not([data-label])::before{ display:none; }
  table[data-cards]:not([data-scroll]) td:empty, table[data-cards]:not([data-scroll]) td[data-empty]{ display:none; }
  table[data-cards]:not([data-scroll]) td.sel-cell{ width:auto; justify-content:flex-start; }
  table[data-cards]:not([data-scroll]) tr.empty-row td{ display:block; text-align:center; }
  table[data-cards]:not([data-scroll]) tr.empty-row td::before{ display:none; }
  table[data-cards]:not([data-scroll]) .users-actions{ flex-wrap:wrap; justify-content:flex-end; }
  .product-table tr.inactive td{ text-decoration:none; }
  .product-table tr.inactive td > *{ text-decoration:line-through; }

  /* 편집 표(입력칸 있음): 가로 스크롤 유지 */
  table[data-scroll]{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table[data-scroll] th, table[data-scroll] td{ white-space:nowrap; }
  .table-footer{ flex-wrap:wrap; gap:8px; }
}

@media (max-width:480px){
  body{ font-size:14px; }
  .content{ padding:12px 10px calc(20px + env(safe-area-inset-bottom)); }
  .page-title h1{ font-size:17px; }
  .kpi-grid{ gap:8px; }
  .kpi-card{ padding:12px 10px; }
  .kpi-num{ font-size:22px; }
  .panel{ padding:12px; }
  .login-body{ padding:16px; align-items:flex-start; padding-top:8vh; }
  .login-card{ padding:22px 18px; }
  .login-submit{ padding:10px 14px; }
  table[data-cards]:not([data-scroll]) td::before{ flex-basis:38%; }
}

/* 모바일: '글자 + 입력칸'이 한 줄에 섞인 폼 줄은 글자 아래 줄에 입력칸이 전체 폭으로 오게 한다 */
@media (max-width:768px){
  #screen-quote-new .filter-bar > input, #screen-quote-new .filter-bar > select,
  #delivery-admin-summary > input, #delivery-admin-summary > select,
  #bl-admin-info > input, #bl-admin-info > select{ flex:1 1 100%; }
  #screen-quote-new .filter-bar{ gap:4px 8px; }
}

/* ===== 배정 화면: 매장별 행 색(매장명 해시 → 고정 팔레트) / 매장 선택 + 변경·취소 묶음 / 설명 칸 ===== */
tbody tr.store-tint{ background:hsla(var(--tint-h),55%,50%,.12); }
[data-theme="dark"] tbody tr.store-tint{ background:hsla(var(--tint-h),50%,60%,.16); }
tbody tr.store-tint:hover{ filter:brightness(.96); }
[data-theme="dark"] tbody tr.store-tint:hover{ filter:brightness(1.15); }
.store-cell{ display:flex; align-items:center; gap:6px; flex-wrap:nowrap; white-space:nowrap; }
.memo-cell{ min-width:140px; max-width:260px; color:var(--ink-muted); font-size:12.5px; }

/* 배정 표: 현재 상태 열은 배지 폭만큼만, 남는 폭은 다른 열이 쓴다 */
#assign-table th:first-child, #assign-table td.col-status, #po-line-table th:first-child, #po-line-table td.col-status{ width:1%; white-space:nowrap; }

/* 금액 입력 빠른 증가 버튼(+100만/+50만/+10만/+5만) */
.price-field{ display:flex; flex-direction:column; gap:4px; font-size:13px; }
.price-row{ display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
.price-row input{ flex:1 1 120px; min-width:100px; }
.quick-add{ display:inline-flex; gap:3px; flex-wrap:wrap; }
.quick-add .btn-tiny{ padding:3px 7px; }
.similar-box{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* 유사머신 가격 자동 배정 확인 팝업 */
.modal-backdrop{ position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; padding:12px; }
.modal{ background:var(--surface); border-radius:8px; width:min(760px,100%); max-height:88vh; display:flex; flex-direction:column; padding:16px 18px; box-shadow:0 8px 28px rgba(0,0,0,.3); }
.modal h2{ margin:0 0 6px; font-size:16px; }
.modal-body{ overflow:auto; flex:1; margin:8px 0; }
.modal-foot{ display:flex; justify-content:flex-end; gap:8px; padding-top:8px; border-top:1px solid var(--border); }
.similar-table td, .similar-table th{ padding:5px 8px; font-size:12.5px; }

/* 열 정렬 헤더(상품마스터) */
thead th.sortable{ cursor:pointer; user-select:none; white-space:nowrap; }
thead th.sortable:hover{ color:var(--ink); }
thead th.sortable::after{ content:"↕"; margin-left:4px; font-size:10px; opacity:.35; }
thead th.sortable.sorted{ color:var(--accent); }
thead th.sortable.sorted::after{ opacity:1; }
thead th.sortable[data-dir="asc"]::after{ content:"▲"; }
thead th.sortable[data-dir="desc"]::after{ content:"▼"; }

/* ===== GUTEK 플랫폼: 브랜드·모듈 전환 (목업 규칙 뒤에 덧붙임) ===== */
.sidebar .logo{ font-size:20px; letter-spacing:.14em; color:var(--accent); }
.login-logo{ font-size:24px; letter-spacing:.14em; }
.module-switch{ display:flex; gap:6px; padding:0 12px 12px; border-bottom:1px solid var(--border); margin-bottom:8px; }
.module-item{
  flex:1; text-align:center; padding:7px 4px; border:1px solid var(--border); border-radius:6px;
  color:var(--ink-muted); font-size:13px; font-weight:600; text-decoration:none; background:var(--surface);
}
.module-item:hover{ background:var(--surface2); color:var(--ink); }
.module-item.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.check-inline{ display:inline-flex; align-items:center; gap:4px; margin-right:14px; font-size:13px; cursor:pointer; }
.module-edit{ margin-top:14px; }
.placeholder-panel{ max-width:520px; text-align:center; padding:40px 24px; }