/* KoreaGenie 리뉴얼 — 홈(메인) 페이지 전용 스타일 [P2-1]
 * 확정 시안: docs/design/option-07-md3-tonal.html (Material You Tonal)
 * 공통 chrome(appbar/footer/navbar-m/btn/chip/state/wrap 등)은 md3-components.css 사용.
 * 이 파일에는 시안 본문(히어로/서비스 카드/특징/CTA)만 추출한다.
 */

/* ---------- Hero ---------- */
.hero{background:var(--md-surface-container-lowest);color:var(--md-on-surface);border-bottom:1px solid var(--md-outline-variant);padding:64px 0 72px;margin-bottom:56px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.hero h1{font-size:3.1rem;line-height:1.08;font-weight:700;letter-spacing:-.5px;margin-bottom:16px}
.hero p{font-size:1.15rem;max-width:46ch;margin-bottom:28px;color:var(--md-on-surface-variant)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-media{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3}
.hero-media img{width:100%;height:100%}

/* ---------- Section head ---------- */
.section-head{text-align:center;max-width:620px;margin:0 auto 36px}
.section-head h2{font-size:2.1rem;font-weight:700;letter-spacing:-.3px;margin-bottom:10px}
.section-head p{color:var(--md-on-surface-variant);font-size:1.05rem}

/* ---------- Service filled cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:64px}
.card-grid::-webkit-scrollbar{display:none}
.svc-card{background:var(--md-surface-container-lowest);border:1px solid var(--md-outline-variant);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;color:var(--md-on-surface);transition:border-color .15s ease,box-shadow .15s ease}
.svc-card:hover{border-color:var(--md-primary);box-shadow:var(--elev-1)}
.svc-card .thumb{aspect-ratio:16/10;overflow:hidden}
.svc-card .thumb img{width:100%;height:100%;transition:transform .3s ease}
.svc-card:hover .thumb img{transform:scale(1.04)}
.svc-body{padding:20px 20px 22px}
.svc-icon{width:40px;height:40px;border-radius:var(--r-sm);background:var(--md-primary);color:var(--md-on-primary);display:flex;align-items:center;justify-content:center;margin:-40px 0 14px;position:relative;border:3px solid var(--md-surface-container-lowest)}
.svc-body h3{font-size:1.2rem;font-weight:500;margin-bottom:6px}
.svc-body p{color:var(--md-on-surface-variant);font-size:.92rem;margin-bottom:16px}

/* ---------- Features ---------- */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:80px}
.feat{padding:24px 0;border-top:2px solid var(--md-outline-variant)}
.feat .material-symbols-rounded{font-size:32px;color:var(--md-tertiary);margin-bottom:12px}
.feat h3{font-size:1.15rem;font-weight:500;margin-bottom:8px}
.feat p{color:var(--md-on-surface-variant);font-size:.92rem}

/* ---------- CTA band ---------- */
.cta-band{background:var(--md-primary);color:var(--md-on-primary);border-radius:var(--r-md);padding:48px;text-align:center;margin-bottom:64px}
.cta-band h2{font-size:2rem;font-weight:700;margin-bottom:10px}
.cta-band p{color:var(--md-on-primary);opacity:.82;margin-bottom:24px}
.cta-band .btn-filled{background:#FFFFFF;color:var(--md-primary)}
.cta-band .hero-actions{justify-content:center}

/* ---------- Responsive (시안 기준: ≤900 / ≤640) ---------- */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .hero h1{font-size:2.3rem}
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .features{grid-template-columns:1fr}
}
@media(max-width:640px){
  .hero{padding:40px 0 48px}
  .hero h1{font-size:1.9rem}
  .card-grid{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
  .card-grid .svc-card{flex:0 0 78vw;scroll-snap-align:start}
  .cta-band{padding:32px 20px}
}