/* ═══════════════════════════════════════════════════════════════════════════
   KY MOTORS — home.css · 홈(index.php) 전용 · v4.0.0 2026-09-21
   v4.css(공용 껍데기) 다음에 실린다. 여기에는 홈 15개 섹션만 담는다.
   ═══════════════════════════════════════════════════════════════════════════ */

.mono{ font-family:var(--meta); font-size:11px; letter-spacing:.12em; }
/* 대비 실측(2026-09-21): 밝은 바탕엔 n5(4.74:1), 어두운 바탕엔 n4(5.4~6.1:1). 뒤집으면 2.9:1 로 떨어진다 */
.dim{ color:var(--n5); }
.sec--dark .dim,.sec--deep .dim{ color:var(--n4); }
.dot{
  display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--red-light);
  animation:kyPulse 1.6s ease-in-out infinite; flex:none;
}

/* ══ 01 히어로 ══════════════════════════════════════════════════════════ */
.hero{
  position:relative; min-height:min(100svh,920px); overflow:hidden;
  background:var(--n9); color:var(--on-dark); display:flex; align-items:flex-end;
}
.hero__media{ position:absolute; inset:-6% 0 0; will-change:transform; }
.hero__vid,.hero__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero__shade{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,#0e1110e6 0%,#0e111099 40%,#0e111000 75%),
             linear-gradient(0deg,#0e1110 0%,#0e111000 45%);
}
.hero__in{ position:relative; padding:clamp(140px,18vw,200px) 0 clamp(72px,8vw,104px); }
/* v4.6.7 — 「MERCEDES-BENZ ONLY · SUWON」 글을 뺐다. 남은 「지금 n대 작업 중」 칩이 숨으면(작업 0대) 빈 줄 여백도 없게 — 여백은 칩이 가진다 */
.hero__tags{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.hero__tags .livechip{ margin-bottom:28px; }
.hero__eyebrow{ font-family:var(--meta); font-size:12px; font-weight:600; letter-spacing:.14em; color:var(--n3); text-transform:uppercase; }
.livechip{
  display:inline-flex; align-items:center; gap:10px; min-height:36px; padding:0 14px;
  border:1px solid var(--dark-line); border-radius:999px; font-size:13px; font-weight:600; color:var(--n0);
  transition:border-color var(--t),background var(--t);
}
.livechip:hover{ border-color:var(--red-light); color:var(--n0); background:#ffffff0d; }
.livechip strong{ font-weight:700; color:var(--red-light); }
/* v4.6.6 (2026-10-11 사장님 「폰트가 너무 크다. 조금은 줄여」) 72 → 56 · 폰 34 → 30 */
.hero__h1{ max-width:16ch; font-size:clamp(30px,4.6vw,56px); font-weight:500; line-height:1.22; letter-spacing:-.04em; }
/* 좁은 화면에서는 줄바꿈을 글에 맡긴다 — 넣어 둔 <br> 가 한 줄을 두 줄로 쪼갠다 */
@media (max-width:519px){ .hbr{ display:none; } .hero__h1{ max-width:none; } }
.hero__p{ margin:28px 0 0; max-width:44ch; font-size:clamp(15px,1.2vw,17px); line-height:1.85; color:var(--n2); }
.hero__p span{ white-space:nowrap; }   /* 좁은 화면에서는 「 · 」 자리에서만 줄이 바뀐다 (v4.6.6) */
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:40px; }
.hero__cue{
  position:absolute; left:50%; bottom:22px; translate:-50% 0; width:22px; height:36px;
  border:1px solid #ffffff3d; border-radius:12px; display:flex; justify-content:center; padding-top:7px;
  opacity:1; transition:opacity 400ms ease-out;
}
.hero__cue i{ width:2px; height:7px; border-radius:2px; background:var(--n2); animation:kyCue 1.8s ease-in-out infinite; }
.hero.is-past .hero__cue{ opacity:0; }
@keyframes kyCue{ 0%{ transform:translateY(0); opacity:1 } 70%{ transform:translateY(12px); opacity:0 } 100%{ opacity:0 } }
@media (max-width:719px){ .hero__cue{ display:none; } .hero__cta .btn{ flex:1 1 100%; } }

/* ══ 02 증명 — 정비사례 가로 목록 ═════════════════════════════════════ */
.cscroll{
  display:flex; gap:20px; overflow-x:auto; margin-top:40px; padding-bottom:4px;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
}
.cscard{
  flex:0 0 clamp(268px,32vw,400px); scroll-snap-align:start;
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  transition:transform var(--t),border-color var(--t),box-shadow var(--t);
}
a.cscard:hover{ border-color:var(--n9); color:var(--ink); transform:translateY(-4px); box-shadow:var(--shadow); }
.cscard__img{ position:relative; aspect-ratio:4/3; background:var(--n1); overflow:hidden; }
.cscard__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 500ms var(--ease); }
a.cscard:hover .cscard__img img{ transform:scale(1.045); }
.cscard__tag{
  position:absolute; top:12px; left:12px; padding:5px 9px; border-radius:var(--radius);
  background:var(--n9); color:var(--n0); font-family:var(--meta); font-size:10px; font-weight:600; letter-spacing:.14em;
}
.cscard__b{ padding:20px 20px 22px; display:flex; flex-direction:column; gap:8px; flex:1; }
.cscard__meta{ display:flex; justify-content:space-between; font-family:var(--meta); font-size:11px; letter-spacing:.1em; color:var(--muted); }
.cscard__model{ font-size:13px; font-weight:600; color:var(--red); }
.cscard__t{ margin:0; font-size:20px; font-weight:600; line-height:1.3; letter-spacing:-.02em; }
.cscard__x{
  margin:0; font-size:14px; line-height:1.8; color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* 글 창이 이 카드 자리에서 커지는 동안 카드는 숨긴다 (v4.6.6 — cases.css .cs-card.is-hold 와 같은 것) */
.cscard.is-hold{ opacity:0; }
.cscard.is-sk{ border-color:var(--n1); }
.cscard.is-sk .cscard__img{ border-radius:0; }
.skline{ display:block; height:14px; border-radius:3px; }
.skline--w{ width:62%; }
.csempty{ padding:40px 0; color:var(--muted); font-size:15px; }

.csbar{ display:flex; align-items:center; gap:24px; margin-top:28px; }
.csbar__track{ flex:1; min-width:0; height:24px; display:flex; align-items:center; cursor:pointer; touch-action:none; }
.csbar__rail{ position:relative; width:100%; height:2px; background:var(--line); border-radius:2px; }
.csbar__thumb{
  position:absolute; top:-8px; bottom:-8px; left:0; width:30%;
  display:flex; align-items:center; cursor:grab; transition:left 120ms linear;
}
.csbar__thumb i{ width:100%; height:4px; border-radius:2px; background:var(--n9); display:block; }
.csbar.is-drag .csbar__thumb{ transition:none; cursor:grabbing; }
.csbar__idx{ color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.csbar__btns{ display:flex; gap:8px; }
.rbtn{
  width:48px; height:48px; border-radius:50%; border:1px solid var(--n9); background:transparent;
  color:var(--n9); font-size:18px; display:flex; align-items:center; justify-content:center;
  transition:background var(--t),color var(--t),opacity var(--t),transform 120ms ease-out;
}
.rbtn:hover:not(:disabled){ background:var(--n9); color:var(--n0); }
.rbtn:active:not(:disabled){ transform:scale(.94); }
.rbtn:disabled{ opacity:.3; cursor:default; }
@media (max-width:640px){ .csbar__btns{ display:none; } }

/* ══ 03 왜 KY 인가 ═════════════════════════════════════════════════════ */
.whylist{ display:flex; flex-direction:column; margin-top:56px; border-top:1px solid var(--dark-line); }
.whyrow{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(20px,4vw,64px); padding:clamp(28px,4vw,44px) 0; border-bottom:1px solid var(--dark-line);
}
.whyrow__l{ min-width:0; display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start; }
.whyrow__n{ font-family:var(--display); font-size:clamp(48px,6vw,88px); font-weight:600; line-height:.85; color:var(--n6); }
.whyrow__k{ display:block; font-family:var(--meta); font-size:11px; letter-spacing:.14em; color:var(--n4); margin-bottom:10px; }
.whyrow__k--red{ color:var(--red-light); margin-bottom:12px; }
.whyrow__q{ font-size:clamp(18px,1.5vw,21px); font-weight:500; line-height:1.35; letter-spacing:-.02em; color:var(--n2); }
.whyrow__qs{ margin:10px 0 0; max-width:44ch; font-size:14px; line-height:1.85; color:var(--n3); }
.whyrow__r{ min-width:0; padding-left:clamp(0px,2vw,24px); border-left:2px solid var(--red); }
.whyrow__a{ font-size:clamp(26px,2.6vw,38px); font-weight:600; line-height:1.25; letter-spacing:-.035em; }
.whyrow__as{ margin:14px 0 0; max-width:40ch; font-size:16px; line-height:1.85; color:var(--n2); }

/* ══ 04 1분이면 됩니다 ═════════════════════════════════════════════════ */
.om{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:clamp(40px,6vw,96px); align-items:center; }
.om__txt{ min-width:0; }
/* v4.6.7 — 섹션 제목 위 작은 글(02 —— OUR WORK 등)을 뺐다 → 그 아래 띄우던 여백(v4.css .h2 16px)도 없앤다 */
.h2:first-child{ margin-top:0; }
.h2--big{ font-size:clamp(40px,5vw,72px); line-height:1.15; letter-spacing:-.045em; }
.ombox{ min-width:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:clamp(20px,3vw,32px); box-shadow:var(--shadow); }
.ombox__top{ display:flex; justify-content:space-between; color:var(--muted); margin-bottom:20px; }
.ombox__bar{ height:3px; background:var(--n1); border-radius:2px; margin-bottom:24px; }
.ombox__bar i{ display:block; width:25%; height:100%; background:var(--red); border-radius:2px; }
.ombox__h{ font-size:20px; font-weight:600; letter-spacing:-.02em; }
.ombox__s{ margin:6px 0 20px; font-size:13px; line-height:1.7; color:var(--muted); }
.ombox__lb{ display:block; font-size:12px; font-weight:600; color:var(--n6); margin:16px 0 6px; }
.ombox__lb:first-of-type{ margin-top:0; }
.ombox__in{ height:52px; border:1px solid var(--line); border-radius:var(--radius); display:flex; align-items:center; padding:0 16px; font-size:16px; color:var(--n4); }
.ombox__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.omchip{ min-height:40px; padding:0 14px; display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:var(--radius); font-size:13px; }
.omchip.is-on{ border-color:var(--n9); background:var(--n9); color:var(--n0); font-weight:600; }
.ombox__steps{ margin-top:20px; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.omstep{ min-width:0; padding-top:10px; border-top:2px solid var(--line); font-size:11px; line-height:1.5; color:var(--n6); }
.omstep.is-on{ border-top-color:var(--red); }
.omstep span{ display:block; color:var(--n4); }

/* 미리보기 카드 두 장 (2026-10-08) — 사장님: "삐딱하게 하고 뒤에 차량 확인된 카드도 넣어서, 뒤 카드를 클릭하면 앞으로".
   · 두 장을 같은 칸(grid-area 1/1)에 겹친다 → 높이는 큰 쪽에 맞고 둘 다 같은 높이.
   · 기울기·어긋남은 안쪽 여백(padding) 안에서만 — 카드 모서리가 잘리거나 375px 폭에서 가로 스크롤이 생기면 안 된다.
     여백 = 어긋남 + 기울어서 늘어난 폭(카드 높이 × sin 각도 ÷ 2) 을 넉넉히.
   · 뒤 카드를 누르면 위로 빠졌다가(--om-pull) 앞으로 내려앉는다 — home.js 10. 동작 줄이기는 바로 바뀐다. */
.omside{ min-width:0; display:flex; flex-direction:column; align-items:stretch; }
.omdeck{
  --om-front:rotate(-2deg);
  --om-back:translate(22px,-18px) rotate(3deg);
  --om-peek:translate(28px,-26px) rotate(3.6deg);
  --om-pull:translate(5%,-17%) rotate(6deg);
  --om-push:translate(-2%,2%) rotate(-3.4deg);
  min-width:0; display:grid; padding:40px 44px 16px 14px;
}
.omdeck > .ombox{
  grid-area:1/1; transform:var(--om-front); transform-origin:50% 60%;
  transition:transform 420ms cubic-bezier(.2,.8,.2,1),box-shadow 420ms ease-out;
}
.omdeck > .ombox.is-front{ z-index:2; }
.omdeck > .ombox.is-back{ z-index:1; transform:var(--om-back); cursor:pointer; }
@media (hover:hover){ .omdeck > .ombox.is-back:hover{ transform:var(--om-peek); box-shadow:var(--float-shadow); } }
.omdeck > .ombox.is-back.is-pull{ transform:var(--om-pull); transition-duration:300ms; transition-timing-function:cubic-bezier(.4,0,.2,1); }
.omdeck > .ombox.is-front.is-push{ transform:var(--om-push); transition-duration:300ms; }
.ombox--s2{ display:flex; flex-direction:column; }
.ombox__bar--2 i{ width:50%; }
.omic{ margin:0; border:1px solid var(--line); border-radius:var(--radius); }
.omic > div{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:10px 14px; border-top:1px solid var(--line); font-size:13px; line-height:1.5; }
.omic > div:first-child{ border-top:0; }
.omic dt{ flex:none; color:var(--muted); }
.omic dd{ margin:0; min-width:0; text-align:right; font-weight:600; color:var(--ink); }
.omact{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.omact span{ min-height:44px; padding:0 18px; display:inline-flex; align-items:center; border-radius:var(--radius); font-size:14px; font-weight:600; }
.omact__ok{ background:var(--red); color:var(--n0); }
.omact__no{ border:1px solid var(--line); color:var(--ink); }
.ombox--s2 .ombox__steps{ margin-top:auto; padding-top:20px; }
.omdeck__hint{
  align-self:flex-end; min-height:40px; margin-top:4px; padding:0 4px; background:none; border:0;
  font-size:11px; letter-spacing:.08em; color:var(--muted); cursor:pointer;
}
.omdeck__hint b{ font-weight:600; color:var(--ink); border-bottom:1px solid var(--line); transition:border-color var(--t); }
.omdeck__hint:hover b,.omdeck__hint:focus-visible b{ border-bottom-color:var(--red); }
@media (max-width:719px){
  .omdeck{
    --om-front:rotate(-1deg);
    --om-back:translate(10px,-12px) rotate(1.6deg);
    --om-peek:var(--om-back);
    --om-pull:translate(3%,-12%) rotate(4deg);
    --om-push:translate(-1%,1%) rotate(-2deg);
    padding:22px 22px 8px 8px;
  }
}
@media (prefers-reduced-motion:reduce){ .omdeck > .ombox{ transition:none; } }

/* ══ 05 안심 증명 — 인증서 갤러리 ══════════════════════════════════════ */
.gal{ display:flex; flex-wrap:wrap; justify-content:center; margin-top:56px; border-top:1px solid var(--dark-line); }
.galcard{
  flex:0 0 auto; width:25%; min-width:min(100%,240px); position:relative; overflow:hidden;
  padding:0 clamp(16px,2.2vw,36px) 36px; display:flex; flex-direction:column; align-items:center;
  border-right:1px solid var(--dark-line-soft); border-bottom:1px solid var(--dark-line-soft);
  background:transparent; border-top:0; border-left:0; color:inherit; cursor:zoom-in; outline-offset:-2px;
}
.galcard__lamp{
  position:absolute; top:0; left:50%; translate:-50% 0; width:44px; height:3px; border-radius:0 0 3px 3px;
  background:var(--n6); box-shadow:none; transition:background 300ms ease-out,box-shadow 500ms ease-out;
}
.galcard__light{
  position:absolute; inset:0; pointer-events:none; opacity:0; transform:scaleY(.2); transform-origin:50% 0;
  transition:opacity 500ms ease-out,transform 700ms var(--ease);
  background:conic-gradient(from 180deg at 50% 0%,#f6f5f100 0deg,#f6f5f100 148deg,#f6f5f114 162deg,#f6f5f13a 180deg,#f6f5f114 198deg,#f6f5f100 212deg,#f6f5f100 360deg),
             linear-gradient(180deg,#f6f5f10d,#f6f5f100 75%);
}
.galcard__frame{
  position:relative; width:100%; margin-top:64px; aspect-ratio:210/297; background:var(--n9);
  border:6px solid var(--n0); box-shadow:0 12px 32px #00000066; display:block;
  transition:transform 500ms var(--ease),box-shadow 500ms ease-out,filter 500ms ease-out;
  filter:brightness(.72);
}
.galcard__frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.galcard:hover .galcard__light,.galcard:focus-visible .galcard__light{ opacity:1; transform:scaleY(1); }
.galcard:hover .galcard__lamp,.galcard:focus-visible .galcard__lamp{ background:var(--n0); box-shadow:0 0 18px 4px #f6f5f166; }
.galcard:hover .galcard__frame,.galcard:focus-visible .galcard__frame{
  transform:translateY(-6px); filter:brightness(1); box-shadow:0 30px 60px #00000080,0 0 0 1px #ffffff1f;
}
.galcard__cap{ position:relative; margin-top:16px; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; }
.galcard__cap b{ font-family:var(--meta); font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--n4); }
.galcard__t{ font-size:14px; font-weight:600; letter-spacing:-.02em; color:var(--n2); }
.galcard__s{ font-size:12px; line-height:1.6; color:var(--n4); }
.galcard:hover .galcard__t,.galcard:focus-visible .galcard__t{ color:var(--n0); }
@media (max-width:1023px){ .galcard{ width:50%; padding-bottom:32px; } .galcard__frame{ margin-top:52px; } }
@media (max-width:519px){ .galcard{ width:100%; } .galcard__frame{ margin-top:44px; } }

/* ══ 06 아무 데나 맡기면 ═══════════════════════════════════════════════ */
.riskgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:clamp(24px,3vw,40px); margin-top:56px; }
.riskcard{ min-width:0; padding-top:20px; border-top:1px solid var(--dark-line); transition:border-color var(--t); }
.riskcard:hover{ border-top-color:var(--red-light); }
.riskcard__n{ font-family:var(--display); font-size:56px; font-weight:600; line-height:.9; color:var(--red-light); }
.riskcard__t{ margin:16px 0 0; font-size:22px; font-weight:600; letter-spacing:-.02em; }
.riskcard__b{ margin:12px 0 0; font-size:14px; line-height:1.85; color:var(--n3); }
.riskcta{
  margin-top:56px; padding:clamp(24px,3vw,36px); border:1px solid var(--dark-line); border-radius:var(--radius);
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px;
}
.riskcta p{ font-size:clamp(18px,1.8vw,24px); font-weight:500; letter-spacing:-.02em; line-height:1.5; max-width:36ch; }
.riskcta strong{ color:var(--red-light); font-weight:600; }

/* ══ 07 정비 5단계 ═════════════════════════════════════════════════════ */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:20px; margin-top:48px; }
.stepcard{ min-width:0; position:relative; padding:24px 0 0; border-top:2px solid var(--n9); }
.stepcard__dot{ position:absolute; top:-7px; left:0; width:12px; height:12px; border-radius:50%; background:var(--red); }
.stepcard__n{ color:var(--n4); }
.stepcard__t{ margin:10px 0 0; font-size:21px; font-weight:600; letter-spacing:-.02em; }
.stepcard__b{ margin:10px 0 0; font-size:14px; line-height:1.8; color:var(--muted); }

/* ══ 08 실시간 입고 현황 ═══════════════════════════════════════════════ */
.lv__badge{ display:inline-flex; align-items:center; gap:8px; }
.lv__count{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 20px; }
.lv__big{ font-family:var(--display); font-size:48px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums; }
.lv__big small{ font-family:var(--font); font-size:18px; font-weight:500; margin-left:6px; }
.lv__by{ font-size:13px; color:var(--n3); letter-spacing:.02em; }
.lv__stage{
  margin-top:48px; border-top:1px solid var(--dark-line); border-bottom:1px solid var(--dark-line);
  min-height:96px; display:flex; align-items:center;
}
.lv__row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(12px,3vw,32px); width:100%; padding:20px 0; }
.lv__row.is-swap{ animation:kyLiveIn 450ms ease-out; }
@keyframes kyLiveIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.lv__bay{ padding:6px 10px; border:1px solid #ffffff59; border-radius:var(--radius); font-weight:600; white-space:nowrap; }
.lv__mid{ min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; }
.lv__model{ font-size:15px; color:var(--n3); }
.lv__job{ font-size:clamp(17px,2vw,26px); font-weight:600; letter-spacing:-.02em; }
.lv__st{ padding:6px 12px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; background:var(--n6); color:var(--n0); }
.lv__st.is-working{ background:var(--red); color:var(--n0); }
.lv__st.is-parts{ background:var(--warning); color:var(--n9); }
.lv__st.is-pickup{ background:var(--success); color:var(--n9); }
.lv__st.is-ready{ background:var(--n1); color:var(--n9); }
.lv__st.is-waiting{ background:var(--n6); color:var(--n0); }
.lv__empty{ padding:24px 0; font-size:15px; color:var(--n3); }
.lv__dots{ display:flex; gap:6px; margin-top:16px; }
.lv__dots i{ height:2px; width:12px; background:var(--n6); transition:all 300ms ease-out; }
.lv__dots i.is-on{ width:32px; background:var(--red-light); }
.lv__foot{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px; margin-top:12px; }
@media (max-width:640px){
  .lv__row{ grid-template-columns:auto 1fr; row-gap:10px; }
  .lv__st{ grid-column:1 / -1; justify-self:start; }
}

/* ══ 09 서비스 라인업 ══════════════════════════════════════════════════ */
.lineup{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:24px; margin-top:48px; }
.svcard{ min-width:0; display:flex; flex-direction:column; gap:14px; }
.svcard:hover{ color:var(--ink); }
.svcard__img{ display:block; aspect-ratio:4/5; background:var(--n1); border-radius:var(--radius); overflow:hidden; }
.svcard__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 400ms var(--ease); }
.svcard:hover .svcard__img img{ transform:scale(1.035); }
.svcard__ph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--n4); }
.svcard__h{ display:flex; gap:12px; align-items:baseline; padding-top:14px; border-top:1px solid var(--n9); }
.svcard__h .mono{ color:var(--red); }
.svcard__h b{ font-size:21px; font-weight:600; letter-spacing:-.02em; }
.svcard__d{ font-size:14px; line-height:1.8; color:var(--muted); }

/* ══ 10 숫자 ═══════════════════════════════════════════════════════════ */
.statgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:32px; }
.statcard{ min-width:0; padding-left:20px; border-left:2px solid var(--red); }
/* ⚠ nowrap 을 빼면 안 된다 — 카운트업 중 숫자 자릿수가 늘면 단위(+·%·년)가 아랫줄로 떨어진다 */
.statcard__v{ font-family:var(--display); font-size:clamp(52px,6vw,88px); font-weight:600; line-height:.95; letter-spacing:-.01em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.statcard__v small{ font-size:.5em; margin-left:4px; }
.statcard__l{ margin-top:12px; font-size:14px; color:var(--n6); }

/* ══ 11 차주 앱 ════════════════════════════════════════════════════════ */
.appsec{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:clamp(40px,6vw,96px); align-items:center; }
/* 사진은 배경이 비어 있는 PNG(폰 두 대) — 상자에 가두지 않고 그대로 띄운다.
   ⚠ 겹치면 안 되는 두 움직임: 틸트(JS → .appsec__tilt)와 숨쉬기(CSS → img). 한 요소에 같이 주면 서로 덮어쓴다. */
.appsec__shot{
  min-width:0; width:100%; position:relative; aspect-ratio:1/1; max-height:660px;
  display:flex; align-items:center; justify-content:center;
  perspective:1200px; perspective-origin:50% 45%;
}
.appsec__glow{
  position:absolute; inset:-6% -4%; pointer-events:none; opacity:.75;
  transition:opacity 500ms ease-out;
  background:
    radial-gradient(58% 54% at 50% 46%, #0e111012, #0e111000 70%),
    radial-gradient(36% 28% at 62% 76%, #c62f2318, #c62f2300 72%);
}
.appsec__shot:hover .appsec__glow{ opacity:1; }
.appsec__tilt{
  display:block; width:100%; height:100%; transform-style:preserve-3d; will-change:transform;
  transition:transform 600ms cubic-bezier(.2,.7,.2,1);
}
.appsec__shot.is-tilting .appsec__tilt{ transition:transform 120ms linear; }
.appsec__shot img{
  width:100%; height:100%; object-fit:contain; display:block;
  animation:kyAppFloat 7s ease-in-out infinite;
}
@keyframes kyAppFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@media (prefers-reduced-motion:reduce){ .appsec__shot img{ animation:none; } }
@media (max-width:719px){ .appsec__shot{ max-height:none; } }
.appsec__txt{ min-width:0; }
.appfeat{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:24px 32px; margin-top:40px; }
.appfeat__c{ position:relative; min-width:0; padding-top:14px; border-top:1px solid var(--line); }
/* 머리 선이 왼쪽에서 빨갛게 차오른다 — 카드마다 「지금 보는 것」이 또렷해진다 */
.appfeat__c::before{
  content:""; position:absolute; top:-1px; left:0; width:100%; height:1px; background:var(--red);
  transform:scaleX(0); transform-origin:left center; transition:transform 420ms var(--ease);
}
.appfeat__c:hover::before,.appfeat__c:focus-within::before{ transform:scaleX(1); }
.appfeat__c h3{ font-size:17px; font-weight:600; letter-spacing:-.02em; }
.appfeat__c p{ margin:8px 0 0; font-size:13px; line-height:1.8; color:var(--muted); }
.appbtns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:40px; align-items:center; }
.storebtn{
  display:inline-flex; align-items:center; gap:12px; min-height:52px; padding:0 20px;
  background:var(--n9); color:var(--n0); border:0; border-radius:var(--radius); font-size:14px; font-weight:600;
  transition:background var(--t),transform 120ms ease-out;
}
.storebtn:hover{ background:var(--n7); color:var(--n0); }
.storebtn:active{ transform:scale(.985); }
.storebtn__b{ padding:3px 7px; border-radius:999px; background:#ffffff26; font-size:10px; letter-spacing:.06em; font-weight:500; }
.dlmsg{ margin:16px 0 0; padding:14px 16px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); font-size:13px; line-height:1.7; color:var(--n6); max-width:52ch; animation:kyFadeUp 300ms ease-out both; }

/* ══ 12 이벤트 · 혜택 ══════════════════════════════════════════════════ */
.evsec{ padding-top:clamp(56px,7vw,88px); border-top:1px solid var(--line); }
.evgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:20px; margin-top:40px; }
.evcard{
  position:relative; min-width:0; display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); min-height:200px;
  transition:transform var(--t),border-color var(--t),box-shadow var(--t);
}
.evcard:hover{ border-color:var(--n9); color:var(--ink); transform:translateY(-4px); box-shadow:var(--shadow); }
.evcard__img{ display:block; aspect-ratio:16/9; background:var(--n1); overflow:hidden; }
.evcard__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 500ms var(--ease); }
.evcard:hover .evcard__img img{ transform:scale(1.04); }
.evcard__body{ display:flex; flex-direction:column; gap:10px; padding:24px; flex:1; }
.evcard--plain .evcard__body{ padding:28px 24px; }
.evcard__period{ color:var(--red); font-weight:600; }
.evcard__t{ font-size:21px; font-weight:600; line-height:1.3; letter-spacing:-.02em; }
.evcard__d{ font-size:14px; line-height:1.8; color:var(--muted); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.evcard__go{ margin-top:auto; padding-top:8px; font-size:13px; font-weight:600; }
/* 캠페인이 한 장뿐이면 칸 하나가 1,320px 를 다 먹어 배너가 740px 높이까지 커졌다 (2026-10-08).
   1024px 이상에서는 배너 왼쪽 · 글 오른쪽 가로 카드로. 배너는 글자가 든 그림이라 16:9 그대로 — 자르지 않는다. */
@media (min-width:1024px){
  .evgrid > .evcard:only-child:not(.evcard--plain){ flex-direction:row; }
  .evgrid > .evcard:only-child .evcard__img{ flex:0 0 52%; align-self:flex-start; }
  .evgrid > .evcard:only-child .evcard__body{ justify-content:center; gap:12px; padding:clamp(28px,4vw,56px); }
  .evgrid > .evcard:only-child .evcard__t{ font-size:clamp(22px,2.2vw,30px); }
  .evgrid > .evcard:only-child .evcard__go{ margin-top:8px; }   /* 글을 가운데로 모은다 — 「자세히 보기」를 바닥에 붙이지 않는다 */
}
.evcard__badge{
  position:absolute; top:12px; right:12px; padding:5px 9px; border-radius:var(--radius);
  background:var(--red); color:var(--n0); font-weight:600;
}
.evempty{ margin-top:40px; padding:clamp(28px,4vw,48px); border:1px dashed var(--line); border-radius:var(--radius); text-align:center; }
.evempty b{ font-size:20px; font-weight:600; letter-spacing:-.02em; }
.evempty p{ margin:10px auto 0; max-width:52ch; font-size:14px; line-height:1.85; color:var(--muted); }
.evempty__btns{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:20px; }

/* ══ 13 고객 라운지 ════════════════════════════════════════════════════ */
.lchips{ display:flex; flex-wrap:wrap; gap:8px; }
.lchip{
  min-height:40px; padding:0 16px; display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--n9); border-radius:999px; font-size:13px; font-weight:600;
}
.lchip svg{ width:16px; height:16px; }
/* 사진에 마우스를 올리면 1.06배 + 떠오름 그림자(--float-shadow · 위 약 42px · 아래 약 99px 번짐).
   전엔 위 20 · 아래 28px 에서 잘려 그림자 끝이 일자로 끊기고 모서리에 회색 귀가 생겼다 (2026-10-08).
   번짐이 다 들어가게 위 64 · 아래 104px 를 두고, 늘어난 만큼 바깥 여백을 빼서 자리·간격은 전과 같다. */
.mqwrap{ overflow:hidden; margin:4px 0 -76px; padding:64px 0 104px; }
.mq{ display:flex; gap:20px; width:max-content; will-change:transform; animation:kyMarquee 46s linear infinite; }
.mqwrap:hover .mq,.mqwrap:focus-within .mq,.mq.is-hold{ animation-play-state:paused; }
@keyframes kyMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.mqcard{
  flex:0 0 auto; margin:0; width:clamp(280px,34vw,520px); aspect-ratio:4/3; overflow:hidden;
  background:var(--n2); border-radius:var(--radius); position:relative;
  transition:transform 250ms ease-out,box-shadow 250ms ease-out;
}
.mqcard img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }   /* 커지는 동안에도 모서리가 각지지 않게 */
.mqcard:hover{ transform:scale(1.06) translateY(-6px); box-shadow:var(--float-shadow); z-index:2; }
@media (prefers-reduced-motion:reduce){
  .mqwrap{ overflow-x:auto; }
  .mq{ animation:none; }
}

/* ══ 14 오시는 길 ══════════════════════════════════════════════════════ */
.visit{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:clamp(32px,5vw,80px); }
.visit__txt{ min-width:0; }
.vdl{ margin:40px 0 0; display:grid; grid-template-columns:auto 1fr; gap:18px 28px; font-size:15px; line-height:1.7; }
.vdl dt{ color:var(--muted); padding-top:4px; }
.vdl dd{ margin:0; }
.vdl dd b{ font-weight:500; display:inline; }
.vdl dd span{ display:block; font-size:13px; color:var(--muted); }
.vdl dd span.inl{ display:inline; }
.visit__btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }
.visit__ways{ display:flex; flex-wrap:wrap; gap:20px; margin-top:24px; font-size:13px; color:var(--muted); }
.visit__ways a{ border-bottom:1px solid var(--line); }
/* ⚠ width:100% 를 빼면 안 된다 — aspect-ratio 와 min-height 를 같이 주면 브라우저가
   높이에서 너비를 되계산해(240×1.6=384px) 칸 밖으로 삐져나간다 (2026-09-21 확인). */
.visit__map{ min-width:0; width:100%; aspect-ratio:16/10; background:var(--n1); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; position:relative; }
@media (max-width:719px){ .visit__map{ aspect-ratio:auto; height:280px; } }
.visit__scale{ position:absolute; inset:0; transform-origin:0 0; }
.visit__map .root_daum_roughmap{ width:640px !important; height:360px !important; }
.visit__map .wrap_controllers{ display:none !important; }

/* ══ 15 마무리 CTA ═════════════════════════════════════════════════════ */
.cta{ background:var(--red); color:var(--n0); padding:clamp(64px,9vw,112px) 0; }
.cta__in{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:32px; }
.cta__eye{ color:#ffffffd9; }
.cta__h{ margin:0; font-size:clamp(32px,3.8vw,56px); font-weight:500; line-height:1.25; letter-spacing:-.04em; max-width:22ch; }

/* ══ 인증서 라이트박스 ═════════════════════════════════════════════════ */
.lb{
  position:fixed; inset:0; z-index:130; display:flex; align-items:center; justify-content:center;
  background:#0e1110ef; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity 320ms ease-out; cursor:zoom-out;
}
.lb.is-on{ opacity:1; }
.lb__fig{
  position:relative; margin:0; height:min(84vh,calc((100vw - 120px) * 297 / 210)); aspect-ratio:210/297;
  border:8px solid var(--n0); background:var(--n9); box-shadow:0 40px 120px #000000b3;
  will-change:transform; transform-origin:0 0; overflow:hidden; cursor:default;
}
.lb__fig img{ width:100%; height:100%; object-fit:contain; background:#fff; display:block; }
.lb__cap{
  position:absolute; left:50%; bottom:20px; translate:-50% 0; max-width:min(90vw,60ch); text-align:center;
  font-size:13px; line-height:1.7; color:var(--n2); opacity:0; transition:opacity 400ms ease-out 240ms;
}
.lb.is-on .lb__cap{ opacity:1; }
.lb__cap b{ display:block; font-size:15px; font-weight:600; color:var(--n0); }
.lb__cap span{ font-family:var(--meta); font-size:11px; letter-spacing:.12em; color:var(--n4); }
.lb__close,.lb__nav{
  position:absolute; z-index:2; width:52px; height:52px; border-radius:50%;
  background:#ffffff14; border:1px solid var(--dark-line); color:var(--n0); font-size:20px;
  display:flex; align-items:center; justify-content:center; opacity:0;
  transition:opacity 300ms ease-out 200ms,background var(--t),transform 120ms ease-out;
}
.lb.is-on .lb__close,.lb.is-on .lb__nav{ opacity:1; }
.lb__close:hover,.lb__nav:hover{ background:var(--red); }
.lb__close:active,.lb__nav:active{ transform:scale(.94); }
.lb__close{ top:20px; right:20px; }
.lb__nav--prev{ left:clamp(8px,2vw,28px); top:50%; translate:0 -50%; }
.lb__nav--next{ right:clamp(8px,2vw,28px); top:50%; translate:0 -50%; }
.lb__count{ display:none; }
/* 폰: 단추는 아래 가운데(엄지 범위) ← ✕ → · 번호는 위 가운데 · 설명은 단추 위 */
@media (max-width:719px){
  .lb__fig{ height:auto; width:min(84vw,460px); max-height:calc(100dvh - 230px); aspect-ratio:210/297; }
  .lb__fig img{ height:100%; }
  .lb__close,.lb__nav{ top:auto; bottom:calc(36px + env(safe-area-inset-bottom)); translate:none; width:48px; height:48px; right:auto; }
  .lb__nav--prev{ left:calc(50% - 88px); }
  .lb__close{ left:50%; translate:-50% 0; background:var(--n0); color:var(--n9); border-color:var(--n0); }
  .lb__close:hover{ background:var(--n0); }
  .lb__nav--next{ left:calc(50% + 40px); }
  .lb__cap{ bottom:calc(100px + env(safe-area-inset-bottom)); max-width:88vw; }
  .lb__cap span{ display:none; }
  .lb__count{ display:block; position:absolute; top:calc(56px + env(safe-area-inset-top)); left:0; right:0; text-align:center; font-family:var(--meta); font-size:12px; font-weight:500; letter-spacing:.06em; color:var(--n3); }
}