/* ★ BSP 현장 도면 v2 — 태블릿(가로 · 세로) 우선. 어두운 바탕 · 민트 포인트 · 장갑 손가락을 생각한 큰 누름 자리 · 글꼴 Pretendard(없으면 맑은 고딕). */
:root {
  --bg:#0b1016; --panel:#141b25; --panel2:#1a2230; --panel3:#202a3a; --line:#1f2a3a; --line2:#2b394d; --text:#e7edf5; --muted:#8b9ab0; --dim:#5d6b80;
  --accent:#2bd4ad; --accent2:#5ac8fa; --warn:#f2c14e; --bad:#ff7a7a;
  --c0:#2b3647; --c1:#2a6fb0; --c2:#2f86c7; --c3:#2bbf9f; --c4:#1f9e83; --c5:#17876f; --s1:#b8902f; --s2:#d4a53a; --s3:#e0a63a; --s4:#f2c14e;
  --r:14px; --shadow:0 10px 30px rgba(0,0,0,.35); --font:"Pretendard Variable", Pretendard, "Malgun Gothic", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--text); font:16px/1.45 var(--font); overflow:hidden; letter-spacing:-.01em; }
h1, h2, h3 { letter-spacing:-.02em; }
button { font:inherit; color:var(--text); background:var(--panel2); border:1px solid var(--line2); border-radius:12px; padding:10px 16px; min-height:46px; cursor:pointer; transition:background .12s, border-color .12s, transform .06s; }
button:active { transform:scale(.98); }
button:disabled { opacity:.4; cursor:default; transform:none; }
button.primary { background:linear-gradient(180deg,#2fd9b2,#1ea88a); border-color:#45e2c0; color:#05231b; font-weight:700; box-shadow:0 6px 18px rgba(43,212,173,.22); }
button.ghost { background:transparent; }
button.danger { background:#3a1a1a; border-color:#7a3a3a; color:#ffb3b3; font-weight:700; }
button.on { background:rgba(43,212,173,.16); border-color:var(--accent); }
button.big { min-height:56px; font-size:17px; padding:12px 22px; }
button.small { min-height:38px; padding:6px 12px; font-size:14px; }
button.link { background:none; border:0; color:var(--accent2); min-height:40px; }
input, select, textarea { font:inherit; color:var(--text); background:#0c1219; border:1px solid var(--line2); border-radius:12px; padding:10px 14px; min-height:46px; outline:none; }
input:focus, select:focus { border-color:var(--accent2); box-shadow:0 0 0 3px rgba(90,200,250,.15); }
input::placeholder { color:var(--dim); }
.hide { display:none !important; } .mut { color:var(--muted); } .sp { flex:1; } .small { font-size:13px; } .center { text-align:center; } .full { flex-basis:100%; }
.label { padding:3px 11px; border-radius:9px; background:#163449; color:#a9dcff; font-weight:800; font-size:14px; white-space:nowrap; letter-spacing:0; }
.label.c { background:#3a2a10; color:#ffd48a; } .label.work { background:#222c38; color:#b7c4d3; }
.chip { padding:2px 10px; border-radius:999px; border:1px solid var(--line2); font-size:13px; color:#c4d1e0; white-space:nowrap; }
.chip.new { border-color:var(--accent2); color:#a9dcff; font-weight:700; } .chip.amber { border-color:#8a6d2f; color:#ffd48a; } .chip.ok { border-color:#1f9e83; color:#7fe0c7; }
.n { display:inline-block; min-width:22px; padding:0 7px; border-radius:11px; background:var(--panel3); color:var(--muted); font-size:12px; text-align:center; margin-left:4px; }
.empty { padding:26px 16px; text-align:center; color:var(--muted); border:1px dashed var(--line2); border-radius:var(--r); margin:10px 0; }
.warn { border:1px solid rgba(242,193,78,.45); background:rgba(242,193,78,.1); color:#ffd48a; border-radius:12px; padding:10px 14px; margin-bottom:10px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* 머리 */
#top { height:60px; display:flex; align-items:center; gap:12px; padding:0 14px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#121a26,#0e141c); position:relative; z-index:5; }
.brand { display:flex; align-items:center; gap:12px; background:none; border:0; padding:4px 6px; min-height:0; text-align:left; }
.brand .mark { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,#22b894,#2a6fb0); font-size:18px; box-shadow:0 6px 16px rgba(0,0,0,.4); }
.brand h1 { margin:0; font-size:17px; font-weight:700; } .brand small { display:block; color:var(--muted); font-size:12px; margin-top:-2px; max-width:46vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.net { width:10px; height:10px; border-radius:50%; background:#5d6b80; font-size:0; box-shadow:0 0 0 4px rgba(255,255,255,.04); } .net.ok { background:var(--accent); box-shadow:0 0 0 4px rgba(43,212,173,.18); } .net.bad { background:var(--bad); }
#main { position:absolute; top:60px; bottom:0; left:0; right:0; overflow:auto; -webkit-overflow-scrolling:touch; background:radial-gradient(1200px 500px at 20% -10%, rgba(42,111,176,.12), transparent 60%), var(--bg); }
.view { padding:16px; min-height:100%; }

/* 로그인 · 가입 · 대기 · PIN */
.login { max-width:640px; margin:36px auto; background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:26px 28px; box-shadow:var(--shadow); }
.login .lhead { display:flex; gap:14px; align-items:center; margin-bottom:18px; } .login .lhead h2 { margin:0; font-size:22px; } .login .lhead p { margin:4px 0 0; }
.mark.big { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background:linear-gradient(135deg,#22b894,#2a6fb0); font-size:24px; flex:none; box-shadow:0 8px 20px rgba(0,0,0,.4); }
.fld { display:grid; gap:6px; margin-bottom:12px; } .fld > span { font-size:13px; color:var(--muted); } .fld > span i { color:var(--bad); font-style:normal; } .fld > span em { color:var(--accent2); font-style:normal; margin-left:6px; }
.fld input { width:100%; min-width:0; font-size:19px; min-height:54px; }
.pinput { letter-spacing:.5em; font-size:24px !important; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; } .grid2 .full { grid-column:1 / -1; }
button.wide { width:100%; min-height:56px; font-size:18px; margin-top:4px; }
button.round { width:46px; min-height:46px; padding:0; border-radius:50%; font-size:24px; flex:none; }
.msg { min-height:22px; margin:10px 2px 0; color:var(--bad); font-weight:600; } .msg.info { color:var(--accent2); }
.or { display:flex; align-items:center; gap:10px; color:var(--dim); font-size:13px; margin:18px 0 8px; } .or::before, .or::after { content:""; flex:1; height:1px; background:var(--line); }
.consent { display:flex; gap:12px; align-items:flex-start; background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:4px 0 14px; cursor:pointer; }
.consent input { width:26px; height:26px; min-height:0; margin-top:1px; accent-color:var(--accent); flex:none; }
.consent small { display:block; color:var(--muted); font-size:12.5px; line-height:1.6; margin-top:6px; }
.login.center { text-align:center; } .login.center h2 { margin:14px 0 6px; }
.kvcard { text-align:left; background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:6px 14px; margin:16px 0; }
.kvcard .kv { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--line); } .kvcard .kv:first-child { border-top:0; } .kvcard .kv span { color:var(--muted); }
.pulse { width:64px; height:64px; margin:6px auto 0; border-radius:50%; background:radial-gradient(circle, rgba(90,200,250,.9) 0 28%, rgba(90,200,250,.25) 30% 60%, transparent 62%); animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform:scale(.9); opacity:.8; } 50% { transform:scale(1.06); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .pulse { animation:none; } }
.okmark, .nomark { width:64px; height:64px; margin:6px auto 0; border-radius:50%; display:grid; place-items:center; font-size:32px; font-weight:900; }
.okmark { background:var(--accent); color:#05231b; box-shadow:0 0 0 8px rgba(43,212,173,.15); } .nomark { background:#5a2a2a; color:#ffb3b3; } .nomark::before { content:"!"; }
.pin { display:flex; justify-content:center; gap:10px; margin:22px 0 18px; }
.pin span { width:54px; height:68px; border-radius:12px; display:grid; place-items:center; font-size:36px; font-weight:800; background:#0c1219; border:1px solid var(--line2); color:#7fe0c7; font-variant-numeric:tabular-nums; }

/* 검색 — 가운데 큰 창 하나(위쪽에 두어 화면 키보드가 결과를 가리지 않게) */
.home { max-width:880px; margin:0 auto; padding-top:min(7vh, 56px); }
.hello { text-align:center; color:var(--muted); margin-bottom:14px; font-size:15px; }
.zones { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:14px; }
.zchip { border-radius:999px; min-height:44px; padding:6px 16px; background:var(--panel); font-weight:600; }
.zchip span { margin-left:8px; color:var(--muted); font-weight:500; font-size:13px; }
.zchip.on { background:rgba(90,200,250,.14); border-color:var(--accent2); color:#d8f1ff; } .zchip.on span { color:#a9dcff; }
.searchbox { position:relative; display:flex; align-items:center; background:#0c1219; border:2px solid var(--line2); border-radius:20px; box-shadow:0 14px 40px rgba(0,0,0,.4); transition:border-color .15s, box-shadow .15s; }
.searchbox:focus-within { border-color:var(--accent); box-shadow:0 0 0 5px rgba(43,212,173,.14), 0 14px 40px rgba(0,0,0,.4); }
.searchbox .ico { font-size:30px; color:var(--muted); padding:0 4px 0 20px; line-height:1; }
.searchbox input { flex:1; min-width:0; border:0; background:transparent; box-shadow:none; font-size:26px; font-weight:600; min-height:76px; padding:10px 14px; letter-spacing:.01em; }
.searchbox input:focus { box-shadow:none; }
.searchbox input::-webkit-search-cancel-button { display:none; }
.searchbox .clear { background:var(--panel3); border:0; border-radius:50%; width:44px; min-height:44px; padding:0; margin-right:14px; color:var(--muted); }
.qinfo { min-height:22px; margin:8px 6px 4px; color:var(--muted); font-size:14px; text-align:right; }
.results { display:grid; gap:10px; padding-bottom:20px; }
.rhead { margin:10px 4px 0; color:var(--muted); font-size:13px; font-weight:600; letter-spacing:.02em; }
.hit { display:grid; gap:6px; text-align:left; background:linear-gradient(180deg, var(--panel), #121923); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; min-height:0; box-shadow:0 4px 14px rgba(0,0,0,.2); }
.hit:active { background:var(--panel2); } .hit.new { border-color:rgba(90,200,250,.6); }
.hit .ln { font-size:21px; font-weight:700; letter-spacing:.01em; word-break:break-all; font-variant-numeric:tabular-nums; }
.hit .ln mark { background:rgba(43,212,173,.28); color:#eafff8; border-radius:5px; padding:0 2px; }
.hit .sub { display:flex; gap:8px; flex-wrap:wrap; align-items:center; font-size:14px; }
.prog { display:flex; gap:4px; } .prog i { height:6px; flex:1; border-radius:3px; background:var(--c0); } .prog i.on { background:var(--accent); } .prog i.site.on { background:var(--warn); }
.homefoot { display:flex; justify-content:center; gap:18px; margin:6px 0 30px; }

/* 도면 + 공정 */
body[data-view="doc"] #main { overflow:hidden; }
#vDoc { display:flex; flex-direction:column; height:100%; min-height:0; padding:12px 14px; }
.dochead { display:flex; align-items:center; gap:10px; margin-bottom:10px; flex:none; }
.dochead .t { flex:1; min-width:0; } .dochead h2 { margin:0; font-size:21px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dochead .mut { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.split { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(360px, 1fr); gap:12px; }
.pane { min-height:0; display:flex; flex-direction:column; }
.pdfbar { display:flex; align-items:center; gap:6px; margin-bottom:8px; flex-wrap:wrap; flex:none; }
.pdfbar button { min-height:42px; padding:6px 12px; }
.pdfwrap { position:relative; flex:1; min-height:240px; overflow:auto; background:#e3e8ee; border-radius:var(--r); border:1px solid var(--line2); }
.pdfwrap canvas { display:block; }
.pdfwrap .ink { position:absolute; left:0; top:0; touch-action:none; }
.pdfmsg { position:absolute; left:0; right:0; top:42%; text-align:center; color:#56637a; font-size:17px; padding:0 20px; }
.pdfwrap.superseded::after { content:"폐기 — 새 판이 있습니다"; position:absolute; left:50%; top:45%; transform:translate(-50%,-50%) rotate(-18deg); font-size:40px; font-weight:900; color:rgba(200,30,30,.38); border:6px solid rgba(200,30,30,.38); padding:10px 26px; border-radius:12px; pointer-events:none; white-space:nowrap; }
.markbar { display:flex; gap:8px; align-items:center; margin-top:8px; flex-wrap:wrap; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px; flex:none; } .markbar input { flex:1 1 200px; min-width:0; }
.workpane { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.phaseseg { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:6px; background:#10161f; border-bottom:1px solid var(--line); flex:none; }
.phaseseg button { border:0; background:transparent; color:var(--muted); min-height:46px; border-radius:10px; font-weight:700; }
.phaseseg button.on { background:var(--panel3); color:var(--text); box-shadow:inset 0 0 0 1px var(--line2); }
.work { flex:1; min-height:0; overflow:auto; padding:12px; -webkit-overflow-scrolling:touch; }

/* 공정 카드 */
.stage { background:var(--panel2); border:1px solid var(--line); border-radius:var(--r); padding:14px; margin-bottom:12px; }
.stage.done { border-color:rgba(43,212,173,.45); } .stage.locked { opacity:.5; }
.stage .sh { display:flex; align-items:center; gap:12px; }
.stage .no { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--panel3); border:1px solid var(--line2); font-weight:800; flex:none; }
.stage.done .no { background:var(--accent); color:#05231b; border-color:var(--accent); }
.stage.site .no { background:#3a2a10; color:#ffd48a; border-color:#8a6d2f; } .stage.site.done .no { background:var(--warn); color:#2a1d05; border-color:var(--warn); }
.stage .tt { flex:1; min-width:0; } .stage h3 { margin:0; font-size:17px; } .stage .hint { color:var(--muted); font-size:13px; }
.stage .st { text-align:right; font-size:12px; color:var(--muted); white-space:nowrap; } .stage .st b { color:#7fe0c7; display:block; font-size:13px; } .stage .st small { display:block; }
.items { margin-top:12px; display:grid; gap:8px; }
.item { display:flex; gap:8px; align-items:stretch; }
.itap { flex:1; display:flex; align-items:center; gap:14px; text-align:left; background:#121a25; border:1px solid var(--line); border-radius:12px; padding:10px 14px; min-height:60px; }
.item.on .itap { border-color:rgba(43,212,173,.45); background:rgba(43,212,173,.07); } .item.miss .itap { border-color:rgba(255,122,122,.45); background:rgba(255,122,122,.06); }
.itap .cb { width:34px; height:34px; border-radius:10px; border:2px solid var(--line2); display:grid; place-items:center; font-size:20px; font-weight:900; flex:none; }
.item.on .cb { background:var(--accent); border-color:var(--accent); color:#05231b; } .item.miss .cb { background:#5a2a2a; border-color:var(--bad); color:#ffb3b3; }
.itap .nm { min-width:0; } .itap .nm b { font-size:17px; display:block; } .itap .nm small { color:var(--muted); display:block; font-size:13px; }
.stage.done .itap:disabled { opacity:1; } .stage.done .itap .nm b { color:#cfe9e1; }
.missbtn { flex:none; min-width:72px; color:#ffb3b3; border-color:#5a2a2a; background:transparent; }
.missbtn.on { background:#3a1a1a; border-color:var(--bad); }
.pchips { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:2px; }
.pchip { min-height:38px; padding:4px 12px; border-radius:999px; font-size:14px; background:transparent; }
.pchip.on { background:rgba(90,200,250,.14); border-color:var(--accent2); color:#d8f1ff; }
.actions { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; align-items:center; }
.actions .big { flex:1 1 180px; }

/* 도면 확정 관문 */
.gate { display:flex; align-items:center; gap:14px; padding:14px 16px; margin:0 0 12px; border-radius:var(--r); border:2px dashed var(--line2); background:#121925; }
.gate .gicon { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:20px; background:var(--panel3); color:var(--muted); flex:none; }
.gate .stack { flex:1; min-width:0; } .gate .stack b { font-size:18px; display:block; } .gate .stack small { color:var(--muted); display:block; font-size:13px; }
.gate.ready { border-style:solid; border-color:var(--accent2); background:rgba(90,200,250,.07); } .gate.ready .gicon { background:rgba(90,200,250,.18); color:#a9dcff; }
.gate.done { border-style:solid; border-color:rgba(43,212,173,.55); background:rgba(43,212,173,.08); } .gate.done .gicon { background:var(--accent); color:#05231b; font-weight:900; }
.gate button.big { flex:none; }

/* 화면 위 시트 — 3D · 이력 */
.sheet { position:fixed; left:0; right:0; top:60px; bottom:0; z-index:40; background:rgba(11,16,22,.97); padding:12px 14px; display:flex; flex-direction:column; backdrop-filter:blur(4px); }
.sheethead { display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; } .sheethead b { font-size:18px; }
.spoolchips { display:flex; gap:6px; flex-wrap:wrap; }
.chip3d { --c:#8b9ab0; padding:6px 14px; min-height:40px; border-radius:999px; border:1px solid color-mix(in srgb, var(--c) 55%, transparent); background:color-mix(in srgb, var(--c) 10%, var(--panel2)); font-weight:700; }
.chip3d::before { content:""; display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--c); margin-right:8px; }
.chip3d.on { background:color-mix(in srgb, var(--c) 28%, var(--panel2)); border-color:var(--c); }
.view3d { position:relative; flex:1; min-height:260px; border-radius:var(--r); overflow:hidden; border:1px solid var(--line2); background:#0f141b; touch-action:none; }
.view3d canvas { display:block; width:100% !important; height:100% !important; }
.panel3d { margin-top:10px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; display:grid; gap:8px; }
.panel3d .ph { display:flex; align-items:baseline; gap:10px; } .panel3d .ph b { font-size:17px; }
.hist { flex:1; overflow:auto; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:6px 16px; }
.hist .e { display:grid; grid-template-columns:120px 1fr; gap:12px; padding:12px 0; border-top:1px solid var(--line); }
.hist .e:first-child { border-top:0; } .hist .e .tm { color:var(--muted); font-size:13px; white-space:pre-line; } .hist .e .k { font-weight:700; margin-right:8px; color:#a9dcff; }
.hist .e img { max-width:100%; border-radius:10px; border:1px solid var(--line2); margin-top:8px; }

/* 구역 현황판 */
.boardhead { display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; } .boardhead h2 { margin:0; font-size:22px; }
.zsec h3 { margin:16px 4px 8px; font-size:16px; color:#cfe3f5; }
.board { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px; }
.cell { --k:var(--c0); text-align:left; border-radius:var(--r); padding:12px 14px; border:1px solid var(--line); background:linear-gradient(135deg, color-mix(in srgb, var(--k) 26%, var(--panel)), var(--panel)); display:grid; gap:6px; min-height:0; }
.cell b { font-size:18px; } .cell .ln { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cell .bars { display:flex; gap:3px; } .cell .bars i { height:8px; flex:1; border-radius:3px; background:var(--c0); }
.cell .stg { font-size:13px; }
.legend { display:flex; gap:14px; flex-wrap:wrap; margin:16px 0 24px; color:var(--muted); font-size:13px; } .legend i { display:inline-block; width:14px; height:14px; border-radius:4px; vertical-align:-2px; margin-right:5px; }

/* 알림 · 창 */
.toast { position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(120px); background:#162030; border:1px solid rgba(90,200,250,.5); color:var(--text); padding:13px 20px; border-radius:14px; box-shadow:0 14px 40px rgba(0,0,0,.55); transition:transform .25s; z-index:80; max-width:92vw; font-weight:600; }
.toast.on { transform:translateX(-50%) translateY(0); }
.modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(5,9,14,.72); z-index:90; backdrop-filter:blur(3px); }
.modal.on { display:flex; } .modal .box { width:min(600px, 94vw); max-height:90vh; overflow:auto; background:var(--panel); border:1px solid var(--line2); border-radius:18px; padding:22px 24px; box-shadow:var(--shadow); }
.modal h3 { margin:0 0 12px; font-size:19px; } #mBody { white-space:pre-line; color:#d3dce7; } .modal .row3 { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; } .modal .row3 button { min-width:110px; }

/* 세로 화면 · 좁은 화면 — PDF 위, 공정 아래 */
@media (max-width:1000px), (orientation:portrait) {
  body[data-view="doc"] #main { overflow:auto; }
  #vDoc { height:auto; }
  .split { display:flex; flex-direction:column; }
  .pdfpane { height:48vh; min-height:300px; }
  .workpane { overflow:visible; } .work { overflow:visible; }
}
@media (max-width:700px) {
  .grid2 { grid-template-columns:1fr; } .pin span { width:44px; height:58px; font-size:30px; }
  .login { margin:16px auto; padding:20px 18px; } .view { padding:12px; }
  .searchbox input { font-size:21px; min-height:64px; } .hit .ln { font-size:18px; }
  .dochead h2 { font-size:17px; } .hist .e { grid-template-columns:1fr; gap:4px; }
}