/* ============================================================
   dialog.css — ダイアログ / 設定パネル / フォーカスモード
   色は theme.css の変数のみを参照します。
   ============================================================ */

dialog{border:0;border-radius:16px;padding:0;box-shadow:0 24px 70px rgba(15,23,42,.28);overflow:hidden;background:var(--panel);color:var(--text)}
dialog::backdrop{background:rgba(15,23,42,.36);backdrop-filter:blur(2px)}

.dialog-body{display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:18px;overflow:hidden}
.dialog-body h2{margin:0 0 14px;font-size:18px}

.confirm{width:min(460px,calc(100vw - 40px));max-height:calc(100vh - 32px)}
/* 大きいファイル確認ダイアログ */
#bigFileDialog{max-height:none}
#bigFileDialog .dialog-body{display:flex;flex-direction:column;height:auto}
.bigfile-msg{margin:0 0 8px;font-size:14px;line-height:1.6;color:var(--text)}
.bigfile-info{margin:0 0 12px;font-size:12px;color:var(--muted)}
/* 機能トグル（構文/差分）のグループ */
.bigfile-opts{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
/* 「以降この確認を表示しない」はダイアログ自体の設定なので、区切り線の下に分離して配置 */
.bigfile-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--border);
}
.bigfile-dontshow{margin:0;color:var(--muted);font-size:12px}
.bigfile-foot .dialog-actions{margin:0}
.settings-dialog{width:min(760px,calc(100vw - 48px));height:min(800px,calc(100vh - 40px))}
/* 言語選択ダイアログ（初回） */
.lang-select-dialog{width:min(420px,calc(100vw - 48px));height:auto}
.lang-select-dialog h2{text-align:center;font-size:18px;margin:0 0 18px}
.lang-select-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lang-select-item{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 10px;font-size:15px;font-weight:700;border-radius:12px;
  border:1px solid var(--border);background:var(--panel);color:var(--text);
  cursor:pointer;transition:background .14s ease,border-color .14s ease,transform .1s ease;
}
.lang-select-item .lang-badge{min-width:28px;height:22px;font-size:13px}
.lang-select-item:hover{background:var(--brand-tint-2);border-color:var(--brand-soft);color:var(--brand-ink)}
.lang-select-item:active{transform:translateY(1px)}
/* 使い方/更新履歴/プライバシー/利用規約/ライセンス/お問い合わせ のダイアログは
   .doc-modal（base.css）に統一した。本文整形（.doc-content）は下記をそのまま使う。 */
.guide-content,.history-content,.doc-content{overflow:auto;line-height:1.75;color:var(--text)}
/* スクロール可能な本文に出る自動フォーカス枠を抑制（閲覧用エリアなので枠不要） */
.guide-content:focus,.history-content:focus,.doc-content:focus,
.guide-content:focus-visible,.history-content:focus-visible,.doc-content:focus-visible{outline:none}
/* 見出し・段落・リスト・インラインコード・表などの本文タイポグラフィは base.css の .doc-md に集約
   （Diff Viewer / ようこそ と完全に同じ見た目にするため。各 content div に doc-md を併記済み）。
   ここではコードブロック（.codeblock）固有の整形だけを、詳細度で .doc-md を上書きして残す。 */
/* コードブロック（.codeblock）内の <code>/<pre>/<行> には、インラインコード装飾を
   適用しない。地色を透過させて .codeblock の暗い地色(--code-bg)を活かし、文字色は --code-fg。
   これをしないと .doc-content code の薄い背景(--inline-code-bg)に白文字(--code-fg)が乗って
   コードブロックの中身が見えなくなる（ライセンス表示などの閲覧ダイアログで発生）。
   .preview スコープの同等ルール（editor.css）をダイアログ用に複製したもの。 */
.guide-content .codeblock .cb-body code,.history-content .codeblock .cb-body code,.doc-content .codeblock .cb-body code,
.guide-content .codeblock .cb-body pre,.history-content .codeblock .cb-body pre,.doc-content .codeblock .cb-body pre{
  background:transparent;padding:0;border-radius:0;color:var(--code-fg);
}
/* 行(.cb-line)は地色・文字色だけ揃える。padding は editor.css の行番号ガター用指定
   （.codeblock.show-ln .cb-line{padding-left:3.6em}）を残す。ここで padding:0 にすると
   絶対配置の行番号(::before)と本文が重なるため、padding は上書きしない。 */
.guide-content .codeblock .cb-line,.history-content .codeblock .cb-line,.doc-content .codeblock .cb-line{
  background:transparent;color:var(--code-fg);
}
/* 長い行のコードブロック（ライセンス全文など）は横スクロールで収める */
.guide-content pre,.history-content pre,.doc-content pre{max-width:100%;overflow:auto;}

.guide-note{
  margin-top:12px;padding:10px 12px;border:1px solid var(--brand-tint-4);
  border-radius:12px;background:var(--brand-tint-1);color:var(--brand-ink);font-weight:700;
}
.history-version{padding:10px 0;border-top:1px solid var(--brand-tint-3)}
.history-version:first-child{border-top:0;padding-top:0}

.settings-dialog{min-height:min(780px,calc(100vh - 32px))}
.settings-dialog .dialog-body{height:100%;grid-template-rows:auto auto auto minmax(460px,1fr) auto}
.settings-search{display:block;margin-bottom:16px}
.settings-search input{width:100%;padding:8px 12px;font-size:14px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--text);box-sizing:border-box}
.settings-search-none{display:block;margin-top:6px;color:var(--muted);font-size:13px}
.settings-search-none[hidden]{display:none}
.settings.searching{display:block;overflow:auto}
.settings.searching .settings-menu{display:none}
.settings.searching .section{height:auto;overflow:visible}
.settings.searching .section h3{margin-top:14px}
/* 検索中はグループ区切り線を隠す（該当 set-field だけを並べるため、宙に浮いた線を出さない） */
.settings.searching .set-divider{display:none}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid var(--brand-tint-3)}
/* 統一フッター：初期状態に戻す＝左、キャンセル/確定＝右。spacerで押し分ける */
.commit-actions{align-items:center}
.commit-actions .commit-spacer{flex:1 1 auto}
.commit-actions button[disabled]{opacity:var(--btn-disabled-op);cursor:not-allowed}
.settings-dialog .dialog-actions{align-self:end;width:100%}

.settings{
  display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;
  min-height:480px;height:100%;overflow:hidden;
}
.settings-menu{display:grid;align-content:start;gap:2px;padding-right:14px;border-right:1px solid var(--border)}
.settings-menu button{
  width:100%;position:relative;border:0;border-radius:0;background:transparent;box-shadow:none;
  padding:10px 2px 8px;text-align:left;color:var(--muted);font-weight:700;
}
.settings-menu button:hover{background:transparent;color:var(--text)}
.settings-menu button::after{
  content:"";position:absolute;left:2px;right:100%;bottom:2px;height:2px;border-radius:999px;
  background:var(--brand);transition:right .16s;
}
.settings-menu button.active{color:var(--brand-ink);font-weight:800}
.settings-menu button.active::after{right:18px}

.settings-main{min-height:0;overflow:hidden;padding-left:14px}
/* padding は overflow:auto でクリップされる focus アウトライン（2px+offset1px＝外側3px）の逃げ。
   入力欄がセクション左端に接していても紫の枠が左で欠けないよう左右に余白を取る。 */
.section{height:100%;overflow:auto;padding:3px 6px}
.section[hidden]{display:none}
.section h3{margin:0 0 10px;font-size:15px}

.grid{display:grid;gap:12px}
.grid label{display:grid;gap:6px;color:var(--muted);font-size:12px;font-weight:700}
.settings-main,.section,.section-body,.set-field,.set-group,.grid,.grid label,.inline{min-width:0}
.grid input[type=number],.grid input[type=text],
.set-field input[type=number],.set-field input[type=text]{
  min-height:34px;max-width:100%;min-width:0;border:1px solid var(--border);
  border-radius:8px;padding:6px 10px;background:var(--surface);color:var(--text);
  font-size:13px;
}
.grid select,.set-field select{width:100%;min-height:34px;max-width:100%;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inline select,.inline input{min-width:0}

/* ===== 設定ウインドウ 統一パターン（set-* 名前空間） =====
   セクション本体は縦フロー。設定1件＝.set-field（ラベル/コントロール＋説明を縦に積む）。
   サブグループは .set-group（小見出し .set-group-title ＋ 複数 .set-field）。 */
.section-body{display:flex;flex-direction:column;gap:16px}
.set-field{display:grid;gap:6px}
.set-field>label:not(.check){color:var(--muted);font-size:12px;font-weight:700}
.set-group{display:flex;flex-direction:column;gap:12px}
.set-group-title{font-size:13px;font-weight:700;color:var(--text);margin:0}
/* set-field/group の中では縦間隔を grid/flex の gap に委ねる（.sub-open 既定の margin-top を打ち消す） */
.set-field>.sub-open,.set-group>.sub-open{margin-top:0}

.note,.set-field-desc{color:var(--muted);font-size:12px;line-height:1.6;font-weight:400}
.set-field-desc{margin:0}
/* チェックボックス項目の説明は、チェック文字の真下に揃うよう字下げする（16px＋gap8px≒26px）。 */
.set-field-check .set-field-desc{margin-left:26px}
.check{display:flex!important;gap:8px!important;align-items:center;color:var(--text)!important;font-size:13px!important;font-weight:500!important}
.check input{flex:0 0 auto;width:16px;height:16px}
/* 空白可視化の個別ON/OFF（マスターの下に字下げして横並び） */
.ws-subopts{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 0 26px}
.ws-subopts .check{font-size:12px!important;font-weight:500!important}
.check.opt-disabled{opacity:.42}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);border-radius:999px;padding:4px 8px;font-size:12px;background:var(--surface)}
.chip button{border:0;background:transparent;box-shadow:none;padding:0;color:var(--danger)}
.inline{display:flex;gap:8px;flex-wrap:wrap}
.inline select,.inline input{flex:1 1 240px}

/* ---- テーマ選択（追加機能） ---- */
.theme-grid{display:flex;flex-wrap:wrap;gap:10px}
.theme-swatch{
  display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;
  border:2px solid var(--border);border-radius:12px;padding:10px;background:var(--surface);
  width:96px;font-size:12px;font-weight:700;color:var(--muted);
}
.theme-swatch:hover{border-color:var(--brand-soft)}
.theme-swatch.active{border-color:var(--brand);color:var(--brand-ink)}
.theme-preview{width:100%;height:36px;border-radius:8px;display:flex;overflow:hidden;border:1px solid var(--border)}
.theme-preview span{flex:1}

/* ---- フォーカスモード ---- */
.focus-exit{
  position:fixed;left:50%;bottom:18px;transform:translate(-50%,90px);z-index:70;
  opacity:0;pointer-events:none;transition:opacity .26s ease,transform .26s ease;
}
/* 全画面中、画面下部にマウスを近づけたときだけ下からスライドして表示 */
.focus-mode.show-focus-exit .focus-exit{opacity:1;pointer-events:auto;transform:translate(-50%,0)}

/* 全画面切替でヘッダー/フッター等が滑らかに開閉するようアニメーション */
.app header,
.footer-links,
.app-footer,
.bottom-bar{
  overflow:hidden;max-height:200px;
  transition:max-height .26s ease,min-height .26s ease,height .26s ease,
             opacity .2s ease,padding .26s ease,margin .26s ease;
}
.focus-mode .app header,
.focus-mode .footer-links,
.focus-mode .app-footer,
.focus-mode .bottom-bar{
  max-height:0;min-height:0;height:0;margin:0;padding:0;border-width:0;
  opacity:0;overflow:hidden;pointer-events:none;
}
.app{transition:padding .26s ease,gap .26s ease}
.focus-mode .app{padding-top:8px;padding-bottom:8px;gap:0}
.focus-mode .workspace{flex:1}
.focus-mode .panel{box-shadow:0 6px 18px rgba(15,23,42,.10)}

@media (prefers-reduced-motion: reduce){
  .app header,.footer-links,.app-footer,.bottom-bar,.app{transition:none}
}

/* ===== 拡張子フィルターダイアログ ===== */
.filter-note{font-size:12px;color:var(--muted);margin:0 0 12px;line-height:1.6}
.filter-actions-top{display:flex;gap:8px;margin-bottom:12px}
.filter-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;max-height:50vh;overflow-y:auto;padding-right:4px}
.filter-group{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--surface)}
.filter-group-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;margin-bottom:8px;color:var(--text)}
.filter-group-title label{cursor:pointer}
.filter-ext-list{display:flex;flex-wrap:wrap;gap:6px 14px}
.filter-ext{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);cursor:pointer;font-family:Consolas,monospace}
.filter-ext input,.filter-group-cb{cursor:pointer;accent-color:var(--brand)}

/* フィルターダイアログ：本体を上詰めにする */
#filterDialog .dialog-body{grid-template-rows:auto auto auto minmax(0,1fr) auto}
#filterDialog .filter-groups{align-content:start}
#charsetDialog .dialog-body{grid-template-rows:auto auto auto minmax(0,1fr) auto}
#indentDialog .dialog-body{display:flex;flex-direction:column;height:100%}
#charsetDialog .filter-groups{align-content:start}

/* フィルターダイアログ「一致しないファイルも表示」チェック */
.filter-show-others{display:flex;align-items:center;gap:8px;margin:10px 2px 0;font-size:13px;color:var(--text);cursor:pointer}
.filter-show-others input{width:16px;height:16px;cursor:pointer}

/* インデント設定（設定ダイアログ） */
/* 区切り・余白は .section-body のフロー（gap＋.set-divider）に委ねる（旧: ここで上下罫線を独自に引いていた） */
.indent-settings{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.indent-settings .indent-set-title{margin:6px 0 0;padding-left:0}
.indent-settings .indent-set-title:first-child{margin-top:0}
.indent-settings button.ghost{margin:0;display:block;width:100%;text-align:left;padding:9px 14px}
/* インデント設定ダイアログ：ジャンル別セクション */
.indent-width-section{margin-bottom:14px}
.indent-width-group-title{font-size:12px;font-weight:700;color:var(--brand-ink,var(--text));margin:0 0 6px;letter-spacing:.02em}
.indent-width-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px 12px}
.indent-set-title{font-size:13px;font-weight:700;color:var(--text);margin:10px 0 6px}
.indent-set-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px;font-size:13px}
.indent-set-row .radio{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.indent-width-rows{display:block;max-height:280px;overflow-y:auto;padding:4px 2px}
/* サブダイアログ内では固定の max-height をやめ、残りの縦スペースいっぱいに伸ばして
   ボタンを底に固定する（リストとボタンの間の隙間対策）。あふれた分だけ内部スクロール */
.subpage-dialog .indent-width-rows{flex:1 1 auto;min-height:0;max-height:none}
/* リストとボタンの間に最低限の余白を確保 */
.subpage-dialog .dialog-actions{margin-top:12px}
.indent-width-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px}
.indent-width-row .indent-ext-name{color:var(--text-dim);font-family:var(--editor-font,monospace)}

/* ===== サブ設定ダイアログ内の入力欄サイズを統一 ===== */
/* フォントサイズ・高さ・paddingを揃える（バラバラだったのを統一） */
.subpage-dialog input[type="number"],
.subpage-dialog select{
  font-size:13px;height:32px;line-height:30px;
}
.indent-width-row input{width:58px;text-align:center}

/* インデント設定ダイアログの既定幅の行（ラベル＋入力を左寄せで近づける） */
/* font-size を .indent-set-row と揃える（揃えないと「新規ファイルのインデント」と大きさが食い違う） */
.indent-default-row{display:flex;align-items:center;gap:12px;margin:10px 0;font-size:13px}
.tpl-types{margin:14px 0}
/* テンプレ保存／新規作成ダイアログ（コンパクト・自動高さ・入力は左寄せ幅可変） */
.compact-dialog{width:min(560px,calc(100vw - 48px));max-height:calc(100vh - 48px);border:0;border-radius:16px;padding:0;background:var(--panel);color:var(--text);box-shadow:0 20px 60px rgba(0,0,0,.28)}
.compact-dialog .dialog-body{display:flex;flex-direction:column;gap:2px;height:auto;padding:20px 22px;overflow:auto;grid-template-rows:none}
.compact-dialog h2{margin:0 0 14px;font-size:18px}
.compact-dialog .indent-default-row{display:flex;align-items:center;gap:12px;margin:8px 0}
.compact-dialog .indent-default-row > span{min-width:96px;flex:0 0 auto;color:var(--muted)}
.compact-dialog .indent-default-row input,
.compact-dialog .indent-default-row select{flex:1;min-width:0;width:auto;text-align:left}
.compact-dialog .indent-default-row input[type=text],
.compact-dialog .indent-default-row input[type=number]{
  padding:8px 11px;border:1px solid var(--border);border-radius:7px;
  background:var(--surface);color:var(--text);box-sizing:border-box;font-size:14px;
}
.compact-dialog .indent-default-row input[type=text]:focus,
.compact-dialog .indent-default-row input[type=number]:focus{border-color:var(--brand);outline:none}
/* ジャンル入力は履歴ドロップダウン（sh-wrap）に入るので▼ボタン分の余白を確保 */
.compact-dialog .indent-default-row .sh-wrap > input{padding-right:30px}
.compact-dialog .dialog-actions{margin-top:16px}
.tpl-types-title,.tpl-custom-title{font-weight:700;font-size:13px;margin-bottom:8px;color:var(--text)}
.tpl-types-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 14px}
.tpl-types-grid .check{font-size:13px}
/* テンプレ保存ダイアログのチェックボックス：サイズ統一＋緑チェックの見やすいデザイン */
#tplSaveDialog .check input[type="checkbox"],
#snippetSaveDialog .check input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;margin:0;flex:0 0 18px;
  width:18px;height:18px;border:1.5px solid var(--border);border-radius:5px;
  background:var(--surface);cursor:pointer;position:relative;
  transition:background .12s ease,border-color .12s ease;
}
#tplSaveDialog .check input[type="checkbox"]:hover,#snippetSaveDialog .check input[type="checkbox"]:hover{border-color:var(--brand)}
#tplSaveDialog .check input[type="checkbox"]:checked,#snippetSaveDialog .check input[type="checkbox"]:checked{background:var(--brand);border-color:var(--brand)}
#tplSaveDialog .check input[type="checkbox"]:checked::after,#snippetSaveDialog .check input[type="checkbox"]:checked::after{
  content:"";position:absolute;left:5px;top:1.5px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
#tplSaveDialog .check input[type="checkbox"]:focus-visible,#snippetSaveDialog .check input[type="checkbox"]:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.tpl-h1-row{margin:10px 0}
.tpl-custom-toggle{margin-top:10px;font-size:13px}
.tpl-custom{margin:6px 0 4px}
.tpl-custom-lines{max-height:220px;overflow:auto;border:1px solid var(--border);border-radius:8px;padding:6px 10px;background:var(--surface)}
.tpl-line{display:flex;align-items:center;gap:8px;padding:2px 0;font-size:12.5px}
.tpl-line-text{font-family:var(--mono,monospace);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tplGenre,#tplName,#createFileName{flex:1;min-width:0;padding:7px 10px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--text)}
#createTplSel{flex:1;min-width:0}
.indent-default-row > span{min-width:132px}
.indent-default-row input{width:64px;text-align:center}
.indent-default-row select{width:150px}

/* 新規ファイル設定：拡張子ごとの行（拡張子名＋改行＋文字コード） */
.newfile-row{display:grid;grid-template-columns:84px 120px 200px;align-items:center;gap:10px;margin-bottom:6px}
.newfile-row select{width:100%}
#newFileDialog .dialog-body{display:flex;flex-direction:column;height:100%}

/* ===== サブ設定ページ（インデント/新規ファイル）のページ送りアニメ ===== */
/* 設定→サブ設定は右から左へスライドイン、戻るときは左から右へスライドアウト */
.subpage-dialog{
  /* 中央に重ねて表示。軽いフェード＋ごく僅かな浮き上がり */
  animation:subpageIn .26s cubic-bezier(.22,.61,.36,1);
}
@keyframes subpageIn{
  from{opacity:0;transform:translateY(10px) scale(.99)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
/* 戻るとき（JS で .closing を付与） */
.subpage-dialog.closing{
  animation:subpageOut .22s ease forwards;
}
@keyframes subpageOut{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(8px) scale(.99)}
}
/* 設定ダイアログ側：サブを開いている間は左へ少し引っ込めて奥行きを出す */
dialog#settingsDialog.pushed-left{
  transform:translateX(-40px) scale(.985);opacity:.55;
  transition:transform .32s cubic-bezier(.22,.61,.36,1),opacity .32s ease;
  filter:saturate(.9);
}

/* サブページのヘッダー（戻るボタン＋タイトル） */
.subpage-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.subpage-back{
  width:34px;height:34px;flex:none;border:1px solid var(--border);background:var(--panel);
  color:var(--text);border-radius:10px;font-size:22px;line-height:1;cursor:pointer;
  display:grid;place-items:center;padding:0 0 2px;transition:background .15s,border-color .15s,transform .15s;
}
.subpage-back:hover{background:var(--brand-tint-1);border-color:var(--brand-tint-4);transform:translateX(-2px)}
.subpage-head h2{margin:0}

/* 新規ファイル設定：列ヘッダー（表形式） */
.newfile-head{margin-bottom:4px;padding-bottom:2px;border-bottom:1px solid var(--border)}
.newfile-head span{font-size:11px;font-weight:700;color:var(--text-dim);letter-spacing:.02em}

/* ゴミ箱ダイアログ */
.trash-dialog .dialog-body{min-width:min(640px,92vw);max-width:680px}
.trash-list{max-height:52vh;overflow:auto;display:flex;flex-direction:column;gap:6px;margin:10px 0;padding:2px}
.trash-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border:1px solid var(--border);border-radius:8px}
.trash-meta{min-width:0;flex:1}
.trash-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trash-org{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.trash-row button{flex:none}
/* #20: ゴミ箱のページャー（Grep の grep-pager と同じ見た目） */
.trash-pager{display:flex;align-items:center;justify-content:center;gap:16px;padding:6px 10px;margin-bottom:6px}
.trash-pager[hidden]{display:none}
.trash-pager-btn{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);cursor:pointer;font-size:20px;line-height:1}
.trash-pager-btn:hover:not(:disabled){border-color:var(--brand);background:var(--brand-tint-2)}
.trash-pager-btn:disabled{opacity:.4;cursor:default}
.trash-pager-info{font-size:13px;font-weight:600;color:var(--text);min-width:96px;text-align:center}

/* 設定：ゴミ箱グループ（区切りは .set-divider に統一。ここは中身のレイアウトのみ） */
.trash-group{display:flex;flex-direction:column;gap:10px}
.trash-group .note{margin:0}
.trash-group #openTrashBtn{align-self:stretch;width:100%}
.trash-loc-row{display:grid;gap:6px;margin:6px 0;color:var(--muted);font-size:12px;font-weight:700}
.trash-loc-row > span{min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.4}
.trash-loc-row select{width:100%;min-height:36px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trash-loc-row.disabled{opacity:.45}

/* 起動時のゴミ箱確認ダイアログ */
.trash-start-dialog .dialog-body{min-width:min(440px,92vw);max-width:480px}
.trash-start-dialog .check{margin:12px 0}
/* 起動時の「サイズが大きいため閉じたファイル」一覧ダイアログ。
   ファイル数が多くなっても画面に収まるよう、リストはスクロールする。 */
.closed-files-dialog .dialog-body{min-width:min(480px,92vw);max-width:560px}
.closed-files-dialog .closed-files-list{
  list-style:none;margin:8px 0 16px;padding:6px 0;
  max-height:240px;overflow-y:auto;
  border:1px solid var(--border);border-radius:6px;
  background:var(--surface);
}
.closed-files-dialog .closed-files-list li{
  padding:6px 14px;font-size:13px;color:var(--text);
  border-bottom:1px solid color-mix(in srgb, var(--border) 45%, transparent);
  word-break:break-all;
}
.closed-files-dialog .closed-files-list li:last-child{border-bottom:none}

/* 削除確認のファイル/フォルダ一覧（多い時はスクロール） */
#confirmMsg{white-space:pre-line}
.confirm-list{list-style:none;margin:10px 0 0;padding:8px;max-height:240px;overflow:auto;border:1px solid var(--border);border-radius:8px;font-size:13px;background:var(--surface-2,rgba(127,127,127,.05))}
.confirm-list li{padding:3px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* バグ4: 削除確認ダイアログが縦に大きくなりすぎて見切れるのを防ぐ */
.confirm .dialog-body{max-height:calc(100vh - 32px);display:flex;flex-direction:column;overflow:hidden}
.confirm #confirmMsg{flex:0 0 auto}
.confirm .confirm-list{flex:0 1 auto;min-height:0;max-height:280px;overflow:auto}
.confirm .dialog-actions{flex:0 0 auto;margin-top:12px}

/* バグ1: 設定ダイアログ内のメッセージ表示 */
.settings-msg{flex:1 1 auto;margin-right:auto;font-size:13px;color:var(--muted);align-self:center;text-align:left;line-height:1.4}
.settings-msg.error{color:var(--danger)}
.settings-msg[hidden]{display:none}

/* MDS個別設定ダイアログ */
/* 本体はダイアログ幅いっぱいに広げる。旧: max-width:560px がダイアログ(620px)より狭く、
   区切り線・ボタン行が右端まで届かず右に隙間ができていた。 */
.mds-dialog .dialog-body{min-width:min(520px,92vw);max-width:none;width:100%;max-height:86vh;display:flex;flex-direction:column}
.mds-grid{gap:8px 20px;overflow-y:auto;flex:1;min-height:0;grid-template-columns:repeat(2, minmax(0,1fr));align-content:start;width:100%}
.mds-grid .check{margin:0;white-space:nowrap;min-width:0}
.mds-grid .check span{overflow:hidden;text-overflow:ellipsis}
/* MDSルール（標準Lint以外）のグリッドは1列＝ラベルが長いので各項目を1行で表示 */
.mds-dialog:not(.mdcfg-dialog) .mds-grid{grid-template-columns:1fr}
/* 設定内の区切り線（単一定義。.section-body の flex gap が上下の間隔を作るので margin は持たせない） */
.set-divider{border:0;border-top:1px solid var(--border);margin:0}
/* サブダイアログの小見出しは本体設定の .set-group-title と同じタイポに統一（13px・テキスト色・太字・下線なし） */
.mds-group-title{font-size:13px;font-weight:700;color:var(--text);margin:12px 0 6px}
.mds-group-title:first-of-type{margin-top:4px}

/* ショートカット チートシート */
.shortcut-sheet h4{font-size:13px;font-weight:700;color:var(--muted);margin:14px 0 6px;border-bottom:1px solid var(--border);padding-bottom:4px}
.shortcut-sheet h4:first-child{margin-top:0}
.shortcut-sheet dl{margin:0;display:flex;flex-direction:column;gap:5px}
.shortcut-sheet dl>div{display:flex;align-items:center;justify-content:space-between;gap:12px}
.shortcut-sheet dt{color:var(--text);font-size:13px}
.shortcut-sheet dd{margin:0;white-space:nowrap;display:flex;align-items:center;gap:3px;flex-wrap:wrap;justify-content:flex-end}
.shortcut-sheet kbd{display:inline-block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;line-height:1.4;
  padding:1px 6px;border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:5px;background:var(--surface);color:var(--text)}
.shortcut-sheet .note{margin-top:14px}
/* 設定ダイアログ内のインライン通知（フォント追加の結果・エラー） */
.set-inline-msg{margin:8px 0 0;font-size:12px;color:var(--muted);padding:6px 10px;border-radius:8px;background:var(--soft)}
.set-inline-msg.error{color:var(--danger);background:var(--danger-tint,rgba(207,34,46,.08))}
.bigfile-cap-note{display:block;margin-top:2px;font-size:11px;color:var(--muted)}

/* 確認・メッセージ系ダイアログ（SME.showDialog）はレベルで枠色とアイコンを切り替える。
   アイコンは #confirmIcon（JS が設定）、枠色は .dlg-info/.dlg-warning/.dlg-error。 */
#confirmDialog{border-left:4px solid var(--link)}
#confirmDialog.dlg-info{border-left-color:var(--link)}
#confirmDialog.dlg-warning{border-left-color:var(--warn-border)}
#confirmDialog.dlg-error{border-left-color:var(--danger)}
#confirmDialog .dialog-body h2{display:flex;align-items:center;gap:7px}
#confirmDialog .dlg-icon{font-size:17px;line-height:1}
#confirmDialog .dlg-icon:empty{display:none}

.md044-area{width:100%;box-sizing:border-box;min-height:120px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;line-height:1.55;resize:vertical}
.md044-area:focus{outline:none;border-color:var(--brand)}
.md044-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}

/* 標準Lintルール個別設定ダイアログ：左メニュー＋右コンテンツ（設定ダイアログ風） */
.mdcfg-dialog{width:min(880px,calc(100vw - 48px));height:min(680px,calc(100vh - 48px))}
.mds-dialog:not(.mdcfg-dialog){width:min(620px,calc(100vw - 48px))}
.mdcfg-layout{width:100%}
.mdcfg-main{min-width:0}
.mdcfg-dialog .dialog-body{height:100%;grid-template-rows:auto minmax(0,1fr) auto;max-width:none;width:100%}
.mdcfg-layout{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;min-height:0;height:100%;overflow:hidden}
.mdcfg-nav{display:grid;align-content:start;gap:2px;padding-right:14px;border-right:1px solid var(--border)}
.mdcfg-nav button{width:100%;position:relative;border:0;border-radius:0;background:transparent;box-shadow:none;padding:10px 2px 8px;text-align:left;color:var(--muted);font-weight:700}
.mdcfg-nav button:hover{background:transparent;color:var(--text)}
.mdcfg-nav button.active{color:var(--brand-ink);font-weight:800}
.mdcfg-nav button.active::after{content:"";position:absolute;left:2px;right:18px;bottom:2px;height:2px;border-radius:999px;background:var(--brand)}
.mdcfg-main{min-height:0;overflow:auto;padding-left:4px}
.mdcfg-section[hidden]{display:none}
.mdcfg-section .md044-area{width:100%;box-sizing:border-box}

/* 確認ダイアログの「今後表示しない」チェック行 */
.confirm-dontask{display:flex;align-items:center;gap:7px;margin:10px 0 2px;font-size:13px;color:var(--muted);cursor:pointer}
.confirm-dontask[hidden]{display:none}

/* ============================================================
   ローディング画面（ワークスペース読み込み中・フルスクリーン）
   theme の CSS 変数を使うので、各テーマの色がそのまま反映される。
   ============================================================ */
.boot-loader{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 120% at 50% 0%, var(--brand-tint-1) 0%, var(--surface) 55%, var(--panel) 100%);
  opacity:0;transition:opacity .12s ease;
}
.boot-loader[hidden]{display:none}
.boot-loader.show{opacity:1}
.boot-loader.hiding{opacity:0}
.boot-loader-card{
  display:flex;flex-direction:column;align-items:center;gap:26px;
  padding:44px 56px;border-radius:22px;
  background:var(--panel);
  border:1px solid var(--border);
  box-shadow:0 24px 70px -24px color-mix(in srgb, var(--brand) 40%, transparent), 0 4px 14px rgba(0,0,0,.06);
  transform:translateY(8px) scale(.98);opacity:0;
  animation:boot-card-in .5s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes boot-card-in{to{transform:translateY(0) scale(1);opacity:1}}

/* スピナー：二重リングが逆回転＋中央ドットが脈動 */
.boot-spinner{position:relative;width:72px;height:72px}
.boot-ring{
  position:absolute;inset:0;border-radius:50%;
  border:4px solid transparent;
  border-top-color:var(--brand);border-right-color:var(--brand-soft);
  animation:boot-spin 1s linear infinite;
}
.boot-ring-2{
  inset:12px;border-width:3px;
  border-top-color:var(--brand-soft);border-left-color:var(--brand);
  border-right-color:transparent;
  animation:boot-spin 1.4s linear infinite reverse;
  opacity:.7;
}
.boot-dot{
  position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;
  border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--brand) 50%, transparent);
  animation:boot-pulse 1.2s ease-in-out infinite;
}
@keyframes boot-spin{to{transform:rotate(360deg)}}
@keyframes boot-pulse{
  0%,100%{transform:scale(.85);box-shadow:0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent)}
  50%{transform:scale(1.1);box-shadow:0 0 0 10px color-mix(in srgb, var(--brand) 0%, transparent)}
}

/* タイトル：ブランドグラデーションが流れる文字 */
.boot-title{
  font-size:19px;font-weight:800;letter-spacing:.02em;
  background:linear-gradient(90deg, var(--brand) 0%, var(--brand-soft) 35%, var(--brand) 70%);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:boot-shine 2.4s linear infinite;
}
@keyframes boot-shine{to{background-position:200% center}}

/* サブタイトル：現在の作業状態（フォルダ読み込み中／Lintスキャン中 N/M 等）。
   タイトルより小さく薄く、長文も省略表示にする。空のときは高さを取らない。 */
.boot-subtitle{
  font-size:12px;color:var(--muted);letter-spacing:.01em;
  max-width:280px;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-height:1em;
}
.boot-subtitle:empty{display:none}

/* プログレスバー：擬似進捗＋光が流れるシマー */
.boot-progress{
  width:240px;height:7px;border-radius:99px;overflow:hidden;
  background:var(--brand-tint-2);
}
.boot-progress-bar{
  height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg, var(--brand) 0%, var(--brand-soft) 100%);
  transition:width 1.1s cubic-bezier(.22,.61,.36,1);
  position:relative;overflow:hidden;
}
.boot-progress-bar::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform:translateX(-100%);
  animation:boot-shimmer 1.1s ease-in-out infinite;
}
@keyframes boot-shimmer{to{transform:translateX(100%)}}

/* アニメーション抑制設定の尊重 */
@media (prefers-reduced-motion: reduce){
  .boot-ring,.boot-ring-2,.boot-dot,.boot-title,.boot-progress-bar::after,.boot-loader-card{animation:none}
  .boot-loader-card{opacity:1;transform:none}
}

/* リストボックス（select）のドロップダウン項目にテーマ色を適用。
   ネイティブのままだとテーマによっては選択項目の文字色が地色に埋もれて見にくいため。 */
select option{background:var(--surface);color:var(--text)}
select option:checked,select option:hover{background:var(--brand-tint-2);color:var(--text)}

/* ===== ワークスペース選択ダイアログ ===== */
.ws-recent-list{display:flex;flex-direction:column;gap:6px;margin:10px 0;max-height:340px;overflow-y:auto}
.ws-recent-row{display:flex;align-items:stretch;gap:6px}
.ws-recent-open{flex:1;display:flex;align-items:center;gap:10px;text-align:left;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);cursor:pointer}
.ws-recent-open:hover{background:var(--brand-tint-2);border-color:var(--brand-soft)}
.ws-recent-row.latest .ws-recent-open{border-color:var(--brand-soft);background:var(--brand-tint-1)}
.ws-recent-name{flex:1;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ws-recent-latest{flex:0 0 auto;font-size:11px;font-weight:700;color:var(--brand-ink);background:var(--brand-tint-3);border-radius:999px;padding:2px 8px}
.ws-recent-time{flex:0 0 auto;font-size:12px;color:var(--muted)}
.ws-recent-del{flex:0 0 auto;width:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--muted);cursor:pointer}
.ws-recent-del:hover{background:var(--danger);border-color:var(--danger);color:#fff}

/* ===== ワークスペース選択ダイアログ（ドロップダウン式・コンパクト） ===== */
/* select のドロップダウン（リストボックス）がダイアログの overflow でクリップされて
   隠れないよう、このダイアログだけ overflow を visible にする。 */
#wsSelectDialog{overflow:visible}
.ws-select-dialog .dialog-body{display:flex;flex-direction:column;gap:4px;height:auto;width:min(600px,92vw);padding:20px 22px;overflow:visible;grid-template-rows:none}
.ws-sel-row{display:flex;align-items:center;gap:8px;margin:12px 0 4px;flex-wrap:nowrap}
.ws-sel-label{flex:0 0 auto;font-weight:700}
.ws-sel-combo{flex:1 1 auto;min-width:0;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text)}
.ws-sel-row #wsSelBrowse{flex:0 0 auto;white-space:nowrap}

/* ===== プロパティダイアログ ===== */
.props-body{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.props-row{display:flex;gap:12px;align-items:baseline}
.props-key{flex:0 0 96px;font-weight:700;color:var(--muted)}
.props-val{flex:1;min-width:0;word-break:break-all}
.props-note{margin-top:10px;font-size:12px;color:var(--muted);line-height:1.5}

/* 非表示にした確認・ガイドの管理ダイアログ */
.mh-list{display:flex;flex-direction:column;gap:10px;margin:10px 0 4px}
.mh-item{display:flex;align-items:center;gap:9px;font-size:14px;cursor:pointer}

/* F3: テンプレートを適用（見出しマージ）ダイアログ */
.apply-tpl-dialog{max-width:680px}
#applyTplTarget{margin:2px 0 10px;font-size:12px;color:var(--muted);word-break:break-all}
.apply-tpl-plan{display:flex;flex-direction:column;gap:8px;max-height:48vh;overflow:auto;margin-top:8px}
.atpl-row{border:1px solid var(--border);border-radius:8px;padding:8px 10px;background:var(--panel)}
.atpl-row-head{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.atpl-toggle{flex:0 0 auto;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:var(--muted);font-size:11px;line-height:1;cursor:pointer;transition:transform .15s ease}
.atpl-row.collapsed .atpl-toggle{transform:rotate(-90deg)}
.atpl-row.collapsed .atpl-row-body{display:none}
.atpl-row-body{margin-top:8px}
.atpl-empty{color:var(--muted);font-style:italic}
.atpl-content-ex{border-left:3px solid var(--atpl-existing-edge)}
.atpl-content-tpl{border-left:3px solid var(--atpl-template-edge)}
.atpl-badge{flex:0 0 auto;font-size:11px;line-height:1.6;padding:0 8px;border-radius:999px;border:1px solid var(--border);color:var(--muted);background:var(--brand-tint-1);white-space:nowrap}
.atpl-badge-new{color:var(--ok);border-color:var(--ok);background:transparent}
.atpl-badge-conflict{color:var(--warn-ink);border-color:var(--warn-border);background:var(--warn-tint)}
.atpl-badge-file-only{color:var(--muted)}
.atpl-heading{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.atpl-hint{margin:6px 0 4px;font-size:12px;color:var(--warn-ink);line-height:1.5}
.atpl-choice{display:flex;flex-wrap:wrap;gap:14px;margin:4px 0 8px}
.atpl-choice .radio{display:inline-flex;align-items:center;gap:5px;font-size:13px;cursor:pointer}
.atpl-conflict-body{min-width:0}
/* 既存／テンプレートの横並び。選んだ方を強調、もう片方は薄く。 */
.atpl-side-by-side{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.atpl-col{min-width:0;border:1px solid var(--border);border-radius:6px;padding:6px;border-top-width:3px}
.atpl-col-ex{border-top-color:var(--atpl-existing-edge);background:var(--atpl-existing-bg)}
.atpl-col-tpl{border-top-color:var(--atpl-template-edge);background:var(--atpl-template-bg)}
.atpl-col.unsel{opacity:.5}
.atpl-col.sel{box-shadow:0 0 0 2px var(--brand-tint-3)}
.atpl-col-title{font-size:11px;font-weight:600;margin-bottom:4px}
.atpl-col-ex .atpl-col-title{color:var(--atpl-existing)}
.atpl-col-tpl .atpl-col-title{color:var(--atpl-template)}
.atpl-prev-body{margin:0;padding:6px 8px;background:var(--inline-code-bg);border:1px solid var(--border);border-radius:6px;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:160px;overflow:auto}
/* 「両方」用：背後の色付きオーバーレイ（hl）に色分け、手前の透明な textarea で編集。 */
.atpl-both-wrap{position:relative;border:1px solid var(--brand-border);border-radius:6px;background:var(--panel);overflow:hidden}
.atpl-both-wrap:focus-within{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-tint-3)}
.atpl-both-hl,.atpl-both-edit{margin:0;padding:8px 10px;border:0;box-sizing:border-box;font-family:var(--editor-font);font-size:12px;line-height:1.55;white-space:pre;tab-size:2}
.atpl-both-hl{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;color:var(--text)}
.atpl-both-edit{position:relative;z-index:1;display:block;width:100%;min-height:150px;resize:vertical;background:transparent;color:transparent;caret-color:var(--text);overflow:auto;outline:none}
.atpl-hl-ex{color:var(--atpl-existing)}
.atpl-hl-tpl{color:var(--atpl-template)}
.atpl-hl-mk{color:var(--muted)}
.atpl-hl-pl{color:var(--text)}

/* ============================================================
   backup-dialog — バックアップ履歴の一覧
   （色・形状はデザイントークン参照。色の直書きはしない）
   ============================================================ */
.backup-dialog .backup-target-row{margin:.2rem 0 .6rem}
.backup-dialog .backup-target{font-family:var(--editor-font);font-size:12px;color:var(--muted);word-break:break-all}
.backup-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:.5rem}
.backup-sel-info{color:var(--muted);font-size:12px}
.backup-list{list-style:none;margin:0;padding:0;max-height:46vh;overflow:auto;border:1px solid var(--border);border-radius:var(--btn-radius-sm)}
.backup-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-bottom:1px solid var(--border)}
.backup-item:last-child{border-bottom:0}
.backup-item:hover{background:var(--brand-tint-1)}
.backup-chk{flex:none;width:16px;height:16px}
.backup-meta{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.backup-ts{font-weight:600;color:var(--text);font-size:13px}
.backup-size{color:var(--muted);font-size:11px}
.backup-actions{flex:none;display:flex;gap:6px}
.backup-actions button{font-size:var(--btn-font-sm);padding:4px 10px}