/* 가온배터리(가칭) 디자인 토큰 — 값만 둔다(DESIGN.md §2). 부품·화면은 이 이름만 쓴다.
   방향: 흰 머리·흰 본문 + 어두운 큰 비주얼(먹남색) + 강조색 하나(전기 파랑). 붉은 강조는 쓰지 않는다.
   공개 화면은 라이트 한 가지(참고 사이트처럼 흰 본문) — 어두운 곳은 비주얼·문구 띠·바닥글로 정해 둔다. */

:root {
  /* 바탕·글자 */
  --bg: #ffffff;
  --bg-soft: #f4f6f9;          /* 구역 나눔 바탕 */
  --surface: #ffffff;
  --surface-2: #f4f6f9;
  --surface-3: #e9edf3;
  --text: #111722;
  --text-2: #3f4a5c;
  --text-3: #5f6b7d;           /* 흰 바탕 위 4.5:1 이상 */
  --line: #e3e7ee;
  --line-strong: #c7cfdb;
  --overlay: rgba(6, 10, 20, .6);

  /* 강조(전기 파랑) — 하나만. 흰 바탕 작은 글자도 4.5:1 이상 */
  --brand: #0a5cff;
  --brand-hover: #0848c4;
  --brand-ink: #0a55ec;
  --brand-soft: #e8f0ff;
  --brand-on-dark: #6aa8ff;    /* 어두운 바탕 위 파랑 글자 */
  --on-brand: #ffffff;
  --focus: #0a5cff;

  /* 어두운 곳(첫 화면 비주얼·문구 띠·하위 비주얼) */
  --dark: #0b1426;
  --dark-2: #13203a;
  --on-dark: #ffffff;
  --on-dark-2: #c9d3e3;
  --on-dark-line: rgba(255, 255, 255, .22);
  --scrim: linear-gradient(90deg, rgba(8, 14, 28, .78) 0%, rgba(8, 14, 28, .45) 55%, rgba(8, 14, 28, .2) 100%);
  --scrim-right: linear-gradient(270deg, rgba(8, 14, 28, .8) 0%, rgba(8, 14, 28, .5) 50%, rgba(8, 14, 28, .15) 100%);   /* 오른쪽 문구 구역(첫 화면 제품정보) */
  --scrim-center: rgba(8, 14, 28, .52);

  /* 바닥글(짙은 회색) */
  --foot-bg: #1c2029;
  --foot-bg-2: #151820;
  --foot-text: #b4bccb;
  --foot-text-2: #8e98aa;
  --foot-line: #2c313c;
  --foot-pill: #0f1218;        /* 패밀리 사이트 단추·펼침 */
  --foot-pill-hover: #222833;
  --foot-chip: #2a2f3a;        /* SNS 동그라미 */

  /* 데모 표시(관리자 목록에서만) */
  --demo-soft: #efe6ff;
  --demo-ink: #5b2bb8;

  /* 상태 */
  --success: #0f7a4a; --success-soft: #e3f5ec;
  --warn: #8a5300;    --warn-soft: #fff1d6;
  --danger: #c4231d;  --danger-soft: #fde8e7;
  --on-danger: #ffffff;

  /* 툴팁·토스트 */
  --tip-bg: #111722;
  --tip-text: #f3f6fb;
  --tip-ok: #5fe0a4;
  --tip-err: #ff8f8a;

  /* 관리자 틀(§5 — 지금 어느 쪽인지 바로 보이게) */
  --admin-bar: #0b1426;
  --admin-bar-text: #ffffff;
  --admin-tag: #6aa8ff;
  --admin-side: #ffffff;
  --admin-bg: #f4f6f9;

  /* 간격 */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px;
  --space-9: 64px; --space-10: 96px; --space-11: 128px;   /* 큰 구역 사이에만 */

  /* 글자 — 본문 16. 12px 미만 없음 */
  --text-xs: 12px; --text-sm: 14px; --text-md: 16px; --text-lg: 18px;
  --text-xl: 20px; --text-2xl: 24px; --text-3xl: 32px;
  --display-sm: clamp(28px, 4.6vw, 40px);     /* 페이지 제목·구역 제목 */
  --display: clamp(34px, 6.2vw, 64px);         /* 첫 화면 큰 문구 */
  --display-en: clamp(40px, 7.4vw, 88px);      /* 영문 머리말(얇게) */
  --leading-tight: 1.25;
  --leading-normal: 1.7;
  --weight-light: 300; --weight-normal: 400; --weight-medium: 500; --weight-bold: 700; --weight-heavy: 800;
  --tracking-tight: -0.025em;
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;

  /* 모서리 — 참고 사이트처럼 각진 편(카드·버튼 4px), 둥근 것은 알약 단추·점만 */
  --r-sm: 4px; --r: 6px; --r-lg: 10px; --r-full: 999px;
  --shadow-1: 0 1px 2px rgba(17, 23, 34, .06);
  --shadow-card: 0 1px 2px rgba(17, 23, 34, .04), 0 12px 28px -16px rgba(17, 23, 34, .18);
  --shadow-2: 0 20px 48px -16px rgba(17, 23, 34, .3);
  --control-h-sm: 40px; --control-h-md: 48px; --control-h-lg: 56px;

  /* 폭·높이 */
  --container: 1280px;
  --container-narrow: 960px;
  --gutter: 20px;
  --topbar-h: 72px;
  --sub-visual-h: clamp(300px, 40vw, 520px);

  /* 움직임 — 참고 사이트 정도(구역 등장·비주얼 확대). 움직임 줄이기면 끈다(base.css) */
  --dur: 180ms;
  --dur-slow: 560ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  color-scheme: light;
}

@media (min-width: 600px) { :root { --gutter: 32px; } }
@media (min-width: 960px) { :root { --topbar-h: 88px; --gutter: 40px; } }