/* 오토핏 시안 B '쇼룸' — tokens.css
   디자인 시스템: Uber 분석본(awesome-design-md/uber, MIT) — 흑백 2색, 모든 버튼·칩 999px 알약, 카드 16px, 굵은 제목 700, 4:3 일러스트, 중간 흑백 반전 띠
   색상: 라이트 = Uber 규격 값(ink #000 · body #5e5e5e · canvas-soft #efefef · black-elevated #282828),
         다크 = Radix Colors grayDark (MIT) 1·2·3·6·11·12 단계, 상태색 = Radix green/red 11 단계(상태 표시에만)
   유동 글자·간격: Utopia utopia-core calculateClamp (ISC), 360~1240px, 양끝 = Uber 모바일/데스크톱 값
   그림자·이징: Open Props (MIT) --shadow-2 형태 / --ease-3
   글꼴: 제목 G마켓 산스 (눈누 배포, G마켓 무료 글꼴 — 상업 사용·웹 임베딩 허용), 본문 Pretendard (OFL 1.1) */
@font-face{font-family:"GmarketSans";font-weight:700;font-display:swap;src:url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff") format("woff")}
@font-face{font-family:"GmarketSans";font-weight:500;font-display:swap;src:url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff") format("woff")}
:root{
  --font-head:"GmarketSans","Pretendard",system-ui,sans-serif;
  --font-body:"Pretendard",system-ui,-apple-system,"Apple SD Gothic Neo",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* 글자: Uber display-xxl 52 / xl 36 / lg 32 / md 24 / sm 20 / body 16~18 / sm 14 */
  --fs-hero:clamp(2.25rem, 1.2273rem + 4.5455vw, 4.75rem);
  --fs-display:clamp(2rem, 1.4886rem + 2.2727vw, 3.25rem);
  --fs-h1:clamp(1.75rem, 1.5455rem + 0.9091vw, 2.25rem);
  --fs-h2:clamp(1.5rem, 1.2955rem + 0.9091vw, 2rem);
  --fs-h3:clamp(1.25rem, 1.1477rem + 0.4545vw, 1.5rem);
  --fs-body:clamp(1rem, 0.9489rem + 0.2273vw, 1.125rem);
  --fs-sm:.875rem;--fs-xs:.8125rem;
  /* 간격: Uber 4/6/8/12/16/20/24/32 + 큰 구역 유동 */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;
  --sp-7:clamp(2.5rem, 1.6818rem + 3.6364vw, 4.5rem);
  --sp-section:clamp(3.5rem, 2.2727rem + 5.4545vw, 6.5rem);
  /* 모양: Uber rounded md 8 / lg 12 / xl 16 / pill 999 */
  --r-md:8px;--r-lg:12px;--r-xl:16px;--r-pill:999px;
  --shadow:0 3px 5px -2px hsl(220 3% 15%/.06),0 7px 14px -5px hsl(220 3% 15%/.12); /* Open Props shadow-2 형태 */
  --ease:cubic-bezier(.25,0,.3,1);--ease-out:cubic-bezier(0,0,.3,1);
  --wrap:1200px;

  --bg:#ffffff;--surface:#ffffff;--soft:#efefef;--softer:#f3f3f3;--pressed:#e2e2e2;
  --border:#e2e2e2;--text:#000000;--text-2:#5e5e5e;
  --primary:#000000;--on-primary:#ffffff;
  --band:#000000;--band-2:#282828;--on-band:#ffffff;--on-band-2:#afafaf;
  --illo-bg:#f3f3f3;--illo-disc:#e2e2e2;--illo-dot:#000000;--illo-ink:#000000;
  --ok:#218358;--ok-soft:#e6f6eb;--bad:#ce2c31;--bad-soft:#feebec;--warn:#ab6400;--warn-soft:#fff7c2;
  --focus:#000000;
}
:root[data-theme="dark"]{
  --bg:#111111;--surface:#191919;--soft:#222222;--softer:#191919;--pressed:#2a2a2a;
  --border:#3a3a3a;--text:#eeeeee;--text-2:#b4b4b4;
  --primary:#eeeeee;--on-primary:#111111;
  --band:#000000;--band-2:#222222;--on-band:#eeeeee;--on-band-2:#b4b4b4;
  --illo-bg:#222222;--illo-disc:#3a3a3a;--illo-dot:#eeeeee;--illo-ink:#eeeeee;
  --ok:#3dd68c;--ok-soft:#132d21;--bad:#ff9592;--bad-soft:#3b1219;--warn:#ffca16;--warn-soft:#302008;
  --shadow:0 3px 5px -2px hsl(220 40% 2%/.5),0 7px 14px -5px hsl(220 40% 2%/.6);
  --focus:#eeeeee;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111111;--surface:#191919;--soft:#222222;--softer:#191919;--pressed:#2a2a2a;
    --border:#3a3a3a;--text:#eeeeee;--text-2:#b4b4b4;
    --primary:#eeeeee;--on-primary:#111111;
    --band:#000000;--band-2:#222222;--on-band:#eeeeee;--on-band-2:#b4b4b4;
    --illo-bg:#222222;--illo-disc:#3a3a3a;--illo-dot:#eeeeee;--illo-ink:#eeeeee;
    --ok:#3dd68c;--ok-soft:#132d21;--bad:#ff9592;--bad-soft:#3b1219;--warn:#ffca16;--warn-soft:#302008;
    --shadow:0 3px 5px -2px hsl(220 40% 2%/.5),0 7px 14px -5px hsl(220 40% 2%/.6);
    --focus:#eeeeee;
  }
}