/* 집법전 — 게임과 같은 결로 (먹보라 바탕 · 눌러 둔 보랏빛 겹테).
   ⚠ 게임의 `client/style.css` 를 들여오지 않는다 — 저쪽은 판(.app)을 전제로 짜여 있어
     여기서는 안 맞는다. **빛깔만** 같은 값으로 옮겨 적는다 */
:root{
  --ink:#110f13; --panel:#1a1620; --line:#2d2833;
  --fg:#ece5dc; --fg-mid:#8f94ae; --fg-faint:#62667f;
  --og:#6b5d8c; --og-hi:#9b8fbb; --og-lo:#2e2744;
  --ok:#6fcf97; --warn:#e8b45f; --danger:#e8695f;
  --sans:"Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--fg);font-family:var(--sans);
  font-size:14px;line-height:1.6;-webkit-text-size-adjust:100%}
.wrap{max-width:1100px;margin:0 auto;padding:20px 16px 64px}

.top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:4px 0 18px;border-bottom:1px solid var(--line);margin-bottom:20px}
.top h1{margin:0;font-size:18px;letter-spacing:.14em;color:var(--og-hi)}
.me{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--fg-mid)}

/* 겹테 — 게임의 `.ornate` 와 같은 길이다. 꺾쇠는 배경 층이라 굴러도 안 밀린다 */
.card{position:relative;border:3px solid transparent;border-radius:4px;padding:18px 18px 20px;
  margin:0 0 16px;
  --ct:1px; --cl:9px; --ci:6px;
  background:
    linear-gradient(var(--og-hi),var(--og-hi)) left  var(--ci) top    var(--ci)/var(--cl) var(--ct) no-repeat padding-box,
    linear-gradient(var(--og-hi),var(--og-hi)) left  var(--ci) top    var(--ci)/var(--ct) var(--cl) no-repeat padding-box,
    linear-gradient(var(--og-hi),var(--og-hi)) right var(--ci) top    var(--ci)/var(--cl) var(--ct) no-repeat padding-box,
    linear-gradient(var(--og-hi),var(--og-hi)) right var(--ci) top    var(--ci)/var(--ct) var(--cl) no-repeat padding-box,
    linear-gradient(var(--og-hi),var(--og-hi)) left  var(--ci) bottom var(--ci)/var(--cl) var(--ct) no-repeat padding-box,
    linear-gradient(var(--og-hi),var(--og-hi)) left  var(--ci) bottom var(--ci)/var(--ct) var(--cl) no-repeat padding-box,
    linear-gradient(var(--og-hi),var(--og-hi)) right var(--ci) bottom var(--ci)/var(--cl) var(--ct) no-repeat padding-box,
    linear-gradient(var(--og-hi),var(--og-hi)) right var(--ci) bottom var(--ci)/var(--ct) var(--cl) no-repeat padding-box,
    radial-gradient(120% 150% at 50% 0%,#1d1927f5,#0e0c13f8 72%) padding-box,
    linear-gradient(180deg,var(--og-hi),var(--og) 38%,var(--og-lo)) border-box;
  box-shadow:inset 0 0 0 1px #000c,inset 0 1px 0 #ffffff0d,0 0 0 1px #0b0910,0 8px 30px #000b}
.card h2{margin:0 0 12px;font-size:14px;letter-spacing:.08em;color:var(--og-hi)}
.card h2 .sub{font-size:11.5px;letter-spacing:0;color:var(--fg-faint)}

.gate{text-align:center;padding:40px 18px}
.lead{margin:0 0 18px;color:var(--fg-mid)}

.btn{font:inherit;cursor:pointer;padding:10px 18px;border-radius:3px;
  border:1px solid var(--line);background:#231f2b;color:var(--fg);transition:border-color .15s}
.btn:hover{border-color:var(--og)}
.btn.pri{border-color:var(--og);background:linear-gradient(180deg,#2b2440,#1e1930)}
.btn.ghost{padding:6px 12px;font-size:12px}

.row{display:flex;gap:8px}
.row input{flex:1;min-width:0;font:inherit;padding:10px 12px;border-radius:3px;
  border:1px solid var(--line);background:#15121b;color:var(--fg)}
.row input:focus{outline:none;border-color:var(--og)}

.why{margin:12px 0 0;min-height:1.2em;font-size:12.5px;color:var(--warn)}
.warn{margin:0 0 12px;font-size:12px;color:var(--fg-faint)}

/* 사람 — 이름과 값을 두 칸으로 */
.kv{display:grid;grid-template-columns:120px 1fr;gap:6px 14px;margin:0;font-size:13px}
.kv dt{color:var(--fg-faint)}
.kv dd{margin:0;word-break:break-all}

/* 전표 */
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:12.5px}
td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
td.why{color:var(--fg-mid);word-break:break-all}
td.none{text-align:center;color:var(--fg-faint);padding:18px}

@media (max-width:520px){
  .kv{grid-template-columns:92px 1fr}
  .wrap{padding:16px 12px 48px}
}

/* ── 왼쪽 목록 틀 (기획서 §3.0) ─────────────────────────
   ⚠ 집법전은 **책상에서 쓰는 것**이다. 좁은 화면을 먼저 생각하지 않는다 —
     다만 좁아져도 깨지지는 않게 목록이 위로 눕는다 */
.hall{display:grid;grid-template-columns:184px 1fr;gap:20px;align-items:start}

.nav{position:sticky;top:20px;display:flex;flex-direction:column;gap:2px;
  padding:10px;border:1px solid var(--line);border-radius:4px;background:#15121b}
.navlab{margin:10px 6px 4px;font-size:11px;letter-spacing:.08em;color:var(--fg-faint)}
.navlab:first-child{margin-top:2px}
/* ⚠⚠ 되돌릴 수 없는 것은 선 아래에 따로 선다 — 자주 쓰는 것 옆에 두면 잘못 누른다 */
.navlab-warn{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);color:var(--warn)}

.nv{font:inherit;text-align:left;cursor:pointer;padding:8px 10px;border-radius:3px;
  border:1px solid transparent;background:none;color:var(--fg-mid);
  transition:color .12s,background .12s,border-color .12s}
.nv:hover{color:var(--fg);background:#1f1b28}
.nv.on{color:var(--fg);background:#241f33;border-color:var(--og)}
.nv-danger{color:#b2867f}
.nv-danger:hover{color:var(--danger);background:#271a1a}
.nv-danger.on{color:var(--danger);background:#2b1c1c;border-color:var(--danger)}

.pane{min-width:0}
.pane .card:last-child{margin-bottom:0}

@media (max-width:760px){
  .hall{grid-template-columns:1fr}
  .nav{position:static;flex-direction:row;flex-wrap:wrap;gap:4px}
  .navlab{width:100%;margin:4px 2px 0}
  .navlab-warn{margin-top:8px;padding-top:8px}
}

/* ── 지급 (기획서 §3.7 · §3.8) ───────────────────────── */
.row.mt{margin-top:8px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:4px}
.row3 label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--fg-faint)}
.row3 input{font:inherit;padding:9px 11px;border-radius:3px;
  border:1px solid var(--line);background:#15121b;color:var(--fg)}
.row3 input:focus{outline:none;border-color:var(--og)}
.narrow{flex:0 0 72px;text-align:center}

/* 찾은 연 — 열둘까지만 선다 */
.hits{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.hits:empty{margin:0}
.hit{display:block;width:100%;text-align:left;font:inherit;cursor:pointer;
  padding:7px 10px;border-radius:3px;border:1px solid transparent;
  background:#15121b;color:var(--fg-mid)}
.hit:hover{color:var(--fg);border-color:var(--og);background:#1f1b28}

/* 고른 연 */
.picked{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.picked:empty{margin:0}
.picked li{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:3px;
  border:1px solid var(--line);background:#19151f}
.picked .nm{flex:1;min-width:0;font-size:12.5px;word-break:break-all}
.picked .cnt{color:var(--og-hi);font-variant-numeric:tabular-nums;white-space:nowrap}

@media (max-width:520px){ .row3{grid-template-columns:1fr} }

/* ── 서버 점검 (기획서 §3.1) ─────────────────────────── */
.ta{display:block;width:100%;font:inherit;padding:10px 12px;border-radius:3px;resize:vertical;
  border:1px solid var(--line);background:#15121b;color:var(--fg)}
.ta:focus{outline:none;border-color:var(--og)}
.ta.mt{margin-top:8px}
.row3.mt{margin-top:10px}
.mt2{margin-top:10px}
/* ⚠ 되돌리기 어려운 단추는 **눈에 다르게** 선다. 지급 단추와 같은 빛이면 손이 같은 결로 간다 */
.btn.danger{border-color:var(--danger);background:linear-gradient(180deg,#3a1f1f,#2a1717);color:#f0b9b3}
.btn.danger:hover{border-color:#ff8b80}