/* ==========================================================================
 * Academy Zone Premium UI — Minimal Scope (v7)
 *
 * 今回のスコープは「正解/不正解フィードバックカード」と「フォント統一」のみ。
 * 既存 UI（ヘッダー / hero / 科目アイコン / ボタン / 解説タイトル / 完了画面 /
 * テーマボタン / ナビボタン / ツールチップ）には触れない。
 *
 * 残しているセクション:
 *   1. Design tokens（az-feedback-card で使用）
 *   2. Font 統一（Inter ベースのサンセリフ）
 *   3. 科目別アイコン保護（OS のカラー絵文字フォントを明示）
 *   4. az-feedback-card（正解/不正解カード本体）
 *
 * 撤回したセクション（過去 v1〜v6 で実装→今回スコープ外）:
 *   - 既存 UI Editorial Luxury 上書き（header / hero / stats / filter /
 *     question / options / explanation / buttons / complete / upgrade /
 *     list / nav-modal / bookmark / weak）
 *   - Dark mode 全般上書き
 *   - 科目別 accent 残存対応
 *   - 絵文字置換（complete-symbol / theme-btn / nav-btn.home /
 *     explanation-title / upgrade-cta h3 / tooltip / hero-symbol /
 *     logo-icon / demo-banner）
 *   - タイポ階層、option-label 正誤バッジ、ホバー強化、ピル化
 * ==========================================================================
 */

/* --------------------------------------------------------------------------
 * 1. Design tokens (feedback card で使用)
 * -------------------------------------------------------------------------- */
:root {
  --az-navy:        #0F172A;
  --az-navy-soft:   #1E293B;
  --az-gold:        #C8A45D;
  --az-gold-soft:   #F7EFD8;
  --az-card:        #FFFFFF;
  --az-text:        #111827;
  --az-muted:       #64748B;
  --az-border:      #E5E7EB;
  --az-success:     #0F766E;
  --az-success-bg:  #ECFDF5;
  --az-error:       #9F1239;
  --az-error-bg:    #FDF2F2;
  --az-shadow-md:   0 14px 36px rgba(15, 23, 42, 0.10);
  --az-radius-lg:   20px;
  --az-font-sans:   Inter, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}

/* --------------------------------------------------------------------------
 * 2. フォントサンセリフ統一
 *    - 既存 CSS の Shippori Mincho など serif を排除し、Inter ベースに統一
 *    - body 全体に強制
 * -------------------------------------------------------------------------- */
html, body, *, *::before, *::after {
  font-family: var(--az-font-sans) !important;
}

/* --------------------------------------------------------------------------
 * 3. 科目別アイコン保護
 *    - Inter スタックには絵文字グリフがないため、科目別絵文字（📊 等）が
 *      表示される要素にだけ OS のカラー絵文字フォントを明示する
 *    - これにより既存の科目別アイコン表示が維持される
 * -------------------------------------------------------------------------- */
.hero-symbol-inner,
.logo-icon-inner,
.subject-icon,
.subject-icon-wrap,
.subject-icon-wrap img,
.subject-emoji-icon {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
               "EmojiOne Color", "Twemoji Mozilla", var(--az-font-sans) !important;
}

/* --------------------------------------------------------------------------
 * 4. az-feedback-card — 正解/不正解 フィードバックカード本体
 *    JSX 側で .explanation-card の直前に以下を挿入する想定:
 *      <div className={"az-feedback-card " + (isCorrect ? "is-correct" : "is-incorrect")}>
 *        <div className="az-feedback-badge" aria-hidden="true"></div>
 *        <div className="az-feedback-headline">{isCorrect ? "正解" : "不正解"}</div>
 *        <div className="az-feedback-divider" aria-hidden="true"></div>
 *        <div className="az-feedback-note">
 *          {isCorrect ? "よくできました！" : "正解は「" + correctLetter + "」です"}
 *        </div>
 *      </div>
 * -------------------------------------------------------------------------- */

.az-feedback-card {
  position: relative;
  border-radius: var(--az-radius-lg);
  padding: 2rem 1.5rem 1.6rem;
  text-align: center;
  margin: 1.2rem 0;
  border: 1px solid var(--az-gold);
  box-shadow: var(--az-shadow-md);
  overflow: hidden;
}
.az-feedback-card.is-correct {
  background: var(--az-success-bg);
  border-color: rgba(15, 118, 110, 0.30);
}
.az-feedback-card.is-incorrect {
  background: var(--az-error-bg);
  border-color: rgba(159, 18, 57, 0.30);
}

/* 4-1. 中央上部の二重リング・バッジ（金リング+白余白+色付き円+白アイコン） */
.az-feedback-badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto 1.1rem;
  border: 1.5px solid var(--az-gold);
  background: var(--az-card);
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10);
}
.az-feedback-badge::before {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--az-card);
  line-height: 1;
}
.az-feedback-card.is-correct .az-feedback-badge::before {
  background: var(--az-success);
  content: "✓";
}
.az-feedback-card.is-incorrect .az-feedback-badge::before {
  background: var(--az-error);
  content: "!";
}

/* 4-2. 大見出し「正解 / 不正解」 */
.az-feedback-headline {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  margin-bottom: 0.4rem;
  line-height: 1.2;
}
.az-feedback-card.is-correct .az-feedback-headline {
  color: var(--az-success);
}
.az-feedback-card.is-incorrect .az-feedback-headline {
  color: var(--az-error);
}

/* 4-3. 金細線 + 中央●区切り */
.az-feedback-divider {
  position: relative;
  height: 1px;
  width: 120px;
  background: var(--az-gold);
  opacity: 0.55;
  margin: 0.85rem auto 0.85rem;
}
.az-feedback-divider::after {
  content: "•";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--az-gold);
  font-size: 0.85rem;
  line-height: 1;
  padding: 0 6px;
}
.az-feedback-card.is-correct .az-feedback-divider::after { background: var(--az-success-bg); }
.az-feedback-card.is-incorrect .az-feedback-divider::after { background: var(--az-error-bg); }

/* 4-4. 補足文 */
.az-feedback-note {
  font-size: 0.95rem;
  color: var(--az-text);
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* 4-5. Dark mode（az-feedback-card のみ） */
[data-theme="dark"] .az-feedback-card.is-correct {
  background: rgba(16, 185, 129, 0.10);
  border-color: rgba(16, 185, 129, 0.45);
}
[data-theme="dark"] .az-feedback-card.is-incorrect {
  background: rgba(248, 113, 113, 0.10);
  border-color: rgba(248, 113, 113, 0.45);
}
[data-theme="dark"] .az-feedback-card.is-correct .az-feedback-headline { color: #6EE7B7; }
[data-theme="dark"] .az-feedback-card.is-incorrect .az-feedback-headline { color: #FCA5A5; }
[data-theme="dark"] .az-feedback-card.is-correct .az-feedback-divider::after { background: rgb(17, 26, 41); }
[data-theme="dark"] .az-feedback-card.is-incorrect .az-feedback-divider::after { background: rgb(33, 19, 24); }
[data-theme="dark"] .az-feedback-note { color: #F8FAFC; }

/* 4-6. Responsive (狭幅) */
@media (max-width: 480px) {
  .az-feedback-card { padding: 1.5rem 1rem 1.2rem; }
  .az-feedback-badge { width: 56px; height: 56px; }
  .az-feedback-headline { font-size: 1.8rem; letter-spacing: 0.16em; }
  .az-feedback-note { font-size: 0.88rem; }
}

/* --------------------------------------------------------------------------
 * 5. Dark mode hover-tooltip 共通バグ修正
 *
 *    [症状]
 *    各 demo / 本編アプリの .tooltip は `background: var(--primary)` と
 *    `color: var(--white)` で組まれている。light mode では --primary が
 *    濃紺 (#1a1a2e) なので白文字が読めるが、dark mode では --primary が
 *    near-white (#f1f5f9) に切り替わるため、白背景 × 白文字となり
 *    ホバー説明ボックスが完全に読めなくなる。
 *
 *    [対応方針]
 *    - academy-premium.css のみで全 demo / 本編アプリへ共通上書き
 *    - HTML / 問題データ / React ロジックは触らない
 *    - dark mode 時に .tooltip と .hover-term の背景・文字・枠線・影を
 *      LP / 1ji ポータル / 本編と整合する「紺・白・金」トーンへ強制
 *    - light mode は既存の見た目を維持（上書きしない）
 * -------------------------------------------------------------------------- */

/* 5-1. ダークモードのホバー説明ボックス本体 */
[data-theme="dark"] .tooltip {
  background: #0F172A !important;            /* az-navy 濃紺 */
  color: #F8FAFC !important;                  /* near-white 文字 */
  border: 1px solid rgba(200, 164, 93, 0.55) !important; /* 金細線 */
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(15, 23, 42, 0.55) !important; /* 暗めで自然な影 */
  /* z-index / opacity / visibility は per-demo 側の既存値を継承（既に
     z-index:1000、pointer-events:none、opacity 動的制御は React 側）。
     必要であれば最低保証を明示。 */
  z-index: 1000 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 5-2. tooltip 内の見出し・本文・補助文・リンク色（防御的に上書き）
        実体は plain text だが、将来構造化された場合に備える */
[data-theme="dark"] .tooltip,
[data-theme="dark"] .tooltip * {
  color: #F8FAFC !important;
}
[data-theme="dark"] .tooltip h1,
[data-theme="dark"] .tooltip h2,
[data-theme="dark"] .tooltip h3,
[data-theme="dark"] .tooltip h4,
[data-theme="dark"] .tooltip strong,
[data-theme="dark"] .tooltip b {
  color: #FFFFFF !important;
}
[data-theme="dark"] .tooltip small,
[data-theme="dark"] .tooltip .muted,
[data-theme="dark"] .tooltip em {
  color: #CBD5E1 !important; /* 薄いグレー（補助文） */
}
[data-theme="dark"] .tooltip a {
  color: #E0B772 !important; /* 金リンク */
  text-decoration: underline;
  text-decoration-color: rgba(224, 183, 114, 0.45);
}
[data-theme="dark"] .tooltip a:hover {
  color: #F4D08B !important;
  text-decoration-color: #F4D08B;
}

/* 5-3. tooltip 先頭の📖アイコン色（既存の content:"📖 " はそのまま、
        色だけ暗背景に映えるよう調整） */
[data-theme="dark"] .tooltip::before {
  color: rgba(200, 164, 93, 0.95);
}

/* 5-4. 本文中の hover-term（下線付きホバー語）の暗背景対応
        light モードの orange (#ea580c) は暗背景で沈むため、彩度を保ち
        ながら明度を上げて読みやすくする */
[data-theme="dark"] .hover-term {
  color: #F4B870 !important;
  border-bottom-color: #F4B870 !important;
}
[data-theme="dark"] .hover-term:hover {
  background: rgba(244, 184, 112, 0.14) !important;
  color: #FBD9A8 !important;
  border-bottom-color: #FBD9A8 !important;
}

/* ==========================================================================
 * EOF
 * ==========================================================================
 */