/* =====================================
AI SKIN DIAGNOSIS
STYLE.CSS v6.1
===================================== */


*{
    box-sizing:border-box;
}



body{

    margin:0;

    background:#f5f6f8;

    font-family:

    "Pretendard",
    "Noto Sans KR",
    sans-serif;

    color:#111;

}





.container{

    max-width:900px;

    margin:0 auto;

    padding:50px 20px;

}





/* =====================================
INTRO
===================================== */
/* =====================================
CIVASAN LOGO
===================================== */


.brand-logo{

    width:170px;

    height:auto;

    display:block;

    margin:0 auto 40px;

}



.title{

    text-align:center;

    font-size:40px;

    font-weight:700;

    letter-spacing:-1px;

}



.subtitle{

    text-align:center;

    color:#777;

    line-height:1.6;

    margin-bottom:40px;

}





/* =====================================
QUESTION
===================================== */


#question{

    background:#fff;

    border:1px solid #e8e8e8;

    border-radius:22px;

    padding:45px 35px;

    margin-bottom:25px;

}





#answers{


    display:flex;


    flex-direction:column;


    gap:15px;


    margin-top:25px;


}




#answers button{


    background:white;


    border:1px solid #ddd;


    padding:18px;


    border-radius:15px;


    cursor:pointer;


    font-size:16px;


    transition:.3s;


}




#answers button:hover{


    background:#111;


    color:white;


}






/* =====================================
RESULT AREA
===================================== */


#result{


    margin-top:50px;


}





/* AI 피부 분석 결과 */


.result-header{


    text-align:center;


    padding-bottom:40px;


    border-bottom:1px solid #ddd;


}




.result-header small{


    display:block;


    text-align:center;


    font-size:11px;


    letter-spacing:4px;


    color:#888;


}





.result-header h2{


    line-height:1.4;

    
    text-align:center;


    font-size:36px;


    margin:18px 0;


    letter-spacing:-1px;


}





.result-header p{


    text-align:center;


    font-size:21px;


    font-weight:600;


    line-height:1.6;


}






/* =====================================
SECTION
===================================== */


.result-section{


    background:white;


    margin-top:35px;


    padding:40px;


    border-radius:28px;


    border:1px solid #e5e5e5;


}






.section-title{


    text-align:center;


    margin-bottom:35px;


}




.section-title small{


    display:block;


    text-align:center;


    font-size:11px;


    letter-spacing:4px;


    color:#999;


}




.section-title h3{


    text-align:center;


    font-size:26px;


    margin-top:12px;


    letter-spacing:-1px;


}






/* =====================================
SKIN GRAPH
===================================== */


.analysis-item{


    margin-top:25px;


}




.analysis-title{


    display:flex;


    justify-content:space-between;


    align-items:center;


    margin-bottom:10px;


}





.analysis-title span{


    font-size:15px;


}



.analysis-title strong{


    font-size:18px;


}






.analysis-bar{


    margin-top:10px;
    

    width:100%;


    height:14px;


    background:#ededed;


    border-radius:20px;


    overflow:hidden;


}





.analysis-progress{


    height:100%;


    background:

    linear-gradient(
    90deg,
    #111,
    #777
    );


    border-radius:20px;


    transition:1s;


}








/* =====================================
PRODUCT RECOMMEND
===================================== */


.recommend-grid{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:25px;


}





.recommend-card{


    background:white;


    border-radius:25px;


    border:1px solid #e5e5e5;


    overflow:hidden;


    position:relative;


    transition:.3s;


}





.recommend-card:hover{


    transform:translateY(-8px);


    box-shadow:

    0 20px 40px rgba(0,0,0,.08);


}






.rank{


    position:absolute;


    top:15px;


    left:15px;


    width:38px;


    height:38px;


    border-radius:50%;


    background:#111;


    color:white;


    display:flex;


    align-items:center;


    justify-content:center;


    z-index:2;


}






.product-image{


    height:270px;


    background:#fff;


    display:flex;


    align-items:center;


    justify-content:center;


}





.product-image img{


    width:90%;


    height:90%;


    object-fit:contain;


}






.product-info{


    padding:25px;


    text-align:left;


    border-top:1px solid #eee;


}





.product-info span{


    font-size:12px;


    color:#999;


    letter-spacing:2px;


}





.product-info h3{


    font-size:20px;


    line-height:1.4;


}





.product-info p{


    color:#666;


    font-size:14px;


    line-height:1.7;


}






.recommend-tag{


    margin-top:20px;


    padding:15px;


    background:#f5f5f5;


    border-radius:15px;


    font-size:13px;


    line-height:1.5;


}







/* =====================================
MOBILE
===================================== */


@media(max-width:800px){


    .container{

        padding:30px 15px;

    }



    .recommend-grid{


        grid-template-columns:1fr;


    }



    .result-section{


        padding:25px;


    }



    .result-header h2{


        font-size:30px;


    }


}

/* =========================================================

   AI SKIN DIAGNOSIS RESULT DESIGN
   STYLE UPDATE V4.1

========================================================= */



/* =========================================================
   RESULT AREA
========================================================= */


#result {

    width:100%;

    margin-top:80px;

}





/* =========================================================
   RESULT TITLE COMMON

   피부 고민 분석
   맞춤 추천 제품 TOP 3

========================================================= */


#result h2,
#result h3,
.result-title,
.analysis-title,
.recommend-title {


    width:100%;

    text-align:center !important;

    font-size:28px !important;

    font-weight:700;

    line-height:1.4;

    letter-spacing:-0.04em;

    color:#222;

    margin-bottom:40px;


}







/* =========================================================
   피부 고민 분석 영역
========================================================= */


.skin-analysis,
.analysis-area {


    width:100%;

    padding-top:40px;


}






/* =========================================================
   그래프 BAR

   기존 형태 유지
   검정 → 블루 그라데이션 변경

========================================================= */



.analysis-bar,
.bar,
.bar-fill,
.graph-bar,
.chart-bar {

    background: linear-gradient(
        90deg,
        #2491e9 0%,
        #2491e9 45%,
        #111111 100%
    ) !important;

}





/* 그래프 배경 BAR */

.analysis-track,
.bar-background,
.progress-background {


    background:#f1f3f5;


    border-radius:999px;


}






/* 그래프 항목 간격 */

.analysis-item,
.graph-item {


    margin-bottom:24px;


}







/* 퍼센트 표시 */

.analysis-percent,
.percent {


    color:#2491e9;

    font-size:16px;

    font-weight:700;


}








/* =========================================================
   맞춤 추천 제품 TOP 3 영역

   위쪽 공간 + 구분선

========================================================= */


.recommend-products,
.recommend-section,
.product-recommend {


    margin-top:100px !important;


    padding-top:60px !important;


    border-top:

    1px solid #dddddd;



}








/* =========================================================
   TOP3 TITLE

========================================================= */


.recommend-products h2,
.recommend-section h2,
.product-recommend h2 {


    text-align:center !important;


    font-size:28px !important;


    font-weight:700;


    color:#222;


    margin-bottom:45px;


}







/* =========================================================
   PRODUCT CARD

   이미지 중심 레이아웃

========================================================= */


.product-list,
.products {


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:25px;


}






.product-card {


    background:#fff;


    border-radius:20px;


    overflow:hidden;


    text-align:center;


}






.product-card img {


    width:100%;


    display:block;


    border-radius:20px;


}







.product-name {


    margin-top:18px;


    font-size:17px;


    font-weight:600;


    color:#222;


}








/* =========================================================
   전체 구분 디자인

========================================================= */


#result section + section {


    margin-top:100px;


    padding-top:60px;


    border-top:1px solid #eeeeee;


}







/* =========================================================
   MOBILE

========================================================= */


@media(max-width:768px){


    #result h2,
    #result h3,
    .result-title,
    .analysis-title,
    .recommend-title {


        font-size:22px !important;


    }




    .recommend-products,
    .recommend-section,
    .product-recommend {


        margin-top:70px !important;


        padding-top:40px !important;


    }



    .product-list,
    .products {


        grid-template-columns:1fr;


    }


}

.skin-summary-card{

    background:transparent;

    border:none;

    box-shadow:none;

    border-radius:0;

    padding:10px 20px;

    text-align:center;

}

.skin-summary-title{

    font-size:34px;

    font-weight:700;

    line-height:1.6;

    margin-top:0;

    margin-bottom:0px;

}

.skin-summary-text{

    max-width:620px;

    margin:0 auto;

    line-height:1.8;

    color:#666;

    white-space: pre-line;

}


/* =========================================================
   SKIN RADAR CHART
   AI SKIN BALANCE REPORT
========================================================= */


.radar-container{

    width:100%;

    max-width:520px;

    height:520px;

    margin:0 auto;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

}



#skinRadarChart{

    width:100% !important;

    height:100% !important;

}





/* =========================================================
   RADAR MOBILE
========================================================= */


@media(max-width:768px){


    .radar-container{

        height:350px;

        padding:10px;

    }


}


/* ==========================
   Section Description
========================== */

.section-description{

    text-align:center;

    margin:-12px 0 28px;

    font-size:16px;

    line-height:1.7;

    letter-spacing:-0.2px;

    color:#777;

    font-weight:400;

}

/* =====================================
   AI SUMMARY CARE TAG
===================================== */

.skin-summary-care{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin-top:24px;

}

.care-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    border:1.5px solid #7dc6ff;

    background:#eef8ff;

    color:#2491e9;

    border-radius:999px;

    font-size:14px;

    font-weight:600;

    letter-spacing:-0.2px;

}


.skin-summary-title{

    font-size:23px;

    font-weight:700;

    line-height:1.6;

    text-align:center;

    color:#222;

}

.skin-type{

    color:#2491e9;

    font-weight:800;

}



.summary-divider{

    width:50px;

    height:1px;

    background:#d8d8d8;

    margin:0 auto 35px;

}


/* =========================================================
   RECOMMENDED SOLUTION
   result.js V6.0 연동 추가 스타일

   기존 CSS 수정 없이 파일 맨 아래에 추가
========================================================= */


/* 추천 솔루션 전체 영역 */

#recommend-solution,
.recommend-solution-section{

    width:100%;

    margin:0 0 35px;

}


/* 추천 솔루션 카드 */

.recommend-solution-card{

    width:100%;

    padding:38px 30px;

    background:#f7f9fb;

    border:1px solid #e5e8ec;

    border-radius:22px;

    text-align:center;

}


/* 영문 라벨 */

.solution-label{

    margin:0 0 14px;

    color:#999;

    font-size:11px;

    font-weight:500;

    line-height:1.4;

    letter-spacing:3px;

}


/* 추천 솔루션명 */

.solution-title{

    margin:0;

    color:#222;

    font-size:25px;

    font-weight:700;

    line-height:1.45;

    letter-spacing:-0.8px;

}


/* 솔루션 효과 설명 */

.solution-effect{

    max-width:620px;

    margin:14px auto 0;

    color:#666;

    font-size:15px;

    font-weight:400;

    line-height:1.7;

    letter-spacing:-0.2px;

}


/* 피부 고민 태그 영역 */

.solution-concern-list{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:8px;

    margin-top:22px;

}


/* 피부 고민 태그 */

.solution-concern-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:34px;

    padding:7px 16px;

    background:#eef8ff;

    border:1px solid #9bd4ff;

    border-radius:999px;

    color:#2491e9;

    font-size:13px;

    font-weight:600;

    line-height:1.3;

    letter-spacing:-0.2px;

}


/* =========================================================
   PRODUCT CARD 보완

   긴 제품명이나 효과 문구 때문에
   카드 높이가 불규칙해지는 현상 방지
========================================================= */

.recommend-card{

    display:flex;

    flex-direction:column;

}


.recommend-card .product-info{

    display:flex;

    flex:1;

    flex-direction:column;

}


.recommend-card .product-info h3{

    margin:10px 0 12px;

}


.recommend-card .product-info p{

    margin:0;

}


.recommend-card .recommend-tag{

    margin-top:auto;

    transform:translateY(20px);

    margin-bottom:20px;

}


/* 이미지 오류 발생 시 빈 영역 유지 */

.product-image.image-error::after{

    content:"IMAGE";

    color:#bbb;

    font-size:11px;

    letter-spacing:2px;

}


/* 추천 제품이 없을 때 */

.recommend-empty{

    grid-column:1 / -1;

    padding:50px 20px;

    border:1px solid #e5e5e5;

    border-radius:20px;

    color:#777;

    font-size:15px;

    line-height:1.7;

    text-align:center;

}


/* 결과 오류 카드 */

.result-error-card{

    padding:30px 20px;

}


/* =========================================================
   기존 공통 선택자 충돌 방지

   기존 CSS의 .analysis-title 공통 제목 설정이
   그래프 항목 내부에도 적용되는 현상 방지
========================================================= */

.analysis-item .analysis-title{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin:0 0 10px;

    font-size:inherit !important;

    line-height:normal;

    text-align:left !important;

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

    #recommend-solution,
    .recommend-solution-section{

        margin-bottom:28px;

    }


    .recommend-solution-card{

        padding:30px 20px;

        border-radius:20px;

    }


    .solution-label{

        margin-bottom:12px;

        font-size:10px;

        letter-spacing:2.5px;

    }


    .solution-title{

        font-size:21px;

        line-height:1.5;

    }


    .solution-effect{

        margin-top:12px;

        font-size:14px;

        line-height:1.7;

    }


    .solution-concern-list{

        margin-top:18px;

    }


    .solution-concern-tag{

        min-height:32px;

        padding:6px 14px;

        font-size:12px;

    }


    .recommend-card .recommend-tag{

        transform:none;

        margin-top:20px;

        margin-bottom:0;

    }

}

/* ==============================
   Progress
============================== */

.progress-section{

    margin-bottom:40px;

}

.progress-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:14px;

}

.question-number{

    font-size:15px;

    font-weight:600;

    color:#7b6d62;

}

.progress-bar{

    width:100%;

    height:5px;

    background:#e5e7eb;

    border-radius:999px;

    overflow:hidden;

}

.progress-fill{

    width:0;

    height:100%;

    background:linear-gradient(
        90deg,
        #2491e9 0%,
        #2491e9 70%,
        #111111 100%
    );

    border-radius:999px;

    transition:width .35s ease;

}

/* ==============================
   Previous Button
============================== */

.prev-button{

    border:none;

    background:transparent;

    padding:0;

    color:#777;

    font-size:15px;

    font-weight:500;

    cursor:pointer;

    transition:.25s;

}

.prev-button:hover{

    color:#2f8de4;

}

.prev-button.hide{

    display:none;

}

/* ==============================
   Question Title
============================== */

.question-title{

    margin:0;

    text-align:center;

    font-size:20px;

    font-weight:700;

    line-height:1.6;

    letter-spacing:-0.4px;

    color:#111;

}