/* =====================
   デザイントークン（D案：紺×白×青 label142）
===================== */
:root {
  --navy: #0F2440;      /* ヘッダ・主ボタン */
  --navy-2: #1B3A63;    /* ホバー */
  --blue: #1B5FC1;      /* アクセント */
  --blue-bg: #EAF1FB;   /* 淡青背景 */
  --bg: #F4F6FA;        /* 画面背景 */
  --line: #E3E8F0;      /* 罫線 */
  --sub: #68788D;       /* 補助文字 */
  --shadow: 0 1px 3px rgba(16,36,64,.08), 0 4px 14px rgba(16,36,64,.06);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 【v442→v448】html/body の touch-action:manipulation は iOS Safari のダブルタップ拡大を
   止めない（share.html の実機診断で、Safari は叩いた要素自身の値しか見ないことが判明）。
   本体でツールバー（PJ名・空白）を二度押ししても拡大しないのは、#app-title が <span> で
   拡大の的になる箱が画面幅いっぱいの #toolbar だから（Safari は叩いた箱を画面幅に合わせる
   ので、元から画面幅なら何も起きない）——という読み（推定）。share.html の #header-name は
   flex:1 の <div> で箱が狭く、拡大した。v446「body の overflow:hidden が理由」、
   v447「draw.js の document click が理由」はどちらも share に同じものを入れて否定済み。
   注意: #app-title を <div> 等のブロックにすると本体でも拡大が始まる可能性がある。
   manipulation は押せる要素（button など）への保険として残す。ピンチ拡大とスクロールは残る。 */
html, body {
  touch-action: manipulation;
}

/* 【v579】safe-area を JS からも読めるように変数へ（setSheetState の最小高さ）。cover 無し・Android・PC では 0。
   【v580】上（--sat）は撤去：時計帯は default でページがその下から始まるので 0 固定。下だけ使う */
:root {
  --sab: env(safe-area-inset-bottom, 0px);
}

/* =====================================================================
   【v602】G-cho の字を確定させる — Windows は BIZ UDPゴシック、iPhone・Mac は今までどおり
   ---------------------------------------------------------------------
   なぜ: (1) <button> と入力欄はページのフォント指定を引き継がない（ブラウザの決まり）。v601 までは
         ボタンの字がブラウザ任せ（バッキぃの PC では Arial、iPhone では system-ui）で、帯の字の位置を
         合わせても見る人の環境で外れた（v461→v462 で取り消した原因）。
         (2) アプリ全体の行間の指定が無く、Meiryo の内蔵の行間（1.5倍）に頼っていた。
   どうした: BIZ UDPゴシック（Windows 10 の 2018年秋以降・11 に標準で入っている UD フォント。0/O・1/l が
         見分けやすい）を 'GchoBIZ' という名前で登録し、そこに「行の高さ」と「字の上下位置」を持たせた。
         ・ascent 113% ＋ descent 37% ＝ 行の高さ 1.5倍（＝今の Meiryo と同じ。実測：12px→18px、14px→21px）
         ・113−37＝76 は BIZ の素の値（88−12）と同じ差 ＝ 字が行の上下の真ん中に来る。
           帯の字とアイコンのズレが 0.5px 以内に収まる（v601 までは字が約1px 下）。ボタンごとの補正は無い
   効く端末: BIZ が入っている端末だけ。local() で見つからなければ 'GchoBIZ' はまるごと飛ばされ、次の字に
         落ちる。iPhone・iPad・Mac には BIZ が無い → 字も行間もボタンの高さも v601 と同じ（実機の fontcheck で
         「行間を CSS で一律に決めると iPhone は1行 −1px・ボタン +4px 動く」と分かったので、この方式にした）
   行間: body に line-height は書かない（フォントに持たせたので不要。書くと iPhone が動く）
   ボタン: 'GchoBIZ' の次は system-ui ＝ iPhone の今のボタンの字そのもの（inherit にするとヒラギノになって
         ボタンが 4px 伸びる）
   ===================================================================== */
@font-face {
  font-family: 'GchoBIZ';
  font-weight: 400;
  src: local('BIZ UDPGothic'), local('BIZ-UDPGothic');
  ascent-override: 113%;
  descent-override: 37%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'GchoBIZ';
  font-weight: 700;
  src: local('BIZ UDPGothic Bold'), local('BIZ-UDPGothic-Bold');
  ascent-override: 113%;
  descent-override: 37%;
  line-gap-override: 0%;
}
button, input, select, textarea { font-family: 'GchoBIZ', system-ui, sans-serif; }

body {
  font-family: 'GchoBIZ', 'Hiragino Sans', 'Meiryo', sans-serif;
  font-size: 14px;
  color: #333;
  height: 100dvh;
  overflow: hidden;
  /* 【v581】body の背景を紺にして時計帯の色を合わせる案は撤回（【v582】）：ぼやけは色に関係なく残り、Safari の下バーと
     地図の描画前の背景が紺になる副作用のほうが大きかった。時計帯の手当ては下の header 群の sticky（v582） */
}

/* =====================
   ログイン画面
===================== */
#login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  background: var(--bg);
  padding-bottom: var(--sab);   /* 【v581】cover でホームバーの裏まで伸びたぶん（版数表記が切れない） */
}

#login-box {
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 36px 32px;
  text-align: center;
  box-shadow: var(--shadow);
  width: 340px;
}

#login-logo {
  width: 100%;
  max-width: 250px;
  height: auto;
  display: block;
  margin: 0 auto 6px;
  /* 薄い白背景のJPEGロゴを白いカードに溶け込ませる（フチを消す） */
  mix-blend-mode: multiply;
}

/* 【v240】ロゴ画像はワードマークのみにし、サブタイトルはHTMLテキストで描画する。
   従来は「現地調査アプリ」を画像に焼き込んでいたため、名称変更のたびに画像の作り直しが必要で、
   かつ元フォントが手元に無いと再現できなかった。テキスト化で名称変更は1行になる。
   ロゴ画像は両アプリともワードマーク高168px/キャンバス800x240に正規化済みなので、
   同じmax-widthで両アプリの見た目の大きさが揃う。 */
#login-subtitle {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .16em;
  text-indent: .16em;   /* 字送りで右にずれる分を打ち消して光学的に中央へ */
  text-align: center;
  color: var(--navy);
  margin: 0 0 22px;
}

/* 【v885】C5：#login-box h1 を消した（v240 からログイン画面に h1 は無い＝ロゴ画像＋#login-subtitle） */

.login-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 16px;       /* iOSで16px未満だと自動ズームするため16pxに統一 */
}
.login-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(27,95,193,0.12);
}

.login-btn {
  width: 100%;
  padding: 12px;
  background: var(--navy);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.login-btn:hover { background: var(--navy-2); }

.login-link {
  width: 100%;
  background: none;
  border: none;
  color: var(--blue);
  font-size: 12px;
  cursor: pointer;
  margin-top: 12px;
  padding: 4px;
}
.login-link:hover { text-decoration: underline; }

/* =====================
   プロジェクト選択画面
===================== */
#project-screen {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background: var(--bg);
}

#project-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 20px;              /* 【v589】16px → 4px（帯の高さ 46px に合わせる） */
  height: 46px;                   /* 【v589】PC・スマホとも 46px 固定（#toolbar と同じ） */
  box-sizing: border-box;
  overflow: hidden;
  background: var(--navy);
  color: white;
  position: sticky; top: 0; z-index: 50;   /* 【v582】iOS 26/27 のホーム画面アプリは、最上端が幅いっぱい・不透明・sticky/fixed の箱だと時計帯をその色でベタ塗りにし、そうでないとガラス（ぼやけ）を乗せる。椿測量 HP の header と同じ形にする */
}

#project-header h2 {
  font-size: 18px;
  font-weight: 600;
}

/* 【v590】新規作成ボタンの段（帯のすぐ下・スクロールしない）。幅・余白は #project-list-container と同じ */
#project-topbar {
  flex-shrink: 0;
  padding: 0 20px;                /* 上の余白はボタン側の margin に持たせる → admin 以外（ボタン非表示）では段の高さが 0 になる */
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}
#project-topbar .proj-btn-primary { margin: 20px 0 0; }
/* 【v794】88：DB 使用量の赤い帯（400MB 以上のときだけ・admin／manager）。新規作成ボタンの下・一覧の上 */
#db-warn-band {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: #E24B4A;
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 6px;
}

#project-list-container {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  padding-bottom: calc(20px + var(--sab));   /* 【v581】一覧の最後（新規作成・版数）がホームバーの裏に入らない */
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}

.project-card {
  background: white;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 10px;
  cursor: pointer;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}

.project-card:hover { border-color: var(--blue); }

.project-card-icon {
  width: 40px;
  height: 40px;
  background: var(--blue-bg);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  font-size: 20px;
  flex-shrink: 0;
}

.project-card-body { flex: 1; }

.project-card-name {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 3px;
}

.project-card-meta {
  font-size: 12px;
  color: #888;
}

.proj-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  color: white;
  font-size: 13px;
  cursor: pointer;
}

.proj-btn:hover { background: rgba(255,255,255,0.25); }

.proj-btn-primary {
  width: 100%;
  padding: 12px;
  background: var(--navy);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.proj-btn-primary:hover { background: var(--navy-2); }

.proj-btn-sm {
  display: flex;
  align-items: center;
  padding: 5px 8px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

/* =====================
   プロジェクト管理画面
===================== */
#manager-screen {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background: var(--bg);
}

#manager-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 20px;              /* 【v589】12px → 4px */
  height: 46px;                   /* 【v589】PC・スマホとも 46px 固定 */
  box-sizing: border-box;
  overflow: hidden;
  background: var(--navy);
  color: white;
  position: sticky; top: 0; z-index: 50;   /* 【v582】 */
}

#manager-header h2 {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;   /* 【v589】PJ 名が長くても1行（PC も） */
}

/* 【v453】ヘッダー直下の行き先ボタン（⑩-6＋⑩-19）。#manager-content の外に置くので、
   中身をどれだけ下へスクロールしても消えない（管理画面の中身は縦に長い）。
   【v506】背景を紺 → 画面色に。v505 までヘッダーと同じ紺で地続きにしていたため、
   紺のバーが2段ぶんの厚みに見えていた。紺＝バー／それ以外＝中身、の区切りを1本の線に寄せる。
   ボタンの面は半透明の白 → 白地＋紺文字（下のカードと同じ面に乗る。色は .mgr-nav-btn 側）
   【v594】ボタンは紺地＋白文字に（帯の背景は画面色のまま） */
#manager-nav {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
/* 【v464】ボタンの幅を下のカードにそろえる。#manager-content と同じ max-width / 中央寄せ / 横余白
   （PC 16px・スマホ 12px）。v463 までは横余白 20px で画面幅いっぱいに広がり、PCではカードより
   はるかに幅広（20〜1080 vs カード 216〜884）、スマホでもカードより 8px 狭かった */
#manager-nav-inner {
  display: flex;
  gap: 8px;
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  padding: 12px 16px;   /* 【v506】紺のバーから離す。横は #manager-content と同じ 16px のまま */
}
.mgr-nav-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 6px;      /* v452までのヘッダー内ボタンより厚い＝指で押しやすく */
  /* 【v506】紺の上の半透明白 → 画面色の上の白地。半透明のままだと下地が紺でなくなり
     ほぼ真っ白で枠も見えなくなるため、面・枠・文字色をすべて実色で指定する */
  /* 【v594】白地＋紺文字 → 紺地＋白文字（「別タブで開く」＝.form-btn.primary と同じ色）。帯の背景は画面色のまま
     なので v505 の「紺が2段」には戻らない（帯 → 12px のすき間 → 紺のボタン）。枠は面と同じ紺 */
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 7px;
  color: #fff;
  box-shadow: var(--shadow);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
/* 【v594】薄い水色のままだと白文字が読めない → 新規作成ボタン（.proj-btn-primary:hover）と同じ明るい紺 */
.mgr-nav-btn:hover { background: var(--navy-2); border-color: var(--navy-2); }
.mgr-nav-btn .ti { font-size: 16px; }

#manager-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  padding-bottom: calc(16px + var(--sab));   /* 【v581】 */
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
}

/* 【v258】✏️メニューは右端揃えで開く。left:0だと右寄りのボタン基準で
   iPhoneの画面右にはみ出す（対象レイヤ＝当時の「計測先レイヤ」の追加で幅が増えて顕在化）。 */
#draw-menu { left: auto; right: 0; }

/* 【v257】作図メニューの「対象レイヤ」（【v874】までの見出しは「計測先レイヤ」）。
   ドロップダウンはツールバー(紺・白文字)内にあるため、色は必ず明示する（v256の教訓）。 */
.draw-layer-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #8a94a3;
  margin-bottom: 4px;
}
.draw-layer-label .ti { font-size: 12px; }
.draw-layer-chip {
  font-size: 12px;
  font-weight: 600;
  color: #185FA5;
  background: #EDF4FC;
  border: 1px solid #d7e6f7;
  border-radius: 6px;
  padding: 5px 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.draw-layer-chip-none {
  color: #c0392b;
  background: #fdf2f1;
  border-color: #f2d4d1;
  font-weight: 500;
}
.draw-layer-select-wrap { position: relative; }
.draw-layer-select {
  width: 100%;
  font-size: 12px;
  font-weight: 600;
  color: #185FA5;
  background: #EDF4FC;
  border: 1px solid #d7e6f7;
  border-radius: 6px;
  padding: 5px 24px 5px 9px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.draw-layer-select:focus { outline: 2px solid #bcd7f2; outline-offset: 0; }
.draw-layer-select-arrow {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: #185FA5;
  pointer-events: none;
}

/* 【v255】PJ設定TOPのタブ（v254の2列を置き換え）。PC/スマホ共通。 */
.manager-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid var(--line);
  margin-bottom: 12px;
}
.manager-tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 8px 14px;
  font-size: 13px;
  color: #667;
  cursor: pointer;
  white-space: nowrap;
}
.manager-tab.active {
  color: var(--navy);
  font-weight: 600;
  border-bottom-color: var(--navy);
}
.manager-tab-panel { display: none; }
.manager-tab-panel.active { display: block; }

/* 【v717】レイヤ設定のタブ（フォーム／スタイル／ラベル）。
   【v719】3段構え＝上（← ・レイヤ名・タブ）固定／中（.ls-scroll）だけスクロール／下（設定を保存）固定。
   v717／v718 の sticky（.ls-tabs／.ls-head／.save-sticky）はやめた：スクロールする箱の中に居るので
   スクロールバーが固定の所まで伸び、箱の余白（16px）ぶん隙間から中身が見えた（バッキぃ 10/5）。
   #manager-content はこの画面のときだけ縦の flex 箱にして、中の段に高さを渡す（:has は iOS 15.4 以降） */
#manager-content:has(> .ls-screen) { display: flex; flex-direction: column; overflow: hidden; }
.ls-screen { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.ls-fixed  { flex: 0 0 auto; }
.ls-fixed .manager-section { margin-bottom: 0; border-bottom: none; border-radius: 12px 12px 0 0; padding: 10px 16px 0; box-shadow: none; }
.ls-fixed .manager-tabs { margin-bottom: 0; }
.ls-title { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
/* 【v720】くの字（Tabler chevron-left）＋「戻る」。高さ 32px は v719 のまま・横は字のぶん */
.ls-title .ls-back { width: auto; height: 32px; padding: 0 10px 0 6px; margin: 0; flex: 0 0 auto; font-size: 12px; line-height: 1; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.ls-title .ls-back .ti { font-size: 15px; vertical-align: 0; }
.ls-title .manager-section-title { margin: 0; padding: 0; border: none; flex: 1; min-width: 0; }
/* 【v767】56：見出しの右の「✏ 名前」（戻ると同じ形） */
.ls-title .ls-rename { width: auto; height: 32px; padding: 0 10px 0 8px; margin: 0; flex: 0 0 auto; font-size: 12px; line-height: 1; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.ls-title .ls-rename .ti { font-size: 14px; vertical-align: 0; }
.ls-tabs .manager-tab { flex: 1; text-align: center; padding: 6px 10px; }
.ls-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-top: none; border-bottom: none; padding: 12px 16px 16px; }
.save-fixed { flex: 0 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 0 0 12px 12px; padding: 8px 16px; box-shadow: var(--shadow); }
.save-fixed .form-btn { margin-bottom: 0; }
/* 【v721】ラベル設定の行（サイズ・色・太字・このラベルのあと）：見出し 14px・枠 32px で4列を揃える（通常レイヤ・PMTiles ⚙ 共用） */
.lbl-h { height: 14px; line-height: 14px; margin-bottom: 3px; white-space: nowrap; }
.lbl-ctl { height: 32px; box-sizing: border-box; margin: 0; }

.manager-section {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}

.manager-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.layer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #f8f9fa;
  border-radius: 6px;
  margin-bottom: 6px;
  border: 1px solid #e0e0e0;
}

.layer-type-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.layer-type-survey { background: #E6F1FB; color: #185FA5; }
.layer-type-reference { background: #F0F0F0; color: #666; }

/* 【v715】管理画面の行の中の小ボタン（レイヤ・PMTiles・雛形・色ルール）。意味で色を分ける（バッキぃ 10/5・案C）。
   v714 までは行ごとに style 直書きで、「設定」がレイヤは白・PMTiles は青、「読込」と「複製」が同じ青だった */
.row-btn {
  font-size: 11px; padding: 3px 8px; border-radius: 4px; cursor: pointer;
  border: 1px solid #ddd; background: #fff; color: #333; white-space: nowrap; flex-shrink: 0;
}
.row-btn.open    { background: #fff;    border-color: #ccd3dd; color: var(--navy); }   /* 開くだけ：設定 */
.row-btn.add     { background: #eaf7ee; border-color: #bfe3cc; color: #1e7a3c; }       /* 増やす：複製 */
.row-btn.replace { background: #e8f1fb; border-color: #cfe0f3; color: #185FA5; }       /* 入れる：読込（レイヤを追加・雛形を作成と同じ青） */
.row-btn.danger  { background: #fff5f5; border-color: #fcc;    color: #c0392b; }       /* 消す：削除・全削除 */
.form-btn.wide-add { background: #e8f1fb; border-color: #cfe0f3; color: #185FA5; }     /* 【v715】＋ レイヤを追加／＋ 雛形を作成 */

/* =====================
   ツールバー
===================== */
#toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--navy);
  color: white;
  flex-wrap: wrap;
  z-index: 1000;
  position: sticky; top: 0;   /* 【v582】relative → sticky（時計帯の判定用・流れの中に残るのでレイアウトは同じ） */
  min-height: 46px;   /* 【v589】PC でも紺の帯は 46px（PJ 一覧・管理画面と同じ）。ボタンが折り返したときだけ伸びる（min なので） */
  box-sizing: border-box;
}

#app-title {
  font-size: 13px;
  font-weight: 600;
  margin-right: 4px;
  white-space: nowrap;
}

.tool-group {
  display: flex;
  gap: 4px;
}

.tool-right {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.tool-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 8px;
  color: white;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.tool-btn:hover { background: rgba(255,255,255,0.25); }
.tool-btn.active { background: var(--blue); border-color: var(--blue); }

/* 【v631】帯のスナップ（#btn-snap）は無くなった。スナップの緑（#1D9E75）はバーの下段の .draw-act-btn.snap.on へ */

.tool-dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  min-width: 130px;
  z-index: 2000;
  margin-top: 4px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
}

.dropdown-item:hover { background: var(--blue-bg); }
.dropdown-item:first-child { border-radius: 10px 10px 0 0; }
.dropdown-item:last-child { border-radius: 0 0 10px 10px; }

/* =====================
   メインエリア
===================== */
#main-screen {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

#main-area {
  flex: 1;
  display: flex;
  position: relative;
  overflow: hidden;
}

/* =====================
   地図
===================== */
#map {
  flex: 1;
  height: 100%;
  z-index: 1;
  position: relative;
}

/* 【v585】PJ 切替の残像を隠す白い板（map.js _mapCoverShow／_mapCoverHide）。保存位置の無い PJ を開くときだけ */
#map-cover {
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 13px;
  pointer-events: none;
}
#map-cover.show { display: flex; }

#map-controls {
  position: absolute;
  bottom: 60px;   /* 【v618】78→60。下の出典の帯が PLATEAU で2段（約 40px＋余白 10）になっても当たらない高さ */
  right: 10px;   /* 【v618】左下→右下（右利きが多い・バッキぃ決定 2026/09/29）。定規は帯へ移したので 現在地・Google の2つ */
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.map-ctrl-btn {
  width: 36px;
  height: 36px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  color: var(--navy);
  box-shadow: var(--shadow);
}

.map-ctrl-btn:hover { background: var(--blue-bg); }

/* =====================
   サイドバー
===================== */
#sidebar {
  width: 340px;   /* 【v636】280→340。ベースマップの丸ボタン6つ（v635・中身 ≈293px）が1行に入る幅（322px 以上）。手で動かした幅は保存しない＝再読込でここに戻る */
  background: white;
  border-left: 1px solid #e0e0e0;
  display: flex;
  flex-direction: row;
  z-index: 100;
}

/* ハンドルを除くサイドバー本体 */
#sidebar-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* PCのドラッグハンドル（左端の縦バー） */
#sidebar-drag-handle {
  width: 8px;
  min-height: 100%;
  background: var(--bg);
  border-right: 2px solid var(--line);
  cursor: ew-resize;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  order: -1;
}
#sidebar-drag-handle:hover {
  background: var(--blue-bg);
  border-right-color: var(--blue);
}
#sidebar-drag-handle > div {
  display: none;
}

#sidebar-tabs {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
}

.stab {
  flex: 1;
  padding: 8px 4px;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
  color: var(--sub);
  border-bottom: 2.5px solid transparent;
}

.stab.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  font-weight: 700;
}

/* 【v630】属性照会の頭（レイヤ名＋◀▶・札＋キー値）。スクロールする箱（#sidebar-content）の外＝跳ねている間も押せる。中身は form.js renderReferencePanel が入れる */
#insp-head { display: none; padding: 10px 10px 6px; background: #fff; border-bottom: 1px solid var(--line); flex-shrink: 0; }
#insp-head.on { display: block; }
#sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  /* 【v629→v630】overscroll-behavior: none は取り消し（端でピタッと止まって固い・レスポンスが遅く感じる・バッキぃ実機 9/29）。◀▶ は #insp-head として箱の外へ */
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* =====================
   地物カード
===================== */
.feature-card {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 6px;
  cursor: pointer;
  border: 1px solid transparent;
}

.feature-card:hover { border-color: var(--blue); }
.feature-card.selected { border-color: var(--blue); background: var(--blue-bg); }

.feature-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.feature-card-title { font-size: 12px; font-weight: 600; }

/* =====================
   フォーム
===================== */
.form-row { margin-bottom: 10px; }

.form-label {
  font-size: 11px;
  color: #666;
  margin-bottom: 3px;
  display: block;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
  color: #333;
  background: #FFFFCC;   /* 入力対象の項目は黄色（参照項目は灰色のまま） */
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: #E0B400;
  background: #FFF9A8;   /* 入力中は少し濃い黄色 */
}

.form-textarea { resize: none; }

/* 左下のスケール表示（ものさし＋縮尺値）を控えめに */
/* 【M001】Leaflet の .leaflet-control-scale → MapLibre の .maplibregl-ctrl-scale */
.maplibregl-ctrl-bottom-left .maplibregl-ctrl { margin: 0 0 4px 8px; }
.maplibregl-ctrl-scale {
  font-size: 12px;
  line-height: 1.3;
  padding: 2px 6px;
  background: rgba(255,255,255,0.8);
  border-color: #777 !important;
  color: #222;
}
/* 【M006】?diag のボタン */
#diag-bar { position: fixed; left: 8px; bottom: 96px; z-index: 5000; display: flex; gap: 6px; flex-wrap: wrap; max-width: 60vw; }
#diag-bar button { font-size: 11px; padding: 6px 8px; border-radius: 6px; border: 1px solid #c0392b; background: #fff; color: #c0392b; font-weight: 700; }
.scale-ratio {
  font-size: 12px;
  font-weight: 600;
  color: #222;
  background: rgba(255,255,255,0.8);
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 8px !important;
  margin-bottom: 4px !important;
  pointer-events: none;
}
/* 【v437】⑩-18: bottom:18px だと左下の縮尺（縮尺値の上端が下から52px）に必ず重なる。
   バーの幅は中身で決まる固定値（描画290・ポイント確認300・計測268px）で画面幅に
   よらないため、画面が狭いほど左へ伸びて縮尺を覆う（実測: 709px では起きず
   iPhone 390px で発生）。縦だけで逃がす＝横位置は中央のままでよい。
   4種のバー（描画・ポイント確認・計測・頂点編集）すべて同じ足場。 */
#draw-actions, #point-confirm {
  position: absolute;
  left: 50%;
  bottom: 56px;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  gap: 6px;   /* 【v632】8→6（右端にスナップの四角が増えた分、右下の丸に当たらないように詰める） */
  background: rgba(255,255,255,0.95);
  padding: 8px;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
/* 【M008】描画中の面積（#draw-area）は【v633】で消した（吹き出しの面積と二重・面が大きいほどバーが伸びる） */
/* 【v631】バーの中のボタンの行（描画＝戻す・完成・終了／ポイント＝保存・終了。計測は .msr-top と前からある .msr-row）。【v632】隙間 6px */
#draw-actions .bar-row, #point-confirm .bar-row, #msr-actions .msr-top { display: flex; gap: 6px; }
#msr-actions .msr-top .msr-add { flex: 1; }
/* 【v632】スナップ ON/OFF＝行の右端の絵だけの四角（幅 34px・高さは隣のボタンと同じ＝伸ばして合わせる）。
   v631 の「下段に1段」はバーの高さぶん地図が狭くなるのでやめた（バッキぃ 2026/09/29）。
   ON は帯で押したボタンと同じ青（完成の緑と見分ける）・OFF は「戻す」と同じ灰。
   幅 34・隙間 6 で線・面のバーの右端が 340px＝iPhone 390 で右下の丸（left 340）に当たらない */
.draw-act-btn.snap { background: #f0f0f0; color: #333; width: 34px; padding: 0; justify-content: center; flex: none; align-self: stretch; }
.draw-act-btn.snap svg { width: 18px; height: 18px; }   /* 絵は帯にあった SVG そのまま・ここでは寸法だけ（線は縮めない） */
.draw-act-btn.snap.on { background: var(--blue); color: #fff; }
/* 【v768】68：スナップのメニュー（ボタンの真上・右端をそろえる。下の透明な板は外を押したとき閉じるだけ＝地図に点を打たない） */
#snap-menu-back { position: fixed; inset: 0; z-index: 1990; background: transparent; cursor: pointer; }   /* 【v769】cursor:pointer＝iPhone の Safari がこの板にクリックを送るため（押せる物と見なされない板にはクリックが来ないことがある） */
#snap-menu { position: fixed; z-index: 1991; background: rgba(255,255,255,0.98); border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,0.3); padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
#snap-menu .snap-menu-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 14px; font-weight: 600; border: none; background: none; border-radius: 6px; cursor: pointer; color: #222; text-align: left; white-space: nowrap; }
#snap-menu .snap-menu-item svg { width: 18px; height: 18px; color: var(--blue); flex: none; }
#snap-menu .snap-menu-item.off svg { color: #999; }
#snap-menu .snap-menu-item span { flex: 1; }
#snap-menu .snap-menu-item.cur { background: #e8f1fb; }
#snap-menu .snap-menu-item .ti { color: var(--blue); font-size: 16px; }
/* 「この位置で保存？」（.pc-msg）は v631 で消した（ポイントを選んだ時点からバーを出すので、点が無いのに「この位置」は変） */
.draw-act-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
/* ===== 【v410】距離・面積の計測モード ===== */
/* 【v885】C5：.map-ctrl-btn.active（定規ボタンの ON 表示）を消した＝定規は【v618】で帯の #btn-measure（.tool-btn）へ移り、
   地図の丸ボタンに active を付ける所は無い */
/* 画面中央の十字照準。pointer-events:noneで地図操作を邪魔しない。snap=吸着候補あり */
#msr-crosshair {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 900; pointer-events: none;
  color: #D85A30; line-height: 0;
}
#msr-crosshair.snap { color: #FF00FF; }  /* 既存スナップ目印と同じマゼンタ */
/* 結果パネル。左上のズーム(+/-)の右に置き、幅は内容ぶんだけ
   （【v411】right固定だとPCで画面幅いっぱいに伸びて間抜けなため。
    max-widthは右上メニューを避ける保険） */
#msr-panel {
  position: absolute; top: 12px; left: 10px; right: auto;   /* 【v618】＋−が無くなったので左端へ（56→10） */
  max-width: calc(100% - 66px);   /* 【v618】左 10 ＋ 右の ≡（36＋10＋10） */
  z-index: 1000; display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,0.95); border-radius: 10px;
  padding: 6px 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
#msr-panel .msr-cell { display: flex; flex-direction: column; min-width: 0; }
#msr-panel .msr-cap { font-size: 10.5px; color: #666; }
#msr-panel .msr-val { font-size: 15px; font-weight: 700; color: var(--navy); white-space: nowrap; }
#msr-panel .msr-npt { margin-left: auto; font-size: 11px; color: #999; white-space: nowrap; }
/* 【v437】⑩-13: 未送信チップと計測パネルは top:12px / left:56px が完全に一致しており、
   DOM順で後の計測パネルがチップを覆う＝計測中は未送信件数が見えず手動同期も押せない。
   位置指定を index.html のインラインからここへ移し（インラインはCSSで上書きできない）、
   計測中（#map.msr-on）だけパネル（高さ50px）の真下へ逃がす。 */
#unsent-chip { left: 10px; top: 12px; }   /* 【v618】＋−が無くなったので左端へ（56→10） */
#map.msr-on #unsent-chip { top: 68px; }
/* 操作バー。#draw-actionsと同じ足場だが縦積み（点を追加を大きく） */
#msr-actions {
  position: absolute; left: 50%; bottom: 56px;     /* 【v437】⑩-18 */
  transform: translateX(-50%); z-index: 1000;
  display: none; flex-direction: column; gap: 8px;
  background: rgba(255,255,255,0.95); padding: 8px;
  border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
#msr-actions .msr-row { display: flex; gap: 8px; }
#msr-actions .msr-row .draw-act-btn { flex: 1; justify-content: center; }
.draw-act-btn.msr-add { background: var(--navy); color: #fff; justify-content: center; }
/* 辺の距離ラベル（白下敷き）。rubber=ゴムひもの生表示（オレンジ） */
.msr-lbl {
  background: rgba(255,255,255,0.88); border-radius: 4px;
  padding: 1px 5px; font-size: 11px; font-weight: 600;
  color: #085041; white-space: nowrap;
  transform: translate(-50%, -50%); display: inline-block;
}
.msr-lbl.rubber { color: #993C1D; }
/* 【M013d】描画中の吹き出し（Leaflet.draw の .leaflet-draw-tooltip 相当。PC はカーソル右 20px・スマホは最後の点の右 20px） */
.draw-tip {
  background: rgba(54,54,54,0.9); color: #fff; border-radius: 4px;
  padding: 4px 8px; font-size: 12px; line-height: 1.35; white-space: nowrap;
  display: inline-block; pointer-events: none;
}
.draw-tip b { font-weight: 700; }
/* 【M025】交差の警告中（Leaflet.draw の .leaflet-error-draw-tooltip と同じ色） */
.draw-tip.err { background: #f2dede; border: 1px solid #e6b6bd; color: #b94a48; }

.draw-act-btn.finish { background: #27ae60; color: #fff; }
.draw-act-btn.undo   { background: #f0f0f0; color: #333; }
.draw-act-btn.cancel { background: #f0f0f0; color: #c0392b; }
.draw-act-btn.delpart-del { background: #c0392b; color: #fff; }   /* 【v891】パート削除のバーの［削除］（confirm の代わり） */
.draw-act-btn:active { opacity: 0.8; }

.form-btn {
  width: 100%;
  padding: 7px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #ddd;
  background: white;
  margin-bottom: 6px;
}

.form-btn.primary { background: var(--navy); color: white; border-color: var(--navy); }
.form-btn.danger  { background: #c0392b; color: white; border-color: #c0392b; }

/* =====================
   進捗
===================== */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}

.stat-card {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 8px;
  text-align: center;
}

.stat-未調査 { background: #fff1f1; }
.stat-調査中 { background: #f0fdf4; }
.stat-調査済 { background: #eff6ff; }

.progress-bar {
  height: 6px;
  background: #E9EDF3;
  border-radius: 8px;
  margin: 6px 0 12px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), #3F7FD9);
  border-radius: 8px;
  transition: width 0.3s;
}

/* =====================
   レイヤーパネル
===================== */
.section-label {
  font-size: 11px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.layer-check {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  cursor: pointer;
  font-size: 12px;
}

/* =====================
   スタイル設定
===================== */
.color-rule-item {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  padding: 6px 8px;
  background: #f8f9fa;
  border-radius: 4px;
}

.color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid #ddd;
  cursor: pointer;
  flex-shrink: 0;
}

/* 【label182】iOS Safariのカラーinput対策。
   素のinput[type=color]はiOS(17以降系)で灰色楕円＋虹色切り欠きの独自UIで描かれ、
   選択中の色が見えない。appearanceを打ち消して「選択色がそのまま見える四角」に統一。
   （サイズは.color-swatchや各所のinlineスタイルが持つのでここでは触らない） */
input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: none;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 3px; }
input[type="color"]::-moz-color-swatch { border: none; border-radius: 3px; }

/* =====================
   ステータスバー
===================== */
#status-bar {
  padding: 4px 12px;
  background: var(--bg);
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: #666;
  display: flex;
  gap: 16px;
}

/* =====================
   新規プロジェクトフォーム
===================== */
#new-project-form {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

#new-project-form h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 14px;
  color: var(--navy);
}
/* =====================
   スマホ対応（768px以下）
===================== */
@media (max-width: 768px) {

  /* ツールバー */
  #toolbar {
    padding: 4px 8px;
    gap: 4px;
  }
  #app-title { display: none; }
  .tool-btn {
    padding: 6px 8px;
    font-size: 11px;
  }
  .tool-btn span { display: none; } /* ユーザー名テキスト非表示 */

  /* メインエリア：縦積み */
  #main-area {
    flex-direction: column;
    overflow: hidden;
  }

  /* 地図：残り全部。最低20dvh（パネル最大80dvhと足して100dvhに収め、
     パネルを最大まで引いても枠が画面外にはみ出さない＝下端ボタンが隠れない） */
  #map {
    flex: 1;
    min-height: 20dvh;
  }

  /* サイドバー：下部・ドラッグで高さ可変 */
  #sidebar {
    width: 100%;
    /* 【v579】64px（label151）＋ホームバーの高さ。cover でホームバーの下まで画面が伸びたぶん、取っ手と文字がバーの上に出る。
       【v580】足したぶんは padding-bottom（余白）に逃がし、中身（#sidebar-content）は 64px のときと同じ寸法にする。
       中身に足すと 1行しか無い最小状態でスクロールの余地が生まれ、文字がスワイプで逃げる */
    height: calc(64px + var(--sab));   /* 起動直後は最小化（地図MAX）。* が border-box なので padding は 64px の外に足す形になる */
    min-height: calc(64px + var(--sab));
    padding-bottom: var(--sab);
    max-height: 80dvh;
    border-left: none;
    border-top: 2px solid var(--navy);
    flex: none;
    display: flex;
    flex-direction: column;
    transition: height .28s cubic-bezier(.2,.8,.25,1);  /* 【label168】地物選択などの高さ変更を滑らかに */
  }
  #sidebar.dragging { transition: none; }  /* 手ドラッグ中はアニメ無効＝指に吸い付く操作感を維持 */

  #sidebar-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  /* ドラッグハンドル（スマホでは上部バー） */
  #sidebar-drag-handle {
    width: 100%;
    min-height: 20px;
    height: 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    border-right: none;
    cursor: ns-resize;
    order: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #sidebar-drag-handle > div {
    display: block;
  }

  #sidebar-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* 【v580】padding-bottom: env(safe-area-inset-bottom) は撤去（#sidebar の余白が担う） */
  }
  /* 【v581】最小状態（取っ手＋1行）では中身をスクロールさせない。窓は約 40px なのに .tab-panel の下余白 80px で
     最初からスクロール可能で、「地物を選択してください」が上スワイプで消えていた（v578 以前から） */
  #sidebar.sheet-min #sidebar-content {
    overflow-y: hidden;
  }

  /* 全タブ共通：下端ボタンがスクロール範囲に確実に入るよう下余白を確保 */
  .tab-panel.active {
    padding-bottom: 80px;
  }

  /* ステータスバー非表示 */
  #status-bar {
    display: none;
  }

  /* ドロップダウンメニュー */
  .dropdown-menu {
    font-size: 13px;
  }

  /* フォーム */
  .form-input, .form-select {
    font-size: 16px; /* iOS自動ズーム防止 */
  }

  /* ログイン画面 */
  #login-box {
    width: 90%;
    padding: 32px 20px;
  }

  /* 【v588】紺の帯の高さを地図画面の #toolbar（4px＋ボタン38px＋4px＝46px）に揃える（バッキぃ指示 2026/09/17）。
     実測: 地図 46／管理 50／PJ 一覧 66。3つとも 46px 固定・上下 4px・左右 12px。中身が増えても太らない（overflow hidden）。
     PC は #toolbar が flex-wrap で2段になることがあるので触らない（この @media の中だけ） */
  #project-header,
  #manager-header {
    height: 46px;                 /* 【v589】高さ本体は PC 側（上）に移した。ここは左右余白だけ */
    padding: 4px 12px;
    overflow: hidden;
  }
  #project-header h2 { font-size: 16px; }
  #project-header .proj-btn { height: 38px; padding: 0 12px; }

  /* プロジェクト選択 */
  #project-topbar { padding: 0 12px; }   /* 【v590】 */
  #project-topbar .proj-btn-primary { margin: 12px 0 0; }
  #project-list-container {
    padding: 12px;
    padding-bottom: calc(12px + var(--sab));   /* 【v582】上の #project-list-container の下余白はここで上書きされていた（v581 の拾い漏れ） */
  }

  /* 管理画面 */
  #manager-content {
    padding: 12px;
    padding-bottom: calc(12px + var(--sab));   /* 【v582】 */
  }
  #manager-nav-inner { padding: 12px; }          /* 【v464】#manager-content の横余白に合わせる（【v506】上余白を追加） */

  /* 地図コントロール */
  #map-controls {
    bottom: 50px;   /* 【v618】70→50。ⓘ を開いた帯が PLATEAU で2段（11px×1.4×2＋4＝35px・余白 10）でも 5px 空く */
    right: 10px;   /* 【v618】右上の ≡（#map-menu-wrap right 10px）と右端を揃える */
  }
  .map-ctrl-btn {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}

/* =====================
   現在地マーカー（青い点＋方位の扇形）
   ===================== */
.loc-marker-wrap { background: transparent; border: none; }
/* 【v230】ぬるぬる移動（旧label224のCSS transition方式）は廃止し、map.jsのJS補間(rAF)に一本化。
   transformへのtransitionはLeafletのズーム/viewreset時のtransform書き換えに
   誤反応して浮き・ぴこぴこの原因になるため今後も付けないこと。 */
.loc-marker { position: relative; width: 48px; height: 48px; }
.loc-dot {
  position: absolute;
  left: 50%; top: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  background: #1a73e8;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.loc-heading {
  position: absolute;
  left: 50%; top: 50%;
  width: 72px; height: 72px;
  margin: -36px 0 0 -36px;
  /* 【label168】Field Maps風: 55度の扇形＋先端へ向かって消えるグラデーション。
     形はconic-gradient、減衰はmask（radial-gradient）で重ねる。回転はtransformで方位に合わせる */
  background: conic-gradient(from -27.5deg at 50% 50%,
    rgba(26,115,232,.8) 0deg 55deg, transparent 55deg 360deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%,
    rgba(0,0,0,.95) 14%, rgba(0,0,0,.45) 42%, transparent 70%);
  mask-image: radial-gradient(circle at 50% 50%,
    rgba(0,0,0,.95) 14%, rgba(0,0,0,.45) 42%, transparent 70%);
  border-radius: 50%;
  transform-origin: 50% 50%;
  pointer-events: none;
}


/* =====================
   フォーム：stickyヘッダー（鉛筆/保存）とキーフィールド2段表示
   ===================== */
.form-sticky-head {
  position: sticky;
  top: -10px;               /* スクロール枠のpadding(10px)に食い込ませて上の隙間を塞ぐ */
  z-index: 20;
  background: #fff;
  margin: -10px -10px 8px;  /* スクロール枠のpadding:10pxの帯を上・左右とも白で覆う */
  padding: 12px 10px 8px;
  border-bottom: 1px solid #e5e9ef;
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.form-head-btn {
  flex: 0 0 auto;
  width: auto;
  padding: 6px 14px;
  font-size: 14px;
  white-space: nowrap;
  margin-bottom: 0;   /* .form-btnのmargin-bottom:6pxを打ち消し（キー値枠との高さズレ修正） */
  border-radius: 8px;
}
.form-head-btn.head-edit {
  background: #fff;
  border: 1px solid var(--blue);
  color: var(--blue);
}
.form-keyfield {
  flex: 1;
  min-width: 0;
  background: var(--blue-bg);
  border: 1px solid #CFE0F5;
  border-radius: 8px;
  padding: 6px 10px;
}
.form-keyfield-label { font-size: 10px; color: var(--blue); font-weight: 600; }
.form-keyfield-value { font-size: 15px; font-weight: 700; color: var(--navy); }

/* テキストエリア自動拡張（高さはJSで制御。手動リサイズと内部スクロールを無効化） */
.form-textarea { overflow: hidden; resize: none; }


/* =====================
   ツールバー1段化（スマホ）：ラベルを隠しアイコンのみに。
   スナップのON/OFFは .active の色で判別（既存の状態クラスを利用）
   ===================== */
@media (max-width: 768px) {
  #toolbar { flex-wrap: nowrap; }
  #toolbar .btn-txt,
  #toolbar #user-name { display: none; }
  #toolbar .tool-group, #toolbar .tool-right { gap: 6px; }
}


/* 【v456】地番図スタイルの「値を集めています…」の並び。
   v455まではこの文字と「中止」ボタンが同じ行にあり、数字が伸びると
   （0 / … → 264 / 460、0種 → 99種）ボタンが2段目に押し出されて、押そうとした瞬間に逃げていた。
   ・行を分ける（#ovs-scan-row）
   ・数字の場所を先に取っておく。桁が増えても文字の幅が変わらない＝文字自体の折り返しも起きない
     tabular-nums は数字の字幅をそろえる指定（1と8で幅が違うと結局ずれる） */
#ovs-scan-cnt,
#ovs-scan-kind {
  display: inline-block;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#ovs-scan-cnt { min-width: 9ch; }
#ovs-scan-kind { min-width: 3ch; }
#ovs-scan-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
#ovs-scan-row .form-btn {
  width: auto;
  flex: 0 0 auto;      /* 右の注記が伸びてもボタンの幅と位置を変えない */
  margin-bottom: 0;
  /* 【v457】大きさは同じ画面の「＋ 色ルールを追加」に合わせる（11px/2px では小さくて押しづらい）。
     色は同じ画面の「全削除」に合わせた淡い赤。ベタ塗りの danger は「消える」に見えるので使わない */
  font-size: 12px;
  padding: 5px 12px;
  border-color: #fcc;
  background: #fff5f5;
  color: #c0392b;
}
#ovs-scan-note { color: #854F0B; }

/* 【v459】アイコンの縦位置ずれを打ち消す。
   Tabler の各文字は em の枠の中で少しずつ違う高さに描かれており、21px で横に並べると
   下端が最大 0.69px ずれる（iPhoneは3倍表示なので2ピクセル分。実機で気付く程度に見える）。

   下の数値は実測値。ブラウザで 40px の枠に 21px で描き、実際に色が乗っている範囲を測って
   「枠の中央からどれだけ下にずれているか」を求めたもの:
       folder-open +0.19 / pencil +0.88 / settings +0.63 / map +0.56
   同じ分だけ逆に動かして、どのアイコンも枠の中央に来るようにする。
   こうしておくと、どの組み合わせで並べても揃う（ツールバーと管理画面で顔ぶれが違うため）。

   ・単位は em（px 固定にしない）。ツールバーのアイコンは PC 12〜16px・スマホ 21px と
     場所で大きさが変わるので、px で書くと片方でしか合わない。
     値は「実測ズレ ÷ 測ったときの 21px」（例: 0.88 ÷ 21 = 0.042em）
   ・親が display:flex なので <i> はブロック扱いになり transform が効く（インラインだと効かない）
   ・スナップは文字ではなくSVGなので、ここでは動かさず絵そのものに織り込んである（index.html）
   ・アイコンを差し替えたら数値も測り直すこと。測り方は tests/README.txt に書いた */
/* 【v601】帯（#toolbar）の3つ＝フォルダ・鉛筆・歯車の補正は外した。帯のアイコンは絵（SVG）になり、
   箱の真ん中に描いてあるのでずらす必要がない。
   【v603】管理画面の帯の2つ（フォルダ・地図）の補正も外した。アイコンは全部 絵（SVG）になったので、
   アイコンごとの補正はもう1つも無い（足さないこと。ずれて見えたら対応表を作るスクリプトの側で直す） */

/* 【v462】v461 の「ラベルを 0.4px 上へ」は取り消した。
   0.4px は Meiryo の無い環境（Noto Sans CJK）で測った値で、実機（Windows/Meiryo）の
   ずれは約 2.15px。1px 未満の指定は描画位置が動かず、実機では効果ゼロだった。
   日本語の文字は環境ごとに描かれ方が違うので、測った値をそのまま使えない。
   アイコンとラベルの縦ずれ（PCのみ・約2px）は受け入れ、アイコンをSVG化するときに
   まとめて扱う（個別補正が要らなくなる）。 */

/* 一瞬だけ出す通知トースト（スナップ切替など）
   【v605】上の帯（赤=オフライン・青=同期中・緑=同期完了・橙=一部失敗）が出ている間は、その高さぶん下げる。
   画面は帯の高さぶん押し下げられるのに札だけ 64px のままで、アイコンの帯に重なっていた。
   --top-banner-h は offline.js の _setTopBannerOffset が入れる（帯が無いときは 0px＝今までと同じ位置） */
#gcho-toast {
  position: fixed;
  top: calc(64px + var(--top-banner-h, 0px));
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 36, 64, .92);
  color: #fff;
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 14px;
  white-space: nowrap;   /* 【v634】left:50% から左へ半分ずらす置き方だと札の幅が画面の半分までしか取れず、13文字の「属性を見たい地物をタップ」が iPhone で「プ」だけ2段目に折れた（#update-toast は元から nowrap） */
  z-index: 5000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
#gcho-toast.show { opacity: 1; }
/* 【v632】スナップ ON/OFF の札は作業中のバーの真上に出す（帯の下だと気づかない・バッキぃ）。bottom は showToast が
   バーの位置から入れる（バーは #map の中・札は画面基準なので CSS だけでは合わない） */
#gcho-toast.low { top: auto; }

/* 【v746】総点検 24：地物・写真の読み込み失敗のカード（map.js showLoadFailCard）。画面の真ん中・押すまで消えない。
   ふつうの吹き出し（#gcho-toast）とは別の箱なので、スナップの札などと同時に出ても消し合わない。
   覆い（#save-lock 4000）より上・吹き出し（5000）より下。カードの外の地図は今どおり触れる */
#load-fail-card {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: max-content; max-width: min(320px, 88vw);
  background: rgba(15, 36, 64, .94); color: #fff;
  padding: 14px 18px; border-radius: 16px; font-size: 14px; line-height: 1.6;
  z-index: 4500; display: none;
}
#load-fail-card.show { display: block; }
/* 【v908】117：ボタン2つを同じ幅にしてカードの横いっぱいを半分ずつ使う（v907 までは［読み込み直す］だけが伸びて［閉じる］が字の幅）。
   ［閉じる］だけのカード（'cache'・［読み込み直す］は display:none）は［閉じる］が横いっぱい（バッキぃ決定・案2） */
#load-fail-card .lf-btns { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-top: 12px; }
#load-fail-card button { font-size: 14px; border-radius: 8px; padding: 8px 12px; cursor: pointer; }
#load-fail-card .lf-reload { background: #fff; color: var(--navy); border: none; font-weight: 600; }
#load-fail-card .lf-close { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .6); }

/* 【v583】新しい版の札「更新有→タップで再読み込み」（update.js）。
   #gcho-toast と同じ場所・同じ形だが、赤・タップできる・タップするまで消えない。
   赤はオフライン帯（#offline-indicator の #c0392b）と同じ「気づかせる色」。帯（幅いっぱい）にすると
   オフライン帯と見間違えるのでピル形（バッキぃ決定 2026/09/17）。1行に収まる文字数にしてある。 */
#update-toast {
  position: fixed;
  top: calc(64px + var(--top-banner-h, 0px));   /* 【v605】#gcho-toast と同じ理由 */
  left: 50%;
  transform: translateX(-50%);
  background: #c0392b;
  color: #fff;
  padding: 9px 18px;
  border-radius: 20px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 5001;
  cursor: pointer;
  pointer-events: auto;
  display: none;
  -webkit-tap-highlight-color: transparent;
}
#update-toast.show { display: block; }

/* 【v482】エリア保存の報告が90秒途切れたときの出口。保存自体は止めず、押せる状態に戻すだけ。
   ボタンの色はマークアップ側のインライン指定なので、上書きに !important が要る。 */
.area-save-stalled {
  background: #fff5f5 !important;
  border-color: #d9a0a0 !important;
  color: #a83232 !important;
}


/* キーフィールド：ラベルと値を横並び1段に（label194: 高さ40px固定で揺れ防止。
   単一行flexではalign-contentが効かないためflex-wrap:wrapとセットで使用。
   label195: baseline揃えだと10px/15pxのフォント差で上下ずれが見える→centerに変更） */
.form-keyfield {
  display: flex; align-items: center; gap: 8px;
  height: 40px; box-sizing: border-box;
  flex-wrap: wrap; align-content: center;
}
.form-keyfield .form-keyfield-label { flex: 0 0 auto; white-space: nowrap; }
.form-keyfield .form-keyfield-value {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* =====================
   進捗タブ：統計カード（小型の四角・「進捗 数字」1行表示・2×2）
   パステル背景と文字色は既存 .stat-未調査 等の定義をそのまま活かす
   ===================== */
.stat-grid-sm { gap: 5px; margin-bottom: 8px; }
.stat-grid-sm .stat-card {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px; border: 0; border-radius: 6px;
  font-size: 12px; color: #555; white-space: nowrap;
}
.stat-grid-sm .stat-card b { font-size: 15px; }
button.stat-card { cursor: pointer; font-family: inherit; }
.stat-grid-sm .stat-card.on { outline: 2px solid currentColor; }
.stat-grid-sm .stat-未調査 { color: #d71d1d; }
.stat-grid-sm .stat-調査中 { color: #1a7a3f; }
.stat-grid-sm .stat-調査済 { color: #2563b0; }

/* 進捗バー：%を重ねて1行に */
.progress-bar-lg { position: relative; height: 16px; }
.progress-bar-lg .progress-fill { height: 100%; }
.progress-bar-lg .progress-pct {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; color: #fff; font-weight: 700; text-shadow: 0 0 3px rgba(0,0,0,.35); line-height: 1;
}

/* 【v635】レイヤタブ：ベースマップは折りたたみをやめて1行の丸ボタン（なし・OSM・航空写真・標準・淡色・PLATEAU）
   幅いっぱいに均す・選んでいるものだけ青（帯の押した色と同じ --blue）・PC も同じ。旧 .basemap-grid（2列ラジオ）は廃止 */
/* 【v665】レイヤータブの見出し＝帯（幅いっぱい・B 案・バッキぃ 10/1「区切りが分からん」）。
   ベースマップ／不動産情報ライブラリ／PMTiles／オフライン保存／レイヤ／オーバーレイの6つ。入れ物の padding ぶん左右にはみ出す（PC #sidebar-content 10px・スマホ #drawer-body 12px） */
.sec-band { background: #eef1f5; color: #555; padding: 5px 10px; margin: 14px -10px 8px; }
.sec-band.first { margin-top: -10px; }
#drawer-body .sec-band { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
#drawer-body .sec-band.first { margin-top: -11px; }
.sec-band.hdr { display: flex; justify-content: space-between; align-items: center; cursor: pointer; touch-action: manipulation; }
.sec-band .sec-right { font-size: 11px; color: #999; font-weight: 400; text-transform: none; letter-spacing: 0; }

.bm-chips { display: flex; gap: 4px; padding-bottom: 4px; }
.bm-chip {
  flex: 1 1 auto; min-width: 0; text-align: center; white-space: nowrap;
  border: 1px solid #d8dde3; border-radius: 16px; padding: 5px 4px;
  font-size: 12px; background: #fafbfd; color: #333; cursor: pointer; touch-action: manipulation;
  font-family: inherit; line-height: 1.3;
}
.bm-chip.on { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }

/* 検索結果：1段化（タイトルは省略記号で詰める） */
.feature-card-header .feature-card-title {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


/* =====================
   D案追加（label142）：撮影/ギャラリーボタン（チャッピー風）と検索結果チップ
===================== */
.photo-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 8px;
  background: #fff;
  border: 1.5px solid #CFE0F5;
  border-radius: 8px;
  color: var(--blue);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.photo-btn:hover { background: var(--blue-bg); border-color: var(--blue); }
.photo-btn:active { opacity: .8; }
.photo-btn .pic { width: 20px; height: 20px; flex: 0 0 auto; }

.status-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* =====================
   ☰ドロワー（label144: QField式メニュー）
===================== */
#map-menu-wrap {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
}
#drawer-wrap { position: fixed; inset: 0; z-index: 3000; }
#drawer-scrim {
  position: absolute; inset: 0; background: rgba(16,36,64,.32);
  opacity: 0;                                  /* 【label168】フェードイン */
  transition: opacity .22s ease;
}
#drawer-wrap.open #drawer-scrim { opacity: 1; }
#drawer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(360px, 88%);
  background: #fff;
  box-shadow: -6px 0 24px rgba(16,36,64,.25);
  display: flex;
  flex-direction: column;
  transform: translateX(102%);                 /* 【label168】右からスライドイン */
  transition: transform .22s ease;
}
#drawer-wrap.open #drawer { transform: translateX(0); }
#drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: var(--navy);
  color: #fff;
  font-size: 13px; font-weight: 700;
  padding-top: max(10px, env(safe-area-inset-top));
}
#drawer-close {
  background: transparent; border: none; color: #fff;
  font-size: 17px; cursor: pointer; padding: 2px 4px;
}
#drawer-tabs { display: flex; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.dr-tab {
  flex: 1; padding: 10px 4px; text-align: center;
  font-size: 12.5px; color: var(--sub);
  border-bottom: 2.5px solid transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.dr-tab .ti { font-size: 15px; }
.dr-tab.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 700; }
#drawer-body { flex: 1; overflow-y: auto; padding: 11px 12px; -webkit-overflow-scrolling: touch; }   /* 【v630】v629 の overscroll-behavior は取り消し */
.drawer-panel { display: none; }
.drawer-panel.active { display: block; }
#drawer-foot { border-top: 1px solid var(--line); padding: 4px 12px; padding-bottom: max(4px, env(safe-area-inset-bottom)); flex-shrink: 0; }
/* 【v508】PC側の足。#sidebar-content（スクロールする側）の外に置くので下に固定される。
   中身はスマホのとき #drawer-foot へ戻るため、空のときは枠線ごと消す */
#sidebar-foot { border-top: 1px solid var(--line); padding: 4px 12px; flex-shrink: 0; }
#sidebar-foot:empty { display: none; }
.drawer-row {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 2px; font-size: 13px; cursor: pointer;
}
.drawer-row .ti { font-size: 17px; color: var(--navy); width: 20px; text-align: center; }
.drawer-row:active { opacity: .7; }

/* ツールバーの自作SVGアイコン */
.tsvg { width: 17px; height: 17px; flex-shrink: 0; display: block; }
/* 【v460】ツールバーの文字アイコンの大きさ。SVG（.tsvg）は上で17pxと決まっているのに、
   文字アイコン側はスマホ用の枠の中にしか指定が無く、PCではボタンの文字サイズを
   そのまま引き継いでいた（鉛筆・歯車=12px／フォルダ=16px／スナップ=17px）。
   スナップだけ正しくて他が引きずられている状態だったので、指定を枠の外に出して
   .tsvg と同じ17pxにそろえる。スマホ用（21px）の指定はこの後ろにあるので上書きされる */
#toolbar .tool-btn .ti,
#toolbar .proj-btn-sm .ti { font-size: 17px; }

/* =====================================================================
   【v601】アイコンを文字（Tabler の webfont）ではなく絵（SVG）で描く — 1段目：地図画面の帯だけ／【v603】残り30種も全部
   ---------------------------------------------------------------------
   なぜ: 文字で描くと、字ごとに上下の余白が違って横に並べると揃わない。v459・v461 は1個ずつ測って
         0.0何em ずらして直したが、アイコンを足す・替えるたびに測り直しになる（きりがない）。
         絵なら 24×24 の箱のどこに描くかをこちらで決められる（スナップは元からこの方式・v458／v459）。
         ※ 公式の絵も箱の上下の真ん中とは限らない（実測：フォルダ 0.50 上・鉛筆 0.34 下／24 の箱で）。
           対応表を作るときに Chromium で40倍に描いて色の乗っている範囲を測り、真ん中に来るよう
           絵の中で translate してある（ずれ 0.05 未満はそのまま）。アイコンごとの CSS の補正は要らない
   しくみ: HTML・JS の <i class="ti ti-pencil"> は一字も変えない。
     (1) 対応表 … 「.ti-名前 → 絵」を --ico に入れる（下の【対応表】）。絵は Tabler Icons 3.46.0 の
         公式 SVG（MIT License・https://tabler.io/icons）。版を固定して CSS に埋め込むので、
         CDN の都合で形が変わらない・圏外でも初回から出る
     (2) 描き方 … 1em の箱を文字色（currentColor）で塗り、絵の形で切り抜く（mask）。
         （v603 までは対応表にあるアイコンだけ、フォントの字 ::before を止めてから描いていた）
         大きさは今までどおり font-size、
         色は今までどおり color で決まる。∨∧ のクラス付け替えもそのまま動く
   範囲: 【v601】は #toolbar の中の7種だけ → 【v603】アプリで使う37種ぜんぶ・場所を問わず。
         webfont で描かれるアイコンはもう無い（CDN の読み込みを外すのは次の版。share.html は凍結中で
         app.css を読まないので webfont のまま）
   【v603】文字の横に並ぶアイコン: 親が flex でない所（.form-btn のボタン・レイヤーパネルの見出しなど）では
         箱がそのままだと字の並ぶ線（ベースライン）の上に乗って、webfont のときより 0.1em ほど浮く。
         描き方に vertical-align: -0.125em を入れて字の高さの真ん中に合わせる（試作で −0.1／−0.125／
         −0.14／−0.15 を描き比べて決めた。親が flex の所ではこの指定は効かない＝帯は v601 のまま）。
         ボタン・行の大きさは PC 幅・iPhone 幅とも全か所で v602 と同じ（実測）
   【v603】副作用（良いほう）: ログイン画面の「処理中...」のぐるぐる（ti-loader）が回るようになる。
         字（inline）には回転が効かず、今まで止まった絵だった。箱（inline-block）になると効く
   【v604】webfont の読み込みをやめた（index.html の <link> と sw.js の控え）。アイコンは全部ここの絵で出る。
         それに合わせて描き方を「37個の名前を2回並べる」から「.ti ひとつ」にまとめ直した。
         webfont の CSS が来ないので字（::before）を止める指定も要らなくなった。見た目は v603 と同じ（実測で差ゼロ）
   足すとき: 【対応表】に1行足すだけ（行は gcho_icon_tools の icon_table.py が作る）。
         表に無い名前を HTML・JS に書くと、切り抜く形が無いのでただの四角になる。
         「使っている名前は全部 表にある」はテストが見ている
   ===================================================================== */
/* 【対応表】 */
.ti-folder-open { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0 0.5)'%3E%3Cpath d='M5 19l2.757 -7.351a1 1 0 0 1 .936 -.649h12.307a1 1 0 0 1 .986 1.164l-.996 5.211a2 2 0 0 1 -1.964 1.625h-14.026a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v2'/%3E%3C/g%3E%3C/svg%3E"); }
.ti-pencil { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0 -0.34)'%3E%3Cpath d='M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/g%3E%3C/svg%3E"); }
.ti-settings { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065'/%3E%3Cpath d='M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/%3E%3C/svg%3E"); }
.ti-point { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 12a4 4 0 1 0 8 0a4 4 0 1 0 -8 0'/%3E%3C/svg%3E"); }
.ti-line { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 18a2 2 0 1 0 4 0a2 2 0 1 0 -4 0'/%3E%3Cpath d='M16 6a2 2 0 1 0 4 0a2 2 0 1 0 -4 0'/%3E%3Cpath d='M7.5 16.5l9 -9'/%3E%3C/svg%3E"); }
.ti-polygon { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5a2 2 0 1 0 4 0a2 2 0 1 0 -4 0'/%3E%3Cpath d='M17 8a2 2 0 1 0 4 0a2 2 0 1 0 -4 0'/%3E%3Cpath d='M3 11a2 2 0 1 0 4 0a2 2 0 1 0 -4 0'/%3E%3Cpath d='M13 19a2 2 0 1 0 4 0a2 2 0 1 0 -4 0'/%3E%3Cpath d='M6.5 9.5l3.5 -3'/%3E%3Cpath d='M14 5.5l3 1.5'/%3E%3Cpath d='M18.5 10l-2.5 7'/%3E%3Cpath d='M13.5 17.5l-7 -5'/%3E%3C/svg%3E"); }
.ti-stack-2 { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l-8 4l8 4l8 -4l-8 -4'/%3E%3Cpath d='M4 12l8 4l8 -4'/%3E%3Cpath d='M4 16l8 4l8 -4'/%3E%3C/svg%3E"); }
/* 【v603】残り30種（作り方は同じ。真ん中に寄せたのは map-pin-down／alert-triangle／download／ruler-measure／map-2／cloud-upload の6つ） */
.ti-chevron-down { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E"); }
.ti-x { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6l-12 12'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E"); }
.ti-device-floppy { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2'/%3E%3Cpath d='M10 14a2 2 0 1 0 4 0a2 2 0 1 0 -4 0'/%3E%3Cpath d='M14 4l0 4l-6 0l0 -4'/%3E%3C/svg%3E"); }
.ti-chevron-up { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6 -6l6 6'/%3E%3C/svg%3E"); }
.ti-check { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E"); }
.ti-refresh { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4'/%3E%3Cpath d='M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4'/%3E%3C/svg%3E"); }
.ti-map-pin-down { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0 -0.5)'%3E%3Cpath d='M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/%3E%3Cpath d='M12.736 21.345a2 2 0 0 1 -2.149 -.445l-4.244 -4.243a8 8 0 1 1 13.59 -4.624'/%3E%3Cpath d='M19 16v6'/%3E%3Cpath d='M22 19l-3 3l-3 -3'/%3E%3C/g%3E%3C/svg%3E"); }
.ti-map { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l6 -3l6 3l6 -3v13l-6 3l-6 -3l-6 3v-13'/%3E%3Cpath d='M9 4v13'/%3E%3Cpath d='M15 7v13'/%3E%3C/svg%3E"); }
.ti-alert-triangle { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0 0.66)'%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0'/%3E%3Cpath d='M12 16h.01'/%3E%3C/g%3E%3C/svg%3E"); }
.ti-user { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/%3E%3Cpath d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E"); }
.ti-trash { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7l16 0'/%3E%3Cpath d='M10 11l0 6'/%3E%3Cpath d='M14 11l0 6'/%3E%3Cpath d='M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12'/%3E%3Cpath d='M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3'/%3E%3C/svg%3E"); }
.ti-plus { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5l0 14'/%3E%3Cpath d='M5 12l14 0'/%3E%3C/svg%3E"); }
.ti-external-link { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6'/%3E%3Cpath d='M11 13l9 -9'/%3E%3Cpath d='M15 4h5v5'/%3E%3C/svg%3E"); }
.ti-download { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0 -0.5)'%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2'/%3E%3Cpath d='M7 11l5 5l5 -5'/%3E%3Cpath d='M12 4l0 12'/%3E%3C/g%3E%3C/svg%3E"); }
.ti-chevron-left { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6l6 6'/%3E%3C/svg%3E"); }   /* 【v720】レイヤ設定の「戻る」 */
.ti-arrow-back-up { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14l-4 -4l4 -4'/%3E%3Cpath d='M5 10h11a4 4 0 1 1 0 8h-1'/%3E%3C/svg%3E"); }
.ti-wifi-off { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 18l.01 0'/%3E%3Cpath d='M9.172 15.172a4 4 0 0 1 5.656 0'/%3E%3Cpath d='M6.343 12.343a7.963 7.963 0 0 1 3.864 -2.14m4.163 .155a7.965 7.965 0 0 1 3.287 2'/%3E%3Cpath d='M3.515 9.515a12 12 0 0 1 3.544 -2.455m3.101 -.92a12 12 0 0 1 10.325 3.374'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E"); }
.ti-search { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0'/%3E%3Cpath d='M21 21l-6 -6'/%3E%3C/svg%3E"); }
.ti-ruler-measure { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0 0.5)'%3E%3Cpath d='M19.875 12c.621 0 1.125 .512 1.125 1.143v5.714c0 .631 -.504 1.143 -1.125 1.143h-15.875a1 1 0 0 1 -1 -1v-5.857c0 -.631 .504 -1.143 1.125 -1.143h15.75'/%3E%3Cpath d='M9 12v2'/%3E%3Cpath d='M6 12v3'/%3E%3Cpath d='M12 12v3'/%3E%3Cpath d='M18 12v3'/%3E%3Cpath d='M15 12v2'/%3E%3Cpath d='M3 3v4'/%3E%3Cpath d='M3 5h18'/%3E%3Cpath d='M21 3v4'/%3E%3C/g%3E%3C/svg%3E"); }
.ti-file-description { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z'/%3E%3Cpath d='M9 17h6'/%3E%3Cpath d='M9 13h6'/%3E%3C/svg%3E"); }   /* 【v618】属性照会 */
.ti-menu-2 { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l16 0'/%3E%3Cpath d='M4 12l16 0'/%3E%3Cpath d='M4 18l16 0'/%3E%3C/svg%3E"); }
.ti-map-2 { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0 -1)'%3E%3Cpath d='M12 18.5l-3 -1.5l-6 3v-13l6 -3l6 3l6 -3v7.5'/%3E%3Cpath d='M9 4v13'/%3E%3Cpath d='M15 7v5.5'/%3E%3Cpath d='M21.121 20.121a3 3 0 1 0 -4.242 0c.418 .419 1.125 1.045 2.121 1.879c1.051 -.89 1.759 -1.516 2.121 -1.879'/%3E%3Cpath d='M19 18v.01'/%3E%3C/g%3E%3C/svg%3E"); }
.ti-login { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2'/%3E%3Cpath d='M21 12h-13l3 -3'/%3E%3Cpath d='M11 15l-3 -3'/%3E%3C/svg%3E"); }
.ti-loader { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6l0 -3'/%3E%3Cpath d='M16.25 7.75l2.15 -2.15'/%3E%3Cpath d='M18 12l3 0'/%3E%3Cpath d='M16.25 16.25l2.15 2.15'/%3E%3Cpath d='M12 18l0 3'/%3E%3Cpath d='M7.75 16.25l-2.15 2.15'/%3E%3Cpath d='M6 12l-3 0'/%3E%3Cpath d='M7.75 7.75l-2.15 -2.15'/%3E%3C/svg%3E"); }
.ti-forms { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3'/%3E%3Cpath d='M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3'/%3E%3Cpath d='M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7'/%3E%3Cpath d='M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1'/%3E%3Cpath d='M17 12h.01'/%3E%3Cpath d='M13 12h.01'/%3E%3C/svg%3E"); }
.ti-calendar { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z'/%3E%3Cpath d='M16 3v4'/%3E%3Cpath d='M8 3v4'/%3E%3Cpath d='M4 11h16'/%3E%3Cpath d='M11 15h1'/%3E%3Cpath d='M12 15v3'/%3E%3C/svg%3E"); }   /* 【v811】97：進捗タブの日付の箱の印 */
.ti-filter-off { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h12v2.172a2 2 0 0 1 -.586 1.414l-3.914 3.914m-.5 3.5v4l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E"); }
.ti-file-download { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2'/%3E%3Cpath d='M12 17v-6'/%3E%3Cpath d='M9.5 14.5l2.5 2.5l2.5 -2.5'/%3E%3C/svg%3E"); }
.ti-current-location { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12a3 3 0 1 0 6 0a3 3 0 1 0 -6 0'/%3E%3Cpath d='M4 12a8 8 0 1 0 16 0a8 8 0 1 0 -16 0'/%3E%3Cpath d='M12 2l0 2'/%3E%3Cpath d='M12 20l0 2'/%3E%3Cpath d='M20 12l2 0'/%3E%3Cpath d='M2 12l2 0'/%3E%3C/svg%3E"); }
.ti-cloud-upload { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0 -0.97)'%3E%3Cpath d='M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1'/%3E%3Cpath d='M9 15l3 -3l3 3'/%3E%3Cpath d='M12 12l0 9'/%3E%3C/g%3E%3C/svg%3E"); }
.ti-chevron-right { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6l-6 6'/%3E%3C/svg%3E"); }
.ti-chart-bar { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -6'/%3E%3Cpath d='M15 9a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -10'/%3E%3Cpath d='M9 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -14'/%3E%3Cpath d='M4 20h14'/%3E%3C/svg%3E"); }
.ti-brand-firebase { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.53 17.05l6.15 -11.72h-.02c.38 -.74 1.28 -1.02 2.01 -.63c.26 .14 .48 .36 .62 .62l1.06 2.01'/%3E%3Cpath d='M15.47 6.45c.58 -.59 1.53 -.59 2.11 -.01c.22 .22 .36 .5 .41 .81l1.5 9.11c.1 .62 -.2 1.24 -.76 1.54l-6.07 2.9c-.46 .25 -1.01 .26 -1.46 0l-6.02 -2.92c-.55 -.31 -.85 -.92 -.75 -1.54l1.96 -12.04c.12 -.82 .89 -1.38 1.7 -1.25c.46 .07 .87 .36 1.09 .77l1.24 1.76'/%3E%3Cpath d='M4.57 17.18l10.93 -10.68'/%3E%3C/svg%3E"); }
/* 【描き方】【v604】.ti が付いていれば全部ここで描く（名前の並びは廃止） */
.ti {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: -0.125em;   /* 【v603】文字の横に並ぶとき（親が flex でない所）用。flex の中では効かない */
  background-color: currentColor;
  -webkit-mask: var(--ico) center / 100% 100% no-repeat;
  mask: var(--ico) center / 100% 100% no-repeat;
}

/* PJカードの管理ギア（admin限定） */
.pj-gear {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  background: var(--blue-bg);
  border: 1px solid #CFE0F5;
  border-radius: 8px;
  color: var(--navy);
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  margin-left: 4px;
}
.pj-gear:hover { border-color: var(--blue); }


/* =====================
   ナビのレスポンシブ振り分け（label145）
   PC: サイドバータブ / スマホ: ☰ドロワー
===================== */
@media (min-width: 769px) {
  #map-menu-wrap { display: none; }
}
@media (max-width: 768px) {
  #sidebar-tabs { display: none; }
}


/* ツールバー左端のG-choロゴ（label146） */
#toolbar-logo {
  height: 20px;
  width: auto;
  display: block;
  flex-shrink: 0;
  margin-right: 10px;  /* PJ名との間隔（label155） */
}


/* =====================
   ツールバー：枠なしアイコン＋サイズ統一（label147）
===================== */
/* PC・スマホ共通：ボタンの枠と地を撤去（activeとホバーで面が出る） */
#toolbar .tool-btn,
#toolbar .proj-btn-sm {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 8px;
}
#toolbar .tool-btn:hover,
#toolbar .proj-btn-sm:hover { background: rgba(255,255,255,.14); }
#toolbar .tool-btn.active { background: var(--blue); }

/* ロゴ拡大（上余白はPNG再生成で除去済み） */
#toolbar-logo { height: 24px; }

/* スマホ：全ボタンの縦横を38pxに統一・アイコンサイズも統一 */
@media (max-width: 768px) {
  #toolbar-logo { height: 21px; }
  #toolbar .tool-btn,
  #toolbar .proj-btn-sm {
    height: 38px;
    min-width: 38px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #toolbar .tool-btn .ti,
  #toolbar .proj-btn-sm .ti { font-size: 21px; }   /* 【v453】家SVG→ti-folder-open */
  #toolbar .tool-btn .tsvg { width: 21px; height: 21px; }
}


/* =====================
   ツールバー右揃え（label148）: ロゴ＋PJ名は左、アイコン群は右寄せ
   admin・manager=右端が「管理」、それ以外=data-manage-only（【v607】）で「管理」が消えて右端が「照会」
   （スナップは【v631】でバーへ移した）【v885】C4
===================== */
#toolbar .proj-btn-sm { margin-left: auto; }
/* 【v463】PCで「PJ一覧」の文字を出すので、余白・文字サイズを隣の .tool-btn（作図・管理）にそろえる。
   .proj-btn-sm の元指定は padding 5px 8px / font-size 16px で、文字を足すとこれだけ大きく見える */
#toolbar .proj-btn-sm { gap: 4px; padding: 5px 10px; font-size: 12px; }
#toolbar .tool-right { margin-left: 0; }
/* 【v812】93：閲覧モード（深緑の帯）はアイコンが左に寄っていた。右寄せは .proj-btn-sm（PJ一覧）の margin-left:auto が
   担っているが、閲覧モードでは PJ一覧が display:none で消える＝margin も消える。残るアイコン群（計測・照会）に auto を移す */
body.view-mode #toolbar .tool-group { margin-left: auto; }


/* =====================
   地図ボタンの視認性（label149）: ＋−と同じグレー縁
===================== */
.map-ctrl-btn {
  border: 2px solid rgba(0,0,0,0.2);
  box-shadow: none;
}


/* =====================
   写真の全画面ビューア（「前回写真」レイヤ用）
   別タブ遷移（原寸で開く）だとアプリから離れて分かりにくいため、
   アプリ内で画面いっぱいに写真を表示するオーバーレイに変更
===================== */
#gcho-photo-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 6000;
  background: rgba(10, 16, 28, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#gcho-photo-fullscreen img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  /* 【label190】ズーム/パン: transformで動かすため遷移なし・選択無効（S-cho label016移植） */
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}
/* 【label190】拡大中は画像がはみ出すので、はみ出し部分を隠すだけにする（overlayはfixedなので実質そのまま） */
#gcho-photo-fullscreen { overflow: hidden; }
#gcho-photo-fullscreen .gcho-pf-hint {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.55);
  font-size: 11px;
  pointer-events: none;
  white-space: nowrap;
}
@media (hover: none) {
  #gcho-photo-fullscreen .gcho-pf-hint { display: none; }  /* タッチ端末はピンチなので非表示 */
}
#gcho-photo-fullscreen .gcho-pf-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  color: #fff;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#gcho-photo-fullscreen .gcho-pf-close:active { background: rgba(255,255,255,.3); }
/* 【label188】下部キャプション（ファイル名・撮影日時）。写真タップの誤爆を避けるためpointer-events無効 */
#gcho-photo-fullscreen .gcho-pf-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(10px, env(safe-area-inset-bottom));
  text-align: center;
  color: rgba(255,255,255,.85);
  font-size: 12px;
  padding: 4px 48px;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
  word-break: break-all;
  pointer-events: none;
}


/* 【label199/044】出典モーダル */
/* 【M010a/b/c】右下の帰属欄（Leaflet の .leaflet-control-attribution と同じ見た目: 白半透明・リンク）。
   PC は常時表示（12px）。幅 640px 以下は「i」ボタンだけにして、押すと文字が出る（.open）。
   【M010c】「i」の絵と置き方は MapLibre の既定（.maplibregl-ctrl-attrib-button の SVG・24px 丸・角から10px）をそのまま写す。
   開いたときは MapLibre の compact-show と同じ白い角丸の帯の右端に「i」が乗る形。折り返して縮尺に届かない幅に抑える */
.maplibregl-ctrl-bottom-right .maplibregl-ctrl.attr-bar { margin: 0 10px 10px 0; }
.attr-bar {
  display: flex; align-items: center;
  font-size: 12px; line-height: 1.4; padding: 3px 6px;
  color: #333; background: rgba(255,255,255,0.85);
  white-space: nowrap;
}
.attr-bar a { color: #0078A8; text-decoration: none; }
/* 【v591】版数（帰属欄の末尾）。リンクではないので薄い灰色・選択させない */
.attr-bar .attr-ver { color: #666; user-select: none; -webkit-user-select: none; }
.attr-bar .attr-i { display: none; }
@media (max-width: 640px) {
  .attr-bar { position: relative; min-height: 24px; padding: 0; background: transparent; white-space: normal; }
  .attr-bar .attr-txt { display: none; }
  .attr-bar.open { background: #fff; border-radius: 12px; padding: 2px 26px 2px 8px; }
  /* 【v592】開いた帯が左下の縮尺に被らない幅にする。70vw は縮尺の取り分を見ていなかった（PLATEAU は v590 から・OSM は v591 の版数で被った）。
     182px ＝ 左の縮尺 138（余白 8〜10＋ものさし最大 120＝ScaleControl の maxWidth＋すき間 8）＋帯の右余白 10＋帯の内側 8＋26。
     収まらない分は折り返して上に伸びる（帯は右下に固定） */
  .attr-bar.open .attr-txt { display: block; font-size: 11px; max-width: min(calc(100vw - 182px), 320px); }
  .attr-bar .attr-i {
    display: block; position: absolute; top: 0; right: 0;
    width: 24px; height: 24px; box-sizing: border-box; padding: 0;
    border: 0; border-radius: 12px; outline: none; cursor: pointer;
    background-color: hsla(0,0%,100%,.5);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M4%2010a6%206%200%201%200%2012%200%206%206%200%201%200-12%200m5-3a1%201%200%201%200%202%200%201%201%200%201%200-2%200m0%203a1%201%200%201%201%202%200v3a1%201%200%201%201-2%200%22%2F%3E%3C%2Fsvg%3E");
  }
  .attr-bar.open .attr-i { background-color: rgba(0,0,0,.05); }
}
#attr-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.55);
  z-index:3000;align-items:center;justify-content:center;}
#attr-modal.open{display:flex;}
#attr-modal-inner{background:white;border-radius:12px;padding:16px 18px;
  width:300px;max-width:88vw;position:relative;
  box-shadow:0 8px 30px rgba(0,0,0,0.3);}
#attr-modal-title{font-size:14px;font-weight:700;margin-bottom:8px;}
/* 【v638】行の下線は外して、見出し（.attr-h・黒太字 12px・上に薄い線）で区切る（案Ⓐ） */
#attr-modal .attr-row{font-size:12px;line-height:1.8;padding:1px 0;}
#attr-modal .attr-h{font-size:12px;font-weight:700;color:#222;margin:12px 0 2px;padding-top:8px;border-top:1px solid #e5e8ec;}
#attr-modal .attr-h:first-of-type{margin-top:6px;padding-top:0;border-top:none;}
#attr-modal .attr-note{font-size:11px;color:#666;line-height:1.6;margin-top:4px;}   /* 【v666】API 利用規約 第7条のクレジット（灰色の小さい字） */
#attr-modal-close{position:absolute;top:10px;right:10px;width:26px;height:26px;
  border-radius:50%;border:none;background:#f0f2f5;color:#555;font-size:14px;
  cursor:pointer;line-height:1;}

/* 【label216】label213のタイル0.5px引き伸ばし対策は実機で白スジ悪化のためrevert */

/* 【v227】バージョン表記（ログイン画面。【v591】PJ 一覧の分は地図の帰属欄へ移した）
   右寄せ＝入力欄・ボタンの右端に縦ラインを揃える */
.app-version {
  margin-top: 16px;
  font-size: 11px;
  color: #a8b0bc;
  text-align: right;
  user-select: none;
}

/* =====================
   【v322】編集メニュー＋頂点編集
===================== */
/* フォーム下部の「編集∨/削除」2ボタン行（flex:1同幅）と上方向展開メニュー */
.edit-menu-wrap { position: relative; }
.edit-btn-row { display: flex; gap: 6px; }
.edit-btn-row .form-btn { flex: 1; }
.form-btn.edit-toggle {
  position: relative;
  border: 1px solid var(--blue);
  color: var(--blue);
  background: white;
  text-align: center;
}
/* ∨はabsolute右端12px＝ラベルはセンター揃えのまま左右対称（設計指定） */
.form-btn.edit-toggle .em-caret {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;  /* 【v323】Tablerアイコン化（ti-chevron-down/up）。セレクト矢印と太さを統一 */
  line-height: 1;
}
#edit-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  overflow: hidden;
  z-index: 20;
}
.edit-menu-item {
  display: block;
  width: 100%;
  padding: 11px 12px;
  border: none;
  border-bottom: 1px solid #eee;
  background: #fff;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.edit-menu-item:last-child { border-bottom: none; }
.edit-menu-item:active { background: #f0f6ff; }

/* 頂点編集の確認バー（#point-confirmと同じ土俵・3段: ステータス/セグメント+ヒント/確定・キャンセル）
   【M020】#delpart-confirm（パート削除のバー・2段）も同じ見た目 */
#vtx-confirm, #delpart-confirm {
  position: absolute;
  left: 50%;
  bottom: 56px;     /* 【v437】⑩-18 */
  transform: translateX(-50%);
  z-index: 1000;
  display: none;
  flex-direction: column;
  gap: 6px;
  background: rgba(255,255,255,0.95);
  padding: 8px 10px;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
  max-width: min(92vw, 340px);
}
.vtx-status {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vtx-seg { display: flex; border: 1px solid var(--blue); border-radius: 8px; overflow: hidden; }
.vtx-seg button {
  flex: 1;
  padding: 8px 0;
  min-width: 64px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  background: #fff;
  color: var(--blue);
  cursor: pointer;
}
.vtx-seg button + button { border-left: 1px solid var(--blue); }
.vtx-seg button.active { background: var(--blue); color: #fff; }
.vtx-hint { font-size: 11px; color: #666; text-align: center; }
.vtx-actions { display: flex; gap: 8px; }
.vtx-actions .draw-act-btn { flex: 1; justify-content: center; }
.draw-act-btn.vtx-save { background: var(--blue); color: #fff; }

/* 【M008】MapLibre 版のハンドルは maplibregl.Marker の要素。当たり28px は draw.js が style で与える */
.maplibregl-marker.vtx-h { cursor: pointer; }

/* 【M011】写真ポップアップの入れ物を leaflet.css の既定に寄せる（中身の HTML は Leaflet 版のまま）。
   Leaflet: 角丸12px・余白 13/24/13/20（右は×ぶん）・影 0 3px 14px .4・×は24×24 #757575。
   MapLibre 既定: 角丸3px・余白15px 10px・影ほぼ無し。
   maxWidth は Leaflet が「中身」、MapLibre が「枠ごと」なので photomarkers.js の _mlOpenPopup で左右余白ぶん +44 している */
.maplibregl-popup-content {
  border-radius: 12px;
  padding: 13px 24px 13px 20px;
  box-shadow: 0 3px 14px rgba(0,0,0,.4);
  font-size: 13px; line-height: 1.3; color: #333;
}
.maplibregl-popup-close-button {
  width: 24px; height: 24px; padding: 0;
  font: 16px/24px Tahoma, Verdana, sans-serif; color: #757575;
  border-radius: 0 12px 0 0;
}
.maplibregl-popup-close-button:hover { color: #585858; background: transparent; }

/* 【M012f】シートが縮むあいだだけ地図の上に浮かせる（map.js setSheetState）。#main-area は position:relative */
@media (max-width: 768px) {
  #sidebar.sheet-float { position: absolute; left: 0; right: 0; bottom: 0; }
  /* 【M012g】浮かせると #map が先に画面いっぱいになり、下端のボタン・縮尺・出典・操作バーが一気に画面下へ飛んで
     シートの下に隠れる。--sheet-lift（＝いま見えているシートの高さ）ぶん持ち上げておき、シートと同じカーブで下ろす。
     持ち上げ量の初期値（シートの元の高さ）は transition 無しで入れ、次のフレームで .sheet-lifting を付けてから最終値へ */
  #main-area.sheet-float-on #map-controls,
  #main-area.sheet-float-on .maplibregl-ctrl-bottom-left,
  #main-area.sheet-float-on .maplibregl-ctrl-bottom-right { transform: translateY(calc(-1 * var(--sheet-lift, 0px))); }
  #main-area.sheet-float-on #draw-actions,
  #main-area.sheet-float-on #point-confirm,
  #main-area.sheet-float-on #msr-actions,
  #main-area.sheet-float-on #vtx-confirm,
  #main-area.sheet-float-on #delpart-confirm { transform: translate(-50%, calc(-1 * var(--sheet-lift, 0px))); }
  #main-area.sheet-lifting #map-controls,
  #main-area.sheet-lifting .maplibregl-ctrl-bottom-left,
  #main-area.sheet-lifting .maplibregl-ctrl-bottom-right,
  #main-area.sheet-lifting #draw-actions,
  #main-area.sheet-lifting #point-confirm,
  #main-area.sheet-lifting #msr-actions,
  #main-area.sheet-lifting #vtx-confirm,
  #main-area.sheet-lifting #delpart-confirm { transition: transform .28s cubic-bezier(.2,.8,.25,1); }
}

/* 頂点ハンドル: 当たり判定28px（divIconのiconSize）・見た目は中央の□/○。
   leaflet-draw風の世界観統一（□白角=頂点/○半透明=中間点・マゼンタ縁） */
.vtx-h { background: transparent; }
.vtx-h::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  background: #fff;
  border: 2px solid #d500f9;
}
.vtx-h-vtx::before { width: 12px; height: 12px; }
/* 【v323】○中間点（.vtx-h-mid）は廃止。追加モードは線上タップ挿入方式に変更 */

/* =====================
   【v348】進捗タブ: 上部固定＋一覧だけスクロール
   ===================== */
/* 進捗タブを開いている間だけ外側のスクロールを止め、高さをコンテナにピッタリ合わせる。
   内(#progress-list)と外(#drawer-body / #sidebar-content)が同時に動く入れ子スクロールを
   避けるため。他タブ（レイヤー・検索）は従来どおり外側がスクロールする。 */
#drawer-body.progress-fit,
#sidebar-content.progress-fit {
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}
#drawer-body.progress-fit > .drawer-panel.active,
#sidebar-content.progress-fit > .tab-panel.active {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}
.progress-fit #progress-content {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}
/* 上段（絞り込み・統計カード・進捗バー）は固定、下段（担当者別・地物一覧）だけスクロール */
#progress-head { flex: 0 0 auto; }
#progress-list {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}

/* 地物一覧の行。v347までは1行ごとに style="" を直書きしていた（1行1374B / 5194行で6.9MB）。
   CSS化で1行228B・全体1.2MBになる。あわせて .feature-card.selected（青枠）が効くようになる
   ＝直書きはクラス指定より強く、選択強調が出ない原因のひとつだった。
   ※余白は直書きの値（padding 6px 8px / margin-bottom 3px）をそのまま移植＝行の高さは不変。
     .feature-card の 8px 10px / 6px は使わない（使うと行が高くなる）。
   ※旧 var(--color-background-secondary) / var(--color-border-tertiary) は :root に定義が無く
     無効指定だったため、実際には「背景なし・枠線なし」で表示されていた（実機で確認）。 */
.prog-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; margin-bottom: 3px;
  border-radius: 4px; cursor: pointer;
  background: #f8f9fa;
  border: 0.5px solid var(--line);
}
/* 選択中は 0.5px だと細くて見えないため 1px に上げる（その行だけ1px高くなる） */
.prog-row.selected { border-width: 1px; }
.prog-key { flex: 1; font-size: 12px; }
.prog-who { font-size: 10px; color: #888; }
/* 【v350】一覧生成までの繋ぎ（上段を先に出してから一覧を作る） */
.prog-loading { font-size: 11px; color: #888; padding: 12px 8px; }
/* 【v353】担当者別・件数見出しは上段（固定側）へ移設。下段は行だけ */
#progress-subhead { margin-top: 10px; }

/* 【v355】担当者別と地物一覧の間隔（v353で上段へ移設した際の入れ忘れ） */
#progress-subhead details { margin-bottom: 8px; }

/* 【v355】検索タブも上下分割。検索窓を固定し、結果だけスクロールさせる。
   進捗タブ(.progress-fit)と同じ作法。適用は検索タブを開いている間だけ。 */
#drawer-body.search-fit,
#sidebar-content.search-fit {
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}
#drawer-body.search-fit > .drawer-panel.active,
#sidebar-content.search-fit > .tab-panel.active {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}
.search-fit #search-content {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}
#search-head { flex: 0 0 auto; margin-bottom: 8px; }
.search-fit #search-results {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}

/* =====================
   【v509】管理画面「診断」タブ
   ===================== */
/* タブが6つになると iPhone(390px) では1行に入らない（実測: 5つでほぼ一杯）ので2段に折り返す。
   PC幅では従来どおり1行に収まる。余白を詰めて詰め込む案は却下（窮屈で押しにくくなる）。
   row-gap:0 は折り返した2段目が離れて見えるのを止める（.manager-tabs の gap:2px は横だけ効かせる）。 */
.manager-tabs { flex-wrap: wrap; row-gap: 0; }

/* 【v511】スマホ幅は「1行4つ」の格子にする。横いっぱいに広がり、段が変わっても
   縦線が揃う（6つ→4＋2、7つ→4＋3、8つ→4＋4）。折る場所を版ごとに直さなくて済む。
   v509 はブラウザ任せで 5＋1、v510 は区切りの要素を挟んで 4＋2 にしていたが、
   どちらも横が空いたままだった。区切りの要素（.manager-tabs-br）は v511 で撤去。
   PC幅は6つとも1行に収まるので従来どおり flex のまま触らない。 */
@media (max-width: 768px) {
  .manager-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 2px;
    row-gap: 0;
  }
  /* 横に伸びるので左右の余白は詰めてよい（文字は中央）。上下 8px は据え置き＝押しやすさは不変 */
  .manager-tab { padding: 8px 4px; text-align: center; }
  /* 【v719】レイヤ設定のタブは3つなので3列（4列の格子だと1列余って左に寄る・バッキぃ） */
  .ls-tabs { grid-template-columns: repeat(3, 1fr); }
  .ls-tabs .manager-tab { padding: 6px 4px; }
  .ls-tabs-2 { grid-template-columns: repeat(2, 1fr); }   /* 【v723】PMTiles ⚙ はタブ2つ */
}

/* 診断モードのラジオ行。説明（<i>）は斜体にせず小さい補助文字として2段目に置く。 */
.diag-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 10px; margin-bottom: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 7px;
  font-size: 13px; cursor: pointer;
}
.diag-row input { margin-top: 3px; flex: 0 0 auto; }
.diag-row i {
  font-style: normal; font-size: 11px; color: var(--sub);
  line-height: 1.6; display: block; margin-top: 2px;
}

/* =====================
   【v544】保存中の覆い
   ===================== */
/* 保存を押してから終わるまで画面全体を覆い、タップを一切通さない。
   目的は「待っているあいだの別操作」を経路ごと塞ぐこと（v543まで2つ穴があった）:
     ① 別の地物へ移って写真を撮る → その写真が保存の後片付けで消えていた
     ② 別の地物へ移る → 保存完了時に選択が前の地物へ戻され、そのあと解除されていた
   z-index はドロワー(3000)より上・トースト(5000)より下。
   トーストは pointer-events:none なので上に出ても操作は通らない。
   写真の全画面(6000)は保存中に新しく開けない（このタップも通らないため）。 */
#save-lock {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(0, 0, 0, .45);
  display: none; align-items: center; justify-content: center;
  /* iOS Safari で覆いの上を指でなぞるとページ側がスクロールするのを止める */
  touch-action: none; -webkit-tap-highlight-color: transparent;
}
#save-lock.on { display: flex; }
#save-lock-box {
  background: #fff; border-radius: 12px;
  padding: 18px 22px; min-width: 150px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
}
#save-lock-spin {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #d9dde3; border-top-color: #2563b0;
  animation: save-lock-spin 0.8s linear infinite;
}
@keyframes save-lock-spin { to { transform: rotate(360deg); } }
#save-lock-text { font-size: 13px; font-weight: 600; color: #222; }
/* 地物のキー値（地番・NEW番号）。無い地物では空にして行ごと消す */
#save-lock-key { font-size: 11px; color: var(--sub); }
#save-lock-key:empty { display: none; }
/* 【v747】62：写真付きの保存のときだけ出す一言。空なら行ごと消す */
#save-lock-note { font-size: 11px; color: var(--sub); text-align: center; line-height: 1.5; max-width: 200px; }
#save-lock-note:empty { display: none; }
/* 【v761】65：非常口（#save-lock-esc の「閉じる」）はやめた（form.js の _showSaveLock の説明） */

/* =====================================================================
   【v596】閲覧モード（…/?token=xxxx で開いたとき body に view-mode が付く）
   編集・管理の入口をまとめて隠す。関数の頭でも止めているので、ここは「見せない」だけの役目。
   data-admin-only は applyRoleVisibility が style で出すので !important で勝つ。
   token 無しのときはこのクラスが付かない＝何も変わらない。
   ===================================================================== */
body.view-mode #toolbar .proj-btn-sm,
body.view-mode #btn-draw,
body.view-mode #draw-menu,
body.view-mode [data-admin-only],
body.view-mode [data-manage-only],   /* 【v607】manager 用の印も閲覧モードでは隠す（新規作成・帯の管理・歯車） */
body.view-mode .drawer-row[onclick^="exportSurveyResults"],
body.view-mode #offline-acc-wrap { display: none !important; }

/* =====================================================================
   【v598→v599】閲覧モードは色で見分ける：上のバーだけ深緑。札・アイコン・文字は足さない（バッキぃ決定）。
   v598 は --navy の変数ごと差し替えたが、地図のボタン・キー値の文字まで緑になってやりすぎだった。
   v599 で「上のバー」に絞る：地図画面の帯・ハンバーガーを開いたときの頭の帯・メッセージ画面の帯の3つ。
   それ以外（地図のボタン4つ・キー値・シートの上の線・ログイン画面）は本体と同じ紺のまま。
   ===================================================================== */
body.view-mode #toolbar,
body.view-mode #drawer-head,
body.view-mode #project-header { background: #0F6E56; }

/* 【v599】メッセージ画面（無効な URL など）の帯の左上：地図画面の帯と同じ白ロゴ・同じ高さ（PC 24px／スマホ 21px） */
.view-msg-logo { height: 24px; width: auto; display: block; }
@media (max-width: 768px) {
  .view-msg-logo { height: 21px; }
}

/* 【v811】97：進捗タブの日付の箱。PC（Chromium）の標準のカレンダー印は透明にして箱全体に広げる＝どこを押しても開く。
   見える印は form.js が置く .ti-calendar（iPhone は標準の印が無いので、これで PC と同じ見た目にする） */
#filter-date::-webkit-calendar-picker-indicator { opacity: 0; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }