/* 租金行情 pages (server-rendered by src/services/rental/market.js).
   Standalone: does NOT touch styles.css (the map app's). Design §9 tokens, system CJK stack
   (Google Fonts are CSP-blocked), no external asset of any kind. */

:root {
  --green: #2E6B4F; --green-d: #22503B; --green-s: #E7F0EA;
  --clay: #B0603A; --ink: #23201A; --ink2: #5A5347; --ink3: #9A9284;
  --line: #E7E1D5; --line2: #F0EBE1; --page: #F6F3EC; --card: #FFFFFF;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", "Microsoft JhengHei", "PingFang TC",
    "Noto Sans TC", sans-serif;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--green); }
a:hover { color: var(--green-d); }

/* ── header / footer ── */
.mk-header {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 16px 24px; background: var(--card); border-bottom: 1px solid var(--line);
}
.mk-logo { text-decoration: none; display: inline-flex; align-items: baseline; gap: 7px; }
.mk-logo .zh { font-size: 21px; font-weight: 700; color: var(--green); letter-spacing: .04em; }
.mk-logo .en { font-size: 12px; font-weight: 600; color: var(--ink3); letter-spacing: .14em; text-transform: uppercase; }
.mk-tagline { font-size: 12.5px; color: var(--ink2); }

.mk-main { max-width: 860px; margin: 0 auto; padding: 22px 20px 56px; }
.mk-foot {
  max-width: 860px; margin: 0 auto; padding: 20px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink3);
}

/* ── typography ── */
h1 { font-size: 27px; line-height: 1.35; margin: 14px 0 8px; }
h2 { font-size: 17px; margin: 30px 0 10px; color: var(--ink); }
.mk-lede { font-size: 14.5px; color: var(--ink2); margin: 0 0 6px; }
.mk-empty { font-size: 13.5px; color: var(--ink3); }

.mk-crumb { font-size: 12.5px; color: var(--ink3); }
.mk-crumb a { text-decoration: none; }
.mk-crumb .sep { margin: 0 7px; color: var(--ink3); }

/* ── stat tiles ── */
.mk-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin: 18px 0 6px;
}
.mk-tile {
  background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 13px 15px;
}
.mk-tile .k { font-size: 11.5px; color: var(--ink3); letter-spacing: .04em; }
.mk-tile .v { font-size: 23px; font-weight: 700; color: var(--green); margin-top: 3px; line-height: 1.25; }
.mk-tile .u { font-size: 11.5px; color: var(--ink3); }

/* ── tables (also the crawlable form of the chart) ── */
.mk-table {
  width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--line); border-radius: 13px; overflow: hidden; font-size: 13.5px;
}
.mk-table th, .mk-table td { padding: 9px 12px; border-bottom: 1px solid var(--line2); text-align: left; }
.mk-table th { background: var(--green-s); color: var(--green-d); font-size: 12px; font-weight: 700; }
.mk-table tbody tr:last-child td { border-bottom: 0; }
.mk-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.mk-table .rk { color: var(--ink3); width: 44px; }
.mk-table tr.cur { background: var(--green-s); }
.mk-table tr.cur td { font-weight: 700; }
.mk-tablewrap { overflow-x: auto; }

/* ── trend chart ── */
.mk-chart { width: 100%; height: auto; display: block; margin: 6px 0 14px; }
.mk-chart .ln { stroke: var(--green); stroke-width: 2.5; }
.mk-chart circle { fill: var(--green); }
.mk-chart .ax { fill: var(--ink3); font-size: 11px; }

/* ── disclosure (the 登錄率 caveat — the site's credibility) ── */
.mk-disclose {
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--clay);
  border-radius: 13px; padding: 4px 20px 16px; margin-top: 30px;
}
.mk-disclose h2 { font-size: 15px; margin: 16px 0 8px; }
.mk-disclose ul { margin: 0; padding-left: 20px; }
.mk-disclose li { font-size: 13px; color: var(--ink2); margin-bottom: 9px; }
.mk-disclose strong { color: var(--ink); }

/* ── AI note ── */
.mk-note p { font-size: 14.5px; color: var(--ink2); margin: 0 0 10px; }

/* ── tools + nav ── */
.mk-toolgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.mk-tool {
  display: block; text-decoration: none; background: var(--card); border: 1px solid var(--line);
  border-radius: 13px; padding: 13px 15px;
}
.mk-tool:hover { border-color: var(--green); }
.mk-tool .n { display: block; font-weight: 700; font-size: 14.5px; color: var(--green); }
.mk-tool .d { display: block; font-size: 12.5px; color: var(--ink2); margin-top: 3px; line-height: 1.6; }

.mk-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.mk-chips a {
  text-decoration: none; font-size: 13px; background: var(--card);
  border: 1px solid var(--line); border-radius: 20px; padding: 4px 13px;
}
.mk-chips a:hover { border-color: var(--green); }

.mk-more { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 26px; font-size: 13.5px; }

@media (max-width: 560px) {
  h1 { font-size: 22px; }
  .mk-main { padding: 16px 14px 44px; }
  .mk-table { font-size: 12.5px; }
  .mk-table th, .mk-table td { padding: 7px 8px; }
}