@charset "UTF-8";
/* ==========================================================================
   components.css — 컴포넌트 스타일
   전국무지개퀵화물(무지개퀵) · ver 1.0.0 / 2026-08-23
   ★ 네이밍: BEM 유사 (.block, .block__element, .block--modifier)
   ★ 색·간격·타이포는 전부 tokens.css 변수. 하드코딩된 값은 "구조상 불가피한 것"뿐이며
     그 경우 옆에 사유를 남긴다.
   ★ docs/10-ia-and-pages.md 7페이지 + docs/12-benchmark.md §9 요소 도입 사양서에서 도출.

   [목차]
     01 로고 / 무지개 구분선        11 아코디언(FAQ)
     02 아이콘                      12 탭
     03 버튼                        13 히어로
     04 배지 · 태그 · 칩            14 섹션 헤더
     05 폼                          15 이용 절차 스텝
     06 카드                        16 CTA 밴드
     07 신뢰 스트립                 17 헤더 · 메가메뉴 · 모바일 메뉴
     08 안내 박스(notice)           18 하단 고정 액션바
     09 정보 정의목록(dl)           19 푸터
     10 테이블                      20 브레드크럼 · 페이지 헤더 · 서브네비
                                    21 기타(미디어 자리표시자·문자 템플릿 박스)
   ========================================================================== */


/* ==========================================================================
   01. 로고 / 무지개 구분선
   ★ D-004: 무지개는 로고와 선형 요소에만. 아래 두 클래스가 무지개의 유일한 출구다.
      다른 곳에서 --gradient-rainbow 를 참조하면 규칙 위반이다.
   ========================================================================== */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
}
.logo__mark {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.logo__name {
  font-size: 1.125rem;              /* 로고는 스케일 밖 — 락업 비율이 고정값이라야 흔들리지 않는다 */
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.03em;
  color: currentColor;
}
.logo__sub {
  font-size: 0.625rem;              /* 영문 서브라벨 전용 고정값 */
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;           /* 영문은 대문자 자간을 넓혀야 읽힌다 (한글 규칙 예외) */
  color: var(--color-text-muted);
  text-transform: uppercase;
}
.on-dark .logo__sub { color: var(--navy-300); }
@media (min-width: 1024px) {
  .logo__mark { width: 40px; height: 40px; }
  .logo__name { font-size: 1.25rem; }
}

/* 무지개 구분선 — 두께 3px 고정. 이 값을 키우면 "면적 사용"이 되어 D-004 위반이다.
   ★ D-041(2026-08-24) 로 상한이 "개수"에서 "면적"으로 개정됐다.
     · 전폭 라인은 페이지당 1곳(푸터 상단)뿐  · 짧은 룰(--short)은 개수 제한 없음
     구 "한 페이지 최대 2곳" 은 폐기. 실측 근거는 docs/20-design-system.md §1-4. */
.rainbow-rule {
  display: block;                   /* ★ D-041: 없으면 <span>(inline)에서 width/height 가 무시돼 0×0 이 된다 */
  height: 3px;
  border: 0;
  margin: 0;
  background: var(--gradient-rainbow);
  border-radius: var(--radius-pill);
}
.rainbow-rule--short { width: 48px; }              /* 섹션 헤더 위 짧은 룰 */
.rainbow-rule--on-dark { background: var(--gradient-rainbow-on-dark); }
/* 어두운 면 위에서는 자동으로 명도 보정판으로 바꾼다.
   왜: 기본 그라디언트의 남색·보라 끝단이 네이비 배경에 묻혀 룰의 오른쪽 절반이 사라진다.
   HTML 에 --on-dark 를 일일이 붙이는 대신 문맥으로 처리해 퍼블리셔 수정 없이 해결한다. */
.section--brand .rainbow-rule,
.on-dark .rainbow-rule { background: var(--gradient-rainbow-on-dark); }


/* ==========================================================================
   02. 아이콘 — 전부 인라인 SVG. 아이콘 폰트·외부 라이브러리 금지.
   currentColor 를 상속하므로 부모의 색만 바꾸면 아이콘 색이 따라온다.
   ========================================================================== */
.icon {
  display: inline-block;
  width: 1.25em; height: 1.25em;
  flex: 0 0 auto;
  vertical-align: -0.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: 1em;    height: 1em; }
.icon--lg { width: 1.75em; height: 1.75em; }
.icon--xl { width: 2.5em;  height: 2.5em; stroke-width: 1.5; }
.icon--filled { fill: currentColor; stroke: none; }

/* 아이콘을 담는 원형/사각 배지 — 서비스 카드·5대 약속·신뢰 스트립에서 쓴다 */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--radius-lg);
  background: var(--navy-50);
  color: var(--navy-700);
}
.icon-badge--brand  { background: var(--navy-700); color: var(--neutral-0); }
.icon-badge--accent { background: var(--blue-50);  color: var(--blue-700); }
.icon-badge--action { background: var(--action-50);color: var(--action-800); }
.icon-badge--lg { width: 56px; height: 56px; }


/* ==========================================================================
   03. 버튼
   유형 4 (primary / secondary / ghost / tel-cta) × 사이즈 3 (sm / md / lg)
   상태 5 (default / hover / focus / active / disabled)
   ★ tel-cta 는 액션 컬러를 쓰는 유일한 버튼이다. 한 뷰포트에 solid CTA 1개 원칙(IA §7-1).
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);          /* 44px — WCAG 2.5.5 최소 터치 타깃 */
  padding: var(--space-3) var(--space-6);
  border: var(--border-width-strong) solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-body);
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color     var(--dur-fast) var(--ease-out),
    color            var(--dur-fast) var(--ease-out),
    box-shadow       var(--dur-base) var(--ease-out);
}
.btn:hover { text-decoration: none; }

/* --- 3-1. primary : 네이비 solid. 페이지의 기본 행동(전화 이외) --- */
.btn--primary {
  background-color: var(--navy-700);
  border-color: var(--navy-700);
  color: var(--neutral-0);            /* 12.29:1 AAA */
}
.btn--primary:hover  { background-color: var(--navy-600); border-color: var(--navy-600); color: var(--neutral-0); }
.btn--primary:active { background-color: var(--navy-800); border-color: var(--navy-800); }

/* --- 3-2. secondary : 미드블루 아웃라인. 보조 행동(상담 신청 등) --- */
.btn--secondary {
  background-color: var(--neutral-0);
  border-color: var(--blue-600);
  color: var(--blue-700);             /* 8.20:1 AAA */
}
.btn--secondary:hover  { background-color: var(--blue-50);  color: var(--blue-800); }
.btn--secondary:active { background-color: var(--blue-100); }

/* --- 3-3. ghost : 배경 없음. 세 번째 이하 우선순위 --- */
.btn--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--navy-700);
  padding-inline: var(--space-4);
}
.btn--ghost:hover  { background-color: var(--navy-50); color: var(--navy-800); }
.btn--ghost:active { background-color: var(--navy-100); }

/* --- 3-4. tel-cta : ★ 전화 전용. 액션 컬러의 지정석 --- */
.btn--tel {
  background-color: var(--action-600);   /* white on this 5.18:1 AA */
  border-color: var(--action-600);
  color: var(--neutral-0);
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-1);
}
.btn--tel:hover  { background-color: var(--action-700); border-color: var(--action-700); color: var(--neutral-0); box-shadow: var(--shadow-2); }
.btn--tel:active { background-color: var(--action-800); border-color: var(--action-800); box-shadow: none; }
/* 전화 버튼 안의 번호 — 자릿수 폭 고정 + 살짝 크게 */
.btn--tel .btn__num { font-size: 1.0625em; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
/* 버튼 아래 보조 라벨("365일 24시간 접수") */
.btn__note {
  display: block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  opacity: .88;
}
.btn--stacked { flex-direction: column; gap: 2px; padding-block: var(--space-2); }

/* --- 3-5. 어두운 배경 위 변형 (헤더·푸터·CTA 밴드 안) --- */
.btn--on-dark {
  background-color: transparent;
  border-color: rgba(255,255,255,.55);
  color: var(--neutral-0);
}
.btn--on-dark:hover  { background-color: rgba(255,255,255,.12); border-color: var(--neutral-0); color: var(--neutral-0); }
.btn--on-dark:active { background-color: rgba(255,255,255,.20); }

/* 어두운 면 위의 3순위 버튼 — 위 .btn--ghost(3-3)의 다크 면 짝이다.
   역할·구조를 그대로 옮겼고 색만 다크 면 기준으로 바꿨다.
     .btn--ghost     : 밝은 면 위 — 배경 없음 · 테두리 없음 · navy-700 라벨
     .btn--ghost-on-dark : 어두운 면 위 — 배경 없음 · 테두리 없음 · 흰 라벨
   ★ 왜 필요했나 (D-051)
     CTA 밴드가 [전화(solid)] [상담 신청하기(.btn--on-dark)] [인터넷 접수] 3개가 되면서
     뒤의 둘이 클래스까지 똑같아 위계가 사라졌다. 인터넷 접수는 전화·상담보다
     약해야 하는데(D-051 §1) .btn--on-dark 는 테두리가 있어 같은 급으로 읽힌다.
     기존 .btn--ghost 는 navy-700 라벨이라 네이비 면 위에서 글자가 사라진다.
     → 새 색을 만들지 않고 .btn--ghost 의 역할만 다크 면으로 옮겼다.
   ★ 대비: 흰 라벨 on 브랜드 면(#1A44B4) 8.30:1 (AAA).
     테두리를 두지 않으므로 WCAG 1.4.11(비텍스트 3:1)의 대상이 아니다 —
     위계 신호가 곧 "테두리 없음"이기 때문에 테두리를 넣으면 목적이 깨진다.
   ★ hover/active 농도는 .btn--on-dark 와 같은 값을 쓴다. 다크 면 위 상태 표현을
     사이트 전체에서 하나로 유지하기 위해서다. */
.btn--ghost-on-dark {
  background-color: transparent;
  border-color: transparent;
  color: var(--neutral-0);
  padding-inline: var(--space-4);
}
.btn--ghost-on-dark:hover  { background-color: rgba(255,255,255,.12); color: var(--neutral-0); }
.btn--ghost-on-dark:active { background-color: rgba(255,255,255,.20); }
.btn--white {
  background-color: var(--neutral-0);
  border-color: var(--neutral-0);
  color: var(--navy-800);
}
.btn--white:hover  { background-color: var(--navy-50); color: var(--navy-900); }

/* --- 3-6. 사이즈 --- */
.btn--sm {
  min-height: 36px;                    /* 표 안·카드 안 보조 버튼. 단독 CTA로는 쓰지 않는다 */
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-caption);
  border-radius: var(--radius-sm);
}
.btn--lg {
  min-height: 52px;
  padding: var(--space-4) var(--space-8);
  font-size: var(--fs-body-lg);
}
.btn--xl {                             /* 히어로·CTA 밴드의 대형 전화 버튼 */
  min-height: 60px;
  padding: var(--space-4) var(--space-8);
  font-size: var(--fs-h4);
  border-radius: var(--radius-lg);
}
.btn--block { display: flex; width: 100%; }
@media (min-width: 480px) { .btn--block-mobile { width: auto; display: inline-flex; } }

/* --- 3-7. 상태: disabled / loading --- */
.btn:disabled,
.btn[aria-disabled="true"],
.btn--disabled {
  background-color: var(--neutral-200);
  border-color: var(--neutral-200);
  color: var(--neutral-500);           /* 4.30:1 — 비활성이라도 읽을 수는 있어야 한다 */
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}
.btn--loading { cursor: progress; pointer-events: none; opacity: .85; }
.btn--loading .btn__spinner {
  width: 1em; height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 700ms linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* --- 3-8. 아이콘 전용 버튼 (모바일 헤더 전화 버튼 등) --- */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min); height: var(--tap-min);
  border-radius: var(--radius-pill);
  border: var(--border-width-strong) solid transparent;
  background-color: transparent;
  color: currentColor;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.btn-icon:hover { background-color: rgba(255,255,255,.12); }
.btn-icon--action { background-color: var(--action-600); color: var(--neutral-0); }
.btn-icon--action:hover { background-color: var(--action-700); }
.btn-icon--outline { border-color: var(--color-border-strong); color: var(--navy-700); }
.btn-icon--outline:hover { background-color: var(--navy-50); }

/* --- 3-9. 텍스트 링크형 CTA ("자세히 보기 →") --- */
.link-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: var(--fw-semibold);
  color: var(--blue-700);
  text-decoration: none;
}
.link-cta:hover { color: var(--blue-800); text-decoration: underline; text-underline-offset: 0.25em; }
.link-cta .icon { transition: transform var(--dur-base) var(--ease-out); }
.link-cta:hover .icon { transform: translateX(3px); }

/* --- 3-10. 전화번호 대형 표시 (히어로·고객지원 연락처) --- */
.tel-display {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-h1);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--action-900);            /* 11.28:1 — 큰 글씨라도 텍스트는 900을 쓴다 */
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.on-dark .tel-display { color: var(--action-300); }  /* navy-800 위 7.49:1 */
.tel-display:hover { text-decoration: underline; text-underline-offset: 0.15em; }


/* ==========================================================================
   04. 배지 · 태그 · 칩
   배지 = 상태/자격 표시(허가번호·보험). 태그 = 분류. 칩 = 이동 가능한 앵커.
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-2);          /* 3px = 배지 높이 22px 맞춤 고정값 */
  border-radius: var(--radius-sm);
  background: var(--navy-100);
  color: var(--navy-800);               /* 10.15:1 이상 */
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  white-space: nowrap;
}
.badge--accent  { background: var(--blue-100);    color: var(--blue-800); }
.badge--action  { background: var(--action-100);  color: var(--action-900); }
.badge--success { background: var(--success-50);  color: var(--success-600); }
.badge--warn    { background: var(--warn-50);     color: var(--warn-600); }
.badge--danger  { background: var(--danger-50);   color: var(--danger-600); }
.badge--outline { background: transparent; border: var(--border-width) solid var(--color-border-brand); color: var(--navy-700); }
.badge--on-dark { background: rgba(255,255,255,.14); color: var(--neutral-0); }
.badge--lg { padding: var(--space-1) var(--space-3); font-size: var(--fs-body); }
/* [사업자 확인 필요] 표기 전용 — 발행 전 반드시 제거되어야 하므로 눈에 띄게 둔다 */
.badge--todo {
  background: repeating-linear-gradient(45deg, var(--warn-50) 0 6px, #FFEFCF 6px 12px);
  color: var(--warn-600);
  border: var(--border-width) dashed var(--warn-600);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--neutral-100);
  color: var(--neutral-700);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
}
.tag--brand { background: var(--navy-50); color: var(--navy-700); }

/* 칩 = 앵커 이동용. 서비스 페이지 sticky 서브네비에서 가로 스크롤로 나열된다 */
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--neutral-0);
  color: var(--navy-700);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.chip:hover { background: var(--navy-50); border-color: var(--navy-200); color: var(--navy-800); }
.chip[aria-current="true"],
.chip--active { background: var(--navy-700); border-color: var(--navy-700); color: var(--neutral-0); }


/* ==========================================================================
   05. 폼  (D-011 상담 폼 사양 / IA §6)
   ★ 라벨은 항상 노출한다. placeholder 를 라벨 대신 쓰지 않는다(입력 시작하면 사라져 AA 위반).
   ★ 에러는 색만으로 알리지 않는다 — 아이콘 + 문장 + aria-invalid 를 함께 쓴다.
   ========================================================================== */
.form { display: block; }
.form__section + .form__section { margin-top: var(--space-8); }

.field { display: block; }
.field + .field { margin-top: var(--space-6); }

.field__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--color-text-strong);
}
.field__req { color: var(--danger-600); font-weight: var(--fw-bold); }
.field__optional { color: var(--color-text-muted); font-weight: var(--fw-regular); }

.input,
.textarea,
.select {
  display: block;
  width: 100%;
  min-height: var(--tap-min-cta);       /* 48px */
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--neutral-0);
  color: var(--color-text);
  font-size: var(--fs-body);            /* 16px 미만이면 iOS Safari 가 포커스 시 화면을 확대한다 */
  line-height: 1.5;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.input:hover, .textarea:hover, .select:hover { border-color: var(--navy-400); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;                        /* 아래 ring 으로 대체 (입력 필드는 outline 보다 ring 이 폼 밀도에 유리) */
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px var(--blue-200);
}
.textarea { min-height: 140px; line-height: var(--lh-body); }

/* select 화살표 — 외부 아이콘 없이 인라인 SVG 를 data URI 로 (외부 요청 0) */
.select {
  appearance: none;
  padding-right: var(--space-12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231E3559' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 20px 20px;
}
.select:invalid, .select[data-placeholder="true"] { color: var(--color-text-disabled); }

/* 상태: 에러 / 성공 / 비활성 / 읽기전용 */
.field--error .input,
.field--error .textarea,
.field--error .select,
.input[aria-invalid="true"],
.textarea[aria-invalid="true"],
.select[aria-invalid="true"] {
  border-color: var(--danger-600);
  background-color: var(--danger-50);
}
.field--error .input:focus,
.field--error .textarea:focus,
.field--error .select:focus { box-shadow: 0 0 0 3px rgba(196,35,28,.22); }

.field--success .input { border-color: var(--success-600); }

.input:disabled, .textarea:disabled, .select:disabled {
  background-color: var(--neutral-100);
  border-color: var(--neutral-200);
  color: var(--neutral-500);
  cursor: not-allowed;
}
.input[readonly] { background-color: var(--neutral-50); }

.field__help {
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--color-text-muted);
}
.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-medium);
  color: var(--danger-600);
}
.field__error .icon { margin-top: 0.1em; }

/* 글자수 카운터 (문의 내용 5~1,000자) */
.field__counter {
  display: block;
  margin-top: var(--space-2);
  text-align: right;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.field__counter--over { color: var(--danger-600); font-weight: var(--fw-semibold); }

/* --- 5-1. 체크박스 / 라디오 ---
   네이티브 input 을 숨기지 않고 appearance 만 바꾼다. 숨기면 고대비 모드에서 사라진다. */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--tap-min-cta);       /* 라벨 전체가 48px 터치 타깃 (IA §6-3) */
  padding: var(--space-2) 0;
  cursor: pointer;
}
.check__input {
  appearance: none;
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin-top: 2px;                      /* 첫 줄 텍스트와 광학적 정렬용 */
  border: var(--border-width-strong) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--neutral-0);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.check__input[type="radio"] { border-radius: 50%; }
.check:hover .check__input { border-color: var(--navy-400); }
.check__input:checked {
  background-color: var(--navy-700);
  border-color: var(--navy-700);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l4 4 8-8'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  background-position: center;
  background-repeat: no-repeat;
}
.check__input[type="radio"]:checked {
  background-image: none;
  box-shadow: inset 0 0 0 4px var(--neutral-0);
}
.check__input:disabled { background-color: var(--neutral-200); border-color: var(--neutral-300); cursor: not-allowed; }
.check__label { font-size: var(--fs-body); line-height: 1.5; color: var(--color-text); }
.field--error .check__input { border-color: var(--danger-600); }

/* --- 5-2. 개인정보 동의 블록 (제출 버튼 바로 위) --- */
.consent {
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--neutral-50);
}
.consent__detail {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--neutral-0);
  border: var(--border-width) solid var(--color-border);
  font-size: var(--fs-caption);
  line-height: 1.75;
  color: var(--color-text);
}
.consent__detail dt { font-weight: var(--fw-semibold); color: var(--color-text-strong); }
.consent__detail dd + dt { margin-top: var(--space-2); }

/* --- 5-3. 폼 액션 / 결과 메시지 --- */
.form__actions { margin-top: var(--space-8); }
.form__legend-req {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}
.form-result {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: var(--border-width) solid transparent;
  text-align: center;
}
.form-result--success { background: var(--success-50); border-color: var(--success-600); }
.form-result--error   { background: var(--danger-50);  border-color: var(--danger-600); }
.form-result__title { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--color-text-strong); }
.form-result__body  { margin-top: var(--space-2); }
.form-result__body + .btn { margin-top: var(--space-4); }

/* 허니팟 — 사람에게는 완전히 보이지 않아야 하고 스크린리더도 건너뛰어야 한다 */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* ==========================================================================
   06. 카드
   ========================================================================== */
.card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--neutral-0);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.card__eyebrow {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  color: var(--blue-700);
}
.card__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
}
.card__title:not(:first-child) { margin-top: var(--space-3); }
.card__body { margin-top: var(--space-3); color: var(--color-text); }
.card__meta { margin-top: var(--space-4); font-size: var(--fs-caption); color: var(--color-text-muted); }
.card__footer { margin-top: var(--space-6); padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-border); }
.card__icon { margin-bottom: var(--space-4); }

/* 링크 카드 — 카드 전체가 클릭 영역. 내부 링크에 ::after 를 깔아 확장한다.
   <a> 로 카드 전체를 감싸면 카드 안 텍스트가 전부 링크 텍스트로 읽혀 스크린리더가 장황해진다. */
.card--link { position: relative; }
.card--link:hover { box-shadow: var(--shadow-2); border-color: var(--navy-200); transform: translateY(-2px); }
.card--link:focus-within { box-shadow: var(--shadow-2); }
.card--link .card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* 서비스 카드 (퀵/화물/바이크) — 상단에 네이비 라인을 얹어 카드끼리 리듬을 만든다 */
.card--service { padding-top: var(--space-8); }
.card--service::before {
  content: "";
  display: block;
  width: 40px; height: 3px;
  margin-bottom: var(--space-4);
  background: var(--navy-700);
  border-radius: var(--radius-pill);
}
/* 강조 카드 — 페이지당 1개만. 두 개 이상이면 강조가 아니다. */
.card--featured {
  border-color: var(--navy-700);
  border-width: var(--border-width-strong);
  box-shadow: var(--shadow-2);
}
.card--featured .card__eyebrow { color: var(--action-900); }

/* 다크 카드 — 바이크 하이라이트, B2B 배너 */
.card--dark {
  background: var(--gradient-navy);
  border-color: transparent;
  color: var(--color-text-on-brand);
}
.card--dark .card__title { color: var(--neutral-0); }
.card--dark .card__body  { color: var(--navy-200); }
.card--dark .card__eyebrow { color: var(--action-300); }

/* 평면 카드 — 그림자 없이 배경만. 카드가 여러 겹 겹칠 때 그림자 누적을 막는다 */
.card--flat { box-shadow: none; background: var(--neutral-50); border-color: transparent; }
.card--outline { box-shadow: none; background: transparent; }
.card--compact { padding: var(--space-4); }

/* 아이콘 카드 (5대 약속) — 아이콘 + 제목 + 1줄 */
.card--icon { align-items: flex-start; text-align: left; }

/* 통계/신뢰 카드 — 실적 수치 창작 금지(D-013). 허가번호·보험·연차 같은 "사실"만 넣는다 */
.card--stat { align-items: center; text-align: center; padding-block: var(--space-8); }
.stat__value {
  font-size: var(--fs-h2);
  line-height: 1.2;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--navy-700);
  font-variant-numeric: tabular-nums;
}
.stat__label { margin-top: var(--space-2); font-size: var(--fs-caption); color: var(--color-text-muted); }
.stat__unit { font-size: 0.6em; font-weight: var(--fw-semibold); margin-left: 2px; }


/* ==========================================================================
   07. 신뢰 스트립 (홈 #trust-strip / 서비스 히어로 하단)
   ★ 고객 1순위 요구("전문 회사 느낌")의 핵심 장치. 히어로 바로 다음에 온다.
   ========================================================================== */
.trust-strip {
  background: var(--color-bg-brand-soft);
  border-block: var(--border-width) solid var(--navy-100);
  padding-block: var(--space-6);
}
.trust-strip--on-dark {
  background: rgba(255,255,255,.06);
  border-color: var(--color-border-on-dark);
}
.trust-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2);
}
.trust-item__icon { color: var(--navy-600); }
.trust-strip--on-dark .trust-item__icon { color: var(--blue-300); }
.trust-item__label {
  display: block;
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--color-text-muted);
}
.trust-item__value {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  color: var(--color-text-strong);
  font-variant-numeric: tabular-nums;
}
.trust-strip--on-dark .trust-item__label { color: var(--navy-300); }
.trust-strip--on-dark .trust-item__value { color: var(--neutral-0); }
.trust-strip__note { margin-top: var(--space-4); text-align: center; }


/* ==========================================================================
   08. 안내 박스 (notice)
   ★ 요금 고지(D-008), 이사화물 상하차 조건(§4-6), 항공 운송제한(D-007 #9) 등
     "분쟁 예방용 고지"에 쓴다. 좌측 4px 바 + 옅은 배경 + 아이콘.
   ========================================================================== */
.notice {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-width) solid transparent;
  border-left-width: var(--border-width-accent);
  background: var(--info-50);
  border-color: var(--blue-200);
  border-left-color: var(--info-600);
  color: var(--color-text);
}
.notice__icon { color: var(--info-600); margin-top: 0.15em; }
.notice__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
  margin-bottom: var(--space-1);
}
.notice__body { font-size: var(--fs-caption); line-height: 1.7; }
.notice__body > * + * { margin-top: var(--space-2); }

.notice--warn   { background: var(--warn-50);    border-color: #F5DEB0; border-left-color: var(--warn-600); }
.notice--warn   .notice__icon { color: var(--warn-600); }
.notice--danger { background: var(--danger-50);  border-color: #F5C6C3; border-left-color: var(--danger-600); }
.notice--danger .notice__icon { color: var(--danger-600); }
.notice--success{ background: var(--success-50); border-color: #BDE5CD; border-left-color: var(--success-600); }
.notice--success .notice__icon { color: var(--success-600); }
.notice--neutral{ background: var(--neutral-50); border-color: var(--neutral-200); border-left-color: var(--neutral-400); }
.notice--neutral .notice__icon { color: var(--neutral-600); }
.notice--lg { padding: var(--space-6); }
.notice--lg .notice__body { font-size: var(--fs-body); }


/* ==========================================================================
   09. 정보 정의목록 (dl) — 사업자 정보, 서비스 스펙
   ★ dl 로 마크업해야 검색엔진이 "항목:값" 구조로 인식한다 (IA §4-2)
   ========================================================================== */
.deflist {
  display: grid;
  grid-template-columns: 1fr;
  border-top: var(--border-width-strong) solid var(--navy-700);
}
.deflist__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-1);
  border-bottom: var(--border-width) solid var(--color-border);
}
.deflist__term {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
}
.deflist__desc { color: var(--color-text-strong); font-weight: var(--fw-medium); }
@media (min-width: 640px) {
  .deflist__row { grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-4); align-items: baseline; }
  .deflist__term { font-size: var(--fs-body); }
}
.deflist--compact .deflist__row { padding-block: var(--space-2); }


/* ==========================================================================
   10. 테이블 (차량 규격표 · 기준요금표 · 바이크 3종 비교표)
   ★ 모바일 가로 스크롤 필수 — .table-scroll 로 감싸는 것이 규칙이다.
     표를 세로로 접으면 "비교"라는 표의 존재 이유가 사라진다. 스크롤이 정답.
   ★ D-013 #2/#5: 요금은 반드시 HTML <table>. 이미지 요금표 절대 금지.
   ========================================================================== */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* 키보드 사용자가 스크롤 영역에 포커스로 진입할 수 있어야 한다 (WCAG 2.1.1).
     마크업에 tabindex="0" role="region" aria-label="..." 을 함께 넣는다. */
  scrollbar-width: thin;
  /* 스크롤이 더 있다는 것을 알리는 좌우 그림자 — 잘려 보이는 표에서 이탈을 막는다 */
  background:
    linear-gradient(to right, var(--neutral-0) 30%, rgba(255,255,255,0)) left center / 24px 100% no-repeat,
    linear-gradient(to left,  var(--neutral-0) 30%, rgba(255,255,255,0)) right center / 24px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(13,25,41,.14), rgba(13,25,41,0)) left center / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(13,25,41,.14), rgba(13,25,41,0)) right center / 12px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.table-scroll:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 2px; }
/* 모바일 스크롤 안내 캡션 — 표 위에 둔다 */
.table-hint {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}
@media (min-width: 768px) { .table-hint { display: none; } }

.table {
  width: 100%;
  min-width: 560px;                 /* 이 폭 아래로는 열이 뭉개진다 → 가로 스크롤로 전환 */
  border-collapse: collapse;
  font-size: var(--fs-caption);
  background: var(--neutral-0);
}
@media (min-width: 768px) { .table { font-size: var(--fs-body); } }

.table caption {
  caption-side: top;
  padding-bottom: var(--space-3);
  text-align: left;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}
.table th,
.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
  vertical-align: middle;
  text-align: left;
}
.table thead th {
  background: var(--navy-50);
  border-bottom: var(--border-width-strong) solid var(--navy-700);
  color: var(--navy-800);
  font-weight: var(--fw-bold);
  font-size: var(--fs-caption);
  white-space: nowrap;
}
/* 행 머리(차량명 등)는 좌측 고정 열처럼 보이게 굵게 */
.table tbody th { font-weight: var(--fw-bold); color: var(--color-text-strong); white-space: nowrap; }
.table tbody tr:last-child th,
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--neutral-50); }

.table--striped tbody tr:nth-child(odd) { background: var(--neutral-50); }
.table--striped tbody tr:hover { background: var(--navy-50); }
.table--bordered th, .table--bordered td { border: var(--border-width) solid var(--color-border); }
.table--compact th, .table--compact td { padding: var(--space-2) var(--space-3); }

/* 수치 열 — 요금·중량·규격. 우측 정렬 + 자릿수 고정 */
.table .num-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 기준요금 셀 강조 — 액션 컬러가 허용되는 몇 안 되는 자리 */
.table .price-cell {
  text-align: right;
  font-weight: var(--fw-bold);
  color: var(--action-900);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 금액 미확정 구간(D-008) — "전화 문의"로 발행 */
.table .price-cell--ask { color: var(--navy-700); }

/* 비교표 — 권장 열을 한 칸만 강조한다(바이크 3종 중 리프트용달 등) */
.table--compare .is-recommended { background: var(--navy-50); }
.table--compare thead th.is-recommended { background: var(--navy-700); color: var(--neutral-0); }

/* 표 하단 각주 — 기준일자·할증 고지. 법적 방어장치이므로 반드시 붙인다(D-008) */
.table-note {
  margin-top: var(--space-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--color-text-muted);
}
.table-note > * + * { margin-top: var(--space-1); }


/* ==========================================================================
   11. 아코디언 (FAQ 8문항 · 개인정보 동의 전문)
   ★ <details>/<summary> 기반 — JS 없이 동작하고, 스크린리더 지원이 기본 제공된다.
     JS 로 만든 아코디언은 스크립트가 실패하면 내용이 영원히 감춰진다.
   ========================================================================== */
.accordion { border-top: var(--border-width-strong) solid var(--navy-700); }
.accordion__item { border-bottom: var(--border-width) solid var(--color-border); }

.accordion__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--tap-min-cta);
  padding: var(--space-4) var(--space-1);
  cursor: pointer;
  list-style: none;                 /* 기본 삼각형 제거 */
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text-strong);
  transition: color var(--dur-fast) var(--ease-out);
}
.accordion__head::-webkit-details-marker { display: none; }
.accordion__head:hover { color: var(--blue-700); }
.accordion__q {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.55;
}
/* Q 마커 — FAQ 에서만. 동의 전문 아코디언에는 쓰지 않는다 */
.accordion__marker {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--navy-100);
  color: var(--navy-800);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}
.accordion__chevron {
  flex: 0 0 auto;
  margin-top: 0.15em;
  color: var(--navy-600);
  transition: transform var(--dur-slow) var(--ease-out);
}
.accordion__item[open] > .accordion__head .accordion__chevron { transform: rotate(180deg); }
.accordion__item[open] > .accordion__head { color: var(--navy-800); }

.accordion__panel {
  padding: 0 var(--space-1) var(--space-6);
  color: var(--color-text);
}
.accordion__panel > * + * { margin-top: var(--space-3); }
/* 답변 왼쪽에 라인을 둬 질문과 답변의 층위를 구분한다 */
.accordion__panel--indent {
  margin-left: calc(26px + var(--space-3));
  padding-left: var(--space-4);
  border-left: var(--border-width-strong) solid var(--navy-100);
}


/* ==========================================================================
   12. 탭 (화물 톤수 선택 등) — CSS-only. 라디오 + 형제 선택자.
   DOM 순서: .tabs > input×N → .tabs__list(label×N) → .tabs__panels(panel×N)
   ★ 라디오를 쓰므로 키보드 좌우 화살표 이동이 브라우저 기본으로 동작한다.
   ========================================================================== */
.tabs { display: block; }
.tabs__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tabs__list {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-bottom: var(--border-width-strong) solid var(--color-border);
  scrollbar-width: none;
}
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-4);
  margin-bottom: -2px;              /* 하단 보더 위에 탭 밑줄을 겹쳐 올린다 */
  border-bottom: var(--border-width-strong) solid transparent;
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.tabs__label:hover { color: var(--navy-700); }
.tabs__panel { display: none; padding-top: var(--space-6); }

/* 최대 6탭 지원 — IA상 화물 톤수 5개(1/2.5/5/11/25톤)가 최대치다 */
.tabs__input:nth-of-type(1):checked ~ .tabs__list .tabs__label:nth-of-type(1),
.tabs__input:nth-of-type(2):checked ~ .tabs__list .tabs__label:nth-of-type(2),
.tabs__input:nth-of-type(3):checked ~ .tabs__list .tabs__label:nth-of-type(3),
.tabs__input:nth-of-type(4):checked ~ .tabs__list .tabs__label:nth-of-type(4),
.tabs__input:nth-of-type(5):checked ~ .tabs__list .tabs__label:nth-of-type(5),
.tabs__input:nth-of-type(6):checked ~ .tabs__list .tabs__label:nth-of-type(6) {
  color: var(--navy-800);
  border-bottom-color: var(--navy-700);
}
.tabs__input:nth-of-type(1):checked ~ .tabs__panels > .tabs__panel:nth-of-type(1),
.tabs__input:nth-of-type(2):checked ~ .tabs__panels > .tabs__panel:nth-of-type(2),
.tabs__input:nth-of-type(3):checked ~ .tabs__panels > .tabs__panel:nth-of-type(3),
.tabs__input:nth-of-type(4):checked ~ .tabs__panels > .tabs__panel:nth-of-type(4),
.tabs__input:nth-of-type(5):checked ~ .tabs__panels > .tabs__panel:nth-of-type(5),
.tabs__input:nth-of-type(6):checked ~ .tabs__panels > .tabs__panel:nth-of-type(6) {
  display: block;
}
/* 키보드 포커스가 라디오에 있을 때 해당 라벨에 링을 보여 준다 */
.tabs__input:nth-of-type(1):focus-visible ~ .tabs__list .tabs__label:nth-of-type(1),
.tabs__input:nth-of-type(2):focus-visible ~ .tabs__list .tabs__label:nth-of-type(2),
.tabs__input:nth-of-type(3):focus-visible ~ .tabs__list .tabs__label:nth-of-type(3),
.tabs__input:nth-of-type(4):focus-visible ~ .tabs__list .tabs__label:nth-of-type(4),
.tabs__input:nth-of-type(5):focus-visible ~ .tabs__list .tabs__label:nth-of-type(5),
.tabs__input:nth-of-type(6):focus-visible ~ .tabs__list .tabs__label:nth-of-type(6) {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: -3px;
}


/* ==========================================================================
   13. 히어로
   ========================================================================== */
.hero {
  position: relative;
  background: var(--gradient-navy);
  color: var(--color-text-on-brand);
  overflow: hidden;
}
.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--space-12) var(--space-16);
}
@media (min-width: 1024px) { .hero__inner { padding-block: var(--space-24) var(--space-32); } }

/* 배경 실사 — 사진 위에 네이비 오버레이를 덮어 어떤 사진이 와도 텍스트 대비를 보장한다.
   실사 미확보 상태에서도 그라디언트만으로 완성돼 보이도록 설계했다. */
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,25,41,.86) 0%, rgba(13,25,41,.74) 55%, rgba(13,25,41,.92) 100%);
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--blue-300);
}
.hero__title {
  margin-top: var(--space-4);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  color: var(--neutral-0);
}
.hero__en {
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.22em;          /* 영문 대문자 전용 */
  color: var(--navy-300);
}
.hero__lead {
  margin-top: var(--space-6);
  max-width: 42em;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--navy-200);          /* navy-800 위 10.15:1 */
}
.hero__proof {
  margin-top: var(--space-6);
  font-size: var(--fs-caption);
  color: var(--navy-300);
}
.hero__actions { margin-top: var(--space-8); }
@media (min-width: 480px) { .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); } }

/* 서브페이지 히어로 — 메인보다 낮고 조용하게 */
.hero--page .hero__inner { padding-block: var(--space-8) var(--space-12); }
@media (min-width: 1024px) { .hero--page .hero__inner { padding-block: var(--space-12) var(--space-16); } }
.hero--page .hero__title { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }

/* 바이크 페이지 전용 — 더 어두운 톤 (벤치마크 §9-2 #18) */
.hero--deep { background: linear-gradient(160deg, var(--navy-800) 0%, #060B14 100%); }

/* 밝은 히어로 — 요금안내처럼 정보 밀도가 높아 다크가 부담스러운 페이지 */
.hero--light {
  background: var(--navy-50);
  color: var(--color-text);
  border-bottom: var(--border-width) solid var(--navy-100);
}
.hero--light .hero__title { color: var(--color-text-strong); }
.hero--light .hero__lead  { color: var(--color-text); }
.hero--light .hero__eyebrow { color: var(--blue-700); }
.hero--light .hero__en, .hero--light .hero__proof { color: var(--color-text-muted); }


/* ==========================================================================
   14. 섹션 헤더
   ========================================================================== */
.section-head { max-width: 44em; margin-bottom: var(--space-8); }
@media (min-width: 1024px) { .section-head { margin-bottom: var(--space-12); } }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head__rule { margin-bottom: var(--space-4); }          /* 무지개 짧은 룰 자리 */
.section-head--center .section-head__rule { margin-inline: auto; }
.section-head__eyebrow {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  color: var(--blue-700);
  text-transform: uppercase;
}
.section-head__title {
  margin-top: var(--space-2);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: var(--fw-h2);
  color: var(--color-text-strong);
}
.section-head__lead {
  margin-top: var(--space-4);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--color-text-muted);
}
.section--brand .section-head__eyebrow { color: var(--blue-300); }
.section--brand .section-head__lead    { color: var(--navy-200); }


/* ==========================================================================
   15. 이용 절차 스텝 (홈 #process)
   ★ "전화 걸기 전에 무엇을 준비하나"를 알려 통화 부담을 없애는 장치 (IA §5-2)
   ========================================================================== */
.steps { counter-reset: step; }
.steps__item {
  position: relative;
  counter-increment: step;
  padding-left: calc(44px + var(--space-4));
  padding-bottom: var(--space-8);
}
.steps__item:last-child { padding-bottom: 0; }
/* 번호 원 */
.steps__item::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--navy-700);
  color: var(--neutral-0);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
/* 연결선 — 마지막 스텝에는 그리지 않는다 */
.steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 21px; top: 48px; bottom: 8px;
  width: 2px;
  background: var(--navy-100);
}
.steps__title { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--color-text-strong); }
.steps__body  { margin-top: var(--space-2); color: var(--color-text); }

/* 데스크톱 가로 전개 */
@media (min-width: 1024px) {
  .steps--horizontal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-6); }
  .steps--horizontal .steps__item { padding-left: 0; padding-top: calc(44px + var(--space-4)); padding-bottom: 0; }
  .steps--horizontal .steps__item::before { top: 0; left: 0; }
  .steps--horizontal .steps__item:not(:last-child)::after {
    left: 52px; top: 21px; bottom: auto; right: calc(var(--space-6) * -1);
    width: auto; height: 2px;
  }
}
.section--brand .steps__item::before { background: var(--neutral-0); color: var(--navy-800); }
.section--brand .steps__item:not(:last-child)::after { background: rgba(255,255,255,.22); }


/* ==========================================================================
   16. CTA 밴드 (전 페이지 하단 공통 #cta-band)
   ========================================================================== */
.cta-band {
  background: var(--gradient-navy);
  color: var(--color-text-on-brand);
  padding-block: var(--space-12);
  text-align: center;
}
@media (min-width: 1024px) { .cta-band { padding-block: var(--space-16); text-align: left; } }
.cta-band__inner { display: grid; gap: var(--space-8); }
@media (min-width: 1024px) {
  .cta-band__inner { grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: var(--space-12); }
}
.cta-band__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: var(--fw-bold);
  color: var(--neutral-0);
}
.cta-band__lead { margin-top: var(--space-3); color: var(--navy-200); }
/* 밴드 보조문 — 리드보다 한 단계 작게. 색은 리드와 같은 "브랜드 면 위 보조 텍스트" 토큰.
   (--color-text-on-brand-mut = --navy-200, 브랜드 면 위 5.65:1 AA) */
.cta-band__note {
  margin-top: var(--space-3);
  color: var(--color-text-on-brand-mut);
  font-size: var(--fs-caption);
}
/* ★ flex-wrap — 인터넷 접수 버튼이 들어와 1024px 에서 버튼이 3개가 되었다(D-051).
   .btn 은 white-space:nowrap 이므로 wrap 이 없으면 좁은 폭에서 가로로 넘친다. */
.cta-band__actions { display: flex; flex-direction: column; flex-wrap: wrap; gap: var(--space-3); }
@media (min-width: 480px) { .cta-band__actions { flex-direction: row; justify-content: center; } }
@media (min-width: 1024px) { .cta-band__actions { justify-content: flex-end; } }

/* 밝은 변형 — 페이지 안에서 중간 CTA로 쓸 때(다크 밴드가 두 번 연속되면 무겁다) */
.cta-band--soft {
  background: var(--navy-50);
  color: var(--color-text);
  border-block: var(--border-width) solid var(--navy-100);
}
.cta-band--soft .cta-band__title { color: var(--color-text-strong); }
.cta-band--soft .cta-band__lead  { color: var(--color-text-muted); }


/* ==========================================================================
   17. 헤더 · GNB · 메가 드롭다운 · 모바일 메뉴  (IA §3)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--navy-700);
  color: var(--neutral-0);
}
.site-header__rule { height: 3px; background: var(--gradient-rainbow-on-dark); }  /* ★ 무지개 사용처 1/2 */
.site-header.is-scrolled { box-shadow: var(--shadow-2); }

/* --- 17-1. 데스크톱 유틸바 (허가번호·운영시간 상시 노출) --- */
.utilbar { display: none; background: var(--navy-800); font-size: var(--fs-caption); }
@media (min-width: 1024px) {
  .utilbar { display: block; }
  .utilbar__inner { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4); min-height: var(--utilbar-h-lg); color: var(--navy-200); }
  .utilbar__item { display: inline-flex; align-items: center; gap: var(--space-1); }
  .utilbar__divider { width: 1px; height: 12px; background: rgba(255,255,255,.24); }
}

/* --- 17-2. 메인 헤더 바 --- */
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--header-h);
}
@media (min-width: 1024px) { .site-header__bar { min-height: var(--header-h-lg); gap: var(--space-8); } }

/* --- 17-3. GNB (데스크톱) --- */
.gnb { display: none; }
@media (min-width: 1024px) {
  /* ★ 메가 드롭다운의 기준 상자는 개별 메뉴 항목이 아니라 .gnb 다 (아래 17-4 참조).
        .gnb 는 로고와 우측 액션 사이를 채우는 flex 항목이므로 항상 .container 안에 있고,
        .container 는 좌우 거터를 가진 채 가운데 정렬된다 → .gnb 상자 안에 가둬 두기만 하면
        어떤 뷰포트 폭에서도 화면 밖으로 나갈 수 없다. */
  .gnb { display: flex; align-items: center; gap: var(--space-1); flex: 1 1 auto; position: relative; }
  /* position:static — 기준 상자를 .gnb 로 넘긴다. .gnb__item 은 z-index 를 갖지 않아
     쌓임 맥락을 만들지 않았으므로 드롭다운의 --z-dropdown 순서는 그대로다.
     캐럿 회전(.gnb__caret)은 :hover/:focus-within 선택자만 쓰므로 영향이 없다. */
  .gnb__item { position: static; }
  .gnb__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--header-h-lg);
    padding-inline: var(--space-4);
    color: var(--neutral-0);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  }
  .gnb__link:hover { background: rgba(255,255,255,.10); color: var(--neutral-0); }
  .gnb__item[aria-current="page"] > .gnb__link,
  .gnb__link.is-active { border-bottom-color: var(--action-400); }
  .gnb__caret { transition: transform var(--dur-base) var(--ease-out); }
  .gnb__item:hover .gnb__caret, .gnb__item:focus-within .gnb__caret { transform: rotate(180deg); }
}

/* --- 17-4. 메가 드롭다운 — 서비스 3종 + 각 하위 앵커 동시 노출 (IA §3-3) --- */
.megamenu { display: none; }
@media (min-width: 1024px) {
  .megamenu {
    /* 컴포넌트 토큰 — 3열 그리드가 편안한 기준 폭. 매직넘버 승격 (640px = 40rem) */
    --megamenu-w: 40rem;
    --megamenu-rise: calc(var(--space-1) * -1.5); /* 등장 시 살짝 내려오는 거리 (-6px) */
    display: block;
    position: absolute;
    /* 기준 상자 = .gnb (17-3). left:0 → .gnb 의 첫 항목(= "서비스" 버튼) 왼쪽 모서리에 정렬되고,
       width 가 min(기준폭, 100%) 이라 오른쪽도 .gnb 밖으로 나갈 수 없다.
       즉 패널은 .gnb ⊂ .container ⊂ 뷰포트 안에 수학적으로 갇힌다 — 뷰포트 폭에
       의존하지 않는 구조적 보장이다. (이전 구현은 버튼 중심 기준 translateX(-50%) 라
       1024~1470px 구간에서 왼쪽으로 최대 111px 잘려 나갔다.)
       ※ 유지보수 주의: "서비스" 가 GNB 첫 항목이라는 전제에서 버튼과 시각적으로 붙는다.
         메뉴 순서를 바꾸면 넘침은 그대로 막히지만 정렬 기준을 다시 잡아야 한다. */
    top: 100%; left: 0;
    width: min(var(--megamenu-w), 100%);
    transform: translateY(var(--megamenu-rise));
    z-index: var(--z-dropdown);
    padding: var(--space-6);
    background: var(--neutral-0);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
  }
  .gnb__item:hover > .megamenu,
  .gnb__item:focus-within > .megamenu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0);
  }
  .megamenu__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-6); }
  .megamenu__col { min-width: 0; }
  .megamenu__title {
    display: flex; align-items: center; gap: var(--space-2);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: var(--border-width) solid var(--color-border);
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    color: var(--navy-800);
    text-decoration: none;
  }
  .megamenu__title:hover { color: var(--blue-700); }
  .megamenu__desc { font-size: var(--fs-caption); color: var(--color-text-muted); margin-bottom: var(--space-3); }
  .megamenu__list > li + li { margin-top: var(--space-1); }
  .megamenu__link {
    display: block;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--fs-caption);
    color: var(--color-text);
    text-decoration: none;
  }
  .megamenu__link:hover { background: var(--navy-50); color: var(--navy-800); }
  .megamenu__foot {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--color-border);
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    font-size: var(--fs-caption);
    color: var(--color-text-muted);
  }
}

/* --- 17-5. 헤더 우측 액션 --- */
.site-header__actions { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }
.header-tel { display: none; }
@media (min-width: 1024px) { .header-tel { display: inline-flex; } }

/* 인터넷 접수(외부 시스템) — 전화 버튼 왼쪽의 보조 액션 (D-031).
   ★ 색은 .btn--on-dark 를 그대로 쓴다. 새 색을 만들지 않는다.
     (브랜드 면색 #1A44B4 위 흰 라벨 8.30:1 / 테두리 3.64:1 — WCAG 1.4.11 충족)
   ★ 여기서 정하는 것은 "언제 보이는지"와 "얼마나 좁은지"뿐이다.
     - .header-tel 과 같은 규칙으로 데스크톱(1024px+)에서만 노출한다.
       모바일은 .nav-overlay__foot 이 같은 링크를 이미 갖고 있고,
       하단 고정바는 전화 1칸을 유지해야 하므로(D-027) 여기 두면 중복이다.
     - 1024px 에서 GNB 4항목 + 전화 버튼과 한 줄에 들어가야 해서
       좌우 패딩만 한 단계 줄인다. 높이(--tap-min 44px)는 줄이지 않는다. */
.header-order { display: none; }
@media (min-width: 1024px) {
  .header-order { display: inline-flex; padding-inline: var(--space-4); }
}

/* --- 17-6. 햄버거 버튼 (모바일) --- */
.nav-toggle { display: inline-flex; }
@media (min-width: 1024px) { .nav-toggle { display: none; } }
.nav-toggle__bars { position: relative; width: 20px; height: 14px; }
.nav-toggle__bars span {
  position: absolute; left: 0;
  width: 100%; height: 2px;
  background: currentColor;
  border-radius: var(--radius-pill);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- 17-7. 모바일 전체메뉴 오버레이 (1뎁스 평면 전개, 아코디언 금지 — IA §3-1) --- */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  background: var(--navy-800);
  color: var(--neutral-0);
  overscroll-behavior: contain;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
}
.nav-overlay.is-open { transform: translateX(0); visibility: visible; }
@media (min-width: 1024px) { .nav-overlay { display: none; } }
.nav-overlay__head {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--header-h);
  padding-inline: var(--gutter);
  border-bottom: var(--border-width) solid var(--color-border-on-dark);
}
.nav-overlay__body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-4) var(--gutter); }
.nav-overlay__list > li + li { border-top: var(--border-width) solid rgba(255,255,255,.10); }
.nav-overlay__link {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px;
  color: var(--neutral-0);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.nav-overlay__link:hover { color: var(--blue-300); }
.nav-overlay__foot {
  padding: var(--space-4) var(--gutter) calc(var(--space-6) + var(--safe-bottom));
  border-top: var(--border-width) solid var(--color-border-on-dark);
  display: grid; gap: var(--space-3);
}
/* 오버레이 뒤 배경 딤 — 슬라이드가 전체를 덮으므로 보조 역할만 */
.nav-scrim {
  position: fixed; inset: 0;
  z-index: calc(var(--z-overlay) - 1);
  background: rgba(13,25,41,.55);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }
@media (min-width: 1024px) { .nav-scrim { display: none; } }


/* ==========================================================================
   18. 모바일 하단 고정 액션바 (D-010 §3-2 / D-013 #1)
   ★ 전 페이지 상시 노출. 푸터에서도 숨기지 않는다 — 전환 지점 상실 방지.
   ★ 1024px 이상에서 완전히 제거한다(데스크톱은 sticky 헤더 CTA가 담당).
   ========================================================================== */
.bottombar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-bottombar);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;   /* 전화 50% / 카톡 25% / 상담 25% */
  background: var(--neutral-0);
  border-top: var(--border-width) solid var(--color-border);
  box-shadow: var(--shadow-bottombar);
  padding-bottom: var(--safe-bottom);   /* iPhone 홈 인디케이터 영역 */
}
@media (min-width: 1024px) { .bottombar { display: none; } }
/* 카카오 채널 미보유 시 2버튼 구성 (카피 §1: 전화 65% / 상담 35%) */
.bottombar--2 { grid-template-columns: 65fr 35fr; }

.bottombar__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--bottombar-h);
  padding: var(--space-2) var(--space-1);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--navy-700);
  text-decoration: none;
  border-left: var(--border-width) solid var(--color-border);
}
.bottombar__btn:first-child { border-left: 0; }
.bottombar__num { font-size: 0.9em; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; letter-spacing: 0; }
/* 전화 슬롯만 solid — 하단바에서 유일하게 색을 채우는 버튼 */
.bottombar__btn--tel { background: var(--action-600); color: var(--neutral-0); border-left: 0; }
.bottombar__btn--tel:hover { background: var(--action-700); color: var(--neutral-0); }
.bottombar__btn--kakao { color: var(--navy-800); }
.bottombar__btn:hover { background: var(--navy-50); }
.bottombar__btn--tel:active { background: var(--action-800); }


/* ==========================================================================
   19. 푸터
   ★ 4층 구조 (D-013 #43): 브랜드/연락 → 사이트맵 → 사업자정보 → 정책·저작권
   ★ 입금계좌는 푸터에 넣지 않는다 (개인사업자 인상 + 피싱 의심 방지)
   ========================================================================== */
.site-footer { background: var(--navy-800); color: var(--navy-200); font-size: var(--fs-caption); }
.site-footer__rule { height: 3px; background: var(--gradient-rainbow-on-dark); } /* ★ 무지개 사용처 2/2 */
.site-footer a { color: var(--navy-200); text-decoration: none; }
.site-footer a:hover { color: var(--neutral-0); text-decoration: underline; }

.site-footer__top { padding-block: var(--space-12); }
.site-footer__grid { display: grid; gap: var(--space-8); }
@media (min-width: 768px)  { .site-footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-12); } }

.site-footer__heading {
  margin-bottom: var(--space-4);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--neutral-0);
}
.site-footer__list > li + li { margin-top: var(--space-2); }
.site-footer__tel { display: block; }
.site-footer__tel .num {
  font-size: var(--fs-h3);
  font-weight: var(--fw-extrabold);
  color: var(--neutral-0);
  letter-spacing: -0.02em;
}

/* 사업자 정보 dl — 어두운 배경 변형 */
.site-footer .deflist { border-top-color: rgba(255,255,255,.28); }
.site-footer .deflist__row { border-bottom-color: rgba(255,255,255,.10); }
.site-footer .deflist__term { color: var(--navy-300); }
.site-footer .deflist__desc { color: var(--neutral-0); font-weight: var(--fw-regular); }

/* 지역 키워드 링크 층 — 검색 유입용. 작게, 조용하게. */
.site-footer__keywords {
  padding-block: var(--space-6);
  border-top: var(--border-width) solid rgba(255,255,255,.10);
  color: var(--navy-300);
  font-size: var(--fs-caption);
  line-height: 2;
}
.site-footer__keywords a { color: var(--navy-300); }

.site-footer__bottom {
  padding-block: var(--space-6);
  border-top: var(--border-width) solid rgba(255,255,255,.10);
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  align-items: center; justify-content: space-between;
}
.site-footer__policy { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.site-footer__policy a { font-weight: var(--fw-semibold); color: var(--neutral-0); }
.site-footer__copy { color: var(--navy-300); }


/* ==========================================================================
   20. 브레드크럼 · 페이지 헤더 · 앵커 서브네비
   ========================================================================== */
.breadcrumb { font-size: var(--fs-caption); }
.breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.breadcrumb__item { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); }
.breadcrumb__item a { color: inherit; text-decoration: none; }
.breadcrumb__item a:hover { color: var(--blue-700); text-decoration: underline; }
.breadcrumb__sep { color: var(--neutral-400); }
.breadcrumb__item[aria-current="page"] { color: var(--color-text-strong); font-weight: var(--fw-semibold); }
/* 다크 히어로 안에 놓일 때 */
.on-dark .breadcrumb__item { color: var(--navy-300); }
.on-dark .breadcrumb__item a:hover { color: var(--neutral-0); }
.on-dark .breadcrumb__item[aria-current="page"] { color: var(--neutral-0); }

/* 서브페이지 공통 페이지 헤더 (히어로를 쓰지 않는 경량 페이지: 약관·정책) */
.page-header {
  padding-block: var(--space-8);
  border-bottom: var(--border-width) solid var(--color-border);
  background: var(--neutral-50);
}
.page-header__title { margin-top: var(--space-3); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
.page-header__lead  { margin-top: var(--space-3); color: var(--color-text-muted); }

/* 앵커 서브네비 — 긴 서비스 페이지의 섹션 바로가기. 모바일 가로 스크롤 칩 */
.subnav {
  position: sticky;
  top: var(--header-h);
  z-index: var(--z-sticky);
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: var(--border-width) solid var(--color-border);
}
@media (min-width: 1024px) { .subnav { top: var(--header-h-lg); } }
.subnav__list {
  display: flex;
  gap: var(--space-2);
  padding-block: var(--space-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.subnav__list::-webkit-scrollbar { display: none; }


/* ==========================================================================
   21. 기타
   ========================================================================== */

/* 이미지 자리표시자 — 실사 미확보 구간([사업자 확인 필요] #12)에서 레이아웃을 유지한다 */
.media-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-2);
  background:
    repeating-linear-gradient(135deg, var(--neutral-100) 0 10px, var(--neutral-50) 10px 20px);
  border: var(--border-width) dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
  text-align: center;
  padding: var(--space-6);
}

/* 문자 문의 템플릿 박스 (벤치마크 §9-5 #39) — 복사해서 보내는 양식 */
.copy-box {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--neutral-50);
}
.copy-box__text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  line-height: 1.9;
  color: var(--color-text-strong);
  white-space: pre-wrap;
  word-break: keep-all;
}

/* 비교 대비 2열 (일반 용달 vs 무지개퀵 — 벤치마크 §9-2 #17) */
.versus { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .versus { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-6); } }
.versus__col { padding: var(--space-6); border-radius: var(--radius-lg); }
.versus__col--them { background: var(--neutral-100); color: var(--color-text-muted); }
.versus__col--us   { background: var(--navy-50); border: var(--border-width-strong) solid var(--navy-700); }
.versus__title { font-size: var(--fs-h4); font-weight: var(--fw-bold); margin-bottom: var(--space-3); }
.versus__col--us .versus__title { color: var(--navy-800); }
.versus__list > li { display: flex; gap: var(--space-2); }
.versus__list > li + li { margin-top: var(--space-2); }

/* 구분선 유틸 */
.divider { height: 1px; border: 0; background: var(--color-border); margin-block: var(--space-8); }
.divider--on-dark { background: rgba(255,255,255,.14); }