/* ===== 기본 CSS 변수 및 전역 스타일 ===== */
:root{ 
  --accent:#ff0033; 
  --accent-hover:#e60029;
  --category:#3b82f6;
  --category-hover:#2563eb;
  --error:#ff4444;
  --radius:12px; 
}

/* Dark */
:root[data-theme="dark"]{
  --bg:#0f0f0f; --panel:#181818; --text:#f1f1f1; --muted:#9aa0a6;
  --border:#2a2a2a; --input-bg:#111111; --chip-bg:#141414; --thumb-bg:#000;
  --error:#ff6b6b;
}

/* Light */
:root[data-theme="light"]{
  --bg:#ffffff; --panel:#f7f7f7; --text:#222; --muted:#5f6368;
  --border:#e5e7eb; --input-bg:#fafafa; --chip-bg:#fff; --thumb-bg:#eee;
  --error:#dc3545;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Apple SD Gothic Neo,Malgun Gothic,Arial,sans-serif
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* 다크 모드 자동 감지 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:#0f0f0f; --panel:#181818; --text:#f1f1f1; --muted:#9aa0a6;
    --border:#2a2a2a; --input-bg:#111111; --chip-bg:#141414; --thumb-bg:#000;
    --error:#ff6b6b;
  }
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg:#ffffff; --panel:#f7f7f7; --text:#222; --muted:#5f6368;
    --border:#e5e7eb; --input-bg:#fafafa; --chip-bg:#fff; --thumb-bg:#eee;
    --error:#dc3545;
  }
}