/* ===== CSS VARIABLES ===== */
:root{
  --bg:#0a0e1a;--s1:#111827;--s2:#1a2235;--bdr:#1e2d42;
  --ac:#0ea5e9;--ac2:#38bdf8;--glow:rgba(14,165,233,.15);
  --ok:#10b981;--warn:#f59e0b;--err:#ef4444;--purple:#8b5cf6;
  --txt:#e2e8f0;--dim:#94a3b8;--mute:#64748b;
  --hdr-bg:rgba(10,14,26,.9);--nav-bg:rgba(10,14,26,.7);
  --row-bdr:rgba(255,255,255,.04);--row-bdr2:rgba(255,255,255,.08);
  --modal-bg:rgba(0,0,0,.75);
}
body.light{
  --bg:#f5f7fa;--s1:#ffffff;--s2:#f0f3f7;--bdr:#dce1e8;
  --ac:#0077cc;--ac2:#005fa3;--glow:rgba(0,119,204,.1);
  --ok:#0f8a5f;--warn:#c47d0a;--err:#d32f2f;--purple:#6d28d9;
  --txt:#1a202c;--dim:#4a5568;--mute:#8895a7;
  --hdr-bg:rgba(255,255,255,.95);--nav-bg:rgba(245,247,250,.92);
  --row-bdr:rgba(0,0,0,.06);--row-bdr2:rgba(0,0,0,.1);
  --modal-bg:rgba(0,0,0,.45);
}

/* ===== RESET & BASE (MOBILE-FIRST 375px) ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Noto Sans KR',sans-serif;font-size:16px;line-height:1.5;background:var(--bg);color:var(--txt);min-height:100vh;min-height:100dvh;-webkit-tap-highlight-color:transparent;overflow-x:hidden}

/* Grid background pattern */
body::before{content:'';position:fixed;inset:0;
  background-image:linear-gradient(rgba(14,165,233,.03)1px,transparent 1px),linear-gradient(90deg,rgba(14,165,233,.03)1px,transparent 1px);
  background-size:40px 40px;pointer-events:none;z-index:0}
body.light::before{
  background-image:linear-gradient(rgba(0,119,204,.04)1px,transparent 1px),linear-gradient(90deg,rgba(0,119,204,.04)1px,transparent 1px)}

/* Scrollbar */
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:2px}

/* Common utility */
.btn{padding:10px 16px;border:none;border-radius:10px;font-size:14px;font-weight:700;font-family:'Noto Sans KR',sans-serif;cursor:pointer;transition:all .18s;-webkit-tap-highlight-color:transparent;min-height:44px}
.btn-ghost{background:var(--s2);color:var(--dim);border:1px solid var(--bdr)}.btn-ghost:active{border-color:var(--ac);color:var(--ac)}
.btn-purple{background:linear-gradient(135deg,var(--purple),#ec4899);color:#fff}.btn-purple:active{opacity:.85}
.btn-ok{background:rgba(16,185,129,.1);color:var(--ok);border:1px solid var(--ok)}
.btn-err{background:rgba(239,68,68,.08);color:var(--err);border:1px solid var(--err)}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

@media(min-width:768px){
  .btn-ghost:hover{border-color:var(--ac);color:var(--ac)}
  .btn-purple:hover{opacity:.9}
}