/* p04 — 카마스터 추천 : L4 세로 타임라인 / F4 Space Grotesk+IBM Plex Sans KR / HD4 / HR4(무차량) / CT4 / FT1 */
:root {
  --accent: #B23A48;
  --accent-text: #8F2E39;
  --bg: #FFF9F7;
  --ink: #26191B;
  --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "IBM Plex Sans KR", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
  --footer-bg: #2A1518;
  --footer-text: #E4C9CC;
}

/* HD4 : 좌 로고타입 + 우 CTA링크 1개, 메뉴는 details/summary 햄버거 */
.site-header { border-bottom: 1px solid #F0DEDE; }
.hd4-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 16px; }
.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: 14px; position: relative; }
.hd4-cta { font-size: 14px; font-weight: 700; color: var(--accent-text); text-decoration: none; }
.hamburger summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 4px; padding: 6px; }
.hamburger summary::-webkit-details-marker { display: none; }
.hamburger summary span { width: 22px; height: 2px; background: var(--ink); display: block; }
.hamburger nav ul { list-style: none; margin: 8px 0 0; padding: 12px; display: flex; flex-direction: column; gap: 10px; position: absolute; right: 0; top: 100%; background: #fff; border: 1px solid #F0DEDE; border-radius: 10px; min-width: 180px; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.hamburger nav a { text-decoration: none; font-size: 14px; font-weight: 600; color: var(--ink); }
.hamburger nav a:hover { color: var(--accent-text); }

/* HR4(차량 슬라이드쇼) : 상단 텍스트 + 하단 배너형 프로필, 1열 붕괴 */
.hero.hr4 { position: relative; overflow: hidden; background: var(--ink); padding-block: clamp(48px, 8vw, 88px); text-align: center; }
.hero.hr4 .hero-copy h1 { font-size: clamp(30px, 4.6vw, 48px); color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.55); }
.hero.hr4 .hero-lede { max-width: 58ch; margin: 0 auto 1.4em; font-size: 17px; color: #F5DEE0; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.hero-banner { margin-top: 32px; position: relative; }
.hero-banner .hero-visual img { width: 176px; height: 176px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; margin: 0 auto; box-shadow: 0 10px 24px rgba(178,58,72,.25); }

/* L4 : 세로 타임라인(좌축 + 우콘텐츠) */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: #EAC7CB; }
.timeline-item { position: relative; padding: 0 0 36px 34px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot { position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid #FCEDEE; }
.timeline-item h3 { font-size: 17px; margin-bottom: 6px; }
.timeline-item p { color: #4A3538; font-size: 15.5px; margin: 0 0 .8em; }

/* CT4 : 인라인 CTA(본문 1회, 3버튼) + 모바일 하단 스티키바(전화 1개) */
.cta-inline { background: #FCEDEE; padding-block: clamp(32px, 5vw, 48px); }
.cta-inline-inner { text-align: center; }
.cta-inline-inner p { font-weight: 700; margin-bottom: 16px; }
.cta-inline .cta-buttons { justify-content: center; }
.sticky-call { display: none; }
@media (max-width: 640px) {
  .sticky-call {
    display: flex; align-items: center; justify-content: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--accent); color: #fff; font-weight: 700; font-size: 15px;
    padding: 14px; text-decoration: none;
  }
  main { padding-bottom: 56px; }
}

/* L4-FLOW : 상담 흐름 아이콘 다이어그램 */
.l4-flow { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 28px 0 4px; }
.l4-flow-step { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink); }
.l4-flow-arrow { color: var(--accent); font-size: 22px; font-weight: 700; }

/* L6 : 차량 사진 갤러리(타임라인 내 삽입) */
.l6-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.l6-gallery picture img { width: 100%; height: auto; border-radius: 10px; display: block; }

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