/* speaking/instant/pro/style.css — 瞬間英作文 Pro 固有のスタイル
 *
 * 共通トークン・共通コンポーネント（.v3-*）は /assets/global-design.css が正。
 * ここには Pro 画面だけで使う組版を置く。色は必ず v3 トークン経由で参照する。
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Zen Maru Gothic', 'Noto Sans JP', system-ui, sans-serif;
  color: var(--text, #33414a);
  font-size: 16px; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--teal-text, #186f83); text-decoration: none; }
button { font-family: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
img, svg { max-width: 100%; }

.view { display: none; }
.view.show { display: block; }
.wrap { max-width: 720px; margin: 0 auto; padding: 0 16px; }
.wrap.wide { max-width: 940px; }

/* ── LP: hero ─────────────────────────────────── */
.hero { padding: 26px 0 8px; text-align: center; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-coral-pale, #fdeae6);
  color: var(--coral-text, #e2695a);
  border-radius: 999px; padding: 5px 14px;
  font-size: 12.5px; font-weight: 900; white-space: nowrap;
}
.hero-h1 { font-size: 30px; font-weight: 900; line-height: 1.35; letter-spacing: 0; margin: 14px 0 10px; }
.hero-h1 .hl { background: var(--highlight, #c3e6ee); border-radius: 4px; padding: 0 6px; }
.hero-sub { font-size: 15px; font-weight: 500; color: var(--text-sub, #7b8790); margin-bottom: 18px; }
.price-tag {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-weight: 900; color: var(--teal-text, #186f83);
}
.price-tag .num { font-size: 40px; line-height: 1; }
.price-tag .unit { font-size: 15px; }
.price-note { font-size: 12.5px; font-weight: 700; color: var(--text-faint, #9aa4ab); margin-top: 6px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 20px 0 8px; }

/* ── セクション見出し ─────────────────────────── */
.sec { padding: 30px 0 6px; }
.sec-eye {
  font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: var(--teal-light, #8dc2cd); text-align: center;
}
.sec-h2 { font-size: 21px; font-weight: 900; text-align: center; margin: 6px 0 6px; letter-spacing: 0; }
.sec-sub { font-size: 13.5px; font-weight: 500; color: var(--text-sub, #7b8790); text-align: center; margin-bottom: 18px; }

/* ── 機能カード ─────────────────────────────── */
.feat-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 620px) { .feat-grid { grid-template-columns: 1fr 1fr; } }
.feat-card { padding: 18px 18px 16px; }
.feat-card .ic {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-teal-pale, #eaf5f7); color: var(--teal, #1d7f96);
  margin-bottom: 10px;
}
.feat-card h3 { font-size: 16px; font-weight: 900; margin-bottom: 6px; letter-spacing: 0; }
.feat-card p { font-size: 13.5px; font-weight: 500; color: var(--text-sub, #7b8790); }

/* ── Free / Pro 比較表 ─────────────────────────── */
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.cmp { width: 100%; min-width: 330px; border-collapse: collapse; background: #fff; border-radius: 18px; overflow: hidden; }
table.cmp th, table.cmp td { padding: 11px 10px; font-size: 13px; text-align: left; border-bottom: 1px solid var(--border, #e5dfd2); }
@media (min-width: 560px) { table.cmp th, table.cmp td { padding: 12px 14px; font-size: 13.5px; } }
table.cmp thead th { font-weight: 900; background: var(--bg-card-sub, #faf8f3); white-space: nowrap; }
table.cmp thead th.pro { color: var(--teal-text, #186f83); background: var(--bg-teal-pale, #eaf5f7); }
table.cmp td.c { text-align: center; white-space: nowrap; font-weight: 700; }
table.cmp tbody tr:last-child td { border-bottom: none; }
.yes { color: var(--green, #35a06c); font-weight: 900; }
.no  { color: var(--text-disabled, #b6b0a2); font-weight: 900; }

/* ── FAQ ──────────────────────────────────────── */
.faq-item { border-bottom: 1px dashed var(--border-strong, #d8d2c4); padding: 14px 0; }
.faq-item:last-child { border-bottom: none; }
.faq-q { font-size: 14.5px; font-weight: 900; margin-bottom: 6px; }
.faq-a { font-size: 13.5px; font-weight: 500; color: var(--text-sub, #7b8790); }

/* ── 注意書き・法務 ───────────────────────────── */
.notice {
  background: #fffdf5; border: 1.5px dashed var(--border-strong, #d8d2c4);
  border-radius: 16px; padding: 14px 16px;
  font-size: 12.5px; font-weight: 500; color: var(--text-sub, #7b8790);
}
.notice strong { color: var(--text, #33414a); font-weight: 900; }
.notice + .notice { margin-top: 10px; }

/* ── ログイン / ペイウォール ─────────────────── */
.gate { padding: 22px 18px; text-align: center; }
.gate h2 { font-size: 19px; font-weight: 900; margin-bottom: 8px; letter-spacing: 0; }
.gate p { font-size: 13.5px; font-weight: 500; color: var(--text-sub, #7b8790); margin-bottom: 14px; }
.gate .cta-row { margin-top: 16px; }
.mail-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.mail-row input {
  flex: 1 1 220px; min-height: 48px; padding: 10px 14px;
  border: 2px solid var(--border, #e5dfd2); border-radius: 999px;
  font-family: inherit; font-size: 15px; font-weight: 500; color: var(--text);
  background: #fff;
}
.mail-row input:focus-visible { outline: 2px solid var(--teal, #1d7f96); outline-offset: 1px; border-color: var(--teal); }
.gate-msg { font-size: 13px; font-weight: 700; margin-top: 12px; min-height: 20px; }
.gate-msg.err { color: var(--coral-text, #e2695a); }
.gate-msg.ok  { color: var(--green, #35a06c); }
.who { font-size: 12px; font-weight: 700; color: var(--text-faint, #9aa4ab); margin-top: 14px; }
.who button { background: none; border: none; color: var(--teal-text); font-weight: 900; font-size: 12px; text-decoration: underline; }

/* ── セッション設計（Pro） ───────────────────── */
.setup { padding: 18px; }
.set-block { margin-bottom: 18px; }
.set-block:last-child { margin-bottom: 0; }
.set-lbl {
  font-size: 11.5px; font-weight: 900; letter-spacing: .06em;
  color: var(--text-faint, #9aa4ab); text-transform: uppercase; margin-bottom: 8px;
}
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips .v3-chip { cursor: pointer; }
.hint { font-size: 12px; font-weight: 500; color: var(--text-faint, #9aa4ab); margin-top: 7px; }

/* ── クイズ画面 ─────────────────────────────── */
.q-top { display: flex; align-items: center; gap: 8px; padding: 10px 0; }
.q-top .sp { flex: 1; }
.q-meta { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--text-faint); margin: 8px 0 6px; }
.timer { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; }
.timer .secs { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--teal-text); min-width: 34px; text-align: right; }
.timer.urgent .secs { color: var(--coral-text, #e2695a); }

.q-card { padding: 20px 18px; margin: 12px 0; text-align: center; }
.q-cat { display: inline-block; margin-bottom: 10px; }
.q-ja { font-size: 23px; font-weight: 900; line-height: 1.5; letter-spacing: 0; }
.q-ctx { font-size: 12.5px; font-weight: 500; color: var(--text-faint); margin-top: 8px; }

/* マイク */
.mic-wrap { text-align: center; margin: 14px 0 6px; }
.mic-btn {
  width: 88px; height: 88px; border-radius: 50%;
  border: none; background: var(--coral, #ef8577); color: #fff;
  box-shadow: 0 5px 0 var(--coral-dark, #d96c5e);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .12s ease, box-shadow .12s ease;
}
.mic-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--coral-dark); }
.mic-btn[disabled] { background: var(--text-disabled, #b6b0a2); box-shadow: 0 5px 0 #9a958a; cursor: default; }
.mic-btn.rec { background: var(--teal, #1d7f96); box-shadow: 0 5px 0 var(--teal-dark, #14596a); animation: micPulse 1.1s ease-in-out infinite; }
@keyframes micPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.mic-cap { font-size: 12.5px; font-weight: 700; color: var(--text-sub); margin-top: 10px; }
.heard {
  margin-top: 12px; padding: 12px 14px; border-radius: 14px;
  background: var(--bg-card-sub, #faf8f3); border: 1.5px solid var(--border, #e5dfd2);
  font-size: 15px; font-weight: 700; text-align: left; line-height: 1.9;
}
.heard .w-ok  { background: #eaf7f0; color: #237a4f; border-radius: 5px; padding: 1px 4px; }
.heard .w-ng  { background: var(--bg-coral-pale, #fdeae6); color: var(--coral-text, #e2695a); border-radius: 5px; padding: 1px 4px; text-decoration: line-through; }
.heard .w-miss{ background: var(--bg-sand, #f0ede4); color: var(--text-faint); border-radius: 5px; padding: 1px 4px; }
.score-line { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.score-val { font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; }
.score-val.g { color: var(--green, #35a06c); }
.score-val.m { color: var(--teal-text, #186f83); }
.score-val.b { color: var(--coral-text, #e2695a); }

/* 解答パネル */
.ans { display: none; margin-top: 14px; }
.ans.show { display: block; }
.ans-card { padding: 16px 18px; }
.ans-flag { font-size: 11px; font-weight: 900; letter-spacing: .06em; color: var(--teal-light); text-transform: uppercase; margin-bottom: 6px; }
.ans-main { font-size: 21px; font-weight: 900; line-height: 1.5; }
.ans-alt { font-size: 13px; font-weight: 500; color: var(--text-sub); margin-top: 8px; }
.ans-alt em { font-style: normal; font-weight: 700; color: var(--teal-text); }
.tip { margin-top: 10px; background: #fffdf5; border: 1.5px dashed var(--border-strong); border-radius: 14px; padding: 12px 14px; font-size: 13px; font-weight: 500; color: var(--text-sub); }
.audio-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.rate-hd { font-size: 13px; font-weight: 900; text-align: center; margin: 16px 0 8px; }
.rate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rate-btn {
  min-height: 62px; border-radius: 16px; background: #fff;
  border: 2.5px solid var(--border, #e5dfd2);
  font-size: 12.5px; font-weight: 900; color: var(--text);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  transition: transform .12s ease, border-color .12s ease;
}
.rate-btn:active { transform: translateY(2px); }
.rate-btn .xp { font-size: 10.5px; font-weight: 700; color: var(--text-faint); }
.rate-btn.ok:hover   { border-color: var(--green, #35a06c); background: #eaf7f0; }
.rate-btn.warn:hover { border-color: var(--teal, #1d7f96); background: var(--bg-teal-pale); }
.rate-btn.err:hover  { border-color: var(--coral-border, #f0a496); background: var(--bg-coral-pale); }
.rate-btn.sel { border-width: 3px; }

/* 完了画面 */
.done { padding: 24px 18px; text-align: center; }
.done h2 { font-size: 22px; font-weight: 900; margin-bottom: 4px; letter-spacing: 0; }
.res-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 18px 0; }
.res-cell { background: var(--bg-card-sub, #faf8f3); border-radius: 14px; padding: 12px 4px; }
.res-val { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.res-lbl { font-size: 10.5px; font-weight: 700; color: var(--text-faint); white-space: nowrap; }

/* レポート */
.rep-row { padding: 12px 0; border-bottom: 1px dashed var(--border); }
.rep-row:last-child { border-bottom: none; }
.rep-name { font-size: 13.5px; font-weight: 700; margin-bottom: 6px; display: flex; justify-content: space-between; gap: 10px; }
.rep-name span:last-child { font-size: 12px; font-weight: 700; color: var(--text-faint); white-space: nowrap; }
.weak-item { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px dashed var(--border); }
.weak-item:last-child { border-bottom: none; }
.weak-txt { flex: 1; min-width: 0; }
.weak-ja { font-size: 14px; font-weight: 900; }
.weak-en { font-size: 12.5px; font-weight: 500; color: var(--text-sub); }
.weak-badge { flex: 0 0 auto; font-size: 11px; font-weight: 900; color: var(--coral-text); white-space: nowrap; }
.mini-btn {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  background: var(--teal, #1d7f96); color: #fff; border: none;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 0 var(--teal-dark, #14596a);
}
.mini-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--teal-dark); }
.mini-btn.ghost { background: #fff; color: var(--teal-text); border: 2px solid var(--border-teal); box-shadow: none; }
.mini-btn.ghost.on { background: var(--bg-coral-pale); color: var(--coral-text); border-color: var(--coral-border); }
.empty { font-size: 13px; font-weight: 500; color: var(--text-faint); text-align: center; padding: 18px 0; }

.foot { text-align: center; padding: 30px 16px 40px; font-size: 12px; font-weight: 500; color: var(--text-faint); }
.foot a { margin: 0 7px; font-weight: 700; }