* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg: #0d1b2a;
  --bg2: #162032;
  --bg3: #1e2d42;
  --border: rgba(255,255,255,.1);
  --txt: #e8edf2;
  --txt2: #8fa3b8;
  --gold: #FFD700;
  --emerald: #2ECC71;
  --red: #E74C3C;
  --sky: #5DADE2;
}
html, body {
  width:100%;
  height:auto;
  background:var(--bg);
  color:var(--txt);
  font-family:'Noto Sans KR',sans-serif;
  overflow-x:hidden;
  overflow-y:auto;
}

/* ── 로딩 ── */
#loading {
  position:fixed;inset:0;z-index:9999;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
}
@keyframes ldBar{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}

/* ── 상단 헤더 ── */
#header {
  height:48px;background:var(--bg2);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 1rem;gap:.8rem;flex-shrink:0;
}
#header .title { font-size:1rem;font-weight:900;color:var(--gold); }
#header .date  { font-size:.78rem;color:var(--txt2);margin-left:auto; }

/* ── 메인 레이아웃 ── */
#main-wrap {
  display:flex;
  flex-direction:column;
  width:100%;
  height:100vh;
  height:100dvh;
  overflow:hidden;
}

/* ── 탭 ── */
#tabs {
  display:flex;gap:.4rem;padding:.6rem 1rem;background:var(--bg2);
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.qtab {
  padding:.4rem 1rem;border-radius:20px;border:1.5px solid var(--border);
  background:transparent;color:var(--txt2);font-size:.85rem;font-weight:700;
  cursor:pointer;transition:all .2s;font-family:inherit;
}
.qtab.on { background:var(--gold);color:#1a1a1a;border-color:var(--gold); }

/* ── 테이블 영역 ── */
#table-wrap {
  padding:.6rem .8rem 8rem;
  width:100%;
  box-sizing:border-box;
}
#kiosk-table {
  width:max-content;min-width:100%;border-collapse:collapse;
}
#kiosk-table th {
  padding:.5rem .4rem;text-align:center;font-size:.75rem;font-weight:700;
  background:var(--bg3);border:1px solid var(--border);
  position:sticky;top:0;z-index:10;white-space:nowrap;
}
#kiosk-table th.quest-th {
  text-align:left;padding:.5rem .8rem;width:180px;min-width:150px;
  font-size:.8rem;
}
#kiosk-table td {
  border:1px solid var(--border);text-align:center;
  padding:.2rem;vertical-align:middle;min-width:52px;
}
#kiosk-table td.quest-name {
  text-align:left;padding:.5rem .8rem;background:var(--bg2);
  font-size:.82rem;font-weight:600;position:sticky;left:0;z-index:5;
}
#kiosk-table td.quest-name .quest-reward {
  font-size:.68rem;color:var(--gold);font-weight:400;margin-top:.15rem;
}
#kiosk-table tr:hover td { background:rgba(255,255,255,.02); }

/* ── 셀 버튼 ── */
.cell-btn {
  width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.15);
  background:transparent;cursor:pointer;font-size:.7rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin:0 auto;
  transition:all .2s;color:var(--txt2);flex-direction:column;gap:1px;
  -webkit-tap-highlight-color:rgba(255,215,0,.2);touch-action:manipulation;
}
.cell-btn:hover { border-color:var(--gold);transform:scale(1.1); }
.cell-btn.pending {
  background:rgba(255,215,0,.15);border-color:var(--gold);color:var(--gold);
  animation:pendingPulse 2s ease-in-out infinite;
}
.cell-btn.done {
  background:rgba(46,204,113,.15);border-color:var(--emerald);color:var(--emerald);
  cursor:default;
}
@keyframes pendingPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,215,0,.0)}50%{box-shadow:0 0 0 4px rgba(255,215,0,.2)}}

/* ── 빈 화면 ── */
#empty-msg {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:calc(100vh - 130px);color:var(--txt2);gap:.8rem;
}

/* ── 토스트 ── */
#toast {
  position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);
  background:#1e2d42;border:1px solid var(--gold);color:var(--gold);
  padding:.7rem 1.5rem;border-radius:20px;font-size:.9rem;font-weight:700;
  z-index:9999;display:none;pointer-events:none;
}

/* ── 취소 확인 팝업 ── */
#cancel-popup {
  display:none;position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.6);
  align-items:center;justify-content:center;
}
#cancel-popup .popup-box {
  background:var(--bg2);border:1.5px solid var(--border);border-radius:20px;
  padding:1.5rem;text-align:center;max-width:320px;width:90%;
}
#cancel-popup .popup-title { font-size:1rem;font-weight:700;margin-bottom:.5rem; }
#cancel-popup .popup-sub   { font-size:.82rem;color:var(--txt2);margin-bottom:1.2rem; }
#cancel-popup .popup-btns  { display:flex;gap:.6rem; }
#cancel-popup .popup-btns button {
  flex:1;padding:.6rem;border-radius:10px;border:none;
  font-family:inherit;font-size:.85rem;font-weight:700;cursor:pointer;
}