/* p17 — 기아 사전계약 방법 : L7 지그재그 알터네이팅 / F10 Oswald+IBM Plex Sans KR / HD1 / HR2(무차량) / CT3 / FT2 */
:root {
  --accent: #4C1D95;
  --accent-text: #4C1D95;
  --bg: #F9F6FF;
  --ink: #201333;
  --font-display: "Oswald", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "IBM Plex Sans KR", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
  --footer-bg: #170B29;
  --footer-text: #CFC3E3;
}

/* HD1 : 좌 로고타입 + 우 가로 메뉴 */
.site-header { border-bottom: 1px solid #E7DEFA; }
.hd1-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.logotype { font-family: var(--font-display); font-weight: 600; font-size: 19px; text-decoration: none; color: var(--accent); text-transform: uppercase; letter-spacing: .02em; }
.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; } }

/* HR2 : 차량 사진 슬라이드쇼 배경(.hero-slideshow는 base.css 공통 정의) + 좌 텍스트 + 우 프로필, 1열 붕괴 시 텍스트 우선 */
.hero { position: relative; overflow: hidden; background: var(--ink); padding-block: clamp(44px, 8vw, 88px); }
.hero-inner { display: grid; gap: 32px; align-items: center; }
.hero-copy h1 { font-size: clamp(28px, 4.2vw, 44px); color: #fff; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0,0,0,.55); }
.hero-lede { font-size: 16.5px; color: #EDE7F7; max-width: 52ch; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.hero-visual { justify-self: center; }
.hero-visual img { width: 168px; height: 168px; border-radius: 50%; object-fit: cover; border: 4px solid var(--accent); }
@media (min-width: 760px) {
  .hero-inner { grid-template-columns: 1.3fr 1fr; }
  .hero-visual { justify-self: end; }
}

/* L7 : 지그재그 알터네이팅 (섹션마다 좌우 반전) */
.zigzag-item { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.zigzag-mark { font-family: var(--font-display); font-size: 44px; font-weight: 600; color: #DACBF2; line-height: 1; }
@media (min-width: 760px) {
  .zigzag-item { flex-direction: row; align-items: center; gap: 40px; }
  .zigzag-item--reverse { flex-direction: row-reverse; }
  .zigzag-mark { flex: 0 0 120px; text-align: center; font-size: 64px; }
}
.zigzag-text h2 { font-size: clamp(21px, 2.6vw, 27px); margin-bottom: .6em; }
.zigzag-text p { font-size: 15.5px; color: #3E2E52; }
.section--muted { background: #F1E9FC; }

.qa-list { display: grid; gap: 16px; margin-top: 12px; }
.qa-item h3 { font-size: 16px; margin-bottom: 6px; }
.qa-item p { font-size: 14.5px; color: #3E2E52; margin: 0; }

/* CT3 : 좌우분할(좌 문구 / 우 버튼 세로스택 3개) */
.cta.ct3 { padding-block: clamp(40px, 6vw, 64px); background: #F1E9FC; }
.ct3-split { display: grid; gap: 24px; align-items: center; }
.ct3-copy h2 { font-size: clamp(20px, 2.6vw, 26px); }
.ct3-buttons { display: grid; gap: 12px; }
@media (min-width: 700px) {
  .ct3-split { grid-template-columns: 1.3fr 1fr; }
}

/* FT2 : 2단(좌 사업자정보+고지문 / 우 페이지링크) */
.ft2-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .ft2-grid { grid-template-columns: 1.4fr 1fr; } }
.ft2-left .footer-disclaimer { margin-top: 14px; }
.footer-links p { margin: 0 0 8px; }