/* ─────────────────────────────────────────────────────────────
   Study WithU — 디자인 토큰
   따뜻한 크림 + 테라코타·세이지 듀얼 액센트
   라이트/다크를 .theme-light / .theme-dark 클래스로 동시 표현
   (실서비스는 prefers-color-scheme 자동 전환 — 시안 비교용으로 클래스 분리)
   ───────────────────────────────────────────────────────────── */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

.theme-light {
  --background: 35 30% 97%;
  --foreground: 25 15% 15%;
  --card: 0 0% 100%;
  --muted: 30 25% 93%;
  --muted-foreground: 25 10% 42%;
  --primary: 15 65% 52%;
  --primary-foreground: 40 40% 98%;
  --secondary: 142 28% 48%;
  --secondary-foreground: 0 0% 100%;
  --accent: 35 40% 92%;
  --accent-foreground: 25 25% 25%;
  --destructive: 0 70% 50%;
  --warning: 38 92% 55%;
  --success: 142 50% 42%;
  --border: 30 18% 88%;
  --ring: 15 65% 52%;
  --ink-illust: 25 15% 15%;
  --illust-alpha: 0.62;
  --shadow-card: 0 1px 2px rgb(25 15 5 / 0.04), 0 4px 12px rgb(25 15 5 / 0.05);
  --shadow-lift: 0 2px 6px rgb(25 15 5 / 0.05), 0 14px 32px rgb(25 15 5 / 0.08);
  --hero-wash: radial-gradient(120% 90% at 85% 10%, hsl(15 65% 52% / 0.10), transparent 55%),
               radial-gradient(90% 80% at 8% 95%, hsl(142 28% 48% / 0.09), transparent 60%);
}

.theme-dark {
  --background: 25 18% 10%;
  --foreground: 35 20% 92%;
  --card: 25 15% 14%;
  --muted: 25 12% 18%;
  --muted-foreground: 35 10% 62%;
  --primary: 15 70% 60%;
  --primary-foreground: 25 18% 10%;
  --secondary: 142 30% 55%;
  --secondary-foreground: 25 18% 10%;
  --accent: 25 14% 20%;
  --accent-foreground: 35 20% 90%;
  --destructive: 0 70% 58%;
  --warning: 38 92% 62%;
  --success: 142 50% 52%;
  --border: 25 12% 22%;
  --ring: 15 70% 60%;
  --ink-illust: 35 25% 88%;
  --illust-alpha: 0.66;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 18px rgb(0 0 0 / 0.35);
  --shadow-lift: 0 2px 8px rgb(0 0 0 / 0.35), 0 18px 40px rgb(0 0 0 / 0.45);
  --hero-wash: radial-gradient(120% 90% at 85% 10%, hsl(15 70% 60% / 0.16), transparent 55%),
               radial-gradient(90% 80% at 8% 95%, hsl(142 30% 55% / 0.12), transparent 60%);
}

/* ── 토큰 헬퍼 색상 ── */
.theme-light, .theme-dark {
  --c-bg: hsl(var(--background));
  --c-fg: hsl(var(--foreground));
  --c-card: hsl(var(--card));
  --c-muted: hsl(var(--muted));
  --c-muted-fg: hsl(var(--muted-foreground));
  --c-primary: hsl(var(--primary));
  --c-primary-fg: hsl(var(--primary-foreground));
  --c-secondary: hsl(var(--secondary));
  --c-secondary-fg: hsl(var(--secondary-foreground));
  --c-accent: hsl(var(--accent));
  --c-border: hsl(var(--border));
  --c-success: hsl(var(--success));
  --c-warning: hsl(var(--warning));
  --c-destructive: hsl(var(--destructive));
}

/* ── 라운드/간격 토큰 ── */
:root {
  --r-card: 18px;
  --r-card-sm: 12px;
  --r-btn: 12px;
  --r-pill: 999px;
  --pad-card: 28px;
  --gap-section: 80px;
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-num: "Inter", var(--font-sans);
}

/* ── 베이스 ── */
.swu {
  font-family: var(--font-sans);
  color: var(--c-fg);
  background: var(--c-bg);
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  box-sizing: border-box;
}
.swu *, .swu *::before, .swu *::after { box-sizing: border-box; }
.swu ::selection { background: hsl(var(--primary) / 0.22); }

.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

@keyframes swuPing {
  75%, 100% { transform: scale(2.4); opacity: 0; }
}

@keyframes swuFloat {
  0% { transform: translateY(0) scale(0.7); opacity: 0; }
  18% { opacity: 1; transform: translateY(-8px) scale(1.05); }
  100% { transform: translateY(-74px) scale(1); opacity: 0; }
}
@keyframes swuPop {
  0% { transform: scale(0.4); opacity: 0; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* 손그림 라인 일러스트 잉크 */
.illust { color: hsl(var(--ink-illust) / var(--illust-alpha)); }
.illust svg { display: block; }