/* 김찬호 CAR MASTER — Premium Automotive Sales Design System */
:root{
  --black:#111315; --graphite:#25282B; --warm:#F7F7F5; --white:#FFFFFF;
  --red:#C8102E; --red-dim:#a30d26; --silver:#B7BBC0;
  --ink:#111315; --ink-2:#4A4D51; --ink-3:#797D82; --line:#E4E3E0; --line-dark:#3A3D40;
  --kakao:#FEE500; --kakao-ink:#391B1B;
  --radius:10px; --radius-sm:6px;
  --container:1200px;
  --font:"Pretendard","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",-apple-system,BlinkMacSystemFont,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--warm); color:var(--ink); font-family:var(--font);
  font-size:1rem; line-height:1.75; letter-spacing:-0.01em; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--red); text-decoration:none}
h1,h2,h3{font-weight:800; color:var(--black); letter-spacing:-0.02em; margin:0}
h1{font-size:clamp(2rem,5vw,3.4rem); line-height:1.15}
h2{font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.25; margin-bottom:.5em}
h3{font-size:1.125rem; line-height:1.4}
p{margin:0 0 1em; max-width:64ch}
.container{max-width:var(--container); margin:0 auto; padding:0 24px}
.narrow{max-width:720px; margin:0 auto; padding:0 24px}
.kicker{display:inline-block; font-size:.8rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin-bottom:14px}
.kicker.on-dark{color:var(--silver)}
.num{font-family:var(--font); font-weight:800; font-variant-numeric:tabular-nums}

/* ── Buttons / CTA ───────────────────────── */
.btn{display:inline-flex; align-items:center; gap:8px; justify-content:center; font-weight:700; font-size:.95rem; padding:14px 22px; border-radius:var(--radius-sm); text-decoration:none; border:1px solid transparent; min-height:48px; line-height:1; transition:transform .15s ease, box-shadow .15s ease}
.btn svg{width:18px; height:18px; flex:none}
.btn-primary{background:var(--red); color:#fff}
.btn-primary:hover{background:var(--red-dim)}
.btn-kakao{background:var(--kakao); color:var(--kakao-ink)}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-outline.on-dark{color:#fff; border-color:rgba(255,255,255,.35)}
.btn-text{padding:14px 4px; font-weight:700; color:var(--ink-2); border:none; min-height:auto}
.btn-text.on-dark{color:var(--silver)}
.btn-lg{padding:18px 30px; font-size:1.05rem}
.btn:hover{transform:translateY(-1px)}
.cta-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.cta-row.center{justify-content:center}

/* ── Header ──────────────────────────────── */
.site-header{position:sticky; top:0; z-index:100; height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; background:rgba(247,247,245,.92); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line)}
.site-header .brand{font-weight:800; font-size:1.05rem; letter-spacing:-0.01em; color:var(--black); text-decoration:none}
.site-header .brand b{color:var(--red)}
.site-header nav{display:flex; align-items:center; gap:26px}
.site-header nav a{color:var(--ink-2); font-weight:600; font-size:.92rem; text-decoration:none}
.site-header nav a:hover{color:var(--black)}
.site-header .hdr-cta{margin-left:4px}
.site-header .nav-links{display:flex; gap:22px}
@media(max-width:820px){.site-header .nav-links{display:none}}

/* ── Hero variants ───────────────────────── */
.hero-full{position:relative; overflow:hidden; min-height:min(88vh,760px); display:flex; align-items:flex-end}
.hero-full .hero-media{position:absolute; inset:0}
.hero-full .hero-media img{width:100%; height:100%; object-fit:cover; animation:heroZoom 18s ease-out forwards}
.hero-full .hero-media::after{content:"";position:absolute; inset:0; background:linear-gradient(0deg,rgba(17,19,21,.88) 0%,rgba(17,19,21,.35) 46%,rgba(17,19,21,.05) 70%)}
.hero-full .hero-body{position:relative; z-index:1; color:#fff; padding:64px 24px 56px; width:100%}
.hero-full .hero-body h1{color:#fff; animation:fadeUp .8s ease-out .1s both}
.hero-full .hero-body p{color:rgba(255,255,255,.82); font-size:1.05rem; animation:fadeUp .8s ease-out .22s both}
.hero-full .kicker{animation:fadeUp .8s ease-out 0s both}
.hero-full .cta-row{animation:fadeUp .8s ease-out .34s both}
@keyframes heroZoom{from{transform:scale(1)} to{transform:scale(1.06)}}
@keyframes fadeUp{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)}}

.hero-split{display:grid; grid-template-columns:1.1fr .9fr; min-height:560px; border-bottom:1px solid var(--line)}
.hero-split .hero-media{position:relative; overflow:hidden}
.hero-split .hero-media img{width:100%; height:100%; object-fit:cover; animation:heroZoom 18s ease-out forwards}
.hero-split .hero-copy{display:flex; flex-direction:column; justify-content:center; padding:56px 48px}
.hero-split.reverse .hero-media{order:2}
@media(max-width:860px){.hero-split{grid-template-columns:1fr}.hero-split .hero-media{height:280px; order:0!important}.hero-split .hero-copy{padding:40px 24px}}

.editorial{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.editorial img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius)}
.editorial-list{list-style:none; padding:0; margin:0; counter-reset:ed}
.editorial-list li{counter-increment:ed; padding:18px 0 18px 44px; position:relative; border-bottom:1px solid var(--line); font-weight:700}
.editorial-list li::before{content:counter(ed,decimal-leading-zero); position:absolute; left:0; top:16px; color:var(--red); font-weight:800; font-size:.85rem}
@media(max-width:860px){.editorial{grid-template-columns:1fr}}

.hero-dark{background:var(--black); color:#fff; padding:80px 24px 64px; text-align:center}
.hero-dark h1{color:#fff}
.hero-dark p{color:rgba(255,255,255,.75); margin-left:auto; margin-right:auto}

.hero-compact{padding:52px 24px 40px; border-bottom:1px solid var(--line)}
.hero-compact p{color:var(--ink-2)}

.hero-timeline{background:linear-gradient(180deg,var(--black) 0%,var(--graphite) 100%); color:#fff; padding:64px 24px 40px}
.hero-timeline h1{color:#fff}
.hero-timeline p{color:rgba(255,255,255,.78)}

/* ── Sections ────────────────────────────── */
.section{padding:64px 0}
.section.tight{padding:40px 0}
.section.alt{background:var(--white)}
.section.dark{background:var(--black); color:#fff}
.section.dark h2{color:#fff}
.section.dark p{color:rgba(255,255,255,.72)}
.section-head{max-width:640px; margin:0 0 36px}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center}

/* ── Personal brand ──────────────────────── */
.brand-split{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center}
.brand-split img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--radius)}
.brand-tagline{font-size:clamp(1.3rem,2.6vw,1.9rem); font-weight:800; letter-spacing:-0.02em; margin:.4em 0 .8em; color:var(--black)}
.role-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:32px}
.role-grid .role .num{display:block; font-size:2rem; color:var(--red); margin-bottom:6px}
.role-grid .role h3{margin-bottom:4px}
.role-grid .role p{font-size:.9rem; color:var(--ink-3); margin:0}
@media(max-width:860px){.brand-split{grid-template-columns:1fr; gap:28px}.brand-split img{max-width:280px; margin:0 auto}.role-grid{grid-template-columns:repeat(2,1fr)}}

/* ── Vehicle magazine grid ───────────────── */
.vgrid{display:grid; grid-template-columns:repeat(6,1fr); gap:16px}
.vcard{position:relative; overflow:hidden; border-radius:var(--radius); background:var(--graphite); grid-column:span 3; min-height:260px}
.vcard.dark{background:var(--black)}
.vcard.span-4{grid-column:span 4}
.vcard.span-2{grid-column:span 2}
.vcard.span-3{grid-column:span 3}
.vcard.tall{min-height:420px}
.vcard.short{min-height:200px}
.vcard img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.vcard:hover img{transform:scale(1.045)}
.vcard::after{content:"";position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.15) 55%,rgba(0,0,0,0) 75%)}
.vcard .vcard-body{position:absolute; left:0; right:0; bottom:0; z-index:1; padding:20px; color:#fff}
.vcard .vcard-body .vname{font-weight:800; font-size:1.3rem; letter-spacing:-0.01em; margin-bottom:6px}
.vcard .vcard-body .vtag{font-size:.8rem; color:var(--silver); font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-bottom:8px; display:block}
.vcard .vcard-links{display:flex; gap:14px}
.vcard .vcard-links a{color:#fff; font-size:.85rem; font-weight:700; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.5)}
.vcard .vcard-links a:hover{border-color:#fff}
@media(max-width:900px){.vgrid{grid-template-columns:repeat(2,1fr)}.vcard,.vcard.span-4,.vcard.span-3,.vcard.span-2{grid-column:span 2; min-height:280px}}

/* ── Guide table ─────────────────────────── */
.guide-table{width:100%; border-collapse:collapse; background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:0 1px 0 var(--line)}
.guide-table th,.guide-table td{padding:16px 18px; text-align:left; border-bottom:1px solid var(--line); font-size:.95rem}
.guide-table th{background:var(--black); color:#fff; font-weight:700; font-size:.85rem; letter-spacing:.02em}
.guide-table tr:last-child td{border-bottom:none}
.guide-table td:first-child{font-weight:700; color:var(--ink-2)}
.guide-table td a{font-weight:700}
@media(max-width:640px){.guide-table{font-size:.88rem}.guide-table th,.guide-table td{padding:12px}}

/* ── Why / numbered feature grid ─────────── */
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:8px}
.why-grid .item .num{display:block; font-size:2.4rem; color:var(--silver); margin-bottom:8px}
.why-grid .item h3{margin-bottom:6px}
.why-grid .item p{font-size:.92rem; color:var(--ink-3); margin:0}
.section.dark .why-grid .item p{color:rgba(255,255,255,.62)}
@media(max-width:860px){.why-grid{grid-template-columns:repeat(2,1fr)}}

/* ── Process timeline ────────────────────── */
.timeline{display:flex; gap:0; margin-top:20px}
.timeline .step{flex:1; position:relative; padding:28px 16px 0; text-align:left}
.timeline .step::before{content:"";position:absolute; top:11px; left:0; right:0; height:2px; background:rgba(255,255,255,.18)}
.timeline .step:first-child::before{left:50%}
.timeline .step:last-child::before{right:50%}
.timeline .step .dot{position:absolute; top:2px; left:calc(50% - 10px); width:20px; height:20px; border-radius:50%; background:var(--red); color:#fff; font-size:.7rem; font-weight:800; display:flex; align-items:center; justify-content:center}
.timeline .step h3{font-size:1rem; margin:20px 0 4px; text-align:center}
.timeline .step p{font-size:.85rem; color:rgba(255,255,255,.65); margin:0; text-align:center}
@media(max-width:760px){.timeline{flex-direction:column; gap:22px}.timeline .step::before{left:11px; top:0; bottom:-22px; width:2px; height:auto; right:auto}.timeline .step:first-child::before,.timeline .step:last-child::before{left:11px}.timeline .step .dot{left:0; top:0}.timeline .step h3,.timeline .step p{text-align:left; padding-left:32px}}

/* ── FAQ (native accordion) ──────────────── */
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line); padding:18px 0}
.faq-item summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; font-weight:700; font-size:1.02rem; color:var(--black)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+"; font-size:1.4rem; font-weight:400; color:var(--red); flex:none}
.faq-item[open] summary::after{content:"–"}
.faq-item .faq-a{margin-top:12px; color:var(--ink-2); font-size:.95rem; max-width:70ch}

/* ── Card grid (service hub) ─────────────── */
.card-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:24px}
.card h3{margin-bottom:8px}
.card p{font-size:.9rem; color:var(--ink-3); margin-bottom:10px}
.card .sub-link{font-size:.82rem; font-weight:700}
@media(max-width:900px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.card-grid{grid-template-columns:1fr}}

/* ── Footer ──────────────────────────────── */
.site-footer{background:var(--black); color:rgba(255,255,255,.7); padding:56px 0 100px}
.site-footer .f-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-bottom:32px}
.site-footer .f-brand{color:#fff; font-weight:800; font-size:1.2rem}
.site-footer .f-channels{display:flex; gap:22px; flex-wrap:wrap}
.site-footer .f-channels a{color:rgba(255,255,255,.82); font-weight:700; font-size:.9rem}
.site-footer address{font-style:normal; font-size:.85rem; line-height:1.9; border-top:1px solid rgba(255,255,255,.12); padding-top:22px}
.site-footer .notice{font-size:.82rem; max-width:70ch; color:rgba(255,255,255,.5); margin-top:14px}
.site-footer nav.f-links{margin-top:18px; display:flex; gap:18px; flex-wrap:wrap}
.site-footer nav.f-links a{color:rgba(255,255,255,.6); font-size:.82rem}
@media(max-width:640px){.site-footer .f-top{flex-direction:column}}

/* ── Mobile sticky CTA ───────────────────── */
.mobile-cta{display:none}
@media(max-width:760px){
  .mobile-cta{position:fixed; left:0; right:0; bottom:0; z-index:200; display:grid; grid-template-columns:repeat(3,1fr); background:#fff; border-top:1px solid var(--line); box-shadow:0 -2px 10px rgba(0,0,0,.08)}
  .mobile-cta a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:9px 4px 10px; font-size:.72rem; font-weight:700; color:var(--ink-2); min-height:56px}
  .mobile-cta a svg{width:20px; height:20px}
  .mobile-cta a.mc-kakao{background:var(--kakao); color:var(--kakao-ink)}
  .mobile-cta a.mc-tel{background:var(--red); color:#fff}
  body{padding-bottom:56px}
}

@media(prefers-reduced-motion:reduce){.hero-full .hero-media img,.hero-split .hero-media img,.hero-full .hero-body h1,.hero-full .hero-body p,.hero-full .cta-row,.hero-full .kicker{animation:none}}