/* 知識ページ全体のコンテナ：画面中央に配置し、最大幅を800pxに制限する外枠 */
.textbook-container {
    max-width: 800px;
    margin: 15px auto 40px; /* 上15px、左右中央、下40pxの余白 */
    padding: 0 20px;
    font-family: 'Inter', "SF Pro TP", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    word-break: normal; 
    overflow-wrap: anywhere;
    line-break: strict; /* 日本語の改行ルールを厳格に適用 */
}

/* プレミアム・カードデザイン：白い半透明の背景と影で作る「箱」 */
.textbook-card {
    background: rgba(255, 255, 255, 0.85); /* 85%の不透明度の白 */
    backdrop-filter: blur(10px); /* 背景をぼかす（グラスモーフィズム） */
    border-radius: 16px; /* 角を丸くする */
    padding: 18px 20px; /* 箱の内側の余白 */
    margin-bottom: 15px; /* 箱同士の上下の間隔 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); /* 非常に薄い影 */
    position: relative;
    overflow: hidden; /* はみ出した装飾をカット */
}

/* カード上部の動くアクセントライン：青から緑に変化する細い線 */
.textbook-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 5px; /* 高さ5pxの線 */
    background: linear-gradient(90deg, #3a86ff, #00f5d4, #3a86ff);
    background-size: 200% auto;
    animation: gradientMove 4s linear infinite; /* 4秒かけてループするアニメ */
}

/* アニメーションの定義：背景を動かして線が光っているように見せる */
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* ヒーローカード：最初の導入部分だけを豪華なグラデーションにする */
.hero-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 247, 255, 0.95) 100%);
    border: 1px solid rgba(58, 134, 255, 0.2);
    padding: 25px 20px;
}

.hero-card p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #2d3748;
    font-weight: 500;
}

/* カード内の見出し2：文字の下に細い線を引き、アイコンが並ぶように設定 */
.textbook-card h2 {
    color: #1a202c;
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    border-bottom: 2px solid rgba(58, 134, 255, 0.1);
    padding-bottom: 8px;
}

/* カード内の見出し3：文字の下に細い線を引き、アイコンが並ぶように設定 */
.textbook-card h3 {
    color: #1a202c;
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    border-bottom: 2px solid rgba(58, 134, 255, 0.1);
    padding-bottom: 8px;
}

/* 段落：文字の大きさや行間を設定 */
.textbook-card p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #4a5568;
    margin-bottom: 8px;
}

/* 引用タグ：初期化（後でtip-boxなどが上書きする前提） */
.textbook-card blockquote {
    margin: 15px 0;
    padding: 0;
}

/* リスト（箇条書き）全体：余白の調整 */
.textbook-card ul, .textbook-card ol {
    margin-left: 0;
    padding-left: 0;
    margin-bottom: 10px;
}

/* 入れ子のリスト：2段目の箇条書きを少し右にずらす */
.textbook-card ul ul, .textbook-card li ul {
    margin: 5px 0 5px 1.2rem;
    padding-left: 0;
}

/* リストの各項目：標準の「●」を消し、独自の余白を設定 */
.textbook-card li {
    font-size: 0.95rem;
    margin-bottom: 4px;
    line-height: 1.6;
    list-style-type: none; /* 標準の点を消す */
    position: relative;
    padding-left: 1.1em; /* 点のためのスペースを詰める */
    text-indent: -1.1em; /* 点を左に出す量も合わせる */
}

/* 箇条書きのポッチ再現 */
.textbook-card ul li:not(.dfn-li):not(.dot-li):not(.dict-li)::before {
    content: "●";
    color: #3a86ff;
    font-size: 0.6em;
    margin-right: 0.5em; /* 文字との間隔を詰める */
    vertical-align: middle;
}

.dfn-desc, .dot-desc {
    flex-grow: 1;
}

/* 強調文字：色を濃くする */
.textbook-card strong {
    color: #2d3748;
    font-weight: 700;
}

/* =========================================
    新しい Admonition (!!!) 用のボックスデザイン
   ========================================= */

/* 1. ボックス共通設定 */
.admonition {
    padding: 4px 16px;
    margin: 10px -12px;
    font-size: 0.9rem;
    line-height: 1.5;
    position: relative;
    border: none;
}

/* 2. 補足ボックス：!!! tip */
.admonition.tip {
    background: 
        linear-gradient(#22c55e, #22c55e) 0 0 / 20px 3px no-repeat,
        linear-gradient(#22c55e, #22c55e) 0 0 / 3px 20px no-repeat,
        linear-gradient(#22c55e, #22c55e) 100% 100% / 20px 3px no-repeat,
        linear-gradient(#22c55e, #22c55e) 100% 100% / 3px 20px no-repeat,
        linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    color: #166534;
}

/* 3. 重要ボックス：!!! important */
.admonition.important {
    background: 
        linear-gradient(#ef4444, #ef4444) 0 0 / 20px 3px no-repeat,
        linear-gradient(#ef4444, #ef4444) 0 0 / 3px 20px no-repeat,
        linear-gradient(#ef4444, #ef4444) 100% 100% / 20px 3px no-repeat,
        linear-gradient(#ef4444, #ef4444) 100% 100% / 3px 20px no-repeat,
        linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    color: #991b1b;
}

/* 4. タイトル部分（スクリプトで中身を消去済み。アイコンのみを表示） */
.admonition-title {
    display: block;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1.2;
}

.admonition.tip .admonition-title::before { 
    content: '💡 PRO TIP'; 
    color: #166534; 
}

.admonition.important .admonition-title::before { 
    content: '⚠️ CRITICAL'; 
    color: #991b1b; 
}

/* 5. ボックス内の箇条書きスタイル（本体とデザインを統一） */
.admonition ul {
    margin-top: 0;
    padding-left: 0;
}
.admonition li {
    list-style-type: none;
    position: relative;
    padding-left: 1.2rem;
    text-indent: -1.2rem;
    margin-bottom: 4px;
    font-size: 0.95rem;
    line-height: 1.6;
}
/* 箇条書きの点と同じ行にテキストを強制する（改行防止） */
.admonition li p {
    display: inline !important;
    margin: 0 !important;
}
/* タイトル以外の段落も余白を削るが、ブロックとしての性質は維持 */
.admonition > p:not(.admonition-title) {
    margin: 0 !important;
    padding: 0 !important;
}
.admonition ul li::before {
    content: "●";
    color: inherit;
    opacity: 0.7;
    font-size: 0.65em;
    margin-right: 0.5em;
    vertical-align: middle;
}

/* 箇条書きの中の箇条書き（入れ子）の対応 */
.admonition ul ul {
    margin-left: 1.4rem; /* 階層を深くする */
    margin-top: 4px;
    margin-bottom: 4px;
}
.admonition ul ul li {
    font-size: 0.9em; /* 子要素は少し小さく */
    opacity: 0.9;
}
.admonition ul ul li::before {
    content: "○"; /* 2段目は白丸にする */
    font-size: 0.8em;
}

/* 5. 特定の要素を消去 */
.mago-footer-nav .reset-container {
    display: none !important;
}

/* 6. 用語リンク */
.term-link {
    display: inline; padding: 2px 0; background-color: #fcecf8; color: #050505 !important;
    border-bottom: 2px solid #f10ae7; text-decoration: none !important; font-weight: 700;
}
.term-link:hover { background-color: #f10ae7; color: #ffffff !important; }

/* 7. ミニまとめボックス */
.summary-box-mini {
    padding: 20px; background: rgba(255, 255, 255, 0.9); border: 1px solid #edf2f7; border-radius: 16px; margin-bottom: 25px;
}

/* 8. モバイル表示最適化 */
@media (max-width: 600px) {
    .textbook-container { padding: 0 8px; margin-top: 15px !important; }
    .textbook-card { padding: 18px 15px; border-radius: 12px; }
    .admonition { padding: 12px 15px; margin: 12px -8px; }
}


/* =========================================
   知識ページ用：標準テーブルのデザイン適用
   (Pythonが書き出した素の <table> に mago.css の見た目を当てる)
   ========================================= */

/* 1. 表全体をスマホで横スクロール可能にする (ラッパーの代わり) */
/* textbook-card 自体にスクロールを付けるとカード全体が動いてしまうため外しました */

/* 2. Pythonが生成する <table> タグへのスタイル（mago.css と完全同期） */
.textbook-card table {
    display: block; /* ここが重要：ブロック要素にすることで単独でスクロール可能に */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    background: #fff;
    font-size: 0.92rem;
    line-height: 1.5;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

/* 3. ヘッダー (th) のデザイン */
.textbook-card table th {
    background-color: #f8fafc; /* 統一：薄いブルーグレー */
    color: #475569;
    font-weight: 800;
    padding: 12px 15px;
    text-align: center; /* 統一：中央揃え */
    border: 1px solid #edeff2;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap; /* 🚀 改行禁止 */
}

/* 4. セル (td) のデザイン */
.textbook-card table td {
    padding: 12px 15px;
    text-align: center; /* 統一：中央揃え */
    border: 1px solid #edeff2;
    vertical-align: middle;
    color: #444;
    white-space: nowrap; /* 🚀 改行禁止 */
}

/* 5. 1列目を左揃え＋強調 (mago.cssの仕様と完全同期) */
.textbook-card table td:first-child {
    text-align: left;
    font-weight: 600;
    background-color: #fafbfd;
    color: #334155;
    min-width: 80px;
}

/* 6. スマホ（画面幅480px以下）での微調整 */
@media (max-width: 480px) {
    .textbook-card table {
        font-size: 0.8rem;
    }
    .textbook-card table th, 
    .textbook-card table td {
        padding: 8px 6px;
    }
}

/* =========================================
   10. プレミアム・演習誘導ボタン
   ========================================= */
.nav-next {
    display: inline-block;
    padding: 18px 40px;
    background: linear-gradient(135deg, #f10ae6 0%, #b807b0 100%);
    color: #fff !important;
    font-size: 1.1rem;
    font-weight: 800;
    text-decoration: none !important;
    border-radius: 50px;
    box-shadow: 0 8px 20px rgba(241, 10, 230, 0.3);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.nav-next:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 12px 25px rgba(241, 10, 230, 0.45);
    background: linear-gradient(135deg, #ff4af5 0%, #f10ae6 100%);
}

.nav-next:active {
    transform: translateY(2px);
    box-shadow: 0 4px 10px rgba(241, 10, 230, 0.4);
}