/*
 * scale.css — 안전이지 디자인 스케일 토큰 (간격·타이포·모서리·그림자)
 * ─────────────────────────────────────────────────────────────
 * 왜 필요한가:
 *   색은 tokens.css로 단일화됐지만 형태·간격·타이포는 인라인에 박혀 있었다
 *   (font-size 2,192곳 · padding 2,201곳 · border-radius 1,107곳).
 *   그 결과 스킨이 selector 977개로 인라인을 "눌러서" 덮어쓰는 구조가 됐다.
 *   → 값이 요소마다 다른 축은 "토큰 1개"가 아니라 "스케일"로 묶는 게 정답.
 *
 * 규칙:
 *   - 신규 코드는 px 하드코딩 금지. 이 스케일 토큰을 쓴다.
 *   - 스킨은 이 토큰만 재정의한다(selector 오버라이드 추가 금지).
 *   - tokens.css(자동생성)와 분리 — 재생성돼도 이 파일은 안전.
 *
 * 로드 순서: tokens.css → scale.css → styles.css → skin-*.css
 */

:root {
  /* ── 간격 (padding·margin·gap) ─────────────────────────────
     기존 인라인 빈출값(4·6·8·10·12·14·16·20·24·32)을 그대로 담아 무손실 치환 */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-1h: 6px;
  --sp-2: 8px;
  --sp-2h: 10px;
  --sp-3: 12px;
  --sp-3h: 14px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;

  /* ── 타이포 크기 ─────────────────────────────────────────
     --fs-md(13px) = 본문 기준. 인라인 최빈값이 13px(515곳)이라 기준으로 삼음 */
  --fs-2xs: 10px;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-lg: 15px;
  --fs-xl: 18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;

  /* ── 타이포 굵기·행간 ───────────────────────────────────── */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;
  --lh-tight: 1.35;
  --lh-normal: 1.55;
  --lh-loose: 1.75;

  /* ── 모서리 ─────────────────────────────────────────────
     --r-md(8px) = 표준(인라인 611곳). --r-full은 원형 아바타·토글 전용(스킨에서도 유지)
     ⚠ `--r-lg` `--r-md` `--r-sm` 3개는 **skin-v2.css·skin-clear.css가 이미 소유**한다
        (v2 16/12/8 · clear 12/8/8). 두 파일이 뒤에 로드되므로 해당 스킨에서는 그쪽 값이 최종이다.
        여기 :root 값은 classic·ind용 기본값. 이 3개를 스킨 블록에서 다시 정의하지 말 것(소유권 분열). */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 50%;
  --r-pill: 999px;

  /* ── 그림자 ───────────────────────────────────────────── */
  --sh-none: none;
  --sh-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --sh-md: 0 4px 20px rgba(0, 0, 0, 0.05);
  --sh-lg: 0 10px 30px rgba(0, 0, 0, 0.08);
  /* 카드 그림자 의미 토큰 — classic은 기존 .card(--card-shadow)와 동일하게 두어
     마이그레이션 중 신·구 카드가 섞여도 이질감이 없게 한다. 산업 스킨은 아래에서 none. */
  --sh-card: var(--sh-md);

  /* ── 테두리 두께 ──────────────────────────────────────── */
  --bw-hair: 1px;
  --bw-thick: 2px;
  --bw-accent: 3px;   /* 카드 좌측 강조 바 */
}

/* ── 산업 스킨(ind): 각진 종이·그림자 0 ─────────────────────
   기존엔 selector 977개로 인라인을 눌렀지만, 스케일 토큰을 쓰는 코드는
   아래 재정의만으로 전부 반영된다(= 새 코드는 selector 추가 불필요). */
html[data-skin="ind"] {
  --r-xs: 0;
  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;
  --r-xl: 0;
  --r-pill: 0;
  /* --r-full(50%)은 원형 아바타·토글 스위치라 유지 */
  --sh-sm: none;
  --sh-md: none;
  --sh-lg: none;
  --sh-card: none;
}

/* ── v2 / clear 스킨 ────────────────────────────────────────
   ⚠ 중요: 이 두 스킨은 `--r-lg/--r-md/--r-sm`(형태)과 `--shadow`를 **이미 자기 파일에서 소유**한다
   (skin-v2 16/12/8 · skin-clear 12/8/8·그림자 없음). 두 파일이 scale.css보다 뒤에 로드되므로
   여기서 같은 이름을 다시 정의하면 소유권이 갈라지고 값이 어긋난다(2026-07-31 재점검에서 실측).
   → 모서리·그림자는 **스킨이 소유**하게 두고, 여기서는 스킨이 안 가진 축(간격·카드그림자 연결)만 맞춘다. */
html[data-skin="v2"] {
  --sh-card: var(--shadow);   /* 스킨이 정의한 그림자를 그대로 따름 */
}
html[data-skin="clear"] {
  /* 정보 밀도 우선 — 간격 한 단계 축소(스킨 파일엔 간격 토큰이 없어 여기서 소유) */
  --sp-4: 14px;
  --sp-5: 18px;
  --sp-6: 20px;
  --sh-card: var(--shadow);   /* clear = none(헤어라인으로 위계) */
}