/* 목업(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); }
.field-value{ font-size:13px; color:var(--ink); padding:7px 0; }
.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; }
/* 견적서 미리보기 아래: 문서 옵션(줄 간격·사진 쪽) → 다운로드 버튼 줄. 좁은 화면에서는 줄바꿈해 가로로 넘치지 않는다 */
.doc-options{ max-width:760px; margin:14px auto 0; }
.doc-options > .btn-row{ max-width:none !important; margin:0 0 8px !important; flex-wrap:wrap; }
.doc-options .meta{ min-width:0; overflow-wrap:anywhere; }
.doc-download-row{ max-width:760px; margin:6px auto 0; flex-wrap:wrap; align-items:center; }
.doc-download-row .doc-image-mode{ align-self:stretch; }
.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; text-decoration-color:#dc2626; }
.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); }
/* 직원 상품 상세: 긴 값은 패널 안에서 줄바꿈하고 라벨은 눌리지 않게 둔다 */
#product-readonly .calc-row{ gap:12px; }
#product-readonly .calc-row .k{ flex:0 0 auto; white-space:nowrap; }
#product-readonly .calc-row > span:last-child{ min-width:0; overflow-wrap:anywhere; text-align:right; }
/* 상품 필터: 긴 브랜드·시리즈 값이 있어도 칸이 늘어나 화면을 밀지 않게 한다(좁은 화면은 아래 모바일 규칙이 처리) */
@media (min-width:769px){ #screen-product .filter-bar > select{ max-width:220px; } }

/* 계정 관리 */
.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; }
@media (max-width:1280px){ .users-actions{ white-space:normal; } .users-actions .btn{ margin:2px 0 2px 4px; } } /* 버튼 세 개가 한 줄을 고집하면 세로 스크롤바 폭만큼 표가 창을 넘는다 */
@media (max-width:1000px){ .users-table-box{ overflow-x:auto; } } /* 이보다 좁으면 줄을 바꿔도 표가 넘친다. 페이지 대신 표 안에서 가로로 민다 */
.filter-bar input.invalid{ border-color:var(--danger); }

/* ---- 목업 아래 덮어쓰기(목업 <style> 본문은 그대로 둔다) ---- */
/* 표가 있는 화면은 창 너비를 따라 늘어난다. 글 위주 화면(대시보드 등)은 읽기 좋게 기존 최대폭 유지 */
.content{ max-width:1360px; min-width:0; }
.content:has(table){ max-width:none; }
.content:has(.home-board){ max-width:1740px; } /* 홈 보드 칸은 창 폭을 따라 늘어나되, 글자가 듬성해지지 않게 기존 상한의 약 30% 위에서 멈춘다(칸 폭 253 → 329px) */
/* 표 자체가 스크롤: 세로로 내려도 헤더가 고정된다 */
.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; }
  .doc-options select{ flex:1 1 200px; min-width:0; }
  .doc-download-row .doc-image-mode{ flex:1 1 140px; min-width:0; }
  .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; text-decoration-color:#dc2626; }

  /* 편집 표(입력칸 있음): 가로 스크롤 유지 */
  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 .store-cell select, #pipe-table .store-cell select{ font:inherit; color:inherit; }

/* 금액 입력 빠른 증가 버튼(+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; }
/* 2026-11-04 대표 지시: 모듈 전환 버튼을 사이드바에서 상단바로 이동, 좌측은 화면(nav) 메뉴만 */
.topbar .module-switch{ padding:0; border-bottom:none; margin-bottom:0; gap:8px; flex:none; }
.topbar .module-item{ flex:none; padding:6px 14px; }
.check-inline{ display:inline-flex; align-items:center; gap:4px; margin-right:14px; font-size:13px; cursor:pointer; }
.module-edit{ margin-top:14px; }
#users-table .badge, #users-table .badge-plain{ word-break:keep-all; } /* 좁은 폭에서 '대표'·'사용중'이 글자 사이로 쪼개지지 않게. '사용중 · 변경 대기'는 띄어쓰기에서만 접힌다 */
.placeholder-panel{ max-width:520px; text-align:center; padding:40px 24px; }

/* 홈: 업무 보드. 칸 번호마다 색이 하나(--home-q, home.js COLOR·CHECK_COLOR)이고 제목 바·입력 바 숫자 버튼·완료내역이 같이 쓴다. 밝은 색이라 위 글자는 테마와 무관하게 어두운 색(대비 4.5:1 이상). 그 아래는 체크박스+밑줄 표. 달력 칸은 인테리어의 .int-calendar 를 함께 쓴다 */
:root{ --home-on-q:#1B1F27; }
.home-toolbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.home-toolbar select{ width:auto; min-width:140px; padding:7px 10px; font-size:13px; background:var(--surface); color:var(--ink); border:1px solid var(--border); border-radius:var(--radius-sm); }
.home-scope{ display:inline-flex; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
.home-scope-btn{ padding:7px 12px; font-size:13px; font-weight:600; background:var(--surface); color:var(--ink-muted); border:0; cursor:pointer; }
.home-scope-btn + .home-scope-btn{ border-left:1px solid var(--border); }
.home-scope-btn.on{ background:var(--accent); color:var(--surface); }
.home-board{ --home-col-h:320px; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:12px; }
.home-col, .home-check-col{ min-height:var(--home-col-h); max-height:calc(var(--home-col-h) * 2); overflow:hidden auto; background:var(--surface); border:1px solid var(--border); } /* 칸은 기본 높이의 2배까지 늘어나고 그 뒤로는 칸 안에서 스크롤 */
.home-col.drop-on{ outline:2px dashed var(--accent); outline-offset:-2px; }
.home-col-head{ position:sticky; top:0; z-index:1; display:flex; align-items:center; gap:6px; padding:8px 10px; background:var(--home-q); color:var(--home-on-q); }
.home-col-head h2{ flex:1; min-width:0; margin:0; font-size:13.5px; font-weight:700; color:inherit; }
.home-col-count{ font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }
.home-empty{ margin:6px 2px; }
.home-col .home-empty, .home-check-col .home-empty{ margin:10px; }
.home-card{ --home-row-y:7px; display:flex; align-items:flex-start; gap:6px; padding:var(--home-row-y) 10px var(--home-row-y) 8px; border-bottom:1px solid var(--border); }
.home-card{ cursor:pointer; }
/* 시스템 알림 줄(회계 검토 필요 N건): 업무 카드와 같은 줄 높이, 끌기·완료 없음, 누르면 검토 화면 */
.home-alert{ display:flex; align-items:center; gap:6px; padding:7px 10px 7px 8px; border-bottom:1px solid var(--border); border-left:3px solid var(--home-q, var(--accent)); color:var(--ink); text-decoration:none; font-weight:600; }
.home-alert:hover{ background:var(--hover, rgba(0,0,0,.03)); }
.home-alert-tag{ padding:0 4px; border:1px solid var(--border); border-radius:3px; font-size:10.5px; font-weight:400; color:var(--ink-muted); }
.home-alert-title{ flex:1; }
.home-alert-go{ color:var(--ink-muted); }
.home-card:hover{ background:var(--surface2); }
.home-card.editable[draggable=true]{ cursor:grab; }
.home-tick{ flex:none; align-self:stretch; display:flex; align-items:flex-start; margin:calc(-1 * var(--home-row-y)) -2px calc(-1 * var(--home-row-y)) -8px; padding:var(--home-row-y) 6px var(--home-row-y) 8px; cursor:pointer; }
.home-card .home-tick:hover{ background:var(--border); }
.home-tick.locked{ cursor:not-allowed; }
.home-card .home-tick.locked:hover{ background:none; }
.home-check{ flex:none; display:inline-grid; place-content:center; width:18px; height:18px; margin:0; appearance:none; -webkit-appearance:none; background:var(--surface); border:1.5px solid var(--ink-muted); border-radius:0; cursor:pointer; }
.home-check:checked{ background:var(--accent); border-color:var(--accent); }
.home-check:checked::after{ content:""; width:5px; height:10px; border:solid var(--surface); border-width:0 2px 2px 0; transform:translateY(-1px) rotate(45deg); }
.home-check:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.home-check:disabled{ opacity:.5; cursor:not-allowed; }
/* 다 들어가면 한 줄(제목 … 담당자 날짜), 제목이 길면 담당자·날짜가 다음 줄 오른쪽으로 내려간다 */
.home-card-body{ flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:flex-end; gap:1px 8px; }
.home-card-title{ flex:1 1 auto; max-width:100%; font-size:13.5px; font-weight:500; line-height:1.35; overflow-wrap:anywhere; }
.home-card-detail{ flex:0 0 100%; min-width:0; }
.home-card-facts{ display:grid; grid-template-columns:auto minmax(0, 1fr); gap:1px 8px; margin:6px 0 0; font-size:12px; line-height:1.35; color:var(--ink-muted); }
.home-card-facts dd{ margin:0; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.home-card-edit{ margin-top:6px; }
/* 카드 안 수정 칸. 칸 폭이 좁아 한 줄에 하나씩 쌓는다 */
.home-card.editing, .home-card.editing:hover{ cursor:default; background:var(--surface2); opacity:1; }
.home-card.editing .home-card-more{ visibility:hidden; } /* 저장·취소 전에는 접히지 않는다 */
.home-card.editing .home-tick{ cursor:default; }
.home-card.editing input, .home-card.editing textarea{ -webkit-user-select:text; user-select:text; } /* 터치 기기에서 카드에 건 글자 선택 금지가 입력을 막지 않게 */
.home-edit-form{ cursor:auto; }
.home-card .home-edit-form{ margin-top:6px; }
.home-card .home-edit-form .field{ margin-bottom:8px; }
.home-edit-quads{ display:flex; gap:6px; }
.home-edit-quads .home-quick-quad{ flex:1; min-width:0; }
.home-edit-quad-name{ display:block; margin-top:4px; font-size:11.5px; font-weight:400; }
.home-edit-when{ display:flex; flex-wrap:wrap; gap:0 8px; }
.home-edit-when .field{ flex:1 1 120px; min-width:0; }
.home-edit-more{ margin-bottom:8px; font-size:12px; color:var(--ink-muted); }
.home-edit-more summary{ padding:2px 0 6px; cursor:pointer; }
.home-edit-more .caption{ margin:0 0 8px; }
/* 인테리어 '더 보기' 접기(간결화 11-12): 안의 입력칸은 보통 글자 크기 */
.int-more{ font-size:inherit; color:inherit; margin:4px 0 8px; }
.int-more > summary{ font-size:13px; color:var(--ink-muted); padding:6px 0 8px; }
@media (max-width:768px){ #int-tasks-table .int-col-seq{ display:none; } } /* 휴대폰 공정 표: 순서 열을 숨겨 상태까지 한 화면에 */
.home-edit-foot{ position:sticky; bottom:0; z-index:1; display:flex; justify-content:flex-end; gap:6px; padding:6px 0; background:var(--surface2); } /* 칸 안을 스크롤해도 저장·취소가 보인다 */
.drawer-foot .home-edit-foot{ position:static; width:100%; padding:0; background:none; } /* 패널은 아래쪽 줄이 이미 고정이다 */
.home-card-content{ margin-top:4px; font-size:12px; line-height:1.35; color:var(--ink-muted); white-space:pre-wrap; overflow-wrap:anywhere; }
.home-card-meta, .home-card-date{ margin-top:3px; font-size:12px; color:var(--ink-muted); overflow-wrap:anywhere; }
.home-card-side{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:1px 8px; max-width:100%; }
.home-card-more{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:24px; height:20px; margin:-2px -6px -2px -4px; padding:0; border:0; border-radius:0; background:none; color:var(--ink-muted); font-size:13px; line-height:1; cursor:pointer; }
.home-card-more:hover{ background:var(--border); color:var(--ink); }
.home-card-more:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.home-card-more[aria-expanded=true]{ transform:rotate(180deg); }
@media (pointer:coarse){ .home-card-more{ width:44px; height:44px; margin:-12px -10px -12px -8px; } } /* 손가락으로 누를 넓이. 카드 높이는 그대로 */
.home-card-side .home-card-meta, .home-card-side .home-card-date{ margin-top:0; font-variant-numeric:tabular-nums; }
.home-card-date.overdue{ color:var(--danger); font-weight:600; }
.home-card.done{ opacity:.65; }
.home-card.done .home-card-title{ text-decoration:line-through; }
.home-cal-wrap{ position:relative; }
.home-cal-detail{ position:absolute; z-index:10000; width:min(360px, 100%); cursor:auto; background:var(--surface); border:1px solid var(--border); box-shadow:0 4px 14px rgba(0,0,0,.18); outline:none; } /* 더보기 창(라이브러리 z-index 9999) 위. 수정 패널이 열리면 상세는 닫혀 서랍과 겹치지 않는다 */
.home-cal-detail .message-box > *{ margin:8px 10px 0; }
.home-cal-detail-title{ padding:6px 10px; font-size:13.5px; font-weight:700; line-height:1.35; color:var(--home-on-q); background:var(--home-q); overflow-wrap:anywhere; }
.home-cal-detail-info{ padding:2px 10px 8px; }
.home-cal-detail-foot{ display:flex; justify-content:flex-end; gap:6px; padding:8px 10px; border-top:1px solid var(--border); }
#home-calendar .fc-event{ cursor:pointer; }
.home-legend{ display:flex; flex-wrap:wrap; gap:14px; margin:8px 0 2px; font-size:12px; color:var(--ink-muted); }
.home-legend-item{ display:inline-flex; align-items:center; gap:5px; }
.home-legend-item i{ width:10px; height:10px; border-radius:2px; }
/* 홈 캘린더: 하루 5줄 + '+N개 더보기' 가 항상 들어가는 높이. 한 업무가 한 줄이 되게 줄을 바꾸지 않고, 펼친 칸(더보기 창)에서만 제목 전체를 보인다 */
#home-calendar .fc-daygrid-day-frame{ min-height:172px; }
#home-calendar .fc-event-main{ min-width:0; }
#home-calendar .fc-event.home-cal-slot .int-cal-text{ color:var(--home-on-q); } /* 칸 번호 색 위 글자 */
#home-calendar .int-cal-text{ flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#home-calendar .fc-more-popover .int-cal-text{ white-space:normal; }
#home-calendar .fc-more-popover{ margin-top:30px; } /* 펼쳐도 날짜 숫자 줄은 가리지 않아, 눌러서 그날 업무를 입력할 수 있다 */
#home-calendar .fc-more-popover .fc-popover-body{ max-height:50vh; overflow-y:auto; }
#home-calendar .fc-more-popover-misc{ display:none; } /* 창 제목에 날짜가 있어 숫자를 또 보이지 않는다 */
#home-calendar .fc-daygrid-more-link{ display:block; padding:2px 5px; font-size:12px; font-weight:600; color:var(--accent); }
@media (hover:none){ #home-calendar .fc-daygrid-more-link{ padding:9px 5px; } } /* 손가락으로 누르는 칸 */
.home-drawer-foot{ display:flex; justify-content:space-between; gap:8px; width:100%; }
.home-drawer-foot .btn.primary{ margin-left:auto; }
.home-drop-line{ height:3px; margin:-1.5px 0; background:var(--accent); pointer-events:none; }
.home-card.touch-dragging{ opacity:.35; }
.home-touch-ghost{ position:fixed; left:0; top:0; z-index:20; background:var(--surface); border:1px solid var(--accent); box-shadow:0 4px 14px rgba(0,0,0,.25); pointer-events:none; }
@media (pointer:coarse){ .home-card.editable{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; } } /* 길게 누를 때 글자 선택·말풍선이 뜨지 않게 */
.home-quick{ margin-top:12px; padding:10px; background:var(--surface); border:1px solid var(--border); } /* 보드 칸과 같은 간격·테두리로 이어 붙인다 */
.home-quick .message-box > *{ margin:0 0 8px; }
.home-quick-form{ display:flex; align-items:stretch; gap:8px; }
.home-quick-fields{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.home-quick-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#home-quick-ok{ flex:none; min-width:72px; }
.home-quick-form input:disabled, .home-quick-form select:disabled, .home-quick-form textarea:disabled{ opacity:.5; cursor:not-allowed; }
.home-quick-form input, .home-quick-form select, .home-quick-form textarea{ padding:7px 10px; font-size:13px; background:var(--surface); color:var(--ink); border:1px solid var(--border); border-radius:var(--radius-sm); }
#home-quick-title{ flex:1 1 120px; min-width:0; }
.home-quick-when{ flex:none; display:flex; gap:8px; } /* 창이 좁아져도 날짜와 시간은 떨어지지 않는다 */
#home-quick-date{ flex:none; width:140px; }
#home-quick-time{ flex:none; width:140px; } /* 오전/오후·시·분과 시계 아이콘이 잘리지 않는 폭 */
#home-quick-content{ display:block; width:100%; font-family:inherit; }
.home-grow{ resize:none; overflow:hidden; line-height:1.4; } /* 글이 늘면 칸이 커지므로(home.js growToText) 손잡이도 스크롤도 없다 */
.home-quick-form select{ width:auto; max-width:130px; }
.home-quick-quads{ display:flex; gap:6px; flex:none; }
.home-quick-quad{ min-width:34px; padding:6px 0; font:inherit; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--home-on-q); background:var(--home-q); border:0; border-radius:var(--radius-sm); cursor:pointer; }
.home-quick-quad.on{ font-weight:800; outline:2px solid var(--ink); outline-offset:1px; }
.home-check-col .message-box > *{ margin:8px 10px 0; }
.home-check-row{ display:flex; align-items:flex-start; gap:6px; padding:var(--home-row-y, 7px) 10px var(--home-row-y, 7px) 8px; border-bottom:1px solid var(--border); }
.home-check-row:hover{ background:var(--surface2); }
.home-check-row .btn{ flex:none; }
.home-check-main{ display:flex; align-items:flex-start; gap:6px; flex:1; min-width:0; cursor:pointer; }
.home-check-row.locked .home-check-main{ cursor:default; }
.home-check-owner{ padding:5px 10px; font-size:12px; font-weight:600; color:var(--ink-muted); background:var(--surface2); border-bottom:1px solid var(--border); overflow-wrap:anywhere; }
.home-check-title{ font-size:13.5px; font-weight:500; line-height:1.35; overflow-wrap:anywhere; }
#home-check-help{ margin:8px 10px 10px; }
.home-check-row.done .home-check-title{ color:var(--ink-muted); text-decoration:line-through; }
/* 홈 공지사항: 맨 위 칸은 건당 2줄까지만, 전체 글은 더 보기 패널(.full)에서 읽는다 */
/* 완료내역 */
.home-done-slots{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.home-done-slot{ padding:6px 12px; font:inherit; font-size:13px; font-weight:600; color:var(--home-on-q); background:var(--home-q, var(--surface2)); border:0; border-radius:var(--radius-sm); cursor:pointer; }
.home-done-slot:not([style]){ color:var(--ink); }
.home-done-slot.on{ font-weight:800; outline:2px solid var(--ink); outline-offset:1px; }
.home-done-search{ display:flex; gap:8px; margin-bottom:12px; max-width:480px; }
.home-done-search input{ flex:1; min-width:0; padding:7px 10px; font-size:13px; background:var(--surface); color:var(--ink); border:1px solid var(--border); border-radius:var(--radius-sm); }
.home-done-list{ background:var(--surface); border:1px solid var(--border); }
.home-done-list > .home-empty{ margin:14px; }
.home-done-day + .home-done-day{ border-top:1px solid var(--border); }
.home-done-date{ margin:0; padding:6px 12px; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink); background:var(--surface2); border-bottom:1px solid var(--border); }
.home-done-row{ display:flex; align-items:flex-start; gap:10px; width:100%; padding:9px 12px; font:inherit; font-size:13px; text-align:left; color:var(--ink); background:none; border:0; border-bottom:1px solid var(--border); cursor:pointer; }
.home-done-row:last-child{ border-bottom:0; }
.home-done-row:hover{ background:var(--surface2); }
.home-done-num{ flex:none; width:24px; height:24px; display:inline-grid; place-content:center; font-weight:700; font-variant-numeric:tabular-nums; color:var(--home-on-q); background:var(--home-q); border-radius:var(--radius-sm); }
.home-done-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.home-done-title{ font-weight:600; overflow-wrap:anywhere; }
.home-done-snippet{ font-size:12px; color:var(--ink-muted); white-space:pre-wrap; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.home-done-who, .home-done-at{ flex:none; font-size:12px; color:var(--ink-muted); }
.home-done-who{ width:90px; overflow-wrap:anywhere; }
.home-done-at{ width:48px; font-variant-numeric:tabular-nums; text-align:right; }
.home-done-fields{ margin:0; }
.home-done-field{ padding:8px 0; border-bottom:1px solid var(--border); }
.home-done-field dt{ margin-bottom:2px; font-size:12px; color:var(--ink-muted); }
.home-done-field dd{ margin:0; font-size:13.5px; white-space:pre-wrap; overflow-wrap:anywhere; }
@media (max-width:768px){ .home-done-row{ flex-wrap:wrap; } .home-done-main{ flex-basis:calc(100% - 34px); } .home-done-who{ width:auto; margin-left:34px; } .home-done-at{ width:auto; margin-left:auto; } }
.home-notice{ margin-bottom:14px; padding:10px 12px; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--radius); }
.home-notice-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.home-notice-head h2{ flex:1; min-width:0; margin:0; font-size:13.5px; font-weight:700; }
.home-notice-actions{ display:flex; gap:6px; }
.home-notice-item{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:6px 0; border-top:1px solid var(--border); }
.home-notice-body{ flex:1; min-width:0; font-size:13.5px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.home-notice-meta{ flex:none; display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-muted); }
.home-notice-item.full{ display:block; padding:10px 0; }
.home-notice-item.full .home-notice-body{ display:block; overflow:visible; }
.home-notice-item.full .home-notice-meta{ flex-wrap:wrap; margin-top:6px; }
.home-notice.expanded .home-notice-list{ max-height:60vh; overflow-y:auto; } /* 공지가 많아도 접기 버튼과 보드가 멀어지지 않게 */
@media (max-width:768px){ .home-notice-item{ display:block; } .home-notice-meta{ flex-wrap:wrap; margin-top:4px; } }
@media (max-width:1280px){ .home-board{ grid-template-columns:repeat(4, minmax(0, 1fr)); } .home-check-col{ grid-column:1 / -1; min-height:0; } } /* 다섯 칸이 좁아지면 체크 열은 4개 분면 아래 한 줄로 */
@media (max-width:1100px){ .home-board{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .home-quick-quads{ gap:4px; } .home-quick-quad{ min-width:30px; } } /* 입력 바 숫자 버튼을 줄여 창 1000(세로 스크롤바 포함)에서도 제목·날짜·시간이 한 줄에 든다 */
@media (max-width:768px){ .home-board{ grid-template-columns:minmax(0, 1fr); } .home-col{ min-height:0; } .home-col, .home-check-col{ max-height:none; overflow:visible; } .home-col-head{ position:static; } .home-card, .home-check-row{ --home-row-y:11px; }
  .home-quick-form{ flex-direction:column; } .home-quick-row{ gap:6px; } .home-quick-quads{ flex:1 1 100%; gap:6px; } .home-quick-quad{ flex:1; min-height:40px; }
  #home-quick-title{ flex-basis:100%; } .home-quick-when{ flex:1 1 100%; gap:6px; min-width:0; } #home-quick-date, #home-quick-time{ flex:1 1 130px; min-width:0; width:auto; } .home-quick-form select{ flex:0 1 110px; } #home-quick-ok{ width:100%; } }

/* 홈 업무 배정(11-07): 받은 업무 표·확인함·코멘트·배정 탭. 칸 색(4분면)은 그대로 두고 회색 계열 작은 표만 더한다 */
.home-assign-chip{ display:inline-block; max-width:100%; padding:1px 6px; font-size:11.5px; font-weight:600; line-height:1.5; color:var(--ink); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home-assign-chip.kind-assign{ border-color:var(--ink); }
.home-assign-chip.out{ color:var(--ink-muted); }
.home-card-actions{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.home-card-actions:empty{ display:none; }
.home-quick-hint{ font-size:12px; color:var(--ink-muted); }
.home-quick-hint:empty{ display:none; }
.home-comments{ margin-top:8px; padding-top:6px; border-top:1px dashed var(--border); cursor:default; }
.home-comments-head{ font-size:12px; font-weight:700; color:var(--ink-muted); margin-bottom:4px; }
.home-comment{ padding:4px 0; border-bottom:1px solid var(--border); }
.home-comment-meta{ display:flex; justify-content:space-between; gap:8px; font-size:11.5px; color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.home-comment-body{ font-size:13px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }
.home-comment-del{ padding:0; font:inherit; font-size:11.5px; color:var(--ink-muted); background:none; border:0; text-decoration:underline; cursor:pointer; }
.home-comment-form{ display:flex; gap:6px; align-items:flex-end; margin-top:6px; }
.home-comment-input{ flex:1; min-width:0; padding:6px 8px; font:inherit; font-size:13px; resize:vertical; background:var(--surface); color:var(--ink); border:1px solid var(--border); border-radius:var(--radius-sm); }
.home-assign-list{ display:flex; flex-direction:column; gap:14px; margin-top:8px; }
.home-assign-group{ background:var(--surface); border:1px solid var(--border); }
.home-assign-group-head{ display:flex; align-items:center; gap:6px; margin:0; padding:8px 10px; font-size:14px; border-bottom:1px solid var(--border); }
.home-assign-row{ border-bottom:1px solid var(--border); }
.home-assign-row:last-child{ border-bottom:0; }
.home-assign-row.done .home-assign-title{ color:var(--ink-muted); text-decoration:line-through; }
.home-assign-head{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; padding:9px 10px; cursor:pointer; }
.home-assign-head .home-tick{ position:static; width:auto; height:auto; padding:0; }
.home-assign-q{ flex:none; min-width:22px; padding:1px 0; font-size:12px; font-weight:700; text-align:center; color:var(--home-on-q); background:var(--home-q); border-radius:var(--radius-sm); }
.home-assign-title{ flex:1 1 200px; min-width:0; font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.home-assign-head .home-card-date{ margin-top:0; font-variant-numeric:tabular-nums; }
.home-assign-state{ font-size:12px; font-weight:600; color:var(--ink-muted); }
.home-assign-state.ok{ color:var(--ink); }
.home-assign-count{ font-size:12px; color:var(--ink-muted); }
.home-assign-detail{ padding:0 10px 10px 38px; }
.home-assign-actions{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
@media (max-width:768px){ .home-assign-detail{ padding-left:10px; } .home-assign-title{ flex-basis:100%; order:-1; } .home-comment-form{ flex-direction:column; align-items:stretch; } }

/* 회계 홈 표: 한 사업장에 계좌가 여럿이면 계좌번호·잔고를 같은 줄 순서로 쌓는다 */
.acct-lines > div{ line-height:1.6; white-space:nowrap; }
.acct-lines .acct-sum{ font-weight:600; border-top:1px solid var(--line, #e3e6ea); margin-top:2px; }
.acct-neg{ color:var(--danger); }
.acct-total{ margin-top:12px; text-align:right; font-weight:600; }
#acct-home-table tbody tr[draggable=true]{ cursor:grab; user-select:text; } /* 브라우저 기본값은 끌 수 있는 행의 글자 선택을 막는다. 계좌번호는 두세 번 눌러 복사한다 */
#acct-home-table tbody tr.acct-dragging{ opacity:.45; }
#acct-home-table tbody tr.acct-drop-before td{ box-shadow:inset 0 2px 0 var(--accent); }
#acct-home-table tbody tr.acct-drop-after td{ box-shadow:inset 0 -2px 0 var(--accent); }
.acct-memo-cell{ min-width:170px; max-width:280px; cursor:auto; }
.acct-memo-text{ display:block; width:100%; padding:3px 6px; background:none; border:1px solid transparent; border-radius:4px; color:inherit; font:inherit; text-align:left; white-space:normal; overflow-wrap:anywhere; cursor:text; }
.acct-memo-text:hover{ border-color:var(--border); }
.acct-memo-text.empty{ color:var(--ink-muted); }
.acct-memo-input{ width:100%; }
.acct-memo-readonly{ display:block; padding:3px 6px; white-space:normal; overflow-wrap:anywhere; }
.acct-memo-readonly.empty{ color:var(--ink-muted); }
.acct-auto-note{ margin-top:4px; padding-left:6px; color:var(--ink-muted); font-size:11.5px; white-space:nowrap; }
.acct-auto-tag{ margin-right:5px; padding:0 4px; border:1px solid var(--border); border-radius:3px; font-size:10.5px; }
.acct-hidden, .acct-total-note{ color:var(--muted, #6b7280); }
.acct-total-note{ text-align:right; margin-top:4px; }
/* 회계 검토 알림 배너(회계 화면 맨 위) */
.acct-review-banner{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:14px; padding:10px 14px; border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:6px; background:var(--surface, #fff); }
.acct-review-banner .btn-tiny{ margin-left:auto; }
/* 규칙 업데이트로 새 후보(직접 분류 재확인): 분류 칸 안에서 지금 분류와 새 후보를 나란히, 좁은 화면에서는 줄바꿈 */
.acct-reask{ margin-top:6px; padding:6px 8px; border:1px solid var(--border); border-left:3px solid var(--st-pending); border-radius:var(--radius-sm); background:var(--surface2); cursor:default; max-width:320px; }
.acct-reask-title{ font-size:11.5px; font-weight:600; color:var(--st-pending); }
.acct-reask-pair{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 6px; font-size:12.5px; overflow-wrap:anywhere; }
.acct-reask-new{ font-weight:600; }
.acct-reask-btns{ display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
/* 계좌 거래 메모 + 대표 확인요청(대표 지시 11-11). 기존 '검토'(분류 확인, 주황 띠)와 다른 색·이름 */
/* 11-11 열 정리: 메모 열(두 줄 말줄임) · 대표확인 열(뱃지만) · 작업 열(매칭 / 대표확인 / 메모 한 줄) */
#acct-tx-table thead th{ white-space:nowrap; }
.acct-txmemo-cell{ min-width:140px; max-width:240px; cursor:default; }
.acct-confirm-cell{ white-space:nowrap; cursor:default; }
.acct-confirm-cell .acct-note-chip{ cursor:help; }
.acct-act-cell{ cursor:default; white-space:nowrap; }
.acct-act-row{ display:flex; flex-wrap:nowrap; gap:4px; align-items:center; }
.acct-act-btn{ display:inline-flex; align-items:center; gap:3px; white-space:nowrap; }
.acct-act-btn[disabled]{ opacity:.45; cursor:not-allowed; }
.acct-act-ico{ font-size:11px; line-height:1; }
.acct-st-flags{ display:inline-flex; flex-wrap:wrap; gap:3px; margin-left:6px; vertical-align:middle; }
.acct-st-flag{ display:inline-block; padding:0 6px; border-radius:999px; font-size:11px; line-height:17px; font-weight:600; background:var(--surface2); border:1px solid var(--border); color:var(--ink-muted); white-space:nowrap; }
.acct-st-flag[data-st=review], .acct-st-flag[data-st=review_needed]{ color:var(--st-pending); border-color:var(--st-pending); }
.acct-st-flag[data-st=unclassified]{ color:var(--danger); border-color:var(--danger); }
.acct-note-memo{ all:unset; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:pre-wrap; overflow-wrap:anywhere;
  font-size:12.5px; line-height:1.4; cursor:pointer; padding:3px 6px; border-radius:var(--radius-sm); background:var(--surface2); border:1px solid var(--border); max-width:240px; }
.acct-note-memo.empty{ background:none; border-style:dashed; color:var(--ink-muted); }
.acct-note-memo:hover, .acct-note-memo:focus-visible{ border-color:var(--ink-muted); }
.acct-note-chip{ display:inline-block; padding:1px 7px; border-radius:999px; font-size:11.5px; font-weight:600; }
.acct-note-chip.pending{ background:#e8eefc; color:#1f47a8; }
.acct-note-chip.done{ background:#e6f4ea; color:#1e6b34; }
.acct-note-tx{ padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface2); margin-bottom:12px; }
.acct-note-field{ display:block; margin:10px 0 6px; }
.acct-note-label{ display:block; font-weight:600; margin-bottom:4px; }
.acct-note-textarea{ width:100%; box-sizing:border-box; resize:vertical; font:inherit; }
.acct-note-field input[type=text]{ width:100%; box-sizing:border-box; }
.acct-note-chip.cancelled, .acct-note-chip.withdrawn{ background:var(--surface2); color:var(--text2, #555); }
/* 대표확인 버튼 토글(11-11 '다시누르면 철회'): 내가 올린 대기 요청은 눌린 상태로 */
.acct-act-btn.acct-act-on{ background:#e8eefc; color:#1f47a8; border-color:#1f47a8; box-shadow:inset 0 1px 2px rgba(0,0,0,.12); }
.acct-note-toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:1000; padding:8px 16px; border-radius:999px;
  background:#222; color:#fff; font-size:13.5px; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.acct-note-toast[hidden]{ display:none; }
button.acct-note-chip.clickable{ border:0; cursor:pointer; font-family:inherit; }
button.acct-note-chip.clickable:hover, button.acct-note-chip.clickable:focus-visible{ text-decoration:underline; }
.acct-note-log{ list-style:none; margin:10px 0 0; padding:0; }
.acct-note-log-item{ padding:8px 0; border-top:1px solid var(--border, #e5e5e5); }
.acct-note-log-head{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.acct-note-log-text{ margin:4px 0 2px; white-space:pre-wrap; overflow-wrap:anywhere; }
.acct-note-quote{ margin:8px 0; padding:6px 10px; border-left:3px solid #1f47a8; background:var(--surface2); white-space:pre-wrap; overflow-wrap:anywhere; }
.acct-confirm-filter{ display:inline-flex; align-items:center; gap:4px; margin-right:8px; }
.acct-confirm-only.active{ background:#1f47a8; color:#fff; border-color:#1f47a8; }
.acct-note-badge{ display:inline-block; min-width:18px; margin-left:5px; padding:0 5px; border-radius:999px; background:#d93025; color:#fff; font-size:11px; line-height:18px; text-align:center; }
@media (max-width:768px){
  /* 휴대폰 카드: 메모는 제목 한 줄 + 전체 너비, 작업 버튼 세 개는 카드 맨 아래 한 줄(줄바꿈 없이) */
  table[data-cards]:not([data-scroll]) td.acct-txmemo-cell{ display:block; max-width:none; text-align:left; }
  table[data-cards]:not([data-scroll]) td.acct-txmemo-cell::before{ display:block; margin-bottom:6px; }
  .acct-note-memo{ max-width:none; -webkit-line-clamp:3; }
  table[data-cards]:not([data-scroll]) td.acct-act-cell{ display:block; padding-top:9px; }
  table[data-cards]:not([data-scroll]) td.acct-act-cell::before{ display:none; }
  table[data-cards]:not([data-scroll]) .acct-act-row{ justify-content:flex-end; }
  table[data-cards]:not([data-scroll]) .acct-act-btn{ padding:5px 9px; font-size:12.5px; }
}
@media (max-width:768px){ /* 카드형 목록: 재확인 상자는 분류 줄 아래 한 줄을 다 쓴다 */
  table[data-cards]:not([data-scroll]) td.acct-cls-cell:has(.acct-reask){ flex-wrap:wrap; }
  .acct-reask{ flex:1 0 100%; max-width:none; text-align:left; }
  .acct-reask-btns .btn{ flex:1 1 auto; }
}
.acct-cls-review{ color:var(--ink); font-weight:600; }
/* 경영분석 1페이지 손익 */
.acct-pl-kpis{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:16px; }
.acct-pl-kpi{ flex:1 1 240px; padding:14px 16px; border:1px solid var(--border); border-radius:6px; }
#acct-pl-op .acct-pl-num{ font-size:28px; font-weight:700; font-variant-numeric:tabular-nums; }
#acct-pl-cash .acct-pl-num{ font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; }
.acct-pl-line{ border-top:1px solid var(--border); padding-top:8px; }
.acct-pl-warn{ margin-bottom:12px; padding:8px 12px; border:1px solid var(--border); border-left:4px solid var(--danger); border-radius:6px; }
.acct-pl-notes{ margin:6px 0 16px 18px; line-height:1.7; }
/* 경영분석 줄 펼치기·비중 %·아래 거래내역(대표 지시 11-12). 표는 .table-scroll 안이라 휴대폰에서 가로로 민다 */
#acct-pl .two-col > *, #acct-pl .panel{ min-width:0; } /* 펼친 거래 표가 넓어도 칸이 화면 밖으로 늘지 않고 표 안에서 민다 */
.acct-pl-lines .acct-pl-linerow{ cursor:pointer; }
.acct-pl-lines .acct-pl-linerow:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.acct-pl-caret{ display:inline-block; width:14px; color:var(--ink-muted); transition:transform .12s; }
.acct-pl-linerow.open .acct-pl-caret{ transform:rotate(90deg); }
.acct-pl-codes{ margin-left:6px; font-size:11px; color:var(--ink-muted); font-variant-numeric:tabular-nums; } /* 영업비용 계정 줄의 계정 코드 */
@media (max-width:768px){ /* 휴대폰: 계정 이름이 길면 줄을 바꾸고 코드는 이름 아래 줄에 — 금액 열이 옆으로 밀리지 않게 */
  #acct-pl-opex td:first-child{ white-space:normal; word-break:keep-all; overflow-wrap:anywhere; } /* 단어 단위로 줄바꿈, 넘칠 때만 글자 중간 */
  .acct-pl-codes{ display:block; margin-left:14px; }
}
.acct-pl-linerow.open td{ font-weight:600; }
.acct-pl-pct{ color:var(--ink-muted); font-variant-numeric:tabular-nums; }
/* 경영분석 거래내역 계정 칸(11-12): 눌러서 바로 바꾸기 */
.acct-pl-acct{ background:none; border:1px dashed transparent; border-radius:6px; padding:2px 6px; margin:-3px -6px; font:inherit; color:inherit; cursor:pointer; text-align:left; white-space:nowrap; }
.acct-pl-acct:hover, .acct-pl-acct:focus-visible{ border-color:var(--line, #c9ced6); background:var(--bg-soft, #f5f6f8); }
.acct-pl-acct.unc{ color:var(--warn, #b45309); }
.acct-pl-acct-caret{ color:var(--ink-muted); font-size:11px; }
.acct-pl-acct-sel{ max-width:240px; font:inherit; padding:2px 4px; }
.acct-pl-detail > td{ padding:6px 4px 10px 18px; background:var(--surface-2, rgba(0,0,0,.025)); }
/* 펼친 거래 표는 줄 표의 폭을 늘리지 않는다(휴대폰에서 비중·금액 열이 밀려나지 않게). 거래 표만 자기 상자 안에서 가로로 민다 */
.acct-pl-detail > td > *{ width:0; min-width:100%; box-sizing:border-box; }
.acct-pl-txtable{ font-size:12.5px; }
.acct-pl-txtable td, .acct-pl-txtable th{ white-space:nowrap; }
.acct-pl-txtable td.acct-pl-desc{ white-space:normal; min-width:180px; max-width:340px; }
.acct-pl-txbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; }
.acct-pl-txbar button[hidden]{ display:none; }
.acct-pl-txhead{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
.acct-pl-txhead h3{ margin:0; }
.acct-pl-link{ margin:6px 0 8px; }
/* 경영분석 기간 버튼·장부 묶음 버튼(11-10)·사업장 칩(대표 지시 11-09). 칩은 진짜 체크박스를 품어 키보드·화면 읽기로도 고를 수 있다 */
.acct-pl-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
.acct-pl-row + .acct-pl-row{ margin-top:10px; }
.acct-pl-label{ flex:0 0 auto; min-width:44px; font-size:12.5px; font-weight:600; color:var(--ink-muted); }
.acct-pl-periods, .acct-pl-chips{ display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.acct-pl-chips{ flex:1 1 0; }
.acct-pl-custom{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; }
.acct-pl-custom[hidden]{ display:none; }
.acct-pl-period, .acct-pl-group, .acct-pl-chip{ display:inline-flex; align-items:center; gap:5px; font:inherit; font-size:12.5px; font-weight:500; line-height:1.3;
  padding:5px 11px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--ink-muted); cursor:pointer; }
.acct-pl-chip input{ margin:0; accent-color:var(--accent); }
.acct-pl-period.active, .acct-pl-group.active, .acct-pl-chip.active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.acct-pl-period:focus-visible, .acct-pl-group:focus-visible, .acct-pl-chip:focus-within{ outline:2px solid var(--accent); outline-offset:2px; }
@media (max-width: 640px){
  .acct-pl-label{ flex-basis:100%; }
  .acct-pl-period, .acct-pl-group, .acct-pl-chip{ min-height:40px; padding:6px 12px; font-size:13px; }
  .acct-pl-custom input[type=date]{ max-width:150px; }
}
/* 계좌 거래내역 입출 색(대표 지시 11-10): 입금 옅은 빨강, 출금 옅은 파랑. 글자가 그대로 읽히는 옅은 바탕만.
   호버는 같은 색을 조금 진하게(filter 를 쓰면 칸 안 분류 팝오버의 fixed 위치가 행 기준으로 어긋난다) */
#acct-tx-table tbody tr.acct-dir-in{ background:hsla(0,75%,55%,.08); }
#acct-tx-table tbody tr.acct-dir-out{ background:hsla(214,75%,55%,.08); }
#acct-tx-table tbody tr.acct-dir-in:hover{ background:hsla(0,75%,55%,.14); }
#acct-tx-table tbody tr.acct-dir-out:hover{ background:hsla(214,75%,55%,.14); }
[data-theme="dark"] #acct-tx-table tbody tr.acct-dir-in{ background:hsla(0,70%,62%,.12); }
[data-theme="dark"] #acct-tx-table tbody tr.acct-dir-out{ background:hsla(214,70%,62%,.12); }
[data-theme="dark"] #acct-tx-table tbody tr.acct-dir-in:hover{ background:hsla(0,70%,62%,.19); }
[data-theme="dark"] #acct-tx-table tbody tr.acct-dir-out:hover{ background:hsla(214,70%,62%,.19); }
.acct-match-cell{ white-space:nowrap; }
.acct-match-ok{ color:var(--accent); font-weight:700; }
.acct-match-diff{ color:var(--danger); }
.acct-match-bar{ position:sticky; bottom:0; display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px; padding:10px 14px; background:var(--surface); border:1px solid var(--border); border-radius:8px; z-index:2; }
.acct-match-bar[hidden]{ display:none; }
.acct-match-sum{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:10px 0 4px; font-weight:600; font-variant-numeric:tabular-nums; }
.acct-match-chip{ margin-top:0; font-size:12px; }
.acct-match-combos{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:10px 0; }
.acct-match-events{ margin:6px 0 0; padding-left:16px; }
.drawer:has(#acct-match-dialog){ width:880px; }
/* 비슷한 거래 일괄 수정(accounting_similar.js). 좁은 화면에서 넘치지 않게 표 대신 줄 묶음 */
.drawer:has(#acct-sim-panel){ width:640px; }
.acct-sim-head{ display:flex; flex-direction:column; gap:4px; margin-bottom:10px; overflow-wrap:anywhere; }
.acct-sim-tools{ display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.acct-sim-bulk{ display:flex; gap:6px; flex-wrap:wrap; }
.acct-sim-undo-del{ padding:6px 10px; background:var(--surface-2, #f5f5f4); border-radius:6px; overflow-wrap:anywhere; }
.acct-sim-list{ display:flex; flex-direction:column; border-top:1px solid var(--border); }
.acct-sim-row{ display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--border); min-width:0; }
.acct-sim-pick{ padding-top:2px; }
.acct-sim-pick input{ width:18px; height:18px; }
.acct-sim-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; overflow-wrap:anywhere; }
.acct-sim-top{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; font-size:13px; }
.acct-sim-amt{ margin-left:auto; font-variant-numeric:tabular-nums; font-weight:600; }
.acct-sim-desc{ font-weight:600; }
.acct-sim-tier{ font-size:11.5px; padding:1px 7px; border-radius:10px; border:1px solid var(--border); }
.acct-sim-tier.tier-high{ background:#e7f3ea; border-color:#b9dcc2; color:#1f6b35; }
.acct-sim-tier.tier-mid{ background:#fdf3e1; border-color:#efd6a8; color:#8a5a00; }
.acct-sim-tier.tier-low{ background:#f1f1ef; color:var(--ink-muted); }
.acct-sim-del{ flex:0 0 auto; }
.acct-sim-confirm, .acct-sim-result{ margin-top:12px; padding:12px 14px; border:1px solid var(--border); border-radius:8px; background:var(--surface); display:flex; flex-direction:column; gap:6px; }
.acct-sim-result .btn{ align-self:flex-start; }
.acct-sim-sum{ margin:0; padding-left:18px; }
.acct-sim-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.acct-sim-foot{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.acct-sim-foot #acct-sim-count{ flex-basis:100%; font-size:13px; }
.acct-sim-undobar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px; padding:8px 12px; border:1px solid var(--border); border-radius:8px; }
.acct-sim-undobar[hidden]{ display:none; }
.acct-bulk-accounts{ display:flex; flex-direction:column; max-height:280px; overflow:auto; margin:8px 0; border:1px solid var(--border); border-radius:6px; }
.acct-bulk-accounts .price-option.active{ background:var(--surface-2, #eef2ee); font-weight:600; }
#acct-bulk-search{ width:100%; margin-top:8px; }
/* 직원관리·급여 */
.pii-cell{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.pii-value{ font-variant-numeric:tabular-nums; }
.emp-left{ margin-left:6px; }
.pay-table td, .pay-table th{ white-space:nowrap; }
/* 고용형태 묶음(정직원 → 알바 → 프리 → 미지정). 미지정은 노란색으로 입력을 부른다. 옮겨진 행은 잠깐 강조한다 */
.emp-group-row td{ padding:6px 10px; font-size:12px; font-weight:600; color:var(--ink-muted); background:var(--surface2); }
.emp-group-row.emp-group-unset td{ color:#92400E; background:#FEF3C7; }
[data-theme="dark"] .emp-group-row.emp-group-unset td{ color:#FBBF24; background:rgba(251,191,36,.14); }
.emp-class-select{ min-width:84px; padding:3px 6px; font-size:13px; }
.emp-class-select.emp-class-unset{ background:#FEF3C7; border-color:#F59E0B; color:#92400E; }
[data-theme="dark"] .emp-class-select.emp-class-unset{ background:rgba(251,191,36,.14); color:#FBBF24; }
.emp-class-unset-text{ color:#B45309; }
[data-theme="dark"] .emp-class-unset-text{ color:#FBBF24; }
.emp-name-btn{ padding:0; border:0; background:none; font:inherit; color:inherit; cursor:pointer; text-align:left; }
.emp-name-btn:hover, .emp-name-btn:focus-visible{ color:var(--accent); text-decoration:underline; }
@keyframes emp-moved{ from{ background:rgba(43,92,142,.22); } to{ background:transparent; } }
tr.emp-moved > td{ animation:emp-moved 1.6s ease-out; }
.pay-cell{ cursor:pointer; min-width:78px; position:relative; }
.pay-cell:hover{ background:rgba(0,0,0,.06); }
/* 이미 지난 달: 회색으로 잠가 둔다(어두운 테마에서도 보이게 테마 변수를 쓴다). 키보드로 지나갈 때 어디 있는지 보이도록 포커스 테두리를 그린다 */
.pay-cell.pay-locked{ cursor:default; background:var(--surface2); color:var(--ink-muted); }
.pay-cell.pay-locked:hover{ background:var(--border); }
.pay-cell.pay-locked:focus{ outline:2px solid var(--accent); outline-offset:-2px; }
/* 서버 확정: 지난 달 회색과 구분되게 옅은 초록 + 금지 커서. 글자는 또렷하게 둔다 */
.pay-cell.pay-confirmed, .pay-cell.pay-confirmed:hover{ cursor:not-allowed; background:rgba(46,125,80,.18); color:var(--ink); }
[data-theme="dark"] .pay-cell.pay-confirmed, [data-theme="dark"] .pay-cell.pay-confirmed:hover{ background:rgba(108,195,141,.17); }
.pay-cell.pay-confirmed:focus{ outline:2px solid var(--accent); outline-offset:-2px; }
.pay-confirm-row > td:first-child{ color:var(--ink-muted); font-size:12px; font-weight:600; }
.pay-confirm-cell{ text-align:right; }
.pay-confirm-box{ display:inline-flex; flex-direction:column; align-items:flex-end; gap:3px; }
.pay-confirm-badge{ gap:3px; padding:2px 7px; font-size:11px; }
.pay-lock-icon{ flex:none; }
/* 칸 수정: 입력칸은 칸 위에 겹쳐 띄우고 원래 글자는 안 보이게 남겨서 열 폭이 흔들리지 않게 한다 */
.pay-ghost{ visibility:hidden; }
.pay-input{ position:absolute; inset:0; width:100%; height:100%; box-sizing:border-box; margin:0; padding:0 10px; border:2px solid var(--accent); border-radius:0; outline:none; background:var(--surface); color:var(--ink); font:inherit; text-align:right; }
.pay-sum td, .pay-year-total{ font-weight:600; }

/* 파이프라인 표: 체크 칸은 좁게(라벨·검수 / 선택) */
th.col-check, td.col-check{ width:1%; white-space:nowrap; text-align:center; padding-left:8px; padding-right:8px; }
#pipe-table .store-cell{ min-width:130px; }
#pipe-table td.col-no, #pipe-table td.num{ white-space:nowrap; }
/* 날짜 칸: 지금 단계로 들어온 날짜(3/12). 누르면 단계별 날짜가 아래로 펼쳐진다 */
#pipe-table td.col-date{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.pipe-date summary{ cursor:pointer; list-style:none; color:var(--ink); }
.pipe-date summary::-webkit-details-marker{ display:none; }
.pipe-date summary::after{ content:" ▾"; font-size:10px; color:var(--ink-muted); }
.pipe-date[open] summary::after{ content:" ▴"; }
.pipe-date-hist{ margin:4px 0 0; padding:0; list-style:none; font-size:12px; color:var(--ink-muted); line-height:1.5; text-align:left; }
/* 이름 위 '브랜드 · 시리즈' 줄: PC 는 브랜드·시리즈 열이 따로 있어 숨기고, 휴대폰에서만 작은 회색 한 줄(넘치면 …) */
.pipe-brand-line{ display:none; }
@media (max-width:768px){
  #pipe-table .pipe-name{ min-width:0; max-width:16em; }
  #pipe-table .pipe-brand-line{ display:block; font-size:11px; line-height:1.35; color:var(--ink-muted);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  table[data-cards]:not([data-scroll])#pipe-table .pipe-name{ text-align:right; margin-left:auto; max-width:66%; }
  /* 따로 있는 브랜드·시리즈 열은 이름 위 줄과 같은 내용이라 휴대폰에서만 숨긴다(대표 답 11-11 '숨겨'). 표·카드 둘 다 */
  #pipe-table th.col-brand, #pipe-table td.col-brand, #pipe-table th.col-series, #pipe-table td.col-series{ display:none; }
}
/* 머신 표 촘촘하게(대표 지시 11-12 '체크박스와 확인버튼의 간격을 줄이고, 확인버튼의 크기도 줄여, 뒤에 지점명까지 한 화면에'):
   PC 는 체크 칸·[확인] 칸을 붙이고 버튼을 작게, 칸 여백을 줄이고, 긴 이름은 두 줄 …, 매장 드롭다운은 폭 상한(마우스를 올리면 전체 이름) */
@media (min-width:769px){
  #pipe-table th, #pipe-table td{ padding-left:7px; padding-right:7px; }
  #pipe-table th:first-child, #pipe-table td:first-child{ padding-left:10px; }
  #pipe-table th.col-check, #pipe-table td.col-check{ padding-left:3px; padding-right:3px; }
  #pipe-table th.col-check:first-child, #pipe-table td.col-check:first-child{ padding-left:10px; }
  #pipe-table th.col-move, #pipe-table td.col-move{ width:1%; padding-left:4px; padding-right:6px; }
  #pipe-table .pipe-move .btn-tiny{ padding:1px 7px; font-size:11px; line-height:1.45; }
  #pipe-table td.col-name{ min-width:8em; max-width:15em; }
  #pipe-table .pipe-name-text{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; }
  #pipe-table .store-cell select{ max-width:11.5em; text-overflow:ellipsis; }
  #pipe-table .memo-cell{ min-width:90px; max-width:200px; }
}
@media (min-width:1600px){ #pipe-table .store-cell select{ max-width:18em; } }  /* 넓은 화면은 지점명을 더 길게 */
/* 휴대폰: 레이아웃은 그대로, [확인] 버튼과 체크 칸 사이만 줄이고 버튼을 작게(터치 높이 36px 은 지킨다) */
@media (max-width:768px){
  #pipe-table .pipe-move .btn-tiny{ min-height:36px; padding:4px 10px; font-size:13px; }
  table[data-scroll]#pipe-table th.col-check, table[data-scroll]#pipe-table td.col-check{ padding-left:6px; padding-right:6px; }
  table[data-scroll]#pipe-table th.col-move, table[data-scroll]#pipe-table td.col-move{ padding-left:4px; }
}
/* 운송 화면 공장별 보기(대표 지시 11-11): 위쪽 보기·공장 칩, 표 안의 공장 머리줄(누르면 접고 펼침) */
.pipe-factory-bar{ display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; margin:4px 0 8px; }
.pipe-factory-group{ display:flex; align-items:center; gap:8px; min-width:0; flex-wrap:wrap; }
.pipe-factory-group .chip-filter{ margin:0; }
.pipe-factory-cap{ font-size:12.5px; color:var(--ink-muted); white-space:nowrap; }
/* 발주 화면 '발주 전(초안)' 묶음(대표 지시 11-12). 아래 머신 표와 같은 표 모양, 휴대폰에서는 공용 카드 */
#pipe-drafts{ padding:12px 14px; }
#pipe-drafts h3{ margin-bottom:8px; }
#pipe-drafts .caption{ margin-top:8px; }
.pipe-draft-sub{ font-size:11px; color:var(--ink-muted); line-height:1.35; }
#pipe-draft-table td.num{ white-space:nowrap; }
#pipe-table tr[data-collapsed]{ display:none !important; }
/* 벤치류 묶음(대표 지시 11-12 '각도벤치 x 7'): 묶음 줄을 누르면 한 대씩 펼침, 펼친 곳 맨 아래 '수량 → 매장 [보내기]' 한 줄 */
#pipe-table tr[data-group-hidden]{ display:none !important; }
#pipe-table tr[data-group]{ cursor:pointer; }
.pipe-group-toggle{ display:flex; align-items:flex-start; gap:4px; padding:0; border:0; background:none; font:inherit; color:inherit;
  cursor:pointer; text-align:left; min-width:0; max-width:100%; }
.pipe-group-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.pipe-group-arrow{ flex:0 0 auto; width:1em; color:var(--ink-muted); }
.pipe-group-toggle .pipe-name-text{ min-width:0; }
.pipe-group-qty{ flex:0 0 auto; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
.pipe-child-name{ color:var(--ink-muted); font-size:12px; padding-left:1.2em; font-variant-numeric:tabular-nums; }
#pipe-table tr.pipe-group-send td{ background:var(--surface2); padding-top:6px; padding-bottom:6px; }
.pipe-group-send-in{ position:sticky; left:0; display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; padding-left:1.2em; font-size:12.5px; }
.pipe-send-qty{ width:4.5em; }
.pipe-group-locked{ font-size:12px; color:var(--ink-muted); padding-left:1.2em; }
#pipe-table tr.pipe-factory-head td{ background:var(--surface2); padding:0; border-top:2px solid var(--border); }
.pipe-factory-head-in{ position:sticky; left:0; display:inline-block; }
.pipe-factory-toggle{ display:flex; align-items:center; gap:8px; padding:8px 12px; min-height:40px; border:0; background:none;
  font:inherit; color:var(--ink); cursor:pointer; text-align:left; white-space:nowrap; }
.pipe-factory-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.pipe-factory-arrow{ width:1em; color:var(--ink-muted); }
.pipe-factory-count{ font-variant-numeric:tabular-nums; }
.pipe-factory-page{ font-size:12px; color:var(--ink-muted); }
@media (max-width:768px){
  .pipe-factory-bar{ gap:6px; }
  .pipe-factory-group{ width:100%; }
  table[data-cards]:not([data-scroll])#pipe-table tr.pipe-factory-head{ padding:0; border:none; background:transparent; margin:14px 0 6px; }
  table[data-cards]:not([data-scroll])#pipe-table tr.pipe-factory-head td{ display:block; border:none; text-align:left; background:transparent; }
}

/* 대시보드 파이프라인 카드(1~5단계). 목업 규칙은 건드리지 않고 덮어쓴다 */
.kpi-grid.stage-grid{ grid-template-columns:repeat(5,1fr); }
@media (max-width:900px){ .kpi-grid.stage-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } }

/* 견적서 품목 추가: 좌(전체 머신, 브랜드별) / 우(이 견적의 품목) 2단 */
.quote-pick{ display:grid; grid-template-columns:minmax(280px,5fr) minmax(0,7fr); gap:16px; align-items:start; }
.pick-right #quote-items-table th{ white-space:nowrap; }
.quote-pick h4{ margin:0 0 8px; font-size:14px; }
.pick-left{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px; background:var(--surface); }
.pick-left #item-search{ margin-bottom:8px; }
.filter-panel{ border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:6px; padding:4px 8px; }
.filter-panel > summary{ cursor:pointer; font-size:13px; font-weight:600; padding:3px 0; }
.check-list{ max-height:160px; overflow:auto; display:flex; flex-wrap:wrap; gap:2px 12px; padding:4px 0; }
.check-item{ font-size:13px; white-space:nowrap; cursor:pointer; }
.check-count{ color:var(--ink-muted); font-size:12px; margin-left:2px; }
.cat-toolbar{ justify-content:space-between; margin:8px 0 6px; gap:6px; flex-wrap:wrap; }
.cat-actions{ display:flex; gap:4px; }
.catalog-groups{ max-height:560px; overflow:auto; }
.cat-group{ border-bottom:1px solid var(--border); }
.cat-group > summary{ cursor:pointer; padding:7px 4px; background:var(--surface2); font-size:13px; }
.cat-item{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:6px 6px 6px 12px; cursor:pointer; border-top:1px solid var(--border); }
.cat-item:hover, .cat-item:focus{ background:var(--surface2); outline:none; }
.cat-main{ min-width:0; }
.cat-name{ font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cat-sub{ font-size:11px; color:var(--ink-muted); }
.cat-side{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.cat-price{ font-size:12px; color:var(--ink-muted); min-width:64px; text-align:right; }
.cart-name{ min-width:140px; }
.quote-flag-chips{ margin-left:6px; display:inline-flex; gap:4px; }
.flag-row{ align-items:center; gap:8px; flex-wrap:wrap; }
.flag-label{ font-size:14px; cursor:pointer; }
@media (max-width:900px){ .quote-pick{ grid-template-columns:minmax(0,1fr); } .catalog-groups{ max-height:380px; } } /* minmax(0,…): 품목 표가 칸을 넓혀 휴대폰 화면이 가로로 넘치지 않게(표는 .table-scroll 안에서 밀린다) */
/* 견적 품목 순서: 번호 + 손잡이(끌기) + ▲▼. 손잡이는 손가락으로 끌 때 화면이 같이 밀리지 않게 touch-action:none */
.order-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:8px 0 10px; }
.order-cell{ white-space:nowrap; }
.order-cell .order-no{ display:inline-block; min-width:1.6em; color:var(--ink-muted); }
.order-cell .btn-tiny{ padding:3px 7px; margin-right:2px; }
.order-handle{ cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; }
tr.row-dragging{ opacity:.55; background:var(--surface2); }
@media (max-width:768px){ .order-cell .btn-tiny{ min-width:40px; padding:6px 8px; } .order-bar .meta{ flex-basis:100%; } }
/* ===== 견적 품목 표: 브랜드+시리즈별 줄 색(작성·편집·상세 화면 전용, 고객 문서에는 없음) — quotes.js paintSeriesRows =====
   색 = (제조사, 시리즈) 글자 해시 → 아래 12색 중 하나. 색만으로 구분하지 않게 묶음이 바뀌는 줄 위에 얇은 선, 왼쪽 색띠 */
.series-c0{ --series-h:0; } .series-c1{ --series-h:25; } .series-c2{ --series-h:45; } .series-c3{ --series-h:90; } .series-c4{ --series-h:130; } .series-c5{ --series-h:165; } .series-c6{ --series-h:190; } .series-c7{ --series-h:210; } .series-c8{ --series-h:235; } .series-c9{ --series-h:265; } .series-c10{ --series-h:300; } .series-c11{ --series-h:330; }
#quote-items-table tbody tr.series-tint{ background:hsla(var(--series-h),70%,52%,.13); }
#quote-items-table tbody tr.series-tint > td:first-child{ box-shadow:inset 4px 0 0 hsl(var(--series-h),55%,48%); }
#quote-items-table tbody tr.series-start > td{ border-top:1px solid rgba(15,23,42,.30); }
[data-theme="dark"] #quote-items-table tbody tr.series-tint{ background:hsla(var(--series-h),50%,60%,.16); }
[data-theme="dark"] #quote-items-table tbody tr.series-start > td{ border-top-color:rgba(228,232,236,.35); }
@media (max-width:768px){ /* 카드형(상세 표): 카드 왼쪽 색띠. 편집 표는 가로 스크롤 표 그대로라 위 규칙을 쓴다 */
  #quote-items-table[data-cards]:not([data-scroll]) tbody tr.series-tint{ box-shadow:inset 6px 0 0 hsl(var(--series-h),55%,48%); padding-left:16px; }
  #quote-items-table[data-cards]:not([data-scroll]) tbody tr.series-tint > td:first-child{ box-shadow:none; }
  #quote-items-table[data-cards]:not([data-scroll]) tbody tr.series-start > td{ border-top:none; }
  #quote-items-table[data-cards]:not([data-scroll]) tbody tr.series-start{ margin-top:16px; }
}
/* 견적 품목 촘촘하게(8줄 이상 또는 '항상 촘촘'): 화면 표만 줄 높이·여백·줄 간격을 줄인다. 문서(미리보기·PDF·인쇄)는 서버 HTML 이라 그대로.
   PC 는 한 줄 품목 약 30px, 휴대폰은 누르는 칸을 44 → 40px 까지만 줄인다 */
#quote-items-table.items-dense tbody td{ padding:4px 10px; line-height:1.3; }
#quote-items-table.items-dense td.num{ white-space:nowrap; }
#quote-items-table.items-dense .cart-name .cat-sub{ line-height:1.2; white-space:nowrap; }
#quote-items-table.items-dense .inline-input, #quote-items-table.items-dense .inline-select{ padding:1px 6px; }
#quote-items-table.items-dense .btn-tiny{ padding-top:2px; padding-bottom:2px; }
#quote-items-table.items-dense .price-flags{ margin-top:1px !important; }
#quote-items-table.items-dense .price-flags:empty{ display:none; }
#quote-items-table.items-dense .badge, #quote-items-table.items-dense .badge-plain{ padding-top:1px; padding-bottom:1px; }
@media (max-width:768px){
  #quote-items-table.items-dense tbody td{ padding:2px 8px; }
  #quote-items-table.items-dense[data-cards]:not([data-scroll]) tr{ padding:2px 12px; margin-bottom:6px; }
  #quote-items-table.items-dense[data-cards]:not([data-scroll]) td{ padding:2px 0; }
  #quote-items-table.items-dense .btn-tiny, #quote-items-table.items-dense .inline-input, #quote-items-table.items-dense .inline-select{ min-height:40px; }
  #quote-items-table.items-dense .order-cell .btn-tiny{ padding-top:4px; padding-bottom:4px; }
}

/* ===== GUTEK 공식 로고(가로형): 라이트=블랙, 다크=화이트. 로고 영역 안에서 가로·세로 가운데 ===== */
.sidebar .logo, .login-logo{ display:flex; align-items:center; justify-content:center; }
.sidebar .logo{ cursor:pointer; }
.login-logo{ margin-bottom:18px; }
.brand-img{ display:block; height:32px; width:auto; max-width:100%; }
.login-logo .brand-img{ height:48px; }
#brand .brand-img{ height:96px; }
.brand-on-dark{ display:none; }
[data-theme="dark"] .brand-on-light{ display:none; }
[data-theme="dark"] .brand-on-dark{ display:block; }
.sidebar .logo{ padding:12px 16px; min-height:104px; }

/* ===== 사이드바 로고칸: 짐플릭스/짐서폿/스프린트/레바를 위에서부터 한 줄씩(세로 1열) 나열, 글씨 크기가 비슷해 보이게 통일 ===== */
#brand.brand-grid{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; width:100%; cursor:default; }
.brand-cell{ display:block; width:auto; height:20px; object-fit:contain; }

/* ===== 인테리어 ===== */
.kpi-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-bottom:14px; }
.int-kpi-num{ font-size:18px; }
.mt16{ margin-top:16px; }
.gantt-wrap{ position:relative; }
.gantt-box{ width:100%; height:calc(100vh - 290px); min-height:420px; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
.gantt-controls .btn.active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.gantt-check{ display:inline-flex; align-items:center; gap:4px; font-size:12.5px; color:var(--ink-muted); }
.gantt-drag-info{ display:none; position:absolute; top:8px; right:12px; z-index:15; background:var(--ink); color:var(--surface); font-size:12px; padding:4px 10px; border-radius:var(--radius-sm); font-variant-numeric:tabular-nums; }
.gantt-note{ min-height:30px; padding:6px 2px; font-size:12.5px; color:var(--ink-muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.gantt_task_cell.int-weekend{ background:var(--surface2); }
.gantt_task_line.int-site{ opacity:.85; }
.gantt_task_line.int-site .gantt_task_drag, .gantt_task_line.int-locked .gantt_task_drag{ display:none !important; }
.gantt_task_line.int-locked{ opacity:.55; cursor:not-allowed; }
.gantt_task_line.int-no-dates{ display:none; }
.gantt_task_cell.int-today, .gantt_scale_cell.int-today{ background:rgba(192,57,43,.12); box-shadow:inset 2px 0 0 var(--danger); }
.gantt_scale_cell.int-weekend{ color:var(--ink-muted); background:var(--surface2); }
.int-calendar{ background:var(--surface); padding:12px; border:1px solid var(--border); border-radius:var(--radius); }
.int-calendar .fc-toolbar-title{ font-size:16px; font-weight:700; }
.int-calendar .fc-button{ font-size:12px; padding:4px 10px; }
.int-calendar{ --fc-border-color:var(--border); --fc-page-bg-color:var(--surface); --fc-neutral-bg-color:var(--surface2); }
.int-calendar table{ border-radius:0; overflow:visible; background:transparent; }
.int-calendar thead th{ position:static; padding:6px 0; text-align:center; }
.int-calendar tbody td{ padding:0; }
.int-calendar tbody tr:hover{ background:transparent; }
.int-calendar tbody tr:last-child td{ border-bottom:1px solid var(--fc-border-color); }
.int-calendar .fc-event{ cursor:pointer; }
.int-cal-body{ display:flex; align-items:flex-start; gap:4px; padding:2px 5px; font-size:12.5px; line-height:1.3; }
/* 길게 누르기(ui.holdPress, 11-14 '체크박스는 삭제하고 2초 정도 누르고 있으면 완료'): 누를 수 있는 공정 = .hold-able.
   휴대폰 길게 누름의 글자 선택·iOS 확대경·말풍선 메뉴를 막고, 스크롤은 그대로(touch-action manipulation = 위아래·옆 밀기 허용) */
.hold-able{ touch-action:manipulation; }
/* 글자 선택·말풍선 막기는 손가락 기기만(PC 는 공정 표 글자를 끌어 복사할 수 있게, 마우스는 가만히 누르면 글자가 선택되지 않는다).
   잠긴 공정(정산 완료·최종완료)도 길게 눌러 글자 선택·말풍선이 뜨지 않게(길게 눌러도 무반응) */
@media (hover:none), (pointer:coarse){
  .hold-able, .int-calendar.int-sc .fc-event[data-task-id], #int-tasks-table tr[data-id], .gantt-box .gantt_task_line{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
}
/* 진행 띠: 칸 아래쪽 3px, 왼쪽→오른쪽 2초. 글자 밑이라 글자 대비(4.5:1)는 그대로. 색 = 반투명 검정(지점 색 막대·흰 줄 모두 보인다) */
.hold-bar{ position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(0,0,0,.6); box-shadow:0 -1px 0 rgba(255,255,255,.75); transform-origin:left center; transform:scaleX(0);
  pointer-events:none; z-index:2; animation:hold-fill var(--hold-ms, 2000ms) linear forwards; }
@keyframes hold-fill{ to{ transform:scaleX(1); } }
@media (max-width:768px){ .hold-bar{ height:4px; } }
@media (prefers-reduced-motion:reduce){ .hold-bar{ animation-timing-function:steps(4, end); } }
.int-cal-text{ min-width:0; white-space:normal; overflow-wrap:anywhere; color:#fff; }
.int-calendar .fc-event.int-cal-done{ background-color:var(--surface2) !important; border-color:var(--border) !important; }
.int-cal-done .int-cal-text{ color:var(--ink-muted); text-decoration:line-through; }
/* 미팅(미팅(종목)): 흰 바탕 + 현장 색 굵은 테두리(11-13, 'M' 표시 없음). 공정 막대와 한눈에 구분되고 완료 체크가 없다. 지점 색 규칙은 interior_home.css */
.int-calendar .fc-event.int-cal-meeting{ border-width:3px; }
.int-cal-meeting .int-cal-text{ color:#1F2933; }
.cal-help-bar{ align-items:center; }
.cal-help-bar .caption{ margin:0; }
.gantt_task_line.int-meeting{ border-radius:3px; }
.gantt_task_line.int-meeting .gantt_task_drag, .gantt_task_line.int-meeting .gantt_task_progress_drag{ display:none !important; }
.int-calendar .fc-daygrid-more-link{ display:block; padding:2px 5px; font-size:12px; font-weight:600; color:var(--accent); }
.int-calendar .fc-more-popover .fc-popover-body{ max-height:50vh; overflow-y:auto; min-width:200px; }
@media (hover:none){ .int-calendar .fc-daygrid-more-link{ padding:9px 5px; } }
/* 완료 = 지점 색 바탕 그대로 + 흰 글자 + 글씨 가운데 줄(gantt.js, 11-13 대표 답 '완료된 공정은 글씨 중앙에 줄을 그어'). 흐리게(opacity) 하지 않는다(대비 유지) */
.gantt_task_line.int-done .gantt_task_content{ text-decoration:line-through; text-decoration-thickness:1.5px; }
.gantt_task_line.int-locked.int-done{ opacity:1; } /* 최종완료(잠금+완료)도 흐리게 하지 않는다: .55 는 흰 글자 대비가 4.5:1 아래로 떨어진다. 잠금은 🔒·끌기 막힘으로 안다 */
.gantt_task_line.int-done .gantt_task_progress{ background:transparent; }
.gantt_task_line.int-done .gantt_task_drag{ display:none !important; }
.cost-group-sum{ margin:0 0 0 auto; font-variant-numeric:tabular-nums; }
.cost-group .detail-head .caption{ margin-top:0; }
.cost-preview{ margin-top:10px; padding:10px 12px; background:var(--surface2); border-radius:var(--radius-sm); font-size:13px; font-variant-numeric:tabular-nums; }
#int-overview-table{ max-width:560px; margin-bottom:14px; }
#int-overview-table th{ width:130px; text-align:left; color:var(--ink-muted); font-weight:500; }
@media (max-width:768px){
  .gantt-box{ height:calc(100vh - 340px); min-height:360px; }
  /* 달력: 가로 스크롤 대신 글자를 줄여서 폭 안에 맞춘다 */
  .int-calendar{ padding:6px; }
  .int-calendar .fc-toolbar-title{ font-size:14px; }
  .int-calendar .fc-button{ font-size:11px; padding:3px 7px; }
  .int-cal-body{ font-size:10.5px; padding:1px 2px; gap:2px; }
}
@media (max-width:480px){
  .int-calendar .fc-toolbar-title{ font-size:12.5px; }
  .int-calendar .fc-button{ font-size:10px; padding:2px 5px; }
  .int-cal-body{ font-size:9.5px; }
}

/* 회계 하위 탭(계좌·세금계산서·급여) */
.acct-tabs{ display:flex; gap:4px; flex-wrap:wrap; margin-bottom:16px; border-bottom:1px solid var(--border); }
.acct-tabs a{ padding:8px 16px; color:var(--ink-muted); text-decoration:none; font-weight:500; border-bottom:2px solid transparent; margin-bottom:-1px; }
.acct-tabs a:hover{ color:var(--ink); }
.acct-tabs a.active{ color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
/* 설정 > 상품 항목 설정(2026-11-08): 7개 탭은 좁은 화면에서 줄바꿈, 표는 칸 안에서만 가로 스크롤 */
.item-tabs a{ padding:6px 12px; }
.item-order{ white-space:nowrap; display:inline-flex; gap:4px; }
.item-code{ font-family:var(--mono, monospace); color:var(--ink-muted); }
.item-add-bar{ flex-wrap:wrap; }
.item-add-bar input, .item-add-bar select{ max-width:100%; }
.item-add-link{ display:inline-block; margin-top:4px; font-size:12px; color:var(--ink-muted); }
.check-inline{ display:inline-flex; align-items:center; gap:4px; font-size:13px; }
/* 2026-11-09: 구분·단위·브랜드·시리즈·운동부위는 이름만 있는 목록(누르면 그 자리에서 열림), 비활성은 아래에 흐리게 */
.item-add-bar{ margin-bottom:10px; }
.item-list{ list-style:none; margin:0; padding:0; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.item-list > li{ border-bottom:1px solid var(--border); }
.item-list > li:last-child{ border-bottom:none; }
.item-row{ display:flex; align-items:center; gap:8px; padding:4px 10px; flex-wrap:wrap; }
.item-name{ flex:1 1 160px; min-width:0; text-align:left; background:none; border:none; padding:7px 0; font:inherit; color:var(--ink); cursor:pointer; overflow-wrap:anywhere; }
.item-name:hover .item-name-text, .item-name[aria-expanded="true"] .item-name-text{ color:var(--accent); }
.item-sub{ color:var(--ink-muted); font-size:12px; margin-left:8px; }
.item-tools{ display:inline-flex; align-items:center; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
.item-list li.inactive .item-name{ opacity:.5; }
.item-list li.inactive .item-name-text{ text-decoration:line-through; }
.item-sep, .item-empty{ padding:6px 10px; font-size:12px; color:var(--ink-muted); background:var(--surface2); }
.item-detail{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:8px 10px 12px; border-top:1px dashed var(--border); font-size:13px; }
.item-field{ display:inline-flex; align-items:center; gap:6px; }
.item-field > span{ color:var(--ink-muted); font-size:12px; white-space:nowrap; }
.item-meta{ flex-basis:100%; color:var(--ink-muted); font-size:12px; }
@media (max-width: 768px){
  .item-field{ flex:1 1 100%; }
  .item-field .inline-input{ flex:1 1 auto; min-width:0; width:auto !important; }
  .item-name{ flex-basis:110px; }
  .item-tools .btn-tiny{ min-width:40px; padding:6px 8px; }
  .item-add-bar > *{ flex:1 1 100%; width:100% !important; }
  .item-tabs a{ padding:6px 10px; }
  /* 휴대폰: 입력칸이 있어도 가로 스크롤 대신 항목마다 카드(제목 왼쪽·값 오른쪽) */
  .item-table-box table{ display:block; border:none; background:transparent; overflow:visible; }
  .item-table-box thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .item-table-box tbody{ display:block; }
  .item-table-box tr{ display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:10px; padding:6px 12px; }
  .item-table-box td{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:6px 0; text-align:right;
    white-space:normal !important; border-bottom:1px dashed var(--border); font-size:13.5px; }
  .item-table-box td:last-child{ border-bottom:none; }
  .item-table-box td::before{ content:attr(data-label); flex:0 0 32%; text-align:left; color:var(--ink-muted); font-size:12px; font-weight:600; }
  .item-table-box td:not([data-label])::before{ display:none; }
  .item-table-box td .inline-input{ flex:1 1 auto; min-width:0; width:auto !important; }
  .item-table-box .users-actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
}

/* 실수령액: 더하는 항목은 파랑, 빼는 항목은 빨강(대표 지시) */
.pay-plus{ color:#1D4ED8; }
.pay-minus{ color:#DC2626; }
[data-theme="dark"] .pay-plus{ color:#7DB3FF; }
[data-theme="dark"] .pay-minus{ color:#FF8A8A; }
.pay-employer{ color:var(--ink-muted); }
.pay-diff.pay-warn{ color:#B45309; font-weight:600; }
[data-theme="dark"] .pay-diff.pay-warn{ color:#FBBF24; }
.pay-formula-line{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:baseline; font-size:15px; }
.pay-formula-line + .pay-formula-line{ margin-top:8px; }
.pay-formula b{ font-size:17px; }
.pay-formula-kind{ font-size:12.5px; color:var(--ink-muted); min-width:96px; }
.pay-na{ color:var(--ink-muted); }
.pay-net{ font-weight:700; font-size:14.5px; }
.pay-net-cell{ background:var(--surface2); }
.pay-diff{ display:block; font-size:11.5px; color:var(--ink-muted); }
.pay-detail-table input{ width:88px; text-align:right; }
.pay-detail-table td{ vertical-align:top; }
.pay-detail-table th, .pay-detail-table td{ white-space:nowrap; }
/* 가벽 자재 계산기·주문목록 */
.drawer:has(#calc-panel){ width:720px; max-width:100%; }
.calc-radios{ display:flex; flex-wrap:wrap; gap:6px 14px; padding:4px 0; }
.field .calc-radios input{ width:auto; margin:0; }
.calc-notes{ margin:8px 0 14px; padding-left:18px; }
.calc-line{ margin-bottom:12px; padding:12px; border:1px solid var(--border); border-radius:var(--radius-sm); }
.calc-line > .gantt-check{ margin-bottom:8px; font-weight:600; color:var(--ink); }
#order-copy-text{ width:100%; font-size:13px; line-height:1.5; }
/* 견적서 하단(대표 지시 11-07 안내문 교체·시안은 배치만): 왼쪽 안내문, 오른쪽 총 대수·금액, 합계금액 위 굵은 선, 맨 아래 계좌. 문서와 같은 배치 */
.quote-foot{ display:flex; gap:28px; align-items:flex-start; margin:8px 0 12px; }
.quote-foot.panel{ padding:12px 16px; }
.quote-foot-terms{ flex:1 1 0; min-width:0; }
.quote-foot-sum{ flex:0 0 340px; max-width:100%; }
.quote-foot-sum .rate-row{ align-items:baseline; gap:12px; }
.quote-foot-sum .rate-row > span:last-child{ text-align:right; overflow-wrap:anywhere; }
.quote-foot-sum .unit-total-row{ border-bottom:1px solid var(--border); }
.quote-foot-total{ border-top:2px solid var(--ink); border-bottom:2px solid var(--ink) !important; margin-top:-1px; padding:10px 0 !important; }
.quote-foot-total > span:first-child{ font-weight:700; font-size:13.5px; }
.quote-foot-total > span:last-child{ font-weight:800; font-size:19px; color:var(--danger); }
.quote-foot-sm{ font-size:11.5px; color:var(--ink-muted); padding:4px 0 !important; border-bottom:none !important; }
.quote-foot-bank{ margin-top:8px; text-align:right; font-size:12px; font-weight:700; white-space:pre-line; overflow-wrap:anywhere; }
.quote-foot-bank.is-empty{ color:var(--ink-muted); }
/* 할인(대표 지시 11-07): 공급가액 바로 아래 입력칸. 1원 이상이면 '할인 후 공급가액' 줄이 함께 보인다 */
.discount-row{ align-items:center; gap:10px; }
.discount-row label{ color:var(--ink); }
.discount-edit{ display:inline-flex; align-items:center; gap:6px; }
.discount-input{ font-variant-numeric:tabular-nums; }
.discount-input.invalid{ border-color:var(--danger); }
.discount-error{ margin:4px 0 6px; text-align:right; }
.quote-foot-discount > span:last-child{ color:var(--danger); }
/* 할인 방식 [원 | %](대표 지시 11-08 '금액할인 또는 %할인 둘중 선택'). 좁은 화면은 줄을 바꿔 가로로 넘치지 않는다. 버튼은 손가락 크기(40px) */
.discount-edit{ flex-wrap:wrap; justify-content:flex-end; min-width:0; }
.discount-mode{ display:inline-flex; border:1px solid var(--border); border-radius:6px; overflow:hidden; flex:none; }
.discount-mode-btn{ min-width:40px; min-height:34px; padding:0 10px; border:0; background:transparent; color:var(--ink-muted); font:inherit; font-weight:700; cursor:pointer; }
.discount-mode-btn + .discount-mode-btn{ border-left:1px solid var(--border); }
.discount-mode-btn.on{ background:var(--ink); color:var(--surface); }
.discount-pct-box{ display:inline-flex; align-items:center; gap:4px; }
.discount-pct-input{ width:80px; text-align:right; }
.discount-pct-amount{ font-variant-numeric:tabular-nums; color:var(--ink-muted); white-space:nowrap; }
.discount-convert-note{ margin:2px 0 4px; text-align:right; }
@media (max-width: 768px){ .discount-mode-btn{ min-height:40px; min-width:44px; } }
.quote-terms-view{ font-size:12.5px; line-height:1.7; overflow-wrap:anywhere; word-break:keep-all; }
.quote-terms-view p{ margin:0 0 4px; }
.quote-terms-view .qt-lead{ font-weight:700; }
.quote-terms-view .qt-tail{ font-size:12px; color:var(--ink-muted); }
.quote-terms-view .qt-gap{ margin-top:12px; }
.quote-terms-edit{ margin-top:10px; }
.quote-terms-edit > summary{ cursor:pointer; font-size:12.5px; color:var(--ink-muted); margin-bottom:6px; }
@media (max-width:768px){ .quote-foot{ flex-direction:column; gap:12px; } .quote-foot-sum{ flex:none; width:100%; } }
/* 견적서 개선 4건(11-07): 시리즈별 대수(편집·상세 전용), 가리기 표시, 마진 분석(대표 전용) */
.series-units{ padding:4px 0 8px; border-bottom:1px solid var(--border); font-size:12px; }
.series-units-head{ color:var(--ink-muted); margin-bottom:2px; }
.series-units-row{ display:flex; justify-content:space-between; gap:10px; padding:1px 0; }
.series-units-name{ min-width:0; overflow-wrap:anywhere; }
/* 견적서 머신 대수 정리(11-07): 작성·편집·상세 하단 3칸 — 안내문 | 머신 대수(총·시리즈별·부위별) | 금액. 좁으면 그 순서로 쌓임 */
.quote-foot-3 .quote-foot-units{ flex:0 0 250px; min-width:0; padding:0 18px; border-left:1px solid var(--border); border-right:1px solid var(--border); }
.quote-foot-3 .quote-foot-units .unit-total-row{ border-bottom:1px solid var(--border); }
.quote-foot-3 .quote-foot-units .series-units:last-child{ border-bottom:none; }
@media (max-width:1100px){ .quote-foot-3{ gap:18px; } .quote-foot-3 .quote-foot-units{ flex-basis:220px; padding:0 12px; } .quote-foot-3 .quote-foot-sum{ flex-basis:300px; } }
@media (max-width:768px){ .quote-foot-3 .quote-foot-units{ flex:none; width:100%; padding:10px 0 0; border:none; border-top:1px solid var(--border); } }
.mask-badge{ margin-left:8px; }
.margin-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start; }
.margin-steps{ font-size:12.5px; font-variant-numeric:tabular-nums; }
.margin-step-row{ display:grid; grid-template-columns:56px minmax(0,1fr) minmax(0,1fr); gap:8px; padding:5px 8px; border-bottom:1px solid var(--border); }
.margin-step-head{ background:var(--surface2); color:var(--ink-muted); font-weight:600; }
.margin-steps .num{ text-align:right; }
@media (max-width:768px){ .margin-grid{ grid-template-columns:1fr; gap:10px; } }

/* ===== 머신 사진(0050): 상품 목록 작은 사진 · 상세 사진 영역 · 견적 카탈로그 작은 사진 — 사진 칸은 모두 정사각형(사진도 800x800·240x240, 11-08) ===== */
.product-table th.photo-cell, .product-table td.photo-cell{ width:48px; padding-top:3px; padding-bottom:3px; }
.list-thumb{ display:block; width:40px; height:40px; aspect-ratio:1/1; object-fit:contain; border-radius:var(--radius-sm); border:1px solid var(--border); background:#fff; }
.list-thumb.none{ background:var(--surface2); border-style:dashed; }
.photo-section{ margin-bottom:14px; }
.photo-section .photo-head{ display:flex; align-items:baseline; gap:6px; }
.photo-main-link{ display:block; }
.photo-main{ display:block; width:100%; max-width:360px; height:auto; aspect-ratio:1/1; object-fit:contain; background:#fff; border:1px solid var(--border); border-radius:var(--radius); }
/* 대표 화면: 큰 사진 = 교체 버튼(누르기·끌어놓기, 11-09) */
.photo-main-wrap{ max-width:360px; }
.photo-main-btn{ position:relative; display:block; width:100%; padding:0; border:0; background:none; cursor:pointer; line-height:0; }
.photo-main-btn:focus-visible .photo-main, .photo-main-btn.over .photo-main{ outline:3px dashed var(--accent); outline-offset:2px; }
.photo-main-hint{ position:absolute; right:8px; bottom:8px; background:rgba(20,24,30,.72); color:#fff; font-size:12px; line-height:1.4; padding:3px 9px; border-radius:999px; }
.photo-open{ display:inline-block; margin-top:4px; }
.photo-empty{ padding:18px 12px; text-align:center; color:var(--ink-muted); background:var(--surface2); border-radius:var(--radius); font-size:13px; }
.photo-strip{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.photo-thumb{ position:relative; width:92px; display:flex; flex-direction:column; gap:4px; }
.photo-thumb-btn{ padding:0; border:2px solid var(--border); border-radius:var(--radius-sm); background:#fff; cursor:pointer; line-height:0; }
.photo-thumb.on .photo-thumb-btn{ border-color:var(--accent); }
.photo-thumb-btn img{ width:88px; height:88px; aspect-ratio:1/1; object-fit:contain; }
.photo-badge{ position:absolute; top:3px; left:3px; background:var(--accent); color:#fff; font-size:11px; padding:1px 5px; border-radius:6px; }
.photo-tools{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; }
.photo-tools .btn-tiny{ padding:2px 0; min-width:0; }
.photo-upload{ margin-top:10px; }
.photo-drop{ display:flex; flex-direction:column; gap:2px; align-items:center; justify-content:center; text-align:center; min-height:84px; border:2px dashed var(--border); border-radius:var(--radius); padding:10px; cursor:pointer; background:var(--surface2); }
.photo-drop.over{ border-color:var(--accent); background:rgba(43,92,142,.08); }
.photo-drop:focus-visible{ outline:2px solid var(--accent); }
.photo-drop .caption{ margin-top:0; }
.photo-pick-row{ margin-top:6px; flex-wrap:wrap; }
.photo-input{ display:none; }
.photo-msg{ min-height:1em; overflow-wrap:anywhere; }
.cat-thumb{ width:36px; height:36px; aspect-ratio:1/1; object-fit:contain; flex:none; background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); }
.cat-thumb + .cat-main{ flex:1 1 auto; }
@media (max-width:768px){
  .photo-main{ max-width:min(100%, 360px); margin:0 auto; }
  .photo-main-wrap{ max-width:min(100%, 360px); margin:0 auto; }
  .photo-drop{ min-height:64px; }
  .photo-pick-row .btn{ flex:1 1 45%; }
  .photo-thumb{ width:calc((100% - 16px) / 3); }
  .photo-thumb-btn img{ width:100%; height:auto; aspect-ratio:1/1; }
  .photo-tools .btn{ min-height:34px; font-size:12.5px; }
}

/* 견적서 공장별 주문 리스트(대표 전용, 대표 지시 2026-11-09). 열: 번호·영어 이름·수량·사진·색상. 휴대폰(360px~)에서도 표가 화면 폭 안에서 줄바꿈된다 */
.fo-internal{ color:var(--danger); background:rgba(192,57,43,.10); }
.fo-mask-banner{ border-left:4px solid var(--danger); }
.fo-tools{ margin-bottom:12px; flex-wrap:wrap; }
.fo-group-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.fo-group-head h2{ font-size:17px; margin:0; font-weight:700; }
.fo-group-head .fo-copy{ margin-left:auto; min-height:32px; }
.fo-group-count{ font-size:12.5px; }
.fo-inactive{ color:var(--st-pending); }
.fo-unassigned{ border-color:var(--st-pending); border-left:4px solid var(--st-pending); }
.fo-unassigned h2{ color:var(--st-pending); }
.fo-unassigned-note{ margin:0 0 10px; font-size:12.5px; color:var(--st-pending); }
.fo-group .table-scroll{ max-height:none; }
.fo-table{ table-layout:auto; width:100%; }
.fo-table thead th{ position:static; white-space:nowrap; }
.fo-table td, .fo-table th{ overflow-wrap:anywhere; vertical-align:middle; }
.fo-table .fo-no{ width:44px; }
.fo-table .fo-qty{ font-weight:700; white-space:nowrap; width:56px; }
.fo-table .fo-model{ width:96px; font-size:12.5px; }
.fo-table .fo-photo{ width:64px; text-align:center; }
.fo-table .fo-photo img{ display:block; margin:0 auto; width:48px; height:48px; object-fit:cover; border-radius:4px; border:1px solid var(--border); background:#fff; }
.fo-nophoto{ font-size:11px; color:var(--ink-muted); white-space:nowrap; word-break:keep-all; }
.fo-table .fo-color{ width:112px; }
.fo-color-select, .fo-color-input{ width:100%; max-width:110px; min-height:30px; font-size:12.5px; box-sizing:border-box; }
.fo-color-input{ margin-top:4px; }
.fo-color-text{ display:none; }
.fo-noen{ display:inline-block; margin-top:3px; font-size:11px; color:var(--st-pending); }
@media (max-width:480px){
  /* 공용 table[data-scroll](block·줄바꿈 금지·가로 스크롤) 대신 화면 폭에 맞는 표 그대로 두고 긴 이름은 칸 안에서 줄바꿈 */
  table.fo-table[data-scroll]{ display:table; width:100%; overflow:hidden; }
  table.fo-table[data-scroll] td{ white-space:normal; }
  table.fo-table[data-scroll] thead th{ white-space:nowrap; overflow-wrap:normal; }
  .fo-table thead th, .fo-table tbody td{ padding:6px 4px; font-size:12px; }
  .fo-table .fo-no{ width:26px; }
  .fo-table .fo-qty{ width:34px; }
  .fo-table .fo-model{ width:56px; font-size:11px; }
  .fo-table .fo-photo{ width:46px; }
  .fo-table .fo-photo img{ width:40px; height:40px; }
  .fo-table .fo-color{ width:76px; }
  .fo-color-select, .fo-color-input{ max-width:76px; font-size:12px; padding-left:2px; padding-right:2px; }
  .fo-nophoto{ white-space:normal; word-break:keep-all; display:inline-block; line-height:1.3; }
  .fo-group{ padding:12px 8px; }
}
@media print{
  body.fo-printing .sidebar, body.fo-printing .sidebar-backdrop, body.fo-printing .topbar, body.fo-printing .fo-noprint{ display:none !important; }
  body.fo-printing .fo-color-text{ display:inline; }
  body.fo-printing .fo-group{ break-inside:avoid; border:1px solid #999; }
  body.fo-printing .table-scroll{ overflow:visible; max-height:none; }
}

/* 공용 되돌리기 띠·토스트(ui.showUndo, 5초). 홈에서 쓰던 모양 그대로 */
.undo-bar{ position:fixed; left:50%; bottom:20px; z-index:60; transform:translateX(-50%); display:flex; align-items:center; gap:12px; max-width:calc(100vw - 24px); padding:10px 14px; font-size:14px; color:var(--surface); background:var(--ink); border-radius:var(--radius); box-shadow:0 6px 20px rgba(0,0,0,.25); }
.undo-bar-text{ min-width:0; overflow-wrap:anywhere; }
.undo-bar .btn{ flex:none; }

/* 머신 자료 직접 넣기(0059, products_import.js): 단가표 미리보기·사진 한꺼번에 */
#price-import .photo-drop, #bulk-photo .photo-drop{ margin:10px 0 6px; }
#price-counts{ margin:10px 0 8px; }
#price-table td, #price-table th{ white-space:nowrap; font-size:13px; }
#price-table tr.low-margin td{ background:rgba(192,57,43,.06); }
.import-list{ margin:8px 0; font-size:13px; }
.import-list summary{ cursor:pointer; font-weight:600; padding:4px 0; }
.import-list ul, #bulk-photo-result ul{ margin:4px 0 0; padding-left:18px; max-height:240px; overflow:auto; font-size:13px; }
.import-recent-list{ list-style:none; margin:0; padding:0; font-size:13px; }
.import-recent-list li{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; border-bottom:1px solid var(--border); }

/* 계좌 > 분류 규칙별(대표 지시 11-12, accounting_rules.js). 경영분석 줄 펼치기 모양(acct-pl-*)을 그대로 쓰고 규칙 칸만 더한다 */
#acct-rules .panel{ min-width:0; }
#acct-rules .table-scroll{ max-height:none; } /* 규칙이 많아도 표 안 세로 스크롤 없이 페이지로 내린다(묶음 표가 바로 아래 보이게) */
.acct-rl-name{ display:inline-flex; align-items:flex-start; gap:2px; }
.acct-rl-ex{ display:block; font-weight:400; max-width:320px; white-space:normal; }
.acct-rl-table > tbody > tr > td:first-child{ min-width:180px; }
.acct-pl-txtable tr.acct-rl-hit > td{ background:#fffbea; }
.acct-rl-mark{ background:#fde68a; color:inherit; padding:0 1px; border-radius:2px; }
#rl-site{ max-width:220px; }
#rl-q{ flex:1 1 220px; max-width:360px; }
@media (max-width: 720px){
  .acct-rl-ex{ max-width:none; }
  .acct-rl-table > tbody > tr > td:first-child{ min-width:118px; white-space:normal; word-break:keep-all; }
  .acct-rl-table > tbody > tr > td, .acct-rl-table > thead > tr > th{ padding-left:6px; padding-right:6px; }
  #rl-site, #rl-q{ min-height:40px; max-width:none; flex:1 1 100%; }
}

/* 회계 > 월 마감 점검판(11-12): 신호등 점 + 숫자, 칸을 누르면 그 목록으로 */
.close-table td.close-cell a { color: inherit; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.close-table td.close-cell a:hover { text-decoration: underline; }
.close-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.close-dot.close-green { background: #2f9e44; }
.close-dot.close-yellow { background: #f2b705; }
.close-dot.close-red { background: #e03131; }
.close-table tr.is-closed td { background: #f4faf5; }
.close-table td.close-done { white-space: nowrap; }
.close-table .close-badge, .close-table td.close-done .btn { white-space: nowrap; margin-top: 0; }
@media (max-width: 640px) { .close-table td.close-done { white-space: normal; } }
.acct-check-chip { margin-right: 6px; }
/* 세금계산서 > 매칭 고르기(대표 지시 11-12, accounting_pick.js). 계산서 한 줄 + 후보 칩. 칩 한 번이 곧 매칭이라 칩을 크게 둔다 */
.acct-pick-badge{ display:inline-block; min-width:18px; margin-left:6px; padding:0 6px; border-radius:999px; background:var(--danger); color:#fff;
  font-size:11px; font-weight:700; line-height:18px; text-align:center; }
.acct-pick-sum{ font-size:13px; color:var(--ink-muted); }
.acct-pick-sum strong{ color:var(--ink); }
.acct-pick-list{ display:flex; flex-direction:column; gap:8px; }
.acct-pick-row{ padding:10px 12px; }
.acct-pick-inv{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-bottom:8px; font-size:13.5px; }
.acct-pick-kind{ font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:999px; background:var(--surface2); }
.acct-pick-kind.sales{ color:var(--danger); }
.acct-pick-kind.purchase{ color:var(--accent); }
.acct-pick-date, .acct-pick-site{ color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.acct-pick-invamt{ font-weight:600; font-variant-numeric:tabular-nums; }
.acct-pick-site{ margin-left:auto; font-size:12.5px; }
.acct-pick-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.acct-pick-chip{ display:inline-flex; align-items:baseline; gap:6px; font:inherit; font-size:12.5px; padding:6px 11px; border-radius:8px;
  border:1px solid var(--border); background:var(--surface); color:var(--ink); cursor:pointer; text-align:left; max-width:100%; }
.acct-pick-chip:hover:not(:disabled){ border-color:var(--accent); }
.acct-pick-chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.acct-pick-chip:disabled{ opacity:.45; cursor:default; }
.acct-pick-chip.used{ text-decoration:line-through; }
.acct-pick-amt{ font-weight:600; font-variant-numeric:tabular-nums; }
.acct-pick-meta, .acct-pick-who{ color:var(--ink-muted); }
.acct-pick-who{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:14em; }
.acct-pick-score{ font-size:11.5px; font-weight:600; color:var(--ink-muted); }
.acct-pick-score.hi{ color:var(--success); }
.acct-pick-none{ color:var(--ink-muted); background:var(--surface2); }
.acct-pick-nocand{ align-self:center; font-size:12.5px; color:var(--ink-muted); }
.acct-pick-empty{ padding:24px; text-align:center; color:var(--ink-muted); }
.acct-pick-foot{ margin-top:10px; text-align:center; }
@media (max-width: 640px){
  .acct-pick-site{ margin-left:0; flex-basis:100%; }
  .acct-pick-chip{ flex:1 1 100%; min-height:44px; align-items:center; }
  .acct-pick-who{ max-width:none; flex:1 1 auto; }
  #pick-site{ min-height:40px; flex:1 1 100%; }
}

/* 홈 묶음 알림(세금계산서 직접 매칭 필요, 11-12): 유형별 건수·사업장별 펼침·나중에 */
.home-alert-multi{ display:block; padding:0; }
.home-alert-multi:hover{ background:none; }
.home-alert-top{ display:flex; align-items:center; gap:6px; padding-right:8px; }
.home-alert-main{ flex:1; display:flex; align-items:center; gap:6px; padding:7px 4px 7px 8px; color:var(--ink); text-decoration:none; font-weight:600; min-width:0; }
.home-alert-main:hover{ background:var(--hover, rgba(0,0,0,.03)); }
.home-alert-later{ flex:none; color:var(--ink-muted); }
.home-alert-parts{ display:flex; flex-wrap:wrap; gap:4px 12px; padding:0 10px 6px 12px; font-size:12.5px; font-weight:400; }
.home-alert-part{ color:var(--ink-muted); text-decoration:none; }
a.home-alert-part:hover{ color:var(--ink); text-decoration:underline; }
.home-alert-part strong{ color:var(--ink); font-weight:600; }
.home-alert-part.muted strong{ color:var(--ink-muted); }
.home-alert-sites{ padding:0 10px 6px 12px; font-size:12.5px; font-weight:400; }
.home-alert-sites summary{ cursor:pointer; color:var(--ink-muted); }
.home-alert-sites ul{ list-style:none; margin:4px 0 0; padding:0; columns:2; column-gap:14px; }
.home-alert-sites li a{ display:flex; justify-content:space-between; gap:8px; padding:2px 0; color:var(--ink); text-decoration:none; }
.home-alert-sites li a:hover{ text-decoration:underline; }
.acct-pick-sorts{ margin-left:auto; }
.acct-pick-done{ margin-left:12px; color:var(--ink-muted); }
@media (max-width: 640px){
  .home-alert-later{ min-height:36px; }
  .home-alert-part{ padding:4px 0; }
  .home-alert-sites ul{ columns:1; }
  .home-alert-sites li a{ padding:8px 0; }
}