/* ============================================================
   영자봇 디자인 토큰
   출처: DesignMD — Stripi-Inspired-design-analysis (designmd.co)
   ※ 값을 임의로 바꾸지 말 것. 스펙이 곧 규칙이다.
   ※ 템플릿 안에서 :root{} 를 다시 선언하지 말 것.
   ============================================================ */

:root{
  /* ── 브랜드 & 액센트 ──────────────────────── */
  --primary:#533afd;                  /* 시그니처 CTA. 밴드당 채운 버튼 1개만 */
  --primary-deep:#4434d4;
  --primary-press:#2e2b8c;
  --primary-soft:#665efd;
  --primary-bg-subdued-hover:#b9b9f9; /* 연한 태그 배경 */
  --brand-dark-900:#1c1e54;           /* 강조 요금제 · 대시보드 크롬 */
  --ruby:#ea2261;                     /* 메시/차트 전용 — 버튼 금지 */
  --magenta:#f96bee;
  --lemon:#9b6829;
  --shadow-blue:#003770;

  /* ── 텍스트 ───────────────────────────────── */
  --ink:#0d253d;                      /* 본문 기본. 순검정 아님 */
  --ink-secondary:#273951;
  --ink-mute:#64748d;
  --ink-mute-2:#61718a;
  --on-primary:#ffffff;

  /* ── 표면 ─────────────────────────────────── */
  --canvas:#ffffff;
  --canvas-soft:#f6f9fc;
  --canvas-cream:#f5e9d4;             /* 따뜻한 간주 밴드 */
  --hairline:#e3e8ee;
  --hairline-input:#a8c3de;

  /* ── 모서리 ───────────────────────────────── */
  --r-xs:4px;                         /* 태그·표 크롬 */
  --r-sm:6px;                         /* 입력 필드 */
  --r-md:8px;                         /* 컴팩트 카드·알림 */
  --r-lg:12px;                        /* 요금·기능 카드 */
  --r-xl:16px;                        /* 목업 크롬 */
  --r-pill:9999px;                    /* 모든 버튼·태그 */

  /* ── 간격 (base 8px) ──────────────────────── */
  --sp-xxs:2px; --sp-xs:4px; --sp-sm:8px; --sp-md:12px;
  --sp-lg:16px; --sp-xl:24px; --sp-xxl:32px; --sp-huge:64px;

  /* ── 그림자 ───────────────────────────────── */
  --el-1:rgba(0,55,112,.08) 0 1px 3px;
  --el-2:rgba(0,55,112,.08) 0 8px 24px, rgba(0,55,112,.04) 0 2px 6px;

  /* ── 타이포 ───────────────────────────────── */
  /* Sohne는 유료. 스펙 권장 대체는 Inter 300.
     한글이 필요하므로 Inter 호환 한글 폰트인 Pretendard를 같은 자리에 둔다. */
  --font:sohne-var,'Pretendard Variable',Pretendard,Inter,
         'SF Pro Display',system-ui,-apple-system,sans-serif;

  /* ── 세이프에어리어 ───────────────────────── */
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);

  /* ── 컨테이너 ─────────────────────────────── */
  --wrap:1200px;
  --wrap-app:640px;

  /* ══════════════════════════════════════════
     하위호환 별칭 — 아직 이관 안 된 구 템플릿용.
     이관 끝나면 이 블록 삭제.
     ══════════════════════════════════════════ */
  --brand:var(--primary);
  --brand-hover:var(--primary-deep);
  --brand-dark:var(--primary-press);
  --brand-soft:var(--primary-bg-subdued-hover);
  --brand-ring:rgba(83,58,253,.28);
  --body:var(--ink-secondary);
  --muted:var(--ink-mute);
  --faint:var(--ink-mute-2);
  --canvas-alt:var(--canvas-soft);
  --card:var(--canvas);
  --card-alt:var(--canvas-soft);
  --line:var(--hairline);
  --line-strong:var(--hairline-input);
  --success:#09825d; --success-soft:#e3f9f0;
  --warning:#9b6829; --warning-soft:#fdf3e3;
  --danger:var(--ruby); --danger-soft:#fdeaf0;
  --info:var(--primary); --info-soft:#eeecff;
  --r:var(--r-md);
  --sh-sm:var(--el-1); --sh:var(--el-1); --sh-lg:var(--el-2);
  --sh-brand:var(--el-1);
  --bg:var(--canvas-soft); --bg2:var(--canvas); --bg3:var(--canvas-soft);
  --line2:var(--hairline-input); --text:var(--ink);
  --sub:var(--ink-mute); --sub2:var(--ink-mute-2);
  --pt:var(--primary); --pt-dim:var(--primary-bg-subdued-hover);
  --m-blue-dark:var(--primary); --m-blue-light:var(--primary-deep);
  --m-red:var(--ruby);
  --hairline-strong:var(--hairline-input);
  --surface-card:var(--canvas); --surface-elevated:var(--canvas-soft);
  --surface-soft:var(--canvas-soft);
  --body-strong:var(--ink); --on-dark:var(--ink);
}

/* ── 리셋 & 기본 ───────────────────────────── */
*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  font-family:var(--font);
  font-size:15px;                     /* body-md */
  font-weight:300;
  line-height:1.4;
  color:var(--ink);
  background:var(--canvas);
  font-feature-settings:"ss01";       /* 스펙: body에 전역 적용 */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* 디스플레이 계층 — 굵기 300 고정, 음수 자간이 브랜드 시그니처 */
h1,h2,h3,h4{color:var(--ink);font-weight:300;margin:0}
h1{font-size:56px;line-height:1.03;letter-spacing:-1.4px}
h2{font-size:32px;line-height:1.1;letter-spacing:-.64px}
h3{font-size:26px;line-height:1.12;letter-spacing:-.26px}
h4{font-size:20px;line-height:1.4;letter-spacing:-.2px}

a{color:var(--primary);text-decoration:none}

/* 돈·숫자 셀 — 스펙 필수 */
.tnum{font-feature-settings:"tnum";letter-spacing:-.42px}

:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* ── 모바일: 디스플레이 계단 축소 ──────────── */
@media(max-width:767px){
  h1{font-size:36px;letter-spacing:-.9px}
  h2{font-size:26px;letter-spacing:-.4px}
  h3{font-size:22px;letter-spacing:-.22px}
}

/* ── 인쇄: 견적서는 흰 A4 ──────────────────── */
@media print{
  :root{--canvas:#fff;--canvas-soft:#fff}
  body{background:#fff;color:#000}
}