/* areas/show 頁專用 CSS（從 inline <style> 抽出，方便 browser cache） */
.note-tip { position: relative; }
.note-tip:hover::after { content: attr(data-tip); position: absolute; bottom: 120%; right: 0; background: #333; color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; z-index: 10; pointer-events: none; }
.area-card { background: white; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); border: 1px solid #e5e7eb; padding: 24px; margin-bottom: 20px; transition: box-shadow 0.2s; }
.area-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.area-card h2 { margin: 0 0 16px 0; font-size: 17px; color: #1f2937; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.area-card h2::before { content: ''; display: inline-block; width: 3px; height: 18px; background: #2563eb; border-radius: 2px; }

/* 統計卡片（scoped to area page to avoid Turbo CSS bleed） */
.area-main .stat-card { background: white; padding: 20px; border-radius: 12px; border: 1px solid #e5e7eb; text-align: center; position: relative; overflow: hidden; transition: all 0.2s; }
.area-main .stat-card:hover { border-color: #c7d2fe; box-shadow: 0 4px 12px rgba(37,99,235,0.08); }
.area-main .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.area-main .stat-card:nth-child(1)::before { background: #2563eb; }
.area-main .stat-card:nth-child(2)::before { background: #7c3aed; }
.area-main .stat-card:nth-child(3)::before { background: #dc2626; }
.area-main .stat-card:nth-child(4)::before { background: #ea580c; }
.area-main .stat-label { color: #6b7280; font-size: 12px; margin-top: 6px; font-weight: 500; letter-spacing: 0.02em; }

/* 表格 hover */
.recent-txn-table tbody tr { transition: background 0.15s; }
.recent-txn-table tbody tr:hover { background: #f8fafc; }
.recent-txn-table tbody tr:nth-child(even) { background: #fafbfc; }
.recent-txn-table tbody tr:nth-child(even):hover { background: #f1f5f9; }

/* === inline-style 收斂：高頻重複 pattern 抽 class（與原 inline 完全等價） === */
.area-main .data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.area-main .thead-row { background: #f8fafc; border-bottom: 2px solid #e2e8f0; }
.area-main .tag-commercial { font-size: 10px; color: #fff; background: #6b7280; border-radius: 3px; padding: 1px 4px; }
.area-main .accent-red { color: #dc2626; font-weight: 600; }
.rental-table thead th { padding: 8px; color: #059669; font-weight: 600; white-space: nowrap; }

/* 建案列表 hover */
.area-main .project-item { transition: all 0.2s !important; }
.area-main .project-item:hover { transform: translateX(4px); }

/* 租賃表格 hover */
.rental-table tbody tr { transition: background 0.15s; }
.rental-table tbody tr:hover { background: #f0fdf4; }

/* Google Maps InfoWindow：隱藏原生 X，用自訂按鈕 */
.gm-style-iw-d { overflow: auto !important; }
.gm-style-iw button[aria-label="Close"] { display: none !important; }
.iw-close-btn { position: absolute; top: -6px; right: 8px; width: 28px; height: 28px; border: none; background: #f1f5f9; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #64748b; font-size: 15px; line-height: 1; transition: all 0.15s; z-index: 1; }
.iw-close-btn:hover { background: #e2e8f0; color: #334155; }

/* 手機版 RWD */
@media (max-width: 640px) {
  .area-main { padding: 16px 12px; }
  .area-card { padding: 14px; margin-bottom: 16px; }
  .area-card h2 { font-size: 16px; margin-bottom: 12px; }

  /* 統計卡片 2 欄 */
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .area-main .stat-card { padding: 14px !important; }
  .area-main .stat-card .stat-number { font-size: 24px !important; }

  /* 近50筆成交表格 */
  .recent-txn-table { min-width: 800px; }

  /* 綜合 Top 5 表格 */
  .top5-overall-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .top5-overall-table { min-width: 560px; }

  /* 子區域 Top grid */
  .subarea-top-grid { grid-template-columns: 1fr !important; }
  .subarea-top-table { min-width: 480px; }
  .subarea-top-section { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* 建案列表 */
  .project-item { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .project-item-stats { gap: 12px !important; flex-wrap: wrap; }

  /* 地圖 */
  .project-map-container { height: 350px !important; }

  /* 地圖圖例 */
  .map-legend { flex-wrap: wrap; gap: 8px !important; padding: 10px 14px !important; }

  /* 租賃表格 */
  .rental-table { min-width: 700px; }

  /* 頁面標題 */
  .area-main h1 { font-size: 22px !important; }

  /* 月度圖表高度縮減 */
  .monthly-chart-container { height: 220px !important; }

  /* 圖表 toggle 按鈕 */
  #monthly-chart-toggles { flex-wrap: wrap; }

  /* 近50筆表格 cell 收緊 */
  .recent-txn-table th, .recent-txn-table td { padding: 6px 4px !important; font-size: 12px !important; }

  /* Top 5 綜合排名 */
  .top5-overall-wrap { padding: 14px 12px !important; }
  .top5-overall-wrap h3 { font-size: 13px !important; }
  .top5-overall-table th, .top5-overall-table td { padding: 6px !important; font-size: 12px !important; }
  .top5-overall-table td:first-child { font-size: 14px !important; }
  .top5-overall-table td:nth-last-child(2) { font-size: 13px !important; }

  /* 子區域 Top 表格 */
  .subarea-top-section { padding: 14px 12px !important; }
  .subarea-top-section h3 { font-size: 14px !important; }

  /* 建案列表 stats 字體 */
  .project-item-stats { font-size: 12px !important; }

  /* 租賃表格 cell 收緊 */
  .rental-table th, .rental-table td { padding: 6px 4px !important; font-size: 12px !important; }
}