/* =========================================
   CSS: Prompt Factory Pro v42 (Cleaned & Optimized)
   Based on V30/V36/V42 Final Logic
   ========================================= */
:root { 
    --primary: #0ea5e9; --primary-dark: #0284c7; --accent: #f59e0b; 
    --bg-body: #f1f5f9; --text-main: #334155; --text-sub: #64748b;
    --border: #cbd5e1; 
    --danger: #ef4444; --neg-bg: #fff1f2; --neg-text: #be123c; 
    --radius: 8px;
    --shadow: 0 2px 4px rgba(0,0,0,0.05);
}

body { background: var(--bg-body); color: var(--text-main); font-family: "Helvetica Neue", Arial, sans-serif; margin: 0; padding: 20px; padding-bottom: 450px; font-size: 13px; line-height: 1.5; }

/* --- Layout Container (v42 Fixed) --- */
.container { 
    max-width: 1200px; 
    width: 95%; 
    margin: 0 auto; 
    position: relative; 
    box-sizing: border-box;
}

/* --- タイトルのリニューアル --- */
h1 {
    text-align: center;
    margin: 10px 0 20px 0;
    font-weight: 900;
    font-size: 32px; /* 少し大きくして存在感をアップ */
    letter-spacing: -1px; /* 文字間を少し詰めてモダンに */
    
    /* 🌟 文字にグラデーションをかける魔法ッス */
    background: linear-gradient(135deg, #1e293b 30%, #0ea5e9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* 🌟 わずかなドロップシャドウで文字を浮かせる */
    filter: drop-shadow(0 2px 4px rgba(14, 165, 233, 0.1));
}


/* --- インフォメーションセンターの余白を広げる --- */
.pfp-info-center {
    max-width: 900px;
    /* 🌟 margin-top を 20px → 50px に大幅拡張ッス！ */
    margin: 50px auto 40px auto; 
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* --- タイトルを包む箱 --- */
.h1-wrap {
    margin-top: 40px;    /* 🌟 ページ最上部からタイトルまでの距離 */
    margin-bottom: 40px; /* 🌟 タイトルから下の要素（インフォバー）までの距離！ここをいじるッス！ */
    text-align: center;
}

/* --- インフォメーションセンターの余白をリセット --- */
.pfp-info-center {
    max-width: 900px;
    margin: 0 auto 40px auto; /* 上のマージンを0にして、h1-wrap側の指示に従わせるッス */
    display: flex;
    flex-direction: column;
    gap: 15px;
}


/* Common UI */
button { cursor: pointer; font-family: inherit; outline: none; }
.btn { padding: 6px 16px; border: 1px solid transparent; border-radius: var(--radius); font-weight: 700; color: #fff; font-size: 12px; transition: 0.1s; display: inline-flex; align-items: center; justify-content: center; gap: 5px; box-shadow: var(--shadow); }
.btn:hover { transform: translateY(-1px); opacity: 0.9; } .btn:active { transform: translateY(1px); }
.btn-blue { background: var(--primary); } .btn-gold { background: var(--accent); } .btn-red { background: var(--danger); } 
.btn-sm { padding: 4px 10px; font-size: 11px; }

.btn-tool { padding: 5px 12px; font-size: 11px; font-weight: bold; background: #fff; color: var(--text-sub); border: 1px solid var(--border); border-radius: var(--radius); transition: 0.1s; display:inline-flex; align-items:center; gap:4px; }
.btn-tool:hover { border-color: var(--primary); color: var(--primary); background: #f8fafc; }
.btn-trans-deepl { background: #0f2b46; color: white; border:none; } 
.btn-trans-google { background: #4285f4; color: white; border:none; }

/* --- Main Structure --- */
.main-op-wrapper { position: relative; margin-top: 40px; margin-bottom: 25px; width: 100%; }
.main-op-panel { background: #fff; border: 1px solid #fff; border-radius: 12px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); position: relative; z-index: 5; width: 100%; box-sizing: border-box; }

/* --- Save Unit System (v42 Final Logic) --- */
.scene-save-area {
    margin: 20px 0;
    padding: 10px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    position: relative; /* Fixed from absolute */
    z-index: 10;
}
.scene-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.scene-label { font-weight: bold; color: #475569; }
.btn-reset-main { background: #fff; border: 1px solid #ef4444; border-radius: 4px; padding: 4px 10px; cursor: pointer; color: #ef4444; font-size: 11px; font-weight:bold; }
.btn-reset-main:hover { background: #fee2e2; }

/* Save Unit Cards */
.save-unit { background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px; margin-bottom: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.03); }
.su-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e2e8f0; padding-bottom: 6px; margin-bottom: 8px; }
.su-title { font-weight: bold; color: #475569; font-size: 11px; }
.su-desc { font-size: 10px; color: #94a3b8; margin-left: 8px; }

/* Save Unit Grid (PC: 2 Col / Mobile: 1 Col) */
.unit-grid-container { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.su-inner-split { display: flex; gap: 15px; }
.su-ctrl-side { flex: 1; min-width: 0; }
.su-input-side { flex: 1; min-width: 0; display: flex; align-items: flex-start; }

/* --- Fix: Input Fields & Clear Button --- */

/* 入力枠を1行に固定し、広げられないようにする */
.su-real-input {
    width: 100%;
    height: 32px !important;     /* 高さを固定 */
    min-height: 32px !important;
    max-height: 32px !important;
    line-height: 1.5;
    padding: 4px 8px;
    font-size: 12px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    resize: none !important;     /* ユーザーによるリサイズを禁止 */
    white-space: nowrap;         /* 折り返さない */
    overflow-x: auto;            /* 横スクロールのみ許可 */
    overflow-y: hidden;
    box-sizing: border-box;
}
.su-real-input:focus {
    background: #fff;
    border-color: #3b82f6;
    outline: none;
}

/* クリアボタンのスタイル */
.btn-clear-unit {
    background: transparent;
    border: 1px solid #cbd5e1;
    color: #94a3b8;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.2s;
}
.btn-clear-unit:hover {
    background: #fee2e2;
    color: #ef4444;
    border-color: #fca5a5;
}

/* --- Mode & Detail Panel --- */
.top-mode-area { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; border-bottom: 1px dashed var(--border); padding-bottom: 20px; }

.mini-toggle-box.active-niji { background: #faf5ff; border-color: #d8b4fe; }
.mini-label { font-size: 12px; font-weight: 800; color: #94a3b8; cursor: pointer; user-select: none; transition: 0.2s; }
.mini-label.active { color: #0ea5e9; transform: scale(1.05); } .mini-label.active-niji { color: #8b5cf6; transform: scale(1.05); }

.switch-wrap { position: relative; width: 44px; height: 24px; }
.switch-inp { opacity: 0; width: 0; height: 0; }
.switch-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: .3s; border-radius: 34px; }
.switch-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.switch-inp:checked + .switch-slider { background-color: #8b5cf6; } .switch-inp:not(:checked) + .switch-slider { background-color: #0ea5e9; } .switch-inp:checked + .switch-slider:before { transform: translateX(20px); }

.btn-detail-toggle.active { background: #e0f2fe; color: var(--primary); border-color: var(--primary); }

#mode-detail-wrapper { 
    display: none; margin-bottom: 12px !important;
 border-radius: 6px; border: 1px solid #e2e8f0; transition: all 0.2s ease;
}
#mode-detail-wrapper.show { display: block !important; animation: slideDown 0.2s; }
#mode-detail-wrapper.sd-active { background: #f0f9ff; border: 2px solid #bae6fd; }
#mode-detail-wrapper.niji-active { background: #faf5ff; border: 2px solid #e9d5ff; }

.sl-box { background:#fff; border:1px solid #cbd5e1; border-radius:var(--radius); padding:8px; }
.sl-label { font-size:10px; font-weight:800; color:#64748b; margin-bottom:4px; display:flex; justify-content:space-between; align-items:center; }
.sl-inp { width:100%; border:1px solid #cbd5e1; border-radius:4px; padding:5px; font-size:12px; box-sizing:border-box; }

#mode-detail-wrapper .save-unit {
    margin-bottom: 6px !important; /* 20pxから10pxへ */
}

#mode-detail-wrapper .su-inner-split {
    padding: 6px 12px !important; /* 15pxから8pxへ */
    gap: 8px !important;         /* 上下のパーツ間隔も詰める */
}

.niji-param-grid-compact {
    padding: 10px 15px !important; /* 上下だけ少し詰める */
    gap: 8px !important;          /* 項目間の隙間を詰める */
}


/* Section Headers */
.section-head { font-size: 14px; font-weight: 800; color: #334155; margin-bottom: 10px; display:flex; align-items:center; gap:8px; border-left: 4px solid var(--primary); padding-left: 10px; background: #f8fafc; padding-top:6px; padding-bottom:6px; border-radius: 0 var(--radius) var(--radius) 0; }

/* --- Studio & Preview Area --- */
.studio-container { border: 2px solid #cbd5e1; border-radius: 8px; background: #fff; overflow: hidden; margin-top: 5px; margin-bottom: 20px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
.st-header { background: #f1f5f9; border-bottom: 1px solid #e2e8f0; padding: 8px 8px 0 8px; }
.st-tabs { display: flex; gap: 4px; overflow-x: auto; }
.st-tab-btn { padding: 8px 16px; font-size: 11px; background: #e2e8f0; border: 1px solid #cbd5e1; border-bottom: none; border-radius: 6px 6px 0 0; cursor: pointer; color: #64748b; font-weight: bold; margin-bottom: -1px; z-index: 1; white-space: nowrap; }
.st-tab-btn.active { background: #fff; color: #0ea5e9; border-top: 3px solid #0ea5e9; border-bottom: 1px solid #fff; z-index: 2; }
.st-control-area { padding: 15px; background: #fff; border-bottom: 1px solid #cbd5e1; min-height: 100px; }

/* Studio Layout Grid */
.studio-layout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 10px; }
.st-panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 15px; }
.st-group-label { font-size: 12px; font-weight: bold; color: #475569; border-bottom: 2px solid #f1f5f9; padding-bottom: 4px; margin-bottom: 8px; display: block; }
.st-chip-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.preset-btn-group { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 5px; }

/* Buttons & Chips in Studio */
/* --- プリセットボタン基本状態（OFF・消灯） --- */
.btn-preset-main { 
    flex: 1; 
    min-width: 100px; 
    padding: 10px 4px; 
    font-size: 11px; 
    font-weight: bold; 
    color: #64748b;            /* 文字色を落ち着いたグレーに */
    background: #f1f5f9;       /* 背景を薄いグレーに */
    border: 1px solid #cbd5e1; /* うっすら枠線をつける */
    border-radius: 6px; 
    cursor: pointer; 
    text-align: center; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); 
    transition: transform 0.1s, opacity 0.2s, background 0.3s, color 0.3s, border-color 0.3s; 
}
.btn-preset-main:hover {
    background: #e2e8f0;
    color: #334155;
}
.btn-preset-main:active { transform: translateY(1px); }

/* --- プリセットボタンON状態（点灯） --- */
.btn-preset-main.active {
    color: #fff;                  /* 文字を白に */
    border-color: transparent;    /* 枠線を消してスッキリ */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); /* 凹んだような押し込み感をプラス */
}

/* ▼ .activeが付いた時【だけ】色を発動させる ▼ */
/* 指定なしのデフォルト色がONになった時（紫） */
.btn-preset-main.active:not(.p-std):not(.p-hq):not(.p-real) {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
}
/* スタンダード系がONになった時（青） */
.btn-preset-main.p-std.active { 
    background: linear-gradient(135deg, #3b82f6, #2563eb); 
}
/* ハイクオリティ系がONになった時（オレンジ/金） */
.btn-preset-main.p-hq.active { 
    background: linear-gradient(135deg, #f59e0b, #d97706); 
}
/* リアル・特殊系がONになった時（緑） */
.btn-preset-main.p-real.active { 
    background: linear-gradient(135deg, #10b981, #059669); 
}

/* --- Studio Chips (No Checkmark) --- */
.toggle-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #64748b;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.1s;
    margin: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.toggle-chip:hover {
    background: #f1f5f9;
    color: #334155;
}

/* 点灯時：色のみ変更（チェックマークなし） */
.toggle-chip.active {
    background: #e0f2fe; /* 薄い青背景 */
    border-color: #0ea5e9;
    color: #0284c7;      /* 濃い青文字 */
    transform: translateY(1px); /* 押した感 */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

/* 古い設定があれば削除または上書きされますが、念のため
   .toggle-chip.active::before { content: none !important; } 
   のような記述は不要です。上記で再定義すれば消えます。
*/


/* --- Dictionary Chips (Active Support) --- */
.chip-btn {
    background: #fff;
    border: 1px solid #cbd5e1;
    padding: 6px 12px;
    margin: 3px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    color: #475569;
    transition: 0.1s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.chip-btn:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #1e293b;
}

/* 辞書チップの点灯スタイル */
.chip-btn.active {
    background: #f0fdf4; /* 薄い緑背景 */
    border-color: #22c55e;
    color: #15803d;      /* 濃い緑文字 */
    font-weight: bold;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

/* Select Box in Studio */
.st-select-wrapper { margin-bottom: 8px; }
.st-select-label { font-size: 11px; font-weight: bold; color: #64748b; display: block; margin-bottom: 2px; }
.st-select-box { width: 100%; padding: 8px; font-size: 12px; border: 1px solid #cbd5e1; border-radius: 6px; background: #f8fafc; color: #334155; }

/* Preview Container */
.cp-container { margin: 15px; border: 2px solid #3b82f6; border-radius: 6px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.cp-header { background: #e2e8f0; padding: 4px 4px 0 4px; border-bottom: 1px solid #cbd5e1; }
.cp-tabs { display: flex; gap: 2px; overflow-x: auto; }
.cp-tab-btn { padding: 11px 11px; font-size: 10px; background: #cbd5e1; border: none; border-radius: 4px 4px 0 0; color: #475569; font-weight: bold; cursor: pointer; flex: 1; white-space: nowrap; position: relative; }
.cp-tab-btn.active { background: #fff; color: #0ea5e9; border-top: 2px solid #0ea5e9; }
.cp-tab-btn.neg.active { color: #ef4444; border-top-color: #ef4444; background: #fff1f2; }
.cp-tab-btn.has-text::after { content: '●'; position: absolute; top: 2px; right: 2px; font-size: 8px; color: #0ea5e9; }
.cp-tab-btn.neg.has-text::after { color: #ef4444; }

.layer-stack-view { padding: 12px 12px 25px 12px; min-height: 80px; max-height: 150px; overflow-y: auto; background: #f8fafc; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.stack-clear-btn { position: absolute; bottom: 5px; right: 5px; background: #f1f5f9; color: #94a3b8; border: 1px solid #cbd5e1; font-size: 9px; padding: 2px 6px; border-radius: 4px; cursor: pointer; z-index: 5; }
.stack-clear-btn:hover { background: #fee2e2; color: #ef4444; border-color: #fca5a5; }

.stack-item-chip { font-size: 11px; background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; padding: 4px 8px; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; transition: all 0.2s; }
.stack-item-chip:hover { background: #bae6fd; transform: translateY(-1px); }
.stack-item-chip::after { content: '×'; margin-left: 6px; font-weight: bold; opacity: 0.6; }
.stack-item-chip.neg-chip { background: #ffe4e6; color: #be123c; border-color: #fecdd3; }

.cp-textarea { width: 100%; box-sizing: border-box; border: none; padding: 10px; font-size: 13px; outline: none; resize: vertical; min-height: 100px; line-height: 1.6; display: none; }
.cp-textarea.active { display: block; }
.cp-toolbar { margin-top: 5px; padding: 4px; background: #e2e8f0; border-radius: 4px; display: flex; gap: 5px; flex-wrap: wrap; }
.tool-btn { flex: 1; border: none; padding: 8px 4px; border-radius: 4px; font-size: 11px; font-weight: bold; cursor: pointer; color: #fff; transition: opacity 0.2s; min-width: 60px; }
.tool-btn:active { opacity: 0.7; transform: scale(0.98); }
.btn-danger { background: #ef4444; } .btn-action { background: #3b82f6; } .btn-deepl { background: #0f2b46; } .btn-google { background: #4285f4; }
.tool-sep { width: 1px; background: #cbd5e1; margin: 0 2px; }

/* --- Camera Panel (v42 Corrected) --- */
.cockpit-bottom { margin-top: 0; padding-top: 10px; border-top: none; width: 100%; box-sizing: border-box; }
.cam-box-2col { display: flex; flex-direction: row; gap: 20px; background: #fff; padding: 20px; border: 1px solid #cbd5e1; border-radius: 8px; width: 100%; box-sizing: border-box; }
.cam-col-left { flex: 1; width: 50%; border-right: 1px dashed #e2e8f0; padding-right: 20px; margin-right: 0; margin-bottom: 0; }
.cam-col-right { flex: 1; width: 50%; padding-left: 5px; }

.cam-slider-group { margin-bottom: 12px; }
.cam-head-row { display: flex; justify-content: space-between; font-size: 11px; font-weight: bold; color: #475569; margin-bottom: 2px; }
.cam-val-disp { color: #3b82f6; font-size:10px; font-weight:bold; min-width:60px; text-align:center; background:white; padding:2px 6px; border-radius:10px; border:1px solid #e2e8f0; }
.cam-guide-labels { display: flex; justify-content: space-between; font-size: 9px; color: #94a3b8; margin-top: -2px; }
.cam-range { width: 100%; cursor: pointer; accent-color: var(--primary); height:6px; background:#cbd5e1; border-radius:5px; appearance:none; }
.cam-range::-webkit-slider-thumb { appearance:none; width:16px; height:16px; background:var(--primary); border-radius:50%; box-shadow:0 2px 4px rgba(0,0,0,0.2); }

.cam-selectors-grid { display: flex; gap: 8px; margin-bottom: 10px; }
.c-sel-group { flex: 1; }
.c-sel-label { font-size: 10px; font-weight: bold; color: #64748b; margin-bottom: 4px; }
.c-sel { width: 100%; padding: 4px; font-size: 11px; border: 1px solid #cbd5e1; border-radius: 4px; }

/* --- Dictionary Panel (Compact v42) --- */
.v30-dict-panel { 
    background: #fff; 
    border: 2px solid #e2e8f0; 
    border-radius: 12px; /* 角丸を少し控えめに */
    overflow: hidden; 
    margin-top: 20px; 
    box-shadow: var(--shadow); 
    transition: 0.3s; 
}
.v30-dict-panel.minimized .v30-dict-body { display: none; }

/* ヘッダー部分：少しスリムに */
.v30-dict-head { 
    padding: 10px 15px; /* 上下余白を縮小 */
    font-weight: 800; 
    font-size: 13px;    /* 文字サイズを15px→13pxへ */
    background: #f1f5f9; 
    border-bottom: 1px solid #e2e8f0; 
    display:flex; 
    align-items:center; 
    gap:10px; 
    color:#475569; 
}

.v30-dict-body { padding: 15px; } /* 中身の余白も少し詰める */

/* --- チップ（ボタン）のサイズ調整 --- */
.chip-btn { 
    background: #fff; 
    border: 1px solid #cbd5e1; 
    
    /* ★ここがポイント！スタジオのチップと同じサイズ感にするッス */
    padding: 6px 12px;  /* 8px 14px → 6px 12px */
    font-size: 11px;    /* 12px → 11px */
    margin: 3px; 
    border-radius: 6px; /* スタジオに合わせるなら20px、四角っぽくするなら6px */
    
    cursor: pointer; 
    color: #334155; 
    transition: 0.2s; 
    display: inline-block; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); 
}
.chip-btn:hover { 
    background: #f0f9ff; 
    border-color: #0ea5e9; 
    color: #0ea5e9; 
    transform:translateY(-1px); 
}

/* --- タブのサイズ調整 --- */
.dict-tabs { display:flex; border-bottom:2px solid #e2e8f0; margin-bottom:10px; }

.dict-tab-btn { 
    flex:1; 
    padding: 8px 12px; /* 12px → 8px 12px */
    font-size: 11px;   /* 13px → 11px */
    border:none; 
    background:#f8fafc; 
    cursor:pointer; 
    color:#64748b; 
    font-weight:bold; 
    border-radius: 8px 8px 0 0; 
    transition:0.2s; 
    border-bottom:2px solid transparent; 
    margin-bottom:-2px; 
}
.dict-tab-btn.active { 
    background:#fff; 
    color:#0ea5e9; 
    border:2px solid #e2e8f0; 
    border-bottom:none; 
    z-index:2; 
    border-top:2px solid #0ea5e9; 
}

/* サブタブ（小カテゴリ）も小さく */
.dict-subtabs { 
    display:flex; 
    gap:4px; 
    margin-bottom:10px; 
    overflow-x:auto; 
    padding-bottom:5px; 
    border-bottom:1px dashed #cbd5e1; 
}
.dict-subtab-btn { 
    background:none; 
    border:none; 
    padding: 4px 10px; /* 6px 14px → 4px 10px */
    font-size: 11px;   /* 12px → 11px */
    font-weight:bold; 
    color:#94a3b8; 
    cursor:pointer; 
    border-radius:15px; 
    transition:0.2s; 
    white-space: nowrap;
}
.dict-subtab-btn.active { background:#e2e8f0; color:#1e293b; }
/* --- Footer & External --- */
.external-links-area { margin-top:20px; padding-top:20px; border-top:1px dashed #cbd5e1; }
.ext-grid { display:flex; flex-wrap:wrap; gap:10px; margin-top:15px; }
.ext-btn { flex:1; min-width:110px; padding:10px; border:1px solid #e2e8f0; background:#fff; border-radius:8px; font-size:12px; font-weight:bold; color:#475569; cursor:pointer; transition:0.2s; display:flex; align-items:center; justify-content:center; gap:5px; box-shadow:0 2px 4px rgba(0,0,0,0.03); text-decoration:none; }
.ext-btn:hover { transform:translateY(-2px); box-shadow:0 4px 8px rgba(0,0,0,0.1); color:var(--primary); border-color:var(--primary); }

/* style.css のフッター関連を上書き */
/* style.css: フッターとアニメーション */
.footer {
    position: fixed; bottom: 0; left: 0; right: 0;
    max-width: 1200px; width: 100%; margin: 0 auto;
    background: rgba(255,255,255,0.98);
    border-top: 3px solid var(--primary);
    padding: 8px 12px; z-index: 9999;
    display: flex; flex-direction: column; gap: 6px;
    height: 160px; box-sizing: border-box;
    backdrop-filter: blur(8px);
}

.foot-labels, .foot-previews, .foot-actions { display: flex; gap: 8px; width: 100%; }

.f-label { flex: 1; font-size: 10px; font-weight: bold; color: #64748b; }
.f-label.neg { color: #be123c; }

.foot-previews { flex: 1; min-height: 60px; }
.foot-preview {
    flex: 1; border: 1px solid #cbd5e1; border-radius: 4px;
    font-size: 11px; padding: 6px; background: #f8fafc; resize: none;
}

.f-btn {
    flex: 1; border: none; border-radius: 4px; height: 38px;
    font-weight: bold; font-size: 11px; cursor: pointer; color: #fff;
    transition: all 0.2s ease; position: relative; overflow: hidden;
}

.btn-reset { background: #94a3b8; flex: 0.7; }
.btn-neg { background: #ef4444; }
.btn-main { background: #0ea5e9; flex: 1.5; }

/* 🌟 コピー成功時のアニメーション */
.f-btn.copied { background: #22c55e !important; transform: scale(0.95); }
.f-btn.copied::after {
    content: "COPIED!"; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: #22c55e; display: flex; align-items: center; justify-content: center; font-size: 10px;
}


details.guide-box { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 20px; overflow: hidden; }
details.guide-box summary { padding: 10px 15px; font-size: 12px; font-weight: bold; cursor: pointer; background: #f8fafc; display: flex; justify-content: space-between; align-items: center; transition: 0.2s; }
.guide-content { padding: 15px; font-size: 12px; line-height: 1.8; color: #334155; border-top: 1px solid #e2e8f0; }

/* Modifier Popup */
.mod-popup { display: none; position: absolute; bottom: 110%; left: 0; width: 260px; background: #fff; border: 2px solid #8b5cf6; border-radius: 8px; padding: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.15); z-index: 200; }
.mod-popup.show { display: block; animation: popUp 0.2s ease-out; }
.mod-title { font-size: 11px; font-weight: bold; color: #6d28d9; border-bottom: 1px dashed #ddd6fe; padding-bottom: 5px; margin-bottom: 8px; }
.mod-grid { display: flex; flex-wrap: wrap; gap: 4px; max-height: 200px; overflow-y: auto; }
.chip-btn-mini { background: #fff; border: 1px solid #e2e8f0; padding: 6px 12px; margin: 3px; border-radius: 8px; font-size: 11px; cursor: pointer; color: #64748b; font-weight:bold; box-shadow:0 1px 2px rgba(0,0,0,0.05); transition:0.2s; }
.chip-btn-mini:hover { background: #f8fafc; border-color: #0ea5e9; color: #0ea5e9; }

/* Weight Menu */
.stack-action-menu { position: absolute; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); padding: 8px; z-index: 1000; display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.stack-action-btn { background: none; border: none; text-align: left; padding: 6px 8px; font-size: 12px; cursor: pointer; border-radius: 4px; color: #334155; display: flex; justify-content: space-between; }
.stack-action-btn:hover { background: #f1f5f9; }
.stack-action-btn.danger { color: #ef4444; } .stack-action-btn.danger:hover { background: #fee2e2; }

/* Animations */
@keyframes slideDown { from { opacity:0; transform: translateY(-5px); } to { opacity:1; transform: translateY(0); } }
@keyframes popUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* --- Responsive Design (Mobile) --- */
@media (max-width: 768px) {
    .studio-layout-grid,
    .unit-grid-container { grid-template-columns: 1fr; }
    
    .su-inner-split { flex-direction: column; gap: 8px; }
    
    .cam-box-2col { flex-direction: column !important; }
    .cam-col-left { width: 100%; border-right: none; border-bottom: 1px dashed #e2e8f0; padding-bottom: 20px; margin-bottom: 20px; padding-right: 0; }
    .cam-col-right { width: 100%; padding-left: 0; }
    
    .footer { height: auto; flex-direction: column; padding-bottom: 30px; }
    .foot-left { border-right: none; border-bottom: 1px dashed #cbd5e1; padding-bottom: 15px; padding-right: 0; margin-bottom: 10px; }
    .foot-right { padding-left: 0; }
}

/* =========================================
   PFP Pop Design v3 (Perfect Balance)
   ========================================= */

/* --- カード全体 --- */
.save-unit {
    border: none !important;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(148, 163, 184, 0.15);
    margin-bottom: 20px;
    overflow: hidden;
    transition: transform 0.2s;
}
.save-unit:hover { transform: translateY(-2px); }

/* --- ヘッダー --- */
.su-head { padding: 10px 15px; border-bottom: 1px solid rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: space-between; }
/* Style Theme */
.save-unit[data-key="style"] .su-head { background: linear-gradient(to right, #e0f2fe, #f0f9ff); }
.save-unit[data-key="style"] .su-title { color: #0284c7; font-size: 13px; letter-spacing: 0.5px; }
/* LoRA Theme */
.save-unit[data-key="lora"] .su-head { background: linear-gradient(to right, #ffedd5, #fff7ed); }
.save-unit[data-key="lora"] .su-title { color: #c2410c; font-size: 13px; letter-spacing: 0.5px; }

/* --- レイアウト構造 (Vertical Stack) --- */
.su-inner-split {
    display: flex;
    flex-direction: column !important;
    gap: 12px;
    padding: 15px;
}

/* 行のデザイン（ガタつき防止のキモ） */
.su-row {
    display: flex;
    gap: 8px; /* 入力欄とボタンの隙間 */
    width: 100%;
    box-sizing: border-box;
}

/* 左側：入力エリア（名前・セレクトボックス） */
/* flex: 1 で余ったスペースを全部埋める＝上下で幅が揃う */
.su-name, .su-list {
    flex: 1; 
    width: auto; /* 幅指定をリセット */
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px;
    font-size: 12px;
    background: #f8fafc;
    box-sizing: border-box;
    height: 36px; /* 高さ統一 */
}
.su-name:focus { background: #fff; border-color: #94a3b8; outline:none; }
.su-list { cursor: pointer; color: #475569; font-weight: bold; background: #fff; }
.su-list:hover { border-color: #94a3b8; background: #f1f5f9; }

/* 右側：ボタンエリア */
/* flex: 0 0 80px で「幅80px固定・伸縮なし」にする＝上下で幅が揃う */
.su-btn {
    flex: 0 0 80px; /* ★ここでボタン幅を固定統一！ */
    height: 36px;   /* 高さ統一 */
    border: none;
    border-radius: 8px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 3px 0 rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: all 0.1s;
}
.su-btn:active { transform: translateY(2px); box-shadow: none; }

/* 新規保存 (Pastel Mint) */
.su-btn-save {
    background: #ccfbf1; color: #0f766e; border: 1px solid #99f6e4;
}
.su-btn-save:hover { background: #99f6e4; }

/* 保存削除 (Pastel Pink) */
.su-btn-del {
    background: #ffe4e6; color: #be123c; border: 1px solid #fecdd3;
}
.su-btn-del:hover { background: #fca5a5; color: white; }

/* 設定クリア (Pastel Lavender) - ヘッダー内 */
.btn-clear-unit {
    background: #f3e8ff; border: 1px solid #d8b4fe; color: #7e22ce;
    font-size: 11px; padding: 4px 12px; border-radius: 20px;
    cursor: pointer; font-weight: bold; transition: 0.2s;
    box-shadow: 0 2px 0 rgba(0,0,0,0.05);
}
.btn-clear-unit:hover { background: #d8b4fe; color: #fff; }
.btn-clear-unit:active { transform: translateY(2px); box-shadow: none; }

/* 下段：入力エリア (横幅いっぱい) */
.su-real-input {
    width: 100% !important;
    height: 36px !important;
    line-height: 1.5;
    padding: 6px 10px;
    font-size: 13px !important;
    font-family: monospace;
    background: #fff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 8px !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.03);
    color: #334155;
    box-sizing: border-box;
}
/* Style Focus */
.save-unit[data-key="style"] .su-real-input:focus { border-color: #7dd3fc !important; background: #f0f9ff !important; }
/* LoRA Focus */
.save-unit[data-key="lora"] .su-real-input:focus { border-color: #fdba74 !important; background: #fff7ed !important; }

/* =========================================
   Niji Mode Styling & Tooltips
   ========================================= */

/* --- Niji Themes (Color Coding) --- */

/* SREF (画風) = Pastel Purple */
.save-unit[data-key="sref"] .su-head { background: linear-gradient(to right, #f3e8ff, #faf5ff); }
.save-unit[data-key="sref"] .su-title { color: #7e22ce; font-size: 13px; letter-spacing: 0.5px; }
.save-unit[data-key="sref"] .su-real-input:focus { border-color: #d8b4fe !important; background: #faf5ff !important; }

/* CREF (キャラ) = Pastel Pink/Rose */
.save-unit[data-key="cref"] .su-head { background: linear-gradient(to right, #ffe4e6, #fff1f2); }
.save-unit[data-key="cref"] .su-title { color: #be123c; font-size: 13px; letter-spacing: 0.5px; }
.save-unit[data-key="cref"] .su-real-input:focus { border-color: #fda4af !important; background: #fff1f2 !important; }

/* Personalization (個性) = Pastel Teal */
.save-unit[data-key="pers"] .su-head { background: linear-gradient(to right, #ccfbf1, #f0fdfa); }
.save-unit[data-key="pers"] .su-title { color: #0f766e; font-size: 13px; letter-spacing: 0.5px; }
.save-unit[data-key="pers"] .su-real-input:focus { border-color: #5eead4 !important; background: #f0fdfa !important; }


/* --- CREF Weight Input (CW) --- */
.cw-input-box {
    display: flex;
    align-items: center;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 0 5px;
    height: 36px;
    box-sizing: border-box;
}
.cw-label {
    font-size: 10px;
    font-weight: bold;
    color: #94a3b8;
    margin-right: 2px;
}
.cw-number {
    border: none;
    background: transparent;
    width: 40px;
    font-size: 12px;
    font-weight: bold;
    color: #334155;
    outline: none;
    text-align: center;
}

/* --- Bottom Parameter Grid --- */
.niji-param-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.03);
}

.np-item {
    flex: 1;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.np-label {
    font-size: 10px;
    font-weight: bold;
    color: #64748b;
    cursor: help; /* マウスカーソルを「？」にする */
    border-bottom: 1px dotted #94a3b8; /* 説明があることを示す点線 */
    width: fit-content;
}

.np-select, .np-input {
    width: 100%;
    padding: 6px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 12px;
    background: #f8fafc;
    box-sizing: border-box;
}
.np-select:focus, .np-input:focus {
    border-color: #8b5cf6;
    background: #fff;
    outline: none;
}

/* --- Tooltip (Pure CSS Popups) --- */
[data-tooltip] {
    position: relative;
    cursor: help;
}

/* ツールチップ本体 */
[data-tooltip] {
    position: relative;
    cursor: help;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    /* 位置修正: 上ではなく「下」に表示 */
    top: 100%; 
    left: 0;
    transform: translateY(5px); /* 少し下にずらす */
    
    background: rgba(15, 23, 42, 0.95);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* 吹き出しの三角（上向き） */
[data-tooltip]::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 10px; /* 左寄せ */
    transform: translateY(-5px); /* 隙間を埋める */
    border: 5px solid transparent;
    border-bottom-color: rgba(15, 23, 42, 0.95);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 9999;
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
}


/* --- Niji Parameters Area (Updated) --- */
.niji-param-area {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 0; /* ヘッダー用にパディングをリセット */
    box-shadow: 0 4px 15px rgba(148, 163, 184, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 角丸のため */
}

/* パラメータエリアのヘッダー */
.np-head-row {
    padding: 10px 15px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.np-area-title {
    font-size: 12px;
    font-weight: bold;
    color: #475569;
}

/* グリッド部分 */
.niji-param-grid-compact {
    padding: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
@media (max-width: 768px) {
    .niji-param-grid-compact { grid-template-columns: 1fr 1fr; }
}


/* ======================================================
   PRO v43 FINAL: TWIN PANEL ENGINE (L&R FIXED)
   ====================================================== */

/* 1. 【親要素】Grid（1:1分割）の呪いを物理的に破壊ッス */
.top-control-grid {
    display: flex !important;       /* 🌟 強制的にFlexboxへ！ */
    flex-direction: row !important; /* 横並び */
    align-items: stretch !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 30px auto !important;
}

/* 2. 【左パネル：操作盤】380pxの「絶対領域」を作るッス */
.pfp-main-dashboard {
    flex: 0 0 380px !important;     /* 🌟 PCでは380pxから1ミリも動かさない！ */
    width: 380px !important;
    background: #f1f5f9 !important; /* 計器らしい薄グレー */
    border: 2px solid #cbd5e1 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
}

/* 3. 【右パネル：プロジェクト】残りの幅を全部使い、左を押し返さないッス！ */
.pfp-project-panel {
    flex: 1 !important;            /* 🌟 左の380px以外の余りを全部埋める */
    min-width: 0 !important;       /* 🌟 右パネルの侵食を物理的に止める魔法 */
    background: #ffffff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
}

/* --- 内部パーツの完璧な整列 --- */

/* 左見出しバナー（銘板） */
.dashboard-banner {
    background: #1e293b !important; color: #38bdf8 !important;
    padding: 10px 15px !important; font-size: 11px !important;
    font-weight: 900 !important; letter-spacing: 2px !important;
    border-bottom: 2px solid #0f172a !important;
}

/* 右見出し（プロジェクト管理） */
.pfp-project-panel .su-head {
    background: #f8fafc !important; border-bottom: 1px solid #e2e8f0 !important;
    padding: 10px 15px !important; margin: 0 !important;
}

/* コンテンツの余白を左右で統一 */
.dashboard-inner, .pfp-project-panel .su-inner-split {
    padding: 15px !important; display: flex !important;
    flex-direction: column !important; gap: 12px !important;
}

/* ボタンとスイッチの最終ガタつき補正 */
.control-row-v30 { display: flex !important; gap: 8px !important; align-items: center !important; }
.capsule-switcher { flex: 1 !important; background: #fff !important; height: 38px !important; border-radius: 50px !important; border: 1px solid #cbd5e1 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.settings-trigger-v30 { height: 38px !important; border-radius: 8px !important; border: 1px solid #cbd5e1 !important; background: #fff !important; font-size: 10px !important; font-weight: bold !important; padding: 0 10px !important; }
.shortcut-grid-v30 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
.dashboard-btn-v30 { height: 42px !important; font-weight: 800 !important; border-radius: 8px !important; background: #fff !important; border: 1px solid #cbd5e1 !important; }

/* 📱 スマホ版（900px以下）：縦に綺麗に積み直すッス */
@media screen and (max-width: 900px) {
    .top-control-grid {
        flex-direction: column !important;
        gap: 15px !important;
        padding: 0 10px !important;
    }
    .pfp-main-dashboard, .pfp-project-panel {
        width: 100% !important;
        flex: none !important;
    }
}


@media (max-width: 768px) {
    /* 1. 基本：余白削減 */
    body { padding: 5px !important; padding-bottom: 220px !important; }
    .container { width: 100% !important; padding: 0 !important; }

    /* 2. 【縦積み対象】大きな外枠の「分割」だけを縦にする */
    .top-control-grid, 
    .unit-grid-container, 
    .cam-box-2col,
    .su-inner-split {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* 3. 【横並び絶対死守：熟語ブロック行】 */
    /* .cb-row や .cb-mod-row が縦にならないように上書きッス！ */
    .cb-row, .cb-mod-row, .cb-main-row, .su-row {
        display: flex !important;
        flex-direction: row !important; /* 絶対に横並びッス！ */
        align-items: center !important;
        gap: 5px !important;
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    /* 4. 熟語ブロック内のパーツ比率（セレクタを広く、ボタンを固定） */
    .cb-row select, .cb-mod-row select, .cb-main-select {
        flex: 1 1 auto !important; /* セレクタが可能な限り広がる */
        min-width: 0; /* 圧縮を防ぐための基本設定 */
        height: 38px !important;
        font-size: 12px !important;
    }

    /* 「＋」や「↩」ボタンが小さくなりすぎないように固定 */
    .cb-row button, .cb-mod-row button, .su-btn-mini {
        flex: 0 0 40px !important; /* ボタンの幅を40pxで固定 */
        height: 38px !important;
        padding: 0 !important;
        font-size: 14px !important;
    }

    /* 5. 【タブ・モード切替】ここも横並び & はみ出しはスクロール */
    #studio-tabs, .dict-tabs, .dict-subtabs, .mini-toggle-box {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto;
        white-space: nowrap;
        gap: 5px !important;
        -webkit-overflow-scrolling: touch;
    }

    /* 6. 【フッター】4:6横並び死守 */
    .footer .foot-labels, .footer .foot-previews, .footer .foot-actions {
        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;
    }
    .f-label.neg, #neg-view { flex: 4 !important; }
    .f-label.pos, #output   { flex: 6 !important; }
    .footer { height: 160px !important; padding: 6px 10px !important; }
}

/* --- Overwrite Button (Orange/Gold) --- */
.su-btn-over {
    background: #fef3c7; /* 薄いオレンジ */
    color: #b45309;      /* 濃いオレンジ文字 */
    border: 1px solid #fcd34d;
}
.su-btn-over:hover {
    background: #fcd34d;
    color: #78350f;
}
.su-btn-over:active {
    background: #fbbf24;
}

/* =========================================
   Studio Sub-Tabs (For Main Cast)
   ========================================= */
/* --- Sub Tab Navigation (Main Cast etc) --- */
/* --- サブタブの行を上部に固定するッス！ --- */
.st-subtab-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 5px;
    padding: 10px 4px;      /* 上下の余白を少し調整 */
    margin-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;

    /* ★ ここが魔法の固定設定ッス！ */
    position: sticky;       /* 張り付く設定 */
    top: -15px;             /* 親要素のパディング分(15px)を打ち消して一番上へ */
    z-index: 100;           /* 他の素材ボタンより上に表示 */
    background: #ffffff;    /* 下の素材が透けないように背景を白にする */
    
    /* スムーズなスクロール (スマホ対策) */
    -webkit-overflow-scrolling: touch; 
}
/* Chrome/Safari用のスクロールバーカスタマイズ */
.st-subtab-row::-webkit-scrollbar {
    height: 4px; /* 極細にする */
}
.st-subtab-row::-webkit-scrollbar-track {
    background: transparent;
}
.st-subtab-row::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 4px;
}

.st-subtab-btn {
    flex-shrink: 0; /* ★重要：幅が足りなくても潰れないようにする */
    padding: 6px 12px;
    font-size: 12px;
    font-weight: bold;
    color: #64748b;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap; /* テキストの折り返しも禁止 */
}

.st-subtab-btn:hover {
    background: #f1f5f9;
    color: #334155;
}

.st-subtab-btn.active {
    background: #e0f2fe;
    color: #0284c7;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* クリアボタンも潰れないように */
.st-subtab-reset-btn {
    flex-shrink: 0;
    margin-left: auto; /* これを入れると、可能な限り右端に寄るッス */
    /* (既存のスタイルは維持) */
}

/* =========================================
   Layout Fix: Half-Width Columns (Flexbox Final Fix)
   ========================================= */

/* 1. パネルの中身を「並べ替え可能な箱」にする */
.st-panel {
    display: flex !important;      /* 強制的にFlexbox */
    flex-direction: row !important; /* ★ここ重要！以前の「縦並び設定」を「横並び」に強制上書き */
    flex-wrap: wrap !important;    /* 折り返しを許可 */
    align-content: flex-start;     /* 上詰めで配置 */
    gap: 0 !important;             /* 隙間は個別に調整するためゼロに */
    padding: 12px;                 /* パディング維持 */
}

/* 2. 通常の要素は「横幅100%（1列）」を強制 */
.st-select-wrapper, 
.st-group-label, 
.preset-btn-group, 
.st-chip-grid, 
hr {
    width: 100%;           /* 1行独占 */
    margin-bottom: 8px;    /* 下に少し隙間 */
    box-sizing: border-box;
}

/* 3. ハーフモードは「横幅50%（2列）」にする */
.st-select-wrapper.half-mode {
    width: 50%;            /* きっちり半分 */
    padding-right: 4px;    /* 右隣との隙間を確保 */
    margin-bottom: 8px;    /* 下の隙間 */
    box-sizing: border-box;/* paddingを含めて50%に収める */
}

/* ※スマホ対応: 画面が狭い時は1列に戻す */
@media (max-width: 600px) {
    .st-select-wrapper.half-mode {
        width: 100%;
        padding-right: 0;
    }
}

/* --- Sub-Tab Reset Button --- */
.st-subtab-reset-btn {
    margin-left: auto; /* 右端に寄せる */
    background: #fff1f2;
    color: #be123c;
    border: 1px solid #fecdd3;
    padding: 4px 12px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}
.st-subtab-reset-btn:hover {
    background: #fecdd3;
    color: #881337;
    transform: translateY(-1px);
}


/* --- Clothing Block (Local Modifier System) --- */
.clothing-block-wrapper {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 12px;
}

.cb-mod-row {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}

.cb-mod-select {
    flex: 1;
    width: 0; /* 均等割付 */
    padding: 4px;
    font-size: 10px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    color: #475569;
}

.cb-main-select {
    width: 100%;
    padding: 8px;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid #94a3b8;
    border-radius: 6px;
    background: #fff;
    color: #1e293b;
}
.cb-main-select:focus {
    border-color: #0ea5e9;
    outline: none;
    background: #f0f9ff;
}

/* --- スタジオの2列化を強制する修正 --- */

/* 1. 親カラムが中身を折り返せるようにする */
.studio-column {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important; /* 縦並びから横並びの折り返しに変更 */
    align-content: flex-start;
    align-items: flex-start;
}

/* 2. 箱（Group）を正しく半分にする */
.studio-group.half-mode {
    width: 49% !important; /* 余裕を持たせて49% */
    display: inline-block !important;
    vertical-align: top;
    box-sizing: border-box; /* 枠線を含めて計算 */
}

/* 3. 中のセレクタも半分に適合させる */
.st-select-wrapper.half-mode {
    width: 100% !important; /* 親のgroupが50%なので、その中は100%でOK */
    display: block;
}

/* --- Clothing Block (Local Modifier System) --- */
.clothing-block-wrapper {
    width: 100%;            /* ★重要：強制的に横幅いっぱいにする */
    box-sizing: border-box; /* パディングを含めて幅を計算 */
    display: block;         /* ブロック要素として振る舞う */
    
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 12px;
}

.cb-mod-row {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}

.cb-mod-select {
    flex: 1;
    width: 0; /* 均等割付 */
    padding: 4px;
    font-size: 10px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    color: #475569;
}

.cb-main-select {
    width: 100%;
    padding: 8px;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid #94a3b8;
    border-radius: 6px;
    background: #fff;
    color: #1e293b;
}
.cb-main-select:focus {
    border-color: #0ea5e9;
    outline: none;
    background: #f0f9ff;
}

/* クリアボタン用 */
.btn-tool-clear {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #64748b;
    font-size: 12px;
    transition: all 0.2s;
}
.btn-tool-clear:hover {
    background: #fee2e2; /* ホバー時は薄い赤 */
    color: #ef4444;
    border-color: #fca5a5;
}

/* --- Negative Chips (Red Theme) --- */
/* .toggle-chip (スタジオ用) と .chip-btn (辞書用) の両方に適用 */
.toggle-chip.neg-chip,
.chip-btn.neg-chip {
    background-color: #fff1f2; /* 薄い赤 */
    border-color: #fecdd3;     /* 赤のボーダー */
    color: #be123c;            /* 濃い赤文字 */
}

/* ホバー時 */
.toggle-chip.neg-chip:hover,
.chip-btn.neg-chip:hover {
    background-color: #ffe4e6;
    border-color: #fda4af;
}

/* アクティブ（ON）時 */
.toggle-chip.neg-chip.active,
.chip-btn.neg-chip.active {
    background-color: #f43f5e; /* 鮮やかな赤 */
    color: #ffffff;            /* 白文字 */
    border-color: #e11d48;
}

/* --- Gacha System Styles --- */

/* 1. ヘッダーのガチャボタン (オレンジ色) */
.btn-tool-mini.btn-gacha-trigger {
    background-color: #fff7ed; /* 薄いオレンジ背景 */
    color: #ea580c;            /* 濃いオレンジ文字 */
    border: 1px solid #fdba74; /* オレンジ枠 */
    font-weight: bold;
}
.btn-tool-mini.btn-gacha-trigger:hover {
    background-color: #ffedd5;
    border-color: #fb923c;
    transform: translateY(-1px);
}

/* 2. モーダルウィンドウ (画面中央) */
.gacha-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.6); /* 背景暗く */
    backdrop-filter: blur(3px);        /* すりガラス効果 */
    z-index: 10000; display: none;
    align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.2s;
}
.gacha-modal-overlay.show { display: flex; opacity: 1; }

.gacha-window {
    width: 95% !important;
    max-width: 580px !important; /* 🌟 650pxから850pxへ大幅アップ！ */
    min-height: 400px;
    background: #ffffff;
    border-radius: 24px;
    padding: 10px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.gacha-mode-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 🌟 PCでは4横並び */
    gap: 12px;
    margin-bottom: 20px;
}

.gacha-modal-overlay.show .gacha-window { transform: scale(1); }

.gacha-header {
    background: linear-gradient(to right, #f59e0b, #fbbf24); /* オレンジグラデ */
    padding: 10px 15px;
    color: white; font-weight: bold; font-size: 14px;
    display: flex; justify-content: space-between; align-items: center;
}
.btn-gacha-close { background: none; border: none; color: white; font-size: 18px; cursor: pointer; }

.gacha-body { padding: 15px; }

/* モード切替タブ */
.gacha-mode-tabs { display: flex; gap: 5px; margin-bottom: 15px; justify-content: center; }
.btn-gacha-mode {
    padding: 6px 12px; font-size: 11px;
    background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 15px;
    color: #64748b; cursor: pointer; transition: all 0.2s;
}
.btn-gacha-mode.active {
    background: #f59e0b; color: white; border-color: #d97706;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

/* 結果表示エリア */
.gacha-result-display {
    background: #fff7ed; /* 暖色系の薄い背景 */
    border: 2px dashed #fdba74;
    border-radius: 16px;
    padding: 40px 20px; /* 🌟 上下にゆとりを持たせる */
    text-align: center;
    margin: 20px 0;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.3s ease;
}

.gacha-main-text {
    font-size: 18px !important; /* 🌟 15pxから一気に24pxへ！ */
    font-weight: 900 !important;
    color: #1e293b;
    letter-spacing: 1px;
}

gacha-sub-tags {
    font-size: 16px !important;
    color: #64748b;
    margin-top: 15px;
    font-family: 'Consolas', monospace; /* 記号が見やすい等幅フォント */
}


/* 📱 スマホでは画面に収まるよう自動調整 */
@media (max-width: 600px) {
    .gacha-window {
        max-width: 98% !important;
        padding: 5px;
    }
    .gacha-mode-grid {
        grid-template-columns: repeat(2, 1fr); /* スマホは2x2 */
    }
    .gacha-main-text {
        font-size: 18px !important;
    }
}

/* 操作ボタン */
.gacha-actions { display: flex; gap: 10px; }
.btn-gacha-act {
    flex: 1; padding: 10px; border-radius: 6px; border: none;
    font-weight: bold; font-size: 12px; cursor: pointer;
    transition: transform 0.1s;
}
.btn-gacha-act:active { transform: scale(0.96); }
.btn-roll { background: #e2e8f0; color: #475569; }
.btn-roll:hover { background: #cbd5e1; }
.btn-apply { background: #22c55e; color: white; box-shadow: 0 2px 0 #15803d; }
.btn-apply:hover { background: #16a34a; }
}
button.btn-tool-mini.btn-gacha-trigger {
    background: linear-gradient(135deg, #fff7ed, #ffedd5) !important;
    color: #ea580c !important;
    border: 1px solid #f97316 !important;
    font-weight: bold;
    display: inline-flex !important; /* 強制表示 */
    align-items: center;
    justify-content: center;
}

.btn-social {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 11px;
    font-weight: bold;
    transition: all 0.2s;
}
.btn-social.x-twitter {
    background: #000;
    color: #fff;
    border: 1px solid #333;
}
.btn-social.bluesky {
    background: #0085ff;
    color: #fff;
    border: 1px solid #0070d9;
}
.btn-social:hover {
    opacity: 0.8;
    transform: translateY(-1px);
}

/* セレクタ内の見出し（──が含まれる項目）用スタイル */
.opt-header {
    font-weight: bold !important;
    background-color: #f1f5f9 !important; /* 薄いグレー */
    color: #1e293b !important;
    padding: 5px 0;
}

/* --- Stack Clear ボタンの強化 --- */
#btn_clear_stack {
    /* 1. サイズを大きく */
    font-size: 11px !important;       /* 文字サイズUP */
    padding: 5px 12px !important;     /* 押しやすい広さに */
    
    /* 2. 「削除ボタン」らしく赤系に */
    background: #fff !important;
    border: 1px solid #ef4444 !important; /* 赤い枠線 */
    color: #ef4444 !important;            /* 赤い文字 */
    border-radius: 20px !important;       /* 角丸（カプセル型） */
    
    /* 3. 位置と見た目の調整 */
    bottom: 10px !important;          /* 底辺からの距離を少し空ける */
    right: 10px !important;           /* 右端からの距離も少し空ける */
    z-index: 10 !important;           /* チップより手前に */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important; /* 影で浮かせる */
    opacity: 0.9;
}

/* ホバー時の演出 */
#btn_clear_stack:hover {
    background: #ef4444 !important;   /* 赤く塗りつぶす */
    color: #ffffff !important;        /* 白文字にする */
    opacity: 1;
    transform: translateY(-1px);      /* ちょこっと浮く */
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3) !important; /* 赤い影 */
}

.st-control-area {
    height: 380px; /* PCでの基本の高さ */
    overflow-y: auto;
    
    /* スマホで「ピューッ」とさせる魔法の1行（古いiOS対策） */
    -webkit-overflow-scrolling: touch; 
}

/* 【重要】スマホの時は高さを少し控えめにする設定ッス */
@media screen and (max-width: 768px) {
    .st-control-area {
        /* スマホだと550pxは画面を占領しすぎるかもなので、
           画面の高さの40%くらいに可変させると、下のSTEP2も見えやすくて快適ッス！ */
        height: 45vh; 
        min-height: 300px;
    }
}

/* 1. タブを包むヘッダーエリア：ここは絶対にスクロールさせない！ */
.st-header {
    overflow: visible !important; /* はみ出しによるスクロールを禁止 */
    position: sticky;             /* スタジオのトップに張り付く設定 */
    top: 0;
    z-index: 10;                  /* コンテンツより上に表示 */
    background: #fff;             /* 透けないように背景色を指定 */
}

/* 2. タブ本体：横に並びきらない時の「ガタつき」を防止 */
.st-tabs {
    display: flex;
    flex-wrap: wrap;       /* 横に収まりきらない時は、スライダーを出さずに折り返す */
    gap: 2px;              /* タブ同士の隙間 */
    overflow: visible;     /* ここもスクロールを禁止 */
}

/* 3. 【重要】もしタブにスライダーが出ていたらこれで消去！ */
.st-tabs::-webkit-scrollbar {
    display: none;         /* Chrome/Safari用：スクロールバーを非表示 */
}
.st-tabs {
    -ms-overflow-style: none;  /* IE用 */
    scrollbar-width: none;     /* Firefox用 */
}


/* --- スタックチップの文字数制限（長い呪文対策） --- */
.stack-item-chip {
    max-width: 100%;       /* スマホなら画面幅まで */
    display: inline-flex;
    align-items: center;
    overflow: hidden;      /* はみ出た分は隠す */
    text-overflow: ellipsis; /* 「...」にする */
    white-space: nowrap;   /* 折り返さない */
    vertical-align: middle;
}

/* PCなどの広い画面では、ある程度の幅で止める */
@media (min-width: 768px) {
    .stack-item-chip {
        max-width: 250px; /* これ以上長いと「...」になるッス */
    }
}

/* 追加ボタン・リドゥボタン・クリアボタンの調整 */
.btn-tool-undo {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #0284c7;
    border-radius: 4px;
    cursor: pointer;
}
.btn-tool-undo:hover {
    background: #e0f2fe;
}

/* 1. 構成プレビューを包んでいる親の余白を強制カット */
.studio-container > div[style*="padding: 15px"] {
    padding: 8px !important; /* 15pxから約半分へ。さらに0にしてもOK */
}

/* 2. プレビュー容器自体の余白調整 */
.cp-container {
    margin-top: 5px !important;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    overflow: hidden;
}

/* チップ表示エリア（STEP 2）の初期サイズを拡大 */
#layer-stack-wrapper {
    position: relative;
    padding: 10px 12px !important; /* 少し内側の余白を広げて見やすく */
    background: #ffffff;
    border-bottom: 1px dashed #e2e8f0;
    
    /* 1. 初期から広めに確保ッス！ */
    min-height: 100px !important; 
    height: auto !important; /* 中身が増えれば勝手にさらに広がる */
    
    display: flex;
    flex-direction: column;
}

/* チップ自体の並び方 */
.layer-stack-view {
    display: flex;
    flex-wrap: wrap;
    gap: 6px !important;
    padding-bottom: 30px !important; /* 下の「Stack Clear」ボタンと重ならないための余白 */
}

/* 空の時のメッセージ位置を微調整 */
.layer-stack-view:empty::before,
.layer-stack-view span[style*="color:#94a3b8"] {
    display: block;
    margin-top: 10px;
}

/* 4. テキストエリア（入力欄）の余白とフォントサイズ */
.cp-textarea {
    min-height: 80px; /* ここもお好みの高さに調整してッス */
    height: auto;
}


@media (max-width: 768px) {
    /* 1. ツールバーの余白を完全抹殺 */
    .cp-toolbar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important; /* 均等に配置 */
        padding: 2px 0 !important; /* 上下左右、余白ゼロ！ */
        gap: 2px !important; /* ボタン間の隙間も最小限 */
        background: #f1f5f9;
        overflow: hidden !important; /* スクロールさせずに収める */
        width: 100% !important;
    }

    /* 2. ボタンを極限までスリム化 */
    .tool-btn {
        flex: 1 1 auto !important; /* 画面幅に合わせて伸縮 */
        min-width: 0 !important; /* 限界まで縮むことを許可 */
        padding: 4px 0 !important; /* 左右パディングを消して文字だけに */
        font-size: 10px !important; /* 文字を小さく */
        height: 40px !important;
        letter-spacing: -1px; /* 文字間隔を詰めて横幅を稼ぐ */
        white-space: nowrap;
        text-align: center;
    }

    /* 3. ボタンのラベルを短縮（これはJS側でやりますが、CSSでも調整） */
    .tool-btn#btn_clear_text { font-size: 9px !important; }

    /* 4. セパレーター（仕切り線）を消してスペースを確保 */
    .tool-sep {
        display: none !important;
    }

    /* 5. 構成プレビュー自体の左右余白もゼロにする */
    .cp-container {
        margin: 5px -5px 0 -5px !important; /* 画面端まで広げる */
        border-radius: 0 !important;
        width: calc(100% + 10px) !important;
    }
}

@media (max-width: 768px) {
    /* 1. 構成プレビュー（STEP2）が入っている親要素の余白を削る */
    .studio-container + .section-head {
        margin-top: 5px !important; /* 20pxから激減！ */
    }

    /* 2. セクション見出し自体の余白を最小化 */
    .section-head {
        margin-top: 5px !important;
        margin-bottom: 5px !important;
        padding: 5px 8px !important;
        font-size: 13px !important; /* 文字も少しスリムに */
    }

    /* 3. カメラパネル（cockpit-bottom）の余白を削る */
    .cockpit-bottom {
        margin-top: 0 !important;
        padding: 5px !important;
    }

    /* 4. カメラパネル内の各パーツの間隔も詰める */
    .cam-box-2col {
        gap: 5px !important;
    }
}

/* --- 1120行目付近の .top-control-grid を修正 --- */
.top-control-grid {
    display: flex !important;           /* GridからFlexに変更して制御しやすくするッス */
    align-items: flex-start !important;
    gap: 20px !important;
    margin-bottom: 25px;
    width: 100%;
}

/* PC（901px以上）の時だけ、左パネルを380pxで固定するッス！ */
@media (min-width: 901px) {
    .tc-left-panel {
        flex: 0 0 380px !important;    /* 🌟 ここで「幅を固定」して間延びを殺すッス！ */
    }
    .tc-right-panel {
        flex: 1 !important;           /* 右側（プロジェクト管理）が残りを埋めるッス */
    }
}

/* スマホでは今まで通り縦に並べるッス */
@media (max-width: 900px) {
    .top-control-grid {
        flex-direction: column !important;
    }
}

/* 3. ヘッダー（動作モード / プロジェクト管理）のダイエット */
.section-head, .su-head {
    margin-top: 0 !important;
    margin-bottom: 5px !important;
    padding: 2px 0 !important;
    font-size: 13px !important;
    min-height: auto !important;
}



/* 5. プロジェクト管理（全体保存）の内側を圧縮 */
.su-inner-split {
    padding: 5px !important; /* 10pxから半分へ */
}

.su-row {
    margin-bottom: 4px !important;
    gap: 4px !important;
}

.su-name, .su-list {
    height: 32px !important;
    font-size: 12px !important;
    padding: 2px 8px !important;
}

.su-btn {
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
}

/* 1. 左パネル（動作モード）の内側をタイトに */
.tc-left-panel > div:first-child.section-head {
    margin: 0 0 5px 0 !important; /* タイトルの下の隙間を最小化 */
    padding: 0 !important;
    font-size: 12px !important;
    border: none !important;
    background: transparent !important;
}



.tc-right-panel {
    background: #fff;
    padding: 15px;
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}


/* 1. 検索窓をガッツリ広げる */
#dict-search {
    width:180px !important; /* 120pxから大幅アップ！ */
    height: 36px !important;
    font-size: 14px !important;
    transition: all 0.2s;
}

/* 2. トグルボタンの押しやすさ（判定領域）を拡大 */
#btn_toggle_dict_view {
    width: auto !important;      /* 固定幅を解除 */
    min-width: 100px;            /* 最低限の幅を確保 */
    padding: 0 12px !important;  /* 左右に余白をプラス */
    height: 36px !important;     /* 高さを検索窓に揃える */
    font-size: 12px !important;  /* 文字は少し小さめがスマート */
    white-space: nowrap;         /* 改行を禁止 */
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 3. 【裏技】ヘッダーの空きスペースを触っても開閉するようにする */
.v30-dict-head {
    cursor: pointer; /* 全体が押せる感じを出す */
    padding: 5px 10px !important;
}

/* 検索窓を触ったときは勝手に閉じないようにガード */
#dict-search {
    cursor: text;
}

.head-ctrl-group {
    flex-grow: 1;                /* グループ全体を右側に広げる */
    justify-content: flex-end;
}



/* カメラのセレクトボックスを3列（3個・2個）に並べる魔法ッス */
.cam-selectors-grid {
    display: grid;
    /* ↓ここを 1fr 1fr 1fr (3等分) に変更！ */
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 8px 10px;
    margin-bottom: 10px;
}

/* ラベルとセレクトボックスの微調整（先ほどと同じッス） */
.c-sel-label {
    font-size: 10px;
    color: #64748b;
    margin-bottom: 2px;
}

.c-sel {
    width: 100%;
    padding: 4px;
    font-size: 11px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
}



/* --- 支援エリア：統合ボタンユニット --- */
.support-action-container {
    display: flex;
    flex-wrap: wrap; /* 画面が狭いときは折り返す */
    justify-content: center;
    gap: 10px;
    max-width: 800px;
    margin: 0 auto;
}

/* SNSボタングループの調整 */
.support-btn-group {
    display: flex;
    gap: 10px;
}

/* すべてのボタン共通の「器」 */
.btn-support, .btn-social {
    flex: 1;
    min-width: 150px; /* ボタンの最小の幅 */
    height: 44px;     /* 高さを完全に統一ッス！ */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none !important;
    border: none;
    cursor: pointer;
    transition: transform 0.2s;
}

.btn-support:hover, .btn-social:hover { transform: translateY(-2px); }

/* 個別の色設定 */
.x-twitter { background: #000 !important; color: #fff !important; }
.bluesky   { background: #0085ff !important; color: #fff !important; }
.kofi-btn  { background: #29abe0 !important; color: #fff !important; }
.amazon-btn { background: #f59e0b !important; color: #fff !important; }

/* スマホでは2列にする */
@media (max-width: 600px) {
    .btn-support, .btn-social {
        min-width: calc(50% - 10px);
    }
}

/* 支援ボタンのグリッド配置 */
.support-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); /* 均等に広がるッス */
    gap: 12px;
    margin-top: 20px;
}

/* すべてのボタンを同じサイズ・デザインに */
.btn-support {
    height: 46px; /* 高さを完全固定 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none !important;
    transition: 0.2s;
    color: #fff !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.btn-support:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

/* 各ブランドカラー */
.x-twitter { background: #000; }
.bluesky   { background: #0085ff; }
.kofi-btn  { background: #29abe0; }
.amazon-btn { background: #f59e0b; }


/* --- トップ・インフォメーションバー --- */
.top-info-bar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 25px 0 35px 0; /* 上下の空間をしっかり広げるッス */
    padding: 0 10px;
}

.info-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
    color: #64748b;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

.info-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

/* 最新情報だけ少し目立たせるッス */
.info-chip.highlight {
    background: #f0f9ff;
    border-color: #bae6fd;
    color: #0369a1;
}

.info-chip span { font-size: 14px; }

/* スマホ対応：少しだけ文字を小さく */
@media (max-width: 480px) {
    .top-info-bar { gap: 8px; margin: 20px 0 30px 0; }
    .info-chip { padding: 5px 10px; font-size: 10px; }
}

/* --- インフォメーションセンター全体 --- */
.pfp-info-center {
    max-width: 900px;
    margin: 20px auto 35px auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 上段：チップ行 */
.info-main-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.info-group { display: flex; gap: 8px; flex-wrap: wrap; }

.info-chip {
    padding: 6px 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: 0.2s;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}
.info-chip:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }

/* 支援ボタンの色 */
.support-kofi { background: #f0f9ff; border-color: #bae6fd; color: #0369a1; }
.support-amazon { background: #fffbeb; border-color: #fde68a; color: #92400e; }


.status-label { color: #94a3b8; margin-right: 8px; }
.status-date { color: #38bdf8; }
.status-link { color: #fff; margin-left: 10px; text-decoration: none; border-bottom: 1px solid #475569; }
.status-link:hover { color: #38bdf8; border-color: #38bdf8; }

/* --- モーダル (Simple Modal) --- */
.modal-overlay {
    position: fixed; top:0; left:0; width:100%; height:100%;
    background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(4px);
    z-index: 20000; display: none; align-items: center; justify-content: center; opacity: 0; transition: 0.3s;
}
.modal-overlay.show { display: flex; opacity: 1; }
.modal-window {
    width: 95%;
    max-width: 650px;
    max-height: 85vh; /* 🌟 画面の85%までに制限 */
    background: #fff;
    border-radius: 16px;
    display: flex; /* 🌟 縦並びの入れ物にする */
    flex-direction: column; 
    overflow: hidden; /* 🌟 枠からはみ出させない */
    transform: scale(0.9);
    transition: 0.3s;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.modal-overlay.show .modal-window { transform: scale(1); }

.modal-header {
    flex-shrink: 0; /* 🌟 ヘッダーは縮ませない（固定） */
    padding: 15px 25px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title { font-size: 14px; font-weight: bold; color: #1e293b; }
.modal-close { background: none; border: none; font-size: 24px; cursor: pointer; color: #94a3b8; }
.modal-content {
    flex-grow: 1; /* 🌟 余ったスペースを全部使う */
    padding: 30px;
    overflow-y: auto; /* 🌟 ここで縦スクロールを有効化！ */
    line-height: 1.8;
    font-size: 14px;
    color: #334155;
    /* スクロールバーをおしゃれにするッス */
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}


/* スマホ対応 */
@media (max-width: 600px) {
    .info-main-row { justify-content: center; }
    .info-status-bar { flex-direction: column; gap: 5px; text-align: center; }
}

/* --- アップデート・インフォバー（色味調整版） --- */
.info-status-bar {
    /* 🌟 真っ黒から「Slate 800」くらいの色味に変更 */
    background: #1e293b; 
    
    color: #cbd5e1;
    border-radius: 8px;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
    
    /* 🌟 境界線も少し明るくして、背景との馴染みを良くするッス */
    border: 1px solid #334155; 
    
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}


/* 稼働中ドット */
.status-dot {
    width: 6px; height: 6px;
    background: #22c55e;
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 8px #22c55e;
}

.status-left, .status-right { display: flex; align-items: center; }

/* 正方形アイコンの土台 */
.icon-square {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;   /* 🌟 綺麗な正方形 */
    height: 24px;
    border-radius: 4px;
    margin-right: 6px;
    font-size: 10px;
    color: #fff;
    transition: 0.2s;
}

.x-bg { background: #000; border: 1px solid #334155; }
.bsky-bg { background: #0085ff; }

.status-link {
    display: flex;
    align-items: center;
    margin-left: 15px;
    text-decoration: none;
    color: #fff;
    opacity: 0.8;
    transition: 0.2s;
}

.status-link:hover { opacity: 1; transform: translateY(-1px); }
.status-link:hover .icon-square { transform: scale(1.1); box-shadow: 0 0 10px rgba(255,255,255,0.2); }

.link-text { border-bottom: 1px solid #475569; padding-bottom: 1px; }

/* スマホ対応 */
@media (max-width: 600px) {
    .info-status-bar { flex-direction: column; gap: 10px; padding: 12px; }
    .status-left { margin-bottom: 5px; }
}

/* 支援エリアのラベル（一言） */
/* 支援ラベルをリンクボタン化 */
.support-label {
    font-size: 10px;
    font-weight: 800;
    color: #64748b;
    display: flex;
    align-items: center;
    margin-right: 4px;
    letter-spacing: 0.05em;
    text-decoration: none; /* 下線は消しておくのがモダンッス */
    cursor: pointer;
    transition: 0.2s;
}

/* ホバー時に色を変えて「押せる感」を出す */
.support-label:hover {
    color: #0ea5e9;
    text-decoration: underline dotted; /* 🌟 控えめな点線の下線を追加 */
}

/* スマホ版の nowrap も維持するッス */
@media (max-width: 680px) {
    .support-label {
        font-size: 9px;
        white-space: nowrap;
    }
}

/* 支援グループ全体の並びを調整 */
.support-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- 支援・SNSエリア：スマホ最適化 --- */
@media (max-width: 680px) {
    /* 1段目（メイン案内と支援ボタン）の調整 */
    .info-main-row {
        justify-content: center;
        gap: 8px;
    }

    /* 支援グループを1行に押し込む設定ッス */
    .support-group {
        width: auto; /* 幅100%を解除 */
        flex-wrap: nowrap; /* 🌟 絶対に改行させない魔法 */
        justify-content: center;
        margin-top: 0;
    }

    /* ラベルを一気にスリム化 */
    .support-label {
        font-size: 9px; /* 文字を少し小さく */
        white-space: nowrap; /* 🌟 文字を途中で切らせない */
        margin-right: 2px;
    }

    /* ボタン（チップ）をスマホ用に小さく */
    .info-chip {
        padding: 4px 8px; /* 🌟 余白を削って横幅を稼ぐッス */
        font-size: 10px;
        min-width: auto; /* 最小幅を解除 */
    }

    /* 2段目（インフォバー）もスリムに */
    .info-status-bar {
        padding: 8px 12px;
        flex-direction: row; /* スマホでも1行を維持してみるッス */
        justify-content: space-between;
        font-size: 9px;
    }

    .status-link {
        margin-left: 8px;
    }

    .link-text {
        display: none; /* 🌟 スマホでは「Twitter」等の文字を消してアイコンだけにすると超スッキリ！ */
    }
    
    .icon-square {
        margin-right: 0; /* アイコン単体で見せるための調整 */
    }
}

/* ============================================
   SUPPORT & INFO PANEL (v30 Final)
   ============================================ */

/* 1. 全体パネル：目に優しいトーン */
.integrated-info-card {
    background: #f8fafc; /* Slate 50 */
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 35px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    margin-top: 40px;
}

/* 2. 支援・シェアボタン：色付き＆伸び防止 */
.support-share-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 25px 0;
}
.btn-line {
    display: flex;
    gap: 10px;
    justify-content: center;
    width: 100%;
}
.pfp-btn-stylish {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 10px;
    text-decoration: none !important;
    transition: all 0.2s;
    flex: 1;
    min-width: 140px;
    max-width: 240px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.pfp-btn-stylish:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.1); }

/* ボタン別カラー（少し濃いめ） */
.kofi-style { background: #e0f2fe; border: 1.5px solid #7dd3fc; }
.amazon-style { background: #fef3c7; border: 1.5px solid #fcd34d; }
.share-x-style { background: #f1f5f9; border: 1.5px solid #cbd5e1; }
.share-bsky-style { background: #dbeafe; border: 1.5px solid #93c5fd; }

.btn-icon { font-size: 18px; margin-right: 10px; }
.btn-main-txt { font-size: 11px; font-weight: 900; color: #0f172a; }
.btn-sub-txt { font-size: 9px; color: #64748b; }

/* 3. おすすめリンク：地味さを解消！ */
.recommend-grid-fixed4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
}
.recommend-grid-fixed4 a {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 12px 8px !important;
    text-align: center !important;
    font-size: 10px !important;
    font-weight: bold !important;
    color: #475569 !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
}
/* ホバー時にブランドカラーの枠線と影を出すッス */
.recommend-grid-fixed4 a:hover {
    border-color: #0ea5e9 !important;
    color: #0ea5e9 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 12px rgba(14, 165, 233, 0.1) !important;
    background: #f0f9ff !important;
}

/* 4. 法的表記：控えめデザイン */
.legal-flex-row { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; }
.legal-amazon-text { font-size: 9px; color: #94a3b8; text-align: left; line-height: 1.5; max-width: 70%; }
.legal-modal-trigger {
    background: none; border: none; font-size: 9px; color: #cbd5e1; 
    cursor: pointer; text-decoration: underline;
}

/* 5. スマホ対応（2個×2段 ＆ 4列維持） */
@media (max-width: 600px) {
    .btn-line { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .pfp-btn-stylish { max-width: none; min-width: 0; }
    .btn-sub-txt { display: none; }
    .recommend-grid-fixed4 { gap: 6px !important; }
    .recommend-grid-fixed4 a { font-size: 8px !important; padding: 8px 4px !important; }
}


/* ============================================
   PFP v30 PERFECT ALIGNMENT (完全整列)
   ============================================ */

/* 1. 全要素のサイズ計算を「枠線込み」に固定して、はみ出しを根本から防ぐッス */
*, *::before, *::after {
    box-sizing: border-box !important;
}

/* 2. サイトの「芯」となる横幅設定 */
:root {
    --pfp-base-width: 1000px; /* 🌟 ここをメインパネルの幅に合わせるッス */
}

/* 3. ヘッダーから足元まで、全主要要素を一つの幅に拘束！ */
.h1-wrap,
.pfp-info-center,
.top-control-grid,
.studio-container,
.cp-container,
.cockpit-bottom,
.v30-dict-panel,
.manual-section,
.section-head {
    width: 100% !important;
    max-width: var(--pfp-base-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    /* 🌟 左右の余白を統一（スマホで端に付かないように） */
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* 4. 「プレビューエリアが小さい」問題を解消 */
.cp-container {
    padding-left: 0 !important;   /* 🌟 外側の余白を消して... */
    padding-right: 0 !important;
    border-radius: 8px;
    /* 中身の cp-content-body が親幅いっぱいに広がるようにするッス */
}

/* 5. 「はみ出し」の原因になりやすいインフォバーを微調整 */
.pfp-info-center, .info-status-bar {
    width: 100% !important;
    /* 内側にパディングがあるので、外側はスッキリさせるッス */
}

/* 6. 見出し（STEP 1等）の文字開始位置を他のパネルと揃える */
.section-head {
    padding-left: 5px !important; /* パネルの枠線の太さ分くらい調整 */
    margin-bottom: 8px !important;
}

/* 7. スマホ対応：画面いっぱいに使う */
@media (max-width: 600px) {
    .h1-wrap, .pfp-info-center, .top-control-grid, .studio-container, 
    .cp-container, .cockpit-bottom, .v30-dict-panel, .manual-section {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* 支援パネル内のデザイン微調整（背景色の重厚感を維持） */
.integrated-info-card {
    background: #f8fafc; /* Slate 60：目に優しい */
    border: 1px solid #e2e8f0;
    padding: 30px;
    margin-bottom: 80px; /* 下の余白 */
}


/* --- 支援・シェア：統合グリッドデザイン --- */
.support-share-grid {
    display: grid;
    /* 🌟 PCでは4列 */
    grid-template-columns: repeat(4, 1fr); 
    gap: 12px;
    margin: 30px auto;
    /* 🌟 パネルの最大幅(900-1000px)より少し狭くして「ギュッ」とさせるッス */
    max-width: 820px; 
    width: 100%;
}

.pfp-btn-v30 {
    display: flex;
    flex-direction: column; /* 🌟 アイコンを上、文字を下に並べる */
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 15px 10px;
    border-radius: 12px;
    text-decoration: none !important;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border: 1.5px solid transparent;
    min-height: 80px; /* 🌟 高さを一定にして整列させる */
}

/* 🎨 視認性の高い「コクのある」背景色 */
.kofi-color   { background: #e0f2fe; border-color: #7dd3fc; }
.amazon-color { background: #fef3c7; border-color: #fcd34d; }
.x-color      { background: #f1f5f9; border-color: #cbd5e1; }
.bsky-color   { background: #dbeafe; border-color: #93c5fd; }

.pfp-btn-v30:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    filter: brightness(0.98);
}

.btn-icon { font-size: 22px; margin-bottom: 6px; }
.btn-main-txt { 
    font-size: 10px; 
    font-weight: 900; 
    color: #0f172a; 
    letter-spacing: -0.2px;
}

/* 📱 スマホ最適化（絶対に2列×2段に強制！） */
@media (max-width: 700px) {
    .support-share-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
        max-width: 100%;
    }


    /* 2. 高さ・余白のツボ（ボタンそのものを薄くする） */
.pfp-btn-v30 {
    /* 🌟 パディング（内側の余白）を 15px → 8px くらいに */
    padding: 6px 8px;
    
    /* 🌟 最小の高さを 80px → 55px くらいに下げると薄くなるッス */
    min-height: 40px; 
}

.btn-icon { 
    /* 🌟 アイコンを 22px → 18px くらいに */
    font-size: 18px; 
}
.btn-main-txt { 
    /* 🌟 文字を 10px → 9px くらいに */
    font-size: 12px; 
}

}

/* ======================================================
   💎 PFP V30 PREMIUM LAYOUT ENGINE (MATCHED TO HTML)
   ====================================================== */

/* 1. 【ベース】PC横並び ＆ スマホ縦積み */
.v30-layout-engine {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 30px auto !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
}

@media screen and (min-width: 769px) {
    .v30-panel-left { flex: 0 0 380px !important; width: 380px !important; margin: 0 !important; }
    .v30-panel-right { flex: 1 !important; min-width: 0 !important; margin: 0 !important; }
}
@media screen and (max-width: 768px) {
    .v30-layout-engine { flex-direction: column !important; }
    .v30-panel-left, .v30-panel-right { width: 100% !important; flex: none !important; }
}

/* 2. 【外装】重厚感は残しつつ洗練された白ベースに */
.v30-panel-left, .v30-panel-right {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 🌟 見出しを「黒」から「明るく清潔なグレー」に変更 */
.v30-header-banner {
    background: #f8fafc !important; 
    color: #334155 !important;      
    padding: 12px 15px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    margin: 0 !important;
}

.v30-inner-body {
    padding: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    flex-grow: 1 !important;
}

/* 🌟 右パネル（プロジェクト）の元々の余白を無効化 */
.v30-panel-right.save-unit {
    border: none !important; margin: 0 !important; box-shadow: none !important;
}

/* =========================================
   🎛️ 動作モード：プレミアム・トグルスイッチ
   ========================================= */
.v30-control-row { display: flex !important; gap: 8px !important; height: 42px !important; align-items: center !important; }

/* 箱全体を「スイッチ」にする魔法 */
.v30-capsule-switcher {
    flex: 1 !important; border-radius: 50px !important; border: 1px solid #cbd5e1 !important;
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important;
    position: relative !important; transition: all 0.3s ease !important;
}

/* 🌟 透明な膜を張って「文字の上」でもカチッと反応させるッス！ */
.v30-switch-core::after {
    content: '' !important; position: absolute !important;
    top: -15px !important; left: -60px !important; right: -60px !important; bottom: -15px !important;
    cursor: pointer !important; z-index: 10 !important;
}

/* 🎨 モード別の背景色変化（:has を使用） */
/* 【Standard モード】薄い青 */
.v30-capsule-switcher { background: #f0f9ff !important; border-color: #bae6fd !important; }
#lbl-sd { color: #0284c7 !important; font-weight: 900 !important; font-size: 11px !important; z-index: 2; transition: 0.3s; }
#lbl-niji { color: #94a3b8 !important; font-weight: bold !important; font-size: 11px !important; z-index: 2; transition: 0.3s; }

/* 【Niji-Mid モード】薄い紫 */
.v30-capsule-switcher:has(input[type="checkbox"]:checked) { background: #faf5ff !important; border-color: #d8b4fe !important; }
.v30-capsule-switcher:has(input[type="checkbox"]:checked) #lbl-sd { color: #94a3b8 !important; font-weight: bold !important; }
.v30-capsule-switcher:has(input[type="checkbox"]:checked) #lbl-niji { color: #7e22ce !important; font-weight: 900 !important; }

/* スライダー本体 */
.v30-switch-core { position: relative !important; width: 44px !important; height: 24px !important; display: inline-block !important; margin: 0 !important; z-index: 2; }
.v30-switch-core input { opacity: 0 !important; width: 0 !important; height: 0 !important; }
.v30-switch-slider { position: absolute !important; top: 0; left: 0; right: 0; bottom: 0; background: #3b82f6 !important; border-radius: 24px !important; transition: .3s !important; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1) !important; }
.v30-switch-slider:before { content: "" !important; position: absolute !important; height: 18px !important; width: 18px !important; left: 3px !important; bottom: 3px !important; background: white !important; border-radius: 50% !important; transition: .3s !important; box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important; }
input:checked + .v30-switch-slider { background: #a855f7 !important; }
input:checked + .v30-switch-slider:before { transform: translateX(20px) !important; }

/* 設定ボタン */
.v30-settings-trigger { height: 100% !important; background: #fff !important; color: #475569 !important; border: 1px solid #cbd5e1 !important; border-radius: 8px !important; padding: 0 15px !important; font-size: 10px !important; font-weight: 900 !important; cursor: pointer; transition: 0.2s; }
.v30-settings-trigger:hover { background: #f8fafc !important; color: #0ea5e9 !important; border-color: #0ea5e9 !important; }

/* =========================================
   🎁 下段ボタン ＆ お題ガチャ専用デザイン
   ========================================= */
.v30-shortcut-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.v30-btn-action { height: 42px !important; width: 100% !important; background: #fff !important; border: 1px solid #cbd5e1 !important; border-radius: 8px !important; font-weight: 800 !important; font-size: 11px !important; color: #475569 !important; cursor: pointer; transition: 0.2s; }
.v30-btn-action:hover { background: #f1f5f9 !important; color: #0ea5e9 !important; border-color: #0ea5e9 !important; }

/* 🌟 お題ガチャ（リッチなゴールドグラデ） */
.v30-shortcut-grid button:nth-child(2), button.btn-gacha-trigger {
    background: linear-gradient(135deg, #fffbeb, #fef3c7) !important;
    border: 1px solid #fde68a !important;
    color: #d97706 !important;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.1) !important;
    font-weight: 900 !important;
}
.v30-shortcut-grid button:nth-child(2):hover, button.btn-gacha-trigger:hover {
    background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
    border-color: #f59e0b !important;
    color: #b45309 !important;
    transform: translateY(-1px);
}

/* =========================================
   📁 右側：プロジェクト管理の精密整列
   ========================================= */
.v30-project-row { display: flex !important; gap: 8px !important; height: 38px !important; align-items: center !important; }

.v30-input-text, .v30-select-box { 
    flex: 1 !important; height: 100% !important; border: 1px solid #cbd5e1 !important; 
    border-radius: 6px !important; padding: 0 10px !important; font-size: 12px !important; 
    box-sizing: border-box !important; background: #fff !important; color: #334155 !important;
}
.v30-input-text:focus, .v30-select-box:focus { border-color: #0ea5e9 !important; outline: none !important; }

.v30-btn-main { 
    height: 100% !important; border-radius: 6px !important; font-weight: 800 !important; font-size: 11px !important; 
    border: none !important; cursor: pointer; transition: 0.2s; box-shadow: 0 2px 0 rgba(0,0,0,0.05) !important; 
    display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 10px !important;
}
.v30-btn-main:active { transform: translateY(2px); box-shadow: none !important; }

/* プロジェクト管理ボタンカラー */
.v30-save { background: #10b981 !important; color: #fff !important; flex: 0 0 80px !important; }
.v30-save:hover { background: #059669 !important; }
.v30-over { background: #f59e0b !important; color: #fff !important; flex: 1 !important; }
.v30-over:hover { background: #d97706 !important; }
.v30-del  { background: #ef4444 !important; color: #fff !important; flex: 0 0 50px !important; }
.v30-del:hover { background: #dc2626 !important; }


/* =========================================
   🔙 旧バージョン（v29.5）ナビゲーション
   ========================================= */
.v30-legacy-nav {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 10px auto 0 auto !important; /* 上の余白と、下のエンジンとの距離を調整 */
    padding: 0 15px !important;
    box-sizing: border-box !important;
    text-align: right !important; /* 🌟 画面の右上にピタッと寄せるッス */
    font-size: 11px !important;
    color: #64748b !important;    /* 悪目立ちしないスレートグレー */
}

.v30-legacy-text {
    font-weight: bold !important;
    margin-right: 5px !important;
}

.v30-legacy-link {
    color: #0ea5e9 !important;    /* さりげないリンクカラー */
    text-decoration: none !important;
    font-weight: 900 !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    transition: all 0.2s !important;
}

.v30-legacy-link:hover {
    background: #e0f2fe !important;
    color: #0284c7 !important;
    transform: translateY(-1px) !important;
}

.v30-legacy-sep {
    margin: 0 2px !important;
    color: #cbd5e1 !important;
}