/* p61 — 강남 카마스터 추천 : 비용비교+진행흐름+FAQ 복합형 / F3 Poppins+Noto Sans KR / HD1 / HR1(무차량) / CT1 / FT2 */
:root {
  --accent: #0B4F6C;
  --accent-text: #08394E;
  --bg: #F5FAFB;
  --ink: #10262E;
  --font-display: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
  --footer-bg: #08222B;
  --footer-text: #BFD9E0;
}

/* HD1 : 좌 로고타입 + 우 가로 메뉴 */
.site-header { border-bottom: 1px solid #DCE9EC; }
.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-text); }
.site-header nav ul { display: flex; gap: 22px; 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-text); }
@media (max-width: 640px) {
  .site-header nav ul { gap: 12px; flex-wrap: wrap; }
}

/* HR1 : 차량 사진 슬라이드쇼 배경 + 좌 텍스트 / 우 프로필 */
.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(28px, 4.2vw, 44px); color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.55); }
.hero-lede { font-size: 17px; color: #DCEEF2; max-width: 58ch; 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: 210px; height: 210px; }
}

/* 진행 순서 스텝 리스트 */
.steps-list { list-style: none; margin: 24px 0 0; padding: 0; counter-reset: step; display: grid; gap: 16px; }
.steps-list li { position: relative; padding-left: 44px; }
.steps-list li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 700; font-family: var(--font-display);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.steps-list h3 { font-size: 16.5px; margin: 0 0 4px; }
.steps-list p { font-size: 15px; color: #33474E; margin: 0; }

/* FAQ 아코디언 (네이티브 details/summary) */
.faq-item { border: 1px solid #DCE9EC; border-radius: 10px; background: #fff; margin-bottom: 12px; }
.faq-item summary { list-style: none; cursor: pointer; padding: 16px 20px; font-weight: 700; font-size: 15.5px; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; float: right; color: var(--accent-text); font-weight: 700; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { padding: 0 20px 18px; margin: 0; font-size: 14.5px; color: #33474E; }

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

.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; }
}

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