/* ===============================
   건물모드 (Building Mode)
   건물현황 + 임대내역 표시
   - 깔끔한 카드형 레이아웃
   - 가독성 좋은 테이블/그리드
   =============================== */

.building-mode-sheet {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--topbar-h, 0) + env(safe-area-inset-top));
  bottom: 0;
  z-index: 5010;
  background: #f5f6f8;
  overflow: hidden;
}

.building-mode-sheet--panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.building-mode__wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ----- 헤더 ----- */
.building-mode__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 8px 14px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.building-mode__title {
  font-weight: 700;
  font-size: 17px;
  color: #1a1a1a;
  margin: 0;
}

.building-mode__back,
.building-mode__close {
  border: 0;
  background: transparent;
  font-size: 20px;
  color: #6b7280;
  cursor: pointer;
  padding: 8px 12px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  border-radius: 8px;
}

.building-mode__back:hover,
.building-mode__close:hover {
  background: #f3f4f6;
  color: #1a1a1a;
}

/* ----- 바디 ----- */
.building-mode__body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 10px 16px;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
}

/* ----- 푸터 (수정/취소/저장) - 세부내역서와 동일 스타일 ----- */
.building-mode__footer {
  flex-shrink: 0;
  background: #fff;
  padding: 16px 10px 24px;
  display: flex;
  gap: 10px;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.04);
}

.building-mode__footer:empty {
  display: none;
}

.building-mode__btn {
  flex: 1;
  padding: 14px 12px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.building-mode__btn--ghost {
  background: #fff;
  color: #1a1a1a;
}

.building-mode__btn--ghost:hover {
  background: #f9fafb;
}

.building-mode__btn--primary {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

.building-mode__btn--primary:hover {
  filter: brightness(0.96);
}

/* ----- 섹션 ----- */
.building-mode__section {
  background: #fff;
  border-radius: 12px;
  padding: 14px 12px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  min-width: 0;
}

.building-mode__section:last-child {
  margin-bottom: 0;
}

/* 건물정보 ↔ 임대내역 간격 (다른 카드와 동일: 12px) */
.building-mode__body [data-section="status"] {
  margin-bottom: 12px;
}

.building-mode__sectionTitle {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #e5e7eb;
}

.building-mode__unit {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
}

/* ----- 건물현황 그리드 ----- */
.building-mode__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
}

.building-mode__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.building-mode__row:first-child {
  grid-column: 1 / -1;
}

.building-mode__row--spacer,
.building-mode__editRow--spacer {
  height: 8px;
  min-height: 8px;
  grid-column: 1 / -1;
}

.building-mode__label {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.building-mode__value {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  word-break: break-word;
}

/* ----- 임대내역 테이블 (뷰 모드: 좌우 스크롤 없이 간격 좁힘) ----- */
.building-mode__tableWrap {
  overflow-x: hidden;
  margin: 0 -4px;
}

.building-mode__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 12px;
}

.building-mode__table th,
.building-mode__table td {
  padding: 6px 4px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  overflow: hidden;
  text-overflow: ellipsis;
}

.building-mode__table th {
  font-size: 10px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: #f9fafb;
}

.building-mode__table td {
  color: #374151;
}

.building-mode__table .col-unit {
  width: 15%;
  font-weight: 600;
}

.building-mode__table .col-struct {
  width: 18%;
}

.building-mode__table .col-num {
  width: 12%;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.building-mode__table .col-etc {
  width: 31%;
  font-size: 11px;
  color: #6b7280;
}

/* PC 버전: 임대내역 테이블 글자·여백을 조금 더 줄여서 숫자가 잘리지 않도록 조정 */
@media (min-width: 901px) {
  .building-mode__table {
    font-size: 11px;
  }
  .building-mode__table th {
    font-size: 9px;
    padding: 5px 4px;
  }
  .building-mode__table td {
    padding: 5px 4px;
  }
  .building-mode__table .col-etc {
    font-size: 10px;
  }
}

/* ----- 층별개요 (건물현황 아래) ----- */
.building-mode__floorOutlineWrap {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

.building-mode__floorOutlineTitle {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 8px 0;
}

.building-mode__table .col-floor {
  width: 12%;
}

.building-mode__table .col-division {
  width: 15%;
}

.building-mode__table .col-use {
  width: 38%;
}

.building-mode__table .col-area {
  width: 15%;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.building-mode__totalRow {
  background: #f0f9ff;
  font-weight: 700;
  color: #0c4a6e;
}

.building-mode__totalRow td {
  border-bottom: none;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* ----- 요약 그리드 ----- */
.building-mode__section--summary .building-mode__summaryGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.building-mode__summaryItem {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
}

.building-mode__summaryLabel {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.building-mode__summaryValue {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}


/* ----- 건축물대장(건축HUB) 불러오기 ----- */
.building-mode__section--hub {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
}

.building-mode__hubGuide {
  font-size: 12px;
  color: #0c4a6e;
  margin: 0 0 10px 0;
  line-height: 1.45;
}

.building-mode__hubRow {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.building-mode__hubRow .building-mode__pnuInput {
  flex: 1;
  min-width: 180px;
  font-variant-numeric: tabular-nums;
}

.building-mode__hubRow--addr {
  margin-top: 6px;
}

.building-mode__hubRow--addr .building-mode__addrBtn {
  font-size: 13px;
}

.building-mode__hubAddr {
  font-size: 12px;
  color: #4b5563;
  margin: 4px 0 6px 0;
}

.building-mode__hubAddrEmpty {
  color: #ef4444;
}

.building-mode__hubBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.building-mode__hubMsg {
  font-size: 12px;
  color: #0369a1;
  margin: 0;
  min-height: 1.4em;
}

/* ----- 건축HUB 추가 데이터 섹션 ----- */
.building-mode__section--hubData {
  background: #f8fafc;
  border-left: 3px solid #94a3b8;
}

.building-mode__section--hubData .building-mode__sectionTitle {
  font-size: 14px;
}

.building-mode__table--compact th,
.building-mode__table--compact td {
  padding: 5px 6px;
  font-size: 12px;
}

.building-mode__hubTags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.building-mode__hubTag {
  padding: 4px 10px;
  background: #e2e8f0;
  border-radius: 6px;
  font-size: 12px;
  color: #334155;
}

.building-mode__hubMeta {
  font-size: 13px;
  color: #475569;
}

.building-mode__hubMeta span {
  margin-right: 4px;
}

.building-mode__hubList {
  font-size: 13px;
  color: #475569;
}

.building-mode__editGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 8px;
  min-width: 0;
}

.building-mode__editRow {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.building-mode__editRow label {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
}

.building-mode__input {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-sizing: border-box;
}

.building-mode__addUnitRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.building-mode__unitGuide {
  margin-left: auto;
  font-size: 12px;
  color: #6b7280;
}

.building-mode__addUnit {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
  background: #eff6ff;
  border: 1px dashed #93c5fd;
  border-radius: 8px;
  cursor: pointer;
}


/* 임대내역 편집: 표 형식 (층.호|용도,2,3룸|보증금|월세|관리비|기타(만기, 크기)) */
.building-mode__tableWrap--edit {
  overflow-x: auto;
}

.building-mode__table--edit {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 0 auto;
}

.building-mode__table--edit thead th {
  padding: 6px 6px;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-align: left;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.building-mode__table--edit .col-unit {
  width: 12%;
}
.building-mode__table--edit .col-struct {
  width: 16%;
}
.building-mode__table--edit .col-num {
  width: 11%;
  text-align: center;
}
.building-mode__table--edit .col-deposit {
  width: 13%;
}
.building-mode__table--edit thead th.col-num {
  text-align: center;
}
.building-mode__table--edit .col-etc {
  width: 29%;
}
.building-mode__table--edit .col-action {
  width: 8%;
  min-width: 28px;
  text-align: center;
}

.building-mode__table--edit tbody td {
  padding: 4px 4px;
  vertical-align: middle;
  border-bottom: 1px solid #f3f4f6;
}

.building-mode__table--edit tbody td input {
  width: 100%;
  min-width: 0;
  padding: 5px 6px;
  font-size: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-sizing: border-box;
}

.building-mode__table--edit .col-num input {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.building-mode__table--edit input[type="number"] {
  -moz-appearance: textfield;
}
.building-mode__table--edit input[type="number"]::-webkit-outer-spin-button,
.building-mode__table--edit input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.building-mode__table--edit input[type="number"] {
  appearance: textfield;
}

.building-mode__table--edit .building-mode__delUnit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 10px;
  line-height: 1;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 4px;
  cursor: pointer;
}

.building-mode__table--edit .building-mode__delUnit:hover {
  background: #fee2e2;
}

@media (max-width: 480px) {
  .building-mode__table--edit thead th {
    font-size: 10px;
    padding: 5px 4px;
  }
  .building-mode__table--edit tbody td input {
    font-size: 11px;
    padding: 4px 5px;
  }
  .building-mode__section {
    padding: 12px;
  }
}