:root {
    /* ライトモード（デフォルト） */
    --bg-body: #f3f4f6; 
    --bg-panel: #ffffff; 
    --text-main: #374151;
    --text-muted: #6b7280;
    --accent-color: #3b82f6; 
    --border-color: #e5e7eb;
    --hover-bg: #f9fafb;
}

body.theme-dark {
    /* ダークモード */
    --bg-body: #111827; 
    --bg-panel: #1f2937; 
    --text-main: #f9fafb;
    --text-muted: #9ca3af;
    --accent-color: #60a5fa; 
    --border-color: #374151;
    --hover-bg: #374151;
}

body { 
    background-color: var(--bg-body); 
    color: var(--text-main); 
    font-family: 'Noto Sans JP', sans-serif; 
    overflow: hidden; 
    transition: background-color 0.3s, color 0.3s;
}

.bg-body { background-color: var(--bg-body); }
.bg-panel { background-color: var(--bg-panel); }
.text-main { color: var(--text-main); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent-color); }
.border-color { border-color: var(--border-color); }
.hover-bg:hover { background-color: var(--hover-bg); }

.radio-label { display: block; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 0.375rem; cursor: pointer; text-align: center; font-size: 0.875rem; transition: all 0.2s; background: var(--bg-panel); color: var(--text-main); }
input[type="radio"]:checked + .radio-label { background-color: var(--accent-color); color: white; border-color: var(--accent-color); }

.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--accent-color); }
input:checked + .slider:before { transform: translateX(20px); }

.color-picker { -webkit-appearance: none; border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; overflow: hidden; padding: 0; background-color: transparent; }
.color-picker::-webkit-color-swatch-wrapper { padding: 0; }
.color-picker::-webkit-color-swatch { border: 1px solid var(--border-color); border-radius: 50%; }

#viewport { width: 100%; height: 100%; overflow: hidden; position: relative; background: transparent; cursor: grab; }
#viewport:active { cursor: grabbing; }
#canvas-container { transform-origin: center center; transition: transform 0.1s ease-out; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
canvas { display: block; max-width: 100%; height: auto; image-rendering: auto; }

#drop-zone { border: 2px dashed var(--accent-color); background-color: transparent; transition: all 0.3s; }
#drop-zone.dragover { background-color: var(--hover-bg); }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

.history-item { cursor: pointer; transition: all 0.2s; border: 2px solid transparent; background-color: var(--bg-panel); }
.history-item:hover { border-color: var(--accent-color); transform: scale(1.02); }
.history-item.opacity-50 { filter: grayscale(50%); }

/* 💡 ロック状態のスタイル */
.locked-container { opacity: 0.5; pointer-events: none; filter: grayscale(50%); transition: all 0.3s; }

/* 💡 修正: #viewport を付与してCSSの詳細度（優先順位）を上げる */
#viewport.bg-pattern-transparent {
    background-color: transparent;
    background-image: none;
}

#viewport.bg-pattern-white {
    background-color: #ffffff;
    background-image: linear-gradient(45deg, #f3f4f6 25%, transparent 25%, transparent 75%, #f3f4f6 75%, #f3f4f6), linear-gradient(45deg, #f3f4f6 25%, transparent 25%, transparent 75%, #f3f4f6 75%, #f3f4f6);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

#viewport.bg-pattern-game {
    /* 青空と芝生の簡易表現 */
    background: linear-gradient(to bottom, #87ceeb 0%, #87ceeb 60%, #4ade80 60%, #4ade80 100%);
}

#viewport.bg-pattern-game::after {
    /* ノベルゲーム風テキストウィンドウ */
    content: '';
    position: absolute;
    bottom: 5%; left: 5%; right: 5%; height: 20%;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    pointer-events: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

#viewport.bg-pattern-trpg {
    /* ココフォリア風ダークグリッド */
    background-color: #1a1a1a;
    background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 30px 30px;
}