/* 어두운 관제실 톤. 게임 화면이지만 읽는 화면이기도 하므로
   대비와 여백을 수치 가독성에 맞춘다. */
:root{
  --bg:#070b14; --panel:#0d1524; --panel2:#111c30; --line:#1e2f4a;
  --ink:#dbe7f7; --dim:#8ba3c4; --dim2:#61789a;
  --acc:#4ea3ff; --good:#4ade80; --warn:#fbbf24; --bad:#f87171;
  --r:10px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:14px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans KR",sans-serif;
  display:flex; flex-direction:column; overflow:hidden;
}
button{font:inherit; color:inherit; cursor:pointer; border-radius:8px;
  border:1px solid var(--line); background:var(--panel2); padding:6px 10px}
button:hover{border-color:#33507d; background:#16253f}
button.on{background:#1d3459; border-color:#3d6ea8; color:#e8f2ff}
button.ghost{background:transparent; color:var(--dim)}
button.primary{background:#1f4d8a; border-color:#3d7ec4; color:#eaf4ff; padding:8px 16px}
button:disabled{opacity:.4; cursor:not-allowed}

.hud{display:flex; align-items:center; gap:16px; padding:8px 14px;
  background:linear-gradient(180deg,#0f1930,#0a1122); border-bottom:1px solid var(--line); flex:0 0 auto}
.brand{font-weight:700; letter-spacing:.09em; font-size:12.5px; color:#9dc4f0; display:flex; align-items:center; gap:8px}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--good);box-shadow:0 0 10px var(--good)}
.stats{display:flex; gap:14px; flex-wrap:wrap; flex:1; min-width:0}
.stat{display:flex; flex-direction:column; line-height:1.25}
.stat b{font-size:14px; font-variant-numeric:tabular-nums}
.stat span{font-size:10.5px; color:var(--dim2); letter-spacing:.03em}
.speed{display:flex; gap:5px; flex:0 0 auto}

main{flex:1; display:grid; grid-template-columns:270px 1fr 300px; min-height:0}
.panel{background:var(--panel); border-inline:1px solid var(--line); display:flex; flex-direction:column; min-height:0}
.tabs{display:flex; gap:4px; padding:8px; border-bottom:1px solid var(--line); flex:0 0 auto}
.tabs button{flex:1; padding:5px 4px; font-size:12.5px}
.tabbody{overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:8px; min-height:0}
.tabbody.hide{display:none}

.item{background:var(--panel2); border:1px solid var(--line); border-radius:var(--r); padding:9px 10px}
.item:hover{border-color:#31527f}
.item.sel{border-color:var(--acc); background:#16294a; box-shadow:0 0 0 1px rgba(78,163,255,.3)}
.item h4{margin:0 0 3px; font-size:13px; display:flex; justify-content:space-between; gap:8px; align-items:baseline}
.item .price{color:var(--warn); font-size:11.5px; font-variant-numeric:tabular-nums; white-space:nowrap}
.item p{margin:3px 0 0; font-size:11.5px; color:var(--dim); line-height:1.45}
.item .spec{margin-top:5px; font-size:11px; color:var(--acc); font-variant-numeric:tabular-nums}
.item .row{display:flex; gap:6px; margin-top:7px}
.item .row button{flex:1; padding:4px; font-size:11.5px}
.swatch{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:6px;vertical-align:middle}

.stage{position:relative; min-width:0; overflow:hidden}
#cv{display:block; width:100%; height:100%}
.floorbar{position:absolute; left:12px; top:12px; display:flex; flex-direction:column; gap:5px}
.floorbar button{width:52px; text-align:center; font-size:12px; backdrop-filter:blur(6px); background:rgba(15,25,45,.8)}
.hint{position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  background:rgba(10,17,32,.9); border:1px solid var(--line); border-radius:20px;
  padding:6px 15px; font-size:12px; color:var(--dim); pointer-events:none; max-width:80%;
  opacity:0; transition:opacity .2s}
.hint.show{opacity:1}

.modal{position:fixed; inset:0; background:rgba(4,8,16,.82); display:grid; place-items:center; z-index:50; padding:20px}
.modal.hide{display:none}
.card{background:linear-gradient(180deg,#101c31,#0b1424); border:1px solid #2b4870;
  border-radius:14px; padding:22px; max-width:540px; width:100%; box-shadow:0 24px 70px rgba(0,0,0,.65)}
.card h2{margin:0 0 8px; font-size:18px}
.card p{margin:0 0 16px; color:var(--dim); line-height:1.65}
.opt{width:100%; text-align:left; margin-bottom:8px; padding:10px 12px; background:var(--panel2)}
.opt b{display:block; font-size:13px}
.opt small{color:var(--dim2); font-size:11.5px; line-height:1.45; display:block; margin-top:3px}
.opt .cost{color:var(--warn); font-size:11.5px}

.logline{font-size:11.5px; line-height:1.5; padding:5px 8px; border-radius:7px; background:rgba(255,255,255,.02)}
.logline .t{color:var(--dim2); margin-right:6px; font-variant-numeric:tabular-nums}
.good{color:var(--good)} .warn{color:var(--warn)} .bad{color:var(--bad)} .info{color:var(--dim)}
.empty{color:var(--dim2); font-size:12px; text-align:center; padding:26px 10px; line-height:1.6}
.bar{height:4px; background:#0a1220; border-radius:3px; overflow:hidden; margin-top:6px}
.bar i{display:block; height:100%; background:var(--acc)}
.sla{font-size:11px; font-variant-numeric:tabular-nums}

@media (max-width:1180px){
  main{grid-template-columns:230px 1fr 260px}
}
@media (max-width:900px){
  main{grid-template-columns:1fr; grid-template-rows:auto 1fr auto}
  .panel{border:none; border-top:1px solid var(--line); max-height:210px}
  .panel.left{order:2} .stage{order:1} .panel.right{order:3}
}

/* 손익표 — 숫자를 읽는 화면이라 정렬이 곧 가독성이다 */
.pnlrow { display:flex; justify-content:space-between; align-items:baseline;
          padding:4px 0; font-size:12px; border-bottom:1px solid var(--line); }
.pnlrow span { color:var(--dim); }
.pnlrow b { font-variant-numeric:tabular-nums; letter-spacing:-.2px; }
.pnlrow.tot { border-bottom:none; margin-top:4px; padding-top:7px;
              border-top:1px solid var(--dim2); font-size:13px; }
.pnlrow.tot span { color:var(--ink); }
.pnlnote { font-size:11px; color:var(--dim2); margin:-1px 0 4px; line-height:1.45; }

/* 살 수 없는 항목은 살 수 없어 보여야 한다 — 눌러 보고 나서 알게 하지 않는다 */
.item.poor { opacity:.55 }
.item.poor .price { color:var(--bad) }