/* 프로필 그룹 -*/
.profile-group {
    display: flex;
    flex-direction: column;
    align-items: center;      
    gap: 15px; 
    padding: 33px 41px;
    
    width: 100%;
    max-width: 430px;         
    box-sizing: border-box;

    margin: 40px auto 0 25vw; /* 위 40px, 오른쪽 auto, 아래 0, 왼쪽 12vw */
}


.profile-image {
    width: 250px;  
    height: 300px; 
    border-radius: 50%; 
    overflow: hidden;   
}

.profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-title {
    color: #253439;
    text-align: center;
    font-size: 30px; 
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
}

.subtitle {
    color: #B29E84;
    text-align: center;
    font-size: 30px; 
    font-weight: 500;
    margin: 0;
}

/* 인적사항 박스-*/

.personal-info-box{
    position: relative;  /* 세로선 배치의 기준점 */    
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #395742; 
    padding: 40px 0 40px 0;           

    width: 100%;
    max-width: 430px;        
    box-sizing: border-box;

    margin: 0 auto 0 25vw;
}

.vertical-line {
    position: absolute;
    top: 0;                    
    left: 50%;                  
    transform: translateX(-50%);
    
    width: 5px;                
    height: 49px;               
    
    background-color: #B29E84;  
    z-index: 1;
}

.info-timeline {
    display: flex;
    flex-direction: column;   
    align-items: center;      
    gap: 11px;               
    align-self: stretch;      
    position: relative;
    z-index: 2;
    padding-top: 20px;
}

.timeline-item {
    display: flex;
    flex-direction: column;
    align-items: center;    
    gap: 12px;              
    width: 100%;
}

.info-label {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    
    background-color:#D9D9D9;

    color: #253439;           
    
    font-size: 20px;
    font-weight: 700;         
    letter-spacing: -0.02em;
    padding: 2px 18px;
}

.info-value {
    color: #ffffff;           
    font-size: 25px;        
    font-weight: 400;       
    line-height: 1.4;
    text-align: center;      
}

.icon-circle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    
    background-color: #B29E84; 
    width: 32px;              
    height: 32px;
    border-radius: 50%;     
}

.icon-circle svg {
    color: #fff;         
    width: 16px;             
    height: 16px;
}

/* 학력 박스-*/

.education-container{
    display: flex;
    flex-direction: column;
    align-items: flex-start;   
    gap: 15px; 
    padding: 60px 40px 60px 80px;
    background-color: #719E82;
    width: 100%;
    max-width: 488px;         
    box-sizing: border-box;

    margin: 0 auto 0 25vw; 
    transform: translateX(-57px)
}

.education-container:hover {
    background-color: #5d886d; 
    transform: translateX(-57px) translateY(-5px); 
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.education-title{
    color:#fff;
    font-size: 24px;
    font-weight: 700;
}

.education-divider{
    width: 105PX;
    height: 5PX;
    background-color: #FFF;
    flex-shrink: 0;
}

.education-list{
    color: #fff;
    font-size: 20px;
    font-weight: 400;

    list-style-type: disc;
}

.education-list li{
    margin-bottom: 20px;
    line-height: 1.5;
}

/* 자격증, 자기소개 박스-*/

.intro-container{
    background-color:#395742;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 40px 0;
    text-align: center;
    box-sizing: border-box;
    
    position: absolute;
    left: calc(25vw + 430px);
    top: 571px;
    bottom: 40px;
    width: 500px;
}

.cert-section{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
    margin-top: 80px;
}

.cert-title{
    display: inline-block;
    background-color: #D9D9D9;       
    padding: 2px 18px;               
    
    color: #253439;                  
    font-size: 24px;                 
    font-weight: 700;
    margin-left: 80px;
}

.cert-content{
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    margin-left: 80px;
}

.intro-section{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 15%;
    width: 85%;
    box-sizing: border-box;
}

.intro-badge{
    display: inline-block;
    justify-content: center;
    align-items: center;
    background-color: #D9D9D9;
    padding: 2px 18px;

    color: #253439;
    font-size: 24px;
    font-weight: 700;
}

.intro-highlight{
    text-align: left;
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
}

.intro-list{
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;

}

.direction-list{
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
}

/* 성격 박스-*/

.personality-container{
    background-color: #719E82;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 30px 40px 30px;
    box-sizing: border-box;

    width: 420px;
    height: 580px;

    position: absolute;
    left: calc(25vw + 600px);
    top: 80px;
    z-index: 1;
}

.personality-title{
    color: #fff;
    font-size: 24px;
    font-weight: 700;
}

.personality-divider{
    width: 360PX;
    height: 5PX;
    background-color: #FFF;
    flex-shrink: 0;
}

.mbti-row{
    display:flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.mbti-label, .mbti-value{
    color: #fff;
    font-size: 24px;
    font-weight: 400;
}

.personality-list{
    list-style-type: none;
    padding:0%;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.personality-item{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

.trait-name{
    color: #fff;
    font-size: 20px;
    font-weight: 400;
}

.progress-wrapper{
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.progress-bar{
    background-color: #253439;
    position: relative;
    height: 12px;
    border-radius: 4px;
    flex-grow: 1;
    overflow: hidden;
}

/* 진짜 차오르는 흰색 게이지 선 */
.progress-bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: #ffffff;
    border-radius: 4px;
}

/* 퍼센트 채우기 공식을 적용합니다 */
.bar-extroversion::before { width: 55%; }
.bar-agreeableness::before { width: 61%; }
.bar-conscientiousness::before { width: 53%; }
.bar-neuroticism::before { width: 58%; }
.bar-openness::before { width: 54%; }

.percentage{
    color: #fff;
    font-size: 20px;
    font-weight: 400;
}