/* ================================================================
   style.css — SAKUSAKU 全スタイル
   Figma: https://www.figma.com/design/6ehw8LWvXb2v75jvCH0Hne/UI
================================================================ */

/* ===== CSS Variables (Figmaから取得) ===== */
:root {
  /* Brand */
  --color-primary:        #ff8786;
  --color-primary-bg:     #fff6f6;

  /* Text */
  --color-dark:           #1e2939;
  --color-dark-2:         #364153;
  --color-mid:            #6a7282;
  --color-muted:          #99a1af;
  --color-disabled:       #d1d5dc;

  /* Surface */
  --color-white:          #ffffff;
  --color-body-bg:        #fafafa;
  --color-gray:           #f3f4f6;
  --color-border:         #ebedf1;

  /* Feedback */
  --color-correct:        #13ba82;
  --color-incorrect:      #ff6467;

  /* Category labels */
  --color-cat-good:       #008236;
  --color-cat-good-bg:    #e5f7ed;
  --color-cat-good-bar:   #48dc87;
  --color-cat-normal:     #d97313;
  --color-cat-normal-bg:  #fff7f6;
  --color-cat-normal-bar: #ffbe86;
  --color-cat-bad:        #c10007;
  --color-cat-bad-bg:     #fef2f2;
  --color-cat-bad-bar:    #ff6467;

  /* Radius */
  --radius-header:  0 0 32px 32px;
  --radius-card:    24px;
  --radius-menu:    20px;
  --radius-btn:     16px;
  --radius-stat:    16px;
  --radius-input:   12px;

  /* Font */
  --font: "Inter", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-brand: "Baloo 2", cursive;

  /* Safe area */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Bottom nav */
  --nav-height: 90px;
}

/* ===== Reset ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
button {
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* ===== Base ===== */
html, body {
  width: 100%;
  height: 100%;
  font-family: var(--font);
  background: var(--color-gray);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== App Shell ===== */
#app {
  width: 100%;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--color-body-bg);
  position: relative;
  overflow: hidden;
}

/* ================================================================
   SCREEN BASE
================================================================ */
.screen {
  display: none;
  width: 100%;
  min-height: 100dvh;
  flex-direction: column;
  opacity: 0;
}
.screen.active {
  display: flex;
}
/* スプラッシュ用フェード */
.screen.fade-in  { animation: fadeIn  0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.screen.fade-out { animation: fadeOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

/* 画面遷移スライド（前進） */
.screen.slide-in-fwd  { animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.screen.slide-out-fwd { animation: slideOutLeft  0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

/* 画面遷移スライド（後退） */
.screen.slide-in-back  { animation: slideInLeft   0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.screen.slide-out-back { animation: slideOutRight  0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

/* 問題内スライド（次の問題へ） */
.q-body.is-leaving  { animation: qBodyOut 0.2s ease forwards; pointer-events: none; }
.q-body.is-entering { animation: qBodyIn  0.25s ease forwards; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}
@keyframes fadeOut {
  from { opacity: 1; transform: translateY(0);    }
  to   { opacity: 0; transform: translateY(-6px); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0);    }
}
@keyframes slideOutLeft {
  from { opacity: 1; transform: translateX(0);     }
  to   { opacity: 0; transform: translateX(-32px); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0);     }
}
@keyframes slideOutRight {
  from { opacity: 1; transform: translateX(0);    }
  to   { opacity: 0; transform: translateX(32px); }
}
@keyframes qBodyOut {
  from { opacity: 1; transform: translateX(0);     }
  to   { opacity: 0; transform: translateX(-20px); }
}
@keyframes qBodyIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0);    }
}

/* ================================================================
   SCREEN 1: SPLASH  (#splash)
   Figma: first view / fill=#ff8786 / size=390x852
================================================================ */
#splash {
  background: var(--color-primary);
  align-items: center;
  justify-content: center;
}

.splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* "社内テスト専用対策アプリ"
   Figma: fill=#ffffff / fs=14 / fw=500 / ls=0 */
.splash-subtitle {
  color: var(--color-white);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

/* アイコン + SAKUSAKU 行 */
.splash-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 卒業帽アイコン: Figma size=44x49 */
.splash-icon {
  width: 44px;
  height: 49px;
  object-fit: contain;
  flex-shrink: 0;
}

/* "SAKUSAKU"
   Figma: fill=#ffffff / Baloo 2 / fs=40 / fw=400 / ls=2px */
.splash-name {
  color: var(--color-white);
  font-family: var(--font-brand);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 1;
}

/* ================================================================
   SCREEN 2: HOME  (#home)
   Figma: home / fill=#fafafa / size=390x852
================================================================ */
#home {
  background: var(--color-body-bg);
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 20px);
}

/* ----------------------------------------------------------------
   共通ヘッダー (.app-header)
   Figma: fill=#ff8786 / paddingTop=60 / paddingBottom=16 / radius 0 0 32 32
---------------------------------------------------------------- */
.app-header {
  background: var(--color-primary);
  border-radius: var(--radius-header);
  padding: calc(40px + var(--safe-top)) 32px 16px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

/* ブランド行 (アイコン + SAKUSAKU)
   Figma: Frame 12743 / paddingLeft=32 paddingRight=32 / HORIZONTAL CENTER / gap=4 */
.header-brand-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}

/* ブランドアイコン: Figma size=20x22 */
.header-brand-icon {
  width: 20px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

/* "SAKUSAKU" ブランド名
   Figma: GROUP SAKUSAKU / size=89x12 / white */
.header-brand-name {
  color: var(--color-white);
  font-family: var(--font-brand);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1;
}

/* 画面タイトル
   Figma: fill=#ffffff / fs=20 / fw=700 / lh=39px */
.header-title {
  color: var(--color-white);
  font-size: 20px;
  font-weight: 700;
  line-height: 39px;
}

/* ----------------------------------------------------------------
   ホーム ボディ
   Figma: Frame 12746 / paddingLeft=29 paddingRight=29 / paddingTop=20
---------------------------------------------------------------- */
.home-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ----------------------------------------------------------------
   学習進捗カード (.progress-card)
   Figma: Container / fill=#ffffff / radius=24 / padding=20 / size=332x196
---------------------------------------------------------------- */
.progress-card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

/* 進捗ヘッダー行 */
.progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* "学習進捗"
   Figma: fill=#364153 / fs=16 / fw=600 / ls=-0.3125px */
.progress-label {
  color: var(--color-dark-2);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.31px;
  line-height: 24px;
}

/* パーセント数値
   Figma: fill=#ff8786 / fs=20 / fw=700 / ls=-0.449px */
.progress-pct {
  color: var(--color-primary);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.45px;
  line-height: 30px;
}

/* プログレスバー
   Figma: bg=#f3f4f6 / fill=#ff8786 / h=12px / radius=full */
.progress-bar-wrap {
  background: var(--color-gray);
  border-radius: 9999px;
  height: 12px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 9999px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 統計 3列
   Figma: Container size=290x90 / HORIZONTAL / gap≈10 */
.stat-row {
  display: flex;
  gap: 10px;
}

/* 統計アイテム
   Figma: StatItem / fill=#fff6f6 / radius=16 / size=90x90 / paddingTop=12 paddingBottom=12 */
.stat-item {
  flex: 1;
  background: var(--color-primary-bg);
  border-radius: var(--radius-stat);
  height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* 統計アイコン: 16x16 */
.stat-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

/* 数値
   Figma: fill=#1e2939 / fs=17 / fw=700 / ls=-0.43px */
.stat-val {
  color: var(--color-dark);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.43px;
  line-height: 1.5;
}

/* ラベル
   Figma: fill=#6a7282 / fs=12 / fw=400 */
.stat-lbl {
  color: var(--color-mid);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

/* ----------------------------------------------------------------
   学習メニューセクション (.menu-section)
   Figma: Container size=332x362
---------------------------------------------------------------- */
.menu-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* "学習メニュー" ラベル
   Figma: fill=#6a7282 / fs=12 / fw=600 / ls=0 */
.section-label {
  color: var(--color-mid);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  padding: 0 4px;
  margin-bottom: 4px;
}

/* メニューボタン (.menu-btn)
   Figma: MenuButton / fill=#ffffff / radius=20 / padding=16 / HORIZONTAL / gap=12 */
.menu-btn {
  width: 100%;
  background: var(--color-white);
  border-radius: var(--radius-btn);
  border: 1.5px solid #ebedf1;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.menu-btn:active {
  transform: scale(0.97);
}

/* アイコンコンテナ
   Figma: fill=#ff8786 / radius=14 / size=44x44 / padding=12 */
.menu-btn-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: var(--color-primary);
  border-radius: var(--radius-btn);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.menu-btn-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* テキスト群 */
.menu-btn-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* タイトル
   Figma: fill=#1e2939 / fs=14 / fw=600 / ls=-0.15px */
.menu-btn-title {
  color: var(--color-dark);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.15px;
  line-height: 21px;
}

/* サブテキスト
   Figma: fill=#99a1af / fs=12 / fw=500 */
.menu-btn-sub {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 矢印サークル
   Figma: fill=#f3f4f6 / size=28x28 / radius=pill / "›" fs=16 fw=500 #99a1af */
.menu-btn-arrow {
  width: 28px;
  height: 28px;
  min-width: 28px;
  background: var(--color-gray);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-muted);
  line-height: 1;
  padding-left: 2px;
}

/* ================================================================
   SCREEN 3: カテゴリ選択  (#category-select)
   Figma: category select / category selected
================================================================ */
#category-select {
  background: var(--color-body-bg);
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 20px);
}

/* ボディ */
.cat-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 20px);
  display: flex;
  flex-direction: column;
}

/* カテゴリ一覧セクションラベル */
.cat-section-label {
  color: var(--color-mid);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  padding: 20px 16px 8px;
}

/* 2カラムグリッド */
.cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
  row-gap: 8px;
  padding: 0 16px;
}

/* カテゴリカード */
.cat-card {
  background: var(--color-white);
  border-radius: 20px;
  border: 1.5px solid var(--color-border);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.cat-card:active {
  transform: scale(0.97);
}

.cat-card-name {
  font-size: 14px;
  font-weight: 600;
  color: #364153;
  letter-spacing: -0.15px;
  line-height: 21px;
}

.cat-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.cat-card-progress-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cat-card-progress-label {
  font-size: 12px;
  font-weight: 500;
  color: #99a1af;
  line-height: 16px;
}

.cat-card-count {
  font-size: 12px;
  font-weight: 500;
  color: #99a1af;
  line-height: 16px;
}

/* カテゴリピッカーセクション
   Figma: Frame 12806 / size=390x74 / paddingLeft=16 paddingRight=16 */
.cat-picker-section {
  padding: 16px 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* "カテゴリを選択" ラベル
   Figma: fill=#99a1af / fs=12 / fw=600 */
.field-label {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

/* セレクトラッパー */
.select-wrap {
  position: relative;
}

/* セレクト本体
   Figma: Atoms/Form/Input/Base / fill=#ffffff / radius=12 / padding=12 16 / fs=14 fw=400 */
.select-wrap select {
  width: 100%;
  height: 48px;
  background: var(--color-white);
  border: none;
  border-radius: var(--radius-input);
  padding: 0 44px 0 16px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-dark);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
}
.select-wrap select.placeholder {
  color: var(--color-muted);
}

/* カスタムチェブロン
   Figma: Icon / size=20x20 / chevron shape */
.select-chevron {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.select-chevron svg {
  width: 10px;
  height: 6px;
}

/* 出題形式ボタンセクション
   Figma: Frame 12763 / paddingLeft=16 paddingRight=16 / gap=8 */
.mode-buttons {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 出題形式ボタン
   Figma: MenuButton / fill=#ffffff / radius=20 / padding=16 / size=358x73 */
.mode-btn {
  width: 100%;
  background: var(--color-white);
  border-radius: var(--radius-menu);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  transition: transform 0.12s ease;
}
.mode-btn:not(:disabled):active {
  transform: scale(0.97);
}
.mode-btn:disabled {
  cursor: default;
}

.mode-btn-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* タイトル: disabled=#d1d5dc / 未回答enabled=#008236 / ランダムenabled=#d97313
   Figma: fs=14 / fw=600 */
.mode-btn-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  color: var(--color-disabled);
}
.mode-btn--unanswered:not(:disabled) .mode-btn-title { color: var(--color-cat-good); }
.mode-btn--random:not(:disabled)    .mode-btn-title { color: var(--color-cat-normal); }

/* サブテキスト
   Figma: fs=12 / fw=500 / disabled=#d1d5dc / enabled=#99a1af */
.mode-btn-sub {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--color-disabled);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mode-btn:not(:disabled) .mode-btn-sub { color: var(--color-muted); }

/* 矢印サークル
   Figma: fill=#f3f4f6 / size=28x28 / radius=pill */
.mode-btn-arrow {
  width: 28px;
  height: 28px;
  min-width: 28px;
  background: var(--color-gray);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-disabled);
  line-height: 1;
  padding-left: 2px;
}
.mode-btn:not(:disabled) .mode-btn-arrow { color: var(--color-muted); }

/* ================================================================
   MODAL: 出題形式選択  (#mode-modal)
================================================================ */
#mode-modal {
  background: rgba(54, 65, 83, 0.5);
}

#mode-modal .modal-box {
  padding-bottom: calc(64px + var(--safe-bottom));
}

#interrupt-modal:not([hidden]) .modal-box,
#mode-modal:not([hidden]) .modal-box,
#reset-modal:not([hidden]) .modal-box {
  animation: slideUp 0.25s ease;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.mode-modal-content {
  display: flex;
  flex-direction: column;
}

.mode-modal-back-btn {
  margin-top: 24px;
}

.mode-modal-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mode-modal-cat-name {
  font-size: 18px;
  font-weight: 700;
  color: #1e2939;
  line-height: 27px;
}

.mode-modal-count {
  font-size: 13px;
  font-weight: 400;
  color: #99a1af;
  line-height: 20px;
}

.mode-modal-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.mode-modal-btn {
  width: 100%;
  background: var(--color-white);
  border-radius: 16px;
  border: 1.5px solid #ebedf0;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.mode-modal-btn:not(:disabled):active {
  transform: scale(0.97);
}
.mode-modal-btn:disabled {
  cursor: default;
}

.mode-modal-btn-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mode-modal-btn-icon--unanswered { background: #e5f6ec; }
.mode-modal-btn-icon--random     { background: #e5eef6; }
.mode-modal-btn-icon--all        { background: #ffeae7; }

.mode-modal-btn-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.mode-modal-btn:disabled .mode-modal-btn-icon {
  background: #f3f4f6;
}
.mode-modal-btn:disabled .mode-modal-btn-icon img {
  filter: brightness(0) invert(1) brightness(0.82);
}

.mode-modal-btn-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mode-modal-btn-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  color: #d1d5dc;
}
.mode-modal-btn:not(:disabled) .mode-modal-btn-title { color: #1e2939; }

.mode-modal-btn-sub {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #d1d5dc;
}
.mode-modal-btn:not(:disabled) .mode-modal-btn-sub { color: #99a1af; }

.mode-modal-btn-arrow {
  width: 28px;
  height: 28px;
  min-width: 28px;
  background: #f3f4f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  color: #d1d5dc;
  line-height: 1;
  padding-left: 2px;
}
.mode-modal-btn:not(:disabled) .mode-modal-btn-arrow { color: #99a1af; }

.mode-modal-back-btn {
  width: 100%;
  height: 56px;
  background: #f3f4f6;
  border-radius: 16px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  color: #4a5565;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.mode-modal-back-btn:active {
  transform: scale(0.97);
}

/* ================================================================
   GLOBAL BOTTOM NAV (#bottom-nav)
   Figma: Tab Bars / fill=#ffffff / height=57px / paddingTop=8
================================================================ */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: calc(var(--nav-height) + var(--safe-bottom));
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: flex-start;
  padding-top: 8px;
  padding-bottom: var(--safe-bottom);
  z-index: 100;
}
.bottom-nav[hidden] { display: none; }

/* ナビアイテム */
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 8px 2px;
  position: relative;
  color: var(--color-muted);
}

/* ナビアイコン: 24x24 */
.nav-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

/* アイコン切り替え: active/inactive */
.nav-item .nav-icon-active   { display: none; }
.nav-item .nav-icon-inactive { display: block; }
.nav-item.active .nav-icon-active   { display: block; }
.nav-item.active .nav-icon-inactive { display: none; }

/* ラベル
   Figma: fill=#99a1af (inactive) / fill=#ff8786 (active) / fs=12 / fw=500 */
.nav-label {
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-muted);
}
.nav-item.active .nav-label {
  color: var(--color-primary);
}

/* おさらいバッジ
   Figma: fill=#ff8786 / size=16x16 / radius=pill / fs=10 fw=700 white */
.nav-badge {
  position: absolute;
  top: 14px;
  left: calc(50% + 14px);
  background: #3D9CFC;
  color: var(--color-white);
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 9999px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}
.nav-badge.visible {
  display: flex;
}

/* ================================================================
   SCREEN 5-10: 出題画面  (#question)
   Figma: FourChoiceQuestion / FillBlankQuestion
================================================================ */
#question {
  background: var(--color-body-bg);
}

/* ヘッダー
   Figma: white bg / paddingTop=60 / paddingLeft=20 paddingRight=20 */
.q-header {
  background: var(--color-white);
  flex-shrink: 0;
}

.q-header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(40px + var(--safe-top)) 20px 12px;
}

/* X ボタン */
.q-close-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.q-close-btn img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* カテゴリ + カウンター行 */
.q-meta {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* カテゴリ名
   Figma: fill=#6a7282 / fs=12 / fw=500 */
.q-category {
  color: var(--color-mid);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

/* "1 / 10" カウンター
   Figma: fill=#99a1af / fs=12 / fw=500 */
.q-counter {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

/* プログレスバー
   Figma: h=4px / bg=#f3f4f6 / fill=#ff8786 */
.q-progress-wrap {
  height: 4px;
  background: var(--color-gray);
  overflow: hidden;
}
.q-progress-fill {
  height: 100%;
  background: var(--color-primary);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ボディ（スクロール領域・次ボタンの高さ分を下に余白）
   Figma: padding=16 / gap=12 */
.q-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 問題カード
   Figma: white / radius=24 / padding=20 */
.q-card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding: 20px;
}

/* Q バッジ行 */
.q-badge-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* "Q" バッジ
   Figma: fill=#ff8786 / size=24x24 / radius=8 / fs=13 fw=700 white */
.q-badge {
  width: 24px;
  height: 24px;
  min-width: 24px;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* 問題文
   Figma: fill=#1e2939 / fs=15 / fw=500 / lh=24px */
.q-text {
  flex: 1;
  color: var(--color-dark);
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
}

/* 選択肢リスト */
.q-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 選択肢ボタン
   Figma: ChoiceButton / fill=#ffffff / radius=14 / padding=14 16 / gap=12 */
.choice-btn {
  width: 100%;
  background: var(--color-white);
  border-radius: var(--radius-btn);
  border: 1.5px solid transparent;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  transition: transform 0.1s ease, border-color 0.15s ease, background 0.15s ease;
}
.choice-btn:not(:disabled):active {
  transform: scale(0.98);
}
.choice-btn:disabled {
  cursor: default;
}

/* A/B/C/D ラベル
   Figma: circle / size=28x28 / fill=#f3f4f6 / fs=13 fw=700 #99a1af */
.choice-label {
  width: 28px;
  height: 28px;
  min-width: 28px;
  background: var(--color-gray);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-muted);
  flex-shrink: 0;
}

/* 選択肢テキスト
   Figma: fill=#364153 / fs=14 / fw=500 / lh=20px */
.choice-text {
  flex: 1;
  color: var(--color-dark-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

/* --- 選択肢 状態 --- */

/* 正解選択 */
.choice-btn.is-correct {
  background: var(--color-cat-good-bg);
  border-color: var(--color-correct);
}
.choice-btn.is-correct .choice-label {
  background: var(--color-correct);
  color: var(--color-white);
}

/* 不正解選択 */
.choice-btn.is-wrong {
  background: var(--color-cat-bad-bg);
  border-color: var(--color-incorrect);
}
.choice-btn.is-wrong .choice-label {
  background: #ed5d5b;
  color: var(--color-white);
}

/* 正解強調（不正解時に正解を示す） */
.choice-btn.show-correct {
  background: var(--color-cat-good-bg);
  border-color: var(--color-correct);
}
.choice-btn.show-correct .choice-label {
  background: var(--color-correct);
  color: var(--color-white);
}

/* スキップ（右寄せ） */
.q-skip-wrap {
  display: flex;
  justify-content: flex-end;
}

/* スキップリンク
   Figma: fill=#99a1af / fs=12 / fw=500 / underline */
.q-skip-btn {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 500;
  text-decoration: underline;
  padding: 4px 0;
}

/* フィードバックバナー */
.q-feedback {
  border-radius: var(--radius-card);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.q-feedback[hidden] { display: none; }

/* 正解フィードバック */
.q-feedback.is-correct {
  background: var(--color-cat-good-bg);
  border-radius: 20px;
}

/* 不正解フィードバック */
.q-feedback.is-incorrect {
  background: var(--color-cat-bad-bg);
}

/* フィードバック見出し行 */
.q-feedback-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 正解/不正解 テキスト
   Figma: fs=14 / fw=700 */
.q-feedback-result {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}
.q-feedback.is-correct  .q-feedback-result { color: #13ba82; }
.q-feedback.is-incorrect .q-feedback-result { color: #ed5d5b; }

/* 解説カード（白） */
.q-explanation-card {
  background: var(--color-white);
  border-radius: var(--radius-input);
  padding: 12px;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-dark-2);
  line-height: 20px;
}

/* 不正解時の正解ラベル「正解：B」
   Figma: Inter SemiBold 15px / fill=#1e2939 */
.q-correct-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-dark);
  line-height: 20px;
}

/* 正解の選択肢記号 (B, C など) を緑で表示 */
.q-correct-label-letter {
  color: #008236;
  font-weight: 700;
}

/* 次の問題ラッパー（画面下固定 / q-bodyの外・#questionのフレックス末尾）
   Figma: bottom固定 / ボトムナビとのマージン=24px */
.q-next-wrap {
  flex-shrink: 0;
  padding: 8px 16px calc(24px + var(--safe-bottom));
  background: var(--color-body-bg);
}

/* 次の問題ボタン
   Figma: disabled=white+#d1d5dc / enabled=#ff8786+white / radius=14 / h=52px */
.q-next-btn {
  width: 100%;
  height: 52px;
  border-radius: var(--radius-btn);
  background: var(--color-white);
  border: 1.5px solid var(--color-disabled);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.q-next-btn:not(:disabled) {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.q-next-btn:not(:disabled):active {
  transform: scale(0.97);
}

.q-next-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-disabled);
  transition: color 0.2s ease;
}
.q-next-btn:not(:disabled) .q-next-label {
  color: var(--color-white);
}

.q-next-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* ================================================================
   記述問題 テキスト入力 & 模範解答 (Screens 11–14)
================================================================ */

/* テキスト入力ラッパー */
.text-answer-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 「あなたの解答」ラベル行 */
.text-answer-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.text-answer-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
}

/* 「あなたの解答」ラベル
   Figma: fs=12 / fw=600 / fill=#99A1AF */
.text-answer-label {
  font-size: 12px;
  font-weight: 600;
  color: #99A1AF;
  line-height: 1;
}

/* テキストエリア
   Figma: border=#ebedf1 / radius=12 / padding=14 16 / fs=15 */
.text-answer-input {
  width: 100%;
  min-height: 120px;
  padding: 14px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-input);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-dark);
  background: var(--color-white);
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}
.text-answer-input:focus {
  border-color: var(--color-primary);
}
.text-answer-input::placeholder {
  color: var(--color-muted);
}

/* 読み取り専用（模範解答表示後） */
.text-answer-input:read-only {
  background: var(--color-gray);
  border-color: transparent;
  color: var(--color-dark-2);
  resize: none;
  cursor: default;
}

/* 自己採点後: 正解 → 緑 */
.text-answer-input.is-answered-correct {
  background: #e5f7ed;
  border-color: transparent;
  box-shadow: none;
}

/* 自己採点後: 不正解 → 赤 */
.text-answer-input.is-answered-wrong {
  background: #fef2f2;
  border-color: transparent;
  box-shadow: none;
}

/* 「模範解答を確認する」ボタン
   Figma: bg=#fff / border=1.5px / radius=14 / h=52 / fs=15 fw=700 */
.text-submit-btn {
  width: 100%;
  height: 52px;
  border-radius: var(--radius-btn);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  /* disabled（デフォルト）状態 */
  background: #FFFFFF;
  color: #E5E7EB;
  border: 1.5px solid #E5E7EB;
  cursor: not-allowed;
}

/* 活性時 */
.text-submit-btn:not(:disabled) {
  background: #FFFFFF;
  color: #FF8786;
  border-color: #FF8786;
  cursor: pointer;
  box-shadow: none;
}
.text-submit-btn:not(:disabled):active {
  transform: scale(0.97);
}

/* ボタン内アイコン（visible.icon.svg: stroke=#FF8786 固定）*/
.text-submit-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}
/* disabled時: #FF8786 → #E5E7EB に近似フィルター */
.text-submit-btn:disabled .text-submit-icon {
  filter: grayscale(1) brightness(1.45);
}

/* フィードバック: 自己採点前（中立状態） */
.q-feedback.is-text-pending {
  background: transparent;
  padding: 0;
  gap: 12px;
}

/* 模範解答カード */
.q-model-answer-card {
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* "模範解答" ラベル */
.q-model-label {
  font-size: 12px;
  font-weight: 700;
  color: #13ba82;
  line-height: 18px;
  padding: 0 4px;
}

/* 模範解答テキストボックス */
.q-model-text-box {
  background: #e5f7ed;
  border-radius: 16px;
  padding: 16px;
}

/* 模範解答テキスト */
.q-model-text {
  font-size: 14px;
  font-weight: 500;
  color: #1e2939;
  line-height: 21px;
}

/* 補足解説 */
.q-model-explanation {
  font-size: 13px;
  color: var(--color-mid);
  line-height: 1.6;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}

/* 自己採点セクション */
.q-self-assess {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* "自己採点してください" ラベル（両サイドにライン） */
.q-self-assess-label {
  font-size: 13px;
  font-weight: 600;
  color: #4A5565;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.q-self-assess-label::before,
.q-self-assess-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #99A1AF;
}

/* 自己採点ボタン行 */
.q-self-assess-btns {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

/* 自己採点ボタン共通 */
.q-self-btn {
  flex: 1;
  padding: 10px 8px;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--font);
  box-shadow: 0 1px 2px -1px rgba(0,0,0,0.1), 0 1px 3px 0 rgba(0,0,0,0.1);
}
.q-self-btn:active {
  transform: scale(0.97);
}

/* 正解ボタン */
.q-self-btn--correct {
  background: #13ba82;
  border-color: #2ed674;
}

/* 不正解ボタン */
.q-self-btn--wrong {
  background: #ff8787;
  border-color: #2ed674;
}

/* ボタン内メインテキスト */
.q-self-btn-main {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  line-height: 24px;
}

/* ボタン内サブテキスト */
.q-self-btn-sub {
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
  line-height: 18px;
}

/* 採点結果記録ボタン（自己採点後に表示） */
.q-self-result-btn {
  width: 100%;
  height: 52px;
  border-radius: 16px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  cursor: default;
  box-shadow: none;
}
.q-self-result-btn--correct {
  background: #e5f6ec;
  color: #13ba82;
}
.q-self-result-btn--wrong {
  background: #fef2f2;
  color: #ff8786;
}

/* ================================================================
   おさらいリスト (#review-list)
   Figma: review mode / review mode no data
================================================================ */

/* ヘッダー内グリーティング */
.header-greeting {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  margin-bottom: 0;
}

/* ================================================================
   SCREEN 18: 予想問題リスト
================================================================ */
.practice-body {
  flex: 1;
  overflow-y: auto;
  padding: 32px 16px calc(90px + var(--safe-bottom));
}

#practice-list-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.practice-card {
  width: 100%;
  background: #ffffff;
  border-radius: 16px;
  border: 1.5px solid #ebedf1;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  text-align: left;
}

.practice-card:disabled {
  opacity: 0.4;
  cursor: default;
}

.practice-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.practice-card-icon img {
  width: 20px;
  height: 20px;
}

.practice-card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.practice-card-label {
  font-size: 14px;
  font-weight: 600;
  color: #364153;
  line-height: 16px;
}

.practice-card-sub {
  font-size: 12px;
  font-weight: 500;
  color: #99a1af;
  line-height: 16px;
}

.practice-card-arrow {
  width: 28px;
  height: 28px;
  min-width: 28px;
  background: var(--color-gray);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-muted);
  line-height: 1;
  padding-left: 2px;
  flex-shrink: 0;
}

/* おさらいボディ */
.review-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 32px 16px calc(90px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 24px;
}

#review-content.slide-from-right {
  animation: reviewSlideFromRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#review-content.slide-from-left {
  animation: reviewSlideFromLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes reviewSlideFromRight {
  from { transform: translateX(32px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes reviewSlideFromLeft {
  from { transform: translateX(-32px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* すべて復習するボタン */
.review-start-btn {
  width: 100%;
  height: 52px;
  border-radius: 16px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.review-start-btn:disabled {
  background: #ffffff;
  border: 2px solid #e5e7eb;
  color: #d1d5dc;
  cursor: default;
}
.review-start-btn:not(:disabled) {
  background: var(--color-primary);
  border: none;
  color: #ffffff;
  cursor: pointer;
}
.review-start-btn:not(:disabled):active {
  transform: scale(0.97);
}

/* 空状態（全問正解継続中） */
.review-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
}
.review-empty-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.review-empty-text {
  font-size: 16px;
  font-weight: 600;
  color: #d1d5dc;
  line-height: 24px;
}

/* 問題カードリスト */
.review-list-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 問題カード */
.review-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  box-shadow: 0 1px 2px -1px rgba(0,0,0,0.1), 0 1px 3px 0 rgba(0,0,0,0.1);
  cursor: pointer;
}

/* Q バッジ */
.review-card-badge {
  background: var(--color-primary);
  border-radius: 50%;
  width: 22px;
  min-width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

/* カード内問題文 */
.review-card-text {
  flex: 1;
  color: #1e2939;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.625;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* 削除ボタン */
.review-card-delete {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: #6a7282;
  flex-shrink: 0;
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
}
.review-card-delete:active {
  opacity: 0.4;
}

/* ================================================================
   MODAL: 学習中断  (#interrupt-modal)
   Figma: interrupt modal
================================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(54, 65, 83, 0.6);
  display: flex;
  align-items: flex-end;
  z-index: 200;
}
.modal-overlay[hidden] { display: none; }

.modal-box {
  width: 100%;
  background: #ffffff;
  border-radius: 28px 28px 0 0;
  padding: 24px 24px calc(32px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.modal-handle {
  width: 40px;
  height: 4px;
  background: #e5e7eb;
  border-radius: 999px;
  margin: 0 auto;
}

.modal-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.modal-texts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
}

.modal-title {
  font-size: 18px;
  font-weight: 700;
  color: #1e2939;
  line-height: 27px;
}

.modal-body {
  font-size: 14px;
  font-weight: 400;
  color: #6a7282;
  line-height: 23px;
}

.modal-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-btn {
  width: 100%;
  height: 56px;
  border-radius: 16px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.modal-btn:active { transform: scale(0.97); }

.modal-btn--primary {
  background: #1e2939;
  color: #ffffff;
}

.modal-btn--secondary {
  background: #f3f4f6;
  color: #4a5565;
}

.modal-btn--danger {
  height: 59px;
  background: var(--color-white);
  border: 1.5px solid #ff6467;
  color: #ff6467;
}

/* ================================================================
   SCREEN 19/19-2: 結果画面  (#result)
   Figma: result_default / result_All corrected
================================================================ */
#result {
  background: var(--color-body-bg);
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 20px);
}

.result-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* スコアカード
   Figma: white / radius=24 / padding=24 / size=350×227 */
.score-card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 統計テーブル（左側） */
.score-stats {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.score-stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* カラードット
   Figma: 合計=#E5E7EB / 正解=#10B981 / 不正解=#FFA2A2 */
.score-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.score-dot--total   { background: #E5E7EB; }
.score-dot--correct { background: #10B981; }
.score-dot--wrong   { background: #FFA2A2; }

/* ラベル
   Figma: fill=#99A1AF / fs=12 / fw=400 */
.score-stat-label {
  flex: 1;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 400;
}

/* 値
   Figma: fill=#1E2939 / fs=22 / fw=700 */
.score-stat-value {
  color: var(--color-dark);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1;
}

/* 「問」の文字に2pxの左スペース */
.score-stat-mon {
  margin-left: 2px;
}

/* 円グラフ（右側）
   Figma: size=128×128 / conic-gradient */
.score-ring-wrap {
  flex-shrink: 0;
}

.score-ring {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(#E5E7EB 0% 100%); /* JS の animateResult() が上書きする */
}

/* 内側白円（ドーナツ）: リング厚さ≈13px (2/3 of 20px) */
.score-ring-inner {
  width: 102px;
  height: 102px;
  background: var(--color-white);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

/* "正答率" ラベル
   Figma: fill=#99A1AF / fs=12 / fw=400 */
.score-ring-label {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
}

/* パーセント値
   Figma: fill=#1E2939 / fs=22 / fw=700 */
.score-ring-pct {
  color: var(--color-dark);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

/* コメントテキスト
   Figma: fill=#FF8786 / fs=14 / fw=500 / text-align=center */
.result-comment {
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  padding: 0 12px;
}

/* ボタン群 */
.result-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

/* ボタン共通
   Figma: radius=20 / h=56px / fs=15 fw=600 */
.result-btn {
  width: 100%;
  height: 56px;
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.result-btn:active { transform: scale(0.97); }
.result-btn[hidden] { display: none; }

/* プライマリ「間違えた問題をおさらいする」
   Figma: fill=#FF8786 / color=white / icon=20x20 */
.result-btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
  gap: 8px;
}

/* セカンダリ「ホームに戻る」（アウトラインボタン）
   Figma: fill=white / stroke=#FF8786 2px / radius=20 / h=60 / shadow */
.result-btn--secondary {
  background: var(--color-white);
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  height: 60px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.10),
    0 1px 3px rgba(0, 0, 0, 0.10);
  gap: 8px;
}

/* セカンダリボタン内アイコン: 20x20 */
.result-btn-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ================================================================
   SCREEN 20: 成績ダッシュボード
================================================================ */
.stats-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 16px calc(90px + var(--safe-bottom) + 32px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.stats-reset-btn {
  width: 100%;
  height: 59px;
  background: var(--color-white);
  border: 1.5px solid #ff6467;
  border-radius: 16px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  color: #ff6467;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-top: auto;
  flex-shrink: 0;
  transition: transform 0.12s ease;
}
.stats-reset-btn:active {
  transform: scale(0.97);
}

.stats-summary-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stats-summary-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stats-summary-label {
  font-size: 16px;
  font-weight: 600;
  color: #1e2939;
}

.stats-summary-pct {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
}

/* カテゴリ別正答率 カード */
.stats-cat-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stats-cat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stats-cat-title {
  font-size: 16px;
  font-weight: 700;
  color: #364153;
}

.stats-cat-badge {
  font-size: 12px;
  font-weight: 600;
  color: #ff8786;
  background: #fff7f6;
  border-radius: 999px;
  padding: 3px 12px;
  white-space: nowrap;
}

/* カテゴリ行リスト */
#stats-cat-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.stats-cat-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 32px;
}

.stats-cat-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stats-cat-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stats-cat-name {
  font-size: 14px;
  font-weight: 600;
  color: #364153;
  line-height: 1.4;
}

.stats-cat-pct {
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

.stats-cat-bar-wrap {
  height: 8px;
  background: #f3f4f6;
  border-radius: 999px;
  overflow: hidden;
}

.stats-cat-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s ease;
}

.stats-cat-chip {
  font-size: 12px;
  font-weight: 600;
  width: 50px;
  height: 18px;
  padding: 1px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 状態別カラー */
.stats-cat-pct--good   { color: #13ba82; }
.stats-cat-pct--normal { color: #f2b177; }
.stats-cat-pct--bad    { color: #ed5d5b; }
.stats-cat-pct--none   { color: #99a1af; }

.stats-cat-chip--good   { background: #e5f7ed; color: #13ba82; }
.stats-cat-chip--normal { background: #fff7f6; color: #d97313; }
.stats-cat-chip--bad    { background: #fef2f2; color: #ed5d5b; }
.stats-cat-chip--none   { background: #f3f4f6; color: #99a1af; }

.stats-cat-bar-fill--good   { background: #48dc87; }
.stats-cat-bar-fill--normal { background: #ffbe86; }
.stats-cat-bar-fill--bad    { background: #ff6467; }
.stats-cat-bar-fill--none   { background: #d1d5dc; }

/* ================================================================
   おさらいリスト タブバー
================================================================ */
#review-list {
  background: var(--color-body-bg);
}

.review-tabs {
  display: flex;
  background: transparent;
  border-bottom: 1.5px solid var(--color-border);
  flex-shrink: 0;
  margin-top: 24px;
  position: relative;
}

.review-tab {
  flex: 1;
  padding: 12px 8px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: color 0.25s ease;
}

.review-tab.active {
  color: var(--color-primary);
}

.review-tab-indicator {
  position: absolute;
  bottom: -1.5px;
  left: 0;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px 2px 0 0;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.review-tab-indicator.no-transition {
  transition: none;
}

.review-tab-badge {
  background: #3D9CFC;
  color: var(--color-white);
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}

.review-tab-badge:empty {
  display: none;
}

/* ================================================================
   出題画面 アクションボタン (おさらい追加 / アーカイブ)
================================================================ */
.q-action-wrap {
  flex-shrink: 0;
  padding: 0 16px 8px;
  background: var(--color-body-bg);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.q-action-wrap[hidden] { display: none; }

.q-action-btn {
  width: 100%;
  height: 56px;
  border-radius: 16px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  cursor: pointer;
}
.q-action-btn:active { transform: scale(0.97); }

.q-action-btn-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

/* おさらい追加 - 未追加（破線ボーダー・グレー） */
.q-action-btn--dashed {
  background: transparent;
  border: 1.5px dashed #D1D5DC;
  color: #9CA3AF;
}

/* おさらい追加 - 追加済み（破線ボーダー・ピンク） */
.q-action-btn--added {
  background: var(--color-white);
  border: 1.5px dashed var(--color-primary);
  color: var(--color-primary);
}

/* アーカイブボタン - 初期状態（破線ボーダー・グレー） */
.q-action-btn--archive {
  background: transparent;
  border: 1.5px dashed #D1D5DC;
  color: #9CA3AF;
}

/* アーカイブボタン - アーカイブ済み（破線ボーダー・ブルー） */
.q-action-btn--archived {
  background: transparent;
  border: 1.5px dashed #3D9CFC;
  color: #3D99FC;
}

/* ================================================================
   トースト通知
================================================================ */
.toast {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: rgba(30, 41, 57, 0.9);
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 20px;
  border-radius: 9999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 300;
  white-space: nowrap;
}

.toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}