/* 日田市 空き家バンク物件マップ（非公式）の見た目。配色はデジタル庁ダッシュボードガイドブックの Blue パレット */
:root{
  --text:#1A1A1A;          /* 本文 */
  --label:#626264;         /* 補助テキスト（背景白で 6.2:1） */
  --link:#0017C1;          /* リンク */
  --bg:#FFFFFF;
  --bg-standard:#F8F8FB;   /* コンテンツ領域 */
  --bg-control:#F1F1F4;    /* 操作部品 */
  --line:#CCCCCC;          /* SolidGray 200 */
  --line-strong:#767676;   /* SolidGray 536（境界線 4.5:1） */
  --key:#0017C1;           /* Blue 900 */
  --key-600:#3460FB;       /* Blue 600：募集中 */
  --key-50:#E8F1FE;
  --neg:#A58000;           /* Yellow 800：交渉中（図形用） */
  --neg-text:#6B5300;      /* 交渉中の文字（4.5:1 以上を確保するため暗くした Yellow 系） */
  --neg-50:#FBF5E0;
  --error:#CE0000;
  --tap:44px;              /* スマホで押しやすい最小の高さ */
  --font:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo",sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.7;}
a{color:var(--link);}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #FFC700;outline-offset:2px;}
.wrap{max-width:1400px;margin:0 auto;padding:0 24px;}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- ヘッダー ---------- */
header.site{border-bottom:1px solid var(--line);}
header.site .wrap{padding-top:12px;padding-bottom:12px;}
header.site h1{font-size:20px;line-height:1.4;margin:0;font-weight:700;}
.unofficial{display:inline-block;font-size:13px;font-weight:700;color:var(--text);border:1px solid var(--line-strong);border-radius:4px;padding:0 6px;margin-left:8px;vertical-align:2px;}

/* ---------- 要約・指標 ---------- */
.summary{padding-top:12px;}
.summary p{margin:0;}
.updated{font-size:14px;color:var(--label);display:flex;flex-wrap:wrap;gap:0 16px;}
.updated > span{white-space:nowrap;}
.stale{margin-top:12px;padding:12px 16px;border:2px solid var(--error);border-radius:8px;color:var(--error);font-weight:700;display:none;}
/* 指標＝種別の切り替えボタンを兼ねる（数字は、エリア・予算など他の条件の中での件数） */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:12px 0 0;}
.kpi{font:inherit;text-align:left;color:var(--text);background:var(--bg-standard);border:1px solid var(--line);border-radius:8px;padding:8px 16px;min-height:var(--tap);cursor:pointer;}
.kpi:hover:not(:disabled){border-color:var(--key);}
.kpi:disabled{cursor:default;opacity:.5;}
.kpi[aria-pressed="true"]{background:var(--key);border-color:var(--key);color:#fff;}
.kpi[aria-pressed="true"] .kpi-label,.kpi[aria-pressed="true"] .kpi-unit{color:#fff;}
.kpi-label{font-size:14px;color:var(--label);display:block;}
.kpi-value{font-size:28px;font-weight:700;line-height:1.3;}
.kpi-unit{font-size:14px;color:var(--label);margin-left:2px;}

/* ---------- 条件バー（常に表示。一番使う「種別・エリア・予算」だけを出す） ---------- */
.finder{margin-top:12px;background:var(--bg-control);border-radius:8px;padding:12px 16px;}
.bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;}
.field{display:flex;flex-direction:column;gap:2px;min-width:0;}
.field-label{font-size:13px;font-weight:700;}
select{font:inherit;font-size:15px;min-height:var(--tap);padding:0 32px 0 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--bg);color:var(--text);max-width:100%;}
select:disabled{color:var(--label);background:var(--bg-control);}
.more{align-self:center;}
.more summary{font-size:14px;color:var(--link);text-decoration:underline;cursor:pointer;min-height:var(--tap);display:flex;align-items:center;list-style:none;}
.more summary::-webkit-details-marker{display:none;}
.more summary::before{content:"＋";margin-right:2px;text-decoration:none;}
.more[open] summary::before{content:"－";}
.more-body{display:flex;flex-wrap:wrap;gap:4px 20px;padding:4px 0 4px;}
.checks label{display:flex;align-items:center;gap:8px;font-size:15px;cursor:pointer;min-height:var(--tap);}
.checks input{width:20px;height:20px;accent-color:var(--key);}
/* 適用中の条件（何で絞っているかを常に見せ、✕で1つずつ外せる） */
.active{display:none;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;font-size:14px;}
.active.on{display:flex;}
.active-label{color:var(--label);}
.chip-x{font:inherit;font-size:14px;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 6px 0 12px;border-radius:999px;border:1px solid var(--key);background:var(--key-50);color:var(--key);cursor:pointer;}
.chip-x span{font-size:16px;line-height:1;padding:0 4px;}
.clear-all{font:inherit;font-size:14px;background:none;border:0;color:var(--link);text-decoration:underline;cursor:pointer;min-height:36px;padding:0 4px;}

/* ---------- 地図とリスト ---------- */
.main{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:16px;margin-top:16px;height:680px;}
.panel{border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;min-height:0;}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);font-size:14px;}
.panel-head h2{font-size:16px;margin:0;}
.map-hint{font-size:13px;color:var(--label);flex:1;}
.map-box{position:relative;flex:1;min-height:0;isolation:isolate;}
#map{position:absolute;inset:0;background:var(--bg-standard);}
.gesture-hint{position:absolute;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);color:#fff;font-size:16px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s;}
.gesture-hint.show{opacity:1;}
.legend-ctl{background:rgba(255,255,255,.94);border-radius:6px;padding:4px 8px;font-size:12px;line-height:1.6;color:var(--text);box-shadow:0 0 0 1px var(--line);}
.legend-ctl svg{vertical-align:-3px;margin-right:4px;}
.legend-ctl .sub{color:var(--label);}
.list{overflow-y:auto;flex:1;min-height:0;padding:8px 12px;}
.sel-notice{display:none;justify-content:space-between;align-items:center;gap:8px;background:var(--key-50);border-radius:6px;padding:8px 12px;margin-bottom:8px;font-size:14px;font-weight:700;}
.sel-notice button{font:inherit;font-size:14px;background:var(--bg);border:1px solid var(--key);color:var(--key);border-radius:6px;padding:0 12px;min-height:36px;cursor:pointer;}

/* 物件カード：主ボタン＝市の掲載ページ（写真があるのはそちら） */
.prop{border-bottom:1px solid var(--line);padding:14px 0;}
.prop:last-child{border-bottom:0;}
.prop.hl,.prop.focus{background:var(--key-50);margin:0 -12px;padding:14px 12px;}
.prop.focus{box-shadow:inset 4px 0 0 var(--key);}
@media (hover:hover){
  .prop{cursor:pointer;}
  .prop:hover{background:var(--bg-standard);margin:0 -12px;padding:14px 12px;}
}
.prop-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.prop-no{font-size:12px;line-height:1.5;color:var(--label);border:1px solid var(--line);border-radius:999px;padding:0 8px;white-space:nowrap;background:var(--bg);}
.prop h3{font-size:16px;margin:0;line-height:1.5;}
.prop-area{font-size:13px;color:var(--label);}
.tags{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;align-items:center;flex:0 0 auto;max-width:45%;}
.tag{font-size:12px;font-weight:700;padding:1px 8px;border-radius:4px;white-space:nowrap;border:1px solid;}
.tag.open{color:var(--key);border-color:var(--key);}
.tag.neg{color:var(--neg-text);border-color:var(--neg);background:var(--neg-50);}
.tag.new{color:#fff;background:var(--key);border-color:var(--key);}
.price{font-size:20px;font-weight:700;margin-top:4px;line-height:1.4;}
.price .sub{font-size:14px;font-weight:400;}
.note{font-size:13px;color:var(--label);}
.meta{font-size:14px;margin-top:2px;}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.btn-primary{flex:1 1 200px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-height:var(--tap);padding:4px 16px;border-radius:8px;background:var(--key);color:#fff;font-weight:700;font-size:15px;text-decoration:none;text-align:center;line-height:1.35;}
.btn-primary small{font-size:12px;font-weight:400;opacity:.9;}
.btn-primary:hover{background:#000060;}
.btn-sub{flex:0 0 auto;font:inherit;font-size:15px;min-height:var(--tap);padding:0 14px;border-radius:8px;border:1px solid var(--key);background:var(--bg);color:var(--key);cursor:pointer;}
.btn-sub:hover{background:var(--key-50);}
.links{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;margin-top:4px;font-size:14px;}
.links-label{font-size:12px;color:var(--label);margin-right:4px;}
.links a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 6px;}
.empty{padding:24px 0;color:var(--label);}
.nomap{font-size:12px;color:var(--label);margin-top:6px;}

/* ---------- このマップについて ---------- */
.about{margin-top:24px;border-top:1px solid var(--line);padding:12px 0;}
.about summary{font-size:16px;font-weight:700;cursor:pointer;min-height:var(--tap);display:flex;align-items:center;}
.about dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:12px 0 0;font-size:14px;}
.about dt{font-weight:700;}
.about dd{margin:0;}
footer{padding:16px 0 40px;font-size:13px;color:var(--label);border-top:1px solid var(--line);}

/* ---------- 地図上の表示 ---------- */
.cnt{background:#fff;border:1.5px solid var(--key-600);color:var(--key);font-size:12px;font-weight:700;border-radius:999px;padding:0 6px;white-space:nowrap;transform:translate(-50%,-50%);display:inline-block;}
.cnt.neg{border-color:var(--neg);color:var(--neg-text);border-style:dashed;}
/* 広域表示のエリアのまとまり（押すとそのエリアに絞り込む） */
.area-pill{transform:translate(-50%,-50%);display:inline-flex;flex-direction:column;align-items:center;background:var(--key);color:#fff;border:2px solid #fff;border-radius:10px;padding:2px 8px;box-shadow:0 1px 4px rgba(0,0,0,.35);white-space:nowrap;cursor:pointer;line-height:1.3;}
.area-pill b{font-size:12px;font-weight:700;}
.area-pill span{font-size:15px;font-weight:700;}
.area-pill:hover{background:#000060;}
.leaflet-popup-content{font-family:var(--font);font-size:14px;line-height:1.6;}
.pop-btn{display:block;width:100%;text-align:left;font:inherit;font-size:14px;background:none;border:0;border-top:1px solid var(--line);padding:8px 0;min-height:40px;cursor:pointer;color:var(--text);}
.pop-btn:hover{background:var(--key-50);}

/* ---------- スマホ ---------- */
.tabs{display:none;}
@media (max-width:1023px){
  .wrap{padding:0 16px;}
  .kpis{gap:6px;}
  .kpi{padding:6px 4px;text-align:center;border-radius:6px;}
  .kpis{grid-template-columns:repeat(4,minmax(0,1fr));}
  .kpi-label{font-size:12px;}
  .kpi-value{font-size:20px;}
  .kpi-unit{font-size:11px;}
  .finder{padding:10px 12px;}
  .finder .field-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .finder select{font-size:14px;padding:0 24px 0 8px;width:100%;}
  .active{margin-top:4px;}
  .bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .more{grid-column:1 / -1;}
  .main{grid-template-columns:1fr;height:auto;}
  .panel.map-panel{height:62vh;min-height:360px;}
  .list{overflow:visible;}
  /* スクロールしても「地図／リスト」の切り替えが上端に残る */
  .tabs{display:flex;gap:8px;margin-top:4px;position:sticky;top:0;z-index:1100;background:var(--bg);padding:8px 0;}
  .tabs button{flex:1;font:inherit;font-size:15px;font-weight:700;min-height:var(--tap);border:1px solid var(--line-strong);border-radius:8px;background:var(--bg);cursor:pointer;}
  .tabs button[aria-selected="true"]{background:var(--key);border-color:var(--key);color:#fff;}
  .hidden-sp{display:none!important;}
  .about dl{grid-template-columns:1fr;gap:2px;}
  .about dt{margin-top:10px;}
}
@media (max-width:480px){
  header.site h1{font-size:18px;}
}