/* p01 — 기아 카마스터 (허브) : L1 3열 카드그리드 / F1 Montserrat+Pretendard / HD1 / HR1(무차량) / CT1 / FT1 */
:root {
  --accent: #0F3D6B;
  --accent-text: #0F3D6B;
  --bg: #FFFFFF;
  --ink: #1A1E23;
  --font-display: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
  --footer-bg: #10151A;
  --footer-text: #C6CCD2;
}

/* HD1 : 좌 로고타입 + 우 가로 메뉴 */
.site-header { border-bottom: 1px solid #E7EAEE; }
.hd1-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.logotype { font-family: var(--font-display); font-weight: 700; font-size: 18px; text-decoration: none; color: var(--accent); }
.site-header nav ul { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.site-header nav a { text-decoration: none; font-size: 14.5px; font-weight: 600; }
.site-header nav a:hover { color: var(--accent); }
@media (max-width: 640px) {
  .site-header nav ul { gap: 14px; flex-wrap: wrap; }
}

/* HR1 : 차량 사진 슬라이드쇼 배경(.hero-slideshow는 base.css 공통 정의) + 좌 텍스트 / 우 프로필 */
.hero { position: relative; overflow: hidden; padding-block: clamp(48px, 9vw, 96px); background: var(--ink); }
.hero-inner { display: grid; gap: 32px; justify-items: center; text-align: center; }
.hero-copy h1 { font-size: clamp(30px, 4.4vw, 46px); color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.55); }
.hero-lede { font-size: 17px; color: #E7EAEE; max-width: 56ch; margin-inline: auto 1.4em; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.hero-visual img { width: 168px; height: 168px; border-radius: 50%; object-fit: cover; border: 3px solid var(--accent); margin: 0 auto; }
@media (min-width: 720px) {
  .hero-inner { grid-template-columns: 1.1fr 0.9fr; justify-items: stretch; text-align: left; align-items: center; }
  .hero-copy { justify-self: start; }
  .hero-visual { justify-self: end; }
  .hero-lede { margin-inline: 0 1.4em; }
  .hero-visual img { width: 220px; height: 220px; }
}

/* L1 : 3열 카드 그리드 */
.section--muted { background: #F6F8FA; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.card {
  background: #fff; border: 1px solid #E7EAEE; border-radius: 12px; padding: 24px;
  position: relative;
}
.card h3 { font-size: 17px; margin-bottom: 8px; }
.card p { font-size: 14.5px; color: #4B5563; margin: 0; }
.card-grid--five .card { padding-top: 40px; }
.step-no {
  position: absolute; top: 16px; left: 20px; font-family: var(--font-display); font-weight: 700;
  color: var(--accent); font-size: 14px;
}

/* 전체 페이지 디렉터리 — 카드형 */
.directory-card-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.directory-card { padding: 0; overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.directory-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.directory-card h3 { font-size: 15.5px; margin: 14px 16px 4px; }
.directory-card-cta { font-size: 13px; color: var(--accent); margin: 0 16px 16px; font-weight: 600; }

/* CT1 : 풀폭 컬러 밴드 + 중앙 버튼 3개 */
.cta.ct1 { background: var(--accent); color: #fff; padding-block: clamp(40px, 6vw, 64px); text-align: center; }
.cta.ct1 h2 { color: #fff; font-size: clamp(20px, 2.6vw, 26px); }
.cta-buttons--center { justify-content: center; }
.ct1 .btn-outline { border-color: #fff; color: #fff; }
.ct1 .btn-solid { background: #fff; color: var(--accent); }

/* FT1 : 3단 그리드 */
.footer-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.2fr 1fr 1.4fr; } }
.footer-links p { margin: 0 0 8px; }