:root{
  --bg:#0f1116;--panel:#171a21;--panel2:#1d212b;--line:#2a2f3a;
  --txt:#e8eaed;--muted:#9aa3b2;--accent:#5b8cff;
  --product:#2563eb;--rd:#059669;--rx:#ea580c;--bsp:#0d9488;
  --operation:#7c3aed;--business:#db2777;--exec:#b45309;--empty:#262b36;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  background:var(--bg);color:var(--txt);line-height:1.4;-webkit-font-smoothing:antialiased}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 22px;
  border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:20;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:12px}
.brand h1{font-size:18px;font-weight:700;letter-spacing:.5px}
.brand .sub{font-size:12px;color:var(--muted)}
.floor-toggle{display:flex;gap:6px;background:var(--panel2);padding:4px;border-radius:10px}
.floor-toggle button{border:none;background:transparent;color:var(--muted);font-weight:600;font-size:14px;
  padding:8px 20px;border-radius:7px;cursor:pointer;transition:.15s}
.floor-toggle button.active{background:var(--accent);color:#fff}
.srcwrap{display:flex;align-items:center;gap:10px}
.src{font-size:11px;color:var(--muted);text-align:right}
.src b{color:#f0b429}
.refresh{border:1px solid var(--line);background:var(--panel2);color:var(--txt);border-radius:8px;
  padding:7px 12px;font-size:12px;cursor:pointer}
.refresh:hover{border-color:var(--accent)}
.layout{display:grid;grid-template-columns:300px 1fr;gap:0;align-items:start}
@media(max-width:860px){.layout{grid-template-columns:1fr}}
.dash{position:sticky;top:61px;padding:20px 18px;border-right:1px solid var(--line);
  height:calc(100vh - 61px);overflow-y:auto;background:var(--panel)}
@media(max-width:860px){.dash{position:static;height:auto;border-right:none;border-bottom:1px solid var(--line)}}
.dash h2{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:14px}
.kpi{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px}
.kpi .big{font-size:34px;font-weight:800;line-height:1}
.kpi .big span{font-size:15px;color:var(--muted);font-weight:600}
.kpi .lbl{font-size:12px;color:var(--muted);margin-top:4px}
.kpi .split{display:flex;gap:14px;margin-top:12px}
.kpi .split div{flex:1}.kpi .split .n{font-size:20px;font-weight:700}
.kpi .split .n.fill{color:#34d399}.kpi .split .n.empty{color:#fbbf24}
.zonebar{margin-bottom:13px}
.zonebar .row{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px}
.zonebar .row .nm{font-weight:600}.zonebar .row .vl{color:var(--muted)}
.bar{height:8px;border-radius:6px;background:var(--empty);overflow:hidden}
.bar i{display:block;height:100%;border-radius:6px}
.legend{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.legend .it{display:flex;align-items:center;gap:8px;font-size:12.5px;margin-bottom:8px;color:var(--muted)}
.legend .sw{width:13px;height:13px;border-radius:4px;flex:none}
.stage{padding:24px 26px 60px;overflow-x:auto}
.floorhdr{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.floorhdr h2{font-size:22px;font-weight:800}.floorhdr .meta{font-size:12.5px;color:var(--muted)}
.floornote{font-size:12px;color:var(--muted);margin-bottom:20px}
.warnnote{font-size:12px;color:#fbbf24;background:#2a210f;border:1px solid #5b4711;
  border-radius:8px;padding:9px 12px;margin-bottom:18px;font-weight:600}

/* 도면 기준 좌·우 2단 배치 */
.board2{display:flex;align-items:stretch;gap:34px}
.bcol{display:flex;flex-direction:column;gap:16px;min-width:0}
.bcol-left{flex:0 0 360px}
.bcol-right{flex:1 1 auto;min-width:0;max-width:740px}   /* 2테이블 폭(7F 등) */
/* 세로 1열(5F): 좌측은 RD 폭에 맞추고, Product 는 맨 오른쪽으로 */
.board2-vert{width:100%}
.board2-vert .bcol-left{flex:0 0 460px}            /* RD 폭에 맞춰 고정(칩 줄바꿈) */
.board2-vert .bcol-right{flex:0 0 auto;max-width:none;margin-left:auto}
.leftzones{margin-top:auto}        /* RD 등 좌측 구역을 하단으로 */

/* 3단 배치(7F): 좌 기타공간 · 가운데 하단 Operation · 우측 Flex(상)+Business */
.board2-3col{width:100%;justify-content:space-between}
.board2-3col .bcol-left{flex:0 0 230px}
.board2-3col .bcol-center{flex:0 0 auto}
.board2-3col .bcol-right{flex:0 0 auto;max-width:none}

@media(max-width:1180px){.board2,.board2-vert,.board2-3col{flex-direction:column;width:auto}
  .bcol-left,.bcol-center,.bcol-right{flex:none;width:100%;max-width:none;margin-left:0}.leftzones{margin-top:0}}

/* Product: 세로 1열(4석 폭) — 도면(이미지2)과 동일한 긴 띠 */
/* (.tables 보다 앞에 정의되므로 specificity 를 높여 확실히 덮어씀) */
.tables.tables-vert{display:flex;flex-direction:column;flex-wrap:nowrap;gap:12px}
.seat-ghost{visibility:hidden}     /* 빈 자리(좌석 없음) 격자 칸 */

/* RD(5F): 좌석 사이 약간의 여백 */
.area-RD .srow{gap:9px}
.area-RD .srow + .srow{margin-top:8px}

/* 도면형 섬(islands) 배치 — 7F */
.islands{display:flex;gap:14px}
.islands.isl-row{flex-flow:row wrap;align-items:flex-start}      /* 자율석: 가로 한 줄 */
.islands.isl-col{flex-direction:column;align-items:flex-start}   /* Business: 세로 */
.islands.isl-grid{display:grid;gap:14px;justify-content:start}   /* Operation: 2×2 */
.mtgnote{align-self:stretch;border:1px dashed #39414f;border-radius:8px;background:#141821;
  color:#8b94a3;font-size:10.5px;font-weight:600;letter-spacing:.5px;text-align:center;padding:7px}

/* 구역(WORK SPACE) 카드 */
.zone{border-radius:14px;padding:16px 16px 18px;background:var(--panel)}
.zone.area-Product{background:#13203a;border:1px solid #234a8a;border-top:3px solid var(--product)}
.zone.area-RD{background:#0f2620;border:1px solid #1f5e4c;border-top:3px solid var(--rd)}
.zone.area-Operation{background:#1d1535;border:1px solid #4a347e;border-top:3px solid var(--operation)}
.zone.area-Business{background:#2c1424;border:1px solid #7e2b58;border-top:3px solid var(--business)}
.zone.area-Flex{background:#191c24;border:1px solid #3a414f;border-top:3px solid var(--muted)}
.zhdr{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.zhdr h3{font-size:13.5px;font-weight:700;letter-spacing:.3px}
.zhdr .zmeta{font-size:11.5px;color:var(--muted);font-weight:600}

/* 8인 테이블 (4+4 마주보기) */
.tables{display:flex;flex-wrap:wrap;gap:14px}
.tbl{background:rgba(0,0,0,.22);border:1px solid var(--line);border-radius:12px;padding:10px 11px 11px}
.tbl-h{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;color:var(--muted);
  letter-spacing:.6px;margin-bottom:8px}
.tbl-h .tn{font-weight:800;color:var(--txt)}
.tbl-h .tc{font-weight:600}
.srow{display:grid;grid-template-columns:repeat(4,74px);gap:6px}
.spine{height:0;border-top:2px dashed #3b4250;margin:7px 3px;position:relative}

.seat{position:relative;border-radius:8px;background:var(--empty);border:1px solid var(--line);
  height:54px;padding:5px 6px;display:flex;flex-direction:column;justify-content:flex-start;
  gap:1px;overflow:hidden;transition:.12s;cursor:default}
.seat:hover{transform:translateY(-1px);border-color:var(--accent)}
.seat .sid{font-size:9.5px;font-weight:700;color:rgba(255,255,255,.45);letter-spacing:.3px}
.seat .nm{font-size:12px;font-weight:700;line-height:1.12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat .nk{font-size:9px;opacity:.78;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat.filled{color:#fff}.seat.filled .sid{color:rgba(255,255,255,.7)}
.seat.t-Product{background:var(--product)}.seat.t-RD{background:var(--rd)}
.seat.t-RX{background:var(--rx)}.seat.t-BSP{background:var(--bsp)}
.seat.t-Operation{background:var(--operation)}.seat.t-Business{background:var(--business)}
.seat.t-Exec{background:var(--exec)}
.seat.empty{align-items:center;justify-content:center}
.seat.empty .sid{font-size:14px;color:var(--muted)}
.seat.clevel{box-shadow:0 0 0 2px #f0b429 inset}
.seat .crown{position:absolute;top:3px;right:5px;font-size:9px}
.seat.dim{opacity:.16}.seat.hit{box-shadow:0 0 0 2px var(--accent) inset}

/* 기타 공간 참조 카드 (좌측단) */
.ctxcard{border-radius:14px;padding:14px 14px 16px;background:var(--panel);border:1px solid var(--line)}
.ctxcard h4{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:11px}
.ctxlist{display:flex;flex-wrap:wrap;gap:8px}
.ctxchip{border:1px dashed #39414f;border-radius:8px;padding:6px 10px;color:#8b94a3;font-size:11px;
  font-weight:600;background:#141821;line-height:1.35}
.search{margin-top:14px}
.search input{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--txt);
  border-radius:8px;padding:9px 11px;font-size:13px}
.foot{padding:18px 26px;color:var(--muted);font-size:11px;border-top:1px solid var(--line)}

/* 사용 방법 (좌하단 고정 버튼 + 모달) */
.help-fab{position:fixed;left:18px;bottom:18px;z-index:30;border:1px solid var(--line);
  background:var(--panel2);color:var(--txt);border-radius:10px;padding:10px 14px;
  font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.4)}
.help-fab:hover{border-color:var(--accent)}
.help-modal{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);padding:20px}
.help-modal[hidden]{display:none}
.help-card{position:relative;max-width:440px;width:100%;background:var(--panel);
  border:1px solid var(--line);border-radius:16px;padding:26px 24px 22px;box-shadow:0 12px 48px rgba(0,0,0,.5)}
.help-card h3{font-size:17px;font-weight:800;margin-bottom:16px}
.help-card ol{margin:0 0 14px;padding-left:20px}
.help-card li{font-size:14px;margin-bottom:10px;line-height:1.55}
.help-card li b{color:var(--accent)}
.help-note{color:var(--muted);font-size:12.5px}
.help-foot{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;margin:2px 0 0}
.help-foot b{color:var(--txt)}
.help-close{position:absolute;top:10px;right:14px;border:none;background:transparent;
  color:var(--muted);font-size:24px;line-height:1;cursor:pointer}
.help-close:hover{color:var(--txt)}