/* 모바일 기준 w440 */
html {scroll-behavior:smooth;} /* 스크롤 애니메이션 효과 */

/* 스크롤 디자인 */
/* Firefox */
html {scrollbar-width: 10px;;scrollbar-color: #006b50 #ffffff;}
/* Opera */
html::-o-scrollbar {width: 10px;}
html::-o-scrollbar-thumb {background-color: #006b50;border-radius: 5px;}
/* Chrome, Safari, Edge 등 웹킷 기반 브라우저 */
::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);}
::-webkit-scrollbar-thumb {background-color: #006b50;border-radius: 5px;}

body {background-color: #222;}
#wrap {
    /* width:440px; */
    min-width:330px; 
    /* max-width:440px; */
    box-shadow:0 10px 10px rgba(0,0,0,0.3);
    background-color:#fff;
    /* overflow-x: hidden; */
    margin:0 auto;
    /* height:100vh; */
    padding: 0 15px;
} /* 디자인 기준 크기 */
#wrap .info,
#wrap .project_wrap .project {
    max-width:1400px;
    margin: 0 auto;
}
/* ====================== 1. intro */
#wrap .intro {
    height:100vh;
    background:linear-gradient(#FBE5FF, #FFFFFF, #ACF9FF);
    display: flex; flex-flow:row nowrap;
    justify-content: center; align-items: center;
}
#wrap .intro h1 {}
#wrap .intro h1 span {
    display: block;
    text-align: center;
    font-size:1.38rem;
    line-height: 150%;
}
#wrap .intro h1 span img {
    padding-top: 30px;
}
#wrap .intro h1 span:nth-child(1) {}
#wrap .intro h1 span:nth-child(2) {}
#wrap .intro h1 .name {}
/* ====================== 2. info */
#wrap > .info {
    background-color: yellowgreen;
    padding:30px 0q;
    /* height: 100vh; */
    /* display: flex; */
    gap:10px;
    flex-flow:column nowrap;
    align-items: center;
    justify-content: center
    
}
#wrap .info .profile {
    height:100%;
    background-color: yellow;
    text-align: center;
    padding:50px 0;
}
#wrap .info .profile .photo {
    width:194px;
    height:215px;
    border-radius:10px;
    background-color:#D9D9D9;

    display:flex;
    justify-content:center;
    align-items:center;

    margin:0 auto
}
#wrap .info .profile .photo img {width:auto;}
#wrap .info .profile .me {
    padding:20px 0;
    display:flex;flex-flow:row wrap;
    justify-content:space-around;
    background-color: #006b50;
}
#wrap .info .profile .me li {
    margin:0 0 15px;
    text-align: center;
    width: 100%;
}
#wrap .info .profile .me li:nth-child(1) {text-align: right;}
#wrap .info .profile .me li:nth-child(2) {text-align: left;}
#wrap .info .profile .me li:nth-child(1),
#wrap .info .profile .me li:nth-child(2) {width: 40%;}
#wrap .info .profile .me li a {}
#wrap .info .profile h2 {
    font-size: 1.5rem;
    font-weight: 600;
}
#wrap .info .profile .skill_list {
    display: flex;
    flex-flow:row wrap;
    padding:0 15px;
    justify-content: center; gap:15px;
}
#wrap .info .profile .skill_list p {
    width: calc(100% /6);
    margin:0 0 12px;
}
#wrap .info .profile .skill_list p img {width: 100%;}

#wrap .info .details {display:none;}
#wrap .info .details dl {}
#wrap .info .details dl dt {}
#wrap .info .details dl dd {}
/* ====================== 3. project */
#wrap .project_wrap {
    background-color: violet;
}
#wrap .project_wrap h1 {
    text-align: center;
    font-size:1.5rem;
    font-weight:600;
    padding-bottom:25px;
    margin: auto 0;
}
/* ======================= 공통 프로젝트 선택자 */
#wrap .project_wrap .project {
    background-color: tomato;
    width:calc(100% - 15px);
    margin:0 auto 50px;  overflow: hidden;
    
    /* display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    padding:28px 0; */
} /* 공용 */
#wrap .project_wrap .project .title_thum h2 {
    tab-size: 1.13rem;
    padding-bottom:25px;
}
#wrap .project_wrap .project .title_thum h2 span {
    font-weight:600;
}
#wrap .project_wrap .project .title_thum .mockup {
    background-color:yellowgreen;
    /* text-align: center; */
}
#wrap .project_wrap .project .title_thum .mockup img {
    width: 410px;
    height:auto;
    position: relative;
}
#wrap .project_wrap .project .details {

}
#wrap .project_wrap .project .details .produce_info {
    padding:24px 0;

    background-color: yellow;
}
#wrap .project_wrap .project .details .produce_info li::before {
    content: '';
    display: block;
    width:3px;
    height:3px;
    position: absolute; left:0; top:50%; transform:translateY(-50%);
    border-radius:4px;
    background-color: #222;
}
#wrap .project_wrap .project .details .produce_info li:nth-child(3)::before {top:20%}
#wrap .project_wrap .project .details .produce_info li {
    position: relative;
    padding-left: 15px;
    margin-bottom:5px;
}
#wrap .project_wrap .project .details .produce_info li,
#wrap .project_wrap .project .details .plan {
    font-size: 0.88rem;
    line-height:1.5;
}
#wrap .project_wrap .project .details .plan {
    position: relative;
}
#wrap .project_wrap .project .details .link {
    background-color: tan;
    text-align: left;
    padding:30px 0;
}
#wrap .project_wrap .project .details .link a {}
#wrap .project_wrap .project .details .link .proposal {
    background-color: rgb(255, 201, 242);
    margin-right: 15px;
}
#wrap .project_wrap .project .details .link .proposal:hover {color: #fff; background-color:#f991c7;}
#wrap .project_wrap .project .details .link .prototype {
    background-color: rgb(204, 240, 255);
}
#wrap .project_wrap .project .details .link .prototype:hover {color: #fff; background-color:#a3c6fd;}
#wrap .project_wrap .project .details .link .proposal,
#wrap .project_wrap .project .details .link .prototype {
    border-radius:5px;
    font-size: 0.88rem;
    padding:8.5px 27px;
    text-align: center;
}

/* ======================= 개별 프로젝트 선택자 */
#wrap .project_wrap .project1{} /* 개별 */
#wrap .project_wrap .project1 .title_thum h2 {}
#wrap .project_wrap .project1 .title_thum h2 span {}
#wrap .project_wrap .project1 .title_thum .mockup {}
#wrap .project_wrap .project1 .title_thum .mockup img {}
#wrap .project_wrap .project1 .details .info {}
#wrap .project_wrap .project1 .details .info li {}
#wrap .project_wrap .project1 .details .plan {}
#wrap .project_wrap .project1 .details .link {}
#wrap .project_wrap .project1 .details .link a {}
#wrap .project_wrap .project1 .details .link .proposal {}
#wrap .project_wrap .project1 .details .link .prototype {}

/* ========================================== 그래픽 디자인 프로젝트 */
/* #wrap .project_wrap h1 {} // 공통 선택자가 있어 생략 */
#wrap .project_wrap h1+p {
    text-align: center;
    font-size: 0.88rem;
    margin-bottom:40px;
}
#wrap .project_wrap .graphic_wrap {
    /* padding:0 15px; */
    overflow: hidden;
    width:calc(100% - 30px);
    margin: 0 auto;
}
#wrap .project_wrap .graphic_wrap .graphic_container {
    display: flex;
    gap: 20px;
    flex-flow:row nowrap;
    width:max-content;
}
#wrap .project_wrap .graphic_wrap .graphic_container a {
    width:123px;height:150px;
    background-color:#eee;
    overflow: hidden;
    transition:transform 0.5s;
}
#wrap .project_wrap .graphic_wrap .graphic_container a:hover {
    transform: scale(105%);
}
#wrap .project_wrap .graphic_wrap .graphic_container a img {width:100%;}
/* ---------------------------------------------------- (위) 그래픽 이미지 클릭 시 실행 되는 팝업 */
#wrap .project_wrap .graphic_popup_bg {
    position: fixed;
    left: 0;
    top: 0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.5);
    display: none;
    /* display:flex;
    justify-content: center;
    align-items: center; */
}
#wrap .project_wrap .graphic_popup_bg .popup {
    width:80%; height:60vh;background-color: #fff;
    position: absolute;
    left: 50%; top: 50%; transform: translate(-50%,-50%);
    overflow-y:auto;
}
#wrap .project_wrap .graphic_popup_bg .popup img {width: 100%;
}