@charset "UTF-8";
/* ==========================================================================
   pages.css — 페이지 전용 보강 스타일 (퍼블리싱 소관)
   전국무지개퀵화물(무지개퀵) · ver 1.0.0 / 2026-08-23 / web-engineer

   ★ 규칙
   - tokens.css / base.css / layout.css / components.css 는 수정하지 않는다(다른 담당 소유).
     기존 컴포넌트로 표현되지 않는 것만 여기에 추가한다.
   - 색·간격·타이포·반경·그림자는 전부 tokens.css 변수만 참조한다. 하드코딩 금지.
   - 모바일 퍼스트. min-width 미디어쿼리만 사용한다 (D-016).
   - 로드 순서상 마지막이므로 상세도(specificity)를 높이지 않아도 덮인다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 320px 방어 — 가로 스크롤 0 (D-016)
   긴 무단어 문자열(주소·번호)이 그리드를 밀어내지 않도록 최소 폭을 풀어 준다.
   -------------------------------------------------------------------------- */
.container > *,
.grid > *,
.cluster > * { min-width: 0; }

.site-header__bar > .logo { min-width: 0; }
.logo__text { min-width: 0; }
.logo__name,
.logo__sub { overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   1. 스킵 링크 — base.css .sr-only--focusable 가 노출 스타일을 담당한다.
   여기서는 인쇄 숨김 대상(.skip-link) 훅만 유지한다.
   -------------------------------------------------------------------------- */
.skip-link { font-weight: var(--fw-bold); }

/* --------------------------------------------------------------------------
   2. 헤더 보강
   -------------------------------------------------------------------------- */
/* GNB 를 감싸는 nav — 모바일에서는 내용이 없으므로 자리를 차지하지 않는다 */
.gnb-wrap { display: contents; }
@media (min-width: 1024px) {
  .gnb-wrap { display: block; flex: 1 1 auto; min-width: 0; }
}
/* 헤더 카카오톡 버튼 — 데스크톱 전용. 모바일은 하단 고정 액션바가 담당한다 (D-025) */
.header-kakao { display: none; }
@media (min-width: 1024px) { .header-kakao { display: inline-flex; } }

/* 헤더 우측 전화 아이콘 버튼 — 모바일 전용 (데스크톱은 .header-tel 이 담당) */
.only-mobile-flex { display: inline-flex; }
@media (min-width: 1024px) { .only-mobile-flex { display: none; } }

/* 메가메뉴 트리거가 <button> 이므로 기본 버튼 여백을 지운다 */
.gnb__link { font-family: inherit; }
@media (min-width: 1024px) {
  button.gnb__link { border-top: 0; border-left: 0; border-right: 0; }
}

/* 로고 마크 — 전용 SVG 확보 전까지 tokens.css 가 허용한 무지개 그라디언트 칩으로 채운다.
   ★ D-004: 무지개는 로고 마크와 3px 이하 선형 요소에만. 여기가 허용된 2곳 중 하나다.
   ★ 디자이너가 로고 SVG 를 넣으면 이 규칙은 지워도 된다. */
.logo__mark { background: var(--gradient-rainbow); }
.on-dark .logo__mark,
.site-header .logo__mark,
.site-footer .logo__mark { background: var(--gradient-rainbow-on-dark); }

.nav-overlay__title { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--neutral-0); }
.utilbar__inner { margin: 0; }

/* --------------------------------------------------------------------------
   3. 히어로 보강
   -------------------------------------------------------------------------- */
.hero__note {
  margin-top: var(--space-3);
  font-size: var(--fs-caption);
  color: var(--neutral-600);        /* 3-A 그레이 히어로 전환에 맞춰 navy-300 → 5.79:1 */
}
.hero__notice { margin-top: var(--space-6); background: var(--neutral-0); }
.hero .breadcrumb { margin-bottom: var(--space-4); }

/* --------------------------------------------------------------------------
   3-A. ★ 히어로 그레이 전환 (고객 요청 / PM 승인)
   -------------------------------------------------------------------------- */
/* [왜 여기에 쓰는가]
   원인 — 헤더 #1A44B4(navy-700) 와 히어로 면색(blue-800 = 같은 #1A44B4 계열)이
          모바일 390px 실측에서 ΔE≈1 로 붙어 버려 헤더 경계가 사라졌다.
   조치 — 히어로 면을 밝은 쿨그레이(neutral-200 #E4EAF2)로 뒤집고 글자를 네이비로 바꾼다.
          명도 92% vs 40%, 채도 35% vs 75% — 헤더와 두 축 모두에서 갈린다.
          본문 흰 배경과도 1.21:1 로 떨어져 "흰색에 가까워 또 붙는" 문제를 피한다.
          (팔레트 안에서 흰색과 가장 멀면서 네이비 본문이 AA 를 넘는 유일한 밝은 톤이다.
           neutral-100 #EFF3F9 은 1.11:1 로 부족, neutral-300 #8191A7 은 너무 어둡다.)
   특정도 — .hero 면색은 components.css 의 `.hero`(0,1,0)·`.hero--light`(0,1,0)·
          `.hero--deep`(0,1,0)를 전부 덮어야 하므로 세 선택자를 명시한다.
          tokens.css 는 수정 금지 대상이라 새 토큰을 만들지 않고 기존 토큰만 참조한다. */
.hero,
.hero--light,
.hero--deep {
  background: var(--neutral-200);                 /* #E4EAF2 */
  color: var(--color-text);
  /* 히어로 아래 첫 섹션과 붙지 않게 하는 경계선.
     index 는 바로 아래가 #trust-strip(brand-soft #EFF5FF)이라 면색끼리는 1.11:1 로 약하다.
     서비스 페이지는 .subnav(흰색)라 문제없지만, 규칙을 페이지마다 나누지 않고 한 줄로 통일한다. */
  border-bottom: var(--border-width) solid var(--color-border-strong);
}
/* 배경 일러스트 — 위에 깔리는 스크림을 다크에서 라이트로 뒤집는다.
   rgba 는 neutral-200(#E4EAF2)의 알파 합성값이다. tokens 에 알파 토큰이 없어 rgb 로 적는다.
   특정도 — tokens.css 의 [브리지] `.hero .hero__media::after`(0,2,1)와 같은 값이라
            소스 순서(pages.css 가 마지막)로 이긴다. !important 를 쓰지 않는다.

   [기본] 서브페이지 배너 banner-*.svg 6종이 밝은 원화로 다시 그려졌다(F-80).
          바탕 rect 가 히어로 면색 #E4EAF2 와 같은 값이고, 원화는 SVG 안의 가로 마스크
          (38%~55% 페이드)로 이미 오른쪽에만 있다. 그래서 예전의 "거의 불투명"(.95~.97)
          베일은 존재 이유가 사라졌다 — 그림을 지우기만 했다.
          ★ 그래도 0 으로 열 수는 없다. preserveAspectRatio 가 xMidYMax slice 라
            좁은 폭에서는 배너의 '가운데'가 확대돼 잘려 들어오고, 그 가운데에 원화가
            걸린다. 모바일은 글자가 폭 전체를 덮으므로 세로 베일을 남긴다.
          ★ 1024px 이상은 글자가 왼쪽에만 있고 배너 왼쪽은 원화가 없는 단색 #E4EAF2 라,
            왼쪽을 두껍게 덮어도 보이는 것이 달라지지 않는다(= 대비는 히어로 면색 기준
            그대로 유지). 오른쪽만 열어 원화를 그대로 보여 준다. */
.hero .hero__media::after {
  background: linear-gradient(180deg,
    rgba(228, 234, 242, .72) 0%,
    rgba(228, 234, 242, .62) 55%,
    rgba(228, 234, 242, .78) 100%);
}
/* 1024~1279 — 데스크톱 레이아웃이 막 시작된 구간. 컨테이너가 좁아 히어로 한 줄이
   길어진다(quick 의 .hero__proof 가 뷰포트의 72.6% 까지 간다). 게다가 배너 SVG 는
   slice 라 폭이 좁을수록 원화가 확대돼 글자 쪽으로 밀려온다. 그래서 이 구간은
   오른쪽 끝 약 1/4 만 연다. */
@media (min-width: 1024px) {
  .hero .hero__media::after {
    background: linear-gradient(90deg,
      rgba(228, 234, 242, .95) 0%,
      rgba(228, 234, 242, .94) 60%,
      rgba(228, 234, 242, .90) 76%,
      rgba(228, 234, 242, .34) 88%,
      rgba(228, 234, 242, 0)  100%);
  }
}
/* 1280 이상 — 가장 긴 히어로 한 줄이 뷰포트의 59% 에서 끝난다. 62% 부터 열어도
   글자가 원화에 닿지 않는다. 원화가 실제로 보이는 구간은 여기다. */
@media (min-width: 1280px) {
  .hero .hero__media::after {
    background: linear-gradient(90deg,
      rgba(228, 234, 242, .95) 0%,
      rgba(228, 234, 242, .92) 42%,
      rgba(228, 234, 242, .34) 62%,
      rgba(228, 234, 242, .04) 80%,
      rgba(228, 234, 242, 0)  100%);
  }
}
/* 밝은 원화를 쓰는 히어로 — hero-light.svg 는 하늘이 #F7F9FC→#E4EAF2 라
   그레이 면색과 그대로 이어진다. 그림이 실제로 보이도록 베일을 낮춘다.
   모바일은 글자가 폭 전체를 덮으므로 세로 베일을 유지하고,
   1024px+ 에서는 글자가 왼쪽에만 있으므로 그림이 있는 오른쪽(56~100%)을 연다. */
.hero--art-light .hero__media::after {
  background: linear-gradient(180deg,
    rgba(228, 234, 242, .88) 0%,
    rgba(228, 234, 242, .80) 55%,
    rgba(228, 234, 242, .92) 100%);
}
@media (min-width: 1024px) {
  .hero--art-light .hero__media::after {
    background: linear-gradient(90deg,
      rgba(228, 234, 242, .94) 0%,
      rgba(228, 234, 242, .86) 44%,
      rgba(228, 234, 242, .28) 72%,
      rgba(228, 234, 242, 0)  100%);
  }
}
/* 텍스트 — 전부 재측정한 값. 기준 배경은 #E4EAF2 */
.hero .hero__title    { color: var(--color-text-strong); }   /* navy-800  10.67:1 AAA */
.hero .hero__lead     { color: var(--color-text); }           /* neutral-700 8.05:1 AAA */
.hero .hero__eyebrow  { color: var(--blue-700); }             /* blue-700   5.63:1 AA  */
.hero .hero__en,
.hero .hero__proof,
.hero .hero__note     { color: var(--neutral-600); }          /* neutral-600 5.79:1 AA */
/* 브레드크럼 기본색(neutral-500)은 이 배경에서 3.98:1 로 AA 미달 → 한 단계 진하게 */
.hero .breadcrumb__item { color: var(--neutral-600); }        /* 5.79:1 AA */
.hero .breadcrumb__item[aria-current="page"] { color: var(--color-text-strong); }
.hero .breadcrumb__sep  { color: var(--neutral-500); }        /* 장식(aria-hidden) */
.hero a:not([class])    { color: var(--blue-700); }        /* blue-600 은 4.27:1 로 AA 미달 → 5.63:1 */

/* 페이지 헤더(약관·정책·출처 안내)도 같은 그레이로 통일한다.
   credits 는 <section class="page-header"> 로 전폭이고,
   terms·privacy 는 .container 안의 <div> 라 좌우 여백이 없다 → div 형태에만 안쪽 여백을 준다. */
.page-header {
  background: var(--neutral-200);
  border-bottom: var(--border-width) solid var(--color-border-strong);
}
.page-header__title { color: var(--color-text-strong); }
.page-header__lead  { color: var(--neutral-600); }            /* 5.79:1 AA (기존 neutral-500 은 3.98:1) */
div.page-header {
  padding-inline: var(--space-6);
  border-radius: var(--radius-lg);
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   4. 섹션 하단 CTA 묶음
   -------------------------------------------------------------------------- */
.section__cta { margin-top: var(--space-8); }
.section-head__lead strong { color: inherit; font-weight: var(--fw-bold); }
.lead-note {
  margin-bottom: var(--space-4);
  font-size: var(--fs-body-lg);
  color: var(--color-text-strong);
}

/* --------------------------------------------------------------------------
   5. 아이콘 목록 — 체크·안내 항목. 색만으로 의미를 전달하지 않도록 아이콘+텍스트 병기.
   -------------------------------------------------------------------------- */
.icon-list { display: block; }
.icon-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  line-height: var(--lh-body);
}
.icon-list__item + .icon-list__item { margin-top: var(--space-2); }
.icon-list__item > .icon { margin-top: 0.35em; color: var(--navy-600); }
.icon-list--lg .icon-list__item { font-size: var(--fs-body); }
.icon-list--lg .icon-list__item + .icon-list__item { margin-top: var(--space-3); }
.notice--danger .icon-list__item > .icon { color: var(--danger-600); }
.notice--warn   .icon-list__item > .icon { color: var(--warn-600); }
.card--dark .icon-list__item > .icon { color: var(--blue-300); }

/* --------------------------------------------------------------------------
   6. 이미지 — figure / 자리표시자
   ★ 실사 미확보 구간은 .media-ph 로 높이를 유지해 CLS 를 막는다.
   -------------------------------------------------------------------------- */
.figure { margin: 0; }
.figure__cap {
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--color-text-muted);
}
.card .figure { margin-bottom: var(--space-4); }
.on-dark .figure__cap { color: var(--navy-300); }
/* ★ 예외 — .figure--diagram 은 --neutral-0(흰 면)이다.
   .on-dark 안에 놓여도 **캡션이 앉는 면은 밝은 면**이라 on-dark 색을 쓰면 안 된다.
   실측: --navy-300(#BDCCEF) on #FFFFFF = 1.61:1 → 사실상 비가시였다(/ 투어 다이어그램).
   같은 컴포넌트가 /bike 에서 멀쩡했던 이유는 그쪽 버튼·캡션이 figure 밖(파란 면)에 있어서다. */
.on-dark .figure--diagram .figure__cap,
.section--brand .figure--diagram .figure__cap { color: var(--color-text-muted); }

/* .ratio 안에 들어가는 자리표시자 — 이미지와 동일하게 영역을 채운다 */
.ratio > .media-ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.media-ph--map { min-height: 220px; }
@media (min-width: 768px) { .media-ph--map { min-height: 320px; } }

.vehicle-gallery { margin-top: var(--space-8); }
.vehicle-gallery--top { margin-top: 0; margin-bottom: var(--space-8); }
/* 차량 SVG 일러스트는 흰 배경 위에 그려져 있다. .ratio 의 회색 바탕이 비치지 않게 흰 면을 깐다. */
.ratio > .art { background: var(--neutral-0); object-fit: contain; }
.art { width: 100%; height: auto; }
.art--inline { margin-top: var(--space-4); }
/* 다이어그램은 잘리면 정보가 사라진다. 비율 상자에 넣지 않고 원본 비율 그대로 흐르게 둔다. */
.figure--diagram {
  margin-bottom: var(--space-8);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--neutral-0);
}
.on-dark .figure--diagram,
.section--brand .figure--diagram { border-color: var(--color-border-on-dark); }

/* --------------------------------------------------------------------------
   7. 회사소개 — 인사말 / 오시는 길
   -------------------------------------------------------------------------- */
.greeting { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.greeting__sign {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
  font-size: var(--fs-body);
  color: var(--color-text-strong);
}
.location__note {
  margin-top: var(--space-6);
  padding: var(--space-4);
  border-left: var(--border-width-accent) solid var(--color-border-brand);
  background: var(--color-brand-soft);
  color: var(--color-text-strong);
}

/* --------------------------------------------------------------------------
   8. 퀵서비스 — 이용 사례 박스
   -------------------------------------------------------------------------- */
.usecase-box { margin-top: var(--space-6); }

/* --------------------------------------------------------------------------
   9. 메인 — 주선업 프레이밍 / 바이크 훅
   -------------------------------------------------------------------------- */
.network__note { margin-top: var(--space-6); }
/* 25-trust-copy.md A안 하단 "사업 모델 정직 표기" 한 줄.
   카드 4장 아래에서 총론으로 읽히도록 가운데 정렬 + 폭 제한. */
.network__model {
  margin-top: var(--space-8);
  margin-bottom: 0;
  max-width: 46em;
  margin-inline: auto;
  text-align: center;
}
.highlight-hook {
  margin-top: var(--space-6);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border-on-dark);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .06);
}
.highlight-hook .badge { margin-right: var(--space-2); }

/* --------------------------------------------------------------------------
   9-1. 전국이 가능한 이유 — 인과 사슬 (D-024)
   색·모양만으로 순서를 전달하지 않도록 번호를 함께 노출한다.

   ★ 2026-08-23 개정 — 5번 반전 강조를 걷어내고 '연결'로 바꾼다.
     문제: 다섯 칸은 한 문장을 끊어 놓은 것("…있고 / …않아 / …있고 / 그래서 / …접수하실
     수 있습니다")인데, 5번만 면색을 반전시키니 대비가 가장 큰 5번으로 시선이 먼저 가서
     1→2→3→4 순서로 읽히지 않았다. 강조가 순서를 이기는 상태였다.
     처방: ①칸 사이에 연결선+화살촉을 넣어 '이어지는 한 문장'임을 형태로 보이게 하고,
           ②5번은 반전(면색 채움) 대신 좌측 4px 브랜드 바 + 연한 배경으로 낮춘다.
     결과: 시선 진입점이 1번으로 돌아오고, 5번은 여전히 종점으로 구분된다.
   -------------------------------------------------------------------------- */
.chain {
  /* 번호 원의 지름. 연결선을 원 중심에 맞추는 계산에 함께 쓴다. */
  --chain-no-size: 28px;
  --chain-gap: var(--space-3);
  --chain-pad-x: var(--space-4);
  display: grid;
  gap: var(--chain-gap);
  margin-bottom: var(--space-8);
  counter-reset: none;
}
.chain__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--chain-pad-x);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
/* 연결선 — 앞 칸과 이어져 있음을 보이게 한다. 번호 원의 중심축에 맞춘다. */
.chain__step + .chain__step::before,
.chain__step + .chain__step::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.chain__step + .chain__step::before {
  left: calc(var(--chain-pad-x) + var(--chain-no-size) / 2 - var(--border-width-strong) / 2);
  top: calc(-1 * (var(--chain-gap) + var(--border-width)));
  width: var(--border-width-strong);
  height: var(--chain-gap);
  background: var(--color-border-strong);
}
/* 화살촉 — 진행 방향(아래). 45도 회전한 정사각형의 두 변. */
.chain__step + .chain__step::after {
  left: calc(var(--chain-pad-x) + var(--chain-no-size) / 2 - 4px);
  top: calc(-1 * var(--space-2));
  width: 7px; height: 7px;
  border-right: var(--border-width-strong) solid var(--color-border-strong);
  border-bottom: var(--border-width-strong) solid var(--color-border-strong);
  transform: rotate(45deg);
}
.chain__no {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--chain-no-size); height: var(--chain-no-size);
  border-radius: var(--radius-pill);
  background: var(--navy-100);
  color: var(--navy-800);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.chain__text { min-width: 0; }
/* 종점 — 반전이 아니라 '결론 표시'. 번호 원은 1~4와 같게 두어 순서를 지킨다. */
/* 좌측 브랜드 바는 border 가 아니라 inset box-shadow 로 그린다 —
   border 폭을 키우면 그 칸만 내용이 3px 밀려 1~4 와 기준선이 어긋난다. */
.chain__step--last {
  border-color: var(--color-border-brand);
  background: var(--color-brand-soft);
  box-shadow: inset var(--border-width-accent) 0 0 0 var(--color-brand);
}
@media (min-width: 1024px) {
  .chain { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; }
  .chain__step { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  /* 가로 배치에서는 연결선도 가로로 눕는다. 번호 원의 세로 중심에 맞춘다. */
  .chain__step + .chain__step::before {
    left: calc(-1 * (var(--chain-gap) + var(--border-width)));
    top: calc(var(--space-3) + var(--chain-no-size) / 2 - var(--border-width-strong) / 2);
    width: var(--chain-gap);
    height: var(--border-width-strong);
  }
  .chain__step + .chain__step::after {
    left: calc(-1 * var(--space-2));
    top: calc(var(--space-3) + var(--chain-no-size) / 2 - 4px);
    border-right: var(--border-width-strong) solid var(--color-border-strong);
    border-bottom: none;
    border-top: var(--border-width-strong) solid var(--color-border-strong);
  }
  /* 가로 배치에서는 결론 표시도 위쪽으로 눕힌다 */
  .chain__step--last { box-shadow: inset 0 var(--border-width-accent) 0 0 var(--color-brand); }
}

/* --------------------------------------------------------------------------
   10. 운송 사례 카드 (D-021)
   ★ 후기 UI(별점·평점·프로필)를 쓰지 않는다. 회사가 밝히는 처리 내역임이 드러나야 한다.
   -------------------------------------------------------------------------- */
.case-list { margin-top: var(--space-8); }
.case-card { padding-top: var(--space-4); }
.case-card__figure { margin-bottom: var(--space-4); }
.case-card__kind {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.case-card__dl {
  margin-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
  font-size: var(--fs-caption);
}
.case-card__row {
  display: grid;
  grid-template-columns: 4.5em minmax(0, 1fr);
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: var(--border-width) solid var(--color-border);
}
.case-card__dt { color: var(--color-text-muted); font-weight: var(--fw-semibold); }
.case-card__dd { color: var(--color-text); }

/* --------------------------------------------------------------------------
   11. FAQ / 동의 전문 아코디언 보강
   -------------------------------------------------------------------------- */
.faq__rel { font-size: var(--fs-caption); color: var(--color-text-muted); }
.accordion__head { list-style: none; }
.accordion__head::marker { content: ""; }

.consent__details { margin-top: var(--space-3); }
.consent__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap-min);
  padding: var(--space-2) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.consent__summary::-webkit-details-marker { display: none; }
.consent__summary::marker { content: ""; }
.consent__details[open] .consent__summary .icon { transform: rotate(180deg); }
.consent__summary .icon { transition: transform var(--dur-base) var(--ease-out); }
.consent__title {
  margin-bottom: var(--space-3);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
}
.consent__detail dd { margin-bottom: var(--space-2); }

/* 폼 결과 패널 — 성공/실패/안내 공통 */
#form-done { margin-top: var(--space-6); }
#form-summary { margin-bottom: var(--space-6); text-align: left; }

/* --------------------------------------------------------------------------
   12. 고객지원 — 보상 안내 / 쿠폰
   -------------------------------------------------------------------------- */
.compensation h3 {
  margin-top: var(--space-8);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-width-strong) solid var(--color-border-brand);
  font-size: var(--fs-h3);
}
.compensation h3:first-child { margin-top: 0; }
.coupon { border: var(--border-width) solid var(--color-border); }

/* --------------------------------------------------------------------------
   13. CTA 밴드 — 모바일에서는 전화 버튼을 숨긴다
   근거(D-027 후속): 모바일에는 하단 고정 액션바가 전화를 상시 노출한다.
   밴드에 전화 버튼을 또 두면 한 화면 안에서 같은 행동을 두 번 요구하게 된다.
   히어로 CTA(.hero__actions.only-desktop-flex)와 같은 규칙을 적용한다.
   데스크톱(1024px+)에는 하단 고정바가 없으므로 전화 + 상담 2개를 유지한다.
   번호 자체는 버튼 라벨에만 둔다 — 큰 글씨 표시(.cta-band__tel)는 제거했다.
   탭할 수 없는 번호가 모바일에 남는 것을 막기 위해서다.
   -------------------------------------------------------------------------- */
.cta-band__actions .btn--tel { display: none; }
@media (min-width: 1024px) {
  .cta-band__actions .btn--tel { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   14. 푸터 보강
   -------------------------------------------------------------------------- */
.site-footer__name { font-size: var(--fs-body); color: var(--neutral-0); margin-bottom: var(--space-2); }
.site-footer__brand > * + * { margin-top: var(--space-3); }
.site-footer__telnote { display: block; color: var(--navy-300); }
.site-footer__col { min-width: 0; }
.site-footer__policy { align-items: center; }
.site-footer__policy-todo { color: var(--navy-300); }
.site-footer__policy-todo .badge { margin-left: var(--space-1); }

/* --------------------------------------------------------------------------
   14-0. ★ 모바일 푸터 축소 (고객 요청 / PM 승인)
   --------------------------------------------------------------------------
   문제 — 390px 에서 푸터가 1,572px 로 화면 4개 높이였다. 그 대부분이
          `서비스`·`안내` 링크 칼럼 9개인데, 이 9개는 햄버거(.nav-overlay)와
          완전히 같은 목적지다. 모바일에서는 순수 중복이다.
   조치 — 모바일에서 두 칼럼만 숨긴다. 1024px+ 는 햄버거가 없어 푸터 링크가
          실제 탐색 역할을 하므로 그대로 둔다.
   ★ 어느 뷰포트에서도 남는 것 — 사업자 정보(전자상거래법 제10조 표시의무),
     개인정보 처리방침, 이용약관, 대표전화. 여기는 건드리지 않는다.
   ※ `상담` 칼럼은 전화·상담신청·결제·보상 문의로 전환 동선이라 남긴다.
   -------------------------------------------------------------------------- */
.site-footer__col--links { display: none; }
@media (min-width: 1024px) {
  .site-footer__col--links { display: block; }
}

/* --------------------------------------------------------------------------
   14-1. 터치 타깃 확보 (D-015 #8 / WCAG 2.5.5 · 2.5.8)
   푸터 목록·브레드크럼·FAQ 관련 링크는 글자 높이만으로는 19~22px 밖에 되지 않는다.
   시각 크기는 그대로 두고 클릭 영역만 44px 로 넓힌다. 포인터가 정밀한 데스크톱에서는
   여백을 줄여 푸터가 과도하게 길어지지 않게 한다.
   ★ 여기에 '문장 속 링크'를 추가하지 말 것 (.table-note a / .legal-note a / .card__body a 등).
     WCAG 2.5.5·2.5.8 의 Inline 예외 — "target is in a sentence or its size is otherwise
     constrained by the line-height of non-target text" — 대상이므로 44px 을 적용할 의무가 없고,
     inline-flex 로 바꾸면 그 줄의 line box 만 부풀고(19px→44px) 링크 안에서 줄바꿈도 막혀
     한국어 본문의 줄간격이 깨진다. 이 목록은 '독립한 줄에 놓인 링크' 전용이다.
   -------------------------------------------------------------------------- */
.site-footer__list a,
.site-footer__policy > a,
.site-footer__policy-todo,
.site-footer__tel a,
.site-footer .deflist__desc a,
.site-footer__keywords a,
.breadcrumb__item a,
.faq__rel a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}
.site-footer__list > li + li { margin-top: 0; }
/* inline-flex 로 바뀌면서 텍스트 노드와 <span class="num"> 사이 공백이 사라진다
   ("전화 상담1899-4619"). 시각 간격만 gap 으로 되돌린다. */
.site-footer__list a { gap: 0.25em; }
@media (min-width: 1024px) {
  .site-footer__list a,
  .site-footer__policy > a,
  .site-footer__policy-todo,
  .site-footer .deflist__desc a,
  .site-footer__keywords a,
  .breadcrumb__item a,
  .faq__rel a { min-height: 32px; }
  .site-footer__list > li + li { margin-top: var(--space-1); }
}

/* --------------------------------------------------------------------------
   14-2. 카카오톡 채널 연결 대기 상태 (D-025)
   채널 ID 확정 전까지 링크가 동작하지 않으므로, 눌러도 페이지가 튀지 않도록
   nav.js 가 기본 동작을 막는다. 시각적으로는 정상 버튼과 동일하게 둔다.
   -------------------------------------------------------------------------- */
[data-kakao-pending="true"] { cursor: default; }

/* --------------------------------------------------------------------------
   15. 404
   -------------------------------------------------------------------------- */
.error-page { text-align: center; }
.error-page__code {
  font-size: var(--fs-display);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  color: var(--navy-200);
}
.error-page__title { margin-top: var(--space-4); font-size: var(--fs-h1); }
.error-page__lead { margin-top: var(--space-4); color: var(--color-text-muted); }
.error-page__actions { margin-top: var(--space-8); }
.error-page__nav {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: var(--border-width) solid var(--color-border);
  text-align: left;
}
.error-page__nav-title {
  margin-bottom: var(--space-4);
  font-size: var(--fs-h4);
  color: var(--color-text-strong);
}

/* --------------------------------------------------------------------------
   16. 배지 · 신뢰 스트립 — 좁은 화면 줄바꿈 허용
   .badge 는 nowrap 이 기본이지만 [사업자 확인 필요] 배지는 문장이 길어
   320px 에서 컨테이너를 밀어낸다. 이 변형만 줄바꿈을 허용한다.
   -------------------------------------------------------------------------- */
.badge--todo {
  /* 문장형이라 inline-flex(원자 인라인)로 두면 좁은 화면에서 줄바꿈을 못 해 컨테이너를 밀어낸다.
     인라인으로 되돌려 문장 안에서 자연스럽게 접히게 한다. */
  display: inline;
  white-space: normal;
  text-align: left;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.table td { word-break: keep-all; }

/* 320px 대에서는 신뢰 스트립을 1열로 내린다.
   2열이면 칸이 86px 밖에 남지 않아 '사업자등록번호' 같은 라벨이 단어 중간에서 잘린다.
   360px 이상은 layout.css 의 원래 설계(2열 → 3열 → 5열)를 그대로 되살린다.
   ※ pages.css 가 마지막에 로드되므로 상위 브레이크포인트도 함께 다시 선언해야 덮이지 않는다. */
.grid--strip { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 360px)  { .grid--strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px)  { .grid--strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid--strip { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* .trust-item 은 [아이콘][라벨+값] 2단 flex 다. 텍스트 묶음이 줄어들 수 있어야 한다. */
.trust-item__text { min-width: 0; }

/* .notice 도 [아이콘][본문] flex 다. 본문 안에 풀폭 버튼이 들어가면 min-width:auto 때문에
   320px 에서 박스를 밀어낸다. */
.notice__body { min-width: 0; }

/* --------------------------------------------------------------------------
   16-1. 어두운 섹션 안의 표 부속 텍스트
   caption · 스크롤 안내 · 각주는 표 바깥(섹션 배경 위)에 그려지므로
   네이비 섹션에서는 기본 muted 색으로는 대비가 나오지 않는다.
   -------------------------------------------------------------------------- */
.on-dark .table caption,
.section--brand .table caption,
.on-dark .table-hint,
.section--brand .table-hint,
.on-dark .table-note,
.section--brand .table-note,
/* ★ 옅은 배경(#EFF5FF navy-50 · #FDEDEC danger-50) 위의 muted 색 AA 미달 보정
   --color-text-muted(--neutral-500 #667385)는 흰 면에서는 통과하지만
   옅게 칠한 면 위에서는 4.40:1 / 4.25:1 로 AA(4.5) 에 미달했다.
   법적 고지문과 신뢰 라벨은 크기를 키울 수 없는 자리이므로(CLAUDE.md §5)
   한 단계 진한 --neutral-600(#4E5A6B) 로 올린다. 흰 면에서는 7.00:1 이라 손해가 없다.
   base.css / components.css 는 다른 담당 소유라 여기서 덮는다. */
.legal-note,
.trust-item__label { color: var(--neutral-600); }

/* 같은 원인이 안내 박스 안에도 있다 — .notice 는 --blue-50(#EFF5FF) · --danger-50(#FDEDEC) 면이고
   그 안의 .t-muted / .deflist__term 이 4.40:1 이었다(/quick '공통 조건' 박스).
   요소를 하나씩 덮는 대신 **박스 안에서만 토큰 값을 한 단계 올린다** —
   앞으로 .notice 안에 muted 를 쓰는 요소가 생겨도 자동으로 따라온다. */
.notice { --color-text-muted: var(--neutral-600); }

.on-dark .legal-note,
.section--brand .legal-note { color: var(--navy-200); }
.on-dark .table-note a,
.section--brand .table-note a { color: var(--color-link-on-dark); }

/* --------------------------------------------------------------------------
   17. 모션 최소화 — base.css 에서 전역 차단하지만, 여기서 추가한 전이도 함께 끈다.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .consent__summary .icon { transition: none; }
}

/* --------------------------------------------------------------------------
   18. 인쇄 — 사례 자리표시자·자리표시 배지는 지면에서 뺀다
   -------------------------------------------------------------------------- */
@media print {
  .media-ph, .badge--todo, .subnav, .nav-overlay, .nav-scrim { display: none !important; }
}

/* ==========================================================================
   푸터 법정 표시 — 전자상거래법상 사업자 정보 의무 표기
   회사소개 페이지의 상세 표(dl)와 형태를 의도적으로 다르게 한다.
   푸터는 '읽는 정보'가 아니라 '확인용 표기'이므로 한 줄로 흐르게 압축한다.
   ========================================================================== */
.site-footer__legal {
  border-top: 1px solid rgba(255,255,255,.10);
  padding-block: var(--space-4);
}
.site-footer__biz {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--space-4);
  font-size: var(--fs-caption);
  line-height: 1.9;
  color: var(--navy-300);
}
.site-footer__biz + .site-footer__biz { margin-top: 2px; }
.site-footer__biz span { white-space: normal; display: block; }
.site-footer__biz b { font-weight: var(--fw-semibold); color: var(--navy-100); }
.site-footer__biz a { color: inherit; }
.site-footer__hours {
  margin-top: var(--space-3);
  font-size: var(--fs-caption);
  line-height: 1.7;
  color: var(--navy-300);
}
.site-footer__hours strong { color: var(--navy-100); }
/* 480px 이상에서 한 줄로 흐르게 (모바일 퍼스트 — min-width 만 사용) */
@media (min-width: 480px) {
  .site-footer__biz { gap: 2px var(--space-4); }
  .site-footer__biz span { display: inline; white-space: nowrap; }
}


/* ==========================================================================
   19. 대비 보정
   ★ tokens.css 는 다른 담당 소유다. 여기서는 토큰 값을 바꾸지 않고
     대비가 깨지는 지점만 컴포넌트 단위로 고정한다.
   ========================================================================== */

/* CTA 밴드는 주황 계열 강조면 위에 놓일 수 있다. 밴드 안 링크는 항상 흰색으로 고정한다.
   (--blue-300 이 상속되면 2.3:1 까지 떨어진다) */
.cta-band a:not(.btn),
.cta-band .link-cta { color: var(--neutral-0); text-decoration: underline; }
.cta-band a:not(.btn):hover { color: var(--neutral-0); }

/* ==========================================================================
   20. 모바일 여백·리듬 정리 (고객 피드백 — "줄간 공백이 비전문가처럼 보인다")
   ★ 모바일에서 한 단계씩 타이트하게. 768px 이상은 기존 리듬을 유지한다.
   ========================================================================== */
.section-head { margin-bottom: var(--space-6); }
.section__cta { margin-top: var(--space-6); }
.card { padding: var(--space-4); }
.card--compact { padding: var(--space-3); }
.notice { padding: var(--space-3); }
.notice--lg { padding: var(--space-4); }
.stack--lg > * + * { margin-top: var(--space-6); }
.section__body > * + * { margin-top: var(--space-6); }
.flow > * + * { margin-top: var(--space-3); }
.flow > * + h2 { margin-top: var(--space-8); }
.flow > * + h3 { margin-top: var(--space-6); }
.grid { gap: var(--space-3); }
.grid--gap-lg { gap: var(--space-4); }
.hero__inner { padding-block: var(--space-8) var(--space-12); }
.hero__lead { margin-top: var(--space-4); }
.hero__proof { margin-top: var(--space-4); }
.hero__actions { margin-top: var(--space-6); }
.figure--diagram { margin-bottom: var(--space-6); padding: var(--space-3); }
/* gap 이 아니라 --chain-gap 을 줄인다 — 연결선 길이가 gap 을 참조하기 때문 */
.chain { --chain-gap: var(--space-2); margin-bottom: var(--space-6); }
.case-list { margin-top: var(--space-6); }
.vehicle-gallery { margin-top: var(--space-6); }

/* 서비스 카드 일러스트 자리를 줄여 카드가 덜 길어지게 한다 */
.card .figure { margin-bottom: var(--space-3); }
.card .ratio--3x2 { aspect-ratio: 2 / 1; }

@media (min-width: 768px) {
  .section-head { margin-bottom: var(--space-8); }
  .section__cta { margin-top: var(--space-8); }
  .card { padding: var(--space-6); }
  .notice { padding: var(--space-4); }
  .notice--lg { padding: var(--space-6); }
  .grid { gap: var(--space-6); }
  .grid--gap-lg { gap: var(--space-6); }
  .flow > * + * { margin-top: var(--space-4); }
  .hero__lead { margin-top: var(--space-6); }
  .hero__proof { margin-top: var(--space-6); }
  .hero__actions { margin-top: var(--space-8); }
  .card .ratio--3x2 { aspect-ratio: 3 / 2; }
  .figure--diagram { padding: var(--space-4); }
}
@media (min-width: 1024px) {
  .hero__inner { padding-block: var(--space-24) var(--space-32); }
  .hero--page .hero__inner { padding-block: var(--space-12) var(--space-16); }
}

/* 모바일에서만 줄바꿈 — 히어로 본문이 5줄 이상 흐르지 않게 문장 단위로 끊는다 */
br.only-mobile { display: inline; }
@media (min-width: 768px) { br.only-mobile { display: none; } }


/* ==========================================================================
   21. 모바일 가로 스와이프 행 (scroll-snap)
   ★ JS 캐러셀을 쓰지 않는다. 네이티브 스크롤이라 키보드·스크린리더가 그대로 동작하고
     JS 없이도 콘텐츠가 전부 읽힌다 (D-016 #5).
   ★ 컨테이너 내부 스크롤이므로 페이지 자체의 가로 스크롤은 발생하지 않는다.
   ========================================================================== */
.swipe-row {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter);
  padding-block-end: var(--space-2);
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: none;
  list-style: none;
}
.swipe-row::-webkit-scrollbar { display: none; }
/* 82% — 다음 카드가 살짝 보여야 밀 수 있다는 걸 인지한다. 100%면 아무도 밀지 않는다. */
.swipe-row > * { flex: 0 0 82%; scroll-snap-align: start; min-width: 0; }
.swipe-row:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 2px; }

/* 스와이프 안내 — 768px 이상에서는 그리드로 돌아가므로 숨긴다 */
.swipe-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);
}
.section--brand .swipe-hint, .on-dark .swipe-hint { color: var(--navy-200); }

@media (min-width: 768px) {
  .swipe-hint { display: none; }
  .swipe-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    padding-block-end: 0;
    scroll-snap-type: none;
  }
  .swipe-row > * { flex: initial; }
  .swipe-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .swipe-row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .swipe-row--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .swipe-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .swipe-row--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ==========================================================================
   22. 커버리지 — 왼쪽 지도 / 오른쪽 설명
   ========================================================================== */
.coverage-layout { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) {
  .coverage-layout { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-12); align-items: start; }
}
.coverage-map {
  margin: 0;
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--neutral-0);
}
.coverage-map img { width: 100%; height: auto; max-height: 62vh; object-fit: contain; }
.coverage-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}
.coverage-legend__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.coverage-legend__key {
  flex: 0 0 auto; width: 18px; height: 12px; border-radius: 3px;
  border: var(--border-width) solid var(--color-border-strong);
}
.coverage-legend__key--metro { background: var(--navy-700); border-color: var(--navy-700); }
.coverage-legend__key--nation { background: var(--navy-100); }
.coverage-legend__key--route {
  height: 0; border: 0; border-top: 2px dashed var(--navy-600); border-radius: 0;
}
.coverage-item { padding-block: var(--space-4); border-top: var(--border-width) solid var(--color-border); }
.coverage-item:first-child { border-top: 0; padding-top: 0; }
.coverage-item__head { display: flex; align-items: center; gap: var(--space-3); }
.coverage-item__title { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--color-text-strong); }
.coverage-item__area {
  margin-left: auto; flex: 0 0 auto;
  font-size: var(--fs-caption); font-weight: var(--fw-bold);
  color: var(--navy-700);
}
.coverage-item__body { margin-top: var(--space-2); }

/* ==========================================================================
   23. 바이크 투어 탁송 3형태 카드 (애니메이션 SVG)
   ========================================================================== */
.tour-card { display: flex; flex-direction: column; }
.tour-card__fig {
  margin: 0 0 var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--neutral-0);
}
.tour-card__fig img { width: 100%; height: auto; }
.card--dark .tour-card__fig { background: var(--neutral-0); }
.tour-card__rec {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
  font-size: var(--fs-caption);
}
.card--dark .tour-card__rec { border-top-color: var(--color-border-on-dark); }
.tour-card__rec b { color: var(--color-text-strong); }
.card--dark .tour-card__rec b { color: var(--neutral-0); }

/* ==========================================================================
   24. 모바일 탭바 (1024px 미만)
   ★ 햄버거만 두면 "퀵·화물·바이크를 다 한다"는 최대 차별화가 메뉴 뒤에 숨는다.
     주요 6개를 헤더 아래 가로 스크롤 탭으로 상시 노출한다.
   ★ 탭은 scroll-snap 을 쓰지 않는다(스냅되면 탐색이 불편하다). 자유 스크롤.
   ★ sticky 는 탭바만. 헤더까지 함께 고정하면 모바일 세로 공간을 과하게 먹는다.
   ========================================================================== */
/* ★ sticky 로 두지 않는다 (D-031 검토 결과).
   320x568 화면에서 sticky 헤더 56 + 탭바 48 + 하단 액션바 60 = 164px(29%)이 상시 점유되어
   본문이 과도하게 좁아진다. 탭바의 역할은 "이 회사가 뭘 하는지"를 첫 화면에서 드러내는 것이고,
   상시 탐색은 이미 sticky 헤더의 햄버거와 푸터가 담당한다. 따라서 흐름에 두고 스크롤과 함께 밀려나게 한다.
   → 상시 점유 = 헤더 56 + 하단바 60 (기존 설계 그대로), 탭바 추가 비용 0. */
.tabbar {
  position: relative;
  z-index: var(--z-base);
  background: var(--color-bg);
  border-bottom: var(--border-width) solid var(--color-border);
}
@media (min-width: 1024px) { .tabbar { display: none; } }

.tabbar__scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.tabbar__scroll::-webkit-scrollbar { display: none; }
.tabbar__scroll:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: -3px; }

.tabbar__list { display: flex; align-items: stretch; width: max-content; min-width: 100%; }
.tabbar__link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;                 /* 터치 타깃 */
  padding: var(--space-2) var(--space-4);
  border-bottom: 3px solid transparent;
  color: var(--color-text);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  text-decoration: none;
}
.tabbar__link:hover { color: var(--navy-800); background: var(--navy-50); }
/* 활성 표시는 색만이 아니라 밑줄 + 굵기로도 구분한다 (D-015 #11) */
.tabbar__link[aria-current="page"] {
  border-bottom-color: var(--action-600);
  color: var(--navy-800);
  font-weight: var(--fw-extrabold);
}
/* 우측 스크롤 힌트 — 다음 탭이 잘려 보이는 것에 더해 페이드로 한 번 더 알린다 */
.tabbar::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 1px;
  width: 28px;
  pointer-events: none;
  background: linear-gradient(to left, var(--color-bg), rgba(255,255,255,0));
}
@media (min-width: 1024px) { .tabbar::after { display: none; } }

/* --------------------------------------------------------------------------
   24-1. sticky 스택 높이 — 서브내비 top · 앵커 이동 여백의 단일 기준

   ★ 결함 (수정 전 실측, 헤드리스 크롬 1024/1280/1440/2560px)
     데스크톱 헤더는 유틸바(--utilbar-h-lg 36px) + 메인바(--header-h-lg 72px) = **108px** 인데
     `.subnav { top: var(--header-h-lg) }` 는 72px 이었다. 스크롤하면 서브내비 rect.top 이 72,
     헤더 bottom 이 108 → **탭바 상단 36px 가 헤더 뒤로 들어갔다**(/price ·/quick ·/freight ·/bike 전부).
     모바일(<1024px)은 유틸바가 display:none 이라 56px 로 정확했다 — 그래서 데스크톱만 어긋났다.

   ★ 값의 출처
     --stack-h : tokens.css 토큰의 조합이다(새 값이 아니라 별칭). 1024px 에서 값만 바뀐다.
     --subnav-h : `.subnav__list` 의 padding-block(--space-3 ×2) + `.chip` + 아래 테두리.
       칩 글자 크기가 clamp() 라 실측이 65~67px 사이에서 흔들려 올림값 68px 를 쓴다.
       components.css(디자이너 소유)의 `.chip` 높이가 바뀌면 이 값도 함께 고쳐야 한다.
       원래는 tokens.css 에 있어야 할 값이지만 그 파일은 디자이너 소유라 여기서 승격해 둔다.
   -------------------------------------------------------------------------- */
:root {
  --stack-h:    var(--header-h);                                    /* 모바일 — 유틸바 없음 */
  --subnav-h:   68px;
  --anchor-gap: var(--space-4);
}
@media (min-width: 1024px) {
  :root {
    --stack-h:    calc(var(--header-h-lg) + var(--utilbar-h-lg));   /* 72 + 36 = 108px */
    --anchor-gap: var(--space-6);
  }
}

/* 서브네비는 sticky 헤더 **전체**(유틸바 포함) 바로 아래에 붙는다.
   (탭바는 sticky 가 아니므로 계산에서 빠진다) */
.subnav { top: var(--stack-h); }

/* 상단 sticky 헤더·서브내비 + 하단 고정 액션바가 본문을 가리지 않도록 여백을 확보한다.
   (하단은 base.css 의 body.has-bottombar 가 담당, 상단은 앵커 이동 시의 가림 방지)
   ※ scroll-padding-top 과 :target 의 scroll-margin-top 은 **더해진다**.
     base.css 가 둘 다 걸어 두어 값이 두 겹으로 쌓이고 있었다.
     여기서 계산은 scroll-padding-top 한 곳으로 모으고 scroll-margin-top 은 0 으로 돌린다. */
html { scroll-padding-top: calc(var(--stack-h) + var(--subnav-h) + var(--anchor-gap)); }
:target { scroll-margin-top: 0; }

/* 서브내비가 없는 페이지(홈·약관·개인정보·크레딧·404)에서는 그만큼을 돌려준다.
   :has() 미지원 브라우저(iOS 15.0~15.3 · Chrome 104 이하)는 이 규칙만 무시하고
   위의 넉넉한 값을 그대로 쓴다 — 가려지는 쪽이 아니라 남는 쪽으로 실패한다 (D-016 §4). */
html:not(:has(.subnav)) { scroll-padding-top: calc(var(--stack-h) + var(--anchor-gap)); }


/* ==========================================================================
   25. 모바일 2열 압축 그리드 (D-031 검토 결과)
   ★ 스와이프 대신 쓴다. '자기 상황을 찾는 목록'(바이크 5유형 · 화물 분류)은
     전부 보여야 목적을 달성한다. 2열로 접으면 세로 길이는 절반이 되고 발견율은 유지된다.
   -------------------------------------------------------------------------- */
.grid--compact-m { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.grid--compact-m > .card { padding: var(--space-3); }
.grid--compact-m .card__title { font-size: var(--fs-body); }
.grid--compact-m .card__body { font-size: var(--fs-caption); margin-top: var(--space-2); }
.grid--compact-m .icon-badge { width: 40px; height: 40px; }
.grid--compact-m .card__icon { margin-bottom: var(--space-2); }
@media (min-width: 768px) {
  .grid--compact-m { gap: var(--space-6); }
  .grid--compact-m > .card { padding: var(--space-6); }
  .grid--compact-m .card__title { font-size: var(--fs-h3); }
  .grid--compact-m .card__body { font-size: var(--fs-body); }
  .grid--compact-m .icon-badge { width: 48px; height: 48px; }
}

/* ==========================================================================
   26. 애니메이션 다이어그램 정지 수단 (WCAG 2.2.2 Level A)
   자동 재생되고 5초를 넘겨 무한 반복하므로 정지/숨김 수단이 필요하다.
   ※ SVG 파일 내부의 prefers-reduced-motion 가드는 SMIL(animateMotion)에는 듣지 않는다.
     따라서 마크업 쪽에서 "숨김"으로 기준을 충족시킨다. 카드 본문에 같은 정보가 텍스트로 있다.
   ========================================================================== */
.tour-motion { margin-bottom: var(--space-3); }
.tour-motion__off { display: none; }
[aria-pressed="true"] .tour-motion__on { display: none; }
[aria-pressed="true"] .tour-motion__off { display: inline; }
.tour-anim[hidden] { display: none !important; }

/* ==========================================================================
   로고 워드마크 — 정식 상호 「전국무지개퀵화물」
   8자로 길어 그대로 두면 헤더에서 뭉친다.
   '전국'·'화물'을 얇게, '무지개퀵'을 굵게 처리해 한 줄 안에서
   정식 상호와 약칭이 동시에 읽히게 한다. (강약 구성)
   ※ 디자이너가 제작 중인 정식 로고 SVG 로 교체될 임시 처리다.
   ========================================================================== */
.logo__name { white-space: nowrap; }
.logo__name-pre,
.logo__name-post {
  font-weight: var(--fw-medium, 500);
  opacity: .72;
  letter-spacing: -.03em;
}
@media (max-width: 359px) {
  /* 초소형 화면에서는 약칭만 노출해 헤더가 무너지지 않게 한다 */
  .logo__name-pre,
  .logo__name-post { display: none; }
}

/* ==========================================================================
   히어로 CTA — 모바일에서는 숨긴다
   근거: 모바일에는 하단 고정 액션바(전화·상담)가 상시 노출된다.
   히어로에 같은 버튼을 또 두면 ① 첫 화면에서 같은 행동을 두 번 요구하고
   ② 320~390px 에서 버튼 두 개가 2줄로 접히며 어색한 여백이 생긴다.
   데스크톱에는 하단 고정바가 없으므로(D-027) 히어로 CTA 를 유지한다.
   ========================================================================== */
.hero__actions.only-desktop-flex { display: none; }
@media (min-width: 1024px) {
  .hero__actions.only-desktop-flex { display: flex; flex-wrap: wrap; gap: var(--space-3); }
}

/* ==========================================================================
   스와이프 인디케이터 — 밀 수 있다는 것을 알리는 시각 신호
   텍스트 힌트(.swipe-hint)만으로는 약하다. 점이 있어야 '몇 개 중 몇 번째'가 읽힌다.
   nav.js 가 생성하므로 JS 가 없으면 나타나지 않는다(스와이프 자체는 정상 동작).
   ========================================================================== */
.swipe-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.swipe-dots__dot {
  width: 7px; height: 7px;
  border-radius: 99px;
  background: var(--navy-200);
  transition: width .22s ease, background-color .22s ease;
}
.swipe-dots__dot.is-active {
  width: 20px;                 /* 활성 점을 길게 — 색만으로 구분하지 않는다 (D-015 #11) */
  background: var(--blue-600);
}
.section--brand .swipe-dots__dot,
.on-dark .swipe-dots__dot { background: rgba(255,255,255,.28); }
.section--brand .swipe-dots__dot.is-active,
.on-dark .swipe-dots__dot.is-active { background: var(--neutral-0); }

@media (prefers-reduced-motion: reduce) {
  .swipe-dots__dot { transition: none; }
}
/* 데스크톱은 그리드로 전환되므로 점이 필요 없다 */
@media (min-width: 768px) {
  .swipe-dots { display: none; }
}

/* ==========================================================================
   운송 방법 카드 (bike #methods)
   긴 문장이 든 비교표를 카드로 바꿨다. 표는 스캔이 안 되고, 그림이 있어야 즉시 이해된다.
   ※ .method-card__fig 의 이미지는 사업자 실사진 확보 시 그대로 교체된다.
   ========================================================================== */
.method-list { list-style: none; margin: 0; padding: 0; }
.method-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--neutral-0);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.method-card--featured { border-color: var(--blue-600); box-shadow: 0 0 0 1px var(--blue-600); }
.method-card__flag {
  margin: 0; padding: var(--space-2) var(--space-4);
  background: var(--blue-600); color: var(--neutral-0);
  font-size: var(--fs-caption); font-weight: var(--fw-bold);
}
.method-card__fig { margin: 0; background: var(--neutral-50); }
.method-card__fig img { display: block; width: 100%; height: auto; }
.method-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.method-card__title { margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-bold); }
.method-card__alias {
  display: inline-block; margin-left: var(--space-2);
  font-size: var(--fs-caption); font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}
.method-card__desc { margin: 0; font-size: var(--fs-body); line-height: 1.7; color: var(--color-text); }
.method-card__meta { margin: 0; display: grid; gap: var(--space-2); }
.method-card__meta > div { display: grid; grid-template-columns: 3.6rem 1fr; gap: var(--space-3); align-items: baseline; }
.method-card__meta dt { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--color-text-muted); }
.method-card__meta dd { margin: 0; font-size: var(--fs-caption); line-height: 1.65; }
.method-card__more { margin: auto 0 0; padding-top: var(--space-2); font-size: var(--fs-caption); font-weight: var(--fw-bold); }

/* ==========================================================================
   헤더 전화 버튼 — 모바일에서는 숨긴다
   근거(D-027): 모바일에는 하단 고정 액션바에 전화 버튼이 상시 노출된다.
   헤더에 같은 버튼을 또 두면 상단·하단에서 같은 행동을 두 번 요구하게 되고,
   좁은 헤더에서 로고(정식 상호 8자)와 자리를 다툰다.
   데스크톱에는 하단 고정바가 없으므로 헤더 버튼을 유지한다.
   ========================================================================== */
.header-tel { display: none; }
@media (min-width: 1024px) {
  .header-tel { display: inline-flex; }
}

/* ==========================================================================
   [철회] 모바일 상단 탭바 — 2026-08-23
   고객 판단: "헤더에 메뉴를 추가로 요청했는데 보기 안 좋고, 햄버거와 중복이다."
   마크업을 제거했으므로 아래 규칙은 동작하지 않는다.
   되살릴 경우를 대비해 스타일은 남겨 두되, 세로 공간을 먹는 문제
   (320×568에서 상시 점유 29%)가 있었음을 함께 기록한다.
   ========================================================================== */
.tabbar { display: none !important; }

/* ── 운송 방법 카드 : 사진 사용 시 ────────────────────────────────────────
   실사진은 배경이 제각각이라 그대로 두면 카드마다 톤이 튄다.
   살짝 눌러 브랜드 톤으로 통일하고, '참고 이미지'임을 캡션으로 명시한다.
   (D-018 — 자차 보유 오인 방지) */
.method-card__fig { position: relative; }
.method-card__fig img { aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(.82) contrast(1.02); }
.method-card__cap {
  position: absolute; left: var(--space-3); bottom: var(--space-3);
  padding: 3px 8px; border-radius: var(--radius-sm);
  background: rgba(0,0,0,.55); color: var(--neutral-0);
  font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0;
}

/* ── 카드 우측 정보(meta) 정돈 ──────────────────────────────────────────
   dt/dd 가 좌우로 벌어져 시선이 튀던 문제를 고친다.
   라벨은 작게 위로, 값은 아래로 — 세로 흐름 하나로 읽히게 한다. */
.method-card__meta { gap: var(--space-3); border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.method-card__meta > div { display: block; }
.method-card__meta dt {
  display: block; margin-bottom: 2px;
  font-size: 11px; font-weight: var(--fw-bold);
  letter-spacing: .04em; color: var(--color-text-muted);
}
.method-card__meta dd { font-size: var(--fs-body); line-height: 1.55; color: var(--color-text); }

/* ==========================================================================
   오시는 길 — 카카오맵 / 네이버지도 탭
   라디오 기반 CSS-only 탭. JS 없이도 전환된다.
   API 키가 없으면 주소 + 지도앱 바로가기(폴백)가 보이고,
   키를 넣으면 같은 자리에 실지도가 그려진다.
   ========================================================================== */
/* --- 사업장 지도 (about #location) ---------------------------------------
   OpenStreetMap 정적 이미지 한 장. 이 섹션의 목적은 길안내가 아니라
   "사업장이 실재한다"는 증거이므로 크게 만들지 않는다.
   제거한 규칙: .map-block .map-tabs .map-tabs__label .map-frame .map-pane
                .map-fallback(+__addr/__sub) 및 #map-kakao/#map-naver :checked 규칙 —
   카카오/네이버 탭 전환 UI 를 정적 이미지로 대체하면서 참조처가 사라졌다.
   (assets/js/nav.js 의 #pane-kakao/#pane-naver 초기화는 null 가드가 있어 그대로 두어도
    오류가 없다. 실지도로 되돌릴 때 재사용한다 — about.html 의 교체 지점 주석 참조.) */
.office-map { margin: 0; }
.office-map__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;        /* office.jpg 768x512 / office-sm.jpg 384x256 — CLS 0 */
  object-fit: cover;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}
.office-map__caption { margin-top: var(--space-3); }
.office-map__links { margin: 0 0 var(--space-2); }

.location__info { margin-top: var(--space-6); }
.location__note { font-size: var(--fs-body); line-height: 1.75; }
.location__note--tel { margin-top: var(--space-3); color: var(--color-text-muted); }

/* ==========================================================================
   하단 고정 액션바 — 1버튼 구성
   components.css 의 .bottombar 는 3칸 그리드(2fr 1fr 1fr)가 기본이라,
   D-026 으로 버튼이 전화 하나만 남자 나머지 2칸이 흰 여백으로 남았다.
   (흰 배경 + 흰 글씨처럼 보이는 빈 칸)
   ========================================================================== */
.bottombar--1 { grid-template-columns: 1fr; }
.bottombar--1 .bottombar__btn {
  flex-direction: row;          /* 1칸을 다 쓰므로 아이콘·텍스트를 가로로 */
  gap: var(--space-2);
  font-size: var(--fs-body);
}
.bottombar--1 .bottombar__num { font-size: 1em; }

/* --------------------------------------------------------------------------
   폼 하단 전화 대안 — /api/consult 가 열리기 전까지(그리고 열린 뒤에도)
   폼이 단독 출구가 되지 않도록 제출 버튼 아래에 전화 동선을 병기한다.
   -------------------------------------------------------------------------- */
.form__alt {
  margin-top: var(--space-4);
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}


/* ==========================================================================
   27. 서비스별 상담 폼 — 선택지 그룹 + CSS 전용 조건 분기 (D-030 / docs/30-forms.md)

   왜 이런 마크업인가
   - form.js 는 백엔드 담당 소유라 손댈 수 없다. 그래서 분기를 **CSS 만으로** 만든다.
   - `input:checked ~ .branch` 가 성립하려면 input 과 분기 블록이 **형제**여야 한다.
     그래서 라디오를 label 안에 넣지 않고 `for` 로 연결한 형제로 두고,
     같은 컨테이너(.choices) 안에 분기 블록을 뒤쪽 형제로 배치한다.
   - 숨김은 반드시 `display:none` — visibility 로 숨기면 스크린리더가 계속 읽는다(D-015 #18/#19).
   ========================================================================== */

/* 27-1. 라디오·체크박스 그룹 (fieldset + legend) */
.fieldgroup {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;                 /* fieldset 기본값이 min-content — 320px 에서 가로 스크롤을 만든다 */
}
.field + .fieldgroup,
.fieldgroup + .field,
.fieldgroup + .fieldgroup { margin-top: var(--space-6); }

.fieldgroup__legend {
  display: block;
  width: 100%;
  float: none;                  /* 일부 브라우저의 legend 기본 배치 보정 */
  margin-bottom: var(--space-2);
  padding: 0;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--color-text-strong);
}
.fieldgroup__legend .field__req { color: var(--danger-600); font-weight: var(--fw-bold); }
.fieldgroup__legend .field__optional { color: var(--color-text-muted); font-weight: var(--fw-regular); }

/* 27-2. 선택지 목록 — 1열: [입력칸 auto] [라벨 1fr] */
.choices {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-3);
}
.choices > .check__input { grid-column: 1; margin-top: 0; }
.choices__label {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;              /* 좁은 화면에서 보조 설명이 라벨 옆에 끼어 눌리지 않게 */
  align-items: center;
  min-height: var(--tap-min);   /* 44px — 라벨 전체가 터치 타깃 */
  padding: var(--space-2) 0;
  font-size: var(--fs-body);    /* 16px — iOS 자동 확대 방지 */
  line-height: 1.5;
  color: var(--color-text);
  cursor: pointer;
}
.choices > .check__input:checked + .choices__label { font-weight: var(--fw-semibold); color: var(--color-text-strong); }
.choices > .check__input:hover + .choices__label { color: var(--color-text-strong); }
.choices__hint {
  flex: 1 0 100%;               /* 모바일 — 라벨 아래 줄로 내린다 */
  margin-left: 0;
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  line-height: var(--lh-caption);
  color: var(--color-text-muted);
}
@media (min-width: 600px) {
  .choices__hint { flex: 0 1 auto; margin-left: var(--space-2); }
}
/* 동의 체크박스는 48px (D-010 §3-2) — .check 가 이미 처리하므로 여기서는 선택지만 44px */
.fieldgroup .field__error,
.fieldgroup .field__help { grid-column: 1 / -1; }

/* 27-3. 조건 분기 블록 — 기본은 접근성 트리에서도 빠진 상태 */
.branch {
  display: none;
  grid-column: 1 / -1;
  margin: var(--space-3) 0 var(--space-4);
}
.branch > * + * { margin-top: var(--space-4); }
.branch--fields {
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-left: 3px solid var(--navy-400);
  border-radius: var(--radius-md);
  background: var(--neutral-50);
}
.branch--fields .field:first-child,
.branch--fields .fieldgroup:first-child { margin-top: 0; }

/* --- 27-4. 분기 규칙 (형제 선택자만 사용 — 전 대상 브라우저에서 동작) ---------- */

/* 퀵: 날짜 지정 → 날짜 입력 */
.choices > [name="when"][value="date"]:checked ~ .branch--when-date { display: block; }
/* 퀵: 20kg 초과 / 큰 짐 → 차량 배차 안내 (안내 문구이므로 두 그룹에 각각 배치) */
.choices > [name="weight"][value="gt20"]:checked ~ .branch--vehicle-note { display: block; }
.choices > [name="item"][value="large"]:checked ~ .branch--vehicle-note { display: block; }

/* 화물: 기업 정기화물 / 정기 운송 검토 중 → 계약운송·월정산 안내 */
.choices > [name="cargo_type"][value="regular"]:checked ~ .branch--contract { display: block; }
.choices > [name="cycle"][value="regular"]:checked ~ .branch--contract { display: block; }
/* 화물: 이사화물 → 직접 포장·상하차 기본원칙 고지 */
.choices > [name="cargo_type"][value="moving"]:checked ~ .branch--moving { display: block; }
/* 화물: 특수화물 → 취급 제한 물품 안내 */
.choices > [name="cargo_type"][value="special"]:checked ~ .branch--special { display: block; }

/* 바이크: 신차 납차 → B2B 계약운송 안내 + 대수 */
.choices > [name="purpose"][value="new"]:checked ~ .branch--b2b { display: block; }
/* 바이크: 고장·사고 회수 → 리프트 안내 */
.choices > [name="purpose"][value="broken"]:checked ~ .branch--lift-note { display: block; }
/* 바이크: 여행(투어 탁송) → 왕복/편도 · 가는 날 · 오는 날 · 현지 보관 */
.choices > [name="purpose"][value="tour"]:checked ~ .branch--tour { display: block; }
/* 바이크: 시동 안 걸림 → 리프트 안내 + 현재 위치 상태 */
.choices > [name="runnable"][value="no"]:checked ~ .branch--lift { display: block; }
/* 바이크: 현지 보관 필요 → 보관 기간 */
.choices > [name="storage"]:checked ~ .branch--storage { display: block; }

/* 27-5. :has() 확장 — "A 또는 B" 조건은 형제 선택자로 닿지 않는다.
   지원하지 않는 브라우저(iOS 15.0~15.3, Chrome 104 이하)에서는 이 규칙만 무시되고
   위 27-4 의 기본 동작(시동 안 걸림 → 노출)은 그대로 남는다. 폴백이 성립하므로 사용한다(D-016 §4). */
.form:has([name="purpose"][value="broken"]:checked) .branch--lift { display: block; }

/* 27-6. 안내 블록 안의 표기 */
.branch .notice { margin: 0; }
.branch__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
}

/* 27-7. 폼 구분선 — "운송 조건" 과 "연락처" 를 시각적으로 나눈다 */
.form__divider {
  margin: var(--space-8) 0 var(--space-6);
  border: 0;
  border-top: var(--border-width) solid var(--color-border);
}
.form__step {
  margin-bottom: var(--space-4);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
}

/* ==========================================================================
   28. 헤더 로고 — 5안 워드마크 SVG 적용
   헤더 배경이 네이비(--navy-700)이므로 반드시 `-on-dark` 계열을 쓴다.
   밝은 배경용 logo.svg 를 넣으면 대비가 무너진다.

   ★ 표시 하한 360px (D-005 / D-033)
   고객 요구는 "정식 상호가 보여야 한다"이고, 가로형 워드마크는 97x26 이다.
   360px 헤더에서 좌우 거터(16x2=32) + 햄버거(44) + 사이 간격(12) = 88px 를 빼도
   로고에 272px 가 남는다. 겹칠 여지가 없으므로 360px 부터 가로형을 쓴다.
   대표번호 버튼(.header-tel)은 1024px 이상에서만 나오므로 모바일 폭에서는 경합하지 않는다.
   360px 미만(320~359px)에서만 축약 반전형으로 내려간다.
   ========================================================================== */
.logo__img {
  display: block;
  flex: 0 0 auto;
  max-width: 100%;
}
.logo__img--full    { display: none; width: 97px; height: 26px; }
.logo__img--compact { display: block; width: 73px; height: 24px; }
@media (min-width: 360px) {
  .logo__img--full    { display: block; }
  .logo__img--compact { display: none; }
}


/* ==========================================================================
   29. 헤더 하단 경계 — 전폭 무지개 라인(.site-header__rule) 제거분 대체
   ★ 근거 (D-004)
   히어로 면이 그레이(--neutral-200 #E4EAF2)로 바뀌면서 네이비 헤더와의 명도대비가
   6.1:1 이 되었다. 색만으로 경계가 이미 성립하므로 3px 무지개 라인은 경계 역할이
   아니라 "화면에서 가장 밝고 채도 높은 면"으로만 남았고, 로고 워드마크 안의 무지개와
   겹쳐 보였다. D-004 가 막으려던 인상에 가장 가깝게 작동하므로 라인을 걷어낸다.
   무지개 브랜드 자산은 로고 한 곳에 모은다.

   대체 — 라인 대신 (a) 네이비 면을 마감하는 1px 인셋 헤어라인,
   (b) 얕은 그림자(정지 shadow-1 / 스크롤 shadow-2) 두 겹으로 경계를 유지한다.
   인셋을 쓰는 이유: border-bottom 은 헤더 높이를 1px 늘려
   `--stack-h`(§24-1)에 맞춘 .subnav(top)·scroll-padding-top 계산과 어긋난다.
   ========================================================================== */
.site-header {
  box-shadow: inset 0 -1px 0 var(--color-border), var(--shadow-1);
}
.site-header.is-scrolled {
  box-shadow: inset 0 -1px 0 var(--color-border), var(--shadow-2);
}


/* ==========================================================================
   30. 가로 스크롤 방어 — .table-scroll 안의 절대배치 요소가 밖으로 새는 문제 (D-016 §320px)
   ★ 증상: /credits 320~414px 에서 문서 scrollWidth 가 549px (뷰포트 320px)
   ★ 원인: .sr-only 는 position:absolute 다. .table-scroll 은 overflow-x:auto 이지만
     positioned 가 아니어서 절대배치 자손의 컨테이닝 블록이 되지 못한다.
     표를 옆으로 민 만큼 떨어진 좌표(x≈549)에 그대로 배치되어 문서 폭을 늘렸다.
     overflow 는 자손의 "정적 위치"를 잘라 주지 못한다 — 컨테이닝 블록을 잡아 줘야 한다.
   ★ 조치: 스크롤 컨테이너를 positioned 로 만든다. 시각적 레이아웃은 그대로다.
   ========================================================================== */
.table-scroll { position: relative; }

/* ==========================================================================
   브랜드 아이덴티티 (about.html #brand)
   로고 자랑이 아니라 "이 이름을 이렇게 다룬다"를 보여주는 섹션이다.
   따라서 로고는 크게 한 번 + 변형 4종만 작게 보여주고 끝낸다.
   ========================================================================== */
.brand-logo {
  margin: 0 0 var(--space-8);
  padding: var(--space-8) var(--space-6);
  background: var(--neutral-50);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}
.brand-logo__img {
  display: block;
  width: 100%;
  max-width: 300px;          /* 최소 크기 28px 규정을 크게 상회 — 영문까지 읽힌다 */
  height: auto;
  margin-inline: auto;
}
@media (min-width: 768px) { .brand-logo__img { max-width: 380px; } }
.brand-logo__caption {
  max-width: 52ch;
  margin: var(--space-6) auto 0;
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  text-align: left;
}
@media (min-width: 768px) { .brand-logo__caption { text-align: center; } }

.brand-variants__title { margin-top: var(--space-12); font-size: var(--fs-h4); }
.brand-variants__lead  { margin-top: var(--space-2); color: var(--color-text-muted); }

.brand-variants {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));  /* 320px 에서도 2열 — 변형끼리 비교가 목적이다 */
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) { .brand-variants { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } }

.brand-variant { display: flex; flex-direction: column; gap: var(--space-2); }
.brand-variant__plate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: var(--space-4);
  background: var(--neutral-0);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
/* 반전 로고는 흰 글자다 — 네이비 면을 깔지 않으면 보이지 않는다 */
.brand-variant__plate--dark { background: var(--navy-800); border-color: transparent; }
/* 폭이 아니라 **높이**로 정규화한다 — 가로형(3.7:1)과 축약형(3:1)을 폭으로 맞추면
   축약형만 커 보여 '변형 비교'라는 목적이 깨진다. */
.brand-variant__plate img { display: block; width: auto; max-width: 100%; height: auto; max-height: 40px; }
@media (min-width: 768px) { .brand-variant__plate img { max-height: 46px; } }
.brand-variant__name {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--color-text-muted);
  text-align: center;
}

/* ==========================================================================
   차량 참고 썸네일 (quick · freight · bike · price)
   손그림 일러스트를 전부 걷어내고 실사진으로 통일했다.
   사진은 배경·채도가 제각각이라 그대로 두면 카드마다 톤이 튄다 —
   #methods 의 처리(saturate .82 / contrast 1.02)와 같은 값으로 눌러 통일한다.
   ★ '참고 이미지' 배지는 지우지 말 것: 자차를 보유하지 않는 주선업이므로
     사진이 "우리 차량"으로 읽히면 D-018 과 충돌한다. 배지는 캡션 문구와 달리
     사진에 붙어 있어 잘려 나가지 않는다.
   ========================================================================== */
.vehicle-fig .ratio { position: relative; }
.vehicle-fig .ratio > img { filter: saturate(.82) contrast(1.02); }
.vehicle-fig__badge {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,.55);
  color: var(--neutral-0);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  line-height: 1.4;
}

/* 실사진이 없는 차종(리프트 차량) — 어설픈 일러스트 대신 정제된 아이콘을 쓴다.
   사진을 확보하면 이 변형을 제거하고 일반 .vehicle-fig 로 되돌린다. */
.vehicle-fig--icon .ratio {
  display: grid;
  place-items: center;
  background: var(--neutral-100);
  border: var(--border-width) solid var(--color-border);
}
.vehicle-fig__icon {
  width: 38%;
  max-width: 84px;
  height: auto;
  color: var(--navy-500);    /* 인라인 SVG 라 브랜드 색을 그대로 받는다 */
}
/* .vehicle-fig--inline 은 bike #system 의 '차종 예시' 사진 전용이었다.
   F-64 로 해당 블록을 제거해 현재 사용처가 없다(전 페이지 grep 0건).
   다시 쓰일 여지가 있어 규칙만 남기고 사용처 없음을 명시해 둔다. */
.vehicle-fig--inline { margin-top: var(--space-4); }

/* ==========================================================================
   약관·개인정보 본문 표 (.table-wrap)
   결함: terms/privacy 의 표는 tabindex="0" role="region" 까지 갖췄는데
         .table-wrap 에 대응하는 CSS 가 없어 overflow 가 걸리지 않았다.
         320px 에서 표가 컨테이너를 5px 밀어내 문서 전체에 가로 스크롤이 생겼다.
   조치: .table-scroll 과 같은 규칙을 적용한다(그림자 힌트는 생략 — 법령 본문이라 장식을 줄인다).
   ========================================================================== */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.table-wrap:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 2px; }

/* 애니메이션 정지/재생 토글은 보조 버튼이지만 단독으로 눌러야 하는 컨트롤이다.
   .btn--sm(36px)를 그대로 두면 WCAG 2.5.5(44px)에 미달한다. */
#tour-motion-toggle { min-height: var(--tap-min); }

/* ==========================================================================
   전체 메뉴(모바일) — 홈 항목 · 항목 이름 좌측 여백 · 현재 페이지 표시
   ① 홈이 없어 "닫고 → 로고 찾기" 2단계를 요구했고, 첫 항목이 퀵서비스라
      메뉴를 열면 '전체메뉴 = 퀵서비스'로 읽혔다. 홈을 최상단에 둔다.
      ★ 홈 앞의 집 아이콘은 제거했다 — 7개 중 홈에만 좌측 아이콘이 붙어
        목록의 텍스트 시작선이 홈만 어긋났다. 우측 화살표만 7개 공통으로 둔다.
        (.nav-overlay__label / .nav-overlay__icon 규칙도 사용처가 사라져 삭제)
   ② 항목 이름의 좌측 여백  ③ 현재 페이지 표시  ④ 낮은 화면 수납 — 각 규칙 옆 주석 참조
   ========================================================================== */
/* ② 항목 이름의 좌측 여백 — 요청: "이름에 마진이 좀 더 크게"
   결함: .nav-overlay__link 에 좌우 패딩이 없어 .nav-overlay__body 의
         --gutter(16px)가 곧 텍스트 시작선이었다. 글자가 화면 좌측에 바로 붙고
         우측 셰브론도 가장자리에 붙어 "마무리가 덜 된" 목록으로 읽혔다.
   조치: 링크 자체에 좌우 패딩을 준다.
     · 좌 --space-4(16px) → 텍스트 시작선 32px. 그 안쪽 16px 은 현재 페이지 바가
       서는 자리다(아래 ③). 헤더 로고 left(16) · 오버레이 제목 '전체 메뉴' left(16)
       · 구분선 left(16) 와 같은 축에 바가 놓이므로, 메뉴를 열어도 세로선이
       끊기지 않고 헤더에서 목록으로 이어진다. 390/414px 실측 대조로 확정.
     · 우 --space-3(12px) → 셰브론 상자 right 를 헤더 닫기(X) 아이콘 상자 right 와
       같은 좌표에 맞춘다(390px 기준 둘 다 362px). 이 역시 실측으로 정한 값이다.
   ※ 세로 크기는 건드리지 않는다 — 행 높이는 min-height 로만 결정되므로
     320x568 7개 수납(아래 ④)에 영향이 없다. 실측으로 재확인했다. */
.nav-overlay__link { padding-inline: var(--space-4) var(--space-3); }

/* ③ 현재 페이지 표시 — 강조가 아니라 '차분한 구분'이다.
      이미 그 페이지에 있으므로 누를 이유가 없는 항목이다. 여기를 키우면
      정작 눌러야 할 나머지 6개가 묻힌다. 그래서 흰색보다 한 단계 낮춘다.
      · 색: --navy-300 (보조 텍스트용 토큰). 배경 --navy-800 대비 8.02:1 (AA 4.5 통과)
      · 주황(--action-*)은 쓰지 않는다 — 이 사이트에서 주황은 전화 CTA 전용이라
        내비게이션 상태에 쓰면 "누르면 전화가 걸리나"로 읽힌다(D-039 용도 충돌).
      · 링크색 --blue-300 도 피한다 — 'on dark 링크'와 의미가 겹친다.
      · 색만으로 구분하지 않는다(D-015 #11): 좌측 바(형태)를 함께 둔다.
        바는 절대배치라 텍스트 시작선을 밀지 않는다 — 7개 정렬이 유지된다.
      · 표식은 현재 페이지 1개에만 붙인다. 7개 전부에 점·대시를 두는 안을
        렌더링해 비교했으나 요청이 아니었고, 표식이 늘수록 이 바의 '지금 여기'
        신호가 묽어진다. 나머지 6개는 우측 셰브론 하나로 균일하게 둔다.
      · left:0 — 좌측 패딩(16px)이 생기기 전에는 -8px(화면 8px)이었다. 그대로 두면
        바만 화면 가장자리에 남아 텍스트(32px)에서 24px 떨어져 나온다.
        0 으로 옮기면 바가 로고·제목·구분선과 같은 16px 축에 서고 텍스트와의
        간격도 13px 로 붙는다. 형태·굵기·색·높이는 그대로다. */
.nav-overlay__link[aria-current="page"] {
  /* 요청: "| 왼쪽 보더 줄만 좀 더 크게 하면 눈에 보이기 좋겠다" → 3x24 에서 4x32 로 키운다.
     · 폭은 --border-width-accent(4px). 인용·경고 박스의 좌측 바와 같은 토큰이라
       "이 줄 옆이 지금 위치"라는 뜻이 사이트 안에서 한 가지로 읽힌다.
     · 높이 --space-8(32px) = 행 높이 56px 의 57%. 절반을 넘겨 눈에 걸리되
       행을 가득 채우지는 않는다 — 현재 페이지 표시는 보조 정보라 위아래로
       12px 씩 여백을 남겨 '칠한 블록'이 아니라 '표시'로 남긴다.
     · 320x568(행 44px)에서는 아래 ④ 에서 24px 로 되돌린다(행의 55%). */
  --nav-current-bar-w: var(--border-width-accent);
  --nav-current-bar-h: var(--space-8);
  position: relative;
  color: var(--navy-300);
}
.nav-overlay__link[aria-current="page"]::before {
  content: "";                      /* 도형 — 문자가 아니라 낭독되지 않는다 */
  position: absolute;
  left: 0;                          /* 로고·제목·구분선과 같은 16px 축 */
  top: 50%;
  transform: translateY(-50%);
  width: var(--nav-current-bar-w);
  height: var(--nav-current-bar-h);
  border-radius: var(--radius-pill);
  background: var(--navy-300);
}
/* 현재 페이지도 눌러서 새로고침할 수 있으므로 hover/focus 는 나머지와 같이 밝아진다 */
.nav-overlay__link[aria-current="page"]:hover { color: var(--blue-300); }

/* ④ 낮은 화면에서 7개 항목 수납 — 320x568(SE 1세대) 실측 결과
      헤더가 56 → 64px 로 커지면서 목록이 88px 넘쳤다(7번째 '고객지원'이 접힘).
      전체 메뉴는 "한눈에 전부 보이는 것"이 존재 이유라 스크롤이 생기면 값이 준다.
      행 높이를 56 → --tap-min(44px, WCAG 2.5.5 하한)으로 낮추고 본문 여백을 줄여
      100px 을 회수한다. 하단 전화 CTA 는 건드리지 않는다(전환 종착지).
      세로 640px 이하에서만 적용 — 390x844 등 일반 단말은 56px 을 유지한다. */
@media (max-height: 640px) {
  .nav-overlay__link { min-height: var(--tap-min); }
  .nav-overlay__body { padding-block: var(--space-2); }
  /* 행이 56 → 44px 로 줄었는데 바만 32px 로 남으면 행을 가득 채워 블록처럼 보인다.
     행 대비 비율(약 55%)을 유지하도록 24px 로 되돌린다. 폭 4px 은 그대로. */
  .nav-overlay__link[aria-current="page"] { --nav-current-bar-h: var(--space-6); }
}


/* ==========================================================================
   홈 #process — 도해 + 텍스트 중복 해소판
   process.svg 도해와 아래 5단계 텍스트가 같은 말을 두 번 하고 있었다.
   도해를 걷어내고 그 정보(단계 아이콘 · 순서)를 항목 안으로 넣어 하나로 합친다.
   ※ 번호 원(.steps__item::before, components.css)은 아이콘 마커로 대체한다.
     연결선(::after)은 그대로 두어 좌표가 어긋나지 않는다(마커도 44px).
   ========================================================================== */
.steps--icon .steps__item::before { content: none; }
.steps--icon .steps__marker {
  position: absolute;
  left: 0; top: 0;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--navy-700);
  color: var(--neutral-0);
}
.steps--icon .steps__icon { width: 22px; height: 22px; stroke-width: 1.75; }
/* 01~05 — 도해가 하던 "순서" 역할을 텍스트가 대신한다.
   <ol> 이 이미 순서를 전달하므로 스크린리더에는 숨긴다(중복 낭독 방지). */
.steps--icon .steps__num {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.section--brand .steps--icon .steps__marker { background: var(--neutral-0); color: var(--navy-800); }
.section--brand .steps--icon .steps__num    { color: var(--navy-300); }


/* ==========================================================================
   홈 #bike-highlight — 싣는 방법 4장 요약 그리드
   이 섹션의 주제는 "싣는 방법"인데 옆에 붙어 있던 것은 투어 탁송 애니메이션이라
   주제가 어긋났고, 아래 본문과도 내용이 겹쳤다. 사진 4장 요약으로 바꾼다.
   ★ 역할 분리 — 여기는 요약(사진 + 한 줄), 운임·출발·권장 비교는 /bike#methods.
   ★ D-018 — 자차 보유 오인 방지를 위해 '참고 이미지' 배지를 반드시 얹는다.
     (bike.html .method-card__fig / .method-card__cap 과 같은 패턴)
   ========================================================================== */
.shot-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.shot__fig {
  position: relative;
  margin: 0 0 var(--space-3);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--neutral-50);
}
.shot__fig img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* 실사진은 배경이 제각각이라 톤이 튄다 — 눌러서 브랜드 톤으로 통일한다 */
  filter: saturate(.82) contrast(1.02);
}
.shot__cap {
  position: absolute; left: var(--space-2); bottom: var(--space-2);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,.55);
  color: var(--neutral-0);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
}
.shot__label {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 1.4;
}
.shot__alias {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}
.shot__desc {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-caption);
  line-height: 1.6;
}
.on-dark .shot__label { color: var(--neutral-0); }
.on-dark .shot__alias,
.on-dark .shot__desc  { color: var(--navy-300); }
.shot-grid__more { margin: var(--space-5) 0 0; }
/* 탭 타깃 44px 확보 — 캡션 크기 링크라 기본 높이가 모자란다 */
.shot-grid__more .link-cta { min-height: var(--tap-min); }

@media (min-width: 768px) {
  .shot-grid { gap: var(--space-5); }
}

/* 3대 서비스 카드 아이콘 — 퀵(scooter) · 화물(truck) · 바이크(motorbike).
   56px 배지 안에서 1.75em(28px)은 이륜차 두 종(scooter/motorbike)의 실루엣 차이가
   뭉개진다. 32px 로 키워 세 개가 한눈에 구분되게 한다. */
.card--service .card__icon .icon { width: 32px; height: 32px; }

/* ==========================================================================
   31. 상황 인덱스 (D-037) — 히어로 직후 "이런 것도 합니다" 10줄
   ★ .chip 을 재사용하지 않는다. components.css 의 .chip 은 white-space:nowrap +
     min-height:38px 라 가로 스크롤 서브내비 전용이다. 16~20자 제목 10개를 넣으면
     390px 에서 가로로 터지고 터치 타깃도 44px 에 미달한다.
   ★ 가로 스와이프를 쓰지 않는다. 이 섹션의 메시지는 개별 항목이 아니라 '목록의 폭'이라
     한 번에 몇 개가 보이느냐가 목적 그 자체다. .swipe-row 는 그 폭을 구조적으로 숨긴다.
   ========================================================================== */
.case-index {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: case-num;
}
/* 번호 (요청: "1. 2. 3. 4 이렇게 앞에 표현")
   ★ 마크업을 <ul> → <ol> 로 바꿨다. 이 목록은 순서가 있는 것이 아니라 '개수'가
     메시지인 목록이고(할 수 있는 일이 10가지나 된다), <ol> 이라야 스크린리더가
     "목록, 항목 10개 / 3번째"를 스스로 알려 준다. 번호를 텍스트로 타이핑하지 않는
     이유도 같다 — 타이핑한 "3."은 데이터가 아니라 글자라 순서가 바뀌면 틀린다.
   ★ 그런데 네이티브 마커(list-style:decimal)는 쓸 수 없다. 항목 본체가 <li> 가
     아니라 그 안의 카드(.case-index__link, 테두리 있는 그리드)라서, 마커는 카드
     바깥 그리드 갭에 떨어져 카드와 붙지 않는다. 그래서 list-style 은 끈 채
     카운터를 카드 안 'num' 칸에 그린다.
   ★ 낭독 중복 방지 — <ol> 이 이미 순서를 말하므로 ::before 까지 "3."을 읽으면
     "3, 3." 이 된다. content 의 대체텍스트 문법(content: ... / "")으로 낭독에서만
     지운다. 이 문법을 모르는 구형 브라우저는 선언 전체를 무시하므로, 바로 위에
     대체텍스트 없는 같은 선언을 먼저 두어 번호가 사라지지 않게 한다(폴백). */
.case-index > li { counter-increment: case-num; }
.case-index__link::before {
  content: counter(case-num) ".";
  content: counter(case-num) "." / "";
  grid-area: num;
  /* num 칸은 title·kind 두 행에 걸쳐 있다(F-79 요청: "2줄이면 그 중간").
     center 로 두어 카드 전체 높이의 세로 중앙에 세운다 — 제목이 한 줄이든 두 줄이든
     번호가 카드의 무게중심에 놓여, 3열 그리드에서 카드마다 번호 높이가 흔들리지 않는다.
     line-height 는 1 로 잠근다. 예전의 calc(...) 행 높이는 첫 줄에 맞추기 위한
     장치였는데, center 정렬에서는 그 값이 오히려 광학 중심을 아래로 밀어낸다. */
  align-self: center;
  text-align: right;
  font-size: var(--fs-body-lg);        /* caption(13) → 17~18. F-79 "좀 더 크게" */
  font-weight: var(--fw-bold);         /* semibold → bold. F-79 "볼드로" */
  font-variant-numeric: tabular-nums;  /* 1~10 의 자릿수 폭을 고정 */
  line-height: 1;
  /* 색은 제목(--color-text)보다 낮게 유지한다. 크기·굵기를 올린 만큼 색까지 올리면
     번호가 제목보다 튄다 — "크되 조용한" 상태를 색으로 되돌린다. */
  color: var(--color-text-muted);
}
.case-index__link {
  display: grid;
  /* num 칸은 고정폭이다. auto 로 두면 카드마다 그리드가 따로라 "1." 카드와 "10."
     카드의 제목 시작선이 어긋난다. 우측 정렬 + tabular-nums 로 마침표를 같은 x 에
     세워 두 자릿수(10.)에서도 제목이 흔들리지 않는다.
     ★ 폭 재계산 — 번호를 caption(13px)에서 body-lg(18px) bold 로 키웠으므로
       "10." 의 실측 폭이 --space-6(24px)을 넘는다(약 26px). 28px 이 필요한데
       스페이싱 스케일에 24 다음이 32 라, 스케일 밖 숫자를 새로 박지 않고
       기존 토큰의 합(24+4)으로 만든다. */
  grid-template-columns: calc(var(--space-6) + var(--space-1)) minmax(0, 1fr) auto;
  grid-template-areas:
    "num title caret"
    "num kind  caret";
  align-items: center;
  /* 번호와 제목 사이. 모바일은 8px 로 좁힌다 — 번호를 키우면서 늘어난 좌측 폭을
     여기서 되돌려, 320px 에서 2줄로 접히는 항목 수를 확대 전과 같은 3개로 유지한다.
     (12px 로 두면 5개가 접힌다. 600px 이상 2열부터는 다시 12px 로 벌린다.) */
  column-gap: var(--space-2);
  min-height: var(--tap-min);          /* WCAG 2.5.5 터치 타깃 */
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  /* 좌측 액센트 바 (F-79 "박스 왼쪽 보더를 굵고 진하게").
     ★ 굵기는 --border-width-accent(4px) — 모바일 메뉴의 '현재 페이지' 바와 같은
       토큰이다. 사이트 안에서 "왼쪽의 굵은 세로 바 = 이 줄이 하나의 항목"이라는
       언어를 한 값으로 통일한다.
     ★ 색은 --navy-500. navy-700(브랜드 면색)으로도 그려 봤으나, 3열 × 4행으로
       10장이 깔리면 굵은 진남색 막대가 격자로 반복돼 세로 줄무늬처럼 읽히고
       제목보다 바가 먼저 눈에 들어왔다. 한 단계 낮춘 navy-500 은 흰 배경 위
       4.57:1 로 여전히 '진한 브랜드 계열'이면서 반복돼도 목록이 조용하다.
       hover 에서 navy-700 으로 올라가 "굵고 진하게"의 방향은 유지된다. */
  border-left: var(--border-width-accent) solid var(--navy-500);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
/* 행 높이가 곧 이 섹션의 목적이다 — 10줄이 한 화면에 들어와야 하므로 행간을 조인다.
   본문 행간(--lh-body 1.70)이 아니라 제목 행간(--lh-h3 1.40)을 쓰는 이유가 이것이다. */
.case-index__title {
  grid-area: title;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h3);
}
.case-index__kind {
  grid-area: kind;
  font-size: var(--fs-caption);
  line-height: var(--lh-h4);
  color: var(--color-text-muted);
}
/* 화살촉 — 45도 회전한 정사각형의 두 변. 아이콘 SVG 10개를 더 싣지 않기 위한 선택. */
.case-index__link::after {
  content: "";
  grid-area: caret;
  width: 7px; height: 7px;
  border-top: var(--border-width-strong) solid currentColor;
  border-right: var(--border-width-strong) solid currentColor;
  transform: rotate(45deg);
  opacity: .45;
  transition: transform var(--dur-fast) var(--ease-out);
}
.case-index__link:hover {
  border-color: var(--color-border-brand);
  border-left-color: var(--navy-700);   /* 액센트 바는 hover 에서 브랜드 면색까지 진해진다 */
  background: var(--color-brand-soft);
}
.case-index__link:hover::before { color: var(--color-text-strong); }
.case-index__link:hover .case-index__title { text-decoration: underline; }
.case-index__link:hover::after { transform: rotate(45deg) translate(2px, -2px); }
.case-index__link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 2px;
}
/* 600px 이상 2열 / 1024px 이상 3열 — 10줄이 한 화면 안에 들어오게 한다 */
@media (min-width: 600px) {
  .case-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .case-index__link { padding: var(--space-3) var(--space-4); column-gap: var(--space-3); }
}
@media (min-width: 1024px) {
  .case-index { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 상황 인덱스 섹션 머리는 상단용이라 리드를 짧게 쓴다. 여백도 한 단계 줄인다. */
.case-index-head { margin-bottom: var(--space-4); }
@media (min-width: 768px) { .case-index-head { margin-bottom: var(--space-6); } }


/* ==========================================================================
   30. 블록 수직 리듬 교정 — F-62 "표·섹션 위에 공백이 없어 답답하다"
   ★ 근거: 11페이지 × 390/1440px 를 headless chrome 으로 렌더링해
     .container / .flow 직계 형제 534쌍의 실제 간격(getBoundingClientRect)을 측정했다.
     교정 전 모바일 기준 0px 24쌍 · 8px 15쌍이 나왔고, 그중 하나가 고객이 지목한
     freight #general 의 "취급 톤급" 안내(.notice)였다 — 카드 그리드와 간격 0px.

   ★ 기준값 산정 근거 (임의값 아님)
     블록 간격은 "섹션 패딩보다 반드시 작아야" 섹션 경계가 블록 경계보다 강하게 읽힌다.
       모바일  섹션 패딩 48(--section-py)     → 블록 32(--space-8)   = 67%
       ≥1024   섹션 패딩 96(--section-py-xl)  → 블록 48(--space-12)  = 50%
     이는 layout.css 가 .section__body 에 이미 선언해 둔 리듬과 동일하다.
     즉 새 스케일을 만드는 것이 아니라, 선언돼 있으나 적용되지 않던 리듬을 실제로 물린다.

   ★ layout.css 가 :where(.section > .container) > * + * 로 같은 리듬을 깔았지만
     :where() 는 특정도 (0,0,0) 이라 아래 두 부류에 전부 밀린다.
       ① pages.css 의 컴포넌트 규칙 — .case-index{margin:0}, .brand-logo{margin:0 0 ...},
          .section__cta{margin-top:--space-6} 등 (0,1,0)
       ② §20 모바일 압축 규칙 — .case-list / .vehicle-gallery (0,1,0)
     그래서 같은 리듬을 (0,2,0) 으로 한 번 더 못박는다. layout.css 를 수정하지 않고
     pages.css 에서 덮는 이유는 layout.css 가 디자이너 소유이기 때문이다.

   ★ §20("모바일 여백·리듬 정리")과 충돌하지 않는다.
     §20 이 줄인 것은 컴포넌트 "안쪽"(카드 패딩·문단 사이·그리드 gap)이고
     여기서 넓히는 것은 컴포넌트 "사이"다. 축은 다르다.
     - 문단 사이(.flow > * + *) 12px 은 그대로 둔다 — 이전 고객 피드백
       "줄간 공백이 비전문가처럼 보인다"에 대한 조치이므로 되돌리지 않는다.
   ========================================================================== */

/* 30-1. 섹션 안 블록 리듬 — 특정도 (0,2,0) 으로 재적용.
   .section-head{margin-bottom} 과는 인접 형제 마진 상쇄로 큰 값 하나만 남는다(이중 여백 없음). */
.section > .container > * + * { margin-top: var(--space-8); }
@media (min-width: 1024px) {
  .section > .container > * + * { margin-top: var(--space-12); }
}

/* 30-2. 표에 종속된 부속물은 표에 붙인다 — 리듬에서 제외한다.
   ※ 각주(.table-note)는 표의 일부다. 32px 을 주면 앞 표가 아니라 뒷 블록에 붙어 보인다. */
.section > .container > * + .table-note { margin-top: var(--space-3); }

/* 30-3. 스크롤 안내 문구(.table-hint / .swipe-hint)는 "뒤에 오는" 표·행의 캡션이다.
   30-1 이 적용되면 안내가 제목과 표 사이 32px 한가운데 떠서 미아가 된다.
   → 안내 위는 리듬대로 띄우고, 안내 아래만 8px 로 붙인다.

   ★ 되돌림이 필요한 이유 (1440px 실측에서 잡은 함정)
     두 힌트는 넓은 화면에서 display:none 이 된다(.table-hint ≥768 / .swipe-hint ≥1024).
     display:none 이면 박스는 사라지지만 **인접 형제 선택자는 계속 매치**되므로,
     표가 앞 블록에서 8px 만 떨어진 채로 남는다. 실제로 데스크톱에서
     `.section-head → 표` 가 48px 이어야 할 자리에서 32px 로 눌려 있었다(6곳).
     각 힌트가 사라지는 브레이크포인트에서 리듬을 되돌린다. min-width 만 쓴다 (D-016 #1). */
.section > .container > .table-hint + *,
.section > .container > .swipe-hint + * { margin-top: var(--space-2); }
@media (min-width: 768px) {
  /* .table-hint 가 여기서 사라진다 */
  .section > .container > .table-hint + * { margin-top: var(--space-8); }
}
@media (min-width: 1024px) {
  /* .swipe-hint 가 여기서 사라지고, 30-1 의 리듬도 48px 로 올라간다 */
  .section > .container > .table-hint + *,
  .section > .container > .swipe-hint + * { margin-top: var(--space-12); }
}

/* 30-4. .section 밖에서 .container 를 직접 쓰는 페이지(약관·개인정보 처리방침).
   빵부스러기 → 페이지 머리 간격이 0px 이었다. <section> 은 자체 패딩이 있으므로 제외한다. */
main > .container > * + *:not(.section) { margin-top: var(--space-8); }
@media (min-width: 1024px) {
  main > .container > * + *:not(.section) { margin-top: var(--space-12); }
}
/* 페이지 머리 안쪽 — 제목과 리드는 한 덩어리다. 리듬을 물리지 않는다. */
.page-header > * + * { margin-top: var(--space-3); }

/* 30-5. 장문(.flow) 안의 제목 위 여백 — 데스크톱에서 되살린다.
   §20 이 .flow > * + h2/h3 를 브레이크포인트 없이 고정해 데스크톱에서도 32/24 로 눌려 있었다.
   base.css 가 선언한 원래 의도(48/32)를 768px 이상에서 복원한다. */
@media (min-width: 768px) {
  .flow > * + h2 { margin-top: var(--space-12); }
  .flow > * + h3 { margin-top: var(--space-8); }
}


/* ==========================================================================
   31. 모바일 헤더 무게감 — F-65 "모바일 헤더 높이를 좀 더 크게"
   ★ 토큰 재정의로 처리하는 이유
     --header-h 는 tokens.css(디자이너 소유)에 있어 그 파일을 고칠 수 없다.
     그런데 이 값은 .site-header__bar / .nav-overlay__head 의 min-height,
     .subnav{top} 의 기준인 --stack-h(§24-1), html{scroll-padding-top} 까지
     전부 calc() 로 물려 있다. 개별 규칙을 덮으면 그중 하나만 놓쳐도
     "서브내비가 헤더 뒤로 파묻히는" 과거 결함이 재발한다.
     → 파생값을 건드리지 않고 **뿌리 토큰 하나만** pages.css :root 에서 덮는다.
       pages.css 가 마지막에 로드되므로 같은 특정도(0,1,0)로 이긴다.

   ★ 56px → 64px 로 정한 근거 (지시 범위 64~72px 중 하한 채택)
     ① 햄버거 버튼은 WCAG 2.5.5 로 44px 고정이다.
        56px 헤더에서 상하 여백은 (56-44)/2 = 6px — 버튼이 헤더에 꽉 찬다.
        64px 이면 10px, 72px 이면 14px 이 된다. 10px 이면 "여유"로 읽히고,
        14px 은 로고를 같이 키우지 않으면 빈 띠로 읽힌다.
     ② sticky 헤더의 높이는 **모든 스크롤 위치에서 영구적으로 잃는 화면**이다.
        390x844 기준 64px = 뷰포트의 7.6%, 72px = 8.5%.
        여기에 서브내비가 있는 페이지는 앵커 이동 여백(scroll-padding-top)이
        64+68+16 = 148px(17.5%) 로 따라 커진다. 72px 이면 156px(18.5%).
        무게감의 대가로 본문 한 줄을 더 내주는 지점이라 하한을 택했다.
     ③ 헤더만 키우면 허전해지므로 로고를 26px → 30px 로 함께 키운다.
        로고/헤더 비율 26/56 = 0.464 → 30/64 = 0.469 로 사실상 동일하다.
        즉 "빈 띠가 넓어진 것"이 아니라 락업 전체가 한 단계 커진 것으로 읽힌다.

   ★ 연쇄 확인 완료(390px 실측): 헤더 64 / .subnav top 64 / scroll-padding-top 148 ·
     서브내비 없는 페이지 80 / 앵커 이동 시 제목 가림 0 / 히어로 상단 잘림 없음.
   ★ D-034·D-039 의 .site-header 1px 인셋 헤어라인은 그대로 둔다(§29). 높이만 바뀐다.
   ========================================================================== */
:root { --header-h: 64px; }        /* tokens.css 56px 를 덮음 — 데스크톱은 --header-h-lg 가 별도로 담당 */

/* 로고를 헤더와 같은 비율로 키운다. width/height 를 둘 다 명시해 CLS 를 막는다(원본 비율 97:26 / 73:24). */
.logo__img--full    { width: 112px; height: 30px; }
.logo__img--compact { width:  85px; height: 28px; }
@media (min-width: 1024px) {
  /* 데스크톱 헤더(--header-h-lg 72px)는 변경 대상이 아니므로 기존 크기를 유지한다. */
  .logo__img--full { width: 97px; height: 26px; }
}


/* ==========================================================================
   32. 홈 히어로 배경 사진 — D-039 (A안 채택)
   ★ 홈(index.html)에만 붙는 .hero--photo 에서만 동작한다.
     서브페이지 히어로는 §18 의 그레이 면(--neutral-200)을 그대로 쓴다.
   ★ 스크림 농도는 /hero-candidates 에서 3안 × 2뷰포트 × 텍스트 4단계 = 24조합을
     **최악 픽셀 기준**으로 측정해 확정한 값이다. 임의로 바꾸지 말 것
     (야경 사진의 광궤적이 글자를 관통해 95퍼센타일로는 부족하다 — D-039).
   ★ .site-header 의 1px 인셋 헤어라인(§29)을 절대 제거하지 말 것.
     사진 히어로에서 헤더 면 대비가 6.86:1 → 2.03:1 로 떨어지지만
     이 헤어라인이 어두운 사진 위에서 13.89:1 이 되어 경계를 혼자 담당한다 (D-034·D-039).
   ★ rgba() 원값을 쓰는 이유: 알파 합성용 토큰이 tokens.css 에 없다(§18 과 동일한 사정).
     색은 --navy-900 #0B1D46 그대로다.
   ========================================================================== */
.hero--photo {
  background: var(--navy-900);
  isolation: isolate;               /* ::after 스크림이 히어로 밖으로 새지 않게 쌓임맥락을 가둔다 */
}
/* ★ <picture> 는 기본 display:inline 이라 크기를 갖지 않는다.
   components.css 의 `.hero__media img { height:100% }` 가 <picture> 의 auto 높이를 기준으로
   계산돼 이미지가 히어로 상단 일부(390px 폭에서 219px)만 덮고 나머지가 네이비로 남았다.
   래퍼를 블록으로 만들어 .hero__media(inset:0) 의 높이를 그대로 물려준다. */
.hero__media picture { display: block; width: 100%; height: 100%; }

/* 모바일 — 글자가 폭 전체를 덮으므로 세로 스크림 */
.hero--photo .hero__media::after {
  background: linear-gradient(180deg,
    rgba(11, 29, 70, .86) 0%,
    rgba(11, 29, 70, .76) 55%,
    rgba(11, 29, 70, .90) 100%);
}
/* 데스크톱 — 글자가 왼쪽에만 있으므로 오른쪽을 열어 사진을 살린다 */
@media (min-width: 1024px) {
  .hero--photo .hero__media::after {
    background: linear-gradient(90deg,
      rgba(11, 29, 70, .90)  0%,
      rgba(11, 29, 70, .86) 45%,
      rgba(11, 29, 70, .74) 62%,
      rgba(11, 29, 70, .30) 78%,
      rgba(11, 29, 70, .06) 100%);
  }
}

/* 사진 위 텍스트 — §18 의 네이비 계열을 흰 계열로 뒤집는다.
   특정도 (0,2,0) 로 §18 의 `.hero .hero__title`(0,2,0) 과 같고, 소스 순서로 이긴다. */
.hero--photo .hero__title   { color: var(--neutral-0); }
.hero--photo .hero__lead    { color: var(--navy-200); }
.hero--photo .hero__lead strong { color: var(--neutral-0); }
.hero--photo .hero__eyebrow { color: var(--blue-300); }
.hero--photo .hero__en,
.hero--photo .hero__proof,
.hero--photo .hero__note    { color: var(--navy-300); }
.hero--photo a:not([class]) { color: var(--color-link-on-dark); }

/* 히어로 아래 경계 — §18 의 밝은 회색 선은 어두운 사진 아래에서 이질적인 밝은 띠가 된다.
   홈 히어로 다음은 #trust-strip(--color-brand-soft, 밝은 면)이라 면색만으로 이미 갈린다. */
.hero--photo { border-bottom: 0; }

/* ==========================================================================
   33. bike #usecase — 투어 탁송 전폭 밴드 (F-66)
   문제 두 가지를 한 번에 푼다.
   (1) 카드가 5장인데 이 목록은 `.grid--compact-m` 때문에 320px 부터 끝까지 2열이다.
       (`.grid--5` 는 layout.css 에 있으나 뒤에 오는 `.grid--compact-m` 에 덮여 한 번도 적용된 적이 없다 —
        마크업에서 제거했다.) 그래서 마지막 5번째 카드가 항상 혼자 남아 오른쪽이 빈다.
   (2) 투어 탁송은 경쟁사 12곳 중 아무도 안 하는 최대 차별화인데(docs/12-benchmark.md)
       똑같은 카드 한 장으로 취급돼 묻힌다.
   → 5번째를 전폭 밴드로 빼면 앞 4장이 2×2 로 딱 떨어지고(1), 밴드가 이 섹션에서 가장 넓은 요소가 된다(2).

   왜 "맨 앞 대형 배너"가 아니라 "맨 뒤 가로 밴드"인가
   바로 위 형제 섹션이 `#tour`(전폭 다크 브랜드 면)다. 그 바로 아래에 투어를 또 크게 펼치면
   섹션 머리글 하나(약 200px)를 사이에 두고 같은 주제가 두 번 크게 나온다 — 중복으로 읽힌다.
   목록 끝에 두면 4장이 사이를 벌려 주고, 성격도 "다시 자세히 보러 가는 문"으로 정리된다.
   -------------------------------------------------------------------------- */
.usecase-grid > .usecase-tour {
  grid-column: 1 / -1;          /* 2열 그리드를 가로질러 전폭. 320px 에서도 2열이므로 조건 없이 건다 */
  background: var(--color-bg-brand-soft);  /* 흰 카드 4장·흰 섹션 바탕과 갈라 세우는 최소 장치 */
  border-color: var(--navy-700);
  border-width: var(--border-width-strong);/* 면색만으로는 4장보다 오히려 약해 보인다. 테두리로 무게를 준다 */
  box-shadow: var(--shadow-none);          /* 면색+테두리로 충분하다. 그림자까지 얹으면 과하다 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);      /* `.grid--compact-m > .card` 의 12px 은 전폭 밴드에 너무 얕다 */
}
.usecase-tour__icon { flex: none; }
.usecase-tour__text { min-width: 0; }      /* flex 자식 축소 허용 — 320px 가로 넘침 방지 */

/* 밴드 안쪽 간격은 카드보다 조이는 게 맞다. 아이브로우→제목은 한 덩어리로 읽혀야 한다 */
.usecase-tour .card__eyebrow { color: var(--action-900); }  /* 투어 = 따뜻한 액센트. blue-50 위 9.9:1 */
.usecase-tour .card__title:not(:first-child) { margin-top: var(--space-1); }
.usecase-tour .card__body { margin-top: var(--space-2); }
.usecase-tour__go { margin: 0; }

/* 모바일에서도 제목만은 카드(16px)보다 키운다 — 이 항목이 특별하다는 신호가 크기다 */
.usecase-grid .usecase-tour .card__title { font-size: var(--fs-h4); }

@media (min-width: 768px) {
  .usecase-grid > .usecase-tour {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-6);
  }
  .usecase-tour__text { flex: 1 1 auto; }
  .usecase-tour__go   { flex: none; }
  .usecase-grid .usecase-tour .card__title { font-size: var(--fs-h3); }
}

/* ── §34. 화물 계약운송 — 좌우 비중 조정 ─────────────────────────────
   기본 .grid--split 은 본문 1.4fr / 사이드 1fr 이다(본문이 긴 섹션 기준).
   #contract 는 본문이 두 문단뿐이고 사이드가 카드 4장이라 비중이 거꾸로다.
   1열로 쌓였을 때는 사이드가 세로로 길어져 왼쪽이 600px 넘게 비었고,
   2열로 바꾸니 카드 폭이 모자라 제목이 접혔다(「월 단위 / 후불 정산」).
   → 이 섹션만 사이드를 넓힌다. .grid--split 자체는 6개 페이지가 쓰므로 건드리지 않는다. */
@media (min-width: 1024px) {
  #contract .grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
}

/* ── §35. 인터넷 접수 안내 — /support 상담 폼 아래 (D-031) ──────────────
   상담 폼과 외부 접수 시스템은 역할이 다르다.
     상담 폼   = 견적·문의를 남기면 우리가 연락한다 (회신형)
     인터넷 접수 = 보낼 내용이 확정된 경우 직접 접수한다 (자력형)
   그 차이를 읽히게 하는 것이 이 블록의 목적이므로 시각적으로 폼과 분리하되,
   폼보다 강해 보이면 안 된다 → .notice--neutral + .btn--secondary 를 재사용한다.
   ★ 새 색을 만들지 않는다. 여기서 정하는 것은 간격과 보조문 색뿐이다. */
.order-online { margin-top: var(--space-8); }
.order-online__action { margin-top: var(--space-4); }
.order-online__note { color: var(--color-text-muted); }


/* ==========================================================================
   §36. 카카오톡 채널 만들기 안내 (/kakao-setup) — 사업자 전달용 내부 문서
   근거: docs/58-kakao-setup-guide.md

   ★ 설계 전제가 사이트 본문과 다르다. 읽는 사람이 한 명이고, 그 한 명이
     65세·폰·컴퓨터 비숙련자다. 아래 모든 값의 근거는 그 전제 하나다.
     (1) 본문을 한 단계 키운다 — 새 값을 만들지 않고 기존 타이포 스케일을
         한 칸 밀어 쓴다(.guide 안에서 --fs-body = --fs-h4).
     (2) 단계 사이 여백을 크게 둔다 — 폰에서 한 단계씩 끊어 읽히게.
     (3) 접는 UI 를 쓰지 않는다. 「전화 주십시오」는 끝까지 못 읽어도 보여야 한다.
     (4) 입력칸을 만들지 않는다 — 받을 값이 주소 하나뿐이고 카톡으로 받는다.
   ★ 손님용 전환 버튼(전화·상담폼·인터넷접수)을 이 페이지에 넣지 않는다.
     내부 안내문에 손님용 CTA 가 섞이면 읽는 사람이 무엇을 눌러야 하는지 헷갈린다.
   ========================================================================== */

/* --- 36-1. 페이지 스코프 타이포 — 한 칸 위로 밀어 쓴다 ------------------- */
.guide {
  --fs-body:    var(--fs-h4);        /* 1rem          → 1.125~1.25rem  */
  --fs-caption: var(--fs-body-lg);   /* 0.81~0.88rem  → 1.06~1.125rem  */
  --lh-body:    var(--lh-body-lg);   /* 1.70          → 1.72           */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
/* 섹션 경계 — 한 화면에 한 덩어리만 들어오게, 경계는 옅은 선 하나로만 */
.guide__section + .guide__section { border-top: var(--border-width) solid var(--color-border); }
.guide__lead { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--color-text-strong); }
/* 섹션 본문의 세로 리듬 — 인라인 style 을 쓰지 않기 위한 전용 흐름 클래스 */
.guide__body > * + *            { margin-top: var(--space-6); }
.guide__body > .gsteps          { margin-top: var(--space-8); }
.guide__body > .guide__subhead  { margin-top: var(--space-12); }

/* --- 36-2. 탈출구 상자 「어렵게 느껴지시면 그냥 전화 주십시오」 ----------
   ★ 접지 않는다. 맨 위·맨 아래·본문 중간 3곳에 상시 노출한다.
   ★ 번호를 적지 않는다 — 카톡으로 대화 중이고 적을 번호가 없다.
     그래서 tel: 링크도 걸지 않는다(가짜 번호를 넣는 것보다 없는 편이 정확하다).
   ★ 배경색에 의존하지 않는다 — 인쇄(PDF)에서 배경이 빠져도 테두리로 읽힌다. */
.guide-help {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--border-width-strong) solid var(--action-600);
  border-radius: var(--radius-lg);
  background: var(--action-50);
  break-inside: avoid;
}
.guide-help__icon { flex: 0 0 auto; color: var(--action-700); margin-top: var(--space-1); }
.guide-help__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-bold);
  color: var(--action-900);
}
.guide-help__body { margin-top: var(--space-2); color: var(--color-text); }
.guide-help__body > * + * { margin-top: var(--space-2); }
/* 머리·꼬리의 큰 상자 */
.guide-help--main { padding: var(--space-6); border-left-width: var(--border-width-accent); }
@media (min-width: 768px) { .guide-help--main { padding: var(--space-8); } }
/* 본문 중간 탈출구 — 같은 장치지만 흐름을 끊지 않을 만큼만 */
.guide-help--inline { padding: var(--space-4); border-radius: var(--radius-md); }
.guide-help--inline .guide-help__title { font-size: var(--fs-body); line-height: var(--lh-body); }

/* --- 36-3. 큰 단계 목록 --------------------------------------------------
   .steps 를 쓰지 않는 이유: 번호가 섹션마다 1 부터 다시 시작한다.
   이 문서는 1~14 가 두 섹션에 걸쳐 이어지므로 <ol start> 가 필요하고,
   counter(list-item) 은 start/value 를 그대로 따른다. */
.gsteps { list-style: none; }
.gsteps__item {
  position: relative;
  padding-left: calc(var(--space-12) + var(--space-4));
  padding-bottom: var(--space-12);
  break-inside: avoid;
}
.gsteps__item:last-child { padding-bottom: 0; }
.gsteps__item::before {                       /* 번호 원 — 눈에 띄게 */
  content: counter(list-item);
  position: absolute;
  left: 0; top: 0;
  width: var(--space-12); height: var(--space-12);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--navy-700);
  color: var(--neutral-0);
  font-size: var(--fs-h4);
  font-weight: var(--fw-extrabold);
  font-variant-numeric: tabular-nums;
}
.gsteps__item:not(:last-child)::after {       /* 단계 연결선 */
  content: "";
  position: absolute;
  left: calc(var(--space-12) / 2 - var(--border-width));
  top: calc(var(--space-12) + var(--space-2));
  bottom: var(--space-4);
  width: var(--border-width-strong);
  background: var(--navy-100);
}
.gsteps__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);
}
.gsteps__body { margin-top: var(--space-3); }
.gsteps__body > * + * { margin-top: var(--space-4); }

/* --- 36-4. 그대로 쓰실 값 -------------------------------------------------
   ★ 평범한 텍스트다. 길게 누르면(또는 한 번 누르면) 선택된다.
     복사 버튼은 JS 가 있을 때만 옆에 붙는다 — 없어도 글자는 그대로 읽힌다. */
.guide-val {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--neutral-0);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  font-feature-settings: var(--font-feature-num);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-text-strong);
  -webkit-user-select: all;
  user-select: all;
  overflow-wrap: anywhere;
}
.guide-copyrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
/* 복사 버튼(JS 주입) — .btn--sm 은 36px 이라 쓰지 않는다. 읽는 분이 65세다:
   터치 타깃은 44px(--tap-min) 를 지키고 좌우 패딩만 줄여 폭을 아낀다. */
.guide-copybtn { padding-inline: var(--space-4); }

/* --- 36-5. 인쇄(PDF) ----------------------------------------------------
   base.css @media print 가 헤더·푸터·하단바를 이미 지운다. 여기서는
   「단계가 쪽 중간에서 잘리지 않게」와 「배경 없이도 읽히게」만 보탠다. */
@media print {
  /* 지면에서는 한 칸만 올린다(--fs-body-lg) — 화면용 두 칸은 A4 에서 과하다 */
  .guide { --fs-body: var(--fs-body-lg); --fs-caption: var(--fs-body); }
  .guide__section { break-inside: auto; padding-block: var(--space-6); }
  .guide__section + .guide__section { border-top: 0; }
  .guide-help,
  .gsteps__item,
  .deflist__row,
  .copy-box,
  .notice { break-inside: avoid; }
  .guide-help { background: none; border-color: #000; }
  .guide-help__title { color: #000; }
  .guide-copybtn { display: none !important; }   /* JS 가 붙인 복사 버튼 */
  .guide-val { background: none; border-color: #000; }
  h1, h2, .gsteps__title { break-after: avoid; }
}