/* 건축물대장(표제부) 모달 — 실거래 사례 카드 공용. transactions·address 등에서 로드. */

/* 카드 머리말의 건축물대장 아이콘 버튼(범용) */
.case-building {
  display:grid; width:34px; height:34px; padding:0; place-items:center;
  border:1px solid #c9d8d1; border-radius:10px;
  color:#405149; background:#f5f8f6; cursor:pointer;
  box-shadow:0 2px 7px rgba(25,48,34,.06);
  transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease;
}
.case-building svg {
  width:18px; height:18px; fill:none; stroke:currentColor;
  stroke-width:1.85; stroke-linecap:round; stroke-linejoin:round;
}
.case-building:hover {
  border-color:#8fbbaa; color:#075b42; background:#edf7f2; transform:translateY(-1px);
}
.case-building:focus-visible {
  outline:3px solid rgba(8,118,83,.16); outline-offset:2px;
}

/* 모달: listing-overview 와 같은 방식(네이티브 dialog + 백드롭, 중앙). */
.building-dialog {
  width:min(640px,calc(100vw - 32px)); max-width:640px;
  max-height:calc(100dvh - 40px); padding:0;
  border:1px solid rgba(210,221,215,.9); border-radius:22px;
  background:#f7faf8; color:#17211d;
  box-shadow:0 32px 90px rgba(15,35,27,.3); overflow:hidden;
  font-family:"Pretendard Variable",Pretendard,var(--font-sans,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif);
}
.building-dialog::backdrop { background:rgba(19,31,26,.5); backdrop-filter:blur(4px); }
.building-dialog:focus { outline:0; }
.building-shell {
  position:relative; max-height:calc(100dvh - 40px); padding:26px 28px 24px;
  overflow:auto; box-sizing:border-box; scrollbar-width:thin; scrollbar-color:#c9d5cf transparent;
  counter-reset:building-sec;
}
.building-close {
  position:absolute; top:18px; right:18px; z-index:2;
  display:grid; width:34px; height:34px; padding:0; place-items:center;
  border:1px solid #d9e3de; border-radius:11px; background:#eef3f0;
  color:#405149; font-size:19px; font-weight:400; line-height:1; cursor:pointer;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.building-close:hover { color:#15241e; background:#e2ebe6; transform:rotate(3deg); }
.building-close:focus-visible { outline:3px solid rgba(8,118,83,.16); outline-offset:2px; }
.building-head {
  padding:1px 46px 19px 0; border-bottom:1px solid #cfdcd5;
}
.building-head .building-eyebrow {
  display:flex; align-items:center; min-height:22px; margin:0 0 7px;
  color:#087653; font-size:11.5px; font-weight:750; line-height:1.2; letter-spacing:-.01em;
}
.building-head h2 {
  margin:0; color:#16211c; font-size:20px; font-weight:780;
  line-height:1.38; letter-spacing:-.035em; word-break:keep-all;
}
.building-card {
  margin-top:18px; padding:17px 18px 16px;
  border:1px solid #dce6e1; border-radius:16px; background:#fff;
  box-shadow:0 8px 24px rgba(27,62,46,.045);
}
.building-card.closed { background:#faf8f5; border-color:#ead9c9; }
.building-card-head { display:flex; align-items:center; gap:9px; margin-bottom:13px; }
.building-card-head::before,
.building-floors-title::before {
  display:grid; width:25px; height:25px; flex:0 0 25px; place-items:center;
  border-radius:50%; color:#fff; background:#087653;
  font-size:10.5px; font-weight:800; letter-spacing:-.02em;
  counter-increment:building-sec; content:counter(building-sec, decimal-leading-zero);
}
.building-card-head h3 { margin:0; font-size:16px; font-weight:780; letter-spacing:-.025em; }
.building-badge { margin-left:auto; padding:3px 8px; border-radius:999px; background:#f5e8dc; color:#8a5a22; font-size:10.5px; font-weight:750; }
.building-grid { display:grid; grid-template-columns:1fr 1fr; column-gap:24px; margin:0; }
.building-grid > div {
  display:grid; grid-template-columns:78px minmax(0,1fr); align-items:start; gap:8px;
  min-width:0; padding:8px 0; border-top:1px solid #edf1ef;
}
.building-grid > div:nth-child(-n+2) { border-top:0; padding-top:1px; }
.building-grid dt { color:#6b7872; font-size:13.5px; font-weight:650; line-height:1.45; }
.building-grid dd {
  margin:0; color:#1b2923; font-size:13.5px; font-weight:700;
  line-height:1.45; letter-spacing:-.018em; word-break:keep-all;
}
.building-empty { padding:40px 10px; color:#64746c; font-size:13.5px; line-height:1.7; text-align:center; }
.building-empty small { color:#8a968f; font-size:12px; }
.building-loading { display:grid; min-height:220px; place-items:center; color:#64746c; font-size:13.5px; }
.building-note { margin:14px 3px 0; color:#89968f; font-size:10.5px; font-weight:500; line-height:1.55; }

@media (max-width:460px) {
  .building-dialog { width:calc(100vw - 16px); max-height:calc(100dvh - 48px); border-radius:18px; }
  .building-shell { max-height:calc(100dvh - 48px); padding:21px 17px 19px; }
  .building-close { top:13px; right:13px; width:32px; height:32px; }
  .building-head { padding-right:38px; padding-bottom:16px; }
  .building-head h2 { font-size:17px; line-height:1.42; }
  .building-card { margin-top:14px; padding:15px 14px 13px; border-radius:14px; }
  .building-grid { column-gap:14px; }
  .building-grid > div { grid-template-columns:1fr; gap:2px; padding:8px 0; }
  .building-grid dt { font-size:12.5px; }
  .building-grid dd { font-size:12.5px; }
}

/* 관리자 폴백 경보 배너(상세 DB 못 읽을 때만) */
.building-admin-banner { margin:13px 0 0; padding:10px 13px; border-radius:12px; font-size:12.5px; font-weight:650; line-height:1.45; letter-spacing:-.01em; }
.building-admin-banner b { font-weight:800; }
.building-admin-banner.warn { background:#fbe6c9; color:#7a4a00; border:1px solid #f0cf9a; }
.building-admin-banner.crit { background:#fbdcdc; color:#9c1414; border:1px solid #f2b8b8; }

/* source 뱃지 + 층별 개요 표 */
.building-src { display:inline-block; margin-left:7px; padding:3px 7px; border-radius:999px; font-size:10px; font-weight:750; line-height:1; vertical-align:middle; letter-spacing:-.01em; }
.building-src.usb { background:#e6f2ec; color:#176047; }
.building-src.api { background:#fbe6c9; color:#8a5300; }
.building-src.local { background:#fbdcdc; color:#b11818; }
.building-floors-wrap {
  margin-top:14px; padding:16px 18px 12px; overflow-x:auto;
  border:1px solid #dce6e1; border-radius:16px; background:#fff;
  box-shadow:0 8px 24px rgba(27,62,46,.035);
}
.building-floors-title { display:flex; align-items:center; gap:9px; margin:0 0 13px; font-size:15px; font-weight:780; letter-spacing:-.025em; color:#17211d; }

.building-floors { width:100%; min-width:460px; border-collapse:collapse; font-size:12.5px; }
.building-floors th, .building-floors td { padding:8px 9px; border-bottom:1px solid #e8eeeb; text-align:right; white-space:nowrap; }
.building-floors th { color:#637169; font-weight:650; font-size:12.5px; border-bottom:1px solid #d7e1dc; background:#f4f8f6; position:sticky; top:0; }
.building-floors td:nth-child(1), .building-floors th:nth-child(1) { text-align:left; font-weight:700; color:#17211d; }
.building-floors td:nth-child(2), .building-floors th:nth-child(2) { text-align:left; white-space:normal; color:#2c3a34; }
.building-floors tbody tr:last-child td { border-bottom:0; }
/* 기본(패드·데스크탑): 면적(㎡)·평 두 칼럼 그대로. 최협폭용 요소는 숨긴다. */
.building-floors .fl-py-inline, .building-floors .n-only { display:none; }

/* 폰 폭(≤460px)에서 — 평 칼럼을 접고 면적을 ㎡(평) 한 칸으로 합친 뒤,
   3칼럼(층·용도·면적)을 카드 폭에 고르게 펼쳐 간격을 넉넉히 준다. 가로 스크롤 없음. */
@media (max-width:460px) {
  .building-floors { width:100%; min-width:0; table-layout:fixed; }
  .building-floors th, .building-floors td { padding:7px 6px; }
  .building-floors-wrap { padding-left:14px; padding-right:14px; }
  .building-floors .fl-py { display:none; }
  .building-floors .w-only { display:none; }
  .building-floors .n-only { display:inline; }
  .building-floors td:nth-child(1), .building-floors th:nth-child(1) { width:30%; }
  .building-floors td:nth-child(2), .building-floors th:nth-child(2) { width:40%; }
  .building-floors td.fl-m2, .building-floors th.fl-m2 { width:30%; text-align:left; white-space:normal; }
  .building-floors td.fl-m2 .fl-py-inline { display:inline; color:#5c6b64; font-weight:600; }
}

/* 카드 머리말: 거리 + 건축물대장 아이콘 묶음(그리드 auto 열) */
.case-head-actions { display:flex; align-items:center; gap:6px; }