@font-face {
  font-family: "Pretendard";
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/Pretendard-Thin.woff") format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/Pretendard-ExtraLight.woff") format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/Pretendard-Light.woff") format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/Pretendard-Regular.woff") format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/Pretendard-Medium.woff") format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/Pretendard-SemiBold.woff") format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/Pretendard-Bold.woff") format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/Pretendard-ExtraBold.woff") format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/Pretendard-Black.woff") format("woff");
}

:root {
  /* Brand */
  --red: #e52b38;
  --red-dark: #c81927;
  --red-soft: #fdecec;

  /* Neutral */
  --black: #111111;
  --ink: #171717;
  --gray-900: #242424;
  --gray-700: #555555;
  --gray-500: #8a8a8a;
  --gray-300: #d8d8d8;
  --gray-200: #e8e8e8;
  --gray-100: #f4f4f2;
  --white: #ffffff;
  --blue: #cfe4ff;
  --bg-gray: #f8f8f8;

  /* Layout */
  --container: 1280px;
  --header-height: 84px;

  /* Spacing (8px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 80px;
  --space-9: 96px;
  --space-10: 120px;
  --space-11: 160px;

  /* Radius — KCP sharp corners */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* Elevation */
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-soft: 0 24px 70px rgba(0, 0, 0, 0.09);

  /* Type scale */
  --fs-display: clamp(34px, 5vw, 54px);
  --fs-h1: clamp(30px, 3.4vw, 44px);
  --fs-h2: clamp(24px, 2.6vw, 36px);
  --fs-h3: 26px;
  --fs-h4: 21px;
  --fs-body-lg: 17px;
  --fs-body: 15px;
  --fs-caption: 15px;
  --fs-tag: 11px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
  border: none;
  line-height: 1;
}

svg {
  display: block;
  width: 100%;
  height: auto;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 999;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  background: var(--black);
  color: var(--white);
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 16px;
}

.container {
  width: min(calc(100% - 48px), var(--container));
  margin: 0 auto;
}

/* 화면에는 안 보이지만 스크린리더에는 읽히는 글. 표 caption 처럼
   보기엔 군더더기지만 소리로는 있어야 하는 설명에 쓴다.
   display:none 이면 읽히지도 않으므로 1px 로 접어 둔다 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   스크롤 등장 (data-reveal)

   HTML 에 data-reveal="up|fade|left|right" 를 달면
   화면에 들어올 때 script.js 가 .is-revealed 를 붙인다. 한 번만 붙는다.
   나란한 카드는 부모에 .reveal-stagger 를 주면 순서대로 늦게 올라온다.

   숨김을 :where(.js) 로 감싼 이유 두 가지:
   1. layout.js 가 파싱 도중 <html> 에 .js 를 붙인다. JS 가 아예 없으면
      이 클래스가 없어 처음부터 다 보인다 — 페이지마다 <noscript> 를 넣지 않아도 된다.
   2. :where() 는 특정도가 0 이라, 클래스를 하나 더 얹어도
      아래 hover 규칙과의 힘겨루기가 그대로 유지된다.

   이 블록이 파일 앞쪽에 있는 이유:
   .is-revealed 의 transform 리셋과 카드 hover 의 transform 은 특정도가 같다.
   나중에 선언된 쪽이 이기므로, 뒤에 오는 hover 가 이기도록 여기에 둔다.
   순서를 바꾸면 등장 후 카드가 hover 로 떠오르지 않는다.
   ============================================================ */
:where(.js) [data-reveal] {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
  transition-delay: var(--reveal-delay, 0s);
}

:where(.js) [data-reveal].is-revealed {
  opacity: 1;
}

/* fade 는 transform 을 아예 건드리지 않는다.
   .reservation-panel 처럼 원래 기울어져 있는 요소에 쓴다 */
:where(.js) [data-reveal="up"] {
  transform: translateY(24px);
}

:where(.js) [data-reveal="left"] {
  transform: translateX(-28px);
}

:where(.js) [data-reveal="right"] {
  transform: translateX(28px);
}

:where(.js) [data-reveal="up"].is-revealed,
:where(.js) [data-reveal="left"].is-revealed,
:where(.js) [data-reveal="right"].is-revealed {
  transform: none;
}

/* 나란히 놓인 카드는 조금씩 늦게 올라와야 줄줄이 따라오는 느낌이 난다.
   묶는 쪽(그리드/히어로)에 .reveal-stagger 를 준다 */
.reveal-stagger > [data-reveal]:nth-child(2) {
  --reveal-delay: 0.09s;
}

.reveal-stagger > [data-reveal]:nth-child(3) {
  --reveal-delay: 0.18s;
}

.reveal-stagger > [data-reveal]:nth-child(4) {
  --reveal-delay: 0.27s;
}

.reveal-stagger > [data-reveal]:nth-child(5) {
  --reveal-delay: 0.36s;
}

/* 움직임을 줄여 달라고 한 사용자에겐 이동 없이 그대로 보여준다 */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* 최상단에서는 투명, 100px 이상 스크롤하면 흰 배경 (script.js 가 .is-scrolled 를 토글) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-height);
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header.is-scrolled {
  border-bottom-color: rgba(17, 17, 17, 0.08);
  background: var(--white);
  box-shadow: 0 2px 14px rgba(17, 17, 17, 0.05);
}

/* 다크 히어로(메인 영상 / 하위페이지 사진) 위, 스크롤 전에는 헤더를 밝게 반전 */
body:has(.hero-scrim) .site-header:not(.is-scrolled),
body:has(.page-hero-photo) .site-header:not(.is-scrolled) {
  color: var(--white);
}

.header-inner {
  /* width: min(calc(100% - 48px), 1440px); */
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 42px;
  padding: 0 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: max-content;
}

/* 로고 PNG. 원본 449x58 이라 height 만 주고 width:auto 로 비율을 지킨다
   (width:fit-content 를 주면 대체요소는 고유 폭 449px 이 그대로 나와 헤더가 터진다) */
.brand-logo {
  display: block;
  width: auto;
  height: 32px;
}

/* 기본은 검정 로고. 다크 히어로 위(스크롤 전)에서만 흰 로고로 교체 */
.brand-logo-light {
  display: none;
}

body:has(.hero-scrim) .site-header:not(.is-scrolled) .brand-logo-dark,
body:has(.page-hero-photo) .site-header:not(.is-scrolled) .brand-logo-dark {
  display: none;
}

body:has(.hero-scrim) .site-header:not(.is-scrolled) .brand-logo-light,
body:has(.page-hero-photo) .site-header:not(.is-scrolled) .brand-logo-light {
  display: block;
}

/* 모바일 메뉴를 펼치면 헤더 뒤로 흰 메뉴판이 깔린다.
   다크 히어로 위에 있더라도 이때만은 검정 로고가 맞다.
   (.menu-toggle 은 모바일에서만 조작 가능하므로 폭 조건이 따로 필요 없다) */
body:has(.hero-scrim) .site-header:has(.menu-toggle:checked) .brand-logo-light,
body:has(.page-hero-photo) .site-header:has(.menu-toggle:checked) .brand-logo-light {
  display: none;
}

body:has(.hero-scrim) .site-header:has(.menu-toggle:checked) .brand-logo-dark,
body:has(.page-hero-photo) .site-header:has(.menu-toggle:checked) .brand-logo-dark {
  display: block;
}

body:has(.hero-scrim) .site-header:has(.menu-toggle:checked),
body:has(.page-hero-photo) .site-header:has(.menu-toggle:checked) {
  z-index: 60;
}

/* 헤더 우측: 대표번호 + 접수 버튼 */
.header-actions {
  display: flex;
  align-items: center;
  gap: 22px;
}

.header-tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  white-space: nowrap;
}

.header-tel-text {
  display: grid;
  gap: 5px;
}

.header-tel-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  opacity: 0.6;
}

.header-tel-number {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

.header-tel:hover .header-tel-number,
.header-tel:focus-visible .header-tel-number {
  color: var(--red);
}

.global-nav {
  display: flex;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
}

.nav-list,
.submenu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list {
  display: flex;
  gap: clamp(20px, 2.6vw, 44px);
}

.nav-item {
  position: relative;
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 30px 0;
  white-space: nowrap;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 22px;
  width: 100%;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.25s ease;
}

.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-item:hover > .nav-link::after,
.nav-item:focus-within > .nav-link::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.nav-caret {
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.5;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.nav-item:hover > .nav-link .nav-caret,
.nav-item:focus-within > .nav-link .nav-caret {
  opacity: 1;
  transform: translateY(1px) rotate(225deg);
}

.submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 5;
  min-width: 200px;
  padding: 10px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 2px;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

.submenu a {
  display: block;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  color: var(--gray-700);
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.submenu a:hover,
.submenu a:focus-visible {
  background: var(--gray-100);
  color: var(--black);
}

.nav-item:hover > .submenu,
.nav-item:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.nav-item.is-active > .nav-link::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.submenu a[aria-current="page"] {
  color: var(--red);
}

.menu-toggle,
.menu-button {
  display: none;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 52px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-lg);
  font-size: 15px;
  font-weight: 800;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
}

.button-dark {
  background: var(--black);
  color: var(--white);
}

.button-dark:hover,
.button-dark:focus-visible {
  background: var(--red);
}

.button-primary {
  background: var(--red);
  color: var(--white);
  box-shadow: 0 18px 34px rgba(229, 43, 56, 0.24);
}

.button-primary:hover,
.button-primary:focus-visible {
  background: var(--red-dark);
  box-shadow: 0 22px 40px rgba(229, 43, 56, 0.3);
}

.button-light {
  background: var(--white);
  color: var(--black);
}

/* 라이트 버튼은 레드 CTA 배경 위에만 놓인다.
   호버에서 레드로 바꾸면 배경에 묻혀 버튼이 사라지므로, 반대편인 블랙으로 눌러
   대비를 키운다. */
.button-light:hover,
.button-light:focus-visible {
  background: var(--black);
  color: var(--white);
  box-shadow: 0 18px 34px rgba(17, 17, 17, 0.28);
}

.button-large {
  min-height: 58px;
  padding: 0 var(--space-4);
  font-size: 17px;
}

/* 투명 헤더가 히어로 위에 겹치도록 헤더 높이만큼 끌어올린다(margin-top).
   히어로는 화면 높이(100vh)를 다 쓰고, 그 안에서 글 묶음이 어디에 놓이는지는
   고정 패딩이 아니라 정렬이 정한다 — 위 패딩을 숫자로 박아 두면 화면이 길어질수록
   글이 위로 몰리고 아래가 텅 빈다.
   끌어올린 만큼을 padding-top 으로 되돌려 놨으므로,
   가운데는 화면 가운데가 아니라 헤더 아래 영역의 가운데가 된다. */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* 화면이 아주 낮을 때(가로 모드 노트북 등) 가운데 정렬이 글의 윗부분을
     화면 밖으로 밀어낼 수 있다. safe 는 그럴 때만 위 맞춤으로 물러난다.
     모르는 브라우저는 이 줄을 통째로 무시하고 윗줄 center 를 쓴다 */
  align-items: safe center;
  margin-top: calc(-1 * var(--header-height));
  padding-top: var(--header-height);
  min-height: 100vh;
  /* 모바일 브라우저는 주소창이 있을 때와 없을 때 화면 높이가 달라진다.
     100vh 는 주소창이 없는 상태(가장 큰 높이)로 고정돼 히어로가 접힘선 아래로
     삐져나온다. dvh 는 지금 실제로 보이는 높이 — 아는 브라우저는 이 줄을 쓴다 */
  min-height: 100dvh;
  overflow: hidden;
  background: #0d0d0d;
}

/* 위아래 같은 값 — 화면이 짧을 때 글이 헤더·화면 끝에 붙지 않게 하는 최소 여백 */
.hero-content {
  position: relative;
  z-index: 3;
  padding: 48px 0;
  color: var(--white);
}

.eyebrow {
  margin: 0 0 22px;
  color: var(--red);
  font-size: var(--fs-caption);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.eyebrow-light {
  color: rgba(255, 255, 255, 0.72);
}

.hero h1 {
  margin: 0;
  max-width: 860px;
  font-size: var(--fs-display);
  line-height: 1.2;
  font-weight: 600;
}

.hero h1 strong {
  color: var(--red);
  font-weight: inherit;
  font-weight: 700;
}

.hero-copy {
  margin: 36px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-body-lg);
  line-height: 1.65;
  letter-spacing: -0.025em;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: 44px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: var(--fs-body);
  font-weight: 800;
}

.text-link span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gray-300);
  border-radius: 50%;
  transition: background 0.2s ease, color 0.2s ease, border 0.2s ease;
}

.text-link:hover span,
.text-link:focus-visible span {
  border-color: var(--black);
  background: var(--black);
  color: var(--white);
}

.external-note {
  margin: 18px 0 0;
  color: var(--gray-500);
  font-size: var(--fs-caption);
}

/* 다크 스크림 위 히어로 요소 반전 */
.hero .external-note {
  color: rgba(255, 255, 255, 0.55);
}

.hero .text-link span {
  border-color: rgba(255, 255, 255, 0.35);
}

.hero .text-link:hover span,
.hero .text-link:focus-visible span {
  border-color: var(--white);
  background: var(--white);
  color: var(--black);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 좌측 텍스트 영역은 어둡게 덮어 가독성을 유지하고, 우측으로 갈수록 영상이 드러나게 */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      rgba(10, 10, 10, 0.82) 0%,
      rgba(10, 10, 10, 0.76) 32%,
      rgba(10, 10, 10, 0.45) 58%,
      rgba(10, 10, 10, 0.28) 100%
    ),
    linear-gradient(to top, rgba(10, 10, 10, 0.8), rgba(10, 10, 10, 0) 45%),
    /* 헤더 띠 — 영상 밝은 구간 위에서도 메뉴가 읽히도록 */
    linear-gradient(to bottom, rgba(10, 10, 10, 0.6), rgba(10, 10, 10, 0) 20%);
}

.section {
  padding: 100px 0;
}

/* 앵커 이동 시 sticky 헤더에 가리지 않도록 */
section[id] {
  scroll-margin-top: var(--header-height);
}

.section-light {
  background: var(--white);
}

.section-gray {
  background: var(--bg-gray);
}

/* 브레드크럼을 히어로 밖, 본문 섹션 첫 줄에 두는 페이지용.
   섹션 기본 여백(150px)을 그대로 두면 브레드크럼만 허공에 뜨고
   정작 아래 제목과는 붙어 버린다. 위는 좁히고 아래를 벌린다.
   .section 과 특정도를 벌려 둔 건 반응형 블록의 .section 패딩에 지지 않기 위해서다 */
.section.section-crumb {
  padding-top: 34px;
}

.section-crumb > .container > .breadcrumb:first-child {
  margin-bottom: 44px;
}

/* ============================================================
   페이지 특징 카드 (01~05)

   회색 섹션 위에 흰 카드를 올려 위아래 흰 섹션과 구분한다.
   마지막 카드(.feature-card-wide)는 요금처럼 내용이 많은 항목용으로
   한 줄을 다 쓴다.

   카드 안쪽 규칙에 .feature-card 를 앞에 붙여 둔 이유:
   .feature-card p 가 margin/색을 0 으로 잡고 있어서, 클래스 하나짜리
   선택자로는 특정도가 밀려 안 먹는다.
   ============================================================ */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--space-5);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.feature-index {
  color: var(--red);
  font-size: var(--fs-tag);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.12em;
}

/* 아이콘과 번호를 한 줄에 세운다. 카드 안이 flex column 이라
   따로 두면 둘이 위아래로 쌓여 머리말만 두 줄이 된다 */
.feature-marks {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 카드 머리의 그림 배지 — 제목을 다 읽지 않아도 무슨 상품권인지 훑히게 한다.
   글자가 아니라 40px 원 하나라 레드를 써도 "칸 폭만큼 긴 면적"이 아니고,
   같은 줄의 번호(레드)와 색이 맞는다 */
.feature-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--red-soft);
  color: var(--red);
}

/* 요금 항목 이름 앞의 작은 그림. 이름 글자색(ink)은 그대로 두고
   그림에만 레드를 준다 — 위 .fare-label 주석의 이유 그대로다 */
.feature-card .fare-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fare-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--red);
}

.feature-card h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.feature-card p {
  margin: 0;
  color: var(--gray-700);
  line-height: 1.7;
}

.feature-card a {
  color: var(--gray-900);
  font-weight: 700;
  text-decoration: underline;
}

/* 카드 높이가 제각각이라 보조 문구는 아래로 붙여 밑선을 맞춘다 */
.feature-card .feature-more {
  margin-top: auto;
  padding-top: 4px;
  color: var(--gray-500);
  font-size: var(--fs-body);
}

/* 링크가 둘 이상 놓이는 칸의 구분점.
   링크(레드)보다 연하게 둬야 점이 아니라 링크가 먼저 읽힌다 */
.feature-card .feature-more-sep {
  margin: 0 6px;
  color: var(--gray-300);
}

.feature-card-wide {
  grid-column: 1 / -1;
}

.fare-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 40px;
  margin-top: 12px;
}

/* 항목 이름. gray-500 15px 로는 바로 아래 값(17px ink)에 묻혀
   세 칸이 한 덩어리로 읽혔다. 글자를 본문색까지 올려 값과 대비를 만들고,
   칸을 나누는 일은 구분선(gray-300)에 맡긴다.
   여기 레드를 쓰면 안 된다 — 칸 폭만큼 긴 면적이라
   "레드는 CTA·강조에만" 규칙과 One accent 원칙에 걸린다 */
.feature-card .fare-label {
  padding-top: 14px;
  border-top: 1px solid var(--gray-300);
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.feature-card .fare-value {
  margin-top: 10px;
  color: var(--ink);
  font-size: var(--fs-body-lg);
}

.feature-card .fare-value strong {
  font-weight: 800;
}

.feature-card .fare-sub {
  margin-top: 6px;
  color: var(--gray-500);
  font-size: var(--fs-body);
}

/* 카드 안에서는 하단 안내 목록의 기본 여백(44px)이 너무 벌어진다 */
.feature-card .page-notes {
  margin-top: 24px;
}

/* 하위 페이지 공통 */
.page-hero {
  margin-top: calc(-1 * var(--header-height));
  padding: calc(var(--header-height) + 15vh) 0 52px;
  border-bottom: 1px solid var(--gray-200);
  background: var(--bg-gray);
}

.page-hero h1 {
  margin: 0;
  font-size: var(--fs-h1);
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 800;
}

/* ============================================================
   사진을 깐 페이지 타이틀

   <section class="page-hero page-hero-photo"
            style="--page-hero-image: url('./images/....png')">

   이미지는 페이지마다 다르니 인라인 변수로 넘기고,
   그 위를 덮는 어두운 레이어와 글자색만 여기서 정한다.
   헤더가 이 위에 겹쳐 앉으므로 헤더 반전 규칙(위쪽 body:has 선택자)에도
   .page-hero-photo 가 함께 들어가 있다. 클래스 이름을 바꾸면 그쪽도 같이 고칠 것.
   ============================================================ */
.page-hero-photo {
  position: relative;
  /* ::before 의 z-index:-1 이 이 섹션 밖으로 빠지지 않게 가둔다 */
  isolation: isolate;
  /* 아래 와이프가 화면 밖으로 빠져나갈 때 가로 스크롤이 생기지 않게 자른다 */
  overflow: hidden;
  padding-bottom: 74px;
  border-bottom: none;
  background-color: var(--black);
  background-image: var(--page-hero-image);
  background-size: cover;
  background-position: center;
  color: var(--white);
}

/* 사진 위 어두운 레이어.
   글자가 놓이는 왼쪽을 더 진하게 덮어 흰 글씨가 하늘·차체에 묻히지 않게 한다 */
.page-hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.66) 42%,
    rgba(0, 0, 0, 0.4) 100%
  );
}

/* 페이지가 열릴 때 빨간 판이 사진 위를 한 번 훑고 지나간다.
   z-index 1 이라 사진·스크림은 물론 글자까지 잠깐 덮는다.
   글자는 판이 지나간 뒤에 올라오도록 아래에서 등장 지연을 준다. */
.page-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* 꽉 찬 레드로 덮으면 사진이 완전히 사라진다. 비쳐 보이게 둔다 */
  background: var(--red);
  opacity: 0.62;
  transform: translateX(-101%);
  pointer-events: none;
  animation: hero-wipe 0.85s cubic-bezier(0.65, 0, 0.35, 1) 0.05s both;
}

@keyframes hero-wipe {
  0% {
    transform: translateX(-101%);
  }
  /* 화면을 꽉 채운 채 아주 짧게 머문 뒤 오른쪽으로 빠진다 */
  42%,
  56% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(101%);
  }
}

/* 판이 글자 위를 지나가는 동안 제목이 먼저 떠 있으면 어수선하다 */
.page-hero-photo > .container {
  --reveal-delay: 0.6s;
}

@media (prefers-reduced-motion: reduce) {
  .page-hero-photo::after {
    display: none;
  }

  .page-hero-photo > .container {
    --reveal-delay: 0s;
  }
}

.page-hero-photo h1 {
  color: var(--white);
}

.page-hero-photo .breadcrumb {
  color: rgba(255, 255, 255, 0.6);
}

.page-hero-photo .breadcrumb a:hover,
.page-hero-photo .breadcrumb a:focus-visible {
  color: var(--white);
}

.page-hero-photo .page-hero-lead {
  color: rgba(255, 255, 255, 0.78);
}

.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
  color: var(--gray-500);
  font-size: var(--fs-caption);
  font-weight: 600;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--black);
}

.breadcrumb span:last-child {
  color: var(--gray-900);
}

.page-placeholder {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 100px 24px;
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--gray-100);
  text-align: center;
}

.page-placeholder p {
  margin: 0;
  color: var(--gray-700);
  font-size: var(--fs-body);
  line-height: 1.7;
}

.page-placeholder .page-placeholder-title {
  color: var(--black);
  font-size: var(--fs-h4);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.page-placeholder .text-link {
  margin-top: 10px;
}

.section-heading {
  margin-bottom: 44px;
}

.split-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  align-items: end;
  gap: var(--space-8);
}

.split-heading-top {
  align-items: start;
  grid-template-columns: minmax(0, 0.85fr) minmax(360px, 1.15fr);
}

.greeting-copy h3 {
  margin: 36px 0 14px;
  font-size: var(--fs-h4);
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.greeting-copy > p + p {
  margin-top: 16px;
}

.greeting-video {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
  background: #000;
}

.greeting-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.section-heading h2,
.reservation-copy h2,
.about-copy h2,
.cta-inner h2 {
  margin: 0;
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.section-description,
.greeting-copy > p:not(.eyebrow),
.section-heading > p:not(.eyebrow),
.reservation-copy > p:not(.eyebrow),
.about-copy > p:not(.eyebrow),
.cta-inner > div > p:not(.eyebrow) {
  margin: 0;
  color: var(--gray-700);
  font-size: var(--fs-body-lg);
  line-height: 1.65;
  letter-spacing: -0.02em;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.service-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 200px;
  padding: var(--space-5);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
}

.service-text {
  flex: 1 1 auto;
  min-width: 0;
}

.service-card:hover,
.service-card:focus-visible {
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow: var(--shadow-soft);
}

/* ------------------------------------------------------------
   카드 테두리를 도는 빨간 선

   원뿔 그라디언트로 빨간 호(弧) 하나를 만들고, 그 각도를 계속 돌린다.
   마스크로 테두리 두께만 남기기 때문에 모서리 둥근 부분까지
   선이 그대로 따라 돈다. (테두리를 조각내는 방식은 라운드에서 깨진다)

   --trace 를 @property 로 등록해야 각도가 '보간'된다. 그냥 커스텀
   속성이면 브라우저가 문자열로 보고 0deg -> 360deg 를 툭 건너뛴다.
   미지원 브라우저에선 호가 돌지 않고 멈춰 있을 뿐 깨지지는 않는다.
   ------------------------------------------------------------ */
@property --trace {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* ::before 는 가만히 있는 옅은 빨간 테두리(호버 중이라는 표시),
   ::after 는 그 위를 도는 진한 빨간 선. 둘 다 같은 링 마스크를 쓴다 */
.service-card::before,
.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* padding 이 곧 선 두께다. 마스크가 이 안쪽을 파낸다 */
  padding: 3px;
  border-radius: inherit;
  /* content-box(안쪽)와 전체를 겹쳐 빼면 테두리 링만 남는다 */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.service-card::before {
  background: var(--red);
}

/* 머리쪽이 진하고 꼬리로 갈수록 사라지는 호 두 개가 마주 보고 돈다.
   drop-shadow 는 마스크로 잘린 뒤의 모양을 따라가므로 선만 은은하게 번진다 */
.service-card::after {
  background: conic-gradient(
    from var(--trace),
    var(--red) 0deg,
    rgba(229, 43, 56, 0) 70deg,
    rgba(229, 43, 56, 0) 180deg,
    var(--red) 180deg,
    rgba(229, 43, 56, 0) 250deg,
    rgba(229, 43, 56, 0) 360deg
  );
  filter: drop-shadow(0 0 6px rgba(229, 43, 56, 0.55));
}

.service-card:hover::before,
.service-card:focus-visible::before {
  opacity: 0.22;
}

.service-card:hover::after,
.service-card:focus-visible::after {
  opacity: 1;
  animation: card-trace 1.6s linear infinite;
}

@keyframes card-trace {
  to {
    --trace: 360deg;
  }
}

.service-card-featured {
  background: var(--red);
  color: var(--white);
}

.service-card-dark {
  background: var(--black);
  color: var(--white);
}

.service-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.service-number,
.service-tag {
  font-size: var(--fs-tag);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.service-number {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  color: var(--black);
}

.service-card:not(.service-card-featured):not(.service-card-dark) .service-number {
  background: var(--white);
}

.service-tag {
  opacity: 0.54;
}

.service-icon {
  flex: 0 0 auto;
  width: 200px;
  height: 200px;
  color: currentColor;
}

.service-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.service-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-card h3 {
  margin: 0;
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.service-card p {
  margin: 14px 0 0;
  max-width: 440px;
  color: var(--gray-700);
  font-size: var(--fs-body-lg);
  line-height: 1.65;
}

.service-card-featured p,
.service-card-dark p {
  color: rgba(255, 255, 255, 0.72);
}

.reservation-section {
  /* 중복 섹션 숨김: '간편한 온라인 신청' 메시지가 Process(#how) 섹션과 겹쳐 비활성화.
     되살리려면 이 display 선언만 지우면 됨. */
  display: none;
  position: relative;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
}

.reservation-section::before {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  right: -160px;
  top: -220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229, 43, 56, 0.42), rgba(229, 43, 56, 0) 68%);
}

.reservation-layout {
  position: relative;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  align-items: center;
  gap: 90px;
}

.reservation-copy > p {
  margin-top: 30px;
  color: rgba(255, 255, 255, 0.65);
}

.reservation-copy .button {
  margin-top: 42px;
}

.reservation-panel {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--black);
  box-shadow: 0 50px 100px rgba(0, 0, 0, 0.45);
  transform: rotate(2.5deg);
}

.panel-header {
  min-height: 62px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.panel-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--gray-300);
}

.panel-dot:first-child {
  background: var(--red);
}

.route-form {
  padding: 42px;
}

.route-input {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 88px;
  padding: 18px 22px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: #fafafa;
}

.route-input small {
  display: block;
  margin-bottom: 5px;
  color: var(--gray-500);
  font-size: var(--fs-tag);
}

.route-input strong {
  font-size: 17px;
  letter-spacing: -0.025em;
}

.route-badge {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  font-size: var(--fs-tag);
  font-weight: 900;
}

.badge-start {
  background: var(--black);
}

.badge-end {
  background: var(--red);
}

.route-line {
  width: 1px;
  height: 20px;
  margin-left: 43px;
  border-left: 2px dashed var(--gray-300);
}

.vehicle-select {
  margin-top: 26px;
}

.vehicle-select > span {
  display: block;
  margin-bottom: 12px;
  font-size: var(--fs-caption);
  font-weight: 800;
}

.vehicle-chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.vehicle-chips span {
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  color: var(--gray-700);
  font-size: var(--fs-caption);
  font-weight: 800;
}

.vehicle-chips .active {
  border-color: var(--black);
  background: var(--black);
  color: var(--white);
}

.mock-button {
  min-height: 58px;
  margin-top: 28px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius-sm);
  background: var(--red);
  color: var(--white);
  font-weight: 900;
}

.center-heading {
  text-align: center;
}

.center-heading > p:last-child {
  margin-top: 22px;
}

.usecase-section {
  background: var(--bg-gray);
}

.usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.usecase-card {
  min-height: 480px;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--white);
  transition: transform 0.3s ease;
}

/* 이미지: 카드 상단 */
.usecase-image {
  display: block;
  width: auto;
  max-width: 300px;
  margin: 0 auto;
  object-fit: contain;
}

/* 텍스트: 카드 하단으로 고정 */
.usecase-body {
  margin-top: auto;
}

.usecase-index {
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: var(--fs-caption);
  font-weight: 900;
}

.usecase-card h3 {
  margin: 22px auto 0;
  font-size: var(--fs-h3);
  line-height: 1.16;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.usecase-card p {
  margin: 22px 0 0;
  color: var(--gray-700);
  font-size: var(--fs-body);
  line-height: 1.7;
}

.process-section {
  background: var(--white);
}

.process-interactive {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 80px;
}

/* 좌측 콘텐츠 컨테이너 */
.process-content {
  display: flex;
  flex-direction: column;
  gap: 28px;
  flex: 1;
  max-width: 50%;
}

/* 접근성: 라디오는 숨기되 포커스/키보드는 유지 */
.process-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* 진행 표시기 (상단) */
.process-indicators {
  position: relative;
}

.progress-bar {
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gray-200);
  z-index: 0;
  overflow: hidden;
}

.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--red);
  transition: width 0.4s ease;
  width: calc((var(--step, 1) - 1) * 33.33% + 8.33%);
}

#ps-1:checked ~ .process-content .progress-bar::after {
  --step: 1;
}
#ps-2:checked ~ .process-content .progress-bar::after {
  --step: 2;
}
#ps-3:checked ~ .process-content .progress-bar::after {
  --step: 3;
}
#ps-4:checked ~ .process-content .progress-bar::after {
  --step: 4;
}

.indicators-list {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.indicator {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.indicator-dot {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gray-200);
  color: var(--gray-700);
  font-weight: 700;
  font-size: 14px;
  transition: background 0.3s ease, color 0.3s ease;
}

#ps-1:checked ~ .process-content .indicator:nth-child(-n+1) .indicator-dot,
#ps-2:checked ~ .process-content .indicator:nth-child(-n+2) .indicator-dot,
#ps-3:checked ~ .process-content .indicator:nth-child(-n+3) .indicator-dot,
#ps-4:checked ~ .process-content .indicator:nth-child(-n+4) .indicator-dot {
  background: var(--red);
  color: var(--white);
}

/* 단계 아이콘 */
.process-icons {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  text-align: center;
}

.process-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  opacity: 0.4;
  filter: grayscale(1);
  transition: opacity 0.3s ease, filter 0.3s ease;
}

#ps-1:checked ~ .process-content .process-icon[data-step="1"],
#ps-2:checked ~ .process-content .process-icon[data-step="2"],
#ps-3:checked ~ .process-content .process-icon[data-step="3"],
#ps-4:checked ~ .process-content .process-icon[data-step="4"] {
  opacity: 1;
  filter: grayscale(0);
}

/* 단계 설명 */
.process-details {
  position: relative;
  min-height: 140px;
}

.process-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.process-item h3 {
  font-size: var(--fs-h4);
  font-weight: 700;
  margin: 0 0 8px 0;
  color: var(--black);
}

.process-item p {
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: var(--gray-700);
  margin: 0;
}

#ps-1:checked ~ .process-content .process-item[data-step="1"],
#ps-2:checked ~ .process-content .process-item[data-step="2"],
#ps-3:checked ~ .process-content .process-item[data-step="3"],
#ps-4:checked ~ .process-content .process-item[data-step="4"] {
  opacity: 1;
  pointer-events: auto;
}

/* 우측 이미지 영역 */
.process-visual {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--gray-100);
  aspect-ratio: 1 / 1;
  max-width: 400px;
  width: 100%;
}

.process-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.35s ease;
}

#ps-1:checked ~ .process-visual .process-image[data-step="1"],
#ps-2:checked ~ .process-visual .process-image[data-step="2"],
#ps-3:checked ~ .process-visual .process-image[data-step="3"],
#ps-4:checked ~ .process-visual .process-image[data-step="4"] {
  opacity: 1;
}

.about-section {
  overflow: hidden;
  background: var(--bg-gray);
}

.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 90px;
}

.about-copy > p {
  margin-top: 28px;
}

.about-graphic {
  position: relative;
  min-height: 560px;
}

.road {
  position: absolute;
  width: 160px;
  height: 650px;
  left: 50%;
  top: 50%;
  overflow: hidden;
  border-radius: 90px;
  background: var(--black);
  transform-origin: center;
  box-shadow: var(--shadow-soft);
}

.road span {
  position: absolute;
  left: 50%;
  top: 0;
  width: 5px;
  height: 100%;
  transform: translateX(-50%);
  background: repeating-linear-gradient(to bottom, var(--red) 0 26px, transparent 26px 46px);
}

.road-left {
  transform: translate(-170%, -50%) rotate(-34deg);
}

.road-center {
  transform: translate(-50%, -50%) rotate(2deg);
}

.road-right {
  transform: translate(72%, -50%) rotate(34deg);
}

.about-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190px;
  height: 190px;
  display: grid;
  place-items: center;
  border: 12px solid var(--white);
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  box-shadow: var(--shadow-soft);
  font-size: 90px;
  line-height: 1;
  font-weight: 950;
  transform: translate(-50%, -50%);
}

.cta-section {
  padding: 68px 0;
  color: var(--white);
  /* 도트 패턴은 원본 이미지 상단 1/3에만 있어 center top 기준으로 깔고,
     텍스트가 놓이는 가운데는 레드 스크림으로 눌러 가독성을 확보 */
  background-color: var(--red);
  background-image:
    radial-gradient(
      ellipse 62% 74% at 50% 52%,
      rgba(229, 43, 56, 0.94),
      rgba(229, 43, 56, 0.55) 62%,
      rgba(229, 43, 56, 0) 100%
    ),
    url('./images/cta_bg.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center top;
  background-size: auto, 100% auto;
}

/* 텍스트 위 / 버튼 아래로 쌓고 전체 중앙정렬 */
.cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.cta-inner > div {
  max-width: 640px;
  margin: 10px auto 10px;
}

/* .cta-inner h2 {
  font-size: var(--fs-h1);
} */

.cta-inner .eyebrow-light {
  color: rgba(255, 255, 255, 0.88);
}

/* 위쪽 .section-description 묶음 규칙(gray-700)보다 특정도가 높아야 흰색이 먹는다 */
.cta-section .cta-inner > div > p:not(.eyebrow) {
  margin-top: 32px;
  color: var(--white);
}

/* 접수 시간 같은 단서. 본문보다 한 단계 작고 흐리게 둔다 */
.cta-section .cta-inner > div > p.cta-note {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fs-body);
}

.cta-note a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer {
  padding: 34px 0;
  background: var(--black);
  color: var(--white);
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  padding-bottom: var(--space-7);
}

/* 푸터는 검정 배경이라 흰 로고 전용 에셋(449x93) */
.brand-logo-footer {
  display: block;
  width: auto;
  height: 46px;
}

.footer-summary {
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.5);
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 42px;
}

.footer-links div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.footer-links strong {
  margin-bottom: 8px;
  font-size: 14px;
}

.footer-links a,
.footer-links span {
  color: rgba(255, 255, 255, 0.54);
  font-size: 14px;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--white);
}

/* 메일 주소는 띄어쓰기가 없는 한 덩어리라, 좁은 화면에서 푸터가 2열로
   접히면 칸을 넘는다. body 에 걸린 word-break: keep-all 때문에
   저절로 끊기지도 않으므로 이 링크에서만 풀어준다 */
.footer-links .footer-mail {
  overflow-wrap: anywhere;
}

.footer-bottom {
  padding-top: 30px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom p {
  margin: 0;
  color: rgba(255, 255, 255, 0.38);
  font-size: var(--fs-tag);
  line-height: 1.8;
}

/* 푸터 안의 '맨 위로'. 플로팅 버튼과 달리 화면 크기를 안 가린다.
   여기까지 내려온 사람은 PC 든 모바일이든 페이지 끝에 와 있다. */
.footer-to-top {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.footer-to-top svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-to-top:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
}

.footer-to-top:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

.footer-bottom > div {
  display: flex;
  gap: 22px;
  font-size: var(--fs-tag);
}

/* ============================================================
   톤수 탭 + 차량 카드 (중형 화물 / 이후 대형 화물)

   톤수 key 에 따라 달라지는 :checked 규칙은 톤수가 늘 때마다
   손대야 하므로 build.js 가 vehicle-tabs.css 로 생성한다.
   여기에는 key 와 무관한 것만 둔다.
   ============================================================ */

.page-hero-lead {
  max-width: 46em;
  margin: 18px 0 0;
  color: var(--gray-700);
  font-size: var(--fs-body-lg);
  line-height: 1.7;
  letter-spacing: -0.02em;
}

/* 접근성: 라디오는 숨기되 포커스·방향키는 살린다 (process 스텝퍼와 같은 방식) */
.tonnage-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.tonnage-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 44px;
}

.tonnage-tab {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 24px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--gray-700);
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.tonnage-tab:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* 기본은 숨김 — 어떤 패널을 보일지는 vehicle-tabs.css 가 정한다 */
.tonnage-panel {
  display: none;
}

/* ------------------------------------------------------------
   차종 바로가기 (톤수 탭 안의 서브탭)

   거르는 탭이 아니다. 카드는 전부 그대로 보이고, 버튼을 누르면
   그 차 카드로 스크롤해서 잠깐 표시해 준다. 차종이 많은 톤수에서
   원하는 차를 눈으로 찾는 수고를 덜기 위한 것이다.
   ------------------------------------------------------------ */
/* 바로가기로 카드까지 내려간 뒤에도 다른 차종으로 바로 옮겨 갈 수 있어야
   한다. 그래서 헤더 바로 아래에 붙여 둔다.
   줄바꿈을 막고 가로 스크롤로 두는 건 높이를 38px 로 고정하기 위해서다.
   높이가 들쭉날쭉하면 아래 scroll-margin-top 이 매번 어긋난다. */
.vsub-list {
  position: sticky;
  top: var(--header-height);
  z-index: 40;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 8px;
  /* 컨테이너 좌우 여백까지 덮어야 스크롤되는 카드가 옆으로 비쳐 보이지 않는다 */
  margin: 0 -16px 24px;
  padding: 12px 16px;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  scrollbar-width: none;
}

.vsub-list::-webkit-scrollbar {
  display: none;
}

/* 톤수 탭보다 한 단계 작게 — 상위 탭과 위계가 보여야 한다 */
.vsub-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  border: 1px solid var(--gray-300);
  border-radius: 999px;
  background: var(--white);
  color: var(--gray-700);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.vsub-tab:hover,
.vsub-tab:focus-visible {
  border-color: var(--red);
  background: var(--red);
  color: var(--white);
}

/* 고정 헤더 + 붙어 있는 바로가기 줄(12+38+12+1 = 63px) 아래로 카드가
   들어가지 않게 그만큼 자리를 비워 둔다 */
.vehicle-subtabs .vehicle-card {
  scroll-margin-top: calc(var(--header-height) + 63px + 20px);
}

/* 어느 카드로 왔는지 알려 준다. 눌러 둔 동안 계속 표시된다 */
.vehicle-subtabs .vehicle-card:target {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-soft);
}

/* 한 줄에 카드 2장. 카드 안에서 사진과 제원이 좌우로 나란히 선다.
   minmax(0, 1fr) 이라야 긴 제원값이 칸을 밀고 나가지 않는다 */
.vehicle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vehicle-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.vehicle-card:hover {
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow: var(--shadow-soft);
}

/* 사진 칸은 카드 폭의 30% 에서 출발해(basis), 본문이 300px 에서 끊기고 남는
   폭까지 가져간다(grow: 1). 30% 를 고정폭으로 박으면 그 남는 폭이 사진이
   아니라 빈칸으로 남는다. shrink: 0 이라 30% 아래로는 절대 줄지 않는다.
   높이는 본문에 맞춰 늘어나고(align-items: stretch), 사진은 contain 이라
   비율 그대로 칸 가운데에 놓인다 */
.vehicle-card-thumb {
  flex: 1 0 30%;
  align-self: stretch;
  min-height: 200px;
  /* background: var(--gray-100); */
}

.vehicle-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 남는 폭을 글이 다 쓰면 dt~dd 가 지나치게 벌어진다. 300px 에서 끊는다.
   grow: 0 이라 남는 폭은 전부 왼쪽 사진 칸으로 간다 */
.vehicle-card-body {
  display: flex;
  flex: 0 0 300px;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-4);
}

.vehicle-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.vehicle-card-head h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.vehicle-card-alias {
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: var(--fs-caption);
  font-weight: 700;
  white-space: nowrap;
}

/* 카드가 가로로 넓어져 dt~dd 사이가 지나치게 벌어진다.
   폭이 남는 만큼 제원을 2열로 접어 준다 */
.vehicle-spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  column-gap: 28px;
  margin: 0;
}

.vehicle-spec > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--gray-200);
}

.vehicle-spec dt {
  flex: 0 0 auto;
  color: var(--gray-500);
  font-size: 14px;
  font-weight: 600;
}

.vehicle-spec dd {
  margin: 0;
  color: var(--gray-900);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: right;
}

.vehicle-card-note {
  margin: 16px 0 0;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--red-soft);
  color: var(--red);
  font-size: var(--fs-caption);
  font-weight: 700;
  font-size: 14px;
}

.panel-items {
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid var(--gray-200);
}

.panel-items-title {
  margin: 0 0 28px;
  font-size: var(--fs-h4);
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* 페이지 하단 안내 목록. 제원·품목 주의사항을 한 덩어리로 모아 둔다 */
.page-notes {
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
  color: var(--gray-500);
  font-size: var(--fs-caption);
  line-height: 1.75;
}

.page-notes li {
  position: relative;
  padding-left: 15px;
}

.page-notes li + li {
  margin-top: 10px;
}

/* list-style 대신 직접 찍는 점 — 줄바꿈된 둘째 줄이 점 아래로 들어가지 않게 */
.page-notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gray-300);
}

.page-notes a {
  color: var(--gray-900);
  font-weight: 700;
  text-decoration: underline;
}

/* ============================================================
   카카오맵 지도 퍼가기 (오시는 길)

   퍼가기 코드가 뱉는 마크업(.root_daum_roughmap 안쪽)은 우리가 못 고친다.
   로더가 폭·높이를 인라인 style 로 박아 넣기 때문에 !important 로만 눌린다.
   그래서 바깥을 .map-embed 로 한 번 감싸고 여기서 컨테이너 폭에 맞춘다.

   지도를 다시 받아오더라도 이 블록은 그대로 두면 된다.
   바뀌는 건 location.html 의 key·timestamp 뿐이다.
   ============================================================ */
/* 지도(넓게) + 연락처 패널(좁게)을 한 줄에 나란히.
   지도만 덩그러니 두면 주소·번호를 찾으러 스크롤해야 한다.
   패널을 다크로 둔 건 흰 지도 옆에서 정보 덩어리를 분리해 보이게 하려는 것.
   (홈의 .reservation-section 과 같은 --black 처리) */
.location-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
  gap: 24px;
  align-items: stretch;
}

.location-info {
  display: flex;
  flex-direction: column;
  /* 패널 높이는 옆 지도가 정한다. 내용이 그보다 짧으면 위로 쏠려
     아래가 빈 것처럼 보이므로 세로 가운데에 둔다 */
  justify-content: center;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--black);
  color: var(--white);
}

.location-facts {
  margin: 0;
}

.location-facts > div + div {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.location-facts dt {
  color: rgba(255, 255, 255, 0.45);
  font-size: var(--fs-body);
  font-weight: 700;
}

.location-facts dd {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--fs-body-lg);
  line-height: 1.6;
}

/* 다크 위에서는 색만으로 링크를 구분할 수 없다 (a 기본값이 color: inherit) */
.location-facts a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 이 페이지에서 가장 중요한 정보. 크기로만 올린다 —
   다크 위 레드 텍스트는 대비가 모자라 읽기 어렵다 */
.location-facts .location-tel {
  font-size: var(--fs-h4);
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* 번호는 크고 굵어서 밑줄 없이도 눌리는 자리로 읽힌다 */
.location-facts .location-tel a {
  color: var(--white);
  text-decoration: none;
}

/* 메일 주소는 공백 없는 한 덩어리라 좁은 칸에서 넘친다
   (푸터의 .footer-mail 과 같은 이유) */
.location-facts .location-mail {
  overflow-wrap: anywhere;
}

.location-facts .location-sub {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.45);
  font-size: var(--fs-body);
}

@media (max-width: 960px) {
  /* 이 폭부터 지도가 세로로 눌려 길 모양이 안 읽힌다. 위아래로 쌓는다 */
  .location-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.map-embed {
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
}

.map-embed .root_daum_roughmap {
  width: 100% !important;
}

/* 옆 연락처 패널 높이와 맞춘 값. 둘 중 큰 쪽이 줄 높이를 정하므로
   여기를 바꾸면 패널도 같이 늘어난다 (align-items: stretch) */
.map-embed .root_daum_roughmap .wrap_map {
  height: 480px !important;
}

@media (max-width: 720px) {
  .map-embed .root_daum_roughmap .wrap_map {
    height: 300px !important;
  }
}

/* 적재 가능 품목 */
/* 톤수당 품목 4개 — 한 줄에 떨어지게 4열로 둔다.
   개수를 바꾸면 이 열 수도 같이 맞출 것 */
.cargo-item-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cargo-item-card {
  padding: var(--space-5);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.cargo-item-card h4 {
  margin: 0 0 16px;
  font-size: var(--fs-body-lg);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.cargo-item-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cargo-item-card li {
  position: relative;
  padding-left: 14px;
  color: var(--gray-700);
  font-size: var(--fs-body);
  line-height: 1.6;
}

.cargo-item-card li::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gray-300);
}

/* ============================================================
   전체 차량 비교 (vehicles.html)

   중형/대형 화물 페이지가 "한 체급 안에서 고르기"(카드)라면
   여기는 "체급을 가로질러 비교하기"(표)를 맡는다.

   톤수 필터의 :checked 규칙은 build.js 가 vehicle-tabs.css 로 생성한다.
   ============================================================ */

.vfilter-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.vfilter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

/* 표가 넓어 좁은 화면에서는 가로로 민다 */
.compare-scroll {
  overflow-x: auto;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.compare-table caption {
  padding: 20px 24px 0;
  color: var(--gray-500);
  font-size: var(--fs-caption);
  text-align: left;
}

.compare-table thead th {
  position: sticky;
  top: 0;
  padding: 16px 18px;
  border-bottom: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-500);
  font-size: var(--fs-caption);
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.compare-table tbody th,
.compare-table tbody td {
  padding: 16px 18px;
  border-top: 1px solid var(--gray-200);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.compare-table tbody td {
  color: var(--gray-900);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.compare-table tbody tr:hover {
  background: var(--gray-100);
}

/* 비교표 바로 아래에 상세 카드가 이어질 때 (연계배송).
   .feature-grid 는 margin 0 이라 그냥 두면 표에 붙어 한 덩어리로 읽힌다 */
.compare-scroll + .feature-grid {
  margin-top: 56px;
}

/* 차량 이름 칸 — 썸네일 + 이름 + 약칭 */
.compare-car {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 차를 보여주는 게 이 표의 절반이라 썸네일을 크게 잡는다.
   원본이 정사각형이라 contain 기준 높이가 차 크기를 정한다 — 높이를 키운다.
   cover 로 위아래를 잘라내면 더 커 보이지만 리프트처럼 프레임을 꽉 채운
   사진은 바퀴가 잘려서 쓰지 않았다. */
.compare-car img {
  flex: 0 0 auto;
  width: 200px;
  height: 160px;
  padding: 6px;
  border-radius: var(--radius-md);
  background: var(--gray-100);
  object-fit: contain;
}

/* 사진을 아직 못 받은 차. 썸네일과 같은 크기를 잡아 줄을 맞춘다 */
.compare-car-noimg {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 160px;
  border-radius: var(--radius-md);
  background: var(--gray-100);
  color: var(--gray-500);
  font-size: var(--fs-caption);
}

.compare-car-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.compare-car-text strong {
  font-size: var(--fs-body);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.compare-car-alias {
  color: var(--gray-500);
  font-size: var(--fs-caption);
  font-weight: 600;
}

/* 적재부피 — 숫자만으론 6과 7의 차이가 안 와닿아 막대를 같이 둔다 */
.compare-bar {
  position: relative;
  display: block;
  min-width: 96px;
  padding: 6px 0 0;
}

.compare-bar-fill {
  display: block;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--red);
  opacity: 0.85;
}

.compare-bar-text {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-caption);
  font-weight: 700;
}

/* 적재함 형태 설명 — 제원만으론 알 수 없는 부분 */
.bodytype-block {
  margin-top: 96px;
  padding-top: 80px;
  border-top: 1px solid var(--gray-200);
}

.bodytype-heading {
  margin: 0;
  font-size: var(--fs-h1);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.bodytype-lead {
  margin: 16px 0 44px;
  color: var(--gray-700);
  font-size: var(--fs-body-lg);
  line-height: 1.75;
  letter-spacing: -0.02em;
}

.bodytype-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bodytype-card {
  padding: var(--space-5);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.bodytype-card h3 {
  margin: 0 0 12px;
  font-size: var(--fs-h4);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.bodytype-summary {
  margin: 0 0 20px;
  color: var(--gray-700);
  font-size: var(--fs-body);
  line-height: 1.7;
}

.bodytype-good,
.bodytype-caution {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--gray-200);
  color: var(--gray-700);
  font-size: 15px;
  line-height: 1.7;
}

.bodytype-good + .bodytype-caution {
  margin-top: 14px;
}

.bodytype-good span,
.bodytype-caution span {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.bodytype-good span {
  color: var(--red);
}

.bodytype-caution span {
  color: var(--gray-500);
}

@media (max-width: 1180px) {
  .bodytype-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .bodytype-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .vfilter-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -20px 24px;
    padding: 0 20px 4px;
    scrollbar-width: none;
  }

  .vfilter-list::-webkit-scrollbar {
    display: none;
  }

  /* 모바일에선 표를 가로로 밀게 하지 않고 차량별 카드로 쌓는다 */
  .compare-scroll {
    overflow-x: visible;
    border: 0;
    background: none;
  }

  .compare-table,
  .compare-table tbody,
  .compare-table tbody tr,
  .compare-table tbody th,
  .compare-table tbody td {
    display: block;
    width: auto;
  }

  .compare-table thead,
  .compare-table caption {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .compare-table tbody tr {
    margin-bottom: 16px;
    padding: 20px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    background: var(--white);
  }

  .compare-table tbody tr:hover {
    background: var(--white);
  }

  .compare-table tbody th {
    padding: 0 0 16px;
    border-top: 0;
  }

  /* 카드로 쌓이는 모바일에선 사진을 카드 폭 전체로 크게 */
  .compare-car {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .compare-car img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .compare-table tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    white-space: normal;
  }

  /* 헤더를 숨겼으니 각 값 앞에 항목 이름을 붙여 준다 */
  .compare-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--gray-500);
    font-size: var(--fs-caption);
    font-weight: 600;
  }

  .compare-bar {
    min-width: 0;
    width: 55%;
    padding-top: 0;
    text-align: right;
  }

  .compare-bar-text {
    margin-top: 4px;
  }
}

@media (max-width: 1180px) {
  .cargo-item-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 2열로는 사진과 제원을 좌우로 담을 폭이 안 나온다. 한 줄에 한 장으로 */
  .vehicle-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 카드가 화면 폭을 다 쓴다. 사진은 고정폭으로 두고 남는 폭은 글이 가져가
     제원이 여러 열로 펴지게 한다 — 데스크톱과 반대 */
  .vehicle-card-thumb {
    flex: 0 0 240px;
  }

  .vehicle-card-body {
    flex: 1 1 auto;
  }
}

@media (max-width: 720px) {
  .cargo-item-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 좁은 화면에선 좌우로 나란히 두기엔 사진도 제원도 모자란다. 다시 위아래로 */
  .vehicle-card {
    flex-direction: column;
  }

  .vehicle-card-thumb {
    flex-basis: auto;
    aspect-ratio: 1;
    min-height: 0;
  }

  .vehicle-card-body {
    padding: 0 var(--space-4) var(--space-4);
  }

  /* 톤수가 늘어나면 줄바꿈 대신 가로 스크롤.
     음수 마진으로 화면 끝까지 흘리는 방식이라 값이 컨테이너 좌우 여백과
     같아야 한다. .container 가 이 폭에서 (100% - 32px) 이므로 한쪽 16px.
     더 크게 주면 그만큼 페이지 전체가 가로로 넘친다 */
  .tonnage-tablist {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -16px 32px;
    padding: 0 16px 4px;
    scrollbar-width: none;
  }

  .tonnage-tablist::-webkit-scrollbar {
    display: none;
  }

  .tonnage-tab {
    flex: 0 0 auto;
  }
}

@media (max-width: 1180px) {
  /* 특징 카드 4장은 이 폭부터 글자가 끼여 보인다 */
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 대표번호가 들어오면서 좁아진 구간 — 로고/여백을 줄여 nav 줄바꿈을 막는다 */
  .header-inner {
    gap: 24px;
  }

  .brand-logo {
    height: 28px;
  }

  .header-actions {
    gap: 16px;
  }

  .header-tel-number {
    font-size: 19px;
  }

  .hero h1 {
    max-width: 740px;
  }

  .reservation-layout,
  .about-grid {
    gap: 60px;
  }

  .service-icon {
    width: 130px;
    height: 130px;
  }
}

@media (max-width: 960px) {
  :root {
    --header-height: 72px;
  }

  /* 브랜드 | 여백 | 대표번호 | 햄버거 (DOM 순서와 무관하게 열 고정)
     기본 규칙의 padding 과 겹치지 않도록 width 는 건드리지 않는다 */
  .header-inner {
    grid-template-columns: auto 1fr auto auto;
    gap: 12px;
    padding: 0 16px;
  }

  /* 로고 가로비가 7.7:1 이라 모바일에선 높이를 줄여야 번호+햄버거가 들어간다 */
  .brand-logo {
    height: 22px;
  }

  /* grid-row 를 함께 고정하지 않으면 DOM 순서상 뒤인 .header-actions 가
     .menu-button 이 차지한 열보다 앞 열로 갈 수 없어 2행으로 밀려난다 */
  .brand {
    grid-column: 1;
    grid-row: 1;
  }

  .header-actions {
    grid-column: 3;
    grid-row: 1;
  }

  .menu-button {
    grid-column: 4;
    grid-row: 1;
  }

  .header-cta {
    display: none;
  }

  /* 모바일에선 라벨을 접고 레드 버튼으로 — 햄버거와 구분되고 탭 영역도 확보 */
  .header-tel-label {
    display: none;
  }

  .header-tel {
    height: 40px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    background: var(--red);
    color: var(--white);
  }

  .header-tel-number {
    font-size: 16px;
  }

  /* 레드 버튼 위에서는 hover 색 반전을 끈다 */
  .header-tel:hover .header-tel-number,
  .header-tel:focus-visible .header-tel-number {
    color: var(--white);
  }

  .menu-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .menu-button {
    position: relative;
    z-index: 55;
    width: 44px;
    height: 44px;
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 10px;
    cursor: pointer;
  }

  .menu-button span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--black);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  /* 다크 히어로 위에서는 햄버거만 밝게, 펼친 메뉴판(흰 배경)은 기본 색 유지 */
  body:has(.hero-scrim) .site-header:not(.is-scrolled) .menu-button span,
  body:has(.page-hero-photo) .site-header:not(.is-scrolled) .menu-button span {
    background: var(--white);
  }

  body:has(.hero-scrim) .site-header:not(.is-scrolled) .menu-toggle:checked ~ .menu-button span,
  body:has(.page-hero-photo) .site-header:not(.is-scrolled) .menu-toggle:checked ~ .menu-button span {
    background: var(--black);
  }

  body:has(.hero-scrim) .site-header:not(.is-scrolled) .global-nav,
  body:has(.page-hero-photo) .site-header:not(.is-scrolled) .global-nav {
    color: var(--black);
  }

  /* 메뉴판이 떠 있는 동안 뒤 본문이 같이 스크롤되면 어지럽다 */
  body:has(.menu-toggle:checked) {
    overflow: hidden;
    height: 100%;
  }

  /* 메뉴판을 화면 끝까지 채운다. 아래 여백은 홈 인디케이터를 피해서 준다 */
  .global-nav {
    position: fixed;
    inset: var(--header-height) 0 0;
    display: grid;
    /* 데스크톱에서 물려받은 justify-content:center 가 grid 에서는
       트랙을 가운데로 몰아 목록이 글자 폭으로 쪼그라든다. 전폭으로 편다 */
    grid-template-columns: minmax(0, 1fr);
    justify-content: normal;
    gap: 0;
    height: calc(100dvh - var(--header-height));
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    padding: 18px 24px calc(30px + env(safe-area-inset-bottom));
    border-bottom: 1px solid var(--gray-200);
    background: var(--white);
    transform: translateY(-140%);
    transition: transform 0.3s ease;
  }

  .nav-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
  }

  .nav-item {
    position: static;
    width: 100%;
    padding: 16px 0;
    border-bottom: 1px solid var(--gray-200);
  }

  .nav-link {
    display: block;
    padding: 0;
    font-size: 18px;
  }

  .nav-link::after {
    display: none;
  }

  .nav-caret {
    display: none;
  }

  /* 모바일에서는 하위 메뉴를 항상 펼쳐서 노출 */
  .submenu {
    position: static;
    min-width: 0;
    margin-top: 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    gap: 0;
    font-size: 15px;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .submenu a {
    padding: 9px 0 9px 12px;
    border-left: 2px solid var(--gray-200);
    border-radius: 0;
    white-space: normal;
  }

  .submenu a:hover,
  .submenu a:focus-visible {
    background: none;
    border-left-color: var(--red);
    color: var(--black);
  }

  .nav-item:hover > .submenu,
  .nav-item:focus-within > .submenu {
    transform: none;
  }

  .menu-toggle:checked ~ .global-nav {
    transform: translateY(0);
  }

  .menu-toggle:checked + .menu-button span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .menu-toggle:checked + .menu-button span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle:checked + .menu-button span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* 메뉴를 연 상태에서는 최상단이어도 헤더를 흰 배경으로 */
  .site-header:has(.menu-toggle:checked) {
    border-bottom-color: rgba(17, 17, 17, 0.08);
    background: var(--white);
  }

  /* 모바일도 한 화면을 다 쓴다 — 높이는 글 묶음이 아니라 화면이 정한다.
     아래 padding 은 화면이 아주 짧을 때만 쓰이는 최소 여백 */
  .hero-content {
    padding: 48px 0;
  }

  /* 모바일은 텍스트가 전폭이라 스크림을 세로 방향으로 */
  .hero-scrim {
    background:
      linear-gradient(
        180deg,
        rgba(10, 10, 10, 0.9) 0%,
        rgba(10, 10, 10, 0.84) 55%,
        rgba(10, 10, 10, 0.7) 100%
      );
  }

  .split-heading,
  .reservation-layout,
  .about-grid {
    grid-template-columns: 1fr;
  }

  .split-heading {
    gap: 28px;
  }

  .section-description {
    max-width: 650px;
  }

  .reservation-layout {
    gap: var(--space-7);
  }

  .reservation-panel {
    max-width: 680px;
    margin: 0 auto;
    transform: none;
  }

  .usecase-grid {
    grid-template-columns: 1fr;
  }

  .usecase-card {
    min-height: 360px;
  }

  .process-interactive {
    grid-template-columns: 1fr;
    gap: 0;
    flex-direction: column;
  }
  .process-details {
    min-height: 80px;
  }
  
  .process-content{
    max-width: 100%;
    width: 100%;
  }

  .process-visual {
    justify-self: start;
  }

  .about-copy {
    max-width: 700px;
  }

  .about-graphic {
    min-height: 500px;
  }

  .cta-inner {
    gap: 34px;
  }
}

@media (max-width: 720px) {
  .container {
    width: min(calc(100% - 32px), var(--container));
  }

  .section {
    padding: 72px 0;
  }

  .feature-grid,
  .fare-grid {
    grid-template-columns: 1fr;
  }

  /* 모바일은 텍스트가 전폭이라 가로 그라데이션으로는 오른쪽 글자가 사진에 묻힌다.
     메인 히어로(.hero-scrim)와 같이 세로 방향으로 바꾸고 조금 더 진하게 */
  .page-hero-photo::before {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.82) 0%,
      rgba(0, 0, 0, 0.72) 55%,
      rgba(0, 0, 0, 0.6) 100%
    );
  }

  /* 모바일에서는 타이틀 영역 글자를 모두 가운데로 모은다 */
  .page-hero {
    padding: 16vh 2vw 10vh;
  }

  .page-hero > .container {
    text-align: center;
  }

  .page-hero .breadcrumb {
    display: none;
  }

  /* 감추는 건 브레드크럼 한 줄뿐이다. .section-crumb 를 통째로 없애면
     그 안에 든 본문(계산기 등)까지 모바일에서 사라진다 */
  .section-crumb > .container > .breadcrumb {
    display: none;
  }

  /* 브레드크럼이 빠진 만큼 섹션 위 여백을 일반 섹션과 같게 되돌린다 */
  .section.section-crumb {
    padding-top: 72px;
  }

  .page-hero .page-hero-lead {
    margin-inline: auto;
  }

  .brand-name {
    font-size: 17px;
  }

  .brand-mark {
    height: 20px;
  }

  .header-tel {
    height: 38px;
    padding: 0 12px;
  }

  .header-tel-number {
    font-size: 15px;
  }

  .hero-content {
    padding: 40px 0;
  }

  .hero h1 {
    line-height: 1.05;
  }

  .hero-copy {
    display: none;
  }

  .desktop-only {
    display: none;
  }

  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
    margin-top: 34px;
  }

  .button-large {
    min-height: 50px;
    padding: 0 22px;
    font-size: 16px;
  }


  .section-heading {
    margin-bottom: 46px;
  }

  .section-heading h2,
  .reservation-copy h2,
  .about-copy h2,
  .cta-inner h2 {
    font-size: clamp(26px, 7vw, 34px);
  }

  /* 폭이 좁아지면 텍스트가 도트 위로 올라와 스크림을 더 세게 */
  .cta-section {
    background-image:
      radial-gradient(
        ellipse 100% 58% at 50% 44%,
        rgba(229, 43, 56, 0.96),
        rgba(229, 43, 56, 0.7) 68%,
        rgba(229, 43, 56, 0) 100%
      ),
      url('./images/cta_bg.png');
  }

  .section-description,
  .section-heading > p:not(.eyebrow),
  .reservation-copy > p:not(.eyebrow),
  .about-copy > p:not(.eyebrow),
  .cta-inner > div > p:not(.eyebrow) {
    font-size: 16px;
  }

  .service-grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    min-height: 160px;
    gap: 18px;
  }

  .service-icon {
    width: 120px;
    height: 120px;
  }

  .service-card p {
    font-size: 15px;
  }

  .route-form {
    padding: 22px;
  }

  .panel-header {
    padding: 0 18px;
  }

  .route-input {
    padding: 14px;
  }

  .route-input strong {
    font-size: 14px;
  }

  .route-badge {
    width: 38px;
    height: 38px;
  }

  .vehicle-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .usecase-card {
    min-height: 330px;
    padding: 26px;
    border-radius: var(--radius-lg);
  }

  .progress-bar {
    top: 16px;
  }

  .indicator-dot {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .process-icons {
    gap: 12px;
  }

  .process-icon {
    width: 32px;
    height: 32px;
  }

  .process-item h3 {
    font-size: 16px;
  }

  .process-item p {
    font-size: 14px;
  }

  .about-graphic {
    min-height: 400px;
  }

  .road {
    width: 108px;
    height: 470px;
  }

  .about-badge {
    width: 140px;
    height: 140px;
    border-width: 8px;
    font-size: 68px;
  }

  .cta-section {
    padding: 78px 0;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .footer-links {
    /* 좁은 화면에서 3열은 글자가 끼여 보인다. 2열로 접는다 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* 초소형 화면(320px 등)에선 로고·번호를 한 단계 더 줄여 햄버거 자리를 확보 */
@media (max-width: 380px) {
  .header-inner {
    gap: 8px;
    padding: 0 14px;
  }

  .brand-logo {
    height: 17px;
  }

  .header-tel {
    height: 34px;
    padding: 0 9px;
  }

  .header-tel-number {
    font-size: 13px;
  }
}

/* ============================================================
   화물 계산기 (calculator.html)

   계산 엔진은 발주처에서 받은 난독화 스크립트(calculator.js)라 손댈 수 없다.
   그쪽이 innerHTML 로 찍어 내는 클래스 이름이 곧 계약이므로 여기서 그대로 받는다:
     .weight-input                      적재중량 입력칸
     .cbm-card > .v / .l                요약 카드의 값과 이름
     .ok / .ng / .ng-weight / .sk       칸별 적재 결과
     .sub / .extra                      제원·여유분 보조 문구
     .tag-ok / .tag-ng / .tag-ng-weight 행 판정 배지
   .v .l .ok .ng .sk 는 이름이 너무 짧아 다른 페이지와 부딪힌다.
   전부 .calc 안쪽으로만 걸어 새어 나가지 않게 막는다.

   원본은 남색(#1F4E79) 바탕에 상품마다 다른 파스텔 패널이었다.
   여기서는 흰 카드 + gray-200 테두리로 통일하고, 레드는 계산하기 버튼 한 곳에만 둔다
   ("레드는 CTA·강조에만" / One accent). 성공·경고·불가만 의미색을 따로 쓴다.
   ============================================================ */

.calc {
  --calc-ok: #1a8f5f;
  --calc-warn: #a8760a;
  display: grid;
  gap: 24px;
  margin-top: 56px;
}

.calc-panel {
  /* 그리드 아이템의 min-width 기본값은 auto 라, 안에 min-width:620px 짜리 표가
     있으면 패널이 620px 아래로 못 줄어든다. 그러면 .calc-scroll 의 overflow-x 가
     쓸모없어지고 좁은 화면에서 페이지 전체가 가로로 넘친다 */
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.calc-panel-head {
  margin-bottom: 20px;
}

.calc-panel-head h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.calc-panel-head p {
  margin: 6px 0 0;
  color: var(--gray-500);
  font-size: var(--fs-caption);
  line-height: 1.6;
}

/* 차량 적재함 제원 — 표준값으로 충분한 고급 설정이라 접어 둔다.
   <details> 라 JS 없이 열리고 키보드·스크린리더도 그대로 동작한다.
   패딩은 summary 와 body 가 따로 갖는다 (헤더 전체가 클릭 영역이 되도록) */
.calc-advanced {
  padding: 0;
  /* auto 높이로 transition 하기 위한 스위치. 미지원 브라우저에서는
     애니메이션 없이 즉시 열리기만 한다 — 기능은 그대로다 */
  interpolate-size: allow-keywords;
}

.calc-advanced-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  cursor: pointer;
  list-style: none; /* 기본 삼각형 마커 제거 */
}

.calc-advanced-summary::-webkit-details-marker {
  display: none;
}

.calc-advanced-summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--red-soft), 0 0 0 1px var(--red);
}

.calc-advanced-title h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.calc-advanced-title p {
  margin: 6px 0 0;
  color: var(--gray-500);
  font-size: var(--fs-caption);
  line-height: 1.6;
}

.calc-advanced-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-full);
  color: var(--gray-700);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.calc-advanced-summary:hover .calc-advanced-toggle {
  border-color: var(--black);
  color: var(--black);
}

/* 열림·닫힘 상태를 글자로도 알려 준다 — 화살표만으로는 방향이 모호하다 */
.calc-advanced-toggle-text::after {
  content: "제원 수정";
}

.calc-advanced[open] .calc-advanced-toggle-text::after {
  content: "접기";
}

.calc-advanced-chevron {
  transition: transform 0.25s ease;
}

.calc-advanced[open] .calc-advanced-chevron {
  transform: rotate(180deg);
}

.calc-advanced-body {
  padding: 0 var(--space-5) var(--space-5);
}

/* 슬라이드 업·다운. content-visibility 를 allow-discrete 로 같이 넘겨야
   닫히는 동안 내용이 사라지지 않고 끝까지 접힌다 */
.calc-advanced::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.3s ease, content-visibility 0.3s ease allow-discrete;
}

.calc-advanced[open]::details-content {
  block-size: auto;
}

@media (prefers-reduced-motion: reduce) {
  .calc-advanced::details-content,
  .calc-advanced-chevron {
    transition: none;
  }
}

/* 표가 다섯 칸이라 좁은 화면에서는 가로로 민다.
   .compare-scroll 과 달리 테두리는 바깥 .calc-panel 이 이미 갖고 있다 */
.calc-scroll {
  overflow-x: auto;
}

.calc-truck-table,
.calc-result-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 15px;
}

.calc-truck-table thead th,
.calc-result-table thead th {
  padding: 12px 10px;
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-500);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.calc-truck-table thead th:first-child,
.calc-result-table thead th:first-child {
  text-align: left;
}

.calc-truck-table tbody td,
.calc-result-table tbody td {
  padding: 8px 10px;
  border-top: 1px solid var(--gray-200);
  text-align: center;
  vertical-align: middle;
}

/* 차종 이름 칸. 표 안에서 유일하게 왼쪽 맞춤이라 세로 기준선이 생긴다 */
.calc-truck-table tbody td:first-child,
.calc-result-table tbody td:first-child {
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: left;
  white-space: nowrap;
}

.calc-truck-table tbody tr:first-child td,
.calc-result-table tbody tr:first-child td {
  border-top: 0;
}

.calc-result-table tbody tr:hover td {
  background: var(--gray-100);
}

/* 적재함 제원 입력칸 — 고칠 수 있다는 걸 테두리로만 알린다 */
.calc-truck-table input {
  width: 76px;
  padding: 7px 8px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.calc-truck-table input.weight-input {
  width: 88px;
}

.calc-truck-table input:focus-visible,
.calc-product input:focus-visible {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-soft);
}

/* 상품 개수 고르기 — 대부분 한 가지만 보내므로 빈 칸 열 개를 미리 보여 줄 이유가 없다 */
/* 질문과 버튼을 한 줄에 나란히. 자리가 모자라면 버튼 묶음만 아래로 내린다 */
.calc-count {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}

.calc-count-legend {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.calc-count-options {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-full);
  background: var(--gray-100);
}

/* 라디오는 감추되 접근성 트리에는 남긴다 (sr-only 와 같은 방식).
   display:none 을 쓰면 키보드 포커스와 화살표 키 이동이 사라진다 */
.calc-count-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.calc-count-options label {
  padding: 9px 20px;
  border-radius: var(--radius-full);
  color: var(--gray-700);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.calc-count-options label:hover {
  color: var(--black);
}

.calc-count-options input:checked + label {
  background: var(--black);
  color: var(--white);
}

.calc-count-options input:focus-visible + label {
  outline: none;
  box-shadow: 0 0 0 3px var(--red-soft), 0 0 0 1px var(--red);
}

.calc-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  /* 칸이 세 개보다 적어 열이 패널 폭을 다 못 채울 때 왼쪽에 붙지 않게 한다.
     세 칸일 때는 열이 1fr 라 폭을 꽉 채우므로 이 값이 아무 일도 하지 않는다 */
  justify-content: center;
}

/* 고른 개수를 넘는 상품 칸은 감춘다. 칸 수에 맞춰 열 수도 같이 줄여
   한 칸만 남았을 때 옆이 텅 비지 않게 한다 */
.calc-panel:has(#pc1:checked) .calc-product:nth-of-type(n + 2),
.calc-panel:has(#pc2:checked) .calc-product:nth-of-type(n + 3) {
  display: none;
}

.calc-panel:has(#pc1:checked) .calc-products {
  grid-template-columns: minmax(0, 420px);
}

/* 두 칸일 때 1fr 로 늘리면 카드 하나가 한 칸일 때보다 훨씬 넓어져
   입력칸만 길쭉해진다. 같은 420px 로 묶고 가운데에 둔다 */
.calc-panel:has(#pc2:checked) .calc-products {
  grid-template-columns: repeat(2, minmax(0, 420px));
}

/* 결과표에서도 안 쓰는 상품 열을 숨긴다. 엔진이 찍는 tbody 행은
   차종·상품①·상품②·상품③·결과 다섯 칸 고정이라 위치로 집을 수 있다 */
.calc:has(#pc1:checked) .calc-result-table th:nth-child(3),
.calc:has(#pc1:checked) .calc-result-table td:nth-child(3),
.calc:has(#pc1:checked) .calc-result-table th:nth-child(4),
.calc:has(#pc1:checked) .calc-result-table td:nth-child(4),
.calc:has(#pc2:checked) .calc-result-table th:nth-child(4),
.calc:has(#pc2:checked) .calc-result-table td:nth-child(4) {
  display: none;
}

/* 열이 줄면 표도 그만큼 좁아져도 된다 — 좁은 화면에서 가로 스크롤이 덜 생긴다 */
.calc:has(#pc1:checked) .calc-result-table {
  min-width: auto;
}

.calc:has(#pc2:checked) .calc-result-table {
  min-width: auto;
}

.calc-product {
  /* fieldset 은 UA 기본값이 min-inline-size:min-content 라, 그리드 칸이 아무리
     좁아져도 안쪽 내용의 최소 폭 아래로는 절대 안 줄어든다. 320px 화면에서
     칸은 254px 인데 카드가 313px 로 버텨 페이지가 통째로 가로로 넘쳤다.
     min-width 만 0 으로 둬서는 안 먹는다 — 논리 속성 쪽이 더 나중에 적용된다 */
  min-inline-size: 0;
  min-width: 0;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--red);
  border-radius: var(--radius-md);
}

/* legend 는 fieldset 의 padding 상자 바깥, 위 테두리 위에 얹혀 렌더링된다
   (HTML 표준의 "rendered legend"). 카드에 배경과 빨간 테두리를 깔아 둔
   구조라 테두리가 글자 자리만큼 끊겨 흉터처럼 보인다.
   display 를 바꿔도 rendered legend 자격은 그대로다 — float 이나 position 을
   주어야 자격이 풀리고 평범한 블록으로 카드 안쪽에 들어온다.
   float 만 주면 바로 뒤 .calc-field 가 flex 컨테이너(독립 서식 문맥)라
   float 를 피해 폭 0 으로 찌그러지므로, 아래에서 clear 로 한 줄 내려 준다 */
.calc-product legend {
  float: left;
  width: 100%;
  padding: 0;
  /* 첫 .calc-field 의 margin-top 은 clear 로 생긴 여백에 먹혀 0 이 된다.
     제목과 첫 줄 사이 간격은 여기서 준다 (줄 사이 간격과 같은 10px) */
  margin-bottom: 10px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.calc-field {
  /* 위의 float 된 legend 옆에 끼지 않고 아래로 내려오게 한다 */
  clear: both;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.calc-field label {
  flex: 0 0 66px;
  color: var(--gray-700);
  font-size: 13px;
  line-height: 1.3;
}

.calc-field input {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.calc-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.calc-submit {
  flex: 1;
}

.calc-reset {
  flex: 0 0 auto;
  border: 1px solid var(--gray-300);
  background: var(--white);
  color: var(--gray-700);
}

.calc-reset:hover,
.calc-reset:focus-visible {
  border-color: var(--black);
  color: var(--black);
}

/* 계산 전에는 결과를 감춰 둔다. 첫 상태는 CSS 가 정하고, 그 뒤로는
   calculator.js 가 display 를 block/none 으로 직접 바꾼다 —
   그래서 여기에 grid 나 flex 를 쓰면 첫 계산에서 레이아웃이 날아간다 */
.calc-results {
  display: none;
  min-width: 0; /* .calc-panel 과 같은 이유 — 안쪽 결과 표가 패널을 밀어내지 못하게 */
  /* 계산이 끝나면 스크립트가 여기로 scrollIntoView 한다.
     section[id] 규칙이 안 닿는 div 라, 헤더에 가리지 않게 직접 얹는다 */
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.calc-results > * + * {
  margin-top: 24px;
}

.calc-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

/* 엔진은 총 CBM·총 중량·상품①·상품② 넉 장을 늘 찍는다 (상품③ 카드는 아예 안 만든다).
   1가지만 보낼 때는 늘 0.0000 인 상품② 카드가 군더더기라 감춘다 */
.calc:has(#pc1:checked) .calc-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.calc:has(#pc1:checked) .calc-summary .cbm-card:nth-child(4) {
  display: none;
}

.calc-summary .cbm-card {
  /* 그리드 아이템이라 min-width 가 auto 다 — 긴 숫자가 칸을 밀어 넓히지 못하게 막는다 */
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  text-align: center;
}

.calc-summary .cbm-card .v {
  color: var(--ink);
  /* 칸 폭에 맞춰 줄어든다. 자리수가 늘어도 글자가 먼저 작아지고,
     그래도 모자랄 때만 아래 overflow-wrap 이 받아 준다 */
  font-size: clamp(18px, 2vw + 12px, 28px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
  /* 숫자는 띄어쓰기가 없어 기본값으로는 줄바꿈이 안 되고 칸 밖으로 나간다.
     마지막 안전장치 — 아무리 긴 값이 와도 카드 안에 머문다 */
  overflow-wrap: anywhere;
}

/* 단위(㎥ / kg)는 원본이 인라인 style 로 크기·색을 박아 넣는다.
   특정도가 같아선 못 이기니 span 까지 짚어 눌러 준다 */
.calc-summary .cbm-card .v span {
  margin-left: 2px;
  color: var(--gray-500) !important;
  font-size: 13px !important;
  font-weight: 600;
}

.calc-summary .cbm-card .l {
  margin-top: 8px;
  color: var(--gray-500);
  font-size: var(--fs-caption);
}

/* 결과 칸 — 한 칸에 판정 한 줄과 보조 문구가 세로로 쌓인다 */
.calc-result-table .ok,
.calc-result-table .ng,
.calc-result-table .ng-weight,
.calc-result-table .sub,
.calc-result-table .extra {
  display: block;
}

.calc-result-table .ok {
  color: var(--calc-ok);
  font-size: 15px;
  font-weight: 800;
}

.calc-result-table .ng {
  color: var(--red);
  font-size: 15px;
  font-weight: 800;
}

.calc-result-table .ng-weight {
  color: var(--calc-warn);
  font-size: 15px;
  font-weight: 800;
}

.calc-result-table .sk {
  color: var(--gray-300);
}

.calc-result-table .sub,
.calc-result-table .extra {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}

.calc-result-table .sub {
  color: var(--gray-500);
}

.calc-result-table .extra {
  color: var(--gray-700);
}

/* 차종 이름 칸의 제원·중량 보조 문구는 이름과 굵기가 같으면 한 덩어리로 읽힌다 */
.calc-result-table tbody td:first-child .sub {
  font-weight: 500;
}

.calc-result-table .tag-ok,
.calc-result-table .tag-ng,
.calc-result-table .tag-ng-weight {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.calc-result-table .tag-ok {
  background: rgba(26, 143, 95, 0.12);
  color: var(--calc-ok);
}

.calc-result-table .tag-ng {
  background: var(--red-soft);
  color: var(--red-dark);
}

.calc-result-table .tag-ng-weight {
  background: rgba(168, 118, 10, 0.12);
  color: var(--calc-warn);
}

@media (max-width: 960px) {
  .calc-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calc-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .calc {
    margin-top: 40px;
  }

  .calc-panel {
    padding: var(--space-4) var(--space-3);
  }

  /* .calc-advanced 도 .calc-panel 이라 위 규칙에 패딩이 다시 붙는다.
     안쪽 summary·body 가 패딩을 갖는 구조이므로 여기서 다시 0 으로 돌린다 */
  .calc-advanced {
    padding: 0;
  }

  .calc-advanced-summary {
    gap: 12px;
    padding: var(--space-4) var(--space-3);
  }

  .calc-advanced-body {
    padding: 0 var(--space-3) var(--space-4);
  }

  /* 좁은 화면에서도 질문과 버튼이 한 줄에 들어가도록 조금씩 줄인다.
     그래도 모자라면 버튼 묶음만 통째로 다음 줄로 내려간다 (flex-wrap) */
  .calc-count {
    gap: 8px 12px;
  }

  .calc-count-legend {
    font-size: 14px;
  }

  .calc-count-options {
    gap: 4px;
  }

  .calc-count-options label {
    padding: 8px 14px;
    font-size: 13px;
  }

  /* 개수별 규칙은 :has(#id) 라 특정도가 높아 아래 .calc-products 를 이긴다.
     좁은 화면에서는 개수와 상관없이 한 줄에 하나씩 쌓아야 하므로 같이 눌러 준다 */
  .calc-products,
  .calc-panel:has(#pc1:checked) .calc-products,
  .calc-panel:has(#pc2:checked) .calc-products {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 세로로 쌓이면 버튼 두 개가 한 줄에 끼여 글자가 눌린다 */
  .calc-actions {
    flex-direction: column;
  }

  /* 값 글자 크기는 위쪽 clamp() 가 폭에 맞춰 알아서 줄인다.
     여기서 고정값을 다시 박으면 좁은 화면에서 오히려 더 커진다 */
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   맨 위로 (모바일 플로팅 버튼)

   페이지가 길어서(차량 카드가 24종씩 깔린다) 손가락으로 되짚어
   올라가기 번거롭다. 데스크톱은 스크롤바가 있으니 모바일에서만 띄운다.

   기본은 숨김. script.js 가 어느 정도 내려가면 .is-visible 을 붙인다.
   display 가 아니라 opacity/transform 으로 숨기는 건 나타날 때
   올라오는 동작을 주기 위해서다. 숨은 동안엔 클릭도 막는다.
   ============================================================ */
.to-top {
  position: fixed;
  right: 16px;
  /* 아이폰 홈 인디케이터를 피한다 */
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 45;
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--gray-200);
  border-radius: 50%;
  background: var(--white);
  color: var(--black);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.to-top svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.to-top:not(.is-visible) {
  pointer-events: none;
}

.to-top:active {
  background: var(--gray-100);
}

.to-top:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

/* 모바일 메뉴가 열려 있으면 그 위에 떠 있을 이유가 없다 */
body:has(.menu-toggle:checked) .to-top {
  display: none;
}

/* 데스크톱 메뉴가 햄버거로 바뀌는 지점과 같게 잡는다 */
@media (max-width: 960px) {
  .to-top {
    display: inline-flex;
  }
}