/* =====================================================================
   벤츠 E클래스 구명우 딜러 — 디자인 시스템 v3 (2026-10)
   콘셉트: 자동차 브랜드 매거진 · 프리미엄 쇼룸
   색상: 아이보리 #FAFAF8 · 차콜 #24282D · 메탈릭 실버 #B3B8BE · 라이트그레이 #F1F2F3
   ===================================================================== */
:root{
  --ivory:#FAFAF8; --char:#24282D; --silver:#B3B8BE; --lg:#F1F2F3;
  --mute:#656C73; --soft:#8B9197; --line:#E1E3E5;
  --pad:clamp(20px,4.2vw,64px); --max:1320px; --hd:76px;
  --sans:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI','Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--char);background:var(--ivory);font-size:17px;line-height:1.85;letter-spacing:-.012em;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:300;letter-spacing:-.04em;line-height:1.25}
p{margin:0 0 1.2em}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-999px;top:8px;background:var(--char);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--char);outline-offset:3px}

/* ---------- 공통 요소 ---------- */
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--soft);margin:0 0 18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 34px;background:var(--char);color:#fff;border:1px solid var(--char);font-size:15.5px;font-weight:600;letter-spacing:.01em;text-decoration:none;white-space:nowrap;transition:background .3s,color .3s,border-color .3s}
.btn:hover{background:transparent;color:var(--char)}
.btn-lg{min-height:62px;padding:0 46px;font-size:17px}
.btn-sm{min-height:42px;padding:0 20px;font-size:14px}
.btn-line{background:transparent;color:var(--char)}
.btn-line:hover{background:var(--char);color:#fff}
.btn-light{background:#fff;color:var(--char);border-color:#fff}
.btn-light:hover{background:transparent;color:#fff}
.btn-line-w{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-line-w:hover{background:#fff;color:var(--char)}
.link-ar{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;text-decoration:none;border-bottom:1px solid var(--char);padding:4px 0}
.link-ar::after{content:"\2192";transition:transform .25s}
.link-ar:hover::after{transform:translateX(5px)}
.mini{font-size:14px;color:var(--mute)}
figure{margin:0}
figcaption,.gcap{font-size:13px;color:var(--mute);line-height:1.5}

/* ---------- 헤더 ---------- */
.hd{position:sticky;top:0;z-index:80;background:rgba(250,250,248,.94);backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid var(--line);transition:background .35s,border-color .35s}
.hd-in{display:flex;align-items:center;gap:32px;height:var(--hd)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand img{width:30px;height:30px;border-radius:6px}
.brand b{font-size:18px;font-weight:600;letter-spacing:.24em}
.brand em{display:block;font-style:normal;font-size:11.5px;letter-spacing:.08em;color:var(--soft);margin-top:1px;font-weight:500}
.nav{display:flex;gap:34px;margin-left:auto}
.nav a{position:relative;font-size:14.5px;font-weight:500;letter-spacing:.02em;text-decoration:none;padding:8px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:2px;height:1px;width:0;background:currentColor;transition:width .3s}
.nav a:hover::after{width:100%}
.hd .btn{min-height:42px;padding:0 20px;font-size:13.5px}
.burger{display:none;width:44px;height:44px;border:0;background:none;padding:0;position:relative;cursor:pointer}
.burger span{position:absolute;left:11px;right:11px;height:1.5px;background:currentColor;transition:.25s}
.burger span:first-child{top:18px}.burger span:last-child{top:25px}
.burger[aria-expanded=true] span:first-child{top:21px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:last-child{top:21px;transform:rotate(-45deg)}
/* 홈: 히어로 위에 투명 헤더(스크립트 사용 시), 스크롤하면 단색 */
body.home .hd{position:fixed;left:0;right:0}
.js body.home:not(.scrolled) .hd{background:transparent;border-color:transparent;backdrop-filter:none;color:#fff}
.js body.home:not(.scrolled) .hd .btn{background:transparent;border-color:rgba(255,255,255,.8);color:#fff}
.js body.home:not(.scrolled) .hd .btn:hover{background:#fff;color:var(--char)}
.js body.home:not(.scrolled) .brand em{color:rgba(255,255,255,.75)}

/* ---------- 홈 히어로: 전체 너비 실차 사진 ---------- */
.hero{position:relative;height:clamp(560px,min(84vh,56.25vw),900px);background:var(--char);color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 48%}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(36,40,45,.55) 0%,rgba(36,40,45,0) 24%),
  linear-gradient(0deg,rgba(36,40,45,.78) 0%,rgba(36,40,45,.28) 36%,rgba(36,40,45,0) 60%);pointer-events:none}
.hero-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;padding-bottom:clamp(36px,6vh,72px)}
.hero-copy .in{margin-right:auto;max-width:500px}
.hero .eyebrow{color:rgba(255,255,255,.78);margin-bottom:14px}
.hero h1{font-size:clamp(42px,5vw,74px);font-weight:200;letter-spacing:-.05em;line-height:1.04;margin:0 0 .3em}
.hero .lead{font-size:clamp(16px,1.35vw,19px);line-height:1.65;color:rgba(255,255,255,.9);margin:0 0 1.6em;max-width:430px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-cap{position:absolute;right:var(--pad);bottom:clamp(20px,3vh,32px);z-index:2;font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.7)}

/* ---------- 섹션 공통 ---------- */
.sec{padding:clamp(80px,10vw,150px) 0}
.sec-gray{background:var(--lg)}
.sec-head{display:grid;grid-template-columns:5fr 7fr;column-gap:clamp(28px,6vw,96px);align-items:end;margin-bottom:clamp(40px,5.5vw,76px)}
.sec-head h2{font-size:clamp(32px,3.9vw,56px);font-weight:200;letter-spacing:-.05em;line-height:1.14}
.sec-head p{margin:0;max-width:520px;color:var(--mute)}
.sec-head .eyebrow{grid-column:1 / -1}

/* 홈 · 핵심 소개 */
.intro{display:grid;grid-template-columns:6fr 6fr;column-gap:clamp(32px,7vw,120px);align-items:start}
.intro h2{font-size:clamp(30px,3.6vw,52px);font-weight:200;letter-spacing:-.05em;line-height:1.2}
.intro p{color:var(--mute);max-width:520px}
.intro dl{margin:34px 0 0;border-top:1px solid var(--char)}
.intro dl div{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.intro dt{font-size:12.5px;letter-spacing:.14em;color:var(--soft);font-weight:600;padding-top:3px}
.intro dd{margin:0;font-weight:500}

/* 홈 · 서비스 6 이미지 카드 */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,5vw,72px) clamp(20px,2.6vw,40px)}
.svc-card a{display:block;text-decoration:none}
.svc-img{display:block;position:relative;overflow:hidden;background:var(--lg);aspect-ratio:4/3}
.svc-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.svc-card a:hover .svc-img img{transform:scale(1.06)}
.svc-no{position:absolute;left:18px;top:14px;z-index:2;font-size:12px;letter-spacing:.3em;font-weight:600;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.svc-card strong{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:22px;font-size:clamp(20px,1.7vw,24px);font-weight:500;letter-spacing:-.03em}
.svc-card strong::after{content:"\2192";font-weight:300;transition:transform .3s}
.svc-card a:hover strong::after{transform:translateX(6px)}
.svc-d{display:block;margin-top:8px;color:var(--mute);font-size:15px;line-height:1.7}

/* 홈 · 비교 */
.cmp-foot{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;margin-top:40px}

/* 홈 · 갤러리 모자이크(8장) */
.gallery{display:grid;gap:clamp(10px,1.4vw,20px)}
.gallery a{display:block;overflow:hidden;background:var(--lg);cursor:zoom-in}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.gallery a:hover img{transform:scale(1.05)}
.gcap{display:block;margin-top:10px}
.mosaic8{grid-template-columns:repeat(4,minmax(0,1fr))}
.mosaic8 li{display:flex;flex-direction:column;min-width:0}
.mosaic8 a{aspect-ratio:3/4}
.mosaic8 .g1{grid-column:span 2;grid-row:span 2}
.mosaic8 .g1 a{aspect-ratio:auto;flex:1;min-height:0}
.mosaic8 .g-note{justify-content:flex-end}
.mosaic8 .g-note p{font-size:14.5px;color:var(--mute);margin:0;padding:0 0 4px;max-width:260px}

/* 홈 · 딜러 소개 */
.dealer{display:grid;grid-template-columns:5fr 7fr;column-gap:clamp(36px,7vw,120px);align-items:center}
.dealer-img{position:relative}
.dealer-img img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 10%}
.dealer-img::after{content:"";position:absolute;right:-18px;bottom:-18px;width:55%;height:55%;border:1px solid var(--silver);z-index:-1}
.dealer h2{font-size:clamp(30px,3.6vw,52px);font-weight:200;letter-spacing:-.05em;margin-bottom:.6em}
.dealer p{color:var(--mute);max-width:560px}
.dealer ul{margin:26px 0 34px;border-top:1px solid var(--char)}
.dealer li{padding:15px 0;border-bottom:1px solid var(--line);font-weight:500}
.dealer-cta{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}

/* 홈·서브 · 절차 */
.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.flow li{position:relative;padding:34px 24px 0 0}
.flow li::before{content:"";position:absolute;left:0;top:0;right:0;height:1px;background:var(--silver)}
.flow li::after{content:"";position:absolute;left:0;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--char)}
.flow .no{display:block;font-size:clamp(38px,3.8vw,58px);font-weight:200;letter-spacing:-.05em;line-height:1;color:var(--silver);margin-bottom:22px}
.flow strong{display:block;font-size:17.5px;font-weight:600;margin-bottom:8px;letter-spacing:-.02em}
.flow p{margin:0;font-size:14.5px;color:var(--mute);line-height:1.7}

/* FAQ */
.faq{padding:clamp(80px,10vw,150px) 0;background:var(--lg)}
.faq-grid{display:grid;grid-template-columns:4fr 8fr;column-gap:clamp(32px,6vw,100px);align-items:start}
.faq-h{position:sticky;top:calc(var(--hd) + 32px)}
.faq-h h2{font-size:clamp(30px,3.4vw,48px);font-weight:200;letter-spacing:-.05em}
details{border-top:1px solid #CDD0D3}
details:last-child{border-bottom:1px solid #CDD0D3}
summary{list-style:none;cursor:pointer;padding:26px 56px 26px 0;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-7px;background:linear-gradient(var(--char),var(--char)) center/14px 1.5px no-repeat,linear-gradient(var(--char),var(--char)) center/1.5px 14px no-repeat;transition:transform .3s}
details[open] summary::after{transform:rotate(45deg)}
summary h3{display:inline;font-size:clamp(17px,1.5vw,20px);font-weight:500;letter-spacing:-.025em;line-height:1.5}
details p{margin:0 0 28px;max-width:640px;color:var(--mute)}

/* 최종 CTA */
.cta{padding:clamp(88px,11vw,160px) 0;background:var(--ivory);border-top:1px solid var(--line)}
.cta-in{display:grid;grid-template-columns:7fr 5fr;column-gap:clamp(32px,6vw,100px);align-items:end}
.cta h2{font-size:clamp(34px,4.8vw,72px);font-weight:200;letter-spacing:-.055em;line-height:1.08}
.cta-r p{color:var(--mute);margin-bottom:1.8em;max-width:380px}

/* ---------- 푸터 ---------- */
.ft{background:var(--lg);padding:clamp(56px,7vw,100px) 0 36px;font-size:14px;color:var(--mute)}
.ft-top{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,5vw,80px);padding-bottom:clamp(32px,4vw,56px);border-bottom:1px solid #D5D8DB}
.ft-brand b{display:block;font-size:20px;font-weight:600;letter-spacing:.24em;color:var(--char);margin-bottom:14px}
.ft-brand p{margin:0;max-width:380px;line-height:1.8}
.ft-nav{display:flex;flex-wrap:wrap;gap:12px 36px;align-content:flex-start;justify-content:flex-end}
.ft-nav a{color:var(--char);text-decoration:none;font-size:14.5px;font-weight:500}
.ft-nav a:hover{text-decoration:underline}
.ft-info{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 28px;margin:36px 0 0}
.ft-info dt{font-size:11.5px;letter-spacing:.12em;color:var(--soft);font-weight:600;margin-bottom:3px}
.ft-info dd{margin:0;color:var(--char);line-height:1.6}
.ft-info .w2{grid-column:span 2}
.ft-copy{margin:40px 0 0;font-size:12.5px;color:var(--soft)}

/* ---------- 서브페이지 히어로 ---------- */
.crumb ol{display:flex;flex-wrap:wrap;gap:4px 0;font-size:13px;color:var(--soft)}
.crumb li+li::before{content:"/";margin:0 10px;color:var(--silver)}
.crumb a{text-decoration:none}.crumb a:hover{color:var(--char);text-decoration:underline}
.crumb [aria-current]{color:var(--char)}
.pg-hero{padding:clamp(34px,4.5vw,64px) 0 clamp(44px,6vw,88px)}
.pg-hero .crumb{margin-bottom:clamp(40px,6vw,88px)}
.pg-hero-in{display:grid;grid-template-columns:8fr 4fr;column-gap:clamp(28px,5vw,80px);align-items:end}
.pg-hero h1{font-size:clamp(34px,4.9vw,70px);font-weight:200;letter-spacing:-.055em;line-height:1.1;margin-bottom:.45em;overflow-wrap:anywhere}
.pg-hero .lead{font-size:clamp(17px,1.45vw,20px);line-height:1.8;color:var(--mute);max-width:640px;margin:0}
.pg-hero .side{font-size:13px;letter-spacing:.16em;color:var(--soft);text-align:right;line-height:1.9}
.pg-hero .side b{display:block;font-size:clamp(56px,7vw,104px);font-weight:200;letter-spacing:-.06em;color:var(--silver);line-height:1}
.theme-alt .pg-hero{background:var(--lg)}

/* 상단 실차 4장: 전체 너비 띠 */
.band4 ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
.band4 figure{position:relative;overflow:hidden;background:var(--lg)}
.band4 img{width:100%;aspect-ratio:3/4;object-fit:cover}
.band4 figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 18px 14px;color:#fff;font-size:12.5px;letter-spacing:.02em;background:linear-gradient(0deg,rgba(36,40,45,.7),rgba(36,40,45,0))}
.photo-note{max-width:var(--max);margin:22px auto 0;padding:0 var(--pad);font-size:14px;color:var(--mute)}
.photo-note span{display:block;max-width:760px;border-left:2px solid var(--silver);padding-left:16px}

/* 핵심 정보 띠 */
.facts-band{padding:clamp(36px,5vw,64px) 0 0}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--char)}
.facts div{padding:22px 24px 22px 0;border-bottom:1px solid var(--line)}
.facts dt{font-size:11.5px;letter-spacing:.16em;color:var(--soft);font-weight:600;margin-bottom:6px}
.facts dd{margin:0;font-weight:500;line-height:1.55}

/* 본문 섹션: 좌측 번호+제목 / 우측 본문 */
.blk{padding:clamp(48px,6.5vw,96px) 0}
.blk-g{display:grid;grid-template-columns:4fr 7fr;column-gap:clamp(28px,6vw,96px);align-items:start}
.blk-h{position:sticky;top:calc(var(--hd) + 28px)}
.blk-h .idx{display:block;font-size:12px;letter-spacing:.3em;font-weight:600;color:var(--soft);margin-bottom:16px}
.blk-h h2{font-size:clamp(25px,2.6vw,38px);font-weight:300;letter-spacing:-.045em;line-height:1.25}
.blk-b p{font-size:17.5px;line-height:1.95;color:#30353b}
.blk-b p:last-child{margin-bottom:0}
.blk-full .blk-h{position:static;margin-bottom:clamp(28px,3.6vw,48px)}
.blk-h-row{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap}
.blk-h-row .idx{margin:0}
.lay-top .blk-g{grid-template-columns:1fr;max-width:860px}
.lay-top .blk-h{position:static;margin-bottom:24px}
.lay-top .blk-g{margin-left:auto;margin-right:auto}
.check li{position:relative;padding:15px 0 15px 40px;border-bottom:1px solid var(--line);font-size:17px}
.check li:first-child{border-top:1px solid var(--char)}
.check li::before{content:"";position:absolute;left:4px;top:20px;width:14px;height:14px;border:1.5px solid var(--char)}
.check li::after{content:"";position:absolute;left:9px;top:21px;width:4px;height:8px;border:solid var(--char);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.tick li{position:relative;padding:0 0 10px 28px}
.tick li::before{content:"";position:absolute;left:2px;top:.85em;width:12px;height:1px;background:var(--char)}
.mid-cta{padding:0 0 clamp(8px,2vw,24px)}

/* 상세 갤러리(4장 지그재그) */
.mosaic4{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,28px);row-gap:clamp(20px,2.6vw,36px)}
.mosaic4 li{min-width:0}
.mosaic4 a{aspect-ratio:4/3}
.mosaic4 .g1{grid-column:span 7}.mosaic4 .g2{grid-column:span 5}
.mosaic4 .g3{grid-column:span 5}.mosaic4 .g4{grid-column:span 7}
.lay-top .mosaic4 .g1,.lay-top .mosaic4 .g2,.lay-top .mosaic4 .g3,.lay-top .mosaic4 .g4{grid-column:span 6}

/* 딜러 소개 띠 / 관련 글 */
.dealer-band{background:var(--lg);padding:clamp(56px,7vw,104px) 0}
.dealer-band-in{display:grid;grid-template-columns:3fr 8fr;column-gap:clamp(28px,6vw,96px);align-items:center}
.dealer-band img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 8%}
.dealer-band h2{font-size:clamp(26px,2.8vw,40px);font-weight:200;letter-spacing:-.045em;margin-bottom:.6em}
.dealer-band p{color:var(--mute);max-width:600px}
.rel{padding:clamp(56px,7vw,100px) 0 clamp(24px,3vw,40px)}
.rel h2{font-size:clamp(26px,2.8vw,40px);font-weight:200;letter-spacing:-.045em;margin-bottom:clamp(24px,3vw,40px)}
.rel-row{display:grid;grid-template-columns:64px 1fr 32px;align-items:center;padding:24px 0;border-top:1px solid var(--line);text-decoration:none;transition:padding .3s}
.rel-row:hover{padding-left:12px}
.rel li:last-child .rel-row{border-bottom:1px solid var(--line)}
.rel-no{font-size:12px;letter-spacing:.2em;color:var(--soft);font-weight:600}
.rel-t{font-size:clamp(18px,1.7vw,24px);font-weight:400;letter-spacing:-.03em}
.rel-ar{font-weight:300;font-size:20px;transition:transform .3s}
.rel-row:hover .rel-ar{transform:translateX(6px)}

/* ---------- 서비스 허브 / 목록 ---------- */
.svc-big{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(44px,5vw,80px) clamp(24px,3vw,48px)}
.svc-big>li>a.cover{display:block;text-decoration:none}
.svc-big .svc-img{aspect-ratio:3/2}
.svc-big h2{font-size:clamp(24px,2.4vw,34px);font-weight:300;letter-spacing:-.045em;margin:24px 0 8px}
.svc-big p{color:var(--mute);max-width:520px}
.svc-big .count{font-size:13px;color:var(--soft);letter-spacing:.06em}
.svc-big ul.sub{margin-top:14px;border-top:1px solid var(--line)}
.svc-big ul.sub li a{display:block;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;text-decoration:none}
.svc-big ul.sub li a:hover{padding-left:8px;transition:padding .25s}
.sub-h{font-size:12.5px;letter-spacing:.14em;color:var(--soft);font-weight:600;margin:22px 0 4px}

/* 모델 카드 / 체크리스트 묶음 */
.mcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,40px)}
.mcard img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:22px}
.mcard h3{font-size:24px;font-weight:400;letter-spacing:-.04em;margin-bottom:4px}
.mcard-s{color:var(--mute);margin:0 0 14px}
.chk-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.chk-groups h3{font-size:19px;font-weight:500;margin-bottom:14px}
.chk-groups .check li{font-size:15.5px}

/* ---------- 상담 ---------- */
.contact-top{border-bottom:1px solid var(--line);padding:18px 0}
.contact-in{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-in .btn{min-height:60px;font-size:17px}
.copy-panel{margin-top:14px;padding:18px 20px;background:var(--lg);font-size:15px}
.copy-panel p{margin:0 0 8px}.copy-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:0!important}
.copy-row strong{font-size:22px;letter-spacing:.02em}
.svc-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--char)}
.svc-list a{display:block;padding:26px 28px 26px 0;border-bottom:1px solid var(--line);text-decoration:none}
.svc-list strong{display:block;font-size:18px;font-weight:500;margin-bottom:6px}
.svc-list span{color:var(--mute);font-size:14.5px;line-height:1.7}
.svc-list a:hover strong{text-decoration:underline}
.ways li{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:22px 0;border-top:1px solid var(--line)}
.ways li:last-child{border-bottom:1px solid var(--line)}
.ways strong{font-weight:600}.ways span{color:var(--mute)}
.fig-wrap{margin-top:30px}.fig{max-width:560px}.fig img{width:100%;aspect-ratio:1/1;object-fit:cover}
.show-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:28px}
.show-photos img{width:100%;aspect-ratio:4/5;object-fit:cover}
.show-photos.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
.gu-in{display:grid;grid-template-columns:minmax(120px,220px) 1fr;gap:clamp(20px,3vw,40px);align-items:center}
.gu-thumb img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 8%}

/* 영상 */
.videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.vbtn{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:var(--lg);cursor:pointer;overflow:hidden}
.vbtn img,.vbtn iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.play{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:rgba(250,250,248,.94)}
.play::after{content:"";position:absolute;left:29px;top:22px;border-left:19px solid var(--char);border-top:14px solid transparent;border-bottom:14px solid transparent}
.video-note{margin-top:22px;max-width:760px}

/* ---------- 공통 반응형 표(.rt): 열 수에 따라 PC 표 ↔ 카드 자동 전환 ---------- */
.rt{overflow:visible}
table{width:100%;border-collapse:collapse;font-size:15.5px}
caption{text-align:left;font-size:13px;color:var(--soft);padding:0 0 12px;caption-side:top}
th,td{padding:20px 22px 20px 0;text-align:left;vertical-align:top;line-height:1.65;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
thead th{font-size:12px;letter-spacing:.14em;font-weight:600;color:var(--soft);border-top:1px solid var(--char);border-bottom:1px solid #CDD0D3;padding-top:16px;padding-bottom:16px}
tbody th{font-size:17px;font-weight:600;color:var(--char);width:20%}
.rt.kv thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.rt.kv tbody th{width:26%}

/* ---------- 확대 보기 ---------- */
.lb{position:fixed;inset:0;z-index:300;background:rgba(250,250,248,.97);display:flex;align-items:center;justify-content:center;padding:56px 16px 16px}
.lb[hidden]{display:none}
.lb figure{max-width:min(92vw,900px);max-height:100%;display:flex;flex-direction:column;align-items:center}
.lb img{max-width:100%;max-height:calc(100vh - 150px);width:auto;height:auto;object-fit:contain}
.lb figcaption{margin-top:14px;font-size:15px;color:var(--char);text-align:center}
.lb button{position:absolute;width:48px;height:48px;border:1px solid var(--char);background:var(--ivory);color:var(--char);font-size:22px;line-height:1;cursor:pointer;border-radius:50%}
.lb button:hover{background:var(--char);color:#fff}
.lb .lb-x{top:14px;right:14px}.lb .lb-p{left:14px;top:50%}.lb .lb-n{right:14px;top:50%}

/* =====================================================================
   반응형 — 표 카드 전환(열 수별 기준 폭)
   ===================================================================== */
@media (max-width:1100px){
  .rt[data-cols="6"] table,.rt[data-cols="6"] tbody,.rt[data-cols="6"] tr,.rt[data-cols="6"] th,.rt[data-cols="6"] td,
  .rt[data-cols="7"] table,.rt[data-cols="7"] tbody,.rt[data-cols="7"] tr,.rt[data-cols="7"] th,.rt[data-cols="7"] td{display:block;width:auto}
  .rt[data-cols="6"] thead,.rt[data-cols="7"] thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .rt[data-cols="6"] tbody,.rt[data-cols="7"] tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .rt[data-cols="6"] tr,.rt[data-cols="7"] tr{background:#fff;padding:6px 22px 16px}
  .rt[data-cols="6"] tbody th,.rt[data-cols="7"] tbody th{font-size:19px;font-weight:600;border-bottom:1px solid var(--char);padding:18px 0 12px;margin-bottom:6px;width:auto}
  .rt[data-cols="6"] td,.rt[data-cols="7"] td{border:0;padding:10px 0 2px;font-size:15.5px}
  .rt[data-cols="6"] td::before,.rt[data-cols="7"] td::before{content:attr(data-label);display:block;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--soft);margin-bottom:2px}
}
@media (max-width:1000px){
  .rt[data-cols="5"] table,.rt[data-cols="5"] tbody,.rt[data-cols="5"] tr,.rt[data-cols="5"] th,.rt[data-cols="5"] td{display:block;width:auto}
  .rt[data-cols="5"] thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .rt[data-cols="5"] tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .rt[data-cols="5"] tr{background:#fff;padding:6px 22px 16px}
  .rt[data-cols="5"] tbody th{font-size:19px;font-weight:600;border-bottom:1px solid var(--char);padding:18px 0 12px;margin-bottom:6px;width:auto}
  .rt[data-cols="5"] td{border:0;padding:10px 0 2px;font-size:15.5px}
  .rt[data-cols="5"] td::before{content:attr(data-label);display:block;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--soft);margin-bottom:2px}
}
@media (max-width:820px){
  .rt[data-cols="4"] table,.rt[data-cols="4"] tbody,.rt[data-cols="4"] tr,.rt[data-cols="4"] th,.rt[data-cols="4"] td{display:block;width:auto}
  .rt[data-cols="4"] thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .rt[data-cols="4"] tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .rt[data-cols="4"] tr{background:#fff;padding:6px 22px 16px}
  .rt[data-cols="4"] tbody th{font-size:19px;font-weight:600;border-bottom:1px solid var(--char);padding:18px 0 12px;margin-bottom:6px;width:auto}
  .rt[data-cols="4"] td{border:0;padding:10px 0 2px;font-size:15.5px}
  .rt[data-cols="4"] td::before{content:attr(data-label);display:block;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--soft);margin-bottom:2px}
}
@media (max-width:640px){
  .rt[data-cols="2"] table,.rt[data-cols="2"] tbody,.rt[data-cols="2"] tr,.rt[data-cols="2"] th,.rt[data-cols="2"] td,
  .rt[data-cols="3"] table,.rt[data-cols="3"] tbody,.rt[data-cols="3"] tr,.rt[data-cols="3"] th,.rt[data-cols="3"] td{display:block;width:auto}
  .rt[data-cols="2"] thead,.rt[data-cols="3"] thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .rt[data-cols="2"] tbody,.rt[data-cols="3"] tbody{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
  .rt[data-cols="2"] tr,.rt[data-cols="3"] tr{background:#fff;padding:4px 20px 14px}
  .rt[data-cols="2"] tbody th,.rt[data-cols="3"] tbody th{font-size:18px;font-weight:600;border-bottom:1px solid var(--char);padding:16px 0 10px;margin-bottom:4px;width:auto}
  .rt[data-cols="2"] td,.rt[data-cols="3"] td{border:0;padding:9px 0 2px;font-size:15.5px}
  .rt[data-cols="2"] td::before,.rt[data-cols="3"] td::before{content:attr(data-label);display:block;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--soft);margin-bottom:2px}
  .rt tbody{grid-template-columns:minmax(0,1fr)!important;gap:14px!important}
  .rt.kv[data-cols] tr{padding:2px 18px 8px}
  .rt.kv[data-cols] tbody th{font-size:13px;font-weight:600;color:var(--soft);border:0;padding:12px 0 0;margin:0}
  .rt.kv[data-cols] td{padding:2px 0 8px;font-size:16px;font-weight:600}
  .rt.kv[data-cols] td::before{content:none}
}
.sec-gray .rt tr{background:#fff}

@media (max-width:1000px){
  .sec-head,.intro,.dealer,.faq-grid,.cta-in,.ft-top,.blk-g,.dealer-band-in,.pg-hero-in{grid-template-columns:minmax(0,1fr)}
  .sec-head p{margin-top:18px}
  .faq-h,.blk-h{position:static;margin-bottom:22px}
  .pg-hero .side{display:none}
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px;column-gap:20px}
  .mcards,.chk-groups,.svc-list{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft-nav{justify-content:flex-start}
  .ft-info{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dealer-img{max-width:440px}
  .dealer-band-in{row-gap:24px}.dealer-band img{max-width:260px}
  .cta-r{margin-top:24px}
  .svc-big{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  :root{--hd:64px}
  .burger{display:block;margin-left:0}
  .hd-in{gap:10px}
  .hd .btn{margin-left:auto}
  .nav{display:none;position:fixed;left:0;right:0;top:var(--hd);bottom:0;background:var(--ivory);flex-direction:column;gap:0;padding:12px var(--pad) 40px;margin:0;overflow:auto;color:var(--char)}
  .nav.open{display:flex}
  .nav a{font-size:22px;font-weight:300;letter-spacing:-.03em;padding:20px 0;border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  body.home .hd{position:sticky}
  .js body.home:not(.scrolled) .hd{background:rgba(250,250,248,.94);border-color:var(--line);backdrop-filter:saturate(1.3) blur(10px);color:var(--char)}
  .js body.home:not(.scrolled) .hd .btn{background:var(--char);border-color:var(--char);color:#fff}
  .js body.home:not(.scrolled) .brand em{color:var(--soft)}
}
@media (max-width:760px){
  body{font-size:16.5px}
  /* 모바일 히어로: 차량 전체가 보이는 별도 세로 구도 + 하단 텍스트 */
  .hero{height:auto;background:var(--ivory);color:var(--char)}
  .hero-media{position:relative;inset:auto}
  .hero-media img{aspect-ratio:4/5;object-position:50% 50%}
  .hero::after{display:none}
  .hero-copy{position:static;padding:30px 0 52px}
  .hero-copy .in{max-width:none;margin:0}
  .hero .eyebrow{color:var(--soft)}
  .hero h1{font-size:clamp(36px,11vw,48px);color:var(--char)}
  .hero .lead{color:var(--mute);max-width:none}
  .hero-cap{display:none}
  .hero .btn-light{background:var(--char);color:#fff;border-color:var(--char)}
  .hero .btn-line-w{color:var(--char);border-color:var(--char)}
  .hero-cta .btn{width:100%}
  .sec{padding:76px 0}
  .intro dl div{grid-template-columns:1fr;gap:4px}
  .svc-grid{grid-template-columns:minmax(0,1fr);gap:44px}
  .mosaic8{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mosaic8 .g1{grid-column:span 2;grid-row:auto}
  .mosaic8 .g1 a{aspect-ratio:4/3}
  .mosaic8 .g-note{grid-column:span 2}
  .band4 ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mosaic4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mosaic4 .g1,.mosaic4 .g2,.mosaic4 .g3,.mosaic4 .g4,.lay-top .mosaic4 .g1,.lay-top .mosaic4 .g2,.lay-top .mosaic4 .g3,.lay-top .mosaic4 .g4{grid-column:span 1}
  .mosaic4 a{aspect-ratio:1/1}
  .flow{grid-template-columns:minmax(0,1fr);row-gap:0}
  .flow li{padding:22px 0 24px 64px;border-bottom:1px solid var(--line)}
  .flow li::before,.flow li::after{display:none}
  .flow .no{position:absolute;left:0;top:22px;font-size:34px;margin:0}
  .facts{grid-template-columns:minmax(0,1fr)}
  .ft-info{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft-info .w2{grid-column:span 2}
  .videos{grid-template-columns:minmax(0,1fr)}
  .contact-in{grid-template-columns:minmax(0,1fr)}
  .ways li{grid-template-columns:minmax(0,1fr);gap:2px}
  .gu-in{grid-template-columns:96px 1fr;gap:16px}
  .btn{white-space:normal;text-align:center}
  .cta .btn{width:100%}
  .dealer-cta .btn{width:100%}
  .rel-row{grid-template-columns:44px 1fr 24px;padding:20px 0}
  .lb .lb-p,.lb .lb-n{top:auto;bottom:16px}.lb .lb-p{left:calc(50% - 60px)}.lb .lb-n{right:calc(50% - 60px)}.lb img{max-height:calc(100vh - 210px)}
  .hd .btn{padding:0 12px;font-size:12.5px;min-height:38px;white-space:nowrap}
  .brand b{font-size:15px;letter-spacing:.14em}.brand em{display:none}
}
@media (max-width:360px){.brand b{display:none}.hd .btn{padding:0 8px;font-size:11.5px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.cov{object-fit:cover}
/* 카드 전환 구간에서 표 캡션이 좁게 말리지 않도록 */
@media (max-width:1100px){.rt caption{display:block;width:100%}}

/* =====================================================================
   2026-10-15: 푸터 압축 · 관련 안내 글 썸네일 · 메인 딜러 섹션
   ===================================================================== */
/* 푸터: 정보 누락 없이 높이 약 30% 축소 (PC 3열 / 모바일 짧은 세로) */
.ft{padding:36px 0 30px;font-size:14px;line-height:1.7}
.ft-grid{display:grid;grid-template-columns:4fr 6fr 2.4fr;column-gap:clamp(28px,4vw,64px);align-items:start}
.ft-brand b{font-size:17px;margin-bottom:8px}
.ft-brand p{font-size:14px;line-height:1.7;max-width:340px}
.ft-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;margin:0}
.ft-info dt{font-size:12px;margin-bottom:1px}
.ft-info dd{font-size:14px}
.ft-info .w2{grid-column:span 2}
.ft-nav{display:flex;flex-direction:column;gap:6px;align-items:flex-start;justify-content:flex-start}
.ft-nav a{font-size:14px}
.ft-top,.ft-copy{display:none}
@media (max-width:1000px){
  .ft-grid{grid-template-columns:minmax(0,1fr);row-gap:20px}
  .ft-nav{flex-direction:row;flex-wrap:wrap;gap:6px 22px}
}
@media (max-width:640px){
  .ft{padding:28px 0 24px}
  .ft-info{gap:10px 18px}
  .ft-info dd{font-size:14px}
  .ft-info .w2{grid-column:span 2}
}

/* 관련 안내 글: 썸네일 + 번호·제목·설명 (행 전체 클릭) */
.rel-row{grid-template-columns:120px 1fr 32px;gap:clamp(16px,2vw,28px);padding:18px 0}
.rel-row.no-th{grid-template-columns:1fr 32px}
.rel-row:hover{padding-left:0}
.rel-th{display:block;width:120px;aspect-ratio:1/1;overflow:hidden;background:var(--lg)}
.rel-th img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.rel-row:hover .rel-th img{transform:scale(1.07)}
.rel-tx{display:block;min-width:0}
.rel-no{display:block;margin-bottom:4px}
.rel-t{display:block;line-height:1.35}
.rel-d{display:block;margin-top:6px;font-size:14.5px;line-height:1.6;color:var(--mute);overflow-wrap:anywhere}
@media (max-width:640px){
  .rel-row{grid-template-columns:76px 1fr 20px;gap:14px;padding:16px 0;align-items:start}
  .rel-row.no-th{grid-template-columns:1fr 20px}
  .rel-th{width:76px}
  .rel-t{font-size:17px}
  .rel-d{font-size:13.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .rel-ar{align-self:center}
}

/* 메인 딜러 섹션(통합): 사실 정보 목록 */
.d-facts{margin:28px 0 34px;border-top:1px solid var(--char)}
.d-facts div{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}
.d-facts dt{font-size:12.5px;letter-spacing:.14em;color:var(--soft);font-weight:600;padding-top:2px}
.d-facts dd{margin:0;font-weight:500}
.dealer-tx h2{margin-bottom:.6em}
@media (max-width:760px){.d-facts div{grid-template-columns:1fr;gap:3px}}

/* 푸터 높이 미세 조정: 목표 25~35% 축소, 필수 정보 글자 크기 유지 */
.ft{padding:58px 0 50px;font-size:14.5px}
.ft-brand b{font-size:18px;margin-bottom:12px}
.ft-brand p{font-size:14.5px}
.ft-info{gap:20px 32px}
.ft-info dt{font-size:12.5px;margin-bottom:3px}
.ft-info dd{font-size:15px}
.ft-nav{gap:10px}
.ft-nav a{font-size:15px}
@media (max-width:1000px){.ft-grid{row-gap:28px}.ft-nav{gap:10px 24px}}
@media (max-width:640px){
  .ft{padding:42px 0 38px}
  .ft-grid{row-gap:26px}
  .ft-info{gap:18px 20px}
}
@media (min-width:1001px){.ft{padding:70px 0 58px}}

/* 상담 페이지: 히어로 아래 4장(1:1) + 본문 2장 구성 */
.band4.sq img{aspect-ratio:1/1}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:640px;margin-top:30px}
.pair figure{min-width:0}
.pair img{width:100%;aspect-ratio:1/1;object-fit:cover}
.pair figcaption{margin-top:10px}
@media (max-width:640px){.pair{gap:12px}}

/* 관련 글 아래: 속한 서비스·서비스 전체 안내 연결 */
.rel-hub{margin:26px 0 0;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;font-size:14.5px;color:var(--mute)}
.rel-hub .link-ar{font-size:14.5px}