:root{
  /* light — monochrome */
  --ground:#eceef0; --surface:#ffffff; --surface-2:#f4f5f6;
  --ink:#0d0e10; --ink-2:#54565c; --ink-3:#8a8d93;
  --line:#dbdde1; --line-2:#e7e9ec;
  --accent:#141518; --accent-strong:#000000; --accent-ink:#ffffff;
  --accent-soft:rgba(20,21,24,.06); --accent-line:rgba(20,21,24,.22);
  --silver:#b9bcc2; --sheen:linear-gradient(135deg,#f6f7f8,#e6e8ea 46%,#fbfbfc);
  --shadow:0 1px 2px rgba(13,14,16,.04), 0 18px 44px -18px rgba(13,14,16,.22);
  --grid:rgba(13,14,16,.045);
  --nav-bg:rgba(236,238,240,.74);
  --sans:'Pretendard','Pretendard Variable','Malgun Gothic','Apple SD Gothic Neo','Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono','SF Mono','Consolas','Menlo',ui-monospace,monospace;
  --radius:16px; --radius-lg:22px;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#0a0a0b; --surface:#141416; --surface-2:#1b1c1f;
    --ink:#f3f3f4; --ink-2:#b4b5bb; --ink-3:#8f9096;
    --line:#28292d; --line-2:#1f2023;
    --accent:#eaeaec; --accent-strong:#ffffff; --accent-ink:#0a0a0b;
    --accent-soft:rgba(255,255,255,.07); --accent-line:rgba(255,255,255,.24);
    --silver:#43444a; --sheen:linear-gradient(135deg,#26272b,#17181b 46%,#2b2c31);
    --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 26px 60px -28px rgba(0,0,0,.85);
    --grid:rgba(255,255,255,.035);
    --nav-bg:rgba(10,10,11,.66);
  }
}
:root[data-theme="light"]{
  --ground:#eceef0; --surface:#ffffff; --surface-2:#f4f5f6;
  --ink:#0d0e10; --ink-2:#54565c; --ink-3:#8a8d93;
  --line:#dbdde1; --line-2:#e7e9ec;
  --accent:#141518; --accent-strong:#000000; --accent-ink:#ffffff;
  --accent-soft:rgba(20,21,24,.06); --accent-line:rgba(20,21,24,.22);
  --silver:#b9bcc2; --sheen:linear-gradient(135deg,#f6f7f8,#e6e8ea 46%,#fbfbfc);
  --shadow:0 1px 2px rgba(13,14,16,.04), 0 18px 44px -18px rgba(13,14,16,.22);
  --grid:rgba(13,14,16,.045);
  --nav-bg:rgba(236,238,240,.74);
}
:root[data-theme="dark"]{
  --ground:#0a0a0b; --surface:#141416; --surface-2:#1b1c1f;
  --ink:#f3f3f4; --ink-2:#b4b5bb; --ink-3:#8f9096;
  --line:#28292d; --line-2:#1f2023;
  --accent:#eaeaec; --accent-strong:#ffffff; --accent-ink:#0a0a0b;
  --accent-soft:rgba(255,255,255,.07); --accent-line:rgba(255,255,255,.24);
  --silver:#43444a; --sheen:linear-gradient(135deg,#26272b,#17181b 46%,#2b2c31);
  --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 26px 60px -28px rgba(0,0,0,.85);
  --grid:rgba(255,255,255,.035);
  --nav-bg:rgba(10,10,11,.66);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; max-width:100%}
.wrap{width:100%; max-width:1200px; margin:0 auto; padding:0 clamp(18px,4vw,26px)}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; text-wrap:balance; letter-spacing:-.02em; font-weight:700}
p{margin:0}
img{max-width:100%}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:6px}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-2); font-weight:600}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ---------- nav ---------- */
header.nav{position:sticky; top:0; z-index:60; background:var(--nav-bg); backdrop-filter:saturate(1.4) blur(16px); -webkit-backdrop-filter:saturate(1.4) blur(16px); border-bottom:1px solid var(--line-2)}
.nav-inner{display:flex; align-items:center; gap:22px; height:66px}
.brand{display:flex; align-items:center; gap:12px}
.logo{height:30px; width:auto; max-width:160px; object-fit:contain; display:block; flex:none}
.brand b{font-size:16px; letter-spacing:.14em; font-weight:700; display:block; line-height:1.1}
.brand small{font-family:var(--mono); font-size:9px; letter-spacing:.24em; color:var(--ink-3); text-transform:uppercase}
.nav-links{display:flex; gap:28px; margin-left:auto; font-size:14.5px; color:var(--ink-2); font-weight:500}
.nav-links a{transition:color .18s} .nav-links a:hover{color:var(--ink)}
.nav-actions{display:flex; align-items:center; gap:10px; margin-left:22px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; font-family:var(--sans); font-weight:600; font-size:14.5px; letter-spacing:.01em; padding:11px 20px; border-radius:11px; border:1px solid transparent; transition:transform .15s, box-shadow .2s, background .2s, border-color .2s, color .2s; white-space:nowrap}
.btn-primary{background:var(--accent); color:var(--accent-ink); box-shadow:0 8px 22px -12px var(--accent-line)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 30px -14px var(--accent-line); background:var(--accent-strong)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink); }
.nav .btn-primary{padding:9px 17px}
.icon-btn{width:40px; height:40px; flex:none; border-radius:11px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; display:grid; place-items:center; font-size:17px; transition:border-color .2s, transform .15s}
.icon-btn:hover{border-color:var(--ink)}
.icon-btn:active{transform:scale(.94)}
.menu-btn{display:none}

.mobile-menu{position:fixed; inset:66px 0 auto 0; z-index:55; background:var(--nav-bg); backdrop-filter:saturate(1.4) blur(18px); -webkit-backdrop-filter:saturate(1.4) blur(18px); border-bottom:1px solid var(--line); transform:translateY(-8px); opacity:0; visibility:hidden; transition:opacity .2s, transform .2s, visibility .2s}
.mobile-menu.open{opacity:1; visibility:visible; transform:none}
.mobile-menu nav{display:flex; flex-direction:column; padding:12px clamp(18px,4vw,26px) 20px}
.mobile-menu a{padding:14px 4px; font-size:16px; font-weight:600; border-bottom:1px solid var(--line-2)}
.mobile-menu a:last-child{border-bottom:0}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line-2)}
.hero::before{content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:clamp(42px,5vw,58px) clamp(42px,5vw,58px); mask-image:radial-gradient(130% 90% at 74% 10%, #000 28%, transparent 82%); -webkit-mask-image:radial-gradient(130% 90% at 74% 10%, #000 28%, transparent 82%)}
.hero::after{content:""; position:absolute; top:-24%; right:-14%; width:min(680px,92vw); height:680px; pointer-events:none; background:radial-gradient(circle, var(--accent-soft), transparent 60%)}
.hero{min-height:clamp(500px,68vh,780px)}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; background-image:url("/assets/img/background.webp"); background-size:cover; background-position:center right; background-repeat:no-repeat}
.hero-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--ground) 4%, color-mix(in srgb,var(--ground) 45%,transparent) 40%, transparent 66%), linear-gradient(0deg, var(--ground), transparent 26%)}
@media (max-width:880px){
  .hero-bg{background-position:center}
  .hero-bg::after{background:linear-gradient(180deg, color-mix(in srgb,var(--ground) 60%,transparent), color-mix(in srgb,var(--ground) 74%,transparent) 62%, var(--ground))}
}
.hero-inner{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,5vw,58px); align-items:center; padding:clamp(54px,8vw,88px) clamp(18px,4vw,26px); min-height:inherit}
.tag{display:inline-flex; align-items:center; gap:10px; margin-bottom:24px; flex-wrap:wrap; padding:7px 14px; border:1px solid var(--line); border-radius:30px; background:var(--surface)}
.tag .dot{width:6px; height:6px; border-radius:50%; background:var(--ink); box-shadow:0 0 0 4px var(--accent-soft)}
.hero-copy{container-type:inline-size}
.hero h1{font-size:clamp(20px,9.2cqi,54px); line-height:1.18; letter-spacing:-.035em; font-weight:700; white-space:nowrap}
/* '투명하게' — 반투명 아웃라인, 내부는 비어 뒤 배경이 그대로 비침 */
.hero h1 em{font-style:normal; color:var(--ink-2)}   /* text-stroke 미지원 폴백 */
@supports ((-webkit-text-stroke:1px #000) or (text-stroke:1px #000)){
  .hero h1 em{color:transparent; -webkit-text-stroke:1.1px var(--ink); text-stroke:1.1px var(--ink); paint-order:stroke fill; opacity:.55}
}
.hero .lead{margin-top:24px; font-size:clamp(15.5px,1.7vw,18px); color:var(--ink-2); max-width:33em}
.hero-cta{display:flex; gap:12px; margin-top:32px; flex-wrap:wrap}
.hero-trust{display:flex; gap:clamp(20px,4vw,30px); margin-top:34px; padding-top:28px; border-top:1px solid var(--line-2); flex-wrap:wrap}
.hero-trust div{display:flex; flex-direction:column}
.hero-trust b{font-family:var(--mono); font-size:clamp(19px,2.4vw,23px); font-weight:700; letter-spacing:-.02em}
.hero-trust small{color:var(--ink-3); font-size:12.5px; margin-top:4px; letter-spacing:.02em}

/* vehicle card */
.vcard{background:color-mix(in srgb, var(--surface) 30%, transparent); backdrop-filter:blur(4px) saturate(1.1); -webkit-backdrop-filter:blur(4px) saturate(1.1); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden; max-width:450px; width:100%; margin:0 auto; --ink-3:color-mix(in srgb, var(--ink) 66%, var(--ground)); --ink-2:color-mix(in srgb, var(--ink) 82%, var(--ground))}
.vcard-top{padding:18px 20px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line-2); background:color-mix(in srgb, var(--surface) 25%, transparent); gap:12px}
.vcard-top .lbl{font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--ink-3); text-transform:uppercase}
.plate{margin-top:7px; font-family:var(--mono); font-weight:700; font-size:19px; letter-spacing:.06em; display:inline-flex; align-items:center; gap:8px; color:var(--ink)}
.plate .pill{background:var(--ink); color:var(--surface); padding:3px 9px; border-radius:6px; font-size:13px}
.live{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink-2); text-transform:uppercase; white-space:nowrap}
.live i{width:7px; height:7px; border-radius:50%; background:var(--ink); animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--accent-line)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.vcard-body{padding:20px}
.veh{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:4px; gap:10px}
.veh h3{font-size:19px; font-weight:700} .veh .model{font-size:13px; color:var(--ink-3); font-family:var(--mono); white-space:nowrap}
.meter{height:8px; border-radius:6px; background:var(--surface-2); border:1px solid var(--line-2); overflow:hidden; margin:16px 0 6px}
.meter i{display:block; height:100%; width:64%; background:linear-gradient(90deg,var(--silver),var(--ink)); border-radius:6px}
.meter-cap{display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; color:var(--ink-3)}
.steps{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:2px}
.step{display:flex; align-items:center; gap:13px; padding:11px 4px; border-bottom:1px dashed var(--line-2)}
.step:last-child{border-bottom:0}
.step .node{width:22px; height:22px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:11px; font-family:var(--mono); border:1.5px solid var(--line); color:var(--ink-3)}
.step .t{flex:1; font-size:14px; font-weight:600; min-width:0}
.step .t small{display:block; font-weight:400; color:var(--ink-3); font-size:11.5px; font-family:var(--mono); margin-top:1px}
.chip,.ph-mini{font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase; font-weight:600; white-space:nowrap; flex:none}
.chip{font-size:10.5px; padding:4px 10px; border-radius:20px; border:1px solid transparent}
.chip.done{color:var(--accent-ink); background:var(--accent)}
.chip.run{color:var(--ink); background:transparent; border-color:var(--ink-2)}
.chip.wait{color:var(--ink-3); background:var(--surface-2); border-color:var(--line)}
.step.is-done .node{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.step.is-run .node{border-color:var(--ink); color:var(--ink); box-shadow:0 0 0 4px var(--accent-soft)}

/* section scaffold */
section{padding:clamp(58px,9vw,92px) 0}
section[id]{scroll-margin-top:76px}
#reserve{scroll-margin-top:90px}
.sec-head{max-width:660px; margin-bottom:clamp(32px,5vw,46px)}
.sec-head h2{font-size:clamp(23px,3.4vw,35px); line-height:1.16; margin-top:14px; font-weight:700}
/* 줄바꿈 없이 자동 축소되는 제목 */
#about .sec-head{container-type:inline-size}
#about .sec-head h2{white-space:nowrap; font-size:clamp(15px,5.5cqi,35px)}
.sec-head p{margin-top:14px; color:var(--ink-2); font-size:clamp(15px,1.7vw,16px)}

.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.feat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; transition:transform .2s, border-color .2s}
.feat:hover{transform:translateY(-4px); border-color:var(--ink-2)}
.feat .n{font-family:var(--mono); font-size:12px; color:var(--ink-3); letter-spacing:.14em}
.feat h3{font-size:17px; margin:14px 0 8px; font-weight:700}
.feat p{font-size:13.5px; color:var(--ink-2); line-height:1.55}

/* benz lineup */
.lineup{background:var(--surface); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2)}
.grid-lineup{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.mcard{position:relative; border:1px solid var(--line); border-radius:var(--radius); padding:22px 20px 20px; background:var(--ground); overflow:hidden; transition:transform .2s, border-color .2s, background .2s; min-height:150px; display:flex; flex-direction:column}
.mcard:hover{transform:translateY(-4px); border-color:var(--ink-2); background:var(--surface-2)}
.mcard .cls{font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--ink-3); text-transform:uppercase}
.mcard h3{font-size:22px; margin:8px 0 4px; letter-spacing:-.01em; font-weight:700}
.mcard .kr{font-size:13px; color:var(--ink-2)}
.mcard .ex{margin-top:auto; padding-top:16px; font-family:var(--mono); font-size:11.5px; color:var(--ink-3); border-top:1px solid var(--line-2)}
.mcard .star{position:absolute; top:16px; right:16px; width:26px; height:26px; opacity:.28; color:var(--ink)}

/* services */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.svc{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px 26px; overflow:hidden; transition:border-color .2s, transform .2s}
.svc:hover{border-color:var(--ink-2); transform:translateY(-3px)}
.svc .idx{position:absolute; top:18px; right:20px; font-family:var(--mono); font-size:12px; color:var(--ink-3)}
.svc h3{font-size:18px; margin-bottom:10px; font-weight:700}
.svc p{font-size:13.5px; color:var(--ink-2)}
.svc ul{margin:14px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:7px}
.svc li{font-family:var(--mono); font-size:11px; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line-2); padding:4px 9px; border-radius:7px}

/* product */
.product{background:var(--ground); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2)}
.prod-inner{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,58px); align-items:center}
.prod-copy{container-type:inline-size}
.prod-copy h2{font-size:clamp(15px,6.8cqi,35px); line-height:1.18; margin-top:14px; font-weight:700; white-space:nowrap}
.prod-copy .plead{margin-top:14px; color:var(--ink-2); font-size:clamp(15px,1.7vw,16px)}
.roles{display:flex; flex-direction:column; gap:16px; margin-top:26px}
.role{border:1px solid var(--line); border-radius:var(--radius); padding:22px; background:var(--surface)}
.role .rh{display:flex; align-items:center; gap:11px; margin-bottom:12px; flex-wrap:wrap}
.role .badge{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; padding:4px 11px; border-radius:20px; background:var(--accent); color:var(--accent-ink); font-weight:600}
.role h3{font-size:17px; font-weight:700}
.role ul{margin:0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:9px}
.role li{position:relative; padding-left:22px; font-size:14px; color:var(--ink-2)}
.role li::before{content:""; position:absolute; left:2px; top:9px; width:8px; height:8px; border-radius:2px; background:var(--ink); transform:rotate(45deg)}
.phones{display:flex; gap:14px; justify-content:center; flex-wrap:nowrap}
.phone{width:min(192px,calc(50% - 7px)); flex:0 1 auto; aspect-ratio:9/18.5; border-radius:26px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); padding:clamp(9px,2.6vw,14px); display:flex; flex-direction:column; gap:10px}
.phone.t2{transform:translateY(26px)}
.phone .scr-h{height:9px; width:44px; background:var(--line); border-radius:6px; margin:2px auto 8px}
.ph-card{background:var(--surface-2); border:1px solid var(--line-2); border-radius:12px; padding:12px}
.ph-card .pt{font-family:var(--mono); font-size:9px; letter-spacing:.12em; color:var(--ink-3); text-transform:uppercase}
.ph-card .pv{font-weight:700; font-size:14px; margin-top:4px}
.ph-row{display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px dashed var(--line-2); font-size:12px; gap:6px}
.ph-row:last-child{border-bottom:0}
.ph-mini{font-size:9px; padding:3px 8px; border-radius:12px; border:1px solid transparent}
.ph-mini.done{background:var(--accent); color:var(--accent-ink)}
.ph-mini.run{background:transparent; color:var(--ink); border-color:var(--ink-2)}
.ph-mini.wait{background:var(--surface); color:var(--ink-3); border-color:var(--line)}
.ph-mini.late{background:transparent; color:var(--ink); border-color:var(--ink); font-weight:700}

/* process */
#process .sec-head{text-align:center; margin-left:auto; margin-right:auto}
.steps-row{display:grid; grid-template-columns:repeat(5,1fr); gap:0}
.pstep{position:relative; padding:26px 12px 24px; display:flex; flex-direction:column; align-items:center; text-align:center}
.pstep:not(:last-child)::after{content:""; position:absolute; top:49px; left:calc(50% + 30px); right:calc(-50% + 30px); height:1px; background:repeating-linear-gradient(90deg,var(--ink-3) 0 5px,transparent 5px 11px); opacity:.5}
.pstep .num{width:46px; height:46px; border-radius:50%; background:var(--surface); border:1px solid var(--line); display:grid; place-items:center; font-family:var(--mono); font-weight:700; font-size:15px; color:var(--ink); position:relative; z-index:1; box-shadow:inset 0 0 0 3px var(--ground)}
.pstep h3{font-size:15.5px; margin:18px 0 7px; font-weight:700}
.pstep p{font-size:13px; color:var(--ink-2); max-width:16em; margin-left:auto; margin-right:auto}

/* stats */
.stats{background:var(--surface); border-top:1px solid var(--line-2)}
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.stat{text-align:center; padding:16px 14px; border-left:1px solid var(--line-2); min-width:0}
.stat:first-child{border-left:0}
.stat b{display:block; font-family:var(--mono); font-size:clamp(28px,5vw,46px); font-weight:700; letter-spacing:-.03em; color:var(--ink)}
.stat span{color:var(--ink-2); font-size:13.5px}
.stat b em{font-style:normal; color:var(--ink-3); font-size:.55em}

/* contact */
#contact{position:relative; overflow:hidden; background-image:url("/assets/img/contact-bg.webp"); background-size:cover; background-position:center; background-attachment:fixed}
#contact::before{content:""; position:absolute; inset:0; background:color-mix(in srgb, var(--ground) 68%, transparent)}
#contact .wrap{position:relative; z-index:1}
.contact-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,44px); align-items:center; background:color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(26px,4vw,46px); box-shadow:var(--shadow)}
.contact-inner h2{font-size:clamp(23px,3vw,33px); margin-top:14px; font-weight:700}
.info-list{margin-top:26px; display:flex; flex-direction:column; gap:16px}
.info-list .row{display:flex; gap:14px; align-items:flex-start}
.info-list .k{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); width:60px; flex:none; padding-top:3px}
.info-list .v{font-size:15px; color:var(--ink)}
.info-list .v small{display:block; color:var(--ink-3); font-size:12.5px; margin-top:2px}
.contact-inner > *{min-width:0}
.info-list .row{min-width:0}
.info-list .v{min-width:0; overflow-wrap:anywhere; word-break:keep-all}
.contact-cta{text-align:center; padding:clamp(26px,4vw,34px); border-radius:var(--radius); background:var(--sheen); border:1px solid var(--line)}
.contact-cta .big{font-family:var(--mono); font-size:clamp(24px,3.4vw,29px); font-weight:700; letter-spacing:-.02em; margin:6px 0 4px; color:var(--ink)}
.contact-cta p{color:var(--ink-2); font-size:13.5px; margin-bottom:22px}
.cta-btns{display:flex; flex-direction:column; gap:10px}
.cta-btns .btn{width:100%}
.btn-ico{width:15px; height:15px; flex:none; display:block}
.btn-kakao{background:#FEE500; color:#181600; border-color:#FEE500}
.btn-kakao:hover{background:#f4d800; transform:translateY(-2px); box-shadow:0 12px 26px -14px rgba(0,0,0,.5)}
.kakao-ico{width:18px; height:15px; background:#181600; border-radius:50%/58%; position:relative; display:inline-block; flex:none}
.kakao-ico::after{content:""; position:absolute; left:3px; bottom:-3px; width:6px; height:6px; background:#181600; clip-path:polygon(0 0,100% 0,0 100%)}

footer{border-top:1px solid var(--line-2); padding:46px 0 42px; color:var(--ink-2)}
.foot-top{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; align-items:flex-start}
.foot-links{display:flex; gap:clamp(24px,5vw,44px); flex-wrap:wrap}
.foot-links h4{font-size:11px; font-family:var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin:0 0 12px}
.foot-links a{display:block; font-size:14px; color:var(--ink-2); padding:4px 0} .foot-links a:hover{color:var(--ink)}
.biz{margin-top:36px; padding-top:24px; border-top:1px solid var(--line-2); font-size:12.5px; color:var(--ink-3); line-height:1.7; word-break:keep-all}
.biz p{margin:0 0 5px}
.biz .biz-notice{margin-top:12px; padding-top:12px; border-top:1px solid var(--line-2); opacity:.85}

.m-cta{position:fixed; left:0; right:0; bottom:0; z-index:58; display:none; padding:12px clamp(14px,4vw,20px) calc(12px + env(safe-area-inset-bottom)); background:var(--nav-bg); backdrop-filter:saturate(1.4) blur(16px); -webkit-backdrop-filter:saturate(1.4) blur(16px); border-top:1px solid var(--line)}
.m-cta .btn{width:100%; padding:15px}

/* floating speed-dial (오른쪽 하단): 평소 토글 1개 → 누르면 위로 따다닥 */
.fab{position:fixed; right:clamp(14px,3vw,26px); bottom:clamp(16px,3vw,26px); z-index:57; --step:58px}
.fab-btn{width:48px; height:48px; border-radius:50%; background:var(--surface); border:1px solid var(--line); color:var(--ink); display:grid; place-items:center; box-shadow:var(--shadow); cursor:pointer; transition:background .2s, border-color .2s, color .2s, transform .16s}
.fab-btn svg{width:22px; height:22px; display:block}
.fab-txt{font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:-.02em}
/* 토글(항상 보임) */
.fab-toggle{position:relative; z-index:2; background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.fab-toggle:hover{transform:translateY(-3px)}
.fab-toggle svg{transition:transform .3s cubic-bezier(.34,1.5,.64,1)}
.fab.open .fab-toggle svg{transform:rotate(135deg)}
/* 아이템(평소 토글 뒤에 숨김 → 열면 위로 펼침) */
.fab-item{position:absolute; right:0; bottom:0; z-index:1; opacity:0; transform:translateY(0) scale(.4); pointer-events:none; transition:transform .34s cubic-bezier(.34,1.56,.64,1), opacity .2s}
.fab.open .fab-item{opacity:1; pointer-events:auto}
.fab:not(.open) .fab-item{transition-delay:0s !important}
.fab.open .fab-ig{transform:translateY(calc(var(--step) * -1)); transition-delay:0s}
.fab.open .fab-blog{transform:translateY(calc(var(--step) * -2)); transition-delay:.05s}
.fab.open .fab-yt{transform:translateY(calc(var(--step) * -3)); transition-delay:.1s}
.fab.open .fab-top{transform:translateY(calc(var(--step) * -4)); transition-delay:.15s}
/* 호버 시 브랜드 색 (transform은 건드리지 않음) */
.fab-top:hover{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.fab-yt:hover{background:#FF0000; border-color:#FF0000; color:#fff}
.fab-blog:hover{background:#03C75A; border-color:#03C75A; color:#fff}
.fab-ig:hover{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); border-color:transparent; color:#fff}

.anim .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
.anim .reveal.in{opacity:1; transform:none}

@media (max-width:1040px){ .grid-4,.grid-lineup{grid-template-columns:repeat(2,1fr)} }
@media (max-width:880px){
  .nav-links{display:none} .menu-btn{display:grid}
  .nav-actions{margin-left:auto}   /* 메뉴 버튼 오른쪽 정렬 */
  .hero-inner,.prod-inner,.contact-inner{grid-template-columns:1fr}
  .hero-copy{order:1} .vcard{order:2}
  .grid-3{grid-template-columns:1fr}
  .steps-row{grid-template-columns:1fr 1fr; gap:10px}
  .pstep{padding:22px 12px 20px} .pstep::after{display:none}
  .stat-row{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-left:0}
  .m-cta{display:block} body{padding-bottom:78px}
  .fab{bottom:calc(86px + env(safe-area-inset-bottom)); --step:53px}   /* 하단 예약바 위로 */
  .fab-btn{width:44px; height:44px}
  .fab-btn svg{width:20px; height:20px}
  /* 모바일: fixed 배경은 iOS 등에서 깨지므로 스크롤로 전환 */
  #contact{background-attachment:scroll}
  .hero{min-height:auto}
}
@media (max-width:520px){
  .nav-actions .btn-primary{display:none}
  .nav-inner{gap:14px}
  .tag{letter-spacing:.1em}
  .grid-4,.grid-lineup{grid-template-columns:1fr}
  .stat:nth-child(3){border-left:1px solid var(--line-2)}
  .phone.t2{transform:none}
  /* 정비 과정: 세로 타임라인 (번호 왼쪽 + 점선 연결) */
  .steps-row{grid-template-columns:1fr; gap:0}
  #process .sec-head{text-align:center}
  .pstep{flex-direction:row; align-items:flex-start; text-align:left; gap:16px; padding:0 8px 28px}
  .pstep .num{margin:0}
  .pstep-body{flex:1; min-width:0; padding-top:2px}
  .pstep h3{margin:0 0 4px}
  .pstep p{margin:0; max-width:none}
  .pstep:not(:last-child)::after{display:block; content:""; top:48px; bottom:-4px; left:31px; right:auto; width:2px; height:auto; transform:translateX(-50%); background:repeating-linear-gradient(180deg,var(--ink-3) 0 5px,transparent 5px 11px); opacity:.55}
  /* 푸터 링크 3열 정렬 */
  .foot-links{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto} .anim .reveal{opacity:1; transform:none; transition:none} .live i{animation:none}
  .fab-item{transition-duration:.01ms !important; transition-delay:0s !important}
}

/* ── 실시간 차량 현황 조회 (kymotors 연동) ─────────────────── */
.plate-form{margin-top:10px; display:flex; gap:6px}
.plate-form input{font-family:var(--mono); font-size:13px; letter-spacing:.04em; padding:8px 11px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); color:var(--ink); width:170px; min-width:0}
.plate-form input::placeholder{color:var(--ink-3); letter-spacing:0}
.plate-form input:focus{outline:none; border-color:var(--ink-2)}
.plate-form .plate-go{font-family:var(--mono); font-weight:600; font-size:12px; letter-spacing:.08em; padding:8px 13px; border-radius:8px; border:1px solid var(--ink); background:var(--ink); color:var(--surface); cursor:pointer}
.plate-form .plate-go:disabled{opacity:.55; cursor:default}
.vstat-msg{margin:12px 0 0; font-family:var(--mono); font-size:12px; color:var(--ink-3)}

/* ── 실시간 조회 폼 v2 (차량번호 + 전화 뒤 4자리) ─────────────── */
.vcard-top-main{min-width:0; flex:1}
.plate-form{margin-top:10px; display:flex; gap:6px; flex-wrap:wrap}
.plate-form input{font-family:var(--mono); font-size:13px; letter-spacing:.04em; padding:8px 11px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); color:var(--ink); min-width:0}
.plate-form #plateInput{width:142px}
.plate-form #phoneInput{width:104px}
.plate-form input::placeholder{color:var(--ink-3); letter-spacing:0}
.plate-form input:focus{outline:none; border-color:var(--ink-2)}
.plate-form .plate-go{font-family:var(--mono); font-weight:600; font-size:12px; letter-spacing:.08em; padding:8px 13px; border-radius:8px; border:1px solid var(--ink); background:var(--ink); color:var(--surface); cursor:pointer}
.plate-form .plate-go:disabled{opacity:.55; cursor:default}
.vstat-hint{margin:10px 0 0; font-size:12px; color:var(--ink-3); line-height:1.55}
.vstat-msg{margin:10px 0 0; font-family:var(--mono); font-size:12px; color:var(--ink-3)}
.plate[hidden]{display:none}

/* ── 오시는 길 지도 ──────────────────────────────────────── */
.map-box{margin-top:22px}
.map-frame{width:100%; height:250px; border:1px solid var(--line); border-radius:var(--radius-lg); display:block; filter:grayscale(.15)}
.map-links{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}
.map-links .btn{font-size:13px; padding:9px 14px}

/* ── 온라인 예약 신청 폼 ─────────────────────────────────── */
.book-form{margin:18px 0 20px; display:flex; flex-direction:column; gap:8px; text-align:left}
.bf-row{display:flex; gap:8px}
.bf-row input, .bf-row select, .book-form textarea{flex:1; min-width:0; font:inherit; font-size:14px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); color:var(--ink)}
.book-form textarea{resize:vertical}
.book-form input::placeholder, .book-form textarea::placeholder{color:var(--ink-3)}
.book-form input:focus, .book-form select:focus, .book-form textarea:focus{outline:none; border-color:var(--ink-2)}
.bf-submit{width:100%; justify-content:center}
.book-msg{margin:2px 0 0; font-size:13px; color:var(--ink-3)}
.book-msg.ok{color:var(--ink); font-weight:600}
.hp-field{position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0}
@media (max-width:560px){ .bf-row{flex-direction:column} }

/* ── 앱 다운로드 / 푸터 링크 ─────────────────────────────── */
.app-links{margin-top:18px; display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.app-soon{font-size:13px; color:var(--ink-3); font-family:var(--mono)}
.foot-privacy{text-decoration:underline; opacity:.75}
.bf-note{margin:-2px 0 0; font-size:12px; color:var(--ink-3)}