/* areas/show 頁專用 CSS（從 inline <style> 抽出，方便 browser cache） */
.note-tip { position: relative; }
/* ⚠ 不能用 .note-tip:hover::after —— 這些表格都在 `overflow-x: auto` 的容器裡，
   而 overflow-x 不是 visible 時 overflow-y 會被算成 auto，**兩個方向都裁**：
   第一列的 tooltip 往上彈會被切掉，手機上容器只有 320px 更是怎麼放都露不全。
   改成掛在 body 上的 position: fixed（shared/_note_tooltip.html.erb 定位）。

   ⚠ white-space 不能用 nowrap：備註最長 280 字，12px 中文會拉成約 3000px 寬。
   pre-wrap 是因為備註裡的條列（「1.…2.…」）本來就帶換行。 */
.note-tip-pop {
  position: fixed; display: none; z-index: 3000;
  /* max-width 預設算的是 content box，不加這行實際會寬出左右 padding 共 20px */
  box-sizing: border-box;
  background: #333; color: #fff;
  padding: 6px 10px; border-radius: 4px;
  font-size: 12px; line-height: 1.55; text-align: left; font-weight: 400;
  white-space: pre-wrap; width: max-content;
  max-width: min(320px, calc(100vw - 24px));
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  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; }
/* 建案列表的子區分段標（AB區／C區…、軟橋段／洲美段）。刻意比 h2 輕：
   它是同一張卡片裡的第二層，做得跟 h2 一樣重會看起來像另一個區塊。
   第一段的 margin-top 收掉，免得緊接在 h2 下面時多一段空白。 */
.area-card .subarea-heading {
  display: flex; align-items: center; gap: 8px;
  margin: 20px 0 10px; font-size: 13px; font-weight: 600;
  color: #475569; letter-spacing: 0.02em;
}
.area-card .subarea-heading:first-of-type { margin-top: 0; }
.area-card .subarea-heading span { font-weight: 500; color: #94a3b8; }
.area-card .subarea-heading::after {
  content: ''; flex: 1; height: 1px; background: #e5e7eb;
}

/* 統計卡片（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; }
}