@charset "UTF-8";
/* =============================================================================
   base.css — 파운데이션 (토큰 / 폰트 / 리셋 / 레이아웃)
   -----------------------------------------------------------------------------
   ⚠️ 이 파일은 코디네이터 소유입니다. 섹션 워커는 수정하지 마세요.
      섹션 스타일은 css/sections/<slug>.css 에만 작성합니다.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. @font-face — Michelin 코퍼레이트 (사용 허가 보유)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Michelin";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/Michelin-Light_20250224.woff2") format("woff2"),
       url("../assets/fonts/Michelin-Light_20250224.woff") format("woff");
}
@font-face {
  font-family: "Michelin";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/Michelin-Regular_20250224.woff2") format("woff2"),
       url("../assets/fonts/Michelin-Regular_20250224.woff") format("woff");
}
@font-face {
  font-family: "Michelin";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/Michelin-SemiBold_20250224.woff2") format("woff2"),
       url("../assets/fonts/Michelin-SemiBold_20250224.woff") format("woff");
}
@font-face {
  font-family: "Michelin";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/Michelin-Bold_20250224.woff2") format("woff2"),
       url("../assets/fonts/Michelin-Bold_20250224.woff") format("woff");
}
@font-face {
  font-family: "Michelin";
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/Michelin-Black_20250224.woff2") format("woff2"),
       url("../assets/fonts/Michelin-Black_20250224.woff") format("woff");
}

/* -----------------------------------------------------------------------------
   2. 디자인 토큰
   -------------------------------------------------------------------------- */
:root {
  /* --- 컬러 (Figma 변수 원본 그대로) --- */
  --c-michelin-dark-blue: #00205b;
  --c-michelin-blue: #27509b;
  --c-michelin-yellow: #fce500;
  --c-sky-blue: #1095f9;
  --c-black: #000000;
  --c-white: #ffffff;
  --c-naver-bg: #03c75a;
  --c-naver-text: #ffffff;

  /* --- 컬러 (파생 · 시맨틱) --- */
  --c-bg: var(--c-white);
  --c-bg-inverse: var(--c-black);
  --c-text: #1a1a1a;
  --c-text-muted: #6b6b6b;
  --c-text-inverse: var(--c-white);
  --c-text-inverse-muted: rgba(255, 255, 255, 0.72);
  --c-line: #e5e5e5;
  --c-line-inverse: rgba(255, 255, 255, 0.16);
  --c-line-inverse-subtle: rgba(255, 255, 255, 0.1); /* 어두운 배경의 항목 구분선 */

  /* --- 컬러 (컴포넌트 variant · Figma 변수에 등록되지 않은 원시값) ---
     Features 카드 컴포넌트는 두 가지 variant 를 가집니다.
     Default  = 반투명 흰색  / Variant2 = 솔리드 블루
     각 인스턴스가 어느 variant 인지는 노드별로 확인해서 적용하세요. */
  --c-card-surface: rgba(255, 255, 255, 0.05);
  --c-card-surface-active: #0f519a;

  /* --- 폰트 패밀리 --- */
  --ff-display: "Michelin", "Pretendard Variable", Pretendard, system-ui, sans-serif;
  --ff-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
             system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  /* --- 폰트 웨이트 --- */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;  /* Pretendard 전용 — Michelin 폰트에는 800 이 없습니다 */
  --fw-black: 900;

  /* --- 타이포 스케일 (모바일 기준 · 1024px에서 재정의) ---
     Figma에 타이포 변수가 없어 실측값으로 축을 세웠습니다.
     hero 실측: 모바일 15/32/14 → PC 24/46/16
     섹션 고유 크기가 스케일과 다르면 워커가 섹션 CSS에서 명시값으로 덮어씁니다. */
  --fs-display-xl: 32px;   /* Hero 헤드라인 */
  --fs-display-lg: 28px;   /* 섹션 대제목 */
  --fs-display-md: 24px;
  --fs-eyebrow:    15px;   /* Hero "An Experience" 류 */
  --fs-title-lg:   22px;   /* 섹션 제목 */
  --fs-title-md:   18px;
  --fs-title-sm:   16px;
  --fs-body-lg:    16px;
  --fs-body:       14px;   /* 본문 기본 */
  --fs-body-sm:    13px;
  --fs-caption:    12px;

  --lh-tight: 1.2;
  --lh-snug: 1.3;
  --lh-base: 1.4;
  --lh-relaxed: 1.6;

  --ls-display: -0.02em;
  --ls-tight: -0.01em;
  --ls-normal: 0;

  /* --- 스페이싱 (4px 베이스) --- */
  --s-4: 4px;    --s-8: 8px;    --s-12: 12px;  --s-16: 16px;
  --s-20: 20px;  --s-24: 24px;  --s-32: 32px;  --s-40: 40px;
  --s-48: 48px;  --s-56: 56px;  --s-64: 64px;  --s-80: 80px;
  --s-96: 96px;  --s-120: 120px;

  /* --- 레이아웃 --- */
  --container-max: 1140px;  /* PC 아트보드 폭과 동일 */
  --gutter: 24px;           /* 모바일 좌우 여백 (375 - 327 = 48 / 2) */

  /* --- 기타 --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

/* --- 1024px 이상: PC 스케일로 전환 --- */
@media (min-width: 1024px) {
  :root {
    --fs-display-xl: 46px;
    --fs-display-lg: 40px;
    --fs-display-md: 32px;
    --fs-eyebrow:    24px;
    --fs-title-lg:   28px;
    --fs-title-md:   22px;
    --fs-title-sm:   18px;
    --fs-body-lg:    18px;
    --fs-body:       16px;
    --fs-body-sm:    14px;
    --fs-caption:    13px;

    --gutter: 64px;
  }
}

/* -----------------------------------------------------------------------------
   3. 리셋
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-tight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* 마퀴·캐러셀 오버플로가 페이지를 밀지 않도록 */
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

img, video {
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

address { font-style: normal; }
table { border-collapse: collapse; }

/* hidden 속성은 브라우저 기본 스타일의 [hidden]{display:none} 으로 동작하는데,
   작성자 스타일시트의 display 선언(.footer__panel{display:flex} 등)이 항상 이깁니다.
   리셋에서 !important 로 고정해야 hidden 이 실제로 먹습니다. (표준 리셋 관행) */
[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--c-sky-blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -----------------------------------------------------------------------------
   4. 레이아웃 유틸
   -------------------------------------------------------------------------- */

/* 모든 섹션의 기본 래퍼. 워커는 이 클래스를 재정의하지 말고
   섹션 클래스에서 padding 등을 덮어쓰세요. */
.section {
  position: relative;
  width: 100%;
}

/* 표준 컨테이너 — 최대 1140px, 좌우 거터 */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* PC에서 더 좁은 본문 폭이 필요한 섹션용 (예: Event Info 1012px) */
.container--narrow {
  max-width: calc(1012px + var(--gutter) * 2);
}

/* PC에서 푸터처럼 900px 폭이 필요한 경우 */
.container--tight {
  max-width: calc(900px + var(--gutter) * 2);
}

/* 반응형 표시 제어 — 1024px 기준 */
.only-mobile { display: initial; }
.only-pc { display: none; }
@media (min-width: 1024px) {
  .only-mobile { display: none; }
  .only-pc { display: initial; }
}

/* 스크린리더 전용 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 가로 스크롤 트랙 공통 (Pillars / Features 캐러셀에서 사용)
   스크롤바를 숨기되 접근성은 유지 */
.scroll-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.scroll-track::-webkit-scrollbar { display: none; }
.scroll-track > * { scroll-snap-align: center; flex: 0 0 auto; }