/* 영역별 프로파일 - 2026 Modern Design */
.profile-section { margin-bottom: 2.5rem; }
.profile-row {
    display: flex; align-items: center; gap: 1.25rem;
    padding: 1.25rem 0; border-bottom: 1px solid var(--gray-100);
    transition: all 0.2s ease;
}
.profile-row:hover { background: rgba(27,77,142,0.015); margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; }
.profile-row:last-child { border-bottom: none; }
.profile-label { display: flex; align-items: center; gap: 0.6rem; width: 120px; flex-shrink: 0; }
.profile-icon { font-size: 1.3rem; }
.profile-name { font-weight: 700; font-size: 0.95rem; color: var(--text); }
.profile-bar-wrap { flex: 1; display: flex; align-items: center; gap: 1rem; }
.profile-bar {
    flex: 1; height: 12px; background: var(--gray-100);
    border-radius: 6px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}
.profile-bar-fill {
    height: 100%; border-radius: 6px;
    transition: width 1.2s cubic-bezier(0.4,0,0.2,1);
    background: linear-gradient(90deg, var(--primary), var(--accent));
    box-shadow: 0 0 8px rgba(27,77,142,0.3);
}
.profile-pct { font-size: 0.9rem; font-weight: 800; min-width: 45px; text-align: right; color: var(--text); }
.profile-level {
    font-size: 0.85rem; font-weight: 700; min-width: 65px; text-align: right;
    padding: 4px 10px; border-radius: 12px; background: rgba(27,77,142,0.06); color: var(--primary);
}

/* 추천 + 액션 */
.recommend-section { margin-bottom: 2.5rem; }
.recommend-section h2 { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text); }
.result-actions {
    display: flex; gap: 1.25rem; justify-content: center;
    margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--gray-100);
}

@media (max-width: 640px) {
    .profile-row { flex-wrap: wrap; gap: 0.75rem; padding: 1rem 0; }
    .profile-row:hover { margin: 0; padding-left: 0; padding-right: 0; }
    .profile-label { width: 100%; }
    .profile-level { min-width: auto; }
    .result-actions { flex-direction: column; }
}