/* =====================================================================
   타이포그래피 정리 — 2026-09-28
   =====================================================================
   site.css 다음에 얹는다. 기존 규칙을 지우지 않고 덮어써서, 이 파일 하나만
   빼면 원래대로 돌아간다.

   왜 손대는가 — 지금 상태를 실측한 값이다.
     글자 크기 27종 (10.5·12.5·13.5·15.5·16.5px 같은 반 픽셀이 섞여 있다)
     자간     21종 (-3px ~ +1.5px. 14px 글자에 -1px 이면 -0.07em 으로 지나치게 좁다)
     행간     20종 (1.18 ~ 1.9), 본문에는 아예 지정이 없어 normal 로 그려졌다
     굵기     800 이 73곳 · 900 이 17곳 — 거의 모든 글자가 굵어 위계가 없다
     본문 크기가 14 → 15 → 16 → 16.5 → 17 → 18px 로 여섯 번 덮여 있다

   고치는 원칙
     ① 크기는 9단계만 쓴다 (12 13 14 16 18 21 26 34 44)
     ② 굵기는 4단계만 쓴다 (400 본문 · 500 보조 · 600 라벨/버튼 · 700 제목,
        800 은 히어로 제목·로고·큰 숫자 세 곳에만)
     ③ 자간은 px 가 아니라 em — 글자가 커질수록 좁아지고 작을수록 넓어진다
     ④ 행간은 5단계 (1.25 큰제목 · 1.35 제목 · 1.5 UI · 1.7 본문 · 1.85 긴 글)
     ⑤ 한국어는 어절 단위로 줄을 바꾼다 (word-break:keep-all)
     ⑥ 금액·숫자는 자릿수가 흔들리지 않게 고정폭 숫자를 쓴다

   이미지는 건드리지 않았다.
   ===================================================================== */

:root {
  /* 크기 — 이 9개 밖으로 나가지 않는다 */
  --t-xs: 12px;   /* 각주·배지 */
  --t-sm: 13px;   /* 보조 설명 */
  --t-md: 14px;   /* UI 기본 (버튼·표·폼) */
  --t-base: 16px; /* 본문 */
  --t-lg: 18px;   /* 강조 본문·작은 제목 */
  --t-xl: 21px;   /* 카드 제목 */
  --t-2xl: 26px;  /* 섹션 제목 */
  --t-3xl: 34px;  /* 큰 섹션 제목 */
  --t-4xl: 44px;  /* 히어로 */

  /* 자간 — em 이라 크기에 비례한다 */
  --ls-display: -0.03em;
  --ls-head: -0.02em;
  --ls-text: -0.005em;
  --ls-label: 0.04em;

  /* 행간 */
  --lh-display: 1.25;
  --lh-head: 1.35;
  --lh-ui: 1.5;
  --lh-text: 1.7;
  --lh-long: 1.85;

  --ink-mute: #6a7788;   /* 보조 글자 — 본문보다 한 단계 옅게 */
}

/* ── 바탕 ───────────────────────────────────────────────────────── */
body,
#site {
  font-size: var(--t-base);
  line-height: var(--lh-text);
  letter-spacing: var(--ls-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 한국어는 어절 중간에서 끊지 않는다. 긴 영문·URL 만 강제로 끊는다. */
#site, #site p, #site li, #site td, #site th, #site h1, #site h2, #site h3, #site h4,
#site .guide, #site .cnote, #site .muted, #site .sec-sub, #site .hero-copy .lead,
.modal, .drawer, .checkout-page {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 금액·수치는 자릿수가 흔들리지 않게 */
.cattable td.n, .sumline, .ci-price, .ci-breakdown, .ci-line-total,
.cart-total, .checkout-summary, .mp-amt,
.price-main, .price-main strong, .price-alt, .price-separate,
#site .stat-row .sv, #site .hero-trust .sv {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── 히어로 ─────────────────────────────────────────────────────── */
#site .hero-copy h1,
.hero-copy h1 {
  font-size: var(--t-4xl);
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  margin: 20px 0 16px;
}

#site .hero-copy .lead,
.hero-copy .lead {
  font-size: var(--t-lg);
  font-weight: 400;
  line-height: var(--lh-long);
  letter-spacing: var(--ls-text);
}

#site .hero-badge, .hero-badge {
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: var(--ls-text);
}

#site .hero-mini, .hero-mini { font-size: var(--t-sm); font-weight: 400; }
#site .hero-mini span::before { font-weight: 600; }

#site .hero-trust .sv, .hero-trust .sv {
  font-size: var(--t-xl); font-weight: 800; letter-spacing: var(--ls-head); line-height: 1.2;
}
#site .hero-trust .sl, .hero-trust .sl {
  font-size: var(--t-xs); font-weight: 500; color: var(--ink-mute); letter-spacing: var(--ls-text);
}

#site .quick-card b, .quick-card b {
  font-size: var(--t-base); font-weight: 700; letter-spacing: var(--ls-text);
}
#site .quick-card span:last-child, .quick-card span:last-child {
  font-size: var(--t-sm); font-weight: 400; line-height: var(--lh-ui); color: var(--ink-mute);
}

/* ── 섹션 제목 ──────────────────────────────────────────────────── */
#site .sec-tag, .sec-tag {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);   /* 영문 소제목은 조금 벌려야 읽힌다 */
  text-transform: uppercase;
}

#site .sec-title, .sec-title {
  font-size: var(--t-3xl);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-display);
}

#site .sec-sub, .sec-sub {
  font-size: var(--t-base);
  font-weight: 400;
  line-height: var(--lh-text);
  letter-spacing: var(--ls-text);
  color: var(--ink-mute);
}

#site .cta-band h2, .cta-band h2 {
  font-size: var(--t-2xl); font-weight: 700; letter-spacing: var(--ls-head); line-height: var(--lh-head);
}
#site .cta-band p, .cta-band p { font-size: var(--t-base); font-weight: 400; line-height: var(--lh-text); }

/* ── 숫자 통계 ──────────────────────────────────────────────────── */
#site .stat-row .sv, .stat-row .sv {
  font-size: var(--t-3xl); font-weight: 800; letter-spacing: var(--ls-display); line-height: 1.15;
}
#site .stat-row .sl, .stat-row .sl {
  font-size: var(--t-sm); font-weight: 500; color: var(--ink-mute); letter-spacing: var(--ls-text);
}

/* ── 카드 ───────────────────────────────────────────────────────── */
#site .flag-card .fn, .flag-card .fn {
  font-size: var(--t-md); font-weight: 600; letter-spacing: var(--ls-text); line-height: var(--lh-ui);
}
#site .flag-card .ft, .flag-card .ft {
  font-size: var(--t-xs); font-weight: 500; color: var(--ink-mute); letter-spacing: var(--ls-text);
}

#site .pp-card b, .pp-card b,
#site #pane-purpose .pp-card .pp-title {
  font-size: var(--t-lg); font-weight: 700; line-height: var(--lh-head); letter-spacing: var(--ls-head);
}
#site .pp-card span, .pp-card span {
  font-size: var(--t-sm); font-weight: 400; line-height: var(--lh-ui); color: var(--ink-mute);
}
#site .pp-lead, .pp-lead { font-size: var(--t-lg); font-weight: 600; letter-spacing: var(--ls-head); }
#site .pp-lead span, .pp-lead span { font-size: var(--t-sm); font-weight: 400; color: var(--ink-mute); }

#site .bcard .bt, .bcard .bt { font-size: var(--t-base); font-weight: 700; letter-spacing: var(--ls-text); }
#site .bcard .bd, .bcard .bd { font-size: var(--t-sm); font-weight: 400; line-height: var(--lh-text); color: var(--ink-mute); }

#site .prob-card .pt, .prob-card .pt { font-size: var(--t-base); font-weight: 700; }
#site .prob-card .pd, .prob-card .pd { font-size: var(--t-sm); font-weight: 400; line-height: var(--lh-text); color: var(--ink-mute); }

#site .svc-t, .svc-t { font-size: var(--t-lg); font-weight: 700; letter-spacing: var(--ls-head); }
#site .svc-d, .svc-d { font-size: var(--t-sm); font-weight: 400; line-height: var(--lh-text); color: var(--ink-mute); }

#site .stepcard .st, #processSection .stepcard .st {
  font-size: var(--t-base); font-weight: 700; letter-spacing: var(--ls-text);
}
#site .stepcard .sd, .stepcard .sd { font-size: var(--t-sm); font-weight: 400; line-height: var(--lh-text); }

/* ── 서류 목록 ──────────────────────────────────────────────────── */
#site .doc-head, #site .doc-guide, #site .guide,
.doc-head, .doc-guide, .guide {
  font-size: var(--t-sm);
  font-weight: 400;
  line-height: var(--lh-text);
  letter-spacing: var(--ls-text);
}

#site .doc-row .dr-n, .doc-row .dr-n {
  font-size: var(--t-base); font-weight: 600; letter-spacing: var(--ls-text); line-height: var(--lh-ui);
}
#site .doc-row .dr-n .dr-opt, .doc-row .dr-n .dr-opt {
  font-size: var(--t-xs); font-weight: 500; letter-spacing: var(--ls-text);
}
#site .doc-row .dr-p, .doc-row .dr-p {
  font-size: var(--t-sm); font-weight: 600; letter-spacing: var(--ls-text);
}

/* ── 표 ─────────────────────────────────────────────────────────── */
#site .cattable, .cattable { font-size: var(--t-md); }
#site .cattable th, .cattable th {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--ls-label); text-transform: none;
}
#site .cattable td, .cattable td {
  font-size: var(--t-md); font-weight: 400; line-height: var(--lh-ui); letter-spacing: var(--ls-text);
}
#site .cattable td.n, .cattable td.n { font-weight: 600; }
#site .cattable tr.catgrp td, .cattable tr.catgrp td { font-weight: 700; }
#site .cattable .cnote, .cattable .cnote { font-size: var(--t-xs); line-height: var(--lh-ui); }

/* ── 보조 글자·주석 ─────────────────────────────────────────────── */
#site .muted, .muted {
  font-size: var(--t-sm);
  font-weight: 400;          /* 보조 문구가 600 이라 본문만큼 강했다 */
  line-height: var(--lh-text);
  letter-spacing: var(--ls-text);
  color: var(--ink-mute);
}
#site .cnote, .cnote {
  font-size: var(--t-xs); font-weight: 400; line-height: var(--lh-ui); color: var(--ink-mute);
}

/* ── 버튼·칩·배지 ───────────────────────────────────────────────── */
#site .btn, .btn {
  font-size: var(--t-md); font-weight: 600; letter-spacing: var(--ls-text); line-height: 1.4;
}
#site .btn.sm, .btn.sm { font-size: var(--t-sm); font-weight: 600; }
#site .btn.big, .btn.big { font-size: var(--t-base); font-weight: 700; }
#site .altchip, #site .intake-alt .alt-label, .altchip { font-size: var(--t-sm); font-weight: 500; }
.catchip { font-size: var(--t-sm); font-weight: 500; letter-spacing: var(--ls-text); }
.catchip.active { font-weight: 600; }
.pill { font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--ls-text); }
.tag, .badge { letter-spacing: var(--ls-text); }

/* ── 상단 메뉴 ──────────────────────────────────────────────────── */
.topbar nav a { font-size: var(--t-md); font-weight: 500; letter-spacing: var(--ls-text); }
.topbar nav a.active { font-weight: 700; }
.topbar .logo { letter-spacing: var(--ls-head); }

/* ── 장바구니 ───────────────────────────────────────────────────── */
.cart-item .ci-doc { font-size: var(--t-base); font-weight: 700; letter-spacing: var(--ls-text); line-height: var(--lh-ui); }
.cart-item .ci-route { font-size: var(--t-xs); font-weight: 500; color: var(--ink-mute); }
.cart-item .ci-price, .ci-line-total,
.ci-breakdown .ci-line-total { font-size: var(--t-lg); font-weight: 700; letter-spacing: var(--ls-head); }
.ci-field label { font-size: var(--t-sm); font-weight: 600; letter-spacing: var(--ls-text); }
.ci-field select, .ci-note, .ci-breakdown { font-size: var(--t-sm); }
.ci-breakdown small { font-size: var(--t-xs); }
.sumline { font-size: var(--t-md); }
.sumline.tot { font-size: var(--t-lg); font-weight: 700; letter-spacing: var(--ls-head); }

/* 견적 화면 가격 — 굵기 900 이 남아 있던 곳이다. 금액은 크기로 눌러야
   읽히지, 굵기로 누르면 옆 글자까지 같이 무거워진다. */
.price-main, .price-main strong {
  font-size: var(--t-lg); font-weight: 700; letter-spacing: var(--ls-head);
  line-height: var(--lh-ui);
}
.price-alt, .price-separate {
  font-size: var(--t-sm); font-weight: 600; letter-spacing: var(--ls-text);
  color: var(--ink-mute);
}
.price-alt strong, .price-separate strong { font-weight: 700; }

/* 푸터 링크 — 정리하며 줄어든 높이를 손가락이 닿을 만큼 되돌린다. */
.foot-links a, .site-foot a, footer a {
  line-height: var(--lh-text);
  display: inline-block;
  padding-block: 4px;
}

/* ── 폼 ─────────────────────────────────────────────────────────── */
#site input, #site select, #site textarea,
.modal input, .modal select, .modal textarea,
.checkout-page input, .checkout-page select, .checkout-page textarea {
  font-size: var(--t-md);
  letter-spacing: var(--ls-text);
  line-height: var(--lh-ui);
}
.frow > label, .checkout-card label { font-size: var(--t-sm); font-weight: 600; letter-spacing: var(--ls-text); }

/* ── 서류 제출 패널 ─────────────────────────────────────────────── */
.sb-doc-h b, .submit-box .sb-h { font-size: var(--t-base); font-weight: 700; letter-spacing: var(--ls-text); }
.sb-warn, .sb-mail, .sb-hint { font-size: var(--t-sm); line-height: var(--lh-text); }
.sb-doc-h .muted, .submit-box .sb-h .muted { font-size: var(--t-sm) !important; font-weight: 400; }
.sb-radio, .sb-cnopt { font-size: var(--t-md); }

/* ── 진행 조회 ──────────────────────────────────────────────────── */
.mp-card-h b { font-size: var(--t-base); font-weight: 700; letter-spacing: var(--ls-text); }
.mp-amt { font-size: var(--t-lg); font-weight: 700; letter-spacing: var(--ls-head); }
.mp-step .mp-slb { font-size: var(--t-xs); font-weight: 500; }
.mp-act, .mp-doc, .mp-dl { font-size: var(--t-sm); line-height: var(--lh-text); }

/* ── FAQ·긴 글 (가이드·칼럼) ────────────────────────────────────── */
#site .faq summary, .faq summary { font-size: var(--t-base); font-weight: 600; letter-spacing: var(--ls-text); }
#site .faq details p, .faq details p { font-size: var(--t-md); line-height: var(--lh-long); font-weight: 400; }

.guide-page h2, .col-body h2 { font-size: var(--t-xl); font-weight: 700; line-height: var(--lh-head); letter-spacing: var(--ls-head); }
.guide-page h3, .col-body h3 { font-size: var(--t-lg); font-weight: 700; line-height: var(--lh-head); letter-spacing: var(--ls-head); }
.guide-page p, .col-body p, .col-body li {
  font-size: var(--t-base); font-weight: 400; line-height: var(--lh-long); letter-spacing: var(--ls-text);
}
.g-fact b { font-size: var(--t-base); font-weight: 700; letter-spacing: var(--ls-text); }
.g-answer { font-size: var(--t-base); line-height: var(--lh-long); }

/* ── 바닥글 ─────────────────────────────────────────────────────── */
#site .sitefoot, .sitefoot { font-size: var(--t-sm); font-weight: 400; line-height: var(--lh-text); }

/* ── 아주 작은 글자 정리 ────────────────────────────────────────
   8 ~ 10.5px 짜리가 19곳 있었다. 영문 대문자 라벨은 작아도 읽히지만
   한글은 11px 밑으로 내려가면 획이 뭉친다. 한글은 최소 11px,
   장식용 영문 라벨은 작게 두되 자간을 벌려 또렷하게 만든다. */
#site .hero-live-item em, .hero-live-item em {
  font-size: 11px; font-weight: 600; font-style: normal; letter-spacing: var(--ls-text);
}
#site .hv-badge, .hv-badge {
  font-size: 11px; font-weight: 600; letter-spacing: var(--ls-label);
}
#site .pp-kicker, .pp-kicker {
  font-size: 11px; font-weight: 600; letter-spacing: var(--ls-label);
}
#site .pp-icon small, .pp-icon small {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
}

/* ── 3차: <b>·<strong> 이 900 으로 튀던 것 ──────────────────────────
   브라우저 기본값이 font-weight: bolder 다. 절대값이 아니라 **부모보다
   한 단계 굵게**라는 뜻이라, 부모가 600·700 이면 900 이 된다.

   1·2차에서 컨테이너를 600·700 으로 낮추자 그 안의 <b> 가 전부 900 으로
   올라갔다. 없애려던 굵기를 내가 도로 만들어 낸 셈이다.
   실측: 서류 목록 화면의 900 짜리 65곳 중 59곳이 이 경우였다.

   절대값으로 못 박는다. 본문(400) 안의 <b> 는 지금도 700 이라 그대로고,
   달라지는 건 굵은 상자 안의 <b> 뿐이다. */
b, strong { font-weight: 700; }

/* 접수 전 안내 상자 — 서류 목록 화면에서 가장 큰 덩어리다 */
.req-callout-title { font-size: var(--t-base); font-weight: 700; letter-spacing: var(--ls-head); }
.req-callout-sub   { font-size: var(--t-sm); letter-spacing: var(--ls-text); }
.req-callout-foot a { font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--ls-label); }

/* 장바구니 안내·주의 문구와 수량 버튼 — 11.5·13.5px 반픽셀이 남아 있었다 */
.ci-caution, .ci-caution b, .ci-caution summary,
.ci-note, .cnote { font-size: var(--t-xs); letter-spacing: var(--ls-text); line-height: var(--lh-ui); }
.ci-caution summary { font-weight: 700; }
.stepper button { font-size: var(--t-base); font-weight: 700; }
.toast, .toast b { font-size: var(--t-sm); letter-spacing: var(--ls-text); }

/* 접수 화면 — 단계 표시·뒤로 버튼·구비서류 목록에 남아 있던 값 */
.checkout-step { font-size: var(--t-sm); font-weight: 700; letter-spacing: var(--ls-text); }
.checkout-back { font-size: var(--t-base); font-weight: 700; }
.checkout-required li { font-size: var(--t-sm); letter-spacing: var(--ls-text); line-height: var(--lh-ui); }

/* 진행 조회 단계 표시의 숫자 동그라미 */
.mp-step .mp-dot, .mp-dot { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0; }

/* 상담창 머리글 */
.chat-head, .chat-head span { font-size: var(--t-md); letter-spacing: var(--ls-text); }

/* 서류 줄의 배지 */
.doc-note-badge { font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--ls-text); }

/* ── 2차: 작은 글자 계층 ───────────────────────────────────────────
   1차에서 본문·제목·버튼·가격만 잡았더니, 반픽셀과 과한 굵기가 몰려
   있던 라벨·배지·번호·링크 목록이 그대로 남았다. 라이브 실측으로
   홈 57곳, 가이드 73곳, 칼럼 22곳이 확인돼 같은 토큰에 맞춘다.
   13.5 → 13 · 12.5 → 12 · 11.5 → 12 · 14.5 → 14, 굵기 800~900 → 700. */

/* 가이드·칼럼의 링크 목록 — 가이드 화면 글자 대부분이 여기다 */
.g-links a, .g-links .on {
  font-size: var(--t-sm); font-weight: 600;
  letter-spacing: var(--ls-text); line-height: var(--lh-ui);
}
#guideHub .g-sub-label, .g-sub-label {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--ls-label);
}

/* 최근 접수 띠 */
.hero-live-item b { font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--ls-text); }
.hero-live-label { font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--ls-label); }

/* 번호 — 크기로 이미 눈에 띄므로 굵기까지 900 일 이유가 없다 */
.quick-card .qnum, .stepcard .num, .tool-guide-box .guide-no,
.qnum, .guide-no { font-weight: 700; letter-spacing: var(--ls-head); }

/* 배지·닫기·플로팅 라벨 */
.cbadge { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0; }
.drawer-head .dx, .dx { font-weight: 600; }
.modal-head span { font-weight: 700; letter-spacing: var(--ls-head); }
.modal-head .modal-x, .modal-x { font-weight: 600; }
.floatcol .fbtn .lbl, .fbtn.kko .lbl, .floatcol .lbl {
  font-size: 11px; font-weight: 700; letter-spacing: var(--ls-label);
}

/* 히어로 아래 스크롤 안내 */
.scroll-cue b, .scroll-cue span { font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--ls-label); }

/* 칼럼 목록·기사 머리 */
.col-cat { font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--ls-label); }
.crumbs, .crumbs a { font-size: var(--t-xs); letter-spacing: var(--ls-text); }

/* 본문 안내 상자 */
.tool-guide-box b { font-size: var(--t-md); font-weight: 700; letter-spacing: var(--ls-text); }
.cart-empty, .cart-empty div, .cart-empty p { font-size: var(--t-sm); }

/* 기사 제목 안의 <strong> — 편집기가 넣은 태그라 굵기가 900 까지 올라간다.
   제목은 이미 제목 굵기를 쓰므로 그대로 물려받게 한다. */
.col-body h1 strong, .col-body h2 strong, .col-body h3 strong,
.col-body h4 strong, .col-body h2 span, .col-body h3 span { font-weight: inherit; }

/* ── 화면이 좁아지면 큰 글자만 줄인다 ───────────────────────────── */
@media (max-width: 1100px) {
  :root { --t-4xl: 36px; --t-3xl: 28px; }
}

@media (max-width: 760px) {
  :root {
    --t-4xl: 30px;
    --t-3xl: 24px;
    --t-2xl: 21px;
    --t-xl: 19px;
    --t-base: 16px;
  }

  body, #site { font-size: var(--t-base); line-height: var(--lh-text); }
  #site .hero-copy h1, .hero-copy h1 { margin: 16px 0 12px; }
  #site .hero-copy .lead, .hero-copy .lead { font-size: var(--t-base); line-height: var(--lh-text); }
}

@media (max-width: 420px) {
  :root { --t-4xl: 27px; --t-3xl: 22px; }
}