/* *******************************************************
* 파일명 : main.css
* 작성자 : 이윤
* 작성일 : 25-12-07
* 설  명 : index파일 (메인페이지에서만 호출하는 css
           메인페이지 (index)의 스타일이 이 페이지에서 선언됨 (header/footer)
           default.css (태그의 초기화 - 브라우저 스타일 제거)
           common.css (wrapper, blind 처럼 모든 페이지에서 반복되는 기본 스타일 - 변수도 여기서 선언)
           - 변수도 여기서 선언, 변수가 너무 많으면 var이라는 파일을 분리하기도 함
           layout.css (문서의 구조에 영향을 끼치는 요소 - header/footer가 들어감)
**********************************************************/

@import url(default.css);
@import url(font.css); /* cdn 방식은 외부에서 가져오는 방식이기 때문에 없어지면 연결 안됨 */
@import url(common.css);
@import url(layout.css);

/* Fullpage Section */
.section {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #3B2F2F;
    background-color: #FBF7EF;
}

/* MAIN */

.main {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../images/main.jpg);
}

.main h1 {
    font-size: 80px;
    font-weight: 700;
    line-height: 1.3;
}

.main_txt {
    margin-top: 30px;
    font-size: 20px;
    line-height: 1.5;
}

/* ABOUT */
.about h2 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 16px;
}

.about_wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 80px;
    /* margin-top: 60px; */
}

/* 왼쪽 영역 */
.left_area {
    width: 50%;
}

.profile_img {
    width: 321px;
    height: 404px;
    background-image: url(../images/취업사진2.jpg);
    background-size: cover;
    background-position: center; 
    background-repeat: no-repeat;
    margin-bottom: 31px;
}

.info_box ul li {
    display: flex;
    gap: 15px;
    /* margin-bottom: 6px; */
}

.info_box ul li strong {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    width: 89px;
}
.info_box ul li p {
    display: block;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    padding-top: 5px;
}

/* 오른쪽 영역 */
.right_area {
    width: 50%;
}

.edu_box .row,
.work_box .row {
    display: flex;
    align-items: flex-start;
    gap: 28px; /* 날짜와 텍스트 간 간격 */
    margin-bottom: 6px;
    padding-left: 23px;
}

.sub_tit {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 17px;
}

.edu_box .row .date {
    width: 79px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
}

.work_box .row .date {
    width: 188px; /* 날짜 영역 고정폭 */
    flex-shrink: 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
}

.text {
    flex: 1;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
}

.indent_row .date {
    visibility: hidden; /* 날짜 칸을 맞추되 화면에는 보이지 않게 */
}

.mt40 { margin-top: 40px; }

.indent {
    margin-left: 75px;
}


/* 스킬 아이콘 정렬 */
.skill_list {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4개씩 정렬 */
    gap: 30px 40px; /* 행/열 간격 */
    width: 100%;
    max-width: 400px; /* 필요하면 조절 */
    padding-left: 23px;
}

.skill_list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.skill_list img {
    width: 40px;
    height: 40px;
    margin-bottom: 6px;
}


/* PROJECT COMMON */

.project h2 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.5;
}

.project h3 {
    font-size: 50px;
    font-weight: 700;
    line-height: 1.5;
    margin-top: 20px;
}

.btn_pf {
    display: inline-block;
    margin: 30px 0;
    padding: 14px 25px 12px 25px;
    font-size: 20px;
    font-weight: 700;
    border-radius: 50px;
    background: #D9D9D9;
    color: #3B2F2F;
    text-decoration: none;
    transition: 0.5s;
}

.btn_pf:hover {
    background: #4000FF;
    color: #fff;
}

.prj_sub {
    font-size: 32px;
    font-weight: 700;
}

.prj_desc {
    margin-top: 20px;
    font-size: 24px;
    line-height: 1.6;
    max-width: 900px;
}

.prj_info {
    margin-top: 30px;
    font-size: 24px;
}

.prj_info li {
    display: flex;
    gap: 26px;
    margin-bottom: 6px;
}

.prj_info strong {
    font-weight: 700;
    width: 89px; /* label width */
    flex-shrink: 0;
}

.prj_info span {
    font-weight: 400;
    line-height: 1.5;
}

.project_inner {
    display: flex;
    justify-content: space-between;
    gap: 110px; /* 요청값 */
}

.project_inner .left_area {
    width: calc(100% - 535px); /* 오른쪽 영역 제외한 너비 */
}

.project_inner .right_area {
    width: 535px; 
    position: relative;
}

.img_big {
    position: relative;
    float: right;
}

.img_big img {
    display: block;
    width: 250px;
    height: 730px;
    object-fit: cover;
    filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, .25));
}

.before-link-sehwa {
    content: "";
    position: absolute;
    left: -79px;
    top: 70px;
    width: 118px;
    height: 597px;
    background: url(../images/sehwa_mo.jpg) no-repeat center / cover;
    z-index: 2;
    filter: drop-shadow(8px 8px 10px rgba(0, 0, 0, .25));
}

/* 레이아웃: 이미지(left) + 텍스트(right) */
.section.project[data-anchor="project2"] .wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 110px;
}

/* 왼쪽 이미지 영역 */
.section.project[data-anchor="project2"] .left_area {
    width: calc(100% - 725px);
}

/* PROJECT 02 – 큰 이미지 영역 */
.section.project[data-anchor="project2"] .img_big {
    float: left;
    position: relative;
    display: flex;
    justify-content: flex-start; /* 왼쪽 정렬 */
}

/* 큰 이미지 */
.section.project[data-anchor="project2"] .img_big img {
    width: 284px;
    height: 730px;
    object-fit: cover;
}

/* 작은 이미지 클릭 가능 overlay (before 대체) */
.section.project[data-anchor="project2"] .before-link-kei {
    position: absolute;
    left: 216px;
    bottom: 60px;
    width: 153px;
    height: 597px;
    background: url("../images/KEI_mo.jpg") no-repeat center/cover;
    display: block;
    z-index: 2;
    filter: drop-shadow(8px 8px 10px rgba(0, 0, 0, .25));
}
/* 오른쪽 텍스트 영역 */
.section.project[data-anchor="project2"] .right_area {
    width: 725px;
}

/* prj_info (ul li) */
.section.project[data-anchor="project2"] .prj_info {
    margin-top: 30px;
    font-size: 24px;
    padding: 0;
}

.section.project[data-anchor="project2"] .prj_info li {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
}

.section.project[data-anchor="project2"] .prj_info strong {
    width: 100px;
    font-weight: 700;
}

.section.project[data-anchor="project2"] .prj_info span {
    flex: 1;
}

/* CONTACT */
.contact{
    text-align: center;
}

.contact h2 {
    font-size: 40px;
    font-weight: 700;
}

.contact .email {
    font-size: 90px;
    font-weight: 700;
    margin: 30px 0;
}

.contact .ct_txt {
    font-size: 24px;
    margin-bottom: 30px;
}