/* 200SCORE · slim dashboard */
:root{
  --bg:#0d0a00; --panel:#161108; --panel-2:#1d1610;
  --bd:rgba(255,255,255,.08); --bd-2:rgba(255,255,255,.15);
  --tx:#e8e8e8; --tx-mt:rgba(255,255,255,.50); --tx-dim:rgba(255,255,255,.30);
  --ac:#fbbf24; --ac-2:#f59e0b;
  --up:#34d399; --dn:#f87171;
  --fs:'Pretendard','Segoe UI',system-ui,-apple-system,'Apple SD Gothic Neo',sans-serif;
  --fm:ui-monospace,SFMono-Regular,'JetBrains Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{
  font-family:var(--fs); font-size:14px; line-height:1.45;
  background:radial-gradient(circle at 50% -20%, rgba(251,191,36,.06) 0%, var(--bg) 50%);
  color:var(--tx); min-height:100vh;
}
a{color:inherit; text-decoration:none}

/* ---- top header ---- */
.top{
  padding:16px 24px; border-bottom:1px solid var(--bd);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
  position:sticky; top:0; background:rgba(13,10,0,.85); backdrop-filter:blur(10px); z-index:50;
}
.top .back{
  font-size:18px; padding:4px 10px; border:1px solid var(--bd); border-radius:8px;
  color:var(--tx-mt); transition:.15s;
}
.top .back:hover{color:var(--ac); border-color:var(--ac)}
.top h1{
  font-size:1.2rem; margin:0; font-weight:600; letter-spacing:.3px;
  display:flex; align-items:center; gap:8px;
}
.top h1 .b{font-weight:800; letter-spacing:1px; color:var(--ac)}
.top h1 .b2{font-weight:400; opacity:.85; letter-spacing:1px}
.top .sub{
  color:var(--tx-mt); font-size:.78rem; letter-spacing:.3px;
  grid-column: 1 / -1; justify-self:start; margin-left:42px;
}
.top h1 + .sub{margin-left:0; grid-column: 2}

/* ---- wrap ---- */
.wrap{max-width:1200px; margin:0 auto; padding:24px}

/* ---- index cards ---- */
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px}
.card{
  --ac: var(--ac);
  display:block; padding:18px 20px; border-radius:12px;
  background:var(--panel); border:1px solid var(--bd);
  transition:transform .15s, border-color .15s, box-shadow .15s;
  position:relative; overflow:hidden;
}
.card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--ac);
}
.card:hover{transform:translateY(-2px); border-color:var(--ac); box-shadow:0 6px 24px rgba(0,0,0,.5)}
.card-h{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.card-h .ic{font-size:1.4rem; line-height:1}
.card-h .nm{font-size:1rem; font-weight:600}
.card-b{margin-bottom:16px}
.card-b .big{font-size:1.8rem; font-weight:700; font-family:var(--fm); color:var(--ac); line-height:1.1}
.card-b .sub2{color:var(--tx-mt); font-size:.78rem; margin-top:2px}
.card-b .stats{display:flex; gap:14px; margin-top:12px; color:var(--tx-mt); font-size:.82rem}
.card-b .stats b{color:var(--tx); font-family:var(--fm); margin-right:2px}
.card-b .err{padding:8px 10px; background:rgba(248,113,113,.1); border-radius:6px; color:#fca5a5; font-size:.78rem}
.card-f{color:var(--ac); font-size:.82rem; font-weight:500}

/* ---- store page KPIs ---- */
.kpis{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:10px; margin-bottom:18px;
}
.kpi{
  padding:12px 16px; border-radius:10px;
  background:var(--panel); border:1px solid var(--bd);
}
.kpi .l{color:var(--tx-mt); font-size:.72rem; letter-spacing:.5px; text-transform:uppercase; margin-bottom:4px}
.kpi .v{font-size:1.4rem; font-weight:700; font-family:var(--fm); color:var(--tx); line-height:1.1}
.kpi .s{color:var(--tx-mt); font-size:.74rem; margin-top:4px}
.kpi .s .up{color:var(--up)}
.kpi .s .dn{color:var(--dn)}

/* ---- 2-col grid: chart + schedule ---- */
.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-bottom:16px}
@media (max-width:900px){.grid2{grid-template-columns:1fr}}

.block{
  background:var(--panel); border:1px solid var(--bd); border-radius:10px;
  padding:14px 18px;
}
.block-h{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px}
.block-h h2{margin:0; font-size:.95rem; font-weight:600; color:var(--tx); letter-spacing:.3px}
.block-meta{color:var(--tx-mt); font-size:.74rem; font-family:var(--fm)}

.chart{height:240px; padding-top:4px}

/* ---- schedule ---- */
.sched{overflow-x:auto}
.sched table{width:100%; border-collapse:collapse; font-size:.78rem}
.sched th, .sched td{padding:6px 8px; border-bottom:1px solid var(--bd); white-space:nowrap}
.sched th{color:var(--tx-mt); font-weight:500; font-size:.7rem; text-align:left; text-transform:uppercase; letter-spacing:.5px}
.sched th.day{text-align:center; width:50px}
.sched td.nm{color:var(--ac); font-weight:600; font-size:.84rem}
.sched td.rl{color:var(--tx-mt); font-size:.72rem}
.sched td{font-family:var(--fm); text-align:center}
.sched td.on{color:var(--tx)}
.sched td.off{color:var(--tx-dim)}
.empty{color:var(--tx-mt); text-align:center; padding:30px 0; font-size:.85rem}

/* ---- more (sheet directory, collapsible) ---- */
.more{
  background:var(--panel); border:1px solid var(--bd); border-radius:10px;
  padding:0; overflow:hidden;
}
.more summary{
  padding:12px 18px; cursor:pointer; font-size:.85rem; color:var(--tx-mt);
  list-style:none; user-select:none;
}
.more summary::-webkit-details-marker{display:none}
.more summary:hover{color:var(--ac)}
.more[open] summary{border-bottom:1px solid var(--bd); color:var(--tx)}
.sheets{padding:12px 18px 16px; display:flex; flex-wrap:wrap; gap:6px}
.sheets a{
  display:inline-block; padding:5px 12px; border-radius:5px;
  background:rgba(255,255,255,.04); font-size:.78rem; color:var(--tx);
  border:1px solid var(--bd); transition:.12s;
}
.sheets a:hover{background:var(--ac); color:#0d0a00; border-color:var(--ac)}

/* ---- sheet detail table ---- */
.tbl-wrap{
  overflow:auto; max-height:75vh; border-radius:8px;
  border:1px solid var(--bd); background:var(--panel-2);
}
.tbl-wrap::-webkit-scrollbar{height:8px; width:8px}
.tbl-wrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1); border-radius:4px}
.tbl{width:100%; border-collapse:separate; border-spacing:0; font-size:.82rem}
.tbl th, .tbl td{padding:7px 12px; border-bottom:1px solid var(--bd); text-align:left; white-space:nowrap}
.tbl thead th{
  position:sticky; top:0; background:var(--panel); color:var(--ac);
  font-weight:600; font-size:.74rem; letter-spacing:.5px;
  border-bottom:1px solid var(--ac); z-index:5;
}
.tbl tbody tr:nth-child(even) td{background:rgba(0,0,0,.18)}
.tbl tbody tr:hover td{background:rgba(255,255,255,.04)}
.tbl td.num{text-align:right; font-family:var(--fm); color:var(--ac)}

/* ---- footer ---- */
.foot{
  text-align:center; padding:16px; color:var(--tx-dim); font-size:.72rem;
  border-top:1px solid var(--bd); margin-top:24px;
}

@media (max-width:600px){
  .wrap{padding:16px}
  .top{padding:12px 16px}
  .top h1{font-size:1rem}
  .kpis{grid-template-columns:repeat(2, 1fr)}
}