/* ONCREW Design Tokens — Dark default + Light override
 * v3.2 — 2026-04-25
 * Default = HB3 PUNCHY (dark). Manual toggle for HB1 LIGHT.
 */

@font-face {
  font-family: 'GmarketSans';
  src:
    url('/static/fonts/GmarketSansLight.woff2') format('woff2'),
    url('/static/fonts/GmarketSansLight.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: block;
  unicode-range: U+AC00-D7A3, U+1100-11FF, U+3130-318F;
}
@font-face {
  font-family: 'GmarketSans';
  src:
    url('/static/fonts/GmarketSansMedium.woff2') format('woff2'),
    url('/static/fonts/GmarketSansMedium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: block;
  unicode-range: U+AC00-D7A3, U+1100-11FF, U+3130-318F;
}
@font-face {
  font-family: 'GmarketSans';
  src:
    url('/static/fonts/GmarketSansBold.woff2') format('woff2'),
    url('/static/fonts/GmarketSansBold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: block;
  unicode-range: U+AC00-D7A3, U+1100-11FF, U+3130-318F;
}

/* ─────────── DARK (default) — HB3 PUNCHY ─────────── */
:root {
  --bg:        #0A0A0A;
  --bg-2:      #141414;
  --bg-3:      #1A1A1A;

  --fg:        #FAFAFA;
  --fg-2:      #999999;
  --fg-3:      #666666;

  --yellow:    #FFD60A;
  --red:       #861623;
  --green:         #00D674;
  --green-success: #34D399;

  --border:    rgba(255, 255, 255, 0.10);
  --border-2:  rgba(255, 255, 255, 0.06);

  --hero-filter: brightness(1.32) saturate(1.45) contrast(1.08);
  --hero-fade-top: rgba(10, 10, 10, 0.50);
  --hero-fade-mid: rgba(10, 10, 10, 0.55);
  --hero-fade-end: rgba(10, 10, 10, 0.92);
  --hero-shadow: 0 2px 4px rgba(0,0,0,0.55), 0 4px 24px rgba(0,0,0,0.45);

  --status-live-bg: var(--yellow);
  --status-live-fg: #000;

  --pill-bg: var(--yellow);
  --pill-fg: #000;

  /* Typography */
  --font-display: 'Inter', 'GmarketSans', -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', 'GmarketSans', ui-monospace, 'SFMono-Regular', monospace;
  --font-sans:    'Inter', 'GmarketSans', -apple-system, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 3rem;
  --fs-4xl: clamp(48px, 9vw, 96px);
  --fs-display: clamp(64px, 14vw, 192px);

  --tracking-tight: -0.04em;
  --tracking-display: -0.06em;
  --tracking-mono: 0.06em;
  --tracking-wide: 0.08em;
  --tracking-meta: 0.10em;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --sp-16: 64px; --sp-20: 80px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;

  --z-header: 50;
  --z-toast: 100;
  --z-modal: 1000;

  color-scheme: dark;
}

/* Explicit dark */
:root[data-theme="dark"] { color-scheme: dark; }

/* ─────────── LIGHT (manual toggle) — HB1 ─────────── */
:root[data-theme="light"] {
  --bg:        #F5F5F2;
  --bg-2:      #EDEDEA;
  --bg-3:      #FFFFFF;

  --fg:        #0A0A0A;
  --fg-2:      #4A4A4A;
  --fg-3:      #888888;

  --yellow:    #FFD600;
  --red:       #861623;
  --green:         #00A862;
  --green-success: #0FB57A;

  --border:    rgba(10, 10, 10, 0.10);
  --border-2:  rgba(10, 10, 10, 0.06);

  --hero-filter: none;
  --hero-fade-top: rgba(245, 245, 242, 0.20);
  --hero-fade-mid: rgba(245, 245, 242, 0.55);
  --hero-fade-end: rgba(245, 245, 242, 0.95);
  --hero-shadow: 0 1px 0 rgba(0,0,0,0.10), 0 2px 12px rgba(0,0,0,0.18);

  --status-live-bg: var(--yellow);
  --status-live-fg: var(--fg);

  --pill-bg: var(--fg);
  --pill-fg: var(--yellow);

  color-scheme: light;
}

/* ─────────── Reset ─────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--fg); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; min-height: 100%; }
body {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--dur-base), color var(--dur-base);
  /* sticky-footer: 콘텐츠 짧으면 footer 가 화면 아래 붙고, 길면 자연 흐름 — footer 이후 빈 공간 방지 */
  min-height: 100vh;
  min-height: 100dvh;          /* iOS Safari dynamic viewport 보정 */
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }
body > footer { flex-shrink: 0; }
button { background: transparent; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; cursor: pointer; }
img { display: block; max-width: 100%; }
input, textarea, select, button { font: inherit; font-size: 16px; color: inherit; }

.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { position: fixed; top: 16px; left: 16px; background: var(--fg); color: var(--bg); padding: 12px 16px; z-index: var(--z-toast); font-weight: 700; font-size: 12px; letter-spacing: var(--tracking-wide); text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ────────────────────────────────────────────────────────────────
   Layout & Heading tokens (P0 unification, 2026-04-26)
   ────────────────────────────────────────────────────────────── */
:root {
  --w-hero:    1280px;
  --w-shell:   880px;
  --w-article: 760px;

  /* hero h1 — module pages (skd / skdmeet / brf) */
  --fs-h1-hero:        clamp(56px, 10vw, 120px);
  --fs-h1-hero-mobile: clamp(48px, 13.5vw, 82px);

  /* h1 — content pages (notice / info) */
  --fs-h1-page:        clamp(40px, 7vw, 80px);

  --fs-h2-section: clamp(20px, 3vw, 28px);
  --fs-h3-card:    1rem;

  /* hero spacing — 모듈 페이지 통일 */
  --hero-pad-top:        56px;
  --hero-pad-top-mobile: 32px;
  --hero-pad-bottom:        32px;
  --hero-pad-bottom-mobile: 24px;
  --hero-chip-gap:        24px;  /* chip-row → h1 */
  --hero-chip-gap-mobile: 16px;
}