/* 자동 생성 파일 — 원본 redesign/shared/type.css · 반영 redesign/_tools/release.js. 여기서 직접 고치지 말 것 */
/* shared/type.css — 서브페이지 글자 크기 토큰(결정 87). services · pricing · trial · signup · inquiry · login만 불러옴(D3 메인은 안 씀).
   9단계 — 제목 세 단계만 601~1100px에서 부드럽게 줄고, 나머지는 600px 기준으로만 바뀜.
   크기 고정 규칙이 있는 곳(제품 장면 · 계산기 숫자 · "예시 화면" 라벨 · 공용 헤더 · 푸터)은 토큰을 쓰지 않음 — 표 `_audit/type-audit.md` */
:root {
  --t-h1: clamp(30px, 10.8px + 3.2vw, 46px);    /* 페이지 제목 700 · 1.18 · -0.025em */
  --t-h2: clamp(26px, 11.6px + 2.4vw, 38px);    /* 섹션 제목 700 · 1.22 · -0.02em */
  --t-h3: clamp(18px, 13.2px + 0.8vw, 22px);    /* 카드 제목 700 · 1.35 · -0.015em */
  --t-lead: 18px;    /* 부제 400 · 1.6 */
  --t-body: 16px;    /* 본문 · 버튼 · 입력칸 · FAQ 질문 400 · 1.65 */
  --t-sub: 15.5px;   /* 보조 본문 — 카드 안 설명 · 표 칸 · 칩 · 폼 부제 400 · 1.6 */
  --t-ey: 14px;      /* 눈썹 600 · 1.4 */
  --t-lab: 14px;   /* 라벨 — 입력칸 이름 · 표 머리 600 */
  --t-cap: 13px;   /* 주석 — 각주 · 도움말 · 메타 · VAT · 배지(600) 400 · 1.55 */
  --t-ey-c: #96103f; --t-ey-c-ink: #ff8fbb;       /* 눈썹 색: 밝은 바탕 / 잉크 바탕 */
  --t-lead-c: #575c66; --t-lead-c-ink: #b9bec8;   /* 부제 색 */
  --t-cap-c: #6b707a;                             /* 주석 색 */
  --t-gap-ey: 12px; --t-gap-lead: 14px; --t-gap-body: 32px;   /* 눈썹 → 제목 · 제목 → 부제 · 부제 → 본문 블록(모든 페이지 · 모바일도 같음) */
}
@media (max-width: 600px) {
  :root { --t-h1: 27px; --t-h2: 23px; --t-h3: 17px; --t-lead: 14.5px; --t-body: 14.5px; --t-sub: 13.5px; --t-ey: 12.5px; --t-lab: 12.5px; --t-cap: 12px; }   /* 2026-10-12 모바일 한 단계 더 작게 — 폰에서 글이 꽉 차 읽기 버거움(사용자). 서비스 · 요금 · 체험 · 상담 · 가입 · 약관 */
}

/* 공용 부품(d3/d.css) — 이 파일을 부르는 서브페이지에서만 덮어씀. D3는 이 파일을 안 불러 지금 값 그대로 */
.vd .d-h2 { font-size: var(--t-h2); line-height: 1.22; letter-spacing: -0.02em; }
.vd .d-eyebrow { font-size: var(--t-ey); font-weight: 600; line-height: 1.4; color: var(--t-ey-c); }
.vd .d-btn, .vd .d-btn--lg, .vd .d-btn--sm { font-size: var(--t-body); }   /* 버튼 글자 = 본문(모바일이 더 크던 곳도 15로) */

/* 간격(결정 87) — 눈썹 → 제목 12 · 제목 → 부제 14. 모든 페이지 · 모바일도 같은 값(옆에 놓인 부제 tr-head-side는 배치가 달라 제외) */
.vd :is(.sv-eyebrow, .d-eyebrow, .pd-ey, .pd-cta-ey, .tr-ey, .su-ey, .iq-ey) { margin-bottom: 0; }
.vd :is(.sv-eyebrow, .d-eyebrow, .pd-ey, .pd-cta-ey, .tr-ey, .su-ey, .iq-ey) + :is(h1, h2) { margin-top: var(--t-gap-ey); }
.vd :is(h1, h2) + :is(.sv-lead, .sv-p, .tr-lead, .tr-rh-d, .tr-cta-d, .pd-cta-lead, .su-lead, .iq-lead, .lg-sub) { margin-top: var(--t-gap-lead); }
/* 부제 → 본문 블록 32(결정 87) — 페이지마다 머리 묶음 구조가 달라 다음 블록 기준으로 맞춤 */
.sv .sv-lead + .sv-cmp, .sv .sv-txt .sv-p + .sv-feat, .sv .sv-txt .sv-p + .sv-chips, .sv .sv-center + .sv-pick, .sv .sv-cta-head + .sv-tiles { margin-top: var(--t-gap-body); }
.pd .pd-cta-lead + .pd-cta-steps { margin-top: var(--t-gap-body); }
.vd.tr .tr-top, .vd.tr .tr-head { margin-bottom: var(--t-gap-body); }
.vd.tr .tr-rh { margin-bottom: calc(var(--t-gap-body) - 40px); }   /* 지그재그 첫 줄의 위 여백(40)까지 더해 부제 → 내용 32 — 줄 높이는 네 줄 같게 둠 */
@media (max-width: 1100px) { .vd.tr .tr-rh { margin-bottom: calc(var(--t-gap-body) - 28px); } }   /* 1100 이하 줄 위 여백 28 */
.tr .tr-cta-d + .tr-cbtn { margin-top: var(--t-gap-body); }
.su .su-lead + .su-prev, .iq .iq-lead + .iq-pass { margin-top: var(--t-gap-body); }
.vd.lg .lg-head { margin-bottom: var(--t-gap-body); }

/* 여백 규칙 하나로(2026-10-12) — 서브페이지 전부:
   섹션 위아래 = --sec-y(PC 80 · 760 이하 44) · 머리(제목/부제) → 내용 = 32(PC · 모바일 같음) · 어두운 마무리 CTA = PC 96 · 760 이하 64.
   왼쪽 글 칸 안: 부제 → 칩 · 칩 → 기능 목록 · 부제 → 기능 목록 = 24 */
html body.vd { --head-gap: var(--t-gap-body); }
html body.sv .sv-end-cta, html body.pd #start.pd-cta, html body.tr .tr-cta { padding-top: 96px; padding-bottom: 96px; }
html body.tr .tr-refine { padding-top: var(--sec-y); }
html body.sv .sv-txt .sv-p + .sv-chips, html body.sv .sv-txt .sv-chips + .sv-feat, html body.sv .sv-split .sv-txt .sv-p + .sv-feat { margin-top: 24px; }
@media (max-width: 760px) {
  html body.sv .sv-end-cta, html body.pd #start.pd-cta, html body.tr .tr-cta { padding-top: 64px; padding-bottom: 64px; }
}

/* 첫 화면 · 카드 규칙(2026-10-12) — 서브페이지 전부(메인 D3 제외):
   첫 화면 = 헤더 아래 첫 글(눈썹/제목 · 약관은 문서 탭)까지 PC 64 · 760 이하 40. 로그인은 화면 가운데 카드라 제외.
   모서리 = 큰 판(화면 · 폼 · 채팅 무대) 28 · 카드 22 · 작은 항목 14 (말풍선 · 버튼은 제외).
   카드 안 여백 = PC 24(큰 판 32) · 760 이하 위아래 20 · 양옆 18. 카드 사이 = PC 20 · 760 이하 12.
   예외: 요금 플랜 카드(넘김 카드) · '예시 화면' 표시가 붙은 칸 아래 여백. 서비스 '어떤 방식이 맞을까요?' 카드도 규칙대로(큰 카드 32 — 36/40에서, 사용자 요청) */
html body.lp .lp-tabs { padding-top: 64px; }   /* 약관: 첫 줄(문서 탭)까지. 로그인은 화면 가운데 놓는 카드라 제외 */
@media (min-width: 1100px) { html body.lp main { padding-top: 64px; } html body.lp .lp-tabs { padding-top: 0; } }   /* 1100 이상은 두 칸(왼쪽 탭 · 제목 · 목차 / 오른쪽 본문)이라 main 위 여백으로 */
html body.pd .pd-terms, html body.tr .tr-rv, html body.lp .lp-sec, html body.su .su-prev, html body.tr .tr-ft { border-radius: 22px; }
html body.pd .pd-prep, html body.iq .iq-pass { border-radius: 22px; }
html body.tr .tr-sl, html body.tr .tr-chat { border-radius: 28px; }
html body.pd .pd-faq-list details { border-radius: 14px; }
html body.sv .sv-scope-c, html body.sv .sv-tile, html body.pd .pd-st, html body.pd .pd-terms, html body.iq .iq-pass { padding: 24px; }
html body.tr .tr-wv { padding-left: 24px; padding-right: 24px; }
html body.pd .pd-prep, html body.su .su-card, html body.lp .lp-sec, html body.sv .sv-pick-c { padding: 32px; }
html body.pd .pd-sit { column-gap: 20px; }
html body.pd .pd-stk-cards { gap: 20px; }
@media (max-width: 1060px) { html body.su .su-card { padding: 28px; } }
@media (max-width: 1100px) { html body.sv .sv-pick-c { padding: 24px; } }   /* 좁은 PC는 카드 단계 24 */
@media (max-width: 760px) {
  html body.lp .lp-tabs { padding-top: 40px; }
  html body.tr .tr-stage { padding-top: 40px; }
  html body.pd .pd-im, html body.tr .tr-chat, html body.tr .tr-sl, html body.tr .tr-wv, html body.tr .tr-rv { border-radius: 22px; }
  html body.sv .sv-scope-c, html body.sv .sv-tile, html body.pd .pd-st, html body.pd .pd-terms, html body.pd .pd-prep, html body.su .su-card, html body.lp .lp-sec, html body.pd .pd-im, html body.sv .sv-pick-c { padding: 20px 18px; }
  html body.iq .iq-pass { padding: 0; }   /* 모바일 상담 요약은 판 없이(원래 그대로) */
  html body.pd .pd-sit { column-gap: 12px; }
  html body.tr .tr-ft, html body.tr .tr-wv, html body.tr .tr-rv { padding-left: 18px; padding-right: 18px; }
  html body.tr .tr-ft { padding-top: 16px; padding-bottom: 16px; }
}

/* 마무리 CTA 제목 — 모바일은 섹션 제목(23)보다 한 단계 크게 26(2026-10-12, 서비스 · 요금 · 체험 같게). PC는 그대로 */
@media (max-width: 760px) {
  html body.sv .sv-end-cta .d-h2, html body.pd .pd-cta-h, html body.tr .tr-cta-h { font-size: 26px; line-height: 1.3; }
}