:root {
    --primary: #3b82f6; --primary-dark: #2563eb;
    --text: #334155; --bg: #f8fafc;
}

body { font-family: 'Hiragino Maru Gothic ProN', sans-serif; background: var(--bg); color: var(--text); padding: 20px; display: flex; justify-content: center; }
.app-container { background: #fff; padding: 25px; border-radius: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.08); width: 100%; max-width: 700px; }
.header-title { font-size: 22px; font-weight: bold; color: var(--primary-dark); text-align: center; margin-bottom: 20px; }

/* 問題文と表 */
.question-box { background: #fff; padding: 20px; border-radius: 12px; margin-bottom: 25px; border: 2px solid #cbd5e1; }
.q-header { font-size: 16px; font-weight: bold; margin-bottom: 15px; color: #475569; }
.q-layout { display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.q-text { font-size: 18px; font-weight: bold; line-height: 1.6; }
.q-table { background: #e0f2fe; border-radius: 8px; overflow: hidden; font-weight: bold; font-size: 15px; border: 1px solid #bae6fd; min-width: 250px;}
.t-row { display: flex; justify-content: space-between; padding: 8px 15px; border-bottom: 1px solid #bae6fd; }
.t-row:last-child { border-bottom: none; }

/* ナビボード */
.nav-board { border: 3px solid var(--primary); border-radius: 12px; margin-bottom: 25px; overflow: hidden; transition: 0.3s; }
.nav-title { background: var(--primary); color: white; font-weight: bold; padding: 10px 15px; font-size: 16px; }
.nav-msg { padding: 15px; font-size: 16px; font-weight: bold; line-height: 1.6; background: #fff; }

/* 入力エリア共通 */
.step-section { margin-bottom: 20px; animation: fadeIn 0.5s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.calc-row { display: flex; align-items: center; font-size: 20px; font-weight: bold; gap: 8px; flex-wrap: wrap;}
.justify-center { justify-content: center; }
.ml-10 { margin-left: 10px; }

.num-input { padding: 8px; border: 2px solid #cbd5e1; border-radius: 8px; text-align: center; font-size: 22px; font-weight: bold; outline: none; transition: 0.2s; width: 60px; color: var(--text); }
.num-input:focus { border-color: var(--primary); box-shadow: 0 0 8px rgba(59, 130, 246, 0.3); }
.highlight-input { border-color: #f59e0b; background: #fffbeb; }

.correct-input { background: #dcfce7 !important; color: #047857 !important; border-color: #10b981 !important; box-shadow: none !important; }
.wrong-input { background: #fee2e2 !important; border-color: #ef4444 !important; color: #b91c1c !important; animation: shake 0.4s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-5px); } }

/* 操作ブロックエリア */
.blocks-container { background: #f8fafc; border: 2px dashed #94a3b8; border-radius: 12px; padding: 20px; }
.blocks-desc { text-align: center; font-weight: bold; margin-bottom: 15px; color: #64748b; }
.time-zones { display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 20px;}
.zone { flex: 1; min-width: 200px; border-radius: 10px; padding: 15px; min-height: 120px; display: flex; flex-direction: column; }
.hour-zone { border: 3px solid #f87171; background: #fff1f2; }
.min-zone { border: 3px solid #60a5fa; background: #eff6ff; }
.zone-label { font-weight: bold; text-align: center; margin-bottom: 10px; font-size: 15px; }
.hour-zone .zone-label { color: #be123c; }
.min-zone .zone-label { color: #1d4ed8; }

.block-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; flex: 1; align-content: flex-start;}
.time-block { width: 40px; height: 40px; border-radius: 8px; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 16px; color: #1e293b; box-shadow: 0 3px 0 rgba(0,0,0,0.15); transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.c-blue { background: #bae6fd; border: 2px solid #7dd3fc; }
.c-green { background: #bbf7d0; border: 2px solid #86efac; }
.c-yellow { background: #fef08a; border: 2px solid #fde047; }

/* 最終回答エリア */
.final-ans-box { background: #fffbeb; border: 3px solid #fde047; padding: 20px; border-radius: 12px; }

/* ボタン類 */
.action-area { display: flex; justify-content: center; margin-top: 15px; width: 100%; }
.btn-check { background: var(--primary); color: white; border: none; padding: 10px 25px; border-radius: 10px; font-size: 18px; font-weight: bold; cursor: pointer; box-shadow: 0 4px 0 var(--primary-dark); transition: 0.1s; }
.btn-check:active:not(:disabled) { transform: translateY(4px); box-shadow: none; }
.btn-check:disabled { background: #cbd5e1; box-shadow: 0 4px 0 #94a3b8; cursor: not-allowed; }

.btn-action { background: #f59e0b; color: white; border: none; padding: 15px; border-radius: 10px; font-weight: bold; cursor: pointer; box-shadow: 0 4px 0 #d97706; font-size: 16px; animation: pulse 1.5s infinite; }
.btn-action:active { transform: translateY(4px); box-shadow: none; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }

.btn-reset { display: block; width: 100%; margin-top: 25px; padding: 12px; background: #64748b; color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; }
.hidden { display: none !important; }