/* ============================================================
   Asia Link 공인중개사무소 — Design tokens & base styles
   ============================================================ */

:root {
  /* Brand */
  --c-primary: #14366B;          /* deep navy */
  --c-primary-dark: #0B2347;
  --c-primary-soft: #2A579C;
  --c-accent: #C8A368;           /* warm gold for highlights */
  --c-accent-soft: #E6D3A7;

  /* Surfaces */
  --c-bg: #FFFFFF;
  --c-bg-alt: #F5F7FB;
  --c-bg-sunk: #EEF1F7;
  --c-line: #E3E7EF;
  --c-line-soft: #EEF1F6;

  /* Text */
  --c-ink: #0F1A2E;
  --c-ink-muted: #5A6679;
  --c-ink-faint: #8A93A6;

  /* Status / signals */
  --c-tag-sale: #14366B;
  --c-tag-jeonse: #1E7B5E;
  --c-tag-monthly: #C46A1F;
  --c-tag-pending: #8A93A6;
  --c-tag-new: #C0392B;
  --c-heart: #E94A6B;

  /* Type */
  --font-sans: "Pretendard Variable", "Pretendard", -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Apple SD Gothic Neo",
    "Malgun Gothic", sans-serif;
  --font-serif: "Cormorant Garamond", "Noto Serif KR", Georgia, serif;

  /* Radii */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* Shadow */
  --sh-card: 0 2px 8px rgba(15, 26, 46, 0.06);
  --sh-card-hover: 0 12px 28px rgba(15, 26, 46, 0.12);
  --sh-float: 0 6px 18px rgba(15, 26, 46, 0.18);
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  width: 100%;
  min-width: 1680px;
}
/* Allow horizontal scrolling when the page-grid's min-width exceeds the
   viewport. clip → visible so the user can scroll right to reach the rails. */
html { overflow-x: visible; }
body { overflow-x: visible; }
/* Mirror body bg on html so any area outside the 1920px-capped body fills
   with the same color seamlessly on ultrawide viewports. */
html, html body { background: #FFFFFF; }

/* Cap the entire page to a 1920px-wide centered column so the hero (and
   everything else) stops extending into infinite white space on ultrawide
   monitors. Page background outside the cap matches the theme bg seamlessly,
   so the cap is invisible — purely a content-width constraint. */
body {
  max-width: 1920px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* sticky footer — main 영역이 부족해도 footer 가 viewport 하단에 머문다. */
body > .site-footer { margin-top: auto; }

/* Header / nav dividers extend the full viewport width even when body is
   capped at 1920, using a 100vw pseudo-element anchored to viewport. */
.site-header,
.nav-row { position: relative; }
.site-header::after,
.nav-row::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: var(--c-line);
  pointer-events: none;
}
/* Drop the duplicated regular border, since the 100vw pseudo replaces it */
.site-header { border-bottom: none; }
.nav-row { border-bottom: none; }

img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; margin: 0; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-title {
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--c-ink);
  position: relative;
  display: inline-block;
}
.section-title-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.section-title::before,
.section-title::after {
  /* decorative side lines removed per request */
  content: none;
}

/* ============================================================
   TOP UTILITY BAR
   ============================================================ */
.utility-bar {
  border-bottom: 1px solid var(--c-line-soft);
  font-size: 14px;
  color: var(--c-ink-muted);
}
.utility-bar .container {
  height: 42px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.utility-bar .left { display: flex; align-items: center; gap: 8px; }
.utility-bar .left .phone {
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: 0.02em;
  margin-left: 6px;
}
.utility-bar .right { display: flex; align-items: center; gap: 18px; }
.utility-bar .right a:hover { color: var(--c-primary); }

/* ============================================================
   HEADER + NAV
   ============================================================ */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--c-line);
  position: sticky;
  top: 0;
  z-index: 30;
  width: 100%;
}
/* 기본 헤더: phone 좌 | 로고 가운데 | spacer 우 — 그리드 1fr auto 1fr */
.site-header .container {
  height: 88px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: center;
}
.header-spacer { display: block; }

/* 검색 페이지 전용: 단일 행 — 로고 좌, 네비 우 */
body.search-page .site-header .container {
  max-width: none;
  width: 100%;
  height: 78px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  grid-template-columns: none;
}
body.search-page .logo { justify-self: auto; }

.top-nav {
  display: inline-flex;
  align-items: center;
  gap: 26px;
}
.top-nav a {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-ink);
  letter-spacing: -0.005em;
  padding: 6px 2px;
  position: relative;
  transition: color .15s;
}
.top-nav a:hover { color: var(--c-primary); }
.top-nav a.active { color: var(--c-primary); }
.top-nav a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--c-primary);
}
.top-nav a.has-caret::after {
  content: "›";
  display: inline-block;
  transform: rotate(90deg);
  margin-left: 6px;
  font-size: 11px;
  color: var(--c-ink-faint);
  position: static;
  background: none;
  height: auto;
}
.logo .mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--c-primary);
  color: #fff;
  border-radius: 2px;
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.logo .word {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.logo .word strong {
  font-size: 24px;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--c-ink);
}
.logo .word span {
  font-size: 13px;
  color: var(--c-ink-muted);
  letter-spacing: 0.05em;
  margin-top: 5px;
}

.main-nav {
  display: flex;
  gap: 38px;
  justify-self: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  width: 100%;
  max-width: 1240px;
  justify-content: center;
  padding: 0 24px;
  pointer-events: none;
}
/* keep nav inline within header instead of secondary row */
.nav-row {
  background: #fff;
  border-bottom: 1px solid var(--c-line);
  width: 100%;
}
.nav-row .container {
  display: flex;
  justify-content: center;
  gap: 56px;
  height: 60px;
  align-items: center;
}
.nav-row a {
  font-size: 17px;
  font-weight: 600;
  color: var(--c-ink);
  letter-spacing: -0.005em;
  padding: 0 2px;
  height: 100%;
  display: inline-flex;
  align-items: center;
  position: relative;
  transition: color .15s;
}
.nav-row a.has-caret::after {
  content: "›";
  display: inline-block;
  transform: rotate(90deg);
  margin-left: 6px;
  font-size: 12px;
  color: var(--c-ink-faint);
}
.nav-row a:hover { color: var(--c-primary); }
.nav-row a.active { color: var(--c-primary); }
.nav-row a.active::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0; /* nav-row 의 1px 회색 border-bottom 바로 위 */
  height: 3px;
  background: var(--c-primary);
}

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
}
.header-actions a {
  font-size: 14.5px;
  color: var(--c-ink-muted);
}
.header-actions a:hover { color: var(--c-primary); }
.header-actions .sep {
  width: 1px; height: 12px; background: var(--c-line);
}

.header-phone {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--c-ink);
  transition: color .15s;
  letter-spacing: -0.005em;
}
.header-phone .hp-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--c-primary);
  color: #fff;
  border-radius: 50%;
  font-size: 16px;
}
.header-phone .hp-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-ink-muted);
  letter-spacing: 0.06em;
}
.header-phone .hp-num {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: -0.01em;
}
.header-phone:hover .hp-num { color: var(--c-primary-dark); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  background: var(--c-primary-dark);
  color: #fff;
  overflow: hidden;
}
.hero-track {
  display: flex;
  transition: transform .55s cubic-bezier(.4,.0,.2,1);
}
.hero-slide {
  flex: 0 0 100%;
  min-height: 460px;
  display: grid;
  grid-template-columns: 1.05fr 1.4fr;
  align-items: stretch;
}
.hero-text {
  padding: 76px 60px 64px 84px;
  background:
    linear-gradient(135deg, rgba(20,54,107,.96) 0%, rgba(11,35,71,.96) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.hero-text .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--c-accent-soft);
  margin-bottom: 16px;
  text-transform: uppercase;
}
.hero-text .eyebrow::before {
  content: "";
  width: 24px; height: 1px; background: var(--c-accent);
}
.hero-text h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 22px 0;
  color: #fff;
}
.hero-text h1 em {
  font-style: italic;
  color: var(--c-accent);
}
.hero-text .kr-tag {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 10px 0;
  letter-spacing: -0.01em;
}
.hero-text .kr-tag::before {
  content: "";
  display: inline-block;
  width: 16px; height: 16px;
  background: var(--c-accent);
  border-radius: 50%;
  vertical-align: -3px;
  margin-right: 8px;
  box-shadow: 0 0 0 4px rgba(200,163,104,.18);
}
.hero-text p {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255,255,255,.85);
  margin: 0;
  max-width: 480px;
}
.hero-image {
  position: relative;
  background-size: cover;
  background-position: center;
}
.hero-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11,35,71,.6) 0%, rgba(11,35,71,0) 28%);
}

.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 20px;
  backdrop-filter: blur(6px);
  z-index: 3;
  transition: background .2s, transform .2s;
}
.hero-nav:hover { background: rgba(255,255,255,.28); }
.hero-nav.prev { left: 24px; }
.hero-nav.next { right: 24px; }

.hero-dots {
  position: absolute;
  bottom: 22px;
  left: 60px;
  display: flex;
  gap: 8px;
  z-index: 3;
}
.hero-dots button {
  width: 24px; height: 3px;
  background: rgba(255,255,255,.35);
  transition: background .2s, width .2s;
}
.hero-dots button.active {
  background: var(--c-accent);
  width: 40px;
}

.hero-corner {
  position: absolute;
  right: 24px; bottom: 24px;
  font-size: 12px;
  color: rgba(255,255,255,.78);
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 6px 12px;
  z-index: 3;
}
.hero-corner .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent);
}

/* ============================================================
   SEARCH BAR
   ============================================================ */
.search-bar-wrap {
  background: #fff;
  padding: 26px 0 26px 0;
}
.search-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  border: 1.5px solid var(--c-primary);
  border-radius: 6px;
  background: #fff;
  transition: box-shadow .15s;
}
.search-bar:focus-within { box-shadow: 0 0 0 4px rgba(20,54,107,.08); }
.search-bar svg.search-icon { color: var(--c-primary); flex: 0 0 auto; }
.search-bar input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 17px;
  background: transparent;
  color: var(--c-ink);
}
.search-bar input::placeholder { color: var(--c-ink-faint); }
.search-bar button.search-btn {
  background: var(--c-primary);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  padding: 12px 32px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  transition: background .15s;
}
.search-bar button.search-btn:hover { background: var(--c-primary-dark); }

/* ============================================================
   PAGE GRID — 3-column layout below the hero
   ============================================================
   LEFT rail (매물종류 + 테마종류) — sticky, full-height visually
   CENTER column (search → consult → property → complexes → etc.)
   RIGHT rail (대표번호 + 상담신청) — sticky
   
   Center column matches .container max-width (1240) so existing
   .container-wrapped sections inside flow naturally.
*/
.page-grid {
  max-width: 1740px;
  margin: 0 auto;
  padding: 0 0 60px;
  display: grid;
  grid-template-columns: 220px 1200px 220px;
  gap: 20px;
  justify-content: center;
  align-items: start;
  background: var(--c-bg);
}
.page-center { min-width: 0; }

/* Children of the center column use .container, which would normally cap at
   1240px with 24px padding. Inside the page-grid the column is already the
   right width, so strip those constraints. Match BOTH direct (.container) and
   nested (.section-block > .container) cases. */
.page-center > .container,
.page-center > * > .container {
  max-width: none;
  padding: 0;
  width: 100%;
}

.page-rail {
  position: sticky;
  top: 100px;
  align-self: start;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 5;
}
/* Match heights with the center column boxes:
   TOP item (매물종류 / 대표번호) ↔ 간편상담문의 / 실시간상담현황
   BOTTOM item (테마종류 / 상담신청) — same height on both rails */
.page-rail > .rail-box:first-child,
.page-rail > .rail-cta:first-child { min-height: 320px; }
.page-rail > .rail-box:last-child,
.page-rail > .rail-cta:last-child  { min-height: 180px; }

.flank-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* rail box (left side — 매물종류 / 테마종류) */
.rail-box {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  padding: 16px 18px 18px 18px;
  transition: border-color .15s, box-shadow .15s;
}
.rail-box:hover { border-color: var(--c-primary); box-shadow: var(--sh-card); }

.rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 0;
}
.rail-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -0.01em;
  position: relative;
  padding-left: 12px;
}
.rail-title::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 14px;
  background: var(--c-primary);
  border-radius: 1px;
}
.rail-more {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-ink-faint);
  letter-spacing: -0.005em;
  transition: color .15s;
}
.rail-more:hover { color: var(--c-primary); }

.rail-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rail-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 6px;
  font-size: 14px;
  color: var(--c-ink);
  font-weight: 500;
  border-radius: 4px;
  letter-spacing: -0.01em;
  transition: background .12s, color .12s;
}
.rail-list li a:hover {
  background: var(--c-bg-alt);
  color: var(--c-primary);
}
.rail-list li a .ct {
  background: var(--c-bg-sunk);
  color: var(--c-ink-muted);
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 2px;
  letter-spacing: 0;
  min-width: 32px;
  text-align: center;
}
.rail-list li a:hover .ct { background: var(--c-primary); color: #fff; }

.rail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rail-tag {
  font-size: 13px;
  color: var(--c-ink-muted);
  font-weight: 500;
  padding: 5px 10px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: #fff;
  transition: all .12s;
  letter-spacing: -0.005em;
  cursor: pointer;
}
.rail-tag .hash { color: var(--c-ink-faint); margin-right: 1px; font-weight: 600; }
.rail-tag:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
  background: var(--c-bg-alt);
}
.rail-tag:hover .hash { color: var(--c-primary); }

/* 어드민이 테마 이미지를 설정한 경우 — 칩이 미니 카드 형태로 확장. */
.rail-tag.with-image {
  background-size: cover;
  background-position: center;
  color: #fff;
  border-color: transparent;
  padding: 8px 12px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.rail-tag.with-image .hash { color: rgba(255,255,255,.85); }
.rail-tag.with-image:hover {
  filter: brightness(1.05);
  color: #fff;
  border-color: var(--c-accent);
}
.rail-tag.with-image:hover .hash { color: #fff; }

/* rail cta (right side — 대표번호 / 상담신청) */
.rail-cta {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  padding: 16px 18px 16px 18px;
  transition: transform .15s, box-shadow .15s, border-color .15s, filter .15s;
  cursor: pointer;
  text-decoration: none;
}
.rail-cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-card-hover);
  border-color: var(--c-primary);
}
.rail-cta .cta-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.rail-cta .cta-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.rail-cta .cta-icon { font-size: 20px; line-height: 1; }
.rail-cta .cta-big {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--c-ink);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 8px 0 10px 0;
}
/* call 카드만 — 전화번호 가독성 위해 sans-serif + tabular-nums. consult 카드는
   "상담 신청" 텍스트라 위의 serif 톤 그대로 유지. */
.rail-cta.call .cta-big {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 26px;
  font-weight: 700;
}
.rail-cta .cta-foot {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--c-ink-muted);
  letter-spacing: -0.005em;
}
.rail-cta .cta-action {
  margin-top: auto;
  padding-top: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--c-primary);
  border-top: 1px solid var(--c-line-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rail-cta.call {
  background: var(--c-primary);
  border-color: var(--c-primary);
}
.rail-cta.call .cta-eyebrow,
.rail-cta.call .cta-foot { color: rgba(255,255,255,.78); }
.rail-cta.call .cta-big,
.rail-cta.call .cta-icon { color: #fff; }
.rail-cta.call .cta-action { color: var(--c-accent); border-top-color: rgba(255,255,255,.18); }
.rail-cta.call:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); }

.rail-cta.consult {
  background: var(--c-accent);
  border-color: var(--c-accent);
}
.rail-cta.consult .cta-eyebrow,
.rail-cta.consult .cta-foot { color: rgba(26,19,8,.72); }
.rail-cta.consult .cta-big,
.rail-cta.consult .cta-icon { color: #1A1308; }
.rail-cta.consult .cta-action { color: var(--c-primary); border-top-color: rgba(26,19,8,.18); }
.rail-cta.consult:hover { filter: brightness(1.05); }

/* flank-center reuses the existing consult-row 2-col grid */
.flank-center .consult-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  padding: 0;
}

/* ============================================================
   CONSULT + STATUS PANEL
   ============================================================ */
.consult-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  padding: 0;
}

.consult-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  padding: 16px 18px 18px 18px;
  display: flex;
  flex-direction: column;
}
.consult-card h3 {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 8px 0;
  color: var(--c-ink);
  position: relative;
  padding-left: 12px;
}
.consult-card h3::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 14px;
  background: var(--c-primary);
  border-radius: 1px;
}
.consult-card .sub {
  font-size: 13.5px;
  color: var(--c-ink-muted);
  margin: 0 0 18px 0;
  padding-bottom: 10px;
}
.consult-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.field input,
.field textarea {
  width: 100%;
  border: 1px solid var(--c-line);
  border-radius: 3px;
  padding: 12px 14px;
  font-size: 15px;
  background: #fff;
  outline: none;
  transition: border-color .12s;
}
.field input:focus,
.field textarea:focus { border-color: var(--c-primary); }
.field.full { grid-column: 1 / -1; }
.field textarea {
  resize: none;
  min-height: 64px;
}
.consult-row .agree {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--c-ink-muted);
}
.consult-row .agree input { accent-color: var(--c-primary); }
.consult-row .agree a {
  text-decoration: underline;
  color: var(--c-ink-muted);
}
.consult-row .submit {
  margin-top: 16px;
  background: var(--c-primary);
  color: #fff;
  text-align: center;
  padding: 16px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.02em;
  border-radius: 3px;
  transition: background .15s;
  width: 100%;
}
.consult-row .submit:hover { background: var(--c-primary-dark); }
.bookmark-btn {
  position: absolute;
  left: 16px; bottom: 16px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 1.1;
  box-shadow: var(--sh-float);
}

/* status panel */
.status-panel {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.status-panel .head {
  background: var(--c-bg-sunk);
  padding: 16px 22px;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: -0.005em;
}
.status-panel .head .legend {
  display: flex; gap: 14px;
  font-weight: 500; color: var(--c-ink-muted); font-size: 13.5px;
}
.status-panel .head .legend span::before {
  content: "•";
  margin-right: 4px;
}
.status-panel .head .legend .ing::before { color: var(--c-accent); }
.status-panel .head .legend .done::before { color: var(--c-primary); }
.status-panel ul.status-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  divide-y: 1px solid var(--c-line);
}
.status-panel ul.status-list li {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--c-line-soft);
  font-size: 15px;
  transition: background .12s;
}
.status-panel ul.status-list li:hover { background: var(--c-bg-alt); }
.status-panel ul.status-list li:last-child { border-bottom: none; }
.status-chip {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 3px;
  letter-spacing: -0.01em;
  text-align: center;
  width: 72px;
}
.status-chip.ing  { background: #FFF4E0; color: #B07315; border: 1px solid #FFE6B5; }
.status-chip.done { background: #E7EEF9; color: var(--c-primary); border: 1px solid #C7D6EE; }
.status-panel .name {
  color: var(--c-ink);
  font-weight: 500;
}
.status-panel .who {
  color: var(--c-ink-faint);
  font-size: 13.5px;
  text-align: right;
  white-space: nowrap;
}

/* ============================================================
   FLOATING SIDE ICONS (right)
   ============================================================ */
.float-side {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ============================================================
   FLOATING LEFT DOCK (section quick-jump)
   ============================================================ */
.float-left {
  position: fixed;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 14px;
  padding: 10px 8px;
  box-shadow: var(--sh-float);
}
.float-left .fl-btn {
  width: 74px;
  padding: 12px 6px 10px 6px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--c-ink-muted);
  transition: background .15s, color .15s, transform .15s;
  cursor: pointer;
  border: none;
}
.float-left .fl-btn:hover {
  background: var(--c-bg-alt);
  color: var(--c-primary);
  transform: translateY(-1px);
}
.float-left .fl-btn .fl-ico {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-bg-sunk);
  display: grid;
  place-items: center;
  color: var(--c-primary);
  transition: background .15s, color .15s;
}
.float-left .fl-btn:hover .fl-ico {
  background: var(--c-primary);
  color: #fff;
}
.float-left .fl-btn .fl-lbl {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.float-left .fl-divider {
  height: 1px;
  margin: 2px 6px;
  background: var(--c-line-soft);
}

/* CTA-style right-side action buttons (call / consult) */
.float-side .fs-action {
  width: 62px;
  border-radius: 16px;
  padding: 12px 6px 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  box-shadow: var(--sh-float);
  transition: transform .18s, filter .15s;
  position: relative;
  cursor: pointer;
  border: none;
}
.float-side .fs-action:hover { transform: translateY(-2px); filter: brightness(1.06); }
.float-side .fs-action.call    { background: var(--c-primary); }
.float-side .fs-action.consult { background: var(--c-accent); color: #1A1308; }
.float-side .fs-action .ico { font-size: 20px; line-height: 1; }
.float-side .fs-action .num { font-size: 11px; font-weight: 700; letter-spacing: 0.01em; }
.float-side .fs-action .lbl { font-size: 11.5px; font-weight: 700; }

/* tooltip that slides out to the left on hover (right-dock only) */
.float-side .fs-tip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: #0F1A2E;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s, transform .15s;
  letter-spacing: 0.01em;
}
.float-side .fs-tip::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: #0F1A2E;
}
.float-side .fs-action:hover .fs-tip,
.float-side .fs-btn:hover .fs-tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.float-side .fs-divider {
  height: 1px;
  width: 36px;
  margin: 4px auto;
  background: rgba(15,26,46,.12);
}
.float-side .fs-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 12px;
  background: #fff;
  color: var(--c-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: var(--sh-float);
  transition: transform .18s;
  position: relative;
  overflow: hidden;
}
.float-side .fs-btn:hover { transform: translateY(-2px); }
.float-side .fs-btn .ico {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  line-height: 1;
}
.float-side .fs-btn .ico img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.float-side .fs-btn .lbl {
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--c-ink-muted);
  line-height: 1;
}

.float-side .top-btn {
  margin-top: 4px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--c-line);
  display: grid; place-items: center;
  color: var(--c-ink-muted);
  font-size: 11px;
  font-weight: 600;
}

/* ============================================================
   PROPERTY TYPES (6 large icons)
   ============================================================ */
section.section-block { padding: 24px 0 0 0; scroll-margin-top: 90px; }
section.section-block.alt { background: var(--c-bg-alt); }

.types-strip-wrap { position: relative; padding: 0; }
.types-strip {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  /* 스크롤바 숨김 — 화살표 버튼으로만 조작 의도 */
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 0;
}
.types-strip::-webkit-scrollbar { display: none; }
.type-card {
  position: relative;
  /* 데스크탑 기본: 한 화면에 6개. 16px gap × 5 = 80px 빼서 6등분. */
  flex: 0 0 calc((100% - 80px) / 6);
  scroll-snap-align: start;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: transform .25s, box-shadow .25s;
}
@media (max-width: 960px) {
  .type-card { flex: 0 0 calc((100% - 64px) / 5); }  /* 5개 */
}
@media (max-width: 720px) {
  .type-card { flex: 0 0 calc((100% - 32px) / 3); }  /* 3개 */
}
@media (max-width: 480px) {
  .type-card { flex: 0 0 calc((100% - 16px*1.5) / 2.5); }  /* 2.5개 (살짝 잘려서 스크롤 유도) */
}
.type-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,35,71,0) 38%, rgba(11,35,71,.88) 100%);
}
.type-card:hover { transform: translateY(-3px); box-shadow: var(--sh-card-hover); }
.type-card .count {
  position: absolute;
  top: 10px; right: 10px;
  background: var(--c-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 2px;
  z-index: 2;
  min-width: 26px;
  text-align: center;
}
.type-card .label {
  position: absolute;
  bottom: 16px; left: 0; right: 0;
  text-align: center;
  color: #fff;
  z-index: 2;
}
.type-card .label .kr {
  display: block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.type-card .label .en {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,.8);
  margin-top: 5px;
  text-transform: uppercase;
}

.strip-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--c-line);
  display: grid;
  place-items: center;
  color: var(--c-ink-muted);
  box-shadow: var(--sh-card);
  z-index: 3;
}
.strip-nav.prev { left: 0; transform: translate(-50%, -50%); }
.strip-nav.next { right: 0; transform: translate(50%, -50%); }
.strip-nav:hover { color: var(--c-primary); border-color: var(--c-primary); }

/* ============================================================
   COMPLEX CARDS (apartment buildings grid)
   ============================================================ */
.complex-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.complex-card {
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--c-line);
  cursor: pointer;
  transition: transform .25s, box-shadow .25s;
}
.complex-card:hover { transform: translateY(-3px); box-shadow: var(--sh-card-hover); }
.complex-card .thumb {
  height: 178px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.complex-card .thumb .count {
  position: absolute;
  top: 10px; right: 10px;
  background: var(--c-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 2px;
  min-width: 26px;
  text-align: center;
}
.complex-card .body {
  padding: 14px 16px 16px 16px;
  text-align: center;
}
.complex-card .body .name {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
.complex-card .body .desc {
  margin-top: 4px;
  font-size: 14px;
  color: var(--c-ink-muted);
}
/* ============================================================
   PROPERTY CARDS (Recommended + Latest)
   ============================================================ */
.tabs-row {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 0 0 18px 0;
  flex-wrap: wrap;
}
.tabs-row button {
  padding: 12px 24px;
  font-size: 17px;
  font-weight: 500;
  color: var(--c-ink-muted);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: #fff;
  transition: all .15s;
}
.tabs-row button:hover {
  color: var(--c-primary);
  border-color: var(--c-primary);
}
.tabs-row button.active {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
  font-weight: 600;
}

/* 한 줄 가로 나열. 넓으면 균일 분배, 좁아지면 가로 스크롤 캐러셀.
   - 데스크탑: flex:1 로 카드들이 폭에 맞춰 균일하게 차오름 (min 220).
   - 좁은 화면: 카드 폭 고정(260) → 화면을 넘기면 자연스럽게 가로 스크롤.
   - 마지막 카드가 살짝 잘려 보이도록 우측 패딩으로 "더 있음" 힌트. */
.props-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 22px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
  scroll-snap-type: x proximity;
  scroll-padding-left: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.18) transparent;
}
.props-grid::-webkit-scrollbar { height: 8px; }
.props-grid::-webkit-scrollbar-track { background: transparent; }
.props-grid::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 4px; }
.props-grid::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.30); }

.props-grid > .prop-card {
  flex: 1 0 220px;
  scroll-snap-align: start;
}
.props-grid.five > .prop-card { flex: 1 0 220px; }

/* 매물검색 결과 그리드(data-list-grid) 는 가로 스크롤 strip 이 아니라
   세로 vertical grid. 4열 고정 — 결과가 1~3건이어도 카드 폭이 4열일 때와
   같아 좌측 정렬, 우측은 빈 공간. flex 의 flex-grow 로 카드가 늘어나는
   현상을 막는다. */
.props-grid[data-list-grid] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: visible;
  scroll-snap-type: none;
}
.props-grid[data-list-grid] > .prop-card {
  flex: none;
  width: auto;
  scroll-snap-align: unset;
}
@media (max-width: 1240px) {
  .props-grid[data-list-grid] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .props-grid[data-list-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 1024 이하 (iOS Safari 데스크탑 모드 ~ 태블릿): 카드 폭 고정 → 가로 스크롤. */
@media (max-width: 1024px) {
  .props-grid > .prop-card,
  .props-grid.five > .prop-card { flex: 0 0 260px; }
}
/* 모바일: 카드 폭 더 작게, 옆 카드 일부 보이게 (살짝 잘림이 스크롤 가능 힌트). */
@media (max-width: 720px) {
  .props-grid > .prop-card,
  .props-grid.five > .prop-card { flex: 0 0 240px; }
}

.prop-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  position: relative;
}
.prop-card:hover { transform: translateY(-3px); box-shadow: var(--sh-card-hover); }
.prop-card .thumb {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: var(--c-bg-sunk);
  position: relative;
}
.prop-card .badge-rec {
  position: absolute;
  top: 0; left: 12px;
  background: var(--c-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 10px 8px 10px;
  letter-spacing: 0.04em;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
  height: 30px;
  z-index: 2;
}
.prop-card .badge-new {
  position: absolute;
  top: 10px; right: 10px;
  background: var(--c-tag-new);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 2px;
  z-index: 2;
  letter-spacing: 0.02em;
}
.prop-card .badge-pin {
  position: absolute;
  top: 0; right: 0;
  background: linear-gradient(135deg, #E94A6B, #C0392B);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  z-index: 2;
  border-bottom-left-radius: 6px;
  letter-spacing: 0.04em;
}
.prop-card .heart {
  position: absolute;
  bottom: 10px; right: 10px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  display: grid;
  place-items: center;
  color: var(--c-ink-faint);
  z-index: 3;
  transition: color .15s, background .15s;
}
.prop-card .heart.on { color: var(--c-heart); background: #fff; }
.prop-card .heart.on svg path { fill: currentColor; }
.prop-card .date-strip {
  position: absolute;
  bottom: 10px; left: 10px;
  background: rgba(11,35,71,.78);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: 2px;
  z-index: 2;
  letter-spacing: 0.02em;
}
.prop-card .body {
  padding: 16px 16px 14px 16px;
}
.prop-card .body .loc {
  font-size: 13px;
  color: var(--c-ink-faint);
  margin: 0 0 8px 0;
  display: flex;
  gap: 6px;
  align-items: center;
}
.prop-card .body .loc .id {
  background: var(--c-bg-sunk);
  color: var(--c-ink-muted);
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 2px;
  font-size: 12px;
}
.prop-card .body .title {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -0.01em;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prop-card .body .meta {
  margin-top: 8px;
  font-size: 13px;
  color: var(--c-ink-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.prop-card .body .meta .sep { color: var(--c-line); }

.prop-card .price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-top: 1px solid var(--c-line-soft);
  background: #fff;
}
.prop-card .tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 2px;
  letter-spacing: -0.01em;
}
.prop-card .tag.sale    { background: #FFF1E5; color: var(--c-tag-monthly); border: 1px solid #FFD9B5; }
.prop-card .tag.jeonse  { background: #E5F3EC; color: var(--c-tag-jeonse); border: 1px solid #C2E0CF; }
.prop-card .tag.monthly { background: #FCEAEA; color: #B23030; border: 1px solid #F1C6C6; }
.prop-card .tag.pending { background: #ECEEF3; color: var(--c-ink-muted); border: 1px solid var(--c-line); }
.prop-card .price {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -0.02em;
}
.prop-card .price small {
  font-size: 12px;
  font-weight: 500;
  color: var(--c-ink-muted);
  margin-left: 2px;
}

/* "more" button */
.more-btn-wrap {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
.more-btn-wrap button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-ink);
  transition: all .15s;
}
.more-btn-wrap button:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

/* ============================================================
   PARTNER LOGOS STRIP
   ============================================================ */
.partner-strip-wrap {
  background: var(--c-bg-alt);
  padding: 30px 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.partner-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  align-items: center;
}
.partner-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  padding: 20px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 15px;
  color: var(--c-ink);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.partner-card .seal {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #1a3a8a;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 15px;
  flex: 0 0 auto;
}
.partner-card .seal.green { background: #2E8B57; }
.partner-card .seal.red { background: #C23030; }
.partner-card .seal.yellow { background: #E8B533; color: #3A2200; }
.partner-card .seal.navy { background: var(--c-primary); }
.partner-card .seal.lh { background: #6FB52C; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: #fff;
  border-top: 1px solid var(--c-line);
}
.footer-top {
  border-bottom: 1px solid var(--c-line-soft);
}
.footer-top .container {
  display: flex;
  gap: 28px;
  height: 50px;
  align-items: center;
  font-size: 14.5px;
  color: var(--c-ink-muted);
}
.footer-top a:hover { color: var(--c-primary); }

.footer-main .container {
  padding: 26px 24px 38px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: start;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-brand .logo .word strong { font-size: 20px; }
.footer-brand .logo .word span { font-size: 12px; }

/* 2-line key/value info — replaces older .desc + .copyright */
.footer-info {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fi-line {
  margin: 0;
  font-size: 13.5px;
  color: var(--c-ink-muted);
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  line-height: 1.5;
}
.fi-key {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  background: var(--c-bg-alt);
  border-radius: 3px;
  margin-right: 4px;
}
.fi-val {
  font-weight: 600;
  color: var(--c-ink);
  letter-spacing: -0.005em;
}
.fi-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--c-line);
  margin: 0 6px;
}
.footer-call {
  text-align: right;
}
.footer-call .label {
  font-size: 13.5px;
  color: var(--c-ink-muted);
  letter-spacing: 0.02em;
}
.footer-call .label small {
  color: var(--c-ink-faint);
  margin-left: 4px;
  letter-spacing: 0.06em;
}
.footer-call .number {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 21px;
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: -0.01em;
  margin-top: 2px;
}

/* ============================================================
   RESPONSIVE — light tweaks
   ============================================================ */
@media (max-width: 1280px) {
  .float-left { display: none; }
}
/* Page grid always stays 3-col flanking. Below ~1700px, body gets horizontal
   scroll instead of collapsing rails (per user preference). */
@media (max-width: 1100px) {
  .types-strip   { grid-template-columns: repeat(3, 1fr); }
  .complex-grid  { grid-template-columns: repeat(3, 1fr); }
  /* .props-grid는 flex 캐러셀이라 미디어쿼리에서 따로 다루지 않음. */
  .partner-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .nav-row .container { gap: 18px; overflow-x: auto; }
  .hero-slide { grid-template-columns: 1fr; }
  .hero-image { min-height: 220px; }
  .hero-text h1 { font-size: 36px; }
  .consult-row { grid-template-columns: 1fr; }
  .types-strip { grid-template-columns: repeat(2, 1fr); }
  .footer-main .container { grid-template-columns: 1fr; }
  .footer-call { text-align: left; }
}

/* ============================================================
   CONTENT PAGES (뉴스 / 공지 / 질문답변) — 홈 layout 안의 본문 영역.
   디자인은 핸드오프에 따로 없어 홈 토큰을 그대로 활용. 단순하고
   가독성 좋은 리스트/카드 구조.
   ============================================================ */
.content-page { padding: 56px 0 96px; }
.content-page .container { max-width: 1100px; }
.content-page .container.content-narrow { max-width: 800px; }
/* 개인정보 처리방침은 표·긴 단락이 많아 800은 답답함. privacy 페이지에 한해 넓힘. */
.content-page .container.content-narrow:has(.privacy-doc) { max-width: 1240px; }
.content-sub {
  text-align: center;
  color: var(--c-ink-muted);
  font-size: 15px;
  margin: -8px 0 32px;
}

.content-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.content-cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: var(--c-primary);
  color: #fff !important;
  font-size: 14.5px;
  font-weight: 600;
  border-radius: var(--r-md);
  transition: background .15s;
}
.content-cta:hover { background: var(--c-primary-dark); }

/* ----- search ----- */
.content-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}
.content-search input[type="text"] {
  flex: 1;
  max-width: 360px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: 14.5px;
  background: #fff;
}
.content-search input[type="text"]:focus {
  outline: none;
  border-color: var(--c-primary);
}
.content-search button {
  height: 40px;
  padding: 0 18px;
  background: var(--c-primary);
  color: #fff;
  border-radius: var(--r-md);
  font-size: 14.5px;
  font-weight: 600;
}
.content-search-reset {
  font-size: 13px;
  color: var(--c-ink-muted);
  margin-left: 4px;
}
.content-search-reset:hover { color: var(--c-primary); }

/* ----- filter chips ----- */
.content-filter {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.content-filter a {
  padding: 6px 14px;
  font-size: 13.5px;
  color: var(--c-ink-muted);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  transition: all .12s;
}
.content-filter a:hover { color: var(--c-primary); }
.content-filter a.on {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}

/* ----- list ----- */
.content-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--c-line);
}
.content-row {
  border-bottom: 1px solid var(--c-line);
}
.content-row > a {
  display: block;
  padding: 18px 4px;
  color: var(--c-ink);
  transition: background .12s;
}
.content-row > a:hover { background: var(--c-bg-alt); }
.content-row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--c-ink-faint);
  margin-bottom: 6px;
}
.content-row-meta .num { font-family: ui-monospace, monospace; }
.content-row-meta .dot { opacity: .5; }
.content-row-meta .author { color: var(--c-ink-muted); font-weight: 500; }
.content-row-meta .kw {
  font-size: 11px;
  background: var(--c-bg-alt);
  padding: 2px 8px;
  border-radius: 999px;
}
.content-row-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.45;
  display: flex;
  align-items: center;
  gap: 10px;
}
.content-row-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.content-row-sub {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--c-ink-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.content-empty {
  padding: 80px 20px;
  text-align: center;
  color: var(--c-ink-faint);
  font-size: 14px;
}

/* ----- pager / more ----- */
.content-more {
  display: flex;
  justify-content: center;
  margin: 32px 0 0;
}
.content-more button {
  padding: 12px 28px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--c-ink);
  transition: all .12s;
}
.content-more button:hover { border-color: var(--c-primary); color: var(--c-primary); }
.content-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  font-size: 13px;
  color: var(--c-ink-muted);
}
.content-pager > div { display: flex; gap: 6px; }
.content-pager a {
  padding: 6px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  color: var(--c-ink);
}
.content-pager a:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* ----- detail article ----- */
.content-back {
  margin: 0 0 16px;
  font-size: 13.5px;
  color: var(--c-ink-muted);
}
.content-back a:hover { color: var(--c-primary); }
.content-article {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 40px 48px;
}
.content-article-head {
  border-bottom: 1px solid var(--c-line-soft);
  padding-bottom: 20px;
  margin-bottom: 28px;
}
.content-article-date {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--c-ink-faint);
  letter-spacing: 0.04em;
}
.content-article-title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.35;
}
.content-article-thumb { margin: 0 0 28px; }
.content-article-thumb img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--r-md);
}
.content-article-body {
  font-size: 16px;
  line-height: 1.75;
  color: var(--c-ink);
}
.content-article-body img { max-width: 100%; height: auto; border-radius: var(--r-sm); margin: 12px 0; }
.content-article-body p { margin: 0 0 14px; }
.content-article-body h1, .content-article-body h2, .content-article-body h3 {
  margin: 28px 0 12px;
  color: var(--c-ink);
}
.content-article-body ul, .content-article-body ol { margin: 0 0 14px 24px; }

.privacy-doc .content-article-body h2 {
  font-size: 17px;
  font-weight: 700;
  margin: 32px 0 10px;
  padding-top: 4px;
  letter-spacing: -0.01em;
}
.privacy-doc .content-article-body h2:first-child { margin-top: 8px; }
.privacy-doc .content-article-body ul { margin: 0 0 14px 22px; }
.privacy-doc .content-article-body ul li { margin-bottom: 4px; }
.privacy-doc .content-article-body strong { color: var(--c-ink); font-weight: 700; }

/* ----- form ----- */
.content-error {
  background: #fff1f0;
  border: 1px solid #ffccc7;
  color: #b21f1f;
  padding: 12px 16px;
  border-radius: var(--r-md);
  font-size: 14px;
  margin: 0 0 20px;
}
.content-form {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 32px 40px;
}
.content-form .field {
  margin-bottom: 20px;
}
.content-form .field:last-of-type { margin-bottom: 28px; }
.content-form label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-ink);
}
.content-form label em {
  color: var(--c-tag-new);
  font-style: normal;
  margin-left: 2px;
}
.content-form input[type="text"],
.content-form input[type="password"],
.content-form textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: 15px;
  background: #fff;
  font-family: inherit;
}
.content-form input:focus,
.content-form textarea:focus {
  outline: none;
  border-color: var(--c-primary);
}
.content-form textarea { resize: vertical; min-height: 160px; }
.content-form .field-help {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--c-ink-faint);
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.form-actions .cancel {
  padding: 10px 22px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: 14.5px;
  color: var(--c-ink-muted);
}
.form-actions button {
  padding: 10px 28px;
  background: var(--c-primary);
  color: #fff;
  border-radius: var(--r-md);
  font-size: 14.5px;
  font-weight: 600;
}

/* ----- qna status badges ----- */
.qna-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 6px;
  letter-spacing: 0;
}
.qna-status-pending  { background: #fff5d6; color: #8a6500; }
.qna-status-checked  { background: #e4eeff; color: #1d4ed8; }
.qna-status-answered { background: #dcf6e6; color: #1b6a3f; }

.qna-answer {
  margin-top: 32px;
  padding: 24px 28px;
  background: var(--c-bg-alt);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.qna-answer header h2 {
  margin: 0;
  font-size: 15px;
  color: var(--c-primary);
  letter-spacing: 0.04em;
}
.qna-answer-meta {
  margin: 4px 0 14px;
  font-size: 12.5px;
  color: var(--c-ink-faint);
}
.qna-answer-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-ink);
}
.qna-pending-note {
  margin-top: 28px;
  padding: 18px;
  background: var(--c-bg-alt);
  color: var(--c-ink-muted);
  font-size: 13.5px;
  text-align: center;
  border-radius: var(--r-md);
}

/* ============================================================
   NEWS BOARD — 부동산 소식. highclasskorea 스타일의 게시판 표 형식.
   키컬러(네이비) 만 우리 토큰 적용.
   ============================================================ */
.news-table-wrap {
  border-top: 2px solid var(--c-primary);
}
.news-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.news-table th {
  padding: 12px 8px;
  background: var(--c-bg-alt);
  border-bottom: 1px solid var(--c-line);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-ink-muted);
  letter-spacing: 0.02em;
}
.news-table td {
  padding: 14px 8px;
  border-bottom: 1px solid var(--c-line-soft);
  vertical-align: middle;
}
.news-table tbody tr { transition: background .12s; }
.news-table tbody tr:hover { background: var(--c-bg-alt); }

.news-table .news-num {
  text-align: center;
  color: var(--c-ink-faint);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, monospace;
}
.news-table .news-title a {
  color: var(--c-ink);
  font-weight: 500;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .12s;
}
.news-table .news-title a:hover { color: var(--c-primary); }
.news-table .news-date {
  text-align: center;
  color: var(--c-ink-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 빈 상태 — colspan 한 셀 안에 content-empty 클래스 그대로 사용 */
.news-table td.content-empty { padding: 80px 20px; }

/* ============================================================
   NEWS BOARD v2 — 행 두 줄 (제목 + summary). 우측에 더보기+ 버튼과 날짜.
   ============================================================ */
.news-board {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 2px solid var(--c-primary);
}
.news-board-item {
  display: grid;
  grid-template-columns: 70px 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 18px 4px;
  border-bottom: 1px solid var(--c-line-soft);
  transition: background .12s;
}
.news-board-item:hover { background: var(--c-bg-alt); }

.news-board-item .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  color: var(--c-ink-faint);
  font-family: ui-monospace, monospace;
}
.news-board-item .main {
  min-width: 0; /* 컨테이너 가변 폭 안에서 자식 truncate 위해 필수 */
}
.news-board-item .title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-board-item .title a {
  color: inherit;
  transition: color .12s;
}
.news-board-item:hover .title a { color: var(--c-primary); }

.news-board-item .summary {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--c-ink-muted);
  line-height: 1.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-board-item .more-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--c-ink-muted);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  white-space: nowrap;
  transition: all .12s;
}
.news-board-item .more-btn:hover {
  color: var(--c-primary);
  border-color: var(--c-primary);
  background: #fff;
}

.news-board-item .date {
  font-size: 13.5px;
  color: var(--c-ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* NEW 배지 — 24h 이내 글에 표시. 우리 네이비 키컬러. */
.badge-new {
  display: inline-block;
  background: var(--c-primary);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 999px;
  vertical-align: 2px;
  margin-right: 8px;
}

/* 빈 상태 */
.news-board > .content-empty {
  border-bottom: 1px solid var(--c-line-soft);
}

/* content-toolbar — 필터 chip 좌측 + 액션 버튼 우측. */
.content-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.content-toolbar .content-filter { margin-bottom: 0; }

/* ============================================================
   Asia Link — 매물검색 (Property Search) — search page styles
   Scoped to body.search-page so they don't leak to home/news/qna.
   ============================================================ */
body.search-page {
  min-width: 0;
  max-width: 100vw;
  height: 100vh;
  overflow: hidden;          /* 페이지 자체는 스크롤 X — list-scroll 만 스크롤 */
}
/* 검색 페이지에서는 우측 SNS 플로팅 + 푸터 숨김 */
body.search-page .float-side,
body.search-page .site-footer { display: none; }

/* Page title strip (간단형) */
.search-titlebar {
  background: #fff;
  border-bottom: 1px solid var(--c-line);
}
.search-titlebar .container {
  padding: 24px 24px 22px 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  max-width: 1740px;
}
.stb-left h1 {
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 4px 0;
  color: var(--c-ink);
}
.stb-left h1 em { font-style: italic; color: var(--c-accent); }
.stb-left .crumbs {
  font-size: 13px;
  color: var(--c-ink-faint);
  letter-spacing: 0.02em;
}
.stb-left .crumbs .sep { color: var(--c-line); margin: 0 8px; }
.stb-right {
  display: flex;
  align-items: center;
  gap: 22px;
  color: var(--c-ink-muted);
  font-size: 13.5px;
  padding-bottom: 6px;
}
.stb-right .stat-strong {
  color: var(--c-primary);
  font-weight: 700;
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: 0;
}

/* ---------- Filter bar ---------- */
.filter-bar {
  background: #fff;
  border-bottom: 1px solid var(--c-line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.filter-bar > .fb-row {
  max-width: none;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 460px;
  align-items: stretch;
  padding: 0;
  margin: 0;
}
.fb-left {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  flex-wrap: nowrap;
  min-width: 0;
  overflow-x: clip;
  overflow-y: visible;
}
.fb-right {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border-left: 1px solid var(--c-line);
}
.ac-count {
  font-size: 13px;
  color: var(--c-ink-muted);
  letter-spacing: -0.005em;
  margin-right: auto;
}
.ac-count strong {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--c-primary);
  letter-spacing: 0;
  margin: 0 2px;
}
.fb-search {
  width: 200px;
  height: 32px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  background: #fff;
  padding: 0 10px;
  transition: border-color .15s, box-shadow .15s;
}
.fb-search:focus-within {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(20,54,107,.08);
}
.fb-search input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 13.5px;
  background: transparent;
  color: var(--c-ink);
  letter-spacing: -0.005em;
  width: 100%;
  min-width: 0;
  padding: 0;
}
.fb-search svg {
  color: var(--c-ink-faint);
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.fb-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  flex: 0 0 auto;
  padding: 0 8px 0 10px;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-ink);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
  white-space: nowrap;
  text-decoration: none;
}
.fb-pill:hover { border-color: var(--c-primary); color: var(--c-primary); }
/* 값이 지정된 필터 — 연한 네이비로 표시 (선택됨 상태) */
.fb-pill.active {
  background: #E7EEF9;
  border-color: #B7CCEB;
  color: var(--c-primary);
}
.fb-pill .caret { font-size: 10px; color: var(--c-ink-faint); transition: transform .15s; }
.fb-pill.active .caret { color: rgba(255,255,255,.7); }
.fb-pill:hover .caret { color: var(--c-primary); }

/* Dropdown menu under each pill */
.fb-pill-wrap { position: relative; }
/* 메뉴 열려있어도 default + caret 회전으로 충분 — 별도 강조 X.
   .active 일 때만 연한 네이비 유지 (closed 와 동일). */
.fb-pill-wrap.open .fb-pill.active {
  background: #E7EEF9;
  border-color: #B7CCEB;
  color: var(--c-primary);
}
.fb-pill-wrap.open .fb-pill .caret { transform: rotate(180deg); }
.fb-pill-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  box-shadow: var(--sh-float);
  padding: 0;
  z-index: 30;
  font-size: 14px;
}
.fb-pill-wrap.open .fb-pill-menu { display: block; }
.fb-pill-menu-head {
  padding: 12px 18px;
  background: #F4F0E6;
  color: var(--c-ink);
  font-weight: 700;
  font-size: 14px;
  border-bottom: 1px solid var(--c-line);
  letter-spacing: -0.005em;
}
.fb-pill-opt {
  display: block;
  padding: 11px 18px;
  color: var(--c-ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-bottom: 1px solid var(--c-line-soft, #F0EBE0);
  cursor: pointer;
}
.fb-pill-opt:last-child { border-bottom: none; }
.fb-pill-opt:hover { background: var(--c-bg-alt); color: var(--c-primary); }
/* 옵션 항목 — 라벨 좌측 + 체크마크 우측 */
.fb-pill-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.fb-pill-opt .opt-lbl { flex: 1; }
.fb-pill-opt .opt-check {
  color: var(--c-primary);
  font-weight: 800;
  font-size: 14px;
  flex: 0 0 auto;
}
.fb-pill-opt.active { background: #F4F8FF; color: var(--c-primary); font-weight: 700; }
.fb-pill-opt.active:hover { background: #E7EEF9; color: var(--c-primary); }
.fb-pill-opt.active .opt-check { color: var(--c-primary); }

/* pill label — ellipsis 처리. 멀티 선택 시 너무 길어지지 않게 캡. */
.fb-pill .lbl {
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Grid 변종 (면적, 금액) ---- */
.fb-pill-menu.grid,
.fb-pill-menu.panel {
  min-width: 360px;
  width: 360px;
  padding: 0;
  max-height: 70vh;
}
.fb-pill-menu.panel { width: 560px; min-width: 560px; }
.fb-pill-section {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--c-line);
}
.fb-pill-section:last-of-type { border-bottom: none; }
.fb-pill-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.fb-pill-section-head .title {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -0.005em;
}
.fb-pill-section-reset {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #C46A1F;
  cursor: pointer;
}
.fb-pill-section-reset:hover { border-color: #C46A1F; background: #FFF6EC; }

.fb-chip-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.fb-pill-menu.grid .fb-chip-grid { grid-template-columns: repeat(4, 1fr); }
.fb-chip {
  height: 30px;
  border: 1px solid var(--c-line);
  background: #fff;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-ink);
  cursor: pointer;
  padding: 0 4px;
  letter-spacing: -0.005em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color .12s, background .12s, color .12s;
}
.fb-chip:hover { border-color: var(--c-primary); color: var(--c-primary); }
.fb-chip.active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}
/* 범위 안쪽 (사잇값 또는 1st-click 이하 값) — 연한 네이비 */
.fb-chip.in-range {
  background: #E7EEF9;
  border-color: #C7D6EE;
  color: var(--c-primary);
  font-weight: 600;
}
.fb-chip.in-range:hover { background: #D7E2F4; }

/* 비동기 로딩 — 리스트 컬럼만 살짝 흐리게 (덜 거슬리게) */
.list-col.is-loading { opacity: 0.75; transition: opacity .12s; pointer-events: none; }

.fb-range-row {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fb-range-input {
  flex: 1;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  padding: 0 10px;
  background: var(--c-bg-alt);
  height: 32px;
}
.fb-range-input input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 12.5px;
  color: var(--c-ink);
  width: 100%;
  min-width: 0;
  padding: 0;
}
.fb-range-input .unit {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-ink-muted);
  margin-left: 6px;
}
.fb-range-row .tilde { color: var(--c-ink-faint); font-size: 12px; }
/* 범위 입력 앞 prepend select (예: 층의 지상/지하) */
.fb-range-input .fb-range-pre {
  border: none;
  outline: none;
  background: transparent;
  font-size: 12px;
  color: var(--c-ink);
  padding: 0 6px 0 0;
  margin-right: 4px;
  border-right: 1px solid var(--c-line);
  flex: 0 0 auto;
  height: 22px;
  cursor: pointer;
}

.fb-pill-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--c-line);
  background: #FBFAF6;
  display: flex;
  justify-content: center;
  position: sticky;
  bottom: 0;
}
.fb-pill-reset-all {
  height: 36px;
  padding: 0 28px;
  background: #FFF4E0;
  color: #B07315;
  border: 1px solid #FFE6B5;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
}
.fb-pill-reset-all:hover { background: #FFE6B5; }

/* 메뉴가 화면 오른쪽으로 빠져나가지 않게 — 끝쪽 pill 은 right align */
.fb-pill-wrap:nth-last-child(-n+3) .fb-pill-menu { left: auto; right: 0; }

/* 추가 필터 panel 의 폼 그리드 (방/욕실/층/호선/사용승인일/용도지역/지목/전속) */
.fb-pill-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.fb-pill-form-grid.mt8 { margin-top: 10px; }
.fb-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fb-field .lbl {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--c-ink-muted);
  letter-spacing: -0.005em;
}
.fb-field select,
.fb-field .fb-text {
  height: 34px;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  background: var(--c-bg-alt);
  padding: 0 10px;
  font-size: 13px;
  color: var(--c-ink);
  outline: none;
}
.fb-field select:focus,
.fb-field .fb-text:focus { border-color: var(--c-primary); }

/* Multi-select dropdown (단지·건물 / 용도지역 / 지목) — form-field 내 select-box 형 multi-select */
.fb-multi { position: relative; }
.fb-multi-toggle {
  width: 100%;
  height: 34px;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  background: var(--c-bg-alt);
  padding: 0 10px;
  font-size: 13px;
  color: var(--c-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  cursor: pointer;
  text-align: left;
}
.fb-multi-toggle:hover { border-color: var(--c-primary); }
.fb-multi-toggle .lbl {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fb-multi-toggle .caret { color: var(--c-ink-faint); font-size: 10px; transition: transform .15s; }
.fb-multi.open .fb-multi-toggle { border-color: var(--c-primary); color: var(--c-primary); }
.fb-multi.open .fb-multi-toggle .caret { transform: rotate(180deg); }
.fb-multi.has-value .fb-multi-toggle {
  background: #E7EEF9;
  border-color: #B7CCEB;
  color: var(--c-primary);
}
.fb-multi-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 180px;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  box-shadow: var(--sh-float);
  z-index: 40;
}
.fb-multi.open .fb-multi-menu { display: block; }
.fb-multi-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--c-line-soft, #F0EBE0);
  cursor: pointer;
}
.fb-multi-opt:last-child { border-bottom: none; }
.fb-multi-opt:hover { background: var(--c-bg-alt); color: var(--c-primary); }
.fb-multi-opt .opt-check { color: var(--c-primary); font-weight: 800; visibility: hidden; }
.fb-multi-opt.active { background: #F4F8FF; color: var(--c-primary); font-weight: 700; }
.fb-multi-opt.active .opt-check { visibility: visible; }

.fb-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  flex: 0 0 auto;
  padding: 0 12px;
  border: 1px solid var(--c-primary);
  border-radius: 4px;
  background: var(--c-primary);
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.005em;
  cursor: pointer;
}
.fb-all .bars { display: inline-flex; flex-direction: column; gap: 2px; }
.fb-all .bars span { display: block; width: 12px; height: 1.5px; background: #fff; }
.fb-all .bars span:nth-child(2) { width: 8px; }
.fb-all .bars span:nth-child(3) { width: 10px; }

.fb-reset {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  flex: 0 0 auto;
  padding: 0 10px;
  border-radius: 4px;
  background: #FFF4E0;
  color: #B07315;
  border: 1px solid #FFE6B5;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-decoration: none;
}
.fb-reset:hover { background: #FFE6B5; }

/* ------------------------------------------------------------
   List-view variant of the filter bar — align the fb-row inside
   the same 1200px center column the page-grid uses so the left
   edge of the filter pills matches the column-2 left edge and
   the sort/view-toggle right edge matches the column-2 right
   edge. Hides the "지도 내 매물 N개" counter + divider line.
   ------------------------------------------------------------ */
.filter-bar.is-list-view > .fb-row {
  grid-template-columns: 1fr;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}
.filter-bar.is-list-view .fb-left { padding: 8px 0; }
.filter-bar.is-list-view .fb-right {
  border-left: none;
  padding: 8px 0;
}

/* ============================================================
   SPLIT VIEW — map (left) + listings (right)
   header(78px) + filter-bar(~60px) ≈ 138px
   ============================================================ */
.search-split {
  display: grid;
  grid-template-columns: 1fr 460px;
  grid-template-rows: 1fr;          /* row 를 부모 높이로 못 박지 않으면 자식이 콘텐츠 만큼 늘어남 */
  height: calc(100vh - 138px);
  min-height: 480px;
  position: relative;
  overflow: hidden;
}
.search-split > .map-col,
.search-split > .list-col { min-width: 0; min-height: 0; }  /* grid item 의 기본 min-width/height=auto 가 콘텐츠 폭으로 늘림 — 명시적 0 으로 잠금 */

/* ---------- MAP COLUMN ---------- */
.map-col {
  position: relative;
  background: #F5F1E8;
  overflow: hidden;
  border-right: 1px solid var(--c-line);
}
/* 카카오 지도 컨테이너 — .map-col 안을 가득 채움 */
.search-kakao-map { width: 100%; height: 100%; }
.search-marker-data { display: none; }
.map-key-missing {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--c-ink-muted);
  font-size: 14px;
  padding: 24px;
  background: #F5F1E8;
}

/* ---------- LISTINGS COLUMN ---------- */
.list-col {
  background: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.list-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--c-line);
  background: #fff;
}
.list-head .lh-left {
  font-size: 13.5px;
  color: var(--c-ink-muted);
  letter-spacing: -0.005em;
}
.list-head .lh-left strong {
  color: var(--c-primary);
  font-weight: 700;
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: 0;
  margin: 0 3px;
}
.list-head .lh-right { display: flex; align-items: center; gap: 10px; }

.sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-ink);
  cursor: pointer;
  text-decoration: none;
}
.sort-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.sort-btn .updown {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  color: var(--c-ink-faint);
  font-size: 8px;
  line-height: 1;
}

.view-toggle {
  display: inline-flex;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  overflow: hidden;
}
.view-toggle button,
.view-toggle a {
  padding: 6px 14px;
  height: 32px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--c-ink-muted);
  background: #fff;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}
.view-toggle button + button,
.view-toggle a + a { border-left: 1px solid var(--c-line); }
.view-toggle button.active,
.view-toggle a.active { background: var(--c-primary); color: #fff; }

.list-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  background: var(--c-bg-alt);
}
.list-scroll::-webkit-scrollbar { width: 8px; }
.list-scroll::-webkit-scrollbar-track { background: transparent; }
.list-scroll::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 4px; }
.list-scroll::-webkit-scrollbar-thumb:hover { background: var(--c-primary-soft); }

/* Listing card — horizontal layout (link variant).
   세로 컴팩트: 썸네일 140×100, 패딩 10px, 제목 1줄. 가로폭은 460px 그대로. */
.listing-card,
a.listing-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  padding: 10px 12px;
  background: #fff;
  border-bottom: 1px solid var(--c-line);
  cursor: pointer;
  transition: background .12s;
  position: relative;
  color: inherit;
  text-decoration: none;
}
.listing-card:hover,
a.listing-card:hover { background: #FAFBFD; }
.listing-card.active { background: #F7F3E8; box-shadow: inset 3px 0 0 var(--c-accent); }
.listing-card .thumb {
  width: 140px;
  height: 100px;
  align-self: center;
  background-size: cover;
  background-position: center;
  background-color: var(--c-bg-sunk);
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.listing-card .badge-strap {
  position: absolute;
  /* 썸네일 좌상단 모서리에 딱 붙이고 모서리 둥글기 X — 작은 썸네일에서도
     "딱지" 처럼 보이게. 카드 썸네일 80px 기준 균형 잡힘. */
  top: 0; left: 0;
  background: var(--c-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  padding: 2px 6px;
  border-radius: 0 0 4px 0;
  line-height: 1.3;
}
.listing-card .badge-strap.signature { background: var(--c-accent); color: #1A1308; }
.listing-card .heart {
  position: absolute;
  bottom: 8px; right: 8px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  display: grid;
  place-items: center;
  color: var(--c-ink-faint);
  transition: color .15s;
  border: none;
  cursor: pointer;
}
.listing-card .heart.on { color: var(--c-heart); }
.listing-card .heart.on svg path { fill: currentColor; }

.listing-card .body {
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.listing-card .row-top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--c-ink-muted);
  margin-bottom: 4px;
}
.listing-card .row-top .id {
  background: var(--c-bg-sunk);
  color: var(--c-ink-muted);
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 11px;
  letter-spacing: 0.01em;
}
.listing-card .row-top .addr {
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.listing-card .row-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -0.01em;
  line-height: 1.35;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.listing-card .row-title > span { display: inline; }
.listing-card:hover .row-title > span {
  display: inline-block;
  animation: row-title-flow 6.5s linear infinite alternate;
}
/* 짧은 제목 (컨테이너에 들어맞음) 은 translateX 가 0 으로 고정되어 정지.
   긴 제목은 calc(컨테이너폭 - 텍스트폭) 만큼 좌측 이동해 끝부분이 노출됨. */
@keyframes row-title-flow {
  0%, 12%   { transform: translateX(0); }
  88%, 100% { transform: translateX(min(0px, calc(280px - 100%))); }
}
.listing-card .row-meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--c-ink-muted);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.listing-card .row-meta .sep { color: var(--c-line); }
.listing-card .row-price {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.lp-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 2px;
  letter-spacing: -0.005em;
  flex: 0 0 auto;
}
.lp-tag.sale    { background: #FFF1E5; color: #C46A1F; border: 1px solid #FFD9B5; }
.lp-tag.jeonse  { background: #E5F3EC; color: var(--c-tag-jeonse); border: 1px solid #C2E0CF; }
.lp-tag.monthly { background: #FCEAEA; color: #B23030; border: 1px solid #F1C6C6; }
.lp-tag.deposit { background: #E7EEF9; color: var(--c-primary); border: 1px solid #C7D6EE; }
.lp-tag.fee     { background: var(--c-bg-sunk); color: var(--c-ink-muted); border: 1px solid var(--c-line); }
.lp-price {
  /* sans + tabular-nums + 굵게 — 가격 가독성. 서체는 Pretendard (var(--font-sans))
     로 한글·숫자 모두 또렷. */
  font-family: var(--font-sans);
  font-feature-settings: "tnum" on;
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 800;
  color: var(--c-ink);
  letter-spacing: -0.015em;
  line-height: 1.2;
  white-space: nowrap;
}
.lp-price small {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--c-ink-muted);
  font-weight: 500;
  margin-left: 1px;
  letter-spacing: -0.005em;
}
.listing-card .ribbon {
  position: absolute;
  top: 8px; right: -4px;
  background: linear-gradient(135deg, var(--c-accent), #B68A4F);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.list-foot {
  flex: 0 0 auto;
  padding: 14px 22px;
  border-top: 1px solid var(--c-line);
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
}
.list-foot .more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--c-line);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-ink);
  cursor: pointer;
  text-decoration: none;
}
.list-foot .more:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* Empty state inside list */
.list-empty {
  padding: 80px 24px;
  text-align: center;
  color: var(--c-ink-faint);
  font-size: 14px;
  background: var(--c-bg-alt);
  flex: 1 1 auto;
}

/* ============================================================
   CONFIRM MODAL — 즐겨찾기 해제 등 사용자 확인이 필요한 액션에서
   화면 중앙에 뜨는 dim 레이어. body 에 .modal-open 을 붙여 배경
   스크롤 차단.
   ============================================================ */
.cm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 32, .55);
  display: grid;
  place-items: center;
  z-index: 100;
  animation: cm-fade .15s ease-out;
}
@keyframes cm-fade { from { opacity: 0 } to { opacity: 1 } }
.cm-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  width: min(360px, 92vw);
  padding: 22px 22px 18px;
  text-align: center;
}
.cm-card .cm-title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.cm-card .cm-body {
  font-size: 13.5px;
  color: var(--c-ink-muted);
  line-height: 1.5;
  margin-bottom: 18px;
}
.cm-card .cm-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.cm-card .cm-btn {
  flex: 1;
  height: 38px;
  border-radius: 4px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  border: 1px solid var(--c-line);
  background: #fff;
  color: var(--c-ink);
}
.cm-card .cm-btn:hover { background: var(--c-bg-alt); }
.cm-card .cm-btn.primary {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}
.cm-card .cm-btn.primary:hover { background: #0B2347; }
body.cm-open { overflow: hidden; }

/* ============================================================
   매물 상세 레이어 팝업 — 카드 클릭 시 풀페이지 대신 레이어로 띄움.
   백드롭 클릭/X/ESC 로 닫힘. 우측 상단에 X + 외부링크 버튼이 fixed.
   풀페이지 상세는 그대로 동일 템플릿 — 본문 영역(.detail-subnav,
   .detail-wrap)을 fetch 해서 모달 안에 주입.
   ============================================================ */
.item-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 32, 0.55);
  z-index: 100;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 24px;
  animation: cm-fade .15s ease-out;
}
/* 카드 + 사이드(X/외부링크) 를 한 row 로 배치 — 사이드는 카드 우상단 옆에
   align-self: flex-start 로 고정. row 자체를 backdrop 가운데 정렬해서 어떤
   뷰포트 폭에서도 사이드 버튼이 항상 카드 바로 옆에 붙는다. */
.item-modal-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  max-width: 1396px; /* 1340 카드 + 12 gap + 44 사이드 */
  height: 100%;
}
/* 모달 카드 — 라운드 모서리 + 그림자. 스크롤은 안쪽 .item-modal-scroll 이 담당해
   border-radius 가 스크롤바에 의해 깎이지 않도록 한다. */
.item-modal {
  background: #fff;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 1340px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  position: relative;
  display: flex;
  flex-direction: column;
}
.item-modal-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
.item-modal-scroll::-webkit-scrollbar { width: 10px; }
.item-modal-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 6px;
}
.item-modal-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.28);
}
/* 모달 안의 sub-nav 는 모달 스크롤 컨테이너 top 에 stick. */
.item-modal .detail-subnav { top: 0; }
/* 모달 안에선 우측 rail 의 sticky 기준점을 subnav 직하단으로. */
.item-modal .info-rail { top: 78px; }
/* 모달 안의 detail-wrap 좌우 패딩은 그대로 사용. */
.item-modal .detail-wrap { padding-bottom: 40px; }

/* 카드 우상단 옆 — flex row 안에서 align-self: flex-start 로 카드 top 에 정렬. */
.item-modal-side {
  flex: 0 0 auto;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.item-modal-side button,
.item-modal-side a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  display: grid;
  place-items: center;
  border: 1px solid var(--c-line);
  color: var(--c-ink-muted);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  text-decoration: none;
  transition: all .15s;
}
.item-modal-side button:hover,
.item-modal-side a:hover {
  color: var(--c-primary);
  border-color: var(--c-primary);
}
.item-modal-loading {
  padding: 120px 60px;
  text-align: center;
  color: var(--c-ink-faint);
  font-size: 14px;
}
.item-modal-error {
  padding: 80px 40px;
  text-align: center;
  color: var(--c-tag-new);
  font-size: 14px;
}
body.item-modal-open { overflow: hidden; }
/* 풀페이지의 detail-float 은 모달 안에 들어가도 의미 없으므로 숨김. */
body.item-modal-open .detail-float { display: none; }

@media (max-width: 720px) {
  .item-modal-backdrop { padding: 12px; }
  .item-modal-row { gap: 8px; }
  .item-modal-side button,
  .item-modal-side a { width: 36px; height: 36px; }
}

/* ============================================================
   문의하기 레이어 팝업 — 매물 카드/상세의 "매물 문의하기" 버튼이 열어주는
   모달. item-modal 위에서도 동작 (z-index 가 item-modal-side(102) 보다 위).
   백드롭은 반투명 다크 — item-modal 위에서 열릴 때 자연스럽게 딤 처리됨.
   ============================================================ */
.iqp-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 32, 0.55);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: cm-fade .15s ease-out;
}
.iqp-card {
  background: #fff;
  width: 100%;
  max-width: 480px;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  padding: 22px 24px 24px;
  position: relative;
}
.iqp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.iqp-head .iqp-ic {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--c-ink);
}
.iqp-head h3 {
  flex: 1 1 auto;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  margin: 0;
}
.iqp-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  color: var(--c-ink-faint);
  cursor: pointer;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.iqp-close:hover { color: var(--c-ink); background: var(--c-bg-alt); }

.iqp-form { display: flex; flex-direction: column; gap: 10px; }
.iqp-field input,
.iqp-field textarea {
  width: 100%;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: var(--font-sans);
  color: var(--c-ink);
  outline: none;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  resize: vertical;
}
.iqp-field textarea { min-height: 140px; line-height: 1.55; }
.iqp-field input::placeholder,
.iqp-field textarea::placeholder { color: var(--c-ink-faint); }
.iqp-field input:focus,
.iqp-field textarea:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(20,54,107,.10);
}

.iqp-agree-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.iqp-agree {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-ink);
  cursor: pointer;
  letter-spacing: -0.005em;
}
.iqp-agree input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--c-primary);
  cursor: pointer;
}
.iqp-policy-toggle {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-ink-muted);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.iqp-policy-toggle:hover { border-color: var(--c-primary); color: var(--c-primary); }

.iqp-error {
  background: #FDECEC;
  border: 1px solid #F5C6CB;
  color: #A02020;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}

.iqp-submit {
  margin-top: 6px;
  background: var(--c-primary);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.005em;
  padding: 14px 16px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background .15s;
}
.iqp-submit:hover { background: var(--c-primary-dark); }
.iqp-submit:disabled { background: var(--c-ink-faint); cursor: default; }

.iqp-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 8px 8px;
  text-align: center;
}
.iqp-success-ic {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #E6F4EA;
  color: #2C7A3D;
  display: grid;
  place-items: center;
}
.iqp-success-msg {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.55;
  letter-spacing: -0.005em;
}

body.iqp-open { overflow: hidden; }

/* class rules override [hidden] 의 기본 display:none — 명시 override. */
.iqp-card [hidden] { display: none !important; }

/* ============================================================
   개인정보 수집 안내 팝업 — inquiry 팝업 위에 한 단계 더 쌓이는 modal.
   ============================================================ */
.policy-popup-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 32, 0.55);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: cm-fade .15s ease-out;
}
.policy-popup {
  background: #fff;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 48px);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--c-line);
}
.pp-head h3 {
  flex: 1 1 auto;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  margin: 0;
}
.pp-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  color: var(--c-ink-faint);
  cursor: pointer;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.pp-close:hover { color: var(--c-ink); background: var(--c-bg-alt); }
.pp-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 22px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--c-ink);
  letter-spacing: -0.005em;
}
.pp-body p { margin: 0 0 12px; }
.pp-body ul {
  margin: 0 0 16px;
  padding-left: 18px;
  list-style: disc;
}
.pp-body ul li { margin-bottom: 4px; }
.pp-section-title {
  font-weight: 700 !important;
  color: var(--c-ink);
  margin-top: 8px !important;
  font-size: 15px;
}
.pp-sub-title {
  font-weight: 700 !important;
  color: var(--c-ink);
  margin-top: 14px !important;
  margin-bottom: 6px !important;
  font-size: 13.5px;
}
.pp-foot {
  padding: 14px 22px 18px;
  border-top: 1px solid var(--c-line-soft);
}
.pp-confirm {
  width: 100%;
  background: var(--c-primary);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.005em;
  padding: 14px 16px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background .15s;
}
.pp-confirm:hover { background: var(--c-primary-dark); }

@media (max-width: 540px) {
  .policy-popup-backdrop { padding: 12px; }
  .policy-popup { max-height: calc(100vh - 24px); }
  .pp-head { padding: 14px 18px 12px; }
  .pp-body { padding: 14px 18px; font-size: 13.5px; }
  .pp-foot { padding: 12px 18px 14px; }
}

@media (max-width: 540px) {
  .iqp-backdrop { padding: 12px; align-items: flex-start; padding-top: 60px; }
  .iqp-card { padding: 18px 18px 20px; border-radius: 8px; }
  .iqp-head h3 { font-size: 18px; }
}

/* ============================================================
   매물상세 (Property Detail) — 디자인 핸드오프 detail.css 매핑
   ============================================================ */

.detail-wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 0 60px;
  width: 100%;
}

/* SUB-NAV (sticky) — 헤더 아래 고정 */
.detail-subnav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
  border-bottom: 1px solid var(--c-line);
}
.detail-subnav-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
  height: 62px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dsn-pid {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-primary);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 3px;
  letter-spacing: 0.01em;
  margin-right: 12px;
}
.dsn-pid svg { color: var(--c-accent); }
.dsn-links {
  display: flex;
  gap: 0;
  flex: 1;
}
.dsn-links a {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--c-ink-muted);
  padding: 8px 16px;
  position: relative;
  transition: color .15s;
  letter-spacing: -0.005em;
  text-decoration: none;
}
.dsn-links a:hover,
.dsn-links a.active { color: var(--c-primary); }
.dsn-links a.active::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px;
  bottom: -22px;
  height: 3px;
  background: var(--c-primary);
}
.dsn-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.dsn-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--c-line);
  border-radius: 3px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-ink-muted);
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: all .15s;
}
.dsn-tool:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* MAIN 2-COL GRID */
.detail-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 18px;
  align-items: start;
  margin-top: 22px;
  padding: 0 20px;
}
.detail-col { min-width: 0; }
.info-rail {
  position: sticky;
  top: 78px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* GALLERY */
.gallery {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #0F1A2E;
  aspect-ratio: 4 / 3;
}
.gallery .slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity .4s;
}
.gallery .slide.active { opacity: 1; }
.gallery .watermark {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: rgba(255,255,255,.28);
  pointer-events: none;
  font-family: var(--font-serif);
  letter-spacing: 0.18em;
  font-weight: 600;
}
.gallery .watermark .wm-mark { font-size: 56px; line-height: 1; }
.gallery .watermark .wm-sub  { font-size: 13px; margin-top: 6px; font-family: var(--font-sans); letter-spacing: 0.06em; font-weight: 600; }
.gallery .gnav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  color: #fff;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.28);
  cursor: pointer;
  transition: background .2s;
  z-index: 3;
}
.gallery .gnav:hover { background: rgba(255,255,255,.35); }
.gallery .gnav.prev { left: 16px; }
.gallery .gnav.next { right: 16px; }
.gallery .gcounter {
  position: absolute;
  bottom: 14px; right: 14px;
  background: rgba(11,35,71,.75);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  z-index: 3;
}
.gallery .gbadges {
  position: absolute;
  top: 14px; left: 14px;
  display: flex; gap: 6px;
  z-index: 3;
}
.gbadge { font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 3px; letter-spacing: 0.01em; }
.gbadge.rec { background: var(--c-accent); color: #1A1308; }
.gbadge.id  { background: rgba(11,35,71,.85); color: #fff; }

.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.gallery-thumbs .thumb {
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  border-radius: 3px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .15s, transform .15s;
}
.gallery-thumbs .thumb:hover { transform: translateY(-1px); }
.gallery-thumbs .thumb.active { border-color: var(--c-primary); }
.gallery-thumbs .thumb.more {
  background: var(--c-bg-sunk);
  display: grid;
  place-items: center;
  color: var(--c-ink-muted);
  font-weight: 700;
  font-size: 13px;
}

/* INFO CARD */
.info-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  padding: 22px 24px;
}
.info-card .tags { display: flex; gap: 6px; margin-bottom: 12px; }
.info-tag { font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 2px; letter-spacing: 0.01em; }
.info-tag.rec { background: var(--c-accent); color: #1A1308; }
.info-tag.id  { background: var(--c-bg-sunk); color: var(--c-ink-muted); }
.info-card h1 {
  font-family: var(--font-sans);
  font-size: 21px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -0.015em;
  margin: 0 0 14px 0;
  line-height: 1.4;
}

.price-stack {
  border-top: 1px solid var(--c-line-soft);
  border-bottom: 1px solid var(--c-line-soft);
  padding: 14px 0;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price-row .lbl { font-size: 13px; font-weight: 700; color: var(--c-tag-monthly); letter-spacing: -0.005em; min-width: 42px; }
.price-row .lbl.deposit,
.price-row .lbl.sell,
.price-row .lbl.inst { color: var(--c-primary); }
.price-row .lbl.jeonse { color: var(--c-tag-jeonse); }
.price-row .lbl.fee { color: var(--c-ink-faint); }
.price-row .val { font-size: 22px; font-weight: 700; color: var(--c-ink); letter-spacing: -0.02em; }
.price-row .val.small { font-size: 15px; }
.price-row .or {
  font-size: 11.5px; font-weight: 600;
  color: var(--c-ink-faint);
  padding: 2px 8px;
  background: var(--c-bg-alt);
  border-radius: 3px;
  margin-left: 0;
}

.info-loc {
  font-size: 14px;
  color: var(--c-ink-muted);
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 14px;
  letter-spacing: -0.005em;
}
.info-loc::before { content: "📍"; font-size: 12px; filter: grayscale(.3); }

.spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  padding: 14px 0;
  border-top: 1px solid var(--c-line-soft);
  border-bottom: 1px solid var(--c-line-soft);
}
.spec-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px;
  color: var(--c-ink);
  letter-spacing: -0.005em;
}
.spec-item .ico {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--c-bg-sunk);
  color: var(--c-primary);
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.spec-item .v { font-weight: 600; }

.info-actions {
  display: flex; gap: 8px;
  margin-top: 14px;
  align-items: center;
}
.info-actions .primary {
  flex: 1;
  background: var(--c-primary);
  color: #fff;
  font-weight: 700;
  font-size: 14.5px;
  padding: 12px 14px;
  border-radius: 4px;
  letter-spacing: 0.01em;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.info-actions .primary:hover { background: var(--c-primary-dark); }
.info-actions .icon-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  display: grid; place-items: center;
  color: var(--c-ink-muted);
  background: #fff;
  cursor: pointer;
  transition: all .15s;
}
.info-actions .icon-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.info-actions .icon-btn.heart.on { color: var(--c-heart); border-color: var(--c-heart); }
.info-actions .icon-btn.heart.on svg path { fill: currentColor; }

/* AGENT CARD */
.agent-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  padding: 18px 22px;
}
.agent-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.agent-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-soft));
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  flex: 0 0 auto;
}
.agent-meta .role {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--c-ink-faint);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.agent-meta .name {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
.agent-meta .name .title { font-size: 12.5px; font-weight: 500; color: var(--c-ink-muted); margin-left: 6px; }
.agent-phones {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--c-bg-alt);
  border-radius: 4px;
}
.agent-phone {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--c-primary);
  letter-spacing: 0.01em;
  text-decoration: none;
}
.agent-phone .ph-lbl {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c-ink-faint);
  text-transform: uppercase;
  background: #fff;
  padding: 3px 8px;
  border-radius: 3px;
  min-width: 38px;
  text-align: center;
}
.agent-phone:hover { color: var(--c-primary-dark); }

.office-block { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--c-line-soft); }
.office-name { font-size: 14px; font-weight: 700; color: var(--c-ink); margin-bottom: 8px; letter-spacing: -0.005em; }
.office-rows { display: flex; flex-direction: column; gap: 4px; }
.office-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 8px;
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: -0.005em;
}
.office-row .k { color: var(--c-ink-faint); font-weight: 600; }
.office-row .v { color: var(--c-ink); }

/* SECTIONS */
.detail-section {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  margin-top: 18px;
  overflow: hidden;
  scroll-margin-top: 78px;
}
.detail-section .ds-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--c-line);
  background: #fff;
  cursor: pointer;
  user-select: none;
}
.detail-section .ds-head h2 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  margin: 0;
  display: flex; align-items: center; gap: 10px;
}
.detail-section .ds-head h2 .ico {
  width: 26px; height: 26px;
  border-radius: 4px;
  background: var(--c-primary);
  color: #fff;
  display: grid; place-items: center;
}
.detail-section .ds-toggle {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--c-ink-faint);
  background: none;
  border: none;
  cursor: pointer;
  transition: background .15s, color .15s, transform .15s;
}
.detail-section .ds-toggle:hover { background: var(--c-bg-alt); color: var(--c-primary); }
.detail-section.collapsed .ds-toggle { transform: rotate(180deg); }
.detail-section.collapsed .ds-body { display: none; }
.detail-section .ds-body { padding: 0; }

/* KV TABLE */
.kv-table {
  display: grid;
  grid-template-columns: 120px 1fr 120px 1fr;
}
.kv-table > div {
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-line-soft);
  font-size: 14px;
  letter-spacing: -0.005em;
  line-height: 1.55;
  display: flex;
  align-items: center;
  gap: 8px;
}
.kv-table .k {
  background: var(--c-bg-alt);
  color: var(--c-ink-muted);
  font-weight: 600;
  border-right: 1px solid var(--c-line-soft);
}
.kv-table .v { color: var(--c-ink); font-weight: 500; }
.kv-table .v.bold { font-weight: 700; }
.kv-table .v.muted { color: var(--c-ink-muted); }

/* DESCRIPTION */
.desc-body {
  padding: 18px 24px;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--c-ink);
  letter-spacing: -0.005em;
}
.desc-body h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-primary);
  margin: 22px 0 10px 0;
  letter-spacing: -0.005em;
  display: flex; align-items: center; gap: 8px;
}
.desc-body h3::before { content: ""; width: 4px; height: 15px; background: var(--c-primary); border-radius: 2px; }
.desc-body h3:first-child { margin-top: 0; }
.desc-body p { margin: 0 0 8px 0; }
.desc-body ul { padding-left: 0; margin: 0 0 8px 0; }
.desc-body ul li {
  position: relative;
  padding-left: 14px;
  margin-bottom: 2px;
  list-style: none;
}
.desc-body ul li::before {
  content: "·";
  position: absolute;
  left: 4px; top: -2px;
  color: var(--c-ink-faint);
  font-weight: 700;
}
.desc-body strong { font-weight: 700; color: var(--c-ink); }

/* MAP */
.map-wrap { padding: 18px 22px 12px; }
.map-canvas {
  position: relative;
  height: 380px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--c-line);
  background: #DCEAF5;
}
.map-marker {
  position: absolute;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: rgba(20,54,107,.22);
  border: 2px solid rgba(20,54,107,.5);
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  animation: detailPulseRing 2.4s ease-out infinite;
}
.map-marker::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  background: var(--c-primary);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
@keyframes detailPulseRing {
  0% { box-shadow: 0 0 0 0 rgba(20,54,107,.35); }
  100% { box-shadow: 0 0 0 24px rgba(20,54,107,0); }
}
.map-credit {
  position: absolute;
  bottom: 6px; left: 8px;
  font-size: 11px;
  color: rgba(15,26,46,.6);
  font-weight: 600;
}

/* SIMILAR */
.similar-wrap { padding: 18px 22px; }
.similar-scroll {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* FLOATING TOOLS */
.detail-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 35;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.detail-float .df-btn {
  width: 52px;
  border-radius: 12px;
  padding: 9px 4px;
  background: #fff;
  border: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--c-ink-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: var(--sh-card);
  cursor: pointer;
  transition: all .15s;
}
.detail-float .df-btn:hover {
  color: var(--c-primary);
  border-color: var(--c-primary);
  transform: translateY(-1px);
}
.detail-float .df-btn .ico { font-size: 16px; line-height: 1; }

/* RESPONSIVE */
@media (max-width: 1240px) {
  .detail-main { grid-template-columns: 1fr; }
  .info-rail { position: static; }
  .kv-table { grid-template-columns: 110px 1fr; }
  .similar-scroll { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .detail-subnav-inner { overflow-x: auto; gap: 4px; }
  .dsn-links a { padding: 8px 10px; font-size: 13px; }
  .similar-scroll { grid-template-columns: 1fr; }
}

/* ===== 매물 의뢰하기 — nav dropdown + 폼 탭 ===== */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
}
.nav-row .nav-dropdown > a,
.top-nav .nav-dropdown > a {
  display: inline-flex;
  align-items: center;
  height: 100%;
}
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 160px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 50;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
  display: block;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 500;
  color: var(--c-ink);
  white-space: nowrap;
  height: auto;
}
.nav-dropdown-menu a::before,
.nav-dropdown-menu a::after { content: none !important; }
.nav-dropdown-menu a:hover {
  background: var(--c-bg);
  color: var(--c-primary);
}

/* 매물의뢰 — 팔아요/구해요 탭 */
.listing-request-tabs {
  display: flex;
  gap: 0;
  margin: 0 0 20px;
  border-bottom: 1px solid var(--c-line);
}
.listing-request-tabs a {
  flex: 1;
  max-width: 200px;
  text-align: center;
  padding: 14px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--c-ink-faint);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.listing-request-tabs a:hover { color: var(--c-ink); }
.listing-request-tabs a.on {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
}

/* content-form 보강 — select, tel/email, 2열 row, 성공 메시지 */
.content-form .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.content-form .field-row .field { margin-bottom: 0; }
.content-form input[type="tel"],
.content-form input[type="email"],
.content-form input[type="number"],
.content-form select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: 15px;
  background: #fff;
  color: var(--c-ink);
}
.content-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.content-success {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #166534;
  padding: 12px 16px;
  border-radius: var(--r-md);
  font-size: 14px;
  margin: 0 0 20px;
}

@media (max-width: 720px) {
  .content-form .field-row { grid-template-columns: 1fr; gap: 0; }
  .content-form .field-row .field { margin-bottom: 20px; }
  .listing-request-tabs a { max-width: none; font-size: 15px; padding: 12px 0; }
}

/* 매물 의뢰 — region cascade (시/도→시/군/구→동) */
.region-cascade {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.region-cascade select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: 15px;
  background: #fff;
  color: var(--c-ink);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.region-cascade select:disabled {
  background-color: var(--c-bg);
  color: var(--c-ink-faint);
  cursor: not-allowed;
}
@media (max-width: 720px) {
  .region-cascade { grid-template-columns: 1fr; }
}

/* ===== 매물 의뢰 — 컴팩트 폼 (lr-page 한정) ===== */
.lr-page { padding: 36px 0 64px; }
.lr-page .container.content-narrow { max-width: 680px; }
.lr-page .section-title-wrap { margin-bottom: 14px; }
.lr-page .section-title { font-size: 22px; }
.lr-page .content-sub { margin: 0 0 18px; font-size: 13.5px; }

/* 탭 — 좁고 낮게 */
.lr-page .listing-request-tabs { margin: 0 0 14px; }
.lr-page .listing-request-tabs a {
  max-width: 140px;
  padding: 10px 0;
  font-size: 14px;
}

/* 카드 패딩 컴팩트 */
.lr-page .content-form { padding: 20px 24px; }

/* 필드 간격 / 라벨 / 인풋 모두 한 단계씩 줄임 */
.lr-page .content-form .field { margin-bottom: 12px; }
.lr-page .content-form .field:last-of-type { margin-bottom: 16px; }
.lr-page .content-form label {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
}
.lr-page .content-form input[type="text"],
.lr-page .content-form input[type="tel"],
.lr-page .content-form input[type="email"],
.lr-page .content-form input[type="password"],
.lr-page .content-form input[type="number"],
.lr-page .content-form select,
.lr-page .content-form textarea {
  padding: 7px 11px;
  font-size: 13.5px;
  border-radius: 6px;
  line-height: 1.4;
}
.lr-page .content-form textarea { min-height: 96px; }
.lr-page .content-form .field-help {
  margin-top: 4px;
  font-size: 11.5px;
}

/* 2열 row 간격 줄임 */
.lr-page .content-form .field-row { gap: 12px; margin-bottom: 12px; }

/* region cascade — 3 셀렉트도 동일 톤 */
.lr-page .region-cascade { gap: 8px; }
.lr-page .region-cascade select {
  padding: 7px 11px;
  padding-right: 28px;
  font-size: 13.5px;
  border-radius: 6px;
  background-position: right 10px center;
}

/* 푸터 버튼 컴팩트 */
.lr-page .form-actions { gap: 8px; }
.lr-page .form-actions .cancel,
.lr-page .form-actions button {
  padding: 8px 18px;
  font-size: 13.5px;
}

/* 성공/에러 박스 */
.lr-page .content-success,
.lr-page .content-error {
  padding: 8px 12px;
  font-size: 13px;
  margin-bottom: 12px;
}

@media (max-width: 720px) {
  .lr-page .content-form { padding: 16px 14px; }
}

/* ============================================================
   MOBILE SHELL — viewport ≤ 720px 에서만 활성화.
   body.mobile-shell 가 붙은 페이지(home, about, ...) 에서 데스크탑
   chrome(site-header/nav-row/site-footer/float-side) 과 데스크탑 본문
   섹션(hero/search-bar-wrap/page-grid/partner-strip-wrap/content-page) 을
   숨기고, m-root 안의 .m- / .ma- 컴포넌트를 노출한다.
   ============================================================ */

/* 데스크탑 기본: 모바일 트리는 숨김 */
.m-root { display: none; }

@media (max-width: 720px) {
  /* body min-width: 1680px 등의 데스크탑 제약을 해제 */
  html, body { min-width: 0; }
  body { max-width: 100%; }
  body.mobile-shell { font-size: 14px; line-height: 1.55; padding-bottom: calc(64px + env(safe-area-inset-bottom)); display: block; }
  /* 매물검색(/items) 페이지만 flex column + display:contents 로 평탄화해서
     m-header → filter-bar → 카드 순서로 재배치. 다른 모바일 페이지(홈/상세/Q&A/about 등)
     에는 적용 X — order:0 으로 떨어진 형제들이 m-header(order:1)보다 앞에 와서
     로고가 화면 밑으로 가는 회귀 방지. */
  body.mobile-shell.page-items { display: flex; flex-direction: column; }
  body.mobile-shell > .site-header,
  body.mobile-shell > .nav-row,
  body.mobile-shell > .site-footer,
  body.mobile-shell > .float-side,
  body.mobile-shell .hero,
  body.mobile-shell .search-bar-wrap,
  body.mobile-shell .page-grid,
  body.mobile-shell .partner-strip-wrap,
  body.mobile-shell > .detail-subnav,
  body.mobile-shell > .detail-wrap,
  body.mobile-shell > .detail-float,
  body.mobile-shell > .content-page { display: none !important; }
  /* main / filter-bar 는 모바일에서도 노출 — 안의 데스크탑 본문(page-grid 등)만
     별도 룰로 숨김. filter-bar 는 가로 스크롤 캐러셀로 보여줌 (아래 .fb-row 룰). */
  body.mobile-shell > main { display: block; padding: 0; }
  body.mobile-shell .m-root { display: block; }

  /* /items 한정: m-root + 모바일 리스트 wrapper 를 평탄화하고 order 로 헤더→필터바→카드 재배치.
     data-mobile-list 는 비동기 필터 갱신용 swap 컨테이너 — display:contents 로 layout 영향 X. */
  body.mobile-shell.page-items .m-root,
  body.mobile-shell.page-items [data-mobile-list] { display: contents; }
  body.mobile-shell.page-items .m-header { order: 1; }
  body.mobile-shell.page-items > main { order: 2; }
  body.mobile-shell.page-items .il-list,
  body.mobile-shell.page-items .il-more,
  body.mobile-shell.page-items .mc-empty { order: 3; }
  body.mobile-shell.page-items .m-footer { order: 4; }
  body.mobile-shell.page-items .m-tabbar { order: 5; }
  body.mobile-shell.page-items .m-drawer-bg,
  body.mobile-shell.page-items .m-drawer { order: 99; }

  /* ---- FILTER-BAR (모바일): PC 그대로 가로 스크롤 한 줄로 노출 ---- */
  body.mobile-shell .filter-bar {
    width: 100%;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid var(--c-line);
    position: sticky; top: 64px; z-index: 25;
  }
  body.mobile-shell .filter-bar > .fb-row,
  body.mobile-shell .filter-bar.is-list-view > .fb-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    margin: 0;
    padding: 8px 12px;
    gap: 6px;
    align-items: center;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.mobile-shell .filter-bar > .fb-row::-webkit-scrollbar { display: none; }
  body.mobile-shell .filter-bar .fb-left,
  body.mobile-shell .filter-bar .fb-right {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 0;
    border: none;
    align-items: center;
    flex-shrink: 0;
  }
  body.mobile-shell .filter-bar .fb-pill-wrap,
  body.mobile-shell .filter-bar .fb-pill,
  body.mobile-shell .filter-bar .fb-all,
  body.mobile-shell .filter-bar .fb-search,
  body.mobile-shell .filter-bar .fb-reset,
  body.mobile-shell .filter-bar .sort-btn { flex-shrink: 0; }

  /* 드롭다운/panel — 모바일 viewport 안에 들어오게 폭 제한 */
  body.mobile-shell .filter-bar .fb-pill-menu.grid,
  body.mobile-shell .filter-bar .fb-pill-menu.panel {
    width: calc(100vw - 24px);
    min-width: 0;
    max-width: 360px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    left: 0;
  }
  body.mobile-shell .filter-bar .fb-pill-menu {
    position: fixed;
    top: auto;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }
  body.mobile-shell .site-header::after,
  body.mobile-shell .nav-row::after { display: none; }

  /* ---- HEADER ---- */
  .m-header {
    position: sticky; top: 0; z-index: 30; background: #fff;
    border-bottom: 1px solid var(--c-line);
    height: 64px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
  }
  .m-header .m-logo .word { display: flex; flex-direction: column; line-height: 1; gap: 3px; }
  .m-header .m-logo .word strong { font-size: 17px; letter-spacing: 0.2em; font-weight: 700; color: var(--c-ink); }
  .m-header .m-logo .word span { font-size: 11px; color: var(--c-ink-muted); letter-spacing: 0.04em; font-weight: 500; }
  .m-icon-btn { width: 44px; height: 44px; display: grid; place-items: center; color: var(--c-ink); border-radius: 8px; }
  .m-icon-btn:active { background: var(--c-bg-alt); }
  .m-logo { display: flex; align-items: center; gap: 8px; justify-content: center; }
  .m-logo .mark {
    width: 34px; height: 34px; display: grid; place-items: center;
    background: var(--c-primary); color: #fff; border-radius: 2px;
    font-family: var(--font-serif); font-size: 20px; font-weight: 600; flex: 0 0 auto;
  }

  /* ---- DRAWER ---- */
  .m-drawer-bg {
    position: fixed; inset: 0; z-index: 60; background: rgba(15,26,46,0.5);
    opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  .m-drawer-bg.open { opacity: 1; pointer-events: auto; }
  .m-drawer {
    position: fixed; top: 0; left: 0; bottom: 0; width: 84%; max-width: 320px; z-index: 61;
    background: #fff; transform: translateX(-100%);
    transition: transform .26s cubic-bezier(.4,0,.2,1);
    display: flex; flex-direction: column;
  }
  .m-drawer.open { transform: translateX(0); }
  .m-drawer-head {
    height: 56px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--c-line);
  }
  .m-drawer-head .m-logo .word strong { font-size: 15px; }
  .m-drawer-menu { padding: 8px 0; flex: 1; overflow-y: auto; }
  .m-drawer-menu > a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; font-size: 15px; font-weight: 600; color: var(--c-ink);
  }
  .m-drawer-menu > a:active { background: var(--c-bg-alt); }
  .m-drawer-menu > a .arrow { color: var(--c-ink-faint); font-size: 18px; }
  .m-drawer-sub { padding: 6px 0 6px 12px; background: var(--c-bg-alt); }
  .m-drawer-sub a { padding: 10px 20px; font-size: 14px; font-weight: 500; color: var(--c-ink-muted); display: block; }
  .m-drawer-foot { padding: 16px 20px; border-top: 1px solid var(--c-line); display: flex; flex-direction: column; gap: 10px; }
  .m-drawer-foot .cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; border-radius: 8px; font-weight: 700; font-size: 14px;
  }
  .m-drawer-foot .cta.call { background: var(--c-primary); color: #fff; }
  .m-drawer-foot .cta.consult { background: var(--c-accent); color: #1A1308; }
  .m-drawer-sns {
    display: flex; justify-content: space-around; align-items: center; gap: 8px;
    margin: 0 0 14px; padding-bottom: 14px;
    border-bottom: 1px solid var(--c-line);
  }
  .dsns {
    width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
    background: #fff; overflow: hidden;
    box-shadow: 0 2px 6px rgba(15,26,46,0.12);
  }
  .dsns img {
    width: 28px; height: 28px; object-fit: contain;
    display: block;
  }

  /* ---- SEARCH ---- */
  .m-search { padding: 14px 16px; background: #fff; border-bottom: 1px solid var(--c-line-soft); }
  .m-search-bar {
    display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 8px 0 18px;
    border: 1.5px solid var(--c-primary); border-radius: 8px; background: #fff;
  }
  .m-search-bar input { flex: 1; border: none; outline: none; font-size: 14px; background: transparent; }
  .m-search-bar input::placeholder { color: var(--c-ink-faint); }
  .m-search-bar .submit {
    width: 36px; height: 36px; border-radius: 6px;
    background: transparent; color: var(--c-primary);
    display: grid; place-items: center;
  }

  /* ---- FEATURED CAROUSEL ---- */
  .m-featured { background: #fff; padding: 0 0 14px; }
  .m-fc-stage { position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden; background: #0F1A2E; }
  .m-fc-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: background-image .35s ease; }
  .m-fc-stage::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg,rgba(11,35,71,0) 38%,rgba(11,35,71,.78) 100%);
    pointer-events: none;
  }
  .m-fc-counter {
    position: absolute; top: 14px; right: 14px; z-index: 3;
    background: rgba(11,35,71,.75); color: #fff;
    font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
    letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
  }
  .m-fc-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 36px; height: 36px; border-radius: 6px;
    background: rgba(15,26,46,0.45); color: #fff;
    border: 1px solid rgba(255,255,255,0.4);
    display: grid; place-items: center; backdrop-filter: blur(4px);
  }
  .m-fc-nav.prev { left: 10px; }
  .m-fc-nav.next { right: 10px; }
  .m-fc-nav:active { background: rgba(15,26,46,0.7); }
  .m-fc-actions { position: absolute; bottom: 16px; right: 14px; z-index: 3; display: flex; gap: 8px; }
  .m-fc-actions a,
  .m-fc-actions button {
    width: 38px; height: 38px; border-radius: 6px;
    background: rgba(255,255,255,0.92); color: var(--c-ink);
    display: grid; place-items: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    border: none; padding: 0; cursor: pointer;
  }
  .m-fc-actions .heart.on { color: var(--c-heart); }
  .m-fc-actions .heart.on svg { fill: currentColor; }
  .m-fc-overlay {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 14px 16px 18px; color: #fff;
  }
  .m-fc-overlay .m-fc-meta {
    font-size: 12.5px; color: #fff;
    margin-bottom: 6px; letter-spacing: -0.005em; font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,0.45);
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  }
  .m-fc-overlay .m-fc-title {
    display: block;
    font-size: 18px; font-weight: 700; margin: 0 0 10px; letter-spacing: -0.015em; line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0,0,0,0.35);
    padding-right: 16px; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .m-fc-overlay .m-fc-tagline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .m-fc-overlay .m-fc-tag {
    display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 3px; letter-spacing: -0.005em;
  }
  .m-fc-overlay .m-fc-tag.sale { background: #FFF1E5; color: var(--c-tag-monthly); border: 1px solid #FFD9B5; }
  .m-fc-overlay .m-fc-tag.jeonse { background: #E5F3EC; color: var(--c-tag-jeonse); border: 1px solid #C2E0CF; }
  .m-fc-overlay .m-fc-tag.monthly { background: #FCEAEA; color: #B23030; border: 1px solid #F1C6C6; }
  .m-fc-overlay .m-fc-tag.inst { background: #E8EEFC; color: var(--c-primary); border: 1px solid #C8D3EE; }
  .m-fc-overlay .m-fc-price {
    font-size: 18px; font-weight: 800; letter-spacing: -0.02em;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  }
  .m-fc-strip {
    display: flex; gap: 6px;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0 4px;
    padding-left: calc(100vw / 3 + 2px);
    padding-right: calc(100vw / 3 + 2px);
  }
  .m-fc-strip::-webkit-scrollbar { display: none; }
  .m-fc-strip .m-fc-thumb {
    flex: 0 0 calc((100vw - 12px) / 3);
    aspect-ratio: 4/3; border-radius: 5px;
    background-size: cover; background-position: center;
    border: 2px solid transparent; padding: 0; cursor: pointer;
    scroll-snap-align: center;
    transition: border-color .2s;
    background-color: var(--c-bg-sunk);
  }
  .m-fc-strip .m-fc-thumb.active { border-color: var(--c-primary); }

  /* ---- CONSULT FORM ---- */
  .m-consult-form {
    margin: 18px 16px 6px; padding: 14px 16px 16px;
    border: 1px solid var(--c-line); border-radius: 10px; background: #fff;
  }
  .m-consult-form h3 {
    font-size: 16px; font-weight: 700; color: var(--c-ink); margin: 0 0 2px; letter-spacing: -0.01em;
    position: relative; padding-left: 12px;
  }
  .m-consult-form h3::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 14px; background: var(--c-primary); border-radius: 1px;
  }
  .m-cf-sub { font-size: 12.5px; color: var(--c-ink-muted); margin: 0 0 10px; padding-left: 12px; }
  .m-cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; }
  .m-cf-grid label, .m-cf-full { display: block; margin-bottom: 6px; }
  .m-cf-label {
    display: block; font-size: 12px; font-weight: 700; color: var(--c-ink); margin-bottom: 3px;
    letter-spacing: -0.005em;
  }
  .m-consult-form input,
  .m-consult-form textarea {
    width: 100%; border: 1px solid var(--c-line); border-radius: 4px;
    padding: 8px 10px; font-size: 13px; background: #fff; outline: none;
    transition: border-color .12s;
  }
  .m-consult-form input:focus,
  .m-consult-form textarea:focus { border-color: var(--c-primary); }
  .m-consult-form textarea { resize: none; min-height: 52px; }
  .m-cf-agree {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--c-ink-muted);
    margin: 4px 0 10px; line-height: 1.4; width: 100%;
  }
  .m-cf-agree input { accent-color: var(--c-primary); margin: 0; flex: 0 0 auto; width: 16px; height: 16px; }
  .m-cf-agree > span { flex: 1; min-width: 0; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }
  .m-cf-agree a { text-decoration: underline; white-space: nowrap; color: var(--c-ink-muted); }
  .m-cf-submit {
    width: 100%; background: var(--c-primary); color: #fff;
    padding: 11px; font-weight: 700; font-size: 14px; border-radius: 4px;
    letter-spacing: 0.02em;
  }
  .m-cf-submit:active { background: var(--c-primary-dark); }

  /* ---- SECTION ---- */
  .m-section { padding: 28px 0 20px; background: #fff; }
  .m-section.alt { background: var(--c-bg-alt); }
  .m-section-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px; margin-bottom: 14px; gap: 10px;
  }
  .m-section-head > div:first-child {
    display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1;
  }
  .m-section-head h2 {
    font-size: 18px; font-weight: 700; letter-spacing: -0.015em; margin: 0; color: var(--c-ink);
    flex: 0 0 auto;
  }
  .m-section-head .sub {
    font-size: 12px; color: var(--c-ink-faint); margin-top: 0; letter-spacing: -0.005em;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .m-section-head .more {
    font-size: 12.5px; font-weight: 600; color: var(--c-primary);
    display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto;
  }

  /* ---- TYPES STRIP ---- */
  .m-types { display: flex; gap: 10px; overflow-x: auto; padding: 0 16px 6px; scrollbar-width: none; scroll-snap-type: x mandatory; }
  .m-types::-webkit-scrollbar { display: none; }
  .m-type-card {
    position: relative; flex: 0 0 130px; aspect-ratio: 1/1; border-radius: 6px; overflow: hidden;
    background-size: cover; background-position: center; scroll-snap-align: start;
    display: block;
  }
  .m-type-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(11,35,71,0) 40%,rgba(11,35,71,.85) 100%); }
  .m-type-card .count {
    position: absolute; top: 8px; right: 8px; z-index: 2; background: var(--c-primary); color: #fff;
    font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 2px; min-width: 22px; text-align: center;
  }
  .m-type-card .label { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; color: #fff; z-index: 2; }
  .m-type-card .label .kr { display: block; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
  .m-type-card .label .en { display: block; font-size: 9px; letter-spacing: 0.16em; color: rgba(255,255,255,.75); margin-top: 2px; }

  /* ---- COMPLEX STRIP ---- */
  .m-complex { display: flex; gap: 10px; overflow-x: auto; padding: 0 16px 6px; scrollbar-width: none; scroll-snap-type: x mandatory; background: transparent; }
  .m-complex::-webkit-scrollbar { display: none; }
  .m-complex-card {
    flex: 0 0 150px; border-radius: 6px; overflow: hidden; background: #fff;
    border: 1px solid var(--c-line); scroll-snap-align: start; display: block;
  }
  .m-complex-card .thumb { aspect-ratio: 4/3; background-size: cover; background-position: center; background-color: var(--c-bg-sunk); position: relative; }
  .m-complex-card .thumb .count {
    position: absolute; top: 6px; right: 6px; background: var(--c-primary); color: #fff;
    font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 2px; min-width: 20px; text-align: center;
  }
  .m-complex-card .body { padding: 10px 12px 12px; text-align: center; }
  .m-complex-card .body .name { font-size: 14px; font-weight: 700; color: var(--c-ink); letter-spacing: -0.01em; }

  /* ---- TABS ---- */
  .m-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 0 16px 12px; scrollbar-width: none; }
  .m-tabs::-webkit-scrollbar { display: none; }
  .m-tab {
    flex: 0 0 auto; padding: 7px 14px; font-size: 13px; font-weight: 500; color: var(--c-ink-muted);
    border: 1px solid var(--c-line); border-radius: 999px; background: #fff; white-space: nowrap;
  }
  .m-tab.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); font-weight: 600; }

  /* ---- PROPERTY CARDS (horiz scroll) ---- */
  .m-props { display: flex; gap: 12px; overflow-x: auto; padding: 0 16px 6px; scrollbar-width: none; scroll-snap-type: x mandatory; }
  .m-props::-webkit-scrollbar { display: none; }
  .m-prop {
    flex: 0 0 220px; background: #fff; border: 1px solid var(--c-line); border-radius: 6px;
    overflow: hidden; position: relative; scroll-snap-align: start; display: block;
  }
  .m-prop .thumb { aspect-ratio: 4/3; background-size: cover; background-position: center; background-color: var(--c-bg-sunk); position: relative; }
  .m-prop .badge-rec {
    position: absolute; top: 0; left: 10px; background: var(--c-accent); color: #fff;
    font-size: 11px; font-weight: 700; padding: 5px 8px 7px;
    clip-path: polygon(0 0,100% 0,100% 100%,50% 84%,0 100%); height: 26px;
  }
  .m-prop .heart {
    position: absolute; bottom: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,.92); display: grid; place-items: center; color: var(--c-ink-faint);
    border: none; padding: 0;
  }
  .m-prop .heart.on { color: var(--c-heart); }
  .m-prop .heart.on svg { fill: currentColor; }
  .m-prop .body { padding: 10px 12px; }
  .m-prop .body .loc {
    font-size: 11px; color: var(--c-ink-faint);
    display: flex; gap: 5px; align-items: center; margin-bottom: 5px;
  }
  .m-prop .body .loc .id {
    background: var(--c-bg-sunk); color: var(--c-ink-muted); font-weight: 600;
    padding: 1px 6px; border-radius: 2px; font-size: 10px;
  }
  .m-prop .body .title {
    font-size: 13.5px; font-weight: 700; color: var(--c-ink); letter-spacing: -0.01em; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  }
  .m-prop .body .meta {
    margin-top: 5px; font-size: 11.5px; color: var(--c-ink-muted);
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  }
  .m-prop .price-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 12px; border-top: 1px solid var(--c-line-soft);
  }
  .m-prop .tag { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 2px; letter-spacing: -0.005em; }
  .m-prop .tag.sale { background: #FFF1E5; color: var(--c-tag-monthly); border: 1px solid #FFD9B5; }
  .m-prop .tag.jeonse { background: #E5F3EC; color: var(--c-tag-jeonse); border: 1px solid #C2E0CF; }
  .m-prop .tag.monthly { background: #FCEAEA; color: #B23030; border: 1px solid #F1C6C6; }
  .m-prop .tag.inst { background: #E8EEFC; color: var(--c-primary); border: 1px solid #C8D3EE; }
  .m-prop .price { font-size: 14px; font-weight: 700; color: var(--c-ink); letter-spacing: -0.015em; }
  .m-props-empty { flex: 1; text-align: center; color: var(--c-ink-faint); font-size: 13px; padding: 30px 16px; }

  /* ---- LATEST LIST ---- */
  .m-latest {
    display: flex; flex-direction: column; gap: 0;
    background: transparent; border: none; border-radius: 0; margin: 0 16px; padding: 0;
  }
  .m-latest-item {
    display: grid; grid-template-columns: 140px 1fr; gap: 12px;
    padding: 6px 0; border-bottom: 1px solid var(--c-line-soft);
  }
  .m-latest-item:last-child { border-bottom: none; }
  .m-li-thumb {
    position: relative; width: 140px; height: 107px; border-radius: 4px; overflow: hidden;
    background-size: cover; background-position: center; background-color: var(--c-bg-sunk);
    display: block;
  }
  .m-li-thumb .heart {
    position: absolute; bottom: 6px; left: 6px;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(255,255,255,0.92);
    display: grid; place-items: center; color: var(--c-ink-faint);
    border: none; padding: 0;
  }
  .m-li-thumb .heart.on { color: var(--c-heart); }
  .m-li-thumb .heart.on svg { fill: currentColor; }
  .m-li-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .m-li-title {
    font-size: 13.5px; font-weight: 500; color: var(--c-ink-muted); margin: 0; line-height: 1.4;
    letter-spacing: -0.005em;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  }
  .m-li-title .id { color: var(--c-ink-muted); font-weight: 500; margin-right: 2px; }
  .m-li-loc { font-size: 15px; font-weight: 700; color: var(--c-ink); letter-spacing: -0.01em; margin-top: 2px; }
  .m-li-spec {
    font-size: 12px; color: var(--c-ink-muted); letter-spacing: -0.005em; line-height: 1.5;
    margin-top: 2px;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  }
  .m-li-prices { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; align-items: center; }
  .m-li-prices .pri { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; color: var(--c-ink); letter-spacing: -0.015em; }
  .m-li-prices .pri .amt.small { font-size: 12.5px; font-weight: 600; color: var(--c-ink-muted); }
  .m-li-prices .ic {
    width: 22px; height: 22px; border-radius: 3px; display: inline-grid; place-items: center;
    font-size: 11px; font-weight: 800; color: #fff; letter-spacing: -0.02em;
    flex: 0 0 auto;
  }
  .m-li-prices .ic.je { background: #7B5BD9; }
  .m-li-prices .ic.gw { background: #E6A03D; }
  .m-li-prices .ic.ma { background: #E8B533; color: #3A2200; }
  .m-li-prices .ic.bo { background: #2E8B57; }
  .m-li-prices .ic.wo { background: #E94B4B; }
  .m-li-prices .ic.bn { background: var(--c-primary); }

  /* ---- PARTNERS ---- */
  .m-partners-wrap {
    background: var(--c-bg-alt); padding: 24px 16px;
    border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  }
  .m-partners { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
  .m-partner {
    background: #fff; border: 1px solid var(--c-line); border-radius: 4px;
    padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px;
    font-size: 11px; color: var(--c-ink); font-weight: 600; text-align: center;
    letter-spacing: -0.005em; line-height: 1.3; white-space: pre-line;
  }
  .m-partner .seal {
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700;
    background: var(--c-primary);
  }
  .m-partner .seal.green { background: #2E8B57; }
  .m-partner .seal.yellow { background: #E8B533; color: #3A2200; }
  .m-partner .seal.lh { background: #6FB52C; }

  /* ---- FOOTER ---- */
  .m-footer { background: #fff; border-top: 1px solid var(--c-line); padding: 24px 16px 28px; }
  .m-footer-top {
    display: flex; gap: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--c-line-soft);
    font-size: 13px; color: var(--c-ink-muted);
  }
  .m-footer-top a { font-weight: 600; color: var(--c-ink); }
  .m-footer-top a:first-child { color: var(--c-ink-muted); font-weight: 500; }
  .m-footer-brand { display: flex; align-items: center; gap: 10px; padding: 16px 0 14px; }
  .m-footer-brand .mark {
    width: 34px; height: 34px; background: var(--c-primary); color: #fff;
    display: grid; place-items: center; border-radius: 2px;
    font-family: var(--font-serif); font-size: 20px; font-weight: 600;
  }
  .m-footer-brand strong { font-size: 16px; letter-spacing: 0.18em; font-weight: 700; }
  .m-footer-info { display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; color: var(--c-ink-muted); line-height: 1.55; }
  .m-footer-info .row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
  .m-footer-info .k {
    font-size: 9.5px; font-weight: 700; color: var(--c-ink-faint); text-transform: uppercase;
    letter-spacing: 0.08em; padding: 1px 6px; background: var(--c-bg-alt); border-radius: 2px;
  }
  .m-footer-info .v { font-weight: 600; color: var(--c-ink); }

  /* ---- BOTTOM TAB BAR ---- */
  .m-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: #fff; border-top: 1px solid var(--c-line);
    height: calc(64px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    display: grid; grid-template-columns: repeat(5,1fr);
    box-shadow: 0 -2px 12px rgba(15,26,46,0.06);
  }
  .m-tabbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--c-ink-faint); font-size: 11px; font-weight: 600; letter-spacing: -0.005em;
    padding-top: 4px; position: relative;
  }
  .m-tabbar a .tb-ico { display: grid; place-items: center; line-height: 0; }
  .m-tabbar a .tb-lbl { line-height: 1.1; }
  .m-tabbar a:active { background: var(--c-bg-alt); }
  .m-tabbar a.active { color: var(--c-primary); }
  .m-tabbar a.home { position: relative; justify-content: flex-end; padding-bottom: 6px; }
  .m-tabbar a.home .tb-home {
    position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--c-primary); color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 4px 12px rgba(20,54,107,0.35),0 0 0 4px #fff;
  }
  .m-tabbar a.home.active .tb-home { background: var(--c-primary); }
  .m-tabbar a.home .tb-lbl { color: var(--c-primary); font-weight: 700; margin-top: 0; }

  /* ============================================================
     MOBILE ABOUT — 회사소개 페이지 전용. m-shell 안에서만 사용되며
     ma-title (페이지 헤더), ma-intro (Quill HTML 출력), ma-directions
     (지도 + 사무소 정보 + 인근 지하철) 세 섹션으로 구성.
     ============================================================ */
  .ma-title {
    padding: 32px 20px 28px; text-align: center; background: #fff;
    border-bottom: 1px solid var(--c-line-soft);
  }
  .ma-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
    color: var(--c-primary); text-transform: uppercase; margin-bottom: 12px;
  }
  .ma-eyebrow .dot { width: 6px; height: 6px; background: var(--c-accent); border-radius: 50%; }
  .ma-title h1 {
    font-family: var(--font-serif); font-weight: 600; font-size: 34px;
    margin: 0 0 10px; letter-spacing: -0.01em; color: var(--c-ink); line-height: 1.1;
  }
  .ma-sub {
    font-size: 13.5px; color: var(--c-ink-muted); margin: 0; line-height: 1.6;
    letter-spacing: -0.005em;
  }

  /* ---- ma-intro (Quill HTML region) ---- */
  .ma-intro {
    padding: 8px 20px 32px; background: #fff;
    font-size: 14.5px; line-height: 1.75; color: var(--c-ink-muted);
    letter-spacing: -0.005em;
  }
  .ma-intro h2 {
    font-size: 20px; font-weight: 700; color: var(--c-ink);
    margin: 32px 0 12px; letter-spacing: -0.015em; line-height: 1.3;
    position: relative; padding-left: 14px;
  }
  .ma-intro h2:first-child { margin-top: 18px; }
  .ma-intro h2::before {
    content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
    width: 3px; background: var(--c-accent); border-radius: 1px;
  }
  .ma-intro h3 {
    font-size: 16px; font-weight: 700; color: var(--c-ink);
    margin: 22px 0 8px; letter-spacing: -0.01em;
  }
  .ma-intro p { margin: 0 0 14px; text-wrap: pretty; }
  .ma-intro p:has(> img:only-child) { margin: 14px 0; }
  .ma-intro img {
    display: block; width: 100%; height: auto;
    border-radius: 8px; aspect-ratio: 16/10; object-fit: cover;
    background: var(--c-bg-sunk);
  }
  .ma-intro ul, .ma-intro ol {
    margin: 6px 0 16px; padding: 0; list-style: none;
    display: flex; flex-direction: column; gap: 8px;
    counter-reset: malist;
  }
  .ma-intro ul li, .ma-intro ol li {
    position: relative; padding: 10px 14px 10px 38px;
    background: var(--c-bg-alt); border-radius: 8px;
    font-size: 14px; color: var(--c-ink); letter-spacing: -0.005em; line-height: 1.6;
  }
  .ma-intro ul li::before {
    content: ""; position: absolute; left: 18px; top: 18px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent);
  }
  .ma-intro ol li { counter-increment: malist; }
  .ma-intro ol li::before {
    content: counter(malist, decimal-leading-zero);
    position: absolute; left: 14px; top: 9px;
    font-family: var(--font-serif); font-size: 16px; font-weight: 600;
    color: var(--c-accent); letter-spacing: -0.02em;
  }
  .ma-intro li strong { display: inline; font-weight: 700; color: var(--c-ink); }
  .ma-intro a {
    color: var(--c-ink); text-decoration: underline;
    text-decoration-color: var(--c-accent); text-underline-offset: 3px;
  }
  .ma-intro blockquote {
    margin: 22px 0 8px; padding: 16px 18px 16px 16px;
    border-left: 3px solid var(--c-accent);
    background: linear-gradient(180deg, #FBF7EE 0%, #F7F2E2 100%);
    border-radius: 0 6px 6px 0;
    font-size: 15px; font-style: italic; font-weight: 500;
    color: var(--c-ink); line-height: 1.7; letter-spacing: -0.005em;
  }
  .ma-intro strong { font-weight: 700; color: var(--c-ink); }
  .ma-intro em { font-style: italic; }
  .ma-intro u { text-decoration: underline; text-decoration-color: var(--c-accent); text-underline-offset: 3px; }
  .ma-intro s { text-decoration: line-through; color: var(--c-ink-faint); }

  /* Quill alignments / indents / sizes */
  .ma-intro .ql-align-center { text-align: center; }
  .ma-intro .ql-align-right { text-align: right; }
  .ma-intro .ql-align-justify { text-align: justify; }
  .ma-intro .ql-align-center > img, .ma-intro .ql-align-right > img { margin-left: auto; margin-right: auto; }
  .ma-intro .ql-indent-1 { padding-left: 22px; }
  .ma-intro .ql-indent-2 { padding-left: 44px; }
  .ma-intro .ql-indent-3 { padding-left: 66px; }
  .ma-intro .ql-indent-4 { padding-left: 88px; }
  .ma-intro .ql-indent-5 { padding-left: 110px; }
  .ma-intro .ql-indent-6 { padding-left: 132px; }
  .ma-intro .ql-indent-7 { padding-left: 154px; }
  .ma-intro .ql-indent-8 { padding-left: 176px; }
  .ma-intro .ql-size-small { font-size: 12.5px; line-height: 1.6; }
  .ma-intro .ql-size-large { font-size: 17px; line-height: 1.55; }
  .ma-intro .ql-size-huge { font-size: 22px; line-height: 1.35; font-weight: 700; color: var(--c-ink); }
  .ma-intro ol li[data-list="bullet"] { padding: 10px 14px 10px 38px; }
  .ma-intro ol li[data-list="bullet"]::before {
    content: ""; left: 18px; top: 18px; width: 6px; height: 6px;
    border-radius: 50%; background: var(--c-accent);
    font-family: inherit; font-size: 0; color: transparent;
  }
  .ma-intro ol li[data-list="ordered"] { counter-increment: malist; }
  .ma-intro ol li[data-list="ordered"]::before {
    content: counter(malist, decimal-leading-zero);
    left: 14px; top: 9px;
    font-family: var(--font-serif); font-size: 16px; font-weight: 600;
    color: var(--c-accent); letter-spacing: -0.02em;
    width: auto; height: auto; background: transparent; border-radius: 0;
  }
  .ma-intro .ql-ui { display: none; }
  .ma-intro pre.ql-syntax, .ma-intro pre {
    background: #0F1A2E; color: #E3E7EF;
    padding: 14px 16px; border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px; line-height: 1.6; overflow-x: auto;
    margin: 14px 0; white-space: pre;
  }
  .ma-intro code {
    background: var(--c-bg-sunk); color: var(--c-ink);
    padding: 1px 6px; border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
  }
  .ma-intro iframe.ql-video, .ma-intro iframe {
    width: 100%; aspect-ratio: 16/9; border: none; border-radius: 8px; margin: 14px 0;
    background: #000;
  }
  .ma-intro img[style*="float: left"], .ma-intro img[style*="float:left"] { float: left; margin: 0 14px 8px 0; max-width: 50%; }
  .ma-intro img[style*="float: right"], .ma-intro img[style*="float:right"] { float: right; margin: 0 0 8px 14px; max-width: 50%; }
  .ma-intro::after { content: ""; display: block; clear: both; }
  .ma-intro p:has(> br:only-child) { margin: 0; min-height: 1em; }
  .ma-intro + .ma-directions { margin-top: 0; border-top: 1px solid var(--c-line); position: relative; }
  .ma-intro + .ma-directions::before {
    content: ""; display: block; width: 48px; height: 1px; background: var(--c-accent);
    margin: 0 auto 12px; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  }

  /* ---- ma-directions ---- */
  .ma-directions {
    padding: 30px 20px 28px; background: var(--c-bg-alt);
    border-top: 1px solid var(--c-line);
  }
  .ma-section-head { text-align: center; margin-bottom: 18px; }
  .ma-section-head .ma-eyebrow { margin-bottom: 8px; }
  .ma-section-head h2 {
    font-family: var(--font-serif); font-size: 30px; font-weight: 600;
    margin: 0; letter-spacing: -0.01em; color: var(--c-ink);
  }
  .ma-map {
    position: relative; width: 100%; aspect-ratio: 4/3;
    border-radius: 10px; overflow: hidden;
    border: 1px solid var(--c-line); background: #DCEAF5;
  }
  .ma-map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  .ma-map-canvas:empty { display: none; }
  .ma-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .ma-pin {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 1px; height: 1px; z-index: 3;
  }
  .ma-pin-dot {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 14px; height: 14px; background: var(--c-primary);
    border: 3px solid #fff; border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  }
  .ma-pin-pulse {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(20, 54, 107, 0.22);
    animation: maPulse 2.2s ease-out infinite;
  }
  @keyframes maPulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(4); opacity: 0; }
  }
  .ma-pin-tip {
    position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
    padding: 6px 12px; background: #fff; border: 1px solid var(--c-line);
    border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--c-ink);
    white-space: nowrap; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  }
  .ma-pin-tip::after {
    content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
    width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent;
    border-top: 6px solid #fff;
  }
  .ma-pin-tip::before {
    content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
    width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent;
    border-top: 7px solid var(--c-line);
  }
  .ma-map-credit {
    position: absolute; bottom: 6px; left: 10px;
    font-size: 10.5px; color: rgba(15, 26, 46, 0.6); font-weight: 700; letter-spacing: 0.02em;
    z-index: 2;
  }

  .ma-map-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
  .ma-mapbtn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; border-radius: 6px; font-size: 13px; font-weight: 700;
    letter-spacing: -0.005em;
  }
  .ma-mapbtn.kakao { background: #fee500; color: #1A1A1A; }
  .ma-mapbtn.naver { background: #03c75a; color: #fff; }
  .ma-mapbtn:active { filter: brightness(0.96); }

  .ma-office {
    background: #fff; border: 1px solid var(--c-line); border-radius: 10px;
    padding: 16px 18px; margin-top: 18px;
  }
  .ma-office-head {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 12px; border-bottom: 1px solid var(--c-line-soft);
    margin-bottom: 8px;
  }
  .ma-office-head .ico { color: var(--c-accent); display: grid; place-items: center; }
  .ma-office-head h3 {
    font-size: 15px; font-weight: 700; margin: 0; color: var(--c-ink); letter-spacing: -0.01em;
  }
  .ma-info { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; }
  .ma-info .row {
    display: grid; grid-template-columns: 64px 1fr; gap: 10px;
    padding: 9px 0; border-bottom: 1px solid var(--c-line-soft);
    align-items: baseline;
  }
  .ma-info .row:last-child { border-bottom: none; }
  .ma-info dt {
    font-size: 12px; font-weight: 700; color: var(--c-ink-faint);
    letter-spacing: 0.04em; text-transform: uppercase; margin: 0;
  }
  .ma-info dd {
    font-size: 13.5px; font-weight: 600; color: var(--c-ink); margin: 0;
    letter-spacing: -0.005em; line-height: 1.5; word-break: keep-all;
  }
  .ma-info dd a { color: var(--c-ink); text-decoration: none; border-bottom: 1px solid var(--c-accent); }
  .ma-info dd a:hover { color: var(--c-primary); }

  .ma-subway {
    background: #fff; border: 1px solid var(--c-line); border-radius: 10px;
    padding: 16px 18px; margin-top: 12px;
  }
  .ma-subway-head {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 12px; border-bottom: 1px solid var(--c-line-soft);
    margin-bottom: 12px;
  }
  .ma-subway-head .ico { color: var(--c-accent); display: grid; place-items: center; }
  .ma-subway-head h3 {
    font-size: 15px; font-weight: 700; margin: 0; color: var(--c-ink); letter-spacing: -0.01em;
  }
  .ma-subway-list { display: flex; flex-direction: column; gap: 10px; }
  .ma-subway-list .item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
  .ma-subway-list .station { font-weight: 700; color: var(--c-ink); letter-spacing: -0.005em; flex: 1; }
  .ma-subway-list .dist { color: var(--c-ink-faint); font-size: 12.5px; font-weight: 600; }
  .ma-subway-list .chip {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 48px; padding: 4px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1.3;
  }
  .ma-subway-list .chip.line-1 { background: #0052A4; }
  .ma-subway-list .chip.line-2 { background: #00A84D; }
  .ma-subway-list .chip.line-3 { background: #EF7C1C; }
  .ma-subway-list .chip.line-4 { background: #00A5DE; }
  .ma-subway-list .chip.line-5 { background: #996CAC; }
  .ma-subway-list .chip.line-6 { background: #CD7C2F; }
  .ma-subway-list .chip.line-7 { background: #747F00; }
  .ma-subway-list .chip.line-8 { background: #E6186C; }
  .ma-subway-list .chip.line-9 { background: #BDB092; color: #3A2C0D; }
  .ma-subway-list .chip.line-shinbundang { background: #D31145; }
  .ma-subway-list .chip.line-bundang { background: #FABE00; color: #3A2C0D; }
  .ma-subway-list .chip.line-gyeongui { background: #77C4A3; }
  .ma-subway-list .chip.line-airport { background: #0090D2; }
  .ma-subway-list .chip.line-gyeongchun { background: #0C8E72; }
  .ma-subway-list .chip.line-gtx { background: #9F2A6A; }

  /* ============================================================
     MOBILE PRIVACY — 개인정보처리방침 페이지 전용. mp-title (페이지
     헤더 + crumb + 시행일자), mp-toc (목차 토글), mp-doc (12조 본문 +
     mp-callout / mp-officer / mp-agencies / mp-top).
     ============================================================ */
  .mp-title {
    padding: 24px 20px 22px; background: #fff;
    border-bottom: 1px solid var(--c-line-soft);
  }
  .mp-crumb {
    font-size: 11.5px; color: var(--c-ink-faint);
    display: inline-flex; align-items: center; gap: 5px; margin-bottom: 10px;
    letter-spacing: -0.005em; font-weight: 500;
  }
  .mp-crumb a { color: var(--c-ink-muted); }
  .mp-crumb > span { color: var(--c-line); }
  .mp-title h1 {
    font-size: 24px; font-weight: 700; margin: 0 0 12px;
    color: var(--c-ink); letter-spacing: -0.015em; line-height: 1.2;
  }
  .mp-meta { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; }
  .mp-pill {
    display: inline-block; font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--c-primary); background: var(--c-bg-alt);
    padding: 3px 8px; border-radius: 3px;
  }
  .mp-date { font-weight: 700; color: var(--c-ink); letter-spacing: -0.01em; }

  .mp-toc { margin: 0; background: var(--c-bg-alt); border-bottom: 1px solid var(--c-line); }
  .mp-toc-head {
    width: 100%; display: flex; align-items: center; gap: 8px;
    padding: 14px 20px; background: transparent;
    font-size: 13.5px; font-weight: 700; color: var(--c-ink);
    letter-spacing: -0.005em;
  }
  .mp-toc-count { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--c-ink-muted); }
  .mp-toc-chev { color: var(--c-ink-muted); transition: transform .2s; }
  .mp-toc-head[aria-expanded="true"] .mp-toc-chev { transform: rotate(180deg); }
  .mp-toc-list {
    list-style: none; margin: 0; padding: 0 20px 16px;
    counter-reset: tocnum;
    display: flex; flex-direction: column; gap: 2px;
    background: #fff; border-top: 1px solid var(--c-line-soft);
  }
  .mp-toc-list[hidden] { display: none; }
  .mp-toc-list li {
    counter-increment: tocnum; position: relative;
    padding: 9px 0 9px 32px;
    border-bottom: 1px solid var(--c-line-soft);
  }
  .mp-toc-list li:last-child { border-bottom: none; }
  .mp-toc-list li::before {
    content: counter(tocnum, decimal-leading-zero);
    position: absolute; left: 0; top: 11px;
    font-family: var(--font-serif); font-size: 14px; font-weight: 600;
    color: var(--c-accent); letter-spacing: -0.01em;
  }
  .mp-toc-list a {
    font-size: 13.5px; font-weight: 500; color: var(--c-ink);
    letter-spacing: -0.005em; display: block;
  }
  .mp-toc-list a:active { color: var(--c-primary); }

  .mp-doc {
    padding: 24px 20px 32px; background: #fff;
    font-size: 14px; line-height: 1.75; color: var(--c-ink-muted);
    letter-spacing: -0.005em;
  }
  .mp-lead {
    font-size: 13.5px; line-height: 1.7; color: var(--c-ink-muted);
    margin: 0 0 28px; padding: 14px 16px;
    background: var(--c-bg-alt); border-radius: 8px;
    letter-spacing: -0.005em;
  }
  .mp-art {
    padding: 24px 0 8px; border-bottom: 1px solid var(--c-line-soft);
    scroll-margin-top: 72px;
  }
  .mp-art:last-of-type { border-bottom: none; }
  .mp-art h2 {
    font-size: 16.5px; font-weight: 700; color: var(--c-ink);
    margin: 0 0 12px; letter-spacing: -0.015em; line-height: 1.35;
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  }
  .mp-art-no {
    display: inline-block; font-family: var(--font-serif);
    font-size: 14px; font-weight: 600; color: var(--c-accent);
    padding: 2px 8px; background: var(--c-bg-alt);
    border-radius: 3px; letter-spacing: -0.005em; line-height: 1.4;
    flex: 0 0 auto;
  }
  .mp-art p {
    margin: 0 0 12px; text-wrap: pretty;
    font-size: 13.5px; line-height: 1.75; color: var(--c-ink-muted);
  }
  .mp-art ul {
    list-style: none; margin: 8px 0 12px; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
  }
  .mp-art ul li {
    position: relative; padding: 8px 12px 8px 26px;
    background: var(--c-bg-alt); border-radius: 6px;
    font-size: 13px; line-height: 1.6; color: var(--c-ink);
    letter-spacing: -0.005em;
  }
  .mp-art ul li::before {
    content: ""; position: absolute; left: 12px; top: 16px;
    width: 5px; height: 5px; border-radius: 50%; background: var(--c-accent);
  }
  .mp-art li strong { font-weight: 700; color: var(--c-ink); }
  .mp-art a {
    color: var(--c-ink); text-decoration: underline;
    text-decoration-color: var(--c-accent); text-underline-offset: 3px;
  }
  .mp-callout {
    margin: 6px 0 4px; padding: 12px 14px;
    border-left: 3px solid var(--c-primary);
    background: #F2F5FA; border-radius: 0 6px 6px 0;
    font-size: 13.5px; font-weight: 600; color: var(--c-primary);
    line-height: 1.55; letter-spacing: -0.005em;
  }
  .mp-officer {
    margin: 8px 0 6px;
    background: var(--c-bg-alt); border-radius: 8px; padding: 14px 16px;
  }
  .mp-officer .row {
    display: grid; grid-template-columns: 64px 1fr; gap: 10px;
    padding: 7px 0; border-bottom: 1px solid var(--c-line-soft);
    align-items: baseline;
  }
  .mp-officer .row:first-child { padding-top: 0; }
  .mp-officer .row:last-child { border-bottom: none; padding-bottom: 0; }
  .mp-officer dt {
    font-size: 11.5px; font-weight: 700; color: var(--c-ink-faint);
    letter-spacing: 0.04em; text-transform: uppercase; margin: 0;
  }
  .mp-officer dd {
    font-size: 13.5px; font-weight: 600; color: var(--c-ink); margin: 0;
    letter-spacing: -0.005em; line-height: 1.5; word-break: keep-all;
  }
  .mp-agencies {
    display: flex; flex-direction: column; gap: 8px;
    padding: 0; list-style: none; margin: 8px 0 6px;
  }
  .mp-agencies li {
    background: #fff; border: 1px solid var(--c-line); border-radius: 8px;
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 3px;
    position: static;
  }
  .mp-agencies li::before { content: none; }
  .mp-agencies li strong {
    font-size: 13.5px; font-weight: 700; color: var(--c-ink);
    letter-spacing: -0.005em;
  }
  .mp-agencies li span {
    font-size: 12.5px; color: var(--c-ink-muted);
    font-weight: 500; letter-spacing: -0.005em;
  }
  .mp-agencies li a {
    font-size: 12px; font-weight: 600; color: var(--c-primary);
    text-decoration: none; letter-spacing: -0.005em;
    display: inline-flex; align-items: center; gap: 4px; margin-top: 2px;
  }
  .mp-agencies li a::after { content: "↗"; font-size: 10px; opacity: 0.7; }

  .mp-top {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 32px auto 0; padding: 10px 18px;
    background: #fff; border: 1px solid var(--c-line);
    border-radius: 999px;
    font-size: 13px; font-weight: 600; color: var(--c-ink-muted);
    letter-spacing: -0.005em;
  }
  .mp-top:active { color: var(--c-primary); border-color: var(--c-primary); }

  /* ============================================================
     MOBILE CONTENT (mc-) — 공지사항/Q&A 공용. 페이지 타이틀, 필터+CTA
     툴바, hairline 리스트(썸네일/Q&A 두 형태), 페이지네이션, 상세 본문,
     입력 폼, Q&A 답변 토글까지 한 네임스페이스.
     ============================================================ */
  .mc-title {
    padding: 24px 20px 18px; background: #fff;
    border-bottom: 1px solid var(--c-line-soft);
  }
  .mc-crumb {
    font-size: 11.5px; color: var(--c-ink-faint);
    display: inline-flex; align-items: center; gap: 5px; margin-bottom: 10px;
    letter-spacing: -0.005em; font-weight: 500;
  }
  .mc-crumb a { color: var(--c-ink-muted); }
  .mc-crumb > span { color: var(--c-line); }
  .mc-title h1 {
    font-size: 24px; font-weight: 700; margin: 0 0 6px;
    color: var(--c-ink); letter-spacing: -0.015em; line-height: 1.2;
  }
  .mc-title p.sub {
    font-size: 13px; color: var(--c-ink-muted); margin: 0; line-height: 1.55;
    letter-spacing: -0.005em;
  }

  .mc-toolbar {
    padding: 14px 16px; background: #fff;
    display: flex; align-items: center; gap: 10px;
    border-bottom: 1px solid var(--c-line);
  }
  .mc-filter { flex: 1; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .mc-filter::-webkit-scrollbar { display: none; }
  .mc-filter a {
    flex: 0 0 auto;
    padding: 6px 12px; font-size: 12.5px; font-weight: 500;
    color: var(--c-ink-muted);
    border: 1px solid var(--c-line); border-radius: 999px; background: #fff;
    white-space: nowrap; letter-spacing: -0.005em;
  }
  .mc-filter a.on { background: var(--c-primary); color: #fff; border-color: var(--c-primary); font-weight: 600; }
  .mc-cta {
    flex: 0 0 auto;
    background: var(--c-primary); color: #fff;
    padding: 8px 14px; border-radius: 6px;
    font-size: 13px; font-weight: 700; letter-spacing: -0.005em;
    display: inline-flex; align-items: center; gap: 4px;
  }
  .mc-cta::before { content: "+"; font-size: 14px; font-weight: 600; }

  .mc-list { list-style: none; margin: 0; padding: 0; background: #fff; }
  .mc-list .row { border-bottom: 1px solid var(--c-line-soft); }
  .mc-list .row:last-child { border-bottom: none; }
  .mc-list .row a { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; }
  .mc-list .row a:active { background: var(--c-bg-alt); }
  .mc-list .thumb {
    flex: 0 0 76px; width: 76px; height: 76px;
    background-size: cover; background-position: center; background-color: var(--c-bg-sunk);
    border-radius: 4px; overflow: hidden;
  }
  .mc-list .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding-top: 2px; }
  .mc-list .title {
    font-size: 14.5px; font-weight: 700; color: var(--c-ink);
    letter-spacing: -0.01em; line-height: 1.45; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .mc-list .meta {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 11.5px; color: var(--c-ink-faint); letter-spacing: -0.005em;
  }
  .mc-list .meta .date { font-weight: 600; }

  .mc-list.qna .row a { align-items: flex-start; gap: 0; flex-direction: column; padding: 14px 16px; }
  .mc-list.qna .row a:active { background: var(--c-bg-alt); }
  .mc-list.qna .top-row { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 5px; }
  .mc-list.qna .status {
    flex: 0 0 auto;
    display: inline-block; font-size: 11px; font-weight: 700;
    padding: 3px 8px; border-radius: 3px; letter-spacing: -0.005em;
  }
  .mc-list.qna .status.pending { background: #FFF1E5; color: var(--c-tag-monthly); border: 1px solid #FFD9B5; }
  .mc-list.qna .status.answered { background: #E5F3EC; color: var(--c-tag-jeonse); border: 1px solid #C2E0CF; }
  .mc-list.qna .author {
    flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--c-ink-muted);
    letter-spacing: -0.005em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mc-list.qna .date { flex: 0 0 auto; font-size: 11.5px; color: var(--c-ink-faint); font-weight: 500; }
  .mc-list.qna .title {
    font-size: 14.5px; font-weight: 700; color: var(--c-ink);
    letter-spacing: -0.01em; line-height: 1.45; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  .mc-empty {
    padding: 60px 24px; text-align: center; background: #fff;
    font-size: 13.5px; color: var(--c-ink-faint); letter-spacing: -0.005em;
  }

  .mc-pager {
    display: flex; justify-content: center; align-items: center; gap: 4px;
    padding: 24px 16px; background: #fff;
  }
  .mc-pager a, .mc-pager span {
    min-width: 34px; height: 34px; border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; color: var(--c-ink-muted);
    border: 1px solid var(--c-line); background: #fff;
    padding: 0 8px;
  }
  .mc-pager .cur { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
  .mc-pager .ico { font-size: 14px; color: var(--c-ink-faint); }

  .mc-back { padding: 14px 16px 6px; background: #fff; }
  .mc-back a {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; font-weight: 600; color: var(--c-ink-muted);
    letter-spacing: -0.005em;
  }
  .mc-back a::before { content: "‹"; font-size: 18px; line-height: 1; }
  .mc-back a:active { color: var(--c-primary); }

  .mc-article { background: #fff; padding: 8px 20px 28px; }
  .mc-article-head {
    padding: 14px 0 18px; border-bottom: 1px solid var(--c-line);
    margin-bottom: 18px;
  }
  .mc-article-date {
    font-size: 12px; font-weight: 700; color: var(--c-accent);
    letter-spacing: 0.08em; margin: 0 0 8px;
  }
  .mc-article-title {
    font-size: 22px; font-weight: 700; color: var(--c-ink);
    margin: 0; letter-spacing: -0.015em; line-height: 1.3;
    text-wrap: pretty;
  }
  .mc-article-thumb {
    margin: 0 0 18px; border-radius: 8px; overflow: hidden; background: var(--c-bg-sunk);
  }
  .mc-article-thumb img { display: block; width: 100%; height: auto; }
  .mc-article-body {
    font-size: 14.5px; line-height: 1.75; color: var(--c-ink);
    letter-spacing: -0.005em;
  }
  .mc-article-body h2 {
    font-size: 18px; font-weight: 700; color: var(--c-ink);
    margin: 24px 0 10px; letter-spacing: -0.015em; line-height: 1.3;
  }
  .mc-article-body h3 { font-size: 15px; font-weight: 700; margin: 18px 0 8px; color: var(--c-ink); }
  .mc-article-body p { margin: 0 0 12px; text-wrap: pretty; }
  .mc-article-body img {
    display: block; width: 100%; height: auto; border-radius: 6px; margin: 10px 0;
    background: var(--c-bg-sunk);
  }
  .mc-article-body ul, .mc-article-body ol { margin: 6px 0 14px; padding-left: 22px; }
  .mc-article-body li { margin: 3px 0; line-height: 1.65; }
  .mc-article-body blockquote {
    margin: 14px 0; padding: 10px 14px;
    border-left: 3px solid var(--c-accent);
    background: linear-gradient(180deg, #FBF7EE 0%, #F7F2E2 100%);
    border-radius: 0 6px 6px 0; font-style: italic; color: var(--c-ink-muted);
  }
  .mc-article-body a {
    color: var(--c-ink); text-decoration: underline;
    text-decoration-color: var(--c-accent); text-underline-offset: 3px;
  }
  .mc-article-body strong { font-weight: 700; color: var(--c-ink); }
  .mc-article-body em { font-style: italic; }
  .mc-article-body iframe.ql-video, .mc-article-body iframe {
    width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 8px; margin: 12px 0; background: #000;
  }
  .mc-article-body pre {
    background: #0F1A2E; color: #E3E7EF; padding: 14px 16px; border-radius: 6px;
    font-family: ui-monospace, monospace; font-size: 13px; line-height: 1.6; overflow-x: auto;
  }
  .mc-article-body code {
    background: var(--c-bg-sunk); color: var(--c-ink); padding: 1px 6px; border-radius: 3px;
    font-family: ui-monospace, monospace; font-size: 13px;
  }

  .mc-form { background: #fff; padding: 8px 20px 28px; }
  .mc-form .field { margin-bottom: 18px; }
  .mc-form label {
    display: block; font-size: 13px; font-weight: 700; color: var(--c-ink);
    margin-bottom: 6px; letter-spacing: -0.005em;
  }
  .mc-form label em { font-style: normal; color: #C0392B; margin-left: 2px; font-weight: 700; }
  .mc-form input, .mc-form textarea, .mc-form select {
    width: 100%; border: 1px solid var(--c-line); border-radius: 6px;
    padding: 11px 12px; font-size: 14px; background: #fff; outline: none;
    transition: border-color .12s; font-family: inherit; color: var(--c-ink);
  }
  .mc-form input:focus, .mc-form textarea:focus, .mc-form select:focus { border-color: var(--c-primary); }
  .mc-form textarea { resize: vertical; min-height: 120px; }
  .mc-form .field-help { font-size: 11.5px; color: var(--c-ink-faint); margin: 6px 0 0; letter-spacing: -0.005em; }
  .mc-form-actions {
    display: grid; grid-template-columns: 1fr 2fr; gap: 8px; margin-top: 24px;
  }
  .mc-form-actions .cancel {
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--c-line);
    color: var(--c-ink-muted); height: 46px; border-radius: 6px;
    font-size: 14px; font-weight: 700; letter-spacing: -0.005em;
  }
  .mc-form-actions .cancel:active { border-color: var(--c-ink-muted); color: var(--c-ink); }
  .mc-form-actions button {
    background: var(--c-primary); color: #fff;
    height: 46px; border-radius: 6px;
    font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
  }
  .mc-form-actions button:active { background: var(--c-primary-dark); }

  .mc-notice {
    margin: 0 0 18px; padding: 12px 14px;
    background: var(--c-bg-alt); border-radius: 8px;
    border-left: 3px solid var(--c-accent);
    font-size: 12.5px; line-height: 1.65; color: var(--c-ink-muted);
    letter-spacing: -0.005em;
  }
  .mc-notice strong { color: var(--c-ink); font-weight: 700; }
  .mc-notice a { color: var(--c-primary); text-decoration: underline; }

  /* ---- Q&A detail (data-state 토글) ---- */
  .mc-article.mc-qna { padding: 8px 0 28px; }
  .mc-article.mc-qna > * { margin-left: 20px; margin-right: 20px; }
  .mc-article.mc-qna .mc-article-head { margin: 0 0 18px; padding: 14px 20px 18px; }

  .mc-qna-meta {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: 12px; color: var(--c-ink-muted); font-weight: 500;
    margin: 0 0 10px; letter-spacing: -0.005em;
  }
  .mc-qna-meta .num {
    font-family: var(--font-serif); font-size: 14px; font-weight: 600; color: var(--c-accent);
    letter-spacing: -0.01em;
  }
  .mc-qna-meta .author { font-weight: 700; color: var(--c-ink); }
  .mc-qna-meta .date { color: var(--c-ink-faint); font-size: 11.5px; }
  .mc-qna-meta .dot { color: var(--c-line); font-weight: 400; }

  .mc-qna-titlerow { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
  .mc-qna-status {
    flex: 0 0 auto; display: inline-block; font-size: 11.5px; font-weight: 700;
    padding: 4px 9px; border-radius: 3px; letter-spacing: -0.005em;
    margin-top: 2px;
  }
  .mc-qna-status.pending { background: #FFF1E5; color: var(--c-tag-monthly); border: 1px solid #FFD9B5; }
  .mc-qna-status.answered { background: #E5F3EC; color: var(--c-tag-jeonse); border: 1px solid #C2E0CF; }
  .mc-article.mc-qna[data-state="pending"]  .mc-qna-status.answered { display: none; }
  .mc-article.mc-qna[data-state="answered"] .mc-qna-status.pending { display: none; }
  .mc-article.mc-qna[data-state="pending"]  .mc-qna-block.answer { display: none; }
  .mc-article.mc-qna[data-state="answered"] .mc-qna-pending { display: none; }
  .mc-article.mc-qna .mc-article-title { font-size: 20px; line-height: 1.3; margin: 0; flex: 1 1 100%; }

  .mc-qna-block {
    margin: 0 0 14px; padding: 14px 16px;
    background: #fff; border: 1px solid var(--c-line); border-radius: 10px;
  }
  .mc-qna-block.answer { background: #F8FAFD; border-color: #D9E2F0; }
  .mc-qna-block-head {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 10px; margin-bottom: 10px;
    border-bottom: 1px solid var(--c-line-soft);
  }
  .mc-qna-block.answer .mc-qna-block-head { border-bottom-color: #DCE5F2; }
  .mc-qna-block .role {
    width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--font-serif); font-size: 14px; font-weight: 700; color: #fff;
    letter-spacing: -0.02em; flex: 0 0 auto;
  }
  .mc-qna-block .role.q { background: var(--c-ink-muted); }
  .mc-qna-block .role.a { background: var(--c-primary); }
  .mc-qna-block .lbl { font-size: 13px; font-weight: 700; color: var(--c-ink); letter-spacing: -0.005em; }
  .mc-qna-block .ans-meta {
    margin-left: auto; font-size: 11.5px; color: var(--c-ink-faint);
    font-weight: 500; letter-spacing: -0.005em; text-align: right;
  }
  .mc-qna-body {
    font-size: 14px; line-height: 1.75; color: var(--c-ink);
    letter-spacing: -0.005em; white-space: pre-line;
  }
  .mc-qna-block.answer .mc-qna-body { white-space: normal; color: var(--c-ink); }
  .mc-qna-block.answer .mc-qna-body p { margin: 0 0 10px; }
  .mc-qna-block.answer .mc-qna-body p:last-child { margin-bottom: 0; }
  .mc-qna-block.answer .mc-qna-body ul {
    list-style: none; padding: 0; margin: 6px 0 12px;
    display: flex; flex-direction: column; gap: 6px;
  }
  .mc-qna-block.answer .mc-qna-body ul li {
    position: relative; padding: 7px 12px 7px 24px;
    background: #fff; border-radius: 5px;
    font-size: 13.5px; line-height: 1.6; letter-spacing: -0.005em;
  }
  .mc-qna-block.answer .mc-qna-body ul li::before {
    content: ""; position: absolute; left: 10px; top: 15px;
    width: 5px; height: 5px; border-radius: 50%; background: var(--c-accent);
  }
  .mc-qna-block.answer .mc-qna-body strong { font-weight: 700; color: var(--c-ink); }

  .mc-qna-pending {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 0 0 14px; padding: 14px 16px;
    background: #FFFAF0; border: 1px solid #FFDFB0;
    border-radius: 10px;
    font-size: 13px; color: var(--c-tag-monthly); font-weight: 600; letter-spacing: -0.005em;
    line-height: 1.5;
  }
  .mc-qna-pending .ico { flex: 0 0 auto; color: var(--c-tag-monthly); display: grid; place-items: center; margin-top: 1px; }
  .mc-qna-pending .sub { display: block; font-size: 12px; font-weight: 500; color: #A6611F; margin-top: 2px; }

  .mc-qna-actions { display: flex; gap: 8px; margin-top: 18px; }

  /* ============================================================
     MOBILE NEWS (mn-) — 부동산 소식 페이지 전용. 검색바 + info strip +
     외부 큐레이션 리스트 카드(소스/날짜/번호/제목/요약/원문 보기) +
     load-more 버튼.
     ============================================================ */
  .mn-search { padding: 14px 16px; background: #fff; border-bottom: 1px solid var(--c-line-soft); }
  .mn-search-bar {
    display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 8px 0 14px;
    border: 1.5px solid var(--c-primary); border-radius: 8px; background: #fff;
  }
  .mn-search-bar svg { color: var(--c-primary); flex: 0 0 auto; }
  .mn-search-bar input {
    flex: 1; border: none; outline: none; font-size: 13.5px; background: transparent; color: var(--c-ink);
    font-family: inherit;
  }
  .mn-search-bar input::placeholder { color: var(--c-ink-faint); }
  .mn-search-bar button {
    background: var(--c-primary); color: #fff; font-weight: 700; font-size: 12.5px;
    padding: 8px 12px; border-radius: 5px; letter-spacing: 0.02em;
    border: none; cursor: pointer;
  }

  .mn-info {
    padding: 12px 16px; background: var(--c-bg-alt);
    border-bottom: 1px solid var(--c-line);
  }
  .mn-info-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
  .mn-info-row .cnt { font-size: 12.5px; color: var(--c-ink-muted); font-weight: 500; letter-spacing: -0.005em; }
  .mn-info-row .cnt strong {
    color: var(--c-primary); font-weight: 700;
    font-family: var(--font-serif); font-size: 15px; letter-spacing: -0.01em; margin-right: 2px;
  }
  .mn-info-row .src {
    margin-left: auto; font-size: 11px; color: var(--c-ink-faint);
    padding: 2px 8px; background: #fff; border-radius: 3px;
    letter-spacing: 0.04em; font-weight: 600;
  }
  .mn-info-help {
    font-size: 11.5px; color: var(--c-ink-faint); margin: 0; letter-spacing: -0.005em;
    line-height: 1.5;
  }

  .mn-list { list-style: none; padding: 0; margin: 0; background: #fff; }
  .mn-item { border-bottom: 1px solid var(--c-line-soft); }
  .mn-item:last-child { border-bottom: none; }
  .mn-card {
    display: flex; flex-direction: column; gap: 6px;
    padding: 14px 16px; color: inherit; text-decoration: none;
    position: relative;
  }
  .mn-card:active { background: var(--c-bg-alt); }
  .mn-meta {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: 11.5px; letter-spacing: -0.005em;
  }
  .mn-meta .src {
    font-weight: 700; color: var(--c-primary);
    max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mn-meta .date { color: var(--c-ink-muted); font-weight: 500; }
  .mn-meta .dot { color: var(--c-line); font-weight: 400; }
  .mn-meta .num {
    margin-left: auto; font-size: 11px; color: var(--c-ink-faint);
    font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.01em;
  }
  .mn-title {
    font-size: 14.5px; font-weight: 700; color: var(--c-ink);
    line-height: 1.45; letter-spacing: -0.01em; margin: 2px 0 2px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    text-wrap: pretty;
  }
  .mn-summary {
    font-size: 12.5px; color: var(--c-ink-muted);
    line-height: 1.6; letter-spacing: -0.005em; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .mn-link {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11.5px; font-weight: 600; color: var(--c-primary);
    letter-spacing: -0.005em; margin-top: 4px;
    align-self: flex-start;
  }

  .mn-more { padding: 20px 16px 28px; background: #fff; }
  .mn-more a, .mn-more button {
    width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 14px 16px; border: 1px solid var(--c-line); border-radius: 8px;
    background: #fff; color: var(--c-ink);
    font-family: inherit; cursor: pointer; letter-spacing: -0.005em;
    transition: border-color .15s, background .15s;
  }
  .mn-more a:active, .mn-more button:active { background: var(--c-bg-alt); border-color: var(--c-primary); }
  .mn-more .lbl { font-size: 14px; font-weight: 700; color: var(--c-ink); }
  .mn-more .meta { font-size: 11.5px; color: var(--c-ink-faint); font-weight: 500; }

  /* ============================================================
     MOBILE LISTING REQUEST (ml-) — 매물 의뢰하기(팔아요/구해요) 전용.
     세그먼티드 탭 + 안내 박스 + 폼 + 시도/시군구/동 cascade + actions.
     ============================================================ */
  .ml-tab { background: #fff; padding: 14px 16px 0; border-bottom: 1px solid var(--c-line); }
  .ml-tab-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    background: var(--c-bg-alt); padding: 4px; border-radius: 8px;
  }
  .ml-tab-row a {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    height: 42px; border-radius: 6px;
    font-size: 14px; font-weight: 600; color: var(--c-ink-muted);
    letter-spacing: -0.005em; text-decoration: none;
  }
  .ml-tab-row a.on {
    background: #fff; color: var(--c-primary); font-weight: 700;
    box-shadow: 0 1px 3px rgba(15,26,46,0.08);
  }
  .ml-tab-row a .ico { width: 18px; height: 18px; display: grid; place-items: center; }
  .ml-tab-help {
    margin: 14px 0 0; padding: 12px 14px;
    background: linear-gradient(180deg, #FBF7EE 0%, #F7F2E2 100%);
    border-radius: 6px; border-left: 3px solid var(--c-accent);
    font-size: 13px; color: var(--c-ink); line-height: 1.6; letter-spacing: -0.005em;
  }
  .ml-tab-help strong { font-weight: 700; color: var(--c-ink); }

  .ml-form { background: #fff; padding: 14px 16px 28px; }
  .ml-field { margin-bottom: 14px; }
  .ml-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
  .ml-field-row .ml-field { margin-bottom: 0; }
  .ml-field label {
    display: flex; align-items: baseline; gap: 4px;
    font-size: 13px; font-weight: 700; color: var(--c-ink);
    margin-bottom: 6px; letter-spacing: -0.005em;
  }
  .ml-field label em { font-style: normal; color: #C0392B; font-weight: 700; margin-left: 2px; }
  .ml-field input,
  .ml-field select,
  .ml-field textarea {
    width: 100%; border: 1px solid var(--c-line); border-radius: 6px;
    padding: 11px 12px; font-size: 14px; background: #fff; outline: none;
    transition: border-color .12s; color: var(--c-ink); font-family: inherit;
    appearance: none; -webkit-appearance: none;
  }
  .ml-field select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%235A6679' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat; background-position: right 12px center;
    padding-right: 34px;
  }
  .ml-field input:focus,
  .ml-field select:focus,
  .ml-field textarea:focus { border-color: var(--c-primary); }
  .ml-field input::placeholder,
  .ml-field textarea::placeholder { color: var(--c-ink-faint); }
  .ml-field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
  .ml-field .help {
    margin: 5px 0 0; font-size: 11.5px; color: var(--c-ink-faint);
    letter-spacing: -0.005em; line-height: 1.5;
  }
  .ml-cascade { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .ml-cascade select:disabled {
    background-color: var(--c-bg-alt); color: var(--c-ink-faint);
    cursor: not-allowed;
  }
  .ml-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; margin-top: 24px; }
  .ml-actions .cancel,
  .ml-actions button {
    height: 48px; border-radius: 6px;
    font-size: 14px; font-weight: 700; letter-spacing: -0.005em;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-family: inherit; cursor: pointer;
  }
  .ml-actions .cancel {
    background: #fff; border: 1px solid var(--c-line); color: var(--c-ink-muted);
    text-decoration: none;
  }
  .ml-actions .cancel:active { border-color: var(--c-ink-muted); color: var(--c-ink); }
  .ml-actions button {
    background: var(--c-primary); color: #fff; border: none; letter-spacing: 0.02em;
  }
  .ml-actions button:active { background: var(--c-primary-dark); }
  .ml-actions button:disabled { opacity: .5; cursor: not-allowed; }

  /* ============================================================
     MOBILE ITEM DETAIL (mi-) — 매물 상세 페이지 전용.
     갤러리/헤드카드/담당자/sticky 탭/KV/설명/지도/유사매물/sticky CTA.
     ============================================================ */
  body.page-item-detail { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }

  .mi-gallery { background: #fff; }
  .mi-stage {
    position: relative; width: 100%; aspect-ratio: 4/3;
    background: #0F1A2E; overflow: hidden;
  }
  .mi-slide {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    opacity: 0; transition: opacity .3s;
  }
  .mi-slide.active { opacity: 1; }
  .mi-stage::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15,26,46,0.5) 0%, transparent 22%, transparent 75%, rgba(11,35,71,.55) 100%);
    pointer-events: none;
  }
  .mi-id {
    position: absolute; top: 14px; right: 14px; z-index: 3;
    background: rgba(15,26,46,0.7); color: #fff;
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
    padding: 4px 10px; border-radius: 999px;
  }
  .mi-watermark {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    text-align: center; color: rgba(255,255,255,.18);
    font-family: var(--font-serif); font-weight: 600; letter-spacing: 0.18em;
    pointer-events: none; user-select: none;
  }
  .mi-watermark .wm-mark { display: block; font-size: 48px; line-height: 1; }
  .mi-watermark .wm-sub { display: block; margin-top: 4px; font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.1em; font-weight: 600; }
  .mi-counter {
    position: absolute; bottom: 14px; right: 14px; z-index: 3;
    background: rgba(15,26,46,0.7); color: #fff;
    font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
    font-variant-numeric: tabular-nums;
  }
  .mi-back-btn {
    position: absolute; top: 14px; left: 14px; z-index: 3;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(15,26,46,0.5); color: #fff;
    display: grid; place-items: center; border: none; cursor: pointer;
    backdrop-filter: blur(4px);
  }
  .mi-thumbs {
    display: flex; gap: 6px; padding: 10px 12px; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; background: #fff;
  }
  .mi-thumbs::-webkit-scrollbar { display: none; }
  .mi-thumb {
    flex: 0 0 70px; height: 54px; border-radius: 4px;
    background-size: cover; background-position: center;
    border: 2px solid transparent; cursor: pointer; padding: 0;
    transition: border-color .2s;
  }
  .mi-thumb.active { border-color: var(--c-primary); }

  .mi-head { background: #fff; padding: 14px 18px 18px; border-bottom: 1px solid var(--c-line-soft); }
  .mi-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
  .mi-tag {
    display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 8px;
    border-radius: 3px; letter-spacing: -0.005em;
  }
  .mi-tag.jeonse { background: #E5F3EC; color: var(--c-tag-jeonse); border: 1px solid #C2E0CF; }
  .mi-tag.sale { background: #FFF1E5; color: var(--c-tag-monthly); border: 1px solid #FFD9B5; }
  .mi-tag.monthly { background: #FCEAEA; color: #B23030; border: 1px solid #F1C6C6; }
  .mi-tag.inst { background: #E8EEFC; color: var(--c-primary); border: 1px solid #C8D3EE; }
  .mi-tag.kind { background: #EAF0F8; color: var(--c-primary); border: 1px solid #C7D6EE; }
  .mi-tag.id { background: var(--c-bg-sunk); color: var(--c-ink-muted); border: 1px solid var(--c-line); }
  .mi-tag.rec { background: var(--c-accent-soft); color: #6B4C12; border: 1px solid var(--c-accent); }
  .mi-title {
    font-size: 18px; font-weight: 700; color: var(--c-ink); margin: 0 0 14px;
    letter-spacing: -0.015em; line-height: 1.35; text-wrap: pretty;
  }
  .mi-price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
  .mi-price-lbl { font-size: 12.5px; font-weight: 700; color: var(--c-tag-jeonse); letter-spacing: -0.005em; }
  .mi-price-val {
    font-size: 24px; font-weight: 800; color: var(--c-ink); letter-spacing: -0.02em;
    font-family: var(--font-serif);
  }
  .mi-loc {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; color: var(--c-ink-muted); font-weight: 500; letter-spacing: -0.005em;
    margin: 10px 0 14px;
  }
  .mi-loc svg { color: var(--c-primary); }
  .mi-specs {
    list-style: none; padding: 12px 10px; margin: 0 0 16px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    background: var(--c-bg-alt); border-radius: 8px;
  }
  .mi-specs li {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 11px; color: var(--c-ink-muted); text-align: center;
  }
  .mi-specs .ico {
    width: 28px; height: 28px; border-radius: 50%; background: #fff;
    display: grid; place-items: center; color: var(--c-primary);
    margin-bottom: 2px;
  }
  .mi-specs .val { font-size: 12px; color: var(--c-ink); font-weight: 700; letter-spacing: -0.005em; }
  .mi-cta-grid { display: grid; grid-template-columns: 48px 1fr 1fr; gap: 6px; }
  .mi-cta-grid > * {
    height: 44px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 13.5px; font-weight: 700; letter-spacing: -0.005em;
    border: none; cursor: pointer; font-family: inherit; text-decoration: none;
  }
  .mi-heart { background: #fff; border: 1px solid var(--c-line); color: var(--c-ink-muted); padding: 0; }
  .mi-heart.on { color: var(--c-heart); border-color: var(--c-heart); }
  .mi-heart.on svg { fill: currentColor; }
  .mi-call { background: #fff; border: 1px solid var(--c-primary); color: var(--c-primary); }
  .mi-inquiry { background: var(--c-primary); color: #fff; }
  .mi-inquiry:active { background: var(--c-primary-dark); }

  .mi-agent { background: #fff; padding: 12px 18px; border-bottom: 1px solid var(--c-line); }
  .mi-agent-row { display: flex; align-items: center; gap: 12px; }
  .mi-agent-av {
    width: 42px; height: 42px; border-radius: 50%; background: var(--c-primary);
    color: #fff; display: grid; place-items: center;
    font-family: var(--font-serif); font-size: 18px; font-weight: 600;
    flex: 0 0 auto;
  }
  .mi-agent-meta { flex: 1; min-width: 0; }
  .mi-agent-meta .role {
    font-size: 10.5px; color: var(--c-ink-faint); font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3;
  }
  .mi-agent-meta .name {
    font-size: 14.5px; font-weight: 700; color: var(--c-ink); letter-spacing: -0.005em;
    margin-top: 2px;
  }
  .mi-agent-meta .name .title { font-weight: 500; color: var(--c-ink-muted); font-size: 12.5px; margin-left: 3px; }
  .mi-agent-call {
    width: 38px; height: 38px; border-radius: 50%; background: var(--c-bg-alt);
    color: var(--c-primary); display: grid; place-items: center;
  }

  .mi-tabs {
    position: sticky; top: 64px; z-index: 20;
    background: #fff; border-bottom: 1px solid var(--c-line);
    display: flex; overflow-x: auto; padding: 0 16px;
    scrollbar-width: none;
  }
  .mi-tabs::-webkit-scrollbar { display: none; }
  .mi-tabs a {
    flex: 1 0 auto; min-width: 80px; text-align: center;
    padding: 12px 12px; font-size: 13.5px; font-weight: 600; color: var(--c-ink-muted);
    letter-spacing: -0.005em; position: relative; text-decoration: none;
  }
  .mi-tabs a.active { color: var(--c-primary); font-weight: 700; }
  .mi-tabs a.active::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2.5px;
    background: var(--c-primary);
  }

  .mi-section { background: #fff; padding: 18px 18px 22px; margin-top: 8px; scroll-margin-top: 130px; }
  .mi-section-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
  }
  .mi-section-head h2 {
    font-size: 15.5px; font-weight: 700; color: var(--c-ink); margin: 0;
    letter-spacing: -0.005em; display: flex; align-items: center; gap: 8px;
  }
  .mi-section-head h2 .ico {
    width: 24px; height: 24px; border-radius: 4px; background: var(--c-primary); color: #fff;
    display: grid; place-items: center;
  }
  .mi-section-head .more {
    font-size: 12px; font-weight: 600; color: var(--c-ink-muted); letter-spacing: -0.005em;
  }

  .mi-kv { margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
  .mi-kv .row {
    display: grid; grid-template-columns: 96px 1fr; gap: 10px;
    padding: 10px 4px; border-bottom: 1px solid var(--c-line-soft);
    align-items: center;
  }
  .mi-kv .row:last-child { border-bottom: none; }
  .mi-kv dt {
    font-size: 12.5px; font-weight: 600; color: var(--c-ink-faint);
    letter-spacing: -0.005em; margin: 0;
  }
  .mi-kv dd {
    font-size: 13px; font-weight: 500; color: var(--c-ink); margin: 0;
    letter-spacing: -0.005em; line-height: 1.5; word-break: keep-all;
  }
  .mi-kv dd strong { font-weight: 700; color: var(--c-ink); }
  .mi-kv dd.muted { color: var(--c-ink-faint); }

  .mi-desc { font-size: 14px; line-height: 1.75; color: var(--c-ink); letter-spacing: -0.005em; }
  .mi-desc p { margin: 0 0 12px; text-wrap: pretty; }
  .mi-desc img { max-width: 100%; height: auto; border-radius: 6px; margin: 10px 0; }

  .mi-map {
    position: relative; width: 100%; aspect-ratio: 4/3;
    border-radius: 8px; overflow: hidden; border: 1px solid var(--c-line);
    background: #DCEAF5;
  }
  .mi-map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  .mi-map-canvas:empty { display: none; }
  .mi-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .mi-pin { position: absolute; left: 50%; top: 50%; width: 1px; height: 1px; z-index: 3; }
  .mi-pin-dot {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    width: 14px; height: 14px; background: var(--c-primary); border: 3px solid #fff;
    border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  }
  .mi-pin-pulse {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    width: 30px; height: 30px; border-radius: 50%; background: rgba(20,54,107,0.22);
    animation: miPulse 2.2s ease-out infinite;
  }
  @keyframes miPulse {
    0% { transform: translate(-50%,-50%) scale(1); opacity: 0.6; }
    100% { transform: translate(-50%,-50%) scale(4); opacity: 0; }
  }
  .mi-map-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
  .mi-map-cta .mapbtn {
    display: flex; align-items: center; justify-content: center;
    height: 42px; border-radius: 6px; font-size: 12.5px; font-weight: 700;
    letter-spacing: -0.005em; text-decoration: none;
  }
  .mi-map-cta .mapbtn.kakao { background: #fee500; color: #1A1A1A; }
  .mi-map-cta .mapbtn.naver { background: #03c75a; color: #fff; }

  .mi-similar {
    display: flex; gap: 10px; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin: 0 -18px; padding: 0 18px 4px;
  }
  .mi-similar::-webkit-scrollbar { display: none; }
  .mi-similar .card {
    flex: 0 0 200px; background: #fff; border: 1px solid var(--c-line); border-radius: 8px;
    overflow: hidden; text-decoration: none;
  }
  .mi-similar .thumb {
    position: relative; width: 100%; aspect-ratio: 4/3;
    background-size: cover; background-position: center;
    background-color: var(--c-bg-sunk);
  }
  .mi-similar .badge {
    position: absolute; top: 6px; left: 6px;
    background: var(--c-accent); color: #1A1308;
    font-size: 10.5px; font-weight: 700; padding: 3px 7px; border-radius: 3px;
    letter-spacing: -0.005em;
  }
  .mi-similar .body { padding: 10px 12px 12px; }
  .mi-similar .loc { font-size: 11px; color: var(--c-ink-faint); font-weight: 500; margin-bottom: 4px; }
  .mi-similar .title {
    font-size: 13px; font-weight: 700; color: var(--c-ink); margin: 0 0 4px;
    letter-spacing: -0.005em; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .mi-similar .meta { font-size: 11.5px; color: var(--c-ink-muted); margin-bottom: 6px; }
  .mi-similar .price {
    font-size: 13.5px; font-weight: 700; color: var(--c-ink); letter-spacing: -0.005em;
    display: flex; align-items: center; gap: 5px;
  }
  .mi-similar .price .t-jeonse { color: var(--c-tag-jeonse); font-size: 11px; }
  .mi-similar .price .t-sale { color: var(--c-tag-monthly); font-size: 11px; }
  .mi-similar .price .t-monthly { color: #B23030; font-size: 11px; }
  .mi-similar .price .t-inst { color: var(--c-primary); font-size: 11px; }

  .mi-stick {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: #fff; border-top: 1px solid var(--c-line);
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: 48px 1fr 2fr; gap: 8px;
    box-shadow: 0 -2px 12px rgba(15,26,46,0.06);
  }
  .mi-stick > * {
    height: 46px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 14px; font-weight: 700; letter-spacing: -0.005em;
    border: none; cursor: pointer; font-family: inherit; text-decoration: none;
  }
  .mi-stick-heart { background: #fff; border: 1px solid var(--c-line); color: var(--c-ink-muted); padding: 0; }
  .mi-stick-heart.on { color: var(--c-heart); border-color: var(--c-heart); }
  .mi-stick-heart.on svg { fill: currentColor; }
  .mi-stick-call { background: #fff; border: 1px solid var(--c-primary); color: var(--c-primary); }
  .mi-stick-inquiry { background: var(--c-primary); color: #fff; }
  .mi-stick-inquiry:active { background: var(--c-primary-dark); }

  /* ============================================================
     MOBILE ITEMS LIST (il-) — 매물 리스트 페이지 전용.
     검색바 + 카테고리 핀 + 결과/정렬 + 카드 리스트(2-col grid) + load more.
     ============================================================ */
  .il-search { padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--c-line-soft); }
  .il-search-bar {
    display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px;
    border: 1.5px solid var(--c-primary); border-radius: 8px; background: #fff;
  }
  .il-search-bar svg { color: var(--c-primary); flex: 0 0 auto; }
  .il-search-bar input {
    flex: 1; border: none; outline: none; font-size: 14px; background: transparent; font-family: inherit;
  }
  .il-search-bar input::placeholder { color: var(--c-ink-faint); }

  .il-filters {
    position: sticky; top: 64px; z-index: 20;
    background: #fff; border-bottom: 1px solid var(--c-line);
    display: flex; gap: 6px; padding: 10px 14px; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .il-filters::-webkit-scrollbar { display: none; }
  .il-pill {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 7px 12px; border: 1px solid var(--c-line); border-radius: 999px;
    background: #fff; color: var(--c-ink-muted);
    font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em;
    text-decoration: none; white-space: nowrap;
  }
  .il-pill.all { background: var(--c-primary); color: #fff; border-color: var(--c-primary); font-weight: 700; }
  .il-pill.all svg { color: #fff; }
  .il-pill.active:not(.all) { background: #EAF0F8; color: var(--c-primary); border-color: var(--c-primary); font-weight: 700; }
  .il-pill .count {
    display: inline-grid; place-items: center;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--c-bg-sunk); color: var(--c-ink-muted); font-size: 10.5px; font-weight: 700;
    margin-left: 2px;
  }
  .il-pill.all .count, .il-pill.active .count { background: var(--c-primary); color: #fff; }

  .il-meta {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 10px; background: #fff;
  }
  .il-meta .count { font-size: 12.5px; color: var(--c-ink-muted); letter-spacing: -0.005em; }
  .il-meta .count strong {
    font-family: var(--font-serif); font-size: 16px; font-weight: 600;
    color: var(--c-primary); margin-right: 2px; letter-spacing: -0.01em;
  }
  .il-sort {
    display: inline-flex; align-items: center; gap: 4px;
    background: transparent; border: none; cursor: pointer; font-family: inherit;
    font-size: 12.5px; font-weight: 600; color: var(--c-ink); letter-spacing: -0.005em;
    text-decoration: none;
  }
  .il-sort svg { color: var(--c-ink-muted); }
  .il-sort .caret { font-size: 9px; color: var(--c-ink-faint); margin-left: 1px; }

  .il-list { list-style: none; padding: 0; margin: 0; background: #fff; }
  .il-card { border-bottom: 1px solid var(--c-line-soft); }
  .il-card:last-child { border-bottom: none; }
  .il-card-link {
    display: grid; grid-template-columns: 124px 1fr; gap: 12px;
    padding: 14px 16px; text-decoration: none; color: inherit;
  }
  .il-card-link:active { background: var(--c-bg-alt); }

  .il-thumb {
    position: relative; aspect-ratio: 1/1; border-radius: 6px; overflow: hidden;
    background-size: cover; background-position: center;
    background-color: var(--c-bg-sunk);
  }
  .il-badge {
    position: absolute; top: 0; left: 8px;
    font-size: 10.5px; font-weight: 700; padding: 4px 7px 6px;
    letter-spacing: -0.005em; height: 22px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
  }
  .il-badge.rec { background: var(--c-accent); color: #1A1308; }
  .il-badge.new { background: #C0392B; color: #fff; }
  .il-heart {
    position: absolute; top: 6px; right: 6px;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,0.92); color: var(--c-ink-faint);
    border: none; display: grid; place-items: center; cursor: pointer;
    padding: 0;
  }
  .il-heart.on { color: var(--c-heart); }
  .il-heart.on svg { fill: currentColor; }

  .il-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .il-tags { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
  .il-tag {
    font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 3px; letter-spacing: -0.005em;
  }
  .il-tag.jeonse { background: #E5F3EC; color: var(--c-tag-jeonse); border: 1px solid #C2E0CF; }
  .il-tag.sale { background: #FFF1E5; color: var(--c-tag-monthly); border: 1px solid #FFD9B5; }
  .il-tag.monthly { background: #FCEAEA; color: #B23030; border: 1px solid #F1C6C6; }
  .il-tag.inst { background: #E8EEFC; color: var(--c-primary); border: 1px solid #C8D3EE; }
  .il-tag.kind { background: #EAF0F8; color: var(--c-primary); border: 1px solid #C7D6EE; }
  .il-id {
    font-size: 10.5px; color: var(--c-ink-faint); font-weight: 600;
    letter-spacing: -0.005em; margin-left: auto;
  }
  .il-title {
    font-size: 14px; font-weight: 700; color: var(--c-ink); margin: 2px 0 0;
    line-height: 1.4; letter-spacing: -0.01em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .il-loc { font-size: 11.5px; color: var(--c-ink-muted); letter-spacing: -0.005em; }
  .il-meta-row {
    font-size: 11.5px; color: var(--c-ink-muted); letter-spacing: -0.005em; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  }
  .il-price-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
    margin-top: 3px;
  }
  .il-price {
    font-size: 15px; font-weight: 800; color: var(--c-ink); letter-spacing: -0.01em;
  }
  .il-price .t-jeonse,
  .il-price .t-sale,
  .il-price .t-monthly,
  .il-price .t-inst {
    font-size: 11px; font-weight: 700; margin-right: 3px; padding: 1px 5px; border-radius: 3px;
  }
  .il-price .t-jeonse { background: #E5F3EC; color: var(--c-tag-jeonse); }
  .il-price .t-sale { background: #FFF1E5; color: var(--c-tag-monthly); }
  .il-price .t-monthly { background: #FCEAEA; color: #B23030; }
  .il-price .t-inst { background: #E8EEFC; color: var(--c-primary); }

  .il-more { padding: 18px 16px 26px; background: #fff; }
  .il-more a, .il-more button {
    width: 100%; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 14px 16px; border: 1px solid var(--c-line); border-radius: 8px;
    background: #fff; color: var(--c-ink); font-family: inherit; cursor: pointer;
    text-decoration: none;
    transition: border-color .15s, background .15s;
  }
  .il-more a:active, .il-more button:active { background: var(--c-bg-alt); border-color: var(--c-primary); }
  .il-more .lbl { font-size: 14px; font-weight: 700; color: var(--c-ink); letter-spacing: -0.005em; }
  .il-more .meta { font-size: 11px; color: var(--c-ink-faint); font-weight: 500; }
}