*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Pretendard', -apple-system, sans-serif; background: #F4F6FA; color: #1A1D23; font-size: 14px; }
:root {
  --tl-primary: #185FA5; --tl-primary-dark: #0C447C; --tl-primary-light: #E6F1FB;
  --tl-bg: #FFFFFF; --tl-bg-secondary: #F4F6FA; --tl-bg-tertiary: #EAECF2;
  --tl-text: #1A1D23; --tl-text-secondary: #5A6070; --tl-text-hint: #9BA3B2;
  --tl-border: #DDE1EB; --tl-border-strong: #B0B8CC;
  --tl-success: #1D9E75; --tl-success-bg: #E1F5EE;
  --tl-warning: #EF9F27; --tl-warning-bg: #FAEEDA;
  --tl-danger: #CC2222; --tl-danger-bg: #FCEBEB;
  --tl-info: #185FA5; --tl-info-bg: #E6F1FB;
  --tl-accent: #EF9F27; --tl-accent-dark: #D48A1C;
  --tl-section-header: #1A1D23;
}

/* Nav */
.top-nav { background: var(--tl-primary); height: 52px; display: flex; align-items: center; padding: 0 20px; gap: 12px; position: sticky; top: 0; z-index: 100; }
.nav-logo { color: white; font-size: 15px; font-weight: 700; margin-right: 8px; white-space: nowrap; }
.nav-tabs { display: flex; gap: 0; flex: 1; overflow-x: auto; align-items: stretch; }
.nav-tab { background: transparent; color: rgba(255,255,255,0.7); border: none; border-radius: 6px; padding: 6px 10px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: 'Pretendard', sans-serif; white-space: nowrap; transition: all 0.2s; }
.nav-tab.active, .nav-tab:hover { background: rgba(255,255,255,0.2); color: white; }
/* Nav sector groups */
.nav-sector { display: flex; align-items: center; gap: 3px; padding: 0 10px; height: 100%; }
.nav-sector-label { font-size: 13px; font-weight: 500; padding: 2px 7px; border-radius: 3px; margin-right: 4px; white-space: nowrap; letter-spacing: 0.3px; }
.nav-sector-milwaukee { border-bottom: 3px solid var(--tl-danger); }
.label-milwaukee { background: var(--tl-danger); color: white; }
.nav-sector-general { border-bottom: 3px solid var(--tl-warning); }
.label-general { background: rgba(239,159,39,0.4); color: #FFD68A; }
.nav-sector-sales { border-bottom: 3px solid var(--tl-success); }
.label-sales { background: rgba(29,158,117,0.35); color: #A8F0D8; }
.nav-sector-estimate { border-bottom: 3px solid #7F77DD; }
.label-estimate { background: rgba(127,119,221,0.4); color: #CECBF6; }
.nav-sector-manage { border-bottom: 3px solid #185FA5; }
.label-manage { background: rgba(24,95,165,0.4); color: #B5D4F4; }
.nav-divider { width: 1px; height: 30px; background: rgba(255,255,255,0.2); margin: 0 8px; flex-shrink: 0; align-self: center; }
.btn-ghost { background: rgba(255,255,255,0.15); color: #FFFFFF; border: 1px solid rgba(255,255,255,0.35); border-radius: 6px; padding: 6px 14px; font-size: 12px; font-weight: 500; cursor: pointer; font-family: 'Pretendard', sans-serif; transition: all 0.2s; }
.btn-ghost:hover { background: rgba(255,255,255,0.3); }

/* Buttons */
.btn-primary { background: #185FA5; color: #FFF; border: none; border-radius: 6px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Pretendard', sans-serif; transition: background 0.2s; }
.btn-primary:hover { background: #0C447C; }
/* 역할별 버튼 체계 */
.btn-action { background: var(--tl-primary); color: #FFF; border: none; border-radius: 6px; padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: 'Pretendard', sans-serif; transition: background 0.2s; }
.btn-action:hover { background: var(--tl-primary-dark); }
.btn-action-sub { background: var(--tl-primary); color: #FFF; border: none; border-radius: 6px; padding: 6px 14px; font-size: 12px; font-weight: 500; cursor: pointer; font-family: 'Pretendard', sans-serif; transition: background 0.2s; }
.btn-action-sub:hover { background: var(--tl-primary-dark); }
.btn-export { background: var(--tl-primary); color: #FFF; border: none; border-radius: 6px; padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: 'Pretendard', sans-serif; transition: background 0.2s; }
.btn-export:hover { background: var(--tl-primary-dark); }
.btn-warning { background: var(--tl-primary); color: #FFF; border: none; border-radius: 6px; padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: 'Pretendard', sans-serif; transition: background 0.2s; }
.btn-warning:hover { background: var(--tl-primary-dark); }
.btn-setting { background: var(--tl-primary); color: #FFF; border: none; border-radius: 6px; padding: 6px 14px; font-size: 12px; font-weight: 500; cursor: pointer; font-family: 'Pretendard', sans-serif; transition: background 0.2s; }
.btn-setting:hover { background: var(--tl-primary-dark); }
/* section-header 안 버튼 사이즈 */
.section-header .btn-action, .section-header .btn-action-sub, .section-header .btn-export,
.section-header .btn-warning, .section-header .btn-danger, .section-header .btn-setting { padding: 5px 12px; font-size: 12px; }
/* 서브탭 비활성 */
.btn-sub-inactive { background: var(--tl-text-hint); color: #FFF; border: none; border-radius: 6px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: 'Pretendard', sans-serif; transition: background 0.2s; }
.btn-sub-inactive:hover { background: #8891A1; }
/* 발주서 탭 */
.btn-header-accent { background: var(--tl-warning); color: var(--tl-text); border: none; border-radius: 6px; padding: 4px 10px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: 'Pretendard', sans-serif; transition: background 0.2s; }
.btn-header-accent:hover { background: var(--tl-accent-dark); }
/* 테이블 행 내 수정 버튼 */
.btn-edit { background: var(--tl-primary); color: #FFF; border: none; border-radius: 4px; padding: 2px 6px; font-size: 11px; font-weight: 500; cursor: pointer; font-family: 'Pretendard', sans-serif; }
.btn-edit:hover { background: var(--tl-primary-dark); }

/* 유틸리티 클래스 */
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.text-xs { font-size: 11px; }
.text-sm { font-size: 12px; }
.text-success { color: var(--tl-success); }
.text-danger { color: var(--tl-danger); }
.text-warning { color: var(--tl-warning); }
.text-hint { color: var(--tl-text-hint); }
.text-truncate { max-width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.btn-secondary { background: transparent; color: #185FA5; border: 1px solid #185FA5; border-radius: 6px; padding: 7px 16px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: 'Pretendard', sans-serif; }
.btn-secondary:hover { background: var(--tl-primary-light); }
.btn-danger { background: #CC2222; color: #FFF; border: none; border-radius: 6px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Pretendard', sans-serif; }
.btn-sm { padding: 4px 10px; font-size: 12px; }

/* Content */
.content { max-width: 100%; margin: 0 auto; padding: 16px 24px 40px; }
.tab-content { display: none; }
.tab-content.active { display: block; }
#tab-catalog.active { display: flex; flex-direction: column; height: calc(100vh - 140px); overflow: hidden; }

/* Section */
.section { margin-bottom: 20px; border-radius: 6px; overflow: hidden; border: 1px solid var(--tl-border); }
.section-header { background: #1A1D23; color: #FFF; padding: 0 16px; height: 40px; display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 600; }
.section-body { background: var(--tl-bg); padding: 16px; }

/* Forms */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.form-field { display: flex; flex-direction: column; gap: 4px; }
.label { font-size: 12px; font-weight: 500; color: #5A6070; }
.input, .select { width: 100%; height: 36px; border: 1px solid #DDE1EB; border-radius: 6px; padding: 0 10px; font-size: 13px; font-family: 'Pretendard', sans-serif; color: #1A1D23; background: #FFF; }
.input:focus, .select:focus { border-color: #185FA5; outline: none; box-shadow: 0 0 0 3px #E6F1FB; }
.input::placeholder { color: #9BA3B2; }

/* Table */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { background: #EAECF2; color: #5A6070; font-weight: 600; font-size: 12px; padding: 8px 10px; text-align: center; border-bottom: 1px solid #DDE1EB; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.data-table th.num, .data-table th.center { text-align: center; }
.data-table.sticky-header thead th { position: sticky; top: 0; z-index: 5; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.data-table td { padding: 8px 10px; border-bottom: 1px solid #F0F2F7; color: #1A1D23; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.data-table tr:hover td { background: #F4F6FA; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .center { text-align: center; }
.data-table input { width: 80px; height: 30px; border: 1px solid #DDE1EB; border-radius: 4px; padding: 0 6px; font-size: 13px; text-align: right; font-family: 'Pretendard', sans-serif; }
.data-table input:focus { border-color: #185FA5; outline: none; }
.data-table td.desc-cell { max-width: 220px; overflow: hidden; white-space: nowrap; }

/* Discontinued row */
.data-table tr.row-discontinued td { background: #F9F5F0; color: #9BA3B2; }
.data-table tr.row-discontinued:hover td { background: #F3EDE5; }
.data-table tr.row-discontinued td.num { color: #B0B8CC; }
.discontinued-divider td { background: #EAECF2 !important; padding: 6px 12px !important; font-size: 12px; font-weight: 600; color: #5A6070; }
.chk-discon { transform: scale(0.45); cursor: pointer; accent-color: #CC2222; vertical-align: middle; margin: 0; }
.data-table th .chk-discon { transform: scale(0.45); }

/* Resizable columns */
.data-table th.resizable { position: relative; border-right: 1px solid #DDE1EB; }
.data-table th .col-resize {
  position: absolute; right: -1px; top: 0; width: 7px; height: 100%;
  cursor: col-resize; user-select: none; z-index: 2;
}
.data-table th .col-resize:hover, .data-table th .col-resize.active { background: var(--tl-primary); opacity: 0.6; }

/* Badge */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.badge-blue { background: #E6F1FB; color: #0C447C; }
.badge-green { background: #E1F5EE; color: #085041; }
.badge-amber { background: #FAEEDA; color: #412402; }
.badge-red { background: #FCEBEB; color: #791F1F; }
.badge-gray { background: #F1EFE8; color: #2C2C2A; }

/* KPI */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi-card { background: #185FA5; color: #FFF; border-radius: 8px; padding: 14px 18px; }
.kpi-card-light { background: #E6F1FB; border-radius: 8px; padding: 14px 18px; }
.kpi-label { font-size: 12px; font-weight: 500; opacity: 0.8; margin-bottom: 4px; }
.kpi-value { font-size: 24px; font-weight: 700; line-height: 1.2; }
.kpi-sub { font-size: 12px; opacity: 0.7; margin-top: 4px; }
.kpi-card-light .kpi-label { color: #5A6070; }
.kpi-card-light .kpi-value { color: #185FA5; font-size: 22px; font-weight: 700; }

/* Search bar */
.search-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.search-bar .input { max-width: 300px; }
.search-bar .select { max-width: 180px; }

/* Profit colors */
.profit-pos { color: #1D9E75; font-weight: 600; }
.profit-neg { color: #CC2222; font-weight: 600; }

/* Tabs sub */
.sub-tabs { display: flex; gap: 4px; margin-bottom: 16px; }
.sub-tab { background: var(--tl-bg); border: 1px solid var(--tl-border); border-radius: 6px; padding: 6px 14px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: 'Pretendard', sans-serif; color: var(--tl-text-secondary); transition: all 0.2s; }
.sub-tab.active { background: var(--tl-primary); color: white; border-color: var(--tl-primary); }
.sub-tab-order-sheet { background: #EF9F27 !important; color: #1A1D23 !important; border-color: #EF9F27 !important; font-weight: 700 !important; }
.sub-tab-order-sheet.active { background: var(--tl-accent-dark) !important; color: white !important; border-color: var(--tl-accent-dark) !important; }

/* 발주서 3-column responsive */
.sheet-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; border-bottom: 2px solid var(--tl-border); }
@media (max-width: 900px) {
  .sheet-grid { grid-template-columns: 1fr; }
  .sheet-grid > div { border-right: none !important; border-bottom: 1px solid var(--tl-border); }
}

/* Order summary */
.order-summary { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px; align-items: end; padding: 16px; background: #F4F6FA; border-top: 1px solid var(--tl-border); }
.order-summary-item .os-label { font-size: 12px; color: #5A6070; font-weight: 500; }
.order-summary-item .os-value { font-size: 18px; font-weight: 700; color: var(--tl-text); margin-top: 2px; }

/* Modal */
.modal-bg { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 200; justify-content: center; align-items: flex-start; padding-top: 20px; }
.modal-bg.show { display: flex; }
.modal { background: white; border-radius: 10px; width: 90%; max-width: 500px; max-height: 90vh; overflow-y: auto; }
.modal-header { padding: 16px 20px; border-bottom: 1px solid var(--tl-border); display: flex; justify-content: space-between; align-items: center; }
.modal-header h3 { font-size: 16px; font-weight: 600; }
.modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--tl-text-hint); }
.modal-body { padding: 20px 20px 30px 20px; }
.modal-footer { padding: 12px 20px; border-top: 1px solid var(--tl-border); display: flex; justify-content: flex-end; gap: 8px; }

/* Status bar */
#product-picker-modal input[type="checkbox"] { transform: scale(0.75); }
.status-bar { background: var(--tl-bg); border-top: 1px solid var(--tl-border); padding: 8px 24px; font-size: 12px; color: var(--tl-text-secondary); display: flex; justify-content: space-between; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; }

/* Empty state */
.empty-state { text-align: center; padding: 40px 20px; color: var(--tl-text-hint); }
.empty-state p { font-size: 14px; margin-bottom: 12px; }

/* Scrollable table container */
.table-scroll { max-height: 500px; overflow-y: auto; overflow-x: auto; position: relative; }

/* Responsive */
@media (max-width: 768px) {
  .content { padding: 12px 12px 40px; }
  .nav-logo { font-size: 13px; }
  .order-summary { grid-template-columns: 1fr 1fr; }
  .kpi-row { grid-template-columns: 1fr 1fr; }
}

/* Highlight row */
.row-highlight { animation: rowFlash 1s ease; }
@keyframes rowFlash { 0%,100%{background:transparent} 50%{background:#E6F1FB} }

/* Autocomplete */
.ac-wrap { position: relative; display: inline-block; }
.ac-list { position: absolute; top: 100%; left: 0; width: 360px; max-height: 200px; overflow-y: auto; background: white; border: 1px solid var(--tl-border); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 300; display: none; font-size: 12px; }
.ac-list.show { display: block; }
.ac-item { padding: 6px 10px; cursor: pointer; display: flex; gap: 8px; align-items: center; border-bottom: 1px solid #F0F2F7; }
.ac-item:hover { background: #E6F1FB; }
.ac-item .ac-code { font-weight: 600; color: #185FA5; min-width: 55px; }
.ac-item .ac-model { font-weight: 500; color: #1A1D23; }
.ac-item .ac-desc { color: #9BA3B2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.ac-item .ac-price { color: #5A6070; font-weight: 500; min-width: 70px; text-align: right; }

/* Settings Modal Tabs */
.settings-tab { background: transparent; border: none; border-bottom: 2px solid transparent; padding: 8px 16px; font-size: 13px; font-weight: 500; color: #5A6070; cursor: pointer; font-family: 'Pretendard', sans-serif; margin-bottom: -2px; }
.settings-tab.active { color: #185FA5; border-bottom-color: #185FA5; font-weight: 600; }
.settings-tab:hover:not(.active) { color: #1A1D23; }
.dm-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #F4F6FA; border-radius: 6px; cursor: pointer; transition: background 0.15s; }
.dm-row:hover { background: #EAECF2; }
.dm-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: #185FA5; cursor: pointer; }
.dm-label { flex: 1; font-size: 13px; font-weight: 500; color: #1A1D23; }
.dm-badge { font-size: 11px; font-weight: 600; color: #5A6070; background: #DDE1EB; padding: 2px 8px; border-radius: 4px; }

/* Fee Calculator */
.fee-calc-badge { font-size:11px; color:#5A6070; background:#EAECF2; padding:2px 8px; border-radius:4px; font-weight:500; }
#fee-calc-table td input { width:100%; height:30px; border:1px solid #DDE1EB; border-radius:4px; padding:0 8px; font-size:12px; text-align:right; font-family:'Pretendard',sans-serif; color:#1A1D23; background:#FFF; }
#fee-calc-table td input:focus { border-color:#185FA5; outline:none; }
#fee-calc-table td input::placeholder { color:#9BA3B2; text-align:center; }
.fc-result { text-align:right; padding-right:10px; line-height:1.4; }
.fc-amount { font-size:14px; font-weight:600; display:block; }
.fc-rate { font-size:11px; font-weight:600; display:block; }
.fc-positive { color:#1D9E75; }
.fc-negative { color:#CC2222; }
.fc-dash { color:#9BA3B2; font-size:12px; }

/* Online Sales V2 */
.os-input { width:100%; height:26px; border:1px solid #DDE1EB; border-radius:4px; padding:0 6px; font-size:11px; font-family:'Pretendard',sans-serif; color:#1A1D23; background:#FFF; }
.os-input:focus { border-color:#185FA5; outline:none; }
.os-input::placeholder { color:#9BA3B2; }
.os-input-num { text-align:right; }
.os-input-text { text-align:left; }
.os-del-btn { width:22px; height:22px; border-radius:4px; border:none; background:#FCEBEB; color:#CC2222; font-size:12px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.os-del-btn:hover { background:#CC2222; color:#FFF; }
.os-stock-cell { display:flex; flex-direction:column; align-items:center; gap:1px; }
.os-stock-ok { color:#1D9E75; font-weight:600; }
.os-stock-warn { color:#EF9F27; font-weight:600; }
.os-stock-danger { color:#CC2222; font-weight:600; }
.os-stock-alert { font-size:8px; font-weight:600; padding:1px 4px; border-radius:2px; white-space:nowrap; }
.os-stock-alert-warn { background:#FAEEDA; color:#854F0B; }
.os-stock-alert-danger { background:#FCEBEB; color:#791F1F; }
.os-promo-badge { font-size:12px; font-weight:600; padding:1px 6px; border-radius:3px; background:#FAEEDA; color:#633806; white-space:normal; word-break:keep-all; display:inline-block; }
.os-vendor-input { width:70px; }
.os-filter-pill { padding:3px 10px; font-size:10px; font-weight:500; border-radius:12px; cursor:pointer; border:1px solid #DDE1EB; background:#FFF; color:#5A6070; }
.os-filter-pill.active { background:#185FA5; color:#FFF; border-color:#185FA5; }
.os-filter-pill.pill-amber { background:#FAEEDA; color:#633806; border-color:#FAC775; }
.os-sum-card { flex:1; background:#F4F6FA; border-radius:4px; padding:6px 10px; text-align:center; }
.os-sum-label { font-size:9px; color:#5A6070; }
.os-sum-val { font-size:14px; font-weight:600; color:#1A1D23; }
.os-date { color:#9BA3B2; font-size:10px; }

/* Toast */
.toast { position: fixed; top: 60px; right: 20px; background: #1A1D23; color: white; padding: 10px 20px; border-radius: 6px; font-size: 13px; font-weight: 500; z-index: 300; transform: translateX(120%); transition: transform 0.3s; }
.toast.show { transform: translateX(0); }