/*!
 * sim-ui-core.css
 * simファミリー（現象シミュレーション系アプリ：冬の季節風、海溝型地震と津波 等）共通UI骨格
 * 冷たい季節風アプリ / 海溝型地震アプリ の実装から共通部分のみを抽出。
 *
 * 使い方：
 *   各アプリのルート要素に .simui-app クラスを付ける（例: <div class="kisetsufu-root simui-app">）。
 *   すべてのルールを .simui-app 配下にスコープしているため、
 *   Cocoonテーマや他プラグインの同名クラスと衝突しない。
 *
 * 注意：ページ全体の html/body やテーマ側スクロールには干渉しない。
 */

.simui-app{
  --simui-navy:#102846;
  --simui-navy2:#091a31;
  --simui-gold:#f4cf5f;
  --simui-ink:#20364e;
}
.simui-app,.simui-app *{box-sizing:border-box}
.simui-app{
  width:100%;min-height:100%;overflow:clip;
  font-family:"SimUI Noto Sans JP","Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  color:var(--simui-ink);
}
.simui-app button,.simui-app input{font:inherit;touch-action:manipulation}

/* ---- 全体シェル ---- */
.simui-shell{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}

/* ---- ヘッダー ---- */
.simui-header{position:relative;height:78px;flex:0 0 78px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 16px;background:var(--simui-navy);color:#fff;box-shadow:0 3px 12px #0004;z-index:20}
.simui-h1{margin:0;flex:none;font-size:clamp(16px,1.45vw,24px);font-weight:900;white-space:nowrap}
.simui-header-explain{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-width:0;width:max-content;max-width:min(56%,620px);text-align:center;line-height:1.25;pointer-events:none}
.simui-header-stage{font-size:clamp(14px,1.35vw,21px);font-weight:900;color:var(--simui-gold)}
.simui-header-note{margin-top:3px;font-size:clamp(11px,.92vw,15px);font-weight:700;color:#edf7ff}
.simui-head-actions{display:flex;justify-content:flex-end;gap:8px}
.simui-head-btn{width:42px;height:42px;border:1px solid #ffffff48;border-radius:50%;background:#fff;color:var(--simui-navy);font-weight:900;font-size:20px;cursor:pointer;box-shadow:0 3px 8px #0003}
.simui-head-btn:focus-visible,.simui-tool:focus-visible{outline:4px solid #fff;outline-offset:2px}

/* ---- メイン舞台 ---- */
.simui-main{min-height:0;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:12px 18px}

/* ---- 1〜2ペインの舞台枠（単体型/比較型 共通） ---- */
.simui-stage{position:relative;width:min(100%,calc((100dvh - 190px)*1672/941));max-height:100%;aspect-ratio:1672/941;display:flex;gap:8px;transition:width .2s,aspect-ratio .2s}
.simui-stage.is-compare{width:min(100%,calc((100dvh - 190px)*1672/941));aspect-ratio:1672/941}
.simui-stage.is-compare .simui-label{font-size:clamp(8px,.82vw,14px)}
.simui-pane{position:relative;min-width:0;flex:1;overflow:hidden;border:5px solid #fff;border-radius:18px;background:#7cd1f2;box-shadow:0 12px 34px #112b6e75;isolation:isolate}
.simui-pane[hidden]{display:none}

/* ---- 表示モード切替タブ（断面/上空/同時 のような比較型で使用） ---- */
.simui-view-switch{display:flex;padding:4px;border-radius:15px;background:#e7edf5;box-shadow:inset 0 1px 4px #0f2b4926}
.simui-view-btn{min-width:72px;min-height:36px;padding:0 14px;border:0;border-radius:11px;background:transparent;color:#48647d;font-weight:900;font-size:13px;cursor:pointer}
.simui-view-btn[aria-selected="true"]{background:#fff;color:var(--simui-navy);box-shadow:0 3px 10px #0f2b4929}

/* ---- 重ね合わせ画像レイヤー（背景写真・雲・完成図などの共通枠） ---- */
.simui-scene{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;user-select:none;-webkit-user-drag:none}
/* ---- canvas/SVGなどのエフェクト重ね描画レイヤーの共通枠 ---- */
.simui-fx-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* ---- 左上：場面の見出しカード ---- */
.simui-hud{position:absolute;z-index:10;left:2.2%;top:3%;max-width:48%;display:flex;flex-direction:column;gap:8px}
.simui-stage-card{padding:10px 14px;border-left:6px solid var(--simui-gold);border-radius:12px;background:#102846e8;color:#fff;box-shadow:0 5px 14px #0005}
.simui-stage-title{font-size:clamp(16px,1.8vw,27px);font-weight:900;line-height:1.1}
.simui-stage-note{margin-top:4px;font-size:clamp(11px,1.04vw,16px);font-weight:700;line-height:1.45;color:#e8f4ff}

/* ---- 凡例 ---- */
.simui-legend{align-self:flex-start;display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:7px 9px;border-radius:10px;background:#fffdf3e8;color:#22374e;font-size:clamp(10px,.86vw,14px);font-weight:900;box-shadow:0 3px 10px #0003}
.simui-key{display:inline-flex;align-items:center;gap:4px}
.simui-swatch{width:15px;height:8px;border-radius:3px;background:#1755d8}

/* ---- 左下ドック：凡例＋タイムライン＋場面タグ ---- */
.simui-controls{width:min(100%,calc((100dvh - 190px)*1672/941));display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.simui-bottom-dock{position:static;z-index:12;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.simui-timeline{width:100%;display:grid;grid-template-columns:auto 1fr;column-gap:11px;row-gap:3px;align-items:center;padding:8px 13px;border-radius:13px;background:#091d37e8;color:#fff;box-shadow:0 4px 12px #0005}
.simui-time{grid-row:1/3;min-width:56px;text-align:center;font-weight:900;font-variant-numeric:tabular-nums}
.simui-timeline input{grid-column:2;grid-row:1;width:100%;accent-color:var(--simui-gold)}
.simui-scene-ticks{grid-column:2;grid-row:2;display:flex;justify-content:space-between;color:#bcd2ea;font-size:11px;font-weight:900;line-height:1;padding:0 2px}

/* ---- 右下フロートツールバー ---- */
.simui-toolbar{position:static;z-index:30;display:flex;flex-direction:row;gap:7px}
.simui-tool{min-width:58px;height:54px;padding:5px 8px;border:0;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:#fffffff2;color:var(--simui-navy);font-size:11px;font-weight:900;cursor:pointer;box-shadow:0 5px 14px #0b1f4f3d,0 1px 4px #0003;transition:transform .15s,box-shadow .15s}
.simui-tool svg{width:24px;height:24px;display:block;fill:currentColor}
.simui-tool.primary{background:var(--simui-gold)}
.simui-tool:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 16px 30px #0b1f4f6e,0 3px 8px #0005}
.simui-tool small,.simui-tool-label{font-size:11px;line-height:1.1;white-space:nowrap}
.simui-tool.is-off{background:#b9c5d2;color:#40566c}

/* ---- 地図・図解ラベル（吹き出し風ピル） ---- */
.simui-label{position:absolute;transform:translate(-50%,-50%);padding:5px 10px;border:2px solid #fff9;border-radius:9px;background:#0b274cdd;color:#fff;font-size:clamp(10px,1.25vw,19px);font-weight:900;line-height:1;white-space:nowrap;text-shadow:0 2px 2px #0008;box-shadow:0 3px 8px #0004}
.simui-label.dot{display:flex;align-items:center;gap:.42em}
.simui-label.dot::before{content:"";width:.62em;height:.62em;border-radius:50%;background:var(--dot,#fff);box-shadow:0 0 0 3px #ffffff33}
.simui-labels.hidden{display:none}

/* ---- 右上：一言メモ用ピル ---- */
.simui-cause-pill{position:absolute;z-index:11;right:2.2%;top:3%;padding:8px 12px;border:2px solid #fff8;border-radius:999px;background:#0b274cdd;color:#fff;font-size:clamp(10px,1vw,15px);font-weight:900;box-shadow:0 3px 9px #0004}
.simui-cause-pill b{color:#ffe16f}

/* ---- スクリーンリーダー専用 ---- */
.simui-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:980px){
  .simui-header{gap:8px}
  .simui-h1{font-size:15px}
  .simui-controls{width:100%}
}
@media(max-width:1180px){
  .simui-h1{display:none}
}
@media(max-width:720px){
  .simui-header{height:68px;flex-basis:68px;padding:7px 8px;gap:7px}
  .simui-header-explain{position:static;transform:none;flex:1;width:auto;max-width:none;text-align:left}
  .simui-head-btn{width:38px;height:38px}
  .simui-main{padding:9px 8px}
  .simui-controls{gap:7px}
  .simui-toolbar{gap:5px}
  .simui-tool{min-width:50px;height:47px;padding:3px 5px}
  .simui-tool svg{width:21px;height:21px}
  .simui-tool-label{font-size:9px}
  .simui-hud{left:1.5%;top:2%;max-width:60%}
  .simui-stage-card{padding:7px 9px}
  .simui-stage-note{display:none}
  .simui-timeline{padding:4px 7px;column-gap:5px}
  .simui-time{min-width:42px;font-size:10px}
  .simui-scene-ticks{font-size:9px}
  .simui-label{padding:3px 5px;border-width:1px}
  .simui-cause-pill{display:none}
  .simui-stage,.simui-stage.is-compare{width:100%}
  .simui-view-switch{padding:3px}
  .simui-view-btn{min-width:54px;padding:0 8px;font-size:11px}
}
@media(max-width:700px){
  .simui-header-stage{font-size:12px}
  .simui-header-note{font-size:9px}
}
@media(max-width:520px) and (orientation:portrait){
  .simui-header{height:94px;flex-basis:94px;align-items:flex-end;justify-content:center;padding:5px 8px}
  .simui-header-explain{position:absolute;left:8px;right:8px;top:5px;text-align:center}
  .simui-header-note{display:none}
  .simui-head-actions{width:100%;justify-content:center}
  .simui-main{justify-content:flex-start;padding:8px}
  .simui-controls{grid-template-columns:1fr;gap:7px}
  .simui-toolbar{justify-content:center;order:2}
  .simui-tool{flex:1;max-width:68px;min-width:52px;height:48px}
  .simui-time{display:none}
}
@media(max-height:620px) and (min-width:521px){
  .simui-header{height:64px;flex-basis:64px}
  .simui-header{justify-content:flex-start}
  .simui-header-explain{left:330px;right:8px;width:auto;max-width:none;transform:translateY(-50%)}
  .simui-header-note{display:none}
  .simui-main{padding-top:6px;padding-bottom:6px;gap:5px}
  .simui-tool{min-width:48px;height:42px}
  .simui-toolbar{gap:5px}
  .simui-timeline{padding-top:3px;padding-bottom:3px}
}
@media(prefers-reduced-motion:reduce){
  .simui-app *{scroll-behavior:auto!important}
  .simui-tool:hover{transform:none}
}

@font-face{
  font-family:"SimUI Noto Sans JP";
  font-style:normal;font-weight:700;font-display:swap;
  src:url("sim-noto-sans-jp.woff2") format("woff2");
}