/* ================================================================
   style.css — TeleDrop スタイルシート（全 §セクション）
   ================================================================
   §01   CSS 変数（テーマカラー・サイドバー幅）              L.1–
   §02   リセット・ベーススタイル                            L.29–
   §03   マップコンテナ・カーソル                            L.51–
   §04   UIパネル・サイドバー                               L.63–
   §05   Miller Columns フレーム行（コンパクト・アコーディオン） L.437–
   §06   アコーディオン <details> / <summary>               L.804–
   §07   表示設定行・スライダー・セレクト                    L.844–
   §08   ベースマップカード・オーバーレイカード                L.893–
   §09   トグルスイッチ                                     L.1114–
   §10   パネル内ボタン基底（セカンダリ / プライマリ）         L.1275–
   §11   地図カタログ（テレイン一覧）                        L.1337–
   §12   Miller Columns ブラウザ UI                        L.1475–
   §13   タブバー                                          L.1599–
   §14   map_type チップフィルター                          L.1633–
   §15   JGW + 画像モーダル                                L.1762–
   §16   開発用カラーピッカー                               L.1893–
   §17   検索ボックス（常時表示）                            L.1943–
   §18   プライバシー注記                                   L.2262–
   §19   視点切り替えトグルボタン                            L.2294–
   §20   タイムラインパネル（GPX 再生）                      L.2331–
   §21   O-シミュレーターモード（モバイル）                   L.2467–
   §22   PC O-シミュレーターモード                          L.2614–
   §23   レスポンシブ / スマホ対応 / Attribution              L.2868–
   §24   地図画像 位置合わせモーダル                         L.2955–
   §25   印刷・エクスポートダイアログ                        L.3298–
   §26   モバイル専用要素                                   L.3417–
   §27   ボトムシート（モバイル）                            L.3423–
   §28   汎用ローディングインジケーター                       L.3828–
   §29   枠エクスポート ダイアログ                           L.3909–
   ================================================================ */

/* --sidebar-w をアニメータブルなCSS変数として宣言（Chrome85+ / Firefox128+） */
@property --sidebar-w {
  syntax: '<length>';
  inherits: true;
  initial-value: 296px;
}
/* サイドバー幅の変化を 0.15s で補間。これにより calc(var(--sidebar-w)+X) が使われる
   すべての要素（検索ボックス・縮尺・出典など）が同時にスムーズに追従する */
:root {
  transition: --sidebar-w 0.15s ease;

  /* ===== テーマカラー ===== */
  --primary:        #0369b0;  /* メインカラー */
  --primary-hover:  #025a9e;  /* ホバー・押下状態（一段暗め）*/
  --primary-dark:   #014a84;  /* さらに暗いアクセント */
  --primary-light:  #e6f1fa;  /* 極薄背景・ハイライト用 */
  --primary-alpha:  rgba(3, 105, 176, 0.12); /* 半透明オーバーレイ */

  /* 主要背景色（--primary）上のテキスト色（開発用トグルで白⇔黒切り替え） */
  --on-primary:       #ffffff;
  --on-primary-muted: rgba(255,255,255,0.65);

  /* ===== テキスト色（役割ベース） ===== */
  --text-main:     #333;  /* 主要テキスト・見出し */
  --text-sub:      #555;  /* 副次テキスト・説明 */
  --text-muted:    #888;  /* ヒント・ラベル・アイコン */
  --text-light:    #999;  /* 薄いテキスト */
  --text-disabled: #aaa;  /* 無効状態 */

  /* ===== 背景色 ===== */
  --bg-map:      #dbeff9;  /* アプリ最背面（地図の空・水色） */
  --bg-surface:  #ffffff;  /* 白背景（モーダル・カード・入力欄） */
  --bg-panel:    #f6f6f6;  /* パネル・アイコンバー・ヘッダー背景 */
  --bg-subtle:   #f8f9fa;  /* 薄いカード背景 */
  --bg-hover:    #f5f5f5;  /* リスト行ホバー */
  --bg-select:   #f0f0f0;  /* セレクト・非アクティブタブ背景 */
  --bg-hover-btn: #e8e8e8; /* 小ボタンホバー・フォーカス背景 */

  /* ===== 境界線 ===== */
  --border-subtle: #f0f0f0;  /* 極薄区切り線 */
  --border-light:  #e0e0e0;  /* 通常の区切り線 */
  --border-muted:  #d8d8d8;  /* モーダル・タブの枠線 */
  --border-main:   #d1d5db;  /* 標準の枠線 */
  --border-input:  #c8c8c8;  /* 入力欄・セレクトの枠線 */
  --border-weak:   #bbb;     /* 薄いアクセント枠線 */

  /* ===== テキスト（追加） ===== */
  --text-dark:    #222;  /* 見出し・強調（text-main より濃い） */
  --text-body:    #444;  /* 本文（text-main と text-sub の間） */
  --text-caption: #666;  /* キャプション・ラベル補足 */

  /* ===== セカンダリカラー ===== */
  --secondary:      #5a7a8a;  /* 副次カラー（地図モードインジケーター・水色系） */
  --text-ink:       #1a1a1a;  /* ほぼ黒テキスト（タイトル・強調見出し） */

  /* ===== 機能色 ===== */
  --color-danger:      #c0392b;  /* 削除・エラー */
  --color-warn:        #d06000;  /* 警告・カメラ追尾モード */
  --color-warn-hover:  #b85500;  /* 警告ホバー */
  --color-marker:      #ff3300;  /* GPS位置マーカー */
  --color-sim-active:  #b33a2a;  /* シミュレーター実行中 */
  --color-sim-hover:   #962d20;  /* シミュレーター実行中ホバー */

  /* ===== スライダー ===== */
  --slider-track: #d0d0d0;  /* スライダー未充填トラック色 */

  /* ===== シャドウ（box-shadow 用 rgba） ===== */
  --shadow-xs: rgba(0,0,0,0.1);   /* フォーカスリング・極薄シャドウ */
  --shadow-sm: rgba(0,0,0,0.12);  /* 小パネルシャドウ */
  --shadow-md: rgba(0,0,0,0.18);  /* 中シャドウ */
  --shadow-lg: rgba(0,0,0,0.2);   /* 大パネルシャドウ */

  /* ===== オーバーレイ（スクリム・モーダル背景） ===== */
  --overlay-light: rgba(0,0,0,0.45); /* 薄いスクリム */
  --overlay-base:  rgba(0,0,0,0.5);  /* 標準スクリム */
  --overlay-mid:   rgba(0,0,0,0.55); /* 中程度スクリム */
  --overlay-dark:  rgba(0,0,0,0.65); /* 濃いスクリム */

  /* ===== 白オーバーレイ ===== */
  --white-subtle:    rgba(255,255,255,0.15); /* 薄い白オーバーレイ（暗背景上のボタン） */
  --white-border:    rgba(255,255,255,0.25); /* 白枠線（モーダル上） */
  --white-hover:     rgba(255,255,255,0.3);  /* 白ホバー */
  --white-strong:    rgba(255,255,255,0.9);  /* 強い白テキスト */
  --bg-glass:        rgba(255,255,255,0.92); /* 半透明白パネル */
  --bg-glass-heavy:  rgba(255,255,255,0.95); /* ほぼ不透明白パネル */

  /* ===== トランジション ===== */
  --transition:      0.15s;  /* 標準（ボタン・スライダー） */
  --transition-fast: 0.12s;  /* 高速（リスト行ホバー） */

  /* ===== タイポグラフィ ===== */
  /* フォントファミリー */
  --font-family:      'Hiragino Sans', 'Noto Sans JP', system-ui, -apple-system, sans-serif;
  --font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  /* フォントサイズ（UIで使用する段階的なスケール） */
  --font-xs:   10px;  /* 最小ラベル・単位 */
  --font-sm:   11px;  /* 補足・小ラベル */
  --font-base: 12px;  /* UI基本サイズ */
  --font-md:   13px;  /* 強調テキスト・リスト */
  --font-lg:   14px;  /* 見出し・ボタン */
  /* フォントウェイト */
  --font-normal: 400;
  --font-semi:   600;
  --font-bold:   700;

  /* ===== プルダウン矢印（くの字 chevron） ===== */
  /* 矢印の形・色・サイズを変えたい場合はここだけ編集すれば全体に反映される */
  --chevron-color:      %23666;   /* 矢印色（#666）※ SVG内のためパーセントエンコード */
  --chevron-width:      1.5;      /* 線の太さ（SVG stroke-width） */
  --chevron-down:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpolyline points='1,1 5,5 9,1' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chevron-right:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpolyline points='1,1 5,5 1,9' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chevron-size-down:  8px 5px;  /* background-size（下向き） */
  --chevron-size-right: 5px 8px;  /* background-size（右向き） */
  --chevron-inset:      6px;      /* 右端からの距離（background-position） */
  --chevron-pad-r:      20px;     /* 矢印領域分の右パディング */

  /* ===== プルダウン外観（ドロップダウン共通） ===== */
  /* <select> 要素および .cascade-btn の見た目をここで一元管理。 */
  /* 個別クラスはサイズ・レイアウトのみ上書きし、外観はここだけ変更すれば全体に反映される。 */
  --dropdown-bg:     var(--bg-select);   /* 背景色 */
  --dropdown-border: #b0b8b0;            /* 枠線色 */
  --dropdown-radius: 4px;                /* 角丸 */
  --dropdown-color:  var(--text-main);   /* テキスト色 */
}

/*
  ========================================================
  全画面表示のスタイル設定
  ========================================================
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

button, input, textarea {
  font-family: inherit;
  font-size: inherit;
}
/* ================================================================
   全 <select> 要素の基本外観 — ここだけ変更すれば全体に反映される
   個別クラスは background-color / padding / font-size のみ上書きすること。
   background shorthand で上書きすると chevron が消えるので使わないこと。
   ================================================================ */
select {
  font-family: var(--font-family);
  appearance: none;
  background-color: var(--dropdown-bg);
  background-image: var(--chevron-down);
  background-repeat: no-repeat;
  background-position: right var(--chevron-inset) center;
  background-size: var(--chevron-size-down);
  color: var(--dropdown-color);
  border: 1px solid var(--dropdown-border);
  border-radius: var(--dropdown-radius);
  cursor: pointer;
  outline: none;
}
select:disabled { opacity: 0.5; cursor: default; }

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: var(--font-family);
  color: var(--text-main);
  background-color: var(--bg-map);
}

#map {
  width: 100%;
  height: 100%;
  background-color: var(--bg-map);
}
/* MapLibre のデフォルト grab カーソルを矢印に上書き */
#map .maplibregl-canvas-container,
#map .maplibregl-canvas-container.maplibregl-interactive {
  cursor: default !important;
}


/* ---- UIパネル（地理院地図/Q地図スタイル） ---- */
/* ===== サイドバー ===== */
#sidebar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  display: flex;
  z-index: 10;
  pointer-events: none; /* 子要素にのみイベントを通す */
}
#sidebar > * { pointer-events: auto; }

/* アイコンバー（常時表示） */
#sidebar-icon-bar {
  width: 48px;
  height: 100%;
  background: var(--bg-panel);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  gap: 2px;
  flex-shrink: 0;
}

/* ロゴ（SVGアイコン）*/
#sidebar-logo {
  width: 48px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-panel);
  flex-shrink: 0;
  margin-bottom: 4px;
  user-select: none;
}
#sidebar-logo img {
  width: 30px;
  height: 30px;
  display: block;
}

/* ナビゲーションボタン */
.sidebar-nav-btn {
  width: 44px;
  height: 52px;
  border: none;
  background: transparent;
  color: #000;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: background var(--transition), color var(--transition);
  position: relative;
  flex-shrink: 0;
  padding: 0;
}
.nav-icon {
  font-size: 18px;
  line-height: 1;
  display: block;
}
.nav-label {
  font-size: 9px;
  font-weight: var(--font-semi);
  line-height: 1;
  letter-spacing: 0.03em;
  display: block;
}
.sidebar-nav-btn:hover {
  background: rgba(0,0,0,0.07);
  color: #000;
}
/* アクティブ時: メインカラー背景 + 白テキスト */
.sidebar-nav-btn.active {
  background: var(--primary);
  color: var(--on-primary) !important;
}
.sidebar-nav-btn.active .nav-label {
  color: var(--on-primary) !important;
}
/* 左ボーダーは不要（背景色で強調するため削除） */
.sidebar-nav-btn.active::before {
  display: none;
}

/* パネルコンテンツ */
#sidebar-panel {
  width: 248px;
  height: 100%;
  background: var(--bg-surface);
  border-right: 1px solid var(--border-muted);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#sidebar-panel.sb-hidden {
  display: none;
}

/* セクション（各パネル） */
.sidebar-section {
  display: none;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.sidebar-section.active {
  display: flex;
}

/* セクションヘッダー */
.sidebar-section-header {
  background: var(--bg-panel);
  color: var(--primary);
  padding: 0 12px;
  height: 44px;
  font-size: var(--font-md);
  font-weight: var(--font-bold);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

/* パネル閉じるボタン */
.sidebar-close-btn {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-sub);
  font-size: var(--font-lg);
  font-weight: var(--font-bold);
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.sidebar-close-btn:hover {
  background: var(--shadow-sm);
  color: #111;
}

/* ================================================================
   スクロールバー共通スタイル（ここで一括管理）
   追加する場合はこのセレクターリストに追記する
   ================================================================ */
.sidebar-scroll,
.terrain-upper,
.terrain-lower,
.miller-scroll-wrap {
  scrollbar-width: thin;
  scrollbar-color: var(--border-input) transparent;
}

/* スクロール可能エリア */
.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
}

/* ========================================================
   テレインパネル 上下分割レイアウト
   ======================================================== */
#panel-terrain {
  overflow: hidden; /* 子要素のスクロールを独立させる */
}
/* 上部: カタログ（最大45%・独立スクロール） */
.terrain-upper {
  flex: 0 1 45%;
  min-height: 80px;
  overflow-y: auto;
  border-bottom: 2px solid var(--border-light);
}
/* 下部: ツリー + GPX（残余スペースを占有） */
.terrain-lower {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding-top: 12px;
}

/* ========================================================
   フレームツリー
   ======================================================== */
/* カード: フレームツリー＋その他の地図 / GPX軌跡 */
.terrain-detail-card {
  background: var(--bg-subtle);
  border-radius: 6px;
  margin: 0 8px 16px;
  overflow: hidden;
  border: 1px solid #e4e8ec;
}

/* 選択テレイン見出し行 */
.terrain-selected-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 5px;
  border-left: 4px solid var(--primary);
  border-bottom: 1px solid #e0e0e0;
  background: var(--bg-surface);
  font-size: var(--font-base);
  font-weight: var(--font-bold);
  color: var(--text-main);
}
#terrain-selected-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.tree-export-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border-weak);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: var(--font-xs);
  cursor: pointer;
  color: var(--text-caption);
  transition: background var(--transition-fast);
}
.tree-export-btn:hover { background: var(--bg-hover-btn); }

/* 手動配置枠セクション見出し */
.tree-section-hd {
  padding: 6px 12px 4px;
  font-size: var(--font-xs);
  font-weight: var(--font-semi);
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #e4e8ec;
  margin-bottom: 2px;
}

/* 空・案内テキスト */
.tree-empty-hint {
  padding: 14px 12px;
  font-size: var(--font-sm);
  color: var(--text-disabled);
  text-align: center;
  line-height: 1.7;
}

/* 親ノード（枠） */
.frame-tree-node {
  border-bottom: 1px solid var(--border-subtle);
}
.tree-node-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  cursor: default;
  user-select: none;
  transition: background var(--transition-fast);
}
.tree-node-header:hover { background: var(--bg-hover); }
.tree-node-header.drag-over {
  background: var(--primary-light);
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
}
/* 枠の色アイコン（四角） */
.tree-node-icon-sq {
  width: 12px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
  border: 2px solid transparent;
}
.tree-node-label {
  flex: 1;
  font-size: var(--font-base);
  font-weight: var(--font-semi);
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.tree-node-fly-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border-input);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: var(--font-sm);
  cursor: pointer;
  color: var(--text-caption);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.tree-node-fly-btn:hover { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* 子ノード（画像） */
.tree-node-children { padding-left: 0; }
.tree-child-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 26px;
  font-size: var(--font-sm);
  cursor: pointer;
  color: var(--text-sub);
  transition: background 0.1s;
}
.tree-child-item:hover { background: var(--primary-light); color: var(--primary-dark); }
.tree-child-item.active { background: var(--primary-light); font-weight: 600; color: var(--primary-dark); }
.tree-child-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* レイヤーコントロール行（トグル + 不透明度スライダー） */
.tree-child-ctrl-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 6px 26px;
}
.tree-opacity-val {
  font-size: var(--font-xs);
  color: var(--text-muted);
  min-width: 28px;
  text-align: right;
  flex-shrink: 0;
}

/* ===== イベントグループ（アコーディオン） ===== */
.event-group {
  border-bottom: 1px solid #eee;
}
.event-group-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  cursor: pointer;
  user-select: none;
  background: #f7f9fc;
  transition: background var(--transition-fast);
}
.event-group-hd:hover { background: #eef2f7; }
.event-group-toggle {
  font-size: 9px;
  color: var(--text-muted);
  flex-shrink: 0;
  width: 10px;
}
.event-group-name {
  flex: 1;
  font-size: var(--font-base);
  font-weight: var(--font-bold);
  color: var(--text-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.event-group-date {
  font-size: var(--font-xs);
  color: var(--text-muted);
  flex-shrink: 0;
  background: #e8edf3;
  padding: 1px 6px;
  border-radius: 10px;
}
.event-group-body {
  padding: 2px 0 4px;
}

/* ===== コンパクトフレーム行 ===== */
.frame-row-wrap {
  border-bottom: 1px solid #f4f4f4;
}
.frame-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px 5px 16px;
  transition: background 0.1s;
}
.frame-row:hover { background: var(--bg-hover); }
.frame-row.drag-over {
  background: var(--primary-light);
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
}
.frame-row-vis {
  flex-shrink: 0;
}
.frame-row-label {
  flex: 1;
  font-size: var(--font-sm);
  color: var(--text-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.frame-row-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border-muted);
  border-radius: 3px;
  padding: 1px 4px;
  font-size: var(--font-sm);
  cursor: pointer;
  color: var(--text-caption);
  line-height: 1.3;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.frame-row-btn:hover { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.frame-row-load-btn { color: var(--text-muted); }
.frame-row-load-btn.has-image { color: var(--primary); border-color: var(--primary); }

/* 画像サブリスト（2枚以上の時） */
.frame-row-imglist {
  padding: 2px 8px 4px 38px;
}
.frame-row-imgitem {
  font-size: var(--font-xs);
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
  color: var(--text-caption);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 0.1s;
}
.frame-row-imgitem:hover { background: var(--primary-light); color: var(--primary-dark); }
.frame-row-imgitem.active { background: var(--primary-light); font-weight: 600; color: var(--primary-dark); }

/* その他の地図・GPX 共通アップロードボタン — .panel-btn-outline と同系 */
.tree-upload-btn {
  display: block;
  width: calc(100% - 20px);
  margin: 6px 10px 6px;
  padding: 6px 12px;
  background: var(--bg-surface);
  color: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: 4px;
  font-size: var(--font-base);
  font-weight: var(--font-semi);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  text-align: center;
}
.tree-upload-btn:hover { background: var(--primary); color: var(--on-primary); }

/* ドロップエリア（その他の地図の中身） */
.tree-drop-area { padding: 4px 0 2px; }
.tree-drop-area.drag-over {
  background: var(--primary-light);
  outline: 2px dashed var(--primary);
  outline-offset: -3px;
}
.sidebar-scroll::-webkit-scrollbar { width: 4px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: var(--border-input); border-radius: 2px; }
.sidebar-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-light); }

/* 設定グループ区切り */
.settings-group {
  border-bottom: 1px solid #e0e0e0;
}
.settings-group-title {
  font-size: 9px;
  font-weight: var(--font-bold);
  color: var(--text-disabled);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 12px 4px;
  user-select: none;
}

/* ================================================================
   カスケードドロップダウン — 汎用定義
   2段階プルダウンを使う場合は .cascade-* クラスを使用する。
   既存の .ppi-cascade-* は後方互換エイリアスとして並列定義。
   新しいカスケードを追加する場合は .cascade-* だけで実装できる。
   ================================================================ */

/* ---- ラッパー ---- */
.cascade-wrap,
.ppi-cascade-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

/* ---- トリガーボタン（外観は「共通パネルプルダウン」セクションの .cascade-btn で定義済み） ---- */
.cascade-btn,
.ppi-cascade-btn {
  display: block;
  width: 100%;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cascade-btn:hover,
.ppi-cascade-btn:hover {
  border-color: #888;
  background-color: var(--bg-hover-btn);
}
.cascade-arrow,
.ppi-cascade-arrow { display: none; }

/* ---- 1段目メニュー本体 ----
   body 直下に配置し position:fixed で描画 → overflow:hidden 祖先を回避 */
.cascade-menu,
.ppi-cascade-menu {
  position: fixed;
  z-index: 10100;
  background: var(--bg-panel);
  border: 1px solid var(--border-muted);
  border-radius: 4px;
  box-shadow: 2px 4px 12px rgba(0,0,0,0.15);
  min-width: 140px;
  display: none;
  padding: 2px 0;
}
.cascade-menu.open,
.ppi-cascade-menu.open { display: block; }

/* ---- 1段目カテゴリ行（右矢印つき） ---- */
.cascade-cat,
.ppi-cascade-cat {
  padding: 5px var(--chevron-pad-r) 5px 10px;
  font-size: var(--font-sm);
  cursor: default;
  white-space: nowrap;
  user-select: none;
  background: var(--chevron-right) no-repeat right var(--chevron-inset) center / var(--chevron-size-right);
}
.cascade-cat + .cascade-cat,
.ppi-cascade-cat + .ppi-cascade-cat { border-top: 1px solid var(--border-subtle); }
.cascade-cat:hover,
.ppi-cascade-cat:hover { background-color: var(--bg-hover-btn); }
.cascade-cat-arrow,
.ppi-cascade-cat-arrow { display: none; }

/* ---- 2段目サブメニュー ---- */
.cascade-sub,
.ppi-cascade-sub {
  position: fixed;
  z-index: 10101;
  background: var(--bg-panel);
  border: 1px solid var(--border-muted);
  border-radius: 4px;
  box-shadow: 2px 4px 12px rgba(0,0,0,0.15);
  min-width: 220px;
  max-height: 60vh;
  overflow-y: auto;
  display: none;
  padding: 2px 0;
}

/* ---- 2段目アイテム行 ---- */
.cascade-item,
.ppi-cascade-item {
  padding: 5px 10px;
  font-size: var(--font-sm);
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.cascade-item:hover,
.ppi-cascade-item:hover { background: var(--bg-hover-btn); }
.cascade-item.selected,
.ppi-cascade-item.selected {
  font-weight: var(--font-bold);
  background: var(--primary-light);
  color: var(--primary-dark);
}

/* ---- アイテム右側の補足テキスト（例: PPI値） ---- */
.cascade-item-sub,
.ppi-cascade-item-ppi {
  color: var(--text-muted);
  font-size: 10px;
  flex-shrink: 0;
}

/* ---- 実寸定規（PPI確認用） ---- */
.ppi-ruler-row {
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 12px 10px;
  gap: 4px;
}
#ppi-ruler {
  display: block;
  color: var(--text-ink);
  overflow: hidden;
}
.ppi-ruler-hint {
  font-size: 9px;
  color: var(--text-disabled);
  user-select: none;
}

/* パネル内ブロック */
.panel-block {
  padding: 8px 10px;
  border-bottom: 1px solid #e8e8e8;
}
.panel-block-title {
  font-size: var(--font-xs);
  font-weight: var(--font-bold);
  color: var(--text-muted);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* シミュレーター：読図地図リスト */
.sim-map-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border-radius: 5px;
  cursor: pointer;
  transition: background var(--transition-fast);
  margin-bottom: 2px;
}
.sim-map-item:hover { background: var(--primary-light); }
.sim-map-item.active { background: #e6f2ea; }
.sim-map-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-input);
  flex-shrink: 0;
  border: 1.5px solid var(--border-weak);
  transition: background 0.12s, border-color 0.12s;
}
.sim-map-item.active .sim-map-dot {
  background: var(--primary);
  border-color: var(--primary-hover);
}
.sim-map-name {
  flex: 1;
  font-size: var(--font-base);
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.sim-map-item.active .sim-map-name { font-weight: 600; color: var(--primary-dark); }
.sim-map-fly-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border-input);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: var(--font-sm);
  cursor: pointer;
  color: var(--text-caption);
  line-height: 1.4;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.sim-map-fly-btn:hover { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.sim-readmap-empty {
  font-size: var(--font-sm);
  color: var(--text-disabled);
  padding: 8px 4px;
  text-align: center;
}

/* 読図地図タブ: セクション見出し */
.readmap-section-hd {
  font-size: var(--font-xs);
  font-weight: var(--font-bold);
  color: var(--text-light);
  letter-spacing: 0.06em;
  padding: 10px 10px 4px;
  text-transform: uppercase;
}

/* 読図地図タブ: スマートスロット */
#readmap-smart-slots {
  padding: 0 10px 6px;
}
.readmap-slot-hint {
  font-size: var(--font-sm);
  color: var(--text-disabled);
  padding: 8px 4px;
  text-align: center;
  line-height: 1.6;
}
.readmap-slot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  margin-bottom: 6px;
  border: 1.5px dashed #ccc;
  border-radius: 6px;
  background: var(--bg-subtle);
}
.readmap-slot.readmap-slot-filled {
  border-style: solid;
  border-color: var(--primary);
  background: var(--primary-light, #f4f8e4);
}
.readmap-slot-label {
  font-size: var(--font-sm);
  font-weight: var(--font-semi);
  color: var(--text-main);
}
.readmap-slot-img {
  font-size: var(--font-xs);
  color: var(--text-caption);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.readmap-slot-btn {
  display: block;
  width: 100%;
  padding: 5px 8px;
  background: var(--bg-surface);
  color: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: 4px;
  font-size: var(--font-sm);
  font-weight: var(--font-semi);
  cursor: pointer;
  text-align: center;
  transition: background var(--transition), color var(--transition);
}
.readmap-slot-btn:hover { background: var(--primary); color: var(--on-primary, #fff); }

/* 読図地図タブ: 案内テキスト */
.readmap-info-note {
  margin: 10px 10px 6px;
  padding: 8px 10px;
  background: #f4f8e4;
  border-left: 3px solid var(--primary);
  border-radius: 4px;
  font-size: var(--font-sm);
  color: var(--text-sub);
  line-height: 1.5;
}
.readmap-info-note kbd {
  display: inline-block;
  padding: 1px 5px;
  background: var(--bg-hover-btn);
  border: 1px solid var(--border-weak);
  border-radius: 3px;
  font-size: var(--font-xs);
  font-family: monospace;
}

/* 開始ボタンブロック（sidebar-panel最下部に常時固定） */
.sim-start-block {
  padding: 10px;
  border-top: 1px solid #e0e0e0;
  flex-shrink: 0;
  background: var(--bg-surface);
}

/* 読図タブ: 地図追加ボタン — .panel-btn-outline を使用 */

/* 削除済みボタンのスタブ（参照残らないように） */
#sim-open-catalog-btn {
  display: block;
  width: 100%;
  padding: 5px 10px;
  background: var(--bg-hover);
  color: var(--text-sub);
  border: 1px solid var(--border-input);
  border-radius: 4px;
  font-size: var(--font-base);
  cursor: pointer;
  text-align: center;
  transition: background var(--transition-fast);
}
#sim-open-catalog-btn:hover { background: var(--bg-hover-btn); }

/* セクションヘッダ（後方互換のため残存） */
.sec-header {
  background: var(--bg-select);
  border-top: 1px solid var(--border-muted);
  border-bottom: 1px solid var(--border-muted);
  padding: 4px 10px;
  font-size: var(--font-sm);
  font-weight: var(--font-bold);
  color: var(--text-sub);
  letter-spacing: 0.02em;
}

/* ---- アコーディオンセクション (<details> / <summary>) ---- */
.panel-section {
  margin: 0;
}

/* summary がセクションヘッダ代わり */
.panel-section>summary {
  background: none;
  border-top: 1px solid #e4e8ec;
  border-left: 4px solid var(--primary);
  padding: 7px 10px 7px 10px;
  font-size: var(--font-base);
  font-weight: var(--font-bold);
  color: var(--text-main);
  letter-spacing: 0.02em;
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

/* Chrome / Safari でのデフォルトマーカーを消す */
.panel-section>summary::-webkit-details-marker {
  display: none;
}

/* 開閉インジケーター: 開 = ▲、閉 = ▼ */
.panel-section>summary::after {
  content: '▲';
  font-size: var(--font-sm);
  color: var(--text-muted);
  flex-shrink: 0;
}

.panel-section:not([open])>summary::after {
  content: '▼';
}

/* ---- 表示設定セクション内の1行レイアウト ---- */
.setting-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.setting-row:last-child { border-bottom: none; }

/* パネル内の通常チェックボックス・ラジオボタンを同一サイズに統一 */
/* トグルスイッチ内の input はこのルールから除外する（詳細度の競合防止） */
#sidebar input[type="checkbox"]:not(.toggle-switch input),
#sidebar input[type="radio"] {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--primary);
}

.setting-label {
  font-size: var(--font-sm);
  color: var(--text-main);
  white-space: nowrap;
  flex-shrink: 0;
}

.setting-sublabel {
  font-size: var(--font-sm);
  color: var(--text-sub);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}

/* ================================================================
   共通パネルプルダウン
   <select> の外観（chevron・border・radius）は上の「全 <select> 要素の基本外観」で一括定義済み。
   ここでは各コンテキスト固有のサイズ・レイアウトのみ定義する。
   .ppi-cascade-btn / .cascade-btn は <button> 要素なので外観をここで定義。
   矢印の形・色は :root の --chevron-* 変数で管理
   ================================================================ */

/* ---- .cascade-btn / .ppi-cascade-btn — <button> なので外観を個別定義 ---- */
.cascade-btn,
.ppi-cascade-btn {
  appearance: none;
  background-color: var(--dropdown-bg);
  background-image: var(--chevron-down);
  background-repeat: no-repeat;
  background-position: right var(--chevron-inset) center;
  background-size: var(--chevron-size-down);
  color: var(--dropdown-color);
  border: 1px solid var(--dropdown-border);
  border-radius: var(--dropdown-radius);
  cursor: pointer;
  outline: none;
  padding: 2px var(--chevron-pad-r) 2px 6px;
  font-size: var(--font-sm);
  font-family: var(--font-family);
}
.cascade-btn:disabled,
.ppi-cascade-btn:disabled { opacity: 0.5; cursor: default; }

/* ---- .setting-select — サイズ・レイアウトのみ ---- */
.setting-select {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 2px var(--chevron-pad-r) 2px 4px;
  font-size: var(--font-sm);
}

/* ---- ベースマップカードグリッド ---- */
.setting-row.bm-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 6px 8px;
}
.bm-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  width: 100%;
}
/* オーバーレイカードはベースマップと同じ4列 */
#overlay-cards.bm-cards {
  grid-template-columns: repeat(4, 1fr);
}
/* 正方形カード: 検索ボックスと同じ box-shadow スタイル */
.bm-card {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--shadow-xs);
  transition: box-shadow 0.15s;
}
.bm-card:hover  { box-shadow: 0 0 0 2px var(--primary-light, #93c5fd); }
.bm-card.active { box-shadow: 0 0 0 2px var(--primary, #2563eb); }
/* サムネイル: カード全面を覆う */
.bm-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ラベル: 画像下部に半透明の帯をオーバーレイ */
.bm-card-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 9px;
  padding: 2px 3px;
  text-align: center;
  color: var(--on-primary);
  background: var(--overlay-base);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bm-card.active .bm-card-label {
  background: color-mix(in srgb, var(--primary) 75%, transparent);
}
.bm-thumb-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 2px;
}
.bm-thumb-btn {
  border: 1px solid var(--border-input);
  background: var(--bg-subtle);
  color: var(--text-main);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: var(--font-xs);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.bm-thumb-btn:hover { background: var(--bg-select); border-color: var(--border-weak); }
.bm-thumb-btn:disabled { opacity: 0.6; cursor: default; }
.bm-thumb-note {
  font-size: 9px;
  color: var(--text-muted);
  line-height: 1.2;
}

/* ================================================================
   共通スライダー (.ui-slider)
   トラック・つまみのスタイルをここで一括管理。
   色は var(--primary) で統一。
   変更は .ui-slider ブロックのみ編集すれば全スライダーに反映される。
   ================================================================ */
.ui-slider {
  flex: 1;
  min-width: 0;
  height: 3px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--primary) var(--pct, 0%),
    var(--slider-track) var(--pct, 0%)
  );
  outline: none;
}

/* つまみ（WebKit / Blink） */
.ui-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1.5px solid #888;
  cursor: pointer;
}

.ui-slider::-webkit-slider-thumb:hover {
  border-color: var(--primary);
}

/* つまみ（Firefox） */
.ui-slider::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--primary) var(--pct, 0%),
    var(--slider-track) var(--pct, 0%)
  );
}

.ui-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1.5px solid #888;
  cursor: pointer;
}

.ui-slider:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.ui-slider:disabled ~ .opacity-val {
  color: var(--text-disabled);
}

/* 表示設定：左ラベル列 / 右コントロール列 */
.setting-left {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  width: 80px;
  padding-right: 8px;
  border-right: 1px solid var(--border-muted);
}
/* 区切り線なし・ラベル左＋トグル右行 */
.setting-row.no-divider .setting-left {
  width: auto;
  flex: 1;
  border-right: none;
  padding-right: 0;
}
.setting-row.no-divider .setting-right {
  flex: 0 0 auto;
  padding-left: 8px;
}

.setting-right {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
  padding-left: 4px;
}

/* ラベルを区切り線の左に右揃え、コントロールを右端に寄せる行 */
.setting-row.ctrl-right .setting-left {
  justify-content: flex-end;
}
/* ラベル右揃え（コントロール側は通常レイアウト）*/
.setting-row.label-right .setting-left {
  justify-content: flex-end;
}
/* トグルを区切り線の左に置く行：[ラベル][トグル] | [select/slider] */
.setting-row.toggle-left .setting-left {
  justify-content: flex-end;
  width: 80px;
}

.setting-label.disabled {
  color: var(--text-disabled);
}

/* レイヤー行 */
.layer-row {
  padding: 5px 10px 4px;
  border-bottom: 1px solid var(--border-subtle);
}

.layer-row:last-child {
  border-bottom: none;
}

/* チェックボックス + ラベル行 */
.layer-label-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
}

/* #ui-panel input[type="checkbox"] に統合済み */

.layer-name {
  flex: 1;
  font-size: var(--font-md);
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  user-select: none;
}

.layer-name.disabled {
  color: var(--text-disabled);
}

.kmz-del-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-disabled);
  cursor: pointer;
  font-size: var(--font-lg);
  line-height: 1;
  padding: 0 2px;
  transition: color 0.15s;
}

.kmz-del-btn:hover {
  color: var(--color-danger);
}

/* ================================================================
   共通トグルスイッチ (.toggle-switch / .toggle-slider)
   全トグルスイッチのスタイルをここで一括管理。
   サイズ・色を変えたい場合はこのブロックだけ編集すれば全体に反映される。
   HTML パターン:
     <label class="toggle-switch">
       <input type="checkbox" ... />
       <span class="toggle-slider"></span>
     </label>
   ================================================================ */
.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 28px;   /* ← ピル幅 */
  height: 16px;  /* ← ピル高さ */
  flex-shrink: 0;
  cursor: pointer;
}
/* hidden input（アクセシビリティ用、視覚的には非表示） */
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
/* ピル背景 */
.toggle-slider {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--border-weak);        /* ← OFF 時の色 */
  border-radius: 16px;
  transition: background 0.18s;
  cursor: pointer;
}
/* つまみ（白い丸） */
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 12px;   /* ← つまみ幅 */
  height: 12px;  /* ← つまみ高さ */
  left: 2px;
  top: 2px;
  background: var(--bg-surface);
  border-radius: 50%;
  transition: transform 0.18s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
/* ON 時: ピル背景を primary 色に */
.toggle-switch input:checked + .toggle-slider {
  background: var(--primary);  /* ← ON 時の色 */
}
/* ON 時: つまみを右へ移動 */
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(12px);  /* ← ピル幅(28) - つまみ幅(10) - 左余白(3) - 右余白(3) = 12 */
}

/* ---- ホバーエフェクト（クリック可能行の視覚フィードバック） ---- */
.setting-row:has(label) {
  cursor: pointer;
  transition: background-color 0.12s;
}
.setting-row:has(label):hover {
  background-color: #f0f5f1;
}
.layer-label-row {
  transition: background-color 0.12s;
}
.layer-label-row:hover {
  background-color: #f0f5f1;
  border-radius: 3px;
}
label.setting-label {
  cursor: pointer;
}
.setting-label.disabled,
.layer-name.disabled {
  cursor: default;
}

/* ---- シミュレーターボタングループ（タブ最上部） ---- */
.sim-btn-group {
  padding: 10px 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ---- シミュレーター設定セクションヘッダ ---- */
.panel-section.sim-section > summary {
  background: var(--primary-light);
  color: var(--primary-hover);
}

/* オーバーレイ ヘッダー行（ラベル＋トグル＋透明度スライダー） */
.overlay-header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 0 8px;
}
.overlay-header .setting-label {
  flex-shrink: 0;
}
/* .ui-slider に統合済み */

/* 透明度スライダー行 */
.opacity-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 18px;
  padding-right: 10px;
}
.opacity-row-label {
  font-size: var(--font-xs);
  color: var(--text-light);
  white-space: nowrap;
  flex-shrink: 0;
}

/* .ui-slider に統合済み（layout のみ残す） */
.opacity-row input[type="range"] {
  flex: 1;
  min-width: 0;
}

.opacity-val {
  min-width: 30px;
  text-align: right;
  font-size: var(--font-sm);
  color: var(--text-caption);
  font-variant-numeric: tabular-nums;
}

/* KMZアップロードボタン */
/* ================================================================
   パネル内共通ボタン（ここで一括管理）
   フォントサイズ・色・トランジションは変数から読み込む。
   margin のみ用途別に上書きして使うこと。
   ================================================================ */

/* セカンダリ（アウトライン） */
.panel-btn-outline {
  display: block;
  width: calc(100% - 20px);
  margin: 6px 10px;
  padding: 6px 12px;
  background: var(--bg-surface);
  color: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: 4px;
  font-size: var(--font-base);
  font-weight: var(--font-semi);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  text-align: center;
  letter-spacing: 0.02em;
}
.panel-btn-outline:hover {
  background: var(--primary);
  color: var(--on-primary);
}

/* プライマリ（塗りつぶし） */
.panel-btn-primary {
  display: block;
  width: calc(100% - 20px);
  margin: 6px 10px 8px;
  padding: 7px 12px;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: 4px;
  font-size: var(--font-base);
  font-weight: var(--font-semi);
  cursor: pointer;
  transition: background var(--transition);
  text-align: center;
  letter-spacing: 0.04em;
}
.panel-btn-primary:hover { background: var(--primary-hover); }

/* 地図追加ボタン: .panel-btn-outline を使用。margin のみ調整 */
#map-import-btn-top { margin: 4px 10px 6px; }

/* ===== 地図カタログ ===== */

/* 検索バー */
.catalog-search-wrap {
  padding: 6px 10px 4px;
}
.catalog-search-row {
  position: relative;
}
.catalog-search-row .search-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-muted);
}
.catalog-search-wrap input {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px 5px 28px;
  border: 1px solid #b0b8b0;
  border-radius: 4px;
  font-size: var(--font-base);
  color: var(--text-main);
  background: var(--bg-subtle);
  outline: none;
}
.catalog-search-wrap input:focus {
  border-color: var(--primary);
  background: var(--bg-surface);
}

/* テレイングループ（<details>） */
.terrain-group {
  margin: 0;
  border-bottom: 1px solid var(--border-light);
}
.terrain-group > summary {
  padding: 5px 10px;
  font-size: var(--font-base);
  font-weight: var(--font-bold);
  color: var(--text-body);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 5px;
  user-select: none;
  background: var(--bg-subtle);
}
.terrain-group > summary::-webkit-details-marker { display: none; }
.terrain-group > summary::before {
  content: '▶';
  font-size: 9px;
  color: var(--text-disabled);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.terrain-group[open] > summary::before { transform: rotate(90deg); }
.terrain-group-count {
  margin-left: auto;
  font-size: var(--font-xs);
  color: var(--text-disabled);
  font-weight: 400;
}

/* フレームエントリ行 */
.frame-entry {
  padding: 5px 10px 5px;
  border-bottom: 1px solid var(--border-subtle);
}
.frame-entry:last-child { border-bottom: none; }

/* ヘッダー行: 状態ドット + 大会名 + バッジ + 画像ボタン */
.frame-entry-header {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  min-width: 0;
}

/* 可視チェックボックス */
.frame-vis-chk { flex-shrink: 0; }

/* 状態ドット（緑=画像あり、灰=なし） */
.frame-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--border-input);
  border: 1.5px solid var(--border-weak);
}
.frame-status-dot.has-image {
  background: var(--primary);
  border-color: var(--primary-hover);
}

/* 大会名テキスト */
.frame-event-name {
  font-size: var(--font-sm);
  color: var(--text-main);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frame-event-name.disabled { color: var(--text-disabled); }

/* バッジ（種別タグ） */
.frame-badge {
  font-size: 9px;
  font-weight: var(--font-bold);
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}
.frame-badge.sprint   { background: #fff3e0; color: #c77700; border: 1px solid #f0c060; }
.frame-badge.forest   { background: #e8f5e9; color: var(--primary-dark); border: 1px solid #a5d6a7; }
.frame-badge.subtype  { background: var(--bg-hover); color: var(--text-caption);    border: 1px solid var(--border-muted); }

/* GeoJSONボタン（チップスの直下） */
.geojson-load-btn-top {
  display: block;
  width: calc(100% - 20px);
  margin: 4px 10px 8px;
}

/* Millerブラウザ全体スクロール */
.miller-scroll-wrap {
  max-height: 250px;
  overflow-y: auto;
}

/* ===== Miller Columns ブラウザ ===== */
#miller-browser { border-bottom: 1px solid #e0e0e0; }

/* パンくずバー */
.miller-breadcrumb {
  display: flex;
  align-items: center;
  padding: 3px 8px;
  font-size: var(--font-xs);
  color: var(--text-caption);
  border-bottom: 1px solid #e8e8e8;
  background: var(--bg-subtle);
  min-height: 20px;
  gap: 2px;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.miller-bc-root { color: var(--text-muted); font-size: 10px; cursor: default; white-space: nowrap; }
.miller-bc-sep { color: var(--text-disabled); margin: 0 1px; flex-shrink: 0; }
.miller-bc-item { color: var(--primary); font-weight: 600; position: relative; flex-shrink: 0; white-space: nowrap; }
.miller-bc-current { color: var(--primary); font-weight: 600; flex-shrink: 0; white-space: nowrap; }
.miller-bc-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-input);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  min-width: 120px;
  max-height: 180px;
  overflow-y: auto;
  z-index: 200;
}
.miller-bc-dropdown-item {
  padding: 5px 10px;
  font-size: var(--font-sm);
  cursor: pointer;
  color: var(--text-main);
  white-space: nowrap;
}
.miller-bc-dropdown-item:hover { background: var(--primary-light); }
.miller-bc-dropdown-item.current { color: var(--primary); font-weight: 700; }

/* 3列コンテナ */
.miller-wrap {
  display: flex;
  height: 210px;
}

/* 各列 */
.miller-col {
  flex: 1;
  border-right: 1px solid #e0e0e0;
  overflow-y: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.miller-col:last-child { border-right: none; }
/* 列ごとの幅比率: 地方(狭め) / 都道府県(標準) / テレイン(広め) */
#miller-col-region  { flex: 0.75; }
#miller-col-pref    { flex: 1.05; }
#miller-col-terrain { flex: 1.45; }

/* 列ヘッダー */
.miller-col-hd {
  padding: 3px 6px;
  font-size: 9px;
  font-weight: var(--font-bold);
  color: var(--text-muted);
  letter-spacing: 0.05em;
  border-bottom: 1px solid #e8e8e8;
  background: var(--bg-hover);
  text-transform: uppercase;
  position: sticky;
  top: 0;
  flex-shrink: 0;
}

/* 列内アイテム */
.miller-item {
  padding: 2px 6px;
  font-size: var(--font-xs);
  line-height: 1.5;
  cursor: pointer;
  border-bottom: 1px solid #f5f5f5;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.miller-item:hover { background: var(--primary-light); color: var(--primary-dark); }
.miller-item.selected { background: var(--primary); color: var(--on-primary); }
.miller-item.disabled { color: var(--text-disabled); cursor: default; font-style: italic; }
.miller-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.miller-item-count {
  font-size: 9px;
  opacity: 0.65;
  flex-shrink: 0;
}

/* テレイン選択後のフレーム一覧ヘッダー */
.miller-frame-hd {
  padding: 5px 10px;
  font-size: var(--font-xs);
  font-weight: var(--font-bold);
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--bg-hover);
  border-bottom: 1px solid #e8e8e8;
}

/* 空状態メッセージ */
.miller-empty { padding: 12px 10px; font-size: 11px; color: var(--text-disabled); text-align: center; }

/* ===== タブバー ===== */
.tab-bar {
  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid var(--border-muted);
  background: var(--bg-select);
  padding: 5px 5px 0;
  gap: 3px;
}
.tab-btn {
  flex: 1;
  padding: 6px 0;
  font-size: var(--font-base);
  font-weight: var(--font-semi);
  color: var(--text-main);
  background: none;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
  transition: background var(--transition-fast);
  letter-spacing: 0.02em;
  margin-bottom: -1px;
}
.tab-btn:hover { background: rgba(255,255,255,0.55); }
.tab-btn.active {
  color: var(--text-main);
  background: var(--bg-surface);
  border-color: var(--border-muted);
  border-bottom-color: var(--on-primary);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ===== map_type チップフィルター ===== */
.map-type-chips {
  display: flex;
  gap: 5px;
  padding: 6px 10px 4px;
  flex-wrap: wrap;
}
.type-chip {
  padding: 2px 9px;
  font-size: var(--font-sm);
  font-weight: var(--font-semi);
  border-radius: 12px;
  border: 1px solid var(--border-input);
  background: var(--bg-hover);
  color: var(--text-sub);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  letter-spacing: 0.02em;
}
.type-chip.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.type-chip:hover:not(.active) { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }


/* 都道府県グループ（3段ツリーの最上位） */
.pref-group {
  border-bottom: 1px solid #e8e8e8;
}
.pref-group > summary {
  padding: 5px 10px;
  font-size: var(--font-xs);
  font-weight: var(--font-bold);
  color: var(--text-muted);
  letter-spacing: 0.06em;
  cursor: pointer;
  list-style: none;
  text-transform: uppercase;
  user-select: none;
}
.pref-group > summary::-webkit-details-marker { display: none; }

/* 画像ピッカーボタン（小） */
.frame-img-pick-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border-input);
  border-radius: 3px;
  padding: 2px 5px;
  font-size: var(--font-sm);
  cursor: pointer;
  color: var(--text-caption);
  line-height: 1.2;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.frame-img-pick-btn:hover {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}

/* フレームコントロール（プルダウン＋スライダー）— 画像ありの時のみ表示 */
.frame-controls {
  margin-top: 4px;
}
.frame-img-select {
  width: 100%;
  padding: 3px var(--chevron-pad-r) 3px 5px;
  font-size: var(--font-sm);
  margin-bottom: 3px;
}

/* MapLibreポップアップ内のカスタムスタイル */
.frame-popup { font-size: 12px; min-width: 200px; }
.frame-popup-title {
  font-weight: var(--font-bold);
  font-size: var(--font-md);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.frame-popup-meta {
  color: var(--text-caption);
  font-size: var(--font-sm);
  margin-bottom: 6px;
  line-height: 1.5;
}
.frame-popup-select {
  width: 100%;
  padding: 4px var(--chevron-pad-r) 4px 6px;
  font-size: var(--font-sm);
  margin-bottom: 6px;
}
.frame-popup-upload {
  display: block;
  width: 100%;
  padding: 6px 10px;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: 4px;
  font-size: var(--font-base);
  font-weight: var(--font-semi);
  cursor: pointer;
  text-align: center;
}
.frame-popup-upload:hover { background: var(--primary-hover); }

/* 重なり時の選択メニュー */
.frame-overlap-list { list-style: none; margin: 0; padding: 0; }
.frame-overlap-item {
  padding: 5px 8px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--font-base);
  display: flex;
  align-items: center;
  gap: 6px;
}
.frame-overlap-item:hover { background: var(--primary-light); }
.frame-overlap-item:last-child { border-bottom: none; }


/* ===== 画像+JGW モーダル ===== */
.imgw-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.48);
  display: flex;
  align-items: center;
  justify-content: center;
}
.imgw-modal-box {
  background: var(--bg-surface);
  border-radius: 8px;
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.28);
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.imgw-modal-header {
  background: var(--primary);
  color: var(--on-primary);
  padding: 12px 16px;
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-lg);
  font-weight: var(--font-bold);
  flex-shrink: 0;
}
.imgw-modal-close {
  background: none;
  border: none;
  color: var(--on-primary);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 0 2px;
  opacity: 0.8;
}
.imgw-modal-close:hover { opacity: 1; }
.imgw-modal-body { padding: 16px; }
.imgw-step { margin-bottom: 18px; }
.imgw-step:last-child { margin-bottom: 0; }
.imgw-step-label {
  font-size: var(--font-base);
  font-weight: var(--font-bold);
  color: var(--text-main);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.imgw-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: 50%;
  font-size: var(--font-sm);
  font-weight: var(--font-bold);
  flex-shrink: 0;
}
.imgw-pick-btn {
  display: block;
  width: 100%;
  padding: 9px 12px;
  background: var(--bg-surface);
  color: var(--primary);
  border: 1.5px dashed var(--primary);
  border-radius: 5px;
  font-size: var(--font-base);
  font-weight: var(--font-semi);
  cursor: pointer;
  text-align: center;
  transition: background var(--transition);
}
.imgw-pick-btn:hover { background: var(--primary-light); }
.imgw-pick-btn.has-files {
  border-style: solid;
  background: var(--primary-light);
}
.imgw-file-list {
  margin-top: 6px;
  font-size: var(--font-sm);
  color: var(--primary-hover);
  line-height: 1.6;
}
.imgw-file-item::before { content: '✓ '; font-weight: 700; }
.imgw-step-note {
  margin: 6px 0 0;
  font-size: var(--font-xs);
  color: var(--text-muted);
  line-height: 1.4;
}
.imgw-crs-select {
  width: 100%;
  padding: 7px var(--chevron-pad-r) 7px 8px;
  font-size: var(--font-base);
}
.imgw-modal-footer {
  padding: 12px 16px;
  border-top: 1px solid #e8e8e8;
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}
.imgw-place-btn {
  padding: 9px 24px;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: 5px;
  font-size: var(--font-base);
  font-weight: var(--font-semi);
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.imgw-place-btn:disabled { opacity: 0.38; cursor: not-allowed; }
.imgw-place-btn:not(:disabled):hover { background: var(--primary-hover); }

/* 地名検索 */
/* ===== 開発用カラーピッカー ===== */
#dev-color-picker {
  position: absolute;
  top: 52px; /* 検索ボックス(top:10px + h:36px) + 6px */
  left: calc(var(--sidebar-w, 296px) + 8px);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-glass);
  backdrop-filter: blur(4px);
  border-radius: 6px;
  padding: 4px 8px;
  box-shadow: 0 1px 6px var(--shadow-md);
  font-size: var(--font-sm);
  color: var(--text-main);
  user-select: none;
}
#dev-primary-color {
  width: 28px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border-input);
  border-radius: 3px;
  cursor: pointer;
  background: none;
}
#dev-color-copy {
  font-size: var(--font-xs);
  padding: 2px 6px;
  border: 1px solid var(--border-input);
  border-radius: 3px;
  background: var(--bg-hover);
  cursor: pointer;
  color: var(--text-sub);
}
#dev-color-copy:hover { background: var(--bg-hover-btn); }
#dev-on-primary-toggle { cursor: pointer; font-size: 10px; }
#dev-on-primary-knob {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid var(--border-input);
  border-radius: 10px;
  background: var(--bg-hover);
  white-space: nowrap;
  transition: background var(--transition);
}
#dev-on-primary-toggle:hover #dev-on-primary-knob { background: var(--bg-hover-btn); }
@media (max-width: 768px) { #dev-color-picker { display: none; } }

/* ===== 統合検索ボックス（常時表示・サイドバー幅に連動） ===== */
#unified-search {
  position: absolute;
  top: 10px;
  left: calc(var(--sidebar-w, 296px) + 8px);
  z-index: 10;
  width: 270px;
}
#unified-search-row {
  position: relative;
  display: flex;
  align-items: center;
}
#unified-search-row .search-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-muted);
}
#unified-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 26px 6px 30px;
  border: none;
  border-radius: 4px;
  font-size: var(--font-base);
  color: var(--text-main);
  background: var(--bg-surface);
  box-shadow: 0 0 0 2px var(--shadow-xs);
  outline: none;
}
#unified-search-input:focus {
  box-shadow: 0 0 0 2px var(--primary);
}
#unified-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--text-disabled);
  line-height: 0;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
}
#unified-search-clear:hover { color: var(--text-sub); background: var(--bg-hover-btn); }
#unified-search-msg {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-top: 3px;
  padding: 0 2px;
}
#unified-search-results {
  margin-top: 4px;
  border-radius: 4px;
  overflow-y: auto;
  max-height: 280px;
  background: var(--bg-surface);
  box-shadow: 0 0 0 2px var(--shadow-xs);
}
#unified-search-results:empty {
  display: none;
}
#unified-search-msg:empty {
  margin-top: 0;
}
/* 結果ソースアイコン */
.result-source-icon {
  flex-shrink: 0;
  font-size: var(--font-md);
  width: 20px;
  text-align: center;
}
/* テレインタイプバッジ（検索結果用） */
.result-type-badge {
  font-size: 9px;
  font-weight: var(--font-bold);
  padding: 1px 4px;
  border-radius: 3px;
  flex-shrink: 0;
}
.result-type-sprint { background: #fff3e0; color: #c77700; }
.result-type-forest { background: #e8f5e9; color: var(--primary-dark); }

#place-search-wrap {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-muted);
}
#place-search-row {
  position: relative;
}
.search-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-muted);
}
#place-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 26px 5px 28px;
  border: 1px solid #b0b8b0;
  border-radius: 4px;
  font-size: var(--font-base);
  color: var(--text-main);
  background: var(--bg-subtle);
  outline: none;
}
#place-search-input:focus {
  border-color: var(--primary);
  background: var(--bg-surface);
}
#place-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--text-disabled);
  line-height: 0;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
}
#place-search-clear:hover {
  color: var(--text-sub);
  background: var(--bg-hover-btn);
}
#place-search-msg {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-top: 3px;
}
#place-search-results {
  margin-top: 4px;
  border: 1px solid var(--border-input);
  border-radius: 4px;
  overflow-y: auto;
  max-height: 200px;
  background: var(--bg-surface);
}
.place-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 8px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
}
.place-result-item:last-child { border-bottom: none; }
.place-result-item:hover,
.place-result-item:active { background: #e8f2ec; }
.place-result-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-sm);
  color: var(--text-main);
}
.place-result-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: var(--font-xs);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.35;
}

/* 地形誇張スライダー行 */
.terrain-row {
  padding: 5px 10px 5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.terrain-label {
  font-size: var(--font-sm);
  color: var(--text-sub);
  white-space: nowrap;
  flex-shrink: 0;
}

/* .ui-slider に統合済み（#slider-exaggeration.ui-slider に --slider-color: #6a8fa0 適用） */
.terrain-row input[type="range"] {
  flex: 1;
  min-width: 0;
}

/* ドラッグ＆ドロップ用オーバーレイ */
#drop-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(74, 124, 89, 0.12);
  border: 4px dashed var(--primary);
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: var(--font-bold);
  color: var(--primary);
  pointer-events: none;
}

#drop-overlay.visible {
  display: flex;
}

/* 操作ヒント */
#hint {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: var(--overlay-mid);
  color: var(--on-primary);
  font-size: var(--font-sm);
  padding: 5px 14px;
  border-radius: 20px;
  pointer-events: none;
  white-space: nowrap;
}

/* 等高線間隔セレクト */
.contour-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
}

.contour-row label {
  font-size: var(--font-sm);
  color: var(--text-main);
  white-space: nowrap;
}

/* ベーススタイルは「共通パネルプルダウン」セクションで定義済み */
#sel-contour-interval,
#sel-magnetic-north-interval {
  flex: 1;
  padding: 3px var(--chevron-pad-r) 3px 6px;
  font-size: var(--font-base);
}

/* チェックボックス/トグルのない行でラベル位置を揃えるスペーサー */
.chk-spacer {
  display: inline-block;
  width: 28px;
  flex-shrink: 0;
}

/* 現在位置ボタン（MapLibre GeolocateControl）のカスタムスタイル */
.maplibregl-ctrl-geolocate {
  background-size: 70% !important;
}

/* ---- プライバシー注記 ---- */
.privacy-note {
  font-size: var(--font-xs);
  color: var(--text-light);
  padding: 4px 10px 6px;
  line-height: 1.45;
  border-bottom: 1px solid var(--border-subtle);
}

/* GPXアップロードボタン */
#gpx-upload-btn {
  display: block;
  width: calc(100% - 20px);
  margin: 6px 10px 4px;
  padding: 6px 12px;
  background: var(--bg-surface);
  color: var(--secondary);
  border: 1.5px solid var(--secondary);
  border-radius: 4px;
  font-size: var(--font-base);
  font-weight: var(--font-semi);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  text-align: center;
  letter-spacing: 0.02em;
}

#gpx-upload-btn:hover {
  background: var(--secondary);
  color: var(--on-primary);
}

/* ---- 視点切り替えトグルボタン ---- */
#view-toggle-btn {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: var(--bg-glass);
  border: 1px solid var(--border-input);
  border-radius: 20px;
  padding: 6px 18px;
  font-size: var(--font-base);
  font-weight: var(--font-semi);
  color: var(--text-main);
  cursor: pointer;
  box-shadow: 0 1px 4px var(--shadow-md);
  display: none;
  /* GPX読み込み前は非表示 */
  white-space: nowrap;
  transition: background var(--transition);
}

#view-toggle-btn:hover {
  background: rgba(240, 240, 240, 0.95);
}

#view-toggle-btn.active-first {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
#view-toggle-btn.active-chase {
  background: var(--color-warn);
  color: var(--on-primary);
  border-color: var(--color-warn);
}

/* ---- タイムラインパネル（画面下部） ---- */
#timeline-panel {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: var(--bg-glass-heavy);
  border: 1px solid var(--border-input);
  border-radius: 8px;
  padding: 6px 14px 8px;
  box-shadow: 0 2px 8px var(--shadow-lg);
  display: none;
  /* GPX読み込み前は非表示 */
  flex-direction: column;
  gap: 4px;
  min-width: 320px;
  max-width: 90vw;
}
#timeline-main-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* キーヒント（3D モード時のみ表示） */
#gpx-key-hint {
  display: none;
  font-size: var(--font-xs);
  color: var(--text-muted);
  text-align: center;
  letter-spacing: 0.04em;
  padding-top: 2px;
}
#timeline-panel.gpx-3d #gpx-key-hint { display: block; }

/* 2D/3D 切替ボタン */
#gpx-3d-btn {
  flex-shrink: 0;
  height: 28px;
  padding: 0 10px;
  border-radius: 4px;
  border: 1px solid var(--border-input);
  background: var(--bg-select);
  color: var(--text-sub);
  font-size: var(--font-sm);
  font-weight: var(--font-bold);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
#gpx-3d-btn:hover { background: var(--bg-hover-btn); color: var(--text-main); }
#gpx-3d-btn.active {
  background: var(--color-warn);
  color: var(--on-primary);
  border-color: var(--color-warn);
}

#play-pause-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: var(--on-primary);
  font-size: var(--font-lg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}

#play-pause-btn:hover {
  background: var(--primary-hover);
}

#timeline-controls {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

#seek-bar {
  width: 100%;
  height: 4px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 2px;
  background: linear-gradient(to right, var(--primary) var(--pct, 0%), var(--slider-track) var(--pct, 0%));
  outline: none;
}

#seek-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 2px solid var(--primary);
  cursor: pointer;
}

#time-display {
  font-size: var(--font-sm);
  color: var(--text-sub);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* ベーススタイルは「共通パネルプルダウン」セクションで定義済み */
#speed-select {
  flex-shrink: 0;
  padding: 3px var(--chevron-pad-r) 3px 5px;
  font-size: var(--font-sm);
}

/* GPX軌跡が読み込まれているときの情報表示 */
#gpx-status {
  padding: 4px 10px 5px;
  font-size: var(--font-xs);
  color: var(--secondary);
  border-top: 1px solid #ebebeb;
  display: none;
}

/* ================================================================
   O-シミュレーターモード
   ================================================================ */

/* トグルボタン（右下固定） */
/* モバイルシムボタン：一旦非表示 */
#sim-toggle-btn {
  display: none;
  width: calc(100% - 20px);
  margin: 6px 10px 8px;
  padding: 7px 12px;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: 4px;
  font-size: var(--font-base);
  font-weight: var(--font-semi);
  font-family: inherit;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-align: center;
  transition: background var(--transition);
}
#sim-toggle-btn:hover { background: var(--primary-hover); }
#sim-toggle-btn.sim-active { background: var(--color-sim-active); }
#sim-toggle-btn.sim-active:hover { background: var(--color-sim-hover); }

/* フルスクリーン透明オーバーレイ（入力ハンドリング用） */
#sim-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 18;
  pointer-events: none; /* 子要素ごとに個別に有効化 */
}

/* ミニマップ外枠（右上・画面幅の30%） */
#sim-minimap-container {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30vmin;
  height: 30vmin;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px var(--overlay-light);
  pointer-events: none;
}

/* ミニマップ内側（このdivをCSS rotateでヘディングアップ回転させる） */
#sim-minimap-inner {
  width: 100%;
  height: 100%;
  transform-origin: center center;
  transition: transform 0.1s linear;
}

/* MapLibreが描画するdiv */
#sim-minimap-map {
  width: 100%;
  height: 100%;
}

/* 中心の現在位置ドット（常に中央固定、回転しない） */
#sim-minimap-crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: var(--color-marker);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 4px var(--overlay-base);
  pointer-events: none;
  z-index: 2;
}

/* 進行方向の三角マーカー（ドットの上に重なる） */
#sim-minimap-arrow {
  position: absolute;
  top: calc(50% - 18px);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid var(--color-marker);
  filter: drop-shadow(0 0 2px #fff);
  pointer-events: none;
  z-index: 2;
}

/* ジョイスティックゾーン（左下） */
#sim-joystick-zone {
  position: absolute;
  bottom: 30px;
  left: 20px;
  width: 140px;
  height: 140px;
  pointer-events: auto;
}

/* 視点操作ゾーン（右半分・透明） */
#sim-look-zone {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
  pointer-events: auto;
  touch-action: none;
  /* デバッグ用: background: rgba(255,0,0,0.05); */
}

/* ズームスライダー（左上） */
#sim-zoom-ctrl {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--overlay-light);
  padding: 5px 10px;
  border-radius: 20px;
  pointer-events: auto;
}
#sim-zoom-ctrl label {
  color: var(--on-primary);
  font-size: var(--font-sm);
  opacity: 0.85;
  white-space: nowrap;
}
#sim-zoom-slider {
  width: 90px;
}
#sim-zoom-val {
  color: var(--on-primary);
  font-size: var(--font-sm);
  min-width: 28px;
  text-align: right;
}

/* ================================================================
   PC O-シミュレーターモード
   ================================================================ */

/* PCシムトグルボタン（シミュレーター設定セクション内） */
#pc-sim-toggle-btn {
  display: block;
  width: calc(100% - 20px);
  margin: 6px 10px 8px;
  padding: 7px 12px;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: 4px;
  font-size: var(--font-base);
  font-weight: var(--font-semi);
  font-family: inherit;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-align: center;
  transition: background var(--transition);
}
#pc-sim-toggle-btn:hover { background: var(--primary-hover); }
#pc-sim-toggle-btn.pc-sim-active { background: var(--color-sim-active); }
#pc-sim-toggle-btn.pc-sim-active:hover { background: var(--color-sim-hover); }

/* 開始地点ヒントテキスト（ボタン下） */
#pc-sim-start-hint {
  font-size: var(--font-xs);
  color: var(--text-muted);
  text-align: center;
  padding: 0 0 2px;
  letter-spacing: 0.02em;
}

/* 操作ヒントバー（画面上部中央・Pointer Lock 中に表示） */
#pc-sim-hint {
  display: none;
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  background: var(--overlay-dark);
  color: var(--on-primary);
  font-size: var(--font-sm);
  padding: 8px 16px;
  border-radius: 16px;
  white-space: nowrap;
  pointer-events: none;
  align-items: center;
  gap: 0;
}
#pc-sim-hint .hint-group,
#pc-sim-readmap-label .hint-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#pc-sim-hint .hint-action,
#pc-sim-readmap-label .hint-action {
  color: var(--white-strong);
  font-size: var(--font-sm);
  margin-left: 2px;
}
#pc-sim-hint .hint-sep,
#pc-sim-readmap-label .hint-sep {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.4);
  margin: 0 12px;
  vertical-align: middle;
}
#pc-sim-hint kbd,
#pc-sim-readmap-label kbd {
  display: inline-block;
  background: var(--white-subtle);
  border: 1px solid rgba(255,255,255,0.35);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 0 5px;
  font-family: inherit;
  font-size: var(--font-xs);
  line-height: 1.6;
  vertical-align: middle;
}
#pc-sim-hint .hint-or,
#pc-sim-readmap-label .hint-or {
  color: rgba(255,255,255,0.45);
  font-size: var(--font-xs);
  margin: 0 1px;
}

/* 十字照準（Pointer Lock 中に画面中央に表示）
   mix-blend-mode: difference + 白 = 背景の補色を自動計算して常に視認できる */
#pc-sim-crosshair {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 25;
  pointer-events: none;
  width: 20px;
  height: 20px;
  mix-blend-mode: difference;
}
#pc-sim-crosshair::before,
#pc-sim-crosshair::after {
  content: '';
  position: absolute;
  background: var(--bg-surface); /* difference blend で背景の補色として表示 */
}
#pc-sim-crosshair::before { /* 横線 */
  width: 20px; height: 2px;
  top: 9px; left: 0;
}
#pc-sim-crosshair::after { /* 縦線 */
  width: 2px; height: 20px;
  top: 0; left: 9px;
}

/* PCシム: 現在位置ドット（CSS fixed — maplibregl.Marker の terrain 投影ズレを回避） */
#pc-sim-pos-dot {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 24; /* 十字線の下 */
  pointer-events: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e63030;
  border: 3px solid var(--white-strong);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 2px 6px var(--overlay-base);
}

/* セットアップ時の開始地点クロスヘア（シミュレーション未開始時に常時表示） */
/* 開始位置クリックモード: 赤丸カーソル */
#sim-start-cursor {
  display: none;
  position: fixed;
  width: 14px;
  height: 14px;
  background: var(--color-marker);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px var(--overlay-mid);
  pointer-events: none;
  z-index: 30;
  /* カーソル（矢印や手の先端）の少し下に赤丸を表示 */
  transform: translate(-50%, 10px);
}
/* 操作ガイド */
#sim-start-hint-overlay {
  display: none;
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.68);
  color: var(--on-primary);
  font-size: var(--font-base);
  font-weight: 500;
  padding: 7px 18px;
  border-radius: 6px;
  z-index: 30;
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: 0.03em;
}

/* 読図アクション オーバーレイ */
#pc-sim-readmap-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--overlay-mid);
  align-items: center;
  justify-content: center;
}
#pc-sim-readmap-overlay.visible { display: flex; }

#pc-sim-readmap-wrapper {
  position: relative;
  width: min(80vmin, 640px);
  height: min(80vmin, 640px);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 24px var(--overlay-dark);
  border: 2px solid var(--white-border);
}
#pc-sim-readmap-inner {
  position: absolute;
  width: 150%;
  height: 150%;
  top: -25%;
  left: -25%;
  transform-origin: center center;
}
#pc-sim-readmap-map {
  width: 100%;
  height: 100%;
}
/* 読図マップ中心の現在位置ドット */
#pc-sim-readmap-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: var(--color-marker);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0,0,0,0.6);
  pointer-events: none;
  z-index: 2;
}
/* 読図マップの進行方向マーカー（常に上 = 進行方向） */
#pc-sim-readmap-arrow {
  position: absolute;
  top: calc(50% - 20px);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 12px solid var(--color-marker);
  filter: drop-shadow(0 0 2px #fff);
  pointer-events: none;
  z-index: 2;
}
/* 読図ラベル */
#pc-sim-readmap-label {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--overlay-dark);
  color: var(--white-strong);
  font-size: var(--font-sm);
  padding: 8px 16px;
  border-radius: 16px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}

/* ================================================================
   スマホアドレスバー対応 / Attribution折り返し / レスポンシブ
   ================================================================ */

/* 100dvh: スマホのアドレスバーによる下部隠れを防止 */
@supports (height: 100dvh) {
  body { height: 100dvh; }
}

/* MapLibre 出典コンテナ: 左端をサイドバー幅に合わせてシフト
   max-width ではなくコンテナごと移動するので確実に重ならない */
.maplibregl-ctrl-bottom-right {
  left: var(--sidebar-w, 296px) !important;
}
/* 出典テキスト: 全幅まで使ってから折り返し */
.maplibregl-ctrl-attrib-inner {
  white-space: normal !important;
}
.maplibregl-ctrl-attrib {
  background: var(--bg-surface) !important;
  border-radius: 4px !important;
  box-shadow: 0 0 0 2px var(--shadow-xs) !important;
}
/*
  展開時: (i)ボタンを position:absolute; bottom:0; right:0 で右下に固定。
  コンテナは bottom-right アンカーなので bottom:0/right:0 = 画面座標不変。
  inner に padding-right を付けてテキストとボタンが重ならないようにする。
*/
.maplibregl-ctrl-attrib.maplibregl-compact-show {
  padding: 2px 0 2px 8px; /* 右側は inner の padding-right に委ねる */
}
.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner {
  padding-right: 32px; /* ボタン 24px + 余白 8px */
}
.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button {
  top: auto;
  bottom: 0; /* position:absolute のまま右下固定 */
}

/* 縮尺コントロール: 左下に配置（検索ボックスとの重なりを回避）
   出典が閉じているとき: (i) マークと同じ高さ（bottom: 10px）
   出典が開いているとき: JS が .above-attrib を付与し出典の上に移動 */
#scale-ctrl-container {
  position: absolute;
  left: calc(var(--sidebar-w, 296px) + 10px); /* 左パネル右端から10px */
  bottom: 10px;
  z-index: 19;
  transition: bottom 0.2s ease;
}
/* 出典が開いたとき: --attrib-h（ResizeObserver が常時更新）分だけ上に逃げる */
#scale-ctrl-container.above-attrib {
  bottom: calc(var(--attrib-h, 40px) + 14px);
}
.scale-ctrl-select {
  height: 29px;           /* 全画面ボタンと同じ高さ */
  box-sizing: border-box;
  padding: 0 var(--chevron-pad-r) 0 8px;
  /* 地図コントロール独自外観: 白地・影・ボーダーなしで select{} を上書き */
  background-color: var(--bg-surface);
  border: none;
  border-radius: 4px;
  font-size: var(--font-sm);
  box-shadow: 0 0 0 2px var(--shadow-xs);
}
.scale-ctrl-select:hover {
  background-color: var(--bg-select);
}

/* スマホ向けパネル最適化 */
@media (max-width: 600px) {
  #sidebar-panel { width: 220px; }

  .setting-row {
    padding: 9px 12px;
  }

  /* 検索入力を大きめに */
  #place-search-input {
    font-size: var(--font-lg);
    padding: 7px 10px 7px 32px;
  }

  /* PCシムボタンはスマホでも表示する */
}

/* ===================================================================
   共通モーダルデコレーション
   wrapper・header・close-btn のデザインをここで一元管理する。
   サイズ（width / height）は各モーダルの個別ルールで上書きする。
   =================================================================== */

/* モーダル本体の枠・影・形状 */
.modal-wrapper {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 24px var(--overlay-dark);
  border: 2px solid var(--white-border);
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
}

/* ヘッダー（緑背景 + 白テキスト） */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  flex-shrink: 0;
  background: var(--primary);
  color: var(--on-primary);
  font-size: var(--font-base);
  font-weight: var(--font-bold);
}

/* 閉じるボタン（円形・白半透明） */
.modal-close-btn {
  background: var(--white-subtle);
  border: none;
  color: var(--on-primary);
  font-size: var(--font-lg);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background var(--transition);
  flex-shrink: 0;
}
.modal-close-btn:hover { background: var(--white-hover); }

/* ===================================================================
   地図画像 位置合わせモーダル（読図モードポップアップと同デザイン）
   =================================================================== */

/* 全画面暗転オーバーレイ（PC readmap と同系） */
#import-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--overlay-mid);
  align-items: center;
  justify-content: center;
}
#import-overlay.visible { display: flex; }

/* モーダル本体: サイズのみ個別定義（装飾は .modal-wrapper で共通管理） */
#import-modal-wrapper {
  width: min(92vw, 1040px);
  height: min(88vh, 720px);
}

/* モードタブ：1タブ + Undo/Redo */
#import-mode-tabs {
  display: flex;
  gap: 0;
  align-items: center;
  flex-shrink: 0;
  background: var(--bg-select);
  border-bottom: 1px solid var(--border-muted);
}
.import-tab {
  padding: 6px 18px;
  font-size: var(--font-base);
  font-weight: var(--font-bold);
  font-family: inherit;
  border: none;
  border-right: 1px solid var(--border-muted);
  background: var(--bg-select);
  color: var(--text-caption);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.import-tab:hover { background: var(--bg-hover-btn); color: var(--text-main); }
.import-tab.active {
  background: var(--bg-surface);
  color: var(--primary);
  font-weight: var(--font-bold);
  box-shadow: inset 0 -2px 0 var(--primary);
}

/* ボディ：プレビューマップ + コントロール */
#import-modal-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* プレビュー用 MapLibre */
#import-preview-map {
  flex: 1;
  min-width: 0;
  position: relative;
}

/* 右側コントロールパネル */
#import-controls {
  width: 200px;
  flex-shrink: 0;
  background: var(--bg-subtle);
  color: var(--text-main);
  padding: 14px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: var(--font-base);
  border-left: 1px solid var(--border-muted);
}
.import-ctrl-group { display: flex; flex-direction: column; gap: 4px; }
.import-ctrl-label {
  font-size: var(--font-sm);
  color: var(--text-sub);
  font-weight: var(--font-bold);
  letter-spacing: 0.02em;
}
.import-label-with-reset {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.import-reset-btn {
  width: 18px;
  height: 18px;
  border: 1px solid var(--border-input);
  border-radius: 50%;
  background: var(--bg-surface);
  color: var(--text-sub);
  font-size: var(--font-base);
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.import-reset-btn:hover {
  background: var(--bg-select);
  color: var(--text-main);
  border-color: var(--border-weak);
}
.import-reset-btn:active { background: var(--bg-hover-btn); }
.import-slider-wrap {
  position: relative;
  height: 12px;
  display: flex;
  align-items: center;
}
.import-slider-wrap::after {
  content: '';
  position: absolute;
  left: var(--init-pct, 50%);
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 11px;
  border-radius: 1px;
  background: #666;
  opacity: 0.7;
  pointer-events: none;
}
.import-slider-line {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: 1px;
  width: 100%;
}
.import-slider-side {
  font-size: var(--font-xs);
  color: var(--text-muted);
  line-height: 1;
  white-space: nowrap;
  padding: 0;
  margin: 0;
}
.import-slider-side.left {
  text-align: right;
}
.import-slider-side.right {
  text-align: left;
}
/* select は select{} グローバルルールで外観定義済み。サイズのみ */
.import-ctrl-select {
  width: 100%;
  padding: 4px var(--chevron-pad-r) 4px 6px;
  font-size: var(--font-base);
}
.import-ctrl-select:focus { border-color: var(--primary); }
/* input は select{} の影響を受けないので外観を個別定義 */
.import-ctrl-input {
  width: 100%;
  background: var(--bg-surface);
  color: var(--text-main);
  border: 1px solid var(--border-input);
  border-radius: 3px;
  padding: 4px 6px;
  font-size: var(--font-base);
  font-family: inherit;
  outline: none;
}
.import-ctrl-input:focus { border-color: var(--primary); }
.import-ctrl-hint {
  font-size: var(--font-sm);
  color: var(--text-muted);
  line-height: 1.6;
}
/* .ui-slider に統合済み（レイアウトのみ残す） */
.import-ctrl-slider {
  width: 100%;
  margin: 0;
  flex: none; /* import-ctrl-slider は width:100% で使うため flex:1 を上書き */
}
#import-image-only-ctrl {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* フッター */
#import-modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-select);
  flex-shrink: 0;
  border-top: 1px solid var(--border-muted);
}
#import-decide-btn {
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: 3px;
  padding: 6px 20px;
  font-size: var(--font-base);
  font-weight: var(--font-bold);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition);
}
#import-decide-btn:hover { background: var(--primary-hover); }
#import-cancel-btn {
  background: var(--bg-surface);
  color: var(--text-sub);
  border: 1px solid var(--border-input);
  border-radius: 3px;
  padding: 6px 14px;
  font-size: var(--font-base);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition);
}
#import-cancel-btn:hover { background: var(--bg-select); color: var(--text-main); }

/* Undo/Redo ボタン（モードタブ行の右端） */
.import-undo-redo-btn {
  background: none;
  border: none;
  padding: 4px 8px;
  font-size: 16px;
  cursor: pointer;
  color: var(--text-sub);
  line-height: 1;
  border-radius: 4px;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.import-undo-redo-btn:hover { background: var(--bg-hover-btn); color: var(--text-dark); }
.import-undo-redo-btn:active { background: var(--slider-track); }
#import-undo-redo-group {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
  padding-right: 6px;
}

/* コントロールパネル：ステップセクション */
.import-ctrl-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid #e8e8e8;
}
.import-ctrl-section:first-child {
  border-top: none;
  padding-top: 0;
}
.import-ctrl-section-title {
  font-size: var(--font-xs);
  font-weight: var(--font-bold);
  color: var(--primary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* 回転補正 ±0.5° ボタン */
.import-rotation-adj-row {
  display: flex;
  gap: 4px;
  margin-top: 2px;
}
.import-rotation-adj-btn {
  flex: 1;
  background: var(--bg-select);
  border: 1px solid var(--border-input);
  border-radius: 3px;
  padding: 3px 0;
  font-size: var(--font-sm);
  font-family: inherit;
  cursor: pointer;
  color: var(--text-main);
  transition: background var(--transition-fast);
}
.import-rotation-adj-btn:hover { background: var(--bg-hover-btn); }
.import-rotation-adj-btn:active { background: var(--slider-track); }
.import-rotation-adj-btn.active {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary-dark);
}

/* ============================================================
   印刷・エクスポートダイアログ
   ============================================================ */
#print-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--overlay-mid);
  align-items: center;
  justify-content: center;
}
#print-overlay.visible { display: flex; }

/* モーダル本体: サイズのみ個別定義（装飾は .modal-wrapper で共通管理） */
#print-modal-wrapper {
  width: min(92vw, 1040px);
  height: min(88vh, 720px);
}

#print-modal-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}
#print-preview-map {
  flex: 1;
  min-width: 0;
  position: relative;
  background: var(--border-input);
}
#print-controls {
  width: 200px;
  flex-shrink: 0;
  background: var(--bg-subtle);
  color: var(--text-main);
  padding: 14px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: var(--font-base);
  border-left: 1px solid var(--border-muted);
}
#print-modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-select);
  flex-shrink: 0;
  border-top: 1px solid var(--border-muted);
}
#print-export-btn {
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: 3px;
  padding: 6px 20px;
  font-size: var(--font-base);
  font-weight: var(--font-bold);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition);
}
#print-export-btn:hover { background: var(--primary-hover); }
#print-export-btn:disabled { background: var(--text-disabled); cursor: not-allowed; }
#print-cancel-btn {
  background: var(--bg-surface);
  color: var(--text-sub);
  border: 1px solid var(--border-input);
  border-radius: 3px;
  padding: 6px 14px;
  font-size: var(--font-base);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition);
}
#print-cancel-btn:hover { background: var(--bg-select); color: var(--text-main); }

/* maplibre-gl-export のドロップダウンパネルを非表示（独自ダイアログに置換） */
.maplibregl-export-list { display: none !important; }

/* ============================================================
   モバイル専用要素: デスクトップでは非表示
   ============================================================ */
#sheet-handle,
#sheet-mini-bar { display: none; }

/* ============================================================
   @media (max-width: 768px)
   ボトムナビゲーション & ドラッグ可能ボトムシート
   ============================================================ */
@media (max-width: 768px) {

  /* サイドバー幅を 0 に（地図UIをフルスクリーン化） */
  :root { --sidebar-w: 0px !important; }

  /* #sidebar → 画面下部に固定・縦→横レイアウト */
  #sidebar {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: auto;
    flex-direction: column-reverse; /* icon-bar が最下部 */
    z-index: 20;
  }

  /* ── ボトムナビゲーションバー ── */
  #sidebar-icon-bar {
    width: 100%;
    height: 54px;
    height: calc(54px + env(safe-area-inset-bottom, 0px));
    flex-direction: row;
    justify-content: space-around;
    padding: 0 4px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    gap: 0;
    box-shadow: 0 -1px 0 var(--shadow-xs), 0 -2px 12px rgba(0,0,0,0.08);
    flex-shrink: 0;
  }

  /* ロゴ非表示 */
  #sidebar-logo { display: none; }

  /* ナビボタン: 横並びに */
  .sidebar-nav-btn,
  .sidebar-modal-btn {
    flex: 1;
    height: 54px;
    width: auto;
    border-radius: 0;
    flex-direction: column;
    gap: 2px;
  }
  /* スペーサーはモバイル横並びでは不要 */
  .sidebar-nav-spacer { display: none; }
  .nav-label { display: block; font-size: 9px; }

  /* アクティブインジケーター: PC同様に背景色で表現（ボーダー不要） */
  .sidebar-nav-btn.active::before {
    display: none;
  }

  /* ── ボトムシート ── */
  #sidebar-panel {
    position: fixed;
    bottom: 54px;
    bottom: calc(54px + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    top: auto;
    width: 100vw;
    height: var(--sheet-height, 72px);
    border-right: none;
    border-top: 1px solid var(--shadow-xs);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.14);
    transition: height 0.32s cubic-bezier(0.4,0,0.2,1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* sb-hidden を無効化（ボトムシートは常に表示） */
  #sidebar-panel.sb-hidden { display: flex !important; }

  /* ── ドラッグハンドル ── */
  #sheet-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    flex-shrink: 0;
    cursor: grab;
    touch-action: none;
    user-select: none;
    background: inherit;
  }
  #sheet-handle:active { cursor: grabbing; }
  .sheet-handle-bar {
    width: 40px;
    height: 4px;
    background: var(--shadow-md);
    border-radius: 2px;
    transition: background 0.15s, width 0.15s;
  }
  #sheet-handle:active .sheet-handle-bar {
    background: rgba(37, 99, 235, 0.55);
    width: 52px;
  }

  /* ── ミニバー（最小展開時のプレビュー行） ── */
  #sheet-mini-bar {
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 10px;
    height: 50px;
    flex-shrink: 0;
    border-top: 1px solid rgba(0,0,0,0.07);
    background: var(--bg-surface);
  }
  #sheet-mini-label {
    flex: 1;
    font-size: var(--font-base);
    color: var(--text-sub);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--font-semi);
  }
  #sheet-mini-start-btn {
    padding: 6px 16px;
    background: var(--primary);
    color: var(--on-primary);
    border: none;
    border-radius: 6px;
    font-size: var(--font-base);
    font-weight: var(--font-bold);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: inherit;
  }

  /* 展開時はミニバー非表示 */
  #sidebar-panel.sheet-mid #sheet-mini-bar,
  #sidebar-panel.sheet-full #sheet-mini-bar { display: none; }

  /* 最小時: スクロール無効 / 展開時: スクロール有効 */
  #sidebar-panel.sheet-min  .sidebar-scroll { overflow-y: hidden; }
  #sidebar-panel.sheet-mid  .sidebar-scroll,
  #sidebar-panel.sheet-full .sidebar-scroll { overflow-y: auto; }

  /* セクションが見えないときは pointer-events を切る */
  #sidebar-panel.sheet-min .sidebar-section { pointer-events: none; }
  #sidebar-panel.sheet-mid .sidebar-section,
  #sidebar-panel.sheet-full .sidebar-section { pointer-events: auto; }

  /* 地図コントロール（ズーム等）が底に隠れないよう上げる */
  .maplibregl-ctrl-bottom-right,
  .maplibregl-ctrl-bottom-left {
    bottom: calc(54px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* 縮尺: ボトムナビの上・モバイルは sidebar-w=0 なので左端に 10px 余白 */
  #scale-ctrl-container {
    left: 10px;
    bottom: calc(54px + env(safe-area-inset-bottom, 0px) + 10px);
  }
  #scale-ctrl-container.above-attrib {
    bottom: calc(54px + env(safe-area-inset-bottom, 0px) + var(--attrib-h, 40px) + 14px);
  }
}


/* ============================================================
   --on-primary 一括適用ブロック
   ファイル末尾に置くことで既存の color: #fff を上書き
   ============================================================ */

/* primary 背景上で白/黒を切り替える全要素 */
/* .sidebar-nav-btn.active は直接ルールで color:#fff !important を指定済みのため除外 */
.panel-btn-primary,
.panel-btn-outline:hover,
.sim-map-fly-btn:hover,
.miller-item.selected,
.type-chip.active,
.frame-img-pick-btn:hover,
.frame-popup-upload,
.imgw-modal-header,
.imgw-step-num,
.imgw-place-btn,
#view-toggle-btn.active-first,
#view-toggle-btn.active-chase,
#play-pause-btn,
#sim-toggle-btn:not(.sim-active),
#pc-sim-toggle-btn:not(.pc-sim-active),
.import-overlay-header,
#import-decide-btn,
#sheet-mini-start-btn {
  color: var(--on-primary);
}


/* ============================================================
   色別標高図（dem2relief）— グラデーション背景付きデュアルレンジスライダー
   ============================================================ */

/* コントロール全体のラッパー: カード一覧の直下に密着（区切り線なし） */
.color-relief-ctrls {
  width: 100%;
  padding: 4px 8px 8px;
  box-sizing: border-box;
}

/* ラベル行: "標高(m)  [min] – [max]" */
.cr-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.cr-label-text {
  font-size: var(--font-sm);
  color: var(--text-main);
  white-space: nowrap;
  flex-shrink: 0;
}

/* 自動フィットボタン */
.cr-autofit-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--font-xs);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--border-input);
  background: var(--bg-hover);
  color: var(--text-sub);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.cr-autofit-btn:hover:not(:disabled) {
  background: var(--primary, #2563eb);
  border-color: var(--primary, #2563eb);
  color: var(--on-primary);
}
.cr-autofit-btn:active:not(:disabled) {
  filter: brightness(0.9);
}
.cr-autofit-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

/* 数値表示エリア（ラベル行中央） */
.cr-range-display {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}
.cr-range-sep {
  font-size: var(--font-sm);
  color: var(--text-light);
  padding: 0 1px;
}

/* 数値直接入力欄: テキスト風インライン */
.cr-num-input {
  width: 40px;
  padding: 1px 2px;
  font-size: var(--font-sm);
  font-variant-numeric: tabular-nums;
  text-align: center;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-input);
  border-radius: 0;
  color: var(--text-main);
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
.cr-num-input::-webkit-inner-spin-button,
.cr-num-input::-webkit-outer-spin-button { display: none; }
.cr-num-input:focus {
  border-bottom-color: var(--primary, #2563eb);
  color: #111;
}

/* グラデーショントラック + 2つのレンジ入力を重ねるコンテナ（全幅） */
.cr-dual-track {
  position: relative;
  width: 100%;
  height: 25px;
  overflow: visible; /* つまみが左右端を超えても表示できるよう */
}

/* グラデーション背景バー（background は JS が動的に設定） */
.cr-gradient-track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 7px;
  border-radius: 0; /* 長方形 */
  /* 初期フォールバック（JS 上書き前） */
  background: linear-gradient(to right,
    #0006fb 0%, #0092fb 17%, #00e7fb 33%, #8af708 50%,
    #f2f90b 67%, #f28a09 83%, #f2480b 100%);
  pointer-events: none;
}

/* レンジ入力共通: バー下端(7px)の 2px 下(y=9)から開始し、つまみが端まで届くよう左右 -6px 拡張 */
.cr-range {
  position: absolute;
  top: 9px;
  left: -6px;
  width: calc(100% + 12px);
  height: 14px;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
  outline: none;
  /* Windows のシステムアクセントカラーが進捗フィルに適用されるのを防ぐ */
  accent-color: transparent;
  color: transparent;
}

/* WebKit/Blink: トラック非表示 */
.cr-range::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 14px;
  border: none;
  color: transparent;
}

/* WebKit/Blink: 三角つまみ（バー下端の少し下に頂点）
   input top = 9px, height = 14px → トラック中心 = 9 + 7 = 16px
   thumb height = 11px → thumb top = 16 - 5.5 = 10.5px (先端) = バー下端(7px)の 3.5px 下 */
.cr-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 11px;
  border-radius: 0;
  background: #444;
  border: none;
  box-shadow: none;
  cursor: ew-resize;
  pointer-events: auto;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transition: background var(--transition);
}
.cr-range::-webkit-slider-thumb:hover {
  background: var(--primary, #2563eb);
}

/* Firefox: トラック非表示 */
.cr-range::-moz-range-track {
  background: transparent;
  height: 100%;
}

/* Firefox: 三角つまみ */
.cr-range::-moz-range-thumb {
  width: 12px;
  height: 11px;
  border-radius: 0;
  background: #444;
  border: none;
  box-shadow: none;
  cursor: ew-resize;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* 色別標高図カード: グラデーションサムネイル */
/* 「なし」カード: 薄い灰色 */
.bm-card-none-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: #b0b0b0;
}

.bm-card-gradient {
  position: absolute;
  inset: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    #0006fb  0%,
    #0092fb 17%,
    #00e7fb 33%,
    #8af708 50%,
    #f2f90b 67%,
    #f28a09 83%,
    #f2480b 100%
  );
  border-radius: inherit;
}

/* ---- 汎用ローディングインジケーター ---- */

/* コンパスSVG（小・デフォルト） */
.compass-spinner {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
/* コンパスSVG（大・中央モーダル用） */
.compass-spinner--lg {
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
}

/* 針グループ: SVGビューボックス中心(32,32)を軸に回転 */
.compass-needle-group {
  transform-box: view-box;
  transform-origin: 32px 32px;
  animation: compass-cw 2s linear infinite;
  will-change: transform;
}

/* 旧アニメーション（磁針風・バウンス付き）— コメントアウト
@keyframes magnetic-spin {
  0%   { transform: rotate(-20deg); animation-timing-function: ease-in; }
  25%  { transform: rotate(180deg); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
  50%  { transform: rotate(380deg); animation-timing-function: ease-in; }
  75%  { transform: rotate(180deg); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
  100% { transform: rotate(-20deg); }
}
*/

@keyframes compass-cw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 中央モーダル（オーバーレイ選択時） */
#map-loading {
  position: fixed;
  top: 50%;
  left: calc(50% + var(--sidebar-w, 296px) / 2);
  transform: translate(-50%, -50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: var(--bg-glass-heavy);
  backdrop-filter: blur(4px);
  border-radius: 12px;
  padding: 24px 32px;
  box-shadow: 0 8px 24px var(--shadow-sm);
  font-size: var(--font-lg);
  font-weight: 500;
  color: #475569;
  letter-spacing: 0.03em;
  pointer-events: none;
}

/* 右下ピル（地図移動/ズーム時） */
#map-tile-loading {
  position: fixed;
  bottom: 42px;
  right: 10px;
  z-index: 200;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  background: var(--bg-glass-heavy);
  backdrop-filter: blur(4px);
  border-radius: 20px;
  padding: 5px 10px 5px 6px;
  box-shadow: 0 2px 8px var(--shadow-sm);
  font-size: var(--font-base);
  color: #475569;
  pointer-events: none;
}

/* ---- 枠エクスポート テレイン情報入力ダイアログ ---- */
#export-terrain-dialog {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--overlay-base);
  display: flex;
  align-items: center;
  justify-content: center;
}
.export-dialog-box {
  background: var(--bg-surface);
  border-radius: 12px;
  padding: 24px 28px 20px;
  width: min(92vw, 340px);
  box-shadow: 0 8px 32px var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.export-dialog-title {
  margin: 0;
  font-size: 15px;
  font-weight: var(--font-semi);
  color: var(--text-ink);
}
.export-dialog-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: var(--font-base);
  color: var(--text-sub);
  font-weight: 500;
}
/* カスケードステップ */
.export-dialog-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.export-dialog-step-label {
  font-size: var(--font-sm);
  font-weight: var(--font-semi);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* 地方・都道府県のピルボタン群 */
.export-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.export-pill-btn {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--slider-track);
  background: var(--bg-hover);
  font-size: var(--font-base);
  font-family: inherit;
  cursor: pointer;
  color: var(--text-main);
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.export-pill-btn:hover { background: var(--bg-hover-btn); }
.export-pill-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
/* テレイン一覧（縦リスト） */
.export-item-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 160px;
  overflow-y: auto;
}
.export-item-btn {
  padding: 7px 12px;
  border-radius: 7px;
  border: 1px solid #e0e0e0;
  background: var(--bg-subtle);
  font-size: var(--font-md);
  font-family: inherit;
  cursor: pointer;
  color: var(--text-main);
  text-align: left;
  transition: background 0.12s, border-color 0.12s;
}
.export-item-btn:hover { background: var(--bg-select); }
.export-item-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.export-dialog-input {
  font-size: var(--font-lg);
  padding: 7px var(--chevron-pad-r) 7px 10px;
  /* 印刷ダイアログ独自外観: 大きめ角丸・薄灰背景で select{} を上書き */
  border: 1px solid var(--slider-track);
  border-radius: 7px;
  font-family: inherit;
  color: var(--text-dark);
  background-color: var(--bg-subtle);
  transition: border-color 0.15s;
}
.export-dialog-input:focus {
  border-color: var(--primary);
  background-color: var(--bg-surface);
}
.export-dialog-btns {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.export-dialog-btn {
  padding: 7px 18px;
  border-radius: 7px;
  border: 1px solid var(--slider-track);
  background: var(--bg-hover);
  font-size: var(--font-md);
  font-family: inherit;
  cursor: pointer;
  color: var(--text-main);
  transition: background var(--transition-fast);
}
.export-dialog-btn:hover { background: var(--bg-hover-btn); }
.export-dialog-btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.export-dialog-btn--primary:hover { background: var(--primary-hover); }
/* 詳細情報フィールド群 */
.export-detail-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.export-detail-field {
  display: flex;
  align-items: center;
  gap: 8px;
}
.export-detail-label {
  font-size: var(--font-base);
  color: var(--text-sub);
  width: 60px;
  flex-shrink: 0;
}
.export-detail-input {
  flex: 1;
  min-width: 0;
  font-size: var(--font-md);
}

/* =================================================================
   サイドバー: スペーサー + 環境設定ボタン
   ================================================================= */

/* アイコンバー内で残りスペースを埋め、ボタンを下部に寄せる */
.sidebar-nav-spacer {
  flex: 1;
}

/* 環境設定モーダルを開くボタン（sidebar-nav-btn と完全同一スタイル） */
.sidebar-modal-btn {
  width: 44px;
  height: 52px;
  border: none;
  background: transparent;
  color: #000;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: background var(--transition), color var(--transition);
  position: relative;
  flex-shrink: 0;
  padding: 0;
}
.sidebar-modal-btn:hover {
  background: rgba(0,0,0,0.07);
  color: #000;
}

/* =================================================================
   環境設定モーダル
   ================================================================= */

/* 全画面暗転オーバーレイ */
#sys-settings-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--overlay-mid);
  align-items: center;
  justify-content: center;
}
#sys-settings-modal.visible { display: flex; }

/* モーダル本体: サイズのみ個別定義（装飾は .modal-wrapper で共通管理） */
#sys-settings-wrapper {
  width: min(92vw, 1040px);
  height: min(88vh, 720px);
}

/* ボディ: 2列横並び（左: スケール設定 / 右: シミュレーター設定） */
#sys-settings-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* 各列 */
.env-col {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  min-width: 0;
}

/* 列間の縦区切り線 */
.env-divider {
  width: 1px;
  background: #e0e0e0;
  flex-shrink: 0;
  margin: 8px 0;
}

/* =================================================================
   PC シミュレーター ポーズHUD（シンプルなボタンのみ）
   ================================================================= */

#pc-sim-pause-hud {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.68);
  z-index: 9800;
  align-items: center;
  justify-content: center;
}

#pause-hud-card {
  background: rgba(18, 26, 38, 0.95);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 14px;
  padding: 22px 26px 20px;
  width: min(90vw, 280px);
  color: #dde4ed;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#pause-hud-title {
  text-align: center;
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 18px;
  letter-spacing: 0.06em;
  color: #ffffff;
}

.pause-hud-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pause-hud-btn {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 7px;
  font-size: var(--font-base);
  font-family: inherit;
  cursor: pointer;
  background: rgba(255,255,255,0.1);
  color: #dde4ed;
  transition: background 0.15s;
  letter-spacing: 0.02em;
}
.pause-hud-btn:hover { background: rgba(255,255,255,0.2); }

.pause-hud-btn--primary {
  background: var(--primary);
  color: var(--on-primary);
}
.pause-hud-btn--primary:hover { background: var(--primary-hover); }

.pause-hud-btn--danger {
  background: rgba(185, 40, 40, 0.7);
  color: #fff;
}
.pause-hud-btn--danger:hover { background: rgba(185, 40, 40, 0.92); }

/* ---- 印刷・エクスポート カスタムコントロールボタン ----
   アイコン: @watergis/maplibre-gl-export (MIT License) より流用 */
.print-ctrl-btn {
  width: 29px;
  height: 29px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='512' width='512' fill='%23333' viewBox='0 0 512 512'%3E%3Cpath d='m422.5 99v-24c0-41.355-33.645-75-75-75h-184c-41.355 0-75 33.645-75 75v24z'/%3E%3Cpath d='m118.5 319v122 26 15c0 16.568 13.431 30 30 30h214c16.569 0 30-13.432 30-30v-15-26-122zm177 128h-80c-8.284 0-15-6.716-15-15s6.716-15 15-15h80c8.284 0 15 6.716 15 15s-6.716 15-15 15zm0-64h-80c-8.284 0-15-6.716-15-15s6.716-15 15-15h80c8.284 0 15 6.716 15 15s-6.716 15-15 15z'/%3E%3Cpath d='m436.5 129h-361c-41.355 0-75 33.645-75 75v120c0 41.355 33.645 75 75 75h13v-80h-9c-8.284 0-15-6.716-15-15s6.716-15 15-15h24 304 24c8.284 0 15 6.716 15 15s-6.716 15-15 15h-9v80h14c41.355 0 75-33.645 75-75v-120c0-41.355-33.645-75-75-75zm-309 94h-48c-8.284 0-15-6.716-15-15s6.716-15 15-15h48c8.284 0 15 6.716 15 15s-6.716 15-15 15z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 70%;
  border: none;
  cursor: pointer;
  padding: 0;
}
.print-ctrl-btn:hover { background-color: rgba(0,0,0,0.05); }

/* ================================================================
   CustomSelect — JS が生成するカスタムドロップダウンのスタイル
   ネイティブ <select> の open 状態はブラウザ制御のため CSS で変更不可。
   makeCustomSelect() が .cascade-* クラスを使ってカスタムUIを構築する。
   ================================================================ */

/* ---- ラッパー div: レイアウト制御のみ ----
   元 select のクラスを継承して flex/width 等を引き継ぐ。
   ビジュアル（背景・枠・影）は内側の .cascade-btn が担当するためここでリセット。
   !important で元クラスの視覚プロパティを確実に上書きする。 */
.custom-select-wrap {
  display: inline-flex;
  align-items: stretch;
  box-sizing: border-box;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  outline: none !important;
  cursor: default;
}

/* ---- トリガーボタン: ラッパー全体を占有 ----
   外観は .cascade-btn で定義済み。ここではレイアウトと継承のみ。 */
.custom-select-wrap > .cascade-btn {
  flex: 1;
  min-width: 0;
  font-size: inherit;   /* 元クラスの font-size を引き継ぐ */
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- ドロップダウンパネル: スクロール制限 ---- */
.custom-select-menu {
  max-height: 50vh;
  overflow-y: auto;
}

/* ---- ID 別レイアウト調整（ラッパーに data-select-id が設定される） ---- */
/* #speed-select は flex-shrink:0 が必要（ID が hidden select に残るため wrapper で再定義） */
.custom-select-wrap[data-select-id="speed-select"] { flex-shrink: 0; }

/* ---- .scale-ctrl-select 専用: 地図コントロール外観をボタンに適用 ---- */
.custom-select-wrap.scale-ctrl-select { height: 29px; }
.custom-select-wrap.scale-ctrl-select > .cascade-btn {
  height: 100%;
  background-color: var(--bg-surface);
  border: none;
  box-shadow: 0 0 0 2px var(--shadow-xs);
  border-radius: 4px;
  padding: 0 var(--chevron-pad-r) 0 8px;
}
.custom-select-wrap.scale-ctrl-select > .cascade-btn:hover {
  background-color: var(--bg-select);
}

/* ---- .export-dialog-input 専用: 印刷ダイアログ外観をボタンに適用 ---- */
.custom-select-wrap.export-dialog-input > .cascade-btn {
  background-color: var(--bg-subtle);
  border: 1px solid var(--slider-track);
  border-radius: 7px;
  color: var(--text-dark);
  font-size: var(--font-lg);
  padding: 7px var(--chevron-pad-r) 7px 10px;
  transition: border-color 0.15s;
}
.custom-select-wrap.export-dialog-input > .cascade-btn:hover {
  border-color: var(--primary);
  background-color: var(--bg-surface);
}