/* EBTRON 도면실 — style.css
   대상 브라우저: Chrome 109(Win7) 이상 / 모바일 Chrome·Safari
   (color-mix, CSS nesting, :has 등 최신 전용 문법은 쓰지 않음) */

:root{
  --bg:#f2f4f7;
  --panel:#ffffff;
  --line:#d7dce3;
  --line2:#e8ecf1;
  --fg:#1b2027;
  --fg2:#5b6470;
  --accent:#0b6fb8;
  --accent-w:#e6f1fa;
  --sel:#ffd400;
  --hit:#ff8c1a;
  --dark:#1b1d20;
  --shadow:0 2px 10px rgba(16,24,40,.12);
  --top-h:52px;
  --side-w:260px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:"Malgun Gothic","맑은 고딕",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR",sans-serif;
  font-size:15px; line-height:1.45; color:var(--fg); background:var(--bg);
  display:flex; flex-direction:column;
  -webkit-text-size-adjust:100%;
}
[hidden]{display:none !important;}
button,input,select{font:inherit; color:inherit;}
a{color:var(--accent);}

/* ───────── 상단 바 ───────── */
.topbar{
  flex:0 0 auto; height:var(--top-h); display:flex; align-items:center; gap:10px;
  padding:0 10px; background:#0e2233; color:#fff; box-shadow:var(--shadow); z-index:30;
}
.icon-btn{
  display:none; width:38px; height:38px; flex:0 0 auto; border:0; border-radius:8px;
  background:rgba(255,255,255,.12); color:#fff; font-size:19px; cursor:pointer;
}
.icon-btn:active{background:rgba(255,255,255,.25);}
.logo-chip{
  flex:0 0 auto; display:inline-flex; align-items:center; padding:3px 7px; border-radius:7px;
  background:rgba(255,255,255,.93);
}
.logo{height:26px; width:auto; display:block;}
.brand{display:flex; flex-direction:column; line-height:1.15; flex:0 0 auto;}
.brand-main{font-weight:700; font-size:17px; letter-spacing:.2px;}
.brand-sub{font-size:11px; color:#9fb6c9;}
.cur{
  flex:1 1 auto; min-width:0; font-size:14px; color:#cfe0ee;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-left:6px;
}
.cur b{color:#fff; font-weight:600;}
.cur .rev{
  display:inline-block; margin-left:6px; padding:1px 7px; border-radius:10px;
  background:rgba(255,255,255,.16); font-size:12px;
}

/* 검색 */
.search{position:relative; flex:0 0 auto; width:236px;}
.qbox{
  width:100%; height:34px; border-radius:8px; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.12); color:#fff; padding:0 28px 0 10px; outline:none;
}
.qbox::placeholder{color:#9fb6c9;}
.qbox:focus{background:#fff; color:#111; border-color:var(--accent);}
.qbox:focus::placeholder{color:#98a2b3;}
.qclear{
  position:absolute; right:4px; top:4px; width:26px; height:26px; border:0; border-radius:6px;
  background:transparent; color:#9fb6c9; font-size:18px; line-height:1; cursor:pointer;
}
.qbox:focus + .qclear{color:#667;}
.drop{
  position:absolute; top:38px; right:0; width:320px; max-width:78vw; max-height:56vh; overflow:auto;
  background:var(--panel); color:var(--fg); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); z-index:40; padding:4px;
}
.drop .ditem{
  display:flex; align-items:baseline; gap:8px; padding:8px 10px; border-radius:7px; cursor:pointer;
}
.drop .ditem:hover,.drop .ditem.on{background:var(--accent-w);}
.drop .ditem .r{font-weight:700; min-width:52px;}
.drop .ditem .v{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.drop .ditem .k{font-size:12px; color:var(--fg2); flex:0 0 auto;}
.drop .dnone{padding:12px; color:var(--fg2);}

/* ───────── 레이아웃 ───────── */
.layout{flex:1 1 auto; min-height:0; display:flex; position:relative;}
.sidebar{
  flex:0 0 var(--side-w); width:var(--side-w); min-width:0; background:var(--panel);
  border-right:1px solid var(--line); display:flex; flex-direction:column; z-index:20;
}
.side-head{padding:8px; border-bottom:1px solid var(--line2);}
.side-filter{
  width:100%; height:32px; border:1px solid var(--line); border-radius:8px; padding:0 9px;
  background:#fff; outline:none;
}
.side-filter:focus{border-color:var(--accent);}
.side-filter.grow{flex:1 1 140px; min-width:100px; height:30px;}
.board-list{list-style:none; margin:0; padding:6px; overflow:auto; flex:1 1 auto;}
.board-list li{
  display:flex; gap:9px; align-items:flex-start; padding:8px; border-radius:9px; cursor:pointer;
  border:1px solid transparent;
}
.board-list li:hover{background:var(--accent-w);}
.board-list li.on{background:var(--accent-w); border-color:#9dc7e8;}
.board-list .th{
  flex:0 0 52px; width:52px; height:52px; border-radius:6px; background:#11151a;
  object-fit:contain; border:1px solid var(--line);
}
.board-list .bi{min-width:0; flex:1 1 auto;}
.board-list .bm{font-weight:700; font-size:14px;}
.board-list .bn{font-size:12px; color:var(--fg2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.board-list .bd{font-size:11px; color:var(--fg2); margin-top:2px;}
.side-foot{padding:8px 10px; font-size:11px; color:var(--fg2); border-top:1px solid var(--line2);}
.scrim{display:none;}

/* 본문 */
.main{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; position:relative;}
.boardbar{
  flex:0 0 auto; padding:7px 12px; background:var(--panel); border-bottom:1px solid var(--line2);
  font-size:14.5px; color:var(--fg2); line-height:1.35;
}
.boardbar b{color:var(--fg); font-weight:700; font-size:15.5px;}
.boardbar .sep{opacity:.45; margin:0 6px;}
.boardbar .rev{
  display:inline-block; margin-left:6px; padding:1px 8px; border-radius:10px;
  background:var(--accent-w); color:#0a5a96; font-size:12.5px; font-weight:700;
}
.boardbar:empty{display:none;}
.tabs{
  flex:0 0 auto; display:flex; gap:2px; padding:0 6px; background:var(--panel);
  border-bottom:1px solid var(--line); overflow-x:auto;
}
.tabs button{
  flex:0 0 auto; border:0; background:transparent; padding:11px 15px; font-size:15px;
  color:var(--fg2); cursor:pointer; border-bottom:3px solid transparent; white-space:nowrap;
}
.tabs button.on{color:var(--accent); font-weight:700; border-bottom-color:var(--accent);}
.tabs button[disabled]{opacity:.38; cursor:not-allowed;}
.panels{flex:1 1 auto; min-height:0; position:relative;}
.panel{position:absolute; inset:0; display:flex; flex-direction:column; min-height:0;}

/* 도구 막대 */
.toolbar{
  flex:0 0 auto; display:flex; align-items:center; gap:6px; padding:6px 8px; flex-wrap:wrap;
  background:var(--panel); border-bottom:1px solid var(--line);
}
.toolbar .sp{flex:1 1 auto;}
.tbtn{
  height:31px; min-width:34px; padding:0 11px; border:1px solid var(--line); border-radius:8px;
  background:#fff; cursor:pointer; color:var(--fg); display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none;
}
.tbtn:hover{background:var(--accent-w); border-color:#9dc7e8;}
.tbtn:active{background:#d6e8f6;}
.tbtn[disabled]{opacity:.4; cursor:not-allowed;}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden;}
.seg button{
  height:31px; padding:0 13px; border:0; background:#fff; cursor:pointer; color:var(--fg2);
  border-right:1px solid var(--line);
}
.seg button:last-child{border-right:0;}
.seg button.on{background:var(--accent); color:#fff; font-weight:600;}
.tlabel{font-size:12.5px; color:var(--fg2);}
.chk{display:inline-flex; align-items:center; gap:5px; font-size:13px; color:var(--fg2); cursor:pointer;}
.chk input{width:16px; height:16px; accent-color:var(--accent);}
.pagelabel{font-size:13px; color:var(--fg2); min-width:62px; text-align:center;}
.count{font-size:12px; color:var(--fg2); margin-left:auto;}

/* 뷰포트 */
.viewport{
  flex:1 1 auto; min-height:0; position:relative; overflow:hidden;
  touch-action:none; -webkit-user-select:none; user-select:none; cursor:grab;
}
.viewport.dragging{cursor:grabbing;}
.viewport.dark{background:#15181c;}
.viewport.light{background:#fbfbf7;}
.viewport canvas{display:block; width:100%; height:100%;}
.board-svg{position:absolute; left:0; top:0; width:100%; height:100%; display:block;}
.vp-msg{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:86%;
  background:rgba(255,255,255,.95); color:var(--fg); border-radius:10px; padding:14px 18px;
  text-align:center; box-shadow:var(--shadow); z-index:5; font-size:14px;
}
.statusbar{
  flex:0 0 auto; padding:5px 10px; font-size:12px; color:var(--fg2);
  background:var(--panel); border-top:1px solid var(--line2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* 로딩 막대 */
.loadbar{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(280px,72%);
  text-align:center; color:#dfe6ee; font-size:13px; z-index:6;
}
.loadbar-in{height:7px; border-radius:4px; background:rgba(255,255,255,.18); overflow:hidden; margin-bottom:7px;}
.loadbar-in i{display:block; height:100%; width:0; background:var(--accent); transition:width .15s linear;}

/* 2D 오버레이(부품 다각형) */
.ov polygon{fill:#ffffff; fill-opacity:0; stroke:none; cursor:pointer;}
.ov polygon:hover{fill-opacity:.16;}
.ov polygon.hit{fill:var(--hit); fill-opacity:.42; stroke:#ff6a00; stroke-width:2; vector-effect:non-scaling-stroke;}
.ov polygon.sel{fill:var(--sel); fill-opacity:.55; stroke:#c28f00; stroke-width:3; vector-effect:non-scaling-stroke;}
.ov-ghost polygon{fill:#7fd1ff; fill-opacity:0; stroke:#7fd1ff; stroke-opacity:.35; stroke-width:1;
  vector-effect:non-scaling-stroke; stroke-dasharray:3 3; cursor:pointer;}
.ov-ghost polygon:hover{fill-opacity:.12;}
.ov-ghost polygon.hit{stroke:var(--hit); stroke-opacity:.9; fill:var(--hit); fill-opacity:.18;}
.ov-ghost polygon.sel{stroke:var(--sel); stroke-opacity:1; stroke-width:2; fill:var(--sel); fill-opacity:.25;}
.ov-off{display:none;}

/* 연결 패드 마커 (2D) */
.padmk .mk{
  fill:#00e5ff; fill-opacity:.42; stroke:#00b8d4; stroke-width:1.6;
  vector-effect:non-scaling-stroke; cursor:pointer;
}
.padmk .mk:hover{fill-opacity:.75;}
.padmk .mk.net{fill-opacity:.5;}

/* 투시(앞면 + 뒷면 겹쳐보기) */
.xray-layer{opacity:.45;}                      /* 실제 값은 JS 가 슬라이더로 설정 */
.ov-main polygon.back{stroke:#7fd1ff; stroke-opacity:.5; stroke-width:1;
  vector-effect:non-scaling-stroke; stroke-dasharray:3 3;}
.ov-main polygon.back:hover{fill:#7fd1ff; fill-opacity:.2;}
#xrayCtl{gap:7px;}
#xrayCtl input[type=range]{width:96px; accent-color:var(--accent);}
#xrayVal{font-variant-numeric:tabular-nums; min-width:32px;}

/* ───────── 정보 카드 ───────── */
.info{
  position:absolute; right:10px; top:52px; width:292px; max-height:calc(100% - 66px); overflow:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
  z-index:15; padding:12px 13px 14px;
}
.info-close{
  position:absolute; right:6px; top:5px; width:28px; height:28px; border:0; background:transparent;
  font-size:20px; line-height:1; color:var(--fg2); cursor:pointer; border-radius:6px;
}
.info-close:hover{background:var(--line2);}
.info .iref{font-size:20px; font-weight:800; letter-spacing:.3px;}
.info .ival{font-size:26px; font-weight:800; color:var(--accent); word-break:break-all; line-height:1.2; margin:2px 0 6px;}
.info .ikind{
  display:inline-block; font-size:12px; padding:2px 8px; border-radius:11px;
  background:var(--accent-w); color:#0a5a96; margin-right:5px;
}
.info .iside{display:inline-block; font-size:12px; padding:2px 8px; border-radius:11px; background:#eef1f5; color:var(--fg2);}
.info dl{display:grid; grid-template-columns:62px 1fr; gap:3px 8px; margin:10px 0 0; font-size:13px;}
.info dt{color:var(--fg2);}
.info dd{margin:0; word-break:break-all;}
.info .sect{margin-top:11px; border-top:1px solid var(--line2); padding-top:9px;}
.info .sect h4{margin:0 0 6px; font-size:12px; color:var(--fg2); font-weight:600;}
.info,.info .sect,.info dd{overflow-wrap:break-word; word-break:break-all;}
.chips{display:flex; flex-wrap:wrap; gap:4px;}
.chip{
  border:1px solid var(--line); background:#fff; border-radius:13px; padding:2px 9px; font-size:12.5px;
  cursor:pointer; color:var(--fg);
}
.chip:hover{background:var(--accent-w); border-color:#9dc7e8;}
.chip.on{background:var(--sel); border-color:#c9a400; font-weight:700;}
.padlist{font-size:12px; color:var(--fg2); max-height:132px; overflow:auto;}
.padlist div{display:flex; gap:7px; padding:1px 0;}
.padlist .pn{flex:0 0 26px; color:var(--fg); font-weight:600;}
.padlist .pnet{color:var(--accent); word-break:break-all;}

/* ───────── 넷 보기 패널 ───────── */
.netpanel{
  position:absolute; right:10px; bottom:10px; width:250px; z-index:14;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
  overflow:hidden;
}
.np-head{
  width:100%; display:flex; align-items:center; gap:7px; padding:9px 11px; border:0; cursor:pointer;
  background:var(--panel); color:var(--fg); text-align:left;
}
.np-head:hover{background:var(--accent-w);}
.np-title{font-weight:700; font-size:14px;}
.np-cnt{font-size:12px; color:var(--fg2); flex:1 1 auto;}
.np-arrow{font-size:10px; color:var(--fg2); transform:rotate(180deg);}
.np-head[aria-expanded="true"] .np-arrow{transform:none;}
.np-body{border-top:1px solid var(--line2); padding:7px;}
.np-list{max-height:200px; overflow:auto;}
.np-item{display:flex; align-items:center; gap:7px; padding:4px 5px; border-radius:7px; cursor:pointer; font-size:13.5px;}
.np-item:hover{background:var(--accent-w);}
.np-item input{width:15px; height:15px; flex:0 0 auto;}
.np-sw{width:13px; height:13px; border-radius:4px; flex:0 0 auto; border:1px solid rgba(0,0,0,.25);}
.np-name{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600;}
.np-n{font-size:11.5px; color:var(--fg2); flex:0 0 auto;}
.np-foot{display:flex; align-items:center; gap:8px; padding:6px 3px 1px; border-top:1px solid var(--line2); margin-top:5px;}
.np-hint{font-size:11px; color:var(--fg2);}
.tbtn.sm{height:26px; padding:0 9px; font-size:12.5px;}
.netchip{
  border:1px solid var(--line); background:#fff; border-radius:11px; padding:1px 8px; font-size:11.5px;
  cursor:pointer; color:var(--fg2); margin-left:auto; flex:0 0 auto;
}
.netchip:hover{border-color:#9dc7e8; background:var(--accent-w);}
.netchip.on{background:#00e5ff; border-color:#00b8d4; color:#053; font-weight:700;}
.info .conn{font-size:12.5px; color:#0a7c8c; font-weight:600; margin-top:3px;}

/* ───────── 부품표 ───────── */
.tablewrap{flex:1 1 auto; min-height:0; overflow:auto; background:var(--panel);}
table.bom{border-collapse:collapse; width:100%; font-size:14px;}
table.bom th,table.bom td{border-bottom:1px solid var(--line2); padding:7px 9px; text-align:left; vertical-align:top;}
table.bom th{
  position:sticky; top:0; background:#eef2f6; z-index:2; font-size:12.5px; color:var(--fg2);
  border-bottom:1px solid var(--line); white-space:nowrap;
}
table.bom tbody tr{cursor:pointer;}
table.bom tbody tr:hover{background:var(--accent-w);}
table.bom tbody tr.on{background:#fff4c2;}
table.bom td.qty{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
table.bom td.val{font-weight:700;}
table.bom td.refs{color:var(--fg2); font-size:13px; word-break:break-all;}
table.bom td.ref1{font-weight:700; white-space:nowrap;}
table.bom .nores{padding:18px; color:var(--fg2);}

/* ───────── 다운로드 ───────── */
.dlwrap{overflow:auto; padding:14px 16px 26px; background:var(--panel); flex:1 1 auto;}
.h2{font-size:15px; margin:4px 0 9px; color:var(--fg2); font-weight:700;}
.dllist{display:flex; flex-direction:column; gap:8px; max-width:560px; margin-bottom:20px;}
.dl-item{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--line);
  border-radius:10px; background:#fff; text-decoration:none; color:var(--fg);
}
.dl-item:hover{background:var(--accent-w); border-color:#9dc7e8;}
.dl-item .ic{font-size:19px; flex:0 0 auto;}
.dl-item .tx{flex:1 1 auto; min-width:0;}
.dl-item .tx b{display:block; font-size:15px;}
.dl-item .tx span{font-size:12px; color:var(--fg2);}
table.meta{border-collapse:collapse; font-size:14px; max-width:720px; width:100%;}
table.meta th,table.meta td{border-bottom:1px solid var(--line2); padding:7px 9px; text-align:left; vertical-align:top;}
table.meta th{width:104px; color:var(--fg2); font-weight:600; white-space:nowrap;}

/* 부팅/오류 */
.boot{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:var(--bg); color:var(--fg2); z-index:100; font-size:15px; text-align:center; padding:20px;
}
.err{color:#b42318;}

/* ───────── 모바일 ───────── */
@media (max-width:768px){
  :root{--top-h:50px;}
  .icon-btn{display:block;}
  .brand-sub{display:none;}
  .brand-main{font-size:15px;}
  .cur{font-size:12.5px;}
  .search{position:static; width:auto; flex:0 0 auto;}
  .qbox{width:132px;}
  .drop{position:absolute; left:6px; right:6px; top:calc(var(--top-h) + 2px); width:auto; max-width:none;}
  .sidebar{
    position:absolute; left:0; top:0; bottom:0; width:82vw; max-width:310px;
    transform:translateX(-102%); transition:transform .22s ease; box-shadow:var(--shadow);
  }
  .sidebar.open{transform:translateX(0);}
  .scrim{display:block; position:absolute; inset:0; background:rgba(8,14,20,.45); z-index:19;}
  .tabs button{padding:10px 12px; font-size:15px;}
  .info{
    left:0; right:0; bottom:0; top:auto; width:auto; max-height:56%; border-radius:14px 14px 0 0;
    border-left:0; border-right:0; border-bottom:0;
    padding-bottom:calc(14px + env(safe-area-inset-bottom));
  }
  .info dl{grid-template-columns:58px 1fr;}
  .logo{height:22px;}
  .logo-chip{padding:2px 5px;}
  .boardbar{font-size:13px; padding:6px 10px;}
  .boardbar b{font-size:14px;}
  .netpanel{right:6px; left:6px; bottom:6px; width:auto; max-width:none;}
  .np-list{max-height:34vh;}
  body.netopen .info{display:none !important;}
  table.bom th,table.bom td{padding:8px 7px;}
  table.bom td.refs{font-size:12.5px;}
  .dlwrap{padding:12px;}
}

/* 아주 좁은 폰(375px 이하) */
@media (max-width:400px){
  .cur{display:none;}
  .qbox{width:120px;}
  .search{flex:1 1 auto;}
  .qbox{width:100%;}
}

/* 다크 모드 */
@media (prefers-color-scheme:dark){
  :root{
    --bg:#12151a; --panel:#1a1e24; --line:#2c333c; --line2:#242a31;
    --fg:#e8edf3; --fg2:#9aa6b2; --accent:#4aa8e8; --accent-w:#14293a;
    --shadow:0 2px 10px rgba(0,0,0,.45);
  }
  .side-filter,.tbtn,.seg button,.chip,.dl-item,.qbox:focus,.netchip{background:#20252c; color:var(--fg);}
  .netchip.on{color:#032; }
  .qbox:focus{color:#fff;}
  .board-list .th{background:#0b0d10;}
  table.bom th{background:#232a32;}
  table.bom tbody tr.on{background:#3b3413;}
  .viewport.light{background:#e9e9e4;}
  .vp-msg{background:rgba(26,30,36,.96); color:var(--fg);}
}