/* ============================================================================
   엘다린 — UI 테마 (gold & blue, 미니멀)
   글꼴: Pretendard(본문) · Space Grotesk(워드마크/숫자)
   ============================================================================ */
:root{
  --bg:#0d1b34;            /* deep navy base */
  --bg-2:#10254a;          /* panel navy */
  --surface:#ffffff;
  --navy:#0d2a52;
  --blue:#1b56b0;          /* primary blue */
  --blue-bright:#3a7bd5;
  --ink:#16243d;
  --ink-soft:#6a7894;
  --line:#e6ebf3;
  --gold:#c9a227;          /* gold */
  --gold-bright:#e7c25a;
  --gold-soft:#f3e6bd;
  --danger:#c0392b;
  --r:18px;                /* radius */
  --r-sm:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;}
body{
  color:var(--ink);
  font-family:'Pretendard','Noto Sans KR',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  background:var(--bg);
}
h1,h2,h3,.brand,.wordmark,.num{font-family:'Space Grotesk','Pretendard','Noto Sans KR',sans-serif;}
button{font-family:inherit;}
.num,td .num{font-variant-numeric:tabular-nums;}

/* ---------- 로그인 ---------- */
.auth-bg{
  min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(58,123,213,.35), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(201,162,39,.28), transparent 55%),
    var(--bg);
}
.auth-card{
  position:relative;width:100%;max-width:380px;background:var(--surface);
  border-radius:26px;padding:38px 30px 30px;
  box-shadow:0 30px 80px rgba(5,16,40,.55);
}
.lang-toggle{position:absolute;top:16px;right:16px;display:inline-flex;
  border:1px solid var(--line);border-radius:999px;overflow:hidden;}
.lang-toggle button{font-size:.72rem;font-weight:600;border:none;background:transparent;
  color:var(--ink-soft);padding:5px 11px;cursor:pointer;}
.lang-toggle button.on{background:var(--blue);color:#fff;}

.emblem{width:64px;height:64px;margin:4px auto 14px;display:block;}
.wordmark{text-align:center;font-size:2rem;font-weight:700;letter-spacing:-.02em;
  color:var(--navy);margin:0 0 26px;}
.wordmark .dot{color:var(--gold);}

.field{margin-bottom:14px;}
.field label{display:block;font-size:.74rem;font-weight:600;color:var(--ink-soft);
  margin:0 0 6px;letter-spacing:.02em;}
.field input{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:14px;
  font-size:1rem;background:#fbfcfe;transition:border-color .15s,box-shadow .15s;}
.field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(27,86,176,.12);}

.btn-enter{width:100%;margin-top:10px;padding:14px;border:none;border-radius:14px;cursor:pointer;
  font-size:1.02rem;font-weight:700;letter-spacing:.04em;color:#241c00;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold));
  box-shadow:0 10px 24px rgba(201,162,39,.4);transition:transform .12s,box-shadow .12s;}
.btn-enter:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(201,162,39,.5);}
.btn-enter:active{transform:translateY(0);}
.btn-enter:disabled{opacity:.6;cursor:default;box-shadow:none;}
.error{color:var(--danger);font-size:.85rem;text-align:center;margin-top:12px;min-height:1em;font-weight:500;}

/* ---------- 포털 셸 ---------- */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;background:rgba(13,27,52,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);}
.brand{font-size:1.25rem;font-weight:700;color:#fff;letter-spacing:-.01em;}
.brand .dot{color:var(--gold-bright);}
.rolechip{font-size:.72rem;font-weight:700;letter-spacing:.06em;color:var(--navy);
  background:var(--gold-bright);border-radius:999px;padding:5px 13px;}

.page{max-width:880px;margin:0 auto;padding:22px 18px 120px;display:grid;gap:16px;}
.greeting{font-size:1.5rem;font-weight:700;color:#fff;margin:6px 2px 2px;letter-spacing:-.01em;}

.card{background:var(--surface);border-radius:var(--r);padding:20px 20px;
  box-shadow:0 14px 40px rgba(5,16,40,.30);}
.card.narrow{max-width:380px;margin:30px auto;}
.card h2{font-size:1.02rem;margin:0 0 14px;color:var(--blue);font-weight:700;letter-spacing:-.01em;}
.muted{color:var(--ink-soft);}
.muted.empty{padding:6px 0;}
.note{background:#eef4fc;border:1px solid #d4e2f7;color:#274b7e;
  border-radius:var(--r-sm);padding:11px 14px;font-size:.86rem;}

/* 표 (가로 스크롤로 모바일 대응) */
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-sm);}
table.grid{width:100%;border-collapse:collapse;font-size:.9rem;min-width:380px;}
table.grid th{text-align:left;font-weight:700;color:var(--ink-soft);font-size:.74rem;
  letter-spacing:.04em;text-transform:uppercase;border-bottom:2px solid var(--line);
  padding:9px 11px;white-space:nowrap;}
table.grid td{border-bottom:1px solid var(--line);padding:11px 11px;vertical-align:top;}
table.grid tr:last-child td{border-bottom:none;}

.pill{display:inline-block;font-size:.72rem;font-weight:700;border-radius:999px;padding:3px 11px;}
.pill.adv{background:var(--gold-soft);color:#7a5e09;}
.pill.reg{background:#eef1f6;color:var(--ink-soft);}

.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.tabs button{font-size:.86rem;font-weight:600;border:1.5px solid var(--line);background:#fff;
  color:var(--ink-soft);border-radius:999px;padding:8px 16px;cursor:pointer;transition:all .12s;}
.tabs button.on{background:var(--blue);color:#fff;border-color:var(--blue);}
.count{font-size:.78rem;color:var(--ink-soft);margin:0 0 12px;font-weight:600;}

/* 비밀번호 변경 (포털 내) */
.card.narrow label{display:block;font-size:.74rem;font-weight:600;color:var(--ink-soft);margin:12px 0 6px;}
.card.narrow input{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:1rem;background:#fbfcfe;}
.card.narrow input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(27,86,176,.12);}
.card.narrow .primary{width:100%;margin-top:16px;padding:13px;border:none;border-radius:12px;cursor:pointer;
  font-weight:700;color:#241c00;background:linear-gradient(135deg,var(--gold-bright),var(--gold));}

/* ============================================================================
   컨트롤 휠 (control wheel) — 화면 우하단 플로팅 메뉴
   ============================================================================ */
.cwheel{position:fixed;right:calc(20px + env(safe-area-inset-right));
  bottom:calc(22px + env(safe-area-inset-bottom));z-index:50;width:62px;height:62px;}
.cw-core{position:absolute;inset:0;width:62px;height:62px;border-radius:50%;border:2px solid var(--gold-bright);
  background:radial-gradient(circle at 35% 30%,var(--blue-bright),var(--navy));
  color:var(--gold-bright);font-size:1.4rem;cursor:pointer;
  box-shadow:0 12px 30px rgba(5,16,40,.5);transition:transform .25s ease;}
.cwheel.open .cw-core{transform:rotate(135deg);}
.cw-petal{position:absolute;left:7px;top:7px;width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
  background:var(--surface);color:var(--navy);font-size:1rem;font-weight:700;
  box-shadow:0 8px 20px rgba(5,16,40,.4);
  opacity:0;transform:translate(0,0) scale(.4);pointer-events:none;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),opacity .2s;}
.cwheel.open .cw-petal{opacity:1;pointer-events:auto;}
.cwheel.open .cw-home{transform:translate(0,-78px) scale(1);}
.cwheel.open .cw-lang{transform:translate(-55px,-55px) scale(1);}
.cwheel.open .cw-out{transform:translate(-78px,0) scale(1);}
.cw-petal.cw-out{color:var(--danger);}
.cw-petal.cw-lang{color:var(--blue);font-size:.82rem;}

/* ---------- 모바일 ---------- */
@media (max-width:640px){
  .greeting{font-size:1.28rem;}
  .page{padding:18px 14px 120px;}
  .card{padding:17px 15px;border-radius:15px;}
  .auth-card{padding:32px 22px 26px;border-radius:22px;}
  .wordmark{font-size:1.7rem;}
  .topbar{padding:12px 16px;}
}