/* ─── BOM 계산기 페이지 ─── */
#page-bom-calc,
.bc-editor-modal {
  --bc-accent: #D97706;
  --bc-accent-hover: #B45309;
  --bc-success: #0F6E56;
  --bc-danger: #D14343;
  --bc-bg: #FFFFFF;
  --bc-bg2: #F5F5F5;
  --bc-border: #EAEAEA;
  --bc-border-strong: #D4D4D4;
  --bc-ink: #1A1A1A;
  --bc-ink2: #3A3A3A;
  --bc-ink3: #6B6B6B;
  --bc-muted: #9A9A9A;
}

/* 페이지 레이아웃 */
.bc-page { display:flex; flex-direction:column; background:var(--bc-bg2); }
.bc-header { display:flex; align-items:center; gap:12px; padding:16px 24px 12px; background:var(--bc-bg); border-bottom:1px solid var(--bc-border); flex-shrink:0; }
.bc-header-title { font-size:18px; font-weight:700; color:var(--bc-ink); }
.bc-header-actions { display:flex; gap:8px; margin-left:auto; }

/* 공통 버튼 */
.bc-btn { padding:7px 16px; border-radius:6px; font-size:13px; font-weight:500; cursor:pointer; border:1px solid var(--bc-border); background:var(--bc-bg); color:var(--bc-ink2); transition:all .1s; }
.bc-btn:hover { border-color:var(--bc-border-strong); background:var(--bc-bg2); }
.bc-btn-primary { background:var(--bc-accent); color:#fff; border-color:var(--bc-accent); }
.bc-btn-primary:hover { background:var(--bc-accent-hover); border-color:var(--bc-accent-hover); }
.bc-btn-danger { background:#DC2626; color:#fff; border-color:#DC2626; font-weight:600; box-shadow:0 1px 3px rgba(220,38,38,0.3); }
.bc-btn-danger:hover { background:#B91C1C; border-color:#B91C1C; }
.bc-btn-sm { padding:5px 10px; font-size:12px; }

/* BOM 선택 바 */
.bc-select-bar { display:flex; align-items:center; gap:12px; padding:12px 24px; background:var(--bc-bg); border-bottom:1px solid var(--bc-border); flex-shrink:0; }
.bc-select-dd { padding:6px 12px; border:1px solid var(--bc-border); border-radius:6px; font-size:13px; background:var(--bc-bg); color:var(--bc-ink); min-width:220px; cursor:pointer; }
.bc-select-left { border:2px solid #0F6E56; color:#0F6E56; font-weight:700; }
.bc-select-right { border:2px solid #D97706; color:#D97706; font-weight:700; }
.bc-bom-name-input { padding:6px 12px; border:1px solid var(--bc-border); border-radius:6px; font-size:13px; color:var(--bc-ink); width:200px; }
.bc-bom-name-input:focus { border-color:var(--bc-accent); outline:none; box-shadow:0 0 0 3px rgba(217,119,6,0.12); }
.bc-qty-wrap { display:flex; align-items:center; gap:6px; }
.bc-qty-label { font-size:12px; color:var(--bc-ink3); }
.bc-qty-input { width:80px; padding:6px 8px; border:1px solid var(--bc-border); border-radius:6px; font-size:13px; text-align:right; }
.bc-qty-input:focus { border-color:var(--bc-accent); outline:none; }

/* 본문 영역 */
.bc-body { padding:20px 24px 40px; display:flex; flex-direction:column; gap:20px; }

/* 요약 카드 */
.bc-summary-cards { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.bc-summary-card { background:var(--bc-bg); border:1px solid var(--bc-border); border-radius:8px; padding:18px 20px; }
.bc-summary-card-label { font-size:11px; color:var(--bc-ink3); margin-bottom:4px; }
.bc-summary-card-val { font-size:20px; font-weight:700; color:var(--bc-ink); font-variant-numeric:tabular-nums; }
.bc-summary-card.accent .bc-summary-card-val { color:var(--bc-accent); }
.bc-summary-card.success .bc-summary-card-val { color:var(--bc-success); }
.bc-summary-card.danger .bc-summary-card-val { color:var(--bc-danger); }

/* 3단 섹션 */
.bc-section { background:var(--bc-bg); border:1px solid var(--bc-border); border-radius:8px; overflow:hidden; }
.bc-section-header { display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--bc-border); background:var(--bc-bg2); }
.bc-section-title { font-size:13px; font-weight:600; color:var(--bc-ink); }
.bc-section-badge { font-size:11px; padding:2px 8px; border-radius:10px; font-weight:500; }
.bc-section-badge.raw { background:#E6F1FB; color:#1565C0; }
.bc-section-badge.supply { background:#E1F5EE; color:#0F6E56; }
.bc-section-badge.proc { background:#EEEDFE; color:#3C3489; }
.bc-section-badge.etc { background:#FDE8E8; color:#9B2C2C; }
.bc-section-subtotal { margin-left:auto; font-size:13px; font-weight:600; color:var(--bc-ink); font-variant-numeric:tabular-nums; }

/* 테이블 */
.bc-table { width:100%; border-collapse:collapse; font-size:12px; }
.bc-table th { padding:8px 10px; text-align:left; font-weight:500; color:var(--bc-ink3); border-bottom:1px solid var(--bc-border); font-size:11px; background:var(--bc-bg); }
.bc-table td { padding:8px 10px; border-bottom:1px solid var(--bc-border); color:var(--bc-ink); vertical-align:middle; }
.bc-table tr:last-child td { border-bottom:none; }
.bc-table tr:hover td { background:rgba(0,0,0,0.015); }
.bc-table .num { text-align:right; font-variant-numeric:tabular-nums; }

/* 셀 입력 */
.bc-cell-input { width:100%; padding:4px 6px; border:1px solid transparent; border-radius:4px; font-size:12px; background:transparent; color:var(--bc-ink); text-overflow:clip; }
.bc-cell-input:focus { border-color:var(--bc-accent); outline:none; background:var(--bc-bg); }
.bc-cell-input.num { text-align:right; }
.bc-cell-input[readonly] { background:rgba(0,0,0,0.02); color:var(--bc-ink3); }

/* 자재 검색 버튼 */
.bc-search-btn { border:none; background:none; cursor:pointer; font-size:14px; padding:2px 4px; opacity:0.5; }
.bc-search-btn:hover { opacity:1; }

/* 링크 배지 */
.bc-link-badge { font-size:10px; margin-left:4px; }

/* 가공비 타입 토글 */
.bc-proc-type { width:100%; padding:5px 8px; border:1px solid var(--bc-border); border-radius:4px; font-size:12px; cursor:pointer; background:var(--bc-bg); color:var(--bc-ink2); box-sizing:border-box; }

/* 행 추가 */
.bc-add-row { padding:8px 16px; text-align:center; }
.bc-add-row-btn { border:1px dashed var(--bc-border); background:none; width:100%; padding:6px; border-radius:6px; color:var(--bc-muted); font-size:12px; cursor:pointer; }
.bc-add-row-btn:hover { border-color:var(--bc-accent); color:var(--bc-accent); }

/* 행 삭제 */
.bc-del-btn { border:none; background:none; cursor:pointer; font-size:13px; opacity:0.4; padding:2px 4px; }
.bc-del-btn:hover { opacity:1; color:var(--bc-danger); }

/* 하단: 원가 구성비 + 연결 제품 */
.bc-bottom { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.bc-bottom-card { background:var(--bc-bg); border:1px solid var(--bc-border); border-radius:8px; padding:20px; }
.bc-bottom-title { font-size:13px; font-weight:600; color:var(--bc-ink); margin-bottom:12px; }

/* 원가 구성비 바 */
.bc-cost-bar { display:flex; height:24px; border-radius:6px; overflow:hidden; background:var(--bc-bg2); }
.bc-cost-bar-seg { display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:600; color:#fff; min-width:2px; transition:width .3s; }
.bc-cost-bar-seg.raw { background:#1565C0; }
.bc-cost-bar-seg.supply { background:#0F6E56; }
.bc-cost-bar-seg.proc { background:#3C3489; }
.bc-cost-legend { display:flex; gap:16px; margin-top:8px; }
.bc-cost-legend-item { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--bc-ink2); }
.bc-cost-legend-dot { width:8px; height:8px; border-radius:50%; }

/* 연결 제품 */
.bc-linked-list { display:flex; flex-direction:column; gap:6px; max-height:200px; overflow-y:auto; }
.bc-linked-item { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border:1px solid var(--bc-border); border-radius:6px; font-size:12px; cursor:pointer; }
.bc-linked-item:hover { background:var(--bc-bg2); }
.bc-linked-code { color:var(--bc-muted); font-size:11px; }
.bc-linked-add { border:1px dashed var(--bc-border); border-radius:6px; text-align:center; padding:8px; font-size:12px; color:var(--bc-muted); cursor:pointer; }
.bc-linked-add:hover { border-color:var(--bc-accent); color:var(--bc-accent); }

/* 판매가 입력 */
.bc-sell-price-wrap { display:flex; align-items:center; gap:6px; margin-bottom:12px; }
.bc-sell-price-label { font-size:12px; color:var(--bc-ink3); }
.bc-sell-price-input { width:100px; padding:5px 8px; border:1px solid var(--bc-border); border-radius:6px; font-size:13px; text-align:right; }
.bc-sell-price-input:focus { border-color:var(--bc-accent); outline:none; }

/* 빈 상태 */
.bc-empty { text-align:center; padding:60px 20px; color:var(--bc-muted); }
.bc-empty-icon { font-size:48px; margin-bottom:12px; }
.bc-empty-msg { font-size:14px; margin-bottom:16px; }

/* 사용법 배너 */
.bc-guide-banner { padding:10px 16px; background:#FFFBF0; border:1px solid #FEF3DA; border-radius:8px; font-size:12px; color:#7A4A08; line-height:1.6; display:flex; align-items:flex-start; gap:8px; }
.bc-guide-banner .close { cursor:pointer; margin-left:auto; font-size:14px; opacity:0.5; }
.bc-guide-banner .close:hover { opacity:1; }

/* 반응형 */
@media (max-width: 900px) {
  .bc-summary-cards { grid-template-columns: repeat(3, 1fr); }
  .bc-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .bc-summary-cards { grid-template-columns: repeat(2, 1fr); }
  .bc-header { padding: 12px 16px 10px; }
  .bc-body { padding: 12px 16px 16px; }
}

/* 메모 영역 */
.bc-memo-area { width:100%; min-height:80px; padding:10px 12px; border:1px solid var(--bc-border); border-radius:6px; font-size:13px; color:var(--bc-ink); resize:vertical; font-family:inherit; line-height:1.5; }
.bc-memo-area:focus { border-color:var(--bc-accent); outline:none; box-shadow:0 0 0 3px rgba(217,119,6,0.12); }

/* 목록 모달 */
.bc-list-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.4); display:flex; align-items:center; justify-content:center; padding:20px; }
.bc-list-modal { background:#fff; border-radius:12px; width:900px; max-width:100%; max-height:85vh; display:flex; flex-direction:column; box-shadow:0 12px 40px rgba(0,0,0,0.2); }
.bc-list-header { padding:14px 20px; border-bottom:1px solid var(--bc-border); display:flex; align-items:center; gap:12px; }
.bc-list-title { font-size:15px; font-weight:600; flex:1; }
.bc-list-search { padding:6px 12px; border:1px solid var(--bc-border); border-radius:6px; font-size:13px; width:240px; }
.bc-list-body { flex:1; overflow-y:auto; padding:0; }
.bc-list-table { width:100%; border-collapse:collapse; font-size:13px; }
.bc-list-table th { padding:9px 14px; text-align:left; font-weight:500; color:var(--bc-ink3); font-size:11px; background:var(--bc-bg2); border-bottom:1px solid var(--bc-border); position:sticky; top:0; }
.bc-list-table td { padding:11px 14px; border-bottom:1px solid var(--bc-border); color:var(--bc-ink); }
.bc-list-table tr { cursor:pointer; transition:background .1s; }
.bc-list-table tr:hover td { background:#FFFBF0; }
.bc-list-table .num { text-align:right; font-variant-numeric:tabular-nums; }
.bc-list-empty { padding:60px 20px; text-align:center; color:var(--bc-muted); }

/* 비교 모달 */
.bc-compare-modal { background:#fff; border-radius:12px; width:1000px; max-width:100%; max-height:90vh; display:flex; flex-direction:column; box-shadow:0 12px 40px rgba(0,0,0,0.2); }
.bc-compare-selector { display:flex; gap:16px; padding:14px 20px; border-bottom:1px solid var(--bc-border); align-items:center; }
.bc-compare-vs { font-size:18px; color:#D97706; font-weight:800; padding:0 12px; }
.bc-compare-body { flex:1; overflow-y:auto; padding:20px; }
.bc-compare-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.bc-compare-col { background:#FFFFFF; border:2px solid #EAEAEA; border-radius:10px; padding:0; overflow:hidden; }
.bc-compare-col:first-child { border-color:#B8DBC4; }
.bc-compare-col:last-child { border-color:#FFE0B0; }
.bc-compare-col-title { font-size:14px; font-weight:700; padding:12px 16px; color:#FFFFFF; background:#0F6E56; border-bottom:2px solid #0A5942; }
.bc-compare-col:last-child .bc-compare-col-title { background:#D97706; border-bottom-color:#B45309; }
.bc-compare-row { display:flex; justify-content:space-between; padding:10px 16px; border-bottom:1px solid #F0EDE4; font-size:13px; }
.bc-compare-row:last-child { border-bottom:none; }
.bc-compare-row .label { color:var(--bc-ink3); font-weight:500; }
.bc-compare-row .val { font-weight:700; font-variant-numeric:tabular-nums; color:#1A1A1A; }
.bc-compare-diff { padding:14px 18px; background:#FFFBF0; border:1px solid #FEF3DA; border-radius:8px; margin-top:18px; font-size:13px; }
.bc-compare-diff-row { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed #F5E5BC; }
.bc-compare-diff-row:last-child { border-bottom:none; }
.bc-compare-diff-row .delta-up { color:#D14343; font-weight:700; }
.bc-compare-diff-row .delta-down { color:#0F6E56; font-weight:700; }

/* 편집 모달 (풀스크린 대형) */
.bc-editor-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; padding:20px; }
.bc-editor-modal { background:#F5F5F5; border-radius:12px; width:95vw; max-width:1280px; height:92vh; display:flex; flex-direction:column; box-shadow:0 16px 50px rgba(0,0,0,0.3); overflow:hidden; }
.bc-editor-modal .bc-header { background:#FFFFFF; border-bottom:1px solid #EAEAEA; flex-shrink:0; padding:14px 20px; display:flex; align-items:center; gap:12px; }
.bc-editor-modal .bc-select-bar { background:#FFFFFF; flex-shrink:0; border-bottom:1px solid #EAEAEA; padding:12px 20px; display:flex; align-items:center; gap:12px; }
.bc-editor-modal .bc-body { flex:1 1 auto; min-height:0; overflow-y:auto; padding:20px; display:block; background:#F5F5F5; }
.bc-editor-modal .bc-body > * { margin-bottom:16px; }
.bc-editor-modal .bc-body > *:last-child { margin-bottom:0; }
.bc-editor-modal .bc-summary-cards,
.bc-editor-modal .bc-section,
.bc-editor-modal .bc-bottom,
.bc-editor-modal .bc-bottom-card,
.bc-editor-modal .bc-guide-banner { flex-shrink:0; }