/* 매물 상세(/listings/:logNo) 전용 스타일. base.css 의 토큰·버튼·배지·비교 박스·카드·상담 버튼을 그대로 쓴다.
   모바일 우선(390px) → 600px → 960px(사진 + 가격 카드 두 칸). 동적 값은 없다(인라인 style 없음). */

/* ───────── 상단 ───────── */
.ld-head { background: var(--bg-soft); }
.ld-head__inner { padding-top: 24px; padding-bottom: 24px; }
.ld-head__badges { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ld-head__badges .badge--jeonse { box-shadow: inset 0 0 0 1px var(--chip-line); }
.ld-head__title {
  margin-top: 12px;
  font-size: 28px; font-weight: 600; line-height: 1.3; letter-spacing: -.03em;
  overflow-wrap: anywhere;
}
.ld-head__meta { margin-top: 8px; font-size: 14px; color: var(--muted); }

/* 상태 배지: 거래 가능(초록 점) / 거래완료(진한 회색, 눈에 띄게) */
.ld-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 700; line-height: 1.4; white-space: nowrap;
}
.ld-status--active { background: var(--green-bg); color: var(--green-text); }
.ld-status__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ld-status--done { background: var(--ink); color: #FFFFFF; }

/* ───────── 사진 + 가격 카드 ───────── */
/* 블로그 대표 사진은 정사각형(대개 365px)이라 정사각형 칸에 그대로, 크게 늘리지 않는다 */
.ld-top { padding-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ld-media {
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: 1 / 1; border-radius: var(--radius-card);
  background: var(--placeholder);
}
.ld-media .thumb { transition: none; }
/* 사진이 없으면 자리표시만 — 작은 화면에서 정사각형 빈칸이 길게 남지 않게 낮춘다 */
.ld-media--empty { aspect-ratio: 16 / 9; }
.ld-media .thumb-ph { font-size: 14px; }
.ld-media--done .thumb { filter: grayscale(.35); }
.ld-media__done {
  position: absolute; left: 16px; top: 16px;
  padding: 8px 14px; border-radius: 10px;
  background: rgba(14, 23, 38, .88); color: #FFFFFF;
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
}

.ld-price {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px; border-radius: var(--radius-card); border: 1px solid var(--line); background: #FFFFFF;
}
.ld-price__label { font-size: 14px; font-weight: 700; color: var(--brand); }
.ld-price--done .ld-price__label { color: var(--muted); }
.ld-price__value { font-size: 32px; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; }
.ld-price--done .ld-price__value { color: var(--ink-2); }
.ld-price__sub { font-size: 14px; color: var(--ink-2); }
.ld-price__change {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 15px; color: var(--accent-text);
}
.ld-price__change s { color: var(--muted); }
.ld-price__change .icon { color: var(--accent-text); }
.ld-price__note { font-size: 12px; color: var(--muted); }
.ld-keys {
  margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line-2);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px;
}
.ld-keys__item { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ld-keys dt { font-size: 12px; color: var(--muted); }
.ld-keys dd { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.ld-price__stale {
  margin-top: 4px; padding: 10px 12px; border-radius: 12px;
  background: var(--accent-bg); color: var(--accent-text);
  font-size: 13px; line-height: 1.6;
}
.ld-price__actions { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.ld-price__blog .icon { transition: transform .28s var(--ease-out); }
.ld-price__blog:hover .icon { transform: translateX(4px); }

.ld-done {
  margin-bottom: 8px; padding: 14px 16px; border-radius: 14px;
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--ink); color: #FFFFFF;
}
.ld-done .icon { margin-top: 2px; color: var(--light-blue); }
.ld-done__title { display: block; font-size: 16px; font-weight: 700; }
.ld-done__body { display: block; margin-top: 2px; font-size: 13px; line-height: 1.6; color: var(--dark-soft); }

/* ───────── 본문 + 상담 ───────── */
.ld-body { padding-top: 32px; display: flex; flex-direction: column; gap: 32px; }
.ld-main { min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.ld-sec { min-width: 0; }
.ld-sec__title { font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.4; }
.ld-sec__note { margin-top: 10px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.ld-sec__text { margin-top: 12px; font-size: 15px; line-height: 1.75; color: var(--ink-2); }
.ld-sec .cmp { margin-top: 14px; }
.ld-sec .arrow-link { margin-top: 6px; }

.ld-facts {
  margin-top: 14px;
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #FFFFFF;
}
.ld-facts__row {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 14px 18px; border-top: 1px solid var(--line-2);
}
.ld-facts__row:first-child { border-top: 0; }
.ld-facts dt { font-size: 14px; color: var(--muted); }
.ld-facts dd { font-size: 15px; font-weight: 600; line-height: 1.55; overflow-wrap: anywhere; }
.ld-link { color: var(--brand); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ld-link:hover { color: var(--deep); }

.ld-about {
  margin-top: 14px; padding: 18px 20px; border-radius: 16px; background: var(--bg-soft);
  font-size: 15px; line-height: 1.8; color: var(--ink-2); overflow-wrap: anywhere;
}
.ld-about__link { margin-top: 8px; }

.ld-contact {
  display: flex; flex-direction: column; gap: 12px;
  padding: 24px 20px; border-radius: var(--radius-card-lg);
  background: var(--deep); color: #FFFFFF;
}
.ld-contact__title { font-size: 21px; font-weight: 600; letter-spacing: -.02em; line-height: 1.4; }
.ld-contact__intro { font-size: 15px; line-height: 1.7; color: var(--dark-soft); }
.ld-contact .contact-list { margin-top: 6px; }

/* ───────── 함께 보면 좋은 매물 ───────── */
.ld-related { padding-top: 48px; padding-bottom: 64px; }
.ld-related__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 24px; }
.ld-related__title { font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.4; }
.ld-related__sub { margin-top: 4px; font-size: 13px; color: var(--muted); }
.ld-related__grid {
  margin-top: 16px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px;
}

/* ───────── 600px 이상 ───────── */
@media (min-width: 600px) {
  .ld-head__inner { padding-top: 40px; padding-bottom: 36px; }
  .ld-head__badges { margin-top: 18px; }
  .ld-status { padding: 6px 14px; font-size: 14px; }
  .ld-head__title { margin-top: 14px; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.25; }
  .ld-head__meta { margin-top: 10px; font-size: 15px; }

  .ld-top { padding-top: 28px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 20px; }
  .ld-media { border-radius: var(--radius-card-lg); }
  .ld-media--empty { aspect-ratio: 1 / 1; }
  .ld-price { padding: 26px 28px; border-radius: var(--radius-card-lg); }
  .ld-price__value { font-size: 40px; }
  .ld-keys { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .ld-body { padding-top: 48px; gap: 40px; }
  .ld-main { gap: 44px; }
  .ld-sec__title { font-size: 24px; }
  .ld-facts { margin-top: 18px; }
  .ld-facts__row { grid-template-columns: 120px minmax(0, 1fr); padding: 16px 22px; }
  .ld-facts dd { font-size: 16px; }
  .ld-about { padding: 22px 26px; font-size: 16px; }
  .ld-contact { padding: 32px; }
  .ld-contact__title { font-size: 24px; }

  .ld-related { padding-top: 72px; padding-bottom: 96px; }
  .ld-related__title { font-size: 28px; }
  .ld-related__grid { margin-top: 24px; gap: 20px; }
}

/* ───────── 960px 이상: 사진 | 가격 카드, 본문 | 상담 ───────── */
@media (min-width: 960px) {
  .ld-top { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); align-items: stretch; gap: 28px; }
  .ld-price { padding: 32px 36px; justify-content: center; }
  .ld-price__actions { flex-direction: row; flex-wrap: wrap; margin-top: 22px; }
  .ld-price__actions .btn { flex: 1 1 220px; width: auto; }

  .ld-body { flex-direction: row; align-items: flex-start; gap: 28px; }
  .ld-main { flex: 1 1 auto; }
  .ld-contact { flex: 0 0 380px; position: sticky; top: 24px; }
}

@media (min-width: 1200px) {
  .ld-top { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); }
  .ld-contact { flex-basis: 420px; }
}

/* 노출 기간이 지난 진행 매물: '거래 가능' 대신 확인 필요 */
.ld-status--check { background: var(--accent-bg); color: var(--accent-text); }

/* 토지거래허가구역 안내 */
.ld-permit {
  margin-top: 4px; padding: 12px 14px; border-radius: 12px;
  background: var(--bg-cmp); border: 1px solid var(--line);
}
.ld-permit__title { font-size: 14px; font-weight: 700; color: var(--brand); }
.ld-permit__body { margin-top: 4px; font-size: 13px; line-height: 1.65; color: var(--ink-2); }

/* 명시사항 표: 아직 확인되지 않은 값 / 공공데이터에서 채운 값 */
.ld-facts__na { color: var(--muted); }
.ld-facts__note { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--muted); }