/* ─────────────────────────────────────────────────────────────
   brand.css — 마케팅 사이트 공통 토큰 + 기본 타이포
   (shell.css 다음에 로드. shell.css는 콘솔과 공유하므로 수정하지 않음)

   사용처: index / services / pricing / trial / inquiry
   ───────────────────────────────────────────────────────────── */
:root {
  /* ── Brand ──
     같은 계열 안에서 강도가 올라가는 스케일.
     단계 진행이나 상태 변화는 다른 색으로 튀지 않고 이 안에서 표현한다.
     (blush → light → medium → brand → deep magenta) */
  --brand-050:    #fff2f6;   /* blush — tint 배경, 진행 전 상태 */
  --brand-100:    #fde3ee;   /* light pink */
  --brand-200:    #f9c2da;   /* medium light */
  --brand-300:    #ef8ab3;   /* medium */
  --brand-400:    #dd4a84;   /* strong */
  --brand:        #c8115a;   /* brand pink — 핵심 CTA·선택 상태 */
  --brand-dark:   #a00e49;   /* deep — hover */
  --brand-deep:   #7a0b38;   /* deepest magenta — 최종 단계 */
  --brand-line:   #f0e3e8;   /* page-head 하단 경계선 */

  /* ── Navy / Slate ──
     제목 · 프리미엄 영역 · 강한 대비가 필요한 요소.
     브랜드 핑크가 화면을 뒤덮지 않도록 위계의 두 번째 축을 담당한다. */
  --navy:         #0f1f3d;
  --navy-2:       #1a3260;
  --navy-text:    #94a3b8;   /* 다크 배경 위 보조 텍스트 */
  --slate-900:    #16233d;   /* 제목 잉크 */
  --slate-700:    #33415c;   /* 강조 텍스트·번호 */
  --slate-500:    #64748b;   /* 보조 텍스트·아이콘 */
  --slate-400:    #94a3b8;   /* 목록 체크 등 최약 강조 */
  --slate-200:    #dde4ee;   /* 라인 */
  --slate-100:    #eaeff6;   /* 이어톡 카드 배경 */
  --slate-050:    #f5f7fb;

  /* ── 의미색 ──
     온라인 · 정상 · 완료처럼 뜻이 명확한 상태에만 쓴다.
     장식용 accent 로는 쓰지 않는다.
     상담사 이관 같은 브랜드 플로우의 단계 변화는 amber 가 아니라
     위 brand 스케일(연한 핑크 → 브랜드 핑크 → 진한 마젠타)로 표현한다. */
  --ok:           #10b981;   /* 온라인 · 정상 · 완료 */
  --ok-soft:      #ecfdf5;

  /* ── Ink (텍스트) ── */
  --ink:          #111;
  --ink-2:        #444;
  --ink-3:        #6b7280;
  --ink-4:        #9ca3af;

  /* ── Surface / Line ── */
  --bg:           #ffffff;
  --bg-2:         #fafafa;
  --line:         #ececec;
  --line-2:       #f0f0f0;

  /* ── Radius ── */
  --r-card:       16px;
  --r-sm:         10px;
  --r-pill:       999px;

  /* ── Shadow (2단만 사용) ── */
  --sh-1:         0 1px 2px rgba(17,17,17,.04);
  --sh-2:         0 8px 24px rgba(17,17,17,.07);

  /* ── Layout ── */
  --wrap:         1200px;   /* 일반 페이지·주요 콘텐츠 */
  --wrap-wide:    1240px;   /* 넓은 플로우·비교·큰 인터랙션 */
  --wrap-table:   1280px;   /* pricing 7열 요금표처럼 정말 필요한 곳만 */
  --wrap-narrow:  760px;    /* 긴 설명문 등 가독성 우선 */

  --wrap-pad:     40px;

  /* ── Section rhythm ── */
  --sec-y:        96px;
  --sec-y-tight:  64px;

  /* ── Type scale ── */
  --fs-h1:        44px;
  --fs-h2:        30px;
  --fs-h3:        18px;
  --fs-body:      15px;
  --fs-cap:       13px;
  --lh-body:      1.75;

  /* Noto 단일. shell.css의 --font-sans를 덮어쓴다. */
  --font-sans: "Noto Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ─────────────────────────────────────────────────────────────
   Base — shell.css(콘솔 기준 14px)를 마케팅 기준으로 되돌림
   ───────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: #333;
  background: var(--bg);
}

/* ─────────────────────────────────────────────────────────────
   Type scale — 기존 클래스명을 그대로 쓰되 값만 통일
   (index 32 / services 30 / trial 30 / pricing 28 → 30px)
   ───────────────────────────────────────────────────────────── */
h1.hero-title,
h2.sec-title { color: var(--slate-900); }

h2.sec-title {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  text-wrap: balance;
}

.sec-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 10px;
}

.sec-sub {
  color: var(--ink-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0;
  max-width: 660px;
}

@media (max-width: 900px) {
  h2.sec-title { font-size: 26px; }
}
@media (max-width: 600px) {
  h2.sec-title { font-size: 23px; }
  .sec-sub { font-size: 14px; }
}