/* 基本スタイルとページ全体のレイアウト */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    transition: background-color 0.3s, color 0.3s;
}

.page-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* ヘッダー */
.main-header {
    padding: 10px 20px;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.main-header h1 {
    margin: 0;
    font-size: 1.5em;
    white-space: nowrap;
}
#theme-toggle {
    background: none; border: 1px solid #ccc; border-radius: 50%;
    width: 36px; height: 36px; cursor: pointer; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}


/* メインコンテンツエリア */
main.split-container {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
}

/* ▼▼▼【ここを修正】エディターパネルがスクロールできるように変更 ▼▼▼ */
#editor-pane {
    display: flex;
    flex-direction: column;
    padding: 10px;
    flex-basis: 50%;
    min-height: 0;
    overflow-y: auto; /* 縦方向のスクロールを許可 */
}

#preview-pane {
    display: flex;
    flex-direction: column;
    padding: 10px;
    flex-basis: 50%;
    overflow: hidden; /* プレビュー側はスクロール不要 */
}
/* ▲▲▲ 修正ここまで ▲▲▲ */


/* 分割線 (Split.js) */
.gutter { background-color: #e5e7eb; cursor: col-resize; }

/* タブエディタ */
.editor-tabs { display: flex; flex-shrink: 0; }
.tab-link { padding: 10px 15px; cursor: pointer; border: 1px solid #ccc; border-bottom: none; background-color: #f1f1f1; }
.tab-link.active { background-color: #fff; border-bottom: 1px solid #fff; position: relative; top: 1px; z-index: 1;}
.editor-panels { flex-grow: 1; border-top: 1px solid #ccc; position: relative; overflow: hidden; min-height: 200px; /* エディタの最小高さを確保 */ }
.tab-panel { display: none; height: 100%; width: 100%; }
.tab-panel.active { display: block; }
.CodeMirror { height: 100%; border: none; }

/* アクションボタン */
.action-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; margin-top: 1rem; }
.action-buttons button { padding: 0.7rem 1rem; font-size: 0.9em; cursor: pointer; border: 1px solid #ccc; border-radius: 4px; }
#run-button { background-color: #17a2b8; color: white; }
#new-tab-button { background-color: #6c757d; color: white; }
#deploy-button { background-color: #ffc107; color: #212529; }
#reset-button { background-color: #f8f9fa; color: #333; }

/* プレビュー */
.preview-header { display: flex; justify-content: flex-end; align-items: center; flex-shrink: 0; flex-wrap: wrap; margin-bottom: 10px; }
.preview-header h2 { margin: 0; margin-right: auto; font-size: 1.1em; }
.live-preview-toggle { display: flex; align-items: center; gap: 5px; margin-right: 15px; }
.live-preview-toggle label { cursor: pointer; user-select: none; }
.responsive-controls button { padding: 5px 10px; margin-left: 5px; cursor: pointer; border: 1px solid #ccc; border-radius: 4px; }
#preview-frame { width: 100%; flex-grow: 1; border: 1px solid #ccc; background-color: white; }

/* ヘッダー内のユーザー認証エリアのスタイル */
#user-section { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 20px; 
}
#auth-forms { display: flex; gap: 15px; align-items: center; }
.auth-form { display: flex; gap: 8px; align-items: center; }
#user-info { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.auth-form input { padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 0.9em; }
.auth-form button { padding: 8px 12px; border: none; color: white; cursor: pointer; border-radius: 4px; font-size: 0.9em; }
#register-form button { background-color: #28a745; }
#login-form button { background-color: #007bff; }
#user-info .user-actions a, #user-info button { text-decoration: none; padding: 8px 12px; border-radius: 4px; color: white; margin-left: 8px; font-size: 0.9em; }
#user-info .user-actions a { background-color: #6c757d; }
#logout-button { background-color: #dc3545; border: none; cursor: pointer; }
.hidden { display: none !important; }

/* フッター */
.main-footer {
    padding: 5px 20px;
    background-color: #fff;
    border-top: 1px solid #ddd;
    flex-shrink: 0;
    min-height: 20px;
}


/* その他 */
.deploy-result-area { min-height: 60px; margin-top: 10px; }
.deploy-result { padding: 15px; background-color: #d4edda; border: 1px solid #c3e6cb; color: #155724; border-radius: 4px; }
#cookie-consent-banner { position: fixed; bottom: 0; left: 0; width: 100%; background-color: rgba(0,0,0,0.8); color: white; padding: 15px; text-align: center; z-index: 1001; display: flex; justify-content: center; align-items: center; gap: 20px; }
#cookie-consent-banner.hidden { display: none; }

/* ダークモード */
body.dark-mode { background-color: #2c3e50; color: #ecf0f1; }
body.dark-mode .main-header, body.dark-mode .main-footer { background-color: #34495e; border-color: #4a6572; }
body.dark-mode h1, body.dark-mode h2, body.dark-mode #user-info p { color: #ffffff; }
.dark-mode .auth-form input { background-color: #4a6572; color: #ecf0f1; border-color: #5d7c8c; }
.dark-mode .tab-link { background-color: #2c3e50; border-color: #4a6572; color: #ecf0f1; }
.dark-mode .tab-link.active { background-color: #34495e; border-color: #4a6572; border-bottom-color: #34495e; }
.dark-mode .editor-panels { border-top-color: #4a6572; }
.dark-mode .CodeMirror { border-color: #4a6572; }
.dark-mode .CodeMirror-gutters { background-color: #263238; border-right-color: #4a6572; }
.dark-mode .action-buttons button, .dark-mode .responsive-controls button { background-color: #4a6572; color: #ecf0f1; border-color: #5d7c8c; }
.dark-mode #reset-button { background-color: #5d7c8c; }
.dark-mode #run-button { background-color: #008f7a; }
.dark-mode #deploy-button { background-color: #f39c12; color: #212529; }
.dark-mode #logout-button { background-color: #c62828; color: white; }
.dark-mode #user-info .user-actions a { background-color: #5d7c8c; }
.dark-mode .deploy-result { background-color: #2e7d32; border-color: #388e3c; color: #ffffff; }
.dark-mode .deploy-result a { color: #bbdefb; }
.dark-mode #preview-frame { border-color: #4a6572; background-color: #2c3e50; }
.dark-mode .gutter { background-color: #34495e; }
.dark-mode .live-preview-toggle label { color: #ecf0f1; }
.dark-mode #theme-toggle { background-color: #4a6572; border-color: #5d7c8c; color: #ecf0f1; }