/* v175 (2026-10-25): 候補一覧（recommend.html）の見直し。ページ内の <style> の後に読み、上書きだけをする。
   ・色と見出しを地図画面にそろえる（紙色の地・墨の線・青緑のアクセント）
   ・列は画面幅に合わせて優先度の低いものから省く（地番と面積が「…」で切れていた）
   ・幅640px未満は表ではなく1筆1枚のリスト。絞り込み条件は「条件を変える」で開く */
:root {
  --ink: #1c2733; --ink2: #5a6572; --line: #e3ddd1; --bg: #f7f5f0; --card: #fffdf8; --rule: #c9c2b4;
  --accent: #0b7285; --accent2: #0b7285; --accent-ink: #085a69; --btn-line: #8f99a3;
}
body { background: var(--bg); }

/* ---------------- ヘッダー（地図と同じ） ---------------- */
header.rh { height: 52px; padding: 0 16px; gap: 14px; background: var(--card); color: var(--ink); border-bottom: 2px solid var(--ink); white-space: nowrap; }
header.rh .rh-brand { margin: 0; padding: 0; border: 0; border-radius: 0; display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; flex: none; }
header.rh .rh-brand:hover { background: none; }
header.rh .brand-mark { width: 26px; height: 26px; color: var(--accent); flex: none; }
header.rh .brand-name { font-size: 21px; font-weight: 700; letter-spacing: .16em; line-height: 1; }
header.rh h1.rh-title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .06em; padding-left: 14px; border-left: 1px solid var(--rule); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
header.rh h1.rh-title .sub { font-size: 11.5px; color: var(--ink2); margin-left: 10px; letter-spacing: .02em; font-weight: 400; }
header.rh .rh-back { margin-left: auto; height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--btn-line);
  border-radius: 6px; color: var(--ink); background: #fff; font-size: 12.5px; flex: none; }
header.rh .rh-back:hover { border-color: var(--ink); background: #f4f6f7; }
:focus-visible { outline: 2px solid #1971c2; outline-offset: 1px; }

/* ---------------- 県タブ ---------------- */
.region-tabs { background: var(--card); border-bottom: 1px solid var(--rule); height: 40px; padding: 0 10px; gap: 2px; align-items: stretch; }
.region-tabs button { background: none; border: 0; border-bottom: 2.5px solid transparent; border-radius: 0; color: var(--ink2);
  padding: 0 14px; font-size: 12.5px; display: inline-flex; align-items: center; }
.region-tabs button:hover { color: var(--ink); background: #f1ede4; }
.region-tabs button.on { color: var(--ink); background: none; border-bottom-color: var(--accent); font-weight: 600; }
.region-tabs .n { color: #8a94a0; }
.region-tabs button.on .n { color: var(--ink2); }
.wrap { height: calc(100vh - 92px); height: calc(100dvh - 92px); }

/* ---------------- 左の条件 ---------------- */
aside { background: var(--card); border-right: 1px solid var(--rule); }
aside h2 { font-size: 12.5px; text-transform: none; letter-spacing: .04em; color: var(--ink); border-bottom: 1px solid var(--rule); padding-bottom: 5px; }
.weights { background: #f3efe6; }
select, input[type=number], #pSearch, #favFrom { border-color: #b9b2a4; min-height: 32px; border-radius: 6px; }
.oaza-tools button, .lf-tools button { border-color: #b9b2a4; padding: 5px 4px; }
.oaza-tools button:hover, .lf-tools button:hover { background: #f1ede4; }
/* 地名・市区町村は1列（2列では「富士見／町」のように名前が折れていた）。件数は右寄せ */
.oaza-grid, .city-grid { grid-template-columns: 1fr; max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; gap: 0; }
.oaza-grid .chk, .city-grid .chk { white-space: nowrap; }
.oaza-grid .chk > :last-child:not(input), .city-grid .chk .n { margin-left: auto; }
.p-note { background: #fbf4df; border-color: #e9d9a8; }
.fhead, .fbar, .ftoggle { display: none; }

/* ---------------- 件数と並び ---------------- */
.toolbar { background: var(--bg); height: 54px; padding: 0 18px; gap: 10px; border-bottom: 1px solid var(--rule); }
.toolbar label { font-size: 11.5px; color: var(--ink2); }
.toolbar select { min-width: 0; width: auto; }
.table-inner { max-width: 1240px; }

/* ---------------- 表 ---------------- */
table { background: var(--card); }
thead th { top: 54px; background: #efebe3; color: var(--ink2); border-bottom: 1px solid var(--rule); }
thead th:hover { background: #e7e2d7; }
thead th.sorted::after { color: var(--accent); }
tbody td { border-bottom: 1px solid #ece7dc; }
tbody tr:hover { background: #faf7f0; }
td.name { white-space: normal; }
td.name .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
td.name .bdg { display: flex; flex-wrap: wrap; gap: 2px 3px; margin-top: 3px; font-weight: 400; }
td.name .bdg .badge, .rl-bdg .badge { margin: 0; }
td.area .area-t { display: block; margin: 1px 0 0; }
td.lf { white-space: normal; font-size: 11.5px; line-height: 1.35; }
.total { background: var(--accent); }
.total.mid { background: #e67700; }
td .jump { display: inline-block; color: var(--accent); border-color: #b9d5da; }
td .jump:hover, .rl-jump .jump:hover { background: #e6f2f4; border-color: var(--accent); }
.colnote { font-size: 11px; color: var(--ink2); padding: 6px 18px; background: var(--bg); }
.note { background: var(--card); border-top-color: var(--rule); }

/* ---------------- 狭い幅: 1筆1枚のリスト ---------------- */
.rlist { list-style: none; margin: 0; padding: 0; background: var(--card); }
.rlist li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; align-items: center;
  padding: 11px 14px; border-bottom: 1px solid #ece7dc; }
.rlist.p li { grid-template-columns: minmax(0, 1fr) auto; }
.rlist .rl-score { grid-column: 1; grid-row: 1 / 3; align-self: start; margin-top: 1px; }
.rlist .rl-name { grid-column: 2; grid-row: 1; font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; line-height: 1.35; }
.rlist .rl-jump { grid-column: 3; grid-row: 1 / 3; align-self: start; }
.rlist.p .rl-name { grid-column: 1; }
.rlist.p .rl-jump { grid-column: 2; }
.rlist .rl-jump .jump { display: inline-block; color: var(--accent); text-decoration: none; font-size: 12px; border: 1px solid #b9d5da;
  padding: 6px 10px; border-radius: 6px; background: #fff; white-space: nowrap; }
.rlist .rl-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; color: var(--ink2); font-family: var(--mono); }
.rlist .rl-meta b { color: var(--ink); font-weight: 600; }
.rlist .rl-meta { grid-column: 2; grid-row: 2; }
.rlist .rl-bdg { grid-column: 2 / -1; grid-row: 3; display: flex; flex-wrap: wrap; gap: 3px; }
.rlist.p .rl-meta { grid-column: 1; }
.rlist.p .rl-bdg { grid-column: 1 / -1; }

@media (max-width: 1100px) { header.rh h1.rh-title .sub { display: none; } }
@media (max-width: 820px) {
  .region-tabs .rt-long { display: none; }
  .wrap > aside { display: none; }
  .wrap.filters-open > aside { display: block; position: fixed; inset: 0; z-index: 80; overflow-y: auto; padding: 0 16px 90px; border: 0; }
  body.filters-open { overflow: hidden; }
  .wrap.filters-open .fhead { display: flex; align-items: center; position: sticky; top: 0; z-index: 2; margin: 0 -16px 12px; padding: 0 16px;
    height: 52px; background: var(--card); border-bottom: 2px solid var(--ink); font-size: 15px; }
  .fhead .fclose { margin-left: auto; height: 32px; padding: 0 12px; border: 1px solid var(--btn-line); border-radius: 6px; background: #fff; font: 12.5px var(--sans); color: var(--ink); }
  .wrap.filters-open .fbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 81; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--card); border-top: 1px solid var(--rule); }
  .fbar .fdone { flex: 1; height: 44px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; font: 600 14px var(--sans); }
  .ftoggle { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 1px solid var(--ink); border-radius: 6px;
    background: var(--ink); color: #fff; font: 600 12.5px var(--sans); flex: none; }
  .toolbar { height: auto; min-height: 54px; flex-wrap: wrap; padding: 10px 14px; gap: 8px 10px; }
  .toolbar .count { flex: 1 1 auto; }
  .toolbar .spacer { flex-basis: 100%; height: 0; }
  .toolbar select { flex: 1 1 auto; }
  #limit, #pLimit { flex: 0 0 88px; }
  .note, .colnote { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 520px) { .region-tabs .n { display: none; } .region-tabs button { padding: 0 12px; } }
@media (max-width: 400px) { header.rh .brand-name { display: none; } header.rh h1.rh-title { padding-left: 10px; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }