/* Base = LIGHT (기본값) */
:root{
  --bg:#f8fafc;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --accent:#c58f00;
  --teal:#0ea5e9;
  --border:#e2e8f0;
  --pill-shadow: 0 2px 10px rgba(15,23,42,.08);
  --maxw:1200px; --radius:16px; --gap:16px;
}

/* DARK overrides — data-attr와 class 둘 다 대응 */
:root[data-theme='dark'],
:root.theme-dark{
  --bg:#0f172a;
  --card:#111827;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --accent:#f2c94c;
  --teal:#56ccf2;
  --border:#1f2937;
  --pill-shadow: 0 2px 10px rgba(0,0,0,.18);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family: Inter, Pretendard, 'Noto Sans KR', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;line-height:1.5;
  transition: background-color .25s ease, color .25s ease;}
a{color:inherit;text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:24px;}
header{position:sticky;top:0;z-index:50;background:color-mix(in hsl, var(--bg) 92%, transparent);backdrop-filter: blur(6px);border-bottom:1px solid var(--border);}
.nav{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:12px 24px;}
.logo{display:flex;align-items:center;gap:8px;font-weight:800}
.logo .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px var(--accent);}
nav a{padding:10px 12px;border-radius:12px;color:var(--muted)}
nav a.active, nav a:hover{background:var(--border);color:var(--text);}
.btn{background:var(--accent);color:#111827;border:none;border-radius:12px;padding:10px 14px;font-weight:700;cursor:pointer}
.btn.alt{background:transparent;color:var(--text);border:1px solid var(--border)}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:16px;transition: background-color .25s ease, border-color .25s ease;}
.grid{display:grid;gap:var(--gap)}
.cards{grid-template-columns:repeat(12,1fr)}
.footer{border-top:1px solid var(--border);color:var(--muted);padding:40px 24px;margin-top:40px;text-align:center}
select{background:color-mix(in hsl, var(--bg) 96%, white 0%);border:1px solid var(--border);border-radius:12px;color:var(--text);padding:10px 12px;width:100%;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;}
.row{display:flex;gap:var(--gap);flex-wrap:wrap;align-items:flex-start}
.chart{width:100%;height:320px;display:block}

/* Colorful number pills */
.pills{display:flex;flex-wrap:wrap;gap:6px}
.number-pill{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:999px;
  font-weight:800; color:#0b1220; border:0; box-shadow: var(--pill-shadow);
}
.pill-g1{background: linear-gradient(135deg,#fde68a,#fca5a5);}     /* 1-9  warm */
.pill-g2{background: linear-gradient(135deg,#a7f3d0,#60a5fa);}     /* 10-19 mint->blue */
.pill-g3{background: linear-gradient(135deg,#c4b5fd,#f0abfc);}     /* 20-29 purple->pink */
.pill-g4{background: linear-gradient(135deg,#93c5fd,#6ee7b7);}     /* 30-39 blue->green */
.pill-g5{background: linear-gradient(135deg,#fda4af,#fbcfe8);}     /* 40-45 rose->pink */
.pill-bonus{background: linear-gradient(135deg,#f59e0b,#fbbf24); color:#111827; position:relative;}
.pill-bonus::after{content:'B'; position:absolute; top:-8px; right:-8px; width:18px; height:18px; border-radius:999px; background:#111827; color:#fbbf24; font-size:11px; display:flex; align-items:center; justify-content:center; box-shadow: var(--pill-shadow);}

/* Generator chips */
#chips{display:grid;grid-template-columns:repeat(9, 1fr);gap:10px}
.numchip{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:999px;border:1px solid var(--border);cursor:pointer;font-weight:700;
  background:color-mix(in hsl, var(--bg) 88%, white 0%); color:var(--text); user-select:none;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;}
.numchip.inc{background:var(--accent);color:#111827;border-color:#b38e20;box-shadow:0 0 0 2px rgba(242,201,76,.35) inset;}
.numchip.exc{background:color-mix(in hsl, var(--bg) 80%, black 0%);color:#a5b4fc;border-color:#334155;opacity:.95; text-decoration:line-through;}

#themeBtn{display:inline-flex;align-items:center;gap:8px}

/* Recent 5 list fix */
#recent5{padding-left:16px;}
.recent-list-card{max-width:720px;}

/* Responsive */
@media (max-width: 960px){
  .cards{grid-template-columns:1fr}
  #chips{grid-template-columns:repeat(6, 1fr)}
}

/* 헤더 반응형 보강 */
nav a{ white-space:nowrap; } /* 버튼 텍스트 줄바꿈 방지 */

@media (max-width: 960px){
  header .nav{ 
    flex-wrap:wrap; 
    gap:10px; 
    justify-content:center;
  }
  header .nav .logo{ flex:1 1 100%; justify-content:center; }
  header .nav nav{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
  header .nav .cta{ width:100%; display:flex; justify-content:center; }
}