/* Alpine.js: 初期化完了までの FOUC 防止 */
[x-cloak] { display: none !important; }

/* :root と prefers-reduced-motion は v2/tokens.css で定義 */

:focus-visible { outline: none; box-shadow: var(--glow-focus); }

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* Web フォントは使わない（システムフォントのみ）。
     かつては 'Inter' と全言語ぶんの Noto 系（JP/SC/TC/Myanmar/Be Vietnam Pro）を
     並べていたが、Google Fonts は日本語を unicode-range で 24 個以上のサブセットに
     分割配信するため、届くたびに再描画されて文字が一瞬揺れていた（全ページで発生）。
     詳しい経緯は layouts/app.blade.php のコメントを参照。
     OS 標準の UI フォントに寄せることで、初回描画から最終描画まで一貫する。 */
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system, BlinkMacSystemFont,
    'Segoe UI',
    'Hiragino Kaku Gothic ProN',
    'Hiragino Sans',
    'Yu Gothic Medium',
    '游ゴシック Medium',
    YuGothic,
    'Yu Gothic',
    Meiryo,
    sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  cursor: pointer;
  border: none;
  border-radius: var(--radius);
  font-size: 16px;
  padding: 12px 24px;
  line-height: 1.4;
  font-family: inherit;
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 選択肢ボタン */
.choice-btn {
  display: block;
  width: 100%;
  min-height: 52px;
  text-align: left;
  padding: 14px 16px;
  font-size: 17px;
  line-height: 1.6;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  transition: border-color var(--dur-fast) var(--ease-out),
              background   var(--dur-fast) var(--ease-out),
              transform    var(--dur-fast) var(--ease-out);
}

.choice-btn:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}

.choice-btn.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.choice-btn.correct {
  border-color: var(--mint);
  background: var(--mint-soft);
}

.choice-btn.wrong {
  border-color: var(--peach);
  background: var(--peach-soft);
  animation: shake var(--dur-slow) var(--ease-out);
}

@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-3px); }
  40%      { transform: translateX(3px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(2px); }
}

/* モーダル */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.modal-box {
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: 32px;
  max-width: 540px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  line-height: 1.7;
  animation: modal-in var(--dur-slow) var(--ease-out);
  box-shadow: var(--shadow-lg);
}

@keyframes modal-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* モーダル内要素 */
.modal-h2     { margin-top: 0; }
.modal-para   { margin-bottom: 12px; }
.btn-modal-accept { margin-top: 8px; width: 100%; }
.btn-modal-close  { margin-top: 8px; }
.modal-btn-group  { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }

/* ヘッダー */
.site-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}

/* ヘッダーロゴドット */
.site-logo-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  display: inline-block;
}

.site-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-title:hover {
  text-decoration: none;
}

.site-title-main {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.site-title-sub {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
}

/* 狭い端末ではサイト名（HICROSSのJLPT単語帳）が言語切替・ログインと競合するため
   はみ出さないよう font-size を段階的に縮小する（短縮名・別名は作らない方針）。 */
@media (max-width: 400px) {
  .site-title-main { font-size: 15px; letter-spacing: 0; }
}
@media (max-width: 360px) {
  .site-title-main { font-size: 14px; }
}

/* ===== 言語切替（共通） ===== */
.lang-switch { position: relative; }

.lang-option {
  display: block;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.lang-option:hover { background: var(--bg-subtle); text-decoration: none; }

.lang-option.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

/* --- SM/MD: グローブアイコン + ドロップダウン --- */
.lang-globe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;            /* グローバル button の padding をリセット */
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.lang-globe-btn:hover { background: var(--bg-subtle); border-color: var(--border-strong); }
.lang-globe-btn[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
.lang-globe-icon { width: 22px; height: 22px; flex-shrink: 0; }

.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  min-width: 180px;
  padding: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.lang-dropdown-heading {
  margin: 4px 8px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* サイドバー見出しは LG ブロックでのみ表示 */
.lang-list-heading { display: none; }

/* ヘッダーナビリンク・ボタン */
.header-login-link {
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  padding: 4px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}

.header-register-link {
  font-size: 13px;
  color: #fff;
  background: var(--accent);
  text-decoration: none;
  padding: 4px 12px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
}

.header-logged-in {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-admin-link {
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
}

.header-user-link {
  font-size: 13px;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.header-logout-btn {
  font-size: 13px;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 4px 12px;
  font-family: inherit;
}

/* モバイルメニュー内ユーザーリンク */
.mobile-user-link {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ヘッダー右側ラッパー */
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 管理画面ショートカット（admin のみ）。
   521〜1023px は header-nav-desktop の「管理画面」テキストリンクが出るため隠し、
   その nav が消える ≤520px でのみ表示する（重複回避）。 */
.header-admin-shortcut {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.header-admin-shortcut:hover { background: var(--accent); color: #fff; text-decoration: none; }
.header-admin-shortcut-icon { width: 20px; height: 20px; flex-shrink: 0; }

/* デスクトップナビ（モバイルでは非表示） */
.header-nav-desktop {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ハンバーガーボタン（デスクトップでは非表示） */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  min-width: 40px;
  min-height: 40px;
}

.hamburger-btn .bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}

.hamburger-btn.open .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.open .bar:nth-child(2) { opacity: 0; }
.hamburger-btn.open .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* モバイルドロップダウンメニュー */
.mobile-menu {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  z-index: 200;
  padding: 8px 0;
}

.mobile-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 12px 20px;
  font-size: 15px;
  text-decoration: none;
  color: var(--text);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  border-radius: 0;
  line-height: 1.4;
}

.mobile-menu-item:active {
  background: var(--bg-subtle);
}

.mobile-menu-item.accent {
  color: var(--text);
}

@media (max-width: 520px) {
  .header-nav-desktop { display: none; }
  .header-admin-shortcut { display: inline-flex; }
}

/* フッター */
.site-footer {
  border-top: 3px solid var(--accent);
  background: var(--bg-card);
  padding: 16px 20px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.footer-links { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; row-gap: 6px; }

.footer-links-social { margin-top: 2px; }

.footer-disclaimer-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  font-family: inherit;
}

.footer-sep {
  margin: 0 10px;
  color: var(--text-subtle);
}

.footer-privacy-link {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: 12px;
}

.footer-copyright {
  font-size: 12px;
  color: var(--text-muted);
}

/* セクション見出し装飾 */
.section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
}

.section-heading-bar {
  width: 4px;
  height: 20px;
  background: var(--accent);
  border-radius: 1px;
  flex-shrink: 0;
}

.section-heading h1 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0;
}

.section-heading h2 {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin: 0;
}

/* レベルグリッド */
.level-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 36px;
}

@media (max-width: 520px) {
  .level-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ユーティリティ */
.btn-primary {
  background: var(--text);
  color: #ffffff;
  font-weight: 500;
  padding: 14px 32px;
  font-size: 16px;
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow  var(--dur-fast) var(--ease-out),
              transform   var(--dur-fast) var(--ease-out);
}

.btn-primary:hover:not(:disabled) {
  background: #333333;
  box-shadow: var(--shadow-sm);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(1px);
}

.btn-secondary {
  background: var(--bg-subtle);
  color: var(--text);
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow  var(--dur-fast) var(--ease-out),
              transform   var(--dur-fast) var(--ease-out);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--border);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:active:not(:disabled) {
  transform: translateY(1px);
}

/* 進行状況バー */
.progress-bar-wrap {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  margin-bottom: 20px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 3px;
  transition: width var(--dur-slow) var(--ease-out);
}

/* エラー表示 */
.error-message {
  color: var(--wrong);
  padding: 12px;
  background: var(--peach-soft);
  border-radius: var(--radius);
  margin: 12px 0;
}

/* ローディング */
.loading-text {
  color: var(--text-muted);
  text-align: center;
  padding: 24px;
}

/* ===== 管理画面レスポンシブ ===== */

/* admin-hamburger はデスクトップでは非表示 */
.admin-hamburger {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  border-radius: 4px;
  min-width: 40px;
  min-height: 40px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.admin-hamburger .bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}

.admin-hamburger.open .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.admin-hamburger.open .bar:nth-child(2) { opacity: 0; }
.admin-hamburger.open .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  /* レイアウト: サイドバー → トップバー */
  .admin-wrapper {
    flex-direction: column !important;
  }

  .admin-nav {
    width: 100% !important;
    flex-direction: column !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .admin-nav-title-bar {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px !important;
    height: 52px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }

  .admin-hamburger {
    display: flex;
  }

  /* モバイルではタイトルの下線を非表示（titleBar の border-bottom で代替） */
  .admin-nav-title-bar span {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }

  /* ナビリンク: デフォルト非表示、open で表示 */
  /* inline style (display:flex) を上書きするため !important が必要 */
  .admin-nav-links {
    display: none !important;
    flex-direction: column !important;
    border-top: 1px solid rgba(255,255,255,0.2);
  }

  .admin-nav-links.open {
    display: flex !important;
  }

  .admin-logout-btn {
    margin: 8px 16px !important;
  }

  /* メインコンテンツ: 幅いっぱい */
  .admin-main {
    padding: 16px !important;
    max-width: 100% !important;
  }

  /* 問題一覧: テーブル横スクロール */
  .admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 問題一覧: topBar を折り返し */
  .admin-top-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* 問題一覧: フィルター行を縦積み */
  .admin-filters {
    flex-direction: column !important;
  }

  /* 統計: 2カラムグリッド */
  .admin-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* フォームモーダル: padding を縮小 */
  .admin-modal {
    padding: 16px !important;
  }

  /* フォーム: セクション/レベル/ステータス行を折り返し */
  .admin-form-row {
    flex-wrap: wrap !important;
  }

  /* フォーム: 選択肢入力を縦積み */
  .admin-choice-row {
    flex-wrap: wrap !important;
  }

  .admin-choice-row > input {
    width: 100%;
    min-width: 0;
  }

  /* CSVインポート: ボタンを全幅 */
  .admin-import-btn {
    width: 100% !important;
  }
}

/* 問題文中のターゲット語（mark）*/
.question-mark {
  background: none;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* fill_blank の空欄 */
.question-fill-blank {
  display: inline-block;
  min-width: 3em;
  border-bottom: 2px solid var(--text, #333);
  vertical-align: bottom;
}

/* ---- セグメントコントロール（ラジオボタン型タブ） ---- */
.seg-ctrl {
  display: inline-flex;
  gap: 6px;
}

.seg-ctrl label {
  cursor: pointer;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: block;
  user-select: none;
  background: #fff;
  color: #333;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.seg-ctrl label:hover {
  background: #eef2fa;
  border-color: #2c5aa0;
  color: #2c5aa0;
}

.seg-ctrl label.is-selected {
  background: #2c5aa0;
  color: #fff;
  border-color: #2c5aa0;
}

/* ---- 管理画面: インポートページ ---- */
.import-section-label {
  font-size: 13px;
  color: #555;
  font-weight: 600;
  margin-bottom: 8px;
}

.import-format-box {
  margin-bottom: 20px;
  padding: 16px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 13px;
  color: #555;
}

.import-format-box code {
  display: block;
  background: #f5f5f5;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 12px;
  margin: 8px 0;
  word-break: break-all;
  line-height: 1.8;
}

.import-format-box ul {
  margin: 4px 0 0 16px;
  line-height: 1.8;
}

.import-notice {
  margin-bottom: 20px;
  padding: 16px;
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 8px;
  font-size: 14px;
  color: #795548;
}

.import-result {
  margin-top: 28px;
  padding: 20px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  max-width: 640px;
}

.import-result h2 {
  font-size: 18px;
  margin-bottom: 8px;
}

.import-dry-badge {
  font-size: 13px;
  background: #fff3e0;
  color: #e65100;
  border: 1px solid #ffcc80;
  border-radius: 4px;
  padding: 2px 8px;
  margin-left: 8px;
}

.import-result-success { color: #2e7d32; margin-bottom: 6px; }
.import-result-skip    { color: #856404; margin-bottom: 6px; }
.import-result-errors  { margin-top: 12px; font-size: 13px; color: #c62828; }
.import-result-warns   { margin-top: 12px; font-size: 13px; color: #856404; }
.import-result-errors ul,
.import-result-warns  ul { margin: 6px 0 0 16px; line-height: 1.8; }

.import-confirm-box {
  margin-top: 20px;
  padding: 18px 20px;
  background: #f0f7ff;
  border: 1px solid #90caf9;
  border-radius: 8px;
  max-width: 640px;
}
.import-confirm-title { font-size: 15px; font-weight: bold; margin: 0 0 10px; }
.import-confirm-warn  { font-size: 13px; color: #c62828; margin: 0 0 12px; }
.import-confirm-actions { display: flex; gap: 12px; align-items: center; }

.admin-description-box { background: #f0f4f8; border-left: 4px solid #5b8dd9; border-radius: 4px; padding: 14px 18px; margin-bottom: 28px; font-size: 14px; line-height: 1.8; }
.admin-description-box p { margin: 0 0 8px; }
.admin-description-box ul { margin: 0 0 0 18px; padding: 0; }
.admin-description-box li { margin-bottom: 4px; }
.import-block      { margin-bottom: 24px; }
.import-mode-note  { font-size: 12px; color: #888; margin-left: 12px; }

/* ===== Quiz Pages ===== */

/* セクション選択 */
.section-level-hint {
  color: #888;
  margin-bottom: 8px;
}

.section-h1 {
  font-size: 22px;
  margin-bottom: 24px;
}

.section-desc {
  color: #666;
  margin-bottom: 24px;
}

.section-btn-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.section-btn {
  font-size: 18px;
  padding: 16px 28px;
  background: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}

.section-btn--disabled {
  background: #f0f0f0;
  border-color: #d0d0d0;
  color: #aaa;
  cursor: not-allowed;
  opacity: 0.6;
}

/* クイズ開始画面 */
.quiz-level-hint {
  color: #888;
  margin-bottom: 8px;
}

.quiz-h1 {
  font-size: 22px;
  margin-bottom: 24px;
}

.quiz-scope-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 24px;
}

.quiz-scope-title {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 12px;
  color: #333;
}

.quiz-radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  cursor: pointer;
}

.quiz-radio-label.last { margin-bottom: 16px; }

.quiz-radio-text { font-size: 15px; }

.quiz-bookmark-label { font-size: 15px; color: #333; }
.quiz-bookmark-label.is-disabled { color: #aaa; }

.quiz-bookmark-count {
  color: #f4a100;
  font-size: 13px;
  margin-left: 6px;
}

.quiz-scope-hr {
  border: none;
  border-top: 1px solid #eee;
  margin-bottom: 14px;
}

.quiz-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.quiz-checkbox-text { font-size: 15px; }

.quiz-limit-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 14px 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.quiz-limit-label {
  font-size: 15px;
  color: #333;
  flex-shrink: 0;
}

.quiz-limit-select {
  font-size: 15px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  color: #333;
  cursor: pointer;
}

.quiz-limit-unit {
  font-size: 15px;
  color: #555;
}

.quiz-limit-input {
  font-size: 15px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  color: #333;
  width: 72px;
  text-align: center;
}

.quiz-count-hint {
  color: #555;
  margin-bottom: 24px;
}

.btn-quiz-start {
  font-size: 18px;
  padding: 16px 40px;
}

/* クイズ結果画面 */
.result-centered {
  text-align: center;
  padding-top: 16px;
}

.result-h1 {
  font-size: 24px;
  margin-bottom: 8px;
}

.result-score {
  font-size: 48px;
  font-weight: 500;
  margin: 16px 0 8px;
  color: var(--text);
}

.result-accuracy {
  font-size: 18px;
  color: #555;
  margin-bottom: 32px;
}

.result-badges {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.result-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
}

.result-badge.is-correct  { background: var(--mint-soft);  border: 2px solid var(--mint);  color: var(--correct); }
.result-badge.is-wrong    { background: var(--peach-soft); border: 2px solid var(--peach); color: var(--wrong); }
.result-badge.is-skipped  { background: #f5f5f5; border: 2px solid #9e9e9e; color: #757575; }

.result-register-cta {
  background: #f0f7ff;
  border: 1px solid #c2d8f0;
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 0 auto 20px;
  max-width: 480px;
  text-align: center;
}

.result-register-cta p {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--text);
}

.btn-register-cta {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  padding: 8px 20px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
}

.result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
}

.btn-result {
  padding: 14px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* クイズ再生画面 */
.quiz-empty-box {
  text-align: center;
  padding: 48px 16px;
}

.quiz-empty-text {
  color: #888;
  margin-bottom: 24px;
}

.quiz-progress-label {
  color: #666;
  font-size: 14px;
  margin: 0 0 8px;
}

.quiz-body {
  font-size: 18px;
  line-height: 2;
  margin-bottom: 20px;
  padding: 16px 0;
  border-bottom: 1px solid #e0e0e0;
}

.quiz-instruction {
  margin: 0 0 12px;
  font-size: 15px;
  color: #555;
}

.quiz-target-word {
  margin: 0 0 20px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  color: #333;
}

.quiz-sentence {
  margin: 0;
  font-size: 18px;
  line-height: 2;
}

.quiz-order-notice {
  margin: 0;
  font-size: 15px;
  color: #888;
}

.choice-number {
  margin-right: 8px;
  color: #888;
  font-size: 14px;
}

.btn-answer-full { margin-top: 8px; width: 100%; }

.answer-panel {
  margin-top: 16px;
  padding: 16px;
  border-radius: var(--radius-lg);
  border-left: 4px solid;
  animation: slide-up var(--dur-slow) var(--ease-out);
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.answer-panel.is-correct { border-color: var(--mint);  background: var(--mint-soft); }
.answer-panel.is-wrong   { border-color: var(--peach); background: var(--peach-soft); }

.answer-verdict {
  font-weight: bold;
  font-size: 18px;
  margin: 0 0 8px;
}

.answer-verdict.is-correct { color: var(--correct); }
.answer-verdict.is-wrong   { color: var(--wrong); }

.answer-correct-label {
  margin: 0 0 8px;
  font-size: 14px;
}

.answer-explanation-heading {
  font-weight: bold;
  font-size: 14px;
  margin: 8px 0 4px;
  color: #555;
}

.answer-explanation-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
}

.ai-translation-note {
    margin-top: 4px;
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.4;
}

/* 単語帳一覧の学習統計（PC インライン）。挑戦回数・正答率・最終回答日を横並びで表示 */
.vocab-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 6px;
}
.vocab-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 12px;
}
.vocab-stat-label {
    color: var(--ink-3);
    font-size: 11px;
}
.vocab-stat-value {
    font-weight: 600;
    color: var(--ink-2);
}
/* compact 表示では少しだけ詰める（is-unset＝未選択は 1024px 未満のみコンパクト相当） */
.item-list.is-compact .vocab-stats {
    gap: 2px 12px;
    margin-top: 4px;
}
@media (max-width: 1023.98px) {
    .item-list.is-unset .vocab-stats {
        gap: 2px 12px;
        margin-top: 4px;
    }
}

.btn-next { margin-top: 16px; }

.mark-learned-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 14px;
    color: #555;
    cursor: pointer;
}

/* ===== Shared Page Classes ===== */

/* メインコンテンツ外枠 */
.page-main {
  max-width: 700px;
  margin: 0 auto;
  padding: 24px 16px;
}

/* ---- 認証ページ共通 ---- */

.auth-wrap {
  max-width: 400px;
  margin: 40px auto;
  padding: 0 16px;
}

.auth-heading {
  font-size: 24px;
  margin-bottom: 24px;
  color: var(--text);
}

.auth-note {
  font-size: 13px;
  color: var(--text-muted, #888);
  margin-bottom: 16px;
}

.alert-info {
  padding: 10px 12px;
  margin-bottom: 16px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 14px;
}

.alert-error {
  padding: 10px 12px;
  margin-bottom: 16px;
  background: #fce4e4;
  border: 1px solid var(--peach);
  border-radius: var(--radius);
  color: var(--wrong);
  font-size: 14px;
}

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 11px 0;
  font-size: 15px;
  background: #fff;
  color: #444;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  min-height: 44px;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-family: inherit;
}

.btn-google-icon {
  margin-right: 8px;
  flex-shrink: 0;
}

.btn-google-hint {
  margin: 6px 0 0;
  font-size: 0.8em;
  color: var(--text-muted);
  text-align: center;
}

.auth-divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
}

.auth-divider-label {
  flex: 1;
  text-align: center;
  font-size: 13px;
  color: var(--text-subtle);
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding: 0 12px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: #555;
}

.form-field--checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.form-checkbox {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

.form-input {
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
  font-family: inherit;
  width: 100%;
}

.form-input:focus {
  border-color: var(--border-strong);
}

.btn-submit {
  padding: 12px 0;
  font-size: 16px;
  background: var(--text);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  min-height: 44px;
  width: 100%;
  font-family: inherit;
}

.btn-submit:hover:not(:disabled) {
  background: #333333;
}

.auth-footer-links {
  margin-top: 24px;
  font-size: 14px;
  color: var(--text-muted);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.auth-footer-links .sep {
  color: var(--border-strong);
}

.text-success {
  color: var(--correct);
}

/* ---- ユーザーページ共通 ---- */

.page-h1 {
  font-size: 22px;
  margin-bottom: 24px;
  color: var(--text);
}

.card-section {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 20px;
}

.card-section-heading {
  font-size: 18px;
  margin-bottom: 16px;
  color: var(--text);
  font-weight: 500;
}

.info-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
  flex-wrap: wrap;
}

.info-row:last-child {
  border-bottom: none;
}

/* info-row の下に添える補足説明（第二言語の注意書き等） */
.info-row-note {
  font-size: 13px;
  color: var(--text-subtle, #777);
  line-height: 1.7;
  margin: 4px 0 10px;
}

.info-label {
  font-size: 13px;
  color: #777;
  width: 120px;
  flex-shrink: 0;
}

.info-value {
  font-size: 15px;
  color: var(--text);
}

.inline-edit-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.input-sm {
  font-size: 14px;
  padding: 5px 8px;
  border: 1px solid #bbb;
  border-radius: 4px;
  width: 200px;
  font-family: inherit;
}

.btn-sm-primary {
  font-size: 13px;
  padding: 5px 12px;
  background-color: var(--text);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
}

.btn-sm-ghost {
  font-size: 13px;
  padding: 5px 12px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
}

.btn-sm-danger {
  font-size: 13px;
  padding: 5px 12px;
  background: var(--danger);
  color: #fff;
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.btn-sm-danger:hover  { opacity: 0.92; }
.btn-sm-danger:active { opacity: 0.84; }

.btn-icon-edit {
  font-size: 14px;
  background: none;
  border: none;
  cursor: pointer;
  color: #888;
  padding: 2px 4px;
  font-family: inherit;
}

.msg-base {
  font-size: 13px;
  margin-top: 4px;
}

.msg-success {
  color: var(--correct);
}

.msg-error {
  color: var(--wrong);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.stat-card {
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-label {
  font-size: 13px;
  color: #777;
}

.stat-value {
  font-size: 24px;
  font-weight: 500;
  color: var(--text);
}

.stats-table-wrap {
  margin-top: 20px;
}

.stats-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.stats-table-wrap th {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 2px solid var(--border);
  color: #555;
}

.stats-table-wrap td {
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
  color: var(--text);
}

.pw-form-box {
  background: #f9f9f7;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px 20px;
  margin-top: 8px;
  margin-bottom: 4px;
}

.pw-form-desc {
  font-size: 13px;
  color: #555;
  margin-bottom: 12px;
}

.pw-form-field {
  margin-bottom: 10px;
}

.pw-form-label {
  display: block;
  font-size: 13px;
  color: #777;
  margin-bottom: 4px;
}

.pw-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.btn-lang {
  font-size: 13px;
  padding: 4px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid var(--border);
  background-color: var(--bg-card);
  color: var(--text-muted);
  font-family: inherit;
}

.btn-lang.is-active {
  background-color: var(--text);
  color: #fff;
  border-color: var(--text);
  font-weight: 500;
}

.tag-link {
  font-size: 13px;
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
}

.tag-link:hover {
  background: var(--bg-subtle);
  text-decoration: none;
}

/* ---- ホームページ専用 ---- */

.section-heading-wrap {
  margin-bottom: 28px;
}

.subsection-heading-wrap {
  margin-bottom: 12px;
}

.section-heading-bar.is-sm {
  height: 14px;
}

.section-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 4px 0 0 16px;
}

.range-banner {
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
}

.range-banner.has-pending {
  background: rgba(188, 0, 45, 0.06);
  border-color: rgba(188, 0, 45, 0.30);
}

.range-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.btn-range-confirm {
  font-size: 13px;
  padding: 4px 14px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  color: #fff;
  font-weight: 600;
  font-family: inherit;
}

.btn-range-cancel {
  font-size: 13px;
  padding: 4px 12px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text-muted);
  font-family: inherit;
}

.level-btn {
  border-radius: var(--radius-lg);
  padding: 18px 8px 14px;
  text-align: center;
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
  font-family: inherit;
}

.level-btn:disabled,
.level-btn.is-disabled {
  cursor: default;
  opacity: 0.5;
}

.level-btn.is-start,
.level-btn.is-endpoint {
  background: var(--accent);
  border-color: var(--accent);
}

.level-btn.is-between {
  background: rgba(188, 0, 45, 0.10);
  border-color: rgba(188, 0, 45, 0.30);
}

.level-btn-name {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
  color: var(--text);
}

.level-btn.is-start .level-btn-name,
.level-btn.is-endpoint .level-btn-name {
  color: #fff;
}

.level-btn.is-disabled .level-btn-name {
  color: var(--text-muted);
}

.level-btn-desc {
  font-size: 11px;
  color: var(--text-muted);
}

.level-btn.is-start .level-btn-desc,
.level-btn.is-endpoint .level-btn-desc {
  color: rgba(255, 255, 255, 0.8);
}

.level-btn.is-between .level-btn-desc {
  color: rgba(188, 0, 45, 0.7);
}

.study-lists-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.study-lists-wrap table {
  width: 100%;
  border-collapse: collapse;
}

.study-lists-wrap thead {
  background: var(--bg-subtle);
}

.study-lists-wrap th {
  padding: 10px 16px;
  font-weight: 500;
  font-size: 12px;
  color: var(--text-muted);
  text-align: left;
  white-space: nowrap;
}

.study-lists-wrap td {
  padding: 12px 16px;
  font-size: 14px;
}

.study-lists-wrap tr {
  border-top: 1px solid var(--border);
}

.study-lists-wrap .col-level {
  font-weight: 500;
}

.table-content-link {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
}

.table-coming-soon {
  color: var(--text-muted);
  font-size: 12px;
}

.font-medium { font-weight: 500; }
.text-muted  { color: var(--text-muted); }

.btn-group  { display: flex; gap: 4px; }
.tag-group  { display: flex; gap: 6px; flex-wrap: wrap; }

/* ===== 語彙・文法リストページ共通 ===== */

.selection-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: var(--text);
  color: #fff;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.selection-bar-count { font-size: 14px; }
.selection-bar-actions { display: flex; gap: 8px; }

.btn-clear-selection {
  font-size: 12px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
}

.btn-sticky-quiz {
  font-size: 13px;
  font-weight: 500;
  padding: 4px 14px;
  background: #fff;
  color: var(--text);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}

/* ================================================================
   単語帳・学習リスト（Phase 2 デザイントークン）
   ================================================================ */

.study-breadcrumb {
  color: var(--ink-3);
  margin-bottom: 4px;
  font-size: 13px;
}

.study-h1 {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
}

/* トップページの h1。文書構造上必要だがデザイン主役はヒーローカードなので、
   隠さず控えめに（小さめ・ミュート色）ヒーローの直上に置く。 */
.home-page-h1 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3, var(--text-muted));
  margin: 0 0 10px;
  line-height: 1.6;
}

/* タイトル下サブタイトル（全語数・学習済件数） */
.study-subtitle {
  font-size: 13px;
  color: var(--ink-3);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 0;
  line-height: 1.4;
}

.study-subtitle-sep {
  margin: 0 2px;
  opacity: 0.6;
}

/* ゲスト同期案内 */
.inline-register-note {
  font-size: 13px;
  color: var(--ink-2);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.inline-register-note a {
  color: var(--brand);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* 検索フォーム */
.search-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

/* 入力欄・検索ボタン・クリアの横並び（オプション行はこの下に積む） */
.search-form-row {
  display: flex;
  gap: 8px;
}

/* 「語彙解説も検索対象に含める」チェックボックス */
.search-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-3);
  cursor: pointer;
  user-select: none;
}

.search-option input {
  width: 15px;
  height: 15px;
  margin: 0;
  flex: none;
  accent-color: var(--brand);
  cursor: pointer;
}


.search-input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.search-input::placeholder {
  color: var(--ink-4);
}

.search-input:focus {
  border-color: var(--brand-300);
  box-shadow: var(--glow-focus);
}

.btn-search {
  padding: 9px 16px;
  background: var(--ink);
  color: var(--bg-card);
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out);
}

.btn-search:hover {
  background: var(--brand);
}

.btn-search-clear {
  padding: 9px 12px;
  font-size: 14px;
  cursor: pointer;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  background: var(--bg-card);
  color: var(--ink-2);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}

.btn-search-clear:hover {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}

/* 検索ヘルプテキスト（モバイルのみ） */
.search-help {
  display: none;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.4;
  margin: -4px 0 10px;
}

@media (max-width: 1023px) {
  .search-help {
    display: block;
  }
}

/* 五十音インデックス */
.kana-index {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  /* モバイルで横スクロール可能に（折り返しは維持） */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.kana-index::-webkit-scrollbar { display: none; }

.kana-btn {
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 400;
  font-family: inherit;
  min-width: 36px;
  min-height: 32px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}

.kana-btn:hover {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
  color: var(--ink);
}

.kana-btn.is-active {
  border-color: var(--brand);
  background: var(--brand-50);
  color: var(--brand);
  font-weight: 600;
}

/* フィルタバー */
.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
}

.filter-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  font-weight: 400;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--ink-2);
  white-space: nowrap;
  line-height: 1.3;
  transition: border-color var(--dur-fast) var(--ease-out),
              background   var(--dur-fast) var(--ease-out),
              color        var(--dur-fast) var(--ease-out);
}

.filter-btn:hover {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
  color: var(--ink);
}

/* アクティブ: filled brand（白文字） */
.filter-btn.is-active {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}

.filter-btn.is-active:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
}

/* チップ内のカウント数字 */
.filter-chip-count {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.72;
  letter-spacing: 0.01em;
}

.filter-btn.is-active .filter-chip-count {
  opacity: 0.85;
}

/* チップ内のアイコン（ブックマーク等） */
.filter-chip-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.item-count {
  font-size: 13px;
  color: var(--ink-3);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ランダム選択 */
.random-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}

.random-row-label {
  font-size: 12px;
  color: var(--ink-3);
}

.random-btn {
  padding: 4px 10px;
  font-size: 12px;
  font-family: inherit;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--ink-2);
  cursor: pointer;
  min-height: 32px;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}

.random-btn:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}

.random-btn:disabled {
  color: var(--ink-4);
  cursor: default;
  opacity: 0.5;
}

/* 空状態 */
.study-empty {
  color: var(--ink-3);
  margin-top: 32px;
  text-align: center;
  font-size: 15px;
}

/* データ未登録の空状態（N5・慣用句・文法・読解など） */
.vocab-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 24px;
  text-align: center;
}

.vocab-empty-state-icon {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 16px;
  opacity: 0.5;
}

.vocab-empty-state-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-2);
  margin: 0 0 8px;
}

.vocab-empty-state-body {
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.7;
  max-width: 280px;
}

/* 一括操作レジェンド */
.list-legend {
  font-size: 12px;
  color: var(--ink-2);
  margin-bottom: 6px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.legend-action-btn {
  font-size: 12px;
  color: var(--ink-2);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur-fast);
}

.legend-action-btn:hover {
  color: var(--ink);
}

/* 「一括操作:」ラベル（全解除の右に置く。操作ボタン群はこのラベルの直後に続く） */
.bulk-actions-label {
  font-size: 12px;
  color: var(--ink-3);
  margin-left: auto;   /* 全解除との間隔をあけ、ここから右に操作群を寄せる */
  white-space: nowrap;
}

.bulk-learned-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.bulk-learned-btn {
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  padding: 6px 10px;
  min-height: 44px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: none;
  color: var(--ink-2);
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
  line-height: 1.4;
}

.bulk-learned-btn--on {
  border-color: rgba(95, 158, 138, 0.5);
  color: rgb(60, 120, 100);
}

.bulk-learned-btn--on:hover {
  background: rgba(95, 158, 138, 0.12);
  border-color: rgb(95, 158, 138);
}

.bulk-learned-btn--off:hover {
  background: var(--bg-subtle);
  color: var(--ink);
}

/* アイテムリスト */
.item-list {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-card);
  transition: background var(--dur-fast) var(--ease-out);
}

.item-row:hover {
  background: var(--bg-subtle);
}

.item-row.is-bordered {
  border-top: 1px solid var(--border);
}

.item-row.is-alt {
  background: var(--bg);
}

.item-row.is-alt:hover {
  background: var(--bg-2);
}

.item-row.is-learned {
  background: var(--mint-soft);
}

.item-row.is-learned:hover {
  background: #d8eede;
}

/* クイズ選択ボタン（☐/☑） */
.bookmark-btn {
  font-size: 22px;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
  width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-4);
  transition: color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-emph);
}

.bookmark-btn:hover:not(:disabled) {
  color: var(--ink-2);
}

.bookmark-btn.is-bookmarked {
  color: var(--brand);
}

.bookmark-btn:active:not(:disabled) {
  transform: scale(0.9);
}

.bookmark-btn:disabled,
.bookmark-btn.is-disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

/* ピン留めボタン（bookmark-btn と同サイズ・並びを揃える） */
.pin-btn {
  font-size: 20px;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
  width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 未ピン時は淡色のグレースケール、ピン時はフルカラーで強調 */
  filter: grayscale(1);
  opacity: 0.55;
  transition: opacity var(--dur-fast) var(--ease-out),
              filter var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-emph);
}

.pin-btn:hover {
  opacity: 0.85;
}

.pin-btn.is-pinned {
  filter: none;
  opacity: 1;
}

.pin-btn:active {
  transform: scale(0.9);
}

/* 学習/未学習ボタン + ピンを縦積みにする列（PC）。
   ピン専用の独立 44px 列を廃し、解説(item-content)の横幅を確保する。 */
.vocab-action-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;   /* 2 ボタンの横幅を揃える */
  gap: 8px;               /* 未学習/学習済みラベルとピンの間に十分な余白 */
  flex-shrink: 0;
}

/* 縦積み内のピンはテキスト付きピル型ボタン（learned-btn と同サイズ・並び）。
   絵文字のみだとクリック領域が小さくバランスが悪いため「📌 ピン留め/ピン解除」を表示。 */
.vocab-action-stack .pin-btn {
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  width: auto;
  min-height: 0;
  padding: 5px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  color: var(--ink-3);
  white-space: nowrap;
  /* 絵文字専用スタイルの打ち消し */
  filter: none;
  opacity: 1;
}

.vocab-action-stack .pin-btn:hover:not(.is-pinned) {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
  color: var(--ink-2);
}

/* ピン留め中は強調（学習済みの mint と区別するため brand 系の淡色） */
.vocab-action-stack .pin-btn.is-pinned {
  background: rgba(176, 58, 46, 0.10);
  color: var(--brand);
  border-color: rgba(176, 58, 46, 0.45);
}

/* 学習済みボタン */
.learned-btn {
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  padding: 5px 10px;
  flex-shrink: 0;
  white-space: nowrap;
  background: var(--bg-card);
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-emph);
}

.learned-btn:hover:not(.is-learned) {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
  color: var(--ink-2);
}

.learned-btn:active {
  transform: scale(0.93);
}

.learned-btn.is-learned {
  background: var(--mint);
  color: var(--bg-card);
  border-color: var(--mint);
}

.learned-btn.is-learned:hover {
  background: var(--mint-deep);
  border-color: var(--mint-deep);
}

/* アイテムコンテンツ */
.item-content { flex: 1; min-width: 0; }
.item-header  { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; line-height: 1.4; }

.item-word    { font-size: 18px; font-weight: 700; color: var(--ink); flex-shrink: 0; }
.item-pattern { font-size: 16px; font-weight: 700; color: var(--brand); flex-shrink: 0; }
.item-reading {
  font-size: 14px;
  color: var(--ink-2);  /* #6B5C4F = 4.9:1 on --bg → WCAG AA */
  flex-shrink: 0;
}
.item-meaning {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.65;
}

/* 品詞タグ */
.item-pos-tag {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--ink-2);
  flex-shrink: 0;
}

/* レベルタグ（全レベル横断検索時のみ各行に表示。どのレベルの語かを示す） */
.item-level-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 20px;
  font-size: 11px;
  font-weight: 700;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--brand-100);
  color: var(--brand);
  flex-shrink: 0;
  letter-spacing: 0.02em;
  font-family: var(--font-en);
}
/* レベル別ソフト配色（全レベル横断ページの行バッジ・CTA・フッタで共用） */
.item-level-tag--n1 { background: var(--brand-100);  color: var(--brand); }
.item-level-tag--n2 { background: var(--peach-soft); color: var(--peach-deep); }
.item-level-tag--n3 { background: var(--sand-soft);  color: #8B6628; }
.item-level-tag--n4 { background: var(--mint-soft);  color: var(--mint-deep); }
.item-level-tag--n5 { background: var(--bg-2);       color: var(--ink-2); }
/* コンパクト一覧の語頭インライン表示用（.vocab-mobile-word 内） */
.item-level-tag--compact {
  min-width: 28px;
  height: 18px;
  font-size: 10px;
  padding: 0 5px;
  margin-right: 6px;
  vertical-align: middle;
}

/* 語種タグ */
.origin-tag     { font-size: 11px; padding: 2px 6px; border-radius: var(--radius-sm); flex-shrink: 0; }
.origin-kango   { background: var(--bg-2); color: var(--ink); }
.origin-wago    { background: var(--mint-soft); color: var(--mint-deep); }
.origin-gairaigo { background: var(--brand-100); color: var(--brand); }
.origin-mixed   { background: var(--sand-soft); color: var(--peach-deep); }

/* 文体タグ */
.formality-tag     { font-size: 11px; padding: 2px 6px; border-radius: var(--radius-sm); flex-shrink: 0; }
.formality-written { background: var(--bg-2); color: var(--ink); }
.formality-spoken  { background: var(--mint-soft); color: var(--mint-deep); }

/* ページネーション（文法・旧UI互換用） */
.pagination {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  justify-content: center;
  align-items: center;
}
.btn-page   { padding: 8px 18px; }
.page-count { font-size: 13px; color: var(--ink-2); }

/* ページネーション v2（単語帳） */
.pagination-v2 {
  display: flex;
  gap: 8px 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.pagination-range {
  font-size: 13px;
  color: var(--ink-2);
  white-space: nowrap;
}

.pagination-nav {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.pagination-per-page {
  display: flex;
  gap: 4px;
  align-items: center;
}

.page-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 34px;
  min-height: 32px;
  padding: 4px 8px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 400;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  text-align: center;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}

.page-nav-btn:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
  color: var(--ink);
}

.page-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.page-nav-btn.is-current {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}

.page-nav-btn.is-ellipsis {
  border-color: transparent;
  background: transparent;
  color: var(--ink-2);
  cursor: default;
  pointer-events: none;
  min-width: 20px;
  padding: 4px 2px;
}

.per-page-btn {
  padding: 4px 10px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 400;
  min-height: 32px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}

.per-page-btn:hover {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
  color: var(--ink);
}

.per-page-btn.is-active {
  border-color: var(--brand);
  background: var(--brand-50);
  color: var(--brand);
  font-weight: 600;
}

@media (max-width: 600px) {
  .pagination-v2 {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .pagination-nav { width: 100%; }
  .pagination-per-page { width: 100%; }
}

/* ページネーション v2 - コンパクト版（リスト上部用） */
.pagination-v2.is-compact {
  justify-content: center;
  border-top: none;
  margin-top: 0;
  margin-bottom: 12px;
  padding-top: 0;
}

.pagination-v2.is-compact .pagination-nav {
  gap: 4px;
}

.pagination-v2.is-compact .page-nav-btn {
  min-width: 30px;
  min-height: 28px;
  padding: 2px 6px;
  font-size: 12px;
}

/* コンパクト版では「前へ／次へ」の文字を消し、シェブロン (‹ / ›) のみ表示 */
.pagination-v2.is-compact .page-nav-text {
  display: none;
}

@media (max-width: 600px) {
  .pagination-v2.is-compact {
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .pagination-v2.is-compact .pagination-nav { width: auto; }
}

/* スティッキー選択バー
   モバイルのタブバー（fixed bottom:0 / 高さ 56px+safe-area / z-index:300）と重なって
   「選択したものでクイズ開始」が押せなくなるため、タブバーの高さ分だけ上に配置する。 */
.sticky-quiz-bar {
  position: fixed;
  bottom: calc(56px + env(safe-area-inset-bottom)); left: 0; right: 0;
  z-index: 300;
  background: rgba(250, 245, 236, 0.88); /* --bg with opacity */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px max(14px, env(safe-area-inset-bottom));
  box-shadow: 0 -2px 12px rgba(80,50,35,.08);
}

.sqb-clear {
  font-size: 13px;
  background: none;
  box-shadow: none;
  padding: 8px 4px;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.sqb-start {
  margin-left: auto;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  flex-shrink: 0;
}

.sqb-enter, .sqb-leave {
  transition: transform var(--dur-slow) var(--ease-out),
              opacity var(--dur-slow) var(--ease-out);
}
.sqb-enter-from, .sqb-leave-to { transform: translateY(100%); opacity: 0; }
.sqb-enter-to, .sqb-leave-from { transform: translateY(0);    opacity: 1; }

/* タブバー（56px）＋スティッキーバー（≈64px）分のパディング。
   sticky-quiz-bar はタブバーの上（bottom: 56px+safe）に配置されるため、
   .page-main 側のタブバー分パディングに加えて、本要素でバー高さ分を確保する。 */
.pb-sticky { padding-bottom: 72px; }

/* 単語帳 PC 専用 右レール（< 1024px では非表示。デスクトップ定義は min-width:1024px ブロック内） */
.vocab-side-rail { display: none; }

/* プライバシーポリシーページ */
.policy-h1 {
  font-size: 22px;
  margin-bottom: 4px;
}

.policy-meta {
  color: #888;
  font-size: 13px;
  margin-bottom: 4px;
}

.policy-meta-last {
  color: #888;
  font-size: 13px;
  margin-bottom: 24px;
}

.policy-ai-note {
  color: #8a6d3b;
  background: #fcf8e3;
  border: 1px solid #f0e3b8;
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 24px;
}

.policy-section {
  margin-bottom: 24px;
}

.policy-section-heading {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}

.policy-line {
  font-size: 15px;
  line-height: 1.8;
  margin: 4px 0;
}

.policy-footer {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
}

.policy-back-link {
  color: var(--text);
  font-size: 14px;
}


/* ホームページ 登録CTA */
.home-register-note {
  text-align: center;
  margin: 8px 0 16px;
  font-size: 14px;
}

.home-register-note a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (min-width: 1024px) {
  .home-register-note { display: none; }
}

/* JMdict/EDICT クレジット */
.jmdict-notice {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.6;
  text-align: left;
  padding: 6px 0;
}

.jmdict-notice--box {
  font-size: 12px;
  color: #555;
  background: #fdf5f5;
  border: 1px solid var(--accent);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  padding: 12px 16px;
  margin: 20px 0 8px;
  text-align: left;
  line-height: 1.7;
}

.jmdict-notice--subtle {
  font-size: 11px;
  color: var(--text-muted);
  background: #f5f5f3;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px 14px;
  margin: 24px 0 8px;
  text-align: left;
  line-height: 1.6;
}

/* ---- 結果ページ: 問題別振り返り ---- */
.result-review {
  text-align: left;
  border-top: 1px solid var(--border);
  padding-top: 24px;
  margin-top: 8px;
}

.result-review-title {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 16px;
  color: var(--text-muted);
}

.result-review-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}

.result-review-item.is-correct  { border-color: var(--mint); }
.result-review-item.is-wrong    { border-color: var(--peach); }
.result-review-item.is-skipped  { border-color: #bdbdbd; }

.result-review-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}

.result-review-header.is-correct  { background: var(--mint-soft); }
.result-review-header.is-wrong    { background: var(--peach-soft); }
.result-review-header.is-skipped  { background: #f5f5f5; }

.result-review-verdict {
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
}

.result-review-header.is-correct  .result-review-verdict { color: var(--correct); }
.result-review-header.is-wrong    .result-review-verdict { color: var(--wrong); }
.result-review-header.is-skipped  .result-review-verdict { color: #757575; }

.result-review-num {
  font-size: 14px;
  font-weight: 600;
  color: #555;
}

.result-review-body {
  padding: 12px 14px;
}

.result-review-sentence {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
}

.result-review-answer,
.result-review-correct {
  margin: 0 0 4px;
  font-size: 14px;
}

.result-review-label { color: #555; }

.result-review-answer .is-correct,
.result-review-correct .is-correct { font-weight: 500; color: var(--correct); }

.result-review-answer .is-wrong { font-weight: 500; color: var(--wrong); }

/* 一括操作ボタン */
.result-learned-bulk {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.btn-learned-bulk {
  font-size: 12px;
  padding: 5px 12px;
  border: 1px solid #bbb;
  border-radius: 4px;
  background: #fff;
  color: #555;
  cursor: pointer;
  line-height: 1.4;
}

.btn-learned-bulk:hover { background: #f0f0ee; }

.btn-learned-bulk--clear { color: #888; border-color: #ccc; }

/* 各アイテムの学習済みチェック */
.result-learned-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.result-learned-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
  color: #555;
  cursor: pointer;
}

.result-learned-msg {
  margin-top: 8px;
  font-size: 12px;
  color: #4a7c59;
}

/* ================================================================
   利用規約同意モーダル
   ================================================================ */
.terms-modal-overlay {
  z-index: 1000;
}
.modal-box--terms {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  width: min(640px, 94vw);
}
.terms-modal-lead {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 0.75rem;
}
.terms-scroll-area {
  flex: 1;
  overflow-y: auto;
  max-height: 45vh;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 1rem 1.2rem;
  margin-bottom: 0.75rem;
  background: #fafafa;
}
.terms-section-heading {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 1rem 0 0.3rem;
  color: #333;
}
.terms-section-heading:first-child {
  margin-top: 0;
}
.terms-line {
  font-size: 0.875rem;
  line-height: 1.75;
  margin: 0.2rem 0;
  color: #444;
}
.terms-scroll-hint {
  font-size: 0.8rem;
  color: #888;
  margin-bottom: 0.5rem;
  text-align: center;
}
.terms-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  cursor: pointer;
}
.terms-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.terms-checkbox-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.terms-checkbox-disabled input[type="checkbox"] {
  cursor: not-allowed;
}
.terms-agree-btn {
  width: 100%;
}
.terms-agree-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 管理画面: 公開ページへのリンクアイコン */
.acc-exp-public-link {
  display: inline-block;
  font-size: 12px;
  color: #0066cc;
  text-decoration: none;
  margin: 0 4px 0 2px;
  padding: 0 4px;
  border: 1px solid transparent;
  border-radius: 3px;
}
.acc-exp-public-link:hover {
  background: #eef5ff;
  border-color: #cce0ff;
  text-decoration: none;
}

/* ===== Toast ===== */
.toast-container {
  position: fixed; bottom: 80px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px;
  z-index: 9000; pointer-events: none;
  min-width: 200px; max-width: 360px;
}
.toast {
  background: var(--text); color: #fff;
  padding: 10px 16px; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow-lg); pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  animation: toast-in var(--dur-slow) var(--ease-emph);
}
.toast.toast-error   { background: var(--wrong); }
.toast.toast-success { background: var(--correct); }
.toast.toast-exit    { animation: toast-out var(--dur-base) var(--ease-in) forwards; }
.toast-undo-btn, .toast-dismiss-btn {
  background: rgba(255,255,255,0.2); border: none; color: #fff;
  font-size: 12px; font-weight: 700; border-radius: 99px;
  padding: 3px 10px; cursor: pointer; flex-shrink: 0; font-family: inherit;
  transition: background 100ms;
}
.toast-undo-btn:hover, .toast-dismiss-btn:hover { background: rgba(255,255,255,0.35); }
@keyframes toast-in  { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes toast-out { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(8px)} }

/* ===== Bottom Sheet ===== */
.bottom-sheet-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.48);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 2000;
}
@media (min-width: 600px) { .bottom-sheet-overlay { align-items: center; } }
.bottom-sheet {
  background: var(--bg-card);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 28px 24px calc(28px + env(safe-area-inset-bottom));
  width: 100%; max-width: 480px;
  animation: sheet-in var(--dur-xslow) var(--ease-emph);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 600px) {
  .bottom-sheet {
    border-radius: var(--radius-xl); padding: 28px;
    animation: modal-in var(--dur-slow) var(--ease-out);
  }
}
@keyframes sheet-in {
  from { opacity:0; transform: translateY(100%); }
  to   { opacity:1; transform: translateY(0); }
}

/* ===== Skeleton ===== */
.skeleton {
  background: linear-gradient(90deg,
    var(--border) 25%, var(--bg-subtle) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--radius);
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--border); }
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
.skeleton-text  { height: 16px; margin: 6px 0; }
.skeleton-card  { height: 80px;  border-radius: var(--radius-lg); }
.skeleton-block { height: 120px; border-radius: var(--radius-lg); }

/* ===== App Layout + Sidebar ===== */
.app-layout    { display: flex; min-height: 100vh; }
.app-sidebar   { display: none; }
.app-main-area { flex: 1; min-width: 0; }

@media (min-width: 1024px) {
  .app-sidebar {
    display: flex; flex-direction: column;
    width: var(--sidebar-w); flex-shrink: 0;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    background: var(--bg-card); border-right: 1px solid var(--border);
    padding: 20px 16px; gap: 0;
  }
  .app-sidebar-logo {
    display: flex; align-items: center; gap: 8px;
    text-decoration: none; color: var(--text);
    font-weight: 600; font-size: 15px;
    padding: 8px 4px; margin-bottom: 12px; border-radius: var(--radius);
    transition: background var(--dur-fast) var(--ease-out);
  }
  .app-sidebar-logo:hover { background: var(--bg-subtle); text-decoration: none; }
  .app-sidebar-nav {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 2px;
  }
  .app-sidebar-nav li { list-style: none; }
  .app-sidebar-link {
    display: block; padding: 8px 12px;
    border-radius: var(--radius); font-size: 14px;
    color: var(--text); text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out);
  }
  .app-sidebar-link:hover { background: var(--bg-subtle); text-decoration: none; }
  .app-sidebar-review {
    padding: 10px 0; border-top: 1px solid var(--border); margin-top: 10px;
  }
  .app-sidebar-review-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 12px; font-size: 13px; color: var(--text-muted);
    text-decoration: none; border-radius: var(--radius);
    transition: background var(--dur-fast) var(--ease-out);
  }
  .app-sidebar-review-link:hover { background: var(--bg-subtle); }
  .review-badge {
    background: var(--peach); color: #fff;
    border-radius: var(--radius-pill); font-size: 11px;
    padding: 1px 7px; font-weight: 600;
  }
  .sidebar-progress-list { padding: 4px 4px 0; display: flex; flex-direction: column; gap: 4px; }
  .sidebar-progress-row  { display: flex; align-items: center; gap: 6px; font-size: 11px; padding: 2px 8px; }
  .sidebar-progress-label{ width: 24px; color: var(--text-subtle); flex-shrink: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
  .sidebar-progress-bar  { flex: 1; height: 4px; background: var(--border); border-radius: var(--radius-pill); overflow: hidden; }
  .sidebar-progress-fill { height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width var(--dur-slow) var(--ease-out); }
  .sidebar-progress-pct  { width: auto; text-align: right; color: var(--text-subtle); font-variant-numeric: tabular-nums; flex-shrink: 0; }
  .app-sidebar-bottom    { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
  .app-sidebar-auth      { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--border); padding-top: 10px; }
  /* サイドバー言語リスト（常時表示・縦並び） */
  .lang-switch--sidebar { display: flex; flex-direction: column; gap: 2px; }
  .lang-list-heading {
    display: block; margin: 0 0 4px; padding: 0 12px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-subtle);
  }
  .lang-switch--sidebar .lang-option { font-size: 13px; padding: 7px 12px; }
  /* LG では top header 非表示 */
  .site-header { display: none; }
  .page-main   { max-width: 1080px; }
  /* quiz-sticky-header の top:0 化はベース定義より後に再宣言する必要があるため
     .quiz-sticky-header のベース定義直後（min-width:1024px ブロック）で行う */

  /* ===== 単語帳 PC 右レール（追従パネル） ===== */
  .vocab-layout      { display: flex; align-items: flex-start; gap: 24px; }
  .vocab-layout-main { flex: 1; min-width: 0; }
  .vocab-side-rail {
    display: flex; flex-direction: column; gap: 10px;
    width: 260px; flex-shrink: 0;
    /* レール上端を単語リスト（[data-testid="vocab-list"]）の top に合わせる。
       上に積まれるヘッダー高は状態で変動するため、margin-top は x-init（JS）で実測し動的に設定する。
       スクロール時は top で追従。 */
    position: sticky; top: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--shadow-sm);
  }
  .vsr-count { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
  .vsr-count-num {
    font-size: 26px; font-weight: 700; color: var(--accent);
    font-variant-numeric: tabular-nums; line-height: 1;
  }
  .vsr-count-unit { font-size: 13px; color: var(--text-muted); }
  .vsr-start {
    width: 100%; justify-content: center;
    font-size: 15px; padding: 12px 16px;
    border-radius: var(--radius-pill); box-shadow: var(--shadow-md);
  }
  .vsr-btn {
    width: 100%;
    font-size: 13px; font-family: inherit; cursor: pointer;
    padding: 10px 12px; min-height: 44px;
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    background: none; color: var(--ink-2, var(--text-muted));
    transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
    line-height: 1.4;
  }
  .vsr-btn:hover { background: var(--bg-subtle); color: var(--text); }
  .vsr-btn--learned { border-color: rgba(95, 158, 138, 0.5); color: rgb(60, 120, 100); }
  .vsr-btn--learned:hover { background: rgba(95, 158, 138, 0.12); border-color: rgb(95, 158, 138); }
  .vsr-selectall, .vsr-clear {
    background: none; border: none; cursor: pointer;
    font-family: inherit; font-size: 13px; color: var(--text-muted);
    padding: 4px; text-decoration: underline; text-underline-offset: 2px;
    transition: color var(--dur-fast);
  }
  .vsr-selectall:hover, .vsr-clear:hover { color: var(--text); }
  .vsr-clear { margin-top: 2px; }

  /* PC では下部固定バーをレールに一本化する……のだが、右レール（.vocab-side-rail）を
     実装したのは単語帳だけ。慣用句・カタカナ語は代替が無いため、以前はここで
     .sticky-quiz-bar を一律 display:none にした結果、PC では「選択中 N件」も
     「クイズ開始」ボタンも出ず、一覧から選択してクイズを始められなくなっていた。
     そこで「レールを持つページ（＝単語帳）だけ」隠すように限定する。 */
  .sticky-quiz-bar--has-rail { display: none; }

  /* レールが無いページでは PC でも下部固定バーを使う。
     - PC には .app-tabbar（1023px 以下のみ表示）が無いので、その 56px 分を詰めて
       画面下端にぴったり付ける。
     - left は .app-sidebar の幅分ずらす。position:fixed の left:0 のままだと
       サイドバー（ログイン/新規登録ボタン）の上に重なってクリックを奪ってしまう。
       幅は tokens.css の --sidebar-w に集約（.app-sidebar と同じ値を二重管理しない）。 */
  .sticky-quiz-bar {
    bottom: 0;
    left: var(--sidebar-w);
  }

  /* 下パディングもレールを持つページだけ不要（バーが出ないため）。
     レールが無いページはバーが出るので、モバイル同様に高さ分を確保し続ける。 */
  .pb-sticky--has-rail { padding-bottom: 0; }
}

/* ----------------------------------------------------------------
   マイページ統計カード・ヒートマップ・履歴
   ---------------------------------------------------------------- */
.mypage-stats-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  margin-bottom: 24px;
}
@media (min-width: 600px) { .mypage-stats-grid { grid-template-columns: repeat(4, 1fr); } }
.mypage-stats-grid > .contents { display: contents; }
.mypage-stats-grid .stat-card {
  display: block;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 12px 14px;
  box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.stat-card-label { font-size: 11px; color: var(--text-muted); margin: 0 0 4px; }
.stat-card-value {
  font-size: 26px; font-weight: 700; color: var(--text); margin: 0;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  display: inline-flex; align-items: baseline; gap: 2px;
}
.stat-card-unit { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-left: 2px; }

.stat-card-icon {
  position: absolute; right: -8px; top: -8px;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.stat-card-icon svg { transform: scale(0.85); }
.stat-card-icon--streak   { background: var(--brand-100); color: var(--brand); }
.stat-card-icon--learned  { background: var(--mint-soft); color: var(--mint-deep); }
.stat-card-icon--total    { background: var(--peach-soft); color: var(--peach-deep); }
.stat-card-icon--accuracy { background: var(--sand-soft); color: #8B6628; }

.review-hero-card {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--peach-soft); border: 1px solid var(--peach);
  border-radius: var(--radius-lg); padding: 16px 20px;
  margin-bottom: 24px; gap: 12px;
}
.review-hero-title { font-size: 11px; color: var(--peach); font-weight: 600; text-transform: uppercase; margin: 0; }
.review-hero-count { margin: 4px 0 0; }
.review-hero-num   { font-size: 28px; font-weight: 700; margin-right: 8px; }

/* ----- 学習カレンダー（月単位） ----- */
.mypage-section   { margin-bottom: 32px; }
.mypage-section-title { font-size: 14px; font-weight: 600; color: var(--text-muted); margin: 0 0 12px; }

.study-cal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; gap: 12px;
}
.study-cal-title { margin: 0; }

.study-cal-nav {
  display: inline-flex; gap: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--bg-card);
}
.study-cal-nav-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; font-size: 11px;
  color: var(--text-muted); background: transparent;
  border: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.study-cal-nav-btn + .study-cal-nav-btn { border-left: 1px solid var(--border); }
.study-cal-nav-btn:hover { background: var(--bg-subtle); color: var(--text); }
.study-cal-nav-btn.is-active {
  background: var(--brand-100); color: var(--brand-hover); font-weight: 600;
}

.study-cal-month-label {
  font-size: 13px; color: var(--text); font-weight: 600;
  margin-bottom: 8px; font-variant-numeric: tabular-nums;
}

.study-cal-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px; margin-bottom: 4px;
}
.study-cal-weekdays > span {
  font-size: 11px; color: var(--text-muted);
  text-align: center; padding: 4px 0;
}

.study-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.study-cal-cell-wrap { position: relative; }
.study-cal-cell {
  position: relative; width: 100%;
  aspect-ratio: 1; border-radius: 4px;
  background: var(--bg-2);
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding: 4px 6px;
  border: none; margin: 0; font: inherit; color: inherit;
  cursor: pointer;
  transition: outline-color var(--dur-fast) var(--ease-out);
  outline: 2px solid transparent;
}
.study-cal-cell:hover,
.study-cal-cell:focus-visible { outline-color: var(--border-strong); }
.study-cal-cell.is-open { outline-color: var(--ink); }
.study-cal-day {
  font-size: 11px; color: var(--text-muted);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.study-cal-cell.heat-l2 .study-cal-day,
.study-cal-cell.heat-l3 .study-cal-day { color: var(--text); }
.study-cal-cell--out {
  background: transparent;
  cursor: default;
  opacity: 1;
}
.study-cal-cell--out:hover,
.study-cal-cell--out:focus-visible { outline-color: transparent; }
.study-cal-cell--out .study-cal-day { color: var(--text-subtle); opacity: 0.4; }
.study-cal-cell.is-today { outline-color: var(--brand); }
.study-cal-cell.is-today .study-cal-day { font-weight: 700; color: var(--text); }

/* セル popover（タップ・クリックで日付＋解答数を表示） */
.study-cal-popover {
  position: absolute; left: 50%; top: calc(100% + 8px);
  transform: translateX(-50%);
  background: var(--ink); color: #fff;
  font-size: 11px; font-variant-numeric: tabular-nums;
  padding: 6px 10px; border-radius: 6px;
  white-space: nowrap; pointer-events: none;
  z-index: 20;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.study-cal-popover::before {
  content: ""; position: absolute;
  left: 50%; top: -5px; transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid var(--ink);
}

/* 色階層（カレンダーセル背景 ＆ 凡例セルで共用） */
.heat-l0 { background: var(--bg-2); }
.heat-l1 { background: var(--brand-100); }
.heat-l2 { background: var(--brand-300); }
.heat-l3 { background: var(--brand); }

/* 凡例（絶対基準・4階級） */
.heatmap-legend {
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
  gap: 4px 10px; margin-top: 8px;
}
.heatmap-legend-label { font-size: 11px; color: var(--text-muted); }
.heatmap-legend-cell  { width: 11px; height: 11px; border-radius: 2px; }
.heatmap-legend-item {
  display: inline-flex; align-items: center; gap: 4px;
}
.heatmap-legend-num {
  font-size: 11px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* カレンダー本体（Desktop で幅を 720px に制限、中央寄せ） */
.study-cal-body { /* mobile: 既存挙動 */ }
@media (min-width: 1024px) {
  .study-cal-body {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  .study-cal-header,
  .study-cal-month-label {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  .study-cal-body .heatmap-legend { margin-top: 10px; }
}

/* マイページ見出し行（h1 と 最後に解いた日 を左右配置） */
.mypage-h1-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
}
.mypage-last-answered {
  font-size: 14px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  display: none;
}
@media (min-width: 1024px) {
  .mypage-last-answered { display: inline; }
}

/* ----- マイページ 遷移カード ----- */
.mypage-nav-card-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; }
.mypage-nav-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 12px 14px;
  color: var(--text); text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.mypage-nav-card:hover { background: var(--bg-subtle); border-color: var(--border-strong); }
.mypage-nav-card-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--bg-2); color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mypage-nav-card-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mypage-nav-card-title { font-size: 14px; font-weight: 600; color: var(--text); }
.mypage-nav-card-sub   { font-size: 11px; color: var(--text-muted); }
.mypage-nav-card-chevron {
  color: var(--text-subtle); font-size: 20px; line-height: 1;
  flex-shrink: 0; padding-left: 4px;
}

/* ----- 退会フッタ ----- */
.mypage-danger-footer {
  padding: 32px 16px 8px; text-align: center;
}
.mypage-danger-note {
  font-size: 11px; color: var(--text-muted);
  margin: 0 0 8px; line-height: 1.5;
}
.mypage-danger-link {
  font-size: 11px; color: var(--text-subtle);
  text-decoration: underline; cursor: pointer;
  background: none; border: none; padding: 0;
}
.mypage-danger-link:hover { color: var(--danger); }

/* ----- 確認モーダル: ボタン横並び ----- */
.modal-box--confirm { max-width: 420px; padding: 24px; }
.modal-btn-group--row {
  flex-direction: row; justify-content: flex-end;
}
.modal-btn-group--row .btn-sm-ghost,
.modal-btn-group--row .btn-sm-danger { width: auto; margin: 0; }

/* ----------------------------------------------------------------
   結果バッジ pop アニメーション
   ---------------------------------------------------------------- */
@keyframes badge-pop {
  from { opacity: 0; transform: scale(.5); }
  to   { opacity: 1; transform: scale(1); }
}

/* ----------------------------------------------------------------
   ホーム「続きから」ヒーローカード
   ---------------------------------------------------------------- */
.continue-hero-card {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, var(--accent-soft), var(--bg-card));
  border: 1px solid var(--accent-light); border-radius: var(--radius-lg);
  padding: 16px 20px; margin-bottom: 20px; gap: 12px;
  box-shadow: var(--shadow-sm);
}
.continue-hero-label   { font-size: 11px; color: var(--accent); font-weight: 600; text-transform: uppercase; margin: 0; }
.continue-hero-session { font-size: 15px; font-weight: 500; margin: 2px 0 0; }
.continue-hero-right   { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.streak-display        { display: flex; align-items: center; gap: 4px; }
.streak-count          { font-size: 22px; font-weight: 700; color: var(--accent); line-height: 1; }
.streak-label          { font-size: 11px; color: var(--text-muted); }
.continue-hero-btn     { padding: 8px 16px; font-size: 14px; border-radius: var(--radius-pill); white-space: nowrap; }

/* ----------------------------------------------------------------
   空状態UI
   ---------------------------------------------------------------- */
.level-empty-card {
  opacity: 0.45; font-size: 11px; color: var(--text-subtle);
  text-align: center; padding: 4px 0;
}

/* ================================================================
   Phase 2 Design — Home + Quiz redesign
   ================================================================ */

/* ---- Level Disc (colored circle badge) ---- */
.level-disc {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; letter-spacing: -0.02em;
  flex-shrink: 0;
  line-height: 1;
}
.level-disc-sm { width: 36px; height: 36px; font-size: 12px; }

.level-disc-brand { background: #F8E1E6; color: #A11D3B; }
.level-disc-peach { background: #FBE2D4; color: #B5613F; }
.level-disc-sand  { background: #F6E9CC; color: #8B6628; }
.level-disc-mint  { background: #DDEDDF; color: #3F6F4E; }
.level-disc-mute  { background: #F4ECDC; color: #6B5C4F; }

/* ---- Home Phase 2 level grid ---- */
.level-grid-v2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 32px;
}
@media (max-width: 700px) {
  .level-grid-v2 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 360px) {
  .level-grid-v2 { grid-template-columns: repeat(2, 1fr); }
}

.level-card-v2 {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 10px 14px;
  text-decoration: none; color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow   var(--dur-fast) var(--ease-out),
              transform    var(--dur-fast) var(--ease-out);
}
.level-card-v2:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); text-decoration: none; }
.level-card-v2:active:not(.is-disabled) { transform: translateY(1px); }
.level-card-v2.is-disabled { opacity: 0.5; cursor: default; pointer-events: none; }
.level-card-v2:hover { text-decoration: none; }

.level-card-sub {
  font-size: 11px; color: var(--text-muted);
  text-align: center; line-height: 1.2;
}
.level-card-vocab-count {
  font-size: 11px; color: var(--text-subtle);
  text-align: center;
}
/* 語彙数の下に併記する問題文数。主役は語数なので一段小さく薄くする */
.level-card-question-count {
  font-size: 10px; color: var(--ink-4);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.level-card-progress-wrap {
  width: 100%; height: 3px;
  background: var(--border); border-radius: var(--radius-pill);
  overflow: hidden; margin-top: 4px;
}
.level-card-progress-fill {
  height: 100%; background: var(--accent);
  border-radius: var(--radius-pill);
}
.level-card-start {
  font-size: 12px; font-weight: 700;
  color: var(--accent); margin-top: 6px;
  white-space: nowrap;
}
.level-card-coming-soon {
  font-size: 11px; color: var(--text-subtle);
  margin-top: 6px;
}

/* ---- Desktop level card enhancements ---- */
.level-card-deco {
  display: none;
  position: absolute; right: -28px; top: -28px;
  width: 80px; height: 80px; border-radius: 50%;
  pointer-events: none;
}
.level-card-deco-brand { background: var(--brand-100); }
.level-card-deco-peach { background: var(--peach-soft); }
.level-card-deco-sand  { background: var(--sand-soft); }
.level-card-deco-mint  { background: var(--mint-soft); }
.level-card-deco-mute  { background: var(--bg-subtle); }

.level-card-mobile-body { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.level-card-desktop-body { display: none; flex-direction: column; gap: 6px; width: 100%; padding-top: 10px; }

.level-card-name { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1; }

.level-card-prog-wrap {
  width: 100%; height: 4px;
  background: var(--border); border-radius: var(--radius-pill);
  overflow: hidden; flex-shrink: 0;
}
.level-card-prog-fill {
  /* width は SSR のインラインスタイルで確定する。未指定時に全幅のバーが
     見えないよう初期値 0 を明示（ブロック要素の既定 width:100% への防御） */
  width: 0;
  height: 100%; background: var(--accent);
  border-radius: var(--radius-pill);
  transition: width 800ms var(--ease-out);
}

.level-card-vocab-stat {
  font-size: 11px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.level-card-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 14px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 700; font-family: inherit;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  margin-top: auto;
  transition: opacity var(--dur-fast), background var(--dur-fast);
}
.level-card-cta-primary { background: var(--accent); color: #fff; border: 2px solid var(--accent); }
.level-card-cta-primary:hover { opacity: 0.88; text-decoration: none; }
.level-card-cta-outline { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.level-card-cta-outline:hover { background: var(--brand-50); text-decoration: none; }

.level-card-coming-soon-badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill);
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .level-grid-v2 { gap: 14px; }
  .level-card-v2 {
    position: relative; overflow: hidden;
    min-height: 188px; padding: 18px 16px;
    align-items: flex-start; gap: 0;
  }
  .level-card-deco { display: block; }
  .level-card-mobile-body { display: none; }
  .level-card-desktop-body { display: flex; }
  /* デスクトップのカードは左寄せレイアウト。問題数も語数（.level-card-vocab-stat）に揃える */
  .level-card-desktop-body .level-card-question-count { text-align: left; }
}

/* ---- Home section header (level-from + range button) ---- */
.home-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.home-section-h2 {
  font-size: 17px; font-weight: 700; color: var(--text);
  margin: 0;
}
.btn-range-open {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; font-size: 12px; font-weight: 600;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill);
  background: var(--bg-card); color: var(--text-muted);
  cursor: pointer; font-family: inherit;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.btn-range-open:hover { border-color: var(--accent); color: var(--accent); background: var(--bg); }

/* ---- Home Phase 2 stat cards (4 cards row) ---- */
.home-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
@media (max-width: 600px) {
  .home-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

.home-stat-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 12px;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: var(--shadow-sm);
}
.home-stat-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; margin-bottom: 2px; flex-shrink: 0;
}
.home-stat-icon-brand { background: #F8E1E6; }
.home-stat-icon-mint  { background: #DDEDDF; }
.home-stat-icon-peach { background: #FBE2D4; }
.home-stat-icon-sand  { background: #F6E9CC; }

.home-stat-value {
  font-size: 22px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.home-stat-label {
  font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* ---- Hero brand card (続きから - Phase 2) ---- */
.hero-brand-card {
  position: relative; overflow: hidden;
  background: var(--accent);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin-bottom: 20px;
  color: #fff;
}
.hero-brand-deco {
  position: absolute; right: -20px; top: -10px;
  width: 200px; height: 140px;
  pointer-events: none; overflow: hidden;
}
.hero-brand-streak {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; opacity: 0.88;
  letter-spacing: 0.04em; margin-bottom: 8px;
}
.hero-brand-title {
  font-size: 20px; font-weight: 700; line-height: 1.25;
  margin: 0 0 2px;
}
.hero-brand-subtitle {
  font-size: 15px; font-weight: 500; opacity: 0.90;
  margin: 0 0 4px;
}
.hero-brand-session {
  font-size: 13px; opacity: 0.75; margin-bottom: 14px;
}
/* ---- Hero guest CTA (未ログイン誘導: 新規登録 / ログイン) ---- */
.hero-brand-actions {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px;
}
.hero-brand-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 700; line-height: 1;
  text-decoration: none; transition: opacity 0.15s, background 0.15s;
}
.hero-brand-btn-primary {
  background: #fff; color: var(--accent);
}
.hero-brand-btn-primary:hover { opacity: 0.9; }
.hero-brand-btn-ghost {
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
}
.hero-brand-btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
/* ---- Hero review CTA (軽量復習導線: 不正解のみ / 全部) ---- */
.hero-review { margin-top: 14px; }
.hero-review-label { font-size: 13px; font-weight: 600; opacity: 0.9; margin: 0 0 8px; }
.hero-review-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* 復習ボタンはラベル＋件数の2要素。既存 .hero-brand-btn の pill を流用しつつ間隔を確保。 */
.hero-review-actions .hero-brand-btn { gap: 8px; }
.hero-review-count {
  font-size: 12px; font-weight: 700; opacity: 0.8;
  font-variant-numeric: tabular-nums;
}
/* ---- Home level progress rows ---- */
.home-progress-section {
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px 22px;
  margin-bottom: 20px;
}
.home-progress-mypage-link {
  font-size: 12px; color: var(--text-muted); text-decoration: none;
}
.home-progress-mypage-link:hover { color: var(--accent); }
.home-progress-rows { display: flex; flex-direction: column; gap: 12px; }
.home-progress-row {
  display: flex; align-items: flex-start; gap: 10px;
  text-decoration: none; color: inherit; cursor: pointer;
  padding: 6px 8px;
  margin: -6px -8px;
  border-radius: var(--radius-md, 8px);
  transition: background-color 150ms var(--ease-out);
}
.home-progress-row:hover { background-color: rgba(0,0,0,0.03); }
.home-progress-info { flex: 1; min-width: 0; }
.home-progress-top {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 5px;
}
.home-progress-name { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; }
.home-progress-end {
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0; margin-left: 8px;
}
.home-progress-count {
  font-size: 12px; color: var(--text-muted); flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.home-progress-chevron { color: var(--text-muted); flex-shrink: 0; }
.home-progress-bar-wrap {
  height: 5px; background: var(--border);
  border-radius: var(--radius-pill); overflow: hidden;
}
.home-progress-bar-fill {
  /* width は SSR のインラインスタイルで確定（level-card-prog-fill と同じ防御） */
  width: 0;
  height: 100%; background: var(--accent);
  border-radius: var(--radius-pill);
  transition: width 800ms var(--ease-out);
  min-width: 2px;
}

/* ---- Home fixed expression coming soon card ---- */
.home-coming-soon-card {
  background: var(--bg-card); border: 1.5px dashed var(--border);
  border-radius: var(--radius-lg); padding: 24px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
  margin-bottom: 12px;
}
.home-coming-soon-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg-2); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
}
.home-coming-soon-title {
  font-size: 14px; font-weight: 600; color: var(--text-muted);
}
.home-coming-soon-badge {
  font-size: 11px; color: var(--text-subtle);
  background: var(--bg-2); border-radius: var(--radius-pill);
  padding: 2px 10px;
}

/* ---- Home fixed expression card (published) ---- */
.home-fixed-expression-section {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.home-fixed-expression-section .home-section-header {
  margin: 0;
}
.home-fixed-expression-count {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}
.home-fixed-expression-num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  margin-right: 2px;
}
/* 語彙セクションの総問題数。カード内と違い親の flex gap が無いので余白を自前で持つ */
.home-vocab-question-count {
  margin: 0 0 12px;
}
.home-fixed-expression-actions {
  display: flex;
  justify-content: flex-start;
}

/* ---- Home セクションカードの学習進捗バー（あなたの進捗と同形） ---- */
/* 進捗バーとその下の操作ボタンをカード下端へ寄せ、ペア間で高さを揃える */
.home-section-progress {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.home-section-progress-top {
  display: flex; align-items: baseline; justify-content: space-between;
}
.home-section-progress-label {
  font-size: 12px; color: var(--text-muted);
}
.home-section-progress-count {
  font-size: 12px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
/* 進捗バー直下の操作ボタンは詰めて配置（margin-top:auto は進捗側が持つ） */
.home-section-progress + .home-fixed-expression-actions {
  margin-top: 0;
}

/* ---- Brand-red primary CTA ---- */
.btn-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  padding: 12px 22px;
  border: none;
  border-radius: var(--radius-pill);
  text-decoration: none;
  cursor: pointer;
  min-height: 44px;
  box-sizing: border-box;
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn-brand:hover {
  background: var(--brand-hover);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.btn-brand:active { transform: translateY(1px); }
.btn-brand:focus-visible {
  outline: none;
  box-shadow: var(--glow-focus);
}

@media (max-width: 599px) {
  .home-fixed-expression-actions { align-self: stretch; }
  .home-fixed-expression-actions .btn-brand {
    width: 100%;
    padding: 13px 22px;
  }
}

/* ---- Range selection overlay (M_TopRange style) ---- */
.range-overlay-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 2000;
  animation: fade-in var(--dur-base) var(--ease-out);
}
@media (min-width: 600px) {
  .range-overlay-backdrop { align-items: center; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.range-overlay-panel {
  background: var(--bg-card);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  width: 100%; max-width: 480px;
  max-height: 85vh; overflow-y: auto;
  padding: 0 0 calc(24px + env(safe-area-inset-bottom));
  animation: sheet-in var(--dur-xslow) var(--ease-emph);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
}
@media (min-width: 600px) {
  .range-overlay-panel {
    border-radius: var(--radius-xl);
    animation: modal-in var(--dur-slow) var(--ease-out);
    padding-bottom: 24px;
  }
}

.range-overlay-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.range-overlay-title {
  font-size: 16px; font-weight: 700; color: var(--text); margin: 0;
}
.range-overlay-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-subtle); border: none;
  font-size: 16px; color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit;
}
.range-overlay-close:hover { background: var(--border); }

.range-overlay-hint {
  margin: 12px 20px;
  background: var(--bg-subtle); border-radius: var(--radius);
  padding: 10px 12px;
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 13px; color: var(--text-muted);
  flex-shrink: 0;
}

.range-overlay-list {
  padding: 4px 16px 0;
  display: flex; flex-direction: column; gap: 8px;
  flex: 1; overflow-y: auto;
}

.range-level-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
  background: var(--bg-card);
}
.range-level-item:hover:not(.is-disabled) {
  border-color: var(--accent-light); background: var(--bg);
}
.range-level-item.is-selected {
  border-color: var(--accent); background: #FCF1F4;
}
.range-level-item.is-disabled {
  opacity: 0.5; cursor: default;
}

.range-check-box {
  width: 20px; height: 20px; border-radius: 6px;
  border: 2px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 13px; color: #fff;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.range-level-item.is-selected .range-check-box {
  background: var(--accent); border-color: var(--accent);
}

.range-level-name {
  font-size: 15px; font-weight: 700; color: var(--text);
}
.range-level-sub {
  font-size: 12px; color: var(--text-muted); margin-top: 1px;
}
.range-level-count {
  margin-left: auto; font-size: 12px; color: var(--text-subtle); flex-shrink: 0;
}

.range-overlay-summary {
  margin: 12px 16px 0;
  background: var(--accent);
  border-radius: var(--radius);
  padding: 10px 14px;
  display: flex; gap: 8px; align-items: center;
  color: #fff;
  font-size: 13px; font-weight: 600;
  flex-shrink: 0;
}

.range-overlay-footer {
  display: flex; gap: 10px;
  padding: 16px 20px 0;
  flex-shrink: 0;
}
.range-overlay-footer .btn-cancel {
  flex: 1; padding: 12px; font-size: 14px; font-weight: 600;
  background: var(--bg-subtle); border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); cursor: pointer; font-family: inherit; color: var(--text-muted);
}
.range-overlay-footer .btn-confirm {
  flex: 2; padding: 12px; font-size: 14px; font-weight: 700;
  background: var(--accent); border: none; border-radius: var(--radius-lg);
  color: #fff; cursor: pointer; font-family: inherit;
  transition: opacity var(--dur-fast);
}
.range-overlay-footer .btn-confirm:disabled { opacity: 0.45; cursor: not-allowed; }
.range-overlay-footer .btn-confirm:hover:not(:disabled) { opacity: 0.88; }

/* ---- Quiz Phase 2 sticky header ---- */
.quiz-sticky-header {
  position: sticky; top: 56px; z-index: 90;
  background: rgba(250, 245, 236, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px 0;
}
/* LG 以上では .site-header が非表示になるため最上部（top:0）に吸着させる。
   このベース定義より後に宣言しないと top:56px に上書きされ、ヘッダーが
   フロー位置から 56px 下にずれて問題文に被さってしまう（カスケード順序が重要）。 */
@media (min-width: 1024px) {
  .quiz-sticky-header { top: 0; }
}
.quiz-sticky-header-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.quiz-abort-btn {
  display: flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600;
  padding: 6px 10px; border-radius: var(--radius);
  background: transparent; border: 1.5px solid var(--border-strong);
  color: var(--text-muted); cursor: pointer; font-family: inherit;
  flex-shrink: 0;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.quiz-abort-btn:hover { border-color: var(--text-muted); color: var(--text); }

.quiz-header-progress-wrap {
  flex: 1;
  height: 8px; background: var(--border); border-radius: var(--radius-pill); overflow: hidden;
}
.quiz-header-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #C9446A);
  border-radius: var(--radius-pill);
  transition: width var(--dur-slow) var(--ease-out);
}
.quiz-header-counter {
  font-size: 13px; font-weight: 700; color: var(--text); flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
/* ---- Quiz Phase 2 choice buttons (badge style) ---- */
.quiz-choice-v2 {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 12px 14px;
  font-size: 16px; line-height: 1.5;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 8px;
  text-align: left;
  cursor: pointer; font-family: inherit;
  transition: border-color var(--dur-base) var(--ease-out),
              background   var(--dur-base) var(--ease-out);
}
.quiz-choice-v2:hover:not(:disabled) {
  border-color: var(--border-strong); background: var(--bg-subtle);
}
.quiz-choice-badge {
  width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; flex-shrink: 0;
  background: var(--bg-2); color: var(--text-muted);
  transition: background var(--dur-base), color var(--dur-base);
  line-height: 1;
}
.quiz-choice-v2.selected {
  border-color: var(--accent); background: #FCF1F4;
}
.quiz-choice-v2.selected .quiz-choice-badge {
  background: var(--accent); color: #fff;
}
.quiz-choice-v2.correct {
  border-color: var(--mint); background: #DDEDDF;
}
.quiz-choice-v2.correct .quiz-choice-badge {
  background: var(--mint); color: #fff;
}
.quiz-choice-v2.wrong {
  border-color: var(--peach); background: #FBE2D4;
  animation: shake var(--dur-slow) var(--ease-out);
}
.quiz-choice-v2.wrong .quiz-choice-badge {
  background: var(--peach); color: #fff;
}
.quiz-choice-v2:disabled { cursor: default; }
.quiz-choice-v2.dim { border-style: dashed; opacity: 0.55; }

/* ---- 表記問題: 2×2 グリッド（PC のみ。モバイルは縦並び） ---- */
.quiz-choices-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.quiz-choices-grid .quiz-choice-v2 {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .quiz-choices-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

/* ---- 表記問題: 問題上部メタ行（カテゴリバッジ＋残り問数） ---- */
.quiz-meta-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.quiz-category-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.quiz-remaining {
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* ---- 表記問題: Sticky ヘッダーの経過時間 ---- */
.quiz-header-timer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ---- Quiz Phase 2 CTA row (スキップ | 回答する) ---- */
.quiz-cta-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px;
}
.btn-quiz-skip {
  flex: 0 0 auto;
  padding: 12px 18px; font-size: 14px; font-weight: 600;
  background: transparent; border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-lg); color: var(--text-muted);
  cursor: pointer; font-family: inherit;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.btn-quiz-skip:hover { border-color: var(--text-muted); color: var(--text); }

.btn-quiz-answer {
  flex: 1;
  padding: 12px 20px; font-size: 15px; font-weight: 700;
  background: var(--accent); color: #fff;
  border: none; border-radius: var(--radius-lg);
  cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: opacity var(--dur-fast), box-shadow var(--dur-fast);
}
.btn-quiz-answer:hover:not(:disabled) { opacity: 0.88; box-shadow: var(--shadow-sm); }
.btn-quiz-answer:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-quiz-answer-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1px 6px; min-width: 18px; height: 18px;
  border: 1px solid rgba(255,255,255,0.4);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.85);
  font-family: var(--font-en);
}

/* ---- Quiz Phase 2 keyboard hint bar ---- */
/* スマホ・タブレット（〜1023px）はキーボードが無いため非表示。PC のみ表示 */
.quiz-kbd-hint {
  display: none; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  margin-top: 10px;
  font-size: 12px; color: var(--text-muted);
}
@media (min-width: 1024px) {
  .quiz-kbd-hint { display: flex; }
}
.quiz-kbd-item {
  display: flex; align-items: center; gap: 5px;
}
.kbd-chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px; min-width: 18px; height: 18px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--bg-card);
  font-family: var(--font-en);
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
}

/* override old continue-hero-card with new brand style */
/* the new hero-brand-card replaces it; old class still works for fallback */

/* ====================================================================
   Phase 2 — Answer Reveal Panels
   ==================================================================== */
.answer-reveal-wrap {
  margin-top: 12px;
  border-radius: var(--r-14);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}

.answer-reveal-hero {
  position: relative; overflow: hidden;
  padding: 20px 16px;
  text-align: center;
  color: #fff;
}
.answer-reveal-hero--correct {
  background: linear-gradient(135deg, var(--mint) 0%, #5C9670 100%);
}
.answer-reveal-hero--wrong {
  background: linear-gradient(135deg, var(--peach-deep) 0%, #8B3E24 100%);
}
.answer-reveal-deco {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.answer-reveal-hero-inner { position: relative; }
.answer-reveal-label-en {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-en); font-weight: 600; font-size: 13px;
  letter-spacing: 0.05em; opacity: 0.9;
}
.answer-reveal-label-ja {
  font-family: var(--font-jp); font-weight: 700; font-size: 22px;
  margin-top: 2px;
}
.answer-reveal-label-sub {
  font-size: 12px; opacity: 0.85; margin-top: 2px;
  font-family: var(--font-jp);
}

.answer-reveal-body { padding: 16px 16px 20px; }

.answer-correct-label {
  font-size: 14px; color: var(--ink-2); margin: 0 0 12px;
}

.answer-explain-card {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-10); padding: 12px 14px; margin-bottom: 14px;
}
.answer-explain-icon {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.answer-explain-icon--correct {
  background: var(--brand-100); color: var(--brand);
}
.answer-explain-icon--wrong {
  background: var(--peach-soft); color: var(--peach-deep);
}
.answer-explain-content { flex: 1; min-width: 0; }
.answer-explain-heading {
  font-size: 12px; font-weight: 600; color: var(--ink-3);
  margin: 0 0 4px; text-transform: uppercase; letter-spacing: 0.04em;
}
.answer-explain-text {
  font-size: 14px; line-height: 1.6; color: var(--ink); margin: 0;
}
/* 解説カードの語彙画像サムネ（右列）。.answer-explain-card は既に display:flex。
   既定 117×88、PC で 149×112。クリックでライトボックス。画像なし語では template で非表示。 */
.answer-explain-thumb {
  flex-shrink: 0;
  padding: 0;
  width: 117px; height: 88px;
  border: 1px solid var(--border);
  border-radius: var(--r-10);
  overflow: hidden;
  background: var(--sand-soft);
  cursor: zoom-in;
}
.answer-explain-thumb img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
@media (min-width: 1024px) {
  .answer-explain-thumb { width: 149px; height: 112px; }
}

/* ====================================================================
   Phase 2 — Quiz Result Page
   ==================================================================== */
.result-v2-hero-wrap { padding: 16px 16px 0; }

.result-v2-hero-card {
  background: var(--brand);
  border-radius: var(--r-14);
  padding: 24px 18px;
  text-align: center;
  position: relative; overflow: hidden;
  color: #fff;
}
.result-v2-deco {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.result-v2-hero-inner { position: relative; }
.result-v2-eyebrow {
  font-family: var(--font-en); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; opacity: 0.85; text-transform: uppercase;
}
.result-v2-score-row {
  display: flex; align-items: baseline; justify-content: center;
  gap: 6px; margin-top: 8px;
}
.result-v2-score {
  font-family: var(--font-en); font-weight: 800;
  font-size: 64px; line-height: 1; letter-spacing: -0.03em;
}
.result-v2-score-total {
  font-family: var(--font-en); font-weight: 600;
  font-size: 28px; opacity: 0.7;
}
.result-v2-meta {
  font-size: 13px; opacity: 0.85; margin-top: 6px;
  font-family: var(--font-jp);
}
.result-v2-badges {
  display: flex; gap: 8px; justify-content: center;
  flex-wrap: wrap; margin-top: 12px;
}
.result-v2-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.2); color: #fff;
  border-radius: 99px; padding: 3px 10px;
  font-size: 12px; font-weight: 600;
}
.result-v2-badge--review {
  background: rgba(255,255,255,0.15);
}

.result-v2-cta-wrap { padding: 14px 16px 0; display: flex; flex-direction: column; gap: 8px; }
.result-v2-cta-primary { display: block; text-align: center; }
.result-v2-other-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; color: var(--ink-3); background: none; border: none;
  cursor: pointer; padding: 4px 0; font-family: inherit;
  text-decoration: underline; text-underline-offset: 3px;
}
.result-v2-other-btn svg { transition: transform 150ms; flex-shrink: 0; }
.result-v2-cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.result-v2-top-link {
  text-align: center; font-size: 13px; color: var(--ink-3);
  text-decoration: none; padding: 4px 0;
}
.result-v2-top-link:hover { color: var(--brand); }

/* AdSense 広告枠（partials/ad-slot。結果画面 2 種に 1 枠ずつ）。
   min-height で先に高さを確保して、広告の読み込みでレイアウトがずれないようにする（CLS 対策） */
.ad-slot {
  margin: 18px 16px 0; padding: 10px 12px 12px;
  background: var(--bg-2); border: 1px dashed var(--border); border-radius: var(--r-14);
  min-height: 280px; display: flex; flex-direction: column;
}
.ad-slot-label { font-size: 11px; color: var(--ink-3); text-align: center; margin: 0 0 8px; }
.ad-slot-unit  { display: block; flex: 1; min-height: 250px; }
.ad-slot--fxq-result { margin: 0; }
/* 広告が埋まらなかった（AdSense が data-ad-status="unfilled" を付けた）ときは空き枠ごと畳む */
.ad-slot:has(ins[data-ad-status="unfilled"]) { display: none; }
@media (min-width: 1024px) {
  .ad-slot      { min-height: 120px; }
  .ad-slot-unit { min-height: 90px; }
}

.result-v2-guest-card {
  margin: 14px 16px 0;
  background: var(--brand-50); border: 1px solid var(--brand-100);
  border-radius: var(--r-14); padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
}
.result-v2-guest-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--brand-100); color: var(--brand);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.result-v2-guest-text { flex: 1; min-width: 0; }
.result-v2-guest-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.result-v2-guest-sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.result-v2-guest-btn { flex-shrink: 0; }

.result-v2-review-wrap { margin-top: 22px; padding: 0 16px 24px; }
.result-v2-review-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
}
.result-v2-review-h2 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0; }
.result-v2-review-count { font-size: 12px; color: var(--ink-3); }

.result-v2-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.result-v2-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px; border-radius: 99px;
  font-size: 13px; font-weight: 500;
  border: 1.5px solid var(--border);
  background: var(--surface); color: var(--ink-3);
  cursor: pointer; transition: all 120ms;
}
.result-v2-chip.is-active {
  background: var(--brand); border-color: var(--brand);
  color: #fff; font-weight: 600;
}
.result-v2-chip[data-filter="wrong"].is-active {
  background: var(--peach-soft); border-color: var(--wrong);
  color: var(--wrong);
}
.result-v2-chip[data-filter="correct"].is-active {
  background: var(--mint-soft); border-color: var(--correct);
  color: var(--correct);
}
.result-v2-chip-num {
  font-family: var(--font-en); font-size: 11px; opacity: 0.7;
}
.result-v2-chip.is-active .result-v2-chip-num { opacity: 0.8; }

.result-v2-bulk {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px;
}
.result-v2-bulk-btn {
  font-size: 11px; color: var(--ink-3); background: none; border: none;
  padding: 4px 6px; cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
}
.result-v2-bulk-btn:hover { color: var(--brand); }
.result-v2-bulk-btn--clear { color: var(--danger); }
.result-v2-bulk-btn--clear:hover { color: var(--danger); opacity: 0.8; }

.result-v2-cards { display: flex; flex-direction: column; gap: 10px; }

.result-v2-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-14); overflow: hidden;
}
.result-v2-card.is-wrong { border-color: var(--peach); }
.result-v2-card.is-correct { border-color: var(--mint); }

.result-v2-card-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border);
}
.result-v2-card.is-wrong .result-v2-card-head { background: var(--peach-soft); }
.result-v2-card.is-correct .result-v2-card-head { background: var(--mint-soft); }

.result-v2-card-status {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.result-v2-card-status.is-correct { background: var(--mint); color: #fff; }
.result-v2-card-status.is-wrong   { background: var(--danger); color: #fff; }

.result-v2-card-qnum { font-size: 12px; font-weight: 600; color: var(--ink-3); }

.result-v2-review-badge {
  margin-left: auto;
  background: var(--peach-soft); color: var(--peach-deep);
  border: 1px solid var(--peach); border-radius: 99px;
  font-size: 11px; font-weight: 600; padding: 2px 8px;
}

.result-v2-card-body { padding: 12px 14px; }

.result-v2-card-sentence {
  font-size: 15px; line-height: 1.6; color: var(--ink);
  margin: 0 0 10px;
}
.result-v2-card-answers { font-size: 13px; color: var(--ink-2); line-height: 1.7; }
.result-v2-card-answer-label { color: var(--ink-4); }
.result-v2-answer-wrong {
  text-decoration: line-through; color: var(--danger);
}
.result-v2-answer-correct { color: var(--mint); font-weight: 600; }

.result-v2-learned-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px;
}
.result-v2-learned-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-3); cursor: pointer;
}
.result-v2-learned-msg {
  font-size: 11px; color: var(--mint); font-weight: 600;
}

/* ====================================================================
   Phase 2 — Section Select Page
   ==================================================================== */
.section-v2-header { padding: 20px 16px 12px; }
.section-v2-eyebrow {
  font-family: var(--font-en); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
}
.section-v2-h1 { font-size: 22px; font-weight: 700; color: var(--ink); margin: 0; }

.section-v2-list { padding: 0 16px 24px; display: flex; flex-direction: column; gap: 10px; }

.section-v2-card {
  width: 100%;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 14px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-14); text-align: left;
  text-decoration: none; cursor: pointer;
  transition: box-shadow 150ms, border-color 150ms;
}
.section-v2-card--available:hover {
  box-shadow: var(--shadow-md); border-color: var(--brand-300);
}
.section-v2-card--disabled {
  opacity: 0.55; cursor: default;
}

.section-v2-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.section-v2-icon--brand {
  background: var(--brand-100); color: var(--brand);
}
.section-v2-icon--mute {
  background: var(--bg-2); color: var(--ink-4);
}

.section-v2-info { flex: 1; min-width: 0; }
.section-v2-name {
  font-size: 16px; font-weight: 700; color: var(--ink);
}
.section-v2-sub {
  font-size: 12px; color: var(--ink-3); margin-top: 2px;
}

.section-v2-chevron { color: var(--ink-3); flex-shrink: 0; }

.section-v2-coming-badge {
  background: var(--bg-2); color: var(--ink-4);
  border: 1px solid var(--border); border-radius: 99px;
  font-size: 11px; font-weight: 600; padding: 3px 9px;
  flex-shrink: 0;
}

/* ====================================================================
   Phase 2 — Quiz Start Settings Page
   ==================================================================== */
.qstart-eyebrow {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-en); font-size: 11px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-3); padding: 20px 16px 0;
}
.qstart-eyebrow-sep { opacity: 0.5; }
.qstart-h1 {
  font-size: 22px; font-weight: 700; color: var(--ink);
  margin: 6px 0 16px; padding: 0 16px;
}

.qstart-card {
  margin: 0 16px 12px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-14); padding: 14px 16px;
}
.qstart-card--options { padding: 4px 0; }

.qstart-card-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px;
}
.qstart-card--options .qstart-card-label {
  padding: 14px 16px 6px; margin-bottom: 0;
}

.qstart-range-row { display: flex; align-items: center; gap: 12px; }
.qstart-range-info { flex: 1; }
.qstart-range-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.qstart-range-count { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

.qstart-option-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; cursor: pointer;
}
.qstart-option-row + .qstart-option-row { border-top: 1px solid var(--border); }
.qstart-option-row.is-disabled { cursor: default; }
.qstart-option-row.is-disabled .qstart-option-name,
.qstart-option-row.is-disabled .qstart-option-sub { opacity: 0.45; }
.qstart-option-row.is-disabled .qstart-checkbox { opacity: 0.45; cursor: default; }
.qstart-option-divider { border-top: 1px solid var(--border); }
.qstart-checkbox {
  width: 18px; height: 18px; border-radius: 4px;
  accent-color: var(--brand); margin-top: 1px; flex-shrink: 0;
  cursor: pointer;
}
.qstart-option-text { flex: 1; }
.qstart-option-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.qstart-option-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

.qstart-card-head-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px;
}
.qstart-limit-display { display: flex; align-items: baseline; gap: 3px; }
.qstart-limit-num {
  font-family: var(--font-en); font-weight: 700; font-size: 22px;
  color: var(--brand);
}
.qstart-limit-unit { font-size: 13px; color: var(--ink-3); }

.qstart-preset-row { display: flex; gap: 8px; flex-wrap: wrap; }
.qstart-preset-chip {
  padding: 6px 14px; border-radius: 99px;
  border: 1.5px solid var(--border);
  background: var(--surface); color: var(--ink);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: all 120ms;
}
.qstart-preset-chip.is-active {
  background: var(--brand); border-color: var(--brand);
  color: #fff; font-weight: 700;
}
.qstart-preset-chip:hover:not(.is-active) {
  border-color: var(--brand-300);
}

.qstart-custom-row {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
}
.qstart-custom-input {
  width: 80px; padding: 7px 10px;
  border: 1.5px solid var(--border); border-radius: var(--r-8);
  font-size: 15px; font-family: var(--font-en); font-weight: 600;
  color: var(--ink); background: var(--bg);
}
.qstart-custom-input:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-100);
}

.qstart-no-questions {
  font-size: 13px; color: var(--danger);
  margin: 10px 0 0;
}
.qstart-avail-hint {
  font-size: 12px; color: var(--ink-3); margin: 10px 0 0;
}

.qstart-btn {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; width: calc(100% - 32px);
  margin: 4px 16px 24px;
  font-size: 16px; padding: 14px 20px;
}

/* ================================================================
   モバイルタブバー（<1024px のみ表示）
   ================================================================ */
.app-tabbar {
  display: none;
}

@media (max-width: 1023px) {
  /* タブバー本体 */
  .app-tabbar {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0;
    height: calc(56px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    z-index: 300;
    align-items: stretch;
    box-shadow: 0 -2px 10px rgba(80,50,35,.07);
  }

  /* コンテンツがタブバーに隠れないようにパディング確保 */
  .page-main {
    padding-bottom: calc(56px + env(safe-area-inset-bottom) + 8px);
  }

  /* フッターがタブバーに隠れないように下パディングを確保（背景はタブバー直下まで連続） */
  .site-footer {
    padding-bottom: calc(56px + env(safe-area-inset-bottom) + 16px);
  }

  /* ページコンテンツが短いときでもフッターを document 下端まで押し下げ、
     フッター bottom とタブバー top の間にページ地色が露出しないようにする */
  .app-main-area {
    display: flex;
    flex-direction: column;
  }
  .app-main-area > .site-footer {
    margin-top: auto;
  }
}

/* タブ共通 */
.app-tab {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--text-muted);
  padding: 6px 4px 4px;
  position: relative;
  transition: color var(--dur-fast);
  -webkit-tap-highlight-color: transparent;
}
.app-tab:hover,
.app-tab:active { text-decoration: none; }
.app-tab.is-active { color: var(--accent); }

/* アクティブ表示（上部インジケーターライン） */
.app-tab.is-active::before {
  content: '';
  position: absolute; top: 0; left: 20%; right: 20%;
  height: 2px; border-radius: 0 0 2px 2px;
  background: var(--accent);
}

/* アイコンラッパー（バッジ位置の基準点） */
.app-tab-icon-wrap {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
}

.app-tab-icon {
  width: 22px; height: 22px; flex-shrink: 0;
}

/* タブラベル */
.app-tab-label {
  font-size: 10px; font-weight: 500; line-height: 1;
  letter-spacing: 0.01em; white-space: nowrap;
}

/* 要復習バッジ */
.app-tab-badge {
  position: absolute; top: -5px; right: -9px;
  background: var(--peach); color: #fff;
  border-radius: var(--radius-pill);
  font-size: 9px; font-weight: 700; line-height: 1;
  padding: 2px 4px; min-width: 16px;
  text-align: center;
  border: 1.5px solid var(--bg-card);
}

/* =================================================================
 * Vocabulary List — Expanded / Compact mode + Bottom Sheet Modal
 * 表示モード（viewMode='compact'）で行タップにより詳細モーダルを開く。
 * モード切替は item-list に付与される .is-compact / .is-expanded で制御。
 * ================================================================= */

/* --- 既定: 何も付かない（フォールバックで展開モード相当）--- */
.vocab-mobile-tap { display: none; }
/* コンパクト専用の行内ピン。既定（展開相当）では非表示。
   コンパクト時のみ表示し、ブックマークと並ぶ 44px のアイコンボタンとして出す。 */
.vocab-compact-pin { display: none; }

/* --- 展開モード: インライン語彙解説を表示、モバイルタップは非表示 --- */
.item-list.is-expanded .vocab-mobile-tap { display: none; }
.item-list.is-expanded .vocab-pc-only { display: flex; }
.item-list.is-expanded .vocab-compact-pin { display: none; }
/* 展開モードでは行内要素（チェックボックス・バッジ・ピン・解説）を縦中央に揃える。
   バッジ/ピンやチェックボックスが上端に寄って縦バランスが崩れるのを防ぐ。 */
.item-list.is-expanded .item-row {
  align-items: center;
  padding: 12px 12px;
  gap: 10px;
}
/* 「未学習」バッジとピンの縦積みは少し余白をあけて分離する */
.item-list.is-expanded .vocab-action-stack {
  gap: 6px;
}
/* item-content 内は縦並びを明示 */
.item-list.is-expanded .item-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* 単語帳の展開モードでは語彙解説を独立行に */
.item-list.is-expanded .item-meaning {
  display: block;
  margin-top: 2px;
}

/* is-unset（Cookie 未設定＝未選択）は 1024px 以上で「展開相当」になる。
   素の既定は .vocab-mobile-tap / .vocab-compact-pin を隠すだけで、上の展開ルール
   （行の余白・item-content の縦並び・解説の独立行、そして .vocab-thumb の寸法）までは
   面倒を見ない。ここを書かないと PC 未選択時に画像付きの語でサムネが原寸大に膨らむ。
   ＝上の .is-expanded ルール群と対。展開の見た目を変えるときは両方を直すこと。 */
@media (min-width: 1024px) {
  .item-list.is-unset .item-row {
    align-items: center;
    padding: 12px 12px;
    gap: 10px;
  }
  .item-list.is-unset .vocab-action-stack { gap: 6px; }
  .item-list.is-unset .item-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .item-list.is-unset .item-meaning {
    display: block;
    margin-top: 2px;
  }
}

/* --- コンパクトモード: モバイルタップを表示、インライン要素を非表示 --- */
.item-list.is-compact .vocab-pc-only { display: none; }
/* コンパクトでは行内ピン（アイコン）を表示。展開時は vocab-action-stack のピル型ピンを使う。 */
.item-list.is-compact .vocab-compact-pin { display: inline-flex; }
.item-list.is-compact .vocab-mobile-tap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.item-list.is-compact .vocab-mobile-tap:active { opacity: 0.7; }
.item-list.is-compact .vocab-mobile-status {
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--ink-3);
  flex-shrink: 0;
  white-space: nowrap;
}
.item-list.is-compact .vocab-mobile-status.is-learned {
  background: var(--mint);
  color: var(--bg-card);
  border-color: var(--mint);
}
.item-list.is-compact .vocab-mobile-word-wrap {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}
.item-list.is-compact .vocab-mobile-word {
  font-size: 18px; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis;
}
.item-list.is-compact .vocab-mobile-reading {
  font-size: 13px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis;
}
.item-list.is-compact .vocab-mobile-bm-icon {
  font-size: 14px; color: var(--brand);
  flex-shrink: 0;
}
.item-list.is-compact .vocab-mobile-chevron {
  font-size: 20px;
  color: var(--ink-4);
  flex-shrink: 0;
  line-height: 1;
}

/* --- 未解決（Cookie 未設定＝ユーザーがまだ選んでいない）: 画面幅で解決する ---
 * サーバーは画面幅を知り得ないので、Cookie 未設定時は SSR で is-unset だけを焼き、
 * 「PC=展開 / スマホ=コンパクト」の解決をここ（CSS のメディアクエリ）に委ねる。
 *   - 1024px 以上 → 何も当てない＝素の既定＝展開相当（:4916-4920 の既定ルールがそのまま効く）
 *   - 1024px 未満 → 下記でコンパクト相当を当てる
 * first paint の時点で確定するので、描画後の組み替え（FOUC / CLS）が起きない。
 * UA 判定はしない（cookie-less な HTML がデバイス非依存に保たれ CDN キャッシュが効く）。
 *
 * 【保守】上の .is-compact ルール群（:4949-5008）と対になっている。
 * コンパクトの見た目を変えるときは両方を直すこと。 */
@media (max-width: 1023.98px) {
  .item-list.is-unset .vocab-pc-only { display: none; }
  .item-list.is-unset .vocab-compact-pin { display: inline-flex; }
  .item-list.is-unset .vocab-mobile-tap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    padding: 4px 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
  }
  .item-list.is-unset .vocab-mobile-tap:active { opacity: 0.7; }
  .item-list.is-unset .vocab-mobile-status {
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    color: var(--ink-3);
    flex-shrink: 0;
    white-space: nowrap;
  }
  .item-list.is-unset .vocab-mobile-status.is-learned {
    background: var(--mint);
    color: var(--bg-card);
    border-color: var(--mint);
  }
  .item-list.is-unset .vocab-mobile-word-wrap {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    gap: 2px;
    line-height: 1.3;
  }
  .item-list.is-unset .vocab-mobile-word {
    font-size: 18px; font-weight: 700; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis;
  }
  .item-list.is-unset .vocab-mobile-reading {
    font-size: 13px; color: var(--ink-3);
    overflow: hidden; text-overflow: ellipsis;
  }
  .item-list.is-unset .vocab-mobile-bm-icon {
    font-size: 14px; color: var(--brand);
    flex-shrink: 0;
  }
  .item-list.is-unset .vocab-mobile-chevron {
    font-size: 20px;
    color: var(--ink-4);
    flex-shrink: 0;
    line-height: 1;
  }
}

/* --- ボトムシート本体 --- */
.vocab-sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 1200;
}
.vsb-enter, .vsb-leave { transition: opacity var(--dur-slow, 300ms) var(--ease-out, ease-out); }
.vsb-from { opacity: 0; }
.vsb-to   { opacity: 1; }

.vocab-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-card);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
  z-index: 1201;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom);
}
.vss-enter, .vss-leave { transition: transform var(--dur-slow, 300ms) var(--ease-out, ease-out); }
.vss-from { transform: translateY(100%); }
.vss-to   { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .vsb-enter, .vsb-leave, .vss-enter, .vss-leave { transition: none; }
}

/* シートは viewMode==='compact' のときだけ起動するため、
 * 幅ベースの強制非表示は撤廃。PC でもユーザーがコンパクトを選べば表示される。 */

.vocab-sheet-handle {
  width: 36px; height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 10px auto 4px;
}

.vocab-sheet-header {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  gap: 8px;
  min-height: 48px;
}
.vocab-sheet-close {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer;
  color: var(--ink-3);
  font-size: 14px;
  padding: 8px 6px;
  font-family: inherit;
}
.vocab-sheet-close:active { opacity: 0.7; }
.vocab-sheet-pos {
  flex: 1; text-align: center;
  font-size: 13px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.vocab-sheet-bm { /* inherits .bookmark-btn */ }

.vocab-sheet-status-row {
  padding: 0 20px 6px;
}
.vocab-sheet-status-pill {
  pointer-events: none;
  cursor: default;
  min-height: auto;
  padding: 4px 12px;
  font-size: 12px;
}

.vocab-sheet-word-row {
  padding: 4px 20px 8px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.vocab-sheet-word {
  font-size: 34px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.vocab-sheet-reading {
  font-size: 16px;
  color: var(--ink-3);
}

.vocab-sheet-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 4px 20px 16px;
}

/* 詳細モーダル本体（区切り線 + 解説 + 画像）。
   スマホは column で「画像 → 区切り線 → 解説」（order で並べ替え。見出し直下のヒーロー）、
   PC は row の 2 カラム（左=解説 / 右=画像）で区切り線はその上に全幅。
   左右 padding は .vocab-sheet-main 側に持たせる。ここに付けるとスマホのヒーロー画像が
   インセットして全幅でなくなる（画像は .vocab-sheet-body 直下 = padding の外に置く）。 */
.vocab-sheet-body {
  display: flex;
  flex-direction: column;
}
.vocab-sheet-main {
  min-width: 0;
  padding: 0 20px 16px;
}
.vocab-sheet-body .vocab-sheet-image-wrap { order: -2; }
.vocab-sheet-body .vocab-sheet-divider    { order: -1; }

/* 学習記録は脇役。解説の下に上罫線つき 1 行メタとして置く（旧 3 分割 stat-box は廃止）。
   配色は一覧側の .vocab-stat-*（label=--ink-3 / value=--ink-2）に揃える。
   --ink-4 は tokens.css で placeholder/disabled 用と定義されており、11px の本文に使うと
   白背景で 2.54:1（WCAG AA 不合格）まで落ちて読めない。「脇役」はサイズと罫線で表現する。 */
.vocab-sheet-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11px;
}
.vocab-sheet-meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.vocab-sheet-meta-label { color: var(--ink-3); }
.vocab-sheet-meta-value { font-weight: 600; color: var(--ink-2); }

.vocab-sheet-explanation {
  padding: 0;
}
.vocab-sheet-exp-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.vocab-sheet-exp-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.08em;
}
/* 語彙解説が主役。--ink-2（薄いセカンダリ）ではなく --ink で本文として立たせる。 */
.vocab-sheet-exp-body {
  font-size: 16px;
  color: var(--ink);
  line-height: 1.85;
  font-weight: 500;
  margin: 0;
}

.vocab-sheet-learned-card {
  margin: 0 16px 16px;
  background: var(--bg-subtle);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}
.vocab-sheet-learned-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  font-weight: 500;
}
.vocab-sheet-learned-check {
  width: 20px; height: 20px;
  flex-shrink: 0;
  accent-color: var(--mint);
  cursor: pointer;
}
.vocab-sheet-learned-note {
  font-size: 12px;
  color: var(--ink-4);
  margin: 6px 0 0 30px;
}

/* 複数レベル語のレベル別学習済みトグル（詳細シート内）。
   learned-btn と同じ配色トークン（mint = 学習済み）でトーンを揃える。
   タップ主体の UI なので行内ピルより一回り大きくする。 */
.vocab-sheet-learned-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 10px;
}
.vocab-sheet-level-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vocab-sheet-level-toggle {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  padding: 9px 16px;
  min-width: 56px;
  background: var(--bg-card);
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: inherit;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-emph);
}
.vocab-sheet-level-toggle:hover:not(.is-learned) {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
  color: var(--ink-2);
}
.vocab-sheet-level-toggle:active {
  transform: scale(0.93);
}
.vocab-sheet-level-toggle.is-learned {
  background: var(--mint);
  color: var(--bg-card);
  border-color: var(--mint);
}
.vocab-sheet-level-toggle.is-learned:hover {
  background: var(--mint-deep);
  border-color: var(--mint-deep);
}
.vocab-sheet-level-toggle .vslt-check {
  font-size: 12px;
}
/* トグル群の下の注記はインデント不要（チェックボックスの 30px 揃えを引き継がない） */
.vocab-sheet-level-toggles + .vocab-sheet-learned-note,
.vocab-sheet-learned-title + .vocab-sheet-level-toggles + .vocab-sheet-learned-note {
  margin-left: 0;
}

.vocab-sheet-footer {
  display: flex;
  border-top: 1px solid var(--border);
}
.vocab-sheet-prev,
.vocab-sheet-next {
  flex: 1 1 50%;
  padding: 16px;
  font-size: 15px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  font-family: inherit;
  background: var(--bg-card);
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.vocab-sheet-prev {
  border-right: 1px solid var(--border);
}
.vocab-sheet-next {
  background: var(--brand);
  color: #fff;
}
.vocab-sheet-prev:disabled,
.vocab-sheet-next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.vocab-sheet-prev:active:not(:disabled),
.vocab-sheet-next:active:not(:disabled) {
  opacity: 0.85;
}

/* =================================================================
 * 語彙画像サムネイル + 詳細シート画像（PR2 表示系）
 * 画像なし語が多数派のため「なし時にレイアウトが崩れない」ことを最優先。
 * ================================================================= */

/* --- (A) コンパクト一覧サムネ（.vocab-mobile-tap 内、バッジと語の間） --- */
.vocab-compact-thumb {
  flex-shrink: 0;
  display: block;
  border-radius: var(--radius);   /* 8px */
  overflow: hidden;
  background: var(--sand-soft);
  border: 1px solid var(--border);
}
.vocab-compact-thumb img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  cursor: zoom-in;
}
/* スマホ既定: 53×40（4:3）。画像なしは要素ごと消す（スペーサーなし → 語が右へ伸びる）。
   flex order で chevron の直前（右端）へ寄せる。 */
.item-list.is-compact .vocab-compact-thumb {
  width: 53px; height: 40px;
  order: 5;   /* status(なし) / thumb / word-wrap / bm-icon / chevron の中で chevron 手前へ */
}
.item-list.is-compact .vocab-mobile-chevron { order: 6; }
.item-list.is-compact .vocab-compact-thumb.is-empty { display: none; }

/* is-unset（未選択）は 1024px 未満でのみコンパクト相当 ＝ スマホ値だけを持てばよい
   （1024px 以上では展開相当になるので、下の PC 用オーバーライドは不要）。 */
@media (max-width: 1023.98px) {
  .item-list.is-unset .vocab-compact-thumb {
    width: 53px; height: 40px;
    order: 5;
  }
  .item-list.is-unset .vocab-mobile-chevron { order: 6; }
  .item-list.is-unset .vocab-compact-thumb.is-empty { display: none; }
}

/* PC（1024px+）: 59×44。DOM 順（バッジの右）そのまま。
   画像なしは visibility:hidden のスペーサーとして残し語頭を縦に揃える。 */
@media (min-width: 1024px) {
  .item-list.is-compact .vocab-compact-thumb {
    width: 59px; height: 44px;
    order: 0;
  }
  .item-list.is-compact .vocab-mobile-chevron { order: 0; }
  .item-list.is-compact .vocab-compact-thumb.is-empty {
    display: block;
    visibility: hidden;
  }
}

/* --- (B) 展開モードサムネ（.item-row の最後の子。.item-content の外側） --- */
.vocab-thumb {
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-10);   /* 10px */
  overflow: hidden;
  background: var(--sand-soft);
  cursor: zoom-in;
}
.vocab-thumb img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* 展開モードのみ表示（vocab-pc-only が展開時に display:flex になる）。
   PC 相当（デフォルト）: 128×96、行末の最後の flex child。 */
.item-list.is-expanded .vocab-thumb {
  display: block;
  width: 128px; height: 96px;
  align-self: center;
}
/* is-unset（未選択）の PC は展開相当。この寸法指定が無いと .vocab-thumb は幅・高さ無指定の
   ままになり、画像付きの語でサムネが原寸大（数百 px）に膨らむ。
   1024px 未満では .is-unset .vocab-pc-only が display:none なので、ここは PC だけでよい。 */
@media (min-width: 1024px) {
  .item-list.is-unset .vocab-thumb {
    display: block;
    width: 128px; height: 96px;
    align-self: center;
  }
}
/* スマホ幅の展開モード: 見出し右に absolute で 96×72。
   has-thumb 時のみ .item-header に padding-right を確保（語+バッジ行のみ回避、解説は下から全幅）。 */
@media (max-width: 1023px) {
  .item-list.is-expanded .item-row.has-thumb { position: relative; }
  .item-list.is-expanded .vocab-thumb {
    position: absolute;
    top: 12px; right: 12px;
    width: 96px; height: 72px;
  }
  .item-list.is-expanded .item-row.has-thumb .item-header {
    padding-right: 104px;
  }
}

/* --- (C) 詳細シート画像（.vocab-sheet-word-row 直後） --- */
/* スマホ既定: 全幅ヒーロー 4:3、拡大なし。 */
.vocab-sheet-image-wrap {
  margin: 12px 0 4px;
  border-radius: var(--r-14);   /* 14px */
  overflow: hidden;
  background: var(--sand-soft);
}
.vocab-sheet-image-wrap img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 200px;
  object-fit: cover;
}
/* PC（1024px+）: ボトムシートをやめ、画面センターの通常モーダル（幅 720px）にする。
   画像は絶対配置ではなく .vocab-sheet-body の flex 右列（224×168）。
   画像なし語では右列ごと消え、テキストが自然に全幅になる。 */
@media (min-width: 1024px) {
  /* センタリングは inset:0 + margin:auto で行う（transform は使わない）。
     .vss-from/.vss-to が transform を握っているため、translate(-50%,-50%) 方式だと
     トランジション中に打ち消し合って位置が飛ぶ。margin:auto なら transform と非干渉で、
     下の .vss-* はセンター位置からの相対オフセットとして素直に効く。 */
  .vocab-sheet {
    inset: 0;
    width: 720px;
    max-width: calc(100vw - 48px);
    height: max-content;
    /* dvh 非対応ブラウザ向けに vh 版を先に置く（ベース .vocab-sheet の 90vh/90dvh と同じ流儀） */
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    margin: auto;
    border-radius: var(--radius-xl);
    /* padding-bottom の env(safe-area-inset-bottom) もここで打ち消す（PC に safe-area は不要） */
    padding: 22px 32px 28px;
    box-shadow: 0 24px 64px rgba(46, 32, 22, 0.35);
  }
  .vocab-sheet-handle { display: none; }
  .vocab-sheet-backdrop { background: rgba(46, 32, 22, 0.45); }

  /* せり上がり（translateY(100%)）はセンターモーダルに合わないのでフェード+微移動に差し替え */
  .vss-enter, .vss-leave {
    transition: transform var(--dur-slow, 300ms) var(--ease-out, ease-out),
                opacity   var(--dur-slow, 300ms) var(--ease-out, ease-out);
  }
  .vss-from { opacity: 0; transform: translateY(8px) scale(0.98); }
  .vss-to   { opacity: 1; transform: translateY(0) scale(1); }

  /* 2 カラム化: 左=解説+メタ / 右=画像。区切り線は wrap させて 2 カラムの上に全幅で引く。 */
  .vocab-sheet-body {
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 28px;
  }
  .vocab-sheet-body .vocab-sheet-divider {
    order: -1;
    flex: 0 0 100%;
    width: 100%;
    /* gap:28px が下に付くので自前の下マージンは殺し、上だけ残す */
    margin: 4px 0 -12px;
  }
  /* padding:0 はベース（0 20px 16px）の打ち消し。左右余白はモーダル本体側に一本化する。 */
  .vocab-sheet-main { flex: 1; min-width: 0; padding: 0; }
  .vocab-sheet-body .vocab-sheet-image-wrap {
    order: 0;
    flex: 0 0 224px;
    width: 224px; height: 168px;
    margin: 0;
  }
  .vocab-sheet-body .vocab-sheet-image-wrap img {
    width: 224px; height: 168px;
    aspect-ratio: auto;
    max-height: none;
  }

  /* 内側要素は自前の左右 padding/margin を持つ。モーダル本体に 32px を入れたので二重になる。 */
  .vocab-sheet-header,
  .vocab-sheet-status-row,
  .vocab-sheet-word-row { padding-left: 0; padding-right: 0; }
  .vocab-sheet-divider,
  .vocab-sheet-learned-card { margin-left: 0; margin-right: 0; }

  /* フッターの罫線はボトムシートの「全幅 2 分割ボタン」を前提にしたもの。
     モーダルでは左右に余白ができ、border-top が「次へ」ボタンの背後で途切れて見える。
     PC では罫線を外し、「次へ」を角丸ボタンとして独立させる。 */
  .vocab-sheet-footer {
    border-top: none;
    gap: 16px;
    margin-top: 20px;
    align-items: center;
  }
  .vocab-sheet-prev,
  .vocab-sheet-next { padding: 13px 16px; }
  /* 「前へ」は控えめにするが色は落とさない（--ink-4 は disabled 用の色で、
     有効なボタンに使うと押せないように見える）。強弱は font-weight で付ける。 */
  .vocab-sheet-prev {
    border-right: none;
    flex: 1 1 33%;
  }
  .vocab-sheet-next {
    flex: 2 1 67%;
    border-radius: var(--r-10);
    font-weight: 700;
  }
}

/* 上の .vss-* 上書きは L5039 の reduced-motion ブロックと同詳細度かつ後方にあるため、
   そのままだと PC で「視差効果を減らす」が効かなくなる。ここで再宣言して塞ぐ。 */
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .vss-enter, .vss-leave { transition: none; }
}

/* =================================================================
 * 語彙画像ライトボックス（partials/image-lightbox.blade.php）
 * z-index 2100: 詳細シート(1201)より確実に上。
 * ================================================================= */
.image-lightbox-overlay {
  position: fixed; inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(46, 32, 22, 0.68);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.image-lightbox-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 90vw;
}
.image-lightbox-img {
  display: block;
  max-width: 80vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--r-14);
  box-shadow: var(--shadow-lg);
  background: var(--bg-card);
  touch-action: pinch-zoom;
}
.image-lightbox-caption {
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: 15px;
  line-height: 1.4;
}
.image-lightbox-word { font-weight: 700; }
.image-lightbox-reading { color: rgba(255, 255, 255, 0.75); font-size: 13px; }
.image-lightbox-close {
  position: absolute;
  top: -12px; right: -12px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
}
.image-lightbox-close svg { width: 20px; height: 20px; }
.image-lightbox-close:active { opacity: 0.8; }
@media (min-width: 1024px) {
  .image-lightbox-close { width: 36px; height: 36px; }
  .image-lightbox-close svg { width: 18px; height: 18px; }
}

/* =================================================================
 * View Mode Bar — 展開 / コンパクト 切替トグル + 件数表示
 * モバイル・PC とも常時表示（フィルタチップ列の上の行）。
 * ================================================================= */

.view-mode-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 12px 0 8px;
}
.view-mode-bar-count {
  font-size: 13px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.view-mode-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
  flex-shrink: 0;
}
.view-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  color: var(--ink-3);
  border: none;
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  transition: background var(--dur-fast, 120ms) var(--ease-out, ease-out),
              color var(--dur-fast, 120ms) var(--ease-out, ease-out),
              box-shadow var(--dur-fast, 120ms) var(--ease-out, ease-out);
}
.view-mode-btn.is-active {
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
/* 未選択（Cookie 未設定）時のハイライト。実際に描画されるモード（PC=展開 / スマホ=コンパクト、
   .item-list.is-unset と同じ 1024px 境界）と一致させ、見た目と中身のズレを作らない。
   aria-pressed は SSR で両方 false のまま＝「ユーザーはまだ選んでいない」を正しく表す。 */
@media (min-width: 1024px) {
  .view-mode-toggle.is-unset .view-mode-btn[data-mode="expanded"] {
    background: #fff;
    color: var(--ink);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }
}
@media (max-width: 1023.98px) {
  .view-mode-toggle.is-unset .view-mode-btn[data-mode="compact"] {
    background: #fff;
    color: var(--ink);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }
}
.view-mode-icon { font-size: 13px; line-height: 1; }
.view-mode-label { font-size: 11px; line-height: 1; }

/* ============================================================
   慣用句クイズ（入口・設定・出題・正誤・結果） — ①〜⑤
   ============================================================ */

/* ---- ① ホーム2ボタン: アウトライン副ボタン ---- */
.home-fixed-expression-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-brand-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--bg-card); color: var(--text);
  font-weight: 600; font-size: 15px; line-height: 1;
  padding: 12px 22px; border: 1.5px solid var(--border);
  border-radius: var(--radius-pill); text-decoration: none; cursor: pointer;
  min-height: 44px; box-sizing: border-box;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn-brand-outline:hover { background: var(--bg-subtle); border-color: var(--border-strong); color: var(--text); text-decoration: none; }
.btn-brand-outline:active { transform: translateY(1px); }
.btn-brand-outline:focus-visible { outline: none; box-shadow: var(--glow-focus); }
@media (max-width: 599px) {
  .home-fixed-expression-actions { flex-direction: column; align-self: stretch; }
  .home-fixed-expression-actions .btn-brand,
  .home-fixed-expression-actions .btn-brand-outline { width: 100%; padding: 13px 22px; }
}

/* ---- ① スティッキー選択バー（件数 + 補助 + 全解除 + クイズ開始） ---- */
.sqb-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sqb-count { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.sqb-helper { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sqb-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sqb-start { margin-left: 0; font-size: 14px; padding: 10px 20px; min-height: 40px; }
@media (max-width: 420px) { .sqb-helper { display: none; } }

/* ---- ② クイズ設定画面 ---- */
.fxq-settings { max-width: 1080px; }
.fxq-grid { display: block; }
.fxq-grid-main { display: flex; flex-direction: column; gap: 14px; }
.fxq-scope-change {
  background: var(--bg-subtle); border: 1.5px solid var(--border);
  color: var(--text); font-size: 13px; font-weight: 600;
  padding: 6px 16px; border-radius: var(--radius-pill); cursor: pointer;
}
.fxq-scope-change:hover { background: var(--border); }
.fxq-scope-body { display: flex; align-items: flex-start; gap: 12px; margin-top: 6px; }
.fxq-scope-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg-subtle); color: var(--ink-2);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fxq-scope-text { min-width: 0; }
.fxq-scope-count { font-size: 16px; font-weight: 700; color: var(--ink); }
.fxq-scope-num { color: var(--brand); font-variant-numeric: tabular-nums; margin: 0 2px; }
.fxq-scope-names { font-size: 13px; color: var(--ink-2); margin-top: 4px; line-height: 1.6; }

.fxq-limit-num {
  font-size: 26px; font-weight: 700; color: var(--brand);
  font-variant-numeric: tabular-nums; line-height: 1;
}
/* 問題数チップ: ブランド赤の active（既存 .qstart-preset-chip.is-active を踏襲） */
.qstart-preset-chip--brand.is-active {
  background: var(--brand); border-color: var(--brand); color: #fff;
}

.fxq-format-card {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--brand-50); border: 1px solid var(--brand-100);
  border-radius: var(--radius-lg); padding: 14px 16px;
}
.fxq-format-icon { color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.fxq-format-text { font-size: 13px; color: var(--ink-2); line-height: 1.7; margin: 0; }

/* モバイル開始ボタン（sticky） */
.fxq-start-mobile {
  position: sticky; bottom: calc(56px + env(safe-area-inset-bottom) + 8px);
  width: 100%; margin-top: 4px; padding: 14px 22px; font-size: 16px;
  box-shadow: var(--shadow-md);
}

/* PC サマリー（赤カード） */
.fxq-summary { display: none; }
.fxq-summary-label { font-size: 12px; color: rgba(255,255,255,.75); font-weight: 600; }
.fxq-summary-title { font-size: 18px; font-weight: 700; color: #fff; margin: 4px 0 16px; }
.fxq-summary-rows { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.fxq-summary-row { display: flex; align-items: baseline; justify-content: space-between; }
.fxq-summary-row dt { font-size: 13px; color: rgba(255,255,255,.8); margin: 0; }
.fxq-summary-row dd { font-size: 15px; font-weight: 700; color: #fff; margin: 0; }
.fxq-summary-num { font-size: 20px; font-variant-numeric: tabular-nums; margin-right: 2px; }
.fxq-summary-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 20px; padding: 13px 20px;
  background: #fff; color: var(--brand); font-weight: 700; font-size: 15px;
  border: none; border-radius: var(--radius-pill); cursor: pointer;
}
.fxq-summary-btn:hover { background: rgba(255,255,255,.9); }

@media (min-width: 1024px) {
  .fxq-grid { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
  .fxq-start-mobile { display: none; }
  .fxq-summary {
    display: block; position: sticky; top: 24px;
    background: var(--brand); border-radius: var(--radius-xl);
    padding: 22px 24px; overflow: hidden;
  }
}

/* ---- ③④ 出題 / 正誤 ---- */
.fxq-play { padding-bottom: 96px; }
.fxq-topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.fxq-quit {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer;
  color: var(--ink-2); font-size: 13px; font-weight: 600; flex-shrink: 0; padding: 4px;
}
.fxq-quit-x { font-size: 15px; }
.fxq-progress { flex: 1; }
.fxq-counter { font-size: 13px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* ④ ヒーロー */
.fxq-hero {
  margin: 0 0 18px; padding: 22px 24px;
  border-radius: var(--radius-lg); color: #fff; position: relative; overflow: hidden;
}
.fxq-hero.is-correct { background: linear-gradient(135deg, #6FA982, #5C9670); }
.fxq-hero.is-wrong   { background: linear-gradient(135deg, #E89473, #B5613F); }
.fxq-hero-eyebrow {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; color: rgba(255,255,255,.9);
}
.fxq-hero-title { font-size: 24px; font-weight: 800; margin-top: 4px; }

.fxq-question { margin-bottom: 16px; }
.fxq-prompt { font-size: 17px; line-height: 1.8; color: var(--ink); margin: 0; }
.fxq-q-highlight {
  background: #F6E9CC; color: var(--ink); font-weight: 700;
  padding: 2px 8px; border-radius: 6px; margin: 0 2px;
}
.fxq-multi-label {
  display: flex; align-items: center; gap: 6px; margin: 12px 0 0;
  font-size: 13px; font-weight: 700; color: var(--brand);
}
.fxq-multi-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; font-size: 11px;
}

/* 選択肢（チェックボックス） */
.fxq-choices { display: grid; grid-template-columns: 1fr; gap: 12px; }
.fxq-choice {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 12px 16px; text-align: left;
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); cursor: pointer; width: 100%;
  font-size: 15px; color: var(--ink); position: relative;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.fxq-choice:disabled { cursor: default; }
.fxq-checkbox {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  border: 2px solid var(--border-strong); background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; transition: all var(--dur-fast) var(--ease-out);
}
.fxq-choice.is-selected { border-color: #A11D3B; background: #FCF1F4; }
.fxq-choice.is-selected .fxq-checkbox { background: #A11D3B; border-color: #A11D3B; }
.fxq-choice-text { flex: 1; min-width: 0; }
.fxq-choice-badge {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700;
}
/* 4状態（回答後） */
.fxq-choice.is-hit       { border-color: #6FA982; background: #DDEDDF; }
.fxq-choice.is-hit .fxq-checkbox { background: #6FA982; border-color: #6FA982; }
.fxq-choice.is-hit .fxq-choice-badge.is-hit { background: #6FA982; }
.fxq-choice.is-falsePos  { border-color: #B83A2E; background: #F5D7CF; color: #B83A2E; }
.fxq-choice.is-falsePos .fxq-checkbox { background: #B83A2E; border-color: #B83A2E; }
.fxq-choice.is-falsePos .fxq-choice-badge.is-falsePos { background: #B83A2E; }
.fxq-choice.is-miss      { border: 2px dashed #6FA982; background: #fff; }
.fxq-choice.is-trueNeg   { border-color: #E9DFCB; background: #fff; color: #9C8E80; }
.fxq-choice-tag {
  flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 3px 8px;
  border-radius: 6px; color: #3F6F4E; background: #DDEDDF;
}

/* 解説カード */
.fxq-explain {
  margin-top: 16px; padding: 16px 18px;
  background: var(--bg-subtle); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.fxq-explain-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fxq-explain-icon { color: var(--brand); flex-shrink: 0; }
.fxq-explain-word { font-size: 16px; font-weight: 700; color: var(--ink); }
.fxq-explain-reading { font-size: 12px; color: var(--ink-2); }
.fxq-explain-body { font-size: 14px; line-height: 1.8; color: var(--ink-2); margin: 0; }

/* アクションバー（sticky） */
.fxq-actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px max(14px, env(safe-area-inset-bottom));
  background: rgba(250, 245, 236, 0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
}
.fxq-skip {
  background: none; border: none; cursor: pointer; flex-shrink: 0;
  color: var(--ink-2); font-size: 14px; font-weight: 600; padding: 8px 4px;
}
.fxq-answer, .fxq-next {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; padding: 12px 24px; min-height: 44px;
}
.fxq-answer:disabled { opacity: .5; cursor: default; }

@media (min-width: 768px) {
  .fxq-choices { grid-template-columns: 1fr 1fr; }
  .fxq-choice { min-height: 64px; }
}
@media (min-width: 1024px) {
  .fxq-actionbar {
    position: static; background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    border-top: none; padding: 20px 0 0; margin-top: 8px;
  }
  .fxq-play { padding-bottom: 0; }
}

/* ---- ⑤ 結果画面 ---- */
.fxq-result-grid { display: block; }
.fxq-result-main { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.fxq-score-hero {
  background: var(--brand); color: #fff; border-radius: var(--radius-xl);
  padding: 28px 24px; text-align: center; position: relative; overflow: hidden;
}
.fxq-score-label { font-size: 13px; color: rgba(255,255,255,.8); font-weight: 600; }
.fxq-score-value { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin: 8px 0; }
.fxq-score-num { font-size: 56px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.fxq-score-sep { font-size: 24px; opacity: .7; }
.fxq-score-total { font-size: 24px; font-weight: 700; opacity: .85; font-variant-numeric: tabular-nums; }
.fxq-score-accuracy { font-size: 13px; color: rgba(255,255,255,.85); }
.fxq-result-retry {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px 22px; font-size: 16px;
}
.fxq-result-back { display: flex; align-items: center; justify-content: center; width: 100%; padding: 13px 22px; }

.fxq-review-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.fxq-review-title { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0; }
.fxq-review-filters { display: flex; gap: 6px; }
.fxq-review-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border); background: var(--bg-card);
  color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer;
}
.fxq-review-chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.fxq-review-chip-num { font-variant-numeric: tabular-nums; opacity: .85; }
.fxq-review-list { display: flex; flex-direction: column; gap: 10px; }
.fxq-review-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.fxq-review-card.is-wrong { border-color: var(--brand-100); }
.fxq-review-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; background: none; border: none; cursor: pointer; text-align: left;
}
.fxq-review-status {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
}
.fxq-review-card.is-wrong .fxq-review-status { background: #B83A2E; }
.fxq-review-card.is-correct .fxq-review-status { background: #6FA982; }
.fxq-review-info { flex: 1; min-width: 0; }
.fxq-review-word { font-size: 16px; font-weight: 700; color: var(--ink); }
.fxq-review-reading { font-size: 12px; color: var(--ink-2); margin-left: 8px; }
.fxq-review-chevron { color: var(--ink-3); flex-shrink: 0; }
.fxq-review-explain { padding: 0 16px 16px; font-size: 13px; line-height: 1.8; color: var(--ink-2); margin: 0; }

@media (min-width: 1024px) {
  .fxq-result-grid { display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: start; }
  /* sticky にしない: 左カラムに「AIに相談」（入力欄つき）を置いたので、
     画面より高くなると sticky では下端が切れて送信ボタンに届かない（2026-11） */
  .fxq-result-main { margin-bottom: 0; }
}

/* ====================================================================
   語彙クイズ 結果画面 v3 — ヒーロー内訳ピル・CTA常時表示・折りたたみ行
   ==================================================================== */

/* ヒーロー内訳ピル */
.result-v2-hero-pills {
  display: flex; gap: 8px; justify-content: center;
  padding: 8px 16px 16px;
}
.result-v2-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600;
}
.result-v2-pill--correct {
  background: var(--mint-soft); color: var(--mint-deep);
  border: 1px solid var(--mint);
}
.result-v2-pill--wrong {
  background: var(--peach-soft); color: var(--peach-deep);
  border: 1px solid var(--peach);
}

/* 正答率ピル（ヒーロー内） */
.result-v2-meta-pill {
  display: inline-block;
  background: rgba(255,255,255,0.16);
  color: #fff; border-radius: var(--radius-pill);
  padding: 4px 14px; font-size: 13px; font-weight: 600;
  margin-top: 10px;
}

/* CTA グリッド（常時表示）*/
.result-v2-cta-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.result-v2-top-btn { grid-column: 1 / -1; text-align: center; }

@media (min-width: 640px) {
  .result-v2-cta-grid { grid-template-columns: 1fr 1fr 1fr; }
  .result-v2-top-btn { grid-column: auto; }
}

/* 副CTAリンクをボタン風に（<a>はグローバルリセットで padding がないため補完）*/
.result-v2-cta-grid a {
  display: block; text-align: center; text-decoration: none;
  padding: 11px 16px; border-radius: var(--radius);
  font-size: 14px; line-height: 1.4;
  border: 1.5px solid var(--border);
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.result-v2-cta-grid a:hover {
  background: var(--bg-2); border-color: var(--border-strong);
}

/* 一括操作バー */
.result-v2-bulk-bar {
  background: var(--bg-subtle); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
  margin-bottom: 10px;
}
.result-v2-bulk-bar-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.result-v2-bulk-bar-title {
  font-size: 12px; font-weight: 600; color: var(--ink-2);
}
.result-v2-bulk-counter {
  font-size: 12px; color: var(--ink-3);
}
.result-v2-bulk-btns {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 8px;
}
.result-v2-bulk-btn {
  font-size: 12px; font-weight: 500; color: var(--ink-2);
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 5px 10px;
  cursor: pointer; transition: color var(--dur-base), border-color var(--dur-base), background var(--dur-base);
  min-height: 32px;
}
.result-v2-bulk-btn:hover:not(:disabled) { color: var(--brand); border-color: var(--brand-300); }
.result-v2-bulk-btn--clear { color: var(--danger); }
.result-v2-bulk-btn--clear:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); opacity: 0.85; }
.result-v2-bulk-btn:disabled { opacity: 0.4; cursor: default; }
.result-v2-bulk-note {
  font-size: 11px; color: var(--ink-3); margin: 0;
}

/* 「AIに相談」ボックス（partials/ai-consult-box.blade.php。結果画面 2 種で共用） */
.ai-consult {
  background: var(--surface); border: 1px solid var(--brand-100);
  border-radius: var(--radius); padding: 14px 16px;
  margin-bottom: 12px;
}
/* 置き場所はスコア直下（2026-11）。語彙の結果画面は振り返りの左右 padding の外に出たので
   結果シェア（.result-v2-share）と同じ余白を持たせる。慣用句は左カラムの flex gap に任せる */
.ai-consult--result { margin: 14px 16px 0; }
.ai-consult--fxq    { margin-bottom: 0; }
.ai-consult-head  { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ai-consult-title { font-size: 14px; font-weight: 700; color: var(--brand); }
.ai-consult-model {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; white-space: nowrap;
  color: var(--ink-2); background: var(--bg-subtle); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 2px 10px;
}
.ai-consult-text  { font-size: 14px; color: var(--ink-2); line-height: 1.8; margin: 0 0 10px; }
.ai-consult-count { white-space: nowrap; color: var(--ink-3); }
.ai-consult-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.ai-consult-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ai-consult-chip {
  font-size: 13px; color: var(--brand); text-align: left;
  background: var(--brand-50); border: 1px solid var(--brand-100);
  border-radius: var(--radius-pill); padding: 6px 12px; min-height: 32px;
  cursor: pointer;
}
.ai-consult-chip:hover:not(:disabled) { border-color: var(--brand-300); }
.ai-consult-chip:disabled { opacity: 0.5; cursor: default; }
.ai-consult-input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; line-height: 1.8;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px;
  background: var(--surface); color: var(--ink); resize: vertical;
}
.ai-consult-note  { font-size: 13px; color: var(--ink-2); margin: 6px 0 12px; line-height: 1.7; }
.ai-consult-submit { width: 100%; }
.ai-consult-submit:disabled { opacity: 0.5; cursor: default; }
.ai-consult-once  { font-size: 12px; color: var(--ink-3); margin: 8px 0 0; line-height: 1.7; }
.ai-consult-error { font-size: 13px; color: var(--danger); margin: 8px 0 0; }
.ai-consult-answer {
  font-size: 16px; line-height: 1.8; color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--bg-subtle); border-radius: var(--radius); padding: 12px 14px;
}
.ai-consult-login-btn { display: inline-block; }

/* ── 学習ページの AI 相談（partials/ai-study-sheet）───────────────────
   スマホ=下からのシート / PC（1024px+）=センターモーダル。vocab-sheet と同じ規約:
   センタリングは inset:0 + margin:auto（transform は .vss-* のトランジションが握っている）。 */
.ai-study-backdrop {
  position: fixed; inset: 0; z-index: 1210;
  background: rgba(0, 0, 0, 0.45);
}
.ai-study-sheet {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1211;
  background: var(--bg-card, var(--surface));
  border-top-left-radius: 18px; border-top-right-radius: 18px;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
  max-height: 90vh; max-height: 90dvh; overflow-y: auto;
  padding: 8px 16px max(20px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}
.ai-study-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--border); margin: 0 auto 10px; }
.ai-study-inline {
  background: var(--surface); border: 1px solid var(--brand-100);
  border-radius: var(--radius); padding: 14px 16px; margin: 16px 0;
}
.ai-study-sheet .ai-consult-head, .ai-study-inline .ai-consult-head { gap: 8px; }
.ai-study-sheet .ai-consult-title, .ai-study-inline .ai-consult-title { flex: 1; font-size: 16px; }
.ai-study-close {
  width: 44px; height: 44px; margin-right: -10px; border: 0; background: transparent;
  color: var(--ink-2); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
/* flex のボタン内で SVG が幅 0 まで縮むのを防ぐ */
.ai-study-close svg { flex: none; width: 20px; height: 20px; }
.ai-study-target-remove svg { flex: none; width: 12px; height: 12px; }
.ai-study-close, .ai-study-target-remove { padding: 0; }
.ai-study-targets { margin-bottom: 14px; }
.ai-study-targets-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.ai-study-targets-head .ai-consult-label { margin-bottom: 0; }
.ai-study-targets-count { font-size: 13px; color: var(--ink-2); }
.ai-study-targets-count strong { font-size: 16px; color: var(--ink); }
.ai-study-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-study-target {
  display: inline-flex; align-items: center; gap: 2px; height: 36px;
  padding: 0 12px; font-size: 15px; color: var(--ink);
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-pill);
}
.ai-study-target:has(.ai-study-target-remove) { padding-right: 2px; }
.ai-study-target-remove {
  width: 32px; height: 32px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--ink-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.ai-study-remaining { font-size: 13px; color: var(--ink-2); margin: 8px 0 0; }
.ai-study-remaining strong { color: var(--ink); }
.ai-study-limit {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--radius);
  background: var(--bg-subtle); border: 1px solid var(--border);
  font-size: 14px; line-height: 1.7; color: var(--ink-2);
  display: flex; flex-direction: column; gap: 2px;
}
.ai-study-limit strong { color: var(--ink); }
.ai-study-again { width: 100%; margin-top: 10px; }

/* トップのヒーロー（ログイン済み）の 1 行導線 */
.hero-ai-link {
  display: flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  color: inherit; text-decoration: none; font-size: 14px;
}
.hero-ai-link-text { flex: 1; }
.app-sidebar-link--ai { color: var(--brand); font-weight: 600; }

/* マイページの AI 相談ハブ */
.ai-hub { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.ai-hub-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ai-hub-stat {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius);
}
.ai-hub-stat-label { font-size: 12px; color: var(--ink-2); }
.ai-hub-stat-value { font-size: 15px; color: var(--ink); }
.ai-hub-stat-value strong { font-size: 22px; }
.ai-hub-links { display: flex; flex-direction: column; gap: 6px; }
.ai-hub-links a {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--ink); font-size: 15px;
}
.ai-history-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ai-history-filter {
  font: inherit; font-size: 13px; min-height: 36px; padding: 0 12px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-2);
}
.ai-history-filter.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.ai-history-kind {
  font-size: 11px; font-weight: 700; color: var(--brand); background: var(--brand-50);
  border-radius: 4px; padding: 1px 6px; margin-right: 4px;
}
.ai-history-reopen { font-size: 13px; margin-right: auto; }

/* 専用ページ /ai */
.ai-page { max-width: 720px; margin: 0 auto; padding: 16px; box-sizing: border-box; }
.ai-page-title { font-size: 22px; color: var(--brand); margin: 0 0 4px; }
.ai-page-lead { font-size: 14px; color: var(--ink-2); line-height: 1.8; margin: 0 0 14px; }
.ai-page-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.ai-page-kind {
  display: flex; align-items: center; justify-content: center; min-height: 44px; text-align: center;
  font-size: 14px; font-weight: 600; text-decoration: none; color: var(--ink-2);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.ai-page-kind.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.ai-page-search {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.ai-page-search-form { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-page-q {
  flex: 1 1 180px; min-width: 0; height: 44px; box-sizing: border-box; padding: 0 12px;
  font: inherit; font-size: 16px; border: 1px solid var(--border); border-radius: var(--radius);
}
.ai-page-level { height: 44px; font: inherit; font-size: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.ai-page-search-btn { min-height: 44px; }
.ai-page-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ai-page-result {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-height: 44px;
  padding: 6px 10px; border-radius: var(--radius); text-decoration: none; color: var(--ink);
}
.ai-page-result.is-on { background: var(--brand-50); }
.ai-page-result.is-disabled { opacity: .5; }
.ai-page-check {
  width: 20px; height: 20px; flex: none; border-radius: 5px; border: 1.5px solid var(--brand);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: #fff;
}
.ai-page-result.is-on .ai-page-check { background: var(--brand); }
.ai-page-result-label { font-size: 16px; font-weight: 600; }
.ai-page-result-sub { font-size: 12px; color: var(--ink-2); }
.ai-page-result-meaning { flex-basis: 100%; padding-left: 30px; font-size: 13px; color: var(--ink-2); }
.ai-page-empty, .ai-page-hint { font-size: 14px; color: var(--ink-2); margin: 0; }
.ai-page-hint { margin-top: 16px; }
.ai-page-shortcuts { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; }

/* AI のピクトグラム（partials/icon-ai）。文字の高さに合わせ、ベースラインに揃える */
.ai-icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.ai-consult-title .ai-icon, .ai-page-title .ai-icon { margin-right: 2px; }

/* 一覧の操作列に置く「AI」ボタン（クイズ開始より一段弱いセカンダリ） */
.ai-study-open-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 44px; padding: 0 12px; box-sizing: border-box;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--brand);
  background: var(--surface); border: 1px solid var(--brand); border-radius: var(--radius);
  cursor: pointer; white-space: nowrap; text-decoration: none;
}
.ai-study-open-btn:disabled { opacity: .45; cursor: default; }
/* 下部固定バー: 角丸ピルを開始ボタンに揃え、右寄せの塊にする */
.sqb-ai { flex: none; min-height: 40px; border-radius: var(--radius-pill); }
.sticky-quiz-bar > .sqb-ai { margin-left: auto; }
.sticky-quiz-bar > .sqb-ai ~ .sqb-start { margin-left: 0; }
/* 語彙の開始ボタンは文言が長い（「選択したものでクイズ開始: 7件」）。AI ボタンと並ぶ狭い幅では折り返す */
@media (max-width: 480px) {
  .sticky-quiz-bar > .sqb-ai ~ .sqb-start {
    white-space: normal; min-width: 0; flex-shrink: 1;
    padding: 8px 14px; line-height: 1.35; text-align: center;
  }
}
.vsr-ai { width: 100%; }
.ai-study-detail-link {
  display: flex; align-items: center; gap: 10px; margin: 14px 0;
  padding: 12px 14px; border-radius: 10px; text-align: left; width: 100%; box-sizing: border-box;
  font: inherit; color: var(--ink); background: var(--brand-50); border: 1px solid var(--brand-100); cursor: pointer;
}
.ai-study-detail-link-title { display: block; font-size: 15px; font-weight: 700; color: var(--brand); }
.ai-study-detail-link-sub { display: block; font-size: 12px; color: var(--ink-2); }

@media (min-width: 1024px) {
  .ai-study-sheet {
    inset: 0; width: 640px; max-width: calc(100vw - 48px);
    height: max-content; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
    margin: auto; border-radius: var(--radius-xl, 16px);
    padding: 22px 28px 26px;
    box-shadow: 0 24px 64px rgba(46, 32, 22, 0.35);
  }
  .ai-study-handle { display: none; }
}

/* マイページ「AI 相談履歴」 */
.ai-history-hint { font-size: 13px; color: var(--ink-3); margin: 0 0 10px; }
.ai-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ai-history-row { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.ai-history-row summary { cursor: pointer; padding: 10px 12px; font-size: 14px; color: var(--ink-2); list-style: none; }
.ai-history-row summary::-webkit-details-marker { display: none; }
.ai-history-meta { display: block; font-size: 12px; color: var(--ink-3); }
.ai-history-prompt { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-history-body { padding: 0 12px 12px; }
.ai-history-answer { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.8; margin: 0 0 10px; }
.ai-history-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* サマリ表示件数 */
.result-v2-count-label {
  font-size: 12px; color: var(--ink-3);
  margin-bottom: 8px;
}

/* 空状態 */
.result-v2-empty-state {
  text-align: center; padding: 28px 16px;
  border: 1px dashed var(--border); border-radius: var(--radius);
  margin-bottom: 12px;
}
.result-v2-empty-main { font-size: 14px; font-weight: 600; color: var(--ink-2); margin: 0 0 4px; }
.result-v2-empty-sub  { font-size: 12px; color: var(--ink-3); margin: 0; }

/* コンパクト折りたたみ行 */
.result-v2-row {
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--surface);
}
.result-v2-row.is-wrong    { border-color: var(--peach); }
.result-v2-row.is-correct  { border-color: var(--mint); }

.result-v2-row-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; cursor: pointer;
  transition: background var(--dur-fast);
  user-select: none; -webkit-user-select: none;
}
.result-v2-row-head:hover { background: var(--bg-subtle); }
.result-v2-row.is-wrong  .result-v2-row-head { background: var(--peach-soft); }
.result-v2-row.is-correct .result-v2-row-head { background: var(--mint-soft); }
.result-v2-row.is-wrong  .result-v2-row-head:hover { background: #fce8df; }
.result-v2-row.is-correct .result-v2-row-head:hover { background: #d5eddd; }

.result-v2-row-icon {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--border); color: var(--ink-3);
}
.result-v2-row-icon.is-correct { background: var(--mint); color: #fff; }
.result-v2-row-icon.is-wrong   { background: var(--danger); color: #fff; }

.result-v2-row-qnum {
  font-size: 11px; font-weight: 600; color: var(--ink-3);
  flex-shrink: 0;
}
.result-v2-row-word {
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.result-v2-row-reading {
  font-size: 12px; color: var(--ink-2);
}
.result-v2-row-chevron {
  margin-left: auto; flex-shrink: 0; color: var(--ink-3);
  transition: transform var(--dur-base) var(--ease-out);
}

/* 学習済バッジ（行内）*/
.result-v2-learned-badge {
  font-size: 10px; font-weight: 600;
  background: var(--mint); color: #fff;
  border-radius: var(--radius-pill); padding: 2px 7px;
  flex-shrink: 0;
}

/* 展開詳細 */
.result-v2-row-detail {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}
.result-v2-card-answer-sep { color: var(--ink-3); }
.result-v2-vocab-link {
  display: inline-block; margin-top: 8px;
  font-size: 12px; color: var(--brand);
  text-decoration: underline;
}
.result-v2-vocab-link:hover { opacity: 0.75; }

/* さらに表示ボタン */
.result-v2-show-more {
  display: block; width: 100%; margin-top: 10px;
  padding: 12px 16px; text-align: center;
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.result-v2-show-more:hover {
  background: var(--bg-subtle); border-color: var(--border-strong);
}

/* ========================================================
 * マイページ 学習履歴分析（/mypage/history）
 * ======================================================== */
.history-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.history-table th, .history-table td {
  padding: 10px 8px; border-bottom: 1px solid #eee; vertical-align: top;
}
.history-table th { white-space: nowrap; text-align: left; }
.history-table th.sortable { cursor: pointer; user-select: none; }
.history-table .row-danger  { background: #fff5f5; }
.history-table .row-perfect { background: #f5fff8; }

/* タブボタン */
.history-tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.history-tabs button {
  padding: 6px 14px; border: 1px solid #ccc; border-radius: 20px;
  background: #fff; cursor: pointer; font-size: 14px;
}
.history-tabs button.active {
  background: #333; color: #fff; border-color: #333;
}

.history-note { color: #888; font-size: 12px; margin: 0 0 8px; }
.history-empty { color: #666; padding: 24px 8px; text-align: center; }

/* 学習分析: 概要サマリーと回答明細の区切り */
.analysis-summary { margin-bottom: 24px; }
.analysis-detail-heading {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}

/* ビュー切替（回答ログ / 累計 / 直近）— タブと同型のピル */
.history-view-switch { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.history-view-switch button {
  padding: 6px 14px; border: 1px solid #ccc; border-radius: 20px;
  background: #fff; cursor: pointer; font-size: 14px;
}
.history-view-switch button.active {
  background: #333; color: #fff; border-color: #333;
}

/* 回答ログの正誤マーク */
.history-result-correct { color: #138a36; font-weight: 600; }
.history-result-wrong   { color: #c0392b; font-weight: 600; }

/* 解答日時列 */
.history-table .history-date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: #555;
}

@media (max-width: 600px) {
  .history-table .history-date { font-size: 12px; }
}

/* ----------------------------------------------------------
 * パスワード強度メーター（partials/password-strength.blade.php）
 * ---------------------------------------------------------- */
.pw-strength {
  margin-top: 8px;
}

.pw-strength-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}

.pw-strength-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  transition: width 0.25s ease, background-color 0.25s ease;
  background: var(--wrong);
}

.pw-strength-fill--weak   { background: var(--wrong); }
.pw-strength-fill--fair   { background: var(--peach); }
.pw-strength-fill--good   { background: var(--mint); }
.pw-strength-fill--strong { background: var(--correct); }

.pw-strength-text {
  margin: 6px 0 0;
  font-size: 13px;
}

.pw-strength-level--weak   { color: var(--wrong); }
.pw-strength-level--fair   { color: var(--peach); }
.pw-strength-level--good   { color: var(--mint); }
.pw-strength-level--strong { color: var(--correct); }

.pw-strength-hint {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

.pw-strength-hint--error {
  color: var(--wrong);
}

/* ----------------------------------------------------------
 * メール未確認バナー
 * ---------------------------------------------------------- */
.verify-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 16px;
  background: var(--peach-soft, #FBE9E1);
  border-bottom: 1px solid var(--peach, #E89473);
  font-size: 14px;
  color: var(--text, #333333);
}

.verify-banner-text {
  font-weight: 600;
}

.verify-banner-link {
  color: var(--accent, #A11D3B);
  font-weight: 700;
  text-decoration: underline;
}

/* ----------------------------------------------------------
 * ドメイン移行の予告バナー（partials/migration-banner）・ログイン画面の告知
 * ---------------------------------------------------------- */
.migration-banner {
  padding: 10px 16px;
  background: var(--peach-soft, #FBE9E1);
  border-bottom: 1px solid var(--peach, #E89473);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
  text-align: center;
  color: var(--text, #333333);
  overflow-wrap: anywhere;
}

.migration-login-notice {
  padding: 12px 14px;
  margin-bottom: 20px;
  background: var(--peach-soft, #FBE9E1);
  border: 1px solid var(--peach, #E89473);
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.8;
  color: var(--text, #333333);
  overflow-wrap: anywhere;
}

.migration-login-notice p {
  margin: 0;
}

.migration-login-notice p + p {
  margin-top: 6px;
}

.migration-login-notice a {
  color: var(--accent, #A11D3B);
  font-weight: 700;
  text-decoration: underline;
}

/* verify-email ページのリード文 */
.auth-lead {
  margin: 0 0 20px;
  font-size: 15px;
  color: var(--text-muted, #6B5C4F);
  line-height: 1.7;
}

.auth-footer-links .is-disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* ----------------------------------------------------------
 * MFA（二段階認証）
 * ---------------------------------------------------------- */
.mfa-status {
  font-weight: 700;
}
.mfa-status--on  { color: var(--correct, #3F6F4E); }
.mfa-status--off { color: var(--text-muted, #6B5C4F); }

.mfa-controls {
  margin: 8px 0 4px;
}

.mfa-method-list {
  margin: 8px 0;
}
.mfa-method-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border, #D6C8AC);
}

.mfa-enable-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.mfa-setup-box,
.mfa-recovery-box {
  margin: 12px 0;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--border, #D6C8AC);
  border-radius: 10px;
}

.mfa-qr-img {
  display: block;
  margin: 12px 0;
  border: 1px solid var(--border, #D6C8AC);
  border-radius: 8px;
  background: #fff;
}

.mfa-manual-key {
  font-size: 13px;
  color: var(--text-muted, #6B5C4F);
  word-break: break-all;
}
.mfa-manual-key code,
.mfa-recovery-list code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--bg, #FAFAF8);
  padding: 2px 6px;
  border-radius: 4px;
}

.mfa-recovery-title {
  margin: 0 0 8px;
  font-size: 16px;
}
.mfa-recovery-list {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 16px;
}
.mfa-recovery-list li {
  font-size: 15px;
}

/* ログインの MFA 方式タブ */
.mfa-method-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.mfa-method-tab {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border, #D6C8AC);
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
}
.mfa-method-tab.is-active {
  border-color: var(--accent, #A11D3B);
  color: var(--accent, #A11D3B);
  font-weight: 700;
}
.mfa-email-send {
  margin-bottom: 12px;
}

/* ================================================================
   文型帳（Grammar 文型・閲覧）— ホーム導線 / 一覧 / 詳細
   ================================================================ */

/* 文法（文型一覧）カード — 慣用句カードと同じトーン */
.home-grammar-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.home-grammar-card .home-section-header { margin: 0; }
.home-grammar-levels { display: flex; gap: 6px; flex-wrap: wrap; }
.home-grammar-levels .level-disc.is-upcoming {
  background: var(--bg-2);
  color: var(--text-subtle);
}
.home-grammar-card-note {
  font-size: 12px;
  color: var(--text-subtle);
  margin: 0;
}
/* CTA はカード下端に揃える（進捗バーがあるときは進捗側が margin-top:auto を持つ） */
.home-grammar-card .home-fixed-expression-actions { margin-top: auto; }
.home-grammar-card .home-section-progress + .home-fixed-expression-actions { margin-top: 0; }

/* 文法カードを語彙（あなたの進捗）と同格の全幅で独立表示 */
.home-grammar-card--full {
  margin-bottom: 12px;
}

@media (max-width: 599px) {
  .home-grammar-card .home-fixed-expression-actions { align-self: stretch; }
  .home-grammar-card .home-fixed-expression-actions .btn-brand {
    width: 100%;
    padding: 13px 22px;
  }
}

/* ---- 一覧（/grammar/{level}） ---- */
.grammar-list-page, .grammar-detail { max-width: 760px; }
.grammar-total-count { font-size: 13px; color: var(--text-muted); margin: 6px 0 14px; }
.grammar-total-num { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; margin-right: 2px; }
.grammar-list {
  display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.grammar-row {
  display: flex; align-items: stretch;
  border-top: 1px solid var(--border);
}
.grammar-row:first-child { border-top: none; }
.grammar-row-link {
  display: flex; align-items: center; gap: 12px;
  flex: 1; min-width: 0;
  padding: 16px; text-decoration: none; color: inherit;
  transition: background-color 150ms var(--ease-out);
}
.grammar-row-link:hover { background: var(--bg-subtle); text-decoration: none; }
.grammar-row .level-disc { flex-shrink: 0; }
.grammar-row .pin-btn {
  padding: 0 10px;
  align-self: stretch;
  display: flex; align-items: center;
  background: none; border: none; cursor: pointer;
}
.grammar-row-body {
  flex: 1; min-width: 0;
  display: flex; align-items: baseline; gap: 12px;
}
.grammar-row-pattern {
  font-size: 18px; font-weight: 700; color: var(--brand);
  flex-shrink: 0; max-width: 46%;
  overflow: hidden; text-overflow: ellipsis;
}
.grammar-row-meaning {
  flex: 1; min-width: 0; color: var(--text-muted); font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.grammar-row-chevron { color: var(--text-subtle); flex-shrink: 0; font-size: 18px; }

/* ---- 詳細（?id=） ---- */
.grammar-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--text-muted); text-decoration: none;
  margin-bottom: 10px;
}
.grammar-back:hover { color: var(--text); }
.grammar-hero { display: flex; align-items: center; gap: 12px; margin: 8px 0 20px; }
.grammar-hero-pattern { font-size: 26px; font-weight: 700; color: var(--brand); margin: 0; line-height: 1.4; }
.grammar-meaning-block, .grammar-examples-block {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px; margin-bottom: 16px;
}
.grammar-meaning-label, .grammar-examples-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  letter-spacing: .04em; margin-bottom: 10px;
}
.grammar-lang-chip {
  font-size: 11px; font-weight: 600; color: var(--brand);
  background: var(--brand-50); border-radius: var(--radius-pill);
  padding: 2px 10px; letter-spacing: 0;
}
/* コンテンツ翻訳のフォールバック表示中バッジ（現在言語に訳が無く第二言語/日本語で表示中） */
.lang-fallback-badge {
  display: inline-block; vertical-align: middle;
  font-size: 11px; font-weight: 600; color: var(--brand);
  background: var(--brand-50); border-radius: var(--radius-pill);
  padding: 1px 8px; margin-left: 6px; letter-spacing: 0;
  white-space: nowrap;
}
.grammar-meaning-body { font-size: 16px; line-height: 1.8; color: var(--text); margin: 0; }
.grammar-fallback-note { font-size: 12px; color: var(--text-subtle); margin: 10px 0 0; line-height: 1.7; }
.grammar-examples-list { margin: 0; padding-left: 1.4em; }
.grammar-examples-list li { font-size: 16px; line-height: 1.8; color: var(--text); margin-bottom: 6px; }
.grammar-examples-list li:last-child { margin-bottom: 0; }
/* 用例訳: 日本語用例の下に小さく並記（表示中の言語に訳がある時のみ） */
.grammar-example-trans { display: block; font-size: 13px; line-height: 1.7; color: var(--text-subtle); margin-top: 2px; }
.grammar-no-examples { font-size: 14px; color: var(--text-subtle); margin: 0; }
.grammar-detail-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 20px;
}
.grammar-nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--brand); text-decoration: none;
  padding: 8px 12px; border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-pill);
}
.grammar-nav-link:hover { background: var(--bg-subtle); text-decoration: none; }
.grammar-nav-link.is-disabled { color: var(--text-subtle); border-color: var(--border); opacity: .5; pointer-events: none; }
.grammar-nav-back { font-size: 13px; color: var(--text-muted); text-decoration: underline; }

@media (min-width: 768px) {
  .grammar-back { display: none; }
}
@media (max-width: 767px) {
  .grammar-detail .study-breadcrumb { display: none; }
  .grammar-nav-back { display: none; }
  .grammar-row-link { padding: 14px 12px; gap: 10px; }
  .grammar-row-body { flex-direction: column; align-items: stretch; gap: 2px; }
  .grammar-row-pattern { max-width: 100%; font-size: 16px; white-space: normal; }
  .grammar-row-meaning { white-space: normal; overflow: visible; }
}

/* 見出しふりがな（ルビ）。<ruby> 内のよみは小さく表示する。 */
ruby rt { font-size: 0.6em; }

/* ============================================================
 * 文型フラッシュカード（一覧の操作バー・モーダル・カード画面）
 * ============================================================ */

/* ---- 一覧: 操作バー ---- */
.grammar-list-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin: 18px 0 16px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.grammar-list-actions .legend-action-btn { flex-shrink: 0; }
.grammar-flashcard-start-btn { flex-shrink: 0; }
@media (max-width: 767px) {
  .grammar-list-actions { padding: 12px; }
  .grammar-flashcard-start-btn { flex: 1; text-align: center; }
}

/* ---- 一覧: 行内のチェックボックス / 学習済みトグル ---- */
.grammar-row .bookmark-btn {
  padding: 0 10px; align-self: stretch;
  display: flex; align-items: center;
  background: none; border: none; cursor: pointer; font-size: 18px;
}
.grammar-row .grammar-learned-btn {
  align-self: center; flex-shrink: 0; margin-right: 12px; white-space: nowrap;
}
.grammar-row.is-learned { background: var(--brand-50); }

@media (max-width: 767px) {
  .grammar-row .grammar-learned-btn { margin-right: 8px; font-size: 12px; padding: 4px 8px; }
}

/* ---- モード選択モーダル ---- */
.fc-modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, .45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.fc-modal-panel {
  background: var(--bg-card); border-radius: var(--radius-lg);
  width: 100%; max-width: 420px; padding: 22px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
.fc-modal-title { font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 16px; }
.fc-mode-options { display: flex; flex-direction: column; gap: 10px; }
.fc-mode-option {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-md, 10px);
  padding: 14px; cursor: pointer; font-size: 15px; color: var(--text);
  transition: border-color 150ms var(--ease-out), background-color 150ms var(--ease-out);
}
.fc-mode-option.is-active { border-color: var(--brand); background: var(--brand-50); }
.fc-modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.fc-modal-footer .btn-cancel {
  background: none; border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-pill); padding: 8px 18px; cursor: pointer; color: var(--text-muted);
}
.fc-modal-footer .btn-confirm {
  background: var(--brand); color: #fff; border: none;
  border-radius: var(--radius-pill); padding: 8px 22px; cursor: pointer; font-weight: 700;
}
.fc-modal-footer .btn-confirm:hover { opacity: .9; }

/* ---- カード画面 ---- */
.grammar-flashcard { max-width: 600px; margin: 0 auto; }
.flashcard-progress-row { display: flex; align-items: center; gap: 12px; margin: 6px 0 18px; }
.flashcard-progress-row .quiz-header-progress-wrap { flex: 1; }
.flashcard-progress-row .quiz-header-counter {
  font-size: 14px; color: var(--text-muted); font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.flashcard-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); cursor: pointer;
  min-height: 280px; display: flex; align-items: center; justify-content: center;
  padding: 28px; text-align: center;
  transition: box-shadow 150ms var(--ease-out);
}
.flashcard-card:hover { box-shadow: 0 4px 18px rgba(0, 0, 0, .08); }
.flashcard-card.is-flipped { background: var(--bg-subtle); }
.flashcard-face { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.flashcard-face-detail { align-items: flex-start; text-align: left; }
.flashcard-pattern { font-size: 30px; font-weight: 700; color: var(--brand); margin: 0; line-height: 1.4; }
.flashcard-pattern-small { font-size: 16px; font-weight: 700; color: var(--brand); margin: 0; }
.flashcard-meaning { font-size: 18px; line-height: 1.8; color: var(--text); margin: 0; }
.flashcard-examples { margin: 6px 0 0; padding-left: 1.4em; align-self: stretch; }
.flashcard-examples li { font-size: 16px; line-height: 1.8; color: var(--text); margin-bottom: 6px; }
/* 用例訳: 用例の下に小さく並記（表示中の言語に訳がある時のみ） */
.flashcard-example-trans { display: block; font-size: 13px; line-height: 1.7; color: var(--text-subtle); margin-top: 1px; }
.flashcard-tap-hint { font-size: 13px; color: var(--text-subtle); margin: 6px 0 0; }
/* reverse モードで用例・意味に紛れた答え（文型）を覆う黒塗り。言語非依存に文字を隠す */
.flashcard-redacted {
  background: #333; color: transparent; border-radius: 3px; padding: 0 2px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; user-select: none;
}
.flashcard-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.flashcard-nav-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 15px; color: var(--brand); background: none;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill);
  padding: 12px; cursor: pointer;
}
.flashcard-nav-btn:hover:not(:disabled) { background: var(--bg-subtle); }
.flashcard-nav-btn:disabled { color: var(--text-subtle); border-color: var(--border); opacity: .5; cursor: not-allowed; }
.flashcard-finish-btn {
  background: var(--brand); color: #fff; border-color: var(--brand);
  text-decoration: none; font-weight: 700;
}
.flashcard-finish-btn:hover { background: var(--brand); border-color: var(--brand); opacity: .9; text-decoration: none; }
.flashcard-actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; }
.flashcard-pin-btn {
  background: none; border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-pill); padding: 8px 14px; cursor: pointer; font-size: 16px;
}
.flashcard-pin-btn.is-pinned { border-color: var(--brand); }

/* ================================================================
   初訪問時の表示言語選択モーダル
   モバイル = ボトムシート / PC(≥1024px) = センターモーダル
   ================================================================ */
.lang-modal-overlay {
  background: rgba(31, 22, 18, 0.42);
  align-items: flex-end;
  padding: 0;
}

.lang-modal-box {
  position: relative;
  background: #fff;
  width: 100%;
  border-radius: 22px 22px 0 0;
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-lg);
  animation: lang-sheet-up var(--dur-slow) var(--ease-out);
}

@keyframes lang-sheet-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lang-modal-grip {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: #D6C8AC;
  margin: 0 auto 16px;
}

.lang-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-sub);
}
.lang-modal-close:hover { background: rgba(0, 0, 0, 0.06); }
.lang-modal-close svg { width: 16px; height: 16px; }

.lang-modal-globe {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #F8E1E6;
  color: #A11D3B;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.lang-modal-globe svg { width: 22px; height: 22px; }

.lang-modal-title {
  margin: 0 0 2px;
  font-size: 19px;
  font-weight: 700;
}

.lang-modal-subtitle {
  margin: 0 0 18px;
  font-size: 12px;
  color: var(--text-sub);
}

.lang-modal-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.lang-card {
  position: relative;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border: 1.5px solid #D6C8AC;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.lang-card.is-selected {
  border-color: #A11D3B;
  background: #FCF1F4;
}
.lang-card:focus-within {
  outline: 2px solid #A11D3B;
  outline-offset: 2px;
}

.lang-card-radio-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.lang-card-radio {
  flex: none;
  width: 20px;
  height: 20px;
  border: 2px solid #D6C8AC;
  border-radius: 50%;
  background: #fff;
}
.lang-card.is-selected .lang-card-radio {
  border-color: #A11D3B;
  background: radial-gradient(circle, #A11D3B 0 5px, #fff 6px);
}

.lang-card-text {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}
.lang-card-native { font-size: 16px; font-weight: 600; }
.lang-card-sub    { font-size: 12px; color: var(--text-sub); }

.lang-card-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: #FBE2D4;
  color: #B5613F;
}

.lang-modal-cta {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 12px;
  background: #A11D3B;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.lang-modal-cta:hover { background: #8B1933; }

.lang-modal-footnote {
  margin: 14px 0 0;
  font-size: 11px;
  color: var(--text-sub);
  text-align: center;
}

@media (min-width: 1024px) {
  .lang-modal-overlay {
    align-items: center;
    padding: 16px;
  }
  .lang-modal-box {
    width: 440px;
    border-radius: 18px;
    padding: 32px 32px 24px;
    animation: modal-in var(--dur-slow) var(--ease-out);
  }
  .lang-modal-grip { display: none; }
}

/* ------------------------------------------------------------------
   スクリーンリーダー専用（視覚的には隠すが、DOM・支援技術・検索エンジンには残す）
   トップの h1 のように「文書構造としては必要だがデザイン上は出さない」要素に使う。
   display:none / visibility:hidden と違い、読み上げと SEO の対象として残る。
   ------------------------------------------------------------------ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------
   語彙読み上げ音声の再生ボタン（partials/vocab-audio-btn.blade.php）
   円形・--brand 系トークン。再生状態は .is-playing（$store.audio が付与）。
   ------------------------------------------------------------------ */
.vocab-audio-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--brand-300);
  background: var(--surface);
  color: var(--brand);
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  align-self: center;
}
/* タップ領域: 見た目サイズに関わらず 44×44 を疑似要素で確保（レイアウト非干渉） */
.vocab-audio-btn::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
@media (hover: hover) {
  .vocab-audio-btn:hover { background: var(--brand-50); }
}
.vocab-audio-btn.is-playing,
.vocab-audio-btn.is-playing:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.vocab-audio-btn--32 { width: 32px; height: 32px; }
.vocab-audio-btn--32 svg { width: 17px; height: 17px; }
.vocab-audio-btn--28 { width: 28px; height: 28px; }
.vocab-audio-btn--28 svg { width: 15px; height: 15px; }
.vocab-audio-btn--40 { width: 40px; height: 40px; }
.vocab-audio-btn--40 svg { width: 20px; height: 20px; }

/* 展開モード見出し行: .item-header の gap 8px + 2px ≒ 指定の 10px */
.vocab-audio-btn--expanded { margin-left: 2px; }

/* コンパクト行（スマホ）: サムネ(order:5)・シェブロン(order:6) の手前 = 右端側で
   「音声 → サムネ → ›」の並びにする（既存サムネの order 方式に倣う） */
.item-list.is-compact .vocab-audio-btn--compact { order: 4; }
@media (max-width: 1023.98px) {
  .item-list.is-unset .vocab-audio-btn--compact { order: 4; }
}
/* コンパクト行（PC）: 語句/読みのすぐ右に追従させる。音声あり行だけ word-wrap の
   flex:1 を解き、ボタンの margin-right:auto で bm-icon/シェブロンを右端へ送る。
   音声なし行は .has-audio が付かないため既存レイアウトは不変。 */
@media (min-width: 1024px) {
  .item-list.is-compact .vocab-mobile-word-wrap.has-audio { flex: 0 1 auto; }
  .item-list.is-compact .vocab-audio-btn--compact { order: 0; margin-right: auto; }
}

/* クイズ解答後: 出題語（読み）＋再生ボタンの行（解説ボックスの上に新設） */
.answer-word-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.answer-word-main {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}
.answer-word-reading {
  font-size: 14px;
  color: var(--ink-2);
}
.answer-word-row .vocab-audio-btn { margin-left: auto; }

/* ================================================================
 * 全レベル横断検索ページ（/vocabulary/all）+ 導線カード
 * ============================================================== */

/* --- eyebrow（H1 上の ALL LEVELS・N1–N5） --- */
.all-levels-eyebrow {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 4px;
}

/* --- 5 色ストライプ（H1 直下） --- */
.all-levels-stripe {
  display: flex;
  gap: 4px;
  max-width: 360px;
  margin: 8px 0 10px;
}
.all-levels-stripe-seg {
  height: 4px;
  flex: 1 1 0;
  border-radius: 999px;
}
.all-levels-stripe-seg--n1 { background: var(--brand-300); }
.all-levels-stripe-seg--n2 { background: var(--peach); }
.all-levels-stripe-seg--n3 { background: var(--sand); }
.all-levels-stripe-seg--n4 { background: var(--mint); }
.all-levels-stripe-seg--n5 { background: var(--border-strong); }

/* --- 全レベルからさがす リンクカード（レベル別ページ・ホーム共用） --- */
.all-levels-link-card-wrap { margin: -4px 0 12px; }
.all-levels-link-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: background .15s, border-color .15s;
}
.all-levels-link-card:hover {
  background: var(--brand-50);
  border-color: var(--brand-300);
}
.all-levels-dots {
  display: inline-flex;
  gap: 3px;
  flex-shrink: 0;
}
.all-levels-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.all-levels-dot--n1 { background: var(--brand-300); }
.all-levels-dot--n2 { background: var(--peach); }
.all-levels-dot--n3 { background: var(--sand); }
.all-levels-dot--n4 { background: var(--mint); }
.all-levels-dot--n5 { background: var(--border-strong); }
.all-levels-link-card-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
}
.all-levels-link-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand);
}
.all-levels-link-card-sub {
  font-size: 12px;
  color: var(--ink-2);
}
.all-levels-link-card-chevron {
  font-size: 18px;
  color: var(--ink-3);
  flex-shrink: 0;
}
/* --- ホーム配置（進捗セクション最上部・PC スマホとも全幅） --- */
.home-section-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.home-progress-all-levels { margin: 0 0 12px; }

/* --- テーマでさがす（語彙フラグ導線）。進捗カード末尾に罫線で区切って置く --- */
.home-theme-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.home-theme-heading {
  font-size: 12px;
  font-weight: 600;
  /* カンプは --ink-3 だが、tokens.css で「decorative only, NOT body copy」と
     定義されている。見出しは読ませる文字なので --ink-2（4.9:1）にする。 */
  color: var(--ink-2);
  margin: 0 0 8px;
}
.home-theme-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.home-theme-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--radius-pill);
  /* カンプは padding 6px 13px だが、それだと実寸 32px 前後でタップ領域が足りない。
     既存 pill に合わせ 10px/14px にして 44px 相当を確保する。 */
  padding: 10px 14px;
  line-height: 1.4;
  text-decoration: none;
}
.home-theme-chip:hover {
  background: var(--brand-100);
  color: var(--brand-hover);
}
.home-theme-chip-count {
  /* カンプは 11px + --ink-4 だが、その組み合わせは白背景で 2.54:1（WCAG AA 不合格）。
     件数は読ませる情報なので --ink-2 にし、サイズで主役の語より下げる
     （.vocab-sheet-meta と同じ判断）。 */
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* --- レベル絞り込み pill 群 --- */
.filter-section-heading {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  margin: 0 0 6px;
}
/* 全レベル横断ページのステータス絞り込みは見出しの下に左寄せで積む（space-between にしない）。 */
.filter-bar--stacked { justify-content: flex-start; }
.vocab-level-pills-group { margin: 4px 0 10px; }
.vocab-level-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.level-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-3);
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.level-pill-name {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
}
.level-pill-count {
  font-family: var(--font-en);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  opacity: .8;
}
.level-pill-check { font-size: 11px; font-weight: 700; }
/* 選択中のレベル別配色 */
.level-pill.is-selected.level-pill--n1 { background: var(--brand-100);  border-color: var(--brand-300); color: var(--brand); }
.level-pill.is-selected.level-pill--n2 { background: var(--peach-soft); border-color: #E0B49B;         color: var(--peach-deep); }
.level-pill.is-selected.level-pill--n3 { background: var(--sand-soft);  border-color: #DCC48E;         color: #8B6628; }
.level-pill.is-selected.level-pill--n4 { background: var(--mint-soft);  border-color: #AFD1B8;         color: #3F6F4E; }
.level-pill.is-selected.level-pill--n5 { background: var(--bg-2);       border-color: var(--border-strong); color: var(--ink-2); }

/* --- 絞り込み中件数行 + 条件クリア --- */
.all-levels-narrow-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 4px 0 10px;
}
.all-levels-narrow-count {
  font-size: 13px;
  color: var(--ink-2);
}
.all-levels-narrow-count strong {
  font-family: var(--font-en);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.all-levels-narrow-sep { margin: 0 2px; color: var(--ink-3); }
.all-levels-clear {
  font-size: 13px;
  color: var(--brand);
  text-decoration: none;
  margin-left: auto;
}
.all-levels-clear:hover { text-decoration: underline; }

/* --- 単一レベル選択 CTA --- */
.single-level-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: 10px;
}
.single-level-cta--banner {
  min-height: 44px;
  padding: 10px 14px;
  margin: 0 0 12px;
}
.single-level-cta--inline {
  min-height: 34px;
  padding: 5px 12px;
  display: none;   /* PC のみ件数行内に表示 */
}
.single-level-cta-text { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.single-level-cta-title { font-size: 14px; font-weight: 700; color: var(--brand); }
.single-level-cta-sub { font-size: 12px; color: var(--ink-2); }
.single-level-cta-chevron { font-size: 18px; color: var(--ink-3); flex-shrink: 0; }
@media (min-width: 1024px) {
  .single-level-cta--banner { display: none; }        /* PC はインライン形に一本化 */
  .single-level-cta--inline { display: inline-flex; }
}

/* --- フッタ: レベル別単語帳リンク群 --- */
.vocab-level-links {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.vocab-level-links-heading {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  margin: 0 0 10px;
}
.vocab-level-links-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vocab-level-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
  transition: background .15s, border-color .15s;
}
.vocab-level-link:hover { background: var(--brand-50); border-color: var(--brand-300); }
.vocab-level-link-label { font-size: 13px; font-weight: 600; }
.vocab-level-link-chevron { color: var(--ink-3); }

/* --- フッタ: 他テーマへのリンク群（テーマ別ページ）--- */
/* レベル別リンク群と同じトーン（pill 形）。件数はホームのテーマチップと同じ見え方に揃える。 */
.vocab-theme-links {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.vocab-theme-links-heading {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  margin: 0 0 10px;
}
.vocab-theme-links-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vocab-theme-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
  transition: background .15s, border-color .15s;
}
.vocab-theme-link:hover { background: var(--brand-50); border-color: var(--brand-300); }
.vocab-theme-link-label { font-size: 13px; font-weight: 600; }
.vocab-theme-link-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.vocab-theme-link-chevron { color: var(--ink-3); }

/* ==========================================================================
   クイズ結果シェアカード（語彙・慣用句・カタカナ語 共通）
   partials/quiz-result-share.blade.php
   ========================================================================== */
.quiz-share-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
/* 語彙結果ページ用の余白調整（hero-wrap の下に 14px あける） */
.result-v2-share { margin: 14px 16px 0; }
/* トップ・単語帳一覧のサイト紹介シェア用の余白（フッター直上に置く） */
.home-share-block { margin: 20px 0; }
.vocab-share-block { margin: 20px 0 8px; }

/* サイト紹介シェア（トップ・一覧）は装飾控えめ = JMdict 出典表示程度の静かなトーン。
   カードの赤系プライマリを使わず、ボタンはインライン幅で左寄せ横並び。 */
.quiz-share-card.share-quiet {
  background: #f5f5f3;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px 14px;
}
.share-quiet .quiz-share-label {
  font-size: 11px;
  margin-bottom: 8px;
  justify-content: center; /* 見出しを中央寄せ */
}
.share-quiet .quiz-share-label svg { width: 13px; height: 13px; }
.share-quiet .quiz-share-row {
  justify-content: center; /* ボタンを中央寄せ */
  gap: 8px;
  flex-wrap: wrap;
}
.share-quiet .quiz-share-btn {
  flex: 0 0 auto;              /* インライン（コンテンツ幅） */
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
}
.share-quiet .quiz-share-btn svg { width: 15px; height: 15px; }
/* 「シェアする」primary をアウトライン化し「リンクをコピー」と同格に */
.share-quiet .quiz-share-btn--primary {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--ink);
  box-shadow: none;
}
.share-quiet .quiz-share-btn--primary:hover {
  background: var(--brand-50);
  border-color: var(--brand-300);
}
.share-quiet .quiz-share-btn--service { min-width: 44px; }

.quiz-share-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.quiz-share-label svg {
  width: 14px;
  height: 14px;
  color: var(--brand);
  flex-shrink: 0;
}

.quiz-share-row {
  display: flex;
  gap: 10px;
}
.quiz-share-row--wrap { flex-wrap: wrap; }

.quiz-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  flex: 1 1 auto;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.quiz-share-btn svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.quiz-share-btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.quiz-share-btn--primary:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
}
.quiz-share-btn--secondary {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--ink);
}
.quiz-share-btn--service {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--brand);
  flex: 0 0 auto;
  min-width: 56px;
  padding: 0;
}
.quiz-share-btn--secondary:hover,
.quiz-share-btn--service:hover {
  background: var(--brand-50);
  border-color: var(--brand-300);
}

/* ============================================================
   YouTube チャンネル紹介カード（vi のみ / partials/youtube-channel-card）
   ============================================================ */
.yt-promo-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 16px;
  text-decoration: none;
}
.yt-promo-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--brand);
}
.yt-promo-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.yt-promo-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.45;
}
.yt-promo-sub {
  font-size: 11.5px;
  color: var(--ink-2);
}
.yt-promo-cta {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand);
  white-space: nowrap;
  flex-shrink: 0;
}