@charset "utf-8";
/* ==========================================================================
   728 PRODUCTION Design System — 01. Tokens
   --------------------------------------------------------------------------
   1. Primitive : 원시 팔레트 / 스케일. 컴포넌트에서 직접 참조하지 않습니다.
   2. Semantic  : 역할(용도) 기반 토큰. 모든 컴포넌트는 이 레이어만 참조합니다.
   3. Theme     : [data-theme="dark|pink|yellow|cyan"] 영역 단위로 Semantic 재매핑
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     1-1. Color · Primitive
     ------------------------------------------------------------------ */
  --pink-50: #FFF0F7;
  --pink-100: #FFDCEB;
  --pink-200: #FFB3D4;
  --pink-300: #FF7FB7;
  --pink-500: #FF2E8B;
  --pink-600: #F0127A;
  --pink-700: #C8005F;

  --cyan-50: #EAFBFF;
  --cyan-100: #C9F3FF;
  --cyan-300: #6EE0FF;
  --cyan-500: #14C6F2;
  --cyan-700: #00769C;

  --yellow-100: #FFF7C7;
  --yellow-300: #FFEB66;
  --yellow-500: #FFD60A;
  --yellow-700: #8A6F00;

  --violet-100: #ECE6FF;
  --violet-300: #B6A3FF;
  --violet-500: #7B5CFF;
  --violet-700: #4E2FD6;

  --green-100: #D3F8E7;
  --green-500: #16C47F;
  --green-700: #0B7A4E;

  --red-100: #FFE0E3;
  --red-500: #FF3B4E;
  --red-700: #C4122A;

  --orange-500: #FF8A1F;
  --blue-500: #3D7BFF;

  --ink-950: #0B0812;
  --ink-900: #15101F;
  --ink-800: #211A30;
  --ink-700: #322947;
  --ink-600: #4C4363;
  --ink-500: #6F6886;
  --ink-400: #9C96AF;
  --ink-300: #C9C4D6;
  --ink-200: #E5E1EC;
  --ink-100: #F2EFF6;

  --paper-100: #FFFCF6;
  --paper-200: #FFF5E6;
  --paper-300: #F7E9D4;
  --white: #FFFFFF;

  /* ------------------------------------------------------------------
     1-2. Typography
     ------------------------------------------------------------------ */
  /* display : 영문·일문 = Dela Gothic One / 한글 = Black Han Sans (헤드라인 전용) */
  --font-display: "Dela Gothic One", "Black Han Sans", "Hiragino Sans", "Yu Gothic", sans-serif;
  /* ui : 버튼 · 칩 · 탭 등 한글 라벨 가독성을 위해 한글은 Noto Sans KR 900 */
  --font-ui: "Dela Gothic One", "Noto Sans KR", "Hiragino Sans", sans-serif;
  --font-sans: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --font-mono: "Space Mono", "Noto Sans KR", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-display-xl: clamp(4.5rem, 13vw, 12rem);
  --fs-display-l: clamp(3rem, 7.2vw, 6.5rem);
  --fs-display-m: clamp(2.5rem, 5vw, 4.5rem);
  --fs-display-s: clamp(2rem, 3.4vw, 3rem);
  --fs-h1: clamp(1.875rem, 3.2vw, 2.75rem);
  --fs-h2: clamp(1.5rem, 2.4vw, 2rem);
  --fs-h3: clamp(1.25rem, 1.7vw, 1.5rem);
  --fs-h4: 1.125rem;
  --fs-body-lg: 1.0625rem;
  --fs-body: 1rem;
  --fs-body-sm: .875rem;
  --fs-caption: .8125rem;
  --fs-label: .75rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

  --lh-none: 1;
  --lh-display: .98;
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;
  --lh-relaxed: 1.8;

  --ls-tight: -.02em;
  --ls-normal: 0;
  --ls-wide: .06em;
  --ls-wider: .14em;

  /* ------------------------------------------------------------------
     1-3. Spacing (4px base)
     ------------------------------------------------------------------ */
  --sp-0: 0;
  --sp-1: .25rem;   /* 4  */
  --sp-2: .5rem;    /* 8  */
  --sp-3: .75rem;   /* 12 */
  --sp-4: 1rem;     /* 16 */
  --sp-5: 1.25rem;  /* 20 */
  --sp-6: 1.5rem;   /* 24 */
  --sp-8: 2rem;     /* 32 */
  --sp-10: 2.5rem;  /* 40 */
  --sp-12: 3rem;    /* 48 */
  --sp-16: 4rem;    /* 64 */
  --sp-20: 5rem;    /* 80 */
  --sp-24: 6rem;    /* 96 */
  --sp-32: 8rem;    /* 128 */

  /* ------------------------------------------------------------------
     1-4. Layout
     Breakpoints (참고용 · media query 에 직접 기입)
       sm 560 / md 768 / lg 1024 / xl 1280
     ------------------------------------------------------------------ */
  --container: 1280px;
  --container-narrow: 860px;
  --container-wide: 1560px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --grid-gap: clamp(1rem, 2vw, 1.75rem);
  --header-h: 76px;
  --topbar-h: 34px;

  /* ------------------------------------------------------------------
     1-5. Shape
     ------------------------------------------------------------------ */
  --r-0: 0;
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;
  --r-pill: 999px;

  --bw-1: 1px;
  --bw-2: 2px;
  --bw-3: 3px;
  --bw-4: 4px;

  /* Hard shadow : 오프셋만 정의 → box-shadow: var(--sh-2) var(--c-shadow); */
  --sh-0: 0 0 0 0;
  --sh-1: 3px 3px 0 0;
  --sh-2: 5px 5px 0 0;
  --sh-3: 8px 8px 0 0;
  --sh-4: 12px 12px 0 0;
  --sh-soft: 0 18px 40px -14px rgb(21 16 31 / .28);

  /* ------------------------------------------------------------------
     1-6. Motion
     ------------------------------------------------------------------ */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 360ms;
  --dur-4: 640ms;

  /* ------------------------------------------------------------------
     1-7. Z-index
     ------------------------------------------------------------------ */
  --z-below: -1;
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 500;
  --z-drawer: 800;
  --z-modal: 1000;
  --z-toast: 1100;

  /* ==================================================================
     2. Semantic  (Light · 기본)
     ================================================================== */
  --c-bg: var(--paper-100);
  --c-bg-alt: var(--paper-200);
  --c-surface: var(--white);
  --c-surface-sunken: var(--ink-100);
  --c-fg: var(--ink-900);
  --c-fg-muted: var(--ink-600);
  --c-fg-subtle: var(--ink-500);
  --c-fg-inverse: var(--white);
  --c-line: var(--ink-900);
  --c-line-soft: var(--ink-200);
  --c-shadow: var(--ink-900);

  --c-primary: var(--pink-500);
  --c-primary-strong: var(--pink-700);
  --c-primary-soft: var(--pink-100);
  --c-on-primary: var(--ink-900);

  --c-secondary: var(--cyan-500);
  --c-secondary-strong: var(--cyan-700);
  --c-secondary-soft: var(--cyan-100);
  --c-on-secondary: var(--ink-900);

  --c-accent: var(--yellow-500);
  --c-accent-soft: var(--yellow-100);
  --c-on-accent: var(--ink-900);

  --c-point: var(--violet-500);
  --c-point-soft: var(--violet-100);
  --c-on-point: var(--white);

  --c-live: var(--red-500);
  --c-success: var(--green-500);
  --c-success-strong: var(--green-700);
  --c-danger: var(--red-500);
  --c-danger-strong: var(--red-700);
  --c-warning: var(--orange-500);
  --c-info: var(--blue-500);

  --c-link: var(--pink-700);
  --c-focus: var(--cyan-500);
  --c-selection: var(--yellow-300);
  --c-dot: rgb(21 16 31 / .13);

  /* Category — 1 카테고리 = 1 컬러 (뉴스 · 스케줄 · 작품 공통) */
  --cat-notice: var(--ink-900);
  --cat-event: var(--yellow-500);
  --cat-concert: var(--pink-500);
  --cat-stream: var(--cyan-500);
  --cat-media: var(--violet-500);
  --cat-goods: var(--green-500);
  --cat-audition: var(--orange-500);

  /* Unit (탤런트 그룹) */
  --unit-prism: #FF4FA0;
  --unit-eclipse: #7B5CFF;
  --unit-aurora: #FFB703;
  --unit-nova: #14C6F2;
}

@media (max-width: 767px) {
  :root {
    --header-h: 62px;
    --topbar-h: 30px;
  }
}

/* ==================================================================
   3. Theme  — 섹션/컴포넌트 단위로 적용 (<section data-theme="dark">)
   ================================================================== */
[data-theme="dark"] {
  --c-bg: var(--ink-900);
  --c-bg-alt: var(--ink-950);
  --c-surface: var(--ink-800);
  --c-surface-sunken: var(--ink-950);
  --c-fg: var(--white);
  --c-fg-muted: var(--ink-300);
  --c-fg-subtle: var(--ink-400);
  --c-fg-inverse: var(--ink-900);
  --c-line: var(--white);
  --c-line-soft: rgb(255 255 255 / .14);
  --c-shadow: var(--pink-500);
  --c-link: var(--pink-300);
  --c-dot: rgb(255 255 255 / .12);
  --cat-notice: var(--white);
  color-scheme: dark;
}

[data-theme="pink"] {
  --c-bg: var(--pink-500);
  --c-bg-alt: var(--pink-300);
  --c-surface: var(--white);
  --c-fg: var(--ink-900);
  --c-fg-muted: var(--ink-800);
  --c-fg-subtle: var(--ink-700);
  --c-line: var(--ink-900);
  --c-shadow: var(--ink-900);
  --c-primary: var(--yellow-500);
  --c-primary-strong: var(--ink-900);
  --c-on-primary: var(--ink-900);
  --c-link: var(--ink-900);
  --c-dot: rgb(255 255 255 / .28);
}

[data-theme="yellow"] {
  --c-bg: var(--yellow-500);
  --c-bg-alt: var(--yellow-300);
  --c-fg: var(--ink-900);
  --c-fg-muted: var(--ink-800);
  --c-fg-subtle: var(--ink-700);
  --c-line: var(--ink-900);
  --c-shadow: var(--ink-900);
  --c-link: var(--ink-900);
  --c-dot: rgb(21 16 31 / .14);
}

[data-theme="cyan"] {
  --c-bg: var(--cyan-500);
  --c-bg-alt: var(--cyan-300);
  --c-fg: var(--ink-900);
  --c-fg-muted: var(--ink-800);
  --c-fg-subtle: var(--ink-700);
  --c-line: var(--ink-900);
  --c-shadow: var(--ink-900);
  --c-link: var(--ink-900);
  --c-dot: rgb(255 255 255 / .3);
}