/* CAR-GALL-009 마닐라모터스 — 매물형(GALL) · 프리미엄(별도 제작) 샘플.
   건메탈 블랙 + 시그널 옐로 + Archivo 대문자. 프리미엄 딜러 문법.
   전부 다크 — 쇼룸 조명 아래 차가 주인공이다. */

:root {
  --bg:      #0E1114;
  --panel:   #14181D;
  --panel2:  #1A1F25;
  --yellow:  #F5C518;
  --ink:     #F2F4F6;
  --mut:     rgba(242,244,246,.6);
  --mut2:    rgba(242,244,246,.38);
  --line:    rgba(242,244,246,.1);
  --line2:   rgba(242,244,246,.2);
  --disp: "Archivo", "Pretendard Variable", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --flag-h: 34px;       /* 샘플 고지 띠. 실제 제작에서는 이 줄과 .flag 를 지운다 */
  --pad-x: clamp(20px, 5vw, 48px);
}

body { background: var(--bg); color: var(--ink); }
::selection { background: var(--yellow); color: #0E1114; }

.flag {
  height: var(--flag-h);
  display: flex; align-items: center; justify-content: center;
  padding-inline: 16px; text-align: center;
  background: #000; color: rgba(255,255,255,.55);
  font-size: var(--fs-xs); letter-spacing: var(--ls-wide);
}

.wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--pad-x); }

.eye {
  font-family: var(--mono); font-weight: 600;
  font-size: .75rem; letter-spacing: .3em; color: var(--yellow);
}
.ttl {
  margin-top: var(--sp-3);
  font-family: var(--disp); font-weight: 800;
  font-size: clamp(1.625rem, 4.4vw, 2.25rem);
  letter-spacing: -.02em; line-height: 1.2;
}

/* ── 헤더 ── */
.hd {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--sp-6);
  padding: 12px var(--pad-x);
  background: rgba(14,17,20,.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.hd__logo { color: var(--ink); display: flex; align-items: center; flex-wrap: wrap; column-gap: 10px; }
/* 캘리그라피 워드마크 — 빈티지 오토 스크립트 */
.hd__script {
  font-family: "Yellowtail", cursive;
  font-size: 1.75rem; line-height: 1; color: var(--yellow);
  transform: rotate(-2deg); display: inline-block;
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
/* 프리미엄 마크 — 금박에 광택이 흐른다 */
.hd__badge {
  position: relative; overflow: hidden;
  padding: 4px 10px; border: 0;
  background: linear-gradient(115deg, #7A5B10 0%, #D9A821 22%, #F5C518 42%, #FFF3B0 50%, #F5C518 58%, #D9A821 78%, #7A5B10 100%);
  background-size: 220% 100%;
  color: #100C02;
  font-family: var(--mono); font-weight: 600;
  font-size: .5625rem; letter-spacing: .24em;
  animation: goldshift 4.5s ease-in-out infinite;
  box-shadow: 0 0 14px rgba(245,197,24,.35);
}
/* 지나가는 하이라이트 한 줄 */
.hd__badge::after {
  content: ""; position: absolute; top: -30%; bottom: -30%; width: 34%;
  left: -50%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.85) 50%, transparent 100%);
  transform: skewX(-18deg);
  animation: goldsweep 4.5s ease-in-out infinite;
}
@keyframes goldshift { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
@keyframes goldsweep { 0%, 55% { left: -60%; } 80%, 100% { left: 140%; } }
@media (prefers-reduced-motion: reduce) { .hd__badge, .hd__badge::after { animation: none; } }
.hd__logo small {
  flex-basis: 100%; margin-top: 3px;
  font-family: var(--font-sans); font-weight: var(--fw-normal);
  font-size: .625rem; letter-spacing: .18em; color: var(--mut2);
}
.hd__logo--ft .hd__script { font-size: 2.25rem; }
.hd__nav { display: none; gap: var(--sp-6); margin-left: auto; }
.hd__nav a { font-size: var(--fs-sm); color: var(--mut); transition: color .2s; }
.hd__nav a:hover { color: var(--yellow); }
.hd > .kbtn { margin-left: auto; }
@media (min-width: 780px) { .hd__nav { display: flex; } .hd > .kbtn { margin-left: 0; } }

/* ── 히어로 ── */
.stage { position: relative; isolation: isolate; overflow: hidden; }
.stage__media { position: absolute; inset: 0; z-index: -2; }
.stage__media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.3s ease;
}
.stage__media video.is-on { opacity: 1; }
.stage__veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(14,17,20,.82) 0%, rgba(14,17,20,.4) 45%, rgba(14,17,20,.94) 100%);
}
.stage__in {
  max-width: 1200px; margin-inline: auto;
  padding: clamp(72px, 12vw, 140px) var(--pad-x) clamp(48px, 8vw, 88px);
}
.stage__kick {
  font-family: var(--mono); font-weight: 600;
  font-size: .75rem; letter-spacing: .3em; color: var(--yellow);
}
.stage h1 {
  margin-top: var(--sp-5);
  font-family: var(--disp); font-weight: 800;
  font-size: clamp(2.125rem, 6.6vw, 3.75rem);
  line-height: 1.14; letter-spacing: -.03em;
}
.stage h1 em { font-style: normal; color: var(--yellow); }
.stage__lead { margin-top: var(--sp-5); font-size: var(--fs-md); color: var(--mut); }
.stage__stats {
  margin-top: clamp(28px, 4vw, 44px);
  display: flex; flex-wrap: wrap; gap: 0;
  border-block: 1px solid var(--line2);
  max-width: 640px;
}
.stage__stats div {
  flex: 1; min-width: 140px; padding: var(--sp-5) var(--sp-4);
  border-right: 1px solid var(--line);
}
.stage__stats div:last-child { border-right: 0; }
.stage__stats b {
  display: block;
  font-family: var(--mono); font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2rem); color: var(--yellow);
}
.stage__stats b i { font-style: normal; font-size: .55em; color: var(--mut); margin-left: 2px; }
.stage__stats span { display: block; margin-top: 4px; font-size: var(--fs-xs); letter-spacing: .1em; color: var(--mut2); }
.stage__cta { margin-top: clamp(28px, 4vw, 44px); }
.stage__dots { display: flex; gap: 9px; margin-top: var(--sp-6); }
.stage__dots button {
  width: 22px; height: 3px; padding: 0; border: 0; cursor: pointer;
  background: rgba(242,244,246,.28); transition: background .3s, width .3s;
}
.stage__dots button.is-on { background: var(--yellow); width: 38px; }

/* 마닐라 거리 띠 */
.strip { overflow: hidden; background: #000; border-block: 1px solid var(--line); }
.strip__track { display: flex; gap: 2px; width: max-content; animation: sflow 52s linear infinite; }
.strip:hover .strip__track { animation-play-state: paused; }
.strip__track img { width: clamp(190px, 21vw, 300px); aspect-ratio: 900 / 560; object-fit: cover; display: block; flex: none; }
@keyframes sflow { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .strip__track { animation: none; } }
.ybtn {
  display: inline-block; padding: 15px 36px;
  background: var(--yellow); color: #0E1114;
  font-family: var(--disp); font-weight: 700; font-size: var(--fs-base); letter-spacing: .02em;
  transition: filter .2s, transform .15s;
}
.ybtn:hover { filter: brightness(1.08); }
.ybtn:active { transform: scale(.985); }

/* ── 매물 ── */
.stock { padding: clamp(56px, 9vw, 104px) 0; }
.stock__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.stock__count { font-family: var(--mono); font-size: var(--fs-sm); color: var(--mut); }
.stock__count b { color: var(--yellow); font-weight: 600; }

.filters {
  margin-top: clamp(20px, 3vw, 32px);
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  padding: var(--sp-4); background: var(--panel);
  border: 1px solid var(--line);
}
.filters select {
  flex: 1; min-width: 150px;
  padding: 11px 12px;
  background: var(--panel2); color: var(--ink);
  border: 1px solid var(--line2); border-radius: 0;
  font: inherit; font-size: var(--fs-sm); cursor: pointer;
  color-scheme: dark;
}
.filters select:focus { outline: none; border-color: var(--yellow); }
.filters button {
  padding: 11px 20px; cursor: pointer;
  background: none; border: 1px solid var(--line2); color: var(--mut);
  font: inherit; font-size: var(--fs-sm);
  transition: color .2s, border-color .2s;
}
.filters button:hover { color: var(--yellow); border-color: var(--yellow); }

.grid {
  margin-top: clamp(20px, 3vw, 32px);
  display: grid; gap: clamp(14px, 2vw, 22px);
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
}
.grid__empty { margin-top: var(--sp-7); text-align: center; color: var(--mut2); }

.car {
  background: var(--panel); border: 1px solid var(--line);
  cursor: pointer; overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s;
}
.car:hover, .car:focus-visible { transform: translateY(-4px); border-color: rgba(245,197,24,.5); }
.car:focus-visible { outline: none; }
.car figure { position: relative; margin: 0; overflow: hidden; }
.car img {
  width: 100%; aspect-ratio: 1000 / 600; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.car:hover img { transform: scale(1.045); }
.car__st {
  position: absolute; top: 10px; left: 10px;
  padding: 5px 12px;
  font-family: var(--disp); font-weight: 700; font-size: .6875rem; letter-spacing: .06em;
}
.car__st.is-new  { background: var(--yellow); color: #0E1114; }
.car__st.is-hold { background: rgba(14,17,20,.85); color: var(--mut); border: 1px solid var(--line2); }
.car__body { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
.car__id { font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; color: var(--mut2); }
.car h3 {
  margin-top: 6px;
  font-size: 1.0625rem; font-weight: var(--fw-bold); letter-spacing: -.01em;
  line-height: 1.4;
}
.car__spec { margin-top: 6px; font-family: var(--mono); font-size: .75rem; color: var(--mut); }
.car__price { margin-top: var(--sp-3); display: flex; align-items: baseline; gap: 10px; }
.car__price b {
  font-family: var(--mono); font-weight: 600; font-size: 1.25rem;
  color: var(--yellow); font-variant-numeric: tabular-nums;
}
.car__price span { font-size: var(--fs-xs); color: var(--mut2); }

/* ── 구매 안내 ── */
.how { padding: clamp(56px, 9vw, 104px) 0; background: var(--panel); border-block: 1px solid var(--line); }
.how__grid {
  list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0;
  display: grid; gap: clamp(24px, 4vw, 44px);
}
@media (min-width: 820px) { .how__grid { grid-template-columns: repeat(3, 1fr); } }
.how__grid li { border-top: 2px solid var(--yellow); padding-top: var(--sp-5); }
.how__grid em {
  font-style: normal; font-family: var(--mono); font-weight: 600;
  font-size: .875rem; color: var(--yellow);
}
.how__grid b { display: block; margin-top: var(--sp-3); font-size: var(--fs-md); font-weight: var(--fw-bold); }
.how__grid p { margin-top: var(--sp-3); font-size: var(--fs-base); color: var(--mut); line-height: 1.75; }

/* ── 푸터 ── */
.ft { padding: clamp(48px, 7vw, 80px) 0; background: #000; }
.ft__info {
  margin-top: var(--sp-5);
  display: grid; grid-template-columns: 56px 1fr; gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm); color: var(--mut);
}
.ft__info dt { color: var(--mut2); }
.ft__info dd { margin: 0; }
.ft__note {
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--mut2); line-height: 1.9;
}
.ft__note b { color: var(--mut); }

/* 카카오 */
.kbtn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; cursor: pointer; padding: 12px 20px;
  background: #FEE500; color: #191919;
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  transition: filter .2s, transform .15s;
}
.kbtn--sm { padding: 9px 16px; }
.kbtn--wide { width: 100%; justify-content: center; padding: 14px 24px; font-size: var(--fs-base); margin-top: var(--sp-5); }
.kbtn:hover { filter: brightness(1.05); }
.kbtn:active { transform: scale(.985); }
.kbtn svg { width: 18px; height: 18px; }

/* ── 매물 상세 모달 ── */
.dtl {
  border: 1px solid var(--line2); padding: 0; margin: auto;
  width: min(560px, calc(100% - 32px));
  background: var(--panel); color: var(--ink);
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
  max-height: calc(100svh - 40px);
}
.dtl::backdrop { background: rgba(0,0,0,.68); backdrop-filter: blur(4px); }
.dtl[open] { animation: din .28s cubic-bezier(.2,.7,.3,1); }
@keyframes din { from { opacity: 0; transform: translateY(16px); } }
.dtl__in { position: relative; overflow-y: auto; max-height: calc(100svh - 40px); }
.dtl__x {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 40px; height: 40px; border: 0; cursor: pointer;
  background: rgba(14,17,20,.7); color: #fff; backdrop-filter: blur(4px);
  font-size: 1.375rem; line-height: 1;
}
.dtl__img { width: 100%; aspect-ratio: 1000 / 600; object-fit: cover; display: block; }
.dtl__body { padding: var(--sp-5) var(--sp-6) var(--sp-6); }
.dtl__badge {
  display: inline-block; padding: 4px 11px;
  font-family: var(--disp); font-weight: 700; font-size: .6875rem; letter-spacing: .06em;
  background: var(--panel2); color: var(--mut); border: 1px solid var(--line2);
}
.dtl__badge.is-new { background: var(--yellow); color: #0E1114; border: 0; }
.dtl__name { margin-top: var(--sp-3); font-size: 1.375rem; font-weight: var(--fw-bold); letter-spacing: -.01em; }
.dtl__price { margin-top: var(--sp-2); display: flex; align-items: baseline; gap: 10px; }
.dtl__price b {
  font-family: var(--mono); font-weight: 600; font-size: 1.75rem;
  color: var(--yellow); font-variant-numeric: tabular-nums;
}
.dtl__price span { font-size: var(--fs-sm); color: var(--mut2); }
.dtl__spec { width: 100%; margin-top: var(--sp-5); border-collapse: collapse; border-top: 1px solid var(--line2); }
.dtl__spec th, .dtl__spec td { padding: 10px 4px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); text-align: left; }
.dtl__spec th { width: 34%; color: var(--mut2); font-weight: var(--fw-normal); letter-spacing: .06em; }
.dtl__spec td { color: var(--ink); font-family: var(--mono); }
.dtl__fine { margin-top: var(--sp-3); text-align: center; font-size: var(--fs-xs); color: var(--mut2); }

:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }