:root {
            --peach-primary: #FFB7B2;
            --peach-dark: #FF8B94;
            --peach-border: #FFD5D5;
            --bg-light: #F6F3F8;
            --text-main: #444;
            --title-line-gradient: linear-gradient(90deg, rgba(161, 140, 209, 0) 0%, rgba(161, 140, 209, 0.8) 35%, rgba(251, 194, 235, 0.8) 65%, rgba(251, 194, 235, 0) 100%);
            --title-fade: linear-gradient(90deg, rgba(161, 140, 209, 0) 0%, rgba(161, 140, 209, 0.3) 30%, rgba(251, 194, 235, 0.3) 70%, rgba(251, 194, 235, 0) 100%);
        }

        html, body { margin: 0; padding: 0; font-family: 'Segoe UI', 'Microsoft JhengHei', sans-serif; background-color: var(--bg-light); color: var(--text-main); scroll-behavior: smooth; overflow-x: hidden; }
        
        /* --- 頁尾貼齊底部關鍵設定 --- */
        .main-wrapper { 
            width: 100%; 
            display: flex; 
            flex-direction: column; 
            min-height: 100vh; /* 強制容器至少跟螢幕一樣高 */
        }

        /* --- 1. 導覽列 --- */
        header { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(15px); padding: 0 50px; height: 80px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 4px 30px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 10000; border-bottom: 3px solid rgba(255, 213, 213, 0.3); }
        .logo img { height: 65px; width: auto; object-fit: contain; }
        nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 30px; }
        .menu-item > a { text-decoration: none; color: #333; font-weight: 1000; font-size: 18px; transition: 0.3s; padding: 10px 15px; }
        .menu-item > a:hover { color: var(--peach-dark); }
        .menu-toggle { display: none; font-size: 32px; cursor: pointer; color: var(--peach-dark); }

        /* --- 2. 標題組件 --- */
        .wide-title-box { text-align: center; margin: 100px 0 60px; position: relative; width: 100%; }
        .wide-title-glow { position: absolute; top: 50%; left: 0; width: 100%; height: 90px; background: var(--title-fade); transform: translateY(-50%); filter: blur(30px); z-index: 1; }
        .wide-title-box::after { content: ""; position: absolute; bottom: -15px; left: 0; width: 100%; height: 2px; background: var(--title-line-gradient); z-index: 2; }
        .wide-title-box h2 { position: relative; z-index: 3; font-size: 38px; font-weight: 900; color: var(--peach-dark); letter-spacing: 6px; margin: 0; text-shadow: 2px 2px 10px #fff; }

        /* --- 3. 職業大框 --- */
        .job-wide-box { width: 96%; max-width: 1450px; margin: 0 auto 60px; background: white; border-radius: 45px; border: 6px solid var(--peach-border); display: flex; flex-direction: column; box-shadow: 0 25px 60px rgba(0,0,0,0.06); position: relative; overflow: hidden; }

        .tabs-container { 
            display: flex; justify-content: center; background: #FFF5F5; padding: 20px; gap: 12px; 
            border-bottom: 3.5px solid var(--peach-border); z-index: 100; overflow-x: auto; 
            -webkit-overflow-scrolling: touch; scrollbar-width: none;
        }
        .tabs-container::-webkit-scrollbar { display: none; }
        .t-btn { padding: 10px 40px; cursor: pointer; font-size: 18px; font-weight: 900; color: #BBAAAA; border-radius: 20px; transition: 0.3s; white-space: nowrap; flex-shrink: 0; }
        .t-btn.active { background: var(--peach-primary); color: white; box-shadow: 0 5px 15px rgba(255, 183, 178, 0.4); }

        .content-area { position: relative; min-height: 800px; background: #fff; display: flex; }

        /* --- 左側：技能列表 --- */
        .skill-picker-side { width: 320px; background: #fafafa; border-right: 2px solid #F0F0F0; padding: 25px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-content: start; z-index: 10; }
        .rank-header { grid-column: span 4; background: #FFF0F0; color: var(--peach-dark); padding: 8px 12px; font-size: 12px; font-weight: 900; border-radius: 8px; margin: 15px 0 5px 0; border-left: 5px solid var(--peach-primary); }
        .skill-icon-btn { width: 55px; height: 55px; background: white; border: 3px solid #EEE; border-radius: 10px; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
        .skill-icon-btn img { width: 40px; height: 40px; object-fit: contain; }
        .skill-icon-btn.active { border-color: var(--peach-primary); background: #FFF9F9; transform: scale(1.1); }

        /* --- 右側：詳細區 --- */
        .skill-detail-side { flex: 1; position: relative; padding: 40px 60px; display: flex; flex-direction: column; overflow: hidden; }

        .detail-top-flex { display: flex; justify-content: space-between; align-items: flex-start; z-index: 30; gap: 40px; }

        .skill-title-block { display: flex; align-items: flex-start; gap: 20px; flex: 1; }
        .big-skill-icon { width: 100px; height: 100px; object-fit: contain; flex-shrink: 0; }
        .skill-name-wrap { display: flex; flex-direction: column; gap: 5px; }
        .job-name-display { font-size: 16px; font-weight: 800; color: #BBB; margin: 0; }
        .skill-name-display { font-size: 48px; font-weight: 1000; color: var(--peach-dark); margin: 0; line-height: 1.1; }
        .skill-tags { display: flex; gap: 8px; margin-top: 10px; }
        .info-tag { background: #FDECEC; border: 1px solid #FFD5D5; padding: 4px 14px; border-radius: 100px; font-size: 13px; font-weight: 900; color: #ff8b94; }

        .skill-desc-block { flex: 0 0 45%; font-size: 20px; font-weight: 800; color: #444; line-height: 1.7; white-space: pre-line; background: rgba(255, 255, 255, 0.7); padding: 0px 20px 20px 20px; margin-top: 0; border-radius: 15px; z-index: 30; }
        .effect-highlight { display: block; margin-top: 20px; color: var(--peach-dark); font-size: 22px; border-top: 2px dashed var(--peach-border); padding-top: 15px; }

        /* 職業大立繪 (底部置中) */
        .job-portrait-container { position: absolute; bottom: 0; right: 0; left: 0; height: 680px; z-index: 1; display: flex; justify-content: center; align-items: flex-end; pointer-events: none; }
        .job-watermark { max-width: 100%; max-height: 100%; object-fit: contain; opacity: 0; transition: 0.8s ease-out; transform: translateY(30px); }
        .job-watermark.loaded { opacity: 1; transform: translateY(0); }

        /* 底部列表 */
        .avatar-bar { background: white; padding: 25px 0; display: flex; justify-content: center; gap: 30px; border-top: 3.5px solid var(--peach-border); z-index: 100; overflow-x: auto; }
        .a-node { text-align: center; cursor: pointer; width: 90px; transition: 0.3s; flex-shrink: 0; }
        .a-circle { width: 70px; height: 70px; border-radius: 50%; background: #f9f9f9; border: 3px solid white; box-shadow: 0 5px 15px rgba(0,0,0,0.06); margin: 0 auto 10px; background-size: cover; background-position: center; transition: 0.3s; }
        .a-node.active .a-circle { border-color: var(--peach-primary); transform: scale(1.15) translateY(-8px); box-shadow: 0 10px 20px rgba(255, 183, 178, 0.4); }
        .a-node span { font-weight: 800; color: #888; font-size: 13px; }

        /* --- 頁尾貼齊底部設定 --- */
        footer { 
            background: #111; 
            color: rgba(255,255,255,0.4); 
            text-align: center; 
            padding: 35px 20px; 
            font-size: 14px; 
            font-weight: 700; 
            border-top: 5px solid var(--peach-primary);
            margin-top: auto; /* 重要：自動推到最下方 */
        }

/* --- ?? 手機版完全修復與優化 (立繪背景版) --- */
        @media (max-width: 768px) {
            header { padding: 0 20px; }
            .logo img { height: 50px; }
            .menu-toggle { display: block; }
            
            nav { 
                display: none; width: 100%; top: 80px; left: 0; transform: none; 
                background: white; flex-direction: column; box-shadow: 0 10px 20px rgba(0,0,0,0.1); 
                z-index: 10001;
            }
            nav.active { display: flex; }
            .menu-item > a { display: block; padding: 15px; text-align: center; border-bottom: 1px solid #eee; }

            .wide-title-box { margin: 40px 0 30px; }
            .wide-title-box h2 { font-size: 26px; letter-spacing: 2px; }

            .job-wide-box { border-radius: 20px; border-width: 4px; width: 95%; overflow: visible; }
            .tabs-container { justify-content: flex-start; padding: 10px; background: #FFF0F0; }
            .t-btn { padding: 8px 20px; font-size: 15px; }

            /* 內容區域改為垂直排列 */
            .content-area { flex-direction: column; min-height: auto; }

            /* 左側技能選擇區：改為 5 欄 */
            .skill-picker-side { 
                width: 100%; 
                grid-template-columns: repeat(5, 1fr); 
                border-right: none; 
                border-bottom: 2px solid #F0F0F0;
                padding: 15px; 
                box-sizing: border-box;
                z-index: 10;
            }
            
            /* 修正標題橫跨整排 */
            .rank-header { 
                grid-column: 1 / -1; 
                margin: 10px 0 5px 0;
                font-size: 13px;
            }

            .skill-icon-btn { width: 50px; height: 50px; border-width: 2px; }
            .skill-icon-btn img { width: 35px; height: 35px; }

            /* 右側詳細資訊區：設定相對定位基準 */
            .skill-detail-side { 
                padding: 30px 15px 100px 15px; /* 增加底部 Padding 防止被擋字 */
                position: relative; 
                background: #fff;
                min-height: 450px;
                overflow: visible;
            }

            .detail-top-flex { 
                flex-direction: column; 
                text-align: center; 
                align-items: center; 
                gap: 20px; 
                position: relative; 
                z-index: 5; /* 確保文字在圖片上方 */
            }
            
            .skill-title-block { flex-direction: column; align-items: center; width: 100%; }
            .big-skill-icon { width: 80px; height: 80px; }
            .skill-name-display { font-size: 32px; word-break: break-all; margin: 10px 0; }
            .skill-tags { justify-content: center; flex-wrap: wrap; gap: 5px; }

            /* 關鍵：技能說明框透明化，讓立繪透出來 */
            .skill-desc-block { 
                width: 100%; 
                font-size: 16px; 
                background: rgba(255, 255, 255, 0.65); /* 半透明背景 */
                backdrop-filter: blur(3px); /* 毛玻璃質感，文字更清晰 */
                padding: 20px; 
                border-radius: 15px;
                text-align: left; 
                box-sizing: border-box;
                border: 1px solid rgba(255, 213, 213, 0.3);
                box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            }

            /* ?? 修正職業大立繪：背景浮水印效果 */
            .job-portrait-container { 
                position: absolute; 
                top: 50%; /* 垂直置中 */
                left: 50%;
                transform: translate(-50%, -50%); /* 完美居中 */
                width: 100%;
                height: 80%; 
                opacity: 0.3; /* 調淡避免干擾閱讀 */
                z-index: 1; /* 放在文字下層 */
                display: flex;
                justify-content: center;
                align-items: center;
                pointer-events: none; /* 確保不影響點擊 */
            }
            .job-watermark { 
                max-width: 90%; 
                max-height: 100%; 
                object-fit: contain; 
            }

            /* 底部職業切換清單 */
            .avatar-bar { 
                padding: 15px 0; 
                gap: 15px; 
                background: #fff;
                position: relative;
                z-index: 10;
            }
            .a-circle { width: 55px; height: 55px; }
            .a-node span { font-size: 12px; }
        }