/* =====================================================================
   [공실드림 코어 모듈] base.css (PC 데스크톱 기본 규격, 헤더, 사이드바, 게시판)
   - V2 Master Design System (Header 60px, Filter 46px, 3-Tone Color)
   ===================================================================== */

:root {
  --ink-0: #ffffff;
  --ink-50: #fafafa;
  --ink-100: #f4f4f5;
  --ink-150: #ececee;
  --ink-200: #e4e4e7;
  --ink-300: #d4d4d8;
  --ink-400: #a1a1aa;
  --ink-500: #71717a;
  --ink-600: #52525b;
  --ink-700: #3f3f46;
  --ink-800: #27272a;
  --ink-900: #18181b;
  --brand: #991b1b;
  --brand-hover: #7f1d1d;
  --brand-subtle: #fef2f2;
  --brand-border: #fecaca;
  --ok-bg: #f0fdf4;
  --ok-fg: #166534;
  --warn-bg: #fffbeb;
  --warn-fg: #92400e;
  --warn-border: #fde68a;
}

* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
  font-family: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif; 
  letter-spacing: -0.025em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body { 
  display: flex; 
  flex-direction: column; 
  height: 100vh; 
  overflow: hidden; 
  background-color: var(--ink-50); 
  color: var(--ink-800); 
  position: relative; 
}

/* ─── 1. 최상단 헤더 (60px 고정) ─────────────────── */
header { 
  height: 60px !important; 
  min-height: 60px !important;
  background-color: #ffffff !important; 
  border-bottom: 1px solid #e2e8f0 !important; 
  display: flex !important; 
  align-items: center !important; 
  justify-content: space-between !important; 
  padding: 0 20px !important; 
  z-index: 1000; 
  flex-shrink: 0; 
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important; 
}

.logo-area { display: flex; align-items: center; gap: 12px; }
.logo-area > div { display: flex; align-items: center; gap: 6px; padding-left: 14px; border-left: 1px solid #e4e4e7; }

.logo-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.brand-symbol { width: 28px; height: 28px; flex-shrink: 0; }
.brand-symbol svg { width: 100%; height: 100%; }
.brand-name { font-size: 18px; font-weight: 800; color: #0f172a; display: flex; align-items: center; gap: 5px; }
.brand-name .brand-en { font-size: 11px; font-weight: 900; color: #991b1b; background: #fee2e2; padding: 2px 6px; border-radius: 4px; }

.unified-header-select {
  height: 32px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #3f3f46 !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  outline: none;
  cursor: pointer;
}
.unified-header-select:hover { border-color: #991b1b; }

.unified-header-btn {
  display: inline-flex;
  align-items: center;
  height: 32px;
  line-height: 32px;
  background: #f8fafc;
  color: #475569;
  border: 1px solid #cbd5e1;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.unified-header-btn:hover { background: #991b1b; color: #ffffff; border-color: #991b1b; }

.nav-links { display: flex; align-items: center; gap: 8px; }
.btn-register { 
  background-color: #991b1b; 
  color: white; 
  border: none; 
  height: 34px;
  padding: 0 14px; 
  border-radius: 6px; 
  font-size: 12.5px; 
  font-weight: 700; 
  cursor: pointer; 
}
.btn-register:hover { background-color: #7f1d1d; }

.agent-auth-status { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #334155; }
.auth-role-tag { font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 4px; }
.auth-role-tag.master { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.auth-role-tag.staff { background: #f4f4f5; color: #52525b; border: 1px solid #e4e4e7; }
.btn-manage-staff { background: #ffffff; color: #3f3f46; border: 1px solid #d4d4d8; padding: 5px 9px; border-radius: 4px; font-size: 11px; cursor: pointer; }
.btn-logout { background: transparent; border: 1px solid transparent; color: #71717a; padding: 5px 9px; border-radius: 4px; font-size: 11px; cursor: pointer; }

/* ─── 2. 실무 퀵 필터 툴바 (46px) ───────────────── */
.filter-bar { 
  height: 46px !important; 
  min-height: 46px !important;
  background-color: #ffffff; 
  border-bottom: 1px solid #e2e8f0; 
  display: flex; 
  align-items: center; 
  padding: 0 20px; 
  gap: 8px; 
  z-index: 999; 
  flex-shrink: 0; 
  overflow-x: auto; 
  white-space: nowrap; 
}
.filter-group { display: flex; align-items: center; gap: 4px; }
.filter-label { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; }
.filter-divider { width: 1px; height: 16px; background-color: #e2e8f0; margin: 0 4px; }

.filter-chip { 
  height: 28px !important;
  padding: 0 11px !important;
  font-size: 12px !important; 
  font-weight: 600 !important; 
  border-radius: 6px !important; 
  border: 1px solid #e2e8f0; 
  background: #ffffff; 
  color: #334155; 
  cursor: pointer; 
  user-select: none; 
}
.filter-chip:hover { border-color: #94a3b8; background: #f8fafc; }
.filter-chip.active { background-color: #0f172a !important; color: #ffffff !important; border-color: #0f172a !important; font-weight: 700 !important; }
.filter-chip.toggle-active { background-color: #fef2f2 !important; color: #991b1b !important; border-color: #fecaca !important; font-weight: 700 !important; }

#btnGroupBuilding, 
#btnCompletedFilter, 
#btnRecommendFilter, 
.filter-action-btn {
  height: 28px !important;
  padding: 0 11px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  cursor: pointer;
  white-space: nowrap;
}

#filterKeywordInput {
  height: 28px !important;
  width: 220px !important;
  padding: 0 26px 0 10px !important;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  outline: none;
}
#filterKeywordInput:focus { border-color: #991b1b; }
.btn-reset-filter {
  height: 28px !important;
  padding: 0 10px !important;
  font-size: 11.5px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
}

/* ─── 3. 본문 레이아웃 & 사이드바 ────────────────── */
.main-container,
body.gp-mode-board #gpBoardView { 
  height: calc(100vh - 106px) !important; 
}
.main-container { display: flex; flex: 1; position: relative; overflow: hidden; }
#map { flex: 1; height: 100%; width: 100%; min-width: 0; background: #f1f5f9; position: relative; z-index: 1; }
body.locked-mode .main-container, 
body.locked-mode .filter-bar { filter: blur(10px); pointer-events: none; }

.sidebar { 
  width: 490px; 
  height: 100%; 
  background: #ffffff; 
  border-left: 1px solid #e2e8f0; 
  display: flex; 
  flex-direction: column; 
  z-index: 2; 
  flex-shrink: 0;
}
.sidebar-header { padding: 12px 16px; border-bottom: 1px solid #e2e8f0; background: #ffffff; }
.status-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.count-text { font-size: 14.5px; font-weight: 700; color: #1e293b; }
.count-text strong { color: #991b1b; font-size: 16px; font-weight: 900; }
.db-status-badge { font-size: 11px; padding: 3px 8px; border-radius: 4px; font-weight: 700; background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

.control-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #64748b; }
.tool-group { display: flex; align-items: center; gap: 6px; }
.btn-print-action { background-color: #ffffff; color: #3f3f46; border: 1px solid #d4d4d8; padding: 4px 10px; border-radius: 4px; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.btn-kakao-action { background-color: #fef9c3; color: #78350f; border: 1px solid #fde68a; font-weight: 600; }

/* ─── 4. 매물 리스트 & 카드 레이아웃 보장 ─────────── */
#property-list,
.property-list { 
  display: block !important; 
  flex: 1 1 auto !important; 
  overflow-y: auto !important; 
  padding: 10px 12px !important; 
  background: #f8fafc !important; 
}

/* 일반 매물 카드 */
#property-list > .property-row:not([data-base-addr]),
.property-row { 
  display: flex !important; 
  align-items: flex-start !important; 
  background: #ffffff !important; 
  border: 1px solid #e2e8f0 !important; 
  border-radius: 8px !important; 
  padding: 12px 14px !important; 
  cursor: pointer; 
  margin: 0 0 8px 0 !important;
  gap: 12px; 
}
.property-row:hover { border-color: #94a3b8 !important; box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05) !important; }
.property-row.active { border-color: #991b1b !important; background-color: #fffdfd !important; box-shadow: 0 0 0 1.5px #991b1b !important; }
.property-row.is-completed { opacity: 0.55; filter: grayscale(0.85); background-color: #f1f5f9; }

.col-thumb { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.thumb-wrap { width: 76px; height: 57px; border-radius: 4px; overflow: hidden; background: #f1f5f9; position: relative; border: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: center; }
.thumb-wrap img { width: 100%; height: 100%; object-fit: cover; }
.thumb-badge { position: absolute; bottom: 3px; right: 3px; background: rgba(15, 23, 42, 0.75); color: #fff; font-size: 9.5px; padding: 1px 4px; border-radius: 3px; font-weight: 800; }
.thumb-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #94a3b8; font-size: 10px; font-weight: 700; gap: 2px; }

.col-main-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.card-top-row { display: flex; align-items: center; justify-content: space-between; }
.price-area { display: flex; align-items: baseline; gap: 6px; }
.price-text-bold { font-size: 16px !important; font-weight: 900 !important; color: #0f172a !important; font-variant-numeric: tabular-nums; }
.fee-text-sub { font-size: 11.5px; color: #64748b; font-weight: 500; }
.room-badge { font-size: 10.5px; padding: 2px 6px; border-radius: 4px; font-weight: 800; background-color: #f1f5f9; color: #334155; border: 1px solid #e2e8f0; }

.building-title-row { font-size: 13px !important; font-weight: 800 !important; color: #0f172a !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.address-sub-row { font-size: 11.5px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.owner-badge-row { display: inline-flex !important; align-items: center !important; gap: 4px !important; font-size: 11px !important; font-weight: 700 !important; color: #92400e !important; background: #fffbeb !important; border: 1px solid #fde68a !important; border-left: 3px solid #d97706 !important; padding: 2px 8px !important; border-radius: 4px !important; width: fit-content; }
.secret-memo-box { margin-top: 4px !important; padding: 4px 8px !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-left: 3px solid #64748b !important; border-radius: 4px !important; font-size: 11px !important; color: #334155 !important; line-height: 1.4 !important; }

.card-actions-bar { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-top: 6px !important; padding-top: 6px !important; border-top: 1px dashed #e2e8f0 !important; }
.actions-left-group { display: flex; align-items: center; gap: 4px; }
.btn-act-compact { height: 24px !important; padding: 0 8px !important; border-radius: 4px !important; font-size: 11px !important; font-weight: 700 !important; border: 1px solid #e2e8f0 !important; background: #f8fafc !important; color: #334155 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 3px !important; white-space: nowrap !important; text-decoration: none !important; }
.btn-act-compact.btn-act-call-green { color: #15803d !important; background: #f0fdf4 !important; border-color: #bbf7d0 !important; }
.btn-act-compact.btn-act-detail-text { color: #991b1b !important; background: #fef2f2 !important; border-color: #fecaca !important; }

/* ─── 5. 건물별 묶기 그룹 카드 ─────────────────── */
#property-list > .property-row[data-base-addr],
.property-row.building-group-card {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
}
#property-list > .property-row[data-base-addr] > div:nth-child(1) {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 11px 14px !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-radius: 7px 7px 0 0 !important;
}
#property-list > .property-row[data-base-addr] > div:nth-child(2) {
  display: block !important;
  padding: 9px 14px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
#property-list > .property-row[data-base-addr] > div:nth-child(3) {
  display: block !important;
  padding: 6px 10px 10px 10px !important;
  background: #ffffff !important;
}

/* ─── 6. 전산망 게시판 테이블 뷰 ────────────────── */
body.gp-mode-map #gpBoardView { display: none !important; }
body.gp-mode-board .main-container { display: none !important; }
body.gp-mode-board #gpBoardView {
  display: flex !important;
  flex-direction: column;
  flex: 1;
  background: #ffffff;
  overflow: hidden;
  position: relative;
  z-index: 10;
}

.gp-view-switch { display: inline-flex; align-items: center; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 6px; padding: 2px; gap: 2px; margin-right: 8px; }
.gp-view-switch button { border: none; background: transparent; padding: 5px 11px; font-size: 12px; font-weight: 700; color: #475569; border-radius: 4px; cursor: pointer; }
.gp-view-switch button.active { background: #ffffff; color: #991b1b; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

.gp-board-header { height: 52px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e2e8f0; background: #f8fafc; flex-shrink: 0; }
.gp-board-table-wrap { flex: 1; overflow-y: auto; background: #ffffff; }
.gp-board-table { width: 100%; border-collapse: collapse; font-size: 12.5px; text-align: left; }
.gp-board-table th { background: #f8fafc; color: #475569; font-weight: 700; padding: 10px 12px; border-bottom: 1px solid #cbd5e1; position: sticky; top: 0; z-index: 5; }
.gp-board-table td { padding: 9px 12px; border-bottom: 1px solid #f1f5f9; color: #1e293b; vertical-align: middle; }
.gp-board-table tr:hover { background: #f8fafc; }
.gp-building-row { background: #eff6ff !important; font-weight: 800; cursor: pointer; }

/* ─── [버건디 단일 통일] 로그인/검색 버튼 및 전국 전체 권역 고정 ─── */
.btn-dark-submit,
.btn-submit-registration,
.btn-auth-submit {
  background: var(--brand) !important;
  color: #ffffff !important;
  border: 1px solid var(--brand) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}
.btn-dark-submit:hover,
.btn-submit-registration:hover,
.btn-auth-submit:hover {
  background: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
}

/* [전국 전체 권역] 버튼: 마우스 올리기 전부터 단일 버건디 고정 */
.region-chip-grid .region-chip[style*="grid-column"],
.region-chip[style*="grid-column"] {
  background: var(--brand) !important;
  color: #ffffff !important;
  border-color: var(--brand) !important;
  font-weight: 800 !important;
}
.region-chip-grid .region-chip[style*="grid-column"]:hover,
.region-chip[style*="grid-column"]:hover {
  background: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
}