/* ============================================================
   Alkkulbo Seoul Real Estate v3 - style.css
   ============================================================ */

/* ── 기본 변수 ─────────────────────────────────────────────── */
:root {
  --alk-primary:   #2563eb;
  --alk-primary-h: #1d4ed8;
  --alk-accent:    #f59e0b;
  --alk-red:       #ef4444;
  --alk-green:     #22c55e;
  --alk-gray-50:   #f8fafc;
  --alk-gray-100:  #f1f5f9;
  --alk-gray-200:  #e2e8f0;
  --alk-gray-400:  #94a3b8;
  --alk-gray-600:  #475569;
  --alk-gray-800:  #1e293b;
  --alk-white:     #ffffff;
  --alk-radius:    10px;
  --alk-shadow:    0 2px 8px rgba(0,0,0,.08);
  --alk-shadow-md: 0 4px 16px rgba(0,0,0,.12);
}

/* ── 공통 래퍼 ─────────────────────────────────────────────── */
.alk-re-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--alk-gray-800);
  line-height: 1.6;
}

/* ── 브레드크럼 ────────────────────────────────────────────── */
.alk-re-breadcrumb {
  font-size: .85rem;
  color: var(--alk-gray-600);
  margin-bottom: 12px;
}
.alk-re-breadcrumb a { color: var(--alk-primary); text-decoration: none; }
.alk-re-breadcrumb a:hover { text-decoration: underline; }

/* ── 타이틀 ────────────────────────────────────────────────── */
.alk-re-title,
.alk-re-district-title,
.alk-re-apt-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--alk-gray-800);
}
.alk-re-subtitle,
.alk-re-apt-meta {
  font-size: .95rem;
  color: var(--alk-gray-600);
  margin-bottom: 20px;
}

/* ── 섹션 ──────────────────────────────────────────────────── */
.alk-re-section {
  margin-top: 36px;
}
.alk-re-section h2 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--alk-gray-200);
}
.alk-re-section h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--alk-gray-600);
}

/* ── 통계 카드 그리드 ──────────────────────────────────────── */
.alk-re-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.alk-re-stat-card {
  background: var(--alk-white);
  border: 1px solid var(--alk-gray-200);
  border-radius: var(--alk-radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--alk-shadow);
}
.alk-re-stat-label {
  font-size: .78rem;
  color: var(--alk-gray-600);
  font-weight: 500;
}
.alk-re-stat-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--alk-gray-800);
}
.alk-re-stat-high { color: var(--alk-red); }
.alk-re-stat-low  { color: var(--alk-primary); }

/* ── 변화율 표시 ───────────────────────────────────────────── */
.alk-re-change { font-weight: 700; font-size: .9rem; }
.alk-re-change.up      { color: var(--alk-red); }
.alk-re-change.down    { color: var(--alk-primary); }
.alk-re-change.neutral { color: var(--alk-gray-400); }

/* ── 자치구 카드 그리드 ────────────────────────────────────── */
.alk-re-district-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.alk-re-district-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--alk-white);
  border: 1px solid var(--alk-gray-200);
  border-radius: var(--alk-radius);
  padding: 14px;
  text-decoration: none;
  color: var(--alk-gray-800);
  transition: border-color .2s, box-shadow .2s, transform .15s;
  box-shadow: var(--alk-shadow);
}
.alk-re-district-card:hover {
  border-color: var(--alk-primary);
  box-shadow: var(--alk-shadow-md);
  transform: translateY(-2px);
}
.alk-re-district-card strong { font-size: .95rem; }
.alk-re-card-cnt { font-size: .82rem; color: var(--alk-gray-600); }
.alk-re-card-avg { font-size: .88rem; font-weight: 600; color: var(--alk-primary); }
.alk-re-card-empty { font-size: .8rem; color: var(--alk-gray-400); }

/* ── 랭킹 리스트 ───────────────────────────────────────────── */
.alk-re-rank-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.alk-re-rank-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--alk-gray-50);
  border-radius: 6px;
  text-decoration: none;
  color: var(--alk-gray-800);
  transition: background .15s;
}
a.alk-re-rank-item:hover { background: var(--alk-gray-100); }
.alk-re-rank-no {
  font-size: .78rem;
  font-weight: 700;
  color: var(--alk-gray-400);
  min-width: 20px;
}
.alk-re-rank-name { flex: 1; font-size: .92rem; }
.alk-re-rank-value { font-weight: 700; font-size: .92rem; color: var(--alk-primary); }

/* ── 2열 레이아웃 ──────────────────────────────────────────── */
.alk-re-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* ── 하이라이트 카드 ───────────────────────────────────────── */
.alk-re-highlight-card {
  background: linear-gradient(135deg, #fffbf0, #fef3c7);
  border: 1px solid var(--alk-accent);
  border-radius: var(--alk-radius);
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.alk-re-badge-amount {
  background: var(--alk-accent);
  color: #fff;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: .9rem;
}
.alk-re-muted { font-size: .82rem; color: var(--alk-gray-600); }

/* ── 테이블 ────────────────────────────────────────────────── */
.alk-re-table-scroll { overflow-x: auto; }
.alk-re-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.alk-re-table th,
.alk-re-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--alk-gray-200);
  text-align: left;
  white-space: nowrap;
}
.alk-re-table th { background: var(--alk-gray-50); font-weight: 600; color: var(--alk-gray-600); }
.alk-re-table tbody tr:hover { background: var(--alk-gray-50); }
.alk-re-table a { color: var(--alk-primary); text-decoration: none; }
.alk-re-table a:hover { text-decoration: underline; }
.alk-re-amount { font-weight: 700; color: var(--alk-red); }

/* ── 거래 카드 (모바일) ────────────────────────────────────── */
.alk-re-card-list { display: flex; flex-direction: column; gap: 10px; }
.alk-re-deal-card {
  background: var(--alk-white);
  border: 1px solid var(--alk-gray-200);
  border-radius: var(--alk-radius);
  padding: 14px;
  box-shadow: var(--alk-shadow);
}
.alk-re-deal-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.alk-re-deal-name { font-weight: 700; font-size: .95rem; color: var(--alk-primary); }
.alk-re-deal-amount { font-weight: 800; font-size: 1rem; color: var(--alk-red); }
.alk-re-deal-card-body {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .82rem;
  color: var(--alk-gray-600);
}

/* ── PC/모바일 전환 ────────────────────────────────────────── */
.alk-re-mobile-only { display: none; }
.alk-re-pc-only     { display: block; }
@media (max-width: 640px) {
  .alk-re-mobile-only { display: block; }
  .alk-re-pc-only     { display: none; }
}

/* ── 차트 ──────────────────────────────────────────────────── */
.alk-re-chart-wrap {
  background: var(--alk-white);
  border: 1px solid var(--alk-gray-200);
  border-radius: var(--alk-radius);
  padding: 16px;
  box-shadow: var(--alk-shadow);
}

/* ── CSS 바 차트 (fallback) ────────────────────────────────── */
.alk-re-trend-bars {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  height: 120px;
  padding: 8px 0;
}
.alk-re-trend-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.alk-re-bar-wrap   { width: 100%; flex: 1; display: flex; align-items: flex-end; }
.alk-re-bar        { width: 100%; background: var(--alk-primary); border-radius: 4px 4px 0 0; min-height: 4px; transition: height .3s; }
.alk-re-bar-label  { font-size: .72rem; color: var(--alk-gray-600); text-align: center; }
.alk-re-bar-cnt    { font-size: .75rem; font-weight: 600; }
.alk-re-bar-avg    { font-size: .7rem;  color: var(--alk-gray-600); }

/* ── 외부 링크 버튼 ────────────────────────────────────────── */
.alk-re-external-links { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.alk-re-ext-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--alk-gray-100);
  color: var(--alk-gray-800);
  padding: 7px 14px;
  border-radius: 20px;
  font-size: .85rem;
  text-decoration: none;
  border: 1px solid var(--alk-gray-200);
  transition: background .15s;
}
.alk-re-ext-btn:hover { background: var(--alk-gray-200); }

/* ── 관련 글 ────────────────────────────────────────────────── */
.alk-re-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.alk-re-related-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--alk-gray-50);
  border: 1px solid var(--alk-gray-200);
  border-radius: var(--alk-radius);
  padding: 14px;
  text-decoration: none;
  color: var(--alk-gray-800);
  transition: border-color .15s;
}
.alk-re-related-item:hover { border-color: var(--alk-primary); }
.alk-re-related-item strong { font-size: .9rem; }
.alk-re-related-item small  { font-size: .78rem; color: var(--alk-gray-600); }

/* ── FAQ ────────────────────────────────────────────────────── */
.alk-re-faq-item {
  border: 1px solid var(--alk-gray-200);
  border-radius: 6px;
  margin-bottom: 8px;
  overflow: hidden;
}
.alk-re-faq-item summary {
  padding: 13px 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: .92rem;
  background: var(--alk-gray-50);
  list-style: none;
}
.alk-re-faq-item summary::-webkit-details-marker { display: none; }
.alk-re-faq-item summary::after { content: ' ▼'; font-size: .7rem; float: right; }
.alk-re-faq-item[open] summary::after { content: ' ▲'; }
.alk-re-faq-item p { padding: 12px 16px; margin: 0; font-size: .88rem; color: var(--alk-gray-600); }

/* ── 광고 슬롯 ──────────────────────────────────────────────── */
.alk-re-ad-slot {
  margin: 20px 0;
  text-align: center;
}

/* ── 검색 폼 (기존 호환) ───────────────────────────────────── */
.alk-re-search-box {
  background: var(--alk-gray-50);
  border: 1px solid var(--alk-gray-200);
  border-radius: var(--alk-radius);
  padding: 20px;
  margin-bottom: 24px;
}
.alk-re-row { display: flex; flex-wrap: wrap; gap: 12px; }
.alk-re-field { display: flex; flex-direction: column; gap: 4px; min-width: 160px; flex: 1; }
.alk-re-field label { font-size: .82rem; font-weight: 600; color: var(--alk-gray-600); }
.alk-re-field select,
.alk-re-field input[type="text"] {
  border: 1px solid var(--alk-gray-200);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: .88rem;
  outline: none;
  background: var(--alk-white);
}
.alk-re-field select:focus,
.alk-re-field input[type="text"]:focus {
  border-color: var(--alk-primary);
  box-shadow: 0 0 0 2px rgba(37,99,235,.15);
}
.alk-re-actions { margin-top: 14px; display: flex; gap: 8px; }
.alk-re-btn {
  padding: 8px 20px;
  border-radius: 6px;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--alk-gray-200);
  background: var(--alk-white);
  transition: background .15s;
}
.alk-re-btn--primary { background: var(--alk-primary); color: #fff; border-color: var(--alk-primary); }
.alk-re-btn--primary:hover { background: var(--alk-primary-h); }
.alk-re-btn:hover { background: var(--alk-gray-100); }

/* ── 로딩 / 비어있음 ────────────────────────────────────────── */
.alk-re-loading { display: flex; align-items: center; gap: 10px; padding: 20px; color: var(--alk-gray-600); }
.alk-re-spinner { width: 18px; height: 18px; border: 2px solid var(--alk-gray-200); border-top-color: var(--alk-primary); border-radius: 50%; animation: alk-spin .7s linear infinite; }
@keyframes alk-spin { to { transform: rotate(360deg); } }
.alk-re-empty { text-align: center; padding: 40px 16px; color: var(--alk-gray-600); }
.alk-re-empty p { margin: 0; }

/* ── 페이지네이션 ───────────────────────────────────────────── */
.alk-re-pagination { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
.alk-re-page-btn {
  padding: 6px 12px;
  border: 1px solid var(--alk-gray-200);
  border-radius: 4px;
  background: var(--alk-white);
  cursor: pointer;
  font-size: .85rem;
}
.alk-re-page-btn.active { background: var(--alk-primary); color: #fff; border-color: var(--alk-primary); }
.alk-re-page-btn:hover:not(.active) { background: var(--alk-gray-100); }

/* ── 배지 ───────────────────────────────────────────────────── */
.alk-re-badge-count { font-size: .82rem; background: var(--alk-primary); color: #fff; padding: 2px 8px; border-radius: 20px; margin-left: 6px; }
.alk-re-badge { padding: 2px 8px; border-radius: 20px; font-size: .78rem; font-weight: 600; }
.alk-re-badge-done    { background: #dcfce7; color: #166534; }
.alk-re-badge-error   { background: #fee2e2; color: #991b1b; }
.alk-re-badge-running { background: #fef9c3; color: #713f12; }
.alk-re-badge-pending { background: var(--alk-gray-100); color: var(--alk-gray-600); }

/* ── 관리자 ─────────────────────────────────────────────────── */
.alk-re-admin-stats { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.alk-re-admin-stat-card {
  background: var(--alk-white);
  border: 1px solid var(--alk-gray-200);
  border-radius: var(--alk-radius);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
  box-shadow: var(--alk-shadow);
}
.alk-re-admin-stat-card strong { font-size: .82rem; color: var(--alk-gray-600); }
.alk-re-admin-stat-card span   { font-size: 1.1rem; font-weight: 700; }

/* ── 반응형 ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .alk-re-two-col {
    grid-template-columns: 1fr;
  }
  .alk-re-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .alk-re-district-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 480px) {
  .alk-re-title,
  .alk-re-district-title,
  .alk-re-apt-title { font-size: 1.35rem; }
  .alk-re-stats-grid { grid-template-columns: 1fr 1fr; }
  .alk-re-district-grid { grid-template-columns: repeat(2, 1fr); }
  .alk-re-row { flex-direction: column; }
  .alk-re-field { min-width: 100%; }
}