/* Design tokens — Figma: 디자인 스터디 / Header / Desktop (54:38) */
:root {
  /* spacing */
  --space-0: 0px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;

  /* radius */
  --radius-full: 9999px;

  /* color */
  --color-header-bg: #d0d0d0;
  --color-text: #000000;
  --color-button-bg: #39393a;
  --color-button-text: #e7e7e7;

  /* typography */
  --font-sans: "Google Sans Flex", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  /* index / about 공용 */
  --font-pretendard: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  --font-outfit: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sf: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
    Arial, sans-serif;

  /* Body/B4 · 16 Regular */
  --font-body-b4-size: 16px;
  --font-body-b4-weight: 400;
  --font-body-b4-line-height: 1.5;

  /* Label/L2 · 18 Medium */
  --font-label-l2-size: 18px;
  --font-label-l2-weight: 500;
  --font-label-l2-line-height: 1.2;

  /* 화면 배율.
     Figma 프레임은 1920 기준이라 실제 화면(≈1512pt)에서 1:1로 그리면 헤더가 커 보인다.
     0.75 = 크롬 75% 줌으로 보던 크기와 동일. 이 값 하나만 바꾸면 헤더 전체가 같이 스케일된다. */
  --header-scale: 0.75;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-variation-settings: "GRAD" 0, "ROND" 0, "wdth" 100;
  -webkit-font-smoothing: antialiased;
}

/* Header / Desktop — Figma 1920 × 90, 아래 값은 모두 Figma 원본 × --header-scale */
.header {
  --s: var(--header-scale);

  /* 스크롤해도 상단에 고정 */
  position: sticky;
  top: 0;
  z-index: 100;

  --h-height: calc(90px * var(--s));           /* Figma 90 */
  --h-content-width: calc(1400px * var(--s));  /* Figma 1400 */
  --h-pad-y: calc(var(--space-16) * var(--s)); /* Figma --space-16 */
  /* 컨테이너가 뷰포트를 꽉 채우는 좁은 폭에서도 좌우가 붙지 않도록 최소 거터 확보 */
  --h-gutter: clamp(
    calc(var(--space-24) * var(--s)),
    5.5vw,
    calc(120px * var(--s))
  );

  --h-logo-width: calc(142.676px * var(--s));  /* Figma 142.676 */
  --h-logo-height: calc(31.952px * var(--s));  /* Figma 31.952 */

  --h-nav-gap: calc(var(--space-32) * var(--s));
  /* 네비만 0.75 스케일(12px)보다 크게. Figma Body/B4 는 16px 이지만
     실제 화면에서 너무 작아 보여 별도 값으로 뺀다. */
  --h-link-size: 14px;

  --h-cta-gap: calc(var(--space-8) * var(--s));
  --h-cta-pad-y: calc(var(--space-16) * var(--s));
  --h-cta-pad-x: calc(var(--space-32) * var(--s));
  --h-cta-size: calc(var(--font-label-l2-size) * var(--s));

  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--space-24) * var(--s));
  min-height: var(--h-height);
  padding: var(--h-pad-y) var(--h-gutter);
  background-color: var(--color-header-bg);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: var(--h-content-width);
  max-width: 100%;
  padding: var(--space-0);
}

/* Logo — Lab Void */
.header__logo {
  display: block;
  flex-shrink: 0;
  width: var(--h-logo-width);
  height: var(--h-logo-height);
  line-height: 0;
}

.header__logo img {
  display: block;
  width: var(--h-logo-width);
  height: var(--h-logo-height);
}

/* Nav links — Body/B4 · 16 Regular */
.header__nav {
  display: flex;
  align-items: center;
  gap: var(--h-nav-gap);
  padding: var(--space-0);
  flex-shrink: 0;
}

.header__link {
  color: var(--color-text);
  font-size: var(--h-link-size);
  font-weight: var(--font-body-b4-weight);
  line-height: var(--font-body-b4-line-height);
  letter-spacing: 0;
  font-variation-settings: "GRAD" 0, "ROND" 0, "wdth" 100;
  text-decoration: none;
  white-space: nowrap;
  word-break: break-word;
  transition: opacity 0.15s ease;
}

.header__link:hover {
  opacity: 0.7;
}

/* Button — Label/L2 · 18 Medium */
.header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--h-cta-gap);
  flex-shrink: 0;
  padding: var(--h-cta-pad-y) var(--h-cta-pad-x);
  border-radius: var(--radius-full);
  background-color: var(--color-button-bg);
  color: var(--color-button-text);
  font-size: var(--h-cta-size);
  font-weight: var(--font-label-l2-weight);
  line-height: var(--font-label-l2-line-height);
  letter-spacing: 0;
  font-variation-settings: "GRAD" 0, "ROND" 0, "wdth" 100;
  text-decoration: none;
  white-space: nowrap;
  word-break: break-word;
  transition: opacity 0.15s ease;
}

.header__cta:hover {
  opacity: 0.85;
}

/* ── 스케일 캔버스 ───────────────────────────────────────────── */
.page {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.page__canvas {
  width: 1920px;
  transform-origin: top left;
  transform: scale(var(--page-scale, 1));
}

.sect {
  position: relative;
  width: 1920px;
  overflow: hidden;
}

.sect img {
  display: block;
}