/* ==========================================================================
   1. グローバルスタイルと変数の定義 (Modern Theme)
   ========================================================================== */
:root {
    --color-primary: #0d6efd; --color-primary-rgb: 0, 123, 255; --color-success: #198754; --color-danger: #dc3545; --color-warning: #ffc107;
    --color-text-primary: #111827; --color-text-secondary: #6b7280; --color-surface: #ffffff; --color-background: #f9fafb; --color-border: #e5e7eb; --color-border-light: #f3f4f6;
    --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-family-monospace: 'SFMono-Regular', Consolas, 'Courier New', monospace;
    --spacing-unit: 1rem; --border-radius: 0.75rem; --transition-speed: 0.2s; --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
*, *::before, *::after { box-sizing: border-box; }
body { font-family: var(--font-family-base); background-color: var(--color-background); color: var(--color-text-primary); line-height: 1.6; margin: 0; padding: calc(var(--spacing-unit) * 2.5); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ==========================================================================
   2. メインレイアウト (Main Layout)
   ========================================================================== */
.container { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto auto auto auto; grid-template-areas: "header header" "master form" "controls controls" "results results" "history-title history-title" "history  history"; gap: calc(var(--spacing-unit) * 2); }
h1 { grid-area: header; font-size: 2.25rem; font-weight: 700; margin: 0 0 var(--spacing-unit) 0; padding-bottom: var(--spacing-unit); border-bottom: 1px solid var(--color-border); }
h2 { font-size: 1.25rem; font-weight: 600; margin: 0; padding-bottom: 0.6rem; border-bottom: none; position: relative; display: inline-block; }
h2::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 4px; background-color: var(--color-primary); border-radius: 2px; }

/* ==========================================================================
   3. 各セクションのコンテナ (Section Containers)
   ========================================================================== */
#master-container { grid-area: master; } #form-container { grid-area: form; } .controls { grid-area: controls; } .results { grid-area: results; } #history-title { grid-area: history-title; margin-bottom: calc(var(--spacing-unit) * -1); } .history { grid-area: history; }
.data-box, .results, .history { background-color: var(--color-surface); border-radius: var(--border-radius); padding: calc(var(--spacing-unit) * 1.5); border: 1px solid var(--color-border); }

/* ==========================================================================
   4. お手本データと入力フォーム (Master Data & Input Form)
   ========================================================================== */
#master-data, #input-form { display: grid; gap: calc(var(--spacing-unit) * 1.25); }
.master-item-combined, .form-group-combined { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-unit); }
.master-item-half, .form-group-half { display: flex; flex-direction: column; gap: 0.5rem; }
.master-item-half label, .form-group-half label, .full-width-item > label { font-weight: 500; color: var(--color-text-secondary); font-size: 0.875rem; padding-left: 0.25rem; }
.full-width-item { display: flex; flex-direction: column; gap: 0.5rem; }
.data-value { background-color: var(--color-border-light); padding: 0.75rem 1rem; border-radius: 0.5rem; word-break: break-all; font-size: 0.95rem; min-height: calc(1.6em + 1.5rem + 2px); }
input, textarea { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--color-border); border-radius: 0.5rem; font-size: 0.95rem; font-family: var(--font-family-base); line-height: 1.6; transition: border-color var(--transition-speed), box-shadow var(--transition-speed); }
textarea { resize: none; overflow-y: hidden; }
input:focus, textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2); }
input.correct, textarea.correct { border-color: var(--color-success); background-color: rgba(25, 135, 84, 0.05); }
input.incorrect, textarea.incorrect { border-color: var(--color-danger); background-color: rgba(220, 53, 69, 0.05); }

/* ==========================================================================
   5. ボタン、成績、履歴テーブル (Controls, Results, History)
   ========================================================================== */
.controls { text-align: center; background: none; border: none; padding: 0; box-shadow: none; }
.controls button { background: var(--color-primary); color: var(--color-surface); border: none; padding: 0.8rem 2rem; font-size: 1rem; font-weight: 500; border-radius: 0.5rem; cursor: pointer; transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease; }
.controls button:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 7px 14px rgba(var(--color-primary-rgb), 0.2), 0 3px 6px rgba(0,0,0,0.08); }
.controls button:disabled { background-color: #9ca3af; cursor: not-allowed; }
.results { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--spacing-unit); }
.result-item { background-color: var(--color-surface); padding: var(--spacing-unit); border-radius: var(--border-radius); border: 1px solid var(--color-border); text-align: center; }
.result-item p { margin: 0 0 0.25rem 0; font-size: 0.875rem; color: var(--color-text-secondary); }
.result-item span { display: block; font-size: 2rem; font-weight: 700; line-height: 1.2; }
#accuracy-rate { color: var(--color-primary); }
#perfect-rounds-count { color: var(--color-warning); }
.history { padding: 0; overflow-x: auto; }
.history-controls { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-unit) calc(var(--spacing-unit) * 1.5); border-bottom: 1px solid var(--color-border); background-color: var(--color-border-light); flex-wrap: wrap; gap: var(--spacing-unit); }
.history-options { display: flex; align-items: center; gap: calc(var(--spacing-unit) * 1.5); flex-wrap: wrap; }
.items-per-page-selector, .history-filter { display: flex; align-items: center; gap: 0.5rem; }
.items-per-page-selector label, .history-filter label { font-size: 0.875rem; color: var(--color-text-secondary); user-select: none; }
.items-per-page-selector select { padding: 0.25rem 0.5rem; border-radius: 0.25rem; border: 1px solid var(--color-border); font-size: 0.875rem; }
.history-filter input[type="checkbox"] { width: 1rem; height: 1rem; cursor: pointer; }
.pagination-nav { display: flex; align-items: center; gap: 0.75rem; }
.pagination-nav button { background-color: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-primary); font-weight: 500; padding: 0.25rem 0.75rem; border-radius: 0.25rem; cursor: pointer; transition: background-color var(--transition-speed); }
.pagination-nav button:hover:not(:disabled) { background-color: var(--color-primary-light); }
.pagination-nav button:disabled { color: #adb5bd; cursor: not-allowed; background-color: var(--color-border-light); }
#page-indicator { font-size: 0.875rem; font-weight: 500; color: var(--color-text-secondary); }
#history-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
#history-table th:nth-child(1) { width: 15%; } #history-table th:nth-child(2) { width: 35%; } #history-table th:nth-child(3) { width: 35%; } #history-table th:nth-child(4) { width: 15%; text-align: center; }
#history-table th { background-color: var(--color-surface); text-align: left; font-weight: 500; padding: 0.8rem 1.5rem; font-size: 0.875rem; color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border); }
#history-table td { padding: 1rem 1.5rem; vertical-align: middle; border-bottom: 1px solid var(--color-border); word-break: break-word; }
#history-table td:nth-child(4) { text-align: center; }
#history-table tbody tr:last-child td { border-bottom: none; }
#history-table tbody tr:hover { background-color: rgba(var(--color-primary-rgb), 0.05); }
#history-table td:nth-child(2), #history-table td:nth-child(3) { font-family: var(--font-family-monospace); font-size: 0.9rem; }
#history-table .result-correct { color: var(--color-success); font-weight: 600; }
#history-table .result-incorrect { color: var(--color-danger); font-weight: 600; }
#history-table .round-separator td { background-color: var(--color-border-light); color: var(--color-text-secondary); text-align: center; font-weight: 500; font-size: 0.875rem; padding: 0.75rem; border-bottom: 1px solid var(--color-border); border-top: 1px solid var(--color-border); }

/* ==========================================================================
   6. フッター (Footer)
   ========================================================================== */
footer { text-align: center; margin-top: calc(var(--spacing-unit) * 2); padding: var(--spacing-unit) 0; font-size: 0.875rem; color: var(--color-text-secondary); }
footer a { color: var(--color-text-primary); font-weight: 500; text-decoration: none; transition: color var(--transition-speed) ease; }
footer a:hover { color: var(--color-primary); text-decoration: underline; }