/* 구로항동에이스캠프 입주자 포털 — style.css
   폰트 크기 규칙: 최소 10pt, 최대 제한 없음 (모든 텍스트 10pt 이상 일괄 적용) */

:root {
  --c-primary: #1e40af;
  --c-primary-dark: #1e3a8a;
  --c-primary-light: #3b82f6;
  --c-accent: #f59e0b;
  --c-success: #10b981;
  --c-danger: #ef4444;
  --c-warning: #f97316;
  --c-bg: #f1f5f9;
  --c-card: #ffffff;
  --c-text: #1e293b;
  --c-text-sub: #64748b;
  --c-text-muted: #94a3b8;
  --c-border: #e2e8f0;
  --c-sidebar: #0f172a;
  --c-sidebar-hover: #1e293b;
  --c-sidebar-active: #2563eb;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Segoe UI", sans-serif;
  font-size: 12pt;
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.5;
  min-height: 100vh;
}

/* ============================================
   ====== Iconify (Lucide) 모던 SVG 아이콘 스타일
   2026-05-07 사용자 명시: 이모지 → 모던 라인 아이콘 교체
   ============================================ */
iconify-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.15em;
  flex-shrink: 0;
}
/* 카드 아이콘 (건물 소개) */
.icon-card {
  width: 38px; height: 38px;
  
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(6, 182, 212, 0.10));
  border-radius: 12px;
  padding: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 6px rgba(37, 99, 235, 0.10);
  margin-bottom: 14px;
  display: inline-flex;
}
.icon-card[data-color="amber"] { color: #d97706; background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(217, 119, 6, 0.08)); }
.icon-card[data-color="emerald"] { color: #059669; background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(5, 150, 105, 0.08)); }
.icon-card[data-color="rose"] { color: #e11d48; background: linear-gradient(135deg, rgba(244, 63, 94, 0.14), rgba(225, 29, 72, 0.08)); }
.icon-card[data-color="violet"] { color: #475569; background: linear-gradient(135deg, rgba(71, 85, 105, 0.14), rgba(51, 65, 85, 0.08)); }
.icon-card[data-color="cyan"] { color: #334155; background: linear-gradient(135deg, rgba(51, 65, 85, 0.14), rgba(30, 41, 59, 0.08)); }
.icon-card[data-color="orange"] { color: #ea580c; background: linear-gradient(135deg, rgba(249, 115, 22, 0.14), rgba(234, 88, 12, 0.08)); }
.icon-card[data-color="slate"] { color: #475569; background: linear-gradient(135deg, rgba(100, 116, 139, 0.14), rgba(71, 85, 105, 0.08)); }

/* 사이드바 메뉴 아이콘 */
.icon-sb {
  width: 18px; height: 18px;
  color: currentColor;
  margin-right: 10px;
}

/* 인라인 텍스트 옆 아이콘 (헤더 옆) */
.icon-inline {
  width: 20px; height: 20px;
  color: currentColor;
  margin-right: 8px;
}

/* 버튼 안 아이콘 */
.icon-btn {
  width: 18px; height: 18px;
  margin-right: 6px;
  color: currentColor;
}

/* ====== 페이지 전환 ====== */
.page { display: none; }
.page.active { display: flex; }
#page-login.active { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
#page-home.active { display: block; }

/* ====== 로그인 ====== */
.login-card {
  background: var(--c-card);
  border-radius: 14px;
  padding: 36px 32px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}
.login-head { text-align: center; margin-bottom: 24px; }
.login-title { font-size: 16pt;  margin-bottom: 4px; }
.login-sub { font-size: 12pt; color: var(--c-text-sub); }
.login-badge {
  display: inline-block;
  font-size: 10pt;
  background: var(--c-accent);
  color: #fff;
  padding: 4px 10px;
  border-radius: 10px;
  margin-top: 8px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.login-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  background: var(--c-bg);
  padding: 4px;
  border-radius: 8px;
}
.login-tab {
  flex: 1;
  font-size: 12pt;
  background: transparent;
  border: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 6px;
  color: var(--c-text-sub);
  font-weight: 500;
  transition: all 0.15s;
}
.login-tab.active {
  background: var(--c-card);
  
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  font-weight: 700;
}

.login-form { display: none; flex-direction: column; gap: 8px; }
.login-form.active { display: flex; }
.login-form label {
  font-size: 10pt;
  color: var(--c-text-sub);
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-top: 8px;
}
.login-form input {
  font-size: 12pt;
  padding: 10px 14px;
  border: 1px solid var(--c-border);
  border-radius: 7px;
  outline: none;
  transition: border 0.15s;
}
.login-form input:focus { border- }

.btn-primary {
  font-size: 12pt;
  background: var(--c-primary);
  color: #fff;
  border: none;
  padding: 11px 20px;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s;
}
.btn-primary:hover { background: var(--c-primary-dark); }
.btn-full { width: 100%; margin-top: 8px; padding: 12px; }
.btn-secondary {
  font-size: 12pt;
  background: var(--c-bg);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  padding: 9px 18px;
  border-radius: 7px;
  cursor: pointer;
}

.login-hint {
  font-size: 10pt;
  color: var(--c-text-sub);
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.quick-btn {
  font-size: 10pt;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  padding: 5px 10px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--c-text);
}
.quick-btn:hover { background: var(--c-primary); color: #fff; border- }

.login-foot {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--c-border);
  text-align: center;
  font-size: 10pt;
  color: var(--c-text-muted);
}

/* ====== 앱 레이아웃 (입주자/관리자 공통) ====== */
.app-layout {
  flex-direction: row;
  width: 100%;
  min-height: 100vh;
}

/* ====== 사이드바 ====== */
.sidebar {
  width: 240px;
  background: var(--c-sidebar);
  color: #fff;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.admin-sb { background: #052e6b; }

.sb-brand {
  padding: 20px 18px;
  display: flex;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sb-logo { font-size: 16pt; }
.sb-title { font-size: 12pt; font-weight: 700; }
.sb-sub { font-size: 10pt; opacity: 0.6; }

.sb-room-info {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.2);
}
.sb-room-no { font-size: 16pt; font-weight: 700; color: #fff; }
.sb-room-company { font-size: 10pt; opacity: 0.7; margin-top: 2px; }
.sb-room-area { font-size: 10pt; opacity: 0.5; margin-top: 2px; }

.sb-menu {
  flex: 1;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
}
.sb-item {
  font-size: 12pt;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.7);
  padding: 11px 18px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
  border-left: 5px solid transparent;
  position: relative;
}
.sb-item:hover { background: var(--c-sidebar-hover); color: #fff; }
.sb-item.active {
  background: var(--c-sidebar-active);
  color: #fff;
  border-left-color: var(--c-accent);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}
.sb-item.active::after {
  content: '▸';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-accent);
  font-size: 10pt;
}

.sb-foot {
  padding: 12px 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.sb-logout {
  width: 100%;
  font-size: 12pt;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.7);
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
}
.sb-logout:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* ====== 메인 영역 ====== */
.main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  min-width: 0;
}
.top-bar {
  background: #fff;
  border-bottom: 1px solid var(--c-border);
  padding: 16px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-bar h2 { font-size: 16pt; color: var(--c-text); }
.top-info { font-size: 10pt; color: var(--c-text-sub); }
.content { flex: 1; padding: 24px 28px; overflow-y: auto; }
.content > * { animation: contentFadeIn 0.25s ease; }
@keyframes contentFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ====== 카드 / KPI ====== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.kpi-card {
  background: var(--c-card);
  border-radius: 10px;
  padding: 18px;
  border: 1px solid var(--c-border);
  position: relative;
  overflow: hidden;
}
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--c-primary);
}
.kpi-card.elec::before { background: #2563eb; }   /* 전기: 청색 */
.kpi-card.water::before { background: #16a34a; }  /* 수도: 녹색 */
.kpi-card.heat::before { background: #dc2626; }   /* 냉난방: 적색 */
.kpi-card.mgmt::before { background: #8b5cf6; }
.kpi-card.total::before { background: var(--c-primary); }

.kpi-label { font-size: 10pt; color: var(--c-text-sub); font-weight: 600; letter-spacing: 0.5px; }
.kpi-value { font-size: 16pt; font-weight: 700; margin: 6px 0 4px; color: var(--c-text); }
.kpi-unit { font-size: 10pt; color: var(--c-text-muted); margin-left: 4px; }
.kpi-cost { font-size: 10pt; color: var(--c-text-sub); }
.kpi-delta { font-size: 10pt; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--c-border); }
.kpi-delta.up { color: var(--c-danger); }
.kpi-delta.down { color: var(--c-success); }

/* ====== 차트 카드 ====== */
.chart-card {
  background: var(--c-card);
  border-radius: 10px;
  padding: 20px;
  border: 1px solid var(--c-border);
  margin-bottom: 16px;
}
.chart-title { font-size: 12pt; font-weight: 700; margin-bottom: 14px; color: var(--c-text); }
.chart-wrap { width: 100%; overflow-x: auto; }
.chart-svg { width: 100%; min-width: 600px; height: 280px; }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 10pt; color: var(--c-text-sub); }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }

/* ====== 실시간 갱신 주기 컨트롤 ====== */
.realtime-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.rc-label {
  font-size: 11pt;
  font-weight: 700;
  color: var(--c-text);
  white-space: nowrap;
}
.rc-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.rc-btn {
  font-size: 10pt;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  padding: 7px 14px;
  border-radius: 18px;
  cursor: pointer;
  color: var(--c-text-sub);
  transition: all 0.15s;
  font-weight: 500;
}
.rc-btn:hover {
  background: var(--c-card);
  border-color: #f59e0b;
  color: #f59e0b;
}
.rc-btn.active {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #fff;
  font-weight: 600;
}
.rc-btn.pause-btn {
  margin-left: 6px;
  border-style: dashed;
}
.rc-btn.pause-btn.active {
  background: #6b7280;
  border-color: #6b7280;
  border-style: solid;
}
.rc-status {
  font-size: 10pt;
  color: var(--c-text-sub);
  margin-left: auto;
  font-weight: 500;
}
.rc-notice {
  flex-basis: 100%;
  font-size: 10pt;
  line-height: 1.5;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 4px;
}
.rc-notice strong {
  color: #b45309;
  font-weight: 700;
}

/* ====== 실시간 차트 토글 탭 ====== */
.rt-chart-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.rt-tab {
  font-size: 10pt;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  padding: 7px 16px;
  border-radius: 18px;
  cursor: pointer;
  color: var(--c-text-sub);
  transition: all 0.15s;
  font-weight: 500;
}
.rt-tab:hover { background: var(--c-card); border-  }
.rt-tab.active { color: #fff; font-weight: 600; }
.rt-tab[data-type="electric"].active { background: #2563eb; border-color: #2563eb; }   /* 전기: 청색 */
.rt-tab[data-type="water"].active    { background: #16a34a; border-color: #16a34a; }   /* 수도: 녹색 */
.rt-tab[data-type="heating"].active  { background: #dc2626; border-color: #dc2626; }   /* 냉난방: 적색 */

/* ====== 테이블 ====== */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-card);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--c-border);
}
.data-table th, .data-table td {
  padding: 10px 14px;
  text-align: left;
  font-size: 10pt;
  border-bottom: 1px solid var(--c-border);
}
.data-table th {
  background: var(--c-bg);
  font-size: 10pt;
  color: var(--c-text-sub);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover { background: var(--c-bg); cursor: pointer; }
.data-table .right { text-align: right; }
.data-table .center { text-align: center; }
.data-table .num { font-variant-numeric: tabular-nums; }

/* ====== 실시간 카드 ====== */
.realtime-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.realtime-card {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  color: #fff;
  border-radius: 12px;
  padding: 22px;
  position: relative;
  overflow: visible;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  outline: 3px solid transparent;
  outline-offset: 3px;
}
.realtime-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.18); }
.realtime-card.selected {
  outline-color: #f59e0b;  /* 오렌지 강조 테두리 */
  box-shadow: 0 8px 22px rgba(0,0,0,0.22);
  transform: translateY(-2px);
}
.realtime-card.selected::before {
  content: '✓ 선택됨';
  position: absolute;
  top: -12px;
  left: 14px;
  font-size: 10pt;
  background: #f59e0b;
  color: #fff;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.realtime-card.water-card { background: linear-gradient(135deg, #14532d 0%, #16a34a 100%); }
.realtime-card.heat-card { background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%); }
.realtime-pulse {
  position: absolute;
  top: 18px; right: 18px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  animation: pulse 1.4s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
  100% { box-shadow: 0 0 0 14px rgba(255,255,255,0); }
}
.rt-label { font-size: 10pt; opacity: 0.85; letter-spacing: 0.5px; font-weight: 600; }
.rt-value { font-size: 16pt; font-weight: 700; margin: 6px 0; }
.rt-unit { font-size: 10pt; opacity: 0.85; }
.rt-time { font-size: 10pt; opacity: 0.7; margin-top: 8px; }
.rt-extra {
  font-size: 10pt;
  opacity: 0.85;
  margin-top: 6px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* ====== HVAC 모드 토글 (중앙난방 시연용) ====== */
.hvac-mode-toggle {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.hmt-label {
  font-size: 11pt;
  font-weight: 700;
  color: var(--c-text);
  white-space: nowrap;
}
.hmt-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.hmt-btn {
  font-size: 10pt;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  padding: 7px 14px;
  border-radius: 18px;
  cursor: pointer;
  color: var(--c-text-sub);
  transition: all 0.15s;
  font-weight: 500;
}
.hmt-btn:hover {
  background: var(--c-card);
  border-color: #f59e0b;
  color: #f59e0b;
}
.hmt-btn.active { color: #fff; font-weight: 600; }
.hmt-btn.active[data-mode="auto"]    { background: #6b7280; border-color: #6b7280; }
.hmt-btn.active[data-mode="heating"] { background: #dc2626; border-color: #dc2626; }
.hmt-btn.active[data-mode="cooling"] { background: #06b6d4; border-color: #06b6d4; }
.hmt-btn.active[data-mode="off"]     { background: #9ca3af; border-color: #9ca3af; }
.hmt-status {
  font-size: 10pt;
  color: var(--c-text-sub);
  margin-left: auto;
  font-weight: 500;
}
.hmt-status strong { color: var(--c-text); font-weight: 700; }
.hmt-season {
  display: block;
  margin-top: 4px;
  font-size: 10pt;
  color: var(--c-text-muted);
  font-weight: 500;
}

/* ====== 검색·필터 ====== */
.toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.toolbar input, .toolbar select {
  font-size: 12pt;
  padding: 8px 12px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: #fff;
  outline: none;
}
.toolbar input { min-width: 200px; }
.toolbar input:focus, .toolbar select:focus { border- }
.toolbar .spacer { flex: 1; }
.toolbar .stat { font-size: 10pt; color: var(--c-text-sub); }

/* ====== 페이지네이션 ====== */
.pagination {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin: 14px 0;
  flex-wrap: wrap;
}
.page-btn {
  font-size: 12pt;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  min-width: 32px;
}
.page-btn.active { background: var(--c-primary); color: #fff; border- }
.page-btn:hover:not(.active) { background: var(--c-bg); }
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ====== 업로드 영역 ====== */
.upload-zone {
  border: 2px dashed var(--c-border);
  border-radius: 12px;
  padding: 50px 20px;
  text-align: center;
  background: var(--c-card);
  transition: all 0.15s;
  cursor: pointer;
}
.upload-zone:hover { border- background: #eff6ff; }
.upload-zone.drag-over { border- background: #dbeafe; }
.upload-icon { font-size: 16pt; }
.upload-text { font-size: 12pt; margin-top: 12px; color: var(--c-text); }
.upload-hint { font-size: 10pt; color: var(--c-text-sub); margin-top: 6px; }

/* ====== 알림 / 뱃지 ====== */
.alert-card {
  background: #fef2f2;
  border-left: 4px solid var(--c-danger);
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.alert-card .alert-room { font-size: 12pt; font-weight: 700; }
.alert-card .alert-detail { font-size: 10pt; color: var(--c-text-sub); margin-top: 2px; }
.alert-ratio {
  font-size: 12pt;
  font-weight: 700;
  color: var(--c-danger);
  background: #fff;
  padding: 4px 10px;
  border-radius: 12px;
}
.badge {
  display: inline-block;
  font-size: 10pt;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.badge.ok { background: #d1fae5; color: #065f46; }
.badge.warn { background: #fee2e2; color: #991b1b; }
.badge.info { background: #dbeafe; color: #1e40af; }

/* ====== 모달 ====== */
.modal { display: none; position: fixed; inset: 0; z-index: 100; align-items: center; justify-content: center; }
.modal.active { display: flex; }
.modal-bg { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.6); }
.modal-card {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 0;
  width: 90%;
  max-width: 560px;
  max-height: 86vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 48px rgba(0,0,0,0.2);
}
.modal-head {
  padding: 16px 22px;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-head h3 { font-size: 16pt; }
.modal-close {
  font-size: 16pt;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--c-text-sub);
  width: 32px; height: 32px;
  border-radius: 50%;
}
.modal-close:hover { background: var(--c-bg); }
.modal-body { padding: 22px; overflow-y: auto; flex: 1; }
.modal-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--c-border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ====== 고지서 미리보기 ====== */
.invoice-doc { font-family: "Malgun Gothic", sans-serif; }
.invoice-doc .inv-head { text-align: center; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--c-text); }
.invoice-doc .inv-head h4 { font-size: 16pt; }
.invoice-doc .inv-head p { font-size: 10pt; color: var(--c-text-sub); margin-top: 4px; }
.invoice-doc table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.invoice-doc th, .invoice-doc td { padding: 8px; border: 1px solid var(--c-border); font-size: 10pt; }
.invoice-doc th { background: var(--c-bg); font-size: 10pt; }
.invoice-doc tfoot td { font-weight: 700; }

/* ====== 토스트 ====== */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--c-text);
  color: #fff;
  padding: 11px 22px;
  border-radius: 24px;
  font-size: 12pt;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* ====== 반응형 ====== */
@media (max-width: 900px) {
  .app-layout { flex-direction: column; }
  .sidebar { width: 100%; }
  .sb-menu { flex-direction: row; overflow-x: auto; padding: 0; }
  .sb-item { white-space: nowrap; flex-shrink: 0; }
  .sb-foot { display: none; }
  .top-bar { padding: 14px 18px; }
  .content { padding: 16px; }
  .reset-page { grid-template-columns: 1fr !important; }
}

/* ====== 로그인 폼 — 비밀번호 분실 링크 ====== */
.login-help { text-align: center; margin-top: 14px; }
.link-forgot {
  font-size: 10pt;
  color: var(--c-text-sub);
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
  border-bottom: 1px dashed transparent;
  padding-bottom: 1px;
}
.link-forgot:hover {
  
  border-bottom-
}

/* ====== 비밀번호 분실 안내 모달 ====== */
.modal-narrow .modal-card { max-width: 540px; width: calc(100% - 48px); }
.forgot-intro {
  font-size: 11pt;
  color: var(--c-text);
  line-height: 1.7;
  margin-bottom: 20px;
}
.forgot-intro strong {  font-weight: 700; }
.forgot-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.fstep {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: var(--c-bg);
  border-left: 4px solid var(--c-primary);
  border-radius: 8px;
}
.fstep-no {
  flex-shrink: 0;
  width: 30px; height: 30px;
  background: var(--c-primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12pt;
  font-weight: 700;
}
.fstep-body strong {
  display: block;
  font-size: 11pt;
  color: var(--c-text);
  margin-bottom: 4px;
  font-weight: 700;
}
.fstep-body p {
  font-size: 10pt;
  color: var(--c-text-sub);
  margin: 0;
  line-height: 1.6;
}
.forgot-info {
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 12px 14px;
}
.forgot-info p {
  font-size: 10pt;
  margin: 5px 0;
  color: #92400e;
  line-height: 1.5;
}
.forgot-info strong { color: #78350f; font-weight: 700; }

/* ====== 비밀번호 초기화 페이지 (관리자) ====== */
.reset-page {
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 20px;
}
.reset-form-card,
.reset-history-card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 24px;
}
.reset-head { margin-bottom: 18px; }
.reset-head h3 {
  font-size: 14pt;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--c-text);
}
.reset-notice {
  background: #fef3c7;
  color: #92400e;
  font-size: 10pt;
  padding: 10px 12px;
  border-radius: 8px;
  margin: 0;
  border: 1px solid #fde68a;
  line-height: 1.6;
}
.reset-form { display: flex; flex-direction: column; gap: 16px; }
.rf-row { display: flex; flex-direction: column; gap: 6px; }
.rf-row > label {
  font-size: 11pt;
  font-weight: 600;
  color: var(--c-text);
}
.rf-row input[type="text"],
.rf-row input[type="date"],
.rf-row textarea {
  font-size: 11pt;
  padding: 10px 14px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  font-family: inherit;
  color: var(--c-text);
  background: #fff;
}
.rf-row input:focus,
.rf-row textarea:focus {
  outline: none;
  border-
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
}
.reset-room-info {
  font-size: 10pt;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 6px;
  min-height: 0;
}
.reset-room-info.ok { color: #14532d; background: #dcfce7; border: 1px solid #86efac; }
.reset-room-info.err { color: #991b1b; background: #fee2e2; border: 1px solid #fca5a5; }
.reset-docs { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.reset-docs label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11pt;
  font-weight: 500;
  color: var(--c-text);
  cursor: pointer;
}
.reset-docs input[type="checkbox"] {
  width: 17px; height: 17px;
  cursor: pointer;
  accent-
}
.doc-required {
  font-size: 9pt;
  color: #b91c1c;
  background: #fee2e2;
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.doc-optional {
  font-size: 9pt;
  color: var(--c-text-sub);
  background: var(--c-bg);
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: 500;
}
.reset-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.reset-history-head h3 {
  font-size: 14pt;
  font-weight: 700;
  margin: 0;
  color: var(--c-text);
}
.reset-history-count {
  font-size: 10pt;
  color: var(--c-text-sub);
  background: var(--c-bg);
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 500;
}
.temp-pw-cell {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 10pt;
  background: #fef3c7;
  color: #92400e;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
}
.status-ok {
  font-size: 10pt;
  color: #14532d;
  background: #dcfce7;
  padding: 3px 10px;
  border-radius: 6px;
  font-weight: 600;
}

/* ====== 임시 비번 결과 모달 ====== */
.temppw-result { padding: 4px 0; }
.temppw-room {
  font-size: 12pt;
  font-weight: 700;
  color: var(--c-text);
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--c-bg);
  border-radius: 8px;
}
.temppw-display {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-radius: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.temppw-display label {
  font-size: 10pt;
  color: #94a3b8;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.temppw-display code {
  flex: 1;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 18pt;
  color: #fef3c7;
  font-weight: 700;
  letter-spacing: 1.5px;
  user-select: all;
}
.temppw-warn {
  padding: 14px 16px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 8px;
}
.temppw-warn p {
  font-size: 10pt;
  color: #92400e;
  margin: 5px 0;
  line-height: 1.6;
}
.temppw-warn strong { color: #78350f; font-weight: 700; }

/* ====== SMS 발송 카드 (임시 비번 결과 모달 안) ====== */
.sms-sent-card {
  background: #ecfdf5;
  border: 1px solid #86efac;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.sms-sent-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #86efac;
}
.sms-icon { font-size: 22pt; }
.sms-meta { flex: 1; }
.sms-meta strong {
  display: block;
  font-size: 12pt;
  color: #14532d;
  font-weight: 700;
  margin-bottom: 2px;
}
.sms-target {
  font-size: 10pt;
  color: #166534;
  margin: 0;
  font-family: 'Consolas', monospace;
  font-weight: 600;
}
.sms-status {
  font-size: 10pt;
  background: #16a34a;
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 700;
  white-space: nowrap;
}
.sms-text {
  font-size: 10pt;
  color: #14532d;
  background: #fff;
  border: 1px solid #d1fae5;
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0;
  white-space: pre-wrap;
  font-family: -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", sans-serif;
  line-height: 1.6;
}
.phone-note {
  font-size: 10pt;
  color: var(--c-text-muted);
  font-weight: 400;
}

/* ====== 비밀번호 변경 페이지 (입주자 본인) ====== */
.cp-page {
  max-width: 560px;
  margin: 0 auto;
}
.cp-card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 32px;
}
.cp-head { margin-bottom: 22px; }
.cp-head h3 {
  font-size: 16pt;
  font-weight: 800;
  color: var(--c-text);
  margin: 0 0 6px;
  letter-spacing: -0.3px;
}
.cp-sub {
  font-size: 11pt;
  color: var(--c-text-sub);
  margin: 0;
}
.cp-form { display: flex; flex-direction: column; gap: 18px; margin-bottom: 24px; }
.cp-form input[type="password"] {
  font-size: 12pt;
  padding: 11px 14px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  font-family: inherit;
  color: var(--c-text);
}
.cp-form input:focus {
  outline: none;
  border-
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
}
.cp-rule {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.cpr-item {
  font-size: 10pt;
  color: var(--c-text-sub);
  background: var(--c-bg);
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.15s;
}
.cpr-item.ok {
  background: #dcfce7;
  color: #14532d;
  font-weight: 600;
}
.cp-match {
  font-size: 10pt;
  font-weight: 600;
  margin-top: 4px;
  min-height: 0;
}
.cp-match.ok { color: #14532d; }
.cp-match.err { color: #b91c1c; }
.cp-tip {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 16px 18px;
}
.cp-tip strong {
  display: block;
  font-size: 11pt;
  color: #1e3a8a;
  margin-bottom: 8px;
  font-weight: 700;
}
.cp-tip ul {
  margin: 0;
  padding-left: 18px;
}
.cp-tip li {
  font-size: 10pt;
  color: #1e40af;
  line-height: 1.7;
  margin: 3px 0;
}
.cp-tip code {
  font-family: 'Consolas', monospace;
  background: #fff;
  border: 1px solid #bfdbfe;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10pt;
  color: #1e3a8a;
}

/* ====== 입주자 계정 관리 — 모드 탭 ====== */
.mode-tabs {
  display: flex;
  gap: 6px;
  margin: 12px 0;
}
.mode-tab {
  font-size: 11pt;
  padding: 8px 18px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--c-text-sub);
  font-weight: 500;
  transition: all 0.15s;
}
.mode-tab:hover { border-  }
.mode-tab.active {
  background: var(--c-primary);
  border-
  color: #fff;
  font-weight: 700;
}

/* ====== 계정 활성/미활성 표시 ====== */
.acct-status-on {
  font-size: 10pt;
  background: #dcfce7;
  color: #14532d;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
}
.acct-status-off {
  font-size: 10pt;
  background: #fee2e2;
  color: #991b1b;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
}

/* ====== 관리자 비번 변경 — 마스터키 인증 배너 ====== */
.adminpw-master {
  margin-top: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: #fef3c7;
  border-radius: 10px;
  font-size: 11pt;
  line-height: 1.6;
  border: 2px solid #f59e0b;
}
.adminpw-master strong { color: #fbbf24; font-weight: 700; }

/* ====== 히든 마스터키 모달 ====== */
.master-card { max-width: 480px; }
.master-head {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: #fef3c7;
  border-bottom: 2px solid #f59e0b;
}
.master-head h3 { color: #fbbf24; }
.master-head .modal-close { color: #fef3c7; }
.master-warn {
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 10pt;
  color: #92400e;
  line-height: 1.6;
  margin: 0 0 18px;
}
.master-warn strong { color: #78350f; font-weight: 700; }
.master-label {
  display: block;
  font-size: 11pt;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--c-text);
}
.master-input {
  width: 100%;
  font-size: 14pt;
  padding: 12px 16px;
  border: 2px solid var(--c-border);
  border-radius: 8px;
  font-family: 'Consolas', 'Monaco', monospace;
  letter-spacing: 1.5px;
  background: #0f172a;
  color: #fbbf24;
  margin-bottom: 12px;
}
.master-input:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
}
.master-hint {
  font-size: 10pt;
  color: var(--c-text-sub);
  margin: 0;
  line-height: 1.5;
  font-style: italic;
}

/* ============================================
   ====== Liquid Glass Clock — 우측 하단 fixed
   visionOS / iOS 26 inspired
   ============================================ */
/* 글래스 정보 wrapper (방문자 카운트 + 시계) */
.glass-info {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  pointer-events: none;
}
.glass-info > * { pointer-events: auto; }

/* 방문자 카운트 박스 — 글래스 톤, 반투명 */
.glass-counter {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  min-width: 168px;
  border-radius: 16px;
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.03) 50%,
      rgba(255, 255, 255, 0.07) 100%);
  border: 1px solid rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 8px 24px rgba(0, 0, 0, 0.20);
  color: #fff;
  user-select: none;
  position: relative;
}
.gc-counter-icon {
  font-size: 16pt;
  color: rgba(220, 205, 175, 0.85);
  flex-shrink: 0;
}
.gc-counter-body {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.gc-counter-label {
  font-size: 10pt;
  color: rgba(220, 225, 232, 0.78);
  letter-spacing: 0.5px;
}
.gc-counter-body strong {
  font-size: 14pt;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.96);
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
}

/* 시계 — 더 반투명, wrapper 안 자식 */
.glass-clock {
  z-index: 90;
  padding: 11px 18px;
  min-width: 168px;
  border-radius: 16px;
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.03) 50%,
      rgba(255, 255, 255, 0.07) 100%);
  border: 1px solid rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 10px 28px rgba(0, 0, 0, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.08);
  color: #fff;
  text-align: center;
  user-select: none;
  cursor: default;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 상단 굴절 하이라이트 */
.glass-clock::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 10%;
  right: 10%;
  height: 38%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.30) 0%,
    transparent 100%);
  border-radius: 16px 16px 50% 50% / 16px 16px 100% 100%;
  pointer-events: none;
}

/* 미세한 안쪽 빛 (좌상단) */
.glass-clock::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 60%;
  background: radial-gradient(ellipse at top left,
    rgba(255, 255, 255, 0.20) 0%,
    transparent 60%);
  border-radius: 18px 0 0 0;
  pointer-events: none;
}

.glass-clock:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    0 16px 42px rgba(0, 0, 0, 0.30),
    0 4px 8px rgba(0, 0, 0, 0.14);
}

.gc-time {
  position: relative;
  z-index: 1;
  font-size: 18pt;
  font-weight: 700;
  letter-spacing: 1.5px;
  font-variant-numeric: tabular-nums;
  font-family: 'SF Pro Display', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, sans-serif;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.40);
  line-height: 1.1;
}

.gc-date {
  position: relative;
  z-index: 1;
  font-size: 10pt;
  font-weight: 500;
  margin-top: 4px;
  opacity: 0.92;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* 모바일: 더 작게 */
@media (max-width: 600px) {
  .glass-clock {
    bottom: 12px;
    right: 12px;
    min-width: 140px;
    padding: 10px 14px;
  }
  .gc-time { font-size: 14pt; }
  .gc-date { font-size: 10pt; }
}

/* 모달 활성 시 시계 살짝 흐리게 (포커스 빼앗지 않기) */
body:has(.modal.active) .glass-clock {
  opacity: 0.35;
  pointer-events: none;
}

/* ============================================
   ====== 빌딩 쇼케이스 (풀 와이드 외관 사진)
   ============================================ */
.building-showcase {
  position: relative;
  width: 100%;
  height: 75vh;
  min-height: 520px;
  max-height: 720px;
  overflow: hidden;
  background: #000;
}
.bs-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 8s ease, filter 1.2s ease;
  /* 시네마틱 처리: 자연색 유지 + 약간 따뜻하게 (청색 시프트 제거) */
  filter:
    saturate(108%)
    contrast(112%)
    brightness(92%)
    sepia(8%);          /* 약한 세피아 = 따뜻한 톤 */
}
.building-showcase:hover .bs-image {
  transform: scale(1.06);
  filter:
    saturate(115%)
    contrast(118%)
    brightness(98%)
    sepia(10%);
}

/* Ken Burns 효과 — 자동 미세 줌 (영화 느낌) */
@keyframes ken-burns {
  0%   { transform: scale(1) translate(0, 0); }
  50%  { transform: scale(1.05) translate(-1%, -1%); }
  100% { transform: scale(1) translate(0, 0); }
}
.building-showcase:not(:hover) .bs-image {
  animation: ken-burns 30s ease-in-out infinite;
}

/* 시네마틱 그레이딩 — 뉴트럴 다크 + 미세 앰버 (청색 톤 제거) */
.building-showcase::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(245, 158, 11, 0.05) 0%,    /* 상단 앰버 미세 */
    rgba(0, 0, 0, 0.05) 40%,
    rgba(15, 23, 42, 0.18) 80%,     /* 하단 뉴트럴 다크 */
    rgba(7, 9, 26, 0.35) 100%
  );
  mix-blend-mode: multiply;
  z-index: 1;
  pointer-events: none;
}

/* 미세 비네팅 — 가장자리 어둡게 (시선 중앙 집중) */
.building-showcase::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
    transparent 50%,
    rgba(7, 9, 26, 0.50) 100%);
  z-index: 1;
  pointer-events: none;
}
.bs-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(7, 9, 26, 0.20) 0%,
      transparent 30%,
      rgba(7, 9, 26, 0.30) 60%,
      rgba(7, 9, 26, 0.85) 100%);
  pointer-events: none;
}
.bs-caption {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
  z-index: 2;
  padding: 32px 48px;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 20px 60px rgba(0, 0, 0, 0.40);
  max-width: 90%;
}
.bs-tag {
  font-size: 11pt;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #fbbf24;
  margin: 0 0 12px;
}
.bs-title {
  font-size: 26pt;
  font-weight: 800;
  margin: 0 0 10px;
  letter-spacing: -0.8px;
  line-height: 1.2;
}
.bs-sub {
  font-size: 12pt;
  opacity: 0.94;
  margin: 0 0 18px;
  font-weight: 500;
  line-height: 1.6;
}
.bs-meta {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 11pt;
  color: rgba(255, 255, 255, 0.92);
}
.bs-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  font-weight: 500;
  backdrop-filter: blur(10px);
}
@media (max-width: 900px) {
  .building-showcase { height: 60vh; min-height: 380px; }
  .bs-caption { padding: 22px 24px; bottom: 6%; }
  .bs-title { font-size: 18pt; }
  .bs-sub { font-size: 11pt; }
  .bs-meta { gap: 8px; font-size: 10pt; }
  .bs-meta span { padding: 5px 10px; }
}

/* ============================================
   ====== 자랑 스트립 (Brag Strip) — 빌딩 사진 + 핵심 스펙
   ============================================ */
.brag-strip {
  position: relative;
  padding: 90px 24px;
  color: #fff;
  overflow: hidden;
}
.brag-bg {
  position: absolute;
  inset: 0;
  background: url('01_이미지/구로_에이스캠프_선임대.png') center/cover no-repeat;
  /* 시네마틱: 채도 약화 + 약한 세피아 (청색 시프트 제거) */
  filter:
    saturate(75%)
    contrast(118%)
    brightness(60%)
    sepia(12%)
    blur(3px);
  z-index: 0;
  transform: scale(1.08);
}
.brag-overlay {
  position: absolute;
  inset: 0;
  /* 청색 그라디언트 → 뉴트럴 다크 + 앰버 액센트 (시네마틱) */
  background:
    linear-gradient(135deg,
      rgba(15, 23, 42, 0.92) 0%,        /* 다크 네이비 */
      rgba(28, 25, 23, 0.88) 50%,       /* 다크 브라운 (뉴트럴) */
      rgba(120, 53, 15, 0.55) 100%);    /* 앰버/번 시에나 액센트 */
  z-index: 1;
}
.brag-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.brag-eyebrow {
  font-size: 11pt;
  font-weight: 700;
  color: #fbbf24;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.brag-title {
  font-size: 28pt;
  font-weight: 800;
  margin: 0 0 44px;
  letter-spacing: -0.8px;
  line-height: 1.25;
}
.brag-title strong { color: #fbbf24; font-weight: 900; }
.brag-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-bottom: 36px;
}
.brag-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 14px;
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.06) 50%,
      rgba(255, 255, 255, 0.13) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 10px 28px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
.brag-item::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 12%;
  right: 12%;
  height: 35%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.25) 0%,
    transparent 100%);
  border-radius: 16px 16px 50% 50% / 16px 16px 100% 100%;
  pointer-events: none;
}
.brag-item:hover {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.12) 50%,
      rgba(255, 255, 255, 0.22) 100%);
  border-color: rgba(255, 255, 255, 0.38);
  transform: translateY(-5px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    0 16px 40px rgba(0, 0, 0, 0.30);
}
.brag-item strong {
  font-size: 30pt;
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.brag-item strong span {
  font-size: 13pt;
  font-weight: 600;
  margin-left: 4px;
  opacity: 0.88;
  letter-spacing: 0;
}
.brag-label {
  font-size: 10pt;
  font-weight: 500;
  margin-top: 10px;
  opacity: 0.88;
  letter-spacing: 0.3px;
}
.brag-foot {
  font-size: 11pt;
  margin: 0;
  opacity: 0.95;
  font-weight: 500;
  line-height: 1.8;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .brag-strip { padding: 60px 20px; }
  .brag-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .brag-title { font-size: 22pt; margin-bottom: 32px; }
  .brag-item { padding: 20px 10px; }
  .brag-item strong { font-size: 22pt; }
}
@media (max-width: 600px) {
  .brag-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   ====== 공개 홈페이지 (page-home) ======
   건물 홍보·소개·공지·문의·오시는 길
   ============================================ */
#page-home { background: #fff; min-height: 100vh; }

/* ====== 상단 네비게이션 (스티키) ====== */
.home-nav {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-border);
  z-index: 100;
}
.hn-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}
/* 로고 진짜 유리 버튼 — 강한 backdrop blur + 상단 굴절 빛 줄 + 깊이감 그림자 */
.hn-brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.97);
  padding: 12px 22px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  white-space: nowrap;
  flex-shrink: 0;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.20) 0%,
    rgba(255, 255, 255, 0.05) 40%,
    rgba(255, 255, 255, 0.13) 100%);
  backdrop-filter: blur(22px) saturate(180%) brightness(112%);
  -webkit-backdrop-filter: blur(22px) saturate(180%) brightness(112%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 8px 28px rgba(0, 0, 0, 0.32),
    0 2px 6px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  user-select: none;
}

/* 상단 굴절 빛 줄 — 진짜 유리 표면 반사 */
.hn-brand::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 8%;
  right: 8%;
  height: 42%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.08) 70%,
    transparent 100%);
  border-radius: 13px 13px 4px 4px;
  pointer-events: none;
}

/* 좌상단 미세 빛 글로우 — 유리에 떨어지는 빛 */
.hn-brand::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 60%;
  height: 60%;
  background: radial-gradient(ellipse at top left,
    rgba(255, 255, 255, 0.22) 0%,
    transparent 60%);
  border-radius: 14px 0 0 0;
  pointer-events: none;
}

.hn-brand .hn-logo,
.hn-brand .hn-title {
  position: relative;
  z-index: 1;
}

.hn-brand:hover {
  border-color: rgba(220, 205, 175, 0.65);
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(220, 205, 175, 0.18) 100%);
  color: #fff;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    0 12px 32px rgba(0, 0, 0, 0.40),
    0 0 22px rgba(220, 205, 175, 0.25);
}
.hn-brand:active { transform: translateY(0); }
.hn-brand:focus-visible {
  outline: 2px solid rgba(220, 205, 175, 0.65);
  outline-offset: 2px;
}
.hn-logo { font-size: 26pt; }
.hn-title { font-size: 19pt; font-weight: 800; letter-spacing: -0.4px; }
.hn-menu {
  display: flex;
  gap: 22px;
  margin-left: auto;
}

/* 우측 액션 그룹 — 입주 문의 + 입주자 로그인 */
.hn-actions {
  display: flex;
  gap: 8px;
  margin-left: 18px;
  flex-shrink: 0;
}

/* Ghost 변형 — 다크 배경 위 흰 톤 보조 버튼 */
.btn-liquid-ghost {
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.32);
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.04) 50%,
      rgba(255, 255, 255, 0.08) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 10px rgba(0, 0, 0, 0.25);
  font-weight: 700;
}
.btn-liquid-ghost:hover {
  border-color: rgba(220, 205, 175, 0.55);   /* hover 시 베이지 액센트 보더 */
  color: #fff;
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.08) 50%,
      rgba(255, 255, 255, 0.14) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 6px 18px rgba(0, 0, 0, 0.35);
}
.btn-liquid-ghost::after {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.10) 0%,
    transparent 100%);
}

/* 모바일 — 네비 액션 줄임 */
@media (max-width: 768px) {
  .hn-actions { gap: 6px; margin-left: 8px; }
  .btn-liquid-md { padding: 8px 14px; font-size: 10pt; }
}
@media (max-width: 480px) {
  .btn-liquid-ghost { display: none; }  /* 모바일 좁을 때 입주 문의 숨김 (로그인만) */
}
.hn-menu a {
  font-size: 11pt;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
  white-space: nowrap;
}
.hn-menu a:hover { color: rgba(220, 205, 175, 0.95); }

/* 드롭다운 (화물엘리베이터) */
.hn-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.hn-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.hn-caret {
  font-size: 10pt;
  transition: transform 0.2s;
}
.hn-dropdown:hover .hn-caret {
  transform: rotate(180deg);
}
.hn-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 140px;
  padding: 6px;
  background: linear-gradient(135deg,
    rgba(8, 12, 24, 0.94) 0%,
    rgba(14, 20, 38, 0.94) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.40);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  z-index: 110;
}
.hn-dropdown:hover .hn-dropdown-menu,
.hn-dropdown:focus-within .hn-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(2px);
}
.hn-dropdown-menu a {
  display: block;
  padding: 9px 14px;
  font-size: 10pt;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
.hn-dropdown-menu a:hover {
  background: rgba(220, 205, 175, 0.10);
  color: rgba(220, 205, 175, 0.95);
}
.hn-login {
  font-size: 11pt;
  background: var(--c-primary);
  color: #fff;
  border: none;
  padding: 9px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.15s;
}
.hn-login:hover {
  background: var(--c-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(30, 64, 175, 0.25);
}

/* 네비 영역 — 다크 글래스 헤더, hero 다크 배경과 일관 톤 */
.home-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(180deg,
    rgba(8, 12, 24, 0.82) 0%,
    rgba(8, 12, 24, 0.58) 100%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ====== 히어로 (빌딩 사진 + Aurora 글로우 — 메인 임팩트) ====== */
.hero {
  position: relative;
  padding: 100px 24px 120px;
  min-height: 92vh;
  /* 빌딩 사진 거의 그대로 노출 — 중앙만 메인 타이틀 가독성 위해 미세 어두움 */
  background:
    radial-gradient(ellipse 90% 95% at center,
      rgba(10, 16, 32, 0.26) 0%,
      rgba(6, 10, 22, 0.08) 65%,
      rgba(3, 5, 14, 0.02) 100%),
    url('01_이미지/구로_에이스캠프_선임대.png') center/cover no-repeat;
  background-attachment: scroll;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
}

/* 차분한 글로우 #1 — 매우 미세한 베이지 액센트 (좌상단) */
.hero::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -20%;
  width: 90%;
  height: 130%;
  background: radial-gradient(ellipse 50% 50% at center,
    rgba(220, 200, 165, 0.10) 0%,
    rgba(180, 160, 130, 0.04) 35%,
    transparent 65%);
  filter: blur(80px);
  border-radius: 50%;
  animation: aurora-1 22s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

/* 차분한 글로우 #2 — 군청 미세 (우하단) */
.hero::after {
  content: '';
  position: absolute;
  bottom: -40%;
  right: -20%;
  width: 90%;
  height: 130%;
  background: radial-gradient(ellipse 50% 50% at center,
    rgba(28, 42, 78, 0.30) 0%,
    rgba(38, 55, 95, 0.10) 35%,
    transparent 65%);
  filter: blur(80px);
  border-radius: 50%;
  animation: aurora-2 26s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

/* 차분한 글로우 #3 — 매우 미세한 흰빛 + 군청 (중앙 부유, 절제) */
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%,
      rgba(225, 220, 210, 0.06) 0%,
      transparent 60%),
    radial-gradient(ellipse 70% 60% at 70% 80%,
      rgba(28, 42, 78, 0.18) 0%,
      transparent 60%);
  filter: blur(60px);
  animation: aurora-3 30s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes aurora-1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  33%      { transform: translate(15%, 10%) rotate(120deg) scale(1.15); }
  66%      { transform: translate(-10%, 18%) rotate(240deg) scale(0.95); }
}
@keyframes aurora-2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  33%      { transform: translate(-18%, -8%) rotate(-120deg) scale(1.10); }
  66%      { transform: translate(12%, -15%) rotate(-240deg) scale(0.92); }
}
@keyframes aurora-3 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
  50%      { transform: translate(8%, -12%) scale(1.20); opacity: 0.85; }
}

/* 미세 grain 노이즈 (선택, 부드러움) */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
  background-size: 4px 4px;
  pointer-events: none;
  opacity: 0.5;
}

/* 콘텐츠는 Aurora 위로 */
.hero-inner {
  position: relative;
  z-index: 2;
}
.hero-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  z-index: 2;
}

/* ====== Hero Orbit — 중앙 텍스트 + 8개 키워드 3D 원기둥 회전 ====== */
.hero-orbit {
  position: relative;
  width: min(820px, 95vw);
  height: min(720px, 90vw);
  max-width: 820px;
  max-height: 720px;
  margin: 0 auto;
  perspective: 750px;        /* 짧은 원근 — 앞 칩과 뒤 칩 크기 차이 극대화 (왕관의 깊이감) */
  perspective-origin: center 28%;  /* 시점을 위쪽으로 — viewer가 왕관을 위에서 45도 내려다보는 앵글 */
  transform-style: preserve-3d;
}
.orbit-center {
  position: absolute;
  top: 20%; left: 50%;       /* 화면 상단 1/5 — 칩 회전 영역과 명확 분리 */
  /* translateZ(140px) — 칩 정면(+R≈285)보다 더 z 앞으로 (왕관 띠는 화면 하단에서 회전, 타이틀은 위에서 단독) */
  transform: translate(-50%, -50%) translateZ(140px);
  text-align: center;
  z-index: 99;
  width: 70%;
  max-width: 460px;
  isolation: isolate;
}
/* 절제된 eyebrow — 베이지 액센트 (단일 액센트), 글로우 최소화 */
.orbit-center .ho-tag {
  display: block;
  font-size: 10pt;
  font-weight: 600;
  letter-spacing: 7px;
  text-transform: uppercase;
  color: rgba(220, 205, 175, 0.78);   /* 절제된 베이지 — 단일 액센트 */
  margin: 0 0 28px;
  padding: 0;
  background: none;
  border: none;
  font-family: -apple-system, "Helvetica Neue", "Inter", sans-serif;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* 차분한 타이틀 — 백색, 깊이 그림자만, 컬러 글로우 없음 */
.orbit-center h1 {
  font-size: clamp(34pt, 6.2vw, 60pt);
  font-weight: 800;
  letter-spacing: -2px;
  margin: 0 0 24px;
  color: #ffffff;                /* 순백 — 차분, 무게감 */
  line-height: 1.02;
  /* 깊이감 그림자만 — 컬러 글로우 제거 */
  text-shadow:
    0 4px 30px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.06);
  font-feature-settings: "kern" 1, "ss01" 1;
}

/* 차분한 서브카피 — 회색조 톤 */
.orbit-center .ho-sub {
  font-size: 13pt;
  color: rgba(220, 225, 232, 0.80);   /* 살짝 푸른 회색 (다크 베이스 위 차분) */
  margin: 0;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.2px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.orbit-center .ho-sub strong {
  color: rgba(255, 255, 255, 0.96);   /* 순백 — 강조, 컬러 없음 */
  font-weight: 700;
  letter-spacing: 0.3px;
}

.orbit-ring {
  position: absolute;
  inset: 0;
  /* 옵셋(위치 이동) — top으로 부모 좌표계 기준 이동, z 변화 0 (확대 효과 없음) */
  top: calc(220px - 50vh);
  pointer-events: none;
  transform-style: preserve-3d;
  /* 회전만 — 아래에서 위로 올려다보는 시점 */
  transform: rotateX(-45deg);
}

/* 차분한 다크 글래스 칩 — 흰빛 hint, 컬러 액센트 없음, 20% 확대 사이즈 */
.orbit-item {
  position: absolute;
  top: 50%; left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  /* 흰빛 + 절제된 회색 hint, 컬러 없음 */
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.03) 40%,
      rgba(220, 220, 225, 0.08) 100%);
  border: 1px solid rgba(255, 255, 255, 0.28);   /* 흰 보더 */
  border-radius: 14px;
  backdrop-filter: blur(16px) saturate(160%) brightness(105%);
  -webkit-backdrop-filter: blur(16px) saturate(160%) brightness(105%);
  color: #fff;
  font-size: 12pt;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 10px 28px rgba(0, 0, 0, 0.42),
    0 4px 10px rgba(0, 0, 0, 0.22);
  letter-spacing: -0.2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  will-change: transform, opacity, filter;
  transform-style: preserve-3d;
  backface-visibility: visible;
}

/* 유리 표면 반사 — 상단 빛 줄 (둥근 직사각형 모서리에 맞춤) */
.orbit-item::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 8%;
  right: 8%;
  height: 38%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.04) 70%,
    transparent 100%);
  border-radius: 13px 13px 4px 4px;
  pointer-events: none;
}

.orbit-item iconify-icon {
  font-size: 13pt;
  color: rgba(255, 255, 255, 0.78);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.orbit-item span {
  position: relative;
  z-index: 1;
}

/* 모바일 반응 */
@media (max-width: 768px) {
  .hero-orbit { width: 92vw; height: 92vw; max-width: 520px; max-height: 520px; }
  .orbit-center h1 { font-size: 22pt; letter-spacing: -1px; }
  .orbit-center .ho-tag { font-size: 10pt; letter-spacing: 1.8px; }
  .orbit-center .ho-sub { font-size: 11pt; margin-bottom: 18px; }
  .orbit-item { font-size: 9pt; padding: 7px 12px; gap: 5px; }
  .orbit-item iconify-icon { font-size: 11pt; }
}
@media (max-width: 480px) {
  .hero-orbit { width: 96vw; height: 96vw; }
  .orbit-center h1 { font-size: 18pt; }
  .orbit-item { font-size: 9pt; padding: 6px 10px; }
}
.hero-tag {
  font-size: 11pt;
  letter-spacing: 1.5px;
  opacity: 0.95;
  margin-bottom: 16px;
  font-weight: 600;
  text-transform: uppercase;
}
.hero-title {
  font-size: 42pt;
  font-weight: 800;
  margin: 0 0 16px;
  letter-spacing: -1.5px;
  line-height: 1.1;
}
.hero-sub {
  font-size: 14pt;
  opacity: 0.92;
  margin-bottom: 36px;
  font-weight: 400;
  line-height: 1.6;
}
.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 60px;
  flex-wrap: wrap;
}
.btn-lg { font-size: 13pt; padding: 14px 32px; font-weight: 600; border-radius: 14px; }

/* ============================================
   LIQUID GLASS BUTTON (Apple visionOS / iOS 26 style)
   ============================================ */
.btn-liquid {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  font-size: 13pt;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 16px;
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.06) 50%,
      rgba(255, 255, 255, 0.12) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    0 8px 32px rgba(0, 0, 0, 0.20),
    0 1px 2px rgba(0, 0, 0, 0.10);
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  letter-spacing: -0.2px;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* 빛 반사 sweep 애니메이션 */
.btn-liquid::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.35) 50%,
    transparent
  );
  transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

/* 상단 하이라이트 (굴절감) */
.btn-liquid::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 8%;
  right: 8%;
  height: 40%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.25) 0%,
    transparent 100%);
  border-radius: 14px 14px 50% 50% / 14px 14px 100% 100%;
  pointer-events: none;
}

.btn-liquid:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.12) 50%,
      rgba(255, 255, 255, 0.20) 100%);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.15),
    0 14px 42px rgba(0, 0, 0, 0.28),
    0 4px 8px rgba(0, 0, 0, 0.12);
}

.btn-liquid:hover::before { left: 120%; }

.btn-liquid:active {
  transform: translateY(0);
  transition: all 0.1s ease;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.18),
    0 4px 16px rgba(0, 0, 0, 0.15);
}

/* 라이트 변형 (밝은 배경 위) */
.btn-liquid-light {
  color: #1e3a8a;
  border-color: rgba(255, 255, 255, 0.6);
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 255, 255, 0.65) 50%,
      rgba(255, 255, 255, 0.78) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.40),
    0 8px 32px rgba(0, 0, 0, 0.22),
    0 1px 3px rgba(0, 0, 0, 0.10);
  font-weight: 700;
}
.btn-liquid-light:hover {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.78) 50%,
      rgba(255, 255, 255, 0.92) 100%);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(255, 255, 255, 0.55),
    0 16px 48px rgba(0, 0, 0, 0.28),
    0 4px 10px rgba(0, 0, 0, 0.14);
  color: var(--c-primary-dark);
}
.btn-liquid-light::after {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.6) 0%,
    transparent 100%);
}

/* 다크 네이비 액센트 변형 (네비 로그인용) — 차분한 미드나잇 네이비, 다크 톤과 일관 */
.btn-liquid-blue {
  color: #fff;
  border-color: rgba(80, 110, 165, 0.55);
  background:
    linear-gradient(135deg,
      rgba(28, 48, 92, 0.95) 0%,
      rgba(16, 30, 62, 0.95) 50%,
      rgba(24, 42, 82, 0.95) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 8px 24px rgba(0, 0, 0, 0.40),
    0 1px 2px rgba(0, 0, 0, 0.20);
}
.btn-liquid-blue:hover {
  border-color: rgba(120, 150, 200, 0.75);
  background:
    linear-gradient(135deg,
      rgba(38, 60, 108, 0.98) 0%,
      rgba(22, 40, 78, 0.98) 50%,
      rgba(32, 54, 98, 0.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 14px 38px rgba(30, 64, 175, 0.45),
    0 4px 10px rgba(0, 0, 0, 0.14);
}

/* Graphite 변형 — 다크 배경용 진회색 버튼 */
.btn-liquid-graphite {
  color: #fff;
  border-color: rgba(148, 163, 184, 0.30);
  background:
    linear-gradient(135deg,
      rgba(71, 85, 105, 0.88) 0%,
      rgba(51, 65, 85, 0.78) 50%,
      rgba(71, 85, 105, 0.88) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 8px 28px rgba(15, 23, 42, 0.40),
    0 1px 2px rgba(0, 0, 0, 0.15);
}
.btn-liquid-graphite:hover {
  border-color: rgba(203, 213, 225, 0.50);
  background:
    linear-gradient(135deg,
      rgba(100, 116, 139, 0.95) 0%,
      rgba(71, 85, 105, 0.88) 50%,
      rgba(100, 116, 139, 0.95) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 14px 38px rgba(15, 23, 42, 0.50);
}

/* 미디엄·스몰 사이즈 */
.btn-liquid-md { padding: 10px 22px; font-size: 11pt; border-radius: 12px; }
.btn-liquid-md::after { border-radius: 10px 10px 50% 50% / 10px 10px 100% 100%; }
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 760px;
  margin: 0 auto;
}
.hero-stats > div {
  text-align: center;
  padding: 18px 12px;
  background: rgba(255,255,255,0.12);
  border-radius: 14px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 11pt;
  opacity: 0.96;
}
.hero-stats strong {
  display: block;
  font-size: 26pt;
  font-weight: 800;
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}

/* ====== 섹션 공통 ====== */
.home-section {
  padding: 90px 24px;
}
.home-section-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.home-section-alt { background: var(--c-bg); }
.section-eyebrow {
  text-align: center;
  font-size: 11pt;
  font-weight: 700;
  
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.section-title {
  font-size: 28pt;
  font-weight: 800;
  text-align: center;
  margin-bottom: 12px;
  color: var(--c-text);
  letter-spacing: -0.8px;
}
.section-sub {
  text-align: center;
  font-size: 12pt;
  color: var(--c-text-sub);
  margin-bottom: 48px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

/* ====== 기능 카드 — Bento 그리드 (Apple WWDC 스타일) ====== */
@property --bento-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 230px;
  gap: 16px;
  perspective: 1500px;
}
.feature-card:nth-child(1) { grid-column: span 3; grid-row: span 2; }  /* 서울권 최대 규모 — 큰 카드 */
.feature-card:nth-child(2) { grid-column: span 3; }                    /* 에이스건설 시공 */
.feature-card:nth-child(3) { grid-column: span 2; }                    /* 제조업 특화 */
.feature-card:nth-child(4) { grid-column: span 4; }                    /* 전층 드라이브인 — 와이드 */
.feature-card:nth-child(5) { grid-column: span 2; }                    /* 중앙냉난방 */
.feature-card:nth-child(6) { grid-column: span 2; }                    /* 편리한 교통 */
.feature-card:nth-child(7) { grid-column: span 2; }                    /* 주변 편의시설 */
.feature-card:nth-child(8) { grid-column: span 6; }                    /* 입주자 포털 — 풀와이드 */

.feature-card {
  position: relative;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 18px;
  padding: 28px 24px;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
  transform-style: preserve-3d;
  will-change: transform;
  overflow: hidden;
}

/* 카드 내부 콘텐츠는 깊이 부여 (3D Tilt 시 떠 보임) */
.feature-card .icon-card,
.feature-card h3,
.feature-card p {
  transform: translateZ(30px);
  transform-style: preserve-3d;
}

/* 회전하는 그라디언트 border (Animated Border — Aceternity 시그니처) */
.feature-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--bento-angle),
    transparent 0deg,
    rgba(168, 85, 247, 0.6) 60deg,
    rgba(6, 182, 212, 0.6) 120deg,
    rgba(236, 72, 153, 0.4) 180deg,
    transparent 240deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: rotate-border 4s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes rotate-border {
  to { --bento-angle: 360deg; }
}

/* hover: glow + animated border 활성 + 3D 살짝 들림 */
.feature-card:hover {
  border-color: rgba(168, 85, 247, 0.3);
  box-shadow:
    0 20px 50px rgba(168, 85, 247, 0.15),
    0 8px 24px rgba(6, 182, 212, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.feature-card:hover::before {
  opacity: 1;
}

/* 모바일: Bento 단순 1열 */
@media (max-width: 900px) {
  .feature-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .feature-card[class] {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
  .feature-card .icon-card,
  .feature-card h3,
  .feature-card p {
    transform: none;  /* 모바일은 3D 없이 (성능) */
  }
}

/* ====== Reveal on Scroll (요소 스크롤 진입 시 페이드인) ====== */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* prefers-reduced-motion 존중 */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .feature-card::before { animation: none; }
  .building-showcase:not(:hover) .bs-image { animation: none; }
  .hero::before, .hero::after, .hero-bg { animation: none; }
}
.fc-icon { font-size: 32pt; margin-bottom: 14px; }
.feature-card h3 {
  font-size: 14pt;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--c-text);
  letter-spacing: -0.3px;
}
.feature-card p {
  font-size: 11pt;
  color: var(--c-text-sub);
  line-height: 1.7;
  margin: 0;
}

/* ====== Why 섹션 — 가치 어필 ====== */
.value-foot {
  text-align: center;
  margin-top: 24px;
}
.value-tip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10pt;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  padding: 10px 18px;
  border-radius: 12px;
  margin: 0;
  line-height: 1.6;
}

/* ====== 광고 띠 (Sponsored) — 입주사·외부 업체 광고 게재 ====== */
.ad-strip {
  padding: 90px 24px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.ad-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.ad-strip-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 36px;
  flex-wrap: wrap;
  gap: 16px;
}
.ad-strip-eyebrow {
  font-size: 10pt;
  font-weight: 700;
  color: var(--c-text-muted);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.ad-strip-title {
  font-size: 22pt;
  font-weight: 800;
  color: var(--c-text);
  margin: 0;
  letter-spacing: -0.6px;
}
.ad-strip-link {
  font-size: 11pt;
  
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s;
}
.ad-strip-link:hover { gap: 8px; }
.ad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.ad-card {
  position: relative;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 22px 20px;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-height: 220px;
}
.ad-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-primary), #06b6d4);
  opacity: 0;
  transition: opacity 0.3s;
}
.ad-card:hover {
  transform: translateY(-4px);
  border-color: var(--c-primary-light);
  box-shadow: 0 20px 40px rgba(30, 64, 175, 0.10);
}
.ad-card:hover::before { opacity: 1; }
.ad-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9pt;
  font-weight: 700;
  color: var(--c-text-muted);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding: 3px 10px;
  background: var(--c-bg);
  border-radius: 50px;
  align-self: flex-start;
}
.ad-tag.ad-tag-sponsored { color: #b45309; background: #fef3c7; }
.ad-tag.ad-tag-empty { color: var(--c-text-muted); border: 1px dashed var(--c-border); background: transparent; }
.ad-card h3 {
  font-size: 13pt;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--c-text);
  letter-spacing: -0.3px;
}
.ad-card p {
  font-size: 11pt;
  color: var(--c-text-sub);
  margin: 0 0 16px;
  line-height: 1.6;
  flex: 1;
}
.ad-card-cta {
  align-self: flex-start;
  font-size: 10pt;
  
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: gap 0.2s;
}
.ad-card-cta:hover { gap: 8px; }

/* 빈 광고 자리 — 점선 + 광고 문의 안내 */
.ad-card.ad-empty {
  background: transparent;
  border-style: dashed;
  border-color: var(--c-border);
  text-align: center;
  align-items: center;
  justify-content: center;
}
.ad-card.ad-empty:hover {
  border-
  background: rgba(30, 64, 175, 0.02);
}
.ad-card.ad-empty iconify-icon {
  font-size: 32pt;
  color: var(--c-text-muted);
  margin-bottom: 10px;
}
.ad-card.ad-empty h3 { color: var(--c-text-sub); }

/* ====== 광고 문의 CTA 박스 (큰 배너) ====== */
.ad-inquiry {
  padding: 80px 24px;
  background:
    radial-gradient(ellipse at top right, rgba(168, 85, 247, 0.12), transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(6, 182, 212, 0.12), transparent 50%),
    linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  position: relative;
  overflow: hidden;
}
.ad-inquiry-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.ad-inquiry-text { color: #fff; }
.ad-inquiry-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10pt;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0 0 14px;
  padding: 5px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50px;
}
.ad-inquiry-eyebrow iconify-icon {
  color: rgba(255, 255, 255, 0.55);
}
.ad-inquiry-title {
  font-size: 30pt;
  font-weight: 800;
  margin: 0 0 14px;
  letter-spacing: -1px;
  line-height: 1.2;
}
.ad-inquiry-title strong {
  background: linear-gradient(135deg, #fbbf24, #fb923c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ad-inquiry-sub {
  font-size: 12pt;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 24px;
  line-height: 1.7;
}
.ad-inquiry-stats {
  display: flex;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.ad-inquiry-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ad-inquiry-stats strong {
  font-size: 22pt;
  font-weight: 800;
  color: #fbbf24;
  letter-spacing: -0.5px;
}
.ad-inquiry-stats span {
  font-size: 10pt;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
}

/* 우측 가격 표 카드 */
.ad-pricing {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.04) 50%,
      rgba(255, 255, 255, 0.08) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  padding: 28px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 12px 40px rgba(0, 0, 0, 0.30);
}
.ad-pricing h3 {
  font-size: 13pt;
  font-weight: 700;
  color: #fff;
  margin: 0 0 18px;
}
.ad-pricing ul {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ad-pricing li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  font-size: 11pt;
  color: rgba(255, 255, 255, 0.92);
}
.ad-pricing li strong { color: #fbbf24; font-weight: 700; }
.ad-pricing li span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ad-pricing .ad-li-icon {
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}
.ad-pricing li span.ad-price-spot {
  font-size: 9pt;
  background: #16a34a;
  color: #fff;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
  margin-left: 8px;
}
.ad-pricing-note {
  font-size: 10pt;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  text-align: center;
  line-height: 1.6;
}

/* 모바일 반응형 */
@media (max-width: 900px) {
  .ad-inquiry-inner { grid-template-columns: 1fr; gap: 32px; }
  .ad-inquiry-title { font-size: 22pt; }
  .ad-inquiry-stats strong { font-size: 18pt; }
}

/* ====== 공지 ====== */
.notice-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 820px;
  margin: 0 auto;
}
.notice-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--c-text);
  transition: all 0.15s;
  cursor: pointer;
}
.notice-item:hover {
  border-
  background: #fff;
  box-shadow: 0 6px 14px rgba(30, 64, 175, 0.08);
}
.ni-tag {
  font-size: 10pt;
  background: #eff6ff;
  
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.ni-title { flex: 1; font-size: 12pt; font-weight: 500; }
.ni-date { font-size: 10pt; color: var(--c-text-sub); white-space: nowrap; }
.notice-cta { text-align: center; margin-top: 28px; }

/* ====== 문의 / 오시는 길 ====== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
}
.contact-info { padding: 12px 0; }
.contact-info h3 {
  font-size: 14pt;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--c-text);
  letter-spacing: -0.3px;
}
.contact-info h3:not(:first-child) { margin-top: 28px; }
.contact-info p {
  font-size: 11pt;
  color: var(--c-text-sub);
  margin: 6px 0;
  line-height: 1.7;
}
.contact-info strong { color: var(--c-text); margin-right: 8px; font-weight: 600; }
.map-placeholder {
  background: var(--c-bg);
  border: 2px dashed var(--c-border);
  border-radius: 14px;
  padding: 100px 20px;
  text-align: center;
  font-size: 18pt;
  color: var(--c-text-sub);
  font-weight: 600;
}
.map-placeholder small {
  display: block;
  margin-top: 14px;
  font-size: 10pt;
  font-weight: 400;
  color: var(--c-text-muted);
}
/* ====== 구글맵 iframe ====== */
.map-iframe {
  width: 100%;
  height: 400px;
  border: 0;
  border-radius: 14px;
  display: block;
  background: var(--c-bg);
}
.map-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--c-bg);
  border-radius: 10px;
  flex-wrap: wrap;
  gap: 8px;
}
.map-link {
  font-size: 11pt;
  font-weight: 700;
  
  text-decoration: none;
  letter-spacing: -0.2px;
}
.map-link:hover { text-decoration: underline; color: var(--c-primary-dark); }
.map-coord {
  font-size: 10pt;
  color: var(--c-text-sub);
  font-family: 'Consolas', monospace;
}

/* ====== 푸터 ====== */
.home-footer {
  background: #0f172a;
  color: #cbd5e1;
  padding: 60px 24px 30px;
}
.hf-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.hf-col strong {
  display: block;
  color: #fff;
  font-size: 12pt;
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: -0.2px;
}
.hf-col p {
  font-size: 10pt;
  margin: 5px 0;
  line-height: 1.65;
}
.hf-col a {
  color: #60a5fa;
  text-decoration: none;
  cursor: pointer;
}
.hf-col a:hover { text-decoration: underline; }
.hf-col a:hover { text-decoration: underline; }
.hf-bottom {
  max-width: 1200px;
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid #1e293b;
  text-align: center;
}
.hf-bottom small { font-size: 10pt; color: #64748b; }

/* 햄버거 토글 — 모바일에서만 표시 */
.hn-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  font-size: 16pt;
  transition: background 0.15s, border-color 0.15s;
}
.hn-menu-toggle:hover {
  background: rgba(220, 205, 175, 0.12);
  border-color: rgba(220, 205, 175, 0.45);
}

/* ====== 반응형 (홈) ====== */
@media (max-width: 900px) {
  .hn-inner { gap: 12px; padding: 12px 16px; position: relative; }

  /* 모바일 메뉴 — 햄버거로 토글 */
  .hn-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 12px;
    right: 12px;
    flex-direction: column;
    gap: 0;
    margin-left: 0;
    padding: 8px;
    background: linear-gradient(180deg,
      rgba(8, 12, 24, 0.96) 0%,
      rgba(14, 20, 38, 0.96) 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
    z-index: 105;
  }
  .hn-menu.is-open { display: flex; }
  .hn-menu a {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 12pt;
  }
  .hn-menu a:hover {
    background: rgba(220, 205, 175, 0.10);
  }
  .hn-menu-toggle { display: inline-flex; }

  /* 모바일 드롭다운 (화물엘리베이터) — 펼친 상태로 인라인 표시 */
  .hn-dropdown { width: 100%; }
  .hn-dropdown-toggle { width: 100%; }
  .hn-dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: rgba(0, 0, 0, 0.20);
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    margin-top: 4px;
    padding: 4px;
  }
  .hn-dropdown-menu a {
    padding: 10px 14px 10px 28px;
    font-size: 11pt;
  }
  .hn-caret { display: none; }

  /* 입주 문의 모바일에선 숨김 (이전 규칙 유지) */
  .hero { padding: 60px 20px 80px; }
  .hero-title { font-size: 30pt; }
  .hero-sub { font-size: 12pt; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .home-section { padding: 60px 20px; }
  .section-title { font-size: 22pt; }
  .contact-grid { grid-template-columns: 1fr; }
  .hf-inner { grid-template-columns: 1fr; gap: 28px; }
}

/* ====================================================================
   공지 배너 (페이지 최상단 dismissible)
==================================================================== */
.notice-bar {
  position: relative;
  background: linear-gradient(90deg,
    rgba(8, 12, 24, 0.96) 0%,
    rgba(14, 20, 38, 0.96) 50%,
    rgba(8, 12, 24, 0.96) 100%);
  border-bottom: 1px solid rgba(220, 205, 175, 0.16);
  color: rgba(220, 225, 232, 0.90);
  font-size: 10pt;
  z-index: 50;
}
.notice-bar-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 11px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.notice-bar-icon {
  font-size: 14pt;
  color: rgba(220, 205, 175, 0.85);
  flex-shrink: 0;
}
.notice-bar-text {
  flex: 1;
  line-height: 1.45;
}
.notice-bar-text strong {
  color: rgba(220, 205, 175, 0.95);
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-right: 10px;
}
.notice-bar-link {
  color: rgba(220, 205, 175, 0.95);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  font-size: 10pt;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.2s;
}
.notice-bar-link:hover { background: rgba(220, 205, 175, 0.10); }
.notice-bar-close {
  background: none;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  font-size: 13pt;
  border-radius: 6px;
  transition: all 0.2s;
}
.notice-bar-close:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.20);
}
.notice-bar.is-hidden { display: none; }

@media (max-width: 768px) {
  .notice-bar-inner { padding: 9px 16px; gap: 10px; }
  .notice-bar-link { display: none; }
}

/* ====================================================================
   좌측 사이드 광고 (유료 게재, 데스크탑 한정)
==================================================================== */
.side-ad {
  position: fixed;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
  height: 600px;
  background: linear-gradient(135deg,
    rgba(15, 22, 42, 0.92) 0%,
    rgba(8, 12, 24, 0.96) 100%);
  border: 1px solid rgba(220, 205, 175, 0.22);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.85);
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: 16px 14px;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.side-ad-tag {
  font-size: 10pt;
  letter-spacing: 3px;
  color: rgba(220, 205, 175, 0.85);
  font-weight: 600;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.side-ad-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 16px 12px;
  gap: 10px;
}
.side-ad-icon {
  font-size: 28pt;
  color: rgba(220, 205, 175, 0.45);
  margin-bottom: 4px;
}
.side-ad-body h4 {
  font-size: 13pt;
  font-weight: 700;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.3px;
}
.side-ad-body p {
  font-size: 10pt;
  color: rgba(220, 225, 232, 0.62);
  margin: 0;
  line-height: 1.55;
}
.side-ad-body small {
  font-size: 10pt;
  color: rgba(220, 205, 175, 0.78);
  font-weight: 500;
  letter-spacing: 0.2px;
}
.side-ad-cta {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid rgba(220, 205, 175, 0.40);
  border-radius: 8px;
  color: rgba(220, 205, 175, 0.92);
  text-decoration: none;
  font-size: 10pt;
  font-weight: 600;
  transition: all 0.2s;
  background: rgba(220, 205, 175, 0.04);
}
.side-ad-cta:hover {
  background: rgba(220, 205, 175, 0.14);
  color: #fff;
  border-color: rgba(220, 205, 175, 0.65);
}

/* 사이드 광고 — 화면 크기 무관 항상 200×600 fixed (사용자 명시: 변하지 않음) */

/* ====================================================================
   이모지 흑백 처리 — 비밀번호 분실/마스터키 모달
==================================================================== */
#forgot-modal,
#master-modal {
  filter: grayscale(100%);
}

/* ====================================================================
   화물엘리베이터 상태 배지 (승인/거절/대기)
==================================================================== */
.elev-badge {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 6px;
  font-size: 10pt;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.elev-approved {
  background: #16a34a;
  color: #fff;
  box-shadow: 0 1px 2px rgba(22, 163, 74, 0.30);
}
.elev-rejected {
  background: #94a3b8;
  color: #fff;
}
.elev-pending {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

/* ====================================================================
   화물엘리베이터 미니 액션 버튼 (관리자 승인/거절/삭제)
==================================================================== */
.btn-mini-approve, .btn-mini-reject, .btn-mini-delete {
  padding: 5px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 10pt;
  font-weight: 600;
  margin: 0 2px;
  transition: background 0.15s, transform 0.1s;
}
.btn-mini-approve:hover, .btn-mini-reject:hover, .btn-mini-delete:hover {
  transform: translateY(-1px);
}
.btn-mini-approve { background: #16a34a; color: #fff; }
.btn-mini-approve:hover { background: #15803d; }
.btn-mini-reject { background: #dc2626; color: #fff; }
.btn-mini-reject:hover { background: #b91c1c; }
.btn-mini-delete { background: #94a3b8; color: #fff; }
.btn-mini-delete:hover { background: #64748b; }

/* ====================================================================
   화물엘리베이터 탭 (사용예약 / 예약현황) — 구버전 (탭 형태, 현재 미사용)
==================================================================== */
.elev-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 0;
}
.elev-tab {
  padding: 10px 18px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 12pt;
  font-weight: 600;
  color: var(--c-text-sub);
  cursor: pointer;
  transition: all 0.2s;
}
.elev-tab:hover { color: var(--c-text); }
.elev-tab.active {
  
  border-bottom-
}

/* ====================================================================
   공지 배너 "오늘 안보기" 체크박스 + 관리자 공지 폼
==================================================================== */
.notice-bar-skip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10pt;
  color: rgba(220, 225, 232, 0.78);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  margin-right: 4px;
}
.notice-bar-skip input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  accent-color: rgba(220, 205, 175, 0.85);
}
.notice-bar-skip:hover {
  color: rgba(220, 205, 175, 0.92);
}

@media (max-width: 768px) {
  .notice-bar-skip { font-size: 10pt; }
}

/* 관리자 공지 관리 폼 (cp-toggle / rf-meta) */
.cp-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12pt;
  user-select: none;
}
.cp-toggle input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  width: 16px;
  height: 16px;
  accent-
}
.rf-meta {
  font-size: 10pt;
  color: var(--c-text-muted);
  font-weight: 400;
  margin-left: 6px;
}