/* ==========================================================================
   ベイクマップ統合ツール

   元は単一 HTML（tools 外で管理している bakemap-merger.html）。
   WordPress の固定ページに載せるため、CSS と JS をファイルに分けたもの。

   **セレクターはすべて #bakemap-merger の中に閉じ込めてある。** 元は
   body / main / h2 / button / .row といった素の要素・汎用クラスを直接
   指定していて、そのまま持ち込むとテーマ側の見た目を壊す。
   元ファイルを更新したら、この閉じ込めをやり直すこと。
   ========================================================================== */
#bakemap-merger{
    --bg:#1b1d21; --bg2:#232629; --bg3:#2b2f34; --line:#3a3f45;
    --fg:#d8dbe0; --fg2:#9aa1aa; --acc:#4b9fd6; --acc2:#357ba8;
    --err:#e5534b; --warn:#e0a33e; --ok:#4caf7d;
    --barh:40px;          /* 最上段バーの高さ */
  }
#bakemap-merger *{box-sizing:border-box}
#bakemap-merger{height:100%}
#bakemap-merger{
    margin:0; background:var(--bg); color:var(--fg);
    font:13px/1.5 "Segoe UI","Yu Gothic UI",Meiryo,system-ui,sans-serif;
    overflow:hidden; user-select:none;
    display:flex; flex-direction:column;
  }
#bakemap-merger button{
    font:inherit; color:var(--fg); background:var(--bg3);
    border:1px solid var(--line); border-radius:3px; padding:4px 10px; cursor:pointer;
  }
#bakemap-merger button:hover:not(:disabled){background:#363b41; border-color:#4d545c}
#bakemap-merger button:disabled{opacity:.4; cursor:default}
#bakemap-merger button.primary{background:var(--acc2); border-color:var(--acc)}
#bakemap-merger button.primary:hover:not(:disabled){background:var(--acc)}
#bakemap-merger button.bigrun{
    width:100%; padding:11px 10px; font-size:14px; font-weight:600; letter-spacing:.03em;
    background:var(--acc2); border-color:var(--acc); border-radius:4px;
  }
#bakemap-merger button.bigrun:hover:not(:disabled){background:var(--acc); border-color:#6fb6e4}
#bakemap-merger input[type=text], #bakemap-merger input[type=number], #bakemap-merger select{
    font:inherit; color:var(--fg); background:var(--bg); border:1px solid var(--line);
    border-radius:3px; padding:3px 5px;
  }
#bakemap-merger input[type=color]{
    width:36px; height:24px; padding:0; background:none;
    border:1px solid var(--line); border-radius:3px; cursor:pointer;
  }
#bakemap-merger input[type=range]{accent-color:var(--acc); vertical-align:middle}
#bakemap-merger label{color:var(--fg2)}
/* 3ペインの最上段（h2 ×2 とプレビューバー）は高さを揃えて一本の帯に見せる */
#bakemap-merger h2{font-size:12px; letter-spacing:.08em; color:var(--fg2); text-transform:uppercase;
     margin:0; padding:0 10px; border-bottom:1px solid var(--line); background:var(--bg2);
     display:flex; align-items:center; gap:8px; min-height:var(--barh)}
#bakemap-merger h2 .sp{flex:1}
#bakemap-merger h2 button{padding:1px 8px; font-size:12px; letter-spacing:0; text-transform:none}
/* #settings は再描画されるので、入力欄を持つ枠は外側に固定する（入力中のフォーカス落ち防止） */
#bakemap-merger #prefixBox{flex:none; display:flex; align-items:center; gap:6px; flex-wrap:wrap;
    padding:8px 10px; border-bottom:1px solid var(--line)}
#bakemap-merger #prefixBox .lb{width:52px; color:var(--fg2); flex:none}
#bakemap-merger #prefixBox #prefix{flex:1; min-width:78px}
#bakemap-merger #prefixPick{flex:none; max-width:100px; font-size:12px}
#bakemap-merger #prefixEx{flex-basis:100%; margin-left:58px; color:var(--fg2); font-size:12px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
#bakemap-merger #exportBox{flex:none; padding:10px; border-top:1px solid var(--line); background:var(--bg2)}
#bakemap-merger #exportBox .hint{margin-top:6px}
#bakemap-merger #previewBar .sep{width:1px; height:14px; background:var(--line)}
#bakemap-merger #previewBar input[type=number]{width:56px; text-align:right}
/* 通知は下端のログ風トースト。本文レイアウトを押し下げないよう浮かせる */
#bakemap-merger #alerts{
    position:fixed; left:352px; right:352px; bottom:calc(var(--dockh, 26px) + 10px); z-index:60;
    display:flex; flex-direction:column; gap:3px; align-items:flex-start;
    pointer-events:none;
  }
#bakemap-merger .alert{
    pointer-events:auto; max-width:100%;
    display:flex; gap:8px; align-items:baseline;
    padding:5px 9px; font-size:13px; user-select:text;
    border:1px solid; border-left-width:3px; border-radius:3px;
    box-shadow:0 3px 14px rgba(0,0,0,.5);
    overflow-wrap:anywhere;
    animation:toastIn .16s ease-out;
    transition:opacity .45s ease, transform .45s ease;
  }
#bakemap-merger .alert.fade{opacity:0; transform:translateY(5px)}
  @keyframes toastIn{ from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none} }
#bakemap-merger .alert.err{background:#3a1f1ef2; color:#ffb9b4; border-color:#6d3630; border-left-color:var(--err)}
#bakemap-merger .alert.warn{background:#3a3120f2; color:#ffd89a; border-color:#6b5a2e; border-left-color:var(--warn)}
#bakemap-merger .alert.ok{background:#1e3329f2; color:#a9e6c6; border-color:#2f5b46; border-left-color:var(--ok)}
#bakemap-merger .alert .tm{flex:none; font:12px/1.5 Consolas,monospace; opacity:.55}
#bakemap-merger .alert .bd{flex:1; min-width:0}
#bakemap-merger .alert .x{flex:none; cursor:pointer; opacity:.5; padding:0 2px}
#bakemap-merger .alert .x:hover{opacity:1}
#bakemap-merger main{display:grid; grid-template-columns:340px minmax(0,1fr) 340px; flex:1; min-height:0}
#bakemap-merger main>section{display:flex; flex-direction:column; min-height:0; min-width:0}
#bakemap-merger #paneLeft{border-right:1px solid var(--line)}
#bakemap-merger #paneRight{border-left:1px solid var(--line)}
#bakemap-merger .scroll{overflow:auto; flex:1; min-height:0}
#bakemap-merger #drop{
    margin:10px; padding:16px 10px; text-align:center; color:var(--fg2);
    border:1px dashed var(--line); border-radius:4px; cursor:pointer;
  }
#bakemap-merger #drop:hover{border-color:var(--acc); color:var(--fg)}
#bakemap-merger.dragging #drop{border-color:var(--acc); background:#1f2c36; color:var(--fg)}
/* 空のときだけ出す薄いアイコン。
     左右のペインは同じ高さなので、それぞれの中央に置けば自動的に高さが揃う。 */
#bakemap-merger #paneLeft, #bakemap-merger #paneRight{position:relative}
#bakemap-merger .emptyIcon{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:var(--fg2); opacity:.14; pointer-events:none;
  }
#bakemap-merger .emptyIcon[hidden]{display:none}
#bakemap-merger .emptyIcon svg{width:clamp(60px, 9vh, 104px); height:auto}
#bakemap-merger.dragging #emptyL{opacity:.32; color:var(--acc)}
#bakemap-merger .group{border-bottom:1px solid var(--line)}
#bakemap-merger .group>.gh{display:flex; align-items:center; gap:6px; padding:6px 10px;
    background:var(--bg2); cursor:pointer}
#bakemap-merger .group.sel>.gh{background:#2c3a45; box-shadow:inset 3px 0 0 var(--acc)}
#bakemap-merger .group>.gh .nm{font-weight:600}
#bakemap-merger .group>.gh .ct{color:var(--fg2)}
#bakemap-merger .group>.gh .sw{width:12px; height:12px; border:1px solid var(--line); border-radius:2px; flex:none}
#bakemap-merger .group>.gh .st{margin-left:auto; font-size:11px; color:var(--fg2)}
#bakemap-merger .group.dirty>.gh .st{color:var(--warn)}
#bakemap-merger .item{display:flex; align-items:center; gap:6px; padding:4px 8px 4px 10px;
    border-top:1px solid #2a2d31; cursor:pointer}
#bakemap-merger .item:hover{background:#23272c}
#bakemap-merger .item.ex{opacity:.4}
#bakemap-merger .item img{width:34px; height:34px; object-fit:contain; background:#111;
    border:1px solid var(--line); border-radius:2px; flex:none}
#bakemap-merger .item .meta{flex:1; min-width:0}
#bakemap-merger .item .fn{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; user-select:text}
#bakemap-merger .item .sub{font-size:11px; color:var(--fg2)}
#bakemap-merger .item .sub .bad{color:var(--warn)}
#bakemap-merger .item .sub .er{color:var(--err)}
#bakemap-merger .item .ops{display:flex; flex-direction:column; gap:1px; flex:none}
#bakemap-merger .item .ops button{padding:0 5px; line-height:14px; font-size:11px}
#bakemap-merger .item select{max-width:100px; font-size:12px; flex:none}
/* 折り返すと h2 と高さが揃わなくなるので nowrap。
     幅が足りないときはタイトルから先に詰める */
#bakemap-merger #previewBar{display:flex; align-items:center; gap:10px; padding:0 10px; flex:none;
    background:var(--bg2); border-bottom:1px solid var(--line); flex-wrap:nowrap;
    overflow:hidden; height:var(--barh)}
#bakemap-merger #previewBar label{display:flex; align-items:center; gap:3px; flex:none; white-space:nowrap}
#bakemap-merger #previewBar button, #bakemap-merger #previewBar select, #bakemap-merger #previewBar .sep{flex:none}
#bakemap-merger #pvTitle{font-weight:600; color:var(--fg); flex:0 1 auto; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#bakemap-merger #stage{flex:1; min-height:0; position:relative; overflow:hidden; cursor:grab;
    background:repeating-conic-gradient(#26292d 0% 25%, #1e2124 0% 50%) 50%/16px 16px}
#bakemap-merger #stage.pan{cursor:grabbing}
#bakemap-merger #view{position:absolute; inset:0; width:100%; height:100%; display:block}
#bakemap-merger #stageMsg{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:var(--fg2); pointer-events:none; text-align:center; padding:20px}
/* 下端のログドック（Blender のインフォエディタ相当） */
#bakemap-merger #logDock{flex:none; display:flex; flex-direction:column;
    background:var(--bg2); border-top:1px solid var(--line)}
#bakemap-merger #logResize{height:4px; cursor:ns-resize; background:var(--bg3); display:none}
#bakemap-merger #logResize:hover{background:var(--acc2)}
#bakemap-merger #logDock.open #logResize{display:block}
#bakemap-merger #logList{display:none; overflow:auto; background:#15171a; height:200px}
#bakemap-merger #logDock.open #logList{display:block}
#bakemap-merger #logBar{display:flex; align-items:center; gap:12px; padding:3px 10px; flex:none;
    font-size:12px; color:var(--fg2); user-select:text}
#bakemap-merger #logBar button{padding:1px 8px; font-size:12px}
#bakemap-merger #logLast{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:46%}
#bakemap-merger #logBar #stFile, #bakemap-merger #logBar #stPx, #bakemap-merger #logBar #stCov{white-space:nowrap}
#bakemap-merger .le{display:flex; gap:8px; padding:2px 10px; font:12px/1.6 Consolas,"Yu Gothic UI",monospace;
    border-bottom:1px solid #1e2124; overflow-wrap:anywhere; color:var(--fg2)}
#bakemap-merger .le .t{opacity:.45; flex:none}
#bakemap-merger .le .k{flex:none; width:44px}
#bakemap-merger .le.err{color:#ffb9b4}
#bakemap-merger .le.err .k{color:var(--err)}
#bakemap-merger .le.warn{color:#ffd89a}
#bakemap-merger .le.warn .k{color:var(--warn)}
#bakemap-merger .le.ok{color:#a9e6c6}
#bakemap-merger .le.ok .k{color:var(--ok)}
#bakemap-merger .sect{padding:10px; border-bottom:1px solid var(--line)}
#bakemap-merger .sect>.t{font-weight:600; margin-bottom:8px}
#bakemap-merger .row{display:flex; align-items:center; gap:8px; margin-bottom:7px; flex-wrap:wrap}
#bakemap-merger .row:last-child{margin-bottom:0}
#bakemap-merger .row .lb{width:92px; color:var(--fg2); flex:none}
#bakemap-merger .hint{font-size:12px; color:var(--fg2); margin-top:6px; line-height:1.45}
#bakemap-merger .hint b{color:var(--warn); font-weight:600}
#bakemap-merger table.kv{width:100%; border-collapse:collapse; font-size:12px}
#bakemap-merger table.kv td{padding:2px 4px; border-bottom:1px solid #2a2d31; color:var(--fg2)}
#bakemap-merger table.kv td:last-child{color:var(--fg); text-align:right; user-select:text}
#bakemap-merger #prog{height:3px; background:var(--bg3); display:none; flex:none}
#bakemap-merger #prog>i{display:block; height:100%; width:0; background:var(--acc); transition:width .08s}
#bakemap-merger.busy #prog{display:block}
#bakemap-merger pre.log{margin:8px 0 0; padding:8px 10px; background:#15171a; border:1px solid var(--line);
    border-radius:3px; font:12px/1.5 Consolas,monospace; white-space:pre-wrap; user-select:text;
    max-height:40vh; overflow:auto; color:var(--fg)}


/* --- WordPress の固定ページに置くための調整 -------------------------------
   元は画面いっぱいを使うアプリで、body に height:100% と overflow:hidden を
   掛けていた。ページの中では入れ物の高さを決め、その中だけで完結させる。 */

#bakemap-merger {
	position: relative;          /* 通知（#alerts）の基準 */
	display: flex;
	flex-direction: column;
	/* アプリ表示のテンプレートでは、テーマが --szkk-app-h で画面の高さを
	   公開している。記事の中に置かれたときは、その場に収まる高さに落とす。 */
	height: var(--szkk-app-h, min(86vh, 900px));
	min-height: 560px;
	border: 1px solid var(--line);
	border-radius: 4px;
	overflow: hidden;
	/* 元の指定を打ち消す。ページ全体には効かせない。 */
	margin: 0;
}

/* 通知は画面ではなく、ツールの中に浮かせる。 */
#bakemap-merger #alerts {
	position: absolute;
}

/* 3ペインは横幅を要求する。狭い画面では横スクロールに逃がす
   （縦に積むと、左右のペインを見ながら中央を操作できなくなる）。 */
@media (max-width: 1060px) {
	#bakemap-merger {
		overflow-x: auto;
	}

	#bakemap-merger main {
		min-width: 1020px;
	}

	#bakemap-merger #alerts {
		left: 12px;
		right: 12px;
	}
}

/* 画面を占めるときは、枠線と角丸を外して端まで届かせる。 */
.szkk-app #bakemap-merger {
	border-inline: 0;
	border-block-start: 0;
	border-radius: 0;
}