/* ========================================
   性格タイプ関連カラー専用スタイル
   軸馬先生の性格タイプ個人化システム用
   ======================================== */

/* ===== 性格タイプ別カラー適用 ===== */

/* 分析者（NT型）- インディゴ系 */
.mbti-analyst,
.user-type-nt {
    color: var(--mbti-analyst) !important;
}

.mbti-analyst-bg,
.user-type-nt-bg {
    background-color: var(--mbti-analyst) !important;
    color: var(--jikuma-white) !important;
}

.mbti-analyst-badge,
.user-type-nt-badge {
    background-color: var(--mbti-analyst-bg);
    color: var(--mbti-analyst);
    border: 1px solid var(--mbti-analyst);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* 外交官（NF型）- パープル系 */
.mbti-diplomat,
.user-type-nf {
    color: var(--mbti-diplomat) !important;
}

.mbti-diplomat-bg,
.user-type-nf-bg {
    background-color: var(--mbti-diplomat) !important;
    color: var(--jikuma-white) !important;
}

.mbti-diplomat-badge,
.user-type-nf-badge {
    background-color: var(--mbti-diplomat-bg);
    color: var(--mbti-diplomat);
    border: 1px solid var(--mbti-diplomat);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* 番人（SJ型）- グリーン系 */
.mbti-sentinel,
.user-type-sj {
    color: var(--mbti-sentinel) !important;
}

.mbti-sentinel-bg,
.user-type-sj-bg {
    background-color: var(--mbti-sentinel) !important;
    color: var(--jikuma-white) !important;
}

.mbti-sentinel-badge,
.user-type-sj-badge {
    background-color: var(--mbti-sentinel-bg);
    color: var(--mbti-sentinel);
    border: 1px solid var(--mbti-sentinel);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* 探検家（SP型）- レッド系 */
.mbti-explorer,
.user-type-sp {
    color: var(--mbti-explorer) !important;
}

.mbti-explorer-bg,
.user-type-sp-bg {
    background-color: var(--mbti-explorer) !important;
    color: var(--jikuma-white) !important;
}

.mbti-explorer-badge,
.user-type-sp-badge {
    background-color: var(--mbti-explorer-bg);
    color: var(--mbti-explorer);
    border: 1px solid var(--mbti-explorer);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* ===== 予想関連の性格タイプ適用 ===== */

/* 本命馬の表示 */
.uma-honmei.mbti-analyst { border-left: 4px solid var(--mbti-analyst); }
.uma-honmei.mbti-diplomat { border-left: 4px solid var(--mbti-diplomat); }
.uma-honmei.mbti-sentinel { border-left: 4px solid var(--mbti-sentinel); }
.uma-honmei.mbti-explorer { border-left: 4px solid var(--mbti-explorer); }

/* 対抗馬の表示 */
.uma-taikou.mbti-analyst { border-left: 3px solid var(--mbti-analyst); }
.uma-taikou.mbti-diplomat { border-left: 3px solid var(--mbti-diplomat); }
.uma-taikou.mbti-sentinel { border-left: 3px solid var(--mbti-sentinel); }
.uma-taikou.mbti-explorer { border-left: 3px solid var(--mbti-explorer); }

/* 連下馬の表示 */
.uma-renka.mbti-analyst { border-left: 2px solid var(--mbti-analyst); }
.uma-renka.mbti-diplomat { border-left: 2px solid var(--mbti-diplomat); }
.uma-renka.mbti-sentinel { border-left: 2px solid var(--mbti-sentinel); }
.uma-renka.mbti-explorer { border-left: 2px solid var(--mbti-explorer); }

/* ===== 性格タイプ関連UIコンポーネント ===== */

/* 性格タイプセレクター */
.mbti-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 20px 0;
}

.mbti-option {
    padding: 16px;
    border: 2px solid var(--jikuma-gray-200);
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--jikuma-white);
}

.mbti-option.analyst {
    border-color: var(--mbti-analyst);
}

.mbti-option.analyst:hover,
.mbti-option.analyst.selected {
    background: var(--mbti-analyst-bg);
    border-color: var(--mbti-analyst);
}

.mbti-option.diplomat {
    border-color: var(--mbti-diplomat);
}

.mbti-option.diplomat:hover,
.mbti-option.diplomat.selected {
    background: var(--mbti-diplomat-bg);
    border-color: var(--mbti-diplomat);
}

.mbti-option.sentinel {
    border-color: var(--mbti-sentinel);
}

.mbti-option.sentinel:hover,
.mbti-option.sentinel.selected {
    background: var(--mbti-sentinel-bg);
    border-color: var(--mbti-sentinel);
}

.mbti-option.explorer {
    border-color: var(--mbti-explorer);
}

.mbti-option.explorer:hover,
.mbti-option.explorer.selected {
    background: var(--mbti-explorer-bg);
    border-color: var(--mbti-explorer);
}

/* 性格タイプ結果表示 */
.mbti-result {
    padding: 24px;
    border-radius: 12px;
    margin: 20px 0;
    text-align: center;
}

.mbti-result.analyst {
    background: var(--mbti-analyst-bg);
    border: 2px solid var(--mbti-analyst);
}

.mbti-result.diplomat {
    background: var(--mbti-diplomat-bg);
    border: 2px solid var(--mbti-diplomat);
}

.mbti-result.sentinel {
    background: var(--mbti-sentinel-bg);
    border: 2px solid var(--mbti-sentinel);
}

.mbti-result.explorer {
    background: var(--mbti-explorer-bg);
    border: 2px solid var(--mbti-explorer);
}

.mbti-result-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
}

.mbti-result.analyst .mbti-result-title {
    color: var(--mbti-analyst);
}

.mbti-result.diplomat .mbti-result-title {
    color: var(--mbti-diplomat);
}

.mbti-result.sentinel .mbti-result-title {
    color: var(--mbti-sentinel);
}

.mbti-result.explorer .mbti-result-title {
    color: var(--mbti-explorer);
}

.mbti-result-description {
    font-size: 16px;
    color: var(--jikuma-gray-600);
    line-height: 1.6;
}

/* ===== 個人化された予想コンテンツ ===== */

/* 分析者向けスタイル */
.personalized-content.analyst {
    border-left: 4px solid var(--mbti-analyst);
    background: linear-gradient(135deg, var(--mbti-analyst-bg), var(--jikuma-white));
}

.personalized-content.analyst .content-icon {
    color: var(--mbti-analyst);
}

/* 外交官向けスタイル */
.personalized-content.diplomat {
    border-left: 4px solid var(--mbti-diplomat);
    background: linear-gradient(135deg, var(--mbti-diplomat-bg), var(--jikuma-white));
}

.personalized-content.diplomat .content-icon {
    color: var(--mbti-diplomat);
}

/* 番人向けスタイル */
.personalized-content.sentinel {
    border-left: 4px solid var(--mbti-sentinel);
    background: linear-gradient(135deg, var(--mbti-sentinel-bg), var(--jikuma-white));
}

.personalized-content.sentinel .content-icon {
    color: var(--mbti-sentinel);
}

/* 探検家向けスタイル */
.personalized-content.explorer {
    border-left: 4px solid var(--mbti-explorer);
    background: linear-gradient(135deg, var(--mbti-explorer-bg), var(--jikuma-white));
}

.personalized-content.explorer .content-icon {
    color: var(--mbti-explorer);
}

/* ===== レスポンシブ対応 ===== */
@media (max-width: 768px) {
    .mbti-selector {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .mbti-option {
        padding: 12px;
    }
    
    .mbti-result {
        padding: 16px;
    }
    
    .mbti-result-title {
        font-size: 20px;
    }
    
    .mbti-result-description {
        font-size: 14px;
    }
}