/*
 * 성우웰라이프 디자인 토큰 v1 (2026-11-05 대표님 확정) — docs/디자인-시스템.md
 * 새 CSS 는 여기 있는 변수만 쓴다. 색·크기를 직접 적지 않는다(tests/design-rules.test.js 가 본다).
 */

/* ── 글꼴: Freesentation (SIL OFL 1.1, 사이트에 직접 싣는다. 한글 2,780자 · 드문 글자는 다음 글꼴로) ── */
@font-face { font-family: "Freesentation"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/Freesentation-4Regular.woff2") format("woff2"); }
@font-face { font-family: "Freesentation"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/Freesentation-5Medium.woff2") format("woff2"); }
@font-face { font-family: "Freesentation"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/Freesentation-6SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Freesentation"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/Freesentation-7Bold.woff2") format("woff2"); }
@font-face { font-family: "Freesentation"; font-weight: 800; font-style: normal; font-display: swap; src: url("/assets/fonts/Freesentation-8ExtraBold.woff2") format("woff2"); }

:root {
  /* ══ 색 팔레트 (배경 60 : 보조 30 : 강조 10) ══ */

  /* 배경 60 — 흰색·아이보리·모래 */
  --sw-surface: #ffffff;
  --sw-surface-cream: #f8f6f1;  /* 섹션 바탕 */
  --sw-surface-sand: #f4ede1;   /* 강조 면 */

  /* 보조 30 — 남색 계열 (제목·헤더·진한 바탕·보조 버튼·가격 칸) */
  --sw-navy-950: #092037;       /* 가장 어두운 바탕 (꼬리말) */
  --sw-navy-900: #10263f;       /* 기본 남색 */
  --sw-navy-700: #30445a;       /* 남색 위 보조·소제목 */
  --sw-navy-50: #eaeff5;        /* 남색 옅은 바탕 (가격 칸·합계·보조 버튼 누를 때) */
  /* 장식 — 금색은 로고·작은 머리말·짧은 구분선에만. 바탕·버튼·글자 강조에 쓰지 않는다 */
  --sw-gold-600: #a77636;
  --sw-gold-300: #c8a777;

  /* 강조 10 — 주황 하나. 행동 버튼과 핵심 숫자(최대 혜택가·합계 금액)에만 */
  --sw-orange-600: #fb660c;
  --sw-orange-700: #e55c0a;     /* 누를 때 */
  --sw-orange-50: #fdf2e9;      /* 옅은 바탕 */

  /* 글자 */
  --sw-text: #172b40;           /* 본문 (남색이 섞인 짙은 색) */
  --sw-text-muted: #617080;     /* 보조 설명 */
  --sw-text-on-dark: #ffffff;
  --sw-text-on-dark-muted: #c7d1d9;
  --sw-black: #111111;          /* 검정이 필요하면 #000 대신 이것 */

  /* 선 */
  --sw-line: #e6e3dc;
  --sw-line-strong: #ded5c7;

  /* 상태 */
  --sw-danger: #c23b3b;
  --sw-success: #2f7d55;
  --sw-focus: #c58c49;          /* 키보드 포커스 테두리 */
  --sw-kakao: #fee500;          /* 카카오 버튼 노랑 (카카오 규정 색이라 바꾸지 않는다) */

  /* 상품색은 2026-11-05 로 없앴다. 세 상품 모두 남색 한 계열을 쓴다(옛 이름은 남색을 가리킨다) */
  --sw-plan-quiet: var(--sw-navy-900);   --sw-plan-quiet-dk: var(--sw-navy-950);   --sw-plan-quiet-tint: var(--sw-navy-50);
  --sw-plan-family: var(--sw-navy-900);  --sw-plan-family-dk: var(--sw-navy-950);  --sw-plan-family-tint: var(--sw-navy-50);
  --sw-plan-classic: var(--sw-navy-900); --sw-plan-classic-dk: var(--sw-navy-950); --sw-plan-classic-tint: var(--sw-navy-50);

  /* ══ 글꼴 ══ */
  --sw-font: "Freesentation", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;

  /* 글자 크기: 48 · 32 · 20 · 18 · 16 · 14 여섯 단계만. 본문 18(모바일 16) · 14 는 본문에 쓰지 않는다 */
  --sw-fs-14: 14px;   /* 라벨·각주 */
  --sw-fs-16: 16px;   /* 버튼·모바일 본문 */
  --sw-fs-18: 18px;   /* 본문 */
  --sw-fs-20: 20px;   /* 카드 제목·큰 버튼 */
  --sw-fs-32: 32px;   /* 섹션 제목 */
  --sw-fs-48: 48px;   /* 페이지 제목 */

  --sw-fw-regular: 400;
  --sw-fw-medium: 500;
  --sw-fw-semibold: 600;
  --sw-fw-bold: 700;
  --sw-fw-heavy: 800;   /* 숫자 강조(가격)에만 */

  --sw-lh-tight: 1.2;   /* 제목 */
  --sw-lh-body: 1.6;    /* 본문 */
  --sw-ls: -0.02em;     /* 자간: 모든 글자 -2% */

  /* ══ 여백: 8의 배수만 (8·16·24·32·48·64·96). 4px 은 선·점 같은 세부에만 ══ */
  --sw-space-1: 4px;  --sw-space-2: 8px;   --sw-space-3: 16px;  --sw-space-4: 16px;
  --sw-space-5: 24px; --sw-space-6: 24px;  --sw-space-8: 32px;  --sw-space-10: 48px;
  --sw-space-12: 48px; --sw-space-16: 64px; --sw-space-20: 96px; --sw-space-24: 96px;
  --sw-section-y: 96px;  /* 섹션 위아래 (모바일 64px) */
  --sw-container: 1200px;
  --sw-gutter: 24px;     /* 좌우 여백: 태블릿 24 · 모바일 16 */

  /* ══ 라운드 ══ */
  --sw-radius-sm: 8px;
  --sw-radius-md: 12px;
  --sw-radius-lg: 16px;
  --sw-radius-xl: 24px;
  --sw-radius-pill: 999px;
  --sw-radius-circle: 50%;

  /* ══ 그림자 (남색 기준 4단계) ══ */
  --sw-shadow-sm: 0 2px 8px rgba(16, 38, 63, .06);
  --sw-shadow-md: 0 8px 32px rgba(16, 38, 63, .08);
  --sw-shadow-lg: 0 16px 48px rgba(16, 38, 63, .14);
  --sw-shadow-overlay: 0 40px 112px rgba(10, 14, 24, .45);

  /* ══ 움직임 ══ */
  --sw-dur-fast: 150ms;
  --sw-dur-base: 250ms;
  --sw-dur-slow: 400ms;
  --sw-ease: cubic-bezier(.2, .8, .2, 1);

  /* ══ 겹침 순서 ══ */
  --sw-z-base: 1;
  --sw-z-sticky: 40;
  --sw-z-header: 50;
  --sw-z-float: 60;
  --sw-z-popup: 80;
  --sw-z-modal: 100;
  --sw-z-modal-over: 110;  /* 상담 팝업 위에서 여는 전화 팝업 */
  --sw-z-toast: 120;
}
@media (max-width: 760px) {
  :root { --sw-section-y: 64px; }
}
@media (max-width: 560px) {
  :root { --sw-gutter: 16px; }
}

/* 화면 너비 구간은 세 개만: 모바일 ≤ 560px · 태블릿 ≤ 760px · 좁은 데스크톱 ≤ 1100px */