/* 매물 상세 위쪽 (views/parts/item_detail.ejs) - 새 화면(web/src/pages/item-page.tsx)과 같은 모양
   PC(1024px 이상)는 사진 왼쪽 · 정보 오른쪽, 그보다 좁으면 위아래 */
.id-wrap { display: grid; gap: 24px; font-family: "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; color: #222; }
.id-wrap *, .id-wrap *::before, .id-wrap *::after { box-sizing: border-box; }
@media (min-width: 1024px) {
  .id-wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}
.id-main { position: relative; overflow: hidden; border: 1px solid #e4e4e7; border-radius: 12px; background: #f4f4f5; touch-action: pan-y; }
.id-main #idImg { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.id-contract { position: absolute; top: -16px; left: -8px; height: 110px; z-index: 2; pointer-events: none; }
.id-nav { position: absolute; top: 50%; width: 36px; height: 36px; margin-top: -18px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .35); color: #fff; font-size: 24px; line-height: 36px; cursor: pointer; }
.id-nav.prev { left: 8px; } .id-nav.next { right: 8px; }
.id-count { position: absolute; right: 10px; bottom: 10px; padding: 3px 9px; border-radius: 10px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; }
.id-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.id-thumbs button { padding: 0; overflow: hidden; border: 1px solid #e4e4e7; border-radius: 8px; background: #f4f4f5; cursor: pointer; }
.id-thumbs button.on { border-color: #1a4d8f; box-shadow: 0 0 0 2px #1a4d8f; }
.id-thumbs img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.id-info { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.id-title { margin: 0; padding-bottom: 4px; border-bottom: 2px solid #000; font-size: 22px; font-weight: bold; color: #333; line-height: 1.35; }
.id-addr { font-size: 14px; color: #71717a; line-height: 1.5; }
.id-table { overflow: hidden; border: 1px solid #e4e4e7; border-radius: 12px; background: #fff; }
.id-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.id-table tr + tr th, .id-table tr + tr td { border-top: 1px solid #e4e4e7; }
.id-table th { width: 128px; padding: 9px 6px; background: #f5f5f5; color: #dd464d; font-weight: bold; text-align: center; vertical-align: middle; word-break: keep-all; }
.id-table td { padding: 9px 12px; line-height: 1.55; vertical-align: middle; word-break: keep-all; overflow-wrap: anywhere; }
.id-price { font-weight: bold; color: #dd464d; }
.id-danji { color: #71717a; line-height: 1.75; }
.id-near span { display: inline-block; max-width: 100%; margin-right: 14px; }
.id-near small { display: block; font-size: 11px; color: #999; }
.id-call { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 8px; background: #012023;
  color: #fff !important; font-size: 15px; font-weight: bold; text-decoration: none !important; }
.id-call:hover { background: #0b3a3f; }
@media (max-width: 767px) {
  .id-wrap { gap: 14px; padding: 8px 10px 0; }
  .id-title { font-size: 20px; }
  .id-table th { width: 96px; font-size: 13px; }
  .id-table td { padding: 8px 10px; }
  .id-call { height: 46px; font-size: 16px; }
}
/* PC: 표가 사진보다 길면 왼쪽 아래가 비므로 사진을 표 높이의 가운데에, 표 줄 간격은 촘촘하게 (위 기본값을 덮도록 맨 끝에) */
@media (min-width: 1024px) {
  .id-photos { align-self: center; }
  .id-info { gap: 10px; }
  .id-table th { padding: 6px 6px; }
  .id-table td { padding: 6px 12px; line-height: 1.45; }
  .id-call { height: 38px; }
}
/* PC 매물 상세: 본문 폭이 78%로 고정돼 오른쪽 바로가기 칸과 사이가 94px 비던 것 → 남은 폭을 모두 쓰고 20px만 띄움 */
.container > .item_maincontent { flex: 1; width: auto; min-width: 0; margin-right: 20px; }