/* ▼▼▼ テーマ変数定義 ▼▼▼ */


/* ▼▼▼ テーマ変数定義 (Blueをデフォルトに変更) ▼▼▼ */
        :root {
            /* デフォルト (Blue / クール) */
            --bg-color: #e3f2fd; 
            --dot-color: #bbdefb; 
            --panel-bg: rgba(255, 255, 255, 0.6);
            --text-main: #0d47a1; 
            --text-sub: #1976d2;
            --primary-color: #64b5f6; 
            --accent-color: #1e88e5;
            --sub-color-1: #ffb74d; 
            --sub-color-2: #fff9c4; 
            --sub-color-3: #81c784;
            --border-radius: 20px;
            --shadow: 0 8px 20px rgba(33, 150, 243, 0.25); 
            --local-color: #4caf50;
            --focus-glow: rgba(33, 150, 243, 0.6);
            --input-bg: #ffffff;
            --input-border: #f0f0f0;
            --component-bg: rgba(255, 255, 255, 0.75);
            
            /* チャート用カラー (Blue) */
            --chart-bg: rgba(100, 181, 246, 0.6);
            --chart-border: rgba(30, 136, 229, 1);
            --chart-grid: rgba(13, 71, 161, 0.1);
            --chart-text: #0d47a1;
        }

        /* テーマ: ピンク (元デフォルトをここに移動) */
        body.theme-pink {
            --bg-color: #fff0f5;
            --dot-color: #ffdee9;
            --text-main: #5d4037;
            --text-sub: #8d6e63;
            --primary-color: #ff8fa3;
            --accent-color: #ff4d6d;
            --sub-color-1: #a2d2ff;
            --sub-color-2: #ffef96;
            --sub-color-3: #b8e994;
            --shadow: 0 8px 20px rgba(255, 143, 163, 0.25);
            --local-color: #badc58;
            --focus-glow: rgba(255, 77, 109, 0.6);
            --chart-bg: rgba(255, 143, 163, 0.6);
            --chart-border: rgba(255, 77, 109, 1);
            --chart-grid: rgba(93, 64, 55, 0.1);
            --chart-text: #5d4037;
        }
        /* テーマ: レッド */
        body.theme-red {
            --bg-color: #fff3e0; --dot-color: #ffcc80; --text-main: #bf360c; --text-sub: #d84315;
            --primary-color: #ff8a65; --accent-color: #f4511e;
            --sub-color-1: #9575cd; --sub-color-2: #ffe082; --sub-color-3: #aed581;
            --shadow: 0 8px 20px rgba(244, 81, 30, 0.25); --local-color: #ffb74d;
            --focus-glow: rgba(244, 81, 30, 0.6);
            --chart-bg: rgba(255, 138, 101, 0.6);
            --chart-border: rgba(244, 81, 30, 1);
            --chart-grid: rgba(191, 54, 12, 0.1);
            --chart-text: #bf360c;
        }
        /* テーマ: ダーク */
        body.theme-dark {
            --bg-color: #212121; --dot-color: #37474f; 
            --panel-bg: rgba(38, 50, 56, 0.7);
            --text-main: #eceff1; --text-sub: #b0bec5;
            --primary-color: #7e57c2; --accent-color: #ab47bc;
            --sub-color-1: #5c6bc0; --sub-color-2: #fdd835; --sub-color-3: #26a69a;
            --shadow: 0 8px 20px rgba(0, 0, 0, 0.7); --local-color: #78909c;
            --focus-glow: rgba(171, 71, 188, 0.7);
            --input-bg: rgba(0, 0, 0, 0.3);
            --input-border: rgba(69, 90, 100, 0.8);
            --component-bg: rgba(255, 255, 255, 0.05);
            --chart-bg: rgba(171, 71, 188, 0.6);
            --chart-border: rgba(171, 71, 188, 1);
            --chart-grid: rgba(255, 255, 255, 0.1);
            --chart-text: #eceff1;
        }
/* テーマ: グリーン (Green) */
body.theme-green {
    --bg-color: #e8f5e9; --dot-color: #c8e6c9; --text-main: #1b5e20; --text-sub: #388e3c;
    --primary-color: #66bb6a; --accent-color: #43a047;
    --sub-color-1: #26a69a; --sub-color-2: #dce775; --sub-color-3: #ffa726;
    --shadow: 0 8px 20px rgba(76, 175, 80, 0.25); --local-color: #00897b;
    --focus-glow: rgba(76, 175, 80, 0.6);
    --chart-bg: rgba(102, 187, 106, 0.6); --chart-border: rgba(67, 160, 71, 1);
    --chart-grid: rgba(27, 94, 32, 0.1); --chart-text: #1b5e20;
}
        /* 共通スタイル */
        * { box-sizing: border-box; }
        
        input[type="text"], input[type="number"] {
            color: var(--text-main);
            background-color: var(--input-bg);
            border: 2px solid var(--input-border);
            border-radius: 8px;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
            transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            font-weight: bold;
            backdrop-filter: blur(2px);
        }
        input:focus {
            z-index: 100;
            border-color: var(--accent-color);
            background-color: rgba(255, 255, 255, 0.9);
            box-shadow: 0 0 0 4px var(--focus-glow);
            transform: scale(1.05);
            outline: none;
            position: relative;
        }
        body.theme-dark input { color: #ffffff; }
        body.theme-dark input:focus { background-color: rgba(0, 0, 0, 0.8); }
        body.theme-dark input::placeholder { color: rgba(255, 255, 255, 0.3); }

        /* 背景アニメーション */
        @keyframes bgScroll { 0% { background-position: 0 0, 15px 15px; } 100% { background-position: 30px 30px, 45px 45px; } }
        body {
            font-family: 'M PLUS Rounded 1c', 'Arial', sans-serif;
            background-color: var(--bg-color);
            background-image: radial-gradient(var(--dot-color) 20%, transparent 20%), radial-gradient(var(--dot-color) 20%, transparent 20%);
            background-position: 0 0, 15px 15px;
            background-size: 30px 30px;
            color: var(--text-main);
            margin: 0; padding: 20px;
            line-height: 1.6;
            overflow-x: hidden;
            -webkit-text-size-adjust: 100%;
            touch-action: manipulation;
            transition: background-color 0.5s, color 0.5s;
            animation: bgScroll 20s linear infinite;
        }

        /* 推し背景レイヤー */
        #custom-bg-layer {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 0.35;
            z-index: -1;
            pointer-events: none;
            transition: background-image 0.5s ease;
        }

        /* テーマ切り替えパレット */
        .theme-switcher { position: absolute; top: 20px; right: 20px; display: flex; gap: 10px; z-index: 100; align-items: center; }
        .theme-btn { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; cursor: pointer; box-shadow: 0 3px 8px rgba(0,0,0,0.2); transition: transform 0.2s; display: flex; align-items: center; justify-content: center; font-size: 14px; background: rgba(255,255,255,0.8); }
        .theme-btn:hover { transform: scale(1.1); }
        .theme-btn.active { transform: scale(1.2); border-color: var(--text-main); }
        #btn-theme-pink { background: linear-gradient(135deg, #ff8fa3, #ff4d6d); }
        #btn-theme-blue { background: linear-gradient(135deg, #64b5f6, #1e88e5); }
        #btn-theme-red  { background: linear-gradient(135deg, #ff8a65, #f4511e); }
        #btn-theme-dark { background: linear-gradient(135deg, #7e57c2, #37474f); }
        @media (max-width: 820px) { .theme-switcher { top: 10px; right: 10px; } .theme-btn { width: 25px; height: 25px; font-size: 12px; } }

        /* カスタム通知 (Toast) */
        .cute-toast {
            position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
            color: white; padding: 15px 30px; border-radius: 50px; font-weight: bold;
            box-shadow: 0 10px 25px var(--shadow); z-index: 9999; opacity: 0;
            border: 2px solid #fff; white-space: nowrap; pointer-events: none;
            display: flex; align-items: center; gap: 10px;
        }
        .cute-toast::before { content: '✨'; font-size: 1.2em; }
        .toast-show { animation: toastSlideDown 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards; }
        .toast-hide { animation: toastFadeOut 0.5s ease forwards; }
        @keyframes toastSlideDown { 0% { transform: translate(-50%, -20px); opacity: 0; } 40% { transform: translate(-50%, 10px); opacity: 1; } 100% { transform: translate(-50%, 0); opacity: 1; } }
        @keyframes toastFadeOut { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -20px); } }

        /* メインレイアウト */
        #app-container {
            max-width: 1400px; margin: 0 auto;
            background-color: var(--panel-bg);
            padding: 40px; border-radius: 30px;
            box-shadow: var(--shadow);
            border: 4px solid rgba(255,255,255,0.6);
            /* animation: fadeInUp 0.8s ease-out; */ /* ←スクショ不具合対策で削除済み */
            position: relative;
            backdrop-filter: blur(5px);
        }
        
        @keyframes popScale { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
        .pop-anim { animation: popScale 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        @keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
        
        /* リストアイテム */
        .saved-item { 
            display: flex; 
            align-items: center; 
            padding: 8px 0px; 
            border-bottom: 1px solid rgba(0,0,0,0.05); 
            animation: slideIn 0.4s ease-out forwards; 
        }
        .saved-item-info {
            flex: 1; font-size: 0.9em; min-width: 0; margin-right: 5px;
            white-space: normal; word-break: break-all; overflow-wrap: break-word;
        }
        .saved-item-actions {
            display: flex; flex-direction: column; gap: 5px; margin-left: 10px; justify-content: center; min-width: 45px;
        }
        .saved-item-actions button {
            width: 100%; margin: 0 !important; padding: 2px !important; font-size: 0.8em; justify-content: center;
        }
        
        /* 呼出ボタンの色を鮮やかに */
        .load-button {
            background: linear-gradient(135deg, #0984e3, #74b9ff); /* 鮮やかな青 */
            color: white !important;
            border: 1px solid rgba(255,255,255,0.3);
            text-shadow: 0 1px 1px rgba(0,0,0,0.2);
            font-weight: bold;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transition: all 0.2s;
        }
        .load-button:hover {
            filter: brightness(1.1);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        .load-button:active {
            transform: translateY(0);
        }

        /* ステッパー */
        input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
        input[type="number"] { -moz-appearance: textfield; appearance: textfield;}
        .stepper-wrapper { display: flex; position: relative; width: 100%; height: 100%; overflow: hidden; }
        .stepper-wrapper input { flex: 1; text-align: center; height: 100%; min-width: 0; padding-right: 20px; border:none; background:transparent; box-shadow:none; border-radius:0; }
        .stepper-wrapper input:focus { box-shadow:none; background:transparent; }
        .stepper-wrapper.no-btns input { padding-right: 0 !important; }
        .stat-input-cell .stepper-wrapper input { padding-right: 18px; }
        .stat-input-cell .stepper-wrapper.no-btns input { padding-right: 0 !important; }
        .step-btns-col { position: absolute; right: 0; top: 0; bottom: 0; width: 20px; display: flex; flex-direction: column; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; z-index: 10; }
        .stat-input-cell .step-btns-col { width: 18px; }
        .stepper-wrapper:hover .step-btns-col, .stepper-wrapper:focus-within .step-btns-col { opacity: 1; pointer-events: auto; }
        .step-btn { flex: 1; border: none; color: white; font-size: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; padding: 0; margin: 0; line-height: 1; }
        .step-btn.plus { background-color: var(--primary-color); border-bottom: 1px solid rgba(255,255,255,0.3); border-top-right-radius: 4px; }
        .step-btn.plus:hover { background-color: var(--accent-color); }
        .step-btn.plus::before { content: "▲"; }
        .step-btn.minus { background-color: var(--sub-color-1); border-bottom-right-radius: 4px; }
        .step-btn.minus:hover { filter: brightness(0.9); }
        .step-btn.minus::before { content: "▼"; }

        h1 { color: var(--accent-color); text-align: center; border-bottom: 3px dashed var(--primary-color); padding-bottom: 15px; margin-bottom: 20px; font-size: 2.2em; font-weight: 800; letter-spacing: 1px; line-height: 1.2; text-shadow: 1px 1px 2px rgba(255,255,255,0.8); }
        h1::before { content: '🎀 '; } h1::after { content: ' 🎀'; }
        .title-break { display: none; }
        h2 { color: var(--text-main); margin-top: 0; margin-bottom: 15px; font-size: 1.2em; background: linear-gradient(to right, var(--sub-color-2), rgba(255,255,255,0)); padding: 8px 15px; border-radius: 50px; display: inline-block; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
        h2::before { content: '✨ '; }
        p.description { text-align: center; margin-bottom: 10px; color: var(--text-sub); font-size: 0.95em; text-shadow: 1px 1px 1px rgba(255,255,255,0.5); }

        /* ▼▼▼ タブナビゲーション (視認性向上版) ▼▼▼ */
        /* ▼▼▼ タブナビゲーション (PC版スクロール追従・修正版) ▼▼▼ */
        .tab-nav-container { 
            display: flex; 
            justify-content: flex-start;
            gap: 10px; 
            border-bottom: 5px solid var(--accent-color); 
            
            /* ★ここから追記・変更部分★ */
            position: sticky;      /* スクロール追従 */
            top: 0;                /* 上端に固定 */
            z-index: 1000;         /* 他の要素より手前に */
            
            /* 背景設定 (透け防止) */
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(5px);
            
            /* 親の余白(40px)を打ち消して、画面横幅いっぱいに背景を広げる */
            margin: 0 -40px 20px -40px;
            padding: 10px 50px 0 50px;
            
            /* 影をつけて浮いている感を出す */
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        }
		/* ダークモード時の背景対応 */
        body.theme-dark .tab-nav-container { 
            border-bottom-color: var(--accent-color);
            background: rgba(33, 33, 33, 0.95);
            box-shadow: 0 4px 10px rgba(0,0,0,0.5);
        }
        .tab-btn {
            background: rgba(255,255,255,0.6); 
            border: none;
            color: var(--text-sub); 
            padding: 12px 35px; 
            border-radius: 15px 15px 0 0; 
            cursor: pointer; 
            font-weight: 800; /* 太字 */
            transition: all 0.2s; 
            font-family: 'M PLUS Rounded 1c';
            margin-bottom: -5px; 
            font-size: 1.15em;
            position: relative;
            z-index: 1;
        }
        .tab-btn:hover { 
            background: rgba(255,255,255,0.9); 
            color: var(--accent-color); 
            z-index: 2;
        }
        .tab-btn.active { 
            background: var(--accent-color); /* 背景を濃い色に */
            color: white; 
            box-shadow: 0 -4px 10px rgba(0,0,0,0.1); 
            z-index: 3;
        }
        body.theme-dark .tab-nav-container { border-bottom-color: var(--accent-color); }
        body.theme-dark .tab-btn { background: rgba(0,0,0,0.4); color: #90a4ae; }
        body.theme-dark .tab-btn:hover { background: rgba(0,0,0,0.6); color: #fff; }
        body.theme-dark .tab-btn.active { background: var(--accent-color); color: #fff; }

        .tab-content { display: none; animation: fadeInUp 0.4s ease-out; }
        .tab-content.active { display: block; }
		/* メインレイアウト */
        #main-content-wrapper { display: flex; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
        #input-result-panel { flex: 2; min-width: 320px; }
        #rankings-wrapper { flex: 2; min-width: 400px; display: flex; gap: 15px; flex-direction: row; flex-wrap: nowrap; }
        .ranking-panel { flex: 1; background-color: var(--component-bg); padding: 20px; border-radius: var(--border-radius); box-shadow: var(--shadow); border: 2px solid rgba(255,255,255,0.8); height: fit-content; min-width: 250px; }
        #local-ranking-panel { border-color: var(--local-color); }
        #local-ranking-panel h2 { background: linear-gradient(to right, var(--local-color), rgba(255,255,255,0)); color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.1); }
        body.theme-dark .ranking-panel { background-color: rgba(255,255,255,0.03); color: #eceff1; border-color: #455a64; }

        .input-section { margin-bottom: 30px; padding: 25px; border: 2px solid rgba(255,255,255,0.8); border-radius: var(--border-radius); background-color: var(--component-bg); box-shadow: var(--shadow); }
        body.theme-dark .input-section { background-color: rgba(255,255,255,0.03); border-color: #455a64; }
        
        /* ▼▼▼ 追加: キャラアイコン用スタイル ▼▼▼ */
        .character-name-section { text-align: center; padding-top: 15px; padding-bottom: 15px; }
        .char-icon-wrapper {
            width: 60px; height: 60px;
            border-radius: 50%;
            border: 3px solid var(--primary-color);
            background-color: #fff;
            cursor: pointer;
            overflow: hidden;
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: transform 0.2s;
            position: relative;
            flex-shrink: 0;
        }
        .char-icon-wrapper:hover { transform: scale(1.1); border-color: var(--accent-color); }
        #char-icon-placeholder { font-size: 30px; opacity: 0.3; }
        #char-icon-preview { width: 100%; height: 100%; object-fit: cover; }

        /* リスト表示用の小アイコン */
        .list-icon-small {
            width: 40px; height: 40px; border-radius: 50%;
            object-fit: cover; border: 2px solid #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-right: 10px; flex-shrink: 0;
        }
        /* パーティカード用の中アイコン */
        .party-icon-medium {
            width: 50px; height: 50px; border-radius: 50%;
            object-fit: cover; border: 2px solid #fff;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-right: 8px; flex-shrink: 0;
        }

        .character-name-section input { width: 300px; padding: 12px; border: 2px solid var(--primary-color); border-radius: 50px; font-size: 1.1em; text-align: center; }
        .character-name-section input:focus { box-shadow: 0 0 0 4px rgba(255, 143, 163, 0.3); }
/* ★ここに追加（PC版では隠す設定） */
        .mobile-jump-btn { display: none; }
/* ▼▼▼ 書き換えここから（363行目付近） ▼▼▼ */
        /* ▼▼▼ HTML移動後のスタイル調整 (PC/スマホ共通) ▼▼▼ */
        .result-area {
            display: flex;
            gap: 20px;
            margin-bottom: 20px; /* 余白調整 */
            
            /* 固定表示の設定 */
            position: sticky;
            top: 0;
            z-index: 900;
            
            /* デザイン装飾 */
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(5px);
            padding: 10px 20px;
            border-radius: 0 0 15px 15px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            transition: all 0.3s ease;

            /* PCで見づらくならないよう最大幅を設定して中央寄せ */
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
        }

        body.theme-dark .result-area {
            background: rgba(33, 33, 33, 0.9);
            box-shadow: 0 4px 10px rgba(0,0,0,0.5);
            border: 1px solid #455a64;
            border-top: none;
        }
/* ▼▼▼ ローカルリストの保存・復元ボタン用スタイル (追加) ▼▼▼ */
        .local-control-group {
            display: inline-flex;
            gap: 5px;
            vertical-align: middle;
            margin-left: 10px;
        }
        .local-control-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            background: #ffffff; /* 白背景で見やすく */
            color: var(--text-main); /* 文字は濃い茶色 */
            border: 2px solid #fff;
            border-radius: 15px;
            padding: 4px 12px; /* 余白を広げて押しやすく */
            font-size: 0.75em; /* 文字サイズを大きく (元の0.5emから変更) */
            font-weight: bold;
            box-shadow: 0 3px 6px rgba(0,0,0,0.2); /* 影をつけて浮き出させる */
            transition: all 0.2s;
            text-decoration: none;
            line-height: 1.2;
        }
        .local-control-btn:hover {
            transform: translateY(-2px);
            color: var(--accent-color);
            box-shadow: 0 5px 10px rgba(0,0,0,0.3);
        }
        /* ダークモード時の調整 */
        body.theme-dark .local-control-btn {
            background: #546e7a;
            color: #fff;
            border-color: #78909c;
        }

        /* 既存のH2の文字も見やすく調整（影を濃くする） */
        #local-ranking-panel h2 {
            text-shadow: 1px 1px 3px rgba(0,0,0,0.4) !important; 
        }

/* ▼▼▼ 追加：ボトムナビゲーション用スタイル ▼▼▼ */
.bottom-nav {
    display: none; /* PCでは非表示 */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0,0,0,0.1);
    justify-content: space-around;
    padding-bottom: env(safe-area-inset-bottom); /* iPhone X以降のホームバー対応 */
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.bottom-nav-item {
    flex: 1;
    border: none;
    background: none;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-sub);
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.bottom-nav-item.active {
    color: var(--accent-color);
}
.bottom-nav-item.active .nav-icon {
    transform: scale(1.2);
    filter: drop-shadow(0 2px 4px rgba(255, 77, 109, 0.4));
}

.nav-icon { font-size: 1.6em; margin-bottom: 2px; transition: transform 0.2s; }
.nav-text { font-size: 0.65em; font-weight: bold; }

/* ダークモード対応 */
body.theme-dark .bottom-nav {
    background: rgba(33, 33, 33, 0.95);
    border-top-color: rgba(255,255,255,0.1);
}

/* スマホ表示時（820px以下）の切り替え設定 */
@media (max-width: 820px) {
    .tab-nav-container { display: none !important; } /* 既存の上のタブを消す */
    .bottom-nav { display: flex; }        /* 下のナビを出す */
    
    /* コンテンツが下のバーに隠れないように余白を追加 */
    body { padding-bottom: 80px !important; } 
    #app-container { margin-bottom: 20px; }
}


        /* ▼▼▼ スマホ表示時の調整 ▼▼▼ */
        @media (max-width: 820px) {
            .result-area {
                /* スマホでは画面幅いっぱいに */
                max-width: 100%;
                margin-left: -5px; /* 親のpaddingを相殺 */
                margin-right: -5px;
                padding: 5px;
                
                /* 横並びにしてコンパクトに */
                flex-direction: row;
                flex-wrap: wrap;
                gap: 5px;
            }

            .result-box {
                flex: 1 1 30%; /* 3等分 */
                padding: 2px 4px !important;
                min-width: auto;
                height: auto; /* 高さを自動調整 */
            }

            .result-box span, .result-box label {
                text-align: center;
                display: block;
                width: 100%;
                font-size: 0.65em !important; /* 文字をさらに小さく */
                line-height: 1.2;
                margin-bottom: 0 !important;
            }
            
            #grand-total-label { font-size: 1.2em !important; }
            #final-hp-label { font-size: 1.0em !important; }
            #resistance-sum-label { font-size: 1.0em !important; }
        }
        /* ▲▲▲ 書き換えここまで ▲▲▲ */
        .result-box { padding: 20px; border-radius: var(--border-radius); box-shadow: var(--shadow); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform 0.1s; border: 2px solid rgba(255,255,255,0.5); }
        /* デフォルト(Blue)用のグラデーション */
        .total-cp-box { flex-grow: 3; background: linear-gradient(135deg, rgba(100, 181, 246, 0.9), rgba(30, 136, 229, 0.9)); border: 4px solid rgba(255,255,255,0.8); }
        
        /* ピンク用のグラデーション */
        body.theme-pink .total-cp-box { background: linear-gradient(135deg, rgba(255, 143, 163, 0.9), rgba(255, 77, 109, 0.9)); }
        body.theme-red .total-cp-box { background: linear-gradient(135deg, rgba(255, 138, 101, 0.9), rgba(244, 81, 30, 0.9)); }
        body.theme-dark .total-cp-box { background: linear-gradient(135deg, rgba(126, 87, 194, 0.9), rgba(171, 71, 188, 0.9)); }

        #grand-total-label { font-size: 2.8em; font-weight: 800; text-shadow: 2px 2px 0 rgba(0,0,0,0.1); font-variant-numeric: tabular-nums; }
        .final-hp-box { flex-grow: 1; background: linear-gradient(135deg, rgba(184, 233, 148, 0.9), rgba(123, 237, 159, 0.9)); border: 4px solid rgba(255,255,255,0.8); }
        .final-hp-box label { font-size: 0.9em; margin-bottom: 5px; opacity: 0.9; }
        #final-hp-label { font-size: 1.8em; font-weight: 800; font-variant-numeric: tabular-nums; }
        .resistance-sum-box { flex-grow: 1; background: linear-gradient(135deg, rgba(162, 210, 255, 0.9), rgba(72, 219, 251, 0.9)); border: 4px solid rgba(255,255,255,0.8); }
        .resistance-sum-box label { font-size: 0.9em; margin-bottom: 5px; opacity: 0.9; }
        #resistance-sum-label { font-size: 1.8em; font-weight: 800; font-variant-numeric: tabular-nums; }

        /* チャート */
        .chart-toggle-wrapper { text-align: center; margin-bottom: 10px; }
        .chart-toggle-btn { background: none; border: none; color: var(--text-sub); cursor: pointer; font-size: 0.9em; text-decoration: underline; font-weight:bold; }
        #radar-chart-container { width: 100%; max-width: 500px; margin: 0 auto 30px auto; background-color: var(--component-bg); border: 2px solid rgba(255,255,255,0.8); border-radius: var(--border-radius); padding: 15px; box-shadow: var(--shadow); display: none; }
        #radar-chart-container.active { display: block; animation: fadeInUp 0.5s; }

        .table-container { margin-bottom: 20px; border-radius: 15px; background: var(--primary-color); padding: 3px; }
        #stat-grid { display: flex; width: 100%; gap: 2px; }
        .row-headers-col { width: 70px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; }
        .row-header-cell { background-color: rgba(255, 240, 245, 0.8); color: var(--text-main); font-weight: bold; font-size: 0.8em; display: flex; align-items: center; justify-content: flex-end; padding: 0 4px; height: 40px; }
        body.theme-dark .row-header-cell { background-color: rgba(69, 90, 100, 0.8); color: #eceff1; }
        .row-header-cell.empty-corner { background-color: rgba(255,255,255,0.5); }
        body.theme-dark .row-header-cell.empty-corner { background-color: transparent; }
        .stat-columns-wrapper { flex: 1; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 2px; min-width: 0; }
        .stat-column { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
        .stat-header-cell { background-color: var(--primary-color); color: #fff; font-size: 0.85em; font-weight: bold; display: flex; align-items: center; justify-content: center; height: 40px; overflow: hidden; }
        .stat-input-cell { background-color: rgba(255, 255, 255, 0.5); border-bottom: 1px solid rgba(0,0,0,0.05); height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; position: relative; }
        body.theme-dark .stat-input-cell { background-color: rgba(255, 255, 255, 0.05); border-bottom-color: rgba(255,255,255,0.05); }
        .stat-input-cell input { width: 100%; height: 100%; border: none; text-align: center; font-size: 0.9em; color: var(--text-main); font-family: 'M PLUS Rounded 1c'; background: transparent; padding: 0; }
        body.theme-dark .stat-input-cell input { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.8); background-color: transparent !important; }
        .stat-input-cell input:focus { background-color: rgba(255,255,255,0.9) !important; box-shadow: inset 0 0 0 2px var(--primary-color) !important; z-index: 10; }
        .final-val { background-color: rgba(255,255,255,0.8); color: var(--accent-color); font-weight: 800; font-size: 0.9em; }
        body.theme-dark .final-val { background-color: rgba(55, 71, 79, 0.8); color: var(--accent-color); }
        .input-fixed { background-color: rgba(0,0,0,0.05) !important; color: var(--text-sub) !important; border-color: transparent !important; box-shadow: none !important; cursor: not-allowed; }
        body.theme-dark .input-fixed { background-color: rgba(255,255,255,0.05) !important; color: #78909c !important; }
        .mobile-row-label { display: none; }

        .action-buttons-group { display: flex; gap: 15px; margin-bottom: 30px; flex-wrap: wrap; }
        .action-button { position: relative; overflow: hidden; padding: 12px 20px; font-size: 0.95em; font-weight: bold; border: none; border-radius: 50px; cursor: pointer; transition: 0.2s; color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); flex-grow: 1; font-family: 'M PLUS Rounded 1c'; }
        .action-button:active { transform: scale(0.95); }
        .action-button:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.15); }
        .secondary-button { background: linear-gradient(to right, var(--sub-color-1), #6c5ce7); }
        .delete-button { background: linear-gradient(to right, #ff7675, #d63031); }
        #temp-save-button, #export-ranking-btn, #import-ranking-btn { display: none; } 
        .admin-lock-btn { background: none; border: none; font-size: 1.2em; cursor: pointer; vertical-align: middle; margin-left: 10px; opacity: 0.7; transition: 0.2s; color: var(--text-main); }
        .admin-lock-btn:hover { opacity: 1; transform: scale(1.1); }
        .stone-toggle-wrapper { display: flex; align-items: center; gap: 15px; background-color: var(--component-bg); padding: 15px 25px; border-radius: 50px; border: 3px solid var(--sub-color-2); margin-bottom: 20px; box-shadow: var(--shadow); }
        body.theme-dark .stone-toggle-wrapper { border-color: var(--sub-color-2); }
        .toggle-label { font-weight: bold; color: #f39c12; font-size: 1.1em; }
        .toggle-switch { position: relative; display: inline-block; width: 60px; height: 32px; flex-shrink: 0; }
        .toggle-switch input { opacity: 0; width: 0; height: 0; }
        .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #e0e0e0; transition: .4s; border-radius: 34px; }
        .slider:before { position: absolute; content: "✖"; height: 24px; width: 24px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ccc; font-size: 12px; }
        input:checked + .slider { background-color: var(--accent-color); }
        input:checked + .slider:before { transform: translateX(28px); content: "💎"; color: var(--accent-color); font-size: 14px; }
        #bulk-inputs { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
        .bulk-input-item { background: var(--component-bg); padding: 10px; border-radius: 10px; display: flex; gap: 10px; align-items: center; border: 1px dashed #ddd; }
        body.theme-dark .bulk-input-item { background-color: rgba(255,255,255,0.03); border-color: #455a64; }
        .bulk-input-item label { color: var(--primary-color); font-weight: bold; min-width: 80px; }
        .bulk-input-item input { flex: 1; border: 1px solid #eee; border-radius: 5px; padding: 5px; }
        .bulk-input-item button { background-color: var(--sub-color-3); border: none; padding: 5px 15px; border-radius: 20px; color: #fff; font-weight: bold; cursor: pointer; white-space: nowrap; }
        
        .manual-cp-input-area { background: rgba(255, 240, 245, 0.7); padding: 15px; border-radius: 15px; margin-bottom: 15px; border: 2px dashed var(--primary-color); }
        body.theme-dark .manual-cp-input-area { background-color: rgba(255,255,255,0.05); }
        #local-ranking-panel .manual-cp-input-area { background: rgba(240, 248, 255, 0.7); border-color: var(--local-color); display:flex; flex-direction:column; gap:8px; }
        body.theme-dark #local-ranking-panel .manual-cp-input-area { background-color: rgba(255,255,255,0.05); }
        
        .manual-cp-fields { display: flex; gap: 5px; align-items: center; }
        .manual-cp-fields input { flex: 1; border: 1px solid #ddd; border-radius: 8px; padding: 8px; text-align: center; }
        .primary-button { background: linear-gradient(to right, var(--primary-color), var(--accent-color)); border-radius: 20px; color: white; border: none; padding: 0 15px; height: 40px; cursor: pointer; font-weight: bold; margin-left: 5px; }
        .local-button { background: linear-gradient(to right, var(--local-color), #6ab04c); border-radius: 20px; color: white; border: none; padding: 0 15px; height: 40px; cursor: pointer; font-weight: bold; white-space: nowrap; margin-left: 5px; }
        .full-save-button { width: 100%; padding: 8px; border:none; border-radius:20px; background: var(--sub-color-2); color: #3e2723 !important; font-weight:bold; cursor:pointer; text-shadow:none; }
        
        .add-to-party-button { width: 100%; padding: 8px; border:none; border-radius:20px; background: linear-gradient(to right, #a29bfe, #6c5ce7); color: white !important; font-weight:bold; cursor:pointer; margin-top:5px; }
        .add-to-party-button:hover { opacity:0.9; transform:scale(1.02); }

        .ranking-controls { display: flex; gap: 8px; margin-bottom: 15px; flex-wrap: wrap; }
        .control-button { flex: 1; padding: 8px; font-size: 0.85em; border: 1px solid #ddd; border-radius: 15px; background-color: #fff; cursor: pointer; color: var(--text-main); font-weight: bold; transition: 0.2s; white-space: nowrap; }
        .control-button:hover { background-color: #f0f0f0; }
        .live-mode-badge { display: none; background-color: #f39c12; color: white; padding: 5px 10px; border-radius: 10px; font-size: 0.8em; margin-bottom: 10px; text-align: center; font-weight: bold; }
        #upload-batch-btn { background-color: #ff4757; color: white; border: none; display: none; }
        #upload-batch-btn:hover { background-color: #e84118; }
        .saved-item:last-child { border-bottom: none; }
/* width: 30px; を auto に変更し、text-align: center; を left に変更 */
.saved-item-rank { 
    font-size: 1.2em; 
    font-weight: 900; 
    color: #f39c12; 
    width: auto;      /* ★ここを変更（文字幅に合わせる） */
    text-align: left; /* ★ここを変更（左揃え） */
    margin-right: 5px; /* アイコンとの間隔をお好みで調整（10px→8pxなど） */
}
        .saved-item-combat-power { color: var(--accent-color); font-weight: bold; }
        .saved-item-combat-power.manual { color: var(--sub-color-1); }
        .saved-item-combat-power.local { color: var(--local-color); }
        .no-data { text-align: center; color: #ccc; padding: 20px; width: 100%; }

        /* HP・耐性のグリッド */
        .compact-grid-section-wrapper { background-color: var(--primary-color); border-radius: 15px; padding: 3px; margin-bottom: 20px; width: fit-content; max-width: 100%; }
        body.theme-dark .compact-grid-section-wrapper { background-color: rgba(255,255,255,0.03); border: 1px solid #455a64; }

        .compact-grid-container { display: grid; gap: 2px; }
        #hp-inputs-area { grid-template-columns: 320px; }
        #resistance-inputs-area { grid-template-columns: 160px 160px; }

        .compact-cell { background-color: var(--component-bg); display: flex; align-items: center; padding: 0 5px; height: 50px; position: relative; flex-direction: row; justify-content: center; gap: 5px; }
        body.theme-dark .compact-cell { background-color: rgba(255,255,255,0.05); }

        .compact-cell label { width: 60px; font-size: 0.85em; color: var(--primary-color); font-weight: bold; flex-shrink: 0; white-space: nowrap; text-align:right; margin-right:5px; }
        .compact-cell .stepper-wrapper { width: 70px; flex-grow: 0; height: 36px; }
        .compact-cell input { font-size: 1em; padding-right: 18px; text-align: right; width: 100%; border: 2px solid var(--input-border); border-radius: 4px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); background-color: var(--input-bg); }

        /* ▼▼▼ 装備欄 (Equipment) ▼▼▼ */
        .equipment-input-wrapper { 
            display: flex; 
            flex-direction: column; /* ★縦並びに変更 */
            gap: 15px; 
            margin-bottom: 20px; 
        }
		
		.equipment-input-item { 
            width: 100%; /* ★幅最大 */
            background: var(--component-bg); 
            padding: 10px; 
            border-radius: 10px; 
            border: 1px solid rgba(255,255,255,0.5); 
            display: flex; flex-direction: column; gap: 5px; 
            position: relative;
        }
        body.theme-dark .equipment-input-item { background: rgba(255,255,255,0.03); border-color: #455a64; }
        
        /* ヘッダー（ラベルとボタンの横並び） */
        .eq-header-row { display: flex; justify-content: space-between; align-items: center; }
        .equipment-input-item label { 
            font-size: 1.0em; font-weight: bold; color: var(--primary-color); margin: 0;
        }

        /* プリセット操作ボタン */
        .eq-btn-group { display: flex; gap: 4px; }
        .eq-btn {
            font-size: 0.75em; padding: 2px 8px; border-radius: 15px; border: none; 
            cursor: pointer; color: white; font-weight: bold;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: 0.2s;
        }
        .eq-btn-save { background: var(--sub-color-3); } /* 緑系 */
        .eq-btn-del  { background: #ff7675; }         /* 赤系 */
        .eq-btn:hover { transform: translateY(-1px); filter: brightness(1.1); }

        /* プルダウンメニュー */
        .eq-preset-select {
            width: 100%; padding: 5px; border-radius: 8px;
            border: 1px solid var(--input-border);
            background-color: rgba(255,255,255,0.8);
            color: var(--text-sub); font-size: 0.85em; font-weight: bold;
            cursor: pointer; margin-bottom: 2px;
        }
        body.theme-dark .eq-preset-select { background-color: rgba(0,0,0,0.3); color: #eceff1; border-color: #546e7a; }

        /* 装備名・数値入力の横並びコンテナ */
        .eq-inputs-row {
            display: flex; gap: 5px; width: 100%;
        }

        /* 装備名入力 (テキスト) */
        .eq-name-input {
            flex: 1; /* ★残りの幅すべてを使う */
            border: 1px solid var(--input-border); 
            padding: 5px 8px; border-radius: 5px;
            text-align: left !important; font-size: 0.9em !important; font-weight: normal !important;
            height: 45px;
            color: var(--text-main) !important; background: var(--input-bg);
            min-width: 0;
        }

        /* 装備CP入力 (数値) */
        .eq-val-input { 
            flex: none; /* ★固定幅にする */
            width: 110px; /* ★数値を入力するのに十分な幅 */
            border: 1px solid var(--input-border); 
            padding: 8px; border-radius: 5px; 
            text-align: right; font-size: 1.2em !important; font-weight: 800; height: 45px;     
            color: var(--accent-color) !important; background: var(--input-bg);
        }

        .small-link-btn {
            font-size: 0.6em;
            background-color: var(--sub-color-1);
            color: white;
            padding: 3px 8px;
            border-radius: 10px;
            text-decoration: none;
            vertical-align: middle;
            margin-left: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transition: 0.2s;
        }
        .small-link-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }

        /* ▼▼▼ パーティ一覧・合計CP用スタイル ▼▼▼ */
        .party-total-section {
            display: flex; align-items: center; justify-content: flex-start;
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
            color: #fff;
            padding: 15px 30px;
            border-radius: 15px;
            margin-bottom: 25px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.15);
            max-width: 800px;
            margin-left: auto; margin-right: auto;
        }
        .party-total-label { font-size: 1.1em; font-weight: bold; margin-right: 15px; opacity: 0.9; }
        .party-total-value { font-size: 2.2em; font-weight: 900; letter-spacing: 1px; text-shadow: 2px 2px 0 rgba(0,0,0,0.1); }
        .party-total-count { font-size: 0.9em; margin-left: auto; background: rgba(255,255,255,0.2); padding: 5px 10px; border-radius: 20px; }

        .party-card-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr); /* 常に2列 (PC) */
            gap: 20px;
            padding: 10px;
        }
        .party-card {
            background-color: var(--component-bg);
            border: 2px solid rgba(255,255,255,0.6);
            border-radius: 15px;
            box-shadow: var(--shadow);
            padding: 15px;
            position: relative;
            animation: popScale 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: flex; flex-direction: column; gap: 10px;
            overflow: hidden; 
        }
        body.theme-dark .party-card { background-color: rgba(255,255,255,0.03); border-color: #455a64; }

		/* ▼▼▼ 追加・修正: パーティリストの表示調整（2行化） ▼▼▼ */
        .p-card-header {
            display: flex;
            align-items: center; /* 上下中央揃え */
            border-bottom: 2px dashed rgba(0,0,0,0.1);
            padding-bottom: 8px;
            margin-bottom: 5px;
            gap: 8px; /* 各要素の間隔 */
        }

        /* 左側のグループ（ランクとアイコン）は固定 */
        .p-header-left {
            display: flex;
            align-items: center;
            flex-shrink: 0; /* 縮まないようにする */
        }
        .p-card-rank {
            font-size: 1.1em; font-weight: 900; color: #f39c12; margin-right: 5px; white-space: nowrap;
        }

        /* 真ん中の情報エリア（名前とCPを縦に積む） */
        .p-header-info {
            display: flex;
            flex-direction: column; /* ★ここが重要：縦並びにする */
            flex: 1;                /* 残りの横幅を全部使う */
            min-width: 0;           /* 省略表示(...)を機能させるために必須 */
            justify-content: center;
        }

        /* 名前：1行目（大きく表示） */
        .p-card-name {
            font-size: 1.05em !important;
            font-weight: bold;
            color: var(--text-main);
            white-space: nowrap;      /* 1行に収める */
            overflow: hidden;         /* はみ出たら隠す */
            text-overflow: ellipsis;  /* ...にする */
            width: 100%;              /* 横幅いっぱい使う */
            line-height: 1.3;
        }

        /* CP：2行目（右寄せで小さく表示） */
        .p-card-cp {
            font-size: 0.85em !important; /* 文字を小さく */
            font-weight: 800;
            color: var(--accent-color);
            text-align: right;        /* ★右寄せにする */
            width: 100%;
            line-height: 1.2;
            margin-top: 2px;          /* 名前との隙間 */
        }

        /* 削除ボタン：右端に配置 */
        .p-delete-btn {
            flex-shrink: 0; margin-left: auto;
            background: #ff7675; color: white; border: none;
            width: 24px; height: 24px; border-radius: 50%;
            cursor: pointer; font-weight: bold; font-size: 0.8em;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            display: flex; align-items: center; justify-content: center;
        }
        .p-delete-btn:hover { background: #d63031; transform: scale(1.1); }

        .p-table-wrap {
            width: 100%;
            overflow-x: auto; 
            background: rgba(255,255,255,0.4);
            border-radius: 10px;
            padding: 5px;
        }
        body.theme-dark .p-table-wrap { background: rgba(0,0,0,0.2); }
        
        .p-detail-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.8em;
            white-space: nowrap;
        }
        .p-detail-table th, .p-detail-table td {
            text-align: center;
            padding: 3px 5px;
            border: 1px solid rgba(0,0,0,0.1);
        }
        .p-detail-table th {
            background-color: var(--primary-color);
            color: white;
            font-weight: bold;
        }
        .p-detail-table td:first-child {
            background-color: rgba(255,255,255,0.7);
            font-weight: bold;
            color: var(--text-sub);
            position: sticky;
            left: 0;
        }
        body.theme-dark .p-detail-table td:first-child { background-color: #455a64; color: #eceff1; }
        
        .p-lower-section {
            display: flex; gap: 10px; flex-wrap: wrap; margin-top: 5px;
        }
        
        .p-hp-details-box {
            flex: 2; 
            background: linear-gradient(135deg, rgba(184, 233, 148, 0.3), rgba(123, 237, 159, 0.3));
            border-radius: 10px; padding: 5px; 
            border: 1px solid rgba(184, 233, 148, 0.8);
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2px;
        }
        .p-hp-item {
            text-align: center;
            background: rgba(255,255,255,0.4);
            border-radius: 5px;
            padding: 2px;
        }
        .p-hp-label { font-size: 0.65em; display: block; color: #218c74; font-weight: bold; opacity:0.8; }
        .p-hp-val { font-size: 0.9em; font-weight: 800; color: #218c74; }
        .p-hp-total {
            grid-column: 1 / -1; 
            background: rgba(33, 140, 116, 0.1);
            margin-top: 2px;
        }
        .p-hp-total .p-hp-val { font-size: 1.1em; color: #16a085; }

        /* ▼▼▼ グリッドで4列表示 ▼▼▼ */
        .p-res-box {
            flex: 2; 
            display: grid; /* Gridに変更 */
            grid-template-columns: repeat(4, 1fr); /* 4列固定 */
            gap: 3px; 
            background: rgba(255,255,255,0.3); 
            padding: 5px; 
            border-radius: 10px;
        }
        .p-res-item { 
            text-align: center; font-size: 0.75em;
            display: flex; flex-direction: column;
            /* 背景色を追加して見やすく */
            background: rgba(255,255,255,0.5); 
            border-radius: 4px;
            padding: 2px 0;
        }

        .p-res-label { font-size: 0.7em; opacity: 0.7; }
        .p-res-val { font-weight: bold; }
        .res-plus { color: blue; }
        .res-minus { color: red; }

/* ▼▼▼ OCRボタン配置調整用 (追加) ▼▼▼ */
.ocr-buttons-wrapper {
    display: flex;
    justify-content: center; /* PCでは横並び・中央寄せ */
    flex-wrap: wrap;
    gap: 10px; /* ボタン同士の間隔 */
    margin-bottom: 15px;
}

/* スマホ時の挙動 */
@media (max-width: 820px) {
    .ocr-buttons-wrapper {
        flex-direction: column; /* 縦並びにする */
        align-items: center;    /* 中央に揃える */
    }
    /* ボタン自体の調整 */
    .ocr-buttons-wrapper label {
        margin: 0 !important;    /* 元のmargin-leftを無効化 */
        width: 85% !important;   /* 幅を広げて押しやすく */
        max-width: 300px;
        display: flex !important;
        justify-content: center; /* 文字を中央に */
    }
}


/* ▼▼▼ OCRヘルプ用スタイル ▼▼▼ */
.ocr-help-details {
    margin-top: 15px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    border: 2px dashed var(--primary-color);
    overflow: hidden;
    text-align: left;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    transition: 0.3s;
}
.ocr-help-details[open] {
    background-color: rgba(255, 255, 255, 0.9);
    border-style: solid;
}
.ocr-help-summary {
    padding: 10px;
    cursor: pointer;
    font-weight: bold;
    color: var(--text-sub);
    text-align: center;
    list-style: none; /* 三角マーカーを消す */
    transition: 0.2s;
}
.ocr-help-summary:hover {
    background-color: rgba(255, 255, 255, 0.5);
    color: var(--accent-color);
}
.ocr-help-summary::-webkit-details-marker {
    display: none; /* Chrome等でマーカーを消す */
}
.ocr-help-content {
    padding: 15px;
    border-top: 1px dashed var(--primary-color);
    animation: fadeInUp 0.3s ease;
}
.step-box {
    margin-bottom: 20px;
    background: var(--component-bg);
    padding: 15px;
    border-radius: 10px;
}
.step-box:last-child { margin-bottom: 0; }
.step-title {
    font-weight: 800;
    color: var(--accent-color);
    margin: 0 0 5px 0;
    font-size: 1.1em;
}
.help-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 10px auto 0 auto;
    border: 2px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* ダークモード対応 */
body.theme-dark .ocr-help-details {
    background-color: rgba(0, 0, 0, 0.2);
    border-color: #546e7a;
}
body.theme-dark .ocr-help-details[open] {
    background-color: rgba(0, 0, 0, 0.4);
}
body.theme-dark .ocr-help-summary { color: #b0bec5; }
body.theme-dark .ocr-help-summary:hover { color: #fff; background-color: rgba(255,255,255,0.1); }

        @media (max-width: 820px) {
            /* ▼▼▼ 追加修正: 画面の余白を詰める ▼▼▼ */
            body { padding: 5px; } /* 余白を極小に */
            #app-container { padding: 10px 5px; border-width: 2px; } /* コンテナの余白も詰める */
            .party-card { padding: 10px 5px; } /* カード内の余白も詰める */
/* 名前入力欄のサイズを300pxに固定して戻す */
    .character-name-section input#character-name {
        width: 300px !important;
        margin: 0 auto;
        display: block;
    }

    /* ジャンプボタンのデザイン */
    .mobile-jump-btn {
        display: inline-block;
        margin-top: 10px;
        padding: 10px 20px;
        background: linear-gradient(135deg, var(--sub-color-2), #f39c12);
        color: var(--text-main);
        border: 2px solid #fff;
        border-radius: 50px;
        font-size: 0.9em;
        font-weight: 800;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        cursor: pointer;
    }
/* ★★★ ここから追記：使い方ボタン用の色設定 ★★★ */
    .mobile-jump-btn.usage-btn {
        background: linear-gradient(135deg, var(--sub-color-3), #27ae60);
    }
    /* ★★★ 追記ここまで ★★★ */


    /* ★★★ 追記ここまで ★★★ */



            h1 { font-size: 1.4em; margin-bottom: 20px; line-height: 1.5; white-space: nowrap; }
			
			.mobile-jump-btn {
                display: inline-block;
                margin-top: 10px;
                padding: 8px 15px;
                background: linear-gradient(135deg, var(--sub-color-2), #f39c12);
                color: var(--text-main);
                border: 2px solid #fff;
                border-radius: 50px;
                font-size: 0.85em;
                font-weight: 800;
                box-shadow: 0 4px 8px rgba(0,0,0,0.1);
                cursor: pointer;
            }
            .mobile-jump-btn:active {
                transform: scale(0.95);
            }
			
			
            .title-break { display: block; content: ""; margin-top: 5px; }
            h1::before, h1::after { font-size: 0.8em; }
            h2 { font-size: 1.1em; }
            #main-content-wrapper { flex-direction: column; gap: 20px; }
            #rankings-wrapper { flex-direction: column; } 
            #input-result-panel, #rankings-wrapper { min-width: 100%; width: 100%; }
            #rankings-wrapper { flex-direction: column; align-items: stretch; }
            .character-name-section input { width: 100%; box-sizing: border-box; }
            .action-button { flex-basis: 45%; font-size: 0.85em; padding: 10px; }
 /* ▼▼▼ 書き換えここから（710行目付近） ▼▼▼ */
            .result-area { 
                /* 縦並び(column)を横並び(row)に戻してコンパクト化 */
                flex-direction: row; 
                flex-wrap: wrap; 
                gap: 5px; 
                text-align: center; 
                
                /* スマホ用固定位置調整 */
                top: 0;
                padding: 5px;
                margin-left: -5px;
                margin-right: -5px;
            }
            .result-box { 
                /* 3つの箱を均等に並べる */
                flex: 1 1 30%;
                align-items: center !important; 
                justify-content: center !important; 
                text-align: center !important; 
                padding: 4px !important; /* 余白を詰める */
                min-width: auto;
            }
            .result-box span, .result-box label { 
                text-align: center; 
                display: block; 
                width: 100%; 
                font-size: 0.7em !important; /* 文字を小さく */
                margin-bottom: 0 !important;
            }
            .total-cp-box { padding: 5px; } /* 余白調整 */
            
            #grand-total-label { font-size: 1.4em; } /* 数字のサイズ調整 */
            #final-hp-label, #resistance-sum-label { font-size: 1.2em; }
            /* ▲▲▲ 書き換えここまで ▲▲▲ */
            .result-box { align-items: center !important; justify-content: center !important; text-align: center !important; }
            .result-box span, .result-box label { text-align: center; display: block; width: 100%; }
            .total-cp-box { padding: 15px; }
            #grand-total-label { font-size: 2.2em; }
            .bulk-input-item { flex-direction: column; align-items: stretch; gap: 8px; }
            .bulk-input-item label { text-align: left; }
            .bulk-input-item button { margin-top: 5px; padding: 10px; }
            .compact-grid-section-wrapper { width: 100%; }
            #hp-inputs-area { grid-template-columns: 1fr; }
            
            /* ▼▼▼ 耐性入力欄（2列4行）のはみ出し防止カスタム ▼▼▼ */
            #resistance-inputs-area { 
                grid-template-columns: 1fr 1fr; /* 強制2列 */
                gap: 2px; /* 列の間隔を狭く */
            }
            
            /* セルの余白を限界まで削る */
            #resistance-inputs-area .compact-cell {
                padding: 0 2px; 
                gap: 2px;
            }

            /* ラベル（斬、打など）の幅固定を解除して縮める */
            #resistance-inputs-area .compact-cell label {
                width: auto;       /* 幅を自動に */
                min-width: 20px;   /* 最低限の幅 */
                margin-right: 0;
                font-size: 0.8em;  /* 文字を小さく */
                text-align: center;
            }

            /* 入力欄の幅固定を解除して、残りスペースに合わせる */
            #resistance-inputs-area .compact-cell .stepper-wrapper {
                width: auto !important; /* 80px固定を無効化 */
                flex: 1;                /* 残り幅いっぱいまで伸ばす */
            }
            
            /* それ以外のステッパー（HPなど）は80pxのままにする */
            .compact-cell .stepper-wrapper:not(#resistance-inputs-area *) { 
                width: 80px; 
            }


            .saved-item-rank { text-align: left; margin-bottom: 5px; }
            .saved-item-actions { flex-direction: column; justify-content: center; margin-top: 0; gap: 5px; width: auto; }
            .saved-item-actions button { width: 100%; padding: 5px !important; }
            .manual-cp-fields { flex-direction: column; align-items: stretch; }
            .manual-cp-fields button { margin: 5px 0 0 0; width: 100%; }
            .table-container { background: transparent; border: none; padding: 0; overflow-x: visible; }
            .stat-grid-container { display: flex; flex-wrap: wrap; gap: 10px; background: transparent; min-width: 0 !important; width: 100%; }
            .row-headers-col { display: none; }
            .stat-columns-wrapper { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; flex: none; }
            .stat-column { width: calc(50% - 5px); flex: none; background: rgba(255,255,255,0.8); border: 2px solid var(--dot-color); border-radius: 15px; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.05); }
            body.theme-dark .stat-column { background-color: rgba(55, 71, 79, 0.8); border-color: #546e7a; }
            .stat-header-cell { background: var(--primary-color); font-size: 1.1em; }
            .stat-input-cell { justify-content: space-between; padding: 0 10px; border-bottom: 1px solid #f0f0f0; height: 44px; background-color: transparent !important; }
            body.theme-dark .stat-input-cell { border-bottom-color: rgba(255,255,255,0.1); }
            .stat-input-cell:last-child { border-bottom: none; }
            .stat-input-cell input { width: 60%; text-align: right; border: 2px solid var(--input-border) !important; background-color: var(--input-bg) !important; border-radius: 4px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.05) !important; }
            .mobile-row-label { display: inline-block; font-size: 0.85em; font-weight: bold; color: var(--accent-color); width: 40px; }
            #custom-bg-layer { background-size: 100% auto; background-position: top center; background-repeat: repeat-y; }
            .party-card-container { grid-template-columns: 1fr; }

            /* ▼▼▼ タブ調整: 1行に収める ▼▼▼ */
            .tab-nav-container { gap: 2px; padding: 0 5px; }
            .tab-btn { padding: 10px 5px; font-size: 0.85em; white-space: nowrap; flex: 1; text-align: center; border-radius: 10px 10px 0 0; }

            /* ▼▼▼ 追加修正: テーブルの横スクロール撤廃・圧縮表示 ▼▼▼ */
            .p-table-wrap { overflow-x: visible; } /* スクロールなし */
            .p-detail-table { 
                font-size: 0.62em; /* 文字サイズを限界まで小さく */
                table-layout: fixed; /* 列幅を固定計算 */
                width: 100%;
            }
            .p-detail-table th, .p-detail-table td {
                padding: 2px 1px; /* セルの余白を極小に */
                overflow: hidden;
                text-overflow: clip;
            }
            .p-detail-table td:first-child { /* 行ヘッダー(素ステなど)の幅調整 */
                width: 32px; 
                white-space: normal; 
                line-height: 1;
                font-size: 0.9em; 
            }
        }
		
/* ▼▼▼ 追加・修正: 上部固定用ラッパーとスタイル上書き ▼▼▼ */
        
        /* 1. 結果とボタンをまとめる固定コンテナ */
        .sticky-header-group {
            position: sticky;
            top: 0;
            z-index: 900;
            /* 背景と枠線のデザイン */
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(5px);
            border-radius: 0 0 15px 15px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
            padding-bottom: 10px;
            
            /* 中央寄せ設定 */
            max-width: 900px;
            width: 100%;
            margin: 0 auto 20px auto;
            transition: all 0.3s ease;
        }

        /* ダークモード対応 */
        body.theme-dark .sticky-header-group {
            background: rgba(33, 33, 33, 0.98);
            border: 1px solid #455a64;
            border-top: none;
            box-shadow: 0 4px 10px rgba(0,0,0,0.5);
        }

        /* 2. 既存の result-area の固定を解除（ラッパーに任せるため） */
        .result-area {
            position: static !important; /* 固定解除 */
            background: transparent !important; /* 背景透明化 */
            box-shadow: none !important; /* 影削除 */
            border: none !important;
            margin-bottom: 5px !important;
            padding-bottom: 0 !important;
        }

        /* 3. ボタンエリアの調整 */
        .controls-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 0 20px; /* 横幅の余白 */
        }
		
		
		/* ボタンを少し小さくして圧迫感を減らす */
            .action-button, .toggle-label {
                font-size: 0.8em !important; 
                padding: 8px 10px !important;
            }
            .stone-toggle-wrapper {
                padding: 5px 15px !important;
                margin-bottom: 5px !important;
            }
        
		
		/* ▼▼▼ 追加: ドラッグ＆ドロップ用スタイル ▼▼▼ */
.party-card {
    cursor: grab; /* 掴めるアイコン */
    touch-action: pan-y; /* スマホでのスクロール誤爆防止 */
}
.party-card:active {
    cursor: grabbing; /* 掴んでいる最中のアイコン */
}
/* 移動先のプレビュー（半透明になる場所） */
.sortable-ghost {
    opacity: 0.4;
    background-color: var(--sub-color-2);
    border: 2px dashed var(--accent-color);
}
/* 掴んでいる要素自体 */
.sortable-drag {
    opacity: 0.9;
    transform: scale(1.02);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
    z-index: 999;
}
		
		/* ▼▼▼ 追加: パーティカード内・装備リスト用スタイル ▼▼▼ */
/* ▼▼▼ 追加: パーティカード内・装備リスト用スタイル (文字サイズ調整版) ▼▼▼ */
.p-equip-box {
    margin-top: 8px; /* 上の間隔を少し広げる */
    background: rgba(255, 250, 240, 0.85); /* 背景を少し濃くして文字を見やすく */
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    padding: 6px 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 10px; /* 横の間隔を少し広げる */
}
body.theme-dark .p-equip-box {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.p-eq-item {
    font-size: 0.9em; /* ★サイズアップ (0.75em -> 0.9em) */
    display: flex;
    align-items: center;
    overflow: hidden;
    min-width: 0;
    line-height: 1.4; /* 行間を少し確保 */
}

.p-eq-icon {
    margin-right: 5px;
    font-size: 1.0em; /* アイコンもバランスを見て調整 */
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1)); /* アイコンを少し浮き出させる */
    flex-shrink: 0;
}

.p-eq-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-main);
    font-weight: 800; /* ★太字を強調 */
    letter-spacing: 0.02em; /* 文字間隔を少し空けて読みやすく */
}
body.theme-dark .p-eq-name { color: #eceff1; }

/* スマホ表示時の微調整 */
@media (max-width: 820px) {
    .p-equip-box {
        grid-template-columns: 1fr;
        gap: 3px;
        padding: 5px 8px;
    }
    .p-eq-item {
        font-size: 0.85em; /* スマホでは少しだけ抑えるが、以前よりは大きく */
    }
}
		
		/* ▼▼▼ 追加: パーティ選択モーダル用CSS ▼▼▼ */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    z-index: 9999;
    display: none; /* 最初は隠しておく */
    align-items: center; justify-content: center;
}
.modal-window {
    background: #fff;
    width: 90%; max-width: 450px;
    max-height: 80vh; /* 画面の8割の高さ */
    border-radius: 20px;
    border: 4px solid #ff8fa3; /* ピンクの枠線 */
    display: flex; flex-direction: column;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    overflow: hidden;
}
.modal-header {
    background: #ff8fa3; color: white;
    padding: 15px; text-align: center; font-weight: bold;
    font-size: 1.1em;
}
.modal-list {
    flex: 1; overflow-y: auto; padding: 10px;
    background: #fff0f5;
}
.select-char-item {
    background: white;
    border: 1px solid #ffdee9;
    border-radius: 10px;
    padding: 10px; margin-bottom: 8px;
    display: flex; align-items: center;
    cursor: pointer; transition: 0.2s;
}
.select-char-item:hover { transform: scale(1.02); border-color: #ff4d6d; }
.select-char-icon { width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; object-fit: cover; border: 1px solid #ddd; }
.select-char-info { flex: 1; }
.select-char-name { font-weight: bold; font-size: 0.9em; display: block; }
.select-char-cp { font-size: 0.8em; color: #ff4d6d; font-weight: 800; }
.modal-close-btn {
    background: #5d4037; color: white; border: none;
    padding: 15px; cursor: pointer; font-weight: bold;
}
	/* ▼▼▼ 追加: キャラ選択画面の名前を見やすくする修正 ▼▼▼ */
.select-char-name {
    font-size: 1.15em !important; /* 文字をひと回り大きく */
    font-weight: 900 !important;  /* 極太文字にする */
    color: #2d3436 !important;    /* 濃いグレー（ほぼ黒）にして読みやすく */
    margin-bottom: 4px;           /* 下に少し隙間を作る */
}

/* CPの文字もバランスをとって調整 */
.select-char-cp {
    font-size: 1.0em !important;
    font-weight: bold;
}

/* 行全体を見やすく */
.select-char-item {
    border-bottom: 2px solid #eee; /* 区切り線を少し強調 */
    padding: 12px 10px !important; /* 指で押しやすいように広げる */
}	
		
		
		
		/* ▼▼▼ 片手操作モード (Thumb Pad) 用スタイル ▼▼▼ */
.thumb-pad-wrapper {
    position: fixed;
    bottom: 100px; /* 90pxだと指で隠れることがあるので少し上げます */
    right: 20px;
    width: 60px; height: 60px;
    z-index: 99999; /* ★ここを最強にする */
    transition: all 0.3s ease;
    /* 念のためポインターイベントを強制許可 */
    pointer-events: auto; 
}
/* 左手モード用クラス */
.thumb-pad-wrapper.left-handed {
    right: auto;
    left: 20px;
}

/* メイントリガーボタン */
.thumb-trigger-btn {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
    color: white;
    font-size: 1.8em;
    border: 3px solid #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    cursor: pointer;
    position: absolute;
    bottom: 0; right: 0;
    z-index: 2002;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.thumb-pad-wrapper.active .thumb-trigger-btn {
    transform: rotate(45deg); /* 開いたときにバツ印っぽく回転 */
    background: #5d4037;
}

/* 扇状に広がる子ボタン */
.thumb-action-btn {
    width: 50px; height: 50px;
    border-radius: 50%;
    background: var(--component-bg);
    border: 2px solid var(--primary-color);
    color: var(--text-main);
    font-size: 1.4em;
    position: absolute;
    bottom: 5px; right: 5px; /* トリガーの後ろに隠しておく */
    z-index: 2001;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
}
/* 左手モード時の配置基準 */
.thumb-pad-wrapper.left-handed .thumb-trigger-btn { right: auto; left: 0; }
.thumb-pad-wrapper.left-handed .thumb-action-btn { right: auto; left: 5px; }

/* 展開時のアニメーション (右手用: 左上へ広がる) */
.thumb-pad-wrapper.active .item-1 { transform: translate(0, -80px); opacity: 1; pointer-events: auto; } /* 上 */
.thumb-pad-wrapper.active .item-2 { transform: translate(-55px, -60px); opacity: 1; pointer-events: auto; } /* 斜め上 */
.thumb-pad-wrapper.active .item-3 { transform: translate(-80px, 0); opacity: 1; pointer-events: auto; } /* 左 */
.thumb-pad-wrapper.active .item-4 { transform: translate(-20px, -145px); opacity: 1; pointer-events: auto; background: #fff; font-size: 0.8em; width:40px; height:40px;} /* おまけ(利き手切替) */

/* 展開時のアニメーション (左手用: 右上へ広がる) */
.thumb-pad-wrapper.left-handed.active .item-1 { transform: translate(0, -80px); }
.thumb-pad-wrapper.left-handed.active .item-2 { transform: translate(55px, -60px); }
.thumb-pad-wrapper.left-handed.active .item-3 { transform: translate(80px, 0); }
.thumb-pad-wrapper.left-handed.active .item-4 { transform: translate(20px, -145px); }

/* 石ボタンのON状態 */
.thumb-action-btn.stone-on {
    background: var(--sub-color-2);
    border-color: #f39c12;
    box-shadow: 0 0 10px #f39c12;
}
		/* ▼▼▼ ドラムロールピッカー用スタイル (追加) ▼▼▼ */
.drum-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 9999;
    display: none; opacity: 0; transition: opacity 0.3s;
    backdrop-filter: blur(2px);
}
.drum-modal-content {
    position: absolute; bottom: -100%; left: 0; width: 100%;
    background: var(--component-bg);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.2);
    transition: bottom 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex; flex-direction: column;
    height: 350px; /* ドラムの高さ */
    border-top: 4px solid var(--accent-color);
}
.drum-modal-overlay.active { display: block; opacity: 1; }
.drum-modal-overlay.active .drum-modal-content { bottom: 0; }

.drum-header {
display: flex; justify-content: space-between; align-items: center;
    padding: 0 20px; /* 上下のpaddingを0にしてheightで管理 */
    border-bottom: 1px solid rgba(0,0,0,0.1);
    background: rgba(255,255,255,0.8); border-radius: 20px 20px 0 0;
    
    /* ★追加: 高さを50pxに固定して計算を狂わせないようにする */
    height: 50px; 
    box-sizing: border-box;
}
.drum-title { font-weight: bold; color: var(--primary-color); font-size: 1.1em; }
.drum-close-btn { background: none; border: none; font-size: 1.5em; cursor: pointer; color: #aaa; }
.drum-confirm-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: white; border: none; padding: 8px 25px; border-radius: 20px;
    font-weight: bold; font-size: 1em; cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.drum-body {
    flex: 1; display: flex; justify-content: center; align-items: center;
    position: relative; overflow: hidden; gap: 5px;
    background: var(--bg-color); /* テーマ背景を適用 */
}
/* 選択範囲のハイライト帯 */
.drum-highlight-bar {
    position: absolute; top: 50%; left: 0; width: 100%; height: 50px;
    background: rgba(255, 77, 109, 0.1);
    border-top: 2px solid var(--accent-color);
    border-bottom: 2px solid var(--accent-color);
    transform: translateY(-50%); pointer-events: none; z-index: 10;
}

/* ▼▼▼ 変更後（コピーして置き換え） ▼▼▼ */
.drum-column {
    width: 70px; height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    
    /* ★修正: 125px に固定します (これが真ん中に来る魔法の数字です) */
    padding: 125px 0;
    
    position: relative; z-index: 20;
    text-align: center;
}
.drum-column::-webkit-scrollbar { display: none; } /* Chrome/Safari用 */

.drum-item {
    height: 50px; line-height: 50px;
    font-size: 1.8em; font-weight: 800; color: var(--text-sub);
    scroll-snap-align: center; /* 中央にスナップ */
    opacity: 0.4; transition: 0.2s;
}
.drum-item.selected { opacity: 1; color: var(--accent-color); transform: scale(1.2); }
		
/* ▼▼▼ 比較タブ用スタイル ▼▼▼ */
.compare-selector-area {
    display: flex; align-items: center; justify-content: center;
    gap: 15px; margin-bottom: 25px; background: rgba(255,255,255,0.5);
    padding: 15px; border-radius: 15px; border: 2px dashed var(--primary-color);
}
.compare-select-box { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.compare-dropdown {
    padding: 10px; border-radius: 10px; border: 2px solid var(--input-border);
    background: #fff; font-weight: bold; color: var(--text-main); font-size: 0.95em;
}
.compare-vs {
    font-size: 1.5em; font-weight: 900; color: var(--accent-color);
    font-style: italic; margin-top: 20px;
}
.badge-a, .badge-b {
    font-size: 0.8em; font-weight: bold; padding: 2px 8px; border-radius: 10px;
    color: white; width: fit-content;
}
.badge-a { background: #95a5a6; } /* グレー */
.badge-b { background: var(--accent-color); } /* ピンク/赤 */

/* 結果エリア */
.compare-main-result {
    background: linear-gradient(135deg, var(--component-bg), rgba(255,255,255,0.8));
    border: 2px solid var(--primary-color); border-radius: 15px;
    padding: 20px; text-align: center; margin-bottom: 20px;
    box-shadow: var(--shadow);
}
.cp-diff-display { margin-bottom: 15px; }
.diff-label { font-size: 0.9em; color: var(--text-sub); display: block; }
.diff-value { font-size: 2.5em; font-weight: 900; line-height: 1; }
.diff-plus { color: #e84393; text-shadow: 0 0 10px rgba(232, 67, 147, 0.3); } /* 上昇 */
.diff-minus { color: #2980b9; } /* 下降 */
.diff-even { color: #95a5a6; }

.cp-detail-row { display: flex; justify-content: center; align-items: center; gap: 20px; }
.cp-box-small { display: flex; flex-direction: column; }
.cp-label-small { font-size: 0.7em; color: #7f8c8d; }
.cp-num-small { font-size: 1.2em; font-weight: bold; color: var(--text-main); }
.arrow-icon { color: var(--primary-color); font-size: 1.2em; }

/* 比較テーブル */
.compare-table-wrapper { overflow-x: auto; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.compare-table { width: 100%; border-collapse: collapse; font-size: 0.9em; background: #fff; }
.compare-table th { background: var(--primary-color); color: white; padding: 8px; white-space: nowrap; }
.compare-table td { padding: 8px; border-bottom: 1px solid #f0f0f0; text-align: center; }
.compare-table tr:last-child td { border-bottom: none; }
.stat-name-col { font-weight: bold; color: var(--text-sub); background: #fafafa; }
.val-up { color: #e84393; font-weight: bold; background: rgba(232, 67, 147, 0.05); }
.val-down { color: #2980b9; font-weight: bold; background: rgba(41, 128, 185, 0.05); }

/* スマホ対応 */
@media (max-width: 820px) {
    .compare-selector-area { flex-direction: column; gap: 5px; }
    .compare-select-box { width: 100%; }
    .compare-vs { margin: 5px 0; transform: none; font-size: 1.2em; }
}
	
	/* ▼▼▼ PC版のみ：タブの高さ分だけ結果エリアを下げる ▼▼▼ */
        @media (min-width: 821px) {
    .mobile-date-row {
        height: 40px; /* スマホ(30px)より少し広く */
    }
    .mobile-cal-title {
        font-size: 1.5em; /* タイトルも少し大きく */
    }
}
	/* ダークモード時のプルダウン修正 */
body.theme-dark .compare-dropdown {
    background-color: rgba(0, 0, 0, 0.6); /* 背景を半透明の黒に */
    color: #fff;                          /* 文字を白に */
    border-color: #78909c;                /* 枠線をグレーに */
}
body.theme-dark .compare-dropdown option {
    background-color: #333;
    color: #fff;
}
/* ★★★ ここまで ★★★ */



/* ▼▼▼ ダークモード時の比較画面修正 ▼▼▼ */

/* 1. 総合戦闘力の表示枠を黒くする */
body.theme-dark .compare-main-result {
    background: rgba(0, 0, 0, 0.5); /* 暗い背景 */
    border-color: #455a64;
    color: #fff;
}
body.theme-dark .cp-label-small { color: #b0bec5; }
body.theme-dark .cp-num-small { color: #fff; }

/* 2. 比較テーブル（一覧）を黒くする */
body.theme-dark .compare-table {
    background-color: rgba(0, 0, 0, 0.3); /* 背景を透明度の高い黒に */
    color: #eceff1;                       /* 文字を明るいグレーに */
}

/* 3. テーブル内の項目名セルの色調整 */
body.theme-dark .stat-name-col {
    background-color: rgba(255, 255, 255, 0.05); /* ほんの少し明るく */
    color: #b0bec5;
}

/* 4. 罫線の色を馴染ませる */
body.theme-dark .compare-table td {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* 5. 上昇・下降の文字色を見やすくする（青だと暗くて見えないため） */
body.theme-dark .val-up { 
    color: #ff8fa3; /* 明るいピンク */
    background: rgba(255, 143, 163, 0.1); 
}
body.theme-dark .val-down { 
    color: #64b5f6; /* 明るい水色 */
    background: rgba(100, 181, 246, 0.1); 
}

/* ▼▼▼ 追加: 折り畳み機能用スタイル ▼▼▼ */
        .collapsible-header {
            cursor: pointer;
            user-select: none; /* ダブルクリックで選択されないように */
            transition: all 0.2s;
            position: relative;
            padding-left: 35px !important; /* アイコンのスペース確保 */
        }
        .collapsible-header:hover {
            filter: brightness(1.1); /* ホバー時に少し明るく */
            transform: scale(1.02);  /* 少し浮き上がる */
        }
        .toggle-icon {
            display: inline-block;
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%) rotate(0deg);
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            font-size: 0.8em;
            opacity: 0.8;
        }
        
        /* 閉じている時のスタイル */
        .is-collapsed .toggle-icon {
            transform: translateY(-50%) rotate(-90deg); /* 左に90度回す */
        }
        /* ▼▼▼ 修正: 折り畳みエリアのスタイル (スマホの縦長表示対応版) ▼▼▼ */
        .collapsible-content {
            overflow: hidden;
            transition: max-height 0.5s ease-out, opacity 0.3s ease-out; /* アニメーション調整 */
            opacity: 1;
            max-height: 8000px !important; /* ★ここを2000pxから大幅に増やしました */
        }
        .collapsible-content.closed {
            max-height: 0 !important;
            opacity: 0;
            margin: 0;
            padding: 0;
            border: none;
        }

    /* ▼▼▼ イベントカレンダー用スタイル ▼▼▼ */
.calendar-wrapper {
    background: #fff;
    border-radius: 15px;
    padding: 10px;
    border: 2px solid var(--primary-color);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
    overflow-x: auto; /* 横スクロール許可 */
    margin-bottom: 15px;
}
body.theme-dark .calendar-wrapper {
    background: rgba(0,0,0,0.2);
    border-color: #546e7a;
}

.gantt-container {
    display: grid;
    grid-template-columns: 180px repeat(14, 1fr); 
    gap: 1px;
    
    /* ★変更: 800px → 1200px に増やして、マス目を広く確保する */
    min-width: 1200px; 
}

/* ヘッダー（日付） */
.gantt-header {
    background: var(--primary-color);
    color: white;
    font-size: 0.8em;
    font-weight: bold;
    text-align: center;
    padding: 5px 0;
    border-radius: 4px;
}
.gantt-header.today {
    background: var(--accent-color);
    border: 2px solid #fff;
    transform: scale(1.05);
    z-index: 2;
}
.gantt-header.weekend {
    background: #ff7675; /* 土日は少し赤く */
}

/* 行（イベント名） */
.gantt-row-label {
    grid-column: 1;
    font-size: 0.8em;
    font-weight: bold;
    padding: 8px;
    display: flex;
    align-items: center;
    border-bottom: 1px dashed rgba(0,0,0,0.1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-main);
}
body.theme-dark .gantt-row-label { color: #eceff1; border-bottom-color: rgba(255,255,255,0.1); }

/* バー（期間） */
.gantt-bar-cell {
    position: relative;
    border-bottom: 1px dashed rgba(0,0,0,0.05);
}
.gantt-bar {
    height: 20px;
    border-radius: 10px;
    margin-top: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    position: relative;
    animation: slideIn 0.5s ease;
}

/* カテゴリ別の色 */
.gantt-bar.type-gacha { background: linear-gradient(to right, #ff9ff3, #f368e0); }
.gantt-bar.type-event { background: linear-gradient(to right, #54a0ff, #2e86de); }
.gantt-bar.type-camp  { background: linear-gradient(to right, #feca57, #ff9f43); }

/* 凡例 */
.event-legend { display: flex; justify-content: center; gap: 15px; font-size: 0.85em; color: var(--text-sub); }
.legend-item { display: flex; align-items: center; gap: 5px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.gacha { background: #f368e0; }
.dot.event { background: #2e86de; }
.dot.camp  { background: #ff9f43; }

/* ▼▼▼ イベント入力フォーム用スタイル (視認性向上版) ▼▼▼ */
.event-input-area {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    
    /* ★変更: 透け感をなくして「真っ白」にし、影をつけて浮き立たせる */
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
    
    padding: 15px;
    border-radius: 15px;
    margin-bottom: 20px;
    border: 2px solid var(--primary-color); /* 枠線も実線に変更してくっきり */
    align-items: center;
    justify-content: center;
}

/* 入力欄のデザイン */
.event-input-area input, .event-input-area select {
    padding: 8px 12px;
    border-radius: 8px;
    
    /* ★変更: 入力欄の枠をグレーにして境界をはっきりさせる */
    border: 1px solid #ccc; 
    
    /* ★変更: 背景を薄いグレーにして、入力エリアであることを明確に */
    background: #f9f9f9; 
    
    font-weight: bold;
    color: #333; /* 文字色を濃いグレーで固定 */
    font-size: 0.95em;
}

.event-input-area input:focus, .event-input-area select:focus {
    background: #fff;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
    outline: none;
}

/* ▼ ダークテーマ時の調整 (ここは元のまま見やすく) */
body.theme-dark .event-input-area {
    background: rgba(33, 33, 33, 0.95); /* ほぼ不透明な黒 */
    border-color: #546e7a;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

body.theme-dark .event-input-area input, 
body.theme-dark .event-input-area select {
    background: #263238; /* 濃いグレー */
    border-color: #455a64;
    color: #fff;
}

/* 削除ボタン (×印) */
.evt-delete-btn {
    background: #ff7675;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px; height: 24px; /* 少し大きく */
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    margin-left: 8px;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.evt-delete-btn:hover { background: #d63031; transform: scale(1.1); }

@media (max-width: 820px) {
    .event-input-area { flex-direction: column; align-items: stretch; gap: 15px; }
    .event-input-area input, .event-input-area select { width: 100%; height: 40px; }
    /* スマホでは追加ボタンを押しやすく大きく */
    .event-input-area .action-button { width: 100% !important; height: 45px !important; font-size: 1.1em; }
}/* ▼▼▼ スマホ版: 日付・時間フォームの幅調整 ▼▼▼ */
@media (max-width: 820px) {
    /* 親要素（開始・終了の行）のレイアウト調整 */
    #new-evt-start, #new-evt-end, 
    #new-evt-start-time, #new-evt-end-time {
        width: auto !important; /* インラインスタイルを強制解除 */
    }

    /* 日付入力欄：少し短く（比率 1.6） */
    #new-evt-start, #new-evt-end {
        flex: 1.6 !important; 
        min-width: 0; /* 縮小許可 */
    }

    /* 時間選択欄：長くする（比率 1.0） */
    #new-evt-start-time, #new-evt-end-time {
        flex: 1 !important; 
        min-width: 0;
    }
}
/* ▼▼▼ カレンダー吹き出し（ツールチップ） ▼▼▼ */
.calendar-tooltip {
    display: none;
    position: absolute;
    background: #fff;
    border: 2px solid var(--primary-color);
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 9999;
    font-size: 0.85em;
    color: var(--text-main);
    min-width: 200px;
    /* pointer-events: none;  ← この行を消すか、auto に書き換えます */
    pointer-events: auto;  /* ← これでボタンが押せるようになります */
}

/* ダークモード対応 */
body.theme-dark .calendar-tooltip {
    background: #37474f;
    border-color: #546e7a;
    color: #fff;
}

/* 吹き出しの下の「▼」矢印 */
.calendar-tooltip::after {
    content: '';
    position: absolute;
    bottom: -8px; /* 本体の下にはみ出させる */
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px 8px 0;
    border-style: solid;
    border-color: var(--primary-color) transparent transparent transparent;
}
body.theme-dark .calendar-tooltip::after {
    border-color: #546e7a transparent transparent transparent;
}

/* 吹き出しの中身のテキスト装飾 */
.tooltip-title {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
    font-size: 1.1em;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 3px;
}
.tooltip-time {
    display: block;
    line-height: 1.4;
}
/* ▼▼▼ スマホ版カレンダー（7マスカレンダー）用スタイル ▼▼▼ */

/* PCでカレンダーを表示する際のレイアウト調整 */
.mobile-calendar-container {
    width: 100%;
    /* PCで見やすくするために最大幅を制限して中央寄せ */
    max-width: 1000px; 
    margin: 0 auto;
    
    background: #fff;
    border-radius: 10px;
    padding-bottom: 10px;
}
body.theme-dark .mobile-calendar-container {
    background: transparent;
}

/* 年月タイトル */
.mobile-cal-title {
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    padding: 10px;
    color: var(--text-main);
}
body.theme-dark .mobile-cal-title { color: #fff; }

/* 1. 曜日ヘッダー (月火水...) を見やすく */
.mobile-week-header {
    background-color: rgba(0,0,0,0.03); /* 薄いグレーの背景 */
    border-bottom: 2px solid var(--primary-color); /* 下線を強調 */
    padding: 8px 0;
    margin-bottom: 0;
    font-size: 1.0em; /* 文字サイズアップ */
}

/* 週の行（日付行 + イベントエリア） */
.mobile-week-row {
    border-bottom: 1px solid rgba(0,0,0,0.15); /* 線を少し濃く */
    padding-bottom: 5px;
}

/* 日付の行 (7セル) */
.mobile-date-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    height: 30px; /* 日付エリアの高さ */
}

/* 2. 日付の数字 (1, 2, 3...) を大きく太く */
.mobile-date-cell {
    font-weight: bold;
    font-size: 1.1em; /* 日付を大きく */
    padding-top: 5px;
    height: 35px; /* マスの高さを確保 */
    
    /* 縦の区切り線を追加してグリッド感を出す */
    border-right: 1px dashed rgba(0,0,0,0.1); 
}

/* 日付数字 */
.date-num {
    display: inline-block;
    width: 24px; height: 24px;
    line-height: 24px;
    border-radius: 50%;
}
/* 3. 「今日」の日付を強力に目立たせる */
.date-num.today-circle {
    background: var(--accent-color);
    color: #fff !important; /* 文字は白 */
    width: 28px; height: 28px;
    line-height: 28px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* 影をつける */
    transform: scale(1.1); /* 少し大きく */
}
.date-num.holiday { 
    color: #e74c3c; 
    background-color: rgba(231, 76, 60, 0.1); /* 薄い赤背景 */
}
/* 土曜 */
.date-num.saturday { 
    color: #2980b9; 
    background-color: rgba(41, 128, 185, 0.1); /* 薄い青背景 */
}
.mobile-date-cell.other-month { opacity: 0.3; }

/* イベント表示エリア（週の下） */
.mobile-event-area {
    position: relative;
    width: 100%;
    /* 高さはJSで動的に指定 */
}

/* スマホ版のイベントバー */
.mobile-bar {
    position: absolute;
    height: 18px !important; /* 少し細く */
    line-height: 18px !important;
    font-size: 0.7em !important;
    border-radius: 4px !important;
    padding: 0 4px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 5;
    top: 0; /* JSで指定 */
}

/* ツールチップ内の削除ボタン */
.tooltip-del-btn {
    display: block;
    margin-top: 5px;
    background: #ff7675;
    color: white;
    border: none;
    border-radius: 4px;
    width: 100%;
    padding: 5px;
    cursor: pointer;
}

.mobile-date-cell:last-child {
    border-right: none;
}
/* --- ダークモード時の調整 --- */
body.theme-dark .mobile-week-header {
    background-color: rgba(255,255,255,0.1);
    color: #fff;
}
body.theme-dark .mobile-week-row {
    border-bottom-color: rgba(255,255,255,0.1);
}
body.theme-dark .mobile-date-cell {
    border-right-color: rgba(255,255,255,0.1);
}
/* =================================================================
   ▼▼▼ カレンダー表示 強制修正パッチ (ここから下をコピー) ▼▼▼
   ================================================================= */

/* 1. 曜日ヘッダー：強制的に7等分して画面いっぱいに広げる */
.mobile-week-header {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important; /* 確実に7分割 */
    width: 100% !important;
    text-align: center;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 5px;
    margin-bottom: 5px;
    background: transparent !important;
}

/* 曜日の文字を中央に配置 */
.mobile-week-header span {
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9em;
    width: auto !important; /* 幅固定を解除 */
}

/* 2. 日付の行：強制的に7等分 */
.mobile-date-row {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important; /* 確実に7分割 */
    width: 100% !important;
}

/* 3. 日付セル：中央配置 */
.mobile-date-cell {
    display: flex !important;
    align-items: center;      /* 上下中央 */
    justify-content: center;  /* 左右中央 */
    width: auto !important;   /* 幅固定を解除 */
    height: 40px;             /* 高さを確保 */
    border-right: 1px dashed rgba(0,0,0,0.1);
}
.mobile-date-cell:last-child {
    border-right: none;
}

/* 4. 「今日」の日付をくっきり見やすく変更 */
.date-num.today-circle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    
    /* 濃い赤背景に白文字でコントラストを最大化 */
    background: #e74c3c !important; 
    color: #ffffff !important;      
    
    font-weight: 900 !important;    /* 極太文字 */
    font-size: 1.1em !important;
    
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    
    box-shadow: 0 3px 6px rgba(0,0,0,0.3) !important;
    margin: 0 auto !important; /* 強制中央寄せ */
}

/* 5. カレンダー全体のレイアウト調整 */
.mobile-calendar-container {
    width: 100%;
    max-width: 1000px !important; /* PCで広がりすぎないように制限 */
    margin: 0 auto;
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
}

/* ダークモード対応 */
body.theme-dark .mobile-calendar-container {
    background: rgba(0,0,0,0.2);
}
/* =================================================================
   ▼▼▼ イベント入力フォーム 幅調整パッチ (ここから下をコピー) ▼▼▼
   ================================================================= */

/* 1. イベント名入力欄を短くする */
#new-evt-name {
    flex: 1.2 !important;        /* 元の「2」から減らして短く */
    min-width: 120px !important; /* 最低幅も少し小さく */
}

/* 2. 時間選択 (04:00, 12:00) を広げて文字切れを直す */
#new-evt-start-time, 
#new-evt-end-time {
    width: 100px !important;     /* 元の「70px」から拡大 */
    padding-left: 5px !important;
    padding-right: 20px !important; /* 矢印アイコンと被らないよう右余白確保 */
}

/* 3. 微調整: 日付選択欄も少しだけ余裕を持たせる */
#new-evt-start, 
#new-evt-end {
    min-width: 110px !important;
}
/* =================================================================
   ▼▼▼ カレンダー文字視認性向上パッチ (ここを追記) ▼▼▼
   ================================================================= */

/* 1. ガントチャート（PC/横長表示）のバー文字設定 */
.gantt-bar {
    /* 文字色を「真っ白」に固定 */
    color: #ffffff !important;
    
    /* 濃い影をつけて、背景がどんな色でも浮き上がらせる */
    text-shadow: 
        0 1px 2px rgba(0,0,0, 0.8),   /* 下方向への強い影 */
        0 0 2px rgba(0,0,0, 0.5)      /* 全方向への薄い縁取り */
        !important;
    
    /* 文字の太さと配置 */
    font-weight: 800 !important;      /* 極太 */
    font-size: 0.8em !important;      /* サイズ微調整 */
    display: flex !important;
    align-items: center;              /* 上下中央揃え */
    padding-left: 8px !important;     /* 左に少し余白 */
    
    /* はみ出し対策 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 2. スマホ版カレンダー（7マス表示）のバー文字設定 */
.mobile-bar {
    /* こちらも白文字＋濃い影で統一 */
    color: #ffffff !important;
    text-shadow: 
        0 1px 2px rgba(0,0,0, 0.9),   /* スマホは小さいのでより濃く */
        0 0 2px rgba(0,0,0, 0.8)      /* 輪郭をはっきり */
        !important;
        
    font-weight: 800 !important;
    font-size: 0.75em !important;     /* 少し小さめ */
    padding: 0 4px !important;
}

/* ダークモード時も白文字のまま維持（背景が暗くてもバー自体は明るい色なので） */
body.theme-dark .gantt-bar,
body.theme-dark .mobile-bar {
    color: #ffffff !important;
    text-shadow: 0 1px 3px #000000 !important; /* 黒背景ではより影を強く */
}
/* =================================================================
   ▼▼▼ 【最終完成版】8種ステータス ゆとりレイアウト (スクロールなし) ▼▼▼
   ================================================================= */

/* 1. スクロール設定 */
.table-container {
    overflow-x: visible !important;
    width: 100%;
}

/* 2. グリッドの列幅と隙間設定 */
#stat-grid {
    display: grid !important;
    /* 隙間(gap)を3pxに広げて「ゆとり」を出します。
       その分、合計列(1.4fr→1.2fr)などで調整して画面内に収めます。
    */
    grid-template-columns: 
        1.3em   /* 項目 */
        1.1fr   /* 素ステ */
        22px    /* 凸 */
        20px    /* ボナ */
        30px    /* 補正 */
        25px    /* 昇段 */
        30px    /* 昇能 */
        24px    /* 裏 (少し広げました) */
        55px   /* 合計 (ここを少し譲る) */
        !important;
    
    /* ★ここがポイント: 隙間を広げて背景を透かす */
    gap: 3px !important; 
    background-color: transparent !important; /* グリッド全体の背景は透明に */
    border: none !important; /* 全体の枠線を消す */
    margin-bottom: 20px;
    width: 100%;
    min-width: 0 !important; 
}

/* 3. 各セルのデザイン（タイル化） */
.grid-input-cell, 
.grid-header-cell, 
.grid-row-label,
.final-val {
    /* 角を丸くして独立させる */
    border-radius: 4px !important;
    overflow: hidden; /* はみ出し防止 */
}

/* 入力セルのスタイル */
.grid-input-cell {
    padding: 0 !important;
    height: 38px !important; /* 高さを少し増やしてゆとりを */
    background: #34495e !important; 
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1); /* わずかに影をつけて浮き出させる */
}

/* 4. 入力フォーム本体 */
#stat-grid input, 
#stat-grid select,
.grid-input {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    
    /* 枠線は控えめに */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-sizing: border-box !important;
    border-radius: 4px;

    text-align: center !important;
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    
    backdrop-filter: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    
    font-size: 0.9em !important; 
    font-weight: 800 !important;
    padding: 0 !important;
    letter-spacing: -0.05em !important;
    min-width: 0 !important; 
    outline: none !important;
    
    /* 数値の色 */
    color: #fff !important;
}

/* ボーナスのプルダウン色修正 */
#stat-grid select {
    color: #2ecc71 !important; /* 緑 */
    appearance: none;
    -webkit-appearance: none;
    text-indent: 0 !important;
}
#stat-grid select option {
    color: #333 !important;
    background: #fff !important;
}

/* フォーカス時 */
#stat-grid input:focus,
#stat-grid select:focus {
    border-color: #3498db !important;
    background-color: rgba(52, 152, 219, 0.2) !important;
}

/* 固定値（裏など） */
[data-var="hidden"], [data-var="stat_totsu"] {
    font-size: 0.75em !important;
    color: #bdc3c7 !important;
    opacity: 1 !important;
    border-color: transparent !important; /* 固定値は枠線を消してスッキリ */
}

/* 5. ヘッダーとラベルのデザイン */
.grid-header-cell {
    background: #2c3e50;
    color: #ecf0f1;
    font-size: 0.65em !important;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    white-space: nowrap;
    height: 24px; /* ヘッダーの高さ */
}

.grid-row-label {
    background: #2c3e50;
    color: #f1c40f; /* 金色 */
    font-weight: 900;
    font-size: 0.9em !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

/* 合計値セル */
.final-val {
    background: #233140 !important;
    justify-content: flex-end !important;
    padding-right: 6px !important;
    align-items: center !important;
    display: flex !important;
}
.final-val span {
    font-size: 1.0em !important;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.5px;
}

/* =================================================================
   ▼▼▼ PC版 (幅821px以上) 専用レイアウト調整 ▼▼▼
   ================================================================= */
@media (min-width: 821px) {
    /* グリッドの列幅をPCの広い画面に合わせて再定義 */
    #stat-grid {
        grid-template-columns: 
            3em     /* 項目名 (広め) */
            1.5fr     /* 素ステ */
            50px    /* 凸 */
            50px    /* ボナ */
            50px    /* 補正 */
            50px    /* 昇段 */
            60px    /* 昇能 */
            60px    /* 裏 */
            1.5fr   /* 合計 */
            !important;
        
        gap: 6px !important; /* タイルの隙間を広げて見やすく */
    }

    /* 入力欄の高さと文字サイズをPC向けに大きく */
    .grid-input-cell {
        height: 45px !important; /* クリックしやすい高さ */
    }

    .grid-input {
        font-size: 1rem !important; /* 文字サイズ標準 */
        letter-spacing: normal !important; /* 文字詰め解除 */
    }

    /* ヘッダー文字 */
    .grid-header-cell {
        font-size: 0.85rem !important;
        padding: 5px 0 !important;
    }
    
    /* 項目名（腕、体...） */
    .grid-row-label {
        font-size: 1rem !important;
    }
    
    /* プルダウン（ボナ） */
    .grid-select {
        font-size: 1rem !important;
    }
    
    /* 合計値 */
    .final-val {
        padding-right: 15px !important; /* 右端の余白 */
    }
    .final-val span {
        font-size: 0.8rem !important; /* 合計は見やすく大きく */
        letter-spacing: normal !important;
    }
}
/* ▼▼▼ サムパッドの文字付きボタン用スタイル ▼▼▼ */
/* トリガーボタン（👍）は縦並びにしない（回転するため） */
/* ▼▼▼ 利用規約モーダル用スタイル ▼▼▼ */
.terms-modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  z-index: 99999;
  align-items: center; justify-content: center;
}

.terms-modal-content {
  background: var(--bg-color);
  width: 90%; max-width: 500px;
  max-height: 80vh;
  border-radius: 20px;
  border: 4px solid var(--primary-color);
  padding: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  overflow-y: auto;
  position: relative;
}
body.theme-dark .terms-modal-content {
  background: rgba(33, 33, 33, 0.95);
  border-color: #546e7a;
}

.terms-modal-content .close-btn {
  position: absolute;
  top: 10px; right: 15px;
  color: var(--text-sub);
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
}
.terms-modal-content .close-btn:hover { color: var(--accent-color); }