/* 沢隣接地番検索 — 測量図/公文書ヴァナキュラー */
:root {
  --ink: #1c2733;
  --paper: #f7f5f0;
  --panel: #fffdf8;
  --rule: #c9c2b4;
  --accent: #0b7285;
  --warn: #e03131;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --sans: "IBM Plex Sans JP", "Hiragino Sans", "Noto Sans JP", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: var(--sans); color: var(--ink); background: var(--paper); }
#app { display: grid; grid-template-columns: 340px 1fr; grid-template-rows: 52px 1fr; height: 100%; }

header {
  grid-column: 1 / 3; display: flex; align-items: center; gap: 14px;
  padding: 0 16px; background: var(--panel); border-bottom: 2px solid var(--ink);
}
/* ブランドロゴ（水流マーク＋大きなSAWA） */
header h1.brand { margin: 0; display: flex; align-items: center; gap: 9px; }
.brand-mark { width: 30px; height: 30px; color: var(--accent); flex: none; }
.brand-name {
  font-size: 26px; font-weight: 700; letter-spacing: .16em; line-height: 1;
  color: var(--ink); font-family: var(--sans);
  background: linear-gradient(180deg, var(--ink) 0%, #2b4a55 100%);
  -webkit-background-clip: text; background-clip: text;
}
header h1.brand .sub { font-weight: 400; color: #5a6572; letter-spacing: .04em;
  font-size: 12px; margin-left: 8px; align-self: center; padding-top: 2px; }
header .stamp {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: #5a6572;
  border: 1px solid var(--rule); padding: 3px 8px; background: #fff;
}
header button { font: 12px var(--sans); padding: 5px 10px; border: 1.5px solid var(--ink);
  background: #fff; cursor: pointer; }
header button.on { background: var(--ink); color: #fff; }
/* レコメンドに戻るバナー（地図左上に固定） */
#backReco {
  position: fixed; top: 60px; left: 296px; z-index: 40;
  background: var(--ink); color: #fff; text-decoration: none;
  font: 12.5px var(--sans); font-weight: 600; padding: 8px 14px;
  border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,.28);
  display: inline-flex; align-items: center; gap: 4px;
}
#backReco:hover { background: #2b4a55; }
@media (max-width: 760px) { #backReco { left: 12px; top: 56px; } }
#recoBtn { font: 12px var(--sans); padding: 5px 11px; border: 1.5px solid var(--water, #1c7ed6);
  background: #e7f5ff; color: #1864ab; text-decoration: none; border-radius: 5px; white-space: nowrap; }
#recoBtn:hover { background: #d0ebff; }

/* ---- side panel ---- */
aside { border-right: 2px solid var(--ink); background: var(--panel); overflow-y: auto; padding: 12px 14px 40px; }
aside h2 { font-size: 11.5px; letter-spacing: .18em; color: #5a6572; border-bottom: 1px solid var(--rule);
  padding-bottom: 4px; margin: 18px 0 8px; font-weight: 600; }
aside h2:first-child { margin-top: 2px; }
.note { font-size: 11px; color: #5a6572; line-height: 1.6; }
.note b { color: var(--warn); }

.search-row { display: flex; gap: 6px; margin: 6px 0; }
.search-row input { flex: 1; font: 13px var(--mono); padding: 6px 8px; border: 1.5px solid var(--ink); background: #fff; }
.search-row button { font: 12px var(--sans); padding: 6px 10px; border: 1.5px solid var(--ink); background: var(--ink); color: #fff; cursor: pointer; }

label.chk { display: flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 3px 0; cursor: pointer; }
label.chk input { accent-color: var(--accent); }
.legend-line { display: inline-block; width: 30px; height: 0; border-top-width: 3px; margin-right: 2px; vertical-align: middle; }
.lg-strong  { border-top: 3px dashed #095c6b; }
.lg-mid     { border-top: 2.5px dashed #22b8cf; }
.lg-weak    { border-top: 1.5px dotted #3bc9db; }
.lg-known   { border-top: 3px solid #1864ab; }
.lg-conf    { border-top: 3px solid #1c7ed6; }
.lg-kozu    { border-top: 2.5px solid #7048e8; }
.lg-art     { border-top: 2px dashed #0ca678; }
.lg-neg     { border-top: 2px solid #868e96; }
.lg-pre     { border-top: 1.5px dashed #f76707; }
.lg-a33     { background: rgba(224,49,49,.25); border: 1px solid #e03131; height: 10px; }
.lg-fude    { border-top: 1.5px solid #495057; }

select, .bg-select { width: 100%; font: 12.5px var(--sans); padding: 6px; border: 1.5px solid var(--ink); background: #fff; margin: 4px 0; }
.slider-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.slider-row input[type=range] { flex: 1; accent-color: var(--accent); }

table.rank { width: 100%; border-collapse: collapse; font-size: 11.5px; }
table.rank th { text-align: left; border-bottom: 1.5px solid var(--ink); padding: 3px 4px; font-weight: 600; letter-spacing: .05em; }
table.rank td { border-bottom: 1px solid var(--rule); padding: 3px 4px; font-family: var(--mono); cursor: pointer; }
table.rank tr:hover td { background: #eef6f7; }
table.rank td.name { font-family: var(--sans); }

/* ---- map area ---- */
#maps { position: relative; display: flex; }
.map { position: relative; flex: 1; min-width: 0; }
#mapB { display: none; border-left: 2px solid var(--ink); }
#app.dual #mapB { display: block; }
.map .maplibregl-map { position: absolute; inset: 0; }
.bg-chip { position: absolute; z-index: 5; top: 8px; left: 8px; background: var(--panel);
  border: 1.5px solid var(--ink); padding: 4px 6px; font-size: 11px; }
.bg-chip select { border: none; background: transparent; font: 12px var(--sans); }

/* ---- 調査票 (inspection card) ---- */
#card {
  position: absolute; z-index: 8; right: 12px; top: 12px; width: 330px; max-height: calc(100% - 24px);
  overflow-y: auto; background: var(--panel); border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(28,39,51,.25); display: none;
}
#card.show { display: block; }
#card .hd { display: flex; align-items: center; padding: 8px 10px; border-bottom: 2px solid var(--ink); }
#card .hd .t { font-size: 12.5px; font-weight: 600; letter-spacing: .1em; }
#card .hd .x { margin-left: auto; cursor: pointer; border: 1px solid var(--ink); background: #fff;
  width: 20px; height: 20px; line-height: 18px; text-align: center; font-size: 12px; }
#card .bd { padding: 10px 12px; font-size: 12px; }
.kv { display: grid; grid-template-columns: 9em 1fr; gap: 2px 8px; font-size: 12px; }
.kv dt { color: #5a6572; }
.kv dd { margin: 0; font-family: var(--mono); }
.scorebar { position: relative; height: 14px; background: #e9e5da; border: 1px solid var(--ink); margin: 6px 0 2px; }
.scorebar > i { position: absolute; inset: 0 auto 0 0; background: var(--accent); }
.scorebar > b { position: absolute; inset: 0; text-align: center; font: 10px var(--mono); color: #fff; line-height: 14px; mix-blend-mode: difference; }
.badge { display: inline-block; font: 10.5px var(--mono); border: 1px solid var(--ink); padding: 1px 6px; margin: 1px 2px 1px 0; background: #fff; }
.badge.warn { border-color: var(--warn); color: var(--warn); }
.badge.ok { border-color: #2b8a3e; color: #2b8a3e; }
.hint { font-size: 10.5px; color: #5a6572; margin-top: 6px; line-height: 1.55; }

.btnrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.btnrow button { font: 11.5px var(--sans); padding: 5px 9px; border: 1.5px solid var(--ink); background: #fff; cursor: pointer; }
.btnrow button.primary { background: var(--ink); color: #fff; }
.btnrow button.neg { border-color: #868e96; color: #495057; }
.btnrow button.pos { border-color: #1c7ed6; color: #1c7ed6; }
#labelForm { display: none; margin-top: 8px; border-top: 1px dashed var(--rule); padding-top: 8px; }
#labelForm.show { display: block; }
#labelForm select, #labelForm input { width: 100%; font: 12px var(--sans); padding: 5px; border: 1px solid var(--ink); margin: 3px 0; }

.footer-note { font-size: 10px; color: #8a94a0; margin-top: 24px; border-top: 1px solid var(--rule); padding-top: 8px; line-height: 1.6; }
.maplibregl-popup-content { font: 11.5px var(--sans); border: 1.5px solid var(--ink); border-radius: 0; box-shadow: 3px 3px 0 rgba(28,39,51,.2); }

#loading { position: fixed; inset: 52px 0 0 340px; z-index: 50; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; background: rgba(247,245,240,.92);
  font-size: 14px; letter-spacing: .08em; }
#loading span { font-size: 11px; color: #5a6572; }
/* （モバイル規則はファイル末尾に集約） */

/* ---- AI所見 ---- */
.ai-note { margin-top: 10px; border: 1.5px solid var(--ink); background: #fbf9f2; }
.ai-note .ai-hd { display: flex; align-items: center; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; padding: 5px 8px; border-bottom: 1px solid var(--rule); }
.ai-note .ai-copy { margin-left: auto; font: 10.5px var(--sans); border: 1px solid var(--ink);
  background: #fff; padding: 1px 7px; cursor: pointer; }
.ai-note .ai-body { padding: 8px 10px; font-size: 11.8px; line-height: 1.75; white-space: pre-wrap; }
.ai-note .ai-ft { padding: 5px 8px; border-top: 1px dashed var(--rule); font: 9.5px var(--mono);
  color: #8a94a0; line-height: 1.5; }
.ai-loading { padding: 10px; font-size: 11.5px; color: #5a6572; }
.ai-loading::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 8px;
  border: 2px solid var(--accent); border-top-color: transparent; border-radius: 50%;
  animation: aispin .8s linear infinite; vertical-align: middle; }
@keyframes aispin { to { transform: rotate(360deg); } }
.ai-err { padding: 10px; font-size: 11.5px; color: var(--warn); }

/* ---- i ヘルプ ---- */
.ib { display: inline-block; width: 14px; height: 14px; line-height: 13px; text-align: center;
  border: 1px solid #5a6572; border-radius: 50%; font: italic 700 9.5px Georgia, serif;
  color: #5a6572; margin-left: 6px; cursor: pointer; vertical-align: 1px; user-select: none; }
.ib:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
#helpPop { position: fixed; z-index: 60; display: none; width: 274px; background: var(--panel);
  border: 2px solid var(--ink); box-shadow: 4px 4px 0 rgba(28,39,51,.25); }
#helpPop.show { display: block; }
#helpPop .hp-t { font-size: 11px; font-weight: 600; letter-spacing: .1em; padding: 6px 9px;
  border-bottom: 1px solid var(--rule); }
#helpPop .hp-b { padding: 8px 10px; font-size: 11.3px; line-height: 1.7; }
#helpPop .hp-b b { color: var(--accent); }

/* ---- 登記キュー（バッジ＋ポップオーバー） ---- */
#tqBadge { font: 600 11.5px var(--sans); letter-spacing: .06em; padding: 6px 11px;
  background: var(--ink); color: #fff; border: 2px solid var(--ink); cursor: pointer;
  box-shadow: 3px 3px 0 rgba(28,39,51,.25); }
#tqBadge b { font-family: var(--mono); margin-left: 2px; }
#tqBadge.pulse { animation: tqpulse .45s ease; }
@keyframes tqpulse { 30% { transform: scale(1.12); background: var(--accent); border-color: var(--accent); } }
#tqBadge.open { background: #fff; color: var(--ink); }

#tqPanel { width: 252px; background: var(--panel); border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(28,39,51,.25); }
#tqPanel .tq-hd { display: flex; align-items: center; gap: 5px; padding: 6px 9px;
  border-bottom: 2px solid var(--ink); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; }
#tqPanel .tq-hd b { font-family: var(--mono); }
#tqClose { margin-left: auto; cursor: pointer; border: 1px solid var(--ink); width: 18px; height: 18px;
  line-height: 16px; text-align: center; font-size: 11px; background: #fff; }
#tqList { list-style: none; margin: 0; padding: 4px 0; max-height: 34vh; overflow-y: auto; }
#tqList li { display: flex; align-items: center; gap: 6px; padding: 2px 9px; font: 11.5px var(--mono); }
#tqList li .nm { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--sans); }
#tqList li .sc { color: #5a6572; font-size: 10.5px; }
#tqList li .x { cursor: pointer; border: 1px solid var(--rule); width: 15px; height: 15px;
  line-height: 13px; text-align: center; font-size: 10px; background: #fff; }
#tqList li .x:hover { border-color: var(--warn); color: var(--warn); }
.tq-ft { display: flex; flex-wrap: wrap; gap: 5px; padding: 7px 9px; border-top: 1px solid var(--rule); }
.tq-ft button { font: 11px var(--sans); padding: 4px 8px; border: 1.5px solid var(--ink); background: #fff; cursor: pointer; }
.tq-ft button.primary { background: var(--ink); color: #fff; }


/* ================= モバイルレイアウト（地図全画面＋ドロワー） ================= */
.mobile-only { display: none; }
#menuBack { display: none; }

@media (max-width: 760px) {
  .mobile-only { display: inline-block; }
  #app { grid-template-columns: 1fr; grid-template-rows: 48px 1fr; height: 100dvh; }

  /* --- ヘッダー: ☰＋短縮タイトル＋3Dのみ。キューはヘッダー右端に固定 --- */
  header { padding: 0 8px; gap: 6px; }
  header h1.brand { min-width: 0; gap: 6px; }
  .brand-mark { width: 24px; height: 24px; }
  .brand-name { font-size: 20px; letter-spacing: .1em; }
  header h1.brand .sub, #dualBtn, #exportBtn, #recoBtn, #stamp { display: none; }
  #menuBtn { font: 18px/1 var(--sans); padding: 6px 10px; border: 1.5px solid var(--ink);
    background: #fff; cursor: pointer; flex: 0 0 auto; }
  #tdBtn { margin-left: auto; margin-right: 88px; }   /* 右端はキューチップ用に確保 */

  /* --- 左パネル → スライドインドロワー --- */
  aside { position: fixed; top: 48px; bottom: 0; left: 0; z-index: 45;
    width: min(84vw, 330px); max-height: none; border-right: 2px solid var(--ink);
    box-shadow: 6px 0 0 rgba(28,39,51,.18); transform: translateX(-105%);
    transition: transform .22s ease; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  body.menu-open aside { transform: none; }
  #menuBack { position: fixed; inset: 48px 0 0 0; z-index: 44; background: rgba(28,39,51,.35); }
  body.menu-open #menuBack { display: block; }

  #maps { min-height: 0; }
  #loading { inset: 48px 0 0 0; }

  /* --- 調査票カード → ボトムシート --- */
  #card { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 58vh;
    border-left: none; border-right: none; border-bottom: none;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  #card::before { content: ""; display: block; width: 42px; height: 4px; margin: 2px auto 8px;
    background: var(--rule); }

  /* --- 登記キュー: ヘッダー右端チップ＋直下パネル --- */
  #tqBadge { position: fixed !important; left: auto !important; right: 8px !important;
    top: 7px !important; bottom: auto !important; z-index: 46; padding: 5px 9px; font-size: 11px; }
  #tqPanel { position: fixed !important; left: auto !important; right: 6px !important;
    top: 46px !important; bottom: auto !important; z-index: 46; width: min(320px, 92vw); }
  #tqList { max-height: 44vh; }

  /* --- 入力: iOSの自動ズーム抑止（16px未満のfocusで発火するため） --- */
  #q, .bg-select, #labelForm select, #labelForm input { font-size: 16px; }
  .search-row button { font-size: 13px; }
  .chk { padding: 4px 0; }             /* タップターゲット拡大 */
  #rank td { padding: 6px 4px; }
  #helpPop { width: min(290px, 92vw); }
}

#tdBtn.busy { opacity: .55; pointer-events: none; }
#tdBtn.busy::after { content: " …"; }

/* 登記コピペ行（所在・地番の個別コピー） */
.touki-copy { margin: 8px 0; padding: 8px; background: #f7f9fb; border: 1px solid #e2e8ee; border-radius: 6px; }
.copy-row { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.copy-lbl { font-size: 11px; color: #556; min-width: 30px; }
.copy-row code { flex: 1; font-family: var(--mono); font-size: 12px; background: #fff; padding: 2px 6px;
  border: 1px solid #dde3ea; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy-btn { font-size: 11px; padding: 3px 8px; border: 1px solid #c3ccd6; background: #fff;
  border-radius: 4px; cursor: pointer; white-space: nowrap; }
.copy-btn:hover { background: #eef2f6; }

/* 複数選択バー */
#multiBar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 9;
  display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.96);
  border: 1.5px solid var(--ink); border-radius: 8px; padding: 6px 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.15); }
#multiBar #multiCount { font: 600 12px var(--sans); color: var(--ink); }
#multiBar button { font: 12px var(--sans); padding: 4px 10px; border: 1px solid #c3ccd6;
  background: #fff; border-radius: 5px; cursor: pointer; }
#multiBar button:hover { background: #eef2f6; }
#multiBar .multi-hint { font-size: 10px; color: #889; }
@media (max-width: 760px) {
  #multiBar { flex-wrap: wrap; max-width: 92vw; top: 8px; }
  #multiBar .multi-hint { display: none; }
}

/* ログインモーダル */
#authModal { position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(0,0,0,.4); align-items: center; justify-content: center; }
#authModal.show { display: flex; }
.auth-box { background: #fff; border-radius: 10px; width: min(340px, 92vw);
  box-shadow: 0 8px 32px rgba(0,0,0,.25); overflow: hidden; }
.auth-hd { display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid #e2e8ee; font: 600 15px var(--sans); }
.auth-hd .x { cursor: pointer; color: #889; font-size: 18px; }
.auth-tabs { display: flex; border-bottom: 1px solid #e2e8ee; }
.auth-tabs button { flex: 1; padding: 10px; border: none; background: #f7f9fb;
  font: 13px var(--sans); cursor: pointer; color: #667; }
.auth-tabs button.on { background: #fff; color: var(--ink); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--ink); }
.auth-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.auth-body label { font: 12px var(--sans); color: #556; display: flex; flex-direction: column; gap: 4px; }
.auth-body input { font: 14px var(--sans); padding: 8px 10px; border: 1px solid #c3ccd6;
  border-radius: 6px; }
.auth-body input:focus { outline: none; border-color: var(--ink); }
.auth-err { color: #c92a2a; font-size: 12px; min-height: 16px; }
.auth-body .primary { padding: 9px; border-radius: 6px; border: none; background: var(--ink);
  color: #fff; font: 600 14px var(--sans); cursor: pointer; }

/* お気に入りパネル（登記キューと同じ体裁） */
#favBadge { font: 12px var(--sans); padding: 6px 12px; border: 1.5px solid #f59f00;
  background: #fff; color: #b8860b; border-radius: 8px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.12); }
#favPanel { width: 260px; background: #fff; border: 1.5px solid #f59f00; border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15); max-height: 50vh; overflow: hidden; display: flex; flex-direction: column; }
#favPanel .tq-hd { display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid #f0e0b0; font: 600 13px var(--sans); }
#favPanel .tq-hd .x, #favClose { cursor: pointer; color: #889; }
#favList { list-style: none; margin: 0; padding: 4px; overflow-y: auto; }
#favList li { display: flex; justify-content: space-between; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 5px; cursor: pointer; font: 12px var(--sans); }
#favList li:hover { background: #fff9e0; }
#favList .fav-del { color: #c92a2a; cursor: pointer; font-size: 14px; padding: 0 4px; }
#favList .fav-jump { flex: 1; }
#favList .fav-group { cursor: default; padding: 7px 8px 3px; margin-top: 4px; }
#favList .fav-group:hover { background: none; }
#favList .fav-gl { font-size: 11px; font-weight: 600; color: #40515f; }
#favList .fav-gn { font-family: var(--mono); font-size: 10px; color: #adb5bd; }
#favList .fav-empty { cursor: default; font-size: 11px; color: #868e96; line-height: 1.5; }
#favList .fav-empty:hover { background: none; }
/* 打診ステータスのプルダウン行 */
.status-row { display: flex; align-items: center; gap: 8px; margin-top: 8px;
  padding: 8px; background: #eef4fb; border: 1px solid #d0e0f0; border-radius: 6px; }
.status-row label { font-size: 11.5px; color: #1864ab; font-weight: 600; white-space: nowrap; }
.status-row select { flex: 1; font: 12px var(--sans); padding: 4px 6px;
  border: 1px solid #b8d0e8; border-radius: 5px; background: #fff; }
.status-row .hint { font-size: 10.5px; color: #2b8a3e; min-width: 56px; }