/* 色とフォントは designs\試作アプリの画面 と同じ */
:root { --bg: #F5F5F2; --ink: #1A1A1E; --sub: #4A4A50; --line: #C9C8C2; --accent: #0F6E66; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Noto Sans JP', sans-serif; }
.screen { max-width: 820px; min-height: 100vh; margin: 0 auto; padding: 56px 64px; display: flex; flex-direction: column; gap: 32px; }
header { display: flex; flex-direction: column; gap: 8px; }
.eyebrow { margin: 0; font-size: 18px; color: var(--accent); font-weight: 700; }
h1 { margin: 0; font-family: 'Zen Old Mincho', serif; font-size: 44px; }
.field { display: flex; flex-direction: column; gap: 10px; }
label, .label { font-size: 20px; font-weight: 700; }
input { height: 64px; padding: 0 20px; font-size: 26px; border: 2px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font-family: inherit; }
.hint { margin: 0; font-size: 18px; color: var(--sub); min-height: 1.5em; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 16px; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.choices button { height: 64px; font-size: 22px; font-family: inherit; border-radius: 12px; border: 2px solid var(--line); background: #fff; color: var(--ink); }
.choices button[aria-pressed="true"] { border: 3px solid var(--ink); background: var(--ink); color: #fff; font-weight: 700; }
.primary { margin-top: auto; height: 80px; border: 0; border-radius: 16px; background: var(--accent); color: #fff; font-size: 26px; font-weight: 700; font-family: inherit; }
.primary:disabled { opacity: .4; }
.actions { margin-top: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.actions .primary { margin-top: 0; font-size: 24px; }
.secondary { height: 72px; border: 2px solid var(--ink); border-radius: 16px; background: #fff; color: var(--ink); font-size: 24px; font-weight: 700; font-family: inherit; }
.secondary:disabled { opacity: .3; }
.question { margin: 0; font-family: 'Zen Old Mincho', serif; font-size: 36px; line-height: 1.6; }
.listening { margin: 0; padding: 20px; border-radius: 12px; background: #E3F0EE; color: var(--accent); font-size: 28px; font-weight: 700; text-align: center; }
.error { margin: 0; padding: 20px; border-radius: 12px; background: #FBE9E7; color: #8A1C12; font-size: 22px; font-weight: 700; line-height: 1.6; }
.meter { margin-top: 16px; height: 12px; border-radius: 6px; background: #fff; overflow: hidden; }
.meter span { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--accent); transition: width .1s; }
.answer { margin: 0; padding: 20px; min-height: 120px; border-radius: 12px; background: #fff; font-size: 24px; line-height: 1.7; white-space: pre-wrap; }
.choices button:disabled { opacity: .4; }
.actions.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.actions .secondary { height: 80px; }
.divider { margin: 0; padding-top: 16px; border-top: 2px dashed var(--line); font-size: 16px; color: var(--sub); }
.volume { display: flex; align-items: center; gap: 16px; font-size: 20px; font-weight: 700; }
.volume input { flex: 1; height: 44px; padding: 0; border: 0; background: none; accent-color: var(--accent); }
.suggest { margin: 0; padding-left: 1.2em; font-size: 20px; line-height: 1.7; color: var(--sub); }
@media (max-width: 600px) { .screen { padding: 32px 16px; } .row { grid-template-columns: 1fr; } }