/* 全体の基本設定 */
:root {
    --primary-color: #007bff;
    --primary-hover: #0056b3;
    --secondary-color: #6c757d;
    --secondary-hover: #5a6268;
    --tertiary-color: #f8f9fa;
    --tertiary-hover: #e2e6ea;
    --tertiary-border: #dee2e6;
    --correct-color: #28a745;
    --incorrect-color: #dc3545;
    --bg-color: #ffffff;
    --panel-bg: #f8f9fa;
    --container-bg: #ffffff;
    --text-color: #333;
    --light-text: #666;
    --border-color: #dee2e6;
}

body {
    font-family: 'Helvetica Neue', 'Arial', 'Hirino Kaku Gothic ProN', 'Hirino Sans', 'Meiryo', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
}
.hidden { display: none; }

/* --- ヘッダーナビゲーション --- */
.main-header {
    width: 100%;
    background-color: #2d3748; /* ダークカラーに変更 */
    padding: 0 2em;
    box-sizing: border-box;
    border-bottom: 1px solid #4a5568;
}
.main-nav {
    display: flex;
    gap: 1em;
}
.nav-link {
    color: #a0aec0;
    text-decoration: none;
    padding: 1em 1.5em;
    font-weight: bold;
    border-bottom: 4px solid transparent;
    transition: color 0.2s;
}
.nav-link:hover {
    color: #e2e8f0;
}
.nav-link.active {
    border-bottom-color: var(--primary-color);
    color: #e2e8f0;
}

/* --- レイアウト --- */
.app-layout {
    display: flex;
    height: calc(100vh - 58px);
}

/* 左側の設定パネル */
#settings-panel {
    width: 320px;
    background-color: var(--panel-bg);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.panel-body {
    padding: 1.5em;
    padding-bottom: 4em;
    overflow-y: auto;
    flex-grow: 1;
}
.main-actions {
    max-width: 400px;
    margin: 2em auto 3em;
}
.settings-section {
    margin-bottom: 2em;
}
.step-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1em;
}
.step-label {
    font-weight: bold;
    color: var(--primary-color);
    margin: 0;
}
.select-toggle-btn {
    font-size: 0.8em;
    padding: 4px 10px;
    border-radius: 5px;
    border: 1px solid var(--primary-color);
    background-color: white;
    color: var(--primary-color);
    cursor: pointer;
    transition: all 0.2s ease;
}
.select-toggle-btn:hover {
    background-color: var(--primary-color);
    color: white;
}
.selection-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
}
.category-btn {
    padding: 12px 8px;
    border: 2px solid var(--border-color);
    background: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s ease;
}
.category-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }
.category-btn.selected { background-color: var(--primary-color); color: white; font-weight: bold; border-color: var(--primary-color); }
#type-selection { display: flex; flex-direction: column; gap: 10px; }

.action-btn {
    width: 100%;
    padding: 15px;
    font-size: 1.1em;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 10px;
}
.action-btn:last-child {
    margin-bottom: 0;
}
.action-btn.primary { background-color: var(--primary-color); color: white; }
.action-btn.primary:hover { background-color: var(--primary-hover); }
.action-btn.secondary { background-color: var(--secondary-color); color: white; }
.action-btn.secondary:hover { background-color: var(--secondary-hover); }

/* 右側のメインコンテンツ */
#main-content {
    flex-grow: 1;
    padding: 3em;
    overflow-y: auto;
    height: 100%;
    box-sizing: border-box;
}
#main-view {
    text-align: center;
}
.welcome-message {
    font-size: 1.2em;
    color: var(--light-text);
    margin: 4em 0;
}
#stats-area { background-color: #f8f9fa; border: 1px solid var(--border-color); border-radius: 8px; padding: 1em; margin-top: 3em; max-width: 400px; margin-left: auto; margin-right: auto; }
#stats-area h2 { border-bottom: none; font-size: 1.1em; margin: 0 0 0.5em 0; color: var(--light-text); }
#stats-area p { margin: 0; font-size: 1em; font-weight: bold; }

/* クイズ・結果画面 */
#quiz-view, #result-view { max-width: 700px; margin: 0 auto; }
#question-counter { text-align: right; font-weight: bold; color: var(--light-text); }
#question-text { font-size: 1.4em; margin: 1.5em 0; text-align: center; }
.speaker-btn { background: none; border: none; font-size: 1.5em; cursor: pointer; padding: 0 10px; color: var(--secondary-color); transition: transform 0.2s ease; }
.speaker-btn:hover { transform: scale(1.2); color: var(--primary-color); }
.choice-container { display: flex; align-items: center; margin-bottom: 10px; }
.choice-btn {  display: block; flex-grow: 1; padding: 15px; font-size: 1.1em; border: 2px solid var(--border-color); border-radius: 8px; background-color: white; color: var(--text-color); cursor: pointer; transition: all 0.2s ease; text-align: left;  }
.choice-btn:hover { background-color: #f8f9fa; border-color: var(--primary-color); }
.choice-btn.selected { background-color: #e0f7ff; border-color: var(--primary-color); font-weight: bold; color: #004085; }
.reorder-area { background-color: #f9f9f9; border: 1px dashed #ccc; min-height: 50px; padding: 10px; margin-bottom: 15px; border-radius: 5px; }
.word-bank, .reorder-area { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.word-block { padding: 8px 15px; background-color: white; border: 1px solid #ccc; border-radius: 5px; cursor: grab; user-select: none; }
#translation-input { width: 90%; padding: 12px; font-size: 1.1em; border: 2px solid var(--border-color); border-radius: 5px; margin-top: 10px; }
#translation-input:focus { outline: none; border-color: var(--primary-color); }
#feedback-area { margin-top: 1.5em; font-size: 1.2em; font-weight: bold; text-align: center; }
.correct { color: var(--correct-color); }
.incorrect { color: var(--incorrect-color); }
.correct-answer-feedback { color: var(--text-color); font-size: 1rem; font-weight: normal; margin-top: 0.5em; display: flex; justify-content: center; align-items: center; background-color: #f8f9fa; padding: 10px; border-radius: 8px; }
.correct-answer-feedback .speaker-btn { font-size: 1.2em; }
.quiz-action-btn { background-color: var(--primary-color); color: white; border: none; padding: 12px 25px; font-size: 1em; border-radius: 8px; cursor: pointer; transition: background-color 0.2s ease; margin-top: 1em; margin-right: 10px; }
.quiz-action-btn.secondary { background-color: var(--secondary-color); }
#result-view { text-align: center; }
#result-view button { font-size: 1.1em; padding: 15px 30px; }
#credit-footer { margin-top: 4em; padding-top: 1.5em; border-top: 1px solid var(--border-color); text-align: center; font-size: 0.8em; color: var(--light-text); }
#credit-footer a { color: var(--primary-color); text-decoration: none; }
#credit-footer a:hover { text-decoration: underline; }
/* --- スマートフォン対応 (レスポンシブ) --- */
@media (max-width: 768px) {
    body {
        overflow-y: auto; /* ページ全体のスクロールを許可 */
    }

    .app-layout {
        flex-direction: column; /* 2列レイアウトを縦1列に */
        height: auto;
    }

    #settings-panel {
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    #main-content {
        padding: 1.5em; /* 余白を調整 */
    }

    h1 {
        font-size: 1.5em;
    }

    .welcome-message {
        margin: 2em 0;
    }
}