/* =====================================================================
   수다콜 디자인 토큰 (sudacall.com · desk.sudacall.com 공용 체계)
   ---------------------------------------------------------------------
   - 메인 컬러: 깊고 채도를 낮춘 보라(앱 아이콘 #8620FA 계열에서 출발).
   - 보조색(--c-accent*)만 바꾸면 고객센터 등 다른 사이트가 같은 체계로
     "일관되면서 다르게" 보이도록 설계했다. 자세한 표는 README.md 참고.
   - 대비: 본문·링크·버튼 글자는 모두 WCAG 2.2 AA(4.5:1) 이상으로 맞췄다.
     --c-accent, --c-line 은 장식·구분선 전용(글자에 쓰지 않는다).
   ===================================================================== */
:root {
  color-scheme: light dark;

  /* ── 중립(웜 화이트 · 차콜) ── */
  --c-bg: #faf8f5;            /* 페이지 바탕 */
  --c-surface: #ffffff;       /* 카드 */
  --c-surface-2: #f4f0f7;     /* 옅은 라벤더 면 */
  --c-surface-3: #ece6f2;     /* 강조 면 */
  --c-ink: #1c1922;           /* 본문 글자  (bg 대비 16.4:1) */
  --c-ink-2: #46414f;         /* 보조 글자  (bg 대비 9.3:1) */
  --c-ink-3: #655f70;         /* 흐린 글자  (bg 대비 5.8:1) */
  --c-line: #e4dfe9;          /* 구분선 */
  --c-line-strong: #cfc7d8;

  /* ── 메인: 딥 퍼플 ── */
  --c-primary: #4a2c7a;       /* 링크·강조 글자 (bg 대비 10.3:1) */
  --c-primary-strong: #382060;
  --c-plum-band: #4a2c7a;     /* 요금·다운로드 강조 면은 다크에서도 딥 퍼플 */
  --c-primary-soft: #eee8f7;  /* 배지·칩 바탕 */
  --c-on-primary: #ffffff;
  --c-btn-bg: #4a2c7a;        /* 주 버튼 */
  --c-btn-bg-hover: #3a2163;
  --c-btn-ink: #ffffff;

  /* ── 보조(라벤더) — 사이트마다 이 묶음만 바꾼다 ── */
  --c-accent: #9d88c7;        /* 장식 전용 */
  --c-accent-soft: #e7e0f3;
  --c-accent-ink: #5b4590;    /* 보조색 글자 (bg 대비 7.3:1) */

  /* ── 기능색(차분하게) ── */
  --c-star: #c79a3a;          /* 별 장식 전용 */
  --c-accept: #2f7d5b;        /* 통화 받기 (흰 글자 대비 5.0:1) */
  --c-decline: #b4443f;       /* 통화 거절 (흰 글자 대비 5.5:1) */
  --c-focus: #6b45b0;         /* 키보드 포커스 링 */

  /* ── 폰 목업(라이트·다크 공통으로 밤 화면) ── */
  --c-phone-frame: #17141d;
  --c-phone-screen: #1d1828;
  --c-phone-ink: #f3f0f8;
  --c-phone-ink-2: #bdb5cc;

  /* ── 글꼴 (자체 호스팅 Pretendard와 시스템 대체 글꼴) ── */
  --font-sans: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Segoe UI",
    Roboto, system-ui, sans-serif;
  --font-num: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, var(--font-sans);

  /* ── 글자 크기(유동) ── */
  --fs-xs: 0.8125rem;                                   /* 13px */
  --fs-sm: 0.9375rem;                                   /* 15px */
  --fs-md: 1.0625rem;                                   /* 17px 본문 */
  --fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-xl: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
  --fs-2xl: clamp(1.7rem, 1.25rem + 2vw, 2.6rem);       /* h2 */
  --fs-3xl: clamp(2.1rem, 1.35rem + 3.3vw, 3.75rem);    /* h1 */
  --lh-tight: 1.25;
  --lh-body: 1.75;
  --tracking-tight: -0.022em;

  /* ── 간격(4px 기반) ── */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-section: clamp(4rem, 2.5rem + 6vw, 8rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);        /* 폰 16px ~ 데스크톱 40px */
  --container: 72rem;                                   /* 1152px */
  --container-narrow: 46rem;

  /* ── 모서리 ── */
  --r-sm: 0.5rem;
  --r-md: 0.875rem;
  --r-lg: 1.25rem;
  --r-xl: 1.75rem;
  --r-pill: 999px;

  /* ── 그림자(옅게) ── */
  --sh-1: 0 1px 2px rgb(28 25 34 / 0.05), 0 1px 1px rgb(28 25 34 / 0.03);
  --sh-2: 0 6px 24px -8px rgb(42 26 70 / 0.16), 0 2px 6px rgb(28 25 34 / 0.05);
  --sh-3: 0 30px 70px -24px rgb(42 26 70 / 0.38), 0 10px 24px -12px rgb(28 25 34 / 0.18);

  /* ── 움직임 ── */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 220ms;
}

/* 다크 모드 — 같은 보라를 밤 바탕 위에서 라벤더 톤으로 */
@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #121016;
    --c-surface: #1a1720;
    --c-surface-2: #201b29;
    --c-surface-3: #2a2335;
    --c-ink: #f1eef5;           /* bg 대비 16.5:1 */
    --c-ink-2: #cbc4d6;         /* bg 대비 11.2:1 */
    --c-ink-3: #a59eb2;         /* bg 대비 7.3:1 */
    --c-line: #2d2737;
    --c-line-strong: #3d354a;

    --c-primary: #c9b6ee;       /* bg 대비 10.3:1 */
    --c-primary-strong: #ddd0f5;
    --c-primary-soft: #2a2238;
    --c-on-primary: #1a1426;
    --c-btn-bg: #c9b6ee;
    --c-btn-bg-hover: #ddd0f5;
    --c-btn-ink: #1a1426;       /* 버튼 글자 대비 9.7:1 */

    --c-accent: #7f6aa8;
    --c-accent-soft: #2b2340;
    --c-accent-ink: #bfaee6;

    --c-star: #d8b25e;
    --c-focus: #d2c1f5;

    --c-phone-frame: #08070b;
    --c-phone-screen: #1b1626;

    --sh-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --sh-2: 0 8px 28px -10px rgb(0 0 0 / 0.6);
    --sh-3: 0 30px 80px -24px rgb(0 0 0 / 0.75), 0 0 0 1px rgb(255 255 255 / 0.04);
  }
}