/* =====================================================
   simulator.css
   ターミナルUI + Docker Hub ブラウザ + レイヤーアニメーション
   ===================================================== */

/* ─────────────────────────────────────
   CSS変数
───────────────────────────────────── */
.docker-sim-widget {
    --c-bg       : #1e1e2e;
    --c-bg-light : #252535;
    --c-header   : #313244;
    --c-border   : #45475a;
    --c-text     : #cdd6f4;
    --c-muted    : #7f849c;
    --c-blue     : #89b4fa;
    --c-green    : #a6e3a1;
    --c-red      : #f38ba8;
    --c-yellow   : #f9e2af;
    --c-docker   : #1d90c8;
    --c-mauve    : #cba6f7;
    --c-teal     : #94e2d5;

    /* レイヤーカラー（下から layer 0, 1, 2）*/
    --c-layer0   : #89b4fa;
    --c-layer1   : #cba6f7;
    --c-layer2   : #94e2d5;

    margin: 2rem 0;
    font-size: 14px;
}

/* ─────────────────────────────────────
   3パネルレイアウト
───────────────────────────────────── */
.sim-panel {
    margin-bottom : 12px;
    border-radius : 10px;
    overflow      : hidden;
    box-shadow    : 0 4px 20px rgba(0, 0, 0, 0.35);
    max-width     : 760px;
}

/* ── ブラウザ風パネル（Docker Hub） ── */
.sim-panel--browser {
    background: #ffffff;
}

.sim-browser-chrome {
    display         : flex;
    align-items     : center;
    gap             : 8px;
    padding         : 8px 12px;
    background-color: #e8e8e8;
    border-bottom   : 1px solid #d0d0d0;
    user-select     : none;
}

.sim-browser-addressbar {
    flex         : 1;
    display      : flex;
    align-items  : center;
    gap          : 5px;
    background   : #ffffff;
    border       : 1px solid #c8c8c8;
    border-radius: 20px;
    padding      : 3px 12px;
    font-family  : sans-serif;
    font-size    : 11px;
    color        : #444;
}

.sim-browser-lock   { font-size: 10px; }
.sim-browser-url-text { color: #222; }

/* ── しくみパネル（アニメーション） ── */
.sim-panel--visual {
    background: var(--c-bg-light);
}

.sim-panel__label {
    font-family : 'SFMono-Regular', 'Cascadia Code', 'Consolas', 'Menlo', monospace;
    font-size   : 11px;
    color       : var(--c-muted);
    padding     : 7px 16px 0;
    user-select : none;
    letter-spacing: 0.04em;
}

/* ── ターミナルパネル ── */
.sim-panel--terminal {
    /* .sim-terminal が内側に来るのでパディング不要 */
    box-shadow: none; /* .sim-terminal 自身が shadow を持つ */
}

/* ─────────────────────────────────────
   ターミナルウィンドウ全体
───────────────────────────────────── */
.sim-terminal {
    background-color : var(--c-bg);
    color            : var(--c-text);
    font-family      : 'SFMono-Regular', 'Cascadia Code', 'Consolas', 'Menlo', monospace;
    border-radius    : 10px;
    overflow         : hidden;
    box-shadow       : 0 8px 32px rgba(0, 0, 0, 0.5);
    max-width        : 760px;
}

/* ─────────────────────────────────────
   ヘッダー（macOS風タイトルバー）
───────────────────────────────────── */
.sim-header {
    display         : flex;
    align-items     : center;
    gap             : 6px;
    padding         : 10px 16px;
    background-color: var(--c-header);
    border-bottom   : 1px solid var(--c-border);
    user-select     : none;
}

.sim-dot {
    display      : inline-block;
    width        : 12px;
    height       : 12px;
    border-radius: 50%;
}
.sim-dot--red    { background-color: #f38ba8; }
.sim-dot--yellow { background-color: #f9e2af; }
.sim-dot--green  { background-color: #a6e3a1; }

.sim-title {
    margin-left   : 8px;
    font-size     : 12px;
    color         : var(--c-muted);
    letter-spacing: 0.05em;
}

/* ─────────────────────────────────────
   アニメーションビジュアルスロット
───────────────────────────────────── */
.sim-visual-slot {
    /* しくみパネル内に収まるため border 不要 */
}

/* ─────────────────────────────────────
   ビジュアル本体レイアウト
───────────────────────────────────── */
.sim-viz {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : 14px 20px;
    background     : var(--c-bg-light);
    gap            : 12px;
    min-height     : 120px;
}

/* ── 左右のエンドポイント ── */
.sim-viz__side {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : 4px;
    flex-shrink   : 0;
    width         : 90px;
    text-align    : center;
}

.sim-viz__icon {
    position: relative;
    width   : 44px;
    height  : 44px;
    color   : var(--c-muted);
    transition: color 0.4s, filter 0.4s;
}
.sim-viz__icon svg {
    width : 100%;
    height: 100%;
}

.sim-viz__hub .sim-viz__icon { color: var(--c-docker); }

.sim-viz__name {
    font-size  : 11px;
    font-weight: 600;
    color      : var(--c-text);
}
.sim-viz__url {
    font-size: 10px;
    color    : var(--c-muted);
}

/* ── Hub 側レイヤー帯 ── */
.sim-viz__hub-layers {
    display       : flex;
    flex-direction: column;
    gap           : 3px;
    width         : 80px;
    margin-top    : 4px;
}

.sim-viz__hub-layer {
    height       : 7px;
    border-radius: 3px;
    opacity      : 0.45;
    transition   : opacity 0.3s;
}

[data-state="pulling"] .sim-viz__hub-layer {
    opacity  : 1;
    animation: layer-glow 1.2s ease-in-out infinite;
}
[data-state="pulling"] .sim-viz__hub-layer[data-layer="0"] { animation-delay: 0s;    }
[data-state="pulling"] .sim-viz__hub-layer[data-layer="1"] { animation-delay: 0.2s;  }
[data-state="pulling"] .sim-viz__hub-layer[data-layer="2"] { animation-delay: 0.4s;  }

[data-state="complete"] .sim-viz__hub-layer { opacity: 0.7; }
[data-state="error"]    .sim-viz__hub-layer { opacity: 0.2; }

/* ── PC 側レイヤースロット ── */
.sim-viz__local-layers {
    display       : flex;
    flex-direction: column;
    gap           : 3px;
    width         : 80px;
    margin-top    : 4px;
}

.sim-viz__local-layer {
    height       : 7px;
    border-radius: 3px;
    border       : 1px dashed var(--c-border);
    background   : transparent;
    transition   : background 0.35s ease, border-color 0.35s ease;
}

.sim-viz__local-layer.is-filled[data-layer="0"] {
    background  : var(--c-layer0);
    border-color: var(--c-layer0);
}
.sim-viz__local-layer.is-filled[data-layer="1"] {
    background  : var(--c-layer1);
    border-color: var(--c-layer1);
}
.sim-viz__local-layer.is-filled[data-layer="2"] {
    background  : var(--c-layer2);
    border-color: var(--c-layer2);
}

/* ローカルPC の完了バッジ */
.sim-viz__badge {
    font-size      : 10px;
    color          : var(--c-green);
    background     : rgba(166, 227, 161, 0.12);
    border         : 1px solid rgba(166, 227, 161, 0.3);
    border-radius  : 4px;
    padding        : 1px 5px;
    max-width      : 84px;
    overflow       : hidden;
    text-overflow  : ellipsis;
    white-space    : nowrap;
    min-height     : 16px;
    opacity        : 0;
    transition     : opacity 0.3s;
}

/* ローカルPC の画像枚数バッジ */
.sim-viz__img-count {
    font-size  : 9px;
    color      : var(--c-muted);
    opacity    : 0;
    transition : opacity 0.3s;
    white-space: nowrap;
}

/* 完了チェックアイコン */
.sim-viz__check {
    position  : absolute;
    bottom    : -4px;
    right     : -4px;
    width     : 16px;
    height    : 16px;
    background: var(--c-green);
    border-radius: 50%;
    color     : #1e1e2e;
    display   : flex;
    align-items    : center;
    justify-content: center;
    opacity   : 0;
    transform : scale(0);
    transition: opacity 0.3s, transform 0.3s;
}
.sim-viz__check svg { width: 10px; height: 10px; }

/* ── 中央パイプライン ── */
.sim-viz__pipeline {
    flex          : 1;
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : 6px;
    min-width     : 0;
}

.sim-viz__image-label {
    font-size     : 11px;
    color         : var(--c-blue);
    opacity       : 0;
    max-width     : 100%;
    overflow      : hidden;
    text-overflow : ellipsis;
    white-space   : nowrap;
    transition    : opacity 0.3s;
    height        : 14px;
}

.sim-viz__track {
    position     : relative;
    width        : 100%;
    height       : 8px;
    border-radius: 4px;
    overflow     : visible;
}

.sim-viz__track::before {
    content      : '';
    position     : absolute;
    top          : 50%;
    left         : 0;
    right        : 0;
    height       : 2px;
    transform    : translateY(-50%);
    background   : var(--c-border);
    border-radius: 1px;
    transition   : background 0.4s;
}

.sim-viz__status {
    font-size : 10px;
    color     : var(--c-muted);
    height    : 14px;
    transition: color 0.3s;
}

/* ─────────────────────────────────────
   パケット
───────────────────────────────────── */
.sim-viz__packets {
    position: absolute;
    inset   : 0;
}

.sim-viz__pkt {
    position     : absolute;
    top          : 50%;
    left         : 0;
    width        : 10px;
    height       : 10px;
    border-radius: 3px;
    background   : var(--c-docker);
    transform    : translate(-50%, -50%);
    opacity      : 0;
    box-shadow   : 0 0 6px var(--c-docker);
}

/* ─────────────────────────────────────
   @keyframes
───────────────────────────────────── */
@keyframes packet-flow {
    0%   { left: 0%;    opacity: 0; }
    8%   { opacity: 1;              }
    90%  { opacity: 1;              }
    100% { left: 100%;  opacity: 0; }
}

@keyframes hub-pulse {
    0%, 100% { filter: drop-shadow(0 0 4px var(--c-docker));  }
    50%       { filter: drop-shadow(0 0 12px var(--c-docker)); }
}

@keyframes layer-glow {
    0%, 100% { filter: brightness(1);   }
    50%       { filter: brightness(1.5); }
}

@keyframes complete-pop {
    0%   { transform: scale(0);   opacity: 0; }
    60%  { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1);   opacity: 1; }
}

@keyframes badge-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ─────────────────────────────────────
   状態: pulling
───────────────────────────────────── */
[data-state="pulling"] .sim-viz__track::before {
    background: linear-gradient(90deg, var(--c-docker), var(--c-blue));
}
[data-state="pulling"] .sim-viz__pkt {
    animation      : packet-flow 1.1s ease-in-out infinite;
    animation-delay: var(--delay);
}
[data-state="pulling"] .sim-viz__hub .sim-viz__icon {
    animation: hub-pulse 1s ease-in-out infinite;
}
[data-state="pulling"] .sim-viz__image-label { opacity: 1; }
[data-state="pulling"] .sim-viz__status      { color: var(--c-blue); }

/* ─────────────────────────────────────
   状態: complete
───────────────────────────────────── */
[data-state="complete"] .sim-viz__track::before { background: var(--c-green); }
[data-state="complete"] .sim-viz__local .sim-viz__icon { color: var(--c-green); }
[data-state="complete"] .sim-viz__check {
    animation: complete-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
[data-state="complete"] .sim-viz__badge {
    animation      : badge-in 0.3s ease forwards;
    animation-delay: 0.2s;
}
[data-state="complete"] .sim-viz__img-count { opacity: 1; }
[data-state="complete"] .sim-viz__status    { color: var(--c-green); }

/* ─────────────────────────────────────
   状態: error
───────────────────────────────────── */
[data-state="error"] .sim-viz__track::before { background: var(--c-red); }
[data-state="error"] .sim-viz__status        { color: var(--c-red); }

/* ─────────────────────────────────────
   Docker Hub ブラウザパネル
───────────────────────────────────── */
.sim-hub-slot {
    /* ブラウザパネル内に収まるため border 不要 */
}

.sim-hub {
    background: var(--c-bg);
}

/* ヘッダー */
.sim-hub__header {
    display         : flex;
    align-items     : center;
    gap             : 10px;
    padding         : 7px 14px;
    background-color: #0e3a52;
    border-bottom   : 1px solid #1d6087;
    user-select     : none;
}

.sim-hub__whale-svg {
    width      : 22px;
    height     : 16px;
    color      : #1d90c8;
    flex-shrink: 0;
    display    : block;
}

.sim-hub__title {
    display    : flex;
    align-items: center;
    gap        : 6px;
    font-size  : 12px;
    font-weight: 700;
    color      : #ffffff;
    flex-shrink: 0;
    white-space: nowrap;
}

.sim-hub__subtitle {
    font-weight: 400;
    color      : rgba(255,255,255,0.55);
    font-size  : 11px;
}

.sim-hub__search-wrap {
    flex    : 1;
    min-width: 0;
}

.sim-hub__search {
    width      : 100%;
    box-sizing : border-box;
    background : rgba(255,255,255,0.08);
    border     : 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;
    color      : #fff;
    font-family: inherit;
    font-size  : 11px;
    padding    : 3px 8px;
    outline    : none;
    transition : border-color 0.2s;
}
.sim-hub__search::placeholder { color: rgba(255,255,255,0.35); }
.sim-hub__search:focus         { border-color: #1d90c8; }

.sim-hub__toggle {
    background  : transparent;
    border      : none;
    color       : rgba(255,255,255,0.5);
    cursor      : pointer;
    font-size   : 10px;
    padding     : 2px 4px;
    flex-shrink : 0;
    line-height : 1;
}
.sim-hub__toggle:hover { color: #fff; }

/* ボディ（スクロール可能） */
.sim-hub__body {
    padding   : 8px 12px 10px;
    max-height: 210px;
    overflow-y: auto;
}
.sim-hub__body::-webkit-scrollbar       { width: 4px; }
.sim-hub__body::-webkit-scrollbar-track { background: transparent; }
.sim-hub__body::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 2px; }

.sim-hub__hint {
    font-size  : 10px;
    color      : var(--c-muted);
    margin     : 0 0 8px;
    padding    : 0;
    line-height: 1.4;
}
.sim-hub__hint code {
    color      : var(--c-blue);
    font-family: inherit;
}

.sim-hub__empty {
    font-size: 11px;
    color    : var(--c-muted);
    padding  : 8px 0;
}

/* カードグリッド */
.sim-hub__grid {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : 8px;
}

/* カード */
.sim-hub__card {
    background   : var(--c-bg-light);
    border       : 1px solid var(--c-border);
    border-radius: 6px;
    padding      : 8px 8px 6px;
    transition   : border-color 0.2s, box-shadow 0.2s;
    min-width    : 0;
}
.sim-hub__card:hover {
    border-color: var(--c-docker);
    box-shadow  : 0 0 0 1px rgba(29,144,200,0.3);
}

.sim-hub__card-top {
    display    : flex;
    align-items: flex-start;
    gap        : 5px;
    margin-bottom: 4px;
}

.sim-hub__card-icon {
    font-size  : 14px;
    flex-shrink: 0;
    line-height: 1.2;
}

.sim-hub__card-info {
    flex    : 1;
    min-width: 0;
}

.sim-hub__card-name {
    font-size    : 11px;
    font-weight  : 700;
    color        : var(--c-blue);
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis;
}

.sim-hub__card-stars {
    font-size: 9px;
    color    : var(--c-yellow);
}

.sim-hub__official {
    font-size   : 7px;
    font-weight : 700;
    color       : var(--c-docker);
    border      : 1px solid var(--c-docker);
    border-radius: 2px;
    padding     : 1px 2px;
    flex-shrink : 0;
    white-space : nowrap;
    line-height : 1.3;
}

.sim-hub__card-desc {
    font-size     : 9px;
    color         : var(--c-muted);
    line-height   : 1.4;
    margin-bottom : 2px;
    overflow      : hidden;
    display       : -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.sim-hub__card-size {
    font-size    : 9px;
    color        : var(--c-muted);
    margin-bottom: 5px;
}

/* タグ */
.sim-hub__tags {
    display  : flex;
    flex-wrap: wrap;
    gap      : 3px;
}

.sim-hub__tag {
    background   : rgba(29,144,200,0.12);
    border       : 1px solid rgba(29,144,200,0.35);
    border-radius: 3px;
    color        : var(--c-blue);
    cursor       : pointer;
    font-family  : inherit;
    font-size    : 9px;
    line-height  : 1.3;
    padding      : 1px 5px;
    transition   : background 0.15s, border-color 0.15s, color 0.15s;
    white-space  : nowrap;
}
.sim-hub__tag:hover {
    background  : rgba(29,144,200,0.35);
    border-color: var(--c-docker);
    color       : #fff;
}
.sim-hub__tag:active {
    background: rgba(29,144,200,0.55);
}

/* ─────────────────────────────────────
   出力エリア
───────────────────────────────────── */
.sim-output {
    padding   : 14px 20px 8px;
    min-height: 100px;
    max-height: 240px;
    overflow-y: auto;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break : break-all;
}

.sim-output::-webkit-scrollbar       { width: 6px; }
.sim-output::-webkit-scrollbar-track { background: transparent; }
.sim-output::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 3px; }

/* ─────────────────────────────────────
   出力行
───────────────────────────────────── */
.sim-line               { min-height: 1.4em; }
.sim-line--command      { color: var(--c-blue);   font-weight: 600; margin-top: 6px; }
.sim-line--success      { color: var(--c-green);  }
.sim-line--error        { color: var(--c-red);    }
.sim-line--warn         { color: var(--c-yellow); }

/* ─────────────────────────────────────
   入力行
───────────────────────────────────── */
.sim-input-row {
    display     : flex;
    align-items : center;
    padding     : 8px 20px 14px;
    border-top  : 1px solid var(--c-header);
    gap         : 8px;
}

.sim-prompt {
    color      : var(--c-green);
    font-weight: 700;
    flex-shrink: 0;
    user-select: none;
}

.sim-input {
    flex       : 1;
    background : transparent;
    border     : none;
    outline    : none;
    color      : var(--c-text);
    font-family: inherit;
    font-size  : inherit;
    caret-color: var(--c-text);
}
.sim-input::placeholder { color: var(--c-border); }

/* ─────────────────────────────────────
   クイックアクション（スマホ向けボタン）
───────────────────────────────────── */
.sim-quick-actions {
    display    : flex;
    flex-wrap  : wrap;
    align-items: center;
    gap        : 6px;
    padding    : 7px 20px 9px;
    background : var(--c-bg-light);
    border-top : 1px solid var(--c-border);
}

.sim-quick-label {
    font-size  : 11px;
    color      : var(--c-muted);
    flex-shrink: 0;
    user-select: none;
}

.sim-quick-btn {
    background   : transparent;
    border       : 1px solid var(--c-border);
    border-radius: 4px;
    color        : var(--c-blue);
    cursor       : pointer;
    font-family  : inherit;
    font-size    : 11px;
    line-height  : 1.4;
    padding      : 3px 10px;
    transition   : background 0.15s, border-color 0.15s;
    white-space  : nowrap;
}
.sim-quick-btn:hover  { background: rgba(137,180,250,0.12); border-color: var(--c-blue); }
.sim-quick-btn:active { background: rgba(137,180,250,0.25); }

/* ─────────────────────────────────────
   レスポンシブ
───────────────────────────────────── */
@media (max-width: 520px) {
    .docker-sim-widget { font-size: 12px; }
    .sim-viz           { padding: 12px 10px; }
    .sim-viz__side     { width: 72px; }
    .sim-viz__icon     { width: 36px; height: 36px; }
    .sim-viz__hub-layers,
    .sim-viz__local-layers { width: 64px; }
    .sim-output        { max-height: 180px; }
    .sim-hub__grid     { grid-template-columns: repeat(2, 1fr); }
    .sim-hub__body     { max-height: 180px; }
}


/* =====================================================
   sim-arch: VMとコンテナ 起動速度比較
   ===================================================== */

.sim-arch {
    background   : var(--c-bg);
    border-radius: 10px;
    overflow     : hidden;
    box-shadow   : 0 4px 20px rgba(0, 0, 0, 0.35);
    max-width    : 760px;
    font-family  : 'SFMono-Regular', 'Cascadia Code', 'Consolas', 'Menlo', monospace;
    color        : var(--c-text);
}

/* ヘッダー */
.sim-arch__hd {
    display         : flex;
    flex-direction  : column;
    gap             : 4px;
    padding         : 10px 16px;
    background-color: var(--c-header);
    border-bottom   : 1px solid var(--c-border);
}
.sim-arch__hd strong { font-size: 13px; color: var(--c-text); }
.sim-arch__hd span   { font-size: 11px; color: var(--c-muted); }

/* ステージ（2列） */
.sim-arch__stage {
    display    : flex;
    gap        : 14px;
    padding    : 14px 16px;
    align-items: flex-start;
}

.sim-arch__vs {
    font-size  : 15px;
    font-weight: 900;
    color      : var(--c-muted);
    padding-top: 80px;
    flex-shrink: 0;
    user-select: none;
}

/* 各列 */
.sim-arch__col {
    flex           : 1;
    display        : flex;
    flex-direction : column;
    gap            : 10px;
    padding        : 12px;
    border         : 1px solid var(--c-border);
    border-radius  : 8px;
    transition     : border-color 0.4s, box-shadow 0.4s;
    min-width      : 0;
}
.sim-arch__col.is-done {
    border-color: var(--c-green);
    box-shadow  : 0 0 0 1px rgba(166, 227, 161, 0.2);
}

.sim-arch__col-name {
    font-size     : 12px;
    font-weight   : 700;
    color         : var(--c-text);
    display       : flex;
    flex-direction: column;
    gap           : 2px;
}
.sim-arch__col-name small {
    font-size  : 10px;
    font-weight: 400;
    color      : var(--c-muted);
}

/* ブロックスタック
   flex-direction: column → 配列順（App→Hardware）のまま
   「アプリが一番上、ハードウェアが一番下」の積み上がりを表現 */
.sim-arch__stack {
    display        : flex;
    flex-direction : column;
    gap            : 3px;
    min-height     : 185px;
}

/* 各ブロック */
.sim-arch__block {
    display        : flex;
    flex-direction : column;
    gap            : 1px;
    padding        : 7px 10px;
    border-radius  : 5px;
    background     : var(--sab-bg, #585b70);
    opacity        : 0;
    transform      : translateY(-5px);
    transition     : opacity 0.4s ease, transform 0.4s ease;
}
.sim-arch__block.is-visible {
    opacity  : 1;
    transform: translateY(0);
}
/* GuestOSカーネル起動中 */
.sim-arch__block.is-booting {
    opacity  : 0.65;
    transform: translateY(0);
    animation: sac-boot 0.9s ease-in-out infinite;
}

.sim-arch__block--shared {
    border: 2px dashed rgba(0, 0, 0, 0.2);
}

.sim-arch__block b {
    font-size  : 11px;
    font-weight: 700;
    color      : #1e1e2e;
}
.sim-arch__block small {
    font-size: 9px;
    color    : rgba(30, 30, 46, 0.68);
}

/* 列下部（タイマー・サイズ） */
.sim-arch__col-foot {
    display        : flex;
    flex-direction : column;
    gap            : 4px;
    font-size      : 11px;
    color          : var(--c-muted);
    padding-top    : 8px;
    border-top     : 1px solid var(--c-border);
}
.sim-arch__col-foot b    { color: var(--c-text); }
.is-done .sim-arch__col-foot b { color: var(--c-green); }

/* フッター（ボタン・結果） */
.sim-arch__foot {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 8px;
    padding        : 10px 16px 14px;
    border-top     : 1px solid var(--c-border);
}

.sim-arch__btn {
    background   : var(--c-docker);
    border       : none;
    border-radius: 6px;
    color        : #fff;
    cursor       : pointer;
    font-family  : inherit;
    font-size    : 12px;
    font-weight  : 700;
    padding      : 8px 22px;
    transition   : background 0.2s, opacity 0.2s;
}
.sim-arch__btn:hover:not(:disabled) { background: #2ba8e8; }
.sim-arch__btn:disabled             { opacity: 0.55; cursor: not-allowed; }

.sim-arch__result {
    font-size  : 12px;
    color      : var(--c-green);
    text-align : center;
    min-height : 1.4em;
}
.sim-arch__result strong { color: var(--c-green); }

/* 凡例 */
.sim-arch__legend {
    display    : flex;
    flex-wrap  : wrap;
    gap        : 12px;
    padding    : 8px 16px 12px;
    font-size  : 10px;
    color      : var(--c-muted);
}
.sim-arch__legend span {
    display    : flex;
    align-items: center;
    gap        : 5px;
}
.sim-arch__legend i {
    display      : inline-block;
    width        : 10px;
    height       : 10px;
    border-radius: 2px;
    flex-shrink  : 0;
    font-style   : normal;
}

@keyframes sac-boot {
    0%, 100% { opacity: 0.5; background: var(--sab-bg); }
    50%       { opacity: 0.9; filter: brightness(1.25); }
}

@media (max-width: 520px) {
    /* 横並びを維持しつつコンパクトに */
    .sim-arch__stage            { gap: 5px; padding: 8px; }
    .sim-arch__vs               { padding-top: 55px; font-size: 11px; }
    .sim-arch__col              { padding: 7px 5px; gap: 6px; }
    .sim-arch__col-name         { font-size: 10px; }
    .sim-arch__col-name small   { font-size: 9px; }
    .sim-arch__stack            { min-height: 155px; gap: 2px; }
    .sim-arch__block            { padding: 5px 5px; }
    .sim-arch__block b          { font-size: 9px; }
    .sim-arch__block small      { display: none; }   /* サブテキストは省略 */
    .sim-arch__col-foot         { font-size: 9px; gap: 3px; }
    .sim-arch__legend           { font-size: 9px; gap: 6px; padding: 6px 10px 10px; }
    .sim-arch__btn              { font-size: 11px; padding: 7px 14px; }
}


/* =====================================================
   sim-layers: レイヤー共有の可視化
   ===================================================== */

.sim-layers {
    background   : var(--c-bg);
    border-radius: 10px;
    overflow     : hidden;
    box-shadow   : 0 4px 20px rgba(0, 0, 0, 0.35);
    max-width    : 760px;
    font-family  : 'SFMono-Regular', 'Cascadia Code', 'Consolas', 'Menlo', monospace;
    color        : var(--c-text);
}

/* ヘッダー */
.sim-layers__hd {
    display         : flex;
    flex-direction  : column;
    gap             : 4px;
    padding         : 10px 16px;
    background-color: var(--c-header);
    border-bottom   : 1px solid var(--c-border);
}
.sim-layers__hd strong { font-size: 13px; color: var(--c-text); }
.sim-layers__hd span   { font-size: 11px; color: var(--c-muted); }

/* ボタン行 */
.sim-layers__btns {
    display    : flex;
    flex-wrap  : wrap;
    gap        : 6px;
    padding    : 9px 14px;
    background : var(--c-bg-light);
    border-bottom: 1px solid var(--c-border);
}

.sim-layers__pull {
    background   : rgba(29, 144, 200, 0.1);
    border       : 1px solid rgba(29, 144, 200, 0.4);
    border-radius: 5px;
    color        : var(--c-blue);
    cursor       : pointer;
    font-family  : inherit;
    font-size    : 11px;
    padding      : 5px 12px;
    transition   : background 0.15s, border-color 0.15s;
}
.sim-layers__pull:hover:not(:disabled) {
    background  : rgba(29, 144, 200, 0.25);
    border-color: var(--c-docker);
}
.sim-layers__pull:disabled { opacity: 0.38; cursor: not-allowed; }

.sim-layers__reset {
    background   : transparent;
    border       : 1px solid var(--c-border);
    border-radius: 5px;
    color        : var(--c-muted);
    cursor       : pointer;
    font-family  : inherit;
    font-size    : 11px;
    padding      : 5px 12px;
    transition   : background 0.15s, color 0.15s;
}
.sim-layers__reset:hover { background: rgba(255,255,255,0.06); color: var(--c-text); }

/* 2列レイアウト */
.sim-layers__body {
    display: flex;
}

.sim-layers__left,
.sim-layers__right {
    flex   : 1;
    padding: 12px 14px;
    min-width: 0;
}
.sim-layers__left { border-right: 1px solid var(--c-border); }

.sim-layers__panel-title {
    font-size     : 10px;
    font-weight   : 700;
    color         : var(--c-muted);
    letter-spacing: 0.05em;
    margin-bottom : 8px;
}

.sim-layers__empty {
    font-size: 11px;
    color    : var(--c-muted);
}

/* docker images 一覧 */
.sim-layers__img-header {
    display        : flex;
    justify-content: space-between;
    font-size      : 9px;
    color          : var(--c-muted);
    padding        : 3px 0;
    margin-bottom  : 4px;
    border-bottom  : 1px solid var(--c-border);
}

.sim-layers__img-row {
    display        : flex;
    align-items    : center;
    gap            : 6px;
    padding        : 5px 0;
    border-bottom  : 1px solid var(--c-border);
    font-size      : 11px;
}
.sim-layers__img-name { flex: 1; color: var(--c-blue); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sim-layers__img-size { color: var(--c-muted); flex-shrink: 0; }

/* ディスク上のレイヤー */
.sim-layers__disk-layer {
    border-radius: 5px;
    margin-bottom: 5px;
    overflow     : hidden;
    transition   : box-shadow 0.3s;
}
.sim-layers__disk-layer.is-flash {
    animation: sll-flash 0.7s ease;
}
.sim-layers__disk-layer.is-shared .sim-layers__disk-bar {
    border-left: 3px solid rgba(255, 255, 255, 0.4);
}

.sim-layers__disk-bar {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : 6px 8px 4px;
    background     : var(--sl-bg, #89b4fa);
}
.sim-layers__disk-name { font-size: 10px; font-weight: 700; color: #1e1e2e; }
.sim-layers__disk-size { font-size: 10px; color: rgba(30,30,46,0.72); }

.sim-layers__disk-used {
    background: rgba(0, 0, 0, 0.18);
    padding   : 3px 8px;
    font-size : 9px;
    color     : rgba(30, 30, 46, 0.78);
    display   : flex;
    align-items: center;
    gap       : 5px;
}

.sim-layers__shared-badge {
    background   : rgba(255,255,255,0.25);
    border-radius: 2px;
    font-size    : 8px;
    font-weight  : 700;
    padding      : 0 4px;
    color        : #1e1e2e;
}

/* 節約量 */
.sim-layers__savings {
    margin-top : 10px;
    padding-top: 8px;
    border-top : 1px solid var(--c-border);
    font-size  : 10px;
}
.sim-layers__sav-row {
    display        : flex;
    justify-content: space-between;
    padding        : 2px 0;
    color          : var(--c-muted);
}
.sim-layers__sav-hi {
    color      : var(--c-green);
    font-weight: 700;
    margin-top : 3px;
}

/* ログ */
.sim-layers__log {
    background   : var(--c-bg);
    border-top   : 1px solid var(--c-border);
    font-size    : 11px;
    line-height  : 1.7;
    max-height   : 130px;
    overflow-y   : auto;
    padding      : 8px 14px;
}
.sim-layers__log:empty { display: none; }

.sim-layers__log::-webkit-scrollbar       { width: 4px; }
.sim-layers__log::-webkit-scrollbar-track { background: transparent; }
.sim-layers__log::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 2px; }

.sll-cmd    { color: var(--c-blue);   font-weight: 700; margin-top: 4px; }
.sll-sub    { color: var(--c-muted);  font-size: 10px; margin-bottom: 2px; }
.sll-cached { color: var(--c-yellow); }
.sll-info   { color: var(--c-muted);  }
.sll-ok     { color: var(--c-green);  }

@keyframes sll-flash {
    0%   { box-shadow: 0 0 0 0 rgba(249, 226, 175, 0); }
    30%  { box-shadow: 0 0 0 4px rgba(249, 226, 175, 0.6); }
    100% { box-shadow: 0 0 0 0 rgba(249, 226, 175, 0); }
}

@media (max-width: 520px) {
    .sim-layers__body  { flex-direction: column; }
    .sim-layers__left  { border-right: none; border-bottom: 1px solid var(--c-border); }
    .sim-layers__btns  { gap: 4px; }
    .sim-layers__pull,
    .sim-layers__reset { font-size: 10px; padding: 4px 8px; }
}


/* =====================================================
   sim-ns: 名前空間の分離シミュレータ
   ===================================================== */

.sim-ns {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    overflow: hidden;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

.sim-ns__hd {
    background: var(--c-header);
    padding: .75em 1em;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5em;
    border-bottom: 1px solid var(--c-border);
}
.sim-ns__hd strong { color: var(--c-text); font-size: 1em; }
.sim-ns__hd span   { color: var(--c-muted); font-size: .82em; }

/* ボタン行 */
.sim-ns__btns {
    padding: .6em 1em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4em;
    background: var(--c-bg-light);
    border-bottom: 1px solid var(--c-border);
}
.sim-ns__btn-label { color: var(--c-muted); font-size: .8em; margin-right: .2em; }

.sim-ns__btn,
.sim-ns__reset {
    border: 1px solid var(--c-border);
    background: var(--c-bg);
    color: var(--c-blue);
    border-radius: 5px;
    padding: .3em .8em;
    font-size: .82em;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.sim-ns__btn:hover   { background: var(--c-blue);   color: var(--c-bg); }
.sim-ns__btn.is-active { background: var(--c-blue); color: var(--c-bg); border-color: var(--c-blue); }
.sim-ns__reset       { color: var(--c-muted); }
.sim-ns__reset:hover { background: var(--c-border); color: var(--c-text); }

/* 2カラムステージ */
.sim-ns__stage {
    display: flex;
    gap: 0;
    min-height: 200px;
}

.sim-ns__panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--c-border);
}
.sim-ns__panel:last-child { border-right: none; }

.sim-ns__panel-title {
    background: var(--c-header);
    color: var(--c-text);
    padding: .4em .8em;
    font-size: .82em;
    font-weight: bold;
    border-bottom: 1px solid var(--c-border);
    display: flex;
    align-items: baseline;
    gap: .5em;
}
.sim-ns__panel-title small { color: var(--c-muted); font-weight: normal; font-size: .85em; }

.sim-ns__output {
    flex: 1;
    padding: .6em .8em;
    font-size: .8em;
    line-height: 1.7;
    overflow-y: auto;
    max-height: 240px;
}

/* 行スタイル */
.sns-line  { color: var(--c-text); }
.sns-cmd   { color: var(--c-green); }
.sns-hd    { color: var(--c-yellow); font-weight: bold; }
.sns-hi    { color: var(--c-mauve); }
.sns-sub   { color: var(--c-muted); font-style: italic; }

/* 解説帯 */
.sim-ns__explain {
    padding: .6em 1em;
    font-size: .82em;
    color: var(--c-blue);
    background: rgba(137, 180, 250, .07);
    border-top: 1px solid var(--c-border);
    display: none;
}
.sim-ns__explain.is-visible { display: block; }

@media (max-width: 520px) {
    .sim-ns__stage { flex-direction: column; }
    .sim-ns__panel { border-right: none; border-bottom: 1px solid var(--c-border); }
    .sim-ns__panel:last-child { border-bottom: none; }
    .sim-ns__output { max-height: 160px; }
    .sim-ns__btn, .sim-ns__reset { font-size: .75em; padding: .25em .6em; }
}


/* =====================================================
   sim-cgroup: cgroupsメモリ制限シミュレータ
   ===================================================== */

.sim-cg {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    overflow: hidden;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    position: relative;
}

.sim-cg__hd {
    background: var(--c-header);
    padding: .75em 1em;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5em;
    border-bottom: 1px solid var(--c-border);
}
.sim-cg__hd strong { color: var(--c-text); font-size: 1em; }
.sim-cg__hd span   { color: var(--c-muted); font-size: .82em; }

/* docker run コマンド表示 */
.sim-cg__cmd {
    background: var(--c-bg-light);
    padding: .5em 1em;
    font-size: .82em;
    border-bottom: 1px solid var(--c-border);
    color: var(--c-text);
}
.sim-cg__cmd-label { color: var(--c-green); }
.sim-cg__opt       { color: var(--c-yellow); }

/* メモリバー */
.sim-cg__meter-wrap {
    padding: 1em 1em .5em;
}
.sim-cg__meter-label {
    display: flex;
    justify-content: space-between;
    font-size: .8em;
    color: var(--c-muted);
    margin-bottom: .4em;
}

.sim-cg__meter {
    position: relative;
    background: var(--c-border);
    border-radius: 6px;
    height: 28px;
    overflow: visible;
}

.sim-cg__meter-fill {
    height: 100%;
    border-radius: 6px;
    background: var(--c-blue);
    transition: width .3s ease, background .3s;
    width: 0%;
}
.sim-cg__meter-fill.is-warn   { background: var(--c-yellow); }
.sim-cg__meter-fill.is-danger { background: var(--c-red); }

.sim-cg__meter-limit {
    position: absolute;
    right: -1px;
    top: -22px;
    font-size: .72em;
    color: var(--c-red);
    border-right: 2px dashed var(--c-red);
    padding-right: .4em;
    white-space: nowrap;
    height: calc(100% + 22px);
    display: flex;
    align-items: flex-start;
}

/* セグメント表示 */
.sim-cg__segments {
    display: flex;
    gap: 3px;
    margin-top: .5em;
    flex-wrap: wrap;
}
.sim-cg__seg {
    flex: 1;
    min-width: 44px;
    text-align: center;
    font-size: .72em;
    padding: .2em 0;
    border: 1px solid var(--c-border);
    border-radius: 3px;
    color: var(--c-muted);
    background: var(--c-bg-light);
    transition: background .2s, color .2s;
}
.sim-cg__seg.is-used {
    background: var(--c-blue);
    color: var(--c-bg);
    border-color: var(--c-blue);
}

/* ボタン */
.sim-cg__btns {
    padding: .6em 1em;
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    background: var(--c-bg-light);
}
.sim-cg__alloc,
.sim-cg__free,
.sim-cg__reset {
    border: 1px solid var(--c-border);
    border-radius: 5px;
    padding: .3em .9em;
    font-size: .82em;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.sim-cg__alloc { background: var(--c-blue);   color: var(--c-bg);  border-color: var(--c-blue); }
.sim-cg__alloc:hover:not(:disabled) { filter: brightness(1.15); }
.sim-cg__free  { background: var(--c-bg);     color: var(--c-green); }
.sim-cg__free:hover:not(:disabled) { background: var(--c-green); color: var(--c-bg); }
.sim-cg__reset { background: var(--c-bg);     color: var(--c-muted); }
.sim-cg__reset:hover { background: var(--c-border); color: var(--c-text); }
.sim-cg__alloc:disabled,
.sim-cg__free:disabled { opacity: .35; cursor: not-allowed; }

/* ログ */
.sim-cg__log {
    padding: .5em 1em;
    font-size: .78em;
    line-height: 1.7;
    max-height: 160px;
    overflow-y: auto;
    color: var(--c-text);
}
.scg-info { color: var(--c-text);   }
.scg-ok   { color: var(--c-green);  }
.scg-warn { color: var(--c-yellow); }
.scg-err  { color: var(--c-red);    }
.scg-cmd  { color: var(--c-green);  }

/* OOM Kill オーバーレイ */
.sim-cg__oom {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.75);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.sim-cg__oom.is-visible { display: flex; }

.sim-cg__oom-box {
    background: var(--c-bg-light);
    border: 2px solid var(--c-red);
    border-radius: 10px;
    padding: 1.2em 1.5em;
    max-width: 320px;
    width: 90%;
    text-align: center;
}
.sim-cg__oom-title {
    font-size: 1.4em;
    font-weight: bold;
    color: var(--c-red);
    margin-bottom: .4em;
}
.sim-cg__oom-msg {
    font-size: .82em;
    color: var(--c-text);
    margin-bottom: .8em;
    line-height: 1.6;
}
.sim-cg__oom-code {
    background: var(--c-bg);
    border-radius: 5px;
    padding: .5em .8em;
    font-size: .78em;
    color: var(--c-red);
    text-align: left;
    margin-bottom: .8em;
    white-space: pre;
    overflow-x: auto;
}
.sim-cg__oom-close {
    background: var(--c-red);
    color: var(--c-bg);
    border: none;
    border-radius: 5px;
    padding: .4em 1em;
    font-size: .82em;
    font-family: inherit;
    cursor: pointer;
}
.sim-cg__oom-close:hover { filter: brightness(1.15); }

@media (max-width: 520px) {
    .sim-cg__btns { gap: 4px; }
    .sim-cg__alloc,
    .sim-cg__free,
    .sim-cg__reset { font-size: .75em; padding: .25em .6em; }
    .sim-cg__seg { min-width: 36px; font-size: .68em; }
}


/* =====================================================
   sim-api: docker run アーキテクチャフローシミュレータ
   ===================================================== */

.sim-api {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    overflow: hidden;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

.sim-api__hd {
    background: var(--c-header);
    padding: .75em 1em;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5em;
    border-bottom: 1px solid var(--c-border);
}
.sim-api__hd strong { color: var(--c-text); font-size: 1em; }
.sim-api__hd span   { color: var(--c-muted); font-size: .82em; }

/* body: フロー + ログ 横並び */
.sim-api__body {
    display: flex;
    gap: 0;
    min-height: 340px;
}

/* フロー列 */
.sim-api__flow {
    flex: 0 0 55%;
    padding: 1em .8em;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-right: 1px solid var(--c-border);
    overflow-y: auto;
}

/* ステップカード */
.sap-step {
    border: 1px solid var(--c-border);
    border-radius: 7px;
    background: var(--c-bg-light);
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.sap-step-inner {
    display: flex;
    align-items: flex-start;
    gap: .6em;
    padding: .5em .7em;
}
.sap-icon {
    font-size: 1.2em;
    flex-shrink: 0;
    padding-top: .05em;
}
.sap-step-body   { flex: 1; }
.sap-step-title  { color: var(--c-text); font-weight: bold; font-size: .85em; }
.sap-step-detail {
    color: var(--c-muted);
    font-size: .72em;
    line-height: 1.5;
    margin-top: .15em;
}
.sap-step-state {
    font-size: .75em;
    color: var(--c-green);
    flex-shrink: 0;
    min-width: 1.4em;
    text-align: right;
}

/* アクティブ状態 */
.sap-step.is-active {
    border-color: var(--c-blue);
    box-shadow: 0 0 0 2px rgba(137, 180, 250, .3);
    background: rgba(137, 180, 250, .07);
}
.sap-step.is-active .sap-step-title  { color: var(--c-blue); }
.sap-step.is-active .sap-step-detail { color: var(--c-text); }
.sap-step.is-active .sap-step-state  { color: var(--c-yellow); }

/* 完了状態 */
.sap-step.is-done {
    border-color: var(--c-green);
    background: rgba(166, 227, 161, .05);
}
.sap-step.is-done .sap-step-title { color: var(--c-green); }

/* 最後（Container）は特別スタイル */
.sap-step[data-step="container"].is-done {
    border-color: var(--c-mauve);
    background: rgba(203, 166, 247, .08);
}
.sap-step[data-step="container"].is-done .sap-step-title { color: var(--c-mauve); }

/* 矢印 */
.sap-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .15em 0;
    gap: .05em;
    opacity: .35;
    transition: opacity .3s;
}
.sap-arrow.is-active { opacity: 1; }

.sap-protocol {
    font-size: .65em;
    color: var(--c-yellow);
    text-align: center;
    white-space: nowrap;
}
.sap-arrow-icon {
    font-size: 1em;
    color: var(--c-muted);
    line-height: 1;
}
.sap-arrow.is-active .sap-arrow-icon { color: var(--c-blue); }

/* ログパネル */
.sim-api__log-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.sim-api__log-title {
    padding: .4em .8em;
    font-size: .78em;
    color: var(--c-muted);
    background: var(--c-bg-light);
    border-bottom: 1px solid var(--c-border);
}
.sim-api__log {
    flex: 1;
    padding: .5em .8em;
    font-size: .75em;
    line-height: 1.7;
    overflow-y: auto;
    color: var(--c-text);
}
.sap-log-idle { color: var(--c-muted); }
.sap-log-line { color: var(--c-text); }
.sap-log-line:first-child { color: var(--c-green); }

/* フッター */
.sim-api__foot {
    padding: .6em 1em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8em;
    border-top: 1px solid var(--c-border);
    background: var(--c-bg-light);
}

.sim-api__btn {
    background: var(--c-docker);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: .4em 1.1em;
    font-size: .85em;
    font-family: inherit;
    cursor: pointer;
    transition: filter .15s;
}
.sim-api__btn:hover:not(:disabled) { filter: brightness(1.15); }
.sim-api__btn:disabled { opacity: .45; cursor: not-allowed; }

.sim-api__result { font-size: .82em; }
.sap-result-ok   { color: var(--c-green); font-weight: bold; }

@media (max-width: 600px) {
    .sim-api__body   { flex-direction: column; }
    .sim-api__flow   { flex: none; border-right: none; border-bottom: 1px solid var(--c-border); padding: .6em; }
    .sim-api__log-panel { min-height: 130px; }
    .sap-step-title  { font-size: .8em; }
    .sap-step-detail { font-size: .68em; }
    .sap-protocol    { display: none; }
}

/* =====================================================
   sim-lifecycle  コンテナライフサイクル シミュレータ
   ===================================================== */

.slc-root {
    font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
}

/* ── 2カラムレイアウト ── */
.slc-layout {
    display         : flex;
    gap             : 12px;
    align-items     : flex-start;
}

.slc-terminal-wrap {
    flex            : 1 1 0;
    min-width       : 0;
}

/* ── 右パネル全体 ── */
.slc-status-wrap {
    flex            : 0 0 260px;
    width           : 260px;
    display         : flex;
    flex-direction  : column;
    gap             : 10px;
}

/* ── Docker Daemon パネル ── */
.slc-daemon-panel {
    background      : var(--c-bg-light);
    border          : 1px solid var(--c-border);
    border-radius   : 8px;
    padding         : .7em .8em;
    font-size       : .76em;
    color           : var(--c-text);
    line-height     : 1.5;
}

.slc-panel-header {
    font-size       : .85em;
    font-weight     : bold;
    color           : var(--c-blue);
    border-bottom   : 1px solid var(--c-border);
    padding-bottom  : .3em;
    margin-bottom   : .6em;
    letter-spacing  : .03em;
}

.slc-viz-section {
    margin-bottom   : .7em;
}

.slc-viz-label {
    font-size       : .8em;
    font-weight     : bold;
    color           : var(--c-muted);
    margin-bottom   : .4em;
}

.slc-viz-empty {
    color           : var(--c-muted);
    font-style      : italic;
    font-size       : .85em;
    padding-left    : .5em;
}

/* ── Image カード ── */
.slc-img-card {
    display         : flex;
    align-items     : center;
    gap             : .4em;
    padding         : .28em .5em;
    border-radius   : 5px;
    background      : rgba(203, 166, 247, 0.1);
    border          : 1px solid rgba(203, 166, 247, 0.2);
    margin-bottom   : .25em;
}

.slc-img-icon {
    flex-shrink     : 0;
    font-size       : 1em;
}

.slc-img-name {
    flex            : 1;
    color           : var(--c-mauve);
    min-width       : 0;
    overflow        : hidden;
    text-overflow   : ellipsis;
    white-space     : nowrap;
    font-size       : .9em;
}

.slc-img-tag {
    color           : var(--c-muted);
    font-size       : .9em;
}

.slc-img-size {
    color           : var(--c-muted);
    font-size       : .78em;
    flex-shrink     : 0;
}

/* ── Container カード ── */
.slc-cnt-card {
    border-radius   : 5px;
    padding         : .35em .5em;
    margin-bottom   : .25em;
}

.slc-cnt-up {
    background      : rgba(166, 227, 161, 0.08);
    border          : 1px solid rgba(166, 227, 161, 0.28);
}

.slc-cnt-ex {
    background      : rgba(127, 132, 156, 0.08);
    border          : 1px solid rgba(127, 132, 156, 0.2);
    opacity         : .8;
}

.slc-cnt-top {
    display         : flex;
    align-items     : center;
    gap             : .35em;
    margin-bottom   : .18em;
}

.slc-cnt-dot {
    display         : inline-block;
    width           : 7px;
    height          : 7px;
    border-radius   : 50%;
    flex-shrink     : 0;
}

.slc-dot-run  { background: var(--c-green); box-shadow: 0 0 5px var(--c-green); }
.slc-dot-stop { background: var(--c-muted); }

.slc-cnt-name {
    flex            : 1;
    color           : var(--c-teal);
    font-weight     : bold;
    font-size       : .88em;
    min-width       : 0;
    overflow        : hidden;
    text-overflow   : ellipsis;
    white-space     : nowrap;
}

.slc-cnt-badge {
    font-size       : .72em;
    padding         : .1em .38em;
    border-radius   : 3px;
    flex-shrink     : 0;
}

.slc-badge-up {
    background      : rgba(166, 227, 161, 0.2);
    color           : var(--c-green);
}

.slc-badge-ex {
    background      : rgba(127, 132, 156, 0.2);
    color           : var(--c-muted);
}

.slc-cnt-img {
    color           : var(--c-muted);
    font-size       : .78em;
    padding-left    : 1.1em;
}

.slc-cnt-port {
    color           : var(--c-yellow);
    font-size       : .78em;
    padding-left    : 1.1em;
    margin-top      : .1em;
}

/* ── ブラウザパネル ── */
.slc-browser-panel {
    background      : #1e1e2e;
    border          : 1px solid var(--c-border);
    border-radius   : 8px;
    overflow        : hidden;
    font-size       : .76em;
}

.slc-browser-titlebar {
    background      : #313244;
    display         : flex;
    align-items     : center;
    gap             : .5em;
    padding         : .4em .6em;
}

.slc-browser-dots {
    display         : flex;
    gap             : 4px;
    flex-shrink     : 0;
}

.slc-bdot {
    width           : 8px;
    height          : 8px;
    border-radius   : 50%;
    display         : inline-block;
}

.slc-bdot-red    { background: #ff5f57; }
.slc-bdot-yellow { background: #febc2e; }
.slc-bdot-green  { background: #28c840; }

.slc-browser-urlbar {
    flex            : 1;
    background      : #1e1e2e;
    color           : var(--c-muted);
    border-radius   : 4px;
    padding         : .18em .5em;
    font-size       : .85em;
    font-family     : monospace;
    overflow        : hidden;
    text-overflow   : ellipsis;
    white-space     : nowrap;
    min-width       : 0;
}

.slc-browser-btn {
    background      : var(--c-blue);
    color           : #1e1e2e;
    border          : none;
    border-radius   : 4px;
    padding         : .18em .6em;
    font-size       : .8em;
    cursor          : pointer;
    font-weight     : bold;
    flex-shrink     : 0;
    white-space     : nowrap;
}

.slc-browser-btn:hover {
    opacity         : .85;
}

.slc-browser-vp {
    min-height      : 110px;
    background      : #fff;
    display         : flex;
    align-items     : center;
    justify-content : center;
    padding         : 10px;
}

/* nginx ウェルカムページ */
.slc-nginx-page {
    font-family     : Arial, sans-serif;
    text-align      : center;
    color           : #333;
    width           : 100%;
}

.slc-nginx-logo {
    font-size       : 1.6em;
    font-weight     : bold;
    color           : #009900;
    letter-spacing  : .05em;
}

.slc-nginx-title {
    font-size       : .95em;
    font-weight     : bold;
    margin          : 4px 0;
    color           : #222;
}

.slc-nginx-body {
    font-size       : .72em;
    color           : #555;
    margin          : 4px 0;
    line-height     : 1.5;
}

.slc-nginx-hr {
    border          : none;
    border-top      : 1px solid #ddd;
    margin          : 8px 0;
}

.slc-nginx-foot {
    font-size       : .68em;
    color           : #888;
    margin          : 0;
    font-style      : italic;
}

/* ブラウザエラー */
.slc-browser-error {
    text-align      : center;
    color           : #555;
}

.slc-browser-err-icon {
    font-size       : 1.8em;
    margin-bottom   : 4px;
}

.slc-browser-err-title {
    font-size       : .85em;
    font-weight     : bold;
    color           : #333;
}

.slc-browser-err-sub {
    font-size       : .72em;
    color           : #888;
    margin-top      : 3px;
    line-height     : 1.5;
}

/* ── ターミナル出力行の色クラス ── */
.slc-hd   { color: var(--c-blue);   font-weight: bold; }
.slc-ok   { color: var(--c-green);  }
.slc-err  { color: var(--c-red);    }
.slc-muted{ color: var(--c-muted);  }
.slc-id   { color: var(--c-teal);   }
.slc-bold { font-weight: bold; }

@media (max-width: 620px) {
    .slc-layout         { flex-direction: column; }
    .slc-status-wrap    { flex: none; width: 100%; }
}

/* =====================================================
   sim-imgcon  イメージ↔コンテナ 関係 シミュレータ
   ===================================================== */

.sic-root {
    font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
}

.sic-layout {
    background  : var(--c-bg);
    border-radius: 10px;
    padding     : 1em;
    box-shadow  : 0 4px 20px rgba(0,0,0,.35);
    max-width   : 760px;
}

/* ── イメージ選択ボタン ── */
.sic-image-selector {
    display     : flex;
    gap         : .5em;
    flex-wrap   : wrap;
    margin-bottom: .7em;
}

.sic-img-btn {
    background  : var(--c-bg-light);
    border      : 1px solid var(--c-border);
    color       : var(--c-muted);
    border-radius: 6px;
    padding     : .3em .9em;
    font-size   : .8em;
    font-family : inherit;
    cursor      : pointer;
    transition  : all .2s;
}
.sic-img-btn.is-active,
.sic-img-btn:hover {
    border-color: var(--img-color, var(--c-blue));
    color       : var(--img-color, var(--c-blue));
    background  : rgba(137,180,250,.08);
}

/* ── イメージパネル ── */
.sic-image-panel {
    background  : var(--c-bg-light);
    border      : 1px solid var(--c-border);
    border-radius: 8px;
    padding     : .7em .9em;
    margin-bottom: .5em;
}

.sic-image-panel__header {
    display     : flex;
    align-items : center;
    gap         : .6em;
    margin-bottom: .5em;
}

.sic-image-name {
    font-weight : bold;
    font-size   : .9em;
}

.sic-layer-stack {
    display     : flex;
    flex-direction: column;
    gap         : 3px;
}

.sic-layer {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    padding         : .3em .7em;
    border-radius   : 4px;
    font-size       : .78em;
    color           : #1e1e2e;
    font-weight     : 500;
}

.sic-layer__size {
    font-size   : .85em;
    opacity     : .75;
}

.sic-image-panel__footer {
    text-align  : right;
    font-size   : .75em;
    color       : var(--c-muted);
    margin-top  : .4em;
}

/* ── バッジ ── */
.sic-badge {
    font-size   : .7em;
    padding     : .1em .5em;
    border-radius: 4px;
    font-weight : bold;
    white-space : nowrap;
}
.sic-badge--ro  { background: rgba(249,162,175,.2); color: var(--c-red); }
.sic-badge--rw  { background: rgba(166,227,161,.2); color: var(--c-green); }
.sic-badge--run { background: rgba(166,227,161,.15); color: var(--c-green); font-size: .68em; }

/* ── 起動ボタン領域 ── */
.sic-spawn-area {
    text-align  : center;
    padding     : .4em 0;
}

.sic-arrow-row {
    min-height  : 1.4em;
    margin-bottom: .2em;
}

.sic-arrow-lines {
    display     : flex;
    justify-content: center;
    gap         : 1.2em;
    font-size   : 1.2em;
}

.sic-arrow-tick {
    opacity     : .7;
}

.sic-spawn-btn {
    background  : var(--c-docker);
    color       : #fff;
    border      : none;
    border-radius: 6px;
    padding     : .45em 1.3em;
    font-size   : .85em;
    font-family : inherit;
    cursor      : pointer;
    transition  : filter .15s;
}
.sic-spawn-btn:hover:not(:disabled) { filter: brightness(1.15); }
.sic-spawn-btn:disabled { opacity: .4; cursor: not-allowed; }

.sic-hint {
    font-size   : .75em;
    color       : var(--c-muted);
    margin-top  : .3em;
    min-height  : 1.2em;
}

/* ── コンテナエリア ── */
.sic-container-area {
    display     : flex;
    flex-wrap   : wrap;
    gap         : .6em;
    min-height  : 4em;
    margin-top  : .4em;
}

.sic-empty {
    width       : 100%;
    text-align  : center;
    color       : var(--c-muted);
    font-size   : .82em;
    padding     : 1.2em 0;
    line-height : 1.7;
}

/* ── コンテナカード ── */
.sic-container {
    background  : var(--c-bg-light);
    border      : 1px solid var(--c-border);
    border-radius: 8px;
    overflow    : hidden;
    flex        : 1 1 160px;
    max-width   : 220px;
}

.sic-container.is-fresh {
    animation: sic-pop .35s ease-out;
}

@keyframes sic-pop {
    0%   { transform: scale(.85); opacity: 0; }
    60%  { transform: scale(1.04); }
    100% { transform: scale(1); opacity: 1; }
}

.sic-container__header {
    display         : flex;
    align-items     : center;
    gap             : .4em;
    padding         : .35em .5em;
    border-bottom   : 1px solid;
    border-color    : var(--c-border);
    background      : rgba(0,0,0,.15);
}

.sic-cname {
    font-size   : .78em;
    color       : var(--c-text);
    flex        : 1;
    overflow    : hidden;
    text-overflow: ellipsis;
    white-space : nowrap;
}

.sic-rm-btn {
    background  : none;
    border      : none;
    color       : var(--c-muted);
    cursor      : pointer;
    font-size   : .8em;
    padding     : 0 .2em;
    line-height : 1;
    transition  : color .15s;
}
.sic-rm-btn:hover { color: var(--c-red); }

.sic-container__body {
    padding     : .5em;
}

.sic-rw-layer {
    border      : 1px dashed;
    border-radius: 5px;
    padding     : .35em .5em;
    margin-bottom: .4em;
    font-size   : .72em;
}

.sic-rw-label  { display: block; color: var(--c-green); font-weight: bold; margin: .15em 0 .1em; }
.sic-rw-detail { display: block; color: var(--c-muted); font-size: .88em; }

.sic-shared-ref {
    font-size   : .7em;
    color       : var(--c-muted);
    text-align  : center;
}

.sic-shared-arrow { display: block; font-size: .9em; }
.sic-shared-img   { font-size: .88em; }

/* ── 説明バンド ── */
.sic-explain {
    margin-top  : .7em;
    padding     : .5em .7em;
    background  : rgba(137,180,250,.07);
    border-radius: 6px;
    font-size   : .78em;
    color       : var(--c-text);
    line-height : 1.6;
    min-height  : 2.5em;
}

@media (max-width: 520px) {
    .sic-container { flex: 1 1 130px; max-width: 100%; }
    .sic-layer      { flex-direction: column; align-items: flex-start; gap: .1em; }
}

/* =====================================================
   sim-lcstate  コンテナライフサイクル 状態マシン
   ===================================================== */

.slcst-root {
    font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
}

.slcst-layout {
    background   : var(--c-bg);
    border-radius: 10px;
    padding      : 1em;
    box-shadow   : 0 4px 20px rgba(0,0,0,.35);
    max-width    : 760px;
    display      : flex;
    gap          : 1em;
    align-items  : flex-start;
}

/* ── 状態図パネル ── */
.slcst-diagram-wrap {
    flex         : 0 0 300px;
    width        : 300px;
}

.slcst-diagram-title {
    font-size    : .78em;
    color        : var(--c-muted);
    text-align   : center;
    margin-bottom: .4em;
    letter-spacing: .04em;
}

.slcst-svg {
    width        : 100%;
    height       : auto;
    overflow     : visible;
}

/* SVG ノード */
.slcst-node-rect {
    fill         : transparent;
    stroke       : #45475a;
    stroke-width : 1.5;
    rx           : 6;
    transition   : fill .25s, stroke .25s;
}

.slcst-node-text {
    font-size    : 9px;
    font-family  : 'Fira Code', monospace;
    fill         : #cdd6f4;
    transition   : fill .25s;
    pointer-events: none;
    font-weight  : 600;
}

/* SVG 矢印 */
.slcst-arrow {
    stroke       : #45475a;
    stroke-width : 1;
    fill         : none;
    transition   : stroke .3s, stroke-width .3s;
}

/* ── 詳細パネル ── */
.slcst-detail {
    flex         : 1 1 0;
    min-width    : 0;
}

.slcst-badge {
    display      : inline-block;
    padding      : .2em .8em;
    border-radius: 5px;
    font-size    : .82em;
    font-weight  : bold;
    margin-bottom: .5em;
    color        : #1e1e2e;
}

.slcst-detail__desc {
    font-size    : .82em;
    color        : var(--c-text);
    line-height  : 1.6;
    margin-bottom: .5em;
}

.slcst-detail__sub {
    font-size    : .75em;
    color        : var(--c-muted);
    line-height  : 1.5;
    margin-bottom: .6em;
}

/* 終了コード */
.slcst-detail__exit {
    margin-bottom: .6em;
    font-size    : .78em;
}

.slcst-exit-label {
    color        : var(--c-muted);
    margin-right : .4em;
}

.slcst-exit-code {
    font-weight  : bold;
    margin-right : .4em;
    font-size    : 1.1em;
}

.slcst-exit--ok  { color: var(--c-green); }
.slcst-exit--err { color: var(--c-red); }

.slcst-exit-meaning {
    color        : var(--c-muted);
}

/* アクションボタン */
.slcst-detail__actions-label {
    font-size    : .74em;
    color        : var(--c-muted);
    margin-bottom: .35em;
}

.slcst-detail__actions {
    display      : flex;
    flex-wrap    : wrap;
    gap          : .4em;
}

.slcst-action-btn {
    background   : var(--c-bg-light);
    border       : 1px solid var(--c-border);
    color        : var(--c-blue);
    border-radius: 5px;
    padding      : .3em .75em;
    font-size    : .76em;
    font-family  : inherit;
    cursor       : pointer;
    transition   : all .15s;
    white-space  : nowrap;
}
.slcst-action-btn:hover {
    background   : rgba(137,180,250,.12);
    border-color : var(--c-blue);
}

.slcst-no-actions {
    font-size    : .78em;
    color        : var(--c-muted);
    font-style   : italic;
}

/* ── 操作ログ ── */
.slcst-log {
    background   : var(--c-bg-light);
    border       : 1px solid var(--c-border);
    border-radius: 6px;
    padding      : .5em .7em;
    max-height   : 6em;
    overflow-y   : auto;
    font-size    : .76em;
    margin-top   : .6em;
    max-width    : 760px;
}

.slcst-log__line {
    margin-bottom: .2em;
    line-height  : 1.4;
}

.slcst-log__cmd    { color: var(--c-blue);  }
.slcst-log__arrow  { color: var(--c-muted); margin: 0 .3em; }
.slcst-log__from   { color: var(--c-muted); }
.slcst-log__to     { font-weight: bold; }
.slcst-log__code   { color: var(--c-muted); margin-left: .4em; }

/* ── フッター ── */
.slcst-footer {
    text-align   : right;
    margin-top   : .5em;
    max-width    : 760px;
}

.slcst-reset-btn {
    background   : none;
    border       : 1px solid var(--c-border);
    color        : var(--c-muted);
    border-radius: 5px;
    padding      : .3em .8em;
    font-size    : .76em;
    font-family  : inherit;
    cursor       : pointer;
    transition   : all .15s;
}
.slcst-reset-btn:hover { color: var(--c-text); border-color: var(--c-text); }

@media (max-width: 560px) {
    .slcst-layout        { flex-direction: column; }
    .slcst-diagram-wrap  { flex: none; width: 100%; max-width: 300px; margin: 0 auto; }
}

/* =====================================================
   sim-itmode  インタラクティブモード（-it）シミュレータ
   ===================================================== */

.sit-root {
    font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
}

.sit-wrapper {
    background   : var(--c-bg);
    border-radius: 10px;
    padding      : 1em;
    box-shadow   : 0 4px 20px rgba(0,0,0,.35);
    max-width    : 760px;
}

/* ── モードインジケータ ── */
.sit-indicator {
    display      : flex;
    align-items  : center;
    gap          : .5em;
    margin-bottom: .7em;
    font-size    : .78em;
}

.sit-indicator__item {
    display      : flex;
    align-items  : center;
    gap          : .35em;
    padding      : .2em .65em;
    border-radius: 5px;
    border       : 1px solid var(--c-border);
    color        : var(--c-muted);
    transition   : all .25s;
}

.sit-indicator__item.is-active {
    border-color : var(--c-green);
    color        : var(--c-text);
    background   : rgba(166,227,161,.08);
}

.sit-ind-dot {
    width        : 7px;
    height       : 7px;
    border-radius: 50%;
    background   : var(--c-muted);
    transition   : background .25s;
    flex-shrink  : 0;
}

.sit-indicator__item--host.is-active .sit-ind-dot { background: var(--c-blue); }
.sit-indicator__item:not(.sit-indicator__item--host).is-active .sit-ind-dot { background: var(--c-green); }

.sit-indicator__arrow {
    color        : var(--c-muted);
    font-size    : .9em;
}

/* ── ターミナル ── */
.sit-terminal {
    background   : var(--c-bg);
    border       : 1px solid var(--c-border);
    border-radius: 8px;
    overflow     : hidden;
    margin-bottom: .7em;
}

.sit-terminal__chrome {
    background   : var(--c-header);
    padding      : .4em .7em;
    display      : flex;
    align-items  : center;
    gap          : .35em;
}

.sit-dot {
    width        : 10px;
    height       : 10px;
    border-radius: 50%;
    flex-shrink  : 0;
}
.sit-dot.r { background: #f38ba8; }
.sit-dot.y { background: #f9e2af; }
.sit-dot.g { background: #a6e3a1; }

.sit-title-bar {
    flex         : 1;
    text-align   : center;
    font-size    : .75em;
    color        : var(--c-muted);
    letter-spacing: .04em;
}

.sit-output {
    min-height   : 180px;
    max-height   : 280px;
    overflow-y   : auto;
    padding      : .7em .9em;
    font-size    : .82em;
    line-height  : 1.7;
}

.sit-line     { color: var(--c-text); }
.sit-echo     { color: var(--c-muted); margin-bottom: .05em; }
.sit-hd       { color: var(--c-blue);   font-weight: bold; }
.sit-err      { color: var(--c-red);    }
.sit-muted    { color: var(--c-muted);  }
.sit-id       { color: var(--c-teal);   }
.sit-hint     { color: var(--c-yellow); font-size: .9em; }

/* プロンプト色（echo 行内） */
.sit-prompt--host { color: var(--c-blue);  }
.sit-prompt--ctr  { color: var(--c-green); }

.sit-input-row {
    display      : flex;
    align-items  : center;
    padding      : .4em .9em;
    border-top   : 1px solid var(--c-border);
    gap          : .4em;
}

.sit-prompt {
    font-size    : .85em;
    white-space  : nowrap;
    flex-shrink  : 0;
    transition   : color .25s;
}

.sit-prompt--host { color: var(--c-blue);  }
.sit-prompt--ctr  { color: var(--c-green); }

.sit-input {
    flex         : 1;
    background   : transparent;
    border       : none;
    outline      : none;
    color        : var(--c-text);
    font-family  : inherit;
    font-size    : .85em;
    caret-color  : var(--c-text);
}

/* ── クイックアクション ── */
.sit-actions {
    margin-bottom: .5em;
}

.sit-actions__label {
    font-size    : .73em;
    color        : var(--c-muted);
    margin-bottom: .3em;
}

.sit-actions__btns {
    display      : flex;
    flex-wrap    : wrap;
    gap          : .35em;
}

.sit-action-btn {
    background   : var(--c-bg-light);
    border       : 1px solid var(--c-border);
    color        : var(--c-blue);
    border-radius: 5px;
    padding      : .28em .7em;
    font-size    : .75em;
    font-family  : inherit;
    cursor       : pointer;
    transition   : all .15s;
    white-space  : nowrap;
}
.sit-action-btn:hover {
    background   : rgba(137,180,250,.1);
    border-color : var(--c-blue);
}

/* ── デタッチボタン ── */
.sit-detach-row {
    text-align   : right;
    margin-top   : .3em;
}

.sit-detach-btn {
    background   : rgba(249,226,175,.08);
    border       : 1px solid var(--c-yellow);
    color        : var(--c-yellow);
    border-radius: 5px;
    padding      : .3em .9em;
    font-size    : .76em;
    font-family  : inherit;
    cursor       : pointer;
    transition   : all .15s;
}
.sit-detach-btn:hover { background: rgba(249,226,175,.15); }

@media (max-width: 520px) {
    .sit-output { min-height: 140px; max-height: 220px; font-size: .78em; }
}

/* =====================================================
   sim-volmount  ボリューム/バインドマウント比較
   ===================================================== */

.svm-root {
    font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
}

.svm-layout {
    background   : var(--c-bg);
    border-radius: 10px;
    padding      : 1em;
    box-shadow   : 0 4px 20px rgba(0,0,0,.35);
    max-width    : 760px;
}

/* ── モード選択 ── */
.svm-modes {
    display      : flex;
    gap          : .5em;
    flex-wrap    : wrap;
    margin-bottom: .7em;
}

.svm-mode-btn {
    background   : var(--c-bg-light);
    border       : 1px solid var(--c-border);
    color        : var(--c-muted);
    border-radius: 6px;
    padding      : .3em .9em;
    font-size    : .8em;
    font-family  : inherit;
    cursor       : pointer;
    transition   : all .2s;
}
.svm-mode-btn.is-active,
.svm-mode-btn:hover {
    border-color : var(--mode-color, var(--c-blue));
    color        : var(--mode-color, var(--c-blue));
    background   : rgba(137,180,250,.07);
}

/* ── コマンドプレビュー ── */
.svm-cmd-preview {
    background   : var(--c-bg-light);
    border       : 1px solid var(--c-border);
    border-radius: 5px;
    padding      : .35em .7em;
    font-size    : .78em;
    color        : var(--c-teal);
    margin-bottom: .7em;
    overflow-x   : auto;
    white-space  : nowrap;
}

/* ── メインビジュアル ── */
.svm-visual {
    display      : flex;
    align-items  : center;
    gap          : .5em;
    margin-bottom: .7em;
}

/* ── パネル共通 ── */
.svm-panel {
    flex         : 1 1 0;
    border       : 1px solid var(--c-border);
    border-radius: 8px;
    overflow     : hidden;
    min-width    : 0;
    transition   : opacity .3s;
}

.svm-panel__title {
    background   : var(--c-header);
    padding      : .3em .6em;
    font-size    : .75em;
    color        : var(--c-blue);
    font-weight  : bold;
    letter-spacing: .02em;
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis;
}

.svm-panel__badge {
    display      : inline-block;
    margin       : .3em .6em;
    padding      : .1em .5em;
    border-radius: 4px;
    font-size    : .7em;
    font-weight  : bold;
}

.svm-badge--running { background: rgba(166,227,161,.2); color: var(--c-green); }
.svm-badge--deleted { background: rgba(243,139,168,.15); color: var(--c-red); }

.svm-panel__body {
    padding      : .4em .5em;
    min-height   : 100px;
}

/* ── レイヤー ── */
.svm-layer {
    border       : 1px dashed var(--c-border);
    border-radius: 5px;
    padding      : .35em .5em;
    margin-bottom: .35em;
    font-size    : .75em;
    transition   : border-color .3s;
}

.svm-layer--ro { border-color: #585b70; }
.svm-layer--rw { border-color: var(--c-green); }

.svm-layer__label {
    display      : block;
    color        : var(--c-muted);
    font-size    : .85em;
    margin-bottom: .25em;
}

/* ── ファイル ── */
.svm-files {
    display      : flex;
    flex-direction: column;
    gap          : .15em;
}

.svm-file {
    display      : block;
    color        : var(--c-text);
    font-size    : .82em;
}

.svm-file--mounted {
    color        : var(--c-teal);
}

.svm-files--ro .svm-file {
    color        : var(--c-muted);
}

.svm-placeholder {
    color        : var(--c-muted);
    font-size    : .8em;
    font-style   : italic;
}

/* ── マウント矢印 ── */
.svm-mount-arrow {
    flex         : 0 0 50px;
    display      : flex;
    flex-direction: column;
    align-items  : center;
    gap          : .2em;
}

.svm-arrow__line {
    width        : 38px;
    height       : 2px;
    background   : var(--c-green);
    position     : relative;
}
.svm-arrow__line::before,
.svm-arrow__line::after {
    content      : '';
    position     : absolute;
    top          : -4px;
    border-top   : 5px solid transparent;
    border-bottom: 5px solid transparent;
}
.svm-arrow__line::before {
    left         : -1px;
    border-right : 7px solid var(--c-green);
}
.svm-arrow__line::after {
    right        : -1px;
    border-left  : 7px solid var(--c-green);
}

.svm-arrow__label {
    font-size    : .62em;
    color        : var(--c-green);
    text-align   : center;
    line-height  : 1.3;
    word-break   : break-all;
}

/* ── 操作ボタン ── */
.svm-ops {
    display      : flex;
    flex-wrap    : wrap;
    gap          : .4em;
    margin-bottom: .5em;
}

.svm-op-btn {
    border       : none;
    border-radius: 6px;
    padding      : .35em .85em;
    font-size    : .78em;
    font-family  : inherit;
    cursor       : pointer;
    transition   : filter .15s, opacity .2s;
    font-weight  : 500;
}
.svm-op-btn:hover:not(:disabled) { filter: brightness(1.1); }
.svm-op-btn:disabled { opacity: .35; cursor: not-allowed; }

.svm-op-btn--write   { background: var(--c-docker); color: #fff; }
.svm-op-btn--delete  { background: var(--c-red);    color: #1e1e2e; }
.svm-op-btn--restart { background: var(--c-green);  color: #1e1e2e; }
.svm-op-btn--reset   { background: var(--c-bg-light); color: var(--c-muted); border: 1px solid var(--c-border); }

/* ── 説明バンド ── */
.svm-explain {
    min-height   : 2.2em;
    font-size    : .78em;
    line-height  : 1.6;
    color        : var(--c-text);
    padding      : .4em .6em;
    background   : rgba(137,180,250,.06);
    border-radius: 5px;
}

.svm-explain--ok  { background: rgba(166,227,161,.1); color: var(--c-green); }
.svm-explain--err { background: rgba(243,139,168,.1); color: var(--c-red); }

@media (max-width: 520px) {
    .svm-visual        { flex-direction: column; }
    .svm-mount-arrow   { flex-direction: row; width: 100%; justify-content: center; }
    .svm-arrow__line   { width: 60px; }
    .svm-panel         { width: 100%; }
}

/* =====================================================
   sim-dockerfile  Dockerfile ビルドシミュレータ
   ===================================================== */

/* ── 外枠 ── */
.sdf-wrap {
    background      : var(--c-bg);
    border          : 1px solid var(--c-border);
    border-radius   : 10px;
    overflow        : hidden;
    font-family     : 'Fira Code', 'Consolas', monospace;
    font-size       : .82em;
    color           : var(--c-text);
}

/* ── ツールバー ── */
.sdf-toolbar {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    flex-wrap       : wrap;
    gap             : 8px;
    padding         : .55em .9em;
    background      : var(--c-header);
    border-bottom   : 1px solid var(--c-border);
}

.sdf-toolbar-left {
    display         : flex;
    align-items     : center;
    flex-wrap       : wrap;
    gap             : 12px;
    min-width       : 0;
}

.sdf-brand {
    font-weight     : bold;
    color           : var(--c-blue);
    white-space     : nowrap;
    font-size       : .95em;
}

.sdf-cache-label {
    display         : flex;
    align-items     : center;
    gap             : 5px;
    cursor          : pointer;
    font-size       : .83em;
    color           : var(--c-muted);
    white-space     : nowrap;
}

.sdf-cache-label input[type="checkbox"] {
    accent-color    : var(--c-teal);
}

.sdf-btns {
    display         : flex;
    gap             : 6px;
    flex-shrink     : 0;
}

.sdf-btn {
    padding         : .28em .75em;
    border          : 1px solid var(--c-border);
    border-radius   : 5px;
    background      : var(--c-bg-light);
    color           : var(--c-text);
    font-size       : .82em;
    cursor          : pointer;
    white-space     : nowrap;
    transition      : background .15s;
}

.sdf-btn:hover:not(:disabled)  { background: var(--c-border); }
.sdf-btn:disabled               { opacity: .4; cursor: not-allowed; }
.sdf-btn-step  { color: var(--c-green); border-color: var(--c-green); }
.sdf-btn-reset { color: var(--c-muted); }

/* ── 2カラムメイン ── */
.sdf-main {
    display         : flex;
    gap             : 0;
    min-height      : 360px;
}

.sdf-left {
    flex            : 1 1 0;
    min-width       : 0;
    display         : flex;
    flex-direction  : column;
    border-right    : 1px solid var(--c-border);
}

.sdf-right {
    flex            : 0 0 260px;
    width           : 260px;
    display         : flex;
    flex-direction  : column;
}

/* ── パネルヘッダー ── */
.sdf-panel-hdr {
    padding         : .3em .7em;
    font-size       : .78em;
    font-weight     : bold;
    color           : var(--c-blue);
    background      : var(--c-bg-light);
    border-bottom   : 1px solid var(--c-border);
}

.sdf-layer-hint {
    font-weight     : normal;
    color           : var(--c-muted);
    font-size       : .85em;
    margin-left     : .4em;
}

.sdf-ft-hdr {
    border-top      : 1px solid var(--c-border);
}

/* ── Dockerfile 表示 ── */
.sdf-dockerfile {
    flex            : 1 1 auto;
    overflow-y      : auto;
    padding         : .4em 0;
    min-height      : 160px;
}

.sdf-df-row {
    display         : flex;
    align-items     : center;
    gap             : .4em;
    padding         : .22em .7em;
    border-left     : 3px solid transparent;
    transition      : background .15s;
    font-size       : .9em;
    line-height     : 1.6;
}

.sdf-df-row--active {
    background      : rgba(137, 180, 250, 0.1);
    border-left-color: var(--c-blue);
}

.sdf-df-row--done {
    opacity         : .85;
}

.sdf-df-lnum {
    color           : var(--c-muted);
    font-size       : .8em;
    width           : 1.4em;
    text-align      : right;
    flex-shrink     : 0;
}

.sdf-df-chk {
    color           : var(--c-green);
    font-size       : .8em;
    width           : 1em;
    flex-shrink     : 0;
}

.sdf-df-code {
    flex            : 1;
    min-width       : 0;
}

.sdf-df-instr {
    font-weight     : bold;
}

.sdf-df-args {
    color           : #cdd6f4;
}

/* キャッシュ/ビルドバッジ（Dockerfile 行内） */
.sdf-ibadge {
    font-size       : .7em;
    padding         : .1em .38em;
    border-radius   : 3px;
    flex-shrink     : 0;
    font-weight     : bold;
    letter-spacing  : .03em;
}

.sdf-ibadge--cached {
    background      : rgba(148, 226, 213, 0.15);
    color           : var(--c-teal);
    border          : 1px solid rgba(148, 226, 213, 0.3);
}

.sdf-ibadge--build {
    background      : rgba(243, 139, 168, 0.15);
    color           : var(--c-red);
    border          : 1px solid rgba(243, 139, 168, 0.3);
}

/* ── ビルドログ ── */
.sdf-log {
    flex            : 0 0 120px;
    overflow-y      : auto;
    padding         : .4em .7em;
    background      : #12111f;
    border-top      : 1px solid var(--c-border);
    font-size       : .82em;
    line-height     : 1.7;
}

.sdf-log-prompt {
    color           : var(--c-green);
    margin-bottom   : .3em;
}

.sdf-log-line {
    white-space     : pre-wrap;
    word-break      : break-all;
}

/* ── レイヤースタック ── */
.sdf-layers {
    flex            : 1 1 auto;
    overflow-y      : auto;
    padding         : .5em;
    display         : flex;
    flex-direction  : column-reverse; /* 新しいレイヤーが上に積まれる */
    gap             : 6px;
    min-height      : 120px;
    max-height      : 220px;
}

.sdf-layers-empty {
    color           : var(--c-muted);
    font-size       : .8em;
    text-align      : center;
    padding         : 1.5em .5em;
    font-style      : italic;
    align-self      : center;
}

.sdf-layer-card {
    display         : flex;
    align-items     : center;
    gap             : .5em;
    padding         : .4em .6em;
    border-radius   : 6px;
    border          : 1px solid var(--c-border);
    opacity         : 0;
    transform       : translateY(-6px);
    transition      : opacity .25s, transform .25s;
}

.sdf-layer-card--in {
    opacity         : 1;
    transform       : translateY(0);
}

.sdf-layer-cached {
    opacity         : 0.7 !important;
}

.sdf-layer-icon {
    font-size       : 1.1em;
    flex-shrink     : 0;
}

.sdf-layer-info {
    flex            : 1;
    min-width       : 0;
}

.sdf-layer-label {
    font-size       : .85em;
    font-weight     : bold;
    overflow        : hidden;
    text-overflow   : ellipsis;
    white-space     : nowrap;
}

.sdf-layer-sub {
    font-size       : .75em;
    color           : var(--c-muted);
}

.sdf-layer-meta {
    display         : flex;
    flex-direction  : column;
    align-items     : flex-end;
    gap             : 2px;
    flex-shrink     : 0;
}

.sdf-lbadge {
    font-size       : .68em;
    padding         : .08em .35em;
    border-radius   : 3px;
    font-weight     : bold;
}

.sdf-lbadge--new {
    background      : rgba(166, 227, 161, 0.2);
    color           : var(--c-green);
}

.sdf-lbadge--cached {
    background      : rgba(148, 226, 213, 0.15);
    color           : var(--c-teal);
}

.sdf-layer-size {
    font-size       : .72em;
    color           : var(--c-muted);
}

/* ── ファイルツリー ── */
.sdf-filetree {
    flex            : 0 0 auto;
    padding         : .5em .7em;
    font-size       : .8em;
    line-height     : 1.8;
    min-height      : 80px;
    border-top      : 1px solid var(--c-border);
}

.sdf-ft-empty {
    color           : var(--c-muted);
    font-style      : italic;
}

.sdf-ft-root {
    color           : var(--c-muted);
    margin-bottom   : .1em;
}

.sdf-ft-dir {
    color           : var(--c-blue);
    padding-left    : .5em;
    font-weight     : bold;
}

.sdf-ft-item {
    padding-left    : 2.2em;
    color           : var(--c-text);
}

/* ── ステップ説明 ── */
.sdf-step-info {
    display         : flex;
    align-items     : flex-start;
    gap             : .6em;
    padding         : .6em .9em;
    background      : var(--c-bg-light);
    border-top      : 1px solid var(--c-border);
    font-size       : .82em;
    line-height     : 1.6;
    min-height      : 3em;
}

.sdf-step-badge {
    flex-shrink     : 0;
    font-size       : .78em;
    font-weight     : bold;
    padding         : .15em .5em;
    border-radius   : 4px;
    margin-top      : .1em;
    letter-spacing  : .04em;
}

.sdf-step-desc {
    color           : var(--c-text);
    flex            : 1;
}

/* ── レスポンシブ ── */
@media (max-width: 620px) {
    .sdf-main           { flex-direction: column; }
    .sdf-left           { border-right: none; border-bottom: 1px solid var(--c-border); }
    .sdf-right          { width: 100%; flex: none; }
    .sdf-layers         { max-height: 160px; }
    .sdf-toolbar        { flex-direction: column; align-items: flex-start; }
    .sdf-cache-text     { display: none; }
}