/* p03 — 기아 딜러 : L3 우이미지·좌텍스트(L2 거울, 이미지 자리는 넘버 마크) / F3 Poppins+Noto Sans KR / HD3 / HR3(무차량) / CT3 / FT3 */
:root {
  --accent: #5B2A86;
  --accent-text: #5B2A86;
  --bg: #FBF9FE;
  --ink: #221A2B;
  --font-display: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
  --footer-bg: #221331;
  --footer-text: #D6C9E6;
}

/* HD3 : 상단 얇은 안내바 + 아래 메뉴바(2단) */
.hd3-bar { background: var(--accent); color: #fff; font-size: 12.5px; }
.hd3-bar-inner { display: flex; justify-content: space-between; align-items: center; height: 34px; gap: 12px; flex-wrap: wrap; }
.hd3-bar-inner a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.site-header { border-bottom: 1px solid #E7DEF2; }
.hd3-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.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: 22px; list-style: none; margin: 0; padding: 0; }
.site-header nav a { text-decoration: none; font-size: 14px; font-weight: 600; color: var(--ink); }
.site-header nav a:hover { color: var(--accent); }
@media (max-width: 640px) { .site-header nav ul { gap: 12px; flex-wrap: wrap; } }

/* HR3(차량 슬라이드쇼) : 배경은 액센트 그라디언트 위에 차량 사진 크로스페이드, 중앙 텍스트, 프로필 하단중앙 */
.hero.hr3 {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--accent) 0%, #3D1C5C 100%);
  color: #fff; text-align: center; padding-block: clamp(56px, 10vw, 104px);
}
.hero.hr3 .hero-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.hero.hr3 h1 { color: #fff; font-size: clamp(30px, 4.6vw, 48px); text-shadow: 0 2px 12px rgba(0,0,0,.55); }
.hero.hr3 .hero-lede { color: #E7DCF5; max-width: 58ch; font-size: 17px; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.hero.hr3 .hero-visual img {
  width: 152px; height: 152px; border-radius: 50%; object-fit: cover;
  border: 3px solid #fff; margin-top: 6px;
}

/* L3 : 좌 텍스트 · 우 넘버마크(L2 거울), 전 섹션 동일 방향 */
.section--muted { background: #F2ECFA; }
.l3-row { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: start; }
.l3-copy p { color: #453A52; font-size: 15.5px; }
.l3-mark {
  font-family: var(--font-display); font-weight: 700; font-size: 40px; color: var(--accent);
  opacity: .45; line-height: 1; order: -1;
}
@media (min-width: 720px) {
  .l3-row { grid-template-columns: 1fr 96px; gap: 32px; }
  .l3-mark { font-size: 52px; order: 2; text-align: right; }
}

/* CT3 : 좌우분할(좌 문구 / 우 버튼 세로스택 3개) */
.cta.ct3 { background: #F5F0FA; padding-block: clamp(48px, 7vw, 80px); }
.ct3-inner { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: center; }
.ct3-copy h2 { font-size: clamp(20px, 2.6vw, 26px); }
.ct3-copy p { color: #453A52; margin: 0; }
.ct3-buttons { flex-direction: column; align-items: stretch; }
.ct3-buttons .btn { justify-content: center; }
@media (min-width: 720px) { .ct3-inner { grid-template-columns: 1.4fr 1fr; } }

/* L6 : 구매 방식 비교 표 + 차량 사진 갤러리 */
.l6-table-wrap { overflow-x: auto; margin: 22px 0; }
.l6-table { width: 100%; border-collapse: collapse; min-width: 560px; background: #fff; }
.l6-table th, .l6-table td { border: 1px solid #E7DEF2; padding: 12px 14px; text-align: center; font-size: 14.5px; }
.l6-table thead th { background: var(--accent); color: #fff; }
.l6-table tbody th { text-align: left; background: #F5F0FA; }
.l6-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.l6-gallery picture { display: block; aspect-ratio: 4/3; overflow: hidden; border-radius: 10px; }
.l6-gallery picture img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* FT3 : 중앙정렬 1단 세로스택 */
.ft3-stack { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.ft3-stack .footer-links { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.ft3-stack .footer-links p { margin: 0; }
.ft3-stack .footer-disclaimer { max-width: 62ch; }