/* ==========================================================================
   spispi-skin.css — スマホ枠（PhoneFrame）と、スピスピ本体の画面を「同じ値」で再現するための皮（2026-08-26）

   🚨 このファイルだけは px と hex を直書きする（design-system §9「動くデモ」の例外）。
   理由：ここに書く値は「サイトのデザイン」ではなく「スピスピ本体のデザイン」で、本体の Tailwind クラスを px に展開したもの。
   サイトのトークンに寄せた瞬間に本体と違う見た目になる（2026-08-26 に一度そうして『余白もボタンも違いすぎる』と差し戻された）。
   画面は本体と同じ論理サイズ（iPhone 14/15 の 390 × 844）で組み、PhoneFrame が transform: scale() で縮めて表示する。
   → 本体の px をそのまま書けば、縮尺だけが変わって比率は保たれる。本体の画面が変わったら、ここの値を本体から写し直す。

   出典（personalize-system・2026-08-26 参照・改変厳禁）：
     - 色・角丸：src/app/globals.css（--navy #0b111d／--border oklch(0.928 0.006 264.531)／--muted oklch(0.967 0.003 264.542)／
       --muted-foreground oklch(0.551 0.027 264.364)／--faint-foreground oklch(0.707 0.022 261.325)／--muted-strong = --border 相当／
       --destructive oklch(0.577 0.245 27.325)／--reveal-accent #59670d／--reveal-surface #ffffe6／--reveal-border #dcf028／
       --accent-shunkan #dcf028／--on-accent-shunkan #302e03／--radius 0.625rem → sm 6px・lg 10px・xl 14px）
     - 画面：…/shunkan/[materialId]/[topicId]/_components/lesson/QuestionComponent.tsx・TimerMeter.tsx・LessonHeader.tsx、
       shared/ExplanationAccordion.tsx、training/_components/SpeakerIcon.tsx、components/ui/button.tsx
     - 文字：本体はフォント未指定＝Tailwind 既定の system-ui（iPhone では SF／ヒラギノ）。Noto Sans JP は使わない
   ========================================================================== */

/* ---- 1. PhoneFrame（サイト側の部品。枠だけ。中身は slot） ----
   論理サイズ 390 × 844（画面）＋ベゼル 12px ＝ 414 × 868。--phone-scale で縮める。
   SP 0.64（枠 265px・画面 250px）／PC 0.72（枠 298px・画面 281px）。
   目安：Apple や SaaS サイトの製品ページで、PC のスマホ枠は 280〜320px が普通。390 そのまま出すと「大きい」（2026-08-26 本人指摘） */
.c-phone {
  --phone-scale: 0.64;
  position: relative;
  width: calc(414px * var(--phone-scale));
  height: calc(868px * var(--phone-scale));
  flex: none;
}
.c-phone__device {
  position: absolute;
  top: 0;
  left: 0;
  width: 414px;
  height: 868px;
  padding: 12px;
  background-color: #0b111d;                   /* 本体のフレームは navy。ベゼルの黒は #000 でもよいが、サイトの navy と揃えた */
  border-radius: 62px;
  box-shadow: 0 24px 48px -12px rgb(11 17 29 / 0.35), inset 0 0 0 2px rgb(255 255 255 / 0.08);
  transform: scale(var(--phone-scale));
  transform-origin: 0 0;
}
.c-phone__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 390px;
  height: 844px;
  overflow: hidden;
  background-color: #ffffff;                   /* 本体 --background */
  border-radius: 50px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #0b111d;
  -webkit-font-smoothing: antialiased;
}
/* iOS のステータスバー（時刻 9:41 は Apple の広告の慣例。キャリア名は出さない）＋ Dynamic Island */
.c-phone__status {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  height: 54px;
  padding: 14px 32px 0 40px;
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: #000;
}
.c-phone__status--on-dark {                    /* 本体はステータスバーの裏に navy の帯を敷き、時計は白（globals.css body::before・「Navy帯 PR-8」） */
  color: #fff;
  background-color: #0b111d;
}
.c-phone__status-icons { display: inline-flex; align-items: center; gap: 7px; }
.c-phone__status-icons svg { display: block; }
.c-phone__island {
  position: absolute;
  top: 11px;
  left: 50%;
  z-index: 3;
  width: 126px;
  height: 37px;
  background-color: #000;
  border-radius: 20px;
  transform: translateX(-50%);
}
.c-phone__home {                               /* ホームインジケータ */
  position: absolute;
  bottom: 8px;
  left: 50%;
  z-index: 2;
  width: 139px;
  height: 5px;
  background-color: #000;
  border-radius: 3px;
  transform: translateX(-50%);
}
.c-phone__home--on-dark { background-color: #fff; }
.c-phone__body {                               /* ステータスバーの下・画面の残り全部 */
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

@media (min-width: 64em) {
  .c-phone { --phone-scale: 0.72; }
}

/* ---- 2. スピスピ「瞬間英作文」レッスン画面（本体 QuestionComponent の写し。クラス名は本体の役割で付ける） ---- */
.spispi-lesson {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  color: #0b111d;                              /* --foreground = --navy */
}

/* LessonHeader: flex items-center justify-between bg-navy px-4 py-3 */
.spispi-lesson__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  padding: 12px 16px;
  background-color: #0b111d;
}
.spispi-lesson__count {                        /* min-w-14 / text-sm font-semibold text-background/70 tabular-nums */
  display: flex;
  align-items: center;
  min-width: 56px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: rgb(255 255 255 / 0.7);
}
.spispi-lesson__title {                        /* h1: min-w-0 flex-1 truncate px-4 text-center text-lg font-bold text-background */
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0 16px;
  overflow: hidden;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fff;
}
.spispi-lesson__close {                        /* Button ghost size=icon(36) rounded-full bg-background/15 */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 56px;
}
.spispi-lesson__close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #fff;
  background-color: rgb(255 255 255 / 0.15);
  border: 0;
  border-radius: 9999px;
}
.spispi-lesson__close-btn svg { width: 24px; height: 24px; }

/* TimerMeter: flex items-center gap-3 px-4 pt-6 pb-3 / track h-2 rounded-full bg-muted-strong / fill bg-foreground（残り 40% で destructive） */
.spispi-meter {
  display: flex;
  align-items: center;
  flex: none;
  gap: 12px;
  padding: 24px 16px 12px;
}
.spispi-meter__track {
  flex: 1;
  height: 8px;
  overflow: hidden;
  background-color: oklch(0.928 0.006 264.531);
  border-radius: 9999px;
}
.spispi-meter__fill {
  display: block;
  width: 0;
  height: 100%;
  background-color: #0b111d;
  border-radius: 9999px;
  transition: width 100ms linear;
}
.spispi-meter__time {                          /* text-sm font-medium tabular-nums */
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #0b111d;
}
.spispi-meter.is-warning .spispi-meter__fill { background-color: oklch(0.577 0.245 27.325); }
.spispi-meter.is-warning .spispi-meter__time { color: oklch(0.577 0.245 27.325); }

/* 問題フェーズ（playing_ja / countdown）と解答フェーズ（answer）。表示切替は [data-phase] で */
.spispi-lesson__ask,
.spispi-lesson__reveal {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}
.spispi-lesson__ask-body { padding: 16px 16px 0; }                       /* px-4 pt-4 */
.spispi-lesson__reveal-body {                                            /* flex min-h-0 flex-1 flex-col overflow-y-auto px-4 pt-4 pb-4 */
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: 16px;
  overflow: hidden;
}
.spispi-lesson__spacer { flex: 1; }

/* 日本語カード: rounded-sm border border-border bg-card px-5 py-5 shadow-sm */
.spispi-card {
  padding: 20px;
  background-color: #fff;
  border: 1px solid oklch(0.928 0.006 264.531);
  border-radius: 6px;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}
.spispi-card__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.spispi-card__ja {                             /* flex-1 text-lg leading-relaxed font-medium text-foreground */
  flex: 1;
  margin: 0;
  font-size: 18px;
  line-height: 1.625;
  font-weight: 500;
  color: #0b111d;
}
.spispi-lesson__reveal .spispi-card { margin-bottom: 12px; }             /* mb-3 */

/* 解答例カード: rounded-sm border border-reveal-border bg-reveal-surface px-5 py-5 */
.spispi-reveal {
  margin-bottom: 16px;                          /* mb-4 */
  padding: 20px;
  background-color: #ffffe6;
  border: 1px solid #dcf028;
  border-radius: 6px;
}
.spispi-reveal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }   /* mb-2 */
.spispi-reveal__label {                        /* text-base font-medium text-reveal-accent */
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #59670d;
}
.spispi-reveal__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.spispi-reveal__en {                           /* flex-1 text-xl leading-relaxed font-bold text-reveal-accent */
  flex: 1;
  margin: 0;
  font-size: 20px;
  line-height: 1.625;
  font-weight: 700;
  color: #59670d;
}

/* SpeakerIcon variant=square: size-8 rounded-lg bg-muted text-foreground（再生中は bg-app-accent text-on-app-accent）・アイコン 22px */
.spispi-speaker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  color: #0b111d;
  background-color: oklch(0.967 0.003 264.542);
  border: 0;
  border-radius: 10px;
}
.spispi-speaker svg { width: 22px; height: 22px; }
.spispi-speaker.is-active { color: #302e03; background-color: #dcf028; }

/* FavoriteStarIcon: ghost icon（36）・Star 20px・faint */
.spispi-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  color: oklch(0.707 0.022 261.325);
  background: none;
  border: 0;
}
.spispi-star svg { width: 20px; height: 20px; }

/* ExplanationAccordion: mb-8 / button rounded-xl border bg-card px-4 py-3 text-sm font-semibold text-muted-foreground・chevron 20px faint */
.spispi-accordion { width: 100%; margin-bottom: 32px; }
.spispi-accordion__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: oklch(0.551 0.027 264.364);
  background-color: #fff;
  border: 1px solid oklch(0.928 0.006 264.531);
  border-radius: 14px;
}
.spispi-accordion__btn svg { width: 20px; height: 20px; color: oklch(0.707 0.022 261.325); }

/* 下部固定ボタンバー: bg-background pb-[max(46px,env(safe-area-inset-bottom))] / 内側 px-4 py-3 */
.spispi-lesson__bar { flex: none; padding-bottom: 46px; background-color: #fff; }
.spispi-lesson__bar-inner { padding: 12px 16px; }

/* 解答例を確認: Button accent rounded-full px-8 py-3 text-xl font-bold w-full（bg-app-accent = accent-shunkan） */
.spispi-btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 32px;
  font-family: inherit;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: #302e03;
  background-color: #dcf028;
  border: 0;
  border-radius: 9999px;
  transition: background-color 150ms;
}
.spispi-btn-accent:hover { background-color: #bed60c; }

/* 自己評価 3 つ: flex gap-2.5 / 各 min-h-[54px] flex-col gap-1 rounded-[14px] py-1.5・記号 22px・ラベル 12.5px bold（本体は下に SRS の間隔 text-xs を出すが、デモでは出さない・2026-08-26 本人指示） */
.spispi-eval { display: flex; gap: 10px; }
.spispi-eval__col { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.spispi-eval__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 54px;
  padding: 6px 0;
  font-family: inherit;
  color: #0b111d;
  background-color: #fff;
  border: 1px solid oklch(0.928 0.006 264.531);
  border-radius: 14px;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.spispi-eval__btn--accent { color: #302e03; background-color: #dcf028; border-color: #dcf028; box-shadow: none; }
.spispi-eval__mark { font-size: 22px; line-height: 1; }
.spispi-eval__label { font-size: 12.5px; line-height: 1; font-weight: 700; }
.spispi-eval__srs {                            /* text-xs font-medium text-muted-foreground tabular-nums */
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: oklch(0.551 0.027 264.364);
}

/* フェーズによる出し分け（本体は phase の state で JSX を切り替える。ここは data-phase 属性で同じことをする） */
[data-phase="idle"] .spispi-lesson__ask,
[data-phase="answer"] .spispi-lesson__ask { display: none; }
[data-phase="ja"] .spispi-lesson__reveal,
[data-phase="countdown"] .spispi-lesson__reveal { display: none; }
.spispi-lesson__q { display: flex; flex: 1; flex-direction: column; min-height: 0; }   /* 本体の <div className="flex min-h-0 flex-1 flex-col"> に相当（下部バーを画面の底に付ける） */
.spispi-lesson__q[hidden] { display: none; }

/* --------------------------------------------------------------------------
   起動画面（.spispi-cover）— features F1 のアプリ紹介パネル（ProductPanel の media）。2026-08-26
   白い画面に実物の六角ロゴだけ（本体 icon-navi の六角形を切り出し）。文字は置かない（本人『画面を半分にしているので、名前は無くてよい』）。
   navy のカードの上で画面が白いほうがスマホとして読める（本人『カードがネイビーなので画面は白が良いかも』）。UI は描かない（design-system §9）
   -------------------------------------------------------------------------- */
.spispi-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 390px;
  height: 844px;
  padding-top: 112px;
  background: #ffffff;
  text-align: center;
}
.spispi-cover__hex { display: block; width: 104px; height: auto; }
.spispi-cover__copy {                 /* 起動画面のタグライン（本人 2026-08-26『白だと余白が目立つ。できることを簡潔にコピーっぽく』）。2 行まで */
  font-size: 21px;
  font-weight: 700;
  line-height: 1.6;
  color: #1f2937;
  letter-spacing: 0.02em;
}