/* 1. 設定父容器定位 (這段不用改) */
        .wiki-content {
            position: relative;
            overflow: hidden;
            z-index: 0;

            /* ★ 新增這行：底部留白 200px (可依圖片高度自行調整) */
            /* 這樣文字結束後，還會有一段空白空間給 NPC */
            padding-bottom: 350px;
        }

        /* A類頁面專用 (冒險指南) */
        .wiki-content.bg-type-a::after {
            background-image: url('../Kit/img/npc/aTeaching.webp');
        }

        /* B類頁面專用 (遊戲設定) */
        .wiki-content.bg-type-b::after {
            background-image: url('../Kit/img/npc/bBasic.webp?v=1');
        }

        /* B類頁面專用 (遊戲設定) */
        .wiki-content.bg-type-c::after {
            background-image: url('../Kit/img/npc/cSpecial.webp');
        }

        /* B類頁面專用 (遊戲設定) */
        .wiki-content.bg-type-ia::after {
            background-image: url('../Kit/img/npc/itemA.webp');
        }

        .wiki-content.bg-type-iw::after {
            background-image: url('../Kit/img/npc/itemW.webp');
        }


        /* 2. 加入背景圖 (修改這段) */
        .wiki-content::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;

            /* ★ 修正點：必須寫死高度，不能用 auto */
            width: 400px;
            height: 400px;
            /* 設定跟寬度一樣，或依圖片比例設定 */

            background-repeat: no-repeat;
            background-position: bottom left;
            background-size: contain;

            opacity: 1;
            /* 可以改回不透明，因為現在有專屬空間了 */
            z-index: 1;
            /* 確保它浮在背景色上面 */
            pointer-events: none;
            /* 滑鼠穿透 */
        }

        /* 3. 確保文字內容在圖片上方 (這段不用改) */
        .content-box {
            position: relative;
            z-index: 2;
        }

        /* 4. 手機版設定 (這段不用改) */
        @media (max-width: 768px) {
            .wiki-content::after {
                opacity: 0.1;
                width: 250px;
            }
        }


        .wiki-layout {
            display: flex;
            gap: 20px;
            min-height: 600px;
            align-items: flex-start;
            /* 讓左側不會被拉長 */
        }

        /* --- 左側側邊欄 --- */
        .wiki-sidebar {
            width: 240px;
            flex-shrink: 0;
            /* 禁止縮小 */
            background: rgba(20, 20, 20, 0.9);
            border: 1px solid rgba(251, 183, 80, 0.3);
            border-radius: 8px;
            overflow: hidden;
        }

        .wiki-menu-header {
            background: linear-gradient(to bottom, #2b2218, #1a1510);
            padding: 15px;
            text-align: center;
            color: var(--primary-gold, #fbb750);
            font-weight: bold;
            font-size: 1.1rem;
            border-bottom: 1px solid rgba(251, 183, 80, 0.2);
        }

        .wiki-nav {
            display: flex;
            flex-direction: column;
        }

        /* 選單項目 */
        .wiki-item {
            display: flex;
            align-items: center;
            padding: 12px 20px;
            color: #ccc;
            text-decoration: none;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.3s;
            font-size: 15px;
        }

        .wiki-item i {
            width: 25px;
            /* 固定圖示寬度，讓文字對齊 */
            color: #888;
            margin-right: 10px;
            text-align: center;
        }

        /* Hover 效果 */
        .wiki-item:hover {
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
            padding-left: 25px;
            /* 微微向右滑動 */
        }

        .wiki-item:hover i {
            color: var(--primary-gold, #fbb750);
        }

        /* Active (當前頁面) */
        .wiki-item.active {
            background: rgba(215, 66, 60, 0.1);
            /* 紅色淡背景 */
            color: var(--primary-gold, #fbb750);
            border-left: 4px solid var(--accent-red, #d7423c);
        }

        .wiki-item.active i {
            color: var(--accent-red, #d7423c);
        }

        /* --- 右側內容區 --- */
        .wiki-content {
            flex-grow: 1;
            /* 佔滿剩餘空間 */
            background: rgba(0, 0, 0, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            padding: 30px;
            min-height: 500px;
            padding-bottom: 400px;
        }


        @media (max-width: 768px) {
            .wiki-layout {
                flex-direction: column;
                gap: 15px;
            }

            .wiki-sidebar {
                width: 100%;
                border: none;
                background: transparent;
            }

            .wiki-menu-header {
                display: none;
            }

            /* ✅ 改成 Grid：2x2，不會出現「最後一顆吃滿整排」 */
            .wiki-nav {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px;
                padding-bottom: 5px;
            }

            .wiki-item {
                border: 1px solid rgba(255, 255, 255, .2);
                border-radius: 6px;
                padding: 10px 12px;
                background: rgba(0, 0, 0, .6);

                display: flex;
                align-items: center;
                justify-content: center;
                gap: 6px;

                font-size: 14px;
                text-align: center;

                /* ✅ 重要：不要再用 flex-grow */
                flex-grow: 0;
                width: 100%;
            }

            .wiki-item i {
                margin-right: 0;
            }

            .wiki-item:hover {
                padding-left: 12px;
                background: rgba(255, 255, 255, .1);
            }

            .wiki-item.active {
                background: var(--accent-red, #d7423c);
                color: #fff;
                border-color: var(--accent-red, #d7423c);
                border-left: 1px solid var(--accent-red, #d7423c);
            }

            .wiki-item.active i {
                color: #fff;
            }
        }


        .check-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .check-list li {
            margin-bottom: 10px;
            color: #ddd;
            display: flex;
            align-items: flex-start;
            /* 讓圖示對齊第一行文字 */
            gap: 12px;
            /* 增加一點間距 */
            line-height: 1.5;
            font-size: 0.95rem;
        }

        .check-list li div {
            flex: 1;
        }

        .check-list i {
            margin-top: 4px;
            flex-shrink: 0;
            width: 20px;
            text-align: center;
        }

        @media (max-width: 768px) {

            /* 規則列表間距調整 */
            .check-list li {
                gap: 10px;
            }

            .check-list i {
                font-size: 1.1rem;
            }
        }