/* ═══════════════════════════════════════════════════════════════════════════
   KY MOTORS — site.css (2026-08-26 라이트 리디자인 · 2026-09-09 재작성)
   ───────────────────────────────────────────────────────────────────────────
   ⚠ 이 파일은 2026-09-09 에 **원본을 잃고 다시 만든 것**이다.
     원본(96KB)은 서버에만 있었고 복구가 안 됐다. 마크업·콘텐츠·site.js 는 전부 살아 있어서
     그 마크업이 요구하는 클래스에 맞춰, 사장님이 8/26 에 남긴 스크린샷 2장
     (새홈페이지-PC.png · 새홈페이지-모바일.png)의 색·간격·구성을 그대로 보고 다시 짰다.
     색은 스크린샷에서 픽셀을 직접 뽑아 토큰으로 박았다(아래 팔레트 주석의 좌표 참고).

   구성: 00 기반(토큰·리셋·타이포·레이아웃·버튼·헤더·푸터) → 10 홈 → 20 서브페이지
        → 30 실시간 현황 → 40 예약·다운로드·AI Lab
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 팔레트 ── 스크린샷 실측값
   #FFFFFF 본문 배경 · #F4F5F6 회색 섹션 · #F7F8F9 사진 자리 · #E11B12 브랜드 레드
   #FDEEED 연분홍 아이콘칩 · #171819 다크 카드 · #1C1F24 다크 밴드/푸터 · #0A0C10 제목 글자 */
:root{
  --ink:        #0A0C10;   /* 제목 */
  --ink-80:     #23262c;   /* 본문 강조 */
  --ink-60:     #5b616b;   /* 본문 */
  --ink-45:     #868c96;   /* 보조 */
  --ink-30:     #aeb3bb;   /* 흐린 것 */

  --bg:         #FFFFFF;
  --bg-soft:    #F4F5F6;   /* sec--cream */
  --bg-ph:      #F7F8F9;   /* 사진 준비 중 */
  --line:       #E6E8EB;
  --line-soft:  #F0F1F3;

  --red:        #E11B12;
  --red-hover:  #C4150D;
  --red-soft:   #FDEEED;   /* 아이콘칩·배지 바탕 */
  --red-line:   #F7C9C6;

  --dark:       #1C1F24;   /* CTA 밴드·푸터 */
  --dark-card:  #171819;   /* 혜택 카드 */
  --dark-line:  rgba(255,255,255,.12);
  --on-dark:    #F3F4F5;
  --on-dark-60: rgba(243,244,245,.62);
  --on-dark-40: rgba(243,244,245,.40);

  /* 옛 다크 디자인이 쓰던 이름 — 예약·다운로드·AI Lab 이 아직 참조한다.
     라이트 배경에서 읽히도록 값만 바꿔 둔다(클래스는 그대로 살린다). */
  --gold:       #B07C2E;
  --gold-soft:  #FBF3E6;
  --ink-70:     var(--ink-60);
  --ink-55:     var(--ink-60);
  --ink-40:     var(--ink-45);

  /* 자체 호스팅 Noto Sans KR(400·700) — assets/new/fonts.css.
     ⚠ 400/700 두 굵기뿐이라 700 초과 지정은 브라우저가 700 으로 맞춘다(합성 굵게 아님). */
  --kr: "Noto Sans KR", -apple-system, BlinkMacSystemFont,
        "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --mono: "SF Mono", ui-monospace, "Roboto Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22,.61,.36,1);

  --hd: 72px;              /* 헤더 높이 */
  --r: 14px;               /* 카드 라운드 */
}

/* ── 리셋 ── */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 15px/1.7 var(--kr); letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img, video, svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input, textarea, select{ font:inherit; color:inherit; }
ul, ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-.03em; line-height:1.22; word-break:keep-all; }
p{ margin:0; word-break:keep-all; }
hr{ border:0; border-top:1px solid var(--line); margin:0; }
:focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:6px; }
::selection{ background:var(--red); color:#fff; }

/* ── 레이아웃 ── */
.wrap{ width:min(1180px, 100% - clamp(40px,7vw,56px)); margin-inline:auto; }
.wrap--narrow{ width:min(880px, 100% - clamp(40px,7vw,56px)); margin-inline:auto; }
/* ⚠ position:relative 는 **필수**다 — ai-lab 의 `.ai-hero-bg{position:absolute;inset:0}` 가
   기준을 잃으면 문서 맨 위에 뷰포트 크기로 붙어 **페이지 첫 화면을 통째로 덮는다**(2026-09-09).
   여백은 8/22 원본값 그대로 — 8/26 스크린샷 실측(섹션 사이 ~160px)과도 맞는다. */
.sec{ padding-block:clamp(88px,13vw,160px); position:relative; }
.sec--tight{ padding-block:clamp(56px,8vw,100px); }
.sec + .sec{ border-top:1px solid var(--line-soft); }
.sec--cream + .sec, .sec + .sec--cream{ border-top:none; }
.sec--cream{ background:var(--bg-soft); }
.sec--deep{ background:var(--dark); color:var(--on-dark); }
.sec--deep h2, .sec--deep h3{ color:var(--on-dark); }
.sec--deep p{ color:var(--on-dark-60); }
.center{ text-align:center; }
.mt-3{ margin-top:18px; } .mt-4{ margin-top:26px; }
.muted{ color:var(--ink-45); }
.gold{ color:var(--red); }        /* 옛 이름 — 포인트색이 레드로 바뀌었다 */
.grad-gold{ color:var(--red); }

.grid{ display:grid; gap:clamp(14px,2vw,20px); }
/* ⚠ 격자 칸은 기본이 min-width:auto 라 안에 640px 짜리(카카오 지도 프레임) 하나만 들어가도
   칸이 그만큼 벌어져 화면 밖으로 밀린다. 모든 칸을 0까지 줄 수 있게 열어 둔다. */
.grid > *{ min-width:0; }
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--fit{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.grid--fit-sm{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.flex-wrapper{ display:flex; flex-wrap:wrap; gap:12px; }
.center .flex-wrapper, .center .chiprow{ justify-content:center; }
@media (max-width:720px){ .grid--2{ grid-template-columns:minmax(0,1fr); } }

/* ── 섹션 머리 ── 왼쪽 제목 / 오른쪽 설명 (스크린샷 구성) */
.slab{
  display:flex; align-items:center; gap:10px; margin:0 0 10px;
  font:700 12px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase;
  color:var(--red);
}
.slab::before{ content:""; width:22px; height:2px; background:var(--red); flex:none; }

.shead{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:clamp(16px,4vw,48px); align-items:end;
  margin:0 0 clamp(28px,4vw,44px);
}
.shead h2, .gtitle{ font-size:clamp(26px,4vw,40px); font-weight:800; letter-spacing:-.035em; }
.shead > p{ color:var(--ink-60); font-size:14.5px; line-height:1.8; }
/* 옛 섹션 머리 (ai-lab · download) — 왼쪽 eyebrow+h2 / 오른쪽 메타 라벨 */
.sec-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin:0 0 clamp(36px,6vw,64px);
}
.sec-head .eyebrow{ margin-bottom:10px; }
.sec-head .h2, .sec-head h2{ margin:0; }
/* 아래 다섯은 **8/22 원본 치수 그대로**다 — ai-lab · download · booking(page-head) 은
   8/26 리디자인에서 색만 바뀌고 크기는 그대로였다. 임의로 줄이면 그 페이지들이 작아 보인다. */
.statement{ max-width:1000px; }
.statement .st-line{
  display:block; font-weight:700;
  font-size:clamp(27px,6.2vw,58px); line-height:1.22; letter-spacing:-.03em; word-break:keep-all;
}
.lead{
  color:var(--ink-60); font-size:clamp(15.5px,2.4vw,18.5px); line-height:1.8;
  max-width:620px; word-break:keep-all;
}
.display{ margin:0; font-weight:800; font-size:clamp(40px,10.5vw,92px); line-height:1.05; letter-spacing:-.04em; word-break:keep-all; }
.display--md{ font-size:clamp(34px,8vw,68px); }
/* 아이브로 — 레드 + 앞선(dash). `style="justify-content:center"` 를 받으려면 inline-flex 여야 한다 */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font:700 12.5px/1 var(--kr); letter-spacing:.16em; text-transform:uppercase;
  color:var(--red); margin-bottom:clamp(16px,3vw,24px);
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--red); flex:none; }
.meta-label{ font:600 12px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--ink-45); }
.fineprint{ margin-top:14px; font-size:12.5px; line-height:1.75; color:var(--ink-45); }
.h2{ margin:0; font-weight:800; font-size:clamp(28px,6.4vw,54px); line-height:1.12; letter-spacing:-.03em; word-break:keep-all; }
@media (max-width:860px){
  .shead{ grid-template-columns:1fr; align-items:start; gap:14px; }
}

/* ── 버튼 ── 스크린샷: 빨강 채움 / 검정 채움 / 테두리 */
.btn{
  --bh:52px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--bh); padding:0 26px; border-radius:10px;
  font:700 14.5px/1 var(--kr); letter-spacing:-.01em; white-space:nowrap;
  border:1px solid transparent; transition:background .25s var(--ease), color .25s, border-color .25s, transform .12s;
}
.btn:active{ transform:translateY(1px); }
.btn svg{ width:18px; height:18px; flex:none; }
.btn--red{ background:var(--red); color:#fff; }
.btn--red:hover{ background:var(--red-hover); }
.btn--line{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--line:hover{ background:var(--ink); color:#fff; }
.btn--ghost{ background:#fff; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--ink); }
.btn--sm{ --bh:40px; padding:0 16px; font-size:13px; border-radius:9px; }
/* 어두운 바탕 위 */
.sec--deep .btn--line, .ctaband .btn--line, .lv-app .btn--line, .dlband .btn--line{ color:#fff; border-color:rgba(255,255,255,.45); }
.sec--deep .btn--line:hover, .ctaband .btn--line:hover, .lv-app .btn--line:hover{ background:#fff; color:var(--ink); }
.chiprow{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

/* 옛 이름(알약) — 예약·다운로드·AI Lab 이 아직 쓴다 */
.pill{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:17px 34px; border-radius:999px; cursor:pointer; white-space:nowrap;
  font:700 15px/1 var(--kr); letter-spacing:-.01em; border:1px solid transparent;
  transition:transform .35s var(--ease), background .3s, color .3s, border-color .3s, opacity .3s;
}
.pill:hover{ transform:translateY(-2px); }
.pill:active{ transform:scale(.97); }
@media (prefers-reduced-motion:reduce){ .pill, .pill:hover, .pill:active{ transform:none; transition:none; } }
.pill--gold{ background:var(--red); color:#fff; }
.pill--gold:hover{ background:var(--red-hover); }
.pill--light{ background:var(--ink); color:#fff; }
.pill--light:hover{ background:#000; }
.pill--ghost{ background:#fff; color:var(--ink); border-color:var(--line); }
.pill--ghost:hover{ border-color:var(--ink); }
.pill--kakao{ background:#FEE500; color:#191600; }
.pill--lg{ padding:21px 46px; font-size:16.5px; }
.pill--sm{ padding:12px 22px; font-size:13px; }
.pill--dark{ background:var(--dark); color:#fff; }
.pill--block{ display:flex; width:100%; }
/* 어두운 섹션 위에서는 흰 채움이 아니라 테두리 알약 */
.sec--deep .pill--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.sec--deep .pill--ghost:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.store-btn{
  display:inline-flex; align-items:center; gap:10px; height:56px; padding:0 22px;
  border-radius:12px; background:var(--ink); color:#fff; font-weight:700;
}
.store-btn:hover{ background:#000; }

/* ── 빈 상태 ── */
.empty-box{
  padding:clamp(28px,5vw,46px) clamp(20px,4vw,36px); text-align:center;
  border:1px dashed var(--line); border-radius:var(--r); background:var(--bg-soft);
}
.empty-box b{ display:block; font-size:16px; font-weight:800; margin-bottom:8px; }
.empty-box p{ color:var(--ink-60); font-size:14px; line-height:1.8; }
.empty{ color:var(--ink-45); font-size:14px; }
.notice{
  padding:12px 16px; border-radius:10px; background:var(--red-soft);
  border:1px solid var(--red-line); color:#8f1a13; font-size:13.5px; line-height:1.7;
}
.notice[hidden]{ display:none !important; }
.backlink{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:14px;
  font:600 13px/1 var(--kr); color:var(--ink-45);
}
.backlink:hover{ color:var(--red); }

/* ── 서브페이지 히어로 ── (about·notice·packages·parts·construction·campaign) */
.phero{
  padding:calc(var(--hd) + clamp(40px,7vw,72px)) 0 clamp(32px,5vw,56px);
  background:var(--bg-soft); border-bottom:1px solid var(--line);
}
.phero__in{ width:min(1180px, 100% - clamp(32px,6vw,56px)); margin-inline:auto; }
.phero__in h1{ font-size:clamp(28px,4.6vw,46px); margin:0 0 12px; }
.phero__in > p{ color:var(--ink-60); font-size:15px; line-height:1.85; max-width:62ch; }
.phero__in--split{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:center; }
/* 하위 페이지 상단이 텅 비어 보이던 것 — 히어로 바로 뒤 섹션 여백을 줄인다 (v3.6.0) */
.phero + .sec{ padding-top:clamp(44px,6vw,76px); }
.phero--star{ position:relative; overflow:hidden; }
/* 회전하는 삼각별(애니메이션 WebP · 무한 루프). 데스크톱만 움직이는 파일이 내려간다 —
   모바일·WebP 미지원은 정지 PNG. 장식이라 aria-hidden 이지만 **보이라고 넣은 이미지**다. */
.phero__star{ width:clamp(120px,16vw,190px); flex:none; }
.phero__star svg{ width:100%; height:auto; }
.phero__gen{ color:var(--ink-45); font-size:13.5px; margin-top:10px; }
@media (max-width:800px){
  /* 모바일은 움직이는 WebP(0.9MB) 대신 정지 PNG 가 내려간다 — 글 아래 130px 로 둔다 */
  .phero__in--split{ grid-template-columns:1fr; }
  .phero__star{ width:130px; margin-top:18px; }
}

/* ═══ 헤더 ═══ 흰 바탕 · 진한 글자 · 오른쪽 빨강 버튼 (스크린샷) */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:95; height:var(--hd);
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s;
}
.site-header.is-scrolled{ border-bottom-color:var(--line); box-shadow:0 6px 24px rgba(10,12,16,.05); }
.site-header__in{
  width:min(1320px, 100% - clamp(20px,4vw,48px)); margin-inline:auto; height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
/* 헤더·오버레이는 밝은 바탕이라 ky-logo-dark.svg(#16181c), 푸터는 ky-logo.svg(크림) 를 쓴다.
   SVG 파일의 색은 건드리지 않는다 — 파일 두 개로 나눠 두는 것이 원래 방식이다. */
.site-header__logo img{ height:14px; width:auto; }
.site-nav{ display:flex; align-items:center; gap:clamp(4px,1.6vw,20px); margin-inline:auto; }
.site-nav a{
  position:relative; padding:10px 10px; font:600 14.5px/1 var(--kr); color:var(--ink-60);
  transition:color .25s;
}
.site-nav a::after{
  content:""; position:absolute; left:10px; right:10px; bottom:2px; height:2px; background:var(--red);
  transform:scaleX(0); transform-origin:left center; transition:transform .3s var(--ease);
}
.site-nav a:hover, .site-nav a.is-active{ color:var(--ink); }
.site-nav a:hover::after, .site-nav a.is-active::after{ transform:scaleX(1); }
.site-header .btn{ --bh:42px; padding:0 20px; font-size:13.5px; }
.nav-burger{
  display:none; width:46px; height:46px; border-radius:12px; border:1px solid var(--line);
  align-items:center; justify-content:center; background:#fff; flex:none;
}
.nav-burger span{ position:relative; display:block; width:18px; height:1.8px; background:var(--ink); transition:background .3s; }
.nav-burger span::before, .nav-burger span::after{
  content:""; position:absolute; left:0; width:18px; height:1.8px; background:var(--ink);
  transition:transform .35s var(--ease), top .35s var(--ease);
}
.nav-burger span::before{ top:-6px; } .nav-burger span::after{ top:6px; }
.nav-burger.is-open span{ background:transparent; }
.nav-burger.is-open span::before{ top:0; transform:rotate(45deg); }
.nav-burger.is-open span::after{ top:0; transform:rotate(-45deg); }

.nav-overlay{
  position:fixed; inset:0; z-index:94; display:flex; flex-direction:column;
  background:#fff; padding:calc(var(--hd) + 24px) clamp(24px,7vw,40px) 32px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s var(--ease), visibility .35s;
  overflow-y:auto; overscroll-behavior:contain;
}
.nav-overlay.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
.nav-overlay__bar{
  position:absolute; top:0; left:0; right:0; height:var(--hd);
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:clamp(20px,4vw,28px); border-bottom:1px solid var(--line);
}
.nav-overlay__bar img{ height:14px; }
.nav-close-group{ display:flex; align-items:center; gap:16px; }
/* 로고와 닫기 버튼 사이 세로 구분선 (v3.0.1) */
.nav-overlay__bar .nav-close-group::before{ content:""; width:1px; height:26px; background:var(--line); }
.nav-overlay__bar .nav-burger{ display:inline-flex; }
.nav-overlay a.ov-link{
  display:flex; align-items:baseline; gap:14px; padding:clamp(13px,2.4vh,20px) 0;
  font:800 clamp(24px,6.4vw,34px)/1.15 var(--kr); letter-spacing:-.035em;
  border-bottom:1px solid var(--line-soft);
  opacity:0; transform:translateY(14px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.nav-overlay a.ov-link .ov-no{ font:700 11.5px/1 var(--mono); letter-spacing:.14em; color:var(--red); }
.nav-overlay.is-open a.ov-link{ opacity:1; transform:none; }
.nav-overlay.is-open a.ov-link:nth-child(3){ transition-delay:.05s; }
.nav-overlay.is-open a.ov-link:nth-child(4){ transition-delay:.10s; }
.nav-overlay.is-open a.ov-link:nth-child(5){ transition-delay:.15s; }
.nav-overlay.is-open a.ov-link:nth-child(6){ transition-delay:.20s; }
.nav-overlay.is-open a.ov-link:nth-child(7){ transition-delay:.25s; }
.nav-overlay.is-open a.ov-link:nth-child(8){ transition-delay:.30s; }
.nav-overlay__foot{
  margin-top:auto; display:flex; gap:10px; flex-wrap:wrap;
  opacity:0; transition:opacity .5s var(--ease) .25s;
}
.nav-overlay.is-open .nav-overlay__foot{ opacity:1; }
@media (max-width:960px){
  .site-nav{ display:none; }
  .nav-burger{ display:inline-flex; }
}
@media (prefers-reduced-motion:reduce){
  .nav-overlay, .nav-overlay a.ov-link, .nav-overlay__foot{ transition:none; }
}

/* ═══ 하단 CTA 밴드 ═══ 검정 바탕 (스크린샷) */
.ctaband{ background:var(--dark); color:var(--on-dark); }
.ctaband__in{
  width:min(1180px, 100% - clamp(32px,6vw,56px)); margin-inline:auto;
  padding:clamp(40px,6vw,68px) 0;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center;
}
.ctaband h2{ color:#fff; font-size:clamp(22px,3.2vw,34px); margin:0 0 8px; }
.ctaband p{ color:var(--on-dark-60); font-size:14.5px; }
@media (max-width:800px){ .ctaband__in{ grid-template-columns:1fr; } }

/* ═══ 푸터 ═══ */
.site-footer{ background:var(--dark); color:var(--on-dark-60); border-top:1px solid var(--dark-line); }
.site-footer__in{
  width:min(1180px, 100% - clamp(32px,6vw,56px)); margin-inline:auto;
  padding:clamp(40px,6vw,64px) 0 clamp(24px,3vw,32px);
  display:grid; grid-template-columns:minmax(240px,1.5fr) repeat(4,minmax(0,1fr));
  gap:clamp(20px,3vw,36px);
}
.site-footer__brand img{ height:14px; margin-bottom:16px; }
.site-footer__brand p{ font-size:13px; line-height:1.9; color:var(--on-dark-60); }
.site-footer__sns{ display:flex; flex-wrap:wrap; gap:14px; margin-top:16px; font-size:13px; font-weight:600; color:var(--on-dark); }
.site-footer__sns a:hover{ color:var(--red); }
.fcol b{ display:block; font-size:13px; font-weight:700; color:var(--on-dark); margin-bottom:12px; }
.fcol a{ display:block; padding:5px 0; font-size:13px; color:var(--on-dark-60); }
.fcol a:hover{ color:#fff; }
.site-footer__legal{
  border-top:1px solid var(--dark-line); padding:18px 0 26px;
  display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between;
  font-size:12px; line-height:1.8; color:var(--on-dark-40);
}
.site-footer__legal a:hover{ color:var(--on-dark); }
@media (max-width:900px){
  .site-footer__in{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .site-footer__brand{ grid-column:1 / -1; }
}
@media (max-width:640px){
  /* 사업자 정보는 좁은 화면에서 두 덩어리가 좌우로 갈리면 읽기 나쁘다 — 왼쪽 정렬로 쌓는다 */
  .site-footer__legal{ display:block; }
  .site-footer__legal > div + div{ margin-top:12px; text-align:left !important; }
}

/* ── 스크롤 리빌 (site.js data-rv) ── */
[data-rv]{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--rvd, 0ms);   /* site.js 가 data-rv="120" 을 --rvd 로 넣어 준다 */
}
[data-rv].rv-in{ opacity:1; transform:none; }
.no-js [data-rv]{ opacity:1; transform:none; }
.no-motion [data-rv]{ opacity:1 !important; transform:none !important; transition:none !important; }

/* ═══ 모바일 하단 탭 바 ═══ (2026-08-26 디자인 · 720px 미만 전용)
   markup 은 includes/site-bottom.php. 예약 화면은 하단 고정 CTA 와 겹쳐서 감춘다. */
.ky-tabbar{ display:none; }
@media (max-width:720px){
  .ky-tabbar{
    position:fixed; left:0; right:0; bottom:0; z-index:90;
    display:grid; grid-template-columns:repeat(4,1fr);
    background:rgba(255,255,255,.96);
    -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px);
    border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .ky-tab{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    padding:9px 4px 10px; font:700 11px/1 var(--kr); letter-spacing:-.02em; color:var(--ink-45);
  }
  .ky-tab span{ font-size:17px; line-height:1; }
  .ky-tab--hot{ color:var(--red); }
  body.p-live .ky-tab[href="/live.php"],
  body.p-download .ky-tab[href="/download.php"],
  body.p-ailab .ky-tab[href="/ai-lab.php"]{ color:var(--ink); }
  /* 탭 바에 가려지지 않게 마지막 여백 확보 */
  .site-footer__legal{ padding-bottom:calc(26px + 58px + env(safe-area-inset-bottom)); }
  body.p-booking .ky-tabbar{ display:none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   10 — 홈(index.php)
   섹션 순서: 히어로 → 앱 배너 → 서비스 라인업 → 숫자 → WHY → 혜택 → 앱 →
              라운지 → 연락처·영업시간·오시는 길
   치수는 8/26 스크린샷(1440 뷰포트) 실측: wrap 1180 · 4열 카드 280 + 간격 20.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 히어로 ── 영상 위 어두운 그라디언트, 왼쪽 정렬 ── */
.nhero{
  position:relative; isolation:isolate;
  min-height:clamp(520px, 78vh, 760px);
  padding:calc(var(--hd) + clamp(40px,8vh,90px)) 0 clamp(48px,9vh,96px);
  display:flex; align-items:center;
  background:#0A0C10;
}
.nhero__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.nhero__media video, .nhero__media img{
  width:100%; height:100%; object-fit:cover; object-position:center;
}
/* 왼쪽이 진하고 오른쪽으로 옅어지는 이중 그라디언트 — 글자만 또렷하게 */
.nhero__shade{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(6,8,11,.86) 0%, rgba(6,8,11,.62) 42%, rgba(6,8,11,.20) 78%, rgba(6,8,11,.10) 100%),
    linear-gradient(180deg, rgba(6,8,11,.42) 0%, rgba(6,8,11,0) 34%, rgba(6,8,11,.34) 100%);
}
.nhero__in{
  width:min(1180px, 100% - clamp(32px,6vw,56px)); margin-inline:auto;
  color:#fff; max-width:min(1180px, 100%);
}
.nhero__tag{
  display:inline-flex; align-items:center; height:32px; padding:0 16px; border-radius:999px;
  background:var(--red); color:#fff; font:700 12.5px/1 var(--kr); letter-spacing:-.01em;
  margin-bottom:clamp(18px,3vh,26px);
}
.nhero__in h1{
  color:#fff; font-size:clamp(32px,5.4vw,58px); font-weight:800;
  letter-spacing:-.04em; line-height:1.16; margin:0 0 clamp(14px,2.4vh,20px);
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.nhero__in > p{
  max-width:56ch; color:rgba(255,255,255,.86); font-size:clamp(14px,1.2vw,15.5px);
  line-height:1.85; margin:0 0 clamp(24px,4vh,34px);
}
.nhero__cta{ display:flex; flex-wrap:wrap; gap:10px; }
.nhero__cta .btn--line{ color:#fff; border-color:rgba(255,255,255,.72); background:rgba(255,255,255,.06); }
.nhero__cta .btn--line:hover{ background:#fff; color:var(--ink); border-color:#fff; }

/* ── 앱 다운로드 배너 ── 히어로 바로 아래 다크 밴드 + 레드 버튼 (v3.6.0) ── */
.dlband{ background:var(--dark); color:var(--on-dark); }
.dlband__in{
  width:min(1180px, 100% - clamp(32px,6vw,56px)); margin-inline:auto;
  padding:clamp(18px,2.6vw,26px) 0;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.dlband__txt{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.dlband__tag{
  font:700 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--red);
}
.dlband__txt b{ font-size:clamp(16px,2vw,19px); font-weight:800; letter-spacing:-.03em; color:#fff; }
.dlband__sub{ color:var(--on-dark-60); font-size:13px; line-height:1.6; }
.dlband__btn{
  display:inline-flex; align-items:center; gap:9px; flex:none;
  height:46px; padding:0 22px; border-radius:10px;
  background:var(--red); color:#fff; font:700 14px/1 var(--kr);
  transition:background .25s var(--ease);
}
.dlband__btn:hover{ background:var(--red-hover); }
.dlband__btn svg{ width:18px; height:18px; }

/* ── 서비스 라인업 ── 사진 카드 4열 ── */
.slgrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
/* ⚠ 이 카드는 **링크가 아니다**(v3.6.0) — 누를 수 있는 것처럼 보이면 안 되므로
   호버 반응(들림·그림자·확대)과 「자세히 보기」 줄을 일부러 두지 않는다. */
.slcard{
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
}
.slcard__img{ position:relative; aspect-ratio:4 / 3; background:var(--bg-ph); overflow:hidden; }
.slcard__img img{ width:100%; height:100%; object-fit:cover; }
/* 사진이 아직 없을 때 — 옅은 사선 무늬 + 안내 문구 (스크린샷과 동일) */
.slcard__ph{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--ink-30); font-size:12.5px; letter-spacing:-.01em;
  background:
    repeating-linear-gradient(135deg, rgba(10,12,16,.035) 0 1px, transparent 1px 9px),
    var(--bg-ph);
}
.slcard__body{ display:flex; flex-direction:column; gap:7px; padding:18px 18px 20px; flex:1; }
.slcard__cat{
  font:700 11px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--red);
}
.slcard__t{ font-size:17px; font-weight:800; letter-spacing:-.03em; }
.slcard__d{ color:var(--ink-60); font-size:13px; line-height:1.75; }

/* ── 숫자 스트립 ── 회색 띠 · 4칸 세로 구분선 ── */
.nums{ background:var(--bg-soft); border-block:1px solid var(--line); }
.nums__in{
  width:min(1180px, 100% - clamp(32px,6vw,56px)); margin-inline:auto;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
}
.nums__c{ padding:clamp(28px,4vw,44px) clamp(14px,2vw,24px); }
.nums__c + .nums__c{ border-left:1px solid var(--line); }
.nums__v{ display:flex; align-items:baseline; gap:3px; color:var(--red); }
.nums__v em{
  font-style:normal; font-size:clamp(28px,3.4vw,42px); font-weight:800; letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;
}
.nums__v small{ font-size:clamp(13px,1.4vw,17px); font-weight:800; letter-spacing:-.02em; }
.nums__l{ margin-top:8px; color:var(--ink-45); font-size:12.5px; letter-spacing:-.01em; }

/* ── WHY ── 사진 + 목록 2열 ── */
.why{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,4.2vw,50px); align-items:center;
}
.why__media{ position:relative; border-radius:var(--r); overflow:hidden; background:var(--bg-ph); }
.why__media img{ width:100%; height:100%; aspect-ratio:16 / 10; object-fit:cover; }
.why__media--wide img{ aspect-ratio:16 / 10; }
.why__badge{
  position:absolute; left:0; bottom:0; z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:76px; height:50px; padding:0 14px;
  background:var(--red); color:#fff; font:800 16px/1 var(--kr); letter-spacing:-.02em;
  border-radius:0 12px 0 var(--r);
}
.why__list{ display:flex; flex-direction:column; gap:22px; }
.whyrow{ display:flex; gap:14px; align-items:flex-start; }
/* 배경 없이 선/면만 — 아이콘 SVG 는 currentColor 라 color 하나로 색이 정해진다(v3.6.0) */
.whyrow__ic{
  flex:none; width:26px; height:26px; margin-top:1px;
  display:inline-flex; align-items:center; justify-content:center; color:var(--red);
}
.whyrow__ic svg{ width:22px; height:22px; }
.whyrow b{ display:block; font-size:15px; font-weight:800; letter-spacing:-.025em; margin-bottom:5px; }
.whyrow p{ color:var(--ink-60); font-size:13.5px; line-height:1.8; }

/* ── 진행 중인 혜택 ── 배너 이미지만 보여준다 (v3.7.0)
   관리자에 올린 배너에 이미 문구가 들어 있어, 위에 제목·설명·혜택가를 덮으면 글자가 두 번 겹친다.
   그래서 카드에는 이미지와 「진행 중」 배지(우측 상단 고정)뿐이다.
   ⚠ 배너는 가로로 긴 이미지(16:7)로 올려야 잘리지 않는다. */
.evgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.evcard{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--r); background:var(--bg-ph);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.evcard:hover{ transform:translateY(-3px); box-shadow:0 16px 38px rgba(10,12,16,.12); }
.evcard img{ width:100%; aspect-ratio:16 / 7; object-fit:cover; display:block; }
/* 배너가 없는 캠페인만 예외 — 브랜드 그라데이션 + 삼각별 워터마크 + 제목 한 줄 */
.evcard--plain{
  display:flex; flex-direction:column; justify-content:flex-end;
  aspect-ratio:16 / 7; padding:26px 28px; color:#fff;
  background:linear-gradient(135deg, #1C1F24 0%, #2a1113 58%, var(--red-hover) 140%);
}
.evcard__wm{
  position:absolute; right:-10px; bottom:-14px; width:150px; color:#fff; opacity:.08; pointer-events:none;
}
.evcard__wm svg{ width:100%; height:auto; }
.evcard__t{
  position:relative; z-index:1;
  font-size:clamp(17px,2.2vw,21px); font-weight:800; letter-spacing:-.03em; color:#fff;
}
.evcard__price{
  position:relative; z-index:1; margin-top:6px;
  font-size:15px; font-weight:800; letter-spacing:-.03em; color:#ffb3ae;
}
/* 「진행 중」은 배너 문구를 가리지 않게 **우측 상단 고정** */
.evcard__badge{
  position:absolute; right:14px; top:14px; z-index:2;
  display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:7px;
  background:var(--red); color:#fff; font:700 11.5px/1 var(--kr);
  box-shadow:0 2px 10px rgba(10,12,16,.28);
}

/* ── 앱 ── 다크 스테이지 + 붉은 글로우 위에 앱 목업 2대 (v3.6.0)
   설명은 「차주 앱」·「엔지니어 앱」 반투명 카드 2장.
   목업은 스크롤에 따라 위아래로 뜬다(site.js data-float) — 글로우는 반대 방향. */
.appsec{
  position:relative; overflow:hidden;
  padding:clamp(56px,8vw,104px) 0;
  background:var(--dark-card); color:var(--on-dark);
}
.appstage{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,400px);
  gap:clamp(28px,5vw,64px); align-items:center;
}
.appstage__txt h2{ color:#fff; font-size:clamp(26px,4vw,40px); margin:0 0 16px; }
.appstage__lead{ color:var(--on-dark-60); font-size:15px; line-height:1.85; max-width:60ch; }
.appcards{ display:flex; flex-direction:column; gap:14px; margin-top:26px; }
.appcard{
  padding:20px 22px; border-radius:var(--r);
  background:rgba(255,255,255,.05); border:1px solid var(--dark-line);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.appcard b{ display:block; color:#fff; font-size:15px; font-weight:800; letter-spacing:-.025em; margin-bottom:12px; }
.appcard ul{ display:flex; flex-direction:column; gap:8px; }
.appcard li{
  position:relative; padding-left:14px; color:var(--on-dark-60); font-size:13.5px; line-height:1.7;
}
.appcard li::before{
  content:""; position:absolute; left:2px; top:9px; width:4px; height:4px; border-radius:50%;
  background:var(--red);
}
.appstage__shot{ position:relative; }
.appstage__shot img{ width:100%; height:auto; position:relative; z-index:1; }
/* 목업 뒤 붉은 글로우.
   ⚠ **transform 을 쓰면 안 된다.** 이 요소와 목업(.appstage__shot)에는 `data-float` 가 붙어 있어
     site.js 가 스크롤할 때마다 `style.transform` 을 덮어쓴다(4.6 스크롤 플로트).
     translate(-50%,-50%) 로 중앙을 잡아 두면 첫 스크롤에 그게 지워져 글로우가 오른쪽 아래로 튄다
     (2026-09-09 실제로 그렇게 났다). 그래서 가운데 정렬을 **음수 마진**으로 한다.
     margin 의 % 는 가로 기준이라, aspect-ratio:1 인 이 상자에는 -65% 가 세로에도 정확히 절반이다. */
.appstage__glow{
  position:absolute; left:50%; top:50%; z-index:0; width:130%; aspect-ratio:1;
  margin-left:-65%; margin-top:-65%;
  background:radial-gradient(circle, rgba(225,27,18,.34) 0%, rgba(225,27,18,.12) 34%, rgba(225,27,18,.04) 55%, transparent 72%);
  pointer-events:none;
}
/* 어두운 바탕이라 slab·버튼을 밝은 쪽으로 */
.appsec .slab, .slab--light{ color:#ff6a62; }
.appsec .slab::before, .slab--light::before{ background:var(--red); }
.appsec .btn--line{ color:#fff; border-color:rgba(255,255,255,.45); }
.appsec .btn--line:hover{ background:#fff; color:var(--ink); border-color:#fff; }

/* ── 고객 라운지 ── 글 + 사진 격자 ── */
.lounge{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,4.5vw,60px); align-items:center;
}
.lounge__txt h2{ font-size:clamp(26px,4vw,40px); margin:0 0 14px; }
.lounge__lead{ color:var(--ink-60); font-size:14.5px; line-height:1.85; }
.lchips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.lchip{
  display:inline-flex; align-items:center; gap:7px;
  height:38px; padding:0 14px; border-radius:10px;
  background:#fff; border:1px solid var(--line);
  font:700 12.5px/1 var(--kr); letter-spacing:-.01em;
}
.lchip__ic{ display:inline-flex; color:var(--red); }
.lchip__ic svg{ width:15px; height:15px; }
.lgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.lshot{
  margin:0; border-radius:12px; overflow:hidden; background:var(--bg-ph);
  aspect-ratio:4 / 3;
  background-image:repeating-linear-gradient(135deg, rgba(10,12,16,.03) 0 1px, transparent 1px 9px);
}
.lshot img{ width:100%; height:100%; object-fit:cover; }
.lgrid > .lshot:first-child:last-child{ grid-column:1 / -1; aspect-ratio:16 / 9; }

/* ── 연락처 ── */
.telgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.telcard{
  padding:18px 20px 20px; border:1px solid var(--line); border-radius:12px; background:#fff;
  transition:border-color .25s, box-shadow .3s var(--ease);
}
.telcard:hover{ border-color:#d8dbe0; box-shadow:0 10px 26px rgba(10,12,16,.06); }
.telcard small{
  display:flex; align-items:center; gap:6px; color:var(--ink-45); font-size:12.5px; margin-bottom:9px;
}
.telcard b{ display:block; font-size:clamp(17px,2vw,21px); font-weight:800; letter-spacing:-.03em; }
.telcard b a{ display:inline-block; }
.telcard__kic{ display:inline-flex; }
.telcard__kic svg{ width:15px; height:15px; }
/* 통짜 노랑을 쓰면 카드 하나만 튄다 — 흰 카드에 좌측 3px 카톡 노랑 띠만 (v3.7.2) */
.telcard--kakao{ border-left:3px solid #FEE500; }
.telcard--kakao .telcard__kic{ color:#3C1E1E; }
.telcard--hot{ background:var(--red); border-color:var(--red); color:#fff; }
.telcard--hot small{ color:rgba(255,255,255,.82); }
.telcard--hot b{ color:#fff; }
.telcard--hot:hover{ background:var(--red-hover); border-color:var(--red-hover); box-shadow:0 12px 28px rgba(225,27,18,.24); }

/* ── 영업시간 표 ── */
.hours{ border:1px solid var(--line); border-radius:12px; background:#fff; overflow:hidden; }
.hours__h{
  display:flex; align-items:center; gap:8px; padding:13px 18px;
  background:#FAFAFB; border-bottom:1px solid var(--line);
  font:800 14px/1 var(--kr); letter-spacing:-.025em;
}
.hours__h i{ width:7px; height:7px; border-radius:2px; background:var(--red); flex:none; }
.hours__r{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 18px; font-size:13.5px;
}
.hours__r + .hours__r{ border-top:1px solid var(--line-soft); }
.hours__r span:first-child{ color:var(--ink-60); }
.hours__r span:last-child{ font-weight:700; letter-spacing:-.02em; }

/* ── 지도 ── site.js 가 #kakaoMapScale 을 transform: scale() 로 맞춘다 ── */
.map-card{ min-width:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--bg-ph); }
.map-card__wrap{ position:relative; width:100%; min-width:0; overflow:hidden; }
.map-card__scale{ width:640px; height:360px; transform-origin:0 0; }
.map-card__scale .root_daum_roughmap{ width:640px !important; }
.root_daum_roughmap .wrap_map{ height:360px !important; }
/* 다음 지도 위젯이 붙이는 하단 로고 줄 — 카드 안에서 튀지 않게 */
.root_daum_roughmap .wrap_btn_zoom{ z-index:2; }

/* ── 주소 줄 ── */
.addr{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 18px; border:1px solid var(--line); border-radius:12px; background:#fff;
}
/* 배경 없이 빨간 아이콘만 (v3.7.2) */
.addr__ic{
  flex:none; display:inline-flex; align-items:center; justify-content:center; color:var(--red);
}
.addr__ic svg{ width:26px; height:26px; }
.addr__t{ min-width:0; flex:1; }
.addr__t small{
  display:block; font:700 10.5px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-45); margin-bottom:5px;
}
.addr__t b{ font-size:14.5px; font-weight:700; letter-spacing:-.025em; }
.addr__btns{ display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }

/* ═══ 반응형 ═══ */
@media (max-width:1080px){
  .slgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .appstage{ grid-template-columns:1fr; }
  .appstage__shot{ max-width:340px; margin-inline:auto; }
}
@media (max-width:900px){
  .why, .lounge{ grid-template-columns:1fr; }
  .telgrid{ grid-template-columns:1fr; }
  .nums__in{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .nums__c:nth-child(odd){ border-left:0; }
  .nums__c:nth-child(n+3){ border-top:1px solid var(--line); }
}
@media (max-width:720px){
  .slgrid{ grid-template-columns:1fr; }
  .evgrid{ grid-template-columns:1fr; }
  .dlband__in{ flex-direction:column; align-items:stretch; }
  .dlband__btn{ justify-content:center; }
  .addr__btns{ margin-left:0; width:100%; }
  .addr__btns .btn{ flex:1; }
  .nhero__cta .btn{ flex:1; min-width:150px; }
}

/* 숫자 카운트업 대상 (site.js 가 .cnt[data-to] 를 찾는다) */
.cnt{ font-style:normal; font-variant-numeric:tabular-nums; }
/* ═══════════════════════════════════════════════════════════════════════════
   20 — 서브페이지 (about · campaign · notice · packages · parts · construction
        · more · privacy)  ※ 홈과 같은 카드 언어를 그대로 쓴다.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── about : 인사말 본문 ── */
.gbody{ display:flex; flex-direction:column; gap:14px; margin-top:18px; }
.gbody p{ color:var(--ink-60); font-size:14.5px; line-height:1.95; }
.gbody b{ color:var(--ink); font-weight:700; }

/* ── about : 연혁 ── */
.hist{ border-top:1px solid var(--line); }
.hist__r{
  display:grid; grid-template-columns:110px minmax(0,1fr); gap:18px; align-items:baseline;
  padding:16px 4px; border-bottom:1px solid var(--line);
}
.hist__y{ font:800 14px/1.4 var(--mono); letter-spacing:.02em; color:var(--red); }
.hist__t{ font-size:14.5px; line-height:1.75; color:var(--ink-80); }
@media (max-width:640px){
  .hist__r{ grid-template-columns:1fr; gap:6px; }
}

/* ── about : 공식 인증 ── */
.certgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.certcard{
  position:relative; padding:24px 22px 22px;
  border:1px solid var(--line); border-radius:var(--r); background:#fff;
  transition:border-color .25s, box-shadow .3s var(--ease);
}
.certcard:hover{ border-color:#d8dbe0; box-shadow:0 12px 30px rgba(10,12,16,.06); }
.certcard__n{
  display:block; margin-bottom:12px;
  font:700 11.5px/1 var(--mono); letter-spacing:.16em; color:var(--red);
}
.certcard b{ display:block; font-size:16px; font-weight:800; letter-spacing:-.03em; margin-bottom:8px; }
.certcard__d{ display:block; color:var(--ink-60); font-size:13.5px; line-height:1.8; }

/* ── about : 시설 ── */
.facgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; }
.faccard{
  margin:0; overflow:hidden; background:#fff;
  border:1px solid var(--line); border-radius:var(--r);
}
.faccard__img{ position:relative; aspect-ratio:4 / 3; background:var(--bg-ph); }
.faccard__img img{ width:100%; height:100%; object-fit:cover; }
.faccard__body{ padding:16px 18px 18px; }
.faccard__body b{ display:block; font-size:15.5px; font-weight:800; letter-spacing:-.03em; margin-bottom:6px; }
.faccard__body p{ color:var(--ink-60); font-size:13px; line-height:1.75; }

/* ── about : 정비 과정 5단계 ── */
.stepgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.stepcard{
  position:relative; padding:22px 20px;
  border:1px solid var(--line); border-radius:var(--r); background:#fff;
}
.stepcard::before{
  content:""; position:absolute; left:20px; right:20px; top:0; height:2px; background:var(--red);
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.stepcard:hover::before{ transform:scaleX(1); }
.stepcard__n{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:9px; margin-bottom:12px;
  background:var(--red-soft); color:var(--red); font:800 13px/1 var(--mono);
}
.stepcard b{ display:block; font-size:15px; font-weight:800; letter-spacing:-.03em; margin-bottom:7px; }
.stepcard p{ color:var(--ink-60); font-size:13px; line-height:1.75; }

/* ── campaign : 목록 ── */
.cpgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
.cpcard{
  display:flex; flex-direction:column; overflow:hidden; background:#fff;
  border:1px solid var(--line); border-radius:var(--r);
  transition:border-color .25s, box-shadow .3s var(--ease), transform .3s var(--ease);
}
.cpcard:hover{ border-color:#d8dbe0; box-shadow:0 16px 36px rgba(10,12,16,.08); transform:translateY(-3px); }
.cpcard__img{ aspect-ratio:16 / 9; background:var(--bg-ph); overflow:hidden; }
.cpcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.cpcard:hover .cpcard__img img{ transform:scale(1.03); }
.cpcard__b{ display:flex; flex-direction:column; gap:10px; padding:18px 20px 20px; flex:1; }
.cpcard__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.cpcard__badge{
  display:inline-flex; align-items:center; height:23px; padding:0 9px; border-radius:6px;
  background:var(--red); color:#fff; font:700 11.5px/1 var(--kr); flex:none;
}
.cpcard__tg{
  display:inline-flex; align-items:center; height:23px; padding:0 9px; border-radius:6px;
  background:var(--bg-soft); color:var(--ink-60); font:600 11.5px/1 var(--kr);
}
.cpcard__b > b{ font-size:17px; font-weight:800; letter-spacing:-.03em; line-height:1.4; }
.cpcard__b > p{ color:var(--ink-60); font-size:13.5px; line-height:1.75; }
.cpcard__row{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin-top:auto; padding-top:12px; border-top:1px solid var(--line-soft);
}
.cpcard__date{ color:var(--ink-45); font-size:12.5px; }
.cpcard__price{ color:var(--red); font-size:16px; font-weight:800; letter-spacing:-.03em; }
.cpcard__go{ font:700 12.5px/1 var(--kr); color:var(--ink-45); transition:color .25s; }
.cpcard:hover .cpcard__go{ color:var(--red); }

/* ── campaign : 상세 ── */
.cpview{ padding-top:4px; }
.cpview__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:14px; }
.cpview__date{ color:var(--ink-45); font-size:13px; }
.cpview > h1{ font-size:clamp(24px,3.6vw,36px); margin:0 0 12px; }
.cpview__lead{ color:var(--ink-60); font-size:15px; line-height:1.9; }
.cpview__price{
  display:flex; align-items:baseline; gap:12px; margin-top:18px;
  padding:16px 20px; border-radius:12px; background:var(--red-soft); border:1px solid var(--red-line);
}
.cpview__price span{ color:#8f1a13; font-size:13px; font-weight:700; }
.cpview__price b{ color:var(--red); font-size:clamp(20px,3vw,26px); font-weight:800; letter-spacing:-.035em; }
.cpview__img{ margin-top:22px; border-radius:var(--r); overflow:hidden; background:var(--bg-ph); }
.cpview__img img{ width:100%; height:auto; }
.cpview__body{ margin-top:22px; color:var(--ink-80); font-size:14.5px; line-height:1.95; }
.cpview__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }

/* ── notice : 블로그 카드 ── */
.nwgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.nwcard{
  display:flex; flex-direction:column; overflow:hidden; background:#fff;
  border:1px solid var(--line); border-radius:var(--r);
  transition:border-color .25s, box-shadow .3s var(--ease), transform .3s var(--ease);
}
.nwcard:hover{ border-color:#d8dbe0; box-shadow:0 14px 32px rgba(10,12,16,.07); transform:translateY(-3px); }
.nwcard__img{ position:relative; aspect-ratio:16 / 9; background:var(--bg-ph); overflow:hidden; }
.nwcard__img img{ width:100%; height:100%; object-fit:cover; }
.nwcard__b{ display:flex; flex-direction:column; gap:8px; padding:16px 18px 18px; flex:1; }
.nwcard__d{ font:600 12px/1 var(--mono); letter-spacing:.06em; color:var(--red); }
.nwcard__b b{ font-size:15px; font-weight:800; letter-spacing:-.03em; line-height:1.5; }
.nwcard__b p{ color:var(--ink-60); font-size:13px; line-height:1.75; }

/* ── packages ── */
.pkgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
.pkcard{
  display:flex; flex-direction:column; overflow:hidden; background:#fff;
  border:1px solid var(--line); border-radius:var(--r);
}
.pkcard__h{ padding:20px 22px 16px; border-bottom:1px solid var(--line); }
.pkcard__h b{ display:block; font-size:17px; font-weight:800; letter-spacing:-.03em; margin-bottom:6px; }
.pkcard__h p{ color:var(--ink-60); font-size:13px; line-height:1.7; }
.pkempty{ color:var(--ink-45); font-size:13px; padding:18px 22px; }
.pklist{ padding:8px 22px; }
.pklist li{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:9px 0; font-size:13.5px;
}
.pklist li + li{ border-top:1px solid var(--line-soft); }
.pklist__n{ font-weight:600; letter-spacing:-.02em; }
.pklist__n em{ font-style:normal; color:var(--red); font-weight:800; }
.pklist__p{ flex:none; font:600 11.5px/1.4 var(--mono); color:var(--ink-45); }
.pksum{ margin-top:auto; padding:14px 22px; background:#FAFAFB; border-top:1px solid var(--line); }
.pksum__r{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:5px 0; color:var(--ink-60); font-size:13px;
}
.pksum__t{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-top:8px; padding-top:10px; border-top:1px solid var(--line);
  font-size:13.5px; font-weight:700;
}
.pksum__t b{ color:var(--red); font-size:19px; font-weight:800; letter-spacing:-.035em; }
.pkcard > .btn{ margin:16px 22px 20px; }

/* ── parts ── */
.psearch{ display:flex; gap:10px; margin-top:20px; max-width:560px; }
.psearch input{
  flex:1; min-width:0; height:52px; padding:0 16px; border-radius:10px;
  border:1px solid var(--line); background:#fff; font-size:15px;
}
.psearch input:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(225,27,18,.10); }
.presult{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-bottom:18px;
}
.presult b{ font-size:16px; font-weight:800; letter-spacing:-.03em; }
.presult__hint{ color:var(--ink-45); font-size:12.5px; }
.ptgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
/* 카드가 짧아지면 아래 오버레이가 1px 비친다 — min-height 와 101% 이동이 짝이다 */
.ptcard{
  position:relative; overflow:hidden; min-height:124px;
  display:flex; flex-direction:column; gap:7px;
  padding:18px 20px 20px; background:#fff;
  border:1px solid var(--line); border-radius:12px;
  transition:border-color .25s, box-shadow .3s var(--ease), transform .3s var(--ease);
}
.ptcard:hover{ border-color:var(--red-line); box-shadow:0 12px 28px rgba(10,12,16,.07); transform:translateY(-2px); }
.ptcard__no{ font:700 12px/1.4 var(--mono); letter-spacing:.04em; color:var(--red); }
.ptcard__nm{ font-size:14.5px; font-weight:700; letter-spacing:-.025em; line-height:1.55; }
.ptcard__md{ color:var(--ink-45); font-size:12.5px; line-height:1.65; }
/* 마우스를 올리면 아래에서 올라오는 구매 띠 */
.ptcard__buy{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  padding:11px 0; background:var(--red); color:#fff; font:700 12.5px/1 var(--kr);
  transform:translateY(101%); transition:transform .28s var(--ease);
}
.ptcard:hover .ptcard__buy, .ptcard:focus-visible .ptcard__buy{ transform:none; }
@media (hover:none){ .ptcard__buy{ transform:none; } }
@media (prefers-reduced-motion:reduce){ .ptcard__buy{ transition:none; } }

/* ── construction ── */
.ctabs{ display:inline-flex; gap:6px; margin-top:22px; padding:5px; border-radius:12px; background:#fff; border:1px solid var(--line); }
.ctab{
  display:inline-flex; align-items:center; height:38px; padding:0 20px; border-radius:9px;
  font:700 13.5px/1 var(--kr); color:var(--ink-60); transition:background .25s, color .25s;
}
.ctab:hover{ color:var(--ink); }
.ctab.is-on{ background:var(--red); color:#fff; }
.cgroup{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin:34px 0 14px; padding-bottom:10px; border-bottom:1px solid var(--line);
}
.cgroup:first-child{ margin-top:0; }
.cgroup span{ font-size:17px; font-weight:800; letter-spacing:-.03em; }
.cgroup small{ color:var(--ink-45); font-size:12.5px; }
.cmgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
.cmcard{
  display:flex; flex-direction:column; gap:6px; padding:18px 20px 18px; background:#fff;
  border:1px solid var(--line); border-radius:12px;
  transition:border-color .25s, box-shadow .3s var(--ease), transform .3s var(--ease);
}
.cmcard:hover{ border-color:#d8dbe0; box-shadow:0 12px 28px rgba(10,12,16,.07); transform:translateY(-2px); }
.cmcard b{ font-size:15px; font-weight:800; letter-spacing:-.03em; }
.cmcard span{ color:var(--ink-60); font-size:13px; line-height:1.7; }
.cmcard em{ margin-top:6px; font:700 12.5px/1 var(--kr); font-style:normal; color:var(--ink-45); transition:color .25s; }
.cmcard:hover em{ color:var(--red); }
.kdgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.kdcard{ padding:18px 20px; background:#fff; border:1px solid var(--line); border-radius:12px; }
.kdcard b{ display:block; font-size:15px; font-weight:800; letter-spacing:-.03em; margin-bottom:7px; }
.kdcard p{ color:var(--ink-60); font-size:13px; line-height:1.75; }
.optbody{ color:var(--ink-80); font-size:15px; line-height:1.95; }
.optnote{
  margin-top:22px; padding:18px 20px; border-radius:12px;
  background:var(--bg-soft); border:1px solid var(--line);
}
.optnote b{ display:block; font-size:14.5px; font-weight:800; letter-spacing:-.03em; margin-bottom:7px; }
.optnote p{ color:var(--ink-60); font-size:13.5px; line-height:1.85; }
.optnote p b{ display:inline; font-size:inherit; color:var(--ink); }
.optmore{ margin:46px 0 16px; font-size:19px; font-weight:800; letter-spacing:-.03em; }

/* ── more : 관련 사이트 · 전체 서비스 ── */
.lkgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-top:14px; }
.lkcard, .svcard{
  display:flex; align-items:center; gap:14px; padding:16px 18px; background:#fff;
  border:1px solid var(--line); border-radius:12px;
  transition:border-color .25s, box-shadow .3s var(--ease), transform .3s var(--ease);
}
.lkcard:hover, .svcard:hover{ border-color:#d8dbe0; box-shadow:0 10px 26px rgba(10,12,16,.06); transform:translateY(-2px); }
.lkcard__ic, .svcard__ic{
  flex:none; width:38px; height:38px; border-radius:11px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--red-soft); color:var(--red); font-size:17px; line-height:1;
}
.lkcard b, .svcard b{ display:block; font-size:14.5px; font-weight:800; letter-spacing:-.03em; margin-bottom:3px; }
.lkcard span:not(.lkcard__ic), .svcard span:not(.svcard__ic){ color:var(--ink-45); font-size:12.5px; line-height:1.6; }
.svgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:14px; }

/* ── more : 공지 목록 · FAQ ── */
.ntlist{ margin-top:12px; border:1px solid var(--line); border-radius:12px; background:#fff; overflow:hidden; }
.ntrow{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 18px; font-size:13.5px;
}
.ntrow + .ntrow{ border-top:1px solid var(--line-soft); }
a.ntrow:hover{ background:#FAFAFB; }
.ntrow__t{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-weight:600; letter-spacing:-.02em;
}
.ntrow__d{ flex:none; color:var(--ink-45); font:600 12px/1 var(--mono); }
.faq{ margin-top:12px; border:1px solid var(--line); border-radius:12px; background:#fff; overflow:hidden; }
.faq__i + .faq__i{ border-top:1px solid var(--line-soft); }
.faq__i > summary{
  display:flex; align-items:center; gap:10px; padding:14px 18px; cursor:pointer;
  font-size:14px; font-weight:700; letter-spacing:-.025em; list-style:none;
}
.faq__i > summary::-webkit-details-marker{ display:none; }
.faq__i > summary::after{
  content:"＋"; margin-left:auto; color:var(--ink-30); font-weight:400; transition:transform .3s var(--ease);
}
.faq__i[open] > summary::after{ transform:rotate(45deg); color:var(--red); }
.faq__q{
  flex:none; width:22px; height:22px; border-radius:7px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--red-soft); color:var(--red); font:800 11px/1 var(--mono);
}
.faq__i > p{ padding:0 18px 16px 50px; color:var(--ink-60); font-size:13.5px; line-height:1.85; }

/* ── privacy : 법적 고지 ── */
.legal{
  width:min(860px, 100% - clamp(32px,6vw,56px)); margin-inline:auto;
  padding:calc(var(--hd) + clamp(40px,6vw,72px)) 0 clamp(48px,7vw,88px);
}
.legal h1{ font-size:clamp(26px,4vw,38px); margin:0 0 10px; }
.legal h2{ margin:38px 0 12px; font-size:18px; font-weight:800; letter-spacing:-.03em; }
.legal h3{ margin:22px 0 8px; font-size:15px; font-weight:800; letter-spacing:-.03em; }
.legal p, .legal li{ color:var(--ink-60); font-size:14px; line-height:1.95; }
.legal ul, .legal ol{ margin:10px 0; padding-left:18px; list-style:disc; }
.legal ol{ list-style:decimal; }
.legal li{ margin:4px 0; }
.legal table{ width:100%; border-collapse:collapse; margin:12px 0; font-size:13.5px; }
.legal th, .legal td{ border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top; }
.legal th{ background:var(--bg-soft); font-weight:700; }
.legal b, .legal strong{ color:var(--ink); font-weight:700; }
.legal a{ color:var(--red); text-decoration:underline; text-underline-offset:2px; }
.upd{ color:var(--ink-45); font-size:13px; margin-bottom:6px; }
.back{
  display:inline-flex; align-items:center; gap:6px; margin-top:40px;
  font:700 13.5px/1 var(--kr); color:var(--ink-45);
}
.back:hover{ color:var(--red); }
/* ═══════════════════════════════════════════════════════════════════════════
   30 — 실시간 차량 현황 (live.php)
   화면 상태는 #lvRoot 의 클래스 하나로만 갈린다 — (기본) / .is-found / .is-error.
   스테퍼(.lv-step*)와 요약줄(.lv-sum__*)은 site.js 가 만들어 붙인다.
   ═══════════════════════════════════════════════════════════════════════════ */
.lv{ background:var(--bg); }

/* ── 히어로 + 조회칸 ── */
.lv-hero{
  padding:calc(var(--hd) + clamp(36px,6vw,64px)) 0 clamp(28px,4vw,44px);
  background:var(--bg-soft); border-bottom:1px solid var(--line);
}
.lv-hero__h{ font-size:clamp(26px,4.4vw,42px); margin:0 0 10px; }
.lv-hero__sub{ color:var(--ink-60); font-size:14.5px; line-height:1.8; }

.lv-search{
  margin-top:clamp(20px,3vw,28px); padding:clamp(16px,2.6vw,22px);
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 10px 30px rgba(10,12,16,.05);
}
.lv-search__row{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto; gap:12px; align-items:end; }
.lv-f{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.lv-f__l{ font:700 12px/1 var(--kr); color:var(--ink-45); letter-spacing:-.01em; }
.lv-f__i{
  height:54px; padding:0 16px; border-radius:10px; background:#fff;
  border:1px solid var(--line); font-size:16px; font-weight:600; letter-spacing:-.02em;
  transition:border-color .2s, box-shadow .2s;
}
.lv-f__i::placeholder{ color:var(--ink-30); font-weight:400; }
.lv-f__i:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(225,27,18,.10); }
.lv-f--phone .lv-f__i{ font-family:var(--mono); letter-spacing:.14em; }
.lv.is-error .lv-f__i{ border-color:var(--red); }

.lv-go{
  position:relative; height:54px; padding:0 30px; border-radius:10px; flex:none;
  background:var(--red); color:#fff; font:700 15px/1 var(--kr);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .25s var(--ease), opacity .2s;
}
.lv-go:hover{ background:var(--red-hover); }
.lv-go[disabled]{ opacity:.62; cursor:default; }
.lv-go__b{ display:none; }
.lv.is-found .lv-go__a{ display:none; }
.lv.is-found .lv-go__b{ display:inline; }
.lv-go__spin{
  display:none; position:absolute; left:50%; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%;
  animation:kySpin .7s linear infinite;
}
.lv-go[aria-busy="true"] .lv-go__spin{ display:block; }
.lv-go[aria-busy="true"] .lv-go__a, .lv-go[aria-busy="true"] .lv-go__b{ visibility:hidden; }
@keyframes kySpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .lv-go__spin{ animation-duration:2.4s; } }

.lv-search__hint{ margin-top:12px; color:var(--ink-45); font-size:12.5px; line-height:1.7; }
.lv.is-found .lv-search__hint{ display:none; }
.lv-err{
  display:flex; align-items:flex-start; gap:9px; margin-top:12px;
  padding:12px 14px; border-radius:10px;
  background:var(--red-soft); border:1px solid var(--red-line); color:#8f1a13;
  font-size:13.5px; line-height:1.7;
}
.lv-err[hidden]{ display:none !important; }
.lv-err b{
  flex:none; width:19px; height:19px; margin-top:1px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--red); color:#fff; font:800 12px/1 var(--kr);
}

/* 모바일 요약 줄 — 조회에 성공하면 입력칸 대신 이 줄만 보여 준다 */
.lv-sum{ display:none; }
.lv-sum__p{ font-weight:800; letter-spacing:-.02em; }
.lv-sum__m{ margin-left:6px; color:var(--ink-45); font:600 12.5px/1 var(--mono); }
.lv-sum__b{
  margin-left:auto; height:36px; padding:0 14px; border-radius:9px;
  background:#fff; border:1px solid var(--line); font:700 12.5px/1 var(--kr); color:var(--ink);
}
.lv-sum__b:hover{ border-color:var(--ink); }

/* 신뢰 문구 2줄 */
.lv-trust{ display:flex; flex-direction:column; gap:9px; margin-top:16px; }
.lv-trust li{ display:flex; gap:10px; align-items:baseline; color:var(--ink-60); font-size:13px; line-height:1.75; }
.lv-trust strong{ color:var(--ink); font-weight:700; }
.lv-trust__n{ flex:none; font:700 11px/1.6 var(--mono); letter-spacing:.14em; color:var(--red); }

/* ── 진행 카드 ── */
.lv-panel{ padding:clamp(28px,4.5vw,52px) 0 clamp(44px,7vw,84px); }
.lv-card{
  position:relative; overflow:hidden;
  padding:clamp(20px,3.2vw,32px);
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 12px 34px rgba(10,12,16,.05);
}
.lv-card__bar{ position:absolute; inset:0 0 auto 0; height:3px; background:var(--line); }
.lv.is-found .lv-card__bar{ background:var(--red); }
.lv.is-error .lv-card__bar{ background:var(--ink-30); }
.lv-card__top{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-bottom:20px; border-bottom:1px solid var(--line-soft);
}
.lv-card__id{ min-width:0; }
.lv-eyebrow{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:9px;
  font:700 11.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--red);
}
.lv-eyebrow__s{ color:var(--ink-30); }
.lv-eyebrow__m{ font:600 12px/1 var(--kr); letter-spacing:-.01em; text-transform:none; color:var(--ink-45); }
.lv-eyebrow__m:empty{ display:none; }
/* 주인공은 진행 단계다 — 「지금 «정비 작업» 중입니다」를 크게 (v3.8.0) */
.lv-state{ font-size:clamp(21px,3.4vw,38px); font-weight:800; letter-spacing:-.035em; line-height:1.35; }
.lv-state small{ display:block; margin-top:9px; color:var(--ink-45); font-size:13.5px; font-weight:400; letter-spacing:-.01em; }
.lv:not(.is-found) .lv-state{ color:var(--ink-45); font-weight:700; font-size:clamp(15px,1.9vw,18px); }

.lv-badge{
  display:inline-flex; align-items:center; gap:9px; flex:none;
  height:44px; padding:0 18px; border-radius:999px;
  background:var(--bg-soft); border:1px solid var(--line);
  font:700 11.5px/1 var(--mono); letter-spacing:.14em; color:var(--ink-45);
}
.lv-badge__d{ width:8px; height:8px; border-radius:50%; background:var(--ink-30); flex:none; }
.lv-badge__s{ width:1px; height:14px; background:var(--line); }
.lv-badge__t{ font:600 12.5px/1 var(--kr); letter-spacing:-.01em; }
.lv.is-found .lv-badge{ background:var(--red-soft); border-color:var(--red-line); color:var(--red); }
.lv.is-found .lv-badge__d{ background:var(--red); animation:kyPulse 2s ease infinite; }
.lv.is-found .lv-badge__s{ background:var(--red-line); }
@keyframes kyPulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.75); } }
@media (prefers-reduced-motion:reduce){ .lv-badge__d, .lv-step__n::after{ animation:none !important; } }

/* ── 진행률 ── */
.lv-meter{ display:flex; align-items:center; gap:clamp(14px,3vw,26px); padding:22px 0 6px; }
.lv-meter__n{ display:flex; align-items:baseline; gap:2px; flex:none; color:var(--ink-30); }
.lv-meter__n em{
  font-style:normal; font-size:clamp(42px,7vw,88px); font-weight:800; letter-spacing:-.05em;
  line-height:1; font-variant-numeric:tabular-nums;
}
.lv-meter__n span{ font-size:clamp(16px,2vw,24px); font-weight:800; }
.lv.is-found .lv-meter__n{ color:var(--red); }
/* 조회 전에는 «—» 한 글자뿐이라 88px 이면 회색 막대처럼 보인다 — 그때만 줄인다 */
.lv:not(.is-found) .lv-meter__n em{ font-size:clamp(28px,3.6vw,48px); }
.lv-meter__b{ flex:1; min-width:0; }
.lv-bar{ height:14px; border-radius:999px; background:var(--bg-soft); overflow:hidden; }
.lv-bar i{
  display:block; height:100%; width:0; border-radius:999px; background:var(--red);
  transition:width .8s var(--ease);
}
.lv-meter__sc{
  display:flex; justify-content:space-between; margin-top:7px;
  font:600 11px/1 var(--mono); letter-spacing:.1em; color:var(--ink-30);
}

/* ── 단계 (site.js 가 그린다) ── */
.lv-steps{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; margin-top:26px; }
.lv-step{ position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:0 6px; }
.lv-step__line{
  position:absolute; left:calc(-50% + 16px); right:calc(50% + 16px); top:15px; height:2px;
  background:var(--line);
}
.lv-step:first-child .lv-step__line{ display:none; }
.lv-step.is-done .lv-step__line, .lv-step.is-run .lv-step__line{ background:var(--red); }
.lv-step__n{
  position:relative; z-index:1; flex:none;
  width:32px; height:32px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:2px solid var(--line); color:var(--ink-30);
  font:800 13px/1 var(--mono);
}
.lv-step.is-done .lv-step__n{ background:var(--red); border-color:var(--red); color:#fff; }
.lv-step.is-run .lv-step__n{ border-color:var(--red); color:var(--red); }
.lv-step.is-run .lv-step__n{ position:relative; }
.lv-step.is-run .lv-step__n::before{
  /* 퍼져나가는 링 — 지금 이 단계가 살아 있다는 신호 */
  content:""; position:absolute; inset:-2px; border-radius:50%;
  border:2px solid var(--red); animation:kyRing 2.4s var(--ease) infinite;
}
.lv-step.is-run .lv-step__n::after{
  content:""; width:10px; height:10px; border-radius:50%; background:var(--red);
}
@keyframes kyRing{
  0%{ transform:scale(1); opacity:.55; }
  70%{ transform:scale(1.85); opacity:0; }
  100%{ transform:scale(1.85); opacity:0; }
}
@media (prefers-reduced-motion:reduce){ .lv-step.is-run .lv-step__n::before{ animation:none; opacity:0; } }
.lv-step__b{ display:flex; flex-direction:column; gap:3px; }
.lv-step__t{ font-size:13px; font-weight:700; letter-spacing:-.025em; color:var(--ink-45); }
.lv-step__c{ font-size:11.5px; color:var(--ink-30); }
.lv-step.is-done .lv-step__t, .lv-step.is-run .lv-step__t{ color:var(--ink); }
.lv-step.is-run .lv-step__c{ color:var(--red); font-weight:700; }

.lv-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:26px; padding-top:16px; border-top:1px solid var(--line-soft);
  color:var(--ink-45); font-size:12.5px;
}
.lv-foot__u{ font:700 11.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-45); }
.lv-foot__u:empty{ display:none; }

/* ── 하단 앱 밴드 ── */
.lv-app{ background:var(--dark); color:var(--on-dark); }
.lv-app__in{
  padding:clamp(34px,5vw,58px) 0;
  display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
}
.lv-app__lab{ font:700 11px/1 var(--mono); letter-spacing:.2em; color:var(--red); margin-bottom:10px; }
.lv-app__in h2{ color:#fff; font-size:clamp(20px,3vw,30px); margin:0 0 8px; }
.lv-app__d{ color:var(--on-dark-60); font-size:14px; }
.lv-app__cta{ display:flex; gap:10px; flex-wrap:wrap; }
.lv-app__ghost, .lv-app__red{
  display:inline-flex; align-items:center; justify-content:center;
  height:50px; padding:0 24px; border-radius:10px; font:700 14.5px/1 var(--kr);
  border:1px solid transparent; transition:background .25s var(--ease), color .25s, border-color .25s;
}
.lv-app__ghost{ color:#fff; border-color:rgba(255,255,255,.42); }
.lv-app__ghost:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.lv-app__red{ background:var(--red); color:#fff; }
.lv-app__red:hover{ background:var(--red-hover); }

/* ═══ 반응형 ═══ */
@media (max-width:860px){
  .lv-search__row{ grid-template-columns:minmax(0,1fr) minmax(0,120px); }
  .lv-go{ grid-column:1 / -1; width:100%; }
  .lv-steps{ grid-template-columns:1fr; gap:0; }
  .lv-step{ flex-direction:row; align-items:flex-start; gap:14px; text-align:left; padding:0 0 18px 0; }
  .lv-step:last-child{ padding-bottom:0; }
  /* 세로 스테퍼 — 선을 노드 왼쪽 세로줄로 바꾼다 */
  .lv-step__n{ width:36px; height:36px; font-size:14px; }
  .lv-step__line{ left:16.5px; right:auto; top:auto; bottom:100%; width:3px; height:18px; }
  .lv-step:first-child .lv-step__line{ display:none; }
  .lv-step__b{ padding-top:5px; }
  .lv-card__top{ flex-direction:column; }
}
@media (max-width:640px){
  /* 조회 성공 시 입력칸을 접고 한 줄 요약만 */
  .lv.is-found .lv-search__row{ display:none; }
  .lv.is-found .lv-sum{
    display:flex; align-items:center; gap:8px;
    padding:12px 14px; border-radius:10px; background:var(--bg-soft); border:1px solid var(--line);
    font-size:14px;
  }
  .lv-app__cta .lv-app__ghost, .lv-app__cta .lv-app__red{ flex:1; }
}

/* 차량번호 칸은 조금 더 넓게 (한글 + 숫자) */
.lv-f--plate .lv-f__i{ letter-spacing:-.01em; }
/* ═══════════════════════════════════════════════════════════════════════════
   40 — 예약(booking) · 다운로드(download) · KY AI Lab
   이 세 페이지의 마크업은 8/22 그대로다. 클래스 이름을 하나도 바꾸지 않고
   **색만 라이트로** 옮겼다 — site.js 가 붙이는 상태 클래스(is-on · slot-on ·
   is-sel · is-today · is-half · is-closed · is-off)도 그대로 받는다.

   ⚠ display 를 지정한 요소는 `hidden` 속성이 무시된다(작성자 CSS가 UA 스타일을 이김).
     2026-08-21 에 입력도 없이 조회 스피너가 혼자 돌던 사고가 이것이었다.
     그래서 아래 요소마다 `[hidden]{display:none !important}` 를 **짝으로** 둔다.
     새 요소를 추가할 때도 반드시 같이 넣을 것.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 공통 폼 ── */
.field label{
  display:block; margin-bottom:9px;
  font:700 12px/1 var(--kr); letter-spacing:-.01em; color:var(--ink-45);
}
.field[hidden]{ display:none !important; }
.input{
  width:100%; padding:15px 16px; border-radius:12px;
  border:1px solid var(--line); background:#fff;
  font:400 15px/1.4 var(--kr); color:var(--ink); outline:none;
  transition:border-color .25s, box-shadow .25s;
}
.input::placeholder{ color:var(--ink-30); }
.input:focus{ border-color:var(--red); box-shadow:0 0 0 3px rgba(225,27,18,.10); }
textarea.input{ resize:vertical; min-height:110px; line-height:1.65; }
input[type="date"].input{ color-scheme:light; min-height:54px; }
.input--lg{ padding:17px 18px; border-radius:14px; font-size:16px; min-height:58px; }
textarea.input--lg{ min-height:104px; }
.form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:12px; }
.h3{ margin:0; font-weight:800; font-size:clamp(19px,3.4vw,24px); line-height:1.3; letter-spacing:-.03em; }

/* 동의 체크 */
.consent{
  display:flex; align-items:flex-start; gap:10px; cursor:pointer; text-align:left;
  font:400 13px/1.6 var(--kr); color:var(--ink-60);
}
.consent input{ width:17px; height:17px; margin-top:2px; flex:none; accent-color:var(--red); }
.consent a{ color:var(--red); text-decoration:underline; text-underline-offset:3px; }
.notice--warn{ background:#FFF6EC; border-color:#F3D2AE; color:#8a4b12; }

/* ── 예약 : 껍데기 ──
   ⚠ 순서 주의: booking.php 는 `sec page-sec page-booking` 를 함께 쓴다.
     .page-sec 의 padding 단축 속성이 뒤에 오면 .page-booking 의 padding-top 을 덮어
     고정 헤더 밑으로 진행바가 파고든다. 그래서 .page-sec 를 **먼저** 둔다. */
.page-sec{ padding:clamp(40px,6vw,72px) 0; }
.page-head{ margin-bottom:clamp(20px,4vw,32px); }
.page-booking{ padding-top:clamp(88px,13vh,112px); padding-bottom:clamp(24px,6vw,40px); }
@media (min-width:900px){ .page-booking{ padding-top:clamp(104px,13vh,140px); padding-bottom:56px; } }
.page-head .eyebrow{ margin-bottom:12px; }
.bk-shell{
  width:min(520px, 100% - clamp(32px,8vw,48px)); margin-inline:auto;
  display:flex; flex-direction:column; min-height:calc(100svh - 190px);
}

/* 상단 — 이전 버튼 + 진행 바 + n/4 */
.bk-top{ display:flex; align-items:center; gap:12px; margin-bottom:clamp(26px,6vw,38px); }
.bk-back[hidden]{ display:none !important; }
.bk-back{
  flex:none; width:34px; height:34px; border-radius:999px;
  border:1px solid var(--line); background:#fff; color:var(--ink-60);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .25s, border-color .25s, color .25s;
}
.bk-back:hover{ background:var(--bg-soft); border-color:var(--ink-30); color:var(--ink); }
.bk-prog{ flex:1 1 auto; display:flex; gap:5px; min-width:0; }
.bk-prog i{ flex:1 1 0; height:3px; border-radius:99px; background:var(--line); transition:background .45s var(--ease); }
.bk-prog i.is-on{ background:var(--red); }
.bk-count{ flex:none; font:700 11.5px/1 var(--mono); letter-spacing:.1em; color:var(--ink-30); }

/* 단계 전환 */
.bk-body{ overflow-x:clip; }
.bk-step{ display:none; }
.bk-step.is-on{ display:block; }
.bk-step.is-fwd{ animation:bkFwd .42s var(--ease) both; }
.bk-step.is-back{ animation:bkBack .42s var(--ease) both; }
@keyframes bkFwd{ from{ opacity:0; transform:translate3d(20px,0,0); } to{ opacity:1; transform:none; } }
@keyframes bkBack{ from{ opacity:0; transform:translate3d(-20px,0,0); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .bk-step.is-fwd, .bk-step.is-back{ animation:none; }
  .bk-prog i{ transition:none; }
}
.no-motion .bk-step.is-fwd, .no-motion .bk-step.is-back{ animation:none; }
.bk-view[hidden]{ display:none !important; }

/* 타이포 */
.bk-eyebrow{
  margin:0 0 14px; font:700 12px/1 var(--mono); letter-spacing:.18em;
  text-transform:uppercase; color:var(--red);
}
.bk-title{
  margin:0 0 12px; font-weight:800;
  font-size:clamp(26px,7vw,34px); line-height:1.3; letter-spacing:-.035em; word-break:keep-all;
}
.bk-sub{ margin:0 0 clamp(24px,5.5vw,32px); font:400 14.5px/1.75 var(--kr); color:var(--ink-60); word-break:keep-all; }
.bk-fine[hidden]{ display:none !important; }
.bk-fine{ margin:14px 0 0; font:400 11.5px/1.7 var(--kr); color:var(--ink-45); word-break:keep-all; }
.bk-textlink{
  display:inline-block; margin-top:18px;
  font:700 13.5px/1.5 var(--kr); color:var(--ink-45);
  text-decoration:underline; text-underline-offset:4px; transition:color .25s;
}
.bk-textlink:hover{ color:var(--red); }
.bk-fields{ display:flex; flex-direction:column; gap:16px; }

/* 방문 준비물 안내 — 예약 마지막 단계와 완료 화면에 같은 모양으로 둔다.
   빨간 왼쪽 띠 하나로 "읽고 가야 하는 줄"임을 표시하고, 개인정보 처리방침을 같은 상자 안에 둔다. */
.bk-bring{
  margin:18px 0 0; padding:14px 16px;
  border-left:3px solid var(--red); border-radius:0 10px 10px 0;
  background:var(--red-soft);
  display:flex; flex-direction:column; gap:6px; word-break:keep-all;
}
.bk-bring b{ font:700 14px/1.6 var(--kr); color:var(--ink); }
.bk-bring u{ text-underline-offset:3px; }
.bk-bring span{ font:400 13px/1.7 var(--kr); color:var(--ink-60); }
.bk-bring a{
  align-self:flex-start; margin-top:2px;
  font:700 12.5px/1.5 var(--kr); color:var(--red);
  text-decoration:underline; text-underline-offset:3px;
}

/* 소유 형태 3택 */
.own-label{ display:block; margin-bottom:9px; font:700 12.5px/1 var(--kr); color:var(--ink-45); }
.own-seg{ display:flex; flex-wrap:wrap; gap:8px; }
.own-chip{
  flex:0 1 auto; min-width:0; max-width:100%;
  padding:12px 14px; border-radius:999px;
  border:1px solid var(--line); background:#fff;
  font:600 13.5px/1.2 var(--kr); color:var(--ink-60); cursor:pointer; word-break:keep-all;
  transition:background .25s, border-color .25s, color .25s;
}
.own-chip:hover{ border-color:var(--ink-30); color:var(--ink); }
.own-chip.is-on{ background:var(--red); border-color:var(--red); color:#fff; font-weight:700; }
.own-hint[hidden]{ display:none !important; }
.own-hint{ margin-top:8px; font:400 12.5px/1.7 var(--kr); color:var(--ink-60); word-break:keep-all; }
.own-hint--muted{ margin-top:4px; color:var(--ink-45); }
.bk-step .field label{ text-transform:none; letter-spacing:-.01em; font-size:12.5px; }

/* ── 날짜 선택 + 달력 ── */
.date-btn{ display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; cursor:pointer; }
.date-btn .db-ph{ color:var(--ink-30); }
.date-btn .db-caret{ flex:none; color:var(--ink-30); transition:transform .3s var(--ease); }
.date-btn[aria-expanded="true"] .db-caret{ transform:rotate(180deg); }
.cal{ overflow:hidden; max-height:0; opacity:0; transition:max-height .5s var(--ease), opacity .4s var(--ease), margin-top .5s var(--ease); }
.cal.is-open{ max-height:620px; opacity:1; margin-top:12px; }
@media (prefers-reduced-motion:reduce){ .cal{ transition:none; } }
.cal__in{ border:1px solid var(--line); border-radius:16px; background:#fff; padding:clamp(12px,3vw,18px); }
.cal__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.cal__head b{ font:800 15px/1 var(--kr); letter-spacing:-.02em; }
.cal__nav{
  width:38px; height:38px; border-radius:999px; border:1px solid var(--line); background:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font:400 17px/1 var(--kr); color:var(--ink-60);
  transition:background .25s, border-color .25s, opacity .25s;
}
.cal__nav:hover{ background:var(--bg-soft); border-color:var(--ink-30); }
.cal__nav:disabled{ opacity:.28; cursor:default; background:none; }
.cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.cal__dow{ text-align:center; padding:8px 0 10px; font:700 10.5px/1 var(--mono); letter-spacing:.08em; color:var(--ink-30); }
.cal__dow--sun{ color:#d98a80; }
.cal__day{
  position:relative; min-height:42px; border-radius:999px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  font:600 13px/1 var(--kr); color:var(--ink-60);
  transition:background .2s, color .2s;
}
.cal__day:hover{ background:var(--bg-soft); }
.cal__day.is-today{ box-shadow:inset 0 0 0 1px var(--red-line); }
.cal__day.is-sel{ background:var(--red); color:#fff; font-weight:800; }
.cal__day.is-sel:hover{ background:var(--red); }
.cal__day.is-sun{ color:#d98a80; }
.cal__day.is-off{ opacity:.3; pointer-events:none; }
.cal__day.is-closed{ opacity:.45; cursor:not-allowed; }
.cal__day.is-closed:hover{ background:none; }
.cal__day .cd-m{ font:800 8.5px/1 var(--kr); color:var(--red); letter-spacing:.04em; }
/* 오전 또는 오후만 마감 — 작은 빨강 점 */
.cal__day.is-half::after{
  content:""; position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:99px; background:var(--red); opacity:.85;
}
.cal__day.is-sel.is-half::after{ background:#fff; }
.cal__toast{
  margin-top:10px; padding:10px 12px; border-radius:10px;
  background:#FFF6EC; border:1px solid #F3D2AE; color:#8a4b12;
  font:700 12px/1.5 var(--kr); word-break:keep-all;
}

/* ── 시간 슬롯 ── */
.slot-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(78px,1fr)); gap:8px; }
.slot{
  padding:13px 0; text-align:center; border-radius:999px;
  border:1px solid var(--line); background:#fff;
  font:600 13px/1 var(--kr); color:var(--ink-60); cursor:pointer;
  transition:background .25s, border-color .25s, color .25s, transform .15s;
}
.slot:hover{ border-color:var(--ink-30); color:var(--ink); }
.slot:active{ transform:scale(.95); }
.slot.slot-on{ background:var(--red); border-color:var(--red); color:#fff; font-weight:800; }
.slot-off{ opacity:.35; pointer-events:none; }
.slot-note{ margin:10px 0 0; font:700 12px/1.6 var(--kr); color:#8a4b12; }
@media (prefers-reduced-motion:reduce){ .slot:active{ transform:none; } }

/* ── 조회된 차량 확인 카드 (IntakeCard) ──
   ⚠ 고객 화면이므로 VIN·제원관리번호 자리는 아예 없다. */
.ic-card[hidden]{ display:none !important; }
.ic-card{
  display:block; padding:clamp(20px,5vw,24px);
  border:1px solid var(--red-line); border-radius:18px;
  background:linear-gradient(158deg, rgba(225,27,18,.055), rgba(225,27,18,.015));
}
.ic-plate[hidden]{ display:none !important; }
.ic-plate{
  display:inline-flex; align-items:center; padding:5px 11px; border-radius:999px;
  border:1px solid var(--red-line); background:var(--red-soft);
  font:700 12.5px/1.3 var(--mono); letter-spacing:.04em; color:var(--red);
  max-width:100%; word-break:break-all;
}
.ic-title[hidden]{ display:none !important; }
.ic-title{ display:block; margin:14px 0 0; font:800 clamp(21px,5.4vw,26px)/1.3 var(--kr); letter-spacing:-.03em; word-break:keep-all; }
.ic-sub[hidden]{ display:none !important; }
.ic-sub{ display:block; margin:7px 0 0; font:400 13px/1.6 var(--kr); color:var(--ink-60); word-break:keep-all; }
.ic-rows[hidden]{ display:none !important; }
.ic-rows{ margin:18px 0 0; padding-top:16px; border-top:1px solid var(--red-line); display:flex; flex-direction:column; gap:11px; }
.ic-row[hidden]{ display:none !important; }
.ic-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; min-width:0; }
.ic-row dt{ flex:none; font:400 13px/1.5 var(--kr); color:var(--ink-60); }
.ic-row dd{
  margin:0; min-width:0; flex:1 1 auto;
  display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap;
  font:700 13.5px/1.5 var(--kr); text-align:right; word-break:keep-all;
}
.ic-chip[hidden]{ display:none !important; }
.ic-chip{
  display:inline-flex; align-items:center; flex:none; padding:3px 9px; border-radius:999px;
  border:1px solid var(--line); background:var(--bg-soft);
  font:800 11.5px/1.4 var(--mono); letter-spacing:.02em; color:var(--ink-60);
}
.ic-chip.is-warn{ border-color:#F3D2AE; background:#FFF6EC; color:#8a4b12; }
.ic-chip.is-bad{ border-color:var(--red-line); background:var(--red-soft); color:var(--red); }
.ic-chip.is-off{ color:var(--ink-30); }
.ic-note[hidden]{ display:none !important; }
.ic-note{
  display:block; margin:16px 0 0; padding-top:13px; border-top:1px solid var(--line-soft);
  font:400 11.5px/1.6 var(--kr); color:var(--ink-45); word-break:keep-all;
}
/* 옛 site.js 가 아직 그릴 수 있는 구버전 카드 — 캐시가 도는 동안만 남겨 둔다 */
.car-card{ padding:clamp(20px,5vw,24px); border:1px solid var(--red-line); border-radius:18px; background:rgba(225,27,18,.04); }
.car-card__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.car-card__brand{ font:800 11.5px/1.3 var(--mono); letter-spacing:.14em; color:var(--red); }
.car-card__plate{ font:700 12.5px/1.3 var(--mono); color:var(--ink-60); }
.car-card__name{ margin:12px 0 18px; font:800 clamp(20px,5.2vw,25px)/1.3 var(--kr); letter-spacing:-.03em; word-break:keep-all; }
.car-card__rows{ margin:0; padding-top:16px; border-top:1px solid var(--red-line); display:flex; flex-direction:column; gap:11px; }
.car-card__rows > div{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.car-card__rows > div[hidden]{ display:none; }
.car-card__rows dt{ font:400 13px/1.5 var(--kr); color:var(--ink-60); }
.car-card__rows dd{ margin:0; font:700 13.5px/1.5 var(--kr); text-align:right; word-break:keep-all; }

/* ── 요약 카드 ── */
.sum-card{ margin-top:clamp(20px,4.5vw,26px); padding:18px 20px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.sum-card > b{ display:block; margin-bottom:14px; font:700 11.5px/1 var(--mono); letter-spacing:.14em; color:var(--red); }
.sum-card dl{ margin:0; display:flex; flex-direction:column; gap:10px; }
.sum-card dl > div{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.sum-card dt{ flex:none; font:400 12.5px/1.6 var(--kr); color:var(--ink-45); }
.sum-card dd{ margin:0; min-width:0; font:700 13px/1.6 var(--kr); text-align:right; word-break:keep-all; }

/* ── 하단 고정 액션 ── */
.bk-foot{
  position:sticky; bottom:0; z-index:5; margin-top:auto;
  padding:18px 0 max(18px, env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(255,255,255,0), var(--bg) 30%, var(--bg));
  display:flex; flex-direction:column; gap:10px;
}
.bk-act{ display:none; flex-direction:column; gap:10px; }
.bk-act.is-on{ display:flex; }
.pill[hidden]{ display:none !important; }
.pill--block{ width:100%; height:auto; padding:19px 26px; font-size:16px; }
.pill--block[disabled], .pill--block:disabled{ opacity:.45; pointer-events:none; }
.bk-help{
  display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap; margin-top:2px;
  font:600 12.5px/1.6 var(--kr); color:var(--ink-45);
}
.bk-help a{ color:var(--ink-60); }
.bk-help a:hover{ color:var(--red); text-decoration:underline; text-underline-offset:3px; }
.bk-act .consent{ padding:0 4px 2px; font-size:12.5px; }

/* ── 완료 화면 ── */
.bk-done{ text-align:left; }
.bk-done__mark{
  width:64px; height:64px; border-radius:999px; margin-bottom:24px;
  background:var(--red-soft); border:1px solid var(--red-line); color:var(--red);
  display:flex; align-items:center; justify-content:center;
}

/* ── 차량 조회 대기 안내 ──
   등록원부는 정부24 실시간 조회라 15~60초가 걸린다. 버튼 글자만 "조회 중..."으로 바뀌면
   멈춘 것처럼 보여 사용자가 다시 누르는데, 조회는 1회당 요금이 나간다 → 대기 안내를 크게 띄운다. */
.bk-wait[hidden]{ display:none !important; }
.bk-wait{
  display:flex; align-items:flex-start; gap:9px; margin:0 0 10px;
  padding:13px 15px; border-radius:12px;
  background:var(--red-soft); border:1px solid var(--red-line); color:#8f1a13;
  font:700 12.5px/1.6 var(--kr); word-break:keep-all;
}
.bk-wait__dot{
  flex:none; width:13px; height:13px; margin-top:2px;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  animation:bk-spin .7s linear infinite;
}
@keyframes bk-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .bk-wait__dot{ animation-duration:2.4s; } }

/* ═══ 다운로드 · AI Lab 공용 카드 ═══ */
.card{ padding:22px 20px; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
.card--gold{ border-color:var(--red-line); background:var(--red-soft); }
.card__no{ font:800 12px/1 var(--mono); letter-spacing:.1em; color:var(--red); }
.card__t{ margin:14px 0 8px; font:800 clamp(16.5px,2.6vw,19px)/1.35 var(--kr); letter-spacing:-.03em; }
.card__d{ font:400 13.5px/1.75 var(--kr); color:var(--ink-60); word-break:keep-all; }
.sec--deep .card{ background:rgba(255,255,255,.045); border-color:var(--dark-line); }
.sec--deep .card__d{ color:var(--on-dark-60); }
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.chips span{
  padding:5px 10px; border-radius:999px; background:var(--bg-soft);
  font:600 11.5px/1.4 var(--kr); color:var(--ink-60);
}
.sec--deep .chips span{ background:rgba(255,255,255,.07); color:var(--on-dark-60); }

/* 사진 자리 (준비 중) */
.frame-ph{
  position:relative; overflow:hidden; border-radius:var(--r);
  border:1px solid var(--line); display:flex; align-items:flex-end;
  aspect-ratio:16/9;
  background:
    repeating-linear-gradient(135deg, rgba(10,12,16,.03) 0 1px, transparent 1px 9px),
    var(--bg-ph);
}
.frame-ph--tall{ aspect-ratio:4/5; }
.frame-ph--wide{ aspect-ratio:21/9; }
.frame-ph--square{ aspect-ratio:1/1; }
.frame-ph::before{ content:""; position:absolute; inset:14px; border-radius:10px; border:1px dashed var(--line); }
.frame-ph__tag{
  position:relative; margin:22px; display:inline-flex; align-items:center; gap:8px;
  font:700 10.5px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-30);
}
.frame-ph__tag::before{ content:""; width:6px; height:6px; border-radius:99px; background:var(--red); opacity:.75; }

/* 스토어 버튼 안쪽 */
.store-btn .st-t{ display:flex; flex-direction:column; gap:2px; text-align:left; }
.store-btn .st-t small{ font:600 10.5px/1 var(--mono); letter-spacing:.14em; opacity:.7; }
.store-btn .st-t b{ font:700 14.5px/1.2 var(--kr); letter-spacing:-.02em; }
.st-soon{
  margin-left:auto; flex:none; padding:4px 9px; border-radius:999px;
  background:rgba(255,255,255,.14); font:700 10.5px/1.4 var(--kr); letter-spacing:-.01em;
}

/* 다운로드 하단 밴드 */
.banner{
  display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
  padding:clamp(26px,4vw,40px) clamp(22px,4vw,36px);
  border-radius:var(--r); background:var(--dark); color:var(--on-dark);
}
.banner h2, .banner .h2{ color:#fff; margin:0 0 8px; }
.banner p{ color:var(--on-dark-60); font-size:14px; }
.banner .pill--light{ background:#fff; color:var(--ink); }
.banner .pill--light:hover{ background:var(--bg-soft); }

/* ── 스테이트먼트 (AI Lab) ── */
.st-line{ display:block; }
.st-dim{ color:var(--ink-30); }
.sec--deep .st-dim{ color:var(--on-dark-40); }

/* ── KY AI Lab — 블루프린트 히어로 ──
   ai-hero-bg 는 섹션을 덮는 어두운 판이다. 그 뒤 형제인 .wrap 안의 글자만 밝게 되돌린다. */
.ai-hero-bg{
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(880px 520px at 78% -12%, rgba(96,156,214,.20), transparent 62%),
    radial-gradient(680px 460px at 6% 108%, rgba(56,110,160,.16), transparent 60%),
    linear-gradient(176deg, #0b1420 0%, #0b1622 46%, #10131a 100%);
}
.ai-hero-bg::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(140,190,240,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140,190,240,.05) 1px, transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(85% 75% at 50% 28%, #000 25%, transparent 100%);
  mask-image:radial-gradient(85% 75% at 50% 28%, #000 25%, transparent 100%);
}
.ai-hero-bg::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(140,190,240,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140,190,240,.1) 1px, transparent 1px);
  background-size:120px 120px;
  -webkit-mask-image:radial-gradient(85% 75% at 50% 28%, #000 30%, transparent 100%);
  mask-image:radial-gradient(85% 75% at 50% 28%, #000 30%, transparent 100%);
}
.ai-hero-bg ~ .wrap{ color:var(--on-dark); }
.ai-hero-bg ~ .wrap h1, .ai-hero-bg ~ .wrap .display{ color:#fff; }
.ai-hero-bg ~ .wrap .lead, .ai-hero-bg ~ .wrap p{ color:var(--on-dark-60); }
.ai-hero-bg ~ .wrap .grad-gold{ color:#ff6a62; }
.ai-hero-bg ~ .wrap .pill--light{ background:#fff; color:var(--ink); }
.ai-hero-bg ~ .wrap .pill--light:hover{ background:var(--bg-soft); }
.ai-hero-bg ~ .wrap .pill--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.42); }
.ai-hero-bg ~ .wrap .pill--ghost:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.tag-exp{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px;
  border:1px solid rgba(255,255,255,.32); color:#fff;
  font:700 11.5px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
}
.tag-exp i{ width:6px; height:6px; border-radius:99px; background:var(--red); animation:kyPulse 2s ease infinite; }
@keyframes kyPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@media (prefers-reduced-motion:reduce){ .tag-exp i{ animation:none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   v3.13.0 (2026-09-19) — 모션 · 폰 사용성
   사장님: "반응형은 잘되고 있는지, 모션같은것도 넣으면 좋은건 넣어주고."
   원칙: 처음 한 번만 · 짧게(.7~.8s) · 「동작 줄이기」면 전부 끈다(.no-motion / prefers-reduced-motion).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 히어로 등장 — 배지 → 제목 → 설명 → 단추가 차례로 떠오른다 (한 번) ──
   CSS 만으로 돈다(JS 실패해도 글자는 뜬다 — both 라 끝 상태가 남는다). */
@keyframes kyRise{ from{ opacity:0; transform:translate3d(0,18px,0); } to{ opacity:1; transform:none; } }
.nhero__tag, .nhero__in h1, .nhero__in > p, .nhero__cta{
  animation:kyRise .8s var(--ease) both;
}
.nhero__in h1{ animation-delay:.10s; }
.nhero__in > p{ animation-delay:.22s; }
.nhero__cta{ animation-delay:.34s; }
/* 하위 페이지 머리(.phero__in — 부품·소개·더보기·공지)도 같은 결로 (직계 자식 최대 4개) */
.phero__in > *{ animation:kyRise .7s var(--ease) both; }
.phero__in > * + *{ animation-delay:.10s; }
.phero__in > * + * + *{ animation-delay:.20s; }
.phero__in > * + * + * + *{ animation-delay:.30s; }

/* ── 카드 — 마우스가 있는 기기에서만 살짝 떠오르고 사진이 천천히 다가온다 ──
   (터치 기기는 hover 가 눌림에 달라붙어 어색하다 — hover:hover 로 가른다) */
@media (hover:hover){
  .slcard{ transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s; }
  .slcard:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(10,12,16,.10); border-color:transparent; }
  .slcard__img img{ transition:transform .9s var(--ease); }
  .slcard:hover .slcard__img img{ transform:scale(1.045); }
  .lshot img{ transition:transform .9s var(--ease); }
  .lshot:hover img{ transform:scale(1.04); }
  .telcard{ transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
  .telcard:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(10,12,16,.08); }
  .whyrow__ic{ transition:transform .35s var(--ease); }
  .whyrow:hover .whyrow__ic{ transform:translateY(-2px) scale(1.06); }
}

/* ── 모바일 탭 바 — 아래로 읽어 내려갈 땐 숨고, 위로 올리면 바로 돌아온다 (site.js) ──
   폰에서 58px 이 늘 화면을 먹고 있었다. 내용을 읽을 땐 비켜 준다. */
@media (max-width:720px){
  .ky-tabbar{ transition:transform .32s var(--ease); will-change:transform; }
  .ky-tabbar.is-hidden{ transform:translate3d(0,calc(100% + env(safe-area-inset-bottom) + 2px),0); }
}

/* ── 지도 위 스크롤 잠김 방지 (터치 기기) ──
   카카오 지도가 화면 폭을 다 차지해서, 손가락으로 페이지를 넘기려다 지도만 끌려갔다.
   한 번 탭하기 전엔 덮개가 터치를 받아 페이지 스크롤이 되고, 탭하면 지도가 살아난다.
   지도가 화면 밖으로 나가면 덮개가 다시 온다(site.js). */
.map-guard{
  position:absolute; inset:0; z-index:5; display:none; align-items:center; justify-content:center;
  background:rgba(6,8,11,.14); cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:opacity .25s var(--ease);
}
.map-guard span{
  display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px; border-radius:999px;
  background:rgba(6,8,11,.74); color:#fff; font:700 12.5px/1 var(--kr); letter-spacing:-.01em;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
@media (hover:none) and (pointer:coarse){
  .map-card__wrap:not(.is-live) .map-guard{ display:flex; }
}

/* ── 「동작 줄이기」— 위의 모션 전부 끈다 ── */
.no-motion .nhero__tag, .no-motion .nhero__in h1, .no-motion .nhero__in > p, .no-motion .nhero__cta,
.no-motion .phero__in > *{ animation:none !important; }
.no-motion .ky-tabbar{ transition:none !important; }
@media (prefers-reduced-motion:reduce){
  .nhero__tag, .nhero__in h1, .nhero__in > p, .nhero__cta, .phero__in > *{ animation:none !important; }
  .slcard, .slcard__img img, .lshot img, .telcard, .whyrow__ic, .ky-tabbar{ transition:none !important; }
}