/* =============================================================
   Design Tokens — generated from Figma token node (14:3226)
   -------------------------------------------------------------
   ※ 반응형은 "루트 토큰" 레벨에서 처리한다.
      :root 의 --spacing-* / --font-size-*(heading) / --radius-* 를
      파일 맨 아래 @media 블록에서 브레이크포인트별로 다시 선언한다.
      (아래 "Responsive tokens" 섹션 참고 — 데스크톱 값이 기본)
      따라서 컴포넌트 CSS 는 패딩·폰트사이즈처럼 값만 달라지는 속성에
      별도 미디어쿼리를 두지 않는다. var() 를 그대로 쓰면 브레이크포인트에서
      값이 자동으로 좁혀진다.
      미디어쿼리는 grid-template / flex-direction / display 같은
      "구조가 바뀌는" 경우에만 컴포넌트 쪽에 둔다.
   ============================================================= */

:root {

  /* -----------------------------------------------------------
     Color — Brand (Primary / Secondary / Accent)
     ----------------------------------------------------------- */

  --brand-primary-pale: #fafefd;
  --brand-primary-light: #c0ede9;
  --brand-primary: #81d8d0;
  --brand-primary-dark: #4eb8ae;
  --brand-primary-deep: #228e84;

  --brand-secondary-pale: #fff7f2;
  --brand-secondary-light: #ffd3b1;
  --brand-secondary: #ff9c4d;
  --brand-secondary-dark: #fd780f;
  --brand-secondary-deep: #b24e00;

  --brand-accent-pale: #ffeded;
  --brand-accent-light: #ffc9c9;
  --brand-accent: #f27f7f;
  --brand-accent-dark: #ef4444;
  --brand-accent-deep: #be2424;

  /* -----------------------------------------------------------
     Color — Semantic
     ----------------------------------------------------------- */

  --semantic-white: #ffffff;
  --semantic-black: #000000;
  --semantic-bg: #F7F7F7;
  --semantic-bg-cream: #FAF6F1;
  --semantic-bg-hover: #e8e8e8;
  --semantic-bg-fill: #ffffff; /* 2026-10-30 요청 — 예전 #f8f9fa */
  --semantic-border: #eeeeee;
  --semantic-border-hover: #dadada;
  --semantic-input-border: #cbcbcb;
  --semantic-input-border-hover: #b7b7b7;

  /* -----------------------------------------------------------
     Color — Neutral (Text)
     ----------------------------------------------------------- */

  --neutral-tx1-hero: #1a1a1a;
  --neutral-tx2-title: #444444;
  --neutral-tx3-sub: #949494;
  --neutral-tx4-dissolved: #cfcfcf;
  --neutral-tx5-white: #ffffff;

  /* -----------------------------------------------------------
     Color — Badge (Alpha)
     ----------------------------------------------------------- */

  --badge-alpha-b-70: rgba(0, 0, 0, 0.70);
  --badge-alpha-b-60: rgba(0, 0, 0, 0.60);
  --badge-alpha-b-20: rgba(0, 0, 0, 0.20);
  --badge-alpha-b-10: rgba(0, 0, 0, 0.10);
  --badge-alpha-w-50: rgba(255, 255, 255, 0.50);
  --badge-alpha-w-20: rgba(255, 255, 255, 0.20);

  /* -----------------------------------------------------------
     Color — Palette (Mint / Orange / Red)
     ----------------------------------------------------------- */

  --color-mint-50: #F0FEFD;
  --color-mint-100: #c0ede9;
  --color-mint-200: #9de4dd;
  --color-mint-300: #81d8d0;
  --color-mint-500: #4eb8ae;
  --color-mint-700: #228e84;
  --color-mint-900: #1b726a;

  --color-orange-50: #fff7f2;
  --color-orange-100: #ffd3b1;
  --color-orange-300: #ff9c4d;
  --color-orange-500: #fd780f;
  --color-orange-700: #b24e00;
  --color-orange-900: #873e04;

  --color-red-50: #FFF4F4;
  --color-red-100: #ffc9c9;
  --color-red-300: #f27f7f;
  --color-red-500: #ef4444;
  --color-red-700: #be2424;

  /* -----------------------------------------------------------
     Typography — Font Family
     ----------------------------------------------------------- */

  --font-family-base: "Noto Sans KR", sans-serif;

  /* -----------------------------------------------------------
     Typography — Font Weight
     ----------------------------------------------------------- */

  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* -----------------------------------------------------------
     Typography — Font Size
     ----------------------------------------------------------- */

  --font-size-2xs: 10px;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-md: 13px;
  --font-size-base: 14px;
  --font-size-lg: 15px;
  --font-size-xl: 16px;
  --font-size-2xl: 18px;
  --font-size-3xl: 20px;
  --font-size-4xl: 24px;
  --font-size-5xl: 30px;
  --font-size-6xl: 40px;

  /* -----------------------------------------------------------
     Typography — Line Height
     ----------------------------------------------------------- */

  --line-height-10: 10px;
  --line-height-12: 12px;
  --line-height-14: 14px;
  --line-height-16: 16px;
  --line-height-18: 18px;
  --line-height-20: 20px;
  --line-height-22: 22px;
  --line-height-24: 24px;
  --line-height-26: 26px;
  --line-height-28: 28px;
  --line-height-30: 30px;
  --line-height-34: 34px;
  --line-height-38: 38px;
  --line-height-44: 44px;
  --line-height-48: 48px;
  --line-height-54: 54px;
  --line-height-58: 58px;

  /* -----------------------------------------------------------
     Spacing — semantic scale (replaces old numeric --padding-*)
     Base values below = desktop (1024–1920). Responsive overrides
     for tablet (768–1023) and mobile (360–767) are defined at the
     bottom of this file, after :root, so the cascade narrows them.
     ----------------------------------------------------------- */

  --spacing-none: 0px;
  --spacing-micro: 2px;
  --spacing-3xs: 4px;
  --spacing-2xs: 6px;
  --spacing-xs: 8px;
  --spacing-sm: 10px;
  --spacing-md: 12px;
  --spacing-base: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 40px;
  --spacing-4xl: 64px;
  --spacing-5xl: 80px;

  /* -----------------------------------------------------------
     Border Radius
     ----------------------------------------------------------- */

  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* -----------------------------------------------------------
     Stroke (Border Width)
     ----------------------------------------------------------- */

  --stroke-0: 0.5px;
  --stroke-1: 1px;
  --stroke-2: 2px;
  --stroke-3: 3px;

  /* -----------------------------------------------------------
     Breakpoints (Container)
     ----------------------------------------------------------- */

  --bp-mobile-min: 275px;
  --bp-mobile-max: 767px;
  --bp-tablet-min: 768px;
  --bp-tablet-max: 1023px;
  --bp-desktop-min: 1024px;
  --bp-desktop-max: 1439px;
  --bp-wide-min: 1440px;
  --bp-wide-max: 4000px;
  --bp-container-padding: 16px;

  /* -----------------------------------------------------------
     Layout
     ----------------------------------------------------------- */

  --bp-layout-mobile: 1280px;

  /* -----------------------------------------------------------
     Shadow
     ----------------------------------------------------------- */

  --shadow-card:
    0 2px 8px 0 rgba(0, 0, 0, 0.07);

  --shadow-card-hover:
    0 2px 8px 0 rgba(0, 0, 0, 0.06),
    0 8px 24px 0 rgba(129, 216, 208, 0.20);

  --shadow-modal:
    0 8px 24px 0 rgba(0, 0, 0, 0.10),
    0 20px 60px 0 rgba(0, 0, 0, 0.20);

  --shadow-toast:
    0 1px 4px 0 rgba(0, 0, 0, 0.06),
    0 4px 16px 0 rgba(0, 0, 0, 0.10);

  --shadow-banner-txt:
    0 4px 16px 0 rgba(0, 0, 0, 0.20),
    0 1px 4px 0 rgba(0, 0, 0, 0.10);

  --shadow-map-card:
    10px 0 8px 0 rgba(0, 0, 0, 0.10);

  /* -----------------------------------------------------------
     Blur
     ----------------------------------------------------------- */

  --background-blur: 4px;
}

/* =============================================================
   Typography Styles — Noto Sans KR (size / line-height)
   Usage:  font-size: var(--type-r-base-size);
           line-height: var(--type-r-base-lh);
           font-weight: var(--font-weight-regular);
   ============================================================= */

:root {

  /* Regular (400) -------------------------------------------- */

  --type-r-2xs-size: var(--font-size-2xs);
  /* 10px */
  --type-r-2xs-lh: var(--line-height-16);
  /* 16px */

  --type-r-xs-size: var(--font-size-xs);
  /* 11px */
  --type-r-xs-lh: var(--line-height-16);
  /* 16px */

  --type-r-sm-size: var(--font-size-sm);
  /* 12px */
  --type-r-sm-lh: var(--line-height-18);
  /* 18px */

  --type-r-md-size: var(--font-size-md);
  /* 13px */
  --type-r-md-lh: var(--line-height-18);
  /* 18px */

  --type-r-base-size: var(--font-size-base);
  /* 14px */
  --type-r-base-lh: var(--line-height-24);
  /* 24px */

  --type-r-lg-size: var(--font-size-lg);
  /* 15px */
  --type-r-lg-lh: var(--line-height-24);
  /* 24px */

  --type-r-xl-size: var(--font-size-xl);
  /* 16px */
  --type-r-xl-lh: var(--line-height-24);
  /* 24px */

  --type-r-2xl-size: var(--font-size-2xl);
  /* 18px */
  --type-r-2xl-lh: var(--line-height-26);
  /* 26px */

  --type-r-3xl-size: var(--font-size-3xl);
  /* 20px */
  --type-r-3xl-lh: var(--line-height-30);
  /* 30px */

  --type-r-4xl-size: var(--font-size-4xl);
  /* 24px */
  --type-r-4xl-lh: var(--line-height-38);
  /* 38px */

  --type-r-5xl-size: var(--font-size-5xl);
  /* 30px */
  --type-r-5xl-lh: var(--line-height-48);
  /* 48px */

  --type-r-6xl-size: var(--font-size-6xl);
  /* 40px */
  --type-r-6xl-lh: var(--line-height-58);
  /* 58px */

  /* Medium (500) --------------------------------------------- */

  --type-m-2xs-size: var(--font-size-2xs);
  --type-m-2xs-lh: var(--line-height-16);

  --type-m-xs-size: var(--font-size-xs);
  --type-m-xs-lh: var(--line-height-16);

  --type-m-sm-size: var(--font-size-sm);
  --type-m-sm-lh: var(--line-height-18);

  --type-m-md-size: var(--font-size-md);
  --type-m-md-lh: var(--line-height-18);

  --type-m-base-size: var(--font-size-base);
  --type-m-base-lh: var(--line-height-24);

  --type-m-lg-size: var(--font-size-lg);
  --type-m-lg-lh: var(--line-height-24);

  --type-m-xl-size: var(--font-size-xl);
  --type-m-xl-lh: var(--line-height-24);

  --type-m-2xl-size: var(--font-size-2xl);
  --type-m-2xl-lh: var(--line-height-26);

  --type-m-3xl-size: var(--font-size-3xl);
  --type-m-3xl-lh: var(--line-height-30);

  --type-m-4xl-size: var(--font-size-4xl);
  --type-m-4xl-lh: var(--line-height-38);

  --type-m-5xl-size: var(--font-size-5xl);
  --type-m-5xl-lh: var(--line-height-48);

  --type-m-6xl-size: var(--font-size-6xl);
  --type-m-6xl-lh: var(--line-height-58);

  /* Bold (700) ----------------------------------------------- */

  --type-b-2xs-size: var(--font-size-2xs);
  --type-b-2xs-lh: var(--line-height-16);

  --type-b-xs-size: var(--font-size-xs);
  --type-b-xs-lh: var(--line-height-16);

  --type-b-sm-size: var(--font-size-sm);
  --type-b-sm-lh: var(--line-height-18);

  --type-b-md-size: var(--font-size-md);
  --type-b-md-lh: var(--line-height-18);

  --type-b-base-size: var(--font-size-base);
  --type-b-base-lh: var(--line-height-24);

  --type-b-lg-size: var(--font-size-lg);
  --type-b-lg-lh: var(--line-height-24);

  --type-b-xl-size: var(--font-size-xl);
  --type-b-xl-lh: var(--line-height-24);

  --type-b-2xl-size: var(--font-size-2xl);
  --type-b-2xl-lh: var(--line-height-26);

  --type-b-3xl-size: var(--font-size-3xl);
  --type-b-3xl-lh: var(--line-height-30);

  --type-b-4xl-size: var(--font-size-4xl);
  --type-b-4xl-lh: var(--line-height-38);

  --type-b-5xl-size: var(--font-size-5xl);
  --type-b-5xl-lh: var(--line-height-48);

  --type-b-6xl-size: var(--font-size-6xl);
  --type-b-6xl-lh: var(--line-height-58);
}

/* =============================================================
   Responsive tokens — 3 breakpoints
     desktop : 1024–1920 (default, defined above)
     tablet  :  768–1023 (max-width: 1023px)
     mobile  :  360–767  (max-width: 767px)
   Redefines the semantic --spacing-*, heading --font-size-*, and
   --radius-* custom properties per breakpoint. Component CSS keeps
   using the same var() calls — values narrow automatically via the
   cascade. Small/body font sizes (2xs–xl) are left unchanged for
   legibility. --radius-none/--radius-full are intentionally excluded
   (0 stays 0; full must stay huge to keep pill/circle shapes round).
   ============================================================= */

@media (max-width: 1023px) {
  :root {
    /* Spacing — tablet */
    --spacing-base: 14px;
    --spacing-lg: 18px;
    --spacing-xl: 20px;
    --spacing-2xl: 28px;
    --spacing-3xl: 32px;
    --spacing-4xl: 48px;
    --spacing-5xl: 60px;

    /* Font size — tablet (headings only) */
    --font-size-2xl: 17px;
    --font-size-3xl: 19px;
    --font-size-4xl: 22px;
    --font-size-5xl: 26px;
    --font-size-6xl: 32px;

    /* Border radius — tablet (--radius-none/-full excluded: 0 stays 0, full must stay huge to keep pill/circle shapes) */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
  }
}

@media (max-width: 767px) {
  :root {
    /* Spacing — mobile */
    --spacing-2xs: 4px;
    --spacing-xs: 6px;
    --spacing-sm: 8px;
    --spacing-md: 10px;
    --spacing-base: 12px;
    --spacing-lg: 14px;
    --spacing-xl: 16px;
    --spacing-2xl: 20px;
    --spacing-3xl: 24px;
    --spacing-4xl: 32px;
    --spacing-5xl: 40px;

    /* Font size — mobile (headings only) */
    --font-size-2xl: 16px;
    --font-size-3xl: 18px;
    --font-size-4xl: 20px;
    --font-size-5xl: 24px;
    --font-size-6xl: 28px;

    /* Border radius — mobile */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
  }
}