/* hedvion-ui-kit v1.0.1 - tokens.css
 * 색은 OKLCH. 사이트별 차별화 = --hue-accent / --chroma-accent 두 값만 덮어쓴다(site-theme.css).
 * 명도(L)를 고정해 두어서 휴를 바꿔도 명암비(AA)가 유지된다.
 * 그라데이션 금지 - 전부 단색.
 */
:root {
  /* ---- 사이트 오버라이드 지점 (기본값 = 클레이, 파란 계열 아님) ---- */
  --hue-accent: 38;
  --chroma-accent: 0.11;
  --hue-neutral: 70;       /* 뉴트럴에 아주 약한 온기 */
  --chroma-neutral: 0.006;

  /* ---- 뉴트럴 (라이트) ---- */
  --c-bg:        oklch(98.6% var(--chroma-neutral) var(--hue-neutral));
  --c-surface:   oklch(100% 0 0);
  --c-sunken:    oklch(96.2% var(--chroma-neutral) var(--hue-neutral));
  --c-line:      oklch(90.5% var(--chroma-neutral) var(--hue-neutral));
  --c-line-strong: oklch(82% var(--chroma-neutral) var(--hue-neutral));
  --c-control-line: oklch(60% 0.01 var(--hue-neutral)); /* 입력·체크 테두리 3:1 이상 (WCAG 1.4.11) */
  --c-ink:       oklch(22% 0.01 var(--hue-neutral));
  --c-ink-2:     oklch(38% 0.01 var(--hue-neutral));
  --c-ink-3:     oklch(49% 0.01 var(--hue-neutral)); /* 흰 바탕 4.5:1 이상 */

  /* ---- 액센트 (단일) ---- */
  --c-accent:      oklch(44% var(--chroma-accent) var(--hue-accent));   /* 버튼 바탕·링크 */
  --c-accent-ink:  oklch(36% var(--chroma-accent) var(--hue-accent));   /* 연한 바탕 위 글자 */
  --c-accent-hover:oklch(38% var(--chroma-accent) var(--hue-accent));
  --c-accent-soft: oklch(95% calc(var(--chroma-accent) * .35) var(--hue-accent));
  --c-accent-line: oklch(85% calc(var(--chroma-accent) * .6) var(--hue-accent));
  --c-on-accent:   oklch(99% 0 0);

  /* ---- 상태색 ---- */
  --c-ok:     oklch(45% 0.11 150);
  --c-ok-soft: oklch(95% 0.03 150);
  --c-warn:   oklch(48% 0.11 70);
  --c-warn-soft: oklch(95.5% 0.04 80);
  --c-danger: oklch(48% 0.16 27);
  --c-danger-soft: oklch(95.5% 0.03 27);

  /* ---- 타입 ---- */
  --font-display: 'Gmarket Sans', 'Pretendard Variable', Pretendard, system-ui, sans-serif;
  --font-body: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-num: 'Pretendard Variable', Pretendard, system-ui, sans-serif;
  /* 1.2 모듈러 스케일 + 화면폭 유동 */
  --fs-xs: .8125rem;   /* 13 */
  --fs-sm: .875rem;    /* 14 */
  --fs-md: 1rem;       /* 16 */
  --fs-lg: 1.125rem;   /* 18 */
  --fs-xl: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --fs-2xl: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --fs-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --fs-4xl: clamp(2.125rem, 1.5rem + 3vw, 3.75rem);
  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-body: 1.7;
  --tracking-display: -0.02em;

  /* ---- 간격 (4px 그리드) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
  --gutter: clamp(16px, 4vw, 32px);
  --container: 1180px;       /* 레이아웃 폭(내용 자르기 용도 아님) */
  --measure: 68ch;           /* 본문 한 줄 길이 */
  --header-h: 64px;

  /* ---- 라운드 ---- */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;

  /* ---- 그림자 (아주 옅게, 경계선이 주력) ---- */
  --sh-1: 0 1px 2px oklch(20% 0.01 var(--hue-neutral) / .06);
  --sh-2: 0 4px 16px -4px oklch(20% 0.01 var(--hue-neutral) / .10), 0 1px 2px oklch(20% 0.01 var(--hue-neutral) / .05);
  --sh-3: 0 16px 40px -12px oklch(20% 0.01 var(--hue-neutral) / .22);

  /* ---- 모션 ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 520ms;
  --focus: 0 0 0 3px var(--c-bg), 0 0 0 5px var(--c-accent);

  color-scheme: light;
}

/* ---- 다크: data-theme 명시가 최우선, 없으면 OS 설정 ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg:        oklch(17.5% 0.008 var(--hue-neutral));
    --c-surface:   oklch(21% 0.009 var(--hue-neutral));
    --c-sunken:    oklch(15% 0.008 var(--hue-neutral));
    --c-line:      oklch(30% 0.01 var(--hue-neutral));
    --c-line-strong: oklch(40% 0.01 var(--hue-neutral));
    --c-control-line: oklch(58% 0.01 var(--hue-neutral));
    --c-ink:       oklch(95% 0.005 var(--hue-neutral));
    --c-ink-2:     oklch(82% 0.008 var(--hue-neutral));
    --c-ink-3:     oklch(70% 0.008 var(--hue-neutral));
    --c-accent:      oklch(76% calc(var(--chroma-accent) * .7) var(--hue-accent));
    --c-accent-ink:  oklch(82% calc(var(--chroma-accent) * .65) var(--hue-accent));
    --c-accent-hover:oklch(82% calc(var(--chroma-accent) * .7) var(--hue-accent));
    --c-accent-soft: oklch(27% calc(var(--chroma-accent) * .45) var(--hue-accent));
    --c-accent-line: oklch(42% calc(var(--chroma-accent) * .6) var(--hue-accent));
    --c-on-accent:   oklch(18% 0.01 var(--hue-accent));
    --c-ok: oklch(78% 0.12 150); --c-ok-soft: oklch(27% 0.04 150);
    --c-warn: oklch(82% 0.12 80); --c-warn-soft: oklch(28% 0.04 80);
    --c-danger: oklch(75% 0.14 27); --c-danger-soft: oklch(28% 0.05 27);
    --sh-1: 0 1px 2px oklch(0% 0 0 / .4);
    --sh-2: 0 6px 18px -6px oklch(0% 0 0 / .55);
    --sh-3: 0 18px 44px -12px oklch(0% 0 0 / .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --c-bg:        oklch(17.5% 0.008 var(--hue-neutral));
  --c-surface:   oklch(21% 0.009 var(--hue-neutral));
  --c-sunken:    oklch(15% 0.008 var(--hue-neutral));
  --c-line:      oklch(30% 0.01 var(--hue-neutral));
  --c-line-strong: oklch(40% 0.01 var(--hue-neutral));
  --c-control-line: oklch(58% 0.01 var(--hue-neutral));
  --c-ink:       oklch(95% 0.005 var(--hue-neutral));
  --c-ink-2:     oklch(82% 0.008 var(--hue-neutral));
  --c-ink-3:     oklch(70% 0.008 var(--hue-neutral));
  --c-accent:      oklch(76% calc(var(--chroma-accent) * .7) var(--hue-accent));
  --c-accent-ink:  oklch(82% calc(var(--chroma-accent) * .65) var(--hue-accent));
  --c-accent-hover:oklch(82% calc(var(--chroma-accent) * .7) var(--hue-accent));
  --c-accent-soft: oklch(27% calc(var(--chroma-accent) * .45) var(--hue-accent));
  --c-accent-line: oklch(42% calc(var(--chroma-accent) * .6) var(--hue-accent));
  --c-on-accent:   oklch(18% 0.01 var(--hue-accent));
  --c-ok: oklch(78% 0.12 150); --c-ok-soft: oklch(27% 0.04 150);
  --c-warn: oklch(82% 0.12 80); --c-warn-soft: oklch(28% 0.04 80);
  --c-danger: oklch(75% 0.14 27); --c-danger-soft: oklch(28% 0.05 27);
  --sh-1: 0 1px 2px oklch(0% 0 0 / .4);
  --sh-2: 0 6px 18px -6px oklch(0% 0 0 / .55);
  --sh-3: 0 18px 44px -12px oklch(0% 0 0 / .7);
  color-scheme: dark;
}

/* ---- 폰트 (벤더링된 /ui-kit/fonts, 없으면 CDN woff 폴백)
 * display: optional = 첫 방문에 늦게 오면 그 페이지는 Pretendard 굵은체로 두고 교체하지 않는다(CLS 0, 다음 페이지부터 Gmarket).
 * swap 이면 큰 제목 줄바꿈이 바뀌며 CLS 0.27 실측, preload 하면 133KB 가 첫 화면 CSS 와 대역폭을 다퉈 FCP +1.5s 실측. */
@font-face {
  font-family: 'Gmarket Sans';
  src: url('./fonts/GmarketSansMedium.subset.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
  font-weight: 500; font-display: optional;
}
@font-face {
  font-family: 'Gmarket Sans';
  src: url('./fonts/GmarketSansBold.subset.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
  font-weight: 700; font-display: optional;
}