/* 더헤아림 소개 사이트 디자인 토큰. 정본: 04_디자인시스템\소개사이트_디자인시스템_v1.0.md 9절
   밝은 화면이 기본이고, 시스템 설정이 어두우면 자동으로 바뀐다. html[data-theme]로 강제할 수 있다. */
:root {
  /* 고정 브랜드 색(모드와 무관). 남색 면·틸 띠·푸터에 쓴다 */
  --navy: #16283F;
  --navy-deep: #0F1A2B;
  --navy-soft: #22385A;
  --slate: #304662;
  --teal: #1E7A64;
  --teal-deep: #175F4E;
  --mint: #7FD7BF;
  --mint-soft: #93E0CC;

  /* 의미 색: 밝은 화면 */
  --c-primary: #16283F;
  --c-primary-soft: #304662;
  --c-primary-hover: #22385A;
  --c-primary-active: #0F1A2B;
  --c-secondary: #1E7A64;
  --c-secondary-hover: #175F4E;
  --c-accent: #7FD7BF;
  --c-accent-hover: #93E0CC;
  --c-bg: #FFFFFF;
  --c-bg-alt: #F4F6F8;
  --c-surface: #FFFFFF;
  --c-text: #1E2A3A;
  --c-text-muted: #5B6B82;
  --c-text-on-dark: #FFFFFF;
  --c-text-on-dark-muted: #B9C4D3;
  --c-line: #DDE3EA;
  --c-line-strong: #B9C4D3;
  --c-success: #1E7A64;
  --c-warning: #8A5A00;
  --c-error: #B42318;
  --c-focus: #1E7A64;

  /* 버튼 */
  --btn-solid-bg: #1E7A64;
  --btn-solid-bg-hover: #175F4E;
  --btn-solid-text: #FFFFFF;
  --btn-navy-bg: #16283F;
  --btn-navy-bg-hover: #22385A;
  --btn-navy-text: #FFFFFF;

  /* 짙은 띠(수플 소개·통계). 밝은 화면에서는 남색 */
  --band-dark: #16283F;
  --band-dark-text: #FFFFFF;
  --band-dark-muted: #C9D3E0;

  /* 요금 안내 이식용(12_가격정책 .hrmp 변수 대응) */
  --price-strong: #16283F;
  --price-muted: #5B6B82;

  /* 서체 */
  --ff-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --fs-xs: 13px;  --fs-sm: 15px;  --fs-base: 17px;  --fs-lead: 19px;
  --fs-h4: 20px;  --fs-h3: 24px;  --fs-h2: 38px;    --fs-h1: 40px;  --fs-stat: 34px;
  --lh-body: 1.7; --lh-lead: 1.65; --lh-h3: 1.4; --lh-h1: 1.3; --lh-ui: 1.2;
  --ls-h: -0.02em; --ls-h3: -0.01em;

  /* 간격 */
  --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; --sp-30: 120px;
  --sec: 96px;
  --gutter: 40px;

  /* 폭·모서리·그림자 */
  --w: 1180px; --w-prose: 680px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 12px; --r-xl: 14px; --r-pill: 999px;
  --shadow-card: 0 14px 34px rgba(22, 40, 63, 0.12);
  --shadow-device: 0 20px 50px rgba(22, 40, 63, 0.18);
  --shadow-nav: 0 2px 12px rgba(22, 40, 63, 0.06);

  /* 움직임 */
  --dur-fast: 160ms; --dur-base: 240ms; --dur-menu: 200ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);

  /* 상단 */
  --util-h: 36px; --nav-h: 72px;
}

@media (max-width: 899px) {
  :root { --sec: 72px; --gutter: 28px; --nav-h: 64px; }
}
@media (max-width: 639px) {
  :root {
    --sec: 56px; --gutter: 20px; --nav-h: 60px;
    --fs-sm: 14px; --fs-base: 16px; --fs-lead: 17px;
    --fs-h4: 19px; --fs-h3: 21px; --fs-h2: 28px; --fs-h1: 32px; --fs-stat: 30px;
  }
}

/* 어두운 화면: 시스템 설정을 따르되 data-theme="light"로 막을 수 있다 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-primary: #7FD7BF; --c-primary-hover: #93E0CC; --c-primary-active: #66C9AE;
    --c-secondary: #7FD7BF; --c-secondary-hover: #93E0CC;
    --c-bg: #0F1A2B; --c-bg-alt: #16283F; --c-surface: #16283F;
    --c-text: #E6ECF3; --c-text-muted: #A7B4C5;
    --c-line: #2B3B54; --c-line-strong: #3E5070;
    --c-success: #7FD7BF; --c-warning: #F2C14E; --c-error: #F28B82; --c-focus: #7FD7BF;
    --btn-solid-bg: #7FD7BF; --btn-solid-bg-hover: #93E0CC; --btn-solid-text: #0F1A2B;
    --btn-navy-bg: #0F1A2B; --btn-navy-bg-hover: #16283F; --btn-navy-text: #FFFFFF;
    --band-dark: #0B1524;
    --price-strong: #1E7A64; --price-muted: #A7B4C5;
    --shadow-card: 0 14px 34px rgba(0, 0, 0, 0.4);
    --shadow-device: 0 20px 50px rgba(0, 0, 0, 0.5);
    --shadow-nav: 0 2px 12px rgba(0, 0, 0, 0.3);
  }
}
:root[data-theme="dark"] {
  --c-primary: #7FD7BF; --c-primary-hover: #93E0CC; --c-primary-active: #66C9AE;
  --c-secondary: #7FD7BF; --c-secondary-hover: #93E0CC;
  --c-bg: #0F1A2B; --c-bg-alt: #16283F; --c-surface: #16283F;
  --c-text: #E6ECF3; --c-text-muted: #A7B4C5;
  --c-line: #2B3B54; --c-line-strong: #3E5070;
  --c-success: #7FD7BF; --c-warning: #F2C14E; --c-error: #F28B82; --c-focus: #7FD7BF;
  --btn-solid-bg: #7FD7BF; --btn-solid-bg-hover: #93E0CC; --btn-solid-text: #0F1A2B;
  --btn-navy-bg: #0F1A2B; --btn-navy-bg-hover: #16283F; --btn-navy-text: #FFFFFF;
  --band-dark: #0B1524;
  --price-strong: #1E7A64; --price-muted: #A7B4C5;
  --shadow-card: 0 14px 34px rgba(0, 0, 0, 0.4);
  --shadow-device: 0 20px 50px rgba(0, 0, 0, 0.5);
  --shadow-nav: 0 2px 12px rgba(0, 0, 0, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-menu: 0ms; }
}