@charset "UTF-8";


/* 레이아웃이 좁아질 때 텍스트와 이미지가 세로로 쌓이도록 보정 */
/* @media only screen and (max-width: 900px) {
    .intro > div { flex-direction: column-reverse; gap: 24px; align-items: center; }
    .intro span {
        width: min(70vw, 420px) !important;
        aspect-ratio: 1 / 1;
    }
    .intro_text { width: calc(100% - 40px); text-align: center; }
} */

/* 아주 작은 화면에서는 이미지 너비를 거의 가득 차게 */
/* @media only screen and (max-width: 420px) {
    .intro span { width: 92vw !important; max-width: none; }
    .intro_text i { font-size: clamp(4.8rem, 10vw, 12rem) !important; }
} */

.footer-left a i { display: none;}

@media only screen and (max-width: 1470px) {
    main, footer { padding: 0 3%; box-sizing: border-box;}
    .intro > div { margin: 120px 0 !important; }
    header { padding: 0 3%; box-sizing: border-box; }

    

}

@media only screen and (max-width: 1444px) {
    .intro_text p, .pdfDownload, .vision p, .skill, .edu p, .exp p, .int_center p, .learning-list span { font-size: 2.3rem !important; }
    .skills-list p { width: 2.3rem !important; height: 2.3rem !important; }
}

@media only screen and (max-width: 1440px) {

    /* responsive: intro image (span) 크기 유연화 */
    .intro span { /* 최소 200px, 최댓값 499px, 기본은 뷰포트 너비의 35% */ width: clamp(200px, 35vw, 499px) !important; /* 높이는 가로 비율을 유지하도록 aspect-ratio 사용 */ aspect-ratio: 1 / 1; height: auto !important; display: inline-block !important; background-size: cover; /* 이미지 잘림 없이 채우기 */ background-position: center; }
    
    .smry_left { width: 66% !important; }

    .smry_right { width: 34% !important; }

    header { width: 100%; }
    .head { width: 100%; }
    
}

@media only screen and (max-width: 1350px) {
    .intro_text h2 {font-size: 4rem !important; }
    .intro_text i {font-size: 11rem !important; }
    .intro_text p {margin-top: 2.5rem !important; }
    .pdfDownload { margin-top: 3.5rem !important; /* width: 100% 제거 */ }
    .box { padding: 30px 32px !important; }
    
    /* .vision의 고정 높이를 제거하고 내용에 따라 자동 조절되도록 변경 */
    /* .vision, .edu, .exp { height: auto !important; } */

    .vision { display: flex !important; justify-content: center; }

    .vision h2{ font-size: 5.2rem !important; }

    .works h2 { font-size: 7.4rem !important; }
    .Skills h3, .edu h3, .exp h3, .int_center h3, .learning h3 { font-size: 2.8rem !important; }
    .intro_text p, .pdfDownload, .vision p, .skill, .edu p, .exp p, .int_center p, .learning-list span { font-size: 2.2rem !important; }
    .skills-list p { width: 2.2rem !important; height: 2.2rem !important; }

    .edu span, .exp span { font-size: 1.8rem !important; }

    .footer-left a, .footer-right p {font-size: 1.8rem !important; margin-right: 40px !important;}
    .footer-right b, .footer-right i {font-size: 2.2rem !important; }
    /* .footer-right i { font-size: 2.2rem; margin-left: 20px;} */
    .bottom_link { padding: 4.6rem 0 !important; }
    address p {font-size: 1.8rem !important; }

    /* box vision의 padding값 반응형으로 바꾸기 */
}

@media only screen and (max-width: 1340px) {
    .works-grid { /* 최대 30px, 최소 10px의 간격을 유지합니다. 그 사이에서는 뷰포트 너비의 2.5% 크기로 유연하게 조절됩니다. */ gap: clamp(10px, 2.5vw, 30px) !important; }
}

@media only screen and (max-width: 1264px) {

    .intro_text h2 {font-size: 3.6rem !important; }
    .intro_text i {font-size: 10rem !important; }
    .intro_text p {margin-top: 2rem !important; }
    .pdfDownload { margin-top: 3rem !important; }

    .vision h2{ font-size: 4.8rem !important; }
    .Skills h3, .edu h3, .exp h3, .int_center h3, .learning h3 { font-size: 2.7rem !important; }
    .intro_text p, .pdfDownload, .vision p, .skill, .edu p, .exp p, .int_center p, .learning-list span { font-size: 2.1rem !important; }
    .skills-list p { width: 2.1rem !important; height: 2.1rem !important; }

    .bottom_link { padding: 4rem 0 !important; }

    .more-btn { font-size: 5.2rem !important; }
}


@media only screen and (max-width: 1122px) {
    .intro > div { width: 100% !important; display: inline-flex !important; /* width: auto !important; */ height: auto !important; margin: 100px 0 !important; gap: clamp(10px, 15%, 300px ); }
    .intro_text { width: 60% !important; }
    /* .intro_text span { display: inline-block !important; } */



    /* summary 레이아웃 변경 */
    .summary-grid { display: unset !important; }
    .smry_left { width: 100% !important; }
    .box-size1 { width: 50% !important; height: 100% !important; }
    .box-size2 { width: 50% !important; height: 100% !important; }
    .smry_right { display: flex !important; width: 100% !important; gap: 20px; margin-top: 20px; }
    .smry_right .box-size3 { width: 100% !important; height: auto !important; }
    .Skills { margin-bottom: 0 !important;}
    .Skills p { display: none !important;}



    .intro > div { margin: 90px 0 !important; }
    .intro_text h2 {font-size: 3.6rem !important; }
    .intro_text i {font-size: 9rem !important; }
    .intro_text p {margin-top: 1.8rem !important; }
}

@media only screen and (max-width: 1056px) {
    .intro_text h2 {font-size: 3.2rem !important; }
    .intro_text i {font-size: 8rem !important; }
    .intro_text p {margin-top: 1.9rem !important; }

    .pdfDownload { margin-top: 3rem !important; }

    .vision h2{ font-size: 4.4rem !important; }
    .Skills h3, .edu h3, .exp h3, .int_center h3, .learning h3 { font-size: 2.4rem !important; }
    .intro_text p, .pdfDownload, .vision p, .skill, .edu p, .exp p, .int_center p, .learning-list span { font-size: 1.9rem !important; }

    .bottom_link { padding: 4rem 0 !important; }

    .more-btn {padding: 20px 40px; font-size: 5rem; }
}

@media only screen and (max-width: 1000px) {
    .bottom_link { display: block !important; }
    .footer-left { margin-bottom: 20px !important; }
}

@media only screen and (max-width: 490px) {
    /* 로고 크기 조절 */
    #header .logo { width: 75px; height: 40px; }
    #header .logo a { mask-repeat: no-repeat; mask-image: url("data:image/svg+xml,%3Csvg width='75' height='40' viewBox='0 0 75 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='15' height='25' fill='%23FFCC00'/%3E%3Crect x='30' width='15' height='25' fill='%23FFCC00'/%3E%3Crect x='15' y='25' width='15' height='15' fill='%23FFCC00'/%3E%3Crect x='45' y='25' width='15' height='15' fill='%23FFCC00'/%3E%3Crect x='60' width='15' height='25' fill='%23FFCC00'/%3E%3Crect y='10' width='45' height='5' fill='%23FFCC00'/%3E%3Crect x='15' y='35' width='45' height='5' fill='%23FFCC00'/%3E%3C/svg%3E%0A");}

    .intro > div { margin: 60px 0 !important; }

    .intro > div { flex-direction: column-reverse; gap: auto; align-items: center; } /* 필요 시 활성화 */
    .intro span { width: min(70vw, 420px) !important; aspect-ratio: 1 / 1; margin-bottom: 40px; }
    .intro_text { width: calc(100% - 40px); text-align: center; }

    .intro_text i { font-size: 7rem !important; }
    .pdfDownload {
        width: 100% !important;   /* 모바일에서 가득 채움 */
        display: inline-flex;
        padding-inline: clamp(12px, 6vw, 24px);
        font-size: clamp(1.6rem, 3.2vw, 2.2rem);
    }

    .vision h2 { font-size: 4rem !important; }
    .works h2 {margin-bottom: 30px !important;}
    .smry_left_bottom { display: unset !important;}
    .box-size1, .box-size2 { width: 100% !important; height: 100% !important; margin-top: 20px;}
    .vision, .exp, .int_center {height: auto !important;}
    .smry_right { flex-direction: column-reverse !important; }

    .works-grid { display: unset !important; }
    .work_left, .work_right { width: 100% !important;  }
    
    .work-info { padding-top: 20px !important;}
    .work-card.flip-card { margin-bottom: 60px !important;}
    .work_left .work-card:last-child { margin-top: 0 !important; }
    .work_right .work-card:last-child { margin: 0 !important; }
    .work_right .work-card:first-child { margin-top: 40px !important;}
    .work-info p { height: auto !important; margin-top: 10px !important; }

    footer { padding-top: 180px !important;}
    .bottom_link { padding: 3rem 0 !important; }
    .footer-left a, .sc_normal, .footer-right p { font-size: 1.6rem !important; }
    .footer-left a, .footer-right p { margin-right: 3rem !important; }
    /* .footer-left a:last-child { margin-right: 0 !important; } */
    .footer-right { justify-content: space-between;}
    .footer-right b, .footer-right i { font-size: 2rem !important; }
    address { padding: 3rem 0 !important; }
}


@media only screen and (max-width: 470px) {
    .footer-left a i { display: inline-block; }
    .sc_normal { display: none; }
}