@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap");

:root {
  --font-sans:
    "Google Sans Flex", "Roboto Flex", "Pretendard Variable", Pretendard,
    -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo",
    "Malgun Gothic", sans-serif;
  --font-kr:
    "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-en:
    "Google Sans Flex", "Roboto Flex", -apple-system, BlinkMacSystemFont,
    system-ui, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  --fs-display-xl: 96px;
  --fs-display-l: 72px;
  --fs-display-m: 56px;
  --fs-h1: 48px;
  --fs-h2: 36px;
  --fs-h3: 28px;
  --fs-h4: 22px;
  --fs-h5: 18px;
  --fs-body-l: 18px;
  --fs-body-m: 16px;
  --fs-body-s: 14px;
  --fs-label-l: 14px;
  --fs-label-m: 13px;
  --fs-caption: 12px;

  --lh-display: 0.95;
  --lh-headline: 1.1;
  --lh-heading: 1.2;
  --lh-subheading: 1.3;
  --lh-body: 1.6;
  --lh-tight: 1.4;

  --tracking-display: -0.04em;
  --tracking-headline: -0.025em;
  --tracking-heading: -0.02em;
  --tracking-subheading: -0.01em;
  --tracking-body: 0;
  --tracking-eyebrow: 0.06em;

  --color-text-primary: #1a1a1a;
  --color-text-secondary: #4a4a4a;
  --color-text-tertiary: #767676;
  --color-text-disabled: #b0b0b0;
  --color-text-link: #1a1a1a;
  --color-text-accent: #6b8cc7;

  --color-text-on-dark-primary: #ffffff;
  --color-text-on-dark-secondary: #c4bdb6;
  --color-text-on-dark-tertiary: #8a847e;

  --color-bg-base: #ffffff;
  --color-bg-subtle: #f7f6f4;
  --color-bg-muted: #ebe9e5;
  --color-bg-inverse: #1a1613;
  --color-bg-accent: #6b8cc7;

  --color-border-subtle: #e7e5e1;
  --color-border-default: #d4d1cc;
  --color-border-strong: #1a1a1a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body-m);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-text-primary);
  background: var(--color-bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "ss02", "cv01", "cv11";
}

.t-display-xl,
.t-display-l,
.t-display-m,
.t-h1,
.t-h2,
.t-h3,
.t-h4,
.t-h5 {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text-primary);
}

.t-display-xl {
  font-size: var(--fs-display-xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}

.t-display-l {
  font-size: var(--fs-display-l);
  font-weight: var(--fw-extrabold);
  line-height: 1.0;
  letter-spacing: -0.03em;
}

.t-display-m {
  font-size: var(--fs-display-m);
  font-weight: var(--fw-extrabold);
  line-height: 1.05;
  letter-spacing: var(--tracking-headline);
}

.t-h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-headline);
  letter-spacing: var(--tracking-heading);
}

.t-h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  letter-spacing: var(--tracking-heading);
}

.t-h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  letter-spacing: var(--tracking-subheading);
}

.t-h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-subheading);
  letter-spacing: var(--tracking-subheading);
}

.t-h5 {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.t-body-l {
  font-size: var(--fs-body-l);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
}

.t-body-m {
  font-size: var(--fs-body-m);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
}

.t-body-s {
  font-size: var(--fs-body-s);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.t-label-l {
  font-size: var(--fs-label-l);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}

.t-label-m {
  font-size: var(--fs-label-m);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}

.t-eyebrow {
  font-size: var(--fs-label-m);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.t-caption {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--color-text-tertiary);
}

@media (max-width: 768px) {
  :root {
    --fs-display-xl: 56px;
    --fs-display-l: 44px;
    --fs-display-m: 36px;
    --fs-h1: 32px;
    --fs-h2: 26px;
    --fs-h3: 22px;
    --fs-h4: 18px;
  }
}