/* =========================================================
   デザイントークン(Figma: 物件検索 node 38:860 準拠)
   青(アクション/ブランド) × 朱(価格) × 冷たいグレー
   ========================================================= */
:root{
  --bg:        #ffffff;
  --panel:     #ffffff;
  --ink:       #413e3e;
  --muted:     #8b909e;
  --line:      #d3d5da;
  --line-soft: #f0f0f0;
  --fill:      #ededed;
  --primary:   #4295ec;
  --primary-d: #3d90ec;
  --primary-l: #5da5ed;
  --primary-soft:#e8f2fd;
  --price:     #d14f2c;
  --thumb:     #d9d9d9;
  --shadow:    0 2px 8px rgba(65,62,62,.10);
  --shadow-lg: 0 8px 24px rgba(65,62,62,.18);
  --header-h:  70px;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",Meiryo,system-ui,sans-serif;
  font-size:12px; color:var(--ink); background:var(--bg);
  display:flex; flex-direction:column; overflow:hidden;
  /* モバイルの 100vh はツールバーが引っ込んだ高さなので、下端が可視領域外に出て
     地図の出典表記が隠れる。dvh 対応ブラウザでは実際の可視高を使う */
  height:100vh;
  height:100dvh;
  -webkit-font-smoothing:antialiased;
}
button{ font-family:inherit; cursor:pointer; }
select,input{ font-family:inherit; }

/* ===== ヘッダー ===== */
.app-header{
  height:var(--header-h); flex:0 0 auto; display:flex; align-items:center; gap:14px;
  padding:0 24px; background:var(--primary); color:#fff; z-index:1300;
}
.brand{ display:flex; align-items:center; gap:18px; }
/* ロゴマーク。左下だけ角を尖らせて地図ピンに見立て、中央を丸く抜く。
   プロトタイプ版の形をFigma実装時に落としていたので復元(2026-08-09 ざき判断)。
   ヘッダーが青地になったため、色はプロトタイプ(青地に白抜き)から反転させている */
.brand .mark{
  width:26px; height:26px; flex:0 0 26px;
  border-radius:8px 8px 8px 2px; background:#fff;
  position:relative;
}
.brand .mark::after{
  content:""; position:absolute; inset:8px;
  border-radius:50%; background:var(--primary);
}
.brand-txt{ min-width:0; }
.brand h1{ font-size:17px; margin:0; font-weight:700; letter-spacing:.03em; white-space:nowrap; }
/* 何を見るツールなのかを1行で。データは取引事例で、売出し中の在庫ではない */
.brand-sub{
  margin:1px 0 0; font-size:10px; font-weight:600; color:rgba(255,255,255,.82);
  white-space:nowrap;
}
.app-nav{ margin-left:auto; display:flex; align-items:center; gap:22px; }
.app-nav button{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 2px; border:none; background:transparent;
  color:#fff; font-size:12px; font-weight:700; white-space:nowrap;
  border-bottom:2px solid transparent;
}
.app-nav button:hover{ border-bottom-color:rgba(255,255,255,.5); }
/* 表示中のビューを下線で示す。色だけだと青地の白文字では差が出ない */
.app-nav button.on{ border-bottom-color:#fff; }
.app-nav button:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
/* 保存件数。0件のときは出さない(空のバッジは意味を持たない) */
.nav-badge{
  min-width:17px; height:17px; padding:0 5px; border-radius:9px;
  background:rgba(255,255,255,.28); color:#fff; font-size:10px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
}
.demo-tag{
  font-size:10px; font-weight:700; padding:3px 8px; border-radius:3px;
  background:rgba(255,255,255,.22); color:#fff; white-space:nowrap;
}
/* モバイルでだけ出す要素(検索条件ドロワーの開閉ボタン)。
   `.only-mobile` 単独だと後に書かれた `.tool-btn{display:inline-flex}` と詳細度が並んで
   後勝ちで負けるため、クラス2つ分にして確実に隠す。
   920px以下で表示に戻す指定(下部のメディアクエリ)は同じ詳細度で後に来るのでそちらが勝つ */
.tool-btn.only-mobile{ display:none; }

/* ===== 3ペインレイアウト ===== */
.app-body{
  flex:1; display:grid; grid-template-columns:263px minmax(0,1fr) 355px; min-height:0;
}
.app-body > *{ min-height:0; }
/* 地図の全画面表示(左右パネルを畳む)
   grid のまま列幅を 0 にすると、display:none で消えた左右パネルの分だけ
   .center が自動配置で繰り上がり、幅0の1列目に入って地図が消える。
   レイアウト方式ごと block に切り替えて、幅の計算に列を関与させない */
body.map-full .app-body{ display:block; }
body.map-full .center{ height:100%; }
body.map-full .filters,
body.map-full .results{ display:none; }

/* ===== 左: 検索条件パネル ===== */
.filters{
  background:var(--panel); border-right:1px solid var(--line-soft);
  overflow-y:auto; padding:18px 20px 28px;
}
.f-section{ margin-bottom:16px; }
.f-label{
  display:block; font-size:12px; font-weight:700; color:var(--ink); margin-bottom:6px;
}
.range-row{ display:grid; grid-template-columns:1fr 12px 1fr; align-items:center; gap:4px; }
.range-row .tilde{ text-align:center; color:var(--muted); }

/* セレクトは Figma のシェブロン(書き出しアセット)を背景に敷く */
select{
  width:100%; height:31px; padding:0 26px 0 10px; font-size:12px; color:var(--muted);
  border:1px solid var(--line); border-radius:4px; background:#fff;
  appearance:none; -webkit-appearance:none;
  background-image:url("img/icon-chevron.svg");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:8px 4px;
}
select:focus{ outline:2px solid var(--primary-soft); border-color:var(--primary); color:var(--ink); }
select:valid{ color:var(--ink); }

#stationSearch{
  width:100%; height:31px; padding:0 10px; font-size:12px; color:var(--ink);
  border:1px solid var(--line); border-radius:4px; background:#fff;
}
#stationSearch::placeholder{ color:var(--muted); }
#stationSearch:focus{ outline:2px solid var(--primary-soft); border-color:var(--primary); }

/* チェックボックス(戸建て種別・建築構造・間取り) */
.checks{ display:flex; flex-direction:column; gap:7px; }
.checks.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:7px 12px; }
.chk{ display:flex; align-items:center; gap:7px; cursor:pointer; user-select:none; }
.chk input{
  appearance:none; -webkit-appearance:none; margin:0;
  width:14px; height:14px; flex:0 0 14px; border:1px solid var(--line);
  border-radius:3px; background:#fff; position:relative;
}
.chk input:checked{ background:var(--primary); border-color:var(--primary); }
.chk input:checked::after{
  content:""; position:absolute; left:4px; top:1px; width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.chk input:focus-visible{ outline:2px solid var(--primary-soft); }
.chk span{ font-size:12px; color:var(--muted); }
.chk input:checked + span{ color:var(--ink); font-weight:600; }

/* エリアで選んだ市区町村に属する駅。数が多い区もあるので折り返して並べる */
.city-stations{
  display:flex; flex-wrap:wrap; gap:5px; margin-top:8px;
  max-height:132px; overflow-y:auto;
}
.cs-btn{
  padding:4px 9px; border:1px solid var(--line); border-radius:999px;
  background:#fff; color:var(--ink); font-size:11px; white-space:nowrap;
}
.cs-btn:hover{ border-color:var(--primary); color:var(--primary); background:var(--primary-soft); }
.cs-btn:focus-visible{ outline:2px solid var(--primary); outline-offset:1px; }

/* 駅検索のサジェスト */
.station-search{ position:relative; }
.suggest{
  position:absolute; top:33px; left:0; right:0; z-index:60;
  background:#fff; border:1px solid var(--line); border-radius:4px;
  box-shadow:var(--shadow-lg); max-height:230px; overflow-y:auto;
}
.suggest button{
  display:block; width:100%; text-align:left; padding:7px 10px;
  border:none; background:#fff; font-size:12px; font-weight:600; color:var(--ink);
}
.suggest button:hover{ background:var(--primary-soft); }
.suggest .lines{ display:block; font-size:10px; font-weight:400; color:var(--muted); margin-top:1px; }
.sug-none{ padding:9px 10px; font-size:11px; color:var(--muted); line-height:1.5; }

.f-save{
  width:100%; height:38px; margin-top:6px;
  border:1px solid var(--primary); border-radius:5px;
  background:var(--primary-soft); color:var(--primary-d); font-size:12px; font-weight:700;
}
.f-save:hover{ background:#fff; }
.f-note{
  margin-top:14px; padding:10px 11px; font-size:10px; line-height:1.6;
  color:var(--muted); background:var(--fill); border-radius:4px;
}
/* 写真クレジット(CC BY は作者表示が必要なので、折りたたんで全件出す) */
.photo-credit{ margin-top:8px; font-size:10px; color:var(--muted); }
.photo-credit summary{ cursor:pointer; font-weight:700; padding:4px 0; }
.photo-credit p{ margin:4px 0; line-height:1.5; }
.photo-credit ul{ margin:4px 0 0; padding-left:16px; line-height:1.6; }
.photo-credit a{ color:var(--primary-d); }

/* ===== 中央: 条件バー + 地図 ===== */
.center{ display:flex; flex-direction:column; min-width:0; }

.cond-bar{
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-bottom:1px solid var(--line-soft); background:#fff;
  overflow:hidden;   /* 横スクロールは内側の .cond-scroll に持たせる */
}
/* チップだけを横スクロールさせる。バー全体をスクロールさせると
   右端のリセットボタンまで一緒に流れて押せなくなる。

   スクロールバーは表示しない。出すとチップが溢れた瞬間だけ
   この要素の高さが31px→41pxに増え、バーが10px高くなる。
   チップはスクロール領域の上端に留まるのに、リセットは高くなったバーの中央に
   置かれるため、増えた分の半分(5px)だけ下にずれて見えていた(実測)。
   スクロール自体は trackpad・shift+ホイール・タッチ・キーボードで従来どおり効く */
.cond-scroll{
  flex:1; min-width:0; display:flex; align-items:center; gap:10px;
  overflow-x:auto;
  scrollbar-width:none;        /* Firefox */
  -ms-overflow-style:none;     /* 旧Edge */
}
.cond-scroll::-webkit-scrollbar{ display:none; }
.cond-title{ font-size:12px; font-weight:700; color:var(--primary); white-space:nowrap; }
.cond-reset{
  flex:0 0 auto; height:31px; padding:0 14px;
  border:1px solid var(--line); border-radius:5px;
  background:#fff; color:var(--ink); font-size:12px; font-weight:700; white-space:nowrap;
}
.cond-reset:hover{ border-color:var(--primary); color:var(--primary); }
/* 条件が無いときは押しても何も起きないので薄くする。
   disabled にするとクリック直後にフォーカスが失われるので使わない */
.cond-reset.is-off{ opacity:.4; }
.cond-reset:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.cond-chip{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  height:31px; padding:0 14px; border:1px solid var(--line); border-radius:5px;
  background:#fff; font-size:12px; color:var(--ink); white-space:nowrap;
}
.cond-chip button{
  border:none; background:transparent; color:var(--muted); font-size:11px; line-height:1; padding:0;
}
.cond-chip button:hover{ color:var(--price); }
.cond-empty{ font-size:12px; color:var(--muted); }

.map-wrap{ position:relative; flex:1; min-height:0; }
#map{ position:absolute; inset:0; background:var(--fill); }
#map.crosshair{ cursor:crosshair; }
#map.drawing{ touch-action:none; }

/* 地図上のツール */
.map-tools{
  position:absolute; top:14px; left:14px; z-index:900;
  display:flex; align-items:flex-start; gap:10px;
}
.tool-btn{
  height:31px; padding:0 12px; font-size:12px; font-weight:500;
  background:#fff; color:var(--ink); border:1px solid var(--line);
  border-radius:5px; box-shadow:var(--shadow); display:inline-flex; align-items:center; gap:8px;
}
.tool-btn:hover{ border-color:var(--primary); }
.tool-btn.active{ border-color:var(--primary); color:var(--primary); }

/* レイヤ切替(航空写真 / 2D地図 / ハザードマップ) */
.layer-menu{ position:relative; }
.layer-btn{
  height:31px; min-width:135px; padding:0 30px 0 12px; font-size:12px;
  background:#fff; color:var(--ink); border:1px solid var(--primary);
  border-radius:5px; box-shadow:var(--shadow); text-align:left;
  background-image:url("img/icon-chevron.svg");
  background-repeat:no-repeat; background-position:right 11px center; background-size:8px 4px;
}
.layer-list{
  position:absolute; top:36px; left:0; z-index:950; min-width:163px;
  background:#fff; border:1px solid var(--line); border-radius:4px;
  box-shadow:var(--shadow-lg); padding:4px; display:flex; flex-direction:column; gap:2px;
}
.layer-list button{
  border:none; background:#fff; border-radius:4px;
  padding:5px 16px; font-size:12px; color:#000; text-align:center;
}
.layer-list button:hover{ background:var(--primary-soft); }
.layer-list button.on{ background:var(--primary); color:#fff; }

/* ズーム・全画面(Figma: 白ボックス56px / アイコン36px) */
.map-ctrl{
  position:absolute; right:16px; z-index:900;
  background:#fff; border-radius:3px; box-shadow:var(--shadow);
  display:flex; flex-direction:column;
}
.map-ctrl.zoom{ top:16px; }
.map-ctrl.zoom button{
  width:56px; height:56px; border:none; background:transparent;
  font-size:26px; line-height:1; color:#4a4747;
}
.map-ctrl.zoom button + button{ border-top:1px solid var(--line-soft); }
.map-ctrl.full{ top:144px; }
.map-ctrl.full button{
  width:56px; height:56px; border:none; background:transparent;
  display:grid; place-items:center;
}
.map-ctrl button:hover{ background:var(--fill); }
.map-ctrl button:disabled{ opacity:.3; cursor:default; background:transparent; }
.map-ctrl.full button.active{ background:var(--primary-soft); }
.map-ctrl.full img{ width:36px; height:36px; display:block; }

/* 中央寄せのピル2つは地図の「下端」中央に置く。
   上端(top:14px)は .map-tools の専有帯で、同じ帯に置くと画面が狭いときに
   ツールボタンを覆ってクリックを奪う(z-index が同値でDOM後方のピルが勝つため) */
.refetch-btn{
  position:absolute; bottom:44px; left:50%; transform:translateX(-50%); z-index:900;
  height:34px; padding:0 16px; font-size:12px; font-weight:700;
  background:var(--primary); color:#fff; border:none; border-radius:999px;
  box-shadow:var(--shadow-lg);
}
.refetch-btn:hover{ background:var(--primary-d); }
.bounds-chip{
  position:absolute; bottom:44px; left:50%; transform:translateX(-50%); z-index:900;
  height:32px; padding:0 6px 0 14px; font-size:12px; font-weight:600;
  background:var(--ink); color:#fff; border-radius:999px; box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:6px;
}
/* 2つ同時に出るときはチップを一段上へ(重ならないように) */
.refetch-btn:not(.hidden) ~ .bounds-chip{ bottom:86px; }
.bounds-chip button{
  width:22px; height:22px; border:none; border-radius:50%;
  background:rgba(255,255,255,.18); color:#fff; font-size:12px; line-height:1;
}
.bounds-chip button:hover{ background:rgba(255,255,255,.32); }
/* ズームが浅くて個別ピンを出せないときの案内。地図中央に置いて、空の理由をその場で伝える。
   ピンより手前・ツール列より奥(.map-tools は900) */
.zoom-hint{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:880;
  max-width:min(420px, 78%); padding:12px 18px; text-align:center;
  font-size:12px; font-weight:700; line-height:1.7;
  background:rgba(31,29,29,.78); color:#fff; border-radius:8px; box-shadow:var(--shadow-lg);
  pointer-events:none;   /* 地図のドラッグを邪魔しない */
}
/* 集計円。中に㎡単価の中央値(万円)を出す。
   地図の地名や道路が透けるよう、塗りは不透明にしない */
.cell-wrap{ background:none; border:none; }
.cell{
  border-radius:50%; border:1.5px solid rgba(255,255,255,.9);
  box-shadow:0 1px 4px rgba(31,29,29,.3);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:11px; font-weight:700; line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  opacity:.88; transition:opacity .12s;
}
.cell-wrap:hover .cell{ opacity:1; }

/* 集計円の凡例。地図の左下、出典表記の上に置く */
.cell-legend{
  position:absolute; left:14px; bottom:34px; z-index:880;
  width:206px; padding:9px 11px 8px;
  background:rgba(255,255,255,.94); border-radius:6px; box-shadow:var(--shadow-lg);
}
.cl-head{ display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.cl-head b{ font-size:11px; color:var(--ink); }
.cl-demo{
  margin-left:auto; padding:1px 5px; border-radius:8px;
  background:var(--muted); color:#fff; font-size:9px; font-weight:700;
}
.cl-scale{ display:flex; height:9px; border-radius:2px; overflow:hidden; }
.cl-scale span{ flex:1; }
/* 目盛は色の境目に来るよう、区切りの数だけ等分して右端に寄せる */
.cl-ticks{ display:flex; margin-top:2px; font-size:9px; color:var(--muted); }
.cl-ticks span{ flex:1; text-align:right; }
.cl-note{ margin-top:5px; font-size:9px; line-height:1.5; color:var(--muted); }

/* 一覧のページ送り */
.pager{
  padding:14px 16px 18px; text-align:center;
  border-top:1px solid var(--line-soft); background:var(--fill);
}
.pg-range{ font-size:11px; color:var(--muted); }
.pg-btns{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:8px; }
.pg-btn{
  height:30px; padding:0 14px; border:1px solid var(--line); border-radius:5px;
  background:#fff; color:var(--ink); font-size:12px; font-weight:700;
}
.pg-btn:hover:not(:disabled){ border-color:var(--primary); color:var(--primary); }
.pg-btn:disabled{ opacity:.4; cursor:default; }
.pg-now{ font-size:12px; color:var(--ink); font-variant-numeric:tabular-nums; }

/* ワンタップの検索例(左の検索条件パネル最上部) */
.quick{ display:flex; flex-direction:column; gap:7px; }
.quick-btn{
  width:100%; padding:9px 12px; border:1px solid var(--primary); border-radius:5px;
  background:var(--primary-soft); color:var(--primary-d);
  font-size:12px; font-weight:700; text-align:left;
}
.quick-btn:hover{ background:#fff; }
.quick-btn:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
/* ハザード種別パネル(国土交通省の配信タイルを重ねる)
   z-index は .map-tools(900)より必ず下にする。.map-tools はスタッキングコンテキストを作るため、
   中の .layer-list が 950 でもコンテキストごと沈み、レイヤ切替メニューがこのパネルに隠れてしまう */
.hazard-panel{
  position:absolute; top:56px; left:14px; z-index:880; width:246px;
  background:#fff; border:1px solid var(--line); border-radius:5px;
  box-shadow:var(--shadow-lg); padding:10px 12px;
  /* 下端はピル(bottom:44px/86px)と出典表記の帯を空ける */
  max-height:calc(100% - 150px); overflow-y:auto;
}
.hz-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.hz-head b{ font-size:12px; }
.hz-op{ display:flex; align-items:center; gap:5px; font-size:10px; color:var(--muted); }
.hz-op input[type=range]{ width:64px; accent-color:var(--primary); }
.hazard-panel .checks{ gap:6px; }
.hazard-panel .chk span{ font-size:11px; line-height:1.3; }
.hz-legend{ margin-top:10px; padding-top:9px; border-top:1px solid var(--line-soft); }
.hz-lg + .hz-lg{ margin-top:8px; }
.hz-lg-t{ font-size:10px; font-weight:700; color:var(--ink); margin-bottom:4px; }
.hz-lg-i{ display:flex; flex-wrap:wrap; gap:3px 8px; }
.hz-lg-i span{ display:inline-flex; align-items:center; gap:4px; font-size:9.5px; color:var(--muted); }
.hz-lg-i i{ width:12px; height:10px; border-radius:2px; border:1px solid rgba(0,0,0,.14); flex:0 0 12px; }
.hz-lg-src{ display:inline-block; margin-top:8px; font-size:9.5px; color:var(--primary-d); }

.mini-btn{
  height:25px; padding:0 9px; font-size:11px; font-weight:700;
  border:1px solid var(--line); border-radius:4px; background:#fff; color:var(--muted);
}
.mini-btn:hover{ color:var(--ink); border-color:var(--muted); }
.hidden{ display:none !important; }

.map-credit{
  position:absolute; left:14px; bottom:8px; z-index:800;
  font-size:9px; color:var(--muted); background:rgba(255,255,255,.82);
  padding:2px 6px; border-radius:3px; max-width:60%; line-height:1.5;
}
.map-credit a{ color:var(--muted); }

/* 価格バッジマーカー */
.pbw{ position:relative; }
.pbw .dot{
  position:absolute; left:0; top:0; width:8px; height:8px; border-radius:50%;
  background:var(--ink); border:2px solid #fff; transform:translate(-50%,-50%);
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.pb{
  position:absolute; left:0; top:0; transform:translate(-50%,calc(-100% - 9px));
  background:#fff; border:1.5px solid var(--primary); color:var(--ink);
  border-radius:999px; padding:2.5px 9px; font-size:11px; font-weight:700;
  white-space:nowrap; box-shadow:0 2px 6px rgba(0,0,0,.22);
  font-variant-numeric:tabular-nums;
}
.pb small{ font-size:9px; font-weight:700; margin-left:1px; }
.pb.active{ background:var(--primary); border-color:var(--primary); color:#fff; }
/* 一覧から選んだ物件の目印。ピンの真下に置いて「ここ」を示す。
   .pbw の .dot と同じく、アイコン原点(=物件の座標)を中心に合わせる */
.focus-wrap{ background:none; border:none; }
.focus-ring{
  position:absolute; left:0; top:0; width:46px; height:46px;
  transform:translate(-50%,-50%);
  border-radius:50%; border:3px solid var(--price);
  background:rgba(209,79,44,.12);
}
/* 到着した瞬間だけ波紋を出す。出しっぱなしだと目に障るので3回で止める */
.focus-ring::after{
  content:""; position:absolute; inset:-3px; border-radius:50%;
  border:3px solid var(--price);
  animation:focusPulse 1.3s ease-out 3;
}
@keyframes focusPulse{
  from{ transform:scale(1); opacity:.85; }
  to  { transform:scale(2.2); opacity:0; }
}

.cl-wrap{ background:transparent; }
.cl{
  display:grid; place-items:center; width:100%; height:100%;
  background:var(--primary); color:#fff; font-weight:700; font-size:13px;
  border-radius:50%; border:3px solid rgba(255,255,255,.9);
  box-shadow:0 2px 8px rgba(0,0,0,.28);
}
.station-wrap{ background:transparent; }
.station-tag{
  position:absolute; transform:translate(-50%,-50%);
  background:var(--ink); color:#fff; font-size:10px; font-weight:700;
  padding:2px 7px; border-radius:3px; white-space:nowrap; opacity:.88;
}

/* ポップアップ */
.leaflet-popup-content-wrapper{ border-radius:5px; box-shadow:var(--shadow-lg); }
.leaflet-popup-content{ margin:11px 14px; line-height:1.45; }
/* 閉じるボタン。既定は写真の上に載る灰色の×で見えないので、白い正円にして
   ポップアップの右上角へ半分はみ出させる。
   セレクタは Leaflet 本体と同じ形にして詳細度を合わせる(style.css の方が後に読まれる) */
.leaflet-container a.leaflet-popup-close-button{
  top:-9px; right:-9px;
  width:26px; height:26px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--line-soft);
  background:#fff; color:var(--ink);
  font:700 14px/1 system-ui, sans-serif;
  box-shadow:var(--shadow);
}
.leaflet-container a.leaflet-popup-close-button:hover{ background:#fff; color:var(--price); }
.leaflet-container a.leaflet-popup-close-button:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
.pop{ min-width:190px; }
/* 外観写真と間取り図をタブで切り替える領域 */
.pop-media{
  position:relative; width:190px; height:104px; margin:-2px 0 7px; border-radius:4px;
  overflow:hidden; background:var(--thumb);
}
.pv{ position:absolute; inset:0; display:none; }
.pop-media[data-view="photo"] .pv-photo{ display:block; }
.pop-media[data-view="plan"] .pv-plan{ display:block; background:#fff; }
.pv-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.pv-plan svg{ width:100%; height:100%; display:block; }
/* タブは図の邪魔にならないよう左上に小さく重ねる */
.pv-tabs{
  position:absolute; left:4px; top:4px; z-index:2; display:flex; gap:2px;
  background:rgba(255,255,255,.86); border-radius:3px; padding:1px;
}
.pv-tabs button{
  border:none; background:transparent; color:var(--muted);
  font-size:9px; font-weight:700; padding:2px 7px; border-radius:2px; line-height:1.4;
}
.pv-tabs button.on{ background:var(--primary); color:#fff; }
/* 実在の建物写真なので、架空の物件と結び付けて誤解されないよう常に明示する */
.pop-photo-tag{
  position:absolute; right:4px; bottom:4px; padding:1px 5px; border-radius:2px;
  background:rgba(31,29,29,.66); color:#fff; font-size:9px; font-weight:600;
}
.pop-name{ font-size:12px; font-weight:700; margin-bottom:3px; }
.pop-price{ color:var(--price); font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; }
.pop-price span{ font-size:10px; margin-left:1px; }
.pop-specs,.pop-st{ font-size:10px; color:var(--muted); margin-top:2px; }

/* ===== 右: 検索結果一覧 ===== */
.results{
  display:flex; flex-direction:column; background:#fff;
  border-left:1px solid var(--line-soft);
}
.results-head{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:12px 16px; background:#fff;
}
.hit{ font-size:12px; color:var(--ink); white-space:nowrap; }
.hit b{ font-size:20px; margin:0 2px; font-variant-numeric:tabular-nums; }
/* 見出しは data-view で出し分ける。検索結果とそれ以外で必要な要素が違う */
.results-head[data-view="search"] .view-hit,
.results-head[data-view="search"] .view-back{ display:none; }
.results-head:not([data-view="search"]) .hit,
.results-head:not([data-view="search"]) .sort-menu{ display:none; }
.view-hit{ font-size:12px; color:var(--ink); white-space:nowrap; }
.view-hit b:first-child{ font-size:14px; margin-right:4px; }
.view-hit b:last-child{ font-size:20px; margin:0 2px; font-variant-numeric:tabular-nums; }
.view-back{
  height:31px; padding:0 12px; font-size:12px; font-weight:700;
  background:#fff; color:var(--primary); border:1px solid var(--primary); border-radius:5px;
}
.view-back:hover{ background:var(--primary-soft); }

/* ソート(Figma: 青枠のカスタムドロップダウン) */
.sort-menu{ position:relative; }
.sort-btn{
  height:31px; min-width:157px; padding:0 28px 0 12px; font-size:12px;
  background:#fff; color:var(--ink); border:1px solid var(--primary);
  border-radius:5px; text-align:left;
  background-image:url("img/icon-chevron.svg");
  background-repeat:no-repeat; background-position:right 10px center; background-size:8px 4px;
}
.sort-list{
  position:absolute; top:35px; right:0; z-index:950; min-width:163px;
  background:#fff; border:1px solid var(--line); border-radius:4px;
  box-shadow:var(--shadow-lg); padding:4px; display:flex; flex-direction:column; gap:1px;
}
.sort-list button{
  border:none; background:#fff; border-radius:4px;
  padding:5px 16px; font-size:12px; color:#000; text-align:left; white-space:nowrap;
}
.sort-list button:hover{ background:var(--primary-soft); }
.sort-list button.on{ background:var(--primary); color:#fff; }

/* 扱っているデータが何なのかの明示。目立たせすぎず、しかし読み飛ばせない位置に置く */
.results-note{
  flex:0 0 auto; margin:0; padding:7px 16px;
  background:var(--primary-soft); border-top:1px solid #d3e5f8; border-bottom:1px solid #d3e5f8;
  font-size:11px; line-height:1.5; color:var(--ink);
}
.results-note b{ font-weight:700; }
/* 「保存した条件」は物件を並べないので、この注記は出さない */
.results-head[data-view="saved"] + .results-note{ display:none; }

.results-list{ flex:1; overflow-y:auto; padding:0 12px 20px; display:flex; flex-direction:column; }

/* カード(Figma: サムネイル80px + 上下境界線) */
/* カードは button(キーボードで詳細モーダルを開けるようにするため)。
   ボタンの既定スタイルを打ち消して従来の見た目に戻す */
.card{
  display:grid; grid-template-columns:80px 1fr; gap:12px; width:100%;
  padding:10px 4px; border:none; border-top:1px solid var(--line-soft);
  background:transparent; font:inherit; color:inherit; text-align:left;
  cursor:pointer; transition:background .12s;
}
.card:focus-visible{ outline:2px solid var(--primary); outline-offset:-2px; }
.card:hover{ background:var(--primary-soft); }
.card.selected{ background:var(--primary-soft); box-shadow:inset 3px 0 0 var(--primary); }
/* ★はカードの入れ子にできない(button の中に button は置けない)ので、
   ラッパーの中で兄弟として重ねる */
.card-wrap{ position:relative; }
.fav-btn{
  position:absolute; top:8px; right:6px; z-index:1;
  width:28px; height:28px; padding:0; border:none; border-radius:50%;
  background:rgba(255,255,255,.8); display:grid; place-items:center;
}
.fav-btn svg{ width:17px; height:17px; fill:none; stroke:var(--muted); stroke-width:1.6; stroke-linejoin:round; }
.fav-btn:hover{ background:#fff; }
.fav-btn:hover svg{ stroke:var(--price); }
.fav-btn.on svg{ fill:#f2b705; stroke:#d99e04; }
.fav-btn:focus-visible{ outline:2px solid var(--primary); outline-offset:1px; }

/* 保存した条件のカード */
.cond-card{ display:flex; align-items:stretch; border-top:1px solid var(--line-soft); }
.cond-apply{
  flex:1; min-width:0; padding:12px 4px 12px 8px; border:none; background:transparent;
  text-align:left; font:inherit; color:inherit;
}
.cond-apply:hover{ background:var(--primary-soft); }
.cond-apply:focus-visible{ outline:2px solid var(--primary); outline-offset:-2px; }
.cc-label{ display:block; font-size:12px; font-weight:700; color:var(--ink); line-height:1.5; }
.cc-date{ display:block; margin-top:3px; font-size:10px; color:var(--muted); }
.cond-del{
  flex:0 0 34px; border:none; background:transparent; color:var(--muted); font-size:12px;
}
.cond-del:hover{ color:var(--price); }
.cond-del:focus-visible{ outline:2px solid var(--primary); outline-offset:-2px; }
.thumb{
  width:80px; height:68px; border-radius:3px; background:var(--thumb);
  overflow:hidden; flex:0 0 80px;
}
/* サムネイルはイメージ写真(実在の建物。デモの物件データとは無関係) */
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.c-name{ font-size:12px; font-weight:700; line-height:1.35; }
.c-price{ margin-top:3px; color:var(--price); font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; }
.c-price span{ font-size:10px; margin-left:1px; }
.c-specs{ margin-top:3px; font-size:10px; color:var(--muted); line-height:1.5; }
.empty{ padding:44px 16px; text-align:center; color:var(--muted); font-size:12px; line-height:1.8; }

/* 相場比較バッジ */
.dev{
  display:inline-block; margin-left:6px; padding:1px 6px;
  font-size:10px; font-weight:700; border-radius:3px; vertical-align:2px; white-space:nowrap;
}
.dev-up{ background:#fbe9e2; color:var(--price); }
.dev-down{ background:var(--primary-soft); color:var(--primary-d); }
.dev-flat{ background:var(--fill); color:var(--muted); }

/* ===== 物件詳細モーダル ===== */
.modal{ position:fixed; inset:0; z-index:1500; display:grid; place-items:center; padding:24px; }
.modal-scrim{ position:absolute; inset:0; background:rgba(31,29,29,.55); }
.modal-panel{
  position:relative; z-index:1; width:min(720px, 100%);
  /* body と同じく dvh を優先(モバイルのツールバー分だけ可視高が縮むため) */
  max-height:calc(100vh - 48px);
  max-height:calc(100dvh - 48px);
  background:#fff; border-radius:8px; box-shadow:0 18px 48px rgba(31,29,29,.34);
  overflow:auto; display:flex; flex-direction:column;
}
/* パネル内スクロールでも流れないよう sticky。absolute だと下までスクロールしたとき画面外へ出る。
   .modal-panel は flex column なので、flex:0 0 30px を付けないと
   高さが縮んで(実測30×15px)円が横長の楕円になる */
.modal-close{
  position:sticky; align-self:flex-end; top:10px; right:10px; z-index:3;
  margin:10px 10px -40px auto;
  flex:0 0 30px;
  width:30px; height:30px; border:none; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--ink); font-size:13px; line-height:1;
  box-shadow:var(--shadow);
}
.modal-close:hover{ background:#fff; color:var(--price); }
.modal-close:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

/* 画像スライド(外観写真 / 間取り図)
   画面が低いときは詳細情報が隠れてしまうので、ビューポート高にも連動させる */
.dm-media{ position:relative; background:var(--thumb); overflow:hidden; flex:0 0 auto; }
.dm-track{ display:flex; height:min(360px, 42vh); transition:transform .28s ease; }
.dm-slide{ flex:0 0 100%; height:100%; background:#fff; }
.dm-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.dm-slide svg{ width:100%; height:100%; display:block; }
.dm-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:34px; height:34px; border:none; border-radius:50%;
  background:rgba(255,255,255,.86); color:var(--ink);
  box-shadow:var(--shadow); display:grid; place-items:center;
}
/* パスは viewBox の中心(12,12)を軸に左右対称にしてあるので、円の中心とぴたり合う */
.dm-nav svg{
  width:15px; height:15px; display:block;
  fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
}
.dm-nav:hover{ background:#fff; }
.dm-nav.prev{ left:10px; }
.dm-nav.next{ right:10px; }
/* 端では押せないことを見た目で示す。disabled にするとフォーカスが失われるので使わない */
.dm-nav.is-off{ opacity:.3; cursor:default; }
.dm-nav:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.dm-caption{
  position:absolute; left:10px; bottom:10px; z-index:2;
  padding:2px 8px; border-radius:3px;
  background:rgba(31,29,29,.66); color:#fff; font-size:10px; font-weight:600;
}
/* 見た目は8pxの点だが、当たり判定は24×24px確保する(タップしやすさ) */
.dm-dots{ position:absolute; right:4px; bottom:2px; z-index:2; display:flex; }
.dm-dots button{
  width:24px; height:24px; padding:0; border:none; border-radius:50%;
  background:transparent; display:grid; place-items:center;
}
.dm-dots button::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.7); box-shadow:0 0 0 1px rgba(0,0,0,.22);
}
.dm-dots button.on::before{ background:var(--primary); box-shadow:0 0 0 1px rgba(255,255,255,.7); }
.dm-dots button:focus-visible{ outline:2px solid var(--primary); outline-offset:-2px; border-radius:50%; }
.dm-track{ touch-action:pan-y; }
.dm-slide img{ -webkit-user-drag:none; user-select:none; }

/* 詳細情報 */
.dm-body{ padding:16px 20px 20px; }
/* モーダルを開いた直後に読み上げ位置を合わせるため tabindex=-1 でフォーカスするが、
   マウス操作では枠が出ると邪魔なので輪郭は消す(キーボード操作の可視性は :focus-visible で担保) */
/* タイトル行。★はタイトルの右端に置く(閉じるボタンとは重ならない位置) */
.dm-titleRow{ display:flex; align-items:flex-start; gap:10px; margin-bottom:6px; }
.dm-titleRow .fav-btn{ position:static; flex:0 0 30px; width:30px; height:30px; background:var(--fill); }
.dm-titleRow .fav-btn svg{ width:19px; height:19px; }
.dm-title{ font-size:17px; font-weight:700; margin:0; flex:1; min-width:0; }
.dm-title:focus{ outline:none; }
.dm-title:focus-visible{ outline:2px solid var(--primary-soft); outline-offset:2px; }
.dm-priceRow{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.dm-price{ color:var(--price); font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; }
.dm-unit{ margin-top:2px; font-size:12px; color:var(--muted); }

/* ----- 詳細セクション(基本情報 / 物件概要 / 設備・条件 / 周辺の生活情報) ----- */
/* カテゴリの区切りは余裕をもって30px。詰めると項目数が増えたぶん一続きに見えて読みにくい
   (隣り合うマージンは相殺されるので、セクション間も30pxのまま) */
.dm-sec{ margin:30px 0; }
/* 見出し左の縦バー。参考にした不動産サイトと同じ「バー＋太字」の型に合わせている */
.dm-h{
  display:flex; align-items:center; gap:8px;
  margin:0 0 8px; padding-left:9px; font-size:14px; font-weight:700; color:var(--ink);
  border-left:4px solid var(--primary); line-height:1.3;
}
/* 実データに存在しない項目のセクションに付ける印。
   Phase 3 で実データへ切り替えたとき何が消えるかを画面上で示す */
.dm-demo{
  padding:1px 6px; border-radius:9px; font-size:10px; font-weight:700;
  color:#fff; background:var(--muted); letter-spacing:.04em;
}
.dm-tbl{
  width:100%; border-collapse:collapse; table-layout:fixed;
  border-top:1px solid var(--line-soft);
}
.dm-tbl th{
  width:104px; padding:8px 10px; text-align:left; vertical-align:top;
  font-size:11px; font-weight:700; color:var(--muted); line-height:1.5;
  background:#fafafa; border-bottom:1px solid var(--line-soft);
}
/* 左padding は th と同じ 10px。0 にすると値の文字が見出しセル(灰背景)に貼り付いて読みにくい */
.dm-tbl td{
  padding:8px 12px 8px 10px; vertical-align:top;
  font-size:12px; color:var(--ink); line-height:1.6;
  border-bottom:1px solid var(--line-soft); word-break:break-word;
}
/* 間取りの帖数内訳など、値に添える補足 */
.dm-sub{ color:var(--muted); font-size:11px; margin-left:4px; }
/* 交通の行。検索に使った駅だけ太字にして、絞り込み条件との対応を分かるようにする */
.dm-line{ line-height:1.7; }
.dm-line.is-main{ font-weight:700; }
.dm-ln{ color:var(--muted); font-size:11px; font-weight:400; }

/* 設備アイコン。該当しないものは灰色＋斜線で「無い」ことを示す */
.eq-grid{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:10px 4px;
  list-style:none; margin:0 0 12px; padding:0;
}
.eq{ display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; }
.eq svg{
  width:34px; height:34px; fill:none;
  stroke:var(--primary); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.eq .eq-fill{ fill:var(--primary); stroke:none; }
.eq span{ font-size:10px; font-weight:700; color:var(--primary-d); line-height:1.3; }
.eq.off svg{ stroke:#c9ccd3; }
.eq.off .eq-fill{ fill:#c9ccd3; }
.eq.off span{ color:#b3b7bf; }
.eq .eq-slash{ stroke-width:1.5; }

/* 周辺の生活情報 */
.pl-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.pl-h{
  font-size:12px; font-weight:700; color:var(--ink);
  padding-left:8px; border-left:3px solid var(--primary-l); margin-bottom:5px;
}
.pl-list{ list-style:none; margin:0; padding:0; }
.pl-list li{ font-size:11px; color:var(--ink); line-height:1.9; }
.pl-list li::before{ content:"・"; color:var(--primary); }
.pl-list li span{ color:var(--muted); }

/* 読み上げ専用。設備の「あり/なし」は色と斜線でしか表していないので文字でも伝える */
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.dm-note{
  margin:14px 0 0; padding:9px 11px; font-size:10px; line-height:1.6;
  color:var(--muted); background:var(--fill); border-radius:4px;
}
/* ポップアップから詳細を開くボタン */
.pop-more{
  display:block; width:100%; margin-top:7px; height:28px;
  border:1px solid var(--primary); border-radius:4px;
  background:#fff; color:var(--primary); font-size:11px; font-weight:700;
}
.pop-more:hover{ background:var(--primary); color:#fff; }

@media (max-width:920px){
  .modal{ padding:0; place-items:end stretch; }
  .modal-panel{ width:100%; max-height:92vh; border-radius:8px 8px 0 0; }
  .dm-track{ height:min(220px, 34vh); }
  .dm-body{ padding:14px 16px 18px; }
  .dm-price{ font-size:22px; }
  .dm-nav{ width:30px; height:30px; font-size:17px; }
}

/* ===== トースト ===== */
/* モーダル(1500)より前に出す。将来モーダル内から通知を出しても暗幕に沈まないように */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:1600;
  max-width:min(420px, calc(100vw - 32px));
  padding:10px 16px; border-radius:5px;
  background:var(--ink); color:#fff; font-size:12px; font-weight:600;
  box-shadow:var(--shadow-lg); text-align:center;
}

/* ===== モバイル ===== */
.scrim{ position:fixed; inset:0; background:rgba(65,62,62,.35); z-index:1150; display:none; }
.scrim.show{ display:block; }
@media (max-width:920px){
  .tool-btn.only-mobile{ display:inline-flex; }
  /* 狭い幅ではヘッダーが詰まるので、看板は主タイトルだけにする */
  .brand-sub{ display:none; }
  .brand h1{ font-size:15px; }
  .app-nav{ display:none; }
  .app-body{ grid-template-columns:1fr; grid-template-rows:46vh minmax(0,1fr); }
  .filters{
    position:fixed; top:var(--header-h); left:0; bottom:0; width:min(320px,86vw); z-index:1200;
    transform:translateX(-100%); transition:transform .2s ease; box-shadow:var(--shadow-lg);
    border-right:none;
  }
  .filters.open{ transform:translateX(0); }
  .results{ border-left:none; border-top:1px solid var(--line); }
  .map-ctrl.zoom button, .map-ctrl.full button{ width:44px; height:44px; }
  .map-ctrl.full{ top:120px; }
  .map-ctrl.full img{ width:26px; height:26px; }
  /* ホームバー等のセーフエリア分だけ出典表記を持ち上げる(出典は必ず見えること) */
  body.map-full .map-credit{ bottom:calc(8px + env(safe-area-inset-bottom, 0px)); }
  /* 地図が46vhしかないので、ポップアップを地図内に収めるため写真を低くする */
  .pop-media{ height:72px; }
  .hazard-panel{ max-height:calc(100% - 120px); }
  /* iOS Safari は 16px 未満の入力欄にフォーカスするとページを自動ズームするため */
  #stationSearch{ font-size:16px; }
  /* 詳細モーダル: 5列だとアイコン1つあたり60px程度になりラベルが3行に折れるので4列に、
     周辺施設の3列は縦積みにする */
  .eq-grid{ grid-template-columns:repeat(4, 1fr); }
  .pl-grid{ grid-template-columns:1fr; }
  .dm-tbl{ table-layout:auto; }
  .dm-tbl th{ width:auto; white-space:nowrap; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
  /* 波紋は装飾なので止める。静止したリングだけで「ここ」は伝わる */
  .focus-ring::after{ animation:none; opacity:0; }
}