/* ═══════════════════════════════════════════════════════════════
   KY MOTORS — site.css (v3 리디자인 · 2026-08-20)
   새 멀티 페이지 전용 스타일. 구버전 app.css와 무관 — 함께 로드하지 말 것.
   팔레트: 딥 다크 그린-차콜(#ffffff) · 아이보리(#16181c) · KY 골드(#e2231a)
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* 라이트 톤 — 흰 배경 · 차콜 텍스트 · 레드 포인트 (2026-08-26 리디자인)
     ※ 변수명은 예전 것을 유지한다(gold/cream 등) — 하위 페이지가 그대로 따라오게. 값만 바뀐다. */
  --bg:        #ffffff;
  --bg-deep:   #f4f5f6;   /* 연회색 섹션 */
  --bg-card:   #ffffff;
  --line:      #e3e5e8;
  --line-soft: #eceef0;
  --ink:       #16181c;
  --ink-70:    #4a4e55;
  --ink-55:    #6b6f77;
  --ink-40:    #9aa0a8;
  --gold:      #e2231a;   /* = 포인트 레드 */
  --gold-soft: rgba(226,35,26,.08);
  --gold-deep: #b8140d;
  --cream:     #f4f5f6;   /* sec--cream = 연회색 블록 */
  --cream-2:   #eceef0;
  --on-cream:  #16181c;
  --on-cream-60:#5a5f66;
  --charcoal:  #1c1f24;   /* 푸터·유틸바 */
  --kr: "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
        "Helvetica Neue", "Malgun Gothic", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22,.7,.16,1);
  --radius: 14px;
  --shadow: 0 1px 2px rgba(20,22,26,.05), 0 10px 30px -14px rgba(20,22,26,.18);
}

/* ── 리셋 · 기본 ── */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
html,body{ margin:0; padding:0; overflow-x:clip; max-width:100vw; }
body{
  background:var(--bg); color:var(--ink);
  font:400 16px/1.75 var(--kr);
  letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }
::selection{ background:var(--gold); color:#ffffff; }
input::placeholder, textarea::placeholder{ color:var(--ink-40); }

/* ── 레이아웃 ── */
.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; }
.sec{ padding-block:clamp(88px, 13vw, 160px); position:relative; }
.sec--tight{ padding-block:clamp(56px, 8vw, 100px); }
.sec--cream{ background:var(--cream); color:var(--on-cream); }
.sec--cream ::selection{ background:#16181c; color:var(--cream); }
.sec--deep{ background:var(--bg-deep); }
.sec + .sec{ border-top:1px solid var(--line-soft); }
.sec--cream + .sec, .sec + .sec--cream{ border-top:none; }

/* ── 타이포 ── */
.display{
  margin:0;
  font-weight:700;
  font-size:clamp(40px, 10.5vw, 92px);
  line-height:1.05;
  letter-spacing:-0.035em;
  word-break:keep-all;
}
.display--md{ font-size:clamp(34px, 8vw, 68px); }
.h2{
  margin:0;
  font-weight:700;
  font-size:clamp(28px, 6.4vw, 54px);
  line-height:1.12;
  letter-spacing:-0.03em;
  word-break:keep-all;
}
.h3{ margin:0; font-weight:700; font-size:clamp(20px,4vw,26px); line-height:1.3; letter-spacing:-0.02em; }
.lead{
  font-size:clamp(15.5px, 2.4vw, 18.5px); line-height:1.8;
  color:var(--ink-70); max-width:620px; word-break:keep-all;
}
.sec--cream .lead{ color:var(--on-cream-60); }
.muted{ color:var(--ink-55); }
.gold{ color:var(--gold); }
.grad-gold{
  background:linear-gradient(95deg, #e2231a 8%, #f0e3c8 48%, #b8140d 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* 아이브로 라벨 — 골드 + 라인 */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font:600 12.5px/1 var(--kr); letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin-bottom:clamp(16px,3vw,24px);
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--gold); }
.sec--cream .eyebrow{ color:#e2231a; }
.sec--cream .eyebrow::before{ background:#e2231a; }

/* 메타 라벨 — "/ 5 Steps" 스타일 */
.meta-label{
  font:600 12px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-40);
}
.sec--cream .meta-label{ color:#9aa0a8; }

/* 섹션 헤더 행 (제목 좌 · 메타 우) */
.sec-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:clamp(36px,6vw,64px);
}

/* ── 알약 버튼 ── */
.pill{ border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius:999px; cursor:pointer; white-space:nowrap;
  font:700 15px/1 var(--kr); letter-spacing:-0.01em;
  padding:17px 34px;
  transition:transform .35s var(--ease), background .3s, color .3s, border-color .3s, opacity .3s;
}
.pill:hover{ transform:translateY(-2px); }
.pill:active{ transform:scale(.97); }
.pill--light{ background:var(--ink); color:#ffffff; }
.pill--light:hover{ background:#fff; }
.pill--gold{ background:var(--gold); color:#ffffff; }
.pill--gold:hover{ background:#b8140d; }
.pill--ghost{ border:1px solid #c9ccd1; color:var(--ink); background:rgba(255,255,255,.9); }
.pill--ghost:hover{ border-color:#4a4e55; }
.pill--dark{ background:#16181c; color:var(--cream); }
.pill--dark:hover{ background:#ffffff; }
.pill--kakao{ background:#fae100; color:#1d1d1f; }
.pill--lg{ padding:21px 46px; font-size:16.5px; }
.pill--sm{ padding:12px 22px; font-size:13px; }
@media (prefers-reduced-motion:reduce){
  .pill, .pill:hover, .pill:active{ transform:none; transition:none; }
}

/* ── 헤더 ── */
.site-header{ background:#fff; border-bottom:1px solid var(--line);
  position:fixed; inset:0 0 auto 0; z-index:90;
  transition:background .45s var(--ease), border-color .45s, backdrop-filter .45s;
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(244,245,246,.72);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  border-bottom-color:var(--line-soft);
}
.site-header__in{
  width:min(1320px, 100% - clamp(36px,6vw,56px)); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between;
  height:72px; gap:16px;
}
.site-header__logo img{ height:13px; }
.site-nav{ display:flex; align-items:center; gap:clamp(6px, 2vw, 22px); }
.site-nav a{
  position:relative; padding:10px 8px;
  font:500 14px/1 var(--kr); color:var(--ink-70); letter-spacing:.01em;
  transition:color .3s;
}
.site-nav a::after{
  content:""; position:absolute; left:8px; right:8px; bottom:4px; height:1.5px;
  background:var(--gold); transform:scaleX(0); transform-origin:left center;
  transition:transform .35s 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 .pill{ padding:12px 24px; font-size:13px; }

/* 햄버거 */
.nav-burger{
  display:none; position:relative; z-index:96;
  width:44px; height:44px; border-radius:12px;
  border:1px solid var(--line); align-items:center; justify-content:center;
}
.nav-burger span{
  position:relative; display:block; width:18px; height:1.6px; background:var(--ink);
  transition:transform .35s var(--ease), background .3s;
}
.nav-burger span::before, .nav-burger span::after{
  content:""; position:absolute; left:0; width:18px; height:1.6px; 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:rgba(244,245,246,.97);
  -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  padding:104px clamp(24px,7vw,40px) 40px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .4s var(--ease), visibility .4s;
}
.nav-overlay.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
/* 오버레이 상단 바 — 로고 + X 닫기 (열림 상태에서도 닫는 길이 항상 보이게) */
.nav-overlay__bar{
  position:absolute; top:0; left:0; right:0; height:72px;
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:clamp(18px,3vw,28px);
  border-bottom:1px solid var(--line-soft);
}
.nav-overlay__bar img{ height:13px; }
.nav-overlay__bar .nav-close-group{ display:flex; align-items:center; gap:16px; }
.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(14px,2.6vh,22px) 0;
  font:700 clamp(28px,7.5vw,40px)/1.1 var(--kr); letter-spacing:-0.03em;
  color:var(--ink); border-bottom:1px solid var(--line-soft);
  opacity:0; transform:translateY(18px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.nav-overlay a.ov-link .ov-no{ font:600 12px/1 var(--mono); color:var(--gold); letter-spacing:.1em; }
.nav-overlay.is-open a.ov-link{ opacity:1; transform:none; }
.nav-overlay.is-open a.ov-link:nth-child(2){ transition-delay:.05s; }
.nav-overlay.is-open a.ov-link:nth-child(3){ transition-delay:.1s; }
.nav-overlay.is-open a.ov-link:nth-child(4){ transition-delay:.15s; }
.nav-overlay.is-open a.ov-link:nth-child(5){ transition-delay:.2s; }
.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:860px){
  .site-nav, .site-header .pill{ display:none; }
  .nav-burger{ display:inline-flex; }
}
@media (prefers-reduced-motion:reduce){
  .nav-overlay, .nav-overlay a.ov-link, .nav-overlay__foot{ transition:none; }
}

/* ── 히어로 ── */
.hero{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.hero--page{ min-height:72svh; }
.hero__media{ position:absolute; inset:-6% 0; will-change:transform; }
.hero__media video, .hero__media .hero__fill{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero__shade{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(244,245,246,.62) 0%, rgba(244,245,246,.18) 42%, rgba(244,245,246,.86) 100%);
}
.hero__glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(1000px 520px at 50% 88%, rgba(226,35,26,.14), transparent 62%);
}
.hero__body{
  position:relative; z-index:2;
  padding-bottom:clamp(72px, 12vh, 128px);
}
.hero__title{ text-shadow:0 4px 44px rgba(0,0,0,.55); }
.hero__sub{
  font-size:clamp(15px,2.6vw,19px); line-height:1.8; color:rgba(22,24,28,.82);
  max-width:560px; margin:clamp(18px,3vw,28px) 0 clamp(28px,4.5vw,40px);
  text-shadow:0 2px 24px rgba(0,0,0,.6); word-break:keep-all;
}
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.hero__scroll{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px; z-index:2; pointer-events:none;
}
.hero__scroll small{ font:600 9.5px/1 var(--mono); letter-spacing:.34em; color:rgba(22,24,28,.6); }
.hero__scroll i{ width:1px; height:44px; background:rgba(22,24,28,.18); overflow:hidden; display:block; }
.hero__scroll i::after{
  content:""; display:block; width:1px; height:100%; background:var(--gold);
  animation:kyDrop 2.2s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes kyDrop{ 0%{ transform:translateY(-100%);} 55%{ transform:translateY(0);} 100%{ transform:translateY(100%);} }
@media (prefers-reduced-motion:reduce){ .hero__scroll i::after{ animation:none; } }

/* ── 마퀴 ── */
.marquee{
  overflow:hidden; border-block:1px solid var(--line-soft);
  padding-block:clamp(16px,2.6vw,24px); white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track{ display:inline-flex; gap:0; animation:kyMarquee 30s linear infinite; will-change:transform; }
.marquee__seq{ display:inline-flex; align-items:center; flex:none; }
.marquee__seq span{
  font:700 clamp(13px,2.2vw,17px)/1 var(--mono); letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-40); padding-inline:clamp(18px,3vw,30px);
}
.marquee__seq b{ color:var(--gold); font-weight:400; }
@keyframes kyMarquee{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } }

/* ── 스테이트먼트 (초대형 문장 리빌) ── */
.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:-0.03em; word-break:keep-all;
}
.statement .st-dim{ color:var(--ink-40); }

/* ── 스탯 (역사 · 숫자) ── */
.stats{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:clamp(20px,4vw,36px); border-top:1px solid var(--line);
  padding-top:clamp(28px,5vw,44px);
}
.stats .stat b{
  display:block; font:700 clamp(34px,6.4vw,56px)/1 var(--kr); letter-spacing:-0.03em;
  background:linear-gradient(95deg,#e2231a,#f0e3c8); -webkit-background-clip:text;
  background-clip:text; color:transparent;
}
.stats .stat small{ display:block; margin-top:12px; font:400 13px/1.6 var(--kr); color:var(--ink-55); }
.stat__todo{ font:400 10.5px/1.4 var(--mono); color:var(--ink-40); letter-spacing:.04em; }

/* 타임라인 */
.tl{ display:flex; flex-direction:column; gap:0; margin-top:clamp(32px,5vw,52px); }
.tl__row{
  display:grid; grid-template-columns:minmax(84px,140px) 1fr;
  gap:clamp(16px,4vw,40px); padding-block:clamp(18px,3vw,26px);
  border-top:1px solid var(--line-soft); align-items:baseline;
}
.tl__year{ font:700 clamp(17px,3vw,22px)/1.2 var(--mono); color:var(--gold); letter-spacing:-.01em; }
.tl__body b{ display:block; font:700 clamp(16px,2.6vw,19px)/1.4 var(--kr); letter-spacing:-.02em; }
.tl__body p{ margin:6px 0 0; font:400 14px/1.75 var(--kr); color:var(--ink-55); word-break:keep-all; }

/* ── 카드 공통 ── */
.card{
  border-radius:var(--radius); background:var(--bg-card);
  border:1px solid var(--line-soft); padding:clamp(22px,4vw,30px);
}
.card--gold{
  background:linear-gradient(160deg, rgba(226,35,26,.08), rgba(169,124,80,.06));
  border-color:rgba(226,35,26,.32);
}
.sec--cream .card{ background:rgba(22,24,28,.045); border-color:rgba(22,24,28,.12); }
.card__no{ font:700 12px/1 var(--mono); color:var(--gold); letter-spacing:.08em; }
.sec--cream .card__no{ color:#e2231a; }
.card__t{ font:700 clamp(16.5px,2.6vw,19px)/1.35 var(--kr); margin:14px 0 8px; letter-spacing:-.015em; }
.card__d{ font:400 13.5px/1.7 var(--kr); color:var(--ink-55); word-break:keep-all; }
.sec--cream .card__d{ color:var(--on-cream-60); }
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.chips span{
  padding:6px 11px; border-radius:999px; background:rgba(22,24,28,.07);
  font:400 11px/1 var(--kr); color:var(--ink-55);
}
.sec--cream .chips span{ background:rgba(22,24,28,.08); color:var(--on-cream-60); }

/* ── 가로 스크롤 카드 행 ── */
.hscroll{
  display:grid; grid-auto-flow:column;
  grid-auto-columns:clamp(240px, 68vw, 330px);
  gap:14px; overflow-x:auto; padding-bottom:18px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:rgba(226,35,26,.4) transparent;
  /* 풀블리드 — 컨테이너 밖까지 흘러가게 */
  margin-inline:calc(-1 * clamp(20px, 3.5vw, 28px));
  padding-inline:clamp(20px, 3.5vw, 28px);
}
.hscroll > *{ scroll-snap-align:start; min-width:0; }
.hscroll::-webkit-scrollbar{ height:5px; }
.hscroll::-webkit-scrollbar-thumb{ background:rgba(226,35,26,.35); border-radius:99px; }
.hscroll::-webkit-scrollbar-track{ background:transparent; }
/* 데스크톱 마우스 드래그 스크롤 (터치는 네이티브 그대로) */
@media (hover:hover) and (pointer:fine){
  .hscroll{ cursor:grab; }
  .hscroll.is-drag{ cursor:grabbing; scroll-snap-type:none; user-select:none; -webkit-user-select:none; }
  .hscroll.is-drag *{ cursor:grabbing; pointer-events:none; }
}

/* ── 그리드 ── */
.grid{ display:grid; gap:14px; }
.grid > *{ min-width:0; }
.grid--fit{ grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); }
.grid--fit-sm{ grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); }
.grid--2{ grid-template-columns:repeat(auto-fit, minmax(min(420px,100%), 1fr)); gap:clamp(20px,4vw,56px); }

/* 라인업 리스트 (행 스타일) */
.rows{ border-top:1px solid var(--line); }
.sec--cream .rows{ border-top-color:rgba(22,24,28,.16); }
.row-item{
  display:grid; grid-template-columns:minmax(64px,110px) 1fr auto;
  gap:clamp(12px,3vw,32px); align-items:baseline;
  padding-block:clamp(16px,2.8vw,24px);
  border-bottom:1px solid var(--line-soft);
  transition:padding-left .35s var(--ease), background .3s;
}
.sec--cream .row-item{ border-bottom-color:rgba(22,24,28,.12); }
.row-item:hover{ padding-left:10px; }
.row-item__cat{ font:600 10.5px/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.sec--cream .row-item__cat{ color:#e2231a; }
.row-item__name{ font:700 clamp(18px,3.6vw,26px)/1.3 var(--kr); letter-spacing:-.02em; word-break:keep-all; }
.row-item__note{ font:400 12.5px/1.5 var(--kr); color:var(--ink-40); text-align:right; word-break:keep-all; }
.sec--cream .row-item__note{ color:rgba(22,24,28,.45); }
@media (max-width:560px){
  .row-item{ grid-template-columns:minmax(58px,72px) 1fr; }
  .row-item__note{ grid-column:2; text-align:left; margin-top:2px; }
}

/* ── 이미지 플레이스홀더 프레임 ── */
.frame-ph{
  position:relative; overflow:hidden; border-radius:var(--radius);
  border:1px solid var(--line-soft);
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(226,35,26,.06), transparent 55%),
    linear-gradient(165deg, #16181c, #f4f5f6);
  display:flex; align-items:flex-end;
  aspect-ratio:16/9;
}
.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:12px;
  border:1px dashed rgba(22,24,28,.14);
}
.frame-ph__tag{
  position:relative; margin:24px;
  display:inline-flex; align-items:center; gap:8px;
  font:600 10.5px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-40);
}
.frame-ph__tag::before{ content:""; width:6px; height:6px; border-radius:99px; background:var(--gold); opacity:.7; }
.sec--cream .frame-ph{
  border-color:rgba(22,24,28,.14);
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(138,106,60,.08), transparent 55%),
    linear-gradient(165deg, #ddd5c2, #d2c9b2);
}
.sec--cream .frame-ph::before{ border-color:rgba(22,24,28,.18); }
.sec--cream .frame-ph__tag{ color:rgba(22,24,28,.5); }

/* ── 폼 ── */
.field label{
  display:block; font:600 12px/1 var(--kr); letter-spacing:.08em;
  color:var(--ink-55); margin-bottom:9px; text-transform:uppercase;
}
.input{
  width:100%; padding:16px 18px; border-radius:14px;
  border:1px solid var(--line); background:rgba(244,245,246,.55);
  font:400 15px/1.4 var(--kr); color:var(--ink); outline:none;
  transition:border-color .3s, background .3s;
}
.input:focus{ border-color:rgba(226,35,26,.65); background:rgba(244,245,246,.8); }
textarea.input{ resize:vertical; min-height:110px; line-height:1.65; }
input[type="date"].input{ color-scheme:dark; min-height:54px; }
.form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:12px; }

/* 시간 슬롯 */
.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:rgba(244,245,246,.4);
  font:500 13px/1 var(--kr); color:var(--ink); cursor:pointer;
  transition:background .25s, border-color .25s, transform .15s;
}
.slot:hover{ background:#eceef0; }
.slot:active{ transform:scale(.95); }
.slot.slot-on{ background:var(--gold); border-color:var(--gold); color:#ffffff; font-weight:700; }
@media (prefers-reduced-motion:reduce){ .slot:active{ transform:none; } }

/* ── 커스텀 달력 (booking.php) ── */
.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-40); }
.date-btn .db-caret{ flex:none; color:var(--ink-40); 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:rgba(244,245,246,.6); 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:700 15px/1 var(--kr); letter-spacing:-.01em; }
.cal__nav{
  width:38px; height:38px; border-radius:999px; border:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center;
  font:400 17px/1 var(--kr); color:var(--ink-70);
  transition:background .25s, border-color .25s, opacity .25s;
}
.cal__nav:hover{ background:#eceef0; }
.cal__nav:disabled{ opacity:.22; 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:600 10.5px/1 var(--mono); letter-spacing:.08em; color:var(--ink-40);
}
.cal__dow--sun{ color:rgba(226,132,118,.8); }
.cal__day{
  position:relative; min-height:42px; border-radius:999px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  font:500 13px/1 var(--kr); color:var(--ink-70);
  transition:background .2s, color .2s;
}
.cal__day:hover{ background:#eceef0; }
.cal__day.is-today{ box-shadow:inset 0 0 0 1px rgba(226,35,26,.55); }
.cal__day.is-sel{ background:var(--gold); color:#ffffff; font-weight:700; }
.cal__day.is-sel:hover{ background:var(--gold); }
.cal__day.is-sun{ color:rgba(226,132,118,.5); }
.cal__day.is-off{ opacity:.26; pointer-events:none; }
.cal__day.is-closed{ opacity:.45; cursor:not-allowed; }
.cal__day.is-closed:hover{ background:none; }
.cal__day .cd-m{ font:700 8.5px/1 var(--kr); color:#e08a76; letter-spacing:.05em; }
/* 오전 또는 오후만 마감 — 작은 골드 점 */
.cal__day.is-half::after{
  content:""; position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:99px; background:var(--gold); opacity:.85;
}
.cal__toast{
  margin-top:10px; padding:10px 12px; border-radius:10px;
  background:rgba(216,120,90,.12); border:1px solid rgba(216,150,110,.4);
  color:#f0c9a8; font:600 12px/1.5 var(--kr); word-break:keep-all;
}
/* 슬롯 마감 상태 */
.slot-off{ opacity:.3; pointer-events:none; }
.slot-note{ margin:10px 0 0; font:600 12px/1.6 var(--kr); color:#ecd9b4; }

/* 동의 체크 */
.consent{
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  font:400 13px/1.6 var(--kr); color:var(--ink-70); text-align:left;
}
.consent input{ width:17px; height:17px; margin-top:2px; flex:none; accent-color:var(--gold); }
.consent a{ color:#b8140d; text-decoration:underline; }

/* 알림 박스 */
.notice{
  margin-top:14px; padding:14px 16px; border-radius:14px;
  background:rgba(226,35,26,.1); border:1px solid rgba(226,35,26,.38);
  color:#ecd9b4; font:600 13px/1.65 var(--kr); white-space:pre-line; word-break:keep-all;
}
.notice--warn{ background:rgba(216,120,90,.1); border-color:rgba(216,150,110,.4); color:#f0c9a8; }

/* ── 실시간 현황 카드 ── */
.live-card{
  border-radius:26px; background:rgba(22,24,28,.05);
  border:1px solid var(--line-soft); padding:clamp(24px,4.5vw,34px);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.live-card__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.live-card__head b{ font:700 13px/1.4 var(--kr); letter-spacing:.06em; color:var(--gold); }
.live-badge{ display:inline-flex; align-items:center; gap:6px; font:700 10px/1 var(--mono); color:var(--ink-40); letter-spacing:.1em; }
.live-badge i{ width:7px; height:7px; border-radius:99px; background:rgba(22,24,28,.3); }
.live-badge.is-on{ color:#34c759; }
.live-badge.is-on i{ background:#34c759; animation:kyPulse 2s ease infinite; }
@keyframes kyPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@media (prefers-reduced-motion:reduce){ .live-badge.is-on i{ animation:none; } }
.live-form{ display:flex; gap:9px; margin-bottom:20px; flex-wrap:wrap; }
.live-form .input{ padding:14px 16px; font-size:14px; }
.live-form .lf-plate{ flex:1 1 150px; min-width:0; }
.live-form .lf-phone{ flex:0 1 96px; min-width:76px; }
.live-form .pill{ flex:0 0 auto; padding:14px 24px; font-size:13.5px; }
.live-meter{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; font:400 13px/1.4 var(--kr); color:var(--ink-55); margin-bottom:10px; }
.live-meter b{ color:var(--gold); font-weight:700; font-size:16px; }
.live-bar{ height:5px; background:#e3e5e8; border-radius:99px; overflow:hidden; }
.live-bar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,#b8140d,#e2231a,#f0e3c8);
  border-radius:99px; transition:width .8s var(--ease);
}
.live-steps{ display:flex; gap:7px; margin-top:20px; }
.live-steps span{
  flex:1 1 0; min-width:0; text-align:center; padding:11px 2px; border-radius:10px;
  font:500 10.5px/1.35 var(--kr); white-space:nowrap;
  background:rgba(22,24,28,.06); color:var(--ink-40);
}
.live-steps span.is-done{ background:rgba(226,35,26,.15); color:var(--gold); }
.live-steps span.is-run{ background:var(--gold); color:#ffffff; font-weight:700; }
.live-hint{ margin-top:14px; font:400 11.5px/1.6 var(--kr); color:var(--ink-40); }

/* ── 배너 (라이브 · 앱 유도) ── */
.banner{
  border-radius:28px; padding:clamp(30px,6vw,56px);
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(18px,4vw,40px); flex-wrap:wrap;
  /* 라이트 리디자인 — 다크 밴드 위 흰 글씨(대비 확보) */
  background:
    radial-gradient(700px 320px at 85% 0%, rgba(226,35,26,.28), transparent 60%),
    linear-gradient(150deg, #1c1f24, #14161a);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
}
.banner .h2{ font-size:clamp(24px,5vw,40px); color:#fff; }
.banner p{ margin:12px 0 0; color:rgba(255,255,255,.72); font-size:14.5px; line-height:1.7; max-width:480px; word-break:keep-all; }
.banner .pill--light{ background:#fff; color:#16181c; }
.banner .pill--ghost{ border-color:rgba(255,255,255,.45); color:#fff; background:transparent; }
.banner .eyebrow, .banner .slab{ color:#ff6a60; }
.banner .slab::before{ background:#ff6a60; }

/* ── 스토어 버튼 ── */
.store-btn{
  display:flex; align-items:center; gap:14px; width:100%;
  padding:16px 22px; border-radius:18px; text-align:left;
  border:1px solid var(--line); background:rgba(22,24,28,.05);
  transition:border-color .3s, background .3s, transform .3s var(--ease);
}
.store-btn:hover{ border-color:rgba(226,35,26,.5); transform:translateY(-2px); }
.store-btn svg{ flex:none; }
.store-btn .st-t{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.store-btn .st-t small{ font:500 10.5px/1 var(--kr); color:var(--ink-40); letter-spacing:.06em; }
.store-btn .st-t b{ font:700 15px/1.3 var(--kr); letter-spacing:-.01em; }
.store-btn .st-soon{
  margin-left:auto; flex:none; padding:6px 12px; border-radius:99px;
  background:var(--gold-soft); color:var(--gold); font:700 10.5px/1 var(--kr);
}
@media (prefers-reduced-motion:reduce){ .store-btn:hover{ transform:none; } }

/* ── 푸터 ── */
.site-footer{
  border-top:1px solid var(--line-soft); background:var(--bg-deep);
  padding:clamp(56px,9vw,90px) 0 44px;
}
.site-footer__grid{
  display:flex; justify-content:space-between; gap:clamp(28px,5vw,60px);
  flex-wrap:wrap; margin-bottom:clamp(36px,6vw,60px);
}
.site-footer__brand img{ height:14px; margin-bottom:18px; }
.site-footer__brand p{ margin:0; font:400 13px/1.7 var(--kr); color:var(--ink-55); }
.site-footer__social{ display:flex; gap:16px; margin-top:22px; font:400 12.5px/1 var(--kr); color:var(--ink-55); flex-wrap:wrap; }
.site-footer__social a:hover{ color:var(--ink); }
.site-footer__cols{ display:flex; gap:clamp(32px,6vw,72px); flex-wrap:wrap; }
.site-footer__col{ display:flex; flex-direction:column; gap:12px; font:400 13px/1.4 var(--kr); color:var(--ink-55); }
.site-footer__col b{ font:700 12px/1 var(--kr); color:var(--ink); margin-bottom:5px; }
.site-footer__col a:hover{ color:var(--ink); }
.site-footer__legal{
  border-top:1px solid var(--line-soft); padding-top:26px;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font:400 11.5px/1.85 var(--kr); color:var(--ink-40);
}
.site-footer__legal a{ color:var(--ink-55); }
.site-footer__legal a:hover{ color:var(--ink); }

/* ── 스크롤 리빌 ── */
[data-rv]{
  opacity:0; transform:translateY(30px); filter:blur(9px);
  transition:opacity .95s var(--ease), transform .95s var(--ease), filter .95s var(--ease);
  transition-delay:var(--rvd, 0ms);
  will-change:opacity, transform, filter;
}
.rv-in[data-rv], .no-motion [data-rv]{ opacity:1; transform:none; filter:none; }
.no-js [data-rv]{ opacity:1; transform:none; filter:none; }

/* ── 페이지 헤드 (booking · live 공용 — 컴팩트 타이틀) ── */
.page-sec{ padding-top:clamp(116px, 16vh, 168px); }
.page-head{ margin-bottom:clamp(28px,5vw,44px); }
.page-head h1{
  margin:0; font-weight:700; font-size:clamp(30px, 7vw, 46px);
  line-height:1.1; letter-spacing:-0.03em; word-break:keep-all;
}
.page-head .lead{ margin-top:clamp(12px,2.5vw,18px); font-size:clamp(14px,2.2vw,16px); }
.page-head .eyebrow{ margin-bottom:12px; }

/* booking 데스크톱 — 단계형 카드는 중앙 1열 유지, 여백만 조금 넉넉하게 */
@media (min-width:900px){
  .page-booking{ padding-top:clamp(104px,13vh,140px); padding-bottom:56px; }
}

/* live 레이아웃 — 조회 카드 | 컴팩트 안내 2장, APP는 풀폭 밴드 */
.live-grid{ align-items:stretch; }
.live-aside{ display:grid; gap:14px; }
.live-aside .card{ display:flex; flex-direction:column; justify-content:center; }
@media (min-width:900px){
  .live-aside{ grid-template-rows:1fr 1fr; }
}

/* ── AI Lab 전용 — 블루프린트 히어로 (CSS gradient만) ── */
.ai-hero-bg{
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(880px 520px at 78% -12%, rgba(96,156,214,.16), transparent 62%),
    radial-gradient(680px 460px at 6% 108%, rgba(56,110,160,.12), transparent 60%),
    linear-gradient(176deg, #0b1420 0%, #0b1622 62%, #101a26 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%);
}
.tag-exp{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px;
  border:1px solid rgba(226,35,26,.4); color:var(--gold);
  font:600 11.5px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
}
.tag-exp i{ width:6px; height:6px; border-radius:99px; background:var(--gold); animation:kyPulse 2s ease infinite; }
@media (prefers-reduced-motion:reduce){ .tag-exp i{ animation:none; } }

/* ── 지도 카드 (카카오 roughmap 퍼가기) ── */
.map-card{
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); background:#16181c; min-height:280px;
}
.map-card__wrap{ position:relative; overflow:hidden; width:100%; height:320px; }
.map-card__scale{ width:640px; height:360px; transform-origin:0 0; }

/* ── 세부 유틸 ── */
.mt-1{ margin-top:14px; } .mt-2{ margin-top:24px; } .mt-3{ margin-top:40px; }
.mt-4{ margin-top:clamp(40px,7vw,72px); }
.center{ text-align:center; }
.flex-wrapper{ display:flex; gap:12px; flex-wrap:wrap; }
.center .flex-wrapper{ justify-content:center; }

/* ═══════════════════════════════════════════════════════════════
   단계형 예약 (booking.php v3.1.0) — 한 화면 한 질문 · 하단 고정 CTA
   색·폰트는 사이트 톤 그대로(다크 + 골드), 레이아웃만 앱 스타일.
   ═══════════════════════════════════════════════════════════════ */
.page-booking{
  padding-top:clamp(88px, 13vh, 112px);
  padding-bottom:clamp(24px, 6vw, 40px);
}
.bk-shell{
  width:min(520px, 100% - clamp(32px, 8vw, 48px));
  margin-inline:auto;
  display:flex; flex-direction:column;
  min-height:calc(100svh - 190px);
}

/* 상단 — 이전 버튼 + 4칸 진행 바 + n / 4 */
.bk-top{ display:flex; align-items:center; gap:12px; margin-bottom:clamp(26px,6vw,38px); }
.bk-back{
  flex:none; width:34px; height:34px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-70);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .25s, border-color .25s;
}
.bk-back:hover{ background:#eceef0; border-color:rgba(22,24,28,.3); }
.bk-back[hidden]{ display:none; }
.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(--gold); }
.bk-count{ flex:none; font:600 11.5px/1 var(--mono); letter-spacing:.1em; color:var(--ink-40); }

/* 단계 전환 — transform + opacity (모션 축소 시 즉시 표시) */
.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; }

/* 타이포 — 큰 타이틀 · 넉넉한 여백 */
.bk-eyebrow{
  margin:0 0 14px; font:600 12px/1 var(--kr); letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold);
}
.bk-title{
  margin:0 0 12px; font-weight:700;
  font-size:clamp(27px, 7.4vw, 36px); line-height:1.3; letter-spacing:-.03em;
  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-55); word-break:keep-all;
}
.bk-fine{ margin:14px 0 0; font:400 11.5px/1.7 var(--kr); color:var(--ink-40); word-break:keep-all; }
.bk-textlink{
  display:inline-block; margin-top:18px;
  font:600 13.5px/1.5 var(--kr); color:var(--ink-55);
  text-decoration:underline; text-underline-offset:4px;
  transition:color .25s;
}
.bk-textlink:hover{ color:var(--ink); }

/* 큰 입력창 (16px — iOS 자동 확대 방지) */
.bk-fields{ display:flex; flex-direction:column; gap:16px; }

/* 소유 형태 3택 (v3.2.0) — 등록원부는 '소유자' 란의 이름으로만 조회된다.
   고정 폭 없이 flex-wrap — 375px에서 자연스럽게 두 줄로 접힌다(가로 오버플로 0). */
.own-label{
  display:block; font:600 12.5px/1 var(--kr); letter-spacing:.02em;
  color:var(--ink-55); margin-bottom:9px;
}
.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:rgba(244,245,246,.4);
  font:500 13.5px/1.2 var(--kr); color:var(--ink); cursor:pointer;
  word-break:keep-all;
  transition:background .25s, border-color .25s, color .25s;
}
.own-chip:hover{ background:#eceef0; }
.own-chip.is-on{ background:var(--gold); border-color:var(--gold); color:#ffffff; font-weight:700; }
.own-hint{
  margin:10px 0 0; font:400 12px/1.65 var(--kr); color:var(--ink-55); word-break:keep-all;
}
.own-hint--muted{ margin-top:4px; color:var(--ink-40); }
.input--lg{ padding:18px; border-radius:16px; font-size:16px; min-height:58px; }
textarea.input--lg{ min-height:104px; }
.bk-step .field label{ text-transform:none; letter-spacing:.02em; font-size:12.5px; }

/* 조회된 차량 카드 — **구버전 호환용**(v3.4.0에서 .ic-* 확인 카드로 교체됨).
   브라우저 캐시에 남은 옛 site.js가 아직 이 마크업을 그릴 수 있어 자산 v7이 퍼질 때까지 남겨 둔다. */
.car-card{
  border:1px solid rgba(226,35,26,.42); border-radius:20px;
  background:linear-gradient(158deg, rgba(226,35,26,.14), rgba(226,35,26,.035));
  padding:clamp(20px,5vw,24px);
}
.car-card__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.car-card__brand{ font:700 11.5px/1.3 var(--kr); letter-spacing:.14em; color:var(--gold); }
.car-card__plate{ font:600 12.5px/1.3 var(--mono); color:var(--ink-55); }
.car-card__name{
  margin:12px 0 18px; font:700 clamp(20px,5.2vw,25px)/1.3 var(--kr);
  letter-spacing:-.025em; word-break:keep-all;
}
.car-card__rows{
  margin:0; padding-top:16px; border-top:1px solid rgba(226,35,26,.24);
  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-55); }
.car-card__rows dd{ margin:0; font:600 13.5px/1.5 var(--kr); text-align:right; word-break:keep-all; }

/* ── 확인 카드 (v3.4.0 · 공용 계약 IntakeCard) ────────────────────────────
   차량번호 / 제목(연식+모델) / 부제 / 검사 유효+D-day / 보증 만료+D-day /
   등록원부 주행거리 / 등록 후 경과 / 소유자(서버가 마스킹한 값).
   ⚠ 고객 화면이므로 VIN·제원관리번호 자리는 아예 없다.

   ⚠⚠ **유령 요소 재발 방지** — display를 지정한 요소는 `hidden` 속성이 무시된다
      (작성자 CSS가 UA 스타일을 이긴다). 2026-08-21에 아무 입력도 없는데 조회 스피너가
      혼자 돌던 사고가 이것이었다. 그래서 아래 요소마다 `[hidden]{display:none !important}`를
      **짝으로** 둔다. 새 요소를 추가할 때도 반드시 같이 넣을 것. ── */
.ic-card[hidden]{ display:none !important; }
.ic-card{
  display:block;
  border:1px solid rgba(226,35,26,.42); border-radius:20px;
  background:linear-gradient(158deg, rgba(226,35,26,.14), rgba(226,35,26,.035));
  padding:clamp(20px,5vw,24px);
}
/* 차량번호 — 카드의 첫 줄(가장 확실한 식별자) */
.ic-plate[hidden]{ display:none !important; }
.ic-plate{
  display:inline-flex; align-items:center;
  padding:5px 11px; border-radius:999px;
  border:1px solid rgba(226,35,26,.4); background:rgba(226,35,26,.1);
  font:600 12.5px/1.3 var(--mono); letter-spacing:.04em; color:var(--gold);
  max-width:100%; word-break:break-all;
}
.ic-title[hidden]{ display:none !important; }
.ic-title{
  display:block; margin:14px 0 0;
  font:700 clamp(21px,5.4vw,26px)/1.3 var(--kr); letter-spacing:-.025em; 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-55); word-break:keep-all;
}
.ic-rows[hidden]{ display:none !important; }
.ic-rows{
  margin:18px 0 0; padding-top:16px; border-top:1px solid rgba(226,35,26,.24);
  display:flex; flex-direction:column; gap:11px;
}
/* 좁은 화면에서도 비율이 깨지지 않게 — 고정 폭 없이 flex + wrap (375px 가로 오버플로 0) */
.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-55); }
.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:600 13.5px/1.5 var(--kr); text-align:right; word-break:keep-all;
}
/* D-day 칩 — 값 자체는 서버가 준 것(inspectionDday·warrantyDday)을 문자로만 바꾼다 */
.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:rgba(22,24,28,.06);
  font:700 11.5px/1.4 var(--mono); letter-spacing:.02em; color:var(--ink-70);
}
.ic-chip.is-warn{ border-color:rgba(226,35,26,.45); background:var(--gold-soft); color:var(--gold); }
.ic-chip.is-bad{ border-color:rgba(216,150,110,.45); background:rgba(216,120,90,.14); color:#f0c9a8; }
.ic-chip.is-off{ color:var(--ink-40); }
/* 원장 재사용(0원) 안내 */
.ic-note[hidden]{ display:none !important; }
.ic-note{
  display:block; margin:16px 0 0; padding-top:13px;
  border-top:1px solid rgba(226,35,26,.18);
  font:400 11.5px/1.6 var(--kr); color:var(--ink-40); word-break:keep-all;
}

/* 같은 이유(hidden 무시)로 — 조건부로 감추는 기존 요소들도 짝 규칙을 갖춘다.
   특히 .pill은 display:inline-flex라 [hidden]이 그냥 무시된다(유령 버튼). */
.pill[hidden]{ display:none !important; }
.bk-fine[hidden]{ display:none !important; }
.own-hint[hidden]{ display:none !important; }
.field[hidden]{ display:none !important; }
.notice[hidden]{ display:none !important; }

/* 요약 카드 (4단계 · 완료) */
.sum-card{
  margin-top:clamp(20px,4.5vw,26px); padding:18px 20px;
  border:1px solid var(--line); border-radius:18px; background:var(--bg-card);
}
.sum-card > b{ display:block; font:700 11.5px/1 var(--kr); letter-spacing:.12em; color:var(--gold); margin-bottom:14px; }
.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-40); }
.sum-card dd{ margin:0; font:600 13px/1.6 var(--kr); text-align:right; word-break:keep-all; min-width:0; }

/* 하단 고정 액션 */
.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(13,21,18,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--block{ width:100%; padding:19px 26px; font-size:16px; }
.pill--block[disabled], .pill--block:disabled{ opacity:.5; pointer-events:none; }
.bk-help{
  display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap;
  font:500 12.5px/1.6 var(--kr); color:var(--ink-40); margin-top:2px;
}
.bk-help a{ color:var(--ink-55); }
.bk-help a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

/* 완료 화면 */
.bk-done{ text-align:left; }
.bk-done__mark{
  width:64px; height:64px; border-radius:999px; margin-bottom:24px;
  background:var(--gold-soft); border:1px solid rgba(226,35,26,.45); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
}
.bk-act .consent{ padding:0 4px 2px; font-size:12.5px; }

/* ── 차량 조회 대기 안내 (v3.3.0) ──────────────────────────────────────────
   등록원부는 정부24 실시간 조회라 15~60초가 걸린다. 버튼 글자만 "조회 중..."으로 바뀌면
   멈춘 것처럼 보여 사용자가 다시 누르는데, 조회는 1회당 요금이 나간다 → 대기 안내를 크게 띄운다. */
/* ⚠ display를 지정하는 요소는 hidden 속성이 무시된다(작성자 CSS가 UA 스타일을 이김).
   2026-08-21 사고: 아무것도 입력하지 않았는데 조회 스피너가 혼자 돌았다. */
.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:14px;
  background:rgba(226,35,26,.1); border:1px solid rgba(226,35,26,.38);
  color:#ecd9b4; 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; } }


/* ═══════════════════════════════════════════════════════════════
   2026-08-26 리디자인 — 홈 신규 컴포넌트
   밝은 배경 · 레드 포인트 · 사진 카드 중심 구성
   ═══════════════════════════════════════════════════════════════ */

/* ── 상단 유틸리티 바 (다크) ── */
.util-bar{ background:var(--charcoal); color:rgba(255,255,255,.72); font-size:12.5px; }
.util-bar__in{
  width:min(1180px,100% - clamp(28px,6vw,56px)); margin-inline:auto;
  height:38px; display:flex; align-items:center; gap:18px;
}
.util-bar a{ color:rgba(255,255,255,.72); transition:color .2s; }
.util-bar a:hover{ color:#fff; }
.util-bar__sp{ margin-left:auto; }
.util-bar__tel{ color:#fff; font-weight:800; letter-spacing:.01em; }
@media (max-width:760px){ .util-bar{ display:none; } }

/* ── 섹션 라벨 (— LABEL 빨강 대시) ── */
.slab{
  display:flex; align-items:center; gap:10px;
  font:800 12px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin:0 0 14px;
}
.slab::before{ content:""; width:22px; height:2px; background:var(--gold); }

/* 섹션 제목줄: 좌 제목 / 우 설명 */
.shead{ display:grid; grid-template-columns:1fr; gap:14px; align-items:end; margin-bottom:clamp(28px,4vw,44px); }
@media (min-width:900px){ .shead{ grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:40px; } }
.shead h2{ margin:0; font-weight:800; font-size:clamp(28px,4.4vw,44px); line-height:1.2; letter-spacing:-.03em; color:var(--ink); }
.shead p{ margin:0; color:var(--ink-55); font-size:15px; line-height:1.75; }

/* ── 히어로 ── */
.nhero{ position:relative; min-height:clamp(460px,68vh,660px); display:grid; align-items:center; overflow:hidden; background:#111; }
.nhero__media{ position:absolute; inset:0; }
.nhero__media img,.nhero__media video{ width:100%; height:100%; object-fit:cover; }
.nhero__shade{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,12,14,.86) 0%,rgba(10,12,14,.62) 46%,rgba(10,12,14,.32) 100%); }
.nhero__in{ position:relative; width:min(1180px,100% - clamp(28px,6vw,56px)); margin-inline:auto; padding-block:clamp(56px,9vw,90px); color:#fff; }
.nhero__tag{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px;
  background:var(--gold); color:#fff; font-size:12.5px; font-weight:800; letter-spacing:.02em; }
.nhero h1{ margin:18px 0 0; font-weight:800; font-size:clamp(30px,5.4vw,58px); line-height:1.16; letter-spacing:-.035em; }
.nhero p{ margin:16px 0 0; max-width:620px; color:rgba(255,255,255,.82); font-size:clamp(14.5px,1.6vw,17px); line-height:1.8; }
.nhero__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:52px; padding:0 26px;
  border-radius:8px; font-size:15px; font-weight:800; letter-spacing:-.01em; transition:.2s var(--ease); border:1px solid transparent; }
.btn--red{ background:var(--gold); color:#fff; }
.btn--red:hover{ background:var(--gold-deep); }
.btn--line{ border-color:rgba(255,255,255,.5); color:#fff; }
.btn--line:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:#000; }
.btn--ghost{ border-color:var(--line); color:var(--ink); background:#fff; }
.btn--ghost:hover{ border-color:var(--ink); }
.btn--sm{ height:42px; padding:0 18px; font-size:13.5px; }

/* ── 히어로 밑 앱 다운로드 배너 (2026-08-26 — 퀵액션 4칸을 이걸로 대체) ── */
.dlband{ background:var(--charcoal); color:#fff; border-bottom:1px solid rgba(255,255,255,.08); }
.dlband__in{ width:min(1180px,100% - clamp(28px,6vw,56px)); margin-inline:auto;
  padding-block:clamp(22px,3.4vw,34px); display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(16px,3vw,32px); }
.dlband__txt{ flex:1 1 300px; min-width:0; }
.dlband__tag{ display:inline-block; font:800 11px/1 var(--mono); letter-spacing:.18em;
  color:#ff6a60; text-transform:uppercase; }
.dlband__txt b{ display:block; margin-top:9px; font-size:clamp(19px,2.6vw,27px); font-weight:800;
  letter-spacing:-.03em; line-height:1.3; }
.dlband__sub{ display:block; margin-top:7px; font-size:13.5px; line-height:1.7; color:rgba(255,255,255,.62); }
.dlband__btn{ flex:none; display:inline-flex; align-items:center; gap:10px;
  padding:15px 28px; border-radius:10px; background:var(--gold); color:#fff;
  font-size:15.5px; font-weight:800; letter-spacing:-.02em;
  box-shadow:0 10px 26px -12px rgba(226,35,26,.9); transition:.2s var(--ease); }
.dlband__btn svg{ width:19px; height:19px; flex:none; }
.dlband__btn:hover{ background:var(--gold-deep); transform:translateY(-2px); }
@media (max-width:640px){
  .dlband__btn{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){ .dlband__btn:hover{ transform:none; } }

/* ── 서비스 라인업 사진 카드 ── */
.slgrid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.slcard{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff;
  display:flex; flex-direction:column; }  /* 링크 아님 — 클릭·호버 반응 없음 (2026-08-26) */
.slcard__img{ aspect-ratio:4/3; background:var(--bg-deep); position:relative; overflow:hidden; }
.slcard__img img{ width:100%; height:100%; object-fit:cover; }
.slcard__ph{ position:absolute; inset:0; display:grid; place-items:center; color:var(--ink-40); font-size:12px;
  background:repeating-linear-gradient(45deg,#f7f8f9,#f7f8f9 10px,#f2f3f5 10px,#f2f3f5 20px); }
.slcard__body{ padding:20px 20px 22px; display:flex; flex-direction:column; gap:8px; flex:1; }
.slcard__cat{ font:800 11.5px/1 var(--mono); letter-spacing:.14em; color:var(--gold); text-transform:uppercase; }
.slcard__t{ font-size:19px; font-weight:800; letter-spacing:-.025em; color:var(--ink); }
.slcard__d{ font-size:13.5px; line-height:1.7; color:var(--ink-55); flex:1; }


/* ── 숫자 스트립 ── */
.nums{ background:var(--bg-deep); border-block:1px solid var(--line); }
.nums__in{ width:min(1180px,100% - clamp(28px,6vw,56px)); margin-inline:auto;
  display:grid; grid-template-columns:repeat(2,1fr); }
@media (min-width:820px){ .nums__in{ grid-template-columns:repeat(4,1fr); } }
.nums__c{ padding:clamp(26px,4vw,40px) 20px; border-right:1px solid var(--line); text-align:left; }
.nums__c:last-child{ border-right:none; }
@media (max-width:819px){ .nums__c:nth-child(2n){ border-right:none; } .nums__c:nth-child(-n+2){ border-bottom:1px solid var(--line); } }
.nums__v{ font-size:clamp(30px,4.6vw,46px); font-weight:800; letter-spacing:-.04em; color:var(--ink); line-height:1; }
.nums__v em{ font-style:normal; color:var(--gold); }
.nums__v small{ font-size:.46em; font-weight:800; margin-left:3px; letter-spacing:0; }
.nums__l{ margin-top:10px; font-size:13px; color:var(--ink-55); }
/* 카운트업 — 자릿수가 늘어도 줄이 흔들리지 않게 tabular-nums 고정 */
.nums__v em.cnt{ font-variant-numeric:tabular-nums; }

/* ── WHY (좌 사진 · 우 리스트) ── */
.why{ display:grid; gap:clamp(24px,4vw,52px); align-items:center; }
@media (min-width:900px){ .why{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.why__media{ position:relative; border-radius:12px; overflow:hidden; aspect-ratio:4/3; background:var(--bg-deep); }
.why__media--wide{ aspect-ratio:16/10; }
.why__media img{ width:100%; height:100%; object-fit:cover; }
.why__badge{ position:absolute; left:0; bottom:0; background:var(--gold); color:#fff;
  padding:12px 18px; font-size:20px; font-weight:800; letter-spacing:-.02em; }
.why__list{ display:flex; flex-direction:column; gap:22px; }
.whyrow{ display:flex; gap:16px; align-items:flex-start; }
/* 아이콘 — 배경 없이 선/면만 (2026-08-26). SVG는 currentColor라 color 하나로 색이 바뀐다. */
.whyrow__ic{ width:34px; height:34px; flex:none; display:grid; place-items:center;
  color:var(--gold); margin-top:1px; }
.whyrow__ic svg{ width:30px; height:30px; }
.whyrow b{ display:block; font-size:16px; font-weight:800; color:var(--ink); letter-spacing:-.02em; }
.whyrow p{ margin:6px 0 0; font-size:13.5px; line-height:1.75; color:var(--ink-55); }

/* ── 이벤트(캠페인) 카드 — 2026-08-27부터 배너 이미지를 그대로 보여준다.
      관리자에 올린 배너에 이미 문구가 들어 있어, 위에 글자를 얹거나 어둡게 덮지 않는다.
      카드 위에 남는 것은 우측 상단의 「진행 중」 표시 하나뿐. ── */
.evgrid{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:820px){ .evgrid{ grid-template-columns:1fr 1fr; } }
.evcard{ position:relative; display:block; border-radius:12px; overflow:hidden;
  aspect-ratio:16/7; background:var(--bg-deep); border:1px solid var(--line);
  transition:.22s var(--ease); }
.evcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:#d5d8dd; }
@media (prefers-reduced-motion:reduce){ .evcard:hover{ transform:none; } }
.evcard img{ width:100%; height:100%; object-fit:cover; }
/* 「진행 중」 — 배너 위 우측 상단 고정 */
.evcard__badge{ position:absolute; top:14px; right:14px; z-index:2;
  background:var(--gold); color:#fff; font-size:11.5px; font-weight:800;
  padding:6px 11px; border-radius:5px; letter-spacing:-.01em;
  box-shadow:0 4px 14px -6px rgba(0,0,0,.5); }
/* 배너 이미지가 없는 캠페인 — 브랜드 그라데이션 + 삼각별 워터마크 + 제목만 */
.evcard--plain{ background:linear-gradient(135deg,#2e333b 0%,#1c1f24 58%,#141619 100%);
  border-color:transparent; color:#fff; }
.evcard__wm{ position:absolute; right:-26px; top:-26px; width:190px; height:190px;
  color:rgba(255,255,255,.07); pointer-events:none; }
.evcard__wm svg{ width:100%; height:100%; }
.evcard__t{ position:absolute; left:24px; right:120px; bottom:22px; font-size:clamp(18px,2.4vw,24px);
  font-weight:800; letter-spacing:-.03em; line-height:1.3; }

/* ── 고객 라운지 (2026-08-26 — 좌 설명·칩 / 우 사진 4장) ── */
.lounge{ display:grid; gap:clamp(26px,4vw,52px); align-items:center; }
@media (min-width:960px){ .lounge{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); } }
.lounge__txt h2{ margin:0 0 14px; font-size:clamp(26px,4vw,40px); font-weight:800;
  letter-spacing:-.03em; line-height:1.2; }
.lounge__lead{ margin:0 0 22px; font-size:15px; line-height:1.85; color:var(--on-cream-60); }
.lchips{ list-style:none; margin:0; padding:0; display:grid; gap:9px;
  grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); }
.lchip{ display:flex; align-items:center; gap:9px; padding:10px 15px 10px 12px;
  border:1px solid var(--line); border-radius:999px; background:#fff;
  font-size:13.5px; font-weight:700; color:var(--ink); letter-spacing:-.02em; }
.lchip__ic{ width:22px; height:22px; flex:none; display:grid; place-items:center; color:var(--gold); }
.lchip__ic svg{ width:20px; height:20px; }
.lgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.lshot{ margin:0; border-radius:12px; overflow:hidden; aspect-ratio:4/3; background:var(--cream-2); }
.lshot img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.lshot:hover img{ transform:scale(1.04); }
@media (prefers-reduced-motion:reduce){ .lshot img{ transition:none; } .lshot:hover img{ transform:none; } }

/* ── 칩 ── */
.chip{ display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border:1px solid var(--line);
  border-radius:8px; background:#fff; font-size:13px; font-weight:700; color:var(--ink); }
.chiprow{ display:flex; flex-wrap:wrap; gap:8px; }

/* ── 연락처 카드 ── */
.telgrid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.telcard{ border:1px solid var(--line); border-radius:12px; padding:20px; background:#fff; }
.telcard small{ display:block; font-size:12.5px; color:var(--ink-55); }
.telcard b{ display:block; margin-top:8px; font-size:clamp(19px,2.4vw,24px); font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.telcard--hot{ background:var(--gold); border-color:var(--gold); }
.telcard--hot small,.telcard--hot b{ color:#fff; }
/* 카카오톡 카드 — 다른 카드와 같은 흰 카드에 카톡 노랑을 살짝만 얹는다
   (좌측 3px 띠 + 말풍선 아이콘). 통짜 노랑은 너무 튀어서 2026-08-27에 뺐다. */
.telcard--kakao{ border-color:#ecd98a; box-shadow:inset 3px 0 0 #FEE500; }
.telcard--kakao small{ display:flex; align-items:center; gap:6px; }
.telcard__kic{ width:16px; height:16px; flex:none; display:grid; place-items:center; color:#FEE500;
  filter:drop-shadow(0 0 .5px rgba(60,30,30,.45)); }
.telcard__kic svg{ width:16px; height:16px; }
.telcard--kakao b a{ color:var(--ink); }

/* ── 영업시간 표 ── */
.hours{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.hours__h{ padding:14px 18px; border-bottom:1px solid var(--line); font-size:14px; font-weight:800; color:var(--ink);
  display:flex; align-items:center; gap:8px; background:var(--bg-deep); }
.hours__h i{ width:8px; height:8px; background:var(--gold); border-radius:2px; display:inline-block; }
.hours__r{ display:flex; justify-content:space-between; gap:12px; padding:12px 18px; font-size:13.5px; border-bottom:1px solid var(--line-soft); }
.hours__r:last-child{ border-bottom:none; }
.hours__r span:first-child{ color:var(--ink-55); }
.hours__r span:last-child{ font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }

/* ── 주소 카드 ── */
.addr{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; border:1px solid var(--line);
  border-radius:12px; padding:18px 20px; background:#fff; }
.addr__ic{ width:30px; height:30px; flex:none; display:grid; place-items:center;
  color:var(--gold); }                      /* 배경 없이 아이콘만 (2026-08-27) */
.addr__ic svg{ width:26px; height:26px; }
.addr__t small{ display:block; font:800 11px/1 var(--mono); letter-spacing:.14em; color:var(--ink-40); text-transform:uppercase; }
.addr__t b{ display:block; margin-top:5px; font-size:15.5px; font-weight:800; color:var(--ink); letter-spacing:-.02em; }
.addr__btns{ margin-left:auto; display:flex; gap:8px; }

/* ── 앱 소개 (2026-08-26 리메이크 — 다크 스테이지 + 실제 앱 목업) ── */
.appsec{ position:relative; overflow:hidden; color:#fff;
  background:radial-gradient(1100px 620px at 82% 32%, #2b3038 0%, #1c1f24 46%, #131519 100%);
  padding-block:clamp(76px,11vw,132px); }
.appsec::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(560px 340px at 84% 30%, rgba(226,35,26,.20), transparent 70%); }
.appsec .wrap{ position:relative; }
.appstage{ display:grid; gap:clamp(30px,5vw,56px); align-items:center; }
@media (min-width:960px){ .appstage{ grid-template-columns:minmax(0,1fr) minmax(0,46%); } }
.appstage h2{ margin:0 0 16px; font-size:clamp(26px,4vw,42px); font-weight:800;
  letter-spacing:-.035em; line-height:1.2; }
.appstage__lead{ margin:0 0 26px; max-width:520px; font-size:15px; line-height:1.85; color:rgba(255,255,255,.66); }
.slab--light{ color:rgba(255,255,255,.85); }
.slab--light::before{ background:var(--gold); }
.appcards{ display:grid; gap:12px; }
@media (min-width:620px){ .appcards{ grid-template-columns:1fr 1fr; } }
.appcard{ border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:18px 20px 20px;
  background:rgba(255,255,255,.045); backdrop-filter:blur(6px); }
.appcard b{ display:block; font-size:15px; font-weight:800; letter-spacing:-.02em; color:#fff; }
.appcard ul{ margin:11px 0 0; padding-left:16px; font-size:13px; line-height:1.85; color:rgba(255,255,255,.6); }
.appcard li::marker{ color:var(--gold); }
.appstage__shot{ position:relative; display:grid; place-items:center; }
.appstage__glow{ position:absolute; width:min(120%,560px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(226,35,26,.30) 0%, rgba(226,35,26,.10) 42%, transparent 68%);
  filter:blur(6px); pointer-events:none; }
.appstage__shot img{ position:relative; width:100%; max-width:520px; height:auto;
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.55)); }
@media (max-width:959px){ .appstage__shot{ order:-1; } .appstage__shot img{ max-width:400px; } }

/* ── 하단 CTA 밴드 ── */
.ctaband{ background:var(--charcoal); color:#fff; }
.ctaband__in{ width:min(1180px,100% - clamp(28px,6vw,56px)); margin-inline:auto;
  padding-block:clamp(44px,6vw,72px); display:grid; gap:20px; align-items:center; }
@media (min-width:900px){ .ctaband__in{ grid-template-columns:minmax(0,1fr) auto; } }
.ctaband h2{ margin:0; font-size:clamp(24px,3.4vw,36px); font-weight:800; letter-spacing:-.03em; }
.ctaband p{ margin:10px 0 0; color:rgba(255,255,255,.7); font-size:14.5px; line-height:1.75; }

/* ── 모바일 하단 고정 도크 ── */
.dock{ position:fixed; left:0; right:0; bottom:0; z-index:60; display:none;
  background:#fff; border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
.dock__in{ display:grid; grid-template-columns:repeat(4,1fr); }
.dock a{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 4px 8px;
  font-size:11px; font-weight:700; color:var(--ink-55); border-right:1px solid var(--line-soft); }
.dock a:last-child{ border-right:none; }
.dock a i{ font-style:normal; font-size:16px; color:var(--ink); }
.dock a.is-hot{ color:var(--gold); } .dock a.is-hot i{ color:var(--gold); }
@media (max-width:760px){ .dock{ display:block; } body{ padding-bottom:62px; } }

/* ── 푸터 (라이트 톤 대응) ── */
.site-footer{ background:var(--charcoal); color:rgba(255,255,255,.62); }
.site-footer a{ color:rgba(255,255,255,.62); }
.site-footer a:hover{ color:#fff; }
.site-footer__col b{ color:#fff; }
.site-footer__brand img{ filter:brightness(0) invert(1); }
.site-footer__legal{ border-top:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.45); }


/* AI Lab 히어로 — 다크 유지 블록 (라이트 전환 예외) */
.ai-hero, section:has(> .ai-hero-bg){ color:#eef3f8; }
.ai-hero-bg ~ * .display, .ai-hero-bg ~ * .h2{ color:#eef3f8; }
.ai-hero-bg ~ * .lead, .ai-hero-bg ~ * p{ color:rgba(238,243,248,.72); }
.ai-hero-bg ~ * .pill--light{ background:#fff; color:#101a26; }
.ai-hero-bg ~ * .pill--dark{ background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.3); }

/* ═══════════════════════════════════════════════════════════════
   2026-08-26 2차 — 하위 페이지 컴포넌트
   ═══════════════════════════════════════════════════════════════ */

/* ── 페이지 히어로 (하위 페이지 공용) ── */
.phero{ background:var(--bg-deep); border-bottom:1px solid var(--line); }
.phero__in{ width:min(1180px,100% - clamp(28px,6vw,56px)); margin-inline:auto; padding-block:clamp(40px,6vw,72px); }
.phero h1{ margin:0; font-size:clamp(28px,4.6vw,46px); font-weight:800; letter-spacing:-.035em; line-height:1.18; color:var(--ink); }
.phero p{ margin:14px 0 0; max-width:660px; color:var(--ink-55); font-size:15px; line-height:1.8; }
.phero p b{ color:var(--ink); font-weight:800; }
/* 히어로 바로 아래 본문은 위 여백을 줄인다 — 페이지 상단이 텅 비어 보이지 않게 */
.phero + .sec{ padding-top:clamp(44px,6vw,76px); }

/* ── 빈 상태 박스 ── */
.empty-box{ border:1.5px dashed var(--line2,var(--line)); border-radius:14px; padding:clamp(34px,5vw,56px) 24px;
  text-align:center; background:#fff; }
.empty-box b{ display:block; font-size:17px; font-weight:800; color:var(--ink); }
.empty-box p{ margin:10px auto 0; max-width:460px; color:var(--ink-55); font-size:14px; line-height:1.75; }
.fineprint{ margin:22px 0 0; font-size:12.5px; line-height:1.8; color:var(--ink-40); }
.fineprint b{ color:var(--ink-55); }
.fineprint a{ color:var(--gold); font-weight:700; }

/* ── 시설 안내 — 사진 자리를 큼직하게 (2026-08-27) ── */
.facgrid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.faccard{ margin:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff;
  display:flex; flex-direction:column; }
.faccard__img{ position:relative; aspect-ratio:4/3; background:var(--bg-deep); overflow:hidden; }
.faccard__img img{ width:100%; height:100%; object-fit:cover; }
.faccard__body{ padding:20px 22px 24px; }
.faccard__body b{ display:block; font-size:18px; font-weight:800; color:var(--ink); letter-spacing:-.025em; }
.faccard__body p{ margin:8px 0 0; font-size:13.5px; line-height:1.75; color:var(--ink-55); }

/* ── 센터 소개 히어로 — 우측에 회전하는 삼각별 ── */
.phero--star{ overflow:hidden; }
.phero__in--split{ display:grid; gap:24px; align-items:center; }
@media (min-width:900px){ .phero__in--split{ grid-template-columns:minmax(0,1fr) minmax(0,360px); } }
.phero__star{ display:grid; place-items:center; }
.phero__star img{ width:clamp(190px,26vw,300px); height:auto; }
/* 모바일 — 글 아래에 작게 (여기서는 정지 PNG가 내려간다) */
@media (max-width:899px){
  .phero__in--split{ justify-items:center; }
  .phero__star{ margin-top:4px; }
  .phero__star img{ width:130px; opacity:.9; }
}

/* ── 정비 패키지 ── */
.pkgrid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.pkcard{ border:1px solid var(--line); border-radius:14px; background:#fff; padding:22px; display:flex; flex-direction:column; gap:14px; }
.pkcard__h b{ display:block; font-size:19px; font-weight:800; letter-spacing:-.025em; color:var(--ink); }
.pkcard__h span{ display:block; margin-top:5px; font-size:13px; color:var(--ink-55); line-height:1.7; }
.pklist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px;
  border-block:1px solid var(--line-soft); padding-block:14px; }
.pklist li{ display:flex; justify-content:space-between; gap:12px; font-size:13.5px; }
.pklist__n{ color:var(--ink); font-weight:600; }
.pklist__n em{ font-style:normal; color:var(--gold); font-weight:800; }
.pklist__p{ color:var(--ink-40); font-family:var(--mono); font-size:11.5px; white-space:nowrap; }
.pksum{ display:flex; flex-direction:column; gap:6px; }
.pksum__r{ display:flex; justify-content:space-between; font-size:13px; color:var(--ink-55); }
.pksum__t{ display:flex; justify-content:space-between; align-items:baseline; padding-top:9px; border-top:1px solid var(--line);
  font-size:13.5px; color:var(--ink-55); }
.pksum__t b{ font-size:21px; font-weight:800; color:var(--gold); letter-spacing:-.02em; }

/* ── 부품 검색 ── */
.psearch{ display:flex; gap:8px; margin-top:22px; max-width:560px; }
.psearch input{ flex:1; height:52px; padding:0 16px; border:1px solid var(--line2,var(--line)); border-radius:8px;
  background:#fff; font-size:15px; color:var(--ink); }
.psearch input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }
.presult{ display:flex; flex-wrap:wrap; gap:10px; align-items:baseline; justify-content:space-between;
  margin-bottom:18px; font-size:13.5px; color:var(--ink-55); }
.presult b{ color:var(--ink); font-weight:800; }
.presult__hint{ font-size:12px; color:var(--ink-40); }
.ptgrid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.ptcard{ position:relative; border:1px solid var(--line); border-radius:12px; background:#fff; padding:18px 18px 20px;
  min-height:124px; display:flex; flex-direction:column; gap:6px; transition:.2s var(--ease); overflow:hidden; }
.ptcard:hover{ border-color:var(--gold); box-shadow:var(--shadow); transform:translateY(-2px); }
.ptcard__no{ font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--ink-40); }
.ptcard__nm{ font-size:15px; font-weight:800; color:var(--ink); letter-spacing:-.02em; line-height:1.45; }
.ptcard__md{ font-size:11.5px; color:var(--ink-40); line-height:1.6; }
/* ※ 가격은 표시하지 않는다 (2026-08-26) — API 에서도 내려오지 않음 */
/* 마우스를 올리면 카드 아래에서 구매 버튼이 올라온다 */
.ptcard__buy{ position:absolute; left:0; right:0; bottom:0; padding:11px; text-align:center;
  background:var(--gold); color:#fff; font-size:13.5px; font-weight:800;
  transform:translateY(101%); transition:transform .22s var(--ease); }
.ptcard:hover .ptcard__buy, .ptcard:focus-visible .ptcard__buy{ transform:translateY(0); }
@media (hover:none){ .ptcard__buy{ position:static; transform:none; margin:10px -18px -18px; } }

/* ── 캠페인 ── */
.cpgrid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.cpcard{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.cpcard__img{ aspect-ratio:16/9; background:var(--bg-deep); }
.cpcard__img img{ width:100%; height:100%; object-fit:cover; }
.cpcard__b{ padding:20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.cpcard__meta{ display:flex; gap:6px; flex-wrap:wrap; }
.cpcard__badge{ background:var(--gold); color:#fff; font-size:11.5px; font-weight:800; padding:4px 9px; border-radius:5px; }
.cpcard__tg{ background:var(--bg-deep); color:var(--ink-55); font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:5px; }
.cpcard h3{ margin:0; font-size:20px; font-weight:800; letter-spacing:-.025em; color:var(--ink); }
.cpcard p{ margin:0; font-size:13.5px; line-height:1.75; color:var(--ink-55); }
.cpcard__row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding-top:10px; border-top:1px solid var(--line-soft); }
.cpcard__date{ font-size:12.5px; color:var(--ink-55); font-variant-numeric:tabular-nums; }
.cpcard__price{ font-size:17px; font-weight:800; color:var(--gold); }
.cpcard__body{ font-size:13.5px; line-height:1.8; color:var(--ink-55); }
.cpcard__detail img{ width:100%; border-radius:10px; }

/* ── 시공 소개 ── */
.kdgrid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.kdcard{ border:1px solid var(--line); border-radius:12px; padding:20px; background:#fff; }
.kdcard b{ display:block; font-size:16px; font-weight:800; color:var(--ink); letter-spacing:-.02em; }
.kdcard p{ margin:8px 0 0; font-size:13px; line-height:1.7; color:var(--ink-55); }
.cgroup{ display:flex; align-items:center; gap:10px; margin:0 0 14px; }
.cgroup span{ font:800 12.5px/1 var(--mono); letter-spacing:.14em; color:var(--ink); }
.cgroup::after{ content:""; flex:1; height:1px; background:var(--line); }
.cmgrid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); margin-bottom:26px; }
.cmcard{ border:1px solid var(--line); border-radius:12px; padding:16px 18px; background:#fff;
  display:flex; flex-direction:column; gap:4px; transition:.2s var(--ease); }
.cmcard:hover{ border-color:var(--gold); transform:translateY(-2px); box-shadow:var(--shadow); }
.cmcard b{ font-size:15.5px; font-weight:800; color:var(--ink); letter-spacing:-.02em; }
.cmcard span{ font-size:12px; color:var(--ink-40); font-family:var(--mono); }
.cmcard em{ margin-top:6px; font-style:normal; font-size:12.5px; font-weight:800; color:var(--ink-55); }
.cmcard:hover em{ color:var(--gold); }

/* ── 정비 과정 스텝 ── */
.stepgrid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.stepcard{ border:1px solid var(--line); border-radius:12px; padding:20px; background:#fff; }
.stepcard__n{ display:inline-block; font:800 12px/1 var(--mono); letter-spacing:.1em; color:var(--gold); margin-bottom:10px; }
.stepcard b{ display:block; font-size:16px; font-weight:800; color:var(--ink); letter-spacing:-.02em; }
.stepcard p{ margin:8px 0 0; font-size:13px; line-height:1.7; color:var(--ink-55); }

/* ── 공지 카드 (블로그) ── */
.nwgrid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.nwcard{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff;
  display:flex; flex-direction:column; transition:.22s var(--ease); }
.nwcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:#d5d8dd; }
.nwcard__img{ aspect-ratio:16/10; background:var(--bg-deep); position:relative; overflow:hidden; }
.nwcard__img img{ width:100%; height:100%; object-fit:cover; }
.nwcard__b{ padding:18px; display:flex; flex-direction:column; gap:7px; flex:1; }
.nwcard__d{ font-size:11.5px; color:var(--ink-40); font-variant-numeric:tabular-nums; }
.nwcard b{ font-size:15.5px; font-weight:800; color:var(--ink); letter-spacing:-.02em; line-height:1.45; }
.nwcard p{ margin:0; font-size:13px; line-height:1.7; color:var(--ink-55); flex:1; }
.nwcard em{ font-style:normal; font-size:12.5px; font-weight:800; color:var(--ink-55); }
.nwcard:hover em{ color:var(--gold); }

/* ── 더보기: 관련 사이트 · 전체 서비스 ── */
.lkgrid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.lkcard{ display:flex; align-items:center; gap:13px; border:1px solid var(--line); border-radius:12px;
  padding:18px; background:#fff; transition:.2s var(--ease); }
.lkcard:hover{ border-color:var(--gold); transform:translateY(-2px); }
.lkcard__ic{ width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:9px;
  background:var(--ink); color:#fff; font-size:17px; }
.lkcard b{ display:block; font-size:15px; font-weight:800; color:var(--ink); }
.lkcard span{ display:block; margin-top:3px; font-size:12.5px; color:var(--ink-55); }
.svgrid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
.svcard{ display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:12px;
  padding:16px; background:#fff; transition:.2s var(--ease); }
.svcard:hover{ border-color:var(--gold); background:#fff; transform:translateY(-2px); }
.svcard__ic{ width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:9px;
  background:var(--gold-soft); font-size:16px; }
.svcard b{ display:block; font-size:14.5px; font-weight:800; color:var(--ink); letter-spacing:-.02em; }
.svcard span{ display:block; margin-top:2px; font-size:11.5px; color:var(--ink-55); }

/* ── 공지 리스트 · FAQ ── */
.ntlist{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.ntrow{ display:flex; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line-soft); }
.ntrow:last-child{ border-bottom:none; }
.ntrow:hover{ background:var(--bg-deep); }
.ntrow__t{ font-size:13.5px; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ntrow__d{ font-size:12px; color:var(--ink-40); white-space:nowrap; font-variant-numeric:tabular-nums; }
.faq{ display:flex; flex-direction:column; gap:8px; }
.faq__i{ border:1px solid var(--line); border-radius:12px; background:#fff; overflow:hidden; }
.faq__i summary{ display:flex; align-items:center; gap:10px; padding:15px 18px; cursor:pointer;
  font-size:14px; font-weight:800; color:var(--ink); letter-spacing:-.02em; list-style:none; }
.faq__i summary::-webkit-details-marker{ display:none; }
.faq__q{ width:22px; height:22px; flex:none; display:grid; place-items:center; border-radius:6px;
  background:var(--gold-soft); color:var(--gold); font-size:12px; font-weight:800; }
.faq__i p{ margin:0; padding:0 18px 16px 50px; font-size:13.5px; line-height:1.8; color:var(--ink-55); }
.faq__i[open] summary{ border-bottom:1px solid var(--line-soft); }

/* 네비가 길어져 좁은 데스크톱에서 줄바꿈되지 않게 */
@media (max-width:1120px){ .site-nav{ display:none; } }

/* ── 2차 보강: 상세/탭/연혁 ── */
.backlink{ display:inline-flex; align-items:center; gap:6px; margin-bottom:14px;
  font-size:13px; font-weight:800; color:var(--ink-55); }
.backlink:hover{ color:var(--gold); }
.phero__gen{ font-size:.52em; font-weight:700; color:var(--ink-40); font-family:var(--mono); letter-spacing:0; }

/* 탭 */
.ctabs{ display:flex; gap:8px; margin-top:22px; }
.ctab{ padding:10px 20px; border:1px solid var(--line2,var(--line)); border-radius:8px; background:#fff;
  font-size:14px; font-weight:800; color:var(--ink-55); }
.ctab.is-on{ background:var(--ink); border-color:var(--ink); color:#fff; }
.ctab:hover:not(.is-on){ border-color:var(--ink); color:var(--ink); }
.cgroup small{ font-size:12px; font-weight:600; color:var(--ink-40); letter-spacing:0; font-family:var(--kr); }

/* 시공 항목 상세 */
.optbody{ margin:0; font-size:16px; line-height:1.95; color:var(--ink-70); }
.optnote{ margin-top:22px; border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:12px; padding:20px 22px; background:var(--bg-deep); }
.optnote b{ display:block; font-size:15px; font-weight:800; color:var(--ink); }
.optnote p{ margin:8px 0 0; font-size:13.5px; line-height:1.8; color:var(--ink-55); }
.optnote p b{ display:inline; color:var(--ink); }
.optmore{ margin:44px 0 16px; font-size:19px; font-weight:800; letter-spacing:-.025em; color:var(--ink); }

/* 캠페인 상세 */
.cpview{ border:1px solid var(--line); border-radius:16px; padding:clamp(24px,4vw,40px); background:#fff; }
.cpview__meta{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.cpview__date{ font-size:12.5px; color:var(--ink-55); font-variant-numeric:tabular-nums; }
.cpview h1{ margin:16px 0 0; font-size:clamp(24px,3.6vw,36px); font-weight:800; letter-spacing:-.03em; line-height:1.25; color:var(--ink); }
.cpview__lead{ margin:12px 0 0; font-size:15.5px; line-height:1.85; color:var(--ink-55); }
.cpview__price{ margin-top:16px; display:inline-flex; align-items:baseline; gap:10px;
  background:var(--gold-soft); border-radius:10px; padding:12px 18px; }
.cpview__price span{ font-size:12.5px; font-weight:700; color:var(--ink-55); }
.cpview__price b{ font-size:24px; font-weight:800; color:var(--gold); letter-spacing:-.02em; }
.cpview__img{ margin-top:20px; }
.cpview__img img{ width:100%; border-radius:12px; }
.cpview__body{ margin-top:20px; font-size:14.5px; line-height:1.95; color:var(--ink-70); }
.cpview__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.cpcard__go{ margin-top:4px; font-size:13px; font-weight:800; color:var(--ink-55); }
.cpcard:hover .cpcard__go{ color:var(--gold); }
a.cpcard{ transition:.22s var(--ease); }
a.cpcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:#d5d8dd; }

/* 패키지 — 구성 미정 */
.pkempty{ margin:0; padding:14px 0; border-block:1px solid var(--line-soft);
  font-size:13px; line-height:1.7; color:var(--ink-40); }

/* 센터 소개 — 인사말·연혁·인증 */
.gtitle{ margin:0 0 18px; font-size:clamp(22px,3.2vw,32px); font-weight:800; letter-spacing:-.03em; line-height:1.35; color:var(--ink); }
.gbody p{ margin:0 0 14px; font-size:14.5px; line-height:1.95; color:var(--ink-55); }
.gbody p b{ color:var(--ink); font-weight:800; }
.hist{ border-top:1px solid var(--line); }
.hist__r{ display:flex; gap:clamp(16px,4vw,44px); padding:18px 4px; border-bottom:1px solid var(--line); align-items:baseline; }
.hist__y{ flex:none; width:64px; font:800 15px/1 var(--mono); color:var(--gold); letter-spacing:.02em; }
.hist__t{ font-size:14.5px; color:var(--ink); font-weight:600; line-height:1.6; }
/* 공식 인증 · 자격 — 번호 + 제목 + 설명 (2026-08-27 개편) */
.certgrid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.certcard{ position:relative; border:1px solid var(--line); border-radius:14px;
  padding:24px 26px 26px; background:#fff; text-align:left; }
.certcard__n{ display:block; font:800 12px/1 var(--mono); letter-spacing:.14em; color:var(--gold); }
.certcard b{ display:block; margin-top:12px; font-size:18px; font-weight:800; color:var(--ink);
  letter-spacing:-.025em; line-height:1.35; }
.certcard__d{ display:block; margin-top:9px; font-size:13.5px; line-height:1.75; color:var(--ink-55); }
.sec--cream .certcard{ background:#fff; }

/* ═══════════════════════════════════════════════════════════════
   실시간 차량 현황 (live.php) — 2026-08-27 리디자인
   상태는 #lvRoot 의 클래스 하나로 갈린다: (기본) / .is-found / .is-error
   ═══════════════════════════════════════════════════════════════ */

@keyframes kyPulse{ 0%{ box-shadow:0 0 0 0 rgba(226,35,26,.45) } 70%{ box-shadow:0 0 0 9px rgba(226,35,26,0) } 100%{ box-shadow:0 0 0 0 rgba(226,35,26,0) } }
@keyframes kyRing { 0%{ box-shadow:0 0 0 0 rgba(226,35,26,.35) } 70%{ box-shadow:0 0 0 12px rgba(226,35,26,0) } 100%{ box-shadow:0 0 0 0 rgba(226,35,26,0) } }
@keyframes kySpin { to { transform:rotate(360deg) } }

/* ── 히어로 ── */
.lv-hero{ background:var(--bg-deep); padding-block:clamp(38px,5vw,56px) clamp(40px,5vw,64px); border-bottom:1px solid var(--line); }
.lv-hero__h{ margin:14px 0 0; font-size:clamp(28px,4.4vw,42px); font-weight:800; letter-spacing:-.035em; line-height:1.15; color:var(--ink); }
.lv-hero__sub{ margin:10px 0 0; font-size:clamp(15px,1.6vw,17px); color:var(--ink-55); line-height:1.7; }

/* ── 조회 카드 ── */
.lv-search{ margin-top:clamp(24px,3vw,34px); background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:clamp(20px,2.6vw,28px) clamp(20px,3vw,32px); box-shadow:0 12px 32px rgba(22,24,28,.05);
  transition:padding .25s var(--ease), border-color .2s; }
.lv-search__row{ display:flex; gap:16px; align-items:flex-end; }
.lv-f{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.lv-f--plate{ flex:1.4; }
.lv-f--phone{ width:min(260px,34%); flex:none; }
.lv-f__l{ font-size:13px; font-weight:700; color:var(--ink-55); letter-spacing:-.01em; }
.lv-f__i{ height:58px; width:100%; border:1.5px solid var(--line); border-radius:12px; padding:0 20px;
  font-size:18px; font-weight:600; color:var(--ink); background:#fff; box-sizing:border-box;
  transition:border-color .16s, box-shadow .16s, background .16s; }
.lv-f__i::placeholder{ color:var(--ink-40); font-weight:500; }
.lv-f__i:focus{ border-color:var(--gold); box-shadow:0 0 0 4px var(--gold-soft); outline:none; }

.lv-go{ position:relative; height:58px; padding:0 clamp(28px,3.4vw,44px); flex:none;
  background:var(--gold); color:#fff; border-radius:12px; font-size:18px; font-weight:800; letter-spacing:-.02em;
  display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer;
  transition:background .18s, height .25s var(--ease); }
.lv-go:hover{ background:var(--gold-deep); }
.lv-go:disabled{ background:var(--gold-deep); cursor:progress; }
.lv-go__b{ display:none; }
.lv-go__spin{ display:none; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff; 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{ display:none; }
.lv-go[aria-busy="true"]::after{ content:"조회 중"; }

.lv-search__hint{ margin:14px 0 0; font-size:14px; color:var(--ink-40); line-height:1.7; }

/* 오류 줄 */
.lv-err{ margin-top:14px; display:flex; align-items:flex-start; gap:10px;
  background:var(--gold-soft); border-radius:10px; padding:13px 16px;
  font-size:15px; font-weight:600; line-height:1.65; color:var(--gold-deep); }
.lv-err b{ flex:none; width:20px; height:20px; margin-top:1px; border-radius:50%; background:var(--gold); color:#fff;
  display:grid; place-items:center; font-size:13px; font-weight:800; }
.lv-err[hidden]{ display:none; }   /* display:flex 가 [hidden] 을 덮어쓰지 않게 */

/* ③ 실패 — 조회 카드 테두리 강조 */
.lv.is-error .lv-search{ border:1.5px solid rgba(226,35,26,.45); }
.lv.is-error .lv-f__i{ border-color:rgba(226,35,26,.55); }
.lv.is-error .lv-search__hint{ display:none; }

/* ② 성공 — 조회 영역 축소, 버튼은 「다시 조회」 */
.lv.is-found .lv-search{ padding:20px 24px; }
.lv.is-found .lv-f__l{ display:none; }
.lv.is-found .lv-f__i, .lv.is-found .lv-go{ height:52px; }
.lv.is-found .lv-f__i{ font-size:17px; }
.lv.is-found .lv-search__hint{ display:none; }
.lv.is-found .lv-go{ background:var(--charcoal); font-size:16px; font-weight:700; padding:0 clamp(22px,2.6vw,38px); }
.lv.is-found .lv-go:hover{ background:#000; }
.lv.is-found .lv-go__a{ display:none; }
.lv.is-found .lv-go__b{ display:inline; }

/* 모바일 성공 시 한 줄 요약 (데스크톱에서는 숨김) */
.lv-sum{ display:none; }

/* ── 신뢰 문구 2줄 ── */
.lv-trust{ list-style:none; margin:clamp(20px,2.6vw,28px) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:14px clamp(28px,4vw,48px); }
.lv-trust li{ display:flex; align-items:flex-start; gap:12px; }
.lv-trust__n{ flex:none; font:800 12px/1.5 var(--mono); letter-spacing:.1em; color:var(--gold); }
.lv-trust span:last-child{ font-size:15px; line-height:1.6; color:var(--ink-55); }
.lv-trust strong{ font-weight:700; color:var(--ink); }

/* ── 결과 카드 ── */
.lv-panel{ padding-block:clamp(36px,5vw,48px) clamp(48px,7vw,64px); }
.lv-card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:clamp(28px,4vw,48px) clamp(22px,4vw,56px); }
.lv-card__bar{ position:absolute; top:0; left:0; right:0; height:4px; background:var(--gold);
  border-radius:14px 14px 0 0; opacity:0; transition:opacity .25s; }
.lv.is-found .lv-card__bar{ opacity:1; }

.lv-card__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.lv-eyebrow{ display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  font:700 12.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-40); }
.lv-eyebrow__s{ color:var(--line); }
.lv-eyebrow__m{ font-family:var(--kr); font-size:15px; font-weight:600; letter-spacing:-.01em;
  text-transform:none; color:var(--ink-55); }
.lv.is-found .lv-eyebrow{ color:var(--gold); }

.lv-state{ margin:14px 0 0; font-size:clamp(20px,3vw,38px); font-weight:800; letter-spacing:-.03em;
  line-height:1.25; color:var(--ink-40); }
.lv.is-found .lv-state, .lv.is-error .lv-state{ color:var(--ink); }
.lv-state em{ font-style:normal; color:var(--gold); }
.lv-state small{ display:block; margin-top:10px; font-size:15px; font-weight:500;
  letter-spacing:-.01em; color:var(--ink-55); }

/* LIVE 뱃지 */
.lv-badge{ flex:none; display:inline-flex; align-items:center; gap:12px; height:44px; padding:0 20px;
  border-radius:999px; background:var(--bg-deep); transition:background .25s; }
.lv-badge b{ font:700 13px/1 var(--mono); letter-spacing:.16em; color:var(--ink-40); }
.lv-badge__d{ width:9px; height:9px; border-radius:50%; background:var(--ink-40); }
.lv-badge__s{ width:1px; height:14px; background:var(--line); }
.lv-badge__t{ font-size:13px; font-weight:600; color:var(--ink-40); }
.lv.is-found .lv-badge{ background:var(--gold-soft); }
.lv.is-found .lv-badge b{ color:var(--gold); }
.lv.is-found .lv-badge__d{ background:var(--gold); animation:kyPulse 2s ease-out infinite; }
.lv.is-found .lv-badge__s{ background:rgba(226,35,26,.25); }
.lv.is-found .lv-badge__t{ color:var(--ink-55); }

/* 진행률 */
.lv-meter{ display:flex; align-items:flex-end; gap:clamp(20px,3vw,40px); margin-top:clamp(28px,3.6vw,44px); }
.lv-meter__n{ display:flex; align-items:baseline; font-weight:800; letter-spacing:-.04em; line-height:.9;
  color:#c9cdd2; font-variant-numeric:tabular-nums; }
.lv-meter__n em{ font-style:normal; font-size:clamp(48px,8vw,88px); }
.lv:not(.is-found) .lv-meter__n em{ font-size:clamp(38px,6vw,72px); }  /* 비활성일 땐 조금 작게 */
.lv-meter__n span{ font-size:clamp(22px,3.2vw,34px); font-weight:700; margin-left:4px; color:var(--ink-55); }
.lv.is-found .lv-meter__n{ color:var(--ink); }
.lv-meter__b{ flex:1; min-width:0; padding-bottom:12px; }
.lv-bar{ height:14px; background:var(--line); border-radius:999px; overflow:hidden; }
.lv-bar i{ display:block; width:0; height:100%; background:var(--gold); border-radius:999px;
  transition:width .6s ease; }
.lv-meter__sc{ display:flex; justify-content:space-between; margin-top:10px;
  font:600 12px/1 var(--mono); color:var(--ink-40); }

/* 5단계 스테퍼 — 가로 */
.lv-steps{ list-style:none; margin:clamp(34px,4.4vw,56px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); }
.lv-step{ position:relative; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
.lv-step__line{ position:absolute; top:22px; height:4px; left:calc(-50% + 32px); right:calc(50% + 32px);
  background:var(--line); border-radius:2px; }
.lv-step:first-child .lv-step__line{ display:none; }
.lv-step__b{ display:block; }
.lv-step__n{ width:48px; height:48px; border-radius:50%; background:#fff; border:2px solid var(--line);
  display:grid; place-items:center; font-size:16px; font-weight:700; color:var(--ink-40); box-sizing:border-box;
  position:relative; z-index:1; }
.lv-step__t{ display:block; font-size:16px; font-weight:700; color:var(--ink-40); letter-spacing:-.02em; }
.lv-step__c{ display:block; margin-top:3px; font-size:12px; font-weight:600; color:var(--ink-40); }

.lv-step.is-done .lv-step__n{ background:var(--gold); border-color:var(--gold); color:#fff; font-size:20px; font-weight:800; }
.lv-step.is-done .lv-step__t{ color:var(--ink); }
.lv-step.is-done .lv-step__line, .lv-step.is-run .lv-step__line{ background:var(--gold); }
.lv-step.is-run .lv-step__n{ border:3px solid var(--gold); background:#fff; animation:kyRing 2.4s ease-out infinite; }
.lv-step.is-run .lv-step__n::after{ content:""; width:14px; height:14px; border-radius:50%; background:var(--gold); }
.lv-step.is-run .lv-step__t{ color:var(--ink); font-weight:800; }
.lv-step.is-run .lv-step__c{ color:var(--gold); font-weight:700; }

.lv-foot{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:clamp(28px,3.6vw,44px); padding-top:24px; border-top:1px solid var(--line);
  font-size:13px; color:var(--ink-40); }
.lv-foot__u{ font:600 12px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }

/* ── 앱 밴드 ── */
.lv-app{ background:var(--charcoal); color:#fff; }
.lv-app__in{ padding-block:clamp(36px,5vw,48px); display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap; }
.lv-app__lab{ margin:0 0 12px; font:700 12px/1 var(--mono); letter-spacing:.18em; color:#ff6a60; }
.lv-app h2{ margin:0; font-size:clamp(22px,3.4vw,30px); font-weight:800; letter-spacing:-.03em; }
.lv-app__d{ margin:8px 0 0; font-size:15px; color:rgba(255,255,255,.66); line-height:1.7; }
.lv-app__cta{ display:flex; gap:14px; flex-wrap:wrap; }
.lv-app__ghost, .lv-app__red{ height:54px; padding:0 30px; border-radius:12px; display:inline-flex; align-items:center;
  font-size:16px; font-weight:700; letter-spacing:-.02em; transition:.18s var(--ease); }
.lv-app__ghost{ border:1px solid rgba(255,255,255,.28); color:#fff; }
.lv-app__ghost:hover{ background:rgba(255,255,255,.08); }
.lv-app__red{ background:var(--gold); color:#fff; }
.lv-app__red:hover{ background:var(--gold-deep); }

/* ── 태블릿 ── */
@media (max-width:860px){
  .lv-search__row{ flex-wrap:wrap; }
  .lv-f--plate{ flex:1 1 100%; }
  .lv-f--phone{ flex:1 1 auto; width:auto; }
  .lv-go{ flex:1 1 auto; }
}

/* ── 모바일 — 스테퍼 세로형 ── */
@media (max-width:640px){
  .lv-search__row{ gap:12px; }
  .lv-go{ width:100%; }

  /* 성공 시: 입력칸 감추고 한 줄 요약 + 다시 조회 */
  .lv.is-found .lv-search__row{ display:none; }
  .lv.is-found .lv-sum{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .lv-sum__p{ font-size:17px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
  .lv-sum__m{ font-size:13px; color:var(--ink-40); margin-left:6px; font-weight:600; }
  .lv-sum__b{ flex:none; height:40px; padding:0 16px; border-radius:10px; background:var(--charcoal); color:#fff;
    font-size:14px; font-weight:700; cursor:pointer; }

  .lv-eyebrow__s{ display:none; }        /* 줄바꿈되면 구분선 「|」이 어색해진다 */
  .lv-meter{ align-items:center; gap:18px; }
  .lv-meter__b{ padding-bottom:0; }
  .lv-bar{ height:10px; }
  .lv-meter__sc{ display:none; }

  .lv-steps{ grid-template-columns:1fr; gap:0; }
  .lv-step{ flex-direction:row; align-items:flex-start; gap:14px; text-align:left;
    padding-bottom:22px; }
  .lv-step:last-child{ padding-bottom:0; }
  .lv-step__n{ width:36px; height:36px; font-size:14px; }
  .lv-step.is-done .lv-step__n{ font-size:16px; }
  .lv-step.is-run .lv-step__n::after{ width:11px; height:11px; }
  /* 세로 레일 — 노드 중앙(18px) 기준, 바로 위 칸에서 내려온다 */
  .lv-step__line{ top:-22px; bottom:auto; left:16px; right:auto; width:3px; height:22px; border-radius:2px; }
  .lv-step__t{ font-size:15px; }
  .lv-step__b{ padding-top:7px; }
}

@media (prefers-reduced-motion:reduce){
  .lv-badge__d, .lv-step.is-run .lv-step__n, .lv-go__spin{ animation:none !important; }
  .lv-bar i{ transition:none; }
}