/* p28 — 스포티지 카마스터 : L8 좌사이드바 목차+우본문 / F4 Space Grotesk+IBM Plex Sans KR / HD4 / HR3(차량배경) / CT7 / FT1 */
:root {
  --accent: #A16207;
  --accent-text: #7C4A05;
  --bg: #FDFAF1;
  --ink: #2B2210;
  --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "IBM Plex Sans KR", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
  --footer-bg: #241A08;
  --footer-text: #E7D9BC;
}

/* HD4 : 좌 로고타입 + 우 CTA 1개(메뉴는 details 기반 햄버거) */
.site-header { border-bottom: 1px solid #F0E5CC; background: var(--bg); }
.hd4-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 14px; }
.logotype { font-family: var(--font-display); font-weight: 700; font-size: 18px; text-decoration: none; color: var(--accent-text); }
.hd4-right { display: flex; align-items: center; gap: 12px; position: relative; }
.btn-sm { padding: 9px 16px; font-size: 13.5px; }
.hd4-menu summary { list-style: none; cursor: pointer; font-weight: 700; font-size: 14px; padding: 8px 10px; border: 1px solid var(--accent); border-radius: 6px; color: var(--accent-text); }
.hd4-menu summary::-webkit-details-marker { display: none; }
.hd4-menu nav { position: absolute; right: 0; top: 46px; background: #fff; border: 1px solid #F0E5CC; border-radius: 10px; padding: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.08); min-width: 180px; z-index: 20; }
.hd4-menu nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hd4-menu nav a { text-decoration: none; font-size: 14px; font-weight: 600; color: var(--ink); }
.hd4-menu nav a:hover { color: var(--accent-text); }

/* HR3 : 차량이미지 배경 + 어두운 오버레이 + 중앙텍스트, 프로필 하단중앙 */
.hero.hr3 { position: relative; overflow: hidden; padding-block: clamp(64px, 14vw, 140px); }
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-slideshow.hero-bg img { animation-duration: 35s; }
.hero-slideshow.hero-bg img:nth-child(1) { animation-delay: 0s; }
.hero-slideshow.hero-bg img:nth-child(2) { animation-delay: 7s; }
.hero-slideshow.hero-bg img:nth-child(3) { animation-delay: 14s; }
.hero-slideshow.hero-bg img:nth-child(4) { animation-delay: 21s; }
.hero-slideshow.hero-bg img:nth-child(5) { animation-delay: 28s; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,14,2,.55), rgba(20,14,2,.78)); z-index: -1; }
.hero-inner { text-align: center; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.hero-copy, .hero-inner h1 { color: #fff; }
.hero-inner h1 { font-size: clamp(30px, 4.6vw, 48px); }
.hero-lede { font-size: 17px; max-width: 58ch; color: #F3E9D4; }
.hero-profile { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; margin-top: 6px; }

/* L8 : 좌 사이드바 목차 + 우 본문 */
.l8-layout { padding-block: clamp(40px, 7vw, 76px); }
.l8-wrap { display: flex; flex-direction: column; gap: 28px; }
.l8-toc { border: 1px solid #F0E5CC; border-radius: 10px; padding: 14px 18px; align-self: flex-start; background: #fff; }
.l8-toc summary { cursor: pointer; font-weight: 700; color: var(--accent-text); }
.l8-toc nav ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.l8-toc nav a { text-decoration: none; font-size: 14px; color: var(--ink); }
.l8-toc nav a:hover { color: var(--accent-text); }
.l8-main { display: flex; flex-direction: column; gap: clamp(32px, 5vw, 56px); }
.l8-main h2 { font-size: clamp(21px, 2.8vw, 27px); }
.l8-main p { color: #4A3E24; font-size: 15px; }
@media (min-width: 820px) {
  .l8-wrap { flex-direction: row; align-items: flex-start; }
  .l8-toc { position: sticky; top: 20px; flex: 0 0 220px; }
  .l8-main { flex: 1; }
}

.plain-list { margin: 0 0 1em; padding-left: 1.3em; }
.plain-list li { margin-bottom: .6em; color: #4A3E24; }

.l8-table-wrap { overflow-x: auto; margin-top: 16px; }
.l8-table { width: 100%; border-collapse: collapse; min-width: 460px; background: #fff; }
.l8-table th, .l8-table td { border: 1px solid #F0E5CC; padding: 11px 13px; text-align: center; font-size: 14px; }
.l8-table thead th { background: var(--accent); color: #fff; }
.l8-table tbody th { text-align: left; background: #FBF4E4; }
.l8-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 16px; }
.l8-gallery picture img { border-radius: 8px; }

/* CT7 : 아웃라인 보더박스 + 버튼 3개, 배경 투명 */
.cta.ct7 { padding-block: clamp(40px, 6vw, 64px); }
.ct7-box { border: 2px solid var(--accent); border-radius: 10px; padding: clamp(28px, 5vw, 48px); text-align: center; }
.ct7-box h2 { font-size: clamp(20px, 2.6vw, 26px); color: var(--ink); }
.cta-buttons--center { justify-content: center; }

/* 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; }