@charset "UTF-8";

@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");
}

:root {

  --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-strong: #b4b4b4;
  --c-line-inverse: rgba(255, 255, 255, 0.16);
  --c-line-inverse-subtle: rgba(255, 255, 255, 0.1);

  --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;
  --fw-black: 900;

  --fs-display-xl: 32px;
  --fs-display-lg: 28px;
  --fs-display-md: 24px;
  --fs-eyebrow:    15px;
  --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;

  --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;
  --gutter: 24px;

  --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;
}

@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;
  }
}

*, *::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] {
  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;
  }
}

.section {
  position: relative;
  width: 100%;
}

.container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: calc(1012px + var(--gutter) * 2);
}

.container--tight {
  max-width: calc(900px + var(--gutter) * 2);
}

.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;
}

.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; }