/* ═══════════════════════════════════════════
   BOM 관리 — Page Styles
   ═══════════════════════════════════════════ */

/* ─── LAYOUT ─── */
.bom-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  min-height: calc(100vh - var(--nav-h) - 140px);
}

/* ─── LEFT PANEL ─── */
.bom-left {
  width: 300px;
  min-width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--nav-h) - 120px);
  position: sticky;
  top: calc(var(--nav-h) + 28px);
}
.bom-left-head {
  padding: 16px 18px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.bom-left-head h3 {
  font-size: .88rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bom-left-head h3 i {
  color: var(--accent);
  font-size: .82rem;
}
.bom-left-filters {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid var(--border);
}
.bom-search-wrap {
  position: relative;
}
.bom-search-wrap i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dim);
  font-size: .72rem;
}
.bom-search-wrap input {
  padding-left: 30px !important;
}
.bom-item-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.bom-left-hint {
  padding: 10px 14px;
  font-size: .7rem;
  color: var(--dim);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 6px;
}
.bom-left-hint i {
  font-size: .68rem;
}
.bom-empty-list {
  padding: 30px 16px;
  text-align: center;
  color: var(--dim);
  font-size: .82rem;
}

/* ─── ITEM ROW ─── */
.bom-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .2s var(--ease);
  position: relative;
  margin-bottom: 2px;
}
.bom-item-row:hover {
  background: rgba(255, 255, 255, .03);
}
.bom-item-row.active {
  background: var(--accent-soft);
  border: 1px solid rgba(59, 130, 246, .15);
}
.bom-item-row .item-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  flex-shrink: 0;
}
.bom-item-row .item-icon.완제품 {
  background: rgba(59, 130, 246, .1);
  color: #60a5fa;
}
.bom-item-row .item-icon.반제품 {
  background: rgba(168, 85, 247, .1);
  color: #c084fc;
}
.bom-item-row .item-icon.원자재 {
  background: rgba(34, 197, 94, .1);
  color: #4ade80;
}
.bom-item-row .item-info {
  flex: 1;
  min-width: 0;
}
.bom-item-row .item-code {
  font-size: .72rem;
  font-family: var(--en);
  color: var(--muted);
  font-weight: 500;
}
.bom-item-row .item-name {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bom-item-row .item-type-badge {
  font-size: .6rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  flex-shrink: 0;
}
.item-type-badge.완제품 {
  background: rgba(59, 130, 246, .1);
  color: #60a5fa;
}
.item-type-badge.반제품 {
  background: rgba(168, 85, 247, .1);
  color: #c084fc;
}
.item-type-badge.원자재 {
  background: rgba(34, 197, 94, .1);
  color: #4ade80;
}

/* ─── RIGHT PANEL ─── */
.bom-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bom-right-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
}
.bom-right-title h3 {
  font-size: .88rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bom-right-title h3 i {
  color: var(--accent);
  font-size: .82rem;
}

/* ─── PARENT BAR ─── */
.bom-parent-bar {
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all .3s var(--ease);
}
.bom-parent-bar.selected {
  background: linear-gradient(135deg, rgba(59, 130, 246, .12), rgba(129, 140, 248, .08));
  border: 1px solid rgba(59, 130, 246, .2);
  box-shadow: 0 2px 16px rgba(59, 130, 246, .08);
}
.bom-parent-empty {
  padding: 20px;
  text-align: center;
  color: var(--dim);
  font-size: .84rem;
  background: var(--surface);
  border: 1px dashed var(--border2);
  border-radius: var(--radius-lg);
}
.bom-parent-empty i {
  margin-right: 6px;
}
.bom-parent-info {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.bom-parent-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(59, 130, 246, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #60a5fa;
}
.bom-parent-detail {
  flex: 1;
}
.bom-parent-code {
  font-size: .72rem;
  font-family: var(--en);
  color: var(--accent);
  font-weight: 600;
  letter-spacing: .3px;
}
.bom-parent-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
}
.bom-parent-meta {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

/* ─── STATS BAR ─── */
.bom-stats-bar {
  display: flex;
  gap: 10px;
}
.bom-stat-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: .78rem;
  color: var(--muted);
}
.bom-stat-chip i {
  color: var(--accent);
  font-size: .72rem;
}
.bom-stat-chip strong {
  color: var(--text);
  font-family: var(--en);
}

/* ─── TREE AREA ─── */
.bom-tree-area {
  min-height: 200px;
}

/* ─── EMPTY STATE ─── */
.bom-empty-state {
  text-align: center;
  padding: 60px 20px;
  animation: fadeIn .5s var(--ease);
}
.bom-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(59, 130, 246, .08), rgba(139, 92, 246, .06));
  border: 1px solid rgba(59, 130, 246, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--dim);
  margin: 0 auto 18px;
}
.bom-empty-state h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text2);
  margin-bottom: 8px;
}
.bom-empty-state p {
  font-size: .82rem;
  color: var(--dim);
  line-height: 1.7;
}

/* ─── TREE NODES ─── */
.bom-tree-root {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.bom-tree-children {
  padding-left: 32px;
  position: relative;
}
.bom-tree-children::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 16px;
  width: 1px;
  background: var(--border2);
}

.bom-tree-node {
  position: relative;
  margin-bottom: 6px;
  animation: fadeIn .35s var(--ease) both;
}
.bom-tree-children .bom-tree-node::before {
  content: '';
  position: absolute;
  left: -17px;
  top: 20px;
  width: 14px;
  height: 1px;
  background: var(--border2);
}

.bom-node-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-left: 3px solid var(--border2);
  transition: all .2s var(--ease);
  cursor: default;
}
.bom-node-card:hover {
  border-color: var(--border2);
  background: var(--surface2);
  box-shadow: var(--shadow-sm);
  transform: translateX(2px);
}

/* Level colors for left border */
.bom-node-card.level-1 { border-left-color: #3b82f6; }
.bom-node-card.level-2 { border-left-color: #22c55e; }
.bom-node-card.level-3 { border-left-color: #f59e0b; }
.bom-node-card.level-4 { border-left-color: #6366f1; }
.bom-node-card.level-5 { border-left-color: #ec4899; }
.bom-node-card.level-6 { border-left-color: #14b8a6; }

.bom-node-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  flex-shrink: 0;
}
.bom-node-icon.완제품 {
  background: rgba(59, 130, 246, .1);
  color: #60a5fa;
}
.bom-node-icon.반제품 {
  background: rgba(168, 85, 247, .1);
  color: #c084fc;
}
.bom-node-icon.원자재 {
  background: rgba(34, 197, 94, .1);
  color: #4ade80;
}

.bom-node-info {
  flex: 1;
  min-width: 0;
}
.bom-node-code {
  font-size: .7rem;
  font-family: var(--en);
  color: var(--muted);
  font-weight: 500;
}
.bom-node-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bom-node-spec {
  font-size: .68rem;
  color: var(--dim);
  margin-top: 1px;
}
.bom-node-badges {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.bom-level-badge {
  font-size: .6rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--en);
}
.bom-level-badge.l1 { background: rgba(59, 130, 246, .1); color: #60a5fa; }
.bom-level-badge.l2 { background: rgba(34, 197, 94, .08); color: #4ade80; }
.bom-level-badge.l3 { background: rgba(245, 158, 11, .08); color: #fbbf24; }
.bom-level-badge.l4 { background: rgba(99, 102, 241, .1); color: #a5b4fc; }
.bom-level-badge.l5 { background: rgba(236, 72, 153, .1); color: #f472b6; }
.bom-level-badge.l6 { background: rgba(20, 184, 166, .08); color: #2dd4bf; }

.bom-qty-badge {
  font-size: .7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border);
  color: var(--text2);
  font-family: var(--en);
}
.bom-qty-badge i {
  font-size: .6rem;
  margin-right: 3px;
  color: var(--dim);
}

.bom-node-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .2s;
  flex-shrink: 0;
}
.bom-node-card:hover .bom-node-actions {
  opacity: 1;
}

/* ─── NO CHILDREN STATE ─── */
.bom-no-children {
  padding: 40px 20px;
  text-align: center;
  color: var(--dim);
  font-size: .82rem;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}
.bom-no-children i {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 10px;
  color: var(--dim);
}

/* ─── AUTOCOMPLETE ─── */
.ac-wrap{
  position:relative;
}
.ac-list{
  position:absolute;top:100%;left:0;right:0;z-index:50;
  max-height:260px;overflow-y:auto;
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:0 0 var(--radius) var(--radius);
  box-shadow:var(--shadow-lg);
  display:none;
}
.ac-list.open{display:block}
.ac-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;cursor:pointer;
  transition:background .12s;
  border-bottom:1px solid rgba(255,255,255,.03);
}
.ac-item:last-child{border-bottom:none}
.ac-item:hover,.ac-item.focused{
  background:var(--accent-soft);
}
.ac-item-icon{
  width:28px;height:28px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;flex-shrink:0;
}
.ac-item-icon.완제품{background:rgba(59,130,246,.1);color:#60a5fa}
.ac-item-icon.반제품{background:rgba(168,85,247,.1);color:#c084fc}
.ac-item-icon.원자재{background:rgba(20,184,166,.1);color:#2dd4bf}
.ac-item-info{flex:1;min-width:0}
.ac-item-code{font-size:.7rem;color:var(--dim);font-family:var(--en)}
.ac-item-name{font-size:.82rem;font-weight:500}
.ac-item-type{
  font-size:.62rem;font-weight:600;padding:2px 6px;border-radius:10px;
  white-space:nowrap;
}
.ac-item-type.완제품{background:rgba(59,130,246,.1);color:#60a5fa}
.ac-item-type.반제품{background:rgba(168,85,247,.1);color:#c084fc}
.ac-item-type.원자재{background:rgba(20,184,166,.1);color:#2dd4bf}
.ac-no-result{
  padding:20px;text-align:center;color:var(--dim);font-size:.82rem;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  .bom-layout {
    flex-direction: column;
  }
  .bom-left {
    width: 100%;
    min-width: 0;
    max-height: 350px;
    position: static;
  }
}