/* =====================================================
   subject.css (各教科共通スタイル)
===================================================== */

/* 教科トップのコンテナ */
.subject-container {
    padding: 2rem;
    border-radius: 1.6rem;
    margin: 2rem auto;
    background-color: var(--bg-page);
    color: var(--text-main);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

rt {
    font-size: 1rem;
}

/* 国語ページ用の背景色調整（必要に応じて他の教科も追加） */
.japanese-page {
    background-color: var(--japanese-item-bg);
}

.math-page {
    background-color: var(--math-item-bg);
}

.science-page {
    background-color: var(--science-item-bg);
}

.social-page {
    background-color: var(--social-item-bg);
}

.english-page {
    background-color: var(--english-item-bg);
}

/* 教科タイトル */
.subject-title {
    font-size: 3.2rem;
    text-align: center;
    color: var(--text-main);
    margin-bottom: 2.4rem;
    padding-bottom: 1.2rem;
    border-bottom: 0.4rem dashed var(--border-light);
}

.japanese-page .subject-title {
    border-bottom-color: var(--japanese-c);
}

.math-page .subject-title {
    border-bottom-color: var(--math-c);
}

.science-page .subject-title {
    border-bottom-color: var(--science-c);
}

.social-page .subject-title {
    border-bottom-color: var(--social-c);
}

.english-page .subject-title {
    border-bottom-color: var(--english-c);
}

.preparation-page {
    background-color: var(--g0);
    /* 未就学・低学年向けカラーをベースに */
    border-color: var(--pastel-yellow) !important;
}

/* キャラクター会話セクション（枠組み） */
.intro-chat {
    background-color: var(--bg-card);
    padding: 2rem;
    border-radius: 1.2rem;
    margin-bottom: 3.2rem;
    border: 2px solid var(--border-soft);
}

/* 学年リストのレイアウト */
.grade-list {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

/* 学年ごとのカード */
.grade-card {
    background-color: var(--bg-item);
    border: 0.4rem solid var(--grade-color);
    border-radius: 1.6rem;
    padding: 2.4rem;
    position: relative;
    box-shadow: 0 0.6rem 0 var(--border-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.grade-card:hover {
    transform: translateY(-0.3rem);
    box-shadow: 0 0.9rem 0 var(--border-light);
}

/* 学年カラーの割り当て */
.grade-0 {
    --grade-color: var(--g0);
}

.grade-1 {
    --grade-color: var(--g1);
}

.grade-2 {
    --grade-color: var(--g2);
}

.grade-3 {
    --grade-color: var(--g3);
}

.grade-4 {
    --grade-color: var(--g4);
}

.grade-5 {
    --grade-color: var(--g5);
}

.grade-6 {
    --grade-color: var(--g6);
}

.japanese-page {
    --grade-color: var(--japanese-bg);
}

.math-page {
    --grade-color: var(--math-bg);
}

.life-page {
    --grade-color: var(--science-bg);
}

.preparation-page .subject-title {
    border-bottom-color: var(--pastel-orange);
}

.preparation-page .grade-card {
    border-color: var(--card-border-color, var(--g0));
}

/* 学年タイトル */
.grade-title {
    font-size: 2.4rem;
    color: var(--text);
    margin-top: 0;
    margin-bottom: 1.6rem;
    display: inline-block;
    background: linear-gradient(transparent 70%, var(--grade-color) 70%);
}

/* 学年の内容説明 */
.grade-desc {
    font-size: 1.6rem;
    line-height: 1.8;
    color: var(--text-sub);
    margin-bottom: 2rem;
}

/* 学年ページへのリンクボタン */
.grade-link-wrapper {
    text-align: right;
}

.grade-link {
    display: inline-block;
    background-color: var(--grade-color);
    color: var(--text-main);
    font-size: 1.6rem;
    font-weight: bold;
    text-decoration: none;
    padding: 1.2rem 2.4rem;
    border-radius: 3rem;
    box-shadow: 0 0.4rem 0 rgba(0, 0, 0, 0.15);
    transition: filter 0.2s;
}

.grade-link:hover {
    filter: brightness(0.95);
}

.grade-link:active {
    transform: translateY(0.4rem);
    box-shadow: none;
}

/* ダークモード時のボタンテキスト色補正 */
body[data-theme="dark"] .grade-link {
    color: var(--color);
}

/* =====================================================
   subject.css 追加分（単元ごとのカラー・バリエーション & 調整）
===================================================== */

/* 1年生向けに少し文字を大きく、読みやすく */
.grade-card .grade-title {
    font-size: 2.6rem;
    /* 1年生が認識しやすいサイズ */
    font-weight: bold;
    padding: 0.2rem 1.2rem;
    border-radius: 0.8rem;
}

.grade-card .grade-desc {
    font-size: 1.8rem;
    /* 少し大きめのフォントで視認性アップ */
    color: var(--text-main);
    /* 1年生向けに少し濃い色に */
}

/* ダークモード時のボタンテキスト色（バグ防止の補正） */
body[data-theme="dark"] .grade-link {
    color: #ffffff;
    /* 深い背景色に対して文字を白に固定 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ルビ（ふりがな）のスタイル調整 */
ruby {
    ruby-position: over;
}

rt {
    font-size: 1.1rem;
    font-weight: normal;
    color: var(--text-muted);
    letter-spacing: 0;
}

/* =====================================================
   subject.css 追記（国語・単元カラー設定）
===================================================== */
.unit-hiragana,
.unit-classic,
.unit-pencil {
    --grade-color: var(--pastel-pink);
}

.unit-katakana,
.unit-reading,
.unit-reading-report {
    --grade-color: var(--pastel-blue);
}

.unit-kanji,
.unit-hiragana-read,
.unit-katakana-read {
    --grade-color: var(--pastel-orange);
}


.unit-reading-writing,
.unit-writing,
.unit-writing-culture,
.unit-storybook {
    --grade-color: var(--pastel-purple);

}

.unit-word-play,
.unit-suiko,
.unit-word-game {
    --grade-color: var(--pastel-green);
}

.unit-grammar,
.unit-reading-logic {
    --grade-color: var(--pastel-blue);
    /* 文法・ルールはブルー */
}

.unit-dictionary,
.unit-vocabulary {
    --grade-color: var(--pastel-green);
    /* 辞典：グリーン */
}

.unit-romaji,
.unit-history,
.unit-hiragana-write,
.unit-katakana-write {
    --grade-color: var(--pastel-yellow);
    /* ローマ字：イエロー */
}

/* =====================================================
   subject.css 追記（算数・単元カラー設定）
===================================================== */

.unit-numbers,
.unit-math-measurement,
.unit-graphs {
    --grade-color: var(--pastel-green);
    /* かず：グリーン */
}

.unit-addition,
.unit-hissan,
.unit-division,
.unit-math-hissan2,
.unit-volume,
.unit-math-fraction6 {
    --grade-color: var(--pastel-pink);
    /* たしざん：ピンク */
}

.unit-subtraction,
.unit-math-calc5,
.unit-logic6 {
    --grade-color: var(--pastel-blue);
    /* ひきざん：ブルー */
}

.unit-clock,
.unit-multiplication,
.unit-math-hissan,
.unit-area,
.unit-ratio,
.unit-ratio6 {
    --grade-color: var(--pastel-orange);
    /* とけい：オレンジ */
}

.unit-shapes,
.unit-shapes2,
.unit-circle-sphere,
.unit-shapes4,
.unit-shapes6 {
    --grade-color: var(--pastel-purple);
    /* かたち：パープル */
}

.unit-numbers,
.unit-measurement,
.unit-combinations {
    --grade-color: var(--pastel-green);
    /* かず：グリーン */
}

.unit-time,
.unit-fractions-decimals,
.unit-decimals2,
.unit-average-circle {
    --grade-color: var(--pastel-yellow);
    /* 時計・時間：イエロー */
}

/* =====================================================
   subject.css 追記（理科・単元カラー設定）
===================================================== */

/* グリーン系 */
.unit-sci-creatures,
.unit-sci-biology3,
.unit-sci-biology5 {
    --grade-color: var(--pastel-green);
}

/* オレンジ系 */
.unit-sci-plants,
.unit-sci-force3,
.unit-sci-matter4,
.unit-sci-force5,
.unit-sci-matter6 {
    --grade-color: var(--pastel-orange);
}

/* ピンク系 */
.unit-sci-seasons,
.unit-sci-biology4,
.unit-sci-biology6 {
    --grade-color: var(--pastel-pink);
}

/* イエロー系 */
.unit-sci-toys,
.unit-sci-earth3 {
    --grade-color: var(--pastel-yellow);
}

/* パープル系 */
.unit-sci-matter3,
.unit-sci-earth4,
.unit-sci-matter5,
.unit-sci-force6 {
    --grade-color: var(--pastel-purple);
}

/* ブルー系 */
.unit-sci-force4,
.unit-sci-earth5,
.unit-sci-earth6 {
    --grade-color: var(--pastel-blue);
}

/* =====================================================
   subject.css 追記（社会・単元カラー設定）
===================================================== */

/* グリーン系 */
.unit-soc-explore,
.unit-soc-map3,
.unit-soc-health4,
.unit-soc-land5,
.unit-soc-history6-1 {
    --grade-color: var(--pastel-green);
}

/* オレンジ系 */
.unit-soc-family,
.unit-soc-work3,
.unit-soc-tradition4,
.unit-soc-food5,
.unit-soc-history6-2 {
    --grade-color: var(--pastel-orange);
}

/* ピンク系 */
.unit-soc-safety3,
.unit-soc-disaster4 {
    --grade-color: var(--pastel-pink);
}

/* ブルー系 */
.unit-soc-rules,
.unit-soc-prefecture4,
.unit-soc-industry5,
.unit-soc-politics6 {
    --grade-color: var(--pastel-blue);
}

/* パープル系 */
.unit-soc-history3,
.unit-soc-info5,
.unit-soc-global6 {
    --grade-color: var(--pastel-purple);
}

/* =====================================================
   subject.css 追記（英語・単元カラー設定）
===================================================== */
/* グリーン系 */
.unit-eng-friends,
.unit-eng-dream,
.unit-soc-welcome6 {
    --grade-color: var(--pastel-green);
}

/* オレンジ系 */
.unit-eng-likes,
.unit-eng-can {
    --grade-color: var(--pastel-orange);
}

/* ピンク系 */
.unit-eng-abc,
.unit-eng-hero,
.unit-eng-memories {
    --grade-color: var(--pastel-pink);
}

/* ブルー系 */
.unit-eng-numbers,
.unit-eng-town,
.unit-eng-juniorhigh {
    --grade-color: var(--pastel-blue);
}

/* パープル系 */
.unit-eng-world {
    --grade-color: var(--pastel-purple);
}