*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Malgun Gothic','Apple SD Gothic Neo',sans-serif;background:#f0f2f5;color:#222;display:flex;min-height:100vh;font-size:16px;}

/* ── 사이드바 ── */
#sidebar{width:218px;min-height:100vh;background:#1a1a1a;display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:100;}
#sidebar .logo{padding:18px 18px 14px;border-bottom:1px solid #2e2e2e;}
.logo-brand-wrap{display:inline-block;line-height:1;}
.logo-hancom{font-size:22px;font-weight:900;letter-spacing:2px;color:#FF6B00;display:block;}
.logo-ubimicro{font-size:11px;font-weight:700;letter-spacing:1.5px;color:#FF6B00;display:block;margin-top:1px;}
#sidebar .logo .title{font-size:18px;color:#fff;font-weight:700;margin-top:8px;}
#sidebar .logo .subtitle{font-size:11px;color:#888;margin-top:2px;}
#sidebar nav{flex:1;padding:8px 0;overflow-y:auto;}
#sidebar nav a{display:flex;align-items:center;gap:10px;padding:11px 20px;color:#aaa;text-decoration:none;font-size:14px;cursor:pointer;border-left:3px solid transparent;transition:all .15s;}
#sidebar nav a:hover{color:#fff;background:#242424;}
#sidebar nav a.active{color:#FF6B00;background:#231a10;border-left-color:#FF6B00;font-weight:600;}
#sidebar nav a svg{width:17px;height:17px;flex-shrink:0;}
#sidebar .nav-group-label{padding:10px 20px 4px;font-size:10px;font-weight:700;letter-spacing:1.2px;color:#dfe4ee;text-transform:uppercase;user-select:none;}
#sidebar .nav-group-label.group-divider{border-top:1px solid #2a2a2a;margin-top:6px;padding-top:14px;}
#sidebar .sidebar-footer{font-size:12px;color:#555;}
#sidebar .sidebar-footer a:hover{color:#fff;background:#242424;}
#sidebar .sidebar-footer a.active{color:#FF6B00;background:#231a10;border-left-color:#FF6B00;font-weight:600;}

/* ── 메인 ── */
#main{margin-left:218px;flex:1;display:flex;flex-direction:column;height:100vh;overflow:hidden;}
.page{display:none;flex-direction:column;flex:1;padding:26px 28px;}
.page.active{display:flex;}
.page-header{margin-bottom:20px;}
.page-header h1{font-size:24px;font-weight:700;color:#1a1a1a;}
.page-header p{font-size:14px;color:#888;margin-top:3px;}

/* ── 통계 카드 ── */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px;}
.stat-card{background:#fff;border-radius:10px;padding:20px 22px;box-shadow:0 1px 4px rgba(0,0,0,.07);border-top:3px solid #FF6B00;}
.stat-card .num{font-size:36px;font-weight:700;color:#FF6B00;}
.stat-card .label{font-size:14px;color:#888;margin-top:4px;}
.stat-card .icon{font-size:26px;margin-bottom:6px;}

/* ── 버튼 ── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:6px;border:none;cursor:pointer;font-size:14px;font-weight:600;transition:all .15s;}
.btn-primary{background:#FF6B00;color:#fff;}
.btn-primary:hover{background:#e05e00;}
.btn-secondary{background:#f0f2f5;color:#444;}
.btn-secondary:hover{background:#e4e6e9;}
.btn-danger{background:#fee2e2;color:#c62828;}
.btn-danger:hover{background:#fecaca;}
.btn-sm{padding:6px 13px;font-size:13px;}
.btn-icon{padding:5px 9px;background:transparent;border:1px solid #ddd;border-radius:5px;cursor:pointer;color:#666;font-size:14px;transition:all .15s;}
.btn-icon:hover{background:#f5f5f5;color:#333;}

/* ── 패널 ── */
.panel{background:#fff;border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,.07);overflow:hidden;}
.panel-header{padding:15px 18px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;flex-shrink:0;}
.panel-header h3{font-size:15px;font-weight:700;color:#222;}
.panel-body{padding:16px 18px;}

/* ── 테이블 ── */
.tbl-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:14px;}
th{background:#f7f8fa;padding:10px 12px;text-align:left;font-weight:700;color:#555;border-bottom:2px solid #eee;white-space:nowrap;font-size:14px;}
th.sortable{cursor:pointer;user-select:none;}
th.sortable:hover{background:#eef0f3;}
th .sort-icon{font-size:11px;margin-left:3px;color:#aaa;}
th.sort-asc .sort-icon::after{content:'▲';}
th.sort-desc .sort-icon::after{content:'▼';}
td{padding:10px 12px;border-bottom:1px solid #f2f2f2;color:#333;vertical-align:middle;}
tr:hover td{background:#fdf9f6;}
#page-categories .cat-scroll{max-height:calc(100vh - 330px);overflow-y:auto;border:1px solid #eef1f6;border-radius:8px;}
#page-categories .cat-scroll thead th{position:sticky;top:0;z-index:1;background:#f7f8fa;}
.drag-handle{cursor:grab;color:#ccc;font-size:17px;padding:0 4px;user-select:none;}
.drag-handle:active{cursor:grabbing;}
.col-type{white-space:nowrap;}
.bom-name-link{cursor:pointer;}
.bom-name-link:hover{color:#3a5bd9;text-decoration:underline;}
/* 가상 참조 자식 행 */
tr.vref-row td{background:#f8f9ff;color:#555;}
tr.vref-row:hover td{background:#eef0ff;}
tr.vref-row td .vref-link{color:#5c6bc0;cursor:pointer;font-size:12px;margin-left:4px;text-decoration:underline dotted;}
tr.vref-row td .vref-link:hover{color:#3949ab;}
/* BOM 규격 - 부품명과 같은 규칙: 줄바꿈 허용, 넓은 칸 */
.col-spec-bom{min-width:180px;max-width:260px;white-space:normal;word-break:break-all;line-height:1.4;}

/* ── 폼 ── */
.form-row{display:grid;gap:12px;margin-bottom:12px;}
.form-row.col2{grid-template-columns:1fr 1fr;}
.form-row.col3{grid-template-columns:1fr 1fr 1fr;}
.form-group label{display:block;font-size:13px;font-weight:700;color:#555;margin-bottom:5px;}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:9px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;font-family:inherit;transition:border .15s;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#FF6B00;box-shadow:0 0 0 2px rgba(255,107,0,.1);}
.form-group textarea{resize:vertical;min-height:64px;}
.form-check{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#fff8ec;border:1px solid #ffd6a0;border-radius:6px;font-size:13px;color:#7a4000;}
.form-check input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:#FF6B00;}

/* ── BOM 레이아웃 ── */
.bom-layout{display:grid;grid-template-columns:268px 1fr;gap:16px;flex:1;min-height:0;}
.product-list-panel{display:flex;flex-direction:column;overflow:hidden;}
.product-list-panel .panel-body{flex:1;padding:8px 0;overflow-y:auto;max-height:calc(100vh - 230px);}
.product-item{padding:11px 16px;cursor:pointer;border-left:3px solid transparent;transition:all .15s;}
.product-item:hover{background:#fdf9f6;border-left-color:#ffcca0;}
.product-item.active{background:#fff4ec;border-left-color:#FF6B00;}
.product-item .pname{font-weight:600;font-size:15px;}
.product-item .pcode{font-size:12px;color:#aaa;margin-top:2px;}
.bom-panel{display:flex;flex-direction:column;overflow:hidden;}
.bom-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex-basis:100%;}

/* ── 버전 바 ── */
.ver-bar{padding:8px 18px;background:#f8f9fa;border-bottom:1px solid #ebebeb;display:flex;align-items:center;gap:10px;flex-shrink:0;}
.ver-bar label{font-size:13px;font-weight:700;color:#666;white-space:nowrap;}
.ver-bar select{padding:5px 10px;border:1px solid #ddd;border-radius:5px;font-size:13px;min-width:160px;}
.badge-readonly{background:#e8f0fe;color:#1a73e8;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700;}
.readonly-notice{background:#fff8e8;border:1px solid #ffe082;border-radius:6px;padding:8px 14px;font-size:13px;color:#7a5000;margin-bottom:10px;}

/* ── BOM 고정 영역 / 스크롤 영역 ── */
#bom-fixed-top{padding:12px 18px 0;flex-shrink:0;}
#bom-body{flex:1;overflow-y:auto;overflow-x:auto;padding:0 18px 14px;}

/* BOM 품목 표: 항목별 내용을 한 줄로 표기, 내용이 길면 가로 스크롤 */
/* .tbl-wrap이 자체적으로 overflow-x:auto를 가지면, 그 안의 표가 세로로 길어질 때
   .tbl-wrap 자신도 높이가 무한정 늘어나 가로 스크롤바가 화면 밖(맨 아래)에 생겨
   보이지 않게 된다. #bom-body 자신의 스크롤(위아래 높이가 고정됨)만 쓰도록 무효화. */
#bom-body .tbl-wrap{overflow:visible;}
#bom-body table{width:auto;min-width:100%;}
#bom-body td{white-space:nowrap;}
#bom-body .col-spec-bom{min-width:0;max-width:none;white-space:nowrap;word-break:normal;}

/* ── BOM 레벨 통계 ── */
.bom-stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.bom-stat-chip{background:#f7f8fa;border:1px solid #eee;border-radius:20px;padding:4px 12px;font-size:13px;color:#555;font-weight:600;}
.bom-stat-chip.total{background:#fff4ec;border-color:#ffcca0;color:#FF6B00;}

/* ── 접기 버튼 ── */
.collapse-btn{background:none;border:none;cursor:pointer;font-size:13px;color:#aaa;padding:0 3px;line-height:1;vertical-align:middle;transition:color .1s;}
.collapse-btn:hover{color:#FF6B00;}

/* ── 모달 ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;align-items:center;justify-content:center;}
.modal-overlay.open{display:flex;}
.modal{background:#fff;border-radius:12px;box-shadow:0 8px 40px rgba(0,0,0,.2);width:740px;max-width:95vw;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;}
.modal-header{padding:17px 22px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;justify-content:space-between;}
.modal-header h3{font-size:17px;font-weight:700;}
.modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:#aaa;line-height:1;}
.modal-close:hover{color:#333;}
.modal-body{padding:18px 22px;flex:1;min-height:0;overflow-y:auto;}
.modal-footer{padding:13px 22px;border-top:1px solid #f0f0f0;display:flex;justify-content:flex-end;gap:8px;}

/* ── 탭 ── */
.tabs{display:flex;border-bottom:2px solid #eee;margin-bottom:16px;}
.tab-btn{padding:10px 22px;background:none;border:none;cursor:pointer;font-size:14px;font-weight:600;color:#aaa;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s;}
.tab-btn.active{color:#FF6B00;border-bottom-color:#FF6B00;}

/* ── 배지 ── */
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:12px;font-weight:700;}
.badge-type{background:#fff4ec;color:#FF6B00;}
.badge-new{background:#FF6B00;color:#fff;font-size:11px;padding:2px 7px;border-radius:10px;font-weight:700;vertical-align:middle;margin-left:5px;animation:pulse 1.5s infinite;}
.badge-stock{background:#e8f5e9;color:#2e7d32;font-size:11px;padding:2px 7px;border-radius:10px;font-weight:700;}
.badge-stock-low{background:#fff3e0;color:#e65100;font-size:11px;padding:2px 7px;border-radius:10px;font-weight:700;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.65;}}
.level-badge{display:inline-block;font-size:11px;padding:2px 6px;border-radius:3px;margin-right:5px;font-weight:700;}
.lb-1{background:#FF6B00;color:#fff;}
.lb-2{background:#f0f4ff;color:#3a5bd4;}
.lb-3{background:#f0fff0;color:#2e7d32;}
.lb-4{background:#fff8f0;color:#b45309;}

/* ── 토스트 ── */
.toast{position:fixed;bottom:24px;right:24px;background:#222;color:#fff;padding:13px 22px;border-radius:8px;font-size:14px;z-index:9999;display:none;box-shadow:0 4px 16px rgba(0,0,0,.2);}
.toast.show{display:block;}
.toast.success{background:#2e7d32;}
.toast.error{background:#c62828;}

/* ── 빈 상태 ── */
.empty-state{text-align:center;padding:52px 20px;color:#bbb;}
.empty-state p{font-size:15px;}

/* ── 대시보드 카드 ── */
.recent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:14px;}
.product-card{background:#fff;border-radius:8px;padding:17px;box-shadow:0 1px 4px rgba(0,0,0,.07);cursor:pointer;border:2px solid transparent;transition:all .15s;}
.product-card:hover{border-color:#FF6B00;transform:translateY(-1px);}
.product-card .pc-name{font-weight:700;font-size:15px;margin-bottom:4px;}
.product-card .pc-code{font-size:12px;color:#aaa;}
.dash-class-section{margin-bottom:24px;}
.dash-class-header{display:flex;align-items:center;justify-content:space-between;padding:9px 16px;background:linear-gradient(90deg,#fff5ee,#fff);border-left:4px solid #FF6B00;border-radius:6px;margin-bottom:12px;}
.dash-class-header .cls-name{font-size:13px;font-weight:700;color:#FF6B00;letter-spacing:.4px;}
.dash-class-header .cls-count{font-size:12px;color:#aaa;background:#f5f5f5;border-radius:10px;padding:2px 9px;}

/* ── 부품 페이지 고정 헤더 + 스크롤 목록 ── */
#page-parts{overflow:hidden;}
#page-parts.active{flex-direction:column;}
#page-bom{overflow:hidden;}
#page-stock{overflow:hidden;}
#page-parts .panel{display:flex;flex-direction:column;flex:1;overflow:hidden;min-height:0;}
#parts-scroll-body{overflow-y:auto;overflow-x:auto;flex:1;}

/* 부품 마스터 목록: 항목별 내용을 한 줄로 표기, 내용이 길면 가로 스크롤 */
#parts-scroll-body table{width:auto;min-width:100%;}
#parts-scroll-body td{white-space:nowrap;}

/* ── 부품 카테고리 탭 ── */
#parts-tab-bar{
  display:flex;align-items:flex-end;gap:0;
  overflow-x:auto;flex-shrink:0;
  background:#f0f4fa;border-bottom:2px solid #c8d5ea;
  padding:0 20px;scrollbar-width:thin;
}
#parts-tab-bar::-webkit-scrollbar{height:4px;}
#parts-tab-bar::-webkit-scrollbar-thumb{background:#c0cde0;border-radius:2px;}
.parts-tab-btn{
  display:flex;flex-direction:column;align-items:center;
  padding:8px 14px 10px;
  border:none;border-bottom:3px solid transparent;
  background:none;cursor:pointer;white-space:nowrap;
  font-size:12px;color:#6b7a99;font-family:inherit;
  transition:color .15s,border-color .15s,background .15s;
  border-radius:6px 6px 0 0;
  min-width:56px;
}
.parts-tab-btn:hover{background:#e4ecf7;color:#3a5bd9;}
.parts-tab-btn.active{
  color:#3a5bd9;border-bottom-color:#3a5bd9;
  background:#fff;font-weight:700;
}
.parts-tab-btn .tab-prefix{font-size:10px;font-weight:700;letter-spacing:.4px;opacity:.7;margin-bottom:1px;}
.parts-tab-btn .tab-label{font-size:12px;line-height:1.2;}
.parts-tab-btn .tab-count{
  font-size:10px;background:#e4ecf7;color:#3a5bd9;
  border-radius:8px;padding:0 5px;margin-top:2px;font-weight:700;
}
.parts-tab-btn.active .tab-count{background:#3a5bd9;color:#fff;}

/* ── 검색 인풋 ── */
.search-input{padding:9px 13px;border:1px solid #ddd;border-radius:6px;font-size:14px;font-family:inherit;}
.search-input:focus{outline:none;border-color:#FF6B00;}

/* ── 날짜 셀 ── */
.dt-cell{font-size:12px;color:#aaa;line-height:1.5;}

::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:#f5f5f5;}
::-webkit-scrollbar-thumb{background:#ddd;border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:#bbb;}

/* 캡처 붙여넣기 영역: 앱 JS가 처리 못 한 이미지가 혹시 그대로 삽입돼도 영역 밖으로 커지지 않도록 안전장치 */
.paste-dropzone{overflow:hidden;}
.paste-dropzone img{max-width:100%;max-height:100%;object-fit:contain;}