/* ═══════════════════════════════════════════════════════════════════════════
   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); }
.hero__tags{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; 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); }
.hero__h1{ max-width:16ch; font-size:clamp(34px,6vw,72px); font-weight:500; line-height:1.19; letter-spacing:-.045em; }
/* 좁은 화면에서는 줄바꿈을 글에 맡긴다 — 넣어 둔 <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__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;
}
.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; }
.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); }

/* ══ 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; }
.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; }
.mqwrap{ overflow:hidden; margin-top:48px; padding:20px 0 28px; }
.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; }
.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:16px 0 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); }
}