/* ==========================================================================
   PALDYN — design tokens & base
   이 파일이 index.html / ascend/ / ascend/privacy/ 의 단일 진실 공급원이다.
   페이지별 CSS에서 :root 토큰을 다시 선언하지 말 것.

   수치 근거: apple.com · tesla.com · microsoft.com 을 1512px에서 실측해 얻은 규칙.
   · 행간은 비율이 아니라 가산이다 (제목 +4px / 본문 +8px)
   · 트래킹은 크기의 함수다 (28px 이상 전부 -0.025em 고정)
   · 섹션 수직 리듬은 상수 하나다 (144px, 큰 단락 전환에서만 1.5배 한 번)
   ========================================================================== */

:root {
  /* ── 표면 ──────────────────────────────────────────────────────────────
     광원 규칙: 카드는 밴드보다 밝다. 떠 있는 물체가 더 어두우면 재질이 거짓말을 한다. */
  --bg: #ffffff;
  --surface-1: #f2f2f2;          /* 밴드 — 바닥 */
  --surface-2: #ffffff;          /* 카드 — 밴드 위로 떠 있다 */
  --border-subtle: #e6e6e6;      /* 장식 헤어라인 */
  --border: #d2d2d2;             /* 경계 */
  --border-strong: #949494;      /* 인터랙티브 컨트롤 3.03:1 */
  --text: #101010;               /* 19.03:1 */
  --text-dim: #5c5c5c;           /* 6.69:1 */
  --text-mute: #6b6b6b;          /* 흰 배경 5.30:1 */
  --accent-bright: #000000;
  --focus: #000000;

  /* 포인트 컬러 — AI Lab이 --brand: #ff6400 으로 쓰는 오렌지가 팔딘의 색이다.
     라이트 배경에서 #ff6400은 2.97:1로 미달이라 같은 계열의 어두운 값을 쓴다
     (#bf4100 = 흰 배경 5.29:1). 장식이 아니라 신호로만 쓴다. */
  --brand: #bf4100;
  --brand-vivid: #ff6400;

  --nav-bg: #ffffff;
  --overlay-bg: rgba(255, 255, 255, 0.98);
  /* 격자(--grid-line)는 삭제했다. 네모칸은 팔딘의 형태 언어가 아니다 —
     배경에 반복 도형이 필요하면 심볼과 같은 팔각형을 쓴다. */
  --gradient-silver: linear-gradient(135deg, #9a9a9a 0%, #555 40%, #1a1a1a 50%, #555 60%, #9a9a9a 100%);

  /* ── 고도 ──────────────────────────────────────────────────────────────
     사각 표면은 box-shadow, 잘린 표면(clip-path)은 drop-shadow. 값은 같다.
     clip-path는 box-shadow를 함께 잘라내 한 픽셀도 남기지 않는다.
     규칙 ① 둘째 층 blur는 항상 Y의 2배(광원 하나) ② 평상 상태도 크기 0으로 선언한다
     (none→값은 보간되지 않아 툭 튀고, 0→값은 자라난다). */
  --sh-flat:  0 0 0 rgb(0 0 0 / 0.10), 0 0 0 rgb(0 0 0 / 0.12);
  --sh-rest:  0 0 1px rgb(0 0 0 / 0.10), 0 2px 4px rgb(0 0 0 / 0.12);
  --sh-lift:  0 0 1px rgb(0 0 0 / 0.10), 0 8px 16px rgb(0 0 0 / 0.14);
  --sh-overlay: 0 8px 32px rgb(0 0 0 / 0.12), 0 8px 16px rgb(0 0 0 / 0.12);
  --dp-flat: drop-shadow(0 0 0 rgb(0 0 0 / 0.10)) drop-shadow(0 0 0 rgb(0 0 0 / 0.12));
  --dp-rest: drop-shadow(0 0 1px rgb(0 0 0 / 0.10)) drop-shadow(0 2px 4px rgb(0 0 0 / 0.12));
  --dp-lift: drop-shadow(0 0 1px rgb(0 0 0 / 0.10)) drop-shadow(0 8px 16px rgb(0 0 0 / 0.14));
  --dp-sunk: drop-shadow(0 0 1px rgb(0 0 0 / 0.10)) drop-shadow(0 1px 2px rgb(0 0 0 / 0.12));

  /* ── 타입 스케일 ─────────────────────────────────────────────────────── */
  --fs-1: 0.75rem;    /* 12 마이크로 캡스 */
  --fs-2: 0.8125rem;  /* 13 메타 */
  --fs-3: 0.9375rem;  /* 15 사실 줄 */
  --fs-4: 1.0625rem;  /* 17 본문 */
  --fs-5: 1.375rem;   /* 22 소제목 */
  --fs-6: 2rem;       /* 32 */
  --fs-7: clamp(2.25rem, 3.6vw, 3.25rem);  /* 섹션 제목 */
  --fs-8: clamp(2.4rem, 6vw, 4.9rem);      /* 디스플레이 */

  /* 트래킹 램프 — 크기를 색인으로 하는 단조 곡선. 28px 이상은 하나로 잠근다. */
  --ls-caps: 0.18em;      /* 12px 대문자 라벨 — 유일한 양수 */
  --ls-13: -0.008em;
  --ls-15: -0.012em;
  --ls-17: -0.016em;
  --ls-20: -0.020em;
  --ls-22: -0.021em;
  --ls-display: -0.025em; /* 28px 이상 전부 */

  /* 웨이트 — Wanted Sans Variable의 wght 축은 400~1000이다(300 없음).
     옵티컬 사이즈 컷이 없으므로 웨이트 낙차로 위계를 만든다. */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* ── 간격 ─────────────────────────────────────────────────────────────── */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;
  --s9: 96px;  --s10: 128px;

  /* 섹션 수직 리듬 — 데스크톱 값 집합은 {144, 216} 둘뿐이다 */
  --section-pad: 144px;
  --section-pad-lg: calc(var(--section-pad) * 1.5);

  /* ── 레이아웃 축 ──────────────────────────────────────────────────────── */
  --page-max: 1280px;      /* 캔버스 */
  --page-narrow: 860px;
  --measure: 34em;         /* 읽는 문단 — ch은 '0' 글리프 폭 기준이라 한글에서 어긋난다 */
  --measure-tight: 25em;   /* 카드 안 문단 */
  --measure-lead: 15em;    /* 선언문 — 유일한 예외 */
  --gutter: clamp(20px, 4vw, 48px);
  --radius-pill: 999px;    /* 예외가 필요할 때만 (ascend 페이지의 상태 필) */

  /* ── 모션 ─────────────────────────────────────────────────────────────
     이징 4종, 각각 역할이 하나씩. duration 상한 480ms. */
  --e-sig: cubic-bezier(0.22, 1, 0.36, 1);    /* 진입·리빌·고도 — 기본 */
  --e-exit: cubic-bezier(0.4, 0, 1, 1);       /* 이탈 전용 */
  --e-inout: cubic-bezier(0.33, 0, 0.67, 1);  /* 왕복(언더라인·테마) */
  --e-mech: cubic-bezier(0.33, 0, 0.12, 1);   /* 선 그리기 전용 */
  --d-0: 100ms; --d-1: 160ms; --d-2: 240ms; --d-3: 320ms; --d-4: 480ms;

  /* 인터랙티브 상태 — 침묵이 '안 정했다'가 아니라 '같기로 정했다'가 되도록 명시한다 */
  --i-fg: var(--text-dim);
  --i-fg-hover: var(--text);
  --i-line: var(--border-strong);
  --i-line-hover: var(--text);
}

/* 다크 — 시스템 설정이 기본, data-theme는 명시적 오버라이드.
   아래 두 블록은 반드시 동일한 값을 유지할 것. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --surface-1: #0d0d0d;
    --surface-2: #191919;
    --border-subtle: #1c1c1c;
    --border: #2a2a2a;
    --border-strong: #5c5c5c;
    --text: #ededed;
    --text-dim: #8a8a8a;
    --text-mute: #949494;
    --accent-bright: #ffffff;
    --focus: #ffffff;
    --brand: #ff6400;
    --brand-vivid: #ff6400;
    --nav-bg: #000000;
    --overlay-bg: rgba(0, 0, 0, 0.98);
    --gradient-silver: linear-gradient(135deg, #5a5a5a 0%, #c8c8c8 40%, #ffffff 50%, #c8c8c8 60%, #5a5a5a 100%);
    /* 검정 위 검정 그림자는 거의 안 보인다 — 알파를 올리고, 고도의 실제 신호는 상단 1px 스페큘러가 진다 */
    --sh-rest:  0 0 1px rgb(0 0 0 / 0.26), 0 2px 4px rgb(0 0 0 / 0.30);
    --sh-lift:  0 0 1px rgb(0 0 0 / 0.26), 0 8px 16px rgb(0 0 0 / 0.34);
    --sh-overlay: 0 8px 32px rgb(0 0 0 / 0.30), 0 8px 16px rgb(0 0 0 / 0.30);
    --dp-rest: drop-shadow(0 0 1px rgb(0 0 0 / 0.26)) drop-shadow(0 2px 4px rgb(0 0 0 / 0.30));
    --dp-lift: drop-shadow(0 0 1px rgb(0 0 0 / 0.26)) drop-shadow(0 8px 16px rgb(0 0 0 / 0.34));
    --dp-sunk: drop-shadow(0 0 1px rgb(0 0 0 / 0.26)) drop-shadow(0 1px 2px rgb(0 0 0 / 0.30));
  }
}

:root[data-theme="dark"] {
  --bg: #000000;
  --surface-1: #0d0d0d;
  --surface-2: #191919;
  --border-subtle: #1c1c1c;
  --border: #2a2a2a;
  --border-strong: #5c5c5c;
  --text: #ededed;
  --text-dim: #8a8a8a;
  --text-mute: #949494;
  --accent-bright: #ffffff;
  --focus: #ffffff;
  --brand: #ff6400;
  --brand-vivid: #ff6400;
  --nav-bg: #000000;
  --overlay-bg: rgba(0, 0, 0, 0.98);
  --gradient-silver: linear-gradient(135deg, #5a5a5a 0%, #c8c8c8 40%, #ffffff 50%, #c8c8c8 60%, #5a5a5a 100%);
  --sh-rest:  0 0 1px rgb(0 0 0 / 0.26), 0 2px 4px rgb(0 0 0 / 0.30);
  --sh-lift:  0 0 1px rgb(0 0 0 / 0.26), 0 8px 16px rgb(0 0 0 / 0.34);
  --sh-overlay: 0 8px 32px rgb(0 0 0 / 0.30), 0 8px 16px rgb(0 0 0 / 0.30);
  --dp-rest: drop-shadow(0 0 1px rgb(0 0 0 / 0.26)) drop-shadow(0 2px 4px rgb(0 0 0 / 0.30));
  --dp-lift: drop-shadow(0 0 1px rgb(0 0 0 / 0.26)) drop-shadow(0 8px 16px rgb(0 0 0 / 0.34));
  --dp-sunk: drop-shadow(0 0 1px rgb(0 0 0 / 0.26)) drop-shadow(0 1px 2px rgb(0 0 0 / 0.30));
}

@media (max-width: 1024px) { :root { --section-pad: 96px; } }
@media (max-width: 720px)  { :root { --section-pad: 64px; } }

/* ── reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  font-family: 'Wanted Sans Variable', 'Wanted Sans', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-4);
  font-weight: var(--fw-regular);
  /* ★ body에는 비율만 쓴다 — calc(1em + Npx)는 <length>라 상속 시 px으로 얼어붙어
     15px 자식이 25px 행간을 물려받는다. 가산 규칙은 아래에서 요소별로만 건다. */
  line-height: 1.5;
  letter-spacing: var(--ls-17);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; }

/* 행간 = 가산. 제목 +4 / 중간 +6 / 본문 +8 / 라벨 1 */
h1, h2, h3 { line-height: calc(1em + 4px); }
h1 { letter-spacing: var(--ls-display); font-weight: var(--fw-semibold); }
h2 { letter-spacing: var(--ls-display); font-weight: var(--fw-semibold); }
h3 { letter-spacing: var(--ls-22); font-weight: var(--fw-semibold); }
p, li, dd { line-height: calc(1em + 8px); }

/* 숫자 정렬은 숫자가 세로로 쌓이는 곳에만 */
.odo span, .plate-id, .res-id, .principle-no, .section-index { font-variant-numeric: tabular-nums; }

.wrap {
  width: min(100% - 2 * var(--gutter), var(--page-max));
  margin-inline: auto;
}

.eyebrow {
  font-size: var(--fs-1);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-mute);
  line-height: 1;
}

/* 포커스 — 파일 전체에 단 하나의 규칙 */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}
:focus:not(:focus-visible) { outline: none; }

.silver {
  background: var(--gradient-silver);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@media (forced-colors: active) {
  .silver { background: none; -webkit-text-fill-color: currentColor; color: CanvasText; }
}

/* ── 모션 안전망 ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { transform: none !important; transition: opacity 200ms linear !important; }
}

[data-motion="reduced"] { scroll-behavior: auto; }
[data-motion="reduced"] *,
[data-motion="reduced"] *::before,
[data-motion="reduced"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}
/* 스크롤 타임라인은 duration이 진행률로 재해석되므로 명시적으로 끈다 */
[data-motion="reduced"] .spine::after { animation: none !important; transform: scaleY(1); }
[data-motion="reduced"] .reveal { transform: none !important; transition: opacity 200ms linear !important; }

/* 무JS 안전망 */
.reveal { opacity: 1; }
.js .reveal {
  opacity: 0;
  transition:
    opacity var(--d-4) var(--e-sig) var(--reveal-delay, 0ms),
    transform var(--d-4) var(--e-sig) var(--reveal-delay, 0ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* 인쇄 */
@media print {
  :root, :root[data-theme="dark"], :root[data-theme="light"] {
    --bg: #ffffff;
    --surface-1: #ffffff;
    --surface-2: #ffffff;
    --border-subtle: #cccccc;
    --border: #999999;
    --border-strong: #666666;
    --text: #000000;
    --text-dim: #333333;
    --text-mute: #555555;
    --accent-bright: #000000;
    --brand: #000000;
    --brand-vivid: #000000;
    --sh-rest: none; --sh-lift: none; --sh-flat: none;
    --dp-rest: none; --dp-lift: none; --dp-sunk: none; --dp-flat: none;
  }
  body { background: #fff !important; color: #000 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .contact { background: #fff !important; color: #000 !important; }
  .contact .section-title, .contact .ch-mail, .contact .ch-note,
  .contact .eyebrow, .contact .section-index { color: #000 !important; opacity: 1 !important; }
  .plate, .plate-in { background: #fff !important; filter: none !important; }
  nav, .nav-overlay, .icon-btn, .skip { display: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
}