/* === テーマ変数（雨夜之月） === */
        :root {
            --bg-base: #09090c;
            --bg-card: #0e0e12;
            --bg-elevated: #121216;
            --bg-hover: #1a1a1e;
            --bg-panel: #0a0b0f;
            --bg-input: #09090c;
            --text-primary: #f0f1f5;
            --text-body: #e2e4ec;
            --text-secondary: #a8acbe;
            --text-muted: #787c90;
            --border-base: #1c1c24;
            --border-light: #24242e;
            --border-hover: #2e2e38;
            --accent: #2563eb;
            --accent-hover: #1d4ed8;
            --danger: #dc2626;
            --danger-hover: #b91c1c;
            --success: #16a34a;
            --success-hover: #15803d;
            --bordeaux: #800020;
            --bordeaux-border: #3a1525;
            --bordeaux-text: #a06878;
            --bordeaux-bg: #1a0810;
            --scrollbar-track: #09090c;
            --scrollbar-thumb: #24242e;

            /* レアリティカラー（ゲーム固有・変更不可） */
            --rarity-lr: #a8d8ea;
            --rarity-ur: #ff6b6b;
            --rarity-ssr: #ffd93d;
            --rarity-sr: #a29bfe;
            --rarity-r: #74b9ff;
            --rarity-n: #b2bec3;
            --rank-color: #c9a84c;

            /* UI状態カラー */
            --border-dim: #3a3a3a;
            --gold: #d4af37;
            --gold-bright: #ffd700;
            --attendant: #6495ed;

            /* ステータスカラー（ゲーム固有） */
            --stat-attack: #e67e22;
            --stat-politics: #9b59b6;
            --stat-charm: #1abc9c;
            --faction-yuan: #f39c12;

            /* フィルタチップカラー */
            --filter-weapon: #f5b7b1;
            --filter-armor: #fadbd8;
            --filter-artifact: #d7bde2;
            --filter-all: #f8c471;
            --filter-yuan: #f4d03f;
            --filter-wu: #ec7063;

            /* オーバーレイ・影 */
            --bg-overlay: rgba(4, 4, 6, 0.85);
            --bg-badge-dark: rgba(0, 0, 0, 0.6);
            --shadow-dropdown: rgba(0, 0, 0, 0.5);
        }

        [data-theme="light"] {
            --bg-base: #e8eaef;
            --bg-card: #f8f9fb;
            --bg-elevated: #dcdfe8;
            --bg-hover: #d0d3de;
            --bg-panel: #eceef2;
            --bg-input: #ffffff;
            --text-primary: #101320;
            --text-body: #1e2230;
            --text-secondary: #3a3f52;
            --text-muted: #606678;
            --border-base: #b0b6c8;
            --border-light: #c8cdd8;
            --border-hover: #9098b0;
            --accent: #2563eb;
            --accent-hover: #1d4ed8;
            --danger: #dc2626;
            --danger-hover: #b91c1c;
            --success: #16a34a;
            --success-hover: #15803d;
            --bordeaux: #800020;
            --bordeaux-border: #a06070;
            --bordeaux-text: #6a0018;
            --bordeaux-bg: #f0d8e0;
            --scrollbar-track: #d8dbe4;
            --scrollbar-thumb: #a0a8b8;

            /* UI状態カラー（ライト） */
            --border-dim: #b8bcc8;
            --gold: #8a6d08;
            --gold-bright: #a88510;
            --attendant: #3a6eb8;

            /* ステータスカラー（ライト） */
            --stat-attack: #b85210;
            --stat-politics: #5e3680;
            --stat-charm: #0e7a62;
            --faction-yuan: #b86e08;

            /* フィルタチップカラー（ライト） */
            --filter-weapon: #d07068;
            --filter-armor: #d09088;
            --filter-artifact: #9878b0;
            --filter-all: #c08028;
            --filter-yuan: #a88018;
            --filter-wu: #b03828;

            /* レアリティカラー（ライト・白背景用に濃い色） */
            --rarity-lr: #4a9ab8;
            --rarity-ssr: #c9a010;
            --rarity-sr: #7068d8;
            --rarity-r: #3a8ad8;
            --rarity-n: #707880;
            --rank-color: #8a6d08;

            /* オーバーレイ・影（ライト） */
            --bg-overlay: rgba(0, 0, 0, 0.5);
            --bg-badge-dark: rgba(0, 0, 0, 0.4);
            --shadow-dropdown: rgba(0, 0, 0, 0.15);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans JP', sans-serif;
            background: var(--bg-base);
            color: var(--text-body);
            min-height: 100vh;
            overflow-x: auto;
            min-width: 1200px;
            transition: background 0.3s, color 0.3s;
        }
        
        .app-container { 
            display: flex; 
            flex-direction: column; 
            min-height: 100vh;
            min-width: 1200px;
        }
        
        .app-header {
            background: var(--bg-card);
            padding: 15px 30px;
            border-bottom: 2px solid var(--bordeaux);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .app-title {
            font-size: 24px;
            font-weight: 700;
            color: var(--text-primary);
            text-align: center;
        }
        
        /* テーマ切り替えボタン */
        .theme-toggle {
            padding: 8px 16px;
            background: var(--bg-elevated);
            border: 1px solid var(--border-light);
            color: var(--text-muted);
            cursor: pointer;
            font-size: 12px;
            font-weight: 700;
            transition: all 0.2s;
            margin-left: auto;
        }

        .theme-toggle:hover {
            border-color: var(--border-hover);
            background: var(--bg-hover);
        }
        
        .tab-navigation {
            display: flex;
            gap: 8px;
            padding: 12px 30px;
            background: var(--bg-card);
            border-bottom: 1px solid var(--border-base);
            align-items: center;
        }
        
        .reset-menu-wrapper {
            margin-left: 20px;
            position: relative;
        }
        
        .reset-button {
            padding: 10px 20px;
            background: var(--danger);
            border: 1px solid var(--danger-hover);
            color: #fff;
            cursor: pointer;
            font-size: 13px;
            font-weight: 700;
            transition: all 0.2s;
        }
        
        .reset-button:hover {
            background: var(--danger-hover);
            border-color: var(--danger-hover);
        }
        
        .reset-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 4px;
            background: var(--bg-elevated);
            border: 1px solid var(--border-light);
            min-width: 250px;
            z-index: 1000;
            box-shadow: 0 4px 12px var(--shadow-dropdown);
        }
        
        .reset-dropdown-item {
            padding: 12px 16px;
            border-bottom: 1px solid var(--border-base);
            cursor: pointer;
            color: var(--text-body);
            font-size: 12px;
            transition: all 0.2s;
            text-align: left;
            background: transparent;
            border-left: none;
            border-right: none;
            border-top: none;
            width: 100%;
        }
        
        .reset-dropdown-item:last-child {
            border-bottom: none;
        }
        
        .reset-dropdown-item:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }
        
        .reset-dropdown-item.danger {
            color: var(--danger);
        }
        
        .reset-dropdown-item.danger:hover {
            background: var(--danger);
            color: #fff;
        }
        
        .reset-dropdown-separator {
            height: 1px;
            background: var(--border-light);
            margin: 4px 0;
        }
        
        .tab-button {
            padding: 14px 28px;
            background: transparent;
            border: 1px solid var(--border-light);
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 15px;
            font-weight: 700;
            transition: all 0.2s;
            min-height: 48px;
        }
        
        .tab-button:hover { border-color: var(--accent); color: var(--accent); }
        .tab-button.active {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
            font-weight: 900;
        }
        
        .main-content {
            display: flex;
            gap: 0;
            flex: 1;
            min-height: 0;
            max-height: calc(100vh - 80px);
        }
        
        .formations-area {
            width: 1000px;
            flex-shrink: 0;
            background: var(--bg-base);
            overflow-y: auto;
            padding: 20px;
            border-right: 1px solid var(--border-base);
        }
        
        .formation-card {
            background: var(--bg-card);
            border: 1px solid var(--border-base);
            border-left: 3px solid var(--bordeaux);
            padding: 10px;
            margin-bottom: 10px;
        }
        
        .formation-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border-light);
        }
        
        .formation-number {
            font-size: 14px;
            font-weight: 900;
            color: var(--text-primary);
        }
        
        .formation-select {
            padding: 5px 10px;
            background: var(--bg-elevated);
            border: 1px solid var(--border-light);
            color: var(--text-body);
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
        }
        
        .template-slots { display: flex; flex-direction: column; gap: 5px; }
        
        .slot-row {
            display: grid;
            grid-template-columns: 60px 200px 70px 180px;
            gap: 6px;
            align-items: stretch;
        }
        
        .slot-label {
            font-size: 11px;
            font-weight: 700;
            color: var(--text-secondary);
            text-align: right;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
        
        .slot-drop-zone {
            min-height: 40px;
            background: var(--bg-base);
            border: 2px dashed var(--border-light);
            padding: 5px;
            transition: all 0.2s;
        }
        
        .slot-drop-zone.drag-over {
            background: rgba(37, 99, 235, 0.08);
            border-color: var(--accent);
            border-style: solid;
        }
        
        .slot-drop-zone.filled {
            background: var(--bg-elevated);
            border-style: solid;
            border-color: var(--border-hover);
            position: relative;
        }
        
        .slot-drop-zone.filled[data-affinity-group="董卓"] { border-left: 4px solid #7f8c8d; }
        .slot-drop-zone.filled[data-affinity-group="曹操"] { border-left: 4px solid #3498db; }
        .slot-drop-zone.filled[data-affinity-group="劉表"] { border-left: 4px solid #00d4ff; }
        
        .slot-drop-zone.filled[data-rarity="LR"] { 
            border: 2px solid var(--rarity-lr);
        }
        
        .slot-drop-zone.filled[data-rarity="UR"] { 
            border: 2px solid var(--rarity-ur);
        }
        
        .attendant-zone.filled[data-rarity="LR"] { 
            border: 2px solid var(--rarity-lr);
        }
        
        .attendant-zone.filled[data-rarity="UR"] { 
            border: 2px solid var(--rarity-ur);
        }
        
        .slot-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            width: 100%;
        }
        
        .slot-general-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
        .slot-general-details { font-size: 11px; color: var(--text-secondary); }
        
        .slot-remove {
            background: rgba(220, 38, 38, 0.15);
            border: none;
            color: var(--danger);
            padding: 4px 8px;
            font-size: 10px;
            cursor: pointer;
            font-weight: 700;
        }
        
        .slot-remove:hover { background: rgba(220, 38, 38, 0.3); }
        
        .mini-remove-btn {
            position: absolute;
            top: 1px;
            right: 1px;
            background: rgba(220, 38, 38, 0.8);
            border: none;
            color: white;
            font-size: 8px;
            padding: 1px 3px;
            cursor: pointer;
            line-height: 1;
            display: none;
        }
        
        .slot-content:hover .mini-remove-btn,
        .slot-general-info:hover .mini-remove-btn {
            display: block;
        }
        
        .slot-empty {
            text-align: center;
            color: var(--text-muted);
            font-size: 10px;
        }
        
        .attendant-zone {
            height: 60px;
            position: relative;
            background: var(--bg-base);
            border: 2px dashed var(--border-light);
            padding: 2px;
            font-size: 9px;
            text-align: center;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        
        .attendant-zone.filled {
            border: 2px solid var(--border-hover);
            background: var(--bg-elevated);
        }
        
        .advisor-drop-zone {
            transition: all 0.2s;
        }
        
        .advisor-drop-zone.drag-over {
            background: rgba(37, 99, 235, 0.15) !important;
            border-color: var(--accent) !important;
        }
        
        /* ─── クリック移動モード ─── */
        .selected-for-move {
            outline: 2px solid var(--bordeaux, #800020) !important;
            outline-offset: -2px;
            box-shadow: 0 0 8px rgba(128, 0, 32, 0.4) !important;
            animation: pulse-select 1.5s ease-in-out infinite;
        }
        
        @keyframes pulse-select {
            0%, 100% { box-shadow: 0 0 8px rgba(128, 0, 32, 0.4); }
            50% { box-shadow: 0 0 14px rgba(128, 0, 32, 0.7); }
        }
        
        .move-target:not(.selected-for-move) {
            cursor: pointer !important;
        }
        
        .move-target:not(.selected-for-move):hover {
            outline: 2px dashed var(--accent) !important;
            outline-offset: -2px;
        }
        
        .move-mode-bar {
            position: fixed;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 10px 24px;
            background: var(--bg-card, #0e0e12);
            border: 1px solid var(--bordeaux, #800020);
            border-radius: 8px;
            box-shadow: 0 4px 20px var(--shadow-dropdown);
            z-index: 9999;
            font-size: 13px;
            white-space: nowrap;
        }
        
        .move-mode-label {
            color: var(--text-primary, #f0f1f5);
            font-weight: bold;
        }
        
        .move-mode-hint {
            color: var(--text-muted, #606478);
            font-size: 12px;
        }
        
        .move-mode-cancel {
            padding: 4px 14px;
            background: var(--bg-danger, #dc2626);
            border: none;
            border-radius: 4px;
            color: white;
            cursor: pointer;
            font-size: 12px;
            font-weight: bold;
        }
        
        .move-mode-cancel:hover {
            background: var(--bg-danger-hover, #b91c1c);
        }
        
        .treasures-zone {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 3px;
        }
        
        .treasure-mini-slot {
            min-height: 35px;
            background: var(--bg-base);
            border: 1px dashed var(--border-light);
            padding: 2px;
            font-size: 10px;
            text-align: center;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            position: relative;
            cursor: pointer;
        }
        
        .treasure-mini-slot:hover {
            border-color: var(--accent);
        }
        
        .treasure-mini-ur-badge {
            position: absolute;
            top: 1px;
            left: 1px;
            background: var(--rarity-ur);
            color: #fff;
            font-size: 6px;
            font-weight: bold;
            padding: 0px 2px;
            border-radius: 2px;
            z-index: 5;
            pointer-events: none;
        }
        
        .treasure-remove-btn {
            position: absolute;
            top: 1px;
            right: 1px;
            background: rgba(220, 38, 38, 0.8);
            border: none;
            color: white;
            font-size: 8px;
            padding: 1px 3px;
            cursor: pointer;
            line-height: 1;
            display: none;
        }
        
        .treasure-mini-slot.filled:hover .treasure-remove-btn {
            display: block;
        }
        
        .treasure-name-mini {
            font-size: 10px;
            color: var(--text-primary);
            font-weight: 700;
            word-break: break-all;
            line-height: 1.2;
        }
        
        .treasure-mini-slot.filled {
            border-color: var(--border-hover);
            border-style: solid;
            background: var(--bg-elevated);
            color: var(--text-primary);
        }
        
        .generals-panel {
            flex: 1;
            min-width: 280px;
            max-width: 450px;
            background: var(--bg-panel);
            border-right: 1px solid var(--border-base);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .generals-panel.collapsed {
            flex: 0 0 60px;
            min-width: 60px;
        }
        
        .generals-panel.collapsed .generals-list {
            display: none;
        }
        
        .generals-panel.collapsed .filter-section {
            display: none;
        }
        
        .panel-header {
            padding: 8px 15px;
            background: var(--bg-card);
            border-bottom: 2px solid var(--bordeaux);
            flex-shrink: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px;
        }
        
        .collapsed .panel-header {
            padding: 10px;
        }
        
        .collapsed .panel-title {
            writing-mode: vertical-rl;
            text-orientation: mixed;
            margin: 0;
        }
        
        .panel-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 2px; }
        
        .panel-toggle {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 4px;
            padding: 6px;
            background: var(--bg-elevated);
            border-radius: 4px;
        }
        
        .panel-toggle input[type="checkbox"] { width: 14px; height: 14px; cursor: pointer; }
        .panel-toggle label { font-size: 11px; font-weight: 700; color: var(--text-secondary); cursor: pointer; }
        
        .filter-section { display: flex; flex-direction: column; gap: 8px; flex-basis: 100%; }
        .filter-group { display: flex; gap: 6px; flex-wrap: wrap; }
        
        .filter-chip {
            padding: 4px 10px;
            background: var(--bg-elevated);
            border: 1px solid var(--border-light);
            color: var(--text-secondary);
            font-size: 11px;
            cursor: pointer;
            transition: all 0.2s;
            font-weight: 700;
        }
        
        .filter-chip:hover { border-color: var(--accent); color: var(--accent); }
        .filter-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
        
        .search-box {
            width: 100%;
            padding: 8px 10px;
            background: var(--bg-input);
            border: 1px solid var(--border-light);
            color: var(--text-body);
            font-size: 11px;
        }
        
        .search-box:focus { outline: none; border-color: var(--accent); }
        
        .generals-list, .treasures-list { 
            flex: 1; 
            display: flex;
            flex-direction: column;
            overflow: hidden;
            padding: 0;
        }
        
        .generals-tabs {
            display: flex;
            gap: 4px;
            margin: 10px 10px 10px 10px;
            border-bottom: 1px solid var(--border-light);
            flex-shrink: 0;
        }
        
        .generals-content-wrapper {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            min-height: 0;
            padding: 0 10px 10px 10px;
        }
        
        .treasures-content-wrapper {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            min-height: 0;
            padding: 0 10px 10px 10px;
        }
        
        .generals-tab {
            padding: 6px 12px;
            background: transparent;
            border: none;
            border-bottom: 2px solid transparent;
            color: var(--text-secondary);
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .generals-tab:hover {
            color: var(--accent);
        }
        
        .generals-tab.active {
            color: var(--accent);
            border-bottom-color: var(--accent);
        }
        
        .general-item-wrapper {
            position: relative;
        }
        
        .general-move-btn {
            position: absolute;
            top: 2px;
            right: 2px;
            background: rgba(37, 99, 235, 0.15);
            border: none;
            color: var(--accent);
            font-size: 10px;
            padding: 2px 4px;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.2s;
            z-index: 10;
        }
        
        .general-item-wrapper:hover .general-move-btn {
            opacity: 1;
        }
        
        .general-move-btn:hover {
            background: rgba(37, 99, 235, 0.3);
        }
        
        .unit-type-section { margin-bottom: 12px; }
        
        .unit-type-title {
            font-size: 11px;
            font-weight: 900;
            color: var(--text-primary);
            margin-bottom: 6px;
            padding: 4px 6px;
            background: var(--bg-elevated);
            border-left: 3px solid var(--bordeaux);
        }
        
        .generals-grid-display {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 6px;
            width: 100%;
            max-width: 100%;
        }
        
        .general-item {
            padding: 4px;
            background: var(--bg-elevated);
            border: 1px solid var(--border-base);
            cursor: grab;
            transition: all 0.2s;
            font-size: 10px;
            position: relative;
            min-width: 0;
            overflow: hidden;
        }
        
        .general-star-rank {
            position: absolute;
            bottom: 2px;
            left: 2px;
            color: var(--rank-color);
            font-size: 9px;
            font-weight: bold;
            z-index: 5;
            pointer-events: none;
        }
        
        .treasure-forge-rank {
            position: absolute;
            bottom: 2px;
            left: 2px;
            color: var(--rank-color);
            font-size: 8px;
            font-weight: bold;
            z-index: 5;
            pointer-events: none;
        }
        
        .treasure-forge-rank.ur {
            color: var(--rarity-ur);
        }
        
        .general-item[data-rarity="LR"] {
            border: 2px solid var(--rarity-lr);
        }
        
        .general-item[data-rarity="LR"] .general-rarity {
            color: var(--rarity-lr);
        }
        
        .general-item[data-rarity="UR"] {
            border: 2px solid var(--rarity-ur);
        }
        
        .general-item[data-rarity="UR"] .general-rarity {
            color: var(--rarity-ur);
        }
        
        .general-item:active { cursor: grabbing; }
        .general-item:hover {
            background: var(--bg-hover);
            border-color: var(--border-hover);
            transform: translateY(-2px);
        }
        
        .general-item.used { 
            opacity: 0.35; 
            cursor: not-allowed; 
            background: var(--bg-base) !important;
            filter: grayscale(0.3);
        }
        .general-item.used:hover { 
            transform: none; 
            border-color: var(--border-base); 
            background: var(--bg-base) !important;
        }
        
        .general-name {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 2px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .general-info { font-size: 9px; color: var(--text-secondary); }
        
        .star-rank {
            display: inline-block;
            font-size: 9px;
            color: var(--rank-color);
            margin-left: 4px;
            cursor: pointer;
            user-select: none;
        }
        
        .star-rank:hover {
            color: var(--gold-bright);
        }
        
        .forge-rank {
            position: absolute;
            top: 2px;
            left: 2px;
            font-size: 9px;
            font-weight: bold;
            color: var(--rank-color);
            pointer-events: none;
            z-index: 5;
            background: var(--bg-badge-dark);
            padding: 1px 3px;
            border-radius: 2px;
        }
        
        .forge-rank.ur {
            color: var(--rarity-ur);
        }
        
        .treasure-forge-inline {
            font-size: 9px;
            font-weight: bold;
            color: var(--rank-color);
            background: var(--bg-badge-dark);
            padding: 1px 4px;
            border-radius: 2px;
        }
        
        .treasure-forge-inline.ur {
            color: var(--rarity-ur);
        }
        
        .general-rarity { color: var(--text-secondary); font-weight: 700; }
        
        .treasures-panel {
            flex: 1;
            min-width: 280px;
            max-width: 450px;
            background: var(--bg-panel);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: all 0.3s ease;
            border-left: 1px solid var(--border-base);
        }
        
        .treasures-panel.collapsed {
            flex: 0 0 60px;
            min-width: 60px;
        }
        
        .treasures-panel.collapsed .treasures-list {
            display: none;
        }
        
        .treasure-category { margin-bottom: 12px; }
        
        .treasures-tabs {
            display: flex;
            gap: 4px;
            margin: 10px 10px 10px 10px;
            border-bottom: 1px solid var(--border-light);
            flex-shrink: 0;
        }
        
        .treasures-tab {
            padding: 6px 12px;
            background: transparent;
            border: none;
            border-bottom: 2px solid transparent;
            color: var(--text-secondary);
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .treasures-tab:hover {
            color: var(--accent);
        }
        
        .treasures-tab.active {
            color: var(--accent);
            border-bottom-color: var(--accent);
        }
        
        .treasure-item-wrapper {
            position: relative;
            min-width: 0;
            overflow: hidden;
        }
        
        .treasure-move-btn {
            position: absolute;
            top: 2px;
            right: 2px;
            background: rgba(37, 99, 235, 0.15);
            border: none;
            color: var(--accent);
            font-size: 10px;
            padding: 2px 4px;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.2s;
            z-index: 10;
        }
        
        .treasure-item-wrapper:hover .treasure-move-btn {
            opacity: 1;
        }
        
        .treasure-move-btn:hover {
            background: rgba(37, 99, 235, 0.3);
        }
        
        .treasure-category-title {
            font-size: 11px;
            font-weight: 900;
            color: var(--text-primary);
            margin-bottom: 6px;
            padding: 4px 6px;
            background: var(--bg-elevated);
            border-left: 3px solid var(--bordeaux);
        }
        
        .treasures-grid-display {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 6px;
            width: 100%;
            max-width: 100%;
        }
        
        .treasure-item {
            padding: 4px;
            background: var(--bg-elevated);
            border: 1px solid var(--border-base);
            cursor: pointer;
            transition: all 0.2s;
            font-size: 10px;
            position: relative;
            min-height: 42px;
            min-width: 0;
            overflow: hidden;
        }
        
        .treasure-ur-badge {
            position: absolute;
            top: 2px;
            right: 2px;
            background: var(--rarity-ur);
            color: #fff;
            font-size: 8px;
            font-weight: bold;
            padding: 1px 4px;
            border-radius: 3px;
            z-index: 5;
            pointer-events: none;
        }
        
        .treasure-ur-toggle {
            position: absolute;
            bottom: 2px;
            right: 2px;
            background: rgba(100, 100, 100, 0.3);
            border: 1px solid var(--border-hover);
            color: var(--text-secondary);
            font-size: 8px;
            padding: 2px 4px;
            cursor: pointer;
            border-radius: 3px;
            opacity: 0;
            transition: opacity 0.2s;
            z-index: 10;
        }
        
        .treasure-ur-toggle.active {
            background: var(--rarity-ur);
            border-color: var(--rarity-ur);
            color: #fff;
        }
        
        .treasure-item-wrapper:hover .treasure-ur-toggle {
            opacity: 1;
        }
        
        .treasure-item:hover {
            background: var(--bg-hover);
            border-color: var(--border-hover);
            transform: translateY(-2px);
        }
        
        .treasure-item.used { opacity: 0.3; cursor: not-allowed; }
        .treasure-item.used:hover { transform: none; border-color: var(--border-base); }
        .treasure-name { 
            font-weight: 700; 
            color: var(--text-primary); 
            font-size: 10px; 
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .treasure-type { font-size: 8px; color: var(--text-secondary); margin-top: 2px; }
        
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: var(--scrollbar-track); }
        ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }
    
        .image-settings-button {
            padding: 8px 16px;
            background: var(--bg-elevated);
            border: 1px solid var(--border-light);
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 12px;
            font-weight: 700;
            transition: all 0.2s;
            margin-left: 12px;
        }
        
        .image-settings-button:hover {
            background: var(--bg-hover);
            border-color: var(--border-hover);
        }
        
        .image-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--bg-overlay);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
        }
        
        .image-modal-content {
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            padding: 30px;
            max-width: 900px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            border-radius: 8px;
        }
        
        .image-modal-title {
            font-size: 20px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 20px;
            text-align: center;
        }
        
        .image-url-input-group {
            margin-bottom: 20px;
        }
        
        .image-url-input-group label {
            display: block;
            font-size: 13px;
            font-weight: 700;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }
        
        .image-url-input-group textarea {
            width: 100%;
            min-height: 200px;
            padding: 12px;
            background: var(--bg-input);
            border: 1px solid var(--border-light);
            color: var(--text-body);
            font-size: 11px;
            font-family: 'Courier New', monospace;
            resize: vertical;
            line-height: 1.5;
        }
        
        .image-url-input-group textarea:focus {
            outline: none;
            border-color: var(--accent);
        }
        
        .image-url-help {
            font-size: 11px;
            color: var(--text-secondary);
            margin-top: 8px;
            line-height: 1.7;
            background: var(--bg-base);
            padding: 12px;
            border-left: 3px solid var(--bordeaux);
        }
        
        .image-url-help strong {
            color: var(--text-primary);
        }
        
        .image-modal-buttons {
            display: flex;
            gap: 12px;
            justify-content: center;
            margin-top: 20px;
        }
        
        .image-modal-button {
            padding: 10px 24px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            border: 1px solid;
            transition: all 0.2s;
            border-radius: 6px;
        }
        
        .image-modal-button-save {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
        }
        
        .image-modal-button-save:hover {
            background: var(--accent-hover);
            border-color: var(--accent-hover);
        }
        
        .image-modal-button-cancel {
            background: var(--bg-elevated);
            border-color: var(--border-light);
            color: var(--text-secondary);
        }
        
        .image-modal-button-cancel:hover {
            background: var(--bg-hover);
            border-color: var(--border-hover);
        }
        
        .general-item-with-image, .treasure-item-with-image {
            display: flex;
            flex-direction: row;
            gap: 6px;
            align-items: center;
        }
        
        .treasure-item-compact {
            display: flex;
            flex-direction: row;
            gap: 6px;
            align-items: center;
        }
        
        .treasure-item-compact .item-image {
            width: 40px;
            height: 40px;
        }
        
        .treasure-item-compact .item-image-placeholder {
            width: 40px;
            height: 40px;
        }
        
        .treasure-item-compact-no-image {
            display: flex;
            flex-direction: column;
        }
        
        .treasure-text-content {
            flex: 1;
            min-width: 0;
        }
        
        .general-item-with-image:empty + .item-text-content,
        .treasure-item-with-image:empty + .item-text-content {
            margin-top: 0;
        }
        
        .item-image {
            width: 100%;
            height: 40px;
            object-fit: cover;
            border-radius: 4px;
            flex-shrink: 0;
        }
        
        .general-item[data-rarity="LR"] .item-image {
            border: 2px solid var(--rarity-lr);
        }
        
        .general-item[data-rarity="UR"] .item-image {
            border: 2px solid var(--rarity-ur);
        }
        
        .treasure-item .item-image {
            border: 1px solid var(--border-light);
        }
        
        .item-image-placeholder {
            width: 100%;
            height: 40px;
            background: var(--bg-base);
            border: 1px dashed var(--border-light);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 8px;
            color: var(--text-muted);
            flex-shrink: 0;
            border-radius: 4px;
        }
        
        .item-text-content {
            flex: 1;
            min-width: 0;
            overflow: hidden;
        }
        
        .slot-content-with-image {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .slot-image {
            width: 28px;
            height: 28px;
            object-fit: cover;
            border-radius: 2px;
            flex-shrink: 0;
        }
        
        .slot-general-image {
            border: 1px solid var(--border-light);
        }
        
        .slot-treasure-image {
            border: 1px solid var(--border-light);
        }
        
        .slot-image-placeholder {
            width: 28px;
            height: 28px;
            background: var(--bg-base);
            border: 1px dashed var(--border-base);
            flex-shrink: 0;
            border-radius: 2px;
        }

        /* ========================================
           画像表示用スタイル
           ======================================== */
        
        /* 武将・名宝アイテムのアイコン画像 */
        .item-icon {
            width: 48px;
            height: 48px;
            object-fit: cover;
            border-radius: 4px;
            flex-shrink: 0;
            background: var(--bg-hover);
            border: 1px solid var(--border-light);
            opacity: 1 !important;
            pointer-events: none;
        }
        
        [data-theme="light"] .item-icon {
            background: #dcdfe8;
        }
        
        /* 画像がない場合のプレースホルダー */
        .item-icon-placeholder {
            width: 48px;
            height: 48px;
            background: var(--bg-base);
            border: 1px dashed var(--border-base);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            color: var(--text-muted);
            flex-shrink: 0;
            border-radius: 4px;
        }
        
        /* サイドバーリスト内のアイコンは32px */
        .general-item-with-image .item-icon {
            width: 32px;
            height: 32px;
        }
        .treasure-item-with-image .item-icon {
            width: 38px;
            height: 38px;
        }

        .general-item-with-image .item-icon-placeholder {
            width: 32px;
            height: 32px;
        }
        .treasure-item-with-image .item-icon-placeholder {
            width: 38px;
            height: 38px;
        }

        /* 武将アイテムに画像を追加 */
        .general-item-with-image {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        
        /* 名宝アイテムに画像を追加 */
        .treasure-item-with-image {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        
        /* レアリティ別の枠色 */
        .item-icon[data-rarity="LR"] {
            border-color: var(--rarity-lr);
            box-shadow: 0 0 8px rgba(168, 216, 234, 0.5);
        }
        
        .item-icon[data-rarity="UR"] {
            border-color: var(--rarity-ur);
            box-shadow: 0 0 8px rgba(255, 107, 107, 0.5);
        }
        
        .item-icon[data-rarity="SSR"] {
            border-color: var(--rarity-ssr);
            box-shadow: 0 0 8px rgba(255, 217, 61, 0.5);
        }
        
        .item-icon[data-rarity="SR"] {
            border-color: var(--rarity-sr);
            box-shadow: 0 0 8px rgba(162, 155, 254, 0.5);
        }
        
        .item-icon[data-rarity="R"] {
            border-color: var(--rarity-r);
        }
        
        .item-icon[data-rarity="N"] {
            border-color: var(--rarity-n);
        }
        
        /* 遅延読み込み中の表示 */
        .item-icon[loading] {
            opacity: 0.5;
        }
        
        /* === 保留パネル（右側配置）=== */
        /* 使いたい時はコメントを外してください */
        /*
        .pending-panel {
            flex: 0 1 450px;
            min-width: 280px;
            max-width: 450px;
            background: var(--bg-panel);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: all 0.3s ease;
            border-left: 1px solid var(--border-base);
        }
        
        .pending-panel.collapsed {
            flex: 0 0 60px;
            min-width: 60px;
        }
        
        .pending-panel.collapsed .pending-content {
            display: none;
        }
        */
/* ===========================
   戦闘パラメータパネル
   =========================== */
.combat-parameters-panel {
    width: 100%;
    margin-top: 10px;
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    border-radius: 8px;
}

.combat-params-header {
    display: none;
}

.combat-params-content {
    padding: 10px 16px;
}

/* ステータス3列 */
.stat-row-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 6px;
}

/* パラメータ3列 */
.combat-param-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 16px;
}

.param-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border-bottom: 1px solid var(--border-base);
    font-size: 14px;
}

.param-row:last-child {
    border-bottom: none;
}

.param-icon {
    display: none;
}

.param-label {
    flex-shrink: 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.param-value {
    font-size: 16px;
    font-weight: bold;
    color: var(--text-primary);
    min-width: 70px;
    text-align: right;
}

.param-value.active {
    color: var(--success);
}

.param-value.inactive {
    color: var(--text-muted);
}

/* 技能別内訳行 */
.param-detail-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0 2px 16px;
    font-size: 12px;
    border-bottom: 1px dotted var(--border-base);
}

.param-detail-row:last-child {
    border-bottom: none;
}

.no-data {
    text-align: center;
    color: var(--text-secondary);
    padding: 20px;
    font-size: 13px;
}

/* ─── 簡易モード ─── */
.formation-card.compact-mode {
    padding: 6px;
    margin-bottom: 4px;
}
.formation-card.compact-mode .formation-header {
    margin-bottom: 4px;
    padding-bottom: 4px;
}
.formation-card.compact-mode .template-slots {
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}
.formation-card.compact-mode .slot-row {
    gap: 3px;
    grid-template-columns: 50px 180px 55px minmax(150px, 1fr);
    overflow: hidden;
}
.formation-card.compact-mode .slot-drop-zone {
    min-height: 28px;
    padding: 2px 4px;
    min-width: 0;
    overflow: hidden;
}
.formation-card.compact-mode .slot-general-name {
    font-size: 12px;
}
.formation-card.compact-mode .slot-general-details {
    font-size: 9px;
}
.formation-card.compact-mode .attendant-zone {
    padding: 1px;
    min-width: 0;
    overflow: hidden;
}
.formation-card.compact-mode .treasures-zone {
    gap: 2px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
    overflow: hidden;
}
.formation-card.compact-mode .treasure-mini-slot {
    min-height: 20px;
    padding: 1px;
    font-size: 8px;
    min-width: 0;
    overflow: hidden;
}
.formation-card.compact-mode .treasure-name-mini {
    font-size: 6px;
}
.formation-card.compact-mode .item-image,
.formation-card.compact-mode .item-image-placeholder {
    width: 50px;
    height: 28px;
}
.formation-card.compact-mode .treasures-zone .item-image,
.formation-card.compact-mode .treasures-zone .item-image-placeholder {
    width: 50px;
    height: 28px;
}
.formation-card.compact-mode .advisor-section .item-image,
.formation-card.compact-mode .advisor-section .item-image-placeholder {
    width: 50px;
    height: 28px;
}
.formation-card.compact-mode .formation-grid .item-icon {
    width: 36px;
    height: 36px;
}

/* ============================================
   モーダル共通
   ============================================ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.modal-overlay--high {
    z-index: 2500;
    padding: 20px;
}

.modal-overlay--top {
    z-index: 3000;
    padding: 20px;
}

.modal-panel {
    background: var(--bg-card);
    border: 2px solid var(--border-light);
    border-radius: 8px;
    padding: 24px;
    min-width: 400px;
    max-width: 500px;
    color: var(--text-primary);
}

.modal-panel--accent {
    border-color: var(--accent);
    border-radius: 12px;
    padding: 32px;
    max-width: 600px;
    width: 90%;
    min-width: auto;
}

.modal-panel--help {
    padding: 20px;
    max-width: 600px;
    min-width: auto;
}

.modal-panel--large {
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    min-width: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.modal-header h2,
.modal-header h3 {
    margin: 0;
}

.modal-header--accent h2,
.modal-header--accent h3 {
    color: var(--accent);
}

.modal-close-btn {
    background: var(--danger);
    border: none;
    border-radius: 4px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 18px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.modal-close-btn--lg {
    font-size: 20px;
    width: 32px;
    height: 32px;
}

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.modal-actions--spread {
    margin-bottom: 20px;
    justify-content: stretch;
}

.modal-btn {
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    border: 1px solid var(--border-light);
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.modal-btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    font-weight: bold;
}

.modal-btn--success {
    background: var(--success);
    border-color: var(--success);
    font-weight: bold;
}

.modal-btn--danger-sm {
    padding: 4px 8px;
    background: var(--danger);
    border: none;
    border-radius: 3px;
    font-size: 11px;
}

.modal-btn--full {
    width: 100%;
    padding: 12px;
    border-radius: 6px;
}

.modal-btn--action {
    flex: 1;
    padding: 14px 20px;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: bold;
}

/* ============================================
   ヘルプモーダル
   ============================================ */
.help-content {
    line-height: 1.8;
    font-size: 14px;
}

.help-section {
    background: var(--bg-elevated);
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 12px;
}

.help-section:last-child {
    margin-bottom: 0;
}

.help-item {
    margin: 4px 0;
}

.help-item-title {
    margin: 4px 0;
    font-weight: bold;
    color: var(--text-primary);
}

.help-item-note {
    margin: 4px 0;
    font-size: 12px;
    color: var(--text-muted);
}

.help-item--warn {
    color: var(--rarity-ur);
}

.help-category {
    color: var(--success);
    border-bottom: 2px solid var(--success);
    padding-bottom: 8px;
}

.help-category--spaced {
    margin-top: 24px;
}

.help-subtitle {
    color: var(--text-primary);
    margin-top: 16px;
}

.help-indent {
    margin-left: 20px;
}

.help-body {
    line-height: 1.8;
}

.help-body p {
    margin: 4px 0;
}

.help-info-box {
    margin-bottom: 24px;
    color: var(--text-secondary);
    line-height: 1.8;
}

.help-instructions {
    background: var(--bg-base);
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.help-step-title {
    margin-bottom: 12px;
    font-weight: bold;
    color: var(--accent);
}

.help-step-title--spaced {
    margin-top: 16px;
}

.help-step-content {
    padding-left: 20px;
}

.help-version {
    margin-top: 24px;
    padding: 12px;
    background: var(--bg-elevated);
    border-radius: 4px;
    border-left: 3px solid var(--bordeaux);
}

.help-version p {
    margin: 0;
}

/* テンプレート呼び出しダイアログ */
.template-list {
    margin-bottom: 20px;
    max-height: 300px;
    overflow-y: auto;
}

.template-item {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.template-options {
    margin-bottom: 20px;
    padding: 12px;
    background: var(--bg-base);
    border-radius: 4px;
}

.template-option-row {
    margin-bottom: 8px;
}

.template-option-row:last-child {
    margin-bottom: 0;
}

.template-option-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    cursor: pointer;
}

/* GDrive同期情報 */
.sync-status {
    color: var(--success);
    font-size: 13px;
    margin-top: 12px;
}

/* ===================================================================
   プロファイルパネル（研究・調査・軍馬）
   =================================================================== */

/* --- パネルコンテナ --- */
.profile-panel {
    flex: 1;
    min-width: 280px;
    max-width: 400px;
    background: var(--bg-panel);
    border-left: 1px solid var(--border-base);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s ease;
}

.profile-panel.collapsed {
    flex: 0 0 60px;
    min-width: 60px;
}

.profile-panel.collapsed .profile-tab-bar,
.profile-panel.collapsed .profile-tab-content {
    display: none;
}

/* --- タブバー --- */
.profile-tab-bar {
    display: flex;
    gap: 4px;
    margin: 10px 10px 0 10px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.profile-tab-btn {
    padding: 6px 12px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.profile-tab-btn:hover {
    color: var(--accent);
}

.profile-tab-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* --- タブコンテンツ --- */
.profile-tab-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding: 10px;
}

/* --- 空状態 --- */
.profile-empty-state {
    text-align: center;
    color: var(--text-muted);
    padding: 30px 16px;
    font-size: 12px;
    line-height: 1.6;
}

/* ===================================================================
   研究タブ
   =================================================================== */

.research-tab {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* --- 専攻選択セクション --- */
.research-spec-section {
    background: var(--bg-card);
    border: 1px solid var(--border-base);
    border-left: 3px solid var(--bordeaux);
    padding: 10px;
}

.research-spec-label {
    font-size: 12px;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-light);
}

.research-spec-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border-base);
}

.research-spec-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.research-spec-cat {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    min-width: 65px;
    flex-shrink: 0;
}

.research-spec-options {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

/* カスタムラジオボタン */
.research-spec-radio {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 11px;
    color: var(--text-secondary);
    padding: 3px 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    transition: all 0.2s;
    user-select: none;
}

.research-spec-radio:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.research-spec-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border: 2px solid var(--border-hover);
    border-radius: 50%;
    background: var(--bg-base);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    position: relative;
}

.research-spec-radio input[type="radio"]:checked {
    border-color: var(--accent);
    background: var(--bg-base);
}

.research-spec-radio input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

.research-spec-radio input[type="radio"]:checked + span {
    color: var(--accent);
    font-weight: 700;
}

/* --- 一括操作 --- */
.research-bulk-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.research-bulk-btn {
    padding: 5px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.research-bulk-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--bg-hover);
}

.research-bulk-btn-danger {
    border-color: var(--danger);
    color: var(--danger);
}

.research-bulk-btn-danger:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

/* --- 分野グループ（アコーディオン） --- */
.research-field-group {
    background: var(--bg-card);
    border: 1px solid var(--border-base);
    transition: all 0.2s;
}

.research-field-group.inactive {
    opacity: 0.5;
}

.research-field-group.inactive:hover {
    opacity: 0.7;
}

.research-field-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    cursor: pointer;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-base);
    transition: background 0.2s;
    user-select: none;
}

.research-field-header:hover {
    background: var(--bg-hover);
}

.research-field-toggle {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
    width: 12px;
    text-align: center;
}

.research-field-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
}

.research-field-count {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.research-field-badge-inactive {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-base);
    border: 1px solid var(--border-light);
    padding: 1px 6px;
}

.research-field-badge-master {
    font-size: 9px;
    font-weight: 700;
    color: var(--bordeaux-text);
    background: var(--bordeaux-bg);
    border: 1px solid var(--bordeaux-border);
    padding: 1px 6px;
}

/* --- 研究項目リスト --- */
.research-field-items {
    padding: 4px 0;
}

.research-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-bottom: 1px solid var(--border-base);
    transition: background 0.15s;
    font-size: 11px;
}

.research-item:last-child {
    border-bottom: none;
}

.research-item:hover {
    background: var(--bg-hover);
}

.research-item.inactive {
    opacity: 0.5;
}

/* ロック/アンロックアイコンボタン */
.research-item-lock {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 0 2px;
    flex-shrink: 0;
    line-height: 1;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.research-item-lock.unlocked {
    opacity: 1;
}

.research-item-lock:hover:not(:disabled) {
    opacity: 0.8;
}

.research-item-lock:disabled {
    opacity: 0.2;
    cursor: not-allowed;
}

.research-item-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 0;
    flex-shrink: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.research-item-effect {
    font-size: 10px;
    color: var(--text-secondary);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 値入力フィールド */
.research-item-value {
    width: 48px;
    padding: 2px 4px;
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    color: var(--text-body);
    font-size: 11px;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.research-item-value:focus {
    outline: none;
    border-color: var(--accent);
}

.research-item-value:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: var(--bg-card);
}

.research-item-value::-webkit-inner-spin-button,
.research-item-value::-webkit-outer-spin-button {
    opacity: 0;
    width: 12px;
}

.research-item-value:hover::-webkit-inner-spin-button,
.research-item-value:hover::-webkit-outer-spin-button {
    opacity: 1;
}

.research-item-unit {
    font-size: 10px;
    color: var(--text-muted);
    flex-shrink: 0;
    width: 14px;
}

.research-item-badge-m {
    font-size: 9px;
    font-weight: 900;
    color: var(--bordeaux-text);
    background: var(--bordeaux-bg);
    border: 1px solid var(--bordeaux-border);
    padding: 0px 4px;
    flex-shrink: 0;
    line-height: 1.4;
}

/* ===================================================================
   調査タブ
   =================================================================== */

.investigation-tab {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.investigation-tribe {
    background: var(--bg-card);
    border: 1px solid var(--border-base);
}

.investigation-tribe-header {
    font-size: 12px;
    font-weight: 900;
    color: var(--text-primary);
    padding: 6px 10px;
    background: var(--bg-elevated);
    border-left: 3px solid var(--bordeaux);
    border-bottom: 1px solid var(--border-base);
}

.investigation-tribe-skills {
    padding: 4px 0;
}

.investigation-skill-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-bottom: 1px solid var(--border-base);
    transition: background 0.15s;
}

.investigation-skill-row:last-child {
    border-bottom: none;
}

.investigation-skill-row:hover {
    background: var(--bg-hover);
}

.investigation-skill-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 80px;
    flex-shrink: 0;
}

.investigation-skill-effect {
    font-size: 10px;
    color: var(--text-secondary);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.investigation-skill-level {
    padding: 3px 6px;
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    color: var(--text-body);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    min-width: 50px;
    transition: border-color 0.2s;
    flex-shrink: 0;
}

.investigation-skill-level:focus {
    outline: none;
    border-color: var(--accent);
}

.investigation-skill-level:hover {
    border-color: var(--border-hover);
}

.investigation-skill-value {
    font-size: 11px;
    font-weight: 700;
    color: var(--success);
    min-width: 55px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* ===================================================================
   軍馬タブ
   =================================================================== */

.horse-tab {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* --- 3頭カード横並び --- */
.horse-cards {
    display: flex;
    gap: 6px;
}

.horse-card {
    flex: 1;
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-base);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.horse-card-header {
    font-size: 12px;
    font-weight: 900;
    color: var(--text-primary);
    text-align: center;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--bordeaux);
}

/* --- 馬設定 --- */
.horse-config-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.horse-config-select {
    padding: 3px 4px;
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    color: var(--text-body);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s;
    min-width: 0;
}

.horse-config-select:focus {
    outline: none;
    border-color: var(--accent);
}

.horse-config-select:hover {
    border-color: var(--border-hover);
}

.horse-config-select-full {
    width: 100%;
}

.horse-config-select-sm {
    min-width: 44px;
    width: auto;
    flex-shrink: 0;
}

.horse-config-bonus {
    font-size: 10px;
    font-weight: 700;
    color: var(--success);
    padding: 2px 4px;
    background: rgba(22, 163, 74, 0.1);
    border: 1px solid rgba(22, 163, 74, 0.2);
    text-align: center;
}

.horse-config-star-label {
    font-size: 12px;
    color: var(--rank-color);
    flex-shrink: 0;
}

/* --- 名馬ステータス表示 --- */
.horse-meiba-stats {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    padding: 4px 6px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-left: 3px solid var(--bordeaux);
    font-size: 10px;
    font-weight: 700;
    color: var(--success);
}

.horse-meiba-skill {
    color: var(--bordeaux-text);
    padding: 1px 4px;
    background: var(--bordeaux-bg);
    border: 1px solid var(--bordeaux-border);
    font-size: 10px;
}

/* --- 技能スロット --- */
.horse-skills-section {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: auto;
}

.horse-skill-slot {
    display: flex;
    align-items: center;
    gap: 3px;
}

/* --- 合計サマリー --- */
.horse-summary {
    background: var(--bg-card);
    border: 1px solid var(--border-base);
    border-top: 2px solid var(--bordeaux);
    padding: 10px;
}

.horse-summary-header {
    font-size: 12px;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-light);
}

.horse-summary-stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--success);
}

.horse-summary-skills {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.horse-summary-skill {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-primary);
    padding: 2px 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
}

.horse-summary-note {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ============================================
   ライトモード追加オーバーライド
   ============================================ */

/* 編制カード枠線を強調 */
[data-theme="light"] .formation-card {
    border: 2px solid var(--border-base);
    border-left: 3px solid var(--bordeaux);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* 武将リスト・名宝リストのアイテム区切りを明確に */
[data-theme="light"] .general-item {
    border: 1px solid var(--border-base);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .general-item[data-rarity="LR"] {
    border: 2px solid var(--rarity-lr);
}

[data-theme="light"] .general-item[data-rarity="UR"] {
    border: 2px solid var(--rarity-ur);
}

[data-theme="light"] .treasure-item {
    border: 1px solid var(--border-base);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* モーダルボタンの白テキスト */
[data-theme="light"] .modal-btn--primary,
[data-theme="light"] .modal-btn--success,
[data-theme="light"] .modal-btn--danger-sm {
    color: #fff;
}

/* タブボタンのアクティブ状態 */
[data-theme="light"] .tab-button.active {
    color: #fff;
}

/* フィルターチップのアクティブ状態 */
[data-theme="light"] .filter-chip.active {
    color: #fff;
}