/* ⚠️ 이 파일은 www.mk1.co.kr 스타일시트(homepage/site/assets/css/style.css)의 **복사본**이다.
 * /mall/(해외 파트너 매물)을 www.mk1.co.kr/stock 과 같은 디자인으로 내기 위해 그대로 가져왔다(2026-08-17 Kevin).
 * 🔴 원본을 고쳤으면 이 파일도 다시 복사할 것 — 두 사이트의 매물 화면이 갈라지면 안 된다.
 *    복사: homepage/site/assets/css/style.css → members/site/mall/assets/stock.css
 * 로드 순서: stock.css(먼저) → /assets/css/style.css(나중) — 헤더·푸터는 파트너 사이트가 이긴다. */
/* ==========================================================================
   MK1 — www.mk1.co.kr
   Built to homepage/design/스타일가이드.md v1. Token names and values are
   taken verbatim from that document. Do not invent new tokens here.
   ========================================================================== */

/* ---------- 0. Fonts (self-hosted, SIL OFL 1.1) ------------------------- */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var-latin-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
/* Korean face — carries every Hangul run on the site, from the 『역동하는
   K-중고차』 mentions on the English pages to the fully Korean /ai-setup set.
   Variable weight axis is preserved, so 100..900 works here as it does in
   Inter. Regenerate after changing Korean copy:
   `python assets/tools/subset_korean_font.py` (content-driven subset). */
@font-face {
  font-family: "Noto Sans KR";
  src: url("../fonts/noto-sans-kr-subset.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. Tokens --------------------------------------------------- */

:root {
  /* Navy */
  --navy-950: #2F351D;
  --navy-900: #4A532D;
  --navy-700: #65713D;
  --navy-300: #C0C7A8;
  --navy-100: #EEEFEB;

  /* Orange — CTA only */
  --orange-500: #B8863B;
  --orange-600: #96692A;
  /* Tint for icon badges (ai-setup only) — a wash, not a fill, so it stays
     inside the "orange is for CTAs" budget. */
  --orange-050: #F3EADA;

  /* Condition status — stock detail page only (스타일가이드_매물.md D1).
     Do not use these three on any other page. */
  /* Darkened from #B26A00 (3.79:1 on its own background — below AA). This is
     the "needs repair" label: on a site whose whole claim is that it writes
     the faults down, it was the least readable of the three badges. Now 4.85:1. */
  --status-attention:    #9A5B00;
  --status-attention-bg: #FBF1E0;
  --status-fair:         #657043;
  --status-fair-bg:      #EEEFEB;
  --status-good:         #1F7A5C;
  --status-good-bg:      #E7F2ED;
  --lightbox-bg: rgba(47, 53, 29, 0.94);
  --sold-dim: rgba(47, 53, 29, 0.42);

  /* Neutral */
  --white: #FFFFFF;
  --off-white: #F9F9F8;
  --border: #DDDED8;

  /* Text */
  --text-primary: #292D1A;
  --text-secondary: #657043;
  --text-muted: #959D7B;
  --text-on-dark: #FFFFFF;
  --text-on-dark-sub: rgba(255, 255, 255, 0.72);

  /* Semantic */
  --bg-page: var(--white);
  --bg-alt: var(--off-white);
  --bg-dark: var(--navy-900);
  --bg-footer: var(--navy-950);
  --cta-bg: var(--orange-500);
  --cta-bg-hover: var(--orange-600);
  --link: var(--navy-900);
  --link-hover: var(--navy-700);
  --focus-ring: 2px solid var(--orange-500);
  --error: #C24028;

  /* Type */
  /* Inter first for Latin; Hangul falls through to Noto Sans KR. Apple SD
     Gothic Neo / Malgun Gothic remain as OS fallbacks if the webfont fails. */
  --font-sans: "Inter", "Noto Sans KR", -apple-system, "Apple SD Gothic Neo",
               "Segoe UI", "Malgun Gothic", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo,
               Consolas, "Liberation Mono", monospace;
  --fs-display: clamp(2.5rem, 1.5rem + 4.5vw, 4.5rem);
  --fs-h1:      clamp(2.125rem, 1.4rem + 3vw, 3.5rem);
  --fs-h2:      clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
  --fs-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-overline: 0.8125rem;

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px;  --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;
  --section-y: clamp(64px, 5vw + 40px, 120px);

  /* Layout */
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 32px);
  /* 68, not 60: the brand guide sets a 96px minimum width for the horizontal
     lockup AND a clear space of 22% of its height on every side. At the 2.12:1
     lockup ratio those two rules together need a 46px logo inside a header of
     at least 66px — the old 60px header could satisfy one rule or the other,
     never both. */
  --header-h: 68px;

  color-scheme: light;
}

@media (min-width: 1024px) {
  :root { --header-h: 72px; }
}

/* ---------- 2. Reset / base -------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font-sans);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }

:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: 2px; }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 100;
  background: var(--navy-900); color: #fff; padding: var(--sp-3) var(--sp-5);
  border-radius: 8px; font-size: var(--fs-small); font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: var(--sp-3); color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Typography helpers -------------------------------------- */

.display {
  font-size: var(--fs-display); font-weight: 700; line-height: 1.05;
  letter-spacing: -0.02em; text-wrap: balance; color: var(--text-primary);
}
.h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
.h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }

.body-lg { font-size: var(--fs-body-lg); font-weight: 400; line-height: 1.55; color: var(--text-secondary); }
.body    { font-size: var(--fs-body); line-height: 1.65; color: var(--text-secondary); max-width: 65ch; }
.small   { font-size: var(--fs-small); line-height: 1.5; color: var(--text-muted); }

.overline {
  display: block;
  font-size: var(--fs-overline); font-weight: 600; line-height: 1.2;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}
.overline--accent { color: var(--orange-500); }

.book-kr { color: var(--text-muted); }
.strong  { font-weight: 600; color: var(--text-primary); }
em { font-style: italic; }

/* ---------- 4. Buttons -------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 28px; border-radius: 8px;
  font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1;
  text-decoration: none; border: 0; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
@media (max-width: 767px) { .btn { height: 48px; padding: 0 24px; } }

.btn-primary { background: var(--cta-bg); color: #fff; }
.btn-primary:hover { background: var(--cta-bg-hover); color: #fff; }

.btn-ghost {
  background: transparent; color: var(--navy-900);
  border: 1.5px solid currentColor;
}
.btn-ghost:hover { color: var(--navy-700); }
.bg-dark .btn-ghost { color: #fff; }
.bg-dark .btn-ghost:hover { color: var(--navy-300); }

.btn-dark { background: var(--navy-900); color: #fff; }
.btn-dark:hover { background: var(--navy-700); color: #fff; }

.link-arrow {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-weight: 600; color: var(--link); text-decoration: none;
}
.link-arrow:hover { color: var(--link-hover); }
.link-arrow::after { content: "\2192"; color: var(--orange-500); }

.btn-row { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-7); }
.btn-row .btn { width: 100%; }
@media (min-width: 768px) {
  .btn-row { flex-direction: row; gap: var(--sp-4); }
  .btn-row .btn { width: auto; }
}

/* ---------- 5. Header --------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-header .container {
  height: 100%; display: flex; align-items: center; justify-content: space-between;
}
/* The wordmark is the confirmed brand lockup (2026-08-07), not type. The SVG
   carries its own navy/orange, so nothing here may recolour it — the brand
   guide forbids moving or adding the orange (§7). Height only; width follows
   the 2.12:1 lockup. */
.wordmark { display: inline-flex; flex: none; text-decoration: none; line-height: 0; }
/* Width is derived from the lockup's 212×100 viewBox rather than left to
   `auto`: in the header and nav overlay the wordmark is itself a flex item,
   and there an auto-width image sized only by height collapses to 0. */
/* 48px tall = 101.8px wide, clearing the guide's 96px minimum. Below that the
   K spine's ink traps close up and the orange route reads as two stray specks,
   so a smaller "tidier" logo is not a style choice — it stops being the logo. */
.wordmark img { height: 48px; width: calc(48px * 212 / 100); display: block; }
@media (max-width: 1023px) {
  /* 46px = 97.5px wide, still over the minimum, and fits the 68px header with
     the required clear space. */
  .wordmark img { height: 46px; width: calc(46px * 212 / 100); }
}
.nav-desktop { display: none; }
@media (min-width: 1024px) {
  .nav-desktop { display: flex; align-items: center; gap: var(--sp-6); }
  .nav-toggle { display: none !important; }
}
.nav-desktop a {
  font-size: 15px; font-weight: 500; color: var(--text-secondary); text-decoration: none;
  transition: color .15s ease;
}
.nav-desktop a:hover { color: var(--navy-900); }
.nav-desktop a[aria-current="page"] { color: var(--navy-900); font-weight: 600; }
.nav-desktop .btn { height: 44px; padding: 0 20px; }
.nav-desktop .btn:hover { color: #fff; }

/* Partners sits beside the Contact CTA as an icon, not as a menu item:
   members.mk1.co.kr is a separate site with its own login and approval, so
   listing it next to Home/About/Stock — which are sections of this site —
   claimed more than it should. 44px keeps it a real touch target. */
.nav-partner {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 8px;
  color: var(--text-secondary); flex: none;
  transition: color .15s ease, background-color .15s ease;
}
.nav-partner:hover { color: var(--navy-900); background: var(--navy-100); }
.nav-partner:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* Mobile overlay: same pairing at the foot of the menu. */
.nav-overlay__cta { display: flex; align-items: center; gap: var(--sp-3); }
.nav-overlay__cta .btn { flex: 1; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; color: var(--navy-900); cursor: pointer;
}

.nav-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: var(--white);
  padding: var(--gutter);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.nav-overlay[data-open="true"] { opacity: 1; visibility: visible; }
.nav-overlay__top { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.nav-overlay ul {
  display: flex; flex-direction: column; gap: var(--sp-5);
  margin-top: var(--sp-8);
}
.nav-overlay ul a {
  font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.015em;
  color: var(--navy-900); text-decoration: none;
}
.nav-overlay .btn { width: 100%; margin-top: auto; }

/* ---------- 6. Sections ------------------------------------------------- */

.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-alt); }
.bg-dark { background: var(--bg-dark); color: var(--text-on-dark); }
.bg-dark .h2, .bg-dark h2, .bg-dark h3 { color: var(--text-on-dark); }
.bg-dark p { color: var(--text-on-dark-sub); }
.bg-dark p a { color: var(--text-on-dark); }
.bg-dark p a:hover { color: var(--orange-500); }

.section-head { max-width: 56ch; }
.section-head .h2 { margin-top: var(--sp-3); }
.section-head p { margin-top: var(--sp-4); }

.col-8  { max-width: none; }
@media (min-width: 1024px) {
  .col-8 { max-width: calc((100% - 11 * 32px) / 12 * 8 + 7 * 32px); }
  .col-7 { max-width: calc((100% - 11 * 32px) / 12 * 7 + 6 * 32px); }
  .col-6 { max-width: calc((100% - 11 * 32px) / 12 * 6 + 5 * 32px); }
}

.grid-3 { display: grid; gap: var(--sp-5); }
@media (min-width: 768px) { .grid-3 { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } .grid-3 > :last-child:nth-child(3) { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-3 > :last-child:nth-child(3) { grid-column: auto; } }

/* ---------- 7. Hero ----------------------------------------------------- */

.hero {
  padding-top: var(--sp-9);
  padding-bottom: var(--sp-8);
}
@media (min-width: 1024px) {
  .hero { padding-top: clamp(96px, 12vw, 180px); padding-bottom: clamp(72px, 8vw, 120px); }
}
.hero__inner { max-width: none; }
@media (min-width: 1024px) { .hero__inner { max-width: calc((100% - 11 * 32px) / 12 * 8 + 7 * 32px); } }
.hero .display { max-width: 16ch; }
.hero__sub { margin-top: var(--sp-5); max-width: 52ch; }

.hero--sub { padding-top: clamp(80px, 10vw, 140px); padding-bottom: var(--section-y); }
.hero--sub .h1 { margin-top: var(--sp-3); }

/* Hero background motif — dotted globe (스타일가이드 §7, second permitted
   graphic, added 2026-08-15). Home hero only: the sub-page heroes stay bare.
   The SVG carries its own orange; only the layer opacity is set here. */
.hero { position: relative; overflow: hidden; }
.hero > .container { position: relative; z-index: 1; }

.hero__motif {
  position: absolute; top: 50%; transform: translateY(-50%);
  /* Sits against the viewport edge, not the container edge: on wide screens
     the globe bleeds past the 1200px grid, which is what keeps it a field
     behind the page rather than a picture placed next to the headline. */
  right: max(calc((100vw - var(--container)) / 2 - 40px), -40px);
  width: min(42vw, 560px); height: min(42vw, 560px);
  pointer-events: none; z-index: 0;
  background: url("../images/hero/globe-dots.svg") no-repeat center right / contain;
  opacity: .45;
  /* The globe is square, so its left edge reaches into the copy column. At
     .45 the dots read through the headline, so the left side is masked out
     entirely: nothing is visible until 846px, and the copy ends at 811px. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .35) 22%, #000 58%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .35) 22%, #000 58%);
}
@media (max-width: 767px) {
  /* Phone: the copy runs full width, so the globe is behind text no matter
     where it sits — pushed further off-canvas and halved in weight. */
  .hero__motif { right: -18%; width: 78vw; height: 78vw; opacity: .225; }
}

/* root line motif (§7) — one or two per page, nowhere else */
.rootline { margin-top: var(--sp-8); width: 100%; height: 12px; overflow: visible; }
.rootline line { stroke: var(--navy-100); stroke-width: 1.5; }
.rootline circle { fill: var(--orange-500); }

/* ---------- 8. Trust bar ------------------------------------------------ */

.trustbar { background: var(--bg-alt); padding-block: var(--sp-7); }
.trustbar__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.trustbar__icon { display: block; color: var(--orange-500); margin-bottom: var(--sp-3); }
.trustbar dt { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; color: var(--navy-900); }
.trustbar dd { margin-top: var(--sp-2); font-size: var(--fs-small); line-height: 1.5; color: var(--text-secondary); }
@media (min-width: 1024px) {
  .trustbar__grid { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .trustbar__grid > div { padding-inline: var(--sp-6); }
  .trustbar__grid > div:first-child { padding-left: 0; }
  .trustbar__grid > div + div { border-left: 1px solid var(--border); }
}

/* ---------- 9. Cards ---------------------------------------------------- */

.card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 12px; padding: var(--sp-5);
}
@media (min-width: 1024px) { .card { padding: 32px; } }
.card--link:hover { border-color: var(--navy-300); }
.card .h3 { margin-top: var(--sp-4); }
.card p { margin-top: var(--sp-3); }

.card--contact { display: flex; flex-direction: column; }
.card--contact .btn { margin-top: auto; width: 100%; }
.card--contact p { margin-bottom: var(--sp-5); }

.focus-strip {
  margin-top: var(--sp-6); background: var(--navy-100); border-radius: 12px;
  padding: var(--sp-5) var(--sp-6);
  font-size: var(--fs-small); font-weight: 500; color: var(--navy-700);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
@media (min-width: 1024px) {
  .focus-strip { flex-direction: row; justify-content: space-between; gap: var(--sp-6); }
  .focus-strip > span + span { border-left: 1px solid rgba(39, 70, 111, 0.2); padding-left: var(--sp-6); }
}

/* ---------- 9b. Locations (contact) ------------------------------------- */

.loc-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 1024px) { .loc-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }

.loc-card { display: flex; flex-direction: column; }
.loc-card .h3 { margin-top: var(--sp-3); }
.loc-card__addr { margin-top: var(--sp-4); font-size: var(--fs-body); line-height: 1.6; }
.loc-card__addr-kr {
  margin-top: var(--sp-2); font-size: var(--fs-small);
  line-height: 1.6; color: var(--text-muted);
}
.loc-card__note { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--text-secondary); }

.loc-map {
  margin-top: var(--sp-5);
  width: 100%; aspect-ratio: 4 / 3;
  border: 0; border-radius: 12px; display: block;
  background: var(--bg-alt);
}
@media (min-width: 768px) { .loc-map { aspect-ratio: 16 / 9; } }

.loc-links {
  margin-top: var(--sp-4); display: flex; flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5); font-size: var(--fs-small);
}

/* ---------- 10. Placeholder (§4.6) -------------------------------------- */

.ph {
  background: var(--navy-100); border-radius: 12px;
  display: grid; place-content: center; gap: var(--sp-3);
  color: var(--navy-700); text-align: center; padding: var(--sp-5);
}
.ph svg { margin-inline: auto; }
.ph span { font-size: var(--fs-small); font-weight: 500; }
.ph--book { aspect-ratio: 1 / 1.45; max-width: 200px; }

/* Real book cover (reference/book/book_front_cover.jpg, 508x709 = 1 : 1.396).
   Sits in the same slot the .ph--book placeholder used to occupy. */
.book-cover {
  width: 100%; max-width: 200px; height: auto;
  border-radius: 12px; border: 1px solid var(--border);
}
@media (min-width: 1024px) { .book-cover { max-width: 280px; } }
.ph--3x2 { aspect-ratio: 3 / 2; }
.ph--9x16 { aspect-ratio: 9 / 16; max-width: 240px; }
.bg-dark .ph {
  background: rgba(255, 255, 255, 0.06); color: var(--navy-300);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ---------- 11. Two-column split patterns ------------------------------- */

.split { display: grid; gap: var(--sp-6); }
@media (min-width: 1024px) {
  .split { grid-template-columns: repeat(12, 1fr); gap: 32px; align-items: center; }
  .split--start { align-items: start; }
  .split__narrow { grid-column: 1 / span 4; }
  .split__wide   { grid-column: 6 / span 7; }
  .split__five   { grid-column: 1 / span 5; }
  .split__six    { grid-column: 7 / span 6; }
  .split__seven  { grid-column: 1 / span 7; }
  .split__four   { grid-column: 9 / span 4; }
}

/* ---------- 12. Footer -------------------------------------------------- */

.site-footer {
  background: var(--bg-footer); color: var(--text-on-dark-sub);
  padding-block: var(--sp-8); font-size: var(--fs-body);
}
@media (min-width: 1024px) { .site-footer { padding-block: var(--sp-9); } }
.site-footer a { color: var(--text-on-dark-sub); text-decoration: none; }
.site-footer a:hover { color: #fff; }
/* Footer sits on deep navy, so it takes the reversed lockup (white + orange),
   set per-element in the markup — no colour override belongs here. */
.site-footer .wordmark { margin-bottom: var(--sp-4); }
.footer-grid { display: grid; gap: var(--sp-7); }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.footer-grid h2 {
  font-size: var(--fs-overline); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--navy-300); margin-bottom: var(--sp-4);
}
.footer-grid ul { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-grid li { font-size: var(--fs-small); }
.footer-contact li { display: flex; align-items: center; gap: var(--sp-2); }
.footer-contact svg { flex: 0 0 auto; color: var(--navy-300); }
.footer-legal {
  margin-top: var(--sp-8); padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-small); line-height: 1.6; color: rgba(255, 255, 255, 0.5);
}
.footer-legal p + p { margin-top: var(--sp-2); }

/* ---------- 13. CTA band ------------------------------------------------ */

.cta-band { background: var(--bg-dark); padding-block: clamp(72px, 7vw, 112px); }
.cta-band__inner { display: grid; gap: var(--sp-6); }
.cta-band p { margin-top: var(--sp-3); font-size: var(--fs-body-lg); color: var(--text-on-dark-sub); }
.cta-band .btn { width: 100%; }
@media (min-width: 1024px) {
  .cta-band__inner { grid-template-columns: repeat(12, 1fr); gap: 32px; align-items: center; }
  .cta-band__text { grid-column: 1 / span 7; }
  .cta-band__action { grid-column: 9 / span 4; justify-self: end; }
  .cta-band .btn { width: auto; }
}

/* ---------- 14. Timeline (about) ---------------------------------------- */

.timeline { margin-top: var(--sp-8); display: grid; gap: var(--sp-6); }
.timeline__item { position: relative; padding-left: var(--sp-6); }
.timeline__item::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--navy-300);
}
.timeline__item::after {
  content: ""; position: absolute; left: 3.25px; top: 16px; bottom: calc(var(--sp-6) * -1);
  border-left: 1.5px solid var(--navy-100);
}
.timeline__item:last-child::after { display: none; }
.timeline__item:last-child::before { background: var(--orange-500); }
.timeline dt { font-size: var(--fs-h3); font-weight: 700; color: var(--navy-900); line-height: 1.3; }
.timeline dd { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--text-secondary); }

@media (min-width: 1024px) {
  .timeline { grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .timeline__item { padding-left: 0; padding-top: var(--sp-6); }
  .timeline__item::before { top: 0; }
  .timeline__item::after {
    left: 8px; top: 3.25px; right: -32px; bottom: auto;
    border-left: 0; border-top: 1.5px solid var(--navy-100);
  }
  .timeline dt { margin-top: var(--sp-4); }
}

.ceo-photo {
  width: 100%; max-width: 320px; aspect-ratio: 4 / 5;
  object-fit: cover; border-radius: 12px;
}
@media (min-width: 1024px) { .ceo-photo { max-width: 100%; } }

.archive-grid { margin-top: var(--sp-8); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (min-width: 1024px) {
  .archive-grid { grid-template-columns: 400px 400px; gap: 32px; }
}
.archive-grid img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px;
  filter: grayscale(1) sepia(.12) hue-rotate(180deg) saturate(1.4) brightness(.95);
}
.archive-caption { margin-top: var(--sp-3); }

/* ---------- 14b. Partner / sourcing logos (about) ----------------------- */
/* Heights, not widths, are the shared axis — the five source marks have
   wildly different aspect ratios (Encar ~2.4:1, Glovis ~5:1, Bakcha ~3:1).
   Forcing a common width would distort them; a common height keeps every
   mark legible and lets object-fit: contain do the rest. */

.partner-logos {
  margin-top: var(--sp-8); display: flex; flex-wrap: wrap;
  align-items: center; gap: var(--sp-7) var(--sp-8);
}
.partner-logos li { display: flex; align-items: center; }
.partner-logos img { height: 32px; width: auto; object-fit: contain; }
@media (min-width: 768px) { .partner-logos img { height: 40px; } }

/* ---------- 15. Value blocks (about §5) --------------------------------- */

.value-grid { margin-top: var(--sp-8); display: grid; gap: var(--sp-7); }
@media (min-width: 768px) { .value-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-7) 32px; } .value-grid > :last-child:nth-child(3) { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .value-grid { grid-template-columns: repeat(3, 1fr); } .value-grid > :last-child:nth-child(3) { grid-column: auto; } }
.value-block::before {
  content: ""; display: block; width: 40px; border-top: 2px solid var(--navy-900);
  margin-bottom: var(--sp-4);
}
.value-block p { margin-top: var(--sp-3); }

/* ---------- 16. Definition list (about §6 profile) ---------------------- */

.profile { margin-top: var(--sp-6); border-top: 1px solid var(--border); }
.profile > div {
  padding-block: var(--sp-4); border-bottom: 1px solid var(--border);
}
.profile dt { font-size: var(--fs-small); font-weight: 600; color: var(--text-muted); }
.profile dd { margin-top: var(--sp-1); font-size: var(--fs-body); color: var(--text-primary); }
@media (min-width: 1024px) {
  .profile > div { display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-4); align-items: baseline; }
  .profile dd { margin-top: 0; }
}

/* ---------- 17. Process steps (business §3) ----------------------------- */

.steps { margin-top: var(--sp-8); }
.step { position: relative; padding-left: 32px; padding-bottom: var(--sp-7); }
.step:last-child { padding-bottom: 0; }
.step::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--navy-300);
}
.step::after {
  content: ""; position: absolute; left: 3.25px; top: 14px; bottom: 0;
  border-left: 1.5px solid var(--navy-100);
}
.step:last-child::after { display: none; }
.step:last-child::before { background: var(--orange-500); }
.step .h3 { margin-top: var(--sp-1); }
.step p { margin-top: var(--sp-3); }
@media (min-width: 1024px) {
  .step { padding-left: 80px; padding-bottom: var(--sp-8); }
  .step::before { width: 10px; height: 10px; top: 6px; }
  .step::after { left: 4.25px; top: 16px; }
  .step p, .step .qa-block { max-width: 60ch; }
}

.qa-block {
  margin-top: var(--sp-4);
  background: var(--bg-alt); border-left: 3px solid var(--navy-300);
  border-radius: 0 8px 8px 0; padding: var(--sp-3) var(--sp-4);
}

@media (min-width: 1024px) { .qa-block { padding: var(--sp-4) var(--sp-5); } }
.qa-block .worry { font-size: var(--fs-small); font-style: italic; color: var(--text-muted); margin: 0; }
.qa-block .answer { margin-top: var(--sp-2); font-size: var(--fs-body); font-weight: 600; color: var(--text-primary); }

/* ---------- 17b. Track divider (business — auction proxy vs. direct export)
   Marks the auction-proxy section as a distinct service track from the
   6-step direct-export process above it. Reuses the rootline motif (§7,
   one extra use on this page — direct export hero has none, so still
   within the "1-2 per page" budget) instead of inventing new graphics. */

.track-divider { margin-bottom: var(--sp-7); }
.track-divider .rootline { margin-top: 0; max-width: 240px; }
.track-divider__label { margin-top: var(--sp-3); }

/* ---------- 18. Stat block (business §4) -------------------------------- */

.stat-block {
  margin-top: var(--sp-6);
  background: var(--white); border: 1px solid var(--border);
  border-radius: 12px; padding: var(--sp-5);
}
.stat-block__group + .stat-block__group {
  margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border);
}
.stat-block li, .stat-block p {
  font-size: var(--fs-h3); font-weight: 700; color: var(--navy-900); line-height: 1.3;
}
.stat-block ul { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.stat-block .overline + p { margin-top: var(--sp-3); }
@media (min-width: 1024px) { .stat-block { margin-top: 0; } }

.infra-grid { margin-top: var(--sp-8); display: grid; gap: var(--sp-6); }
@media (min-width: 1024px) { .infra-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.infra-grid .h3 { margin-top: var(--sp-4); }
.infra-grid p { margin-top: var(--sp-2); }

.evidence-strip {
  margin-top: var(--sp-6); background: var(--navy-100); border-radius: 12px;
  padding: var(--sp-5); font-size: var(--fs-body); color: var(--navy-700);
}
.evidence-strip .link-arrow { color: var(--navy-900); }

/* ---------- 19. Media page ---------------------------------------------- */

.head-row { display: flex; flex-direction: column; gap: var(--sp-5); }
@media (min-width: 1024px) {
  .head-row { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 32px; }
}
.head-row .btn { width: 100%; }
@media (min-width: 768px) { .head-row .btn { width: auto; align-self: flex-start; } }

.ig-grid { margin-top: var(--sp-8); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (min-width: 768px) { .ig-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } }
.ig-grid a { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.ig-grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; display: block; }

/* 19b. Channel cards (media #channels) — Instagram official + Instagram book
   + Facebook (AL). Three cards, identical spec: label / heading / body /
   handle / CTA pinned to the card foot so CTAs align regardless of body
   length. Added 2026-07-20 (Facebook); extended 2026-07-24 to three cards
   (@kcar_pro book channel); extended 2026-07-25 to four cards (YouTube) —
   kept at 2 columns from tablet up (2x2) instead of 3-across so a 4th card
   doesn't leave an orphan in its own row — tokens only, no new values. */

.channel-grid { margin-top: var(--sp-8); display: grid; gap: var(--sp-5); }
@media (min-width: 768px) { .channel-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }

.channel-card { display: flex; flex-direction: column; }
.channel-card__label {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--navy-700);
}
.channel-card__label svg { flex: none; }
.channel-card p.channel-card__handle { color: var(--text-primary); margin-top: auto; padding-top: var(--sp-4); }
.channel-card__cta { margin-top: var(--sp-5); width: 100%; }
@media (min-width: 768px) { .channel-card__cta { width: auto; align-self: flex-start; } }

/* Some channels need more than one destination (the YouTube card sends people
   to shorts or to long-form). Stacked on phones so the labels never squeeze. */
.channel-card__ctas { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-5); }
.channel-card__ctas .btn { width: 100%; }
@media (min-width: 768px) {
  .channel-card__ctas { flex-direction: row; flex-wrap: wrap; }
  .channel-card__ctas .btn { width: auto; }
}

.pipeline { margin-top: var(--sp-7); max-width: 480px; }
.pipeline__line { position: relative; height: 8px; }
.pipeline__line::before {
  content: ""; position: absolute; left: 4px; right: 4px; top: 3.25px;
  border-top: 1.5px solid var(--navy-100);
}
.pipeline__nodes { position: relative; display: flex; justify-content: space-between; }
.pipeline__nodes span { width: 8px; height: 8px; border-radius: 50%; background: var(--navy-300); }
.pipeline__nodes span:last-child { background: var(--orange-500); }
.pipeline__labels { display: flex; justify-content: space-between; margin-top: var(--sp-3); }
.pipeline__labels span { font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
@media (min-width: 1024px) { .pipeline__labels span { font-size: var(--fs-overline); } }

/* ---------- 20. Forms (§4.5) -------------------------------------------- */

.form { margin-top: var(--sp-7); }
.field + .field, .field-row + .field, .field + .field-row { margin-top: var(--sp-5); }
.field label { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-2); }
.field label .req { color: var(--orange-500); }
.field input, .field select, .field textarea {
  height: 52px; padding: 0 16px; border: 1px solid var(--border); border-radius: 8px;
  font: inherit; color: var(--text-primary); background: var(--white); width: 100%;
}
.field textarea { height: auto; min-height: 160px; padding: 14px 16px; line-height: 1.6; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); }
.field:focus-within input, .field:focus-within select, .field:focus-within textarea { border-color: var(--navy-900); }
.field [aria-invalid="true"] { border-color: var(--error); }
.field .error-msg { display: none; margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--error); }
.field .error-msg[data-show="true"] { display: block; }
.field-consent { margin-top: var(--sp-2); }
.field .checkbox-label {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  font-size: var(--fs-small); font-weight: 400; color: var(--text-primary);
  cursor: pointer; margin-bottom: 0;
}
.checkbox-label input[type="checkbox"] {
  height: 20px; width: 20px; padding: 0; margin-top: 2px; flex: 0 0 auto;
  border: 1px solid var(--border); border-radius: 4px; accent-color: var(--navy-900);
  cursor: pointer;
}
.checkbox-label a { color: var(--navy-900); text-decoration: underline; }
.field-row { display: grid; gap: var(--sp-5); }
@media (min-width: 1024px) { .field-row { grid-template-columns: 1fr 1fr; gap: var(--sp-4); } .field-row .field + .field { margin-top: 0; } }
.form__submit { margin-top: var(--sp-6); }
.form__submit .btn { width: 100%; }
@media (min-width: 1024px) { .form__submit .btn { width: auto; } }
.form__privacy { margin-top: var(--sp-4); }

.form-success {
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  padding: var(--sp-6); margin-top: var(--sp-7);
  display: grid; gap: var(--sp-4); justify-items: start;
}
/* display:grid would otherwise beat the UA [hidden] rule */
.form-success[hidden] { display: none; }
.form-success svg { color: var(--navy-900); }

/* ---------- 21. Motion (§8) --------------------------------------------- */

/* Only hide content when JS is running (the .js class is set by an inline
   script in <head>). Without JS every section stays visible. */
.js .reveal { opacity: 0; transform: translateY(12px); }
.js .reveal.is-visible { opacity: 1; transform: none; transition: opacity .4s ease-out, transform .4s ease-out; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .js .reveal, .js .reveal.is-visible { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* anchors under the sticky header */
[id] { scroll-margin-top: 96px; }

/* ==========================================================================
   STOCK (매물) — built to homepage/design/스타일가이드_매물.md (delta v1).
   Everything below is additive: new components only, no page above this
   line was restyled. Section numbers continue from style guide §22.
   ========================================================================== */

/* ---------- 22. VIN / mono identifiers (D2) ----------------------------- */

.vin { font-family: var(--font-mono); letter-spacing: 0.04em; font-variant-ligatures: none; }
.vin-copy {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-left: var(--sp-2);
  background: none; border: 0; border-radius: 6px; color: var(--text-muted); cursor: pointer;
}
.vin-copy:hover { color: var(--navy-900); background: var(--bg-alt); }
.vin-copy[data-copied="true"]::after {
  content: "Copied"; position: absolute; margin-left: var(--sp-2);
  font-size: var(--fs-small); color: var(--status-good);
}
.vin-row { display: flex; align-items: center; position: relative; }

/* ---------- 23. Stock hero / honesty bar (stock.html) -------------------- */

.stock-hero { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(20px, 3vw, 40px); }
.stock-list { padding-top: var(--sp-6); }
.stock-list .stock-grid { margin-top: var(--sp-6); }
.stock-hero .h1 { margin-top: var(--sp-3); max-width: 16ch; }
.stock-hero .body-lg { margin-top: var(--sp-5); max-width: 52ch; }

.honesty-bar {
  background: var(--bg-alt); padding-block: var(--sp-7);
}
.honesty-bar__inner {
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.honesty-bar p { font-size: var(--fs-body-lg); font-weight: 500; color: var(--text-primary); max-width: 46ch; margin: 0; }
@media (min-width: 1024px) {
  .honesty-bar__inner { flex-direction: row; justify-content: space-between; align-items: center; gap: var(--sp-6); }
}

/* ---------- 24. Stock card (D7) — shared by stock.html + home + detail -- */

.stock-grid { margin-top: var(--sp-8); display: grid; gap: var(--sp-6); align-items: stretch; }
@media (min-width: 768px)  { .stock-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .stock-grid { grid-template-columns: repeat(3, 1fr); } }

.stock-card {
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit;
}
.stock-card:hover { border-color: var(--navy-300); color: inherit; }
.stock-card__media { position: relative; aspect-ratio: 3 / 2; background: var(--navy-100); overflow: hidden; }
.stock-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stock-card--sold .stock-card__media::after {
  content: ""; position: absolute; inset: 0; background: var(--sold-dim);
}
.stock-card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.stock-card__title { font-size: var(--fs-h3); font-weight: 600; color: var(--navy-900); line-height: 1.3; }
.stock-card__trim { font-size: var(--fs-small); color: var(--text-muted); }
.stock-card__sold-note { font-size: var(--fs-small); font-weight: 600; color: var(--navy-900); margin: 0; }
.stock-card__specs {
  margin-top: var(--sp-2); font-size: var(--fs-small); font-weight: 500; color: var(--text-secondary);
  padding-top: var(--sp-3); border-top: 1px solid var(--border);
}
.stock-card__issues {
  font-size: var(--fs-small); color: var(--text-secondary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.stock-card__issues strong { font-weight: 600; color: var(--status-attention); }
.stock-card__issues.is-good strong { color: var(--status-good); }
.stock-card__cta {
  margin-top: auto; padding-top: var(--sp-3);
  display: inline-flex; align-items: baseline; gap: 8px;
  font-weight: 600; color: var(--navy-900);
}
.stock-card__cta::after { content: "\2192"; color: var(--orange-500); }

.badge-status {
  position: absolute; top: 12px; left: 12px; height: 28px; padding: 0 12px; border-radius: 6px;
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  display: inline-flex; align-items: center;
}
.badge-status--reserved { background: var(--status-attention-bg); color: var(--status-attention); }

/* Sold ribbon — diagonal corner banner across the card thumbnail, replacing
   the small pill badge used for "Reserved" above. CSS only, no image asset.
   Overrides the .badge-status pill positioning/shape for this one state;
   the dim overlay on the photo (.stock-card--sold .stock-card__media::after,
   var(--sold-dim)) stays as-is and layers underneath. */
.badge-status--sold {
  top: 20px; left: -58px; right: auto; bottom: auto;
  width: 200px; height: auto; padding: 7px 0; border-radius: 0;
  background: var(--error); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  justify-content: center; text-align: center;
  transform: rotate(-40deg); transform-origin: center;
  box-shadow: 0 2px 10px rgba(47, 53, 29, .3);
  z-index: 2;
}

/* Sourcing / "looking for something else" filler card — same grid cell */
.sourcing-card {
  background: var(--bg-alt); border: 1px dashed var(--border); border-radius: 12px;
  padding: var(--sp-6); display: flex; flex-direction: column; justify-content: flex-start; gap: var(--sp-3);
}
.sourcing-card .h3 { color: var(--navy-900); }
.sourcing-card p { font-size: var(--fs-body); color: var(--text-secondary); margin: 0; }

/* Featured-stock text block (home §3.5, 1-car state only) */
.featured-note { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-4); padding-block: var(--sp-5); }
.featured-note p { font-size: var(--fs-body-lg); color: var(--text-secondary); max-width: 34ch; margin: 0; }
.featured-note p.strong { font-weight: 500; color: var(--text-primary); }

/* ---------- 25. Gallery (D3) ---------------------------------------------- */

.gallery-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); }
@media (max-width: 767px) { .gallery-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } }
.chip {
  height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--white); font-size: var(--fs-small); font-weight: 500; color: var(--text-secondary);
  cursor: pointer; white-space: nowrap; flex: none;
}
.chip:hover { border-color: var(--navy-300); }
.chip[aria-pressed="true"] { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }

.gallery { margin-top: var(--sp-6); display: grid; gap: var(--sp-4); }
@media (min-width: 1024px) { .gallery { grid-template-columns: 8fr 4fr; gap: 32px; align-items: start; } }

.gallery-main {
  position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden;
  background: var(--navy-100); border: 0; padding: 0; width: 100%; cursor: zoom-in; display: block;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-main__tag, .gallery-main__count {
  position: absolute; bottom: 12px; background: rgba(47, 53, 29, 0.72); color: #fff;
  font-size: var(--fs-overline); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 6px; padding: 6px 10px; line-height: 1;
}
.gallery-main__tag { left: 12px; }
.gallery-main__count { right: 12px; text-transform: none; letter-spacing: 0; color: var(--text-on-dark-sub); }

.gallery-thumbs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2);
}
@media (min-width: 1024px) {
  .gallery-thumbs { max-height: 600px; overflow-y: auto; scrollbar-width: thin; align-content: start; }
}
@media (max-width: 1023px) {
  .gallery-thumbs {
    grid-auto-flow: column; grid-auto-columns: 88px; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-2);
  }
}
.gallery-thumb {
  aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; border: 2px solid transparent;
  padding: 0; background: var(--navy-100); cursor: pointer; scroll-snap-align: start;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb[aria-current="true"] { border-color: var(--navy-900); }
.gallery-thumb:hover { border-color: var(--navy-300); }
.gallery-thumb[hidden] { display: none; }

.gallery-caption { margin-top: var(--sp-5); }

/* ---------- 26. Lightbox (D3.5 / D3.6) ------------------------------------ */

.lightbox {
  position: fixed; inset: 0; z-index: 100; background: var(--lightbox-bg);
  display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox__inner { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.lightbox img {
  max-width: min(1920px, 94vw); max-height: 76vh; width: auto; height: auto;
  object-fit: contain; border-radius: 4px; display: block;
}
.lightbox__btn {
  position: absolute; width: 44px; height: 44px; border-radius: 8px; border: 0;
  background: rgba(255, 255, 255, 0.10); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.18); }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }
@media (min-width: 768px) {
  .lightbox__close { top: 24px; right: 24px; }
  .lightbox__prev { left: 24px; }
  .lightbox__next { right: 24px; }
}
.lightbox__caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-4) var(--gutter);
  font-size: var(--fs-small); color: var(--text-on-dark-sub); text-align: center;
}
.lightbox__caption strong { color: #fff; font-weight: 600; margin-right: var(--sp-3); }

@media (prefers-reduced-motion: no-preference) {
  .lightbox { transition: opacity .15s ease; }
}

/* ---------- 27. Specifications table (D4) --------------------------------- */

.spec-table { display: grid; gap: 0; margin-top: var(--sp-6); }
.spec-row {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-1);
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--border);
}
.spec-row:last-child { border-bottom: 0; }
.spec-row dt { font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); }
.spec-row dd { font-size: var(--fs-body); font-weight: 500; color: var(--text-primary); }
@media (min-width: 768px) {
  .spec-table--cols2 { grid-template-columns: 1fr 1fr; column-gap: var(--sp-8); }
  .spec-row { grid-template-columns: 140px 1fr; gap: var(--sp-4); align-items: baseline; }
}
.spec-options { margin-top: var(--sp-6); }
.spec-options .h3 { margin-bottom: var(--sp-3); }
.spec-options p { font-size: var(--fs-body); color: var(--text-secondary); margin: 0; }

/* ---------- 28. Condition Report (D5) — the heart of the page ------------ */

.cond-grade {
  margin-top: var(--sp-6); background: var(--bg-alt); border-radius: 12px;
  padding: var(--sp-5) var(--sp-6);
}
.cond-grade__value { margin-top: var(--sp-2); font-size: var(--fs-h2); font-weight: 700; color: var(--navy-900); }
.cond-grade__note { margin-top: var(--sp-3); font-size: var(--fs-body); color: var(--text-secondary); max-width: 60ch; }

.cond-table { margin-top: var(--sp-7); border-top: 1px solid var(--border); }
.cond-head {
  display: none;
}
@media (min-width: 1024px) {
  .cond-head {
    display: grid; grid-template-columns: 220px 148px 1fr; gap: var(--sp-5);
    padding-top: var(--sp-4); font-size: var(--fs-overline); font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
  }
}
.cond-row {
  display: grid; gap: var(--sp-2); grid-template-columns: 1fr;
  padding: var(--sp-5) 0; border-top: 1px solid var(--border);
}
.cond-row:last-child { border-bottom: 1px solid var(--border); }
@media (min-width: 1024px) {
  .cond-row { grid-template-columns: 220px 148px 1fr; gap: var(--sp-5); align-items: start; padding: var(--sp-5) 0; }
}
.cond-row__system { font-size: var(--fs-body); font-weight: 600; color: var(--text-primary); }
.cond-row__mobile-head { display: flex; justify-content: space-between; align-items: center; }
@media (min-width: 1024px) { .cond-row__mobile-head { display: contents; } }
.cond-row__findings { font-size: var(--fs-body); color: var(--text-secondary); }

.cond-badge {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px;
  border-radius: 999px; font-size: .8125rem; font-weight: 600; white-space: nowrap;
}
.cond-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.is-attention { color: var(--status-attention); background: var(--status-attention-bg); }
.is-fair      { color: var(--status-fair);      background: var(--status-fair-bg); }
.is-good      { color: var(--status-good);      background: var(--status-good-bg); }

.cond-mods {
  margin-top: var(--sp-7); background: var(--bg-alt); border-radius: 12px; padding: var(--sp-6);
}
.cond-mods .h3 { margin-bottom: var(--sp-4); }
.cond-mods .spec-table { margin-top: 0; }
.cond-mods .spec-row { border-bottom-color: rgba(74, 83, 45, 0.1); }

.cond-source {
  margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border);
}
.cond-source p { font-size: var(--fs-small); color: var(--text-muted); margin: 0; }
.cond-source p + p { margin-top: var(--sp-2); }

/* ---------- 29. Video slot placeholder (D6b) ------------------------------ */

.video-slot {
  position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  background: var(--navy-100); margin-top: var(--sp-6);
}
.video-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-slot__veil { position: absolute; inset: 0; background: rgba(47, 53, 29, 0.46); }
.video-slot__msg {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: var(--sp-5);
}
.video-slot__msg strong { font-size: var(--fs-h3); font-weight: 600; color: var(--text-on-dark); }
.video-slot__msg span { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--text-on-dark-sub); max-width: 34ch; }
.video-slot iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Vertical (9:16) modifier — YouTube Shorts walkarounds. Kevin confirmed
   2026-07-20: stock videos are produced as vertical Shorts, not 16:9. Capped
   max-width so a tall video doesn't tower over the Specifications column
   next to it; centred on mobile, left-aligned once it sits in its own
   grid column (see .media-specs-row below). */
.video-slot--vertical {
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .video-slot--vertical { max-width: 320px; margin-inline: 0; }
}

/* ---------- 29b. Media + Specifications row (reusable pattern) -----------
   Conditional layout, decided by whether this stock item has a video:
   - Video present  → `.media-specs-row` (this component): vertical video
     left, Specifications right, side by side at lg+; stacked (video first)
     below 1024px.
   - No video       → do NOT use this component. Render Specifications as
     its own full-width `.section` exactly like before (single column,
     no video block at all). See stock_detail_wire.md §3-4 for both
     markups side by side. */
.media-specs-row { display: grid; gap: var(--sp-7); }
.media-specs-row__video .h3 { margin-bottom: var(--sp-4); }
.media-specs-row__specs .spec-table { margin-top: var(--sp-6); }
@media (min-width: 1024px) {
  .media-specs-row {
    grid-template-columns: 320px 1fr; column-gap: 48px; align-items: start;
  }
  /* min-width:0 lets the 1fr specs column shrink below its content's
     max-content size instead of overflowing the fixed 320px video track. */
  .media-specs-row__video, .media-specs-row__specs { min-width: 0; }
}

/* ---------- 30. Identity & documents (§7) --------------------------------- */

.identity-grid { margin-top: var(--sp-7); display: grid; gap: var(--sp-6); }
@media (min-width: 1024px) { .identity-grid { grid-template-columns: 5fr 7fr; gap: 32px; align-items: start; } }
.identity-photo { border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--navy-100);
  border: 0; padding: 0; width: 100%; cursor: zoom-in; display: block; }
.identity-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.identity-photo__caption { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--text-muted); }
.identity-info dt { font-size: var(--fs-overline); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.identity-info dd { margin-top: var(--sp-2); }
.identity-info > div + div { margin-top: var(--sp-6); }
.doc-list { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.doc-list li { font-size: var(--fs-body); color: var(--text-secondary); padding-left: var(--sp-4); position: relative; }
.doc-list li::before { content: "\00b7"; position: absolute; left: 0; color: var(--text-muted); }

/* ---------- 31. How buying works strip (§8) ------------------------------- */

.buy-steps { margin-top: var(--sp-8); }
.buy-steps__line { position: relative; height: 8px; }
.buy-steps__line::before { content: ""; position: absolute; left: 4px; right: 4px; top: 3.25px; border-top: 1.5px solid var(--navy-100); }
.buy-steps__nodes { position: relative; display: flex; justify-content: space-between; }
.buy-steps__nodes span { width: 8px; height: 8px; border-radius: 50%; background: var(--navy-300); }
.buy-steps__nodes span:last-child { background: var(--orange-500); }
.buy-steps__labels { display: flex; justify-content: space-between; margin-top: var(--sp-3); gap: var(--sp-2); }
.buy-steps__labels span { flex: 1; text-align: center; font-size: var(--fs-small); font-weight: 600; color: var(--text-primary); }
.buy-steps__labels span:first-child { text-align: left; }
.buy-steps__labels span:last-child { text-align: right; }

@media (max-width: 767px) {
  .buy-steps { display: grid; gap: var(--sp-5); }
  .buy-steps__line, .buy-steps__nodes, .buy-steps__labels { display: none; }
  .buy-steps__list { display: grid; gap: var(--sp-5); }
}
.buy-steps__list { display: none; }
@media (max-width: 767px) {
  .buy-steps__list { display: grid; }
  .buy-steps__list li { position: relative; padding-left: 32px; }
  .buy-steps__list li::before {
    content: attr(data-step); position: absolute; left: 0; top: 0; width: 24px; height: 24px;
    border-radius: 50%; background: var(--navy-100); color: var(--navy-700);
    font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  }
  .buy-steps__list li:last-child::before { background: var(--orange-500); color: #fff; }
  .buy-steps__list li span { display: block; font-size: var(--fs-body); font-weight: 600; color: var(--text-primary); }
}

/* ---------- 32. Price & inquiry CTA (§9) ---------------------------------- */

.price-cta { padding-block: clamp(72px, 7vw, 112px); }
.price-cta__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 1024px) { .price-cta__grid { grid-template-columns: 7fr 4fr; gap: 32px; align-items: start; } }
.price-cta__buttons { display: grid; gap: var(--sp-3); }
.price-cta__buttons .btn { width: 100%; }
.price-cta__note { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--text-on-dark-sub); }
.price-cta__sold-note { margin-top: var(--sp-3); font-size: var(--fs-body); font-weight: 600; color: var(--text-on-dark); }

/* ---------- 33. Title block + sticky price card (§1) ---------------------- */

.stock-title { padding-top: var(--sp-8); padding-bottom: var(--sp-7); }
.stock-title__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 1024px) { .stock-title__grid { grid-template-columns: 8fr 4fr; gap: 32px; align-items: start; } }
.stock-title__specs {
  margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-body); font-weight: 500; color: var(--text-primary);
}
.stock-title__specs span + span { padding-left: var(--sp-4); border-left: 1px solid var(--border); }
@media (max-width: 767px) { .stock-title__specs span + span { border-left: 0; padding-left: 0; } }

.price-card { display: none; }
@media (min-width: 1024px) {
  .price-card { display: block; position: sticky; top: 96px; }
  .price-card .h3 { margin-top: var(--sp-2); }
  .price-card__buttons { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }
  .price-card__buttons .btn { width: 100%; }
  .price-card__note { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--text-muted); }
}

/* ---------- 34. SOLD band (D7.2-3) ---------------------------------------- */

.sold-band { background: var(--navy-950); padding-block: var(--sp-4); }
.sold-band__inner { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.sold-band p { font-size: var(--fs-body); color: var(--text-on-dark); margin: 0; }
.sold-band .badge-status { position: static; background: #fff; color: var(--navy-950); }

/* ---------- 35. Mobile sticky CTA bar (D8) -------------------------------- */

.stock-cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  padding: var(--sp-3) var(--gutter);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.stock-cta-bar__label { min-width: 0; }
.stock-cta-bar__car { display: block; font-size: var(--fs-small); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stock-cta-bar__price { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--text-primary); }
.stock-cta-bar .btn { height: 44px; padding: 0 20px; flex: none; }
@media (min-width: 1024px) { .stock-cta-bar { display: none; } }
body.has-stock-cta-bar { padding-bottom: 72px; }
@media (min-width: 1024px) { body.has-stock-cta-bar { padding-bottom: 0; } }

/* ---------- 36. Back-to-stock strip (§10) --------------------------------- */

.stock-back { padding-block: var(--sp-8); }
.stock-back__inner { display: flex; flex-direction: column; gap: var(--sp-4); }
@media (min-width: 1024px) { .stock-back__inner { flex-direction: row; justify-content: space-between; align-items: center; } }
.link-arrow--back { display: inline-flex; align-items: baseline; gap: 8px; font-weight: 600; color: var(--link); text-decoration: none; }
.link-arrow--back::before { content: "\2190"; color: var(--orange-500); }
.link-arrow--back:hover { color: var(--link-hover); }

/* ---------- 37. Share bar (§1 title block) --------------------------------
   Two markup states always exist; JS just toggles which one is visible.
   No-JS / no Web Share API: 5 icon links (real hrefs, work with JS off).
   Web Share API available (mobile Safari/Chrome): single native button. */

.share-bar { margin-top: var(--sp-5); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.share-bar__label { font-size: var(--fs-small); font-weight: 600; color: var(--text-muted); }

.share-native {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--white);
  font-family: inherit; font-size: var(--fs-small); font-weight: 600; color: var(--text-primary);
  cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.share-native:hover { border-color: var(--navy-300); color: var(--navy-900); }
.share-native[hidden] { display: none; }

.share-icons { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.share-icons[hidden] { display: none; }
.share-icon {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--white); color: var(--text-secondary);
  text-decoration: none; cursor: pointer; padding: 0;
  transition: border-color .15s ease, color .15s ease;
}
.share-icon:hover { border-color: var(--navy-300); color: var(--navy-900); }
.share-icon[data-copied="true"] { border-color: var(--status-good); color: var(--status-good); }
.share-icon[data-copied="true"]::after {
  content: "Copied!"; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--navy-900); color: #fff; font-size: var(--fs-small); font-weight: 500;
  padding: 4px 10px; border-radius: 6px; white-space: nowrap;
}

/* ---------- 38. Back to top (all pages) -----------------------------------
   Fixed, bottom-right, hidden until the visitor has scrolled past the hero
   (~700px). On stock detail pages the mobile sticky CTA bar (§35) already
   occupies the bottom-right corner below 1024px, so this button is lifted
   above it via body.has-stock-cta-bar — see stock_detail pages only. */

.back-to-top {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 45;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--navy-900); color: #fff; border: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease, background-color .15s ease;
}
.back-to-top:hover { background: var(--navy-700); }
.back-to-top[data-visible="true"] { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 767px) {
  .back-to-top { width: 44px; height: 44px; right: var(--sp-4); bottom: var(--sp-4); }
}

/* Stock detail pages: lift above the mobile sticky CTA bar (~72px incl.
   safe area, see §35) so the two never overlap. Desktop has no CTA bar,
   so the button sits at the normal offset there. */
body.has-stock-cta-bar .back-to-top {
  bottom: calc(72px + var(--sp-4) + env(safe-area-inset-bottom));
}
@media (min-width: 1024px) {
  body.has-stock-cta-bar .back-to-top { bottom: var(--sp-5); }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: none; }
}

/* ==========================================================================
   AI 세팅 서비스 (ai-setup.html) — additive only, separate business line.
   Built to homepage/copy/ai-setup.md + homepage/plan/AI세팅.md. Reuses
   .hero/.section/.card/.channel-grid/.loc-grid/.profile/.steps/.cta-band
   from above — only the handful of page-specific bits live here.
   ========================================================================== */

/* ---------- 39. Mini header (no main nav on this page) -------------------- */

.mini-header-name {
  font-size: var(--fs-small); font-weight: 500; color: var(--text-secondary);
}

/* ---------- 39b. Korean line-breaking -------------------------------------
   Default CJK line-breaking allows a break between ANY two Hangul
   syllables, so tight lines were splitting mid-word ("그대로" -> "그" /
   "대로", "시스템은" -> "시" / "스템은"). Korean text uses spaces between
   words (어절), so `word-break: keep-all` restricts breaks to those spaces
   only — same fix typography guides recommend for Korean web text. */
html[lang="ko"] {
  word-break: keep-all;
}

/* ---------- 39c. Korean copy measure override -----------------------------
   .body/.hero__sub/.section-head cap width in `ch`, tuned for Latin text on
   the English pages. Hangul glyphs run ~2x the width of the "0" that defines
   1ch, so the same ch value wraps Korean lines after roughly half as many
   visible characters — reads as cramped, artificially broken text. This
   page is the only lang="ko" page, so lift the cap here instead of
   touching the shared English-tuned rule. Paragraphs inside .card/.step are
   already bounded by their grid column, so this is a no-op there. */
html[lang="ko"] .body,
html[lang="ko"] .hero__sub,
html[lang="ko"] .section-head {
  max-width: none;
}

/* ---------- 39d. Icon + label lockup --------------------------------------
   Same icon+text lockup as .channel-card__label on the media page. Used on
   every labelled block on this page — the numbered trust-bridge cards, the
   two package tiers, and the five process steps — so they all read alike.
   The label keeps its own colour; only the icon takes the accent. */
.label-icon { display: inline-flex; align-items: center; gap: var(--sp-2); }
.label-icon svg { color: var(--orange-500); flex-shrink: 0; }

/* ---------- 39e. Icon badge -----------------------------------------------
   The service-definition cards lead with a heading instead of an overline
   label, so there is no lockup to sit in — the icon gets a tinted badge
   above the heading instead. Different structure, deliberately different
   treatment. */
.icon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--orange-050); color: var(--orange-500);
  margin-bottom: var(--sp-4);
}

@media (max-width: 479px) { .mini-header-name { display: none; } }

/* ---------- 40. Pricing cards (§3 베이직·프리미엄) ------------------------- */
/* Layout reuses .loc-grid (2-col at 1024+) + .card + .profile verbatim —
   only the price figure needs its own rule (bigger than .h2's usual context,
   and the "부터" qualifier must read smaller than the digits, per
   AI세팅.md "가격 표기 방식"). */

.price-figure { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.price-figure__unit { font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); }
.price-figure--from .price-figure__amount { font-size: var(--fs-h3); }

/* ---------- 41. Legal placeholder flag (§7 법정 필수 표기) ----------------- */
/* Kevin still needs to supply these three values (대표자 성명·사업자등록번호·
   연락처) — flagged in orange instead of hidden, per web-builder brief. */

.tbd { color: var(--orange-500); font-weight: 600; }

/* ---------- 42. Footer cross-link (export site → /ai-setup, §언어 경계 3) --
   Deliberately separate from .footer-grid (main menu) and .footer-legal
   (fine print) — its own bordered row so it can't be mistaken for either. */

.footer-aiservice {
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-small);
}
.footer-aiservice a { color: #fff; font-weight: 600; text-decoration: underline; }
.footer-aiservice a:hover { color: var(--orange-500); }

/* ==========================================================================
   43. Chat widget (assets/js/chat.js) — both bots share these styles; the
   only per-bot difference is language, handled in JS. Built from the same
   tokens as the rest of the site so the panel reads as part of the page
   rather than a bolted-on third-party widget.
   ========================================================================== */

/* z-index 55, above the stock CTA bar's 50: at 46 the launcher was painted
   underneath that bar on stock detail pages, where it was neither visible nor
   clickable on most phones. */
.chat-root { position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 55; }

/* Same lift the back-to-top button already gets, for the same reason — the
   bar owns the bottom 72px on mobile. */
body.has-stock-cta-bar .chat-root {
  bottom: calc(72px + var(--sp-4) + env(safe-area-inset-bottom));
}
@media (min-width: 1024px) {
  body.has-stock-cta-bar .chat-root { bottom: var(--sp-5); }
}

/* The launcher takes the corner the back-to-top button already occupied, so
   that button moves up above it. Only applies once the widget has actually
   mounted — with JS off, back-to-top keeps its original position. */
.js .chat-root ~ .back-to-top,
html:has(.chat-root) .back-to-top { bottom: calc(var(--sp-5) + 68px); }

/* Stock pages stack all three: CTA bar, then launcher, then this button. */
body.has-stock-cta-bar:has(.chat-root) .back-to-top {
  bottom: calc(72px + var(--sp-4) + 68px + env(safe-area-inset-bottom));
}
@media (min-width: 1024px) {
  body.has-stock-cta-bar:has(.chat-root) .back-to-top { bottom: calc(var(--sp-5) + 68px); }
}

.chat-launcher {
  width: 56px; height: 56px; border-radius: 50%; border: 0; padding: 0;
  background: var(--orange-500); color: #fff; cursor: pointer;
  display: grid; place-items: center; margin-left: auto;
  box-shadow: 0 6px 20px rgba(74, 83, 45, 0.24);
  transition: background 0.15s ease, transform 0.15s ease;
}
.chat-launcher:hover { background: var(--orange-600); transform: translateY(-1px); }
.chat-launcher:focus-visible { outline: 3px solid var(--navy-900); outline-offset: 3px; }

.chat-panel {
  display: none; flex-direction: column;
  width: min(380px, calc(100vw - var(--sp-5) * 2));
  height: min(560px, calc(100vh - var(--sp-5) * 2 - 72px));
  margin-bottom: var(--sp-3);
  background: var(--white); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 12px 40px rgba(74, 83, 45, 0.18); overflow: hidden;
}
.chat-root[data-open="true"] .chat-panel { display: flex; }

.chat-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-4) var(--sp-5);
  background: var(--navy-900); color: #fff;
}
.chat-head__title { margin: 0; font-size: var(--fs-body); font-weight: 600; }
.chat-head__sub { margin: 2px 0 0; font-size: var(--fs-small); color: var(--navy-300); }
.chat-close {
  background: none; border: 0; color: #fff; cursor: pointer; padding: 4px;
  display: grid; place-items: center; border-radius: 6px;
}
.chat-close:hover { background: rgba(255, 255, 255, 0.14); }

.chat-log {
  /* min-height: 0 — without it the log refuses to shrink below its content
     and pushes the composer out of the fixed-height panel. */
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.chat-msg {
  max-width: 85%; padding: 10px 14px; border-radius: 14px;
  font-size: var(--fs-body); line-height: 1.5; white-space: pre-wrap;
}
.chat-msg--bot { align-self: flex-start; background: var(--bg-alt); color: var(--text-primary); }
.chat-msg--user { align-self: flex-end; background: var(--navy-900); color: #fff; }
.chat-typing { color: var(--text-muted); font-style: italic; }

.chat-input { display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); }
.chat-input input {
  flex: 1; min-width: 0; padding: 10px 12px; font: inherit; font-size: var(--fs-body);
  border: 1px solid var(--border); border-radius: 10px; background: var(--white);
}
.chat-input input:focus-visible { outline: 2px solid var(--orange-500); outline-offset: -1px; }
.chat-send {
  padding: 0 16px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--orange-500); color: #fff; font: inherit; font-weight: 600;
}
.chat-send:hover:not(:disabled) { background: var(--orange-600); }
.chat-send:disabled { opacity: 0.5; cursor: default; }

.chat-foot {
  display: flex; flex-direction: column; gap: 6px;
  padding: 0 var(--sp-4) var(--sp-4);
}
.chat-leadcta {
  align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--fs-small); font-weight: 600;
  color: var(--link); text-decoration: underline;
}
.chat-leadcta:hover { color: var(--link-hover); }
.chat-disclaimer { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.4; }

/* Lead form — a second view inside the same panel, not an extra block stacked
   under the conversation. The panel is a fixed height, so stacking squeezed the
   log to nothing and still cut the form off at the bottom edge. Swapping views
   gives the form the whole panel and lets it scroll on short screens; the
   conversation is untouched underneath and "cancel" brings it straight back. */
.chat-panel[data-view="lead"] .chat-log,
.chat-panel[data-view="lead"] .chat-input,
.chat-panel[data-view="lead"] .chat-foot { display: none; }

.chat-lead {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; background: var(--bg-alt);
}
.chat-lead__body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.chat-lead__title { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--text-primary); }
.chat-lead__intro { margin: 0; font-size: var(--fs-small); color: var(--text-secondary); }
.chat-lead__field { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-small); color: var(--text-secondary); }
.chat-lead__field input,
.chat-lead__field textarea {
  font: inherit; font-size: var(--fs-body); padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--white); resize: vertical;
}
.chat-lead__consent { margin: 0; font-size: var(--fs-small); color: var(--text-muted); line-height: 1.4; }
.chat-lead__foot {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--border); background: var(--bg-alt);
}
.chat-lead__row { display: flex; gap: var(--sp-2); }
.chat-lead__row .btn { flex: 1; height: 40px; padding: 0 12px; font-size: var(--fs-small); }

@media (max-width: 479px) {
  .chat-root { right: var(--sp-4); bottom: var(--sp-4); }
  .chat-panel { height: min(70vh, calc(100vh - 120px)); }
}