/* 허브 디자인 토큰 — 색·글자·간격·모션은 여기 한 곳에만. 화면 CSS·JS 에 숫자(ms·색)를 직접 쓰지 않는다(시험으로 검사). */
@font-face {
  font-family: 'Pretendard Variable';
  src: url('/fonts/PretendardVariable.woff2') format('woff2-variations');
  font-weight: 45 920; font-style: normal; font-display: swap;
}

:root {
  /* 글자 */
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
  --fs-display: clamp(2.75rem, 1.6rem + 5.4vw, 6.5rem);
  --fs-h1: clamp(2.1rem, 1.4rem + 3vw, 4rem);
  --fs-h2: clamp(1.6rem, 1.2rem + 1.7vw, 2.6rem);
  --fs-h3: clamp(1.12rem, 1rem + .4vw, 1.35rem);
  --fs-lead: clamp(1.05rem, .98rem + .45vw, 1.35rem);
  --fs-body: 1rem;
  --fs-sm: .875rem;
  --fs-xs: .75rem;
  --track-display: -0.045em;
  --track-tight: -0.025em;

  /* 간격·모양 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 144px;
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1240px;
  --r-sm: 8px; --r: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;

  /* 모션 — 길이는 배율(--m-scale, 관리자 설정)을 곱해 쓴다 */
  --m-scale: 1;
  --dur-fast: calc(120ms * var(--m-scale));
  --dur: calc(220ms * var(--m-scale));
  --dur-slow: calc(420ms * var(--m-scale));
  --dur-story: calc(760ms * var(--m-scale));
  --dur-ambient: calc(5200ms * var(--m-scale));
  --stagger: calc(45ms * var(--m-scale));
  /* 멈추면 안 되는 표시(진행 표시)는 배율이 0이어도 최소 속도를 지킨다 */
  --dur-spin: calc(760ms * max(var(--m-scale), .6));
  --dur-shimmer: calc(1400ms * max(var(--m-scale), .5));
  --dur-shake: calc(380ms * max(var(--m-scale), .3));
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);
  --lift: -3px;
  --press: .97;
  --reveal-y: 28px;

  /* 공통 상태색 */
  --ok: #22c55e; --warn: #f59e0b; --danger: #ef4444; --info: #60a5fa;
  /* 허브 자체 강조(무지개 대신 두 색) */
  --hub-a: #7c8cff; --hub-b: #2dd4bf;
}

/* 어둡게(기본: OS 설정을 따름) */
:root, :root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #07080b;
  --bg-2: #0b0d12;
  --surface: #101319;
  --surface-2: #161a22;
  --surface-3: #1d222c;
  --line: rgba(255, 255, 255, .075);
  --line-2: rgba(255, 255, 255, .13);
  --text: #f3f5f9;
  --text-2: #a6aebd;
  --text-3: #687183;
  --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 20px 50px -20px rgba(0, 0, 0, .7);
  --shadow-lg: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 40px 120px -30px rgba(0, 0, 0, .85);
  --glass: rgba(16, 19, 25, .66);
  --scrim: rgba(3, 4, 6, .62);
  --grain-opacity: .05;
  --stage: #050608;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    color-scheme: light;
    --bg: #f7f7f9;
    --bg-2: #f0f1f4;
    --surface: #ffffff;
    --surface-2: #f5f6f8;
    --surface-3: #eceef2;
    --line: rgba(12, 18, 32, .08);
    --line-2: rgba(12, 18, 32, .14);
    --text: #0b0d12;
    --text-2: #4c5566;
    --text-3: #8a93a3;
    --shadow: 0 1px 2px rgba(12, 18, 32, .05), 0 18px 40px -22px rgba(12, 18, 32, .22);
    --shadow-lg: 0 2px 6px rgba(12, 18, 32, .05), 0 40px 100px -30px rgba(12, 18, 32, .3);
    --glass: rgba(255, 255, 255, .72);
    --scrim: rgba(10, 12, 18, .38);
    --grain-opacity: .035;
    --stage: #e9ebef;
  }
}
:root[data-theme='light'] {
  color-scheme: light;
  --bg: #f7f7f9;
  --bg-2: #f0f1f4;
  --surface: #ffffff;
  --surface-2: #f5f6f8;
  --surface-3: #eceef2;
  --line: rgba(12, 18, 32, .08);
  --line-2: rgba(12, 18, 32, .14);
  --text: #0b0d12;
  --text-2: #4c5566;
  --text-3: #8a93a3;
  --shadow: 0 1px 2px rgba(12, 18, 32, .05), 0 18px 40px -22px rgba(12, 18, 32, .22);
  --shadow-lg: 0 2px 6px rgba(12, 18, 32, .05), 0 40px 100px -30px rgba(12, 18, 32, .3);
  --glass: rgba(255, 255, 255, .72);
  --scrim: rgba(10, 12, 18, .38);
  --grain-opacity: .035;
  --stage: #e9ebef;
}

/* 움직임 설정(관리자) + OS 「동작 줄이기」 */
:root[data-motion='calm'] { --m-scale: 1.6; --lift: -1px; --reveal-y: 12px; }
:root[data-motion='off'] { --m-scale: 0; --lift: 0px; --reveal-y: 0px; --press: 1; }
@media (prefers-reduced-motion: reduce) {
  :root { --m-scale: 0; --lift: 0px; --reveal-y: 0px; --press: 1; }
}

/* 작품 강조색: 요소에 --acc-l(밝게)·--acc-d(어둡게)를 주고 .acc-scope 를 붙이면 테마에 맞는 --acc 가 된다 */
.acc-scope { --acc: var(--acc-d); }
@media (prefers-color-scheme: light) { :root:not([data-theme='dark']) .acc-scope { --acc: var(--acc-l); } }
:root[data-theme='light'] .acc-scope { --acc: var(--acc-l); }