/* 
 * GitHub Repository Phishing Alert Appeal & Project Verification
이 페이지는 깃허브에서 발생한 피싱 경고 오탐지(False Positive)를 해명하고, 해당 코드가 순수한 학습 및 포트폴리오용임을 증명하기 위해 작성되었습니다.
This CSS is part of a student project. 
Any resemblance to real-world commercial sites is purely for design practice.
*/

/* index.css */
/* =========================================================== 스크롤바 디자인 */
/* Firefox */
html {scrollbar-width: 30px; scrollbar-color: #222 #888;}
/* Opera */
html::-o-scrollbar {width: 30px;}
html::-o-scrollbar-thumb {background-color: #222;border-radius: 5px;}
/* Chrome, Safari, Edge 등 웹킷 기반 브라우저 */
::-webkit-scrollbar {width: 30px;}
::-webkit-scrollbar-track {box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);}
::-webkit-scrollbar-thumb {background-color: #222;border-radius: 5px;}
/* 모바일 기준 w440 */
html {scroll-behavior: smooth;}/* 스크롤 애니메이션 효과 */
body {
    /* background-color: #222; */
}
#wrap {
    /* width: 440px; *//* 디자인 기준 크기(iphone 17proMax) */
    /* min-width: 1800px; *//* 최소 제한 너비(고정) */
    /* max-width: 440px; *//* 최대 제한 너비(디자인에 따라 다름) */
    /* box-shadow: 0 10px 10px rgba(0,0,0,0.3); */
    /* margin: 0 auto; */
    /* overflow-x: hidden; *//* x축 나간요소와 가로스크롤 숨기기 */
    /* height: 100vh; */
    min-width: 1800px; /* 최소 제한 너비(고정) */
    background-image: url(../images/paper_texture.jpg);
    background-size: contain;
}
/* =========================================================== font */
/* font-페이퍼로지 */
@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}
/* =========================================================== header */
#wrap header {
    position: fixed; left: 0; top: 0; width: 100%;; z-index: 999;
    padding: 0 130px; background: rgba(255, 255, 255, 0.8);
}
#wrap header #gnb {display: inline-block; white-space: nowrap;}
#wrap header #gnb a {
    font-family: 'Paperozi'; font-size: 1rem;
    color: #777; font-weight: 500;
    line-height: 70px; display: inline-block;
    padding: 0 15px; margin-right: 20px;
}
#wrap header #gnb a.active {font-weight: 600; color: #222; border-bottom: 1px solid #555;}
#wrap header #gnb a:hover {font-weight: 600; color: #222;}

/* =========================================================== 공통 디자인 */
/* 폰트 스타일 */
.text_box {display: flex;}
.text_box > p {}
.text_box .text_title {}
.text_box .text_content {font-weight: 300; color: #222; margin-bottom: 20px;}
/* 프로젝트 공통 */
.project_title > h1 {font-family: 'Paperozi'; font-size: 1.5rem;}
/* 메인 공통 패딩 */
#wrap main .web_p_wrap,
#wrap main .works_wrap {min-height: 100vh; padding: 100px 150px;}
/* =========================================================== 1. intro */
#wrap main {}
#wrap main .intro {
    min-height: 100vh;/*  padding: 0 150px; */
    display: flex; flex-flow: column nowrap; justify-content: center;
    position: relative;/* 구분선 부모 */
}
#wrap main .intro::after {/* 구분선 */
    content: ''; width: calc(100% - 300px); height: 1px; background: #ccc;
    position: absolute; bottom: 0; left: 150px;
}
#wrap main .intro .intro_title {position: relative; margin: 0 auto;}
#wrap main .intro .intro_title .year,
#wrap main .intro .intro_title span {font-family: 'Paperozi';}
#wrap main .intro .intro_title .year {
    font-weight: 500; color: #222; position: absolute; top: -60px; left: 0;
    padding: 10px 20px; border-radius: 30px; border: 1px solid #ddd;
}
#wrap main .intro .intro_title span {
    font-weight: 600; font-size: 4.38rem; letter-spacing: 30px;
}
#wrap main .intro .intro_btm {}
#wrap main .intro .intro_btm > p {font-weight: 300; font-size: 1.13rem; letter-spacing: 11%;}
#wrap main .intro .intro_btm > p:first-child {position: absolute; left: 150px; bottom: 70px;}
#wrap main .intro .intro_btm > p:last-child {position: absolute; right: 150px; bottom: 70px;}

/* =========================================================== 2. 프로필 */
#wrap main .profile {
    min-height: 100vh; padding: 150px 150px;
    display: flex; justify-content: space-between;
    position: relative;/* 구분선 부모 */
}
#wrap main .profile::after {/* 구분선 */
    content: ''; width: calc(100% - 300px); height: 1px; background: #ccc;
    position: absolute; bottom: 0; left: 150px;
}
/* left - 이미지+텍스트 */
#wrap main .profile .info {display: flex; flex-flow: column nowrap; justify-content: space-between;}
#wrap main .profile .info .photo_wrap {}
#wrap main .profile .info .photo_wrap .photo {width: 160px; margin-bottom: 20px;}
#wrap main .profile .info .photo_wrap .photo img {width: 100%;}
#wrap main .profile .info .photo_wrap .point_text,
#wrap main .profile .info .photo_wrap .point_text span {font-size: 1.25rem; line-height: 2; color: #222;}
#wrap main .profile .info .photo_wrap .point_text {font-weight: 300;}
#wrap main .profile .info .photo_wrap .point_text span {font-weight: 600;}
/* left - 인적정보 */
#wrap main .profile .info .me {}
#wrap main .profile .info .me .text_box {}
#wrap main .profile .info .me .text_box > p {}
#wrap main .profile .info .me .text_box .text_title {width: 80px;}
#wrap main .profile .info .me .text_box .text_content {}
#wrap main .profile .info .me .text_box:last-child .text_content {margin: 0;}/* E-mail margin-bottom 삭제 */
/* right - 디테일 */
#wrap main .profile .details_wrap {
    display: grid; grid-template-columns: 1fr 350px;
    grid-template-areas: 
        "experience certification"
        "education certification"
        "skill skill"
    ;
    align-content: space-between;
    column-gap: 150px;/* 좌우간격 */
}
#wrap main .profile .details_wrap .details {}
#wrap main .profile .details_wrap .details > h2 {
    font-family: 'Paperozi'; font-size: 1.38rem; font-weight: 600; margin-bottom: 25px;
}
#wrap main .profile .details_wrap .experience .text_box:last-child .text_content {margin: 0;}/* margin-bottom 삭제 */
#wrap main .profile .details_wrap .education .text_box:last-child .text_content {margin: 0;}/* margin-bottom 삭제 */
/* (왼쪽) 경력 */
#wrap main .profile .details_wrap .experience {grid-area: experience;}
/* (오른쪽) 자격증 */
#wrap main .profile .details_wrap .certification {grid-area: certification;}
/* (중간)학력/교육사항 */
#wrap main .profile .details_wrap .education {grid-area: education;}
/* 스킬 */
#wrap main .profile .details_wrap .skill {grid-area: skill;}
#wrap main .profile .details_wrap .details .tools_list {}
#wrap main .profile .details_wrap .details .tools_list p {
    border: 1px solid #999; border-radius: 30px;
    font-weight: 300; padding: 10px 15px; 
}
#wrap main .profile .details_wrap .details .tools_list .tools_top,
#wrap main .profile .details_wrap .details .tools_list .tools_btm {
    display: flex; flex-flow: row nowrap; gap: 10px;
}
#wrap main .profile .details_wrap .details .tools_list .tools_top {margin-bottom: 10px;}
#wrap main .profile .details_wrap .details .tools_list .tools_top > p {text-wrap: nowrap;}
#wrap main .profile .details_wrap .details .tools_list .tools_btm {}
#wrap main .profile .details_wrap .details .tools_list .tools_btm > p {}
/* 개별 타이틀 가로 크기 */
#wrap main .profile .details_wrap .experience .text_box .text_title {width: 180px;}
#wrap main .profile .details_wrap .certification .text_box .text_title {width: 100px;}
#wrap main .profile .details_wrap .education .text_box .text_title {width: 180px;}
/* 개별 자간 조정 */
/* 2017.06 - 2020.09 */
#wrap main .profile .details_wrap .experience .text_box:last-child .text_title {letter-spacing: 0.1px;}
/* 2025.12 - 2026.05 */
#wrap main .profile .details_wrap .education .text_box:nth-child(2) .text_title {letter-spacing: 0.2px;}
/* 2017.02 */
#wrap main .profile .details_wrap .education .text_box:nth-child(5) .text_title {letter-spacing: 0.6px;}

/* =========================================================== 3. 웹 프로젝트 */
#wrap main .web_p_wrap {
    display: flex; align-items: center; justify-content: space-between;
    position: relative;/* 구분선 부모 */
}
#wrap main .web_p_wrap::after {/* 구분선 */
    content: ''; width: calc(100% - 300px); height: 1px; background: #ccc;
    position: absolute; bottom: 0; left: 150px;
}
#wrap main .web_p_wrap .project_title {}
#wrap main .web_p_wrap .project_title > h1 {}
#wrap main .web_p_wrap .project_title > p {margin-top: 30px; line-height: 1.8; text-wrap: nowrap;}

#wrap main .web_p_wrap .web_p_contents {display: flex; gap: 50px;}
#wrap main .web_p_wrap .web_p_contents .web_project {}
#wrap main .web_p_wrap .web_p_contents .web_project .mockup {width: 500px;}
#wrap main .web_p_wrap .web_p_contents .web_project .mockup img {width: 100%; border-radius: 20px;}
#wrap main .web_p_wrap .web_p_contents .web_project .web_text {padding: 0 10px;}
#wrap main .web_p_wrap .web_p_contents .web_project .web_text .web_title {
    display: flex; align-items: end; gap: 15px; margin: 30px 0 40px 0;
}
#wrap main .web_p_wrap .web_p_contents .web_project .web_title > span,
#wrap main .web_p_wrap .web_p_contents .web_project .web_title > h2 {font-family: 'Paperozi';}
#wrap main .web_p_wrap .web_p_contents .web_project .web_title > span {
    color: #777; font-weight: 300; font-size: 1.88rem;
}
#wrap main .web_p_wrap .web_p_contents .web_project .web_text .web_title > h2 {
    font-size: 1.38rem; font-weight: 600; line-height: 1.2;
}
#wrap main .web_p_wrap .web_p_contents .project2 .web_text .web_title > h2 {letter-spacing: 5%;}/* LUSH */
#wrap main .web_p_wrap .web_p_contents .web_project .web_text .web_info {margin-bottom: 40px;}
#wrap main .web_p_wrap .web_p_contents .web_project .web_text .web_info .text_box {}
#wrap main .web_p_wrap .web_p_contents .web_project .web_text .web_info .text_box > p {}
#wrap main .web_p_wrap .web_p_contents .web_project .web_text .web_info .text_box .text_title {width: 100px;}
#wrap main .web_p_wrap .web_p_contents .web_project .web_text .web_info .text_box .text_content {}
#wrap main .web_p_wrap .web_p_contents .web_project .web_text .web_info .text_box .port_link {
    border-bottom: 1px solid #222; padding-bottom: 4px;
}
/* --------------------------------------------------------------------------------------- 프로젝트 결과 링크 버튼 */
#wrap main .web_p_wrap .web_p_contents .web_project .web_text .web_link {display: flex; gap: 6px;}
#wrap main .web_p_wrap .web_p_contents .web_project .web_text .web_link > a,
#wrap main .web_p_wrap .web_p_contents .web_project .web_text .web_link .figma_wrap > a {
    color: #555; font-size: 0.88rem;
    border-radius: 6px; background-color: #fff; border: 1px solid #bbb;
    display: flex; align-items: center; width: fit-content; padding-right: 12px;
    transition: 0.3s;
}
/* --------------------------------------------------------------------------------------- 공통 hover */
#wrap main .web_p_wrap .web_p_contents .web_project .web_text .web_link .proposal:hover,
#wrap main .web_p_wrap .web_p_contents .web_project .web_text .web_link .github:hover,
#wrap main .web_p_wrap .web_p_contents .web_project .web_text .web_link .figma_wrap:hover .figma {
    border: 1px solid #000; color: #000;
}
/* --------------------------------------------------------------------------------------- fimga hover */
#wrap main .web_p_wrap .web_p_contents .web_project .web_text .web_link .figma_wrap {position: relative;}
#wrap main .web_p_wrap .web_p_contents .web_project .web_text .web_link .figma_wrap .figma {}
#wrap main .web_p_wrap .web_p_contents .web_project .web_text .web_link .figma_wrap .figma_hover {
    position: absolute; bottom: -50px; left: -8px; gap: 12px; display: flex;
    opacity: 0; transition: 0.3s;
}
#wrap main .web_p_wrap .web_p_contents .web_project .web_text .web_link .figma_wrap:hover .figma_hover {opacity: 1;}
#wrap main .web_p_wrap .web_p_contents .web_project .web_text .web_link .figma_wrap .figma_hover a {
    font-size: 0.94rem; color: #555; padding: 28px 6px 10px; font-size: 0.94rem;
    border-bottom: 1px solid transparent; transition: 0.3s; 
}
#wrap main .web_p_wrap .web_p_contents .web_project .web_text .web_link .figma_wrap .figma_hover a:hover {
    border-bottom: 1px solid #000; color: #000;
}

/* =========================================================== 4. 기타 작업물 */
#wrap main .works_wrap {position: relative;}/* 세로선 기준(부모) */
#wrap main .works_wrap::before {/* 세로선 */
    position: absolute; content: ''; width: 1px; height: 150px;
    left: 250px; top: 360px;
    background: #ccc;
}
#wrap main .works_wrap .graphic_wrap {position: relative;}
#wrap main .works_wrap .graphic_wrap::after {
    content: "※ 썸네일 클릭 시 작업물을 확인할 수 있습니다.";
    position: absolute; bottom: -32px; left: 58%;
    font-size: 0.9rem; color: #555;
}
/* ----------------------------------------------------------- 그래픽 / 영상 공통 디자인 */
#wrap main .works_wrap .graphic_wrap,
#wrap main .works_wrap .video_wrap {
    display: flex;  justify-content: space-between; align-items: center;
    text-wrap: nowrap;
}
#wrap main .works_wrap .graphic_wrap .project_title,
#wrap main .works_wrap .video_wrap .project_title {width: 30%;}/* 왼쪽 30% */
#wrap main .works_wrap .swiper_wrap {position: relative; width: 70%;}/* 오른쪽 70% */
#wrap main .works_wrap .swiper-button-prev svg,
#wrap main .works_wrap .swiper-button-next svg {display: none;}/* 기본버튼삭제 */
#wrap main .works_wrap .swiper-button-prev,
#wrap main .works_wrap .swiper-button-next {/* 이전/다음 버튼 */
    background-size: 60px;
    background-position: center;
    width: 60px; height: 60px;
    border-radius: 50%;
    transition: 0.3s;
}
#wrap main .works_wrap .swiper-button-prev:hover,
#wrap main .works_wrap .swiper-button-next:hover {
    background-color: #eee;
}
#wrap main .works_wrap .swiper-button-prev {left: -70px; background-image: url(../images/btn_prev.svg);}
#wrap main .works_wrap .swiper-button-next {right: -70px; background-image: url(../images/btn_next.svg);}
#wrap main .works_wrap .mockup img {border-radius: 20px;}

/* 목업 이미지 hover */
#wrap main .works_wrap .mockup {
    position: relative; display: block; overflow: hidden; border-radius: 20px; height: 336px;
}
#wrap main .works_wrap .mockup img {
    display: block; width: 100%; height: 100%;
    object-fit: cover; object-position: top;
}
#wrap main .works_wrap .mockup .hover_box {
    position: absolute; bottom: 0; left: 0;
    width: 100%; height: 100%;  padding: 30px;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
    transition: 0.3s; opacity: 0;
    display: flex; flex-flow: column nowrap; justify-content: end;
}
#wrap main .works_wrap .mockup:hover .hover_box {opacity: 1;}
#wrap main .works_wrap .hover_box > p {line-height: 2; color: #fff; letter-spacing: 1px;}
#wrap main .works_wrap .hover_box .hover_title {font-size: 1.13rem; font-weight: 500;}
#wrap main .works_wrap .hover_box .hover_text {font-size: 0.94rem;}

/* ----------------------------------------------------------- 그래픽 디자인 */
#wrap main .works_wrap .graphic_wrap {margin-bottom: 50px;}
#wrap main .works_wrap .graphic_wrap .project_title {}
#wrap main .works_wrap .graphic_wrap .project_title {}
#wrap main .works_wrap .graphic_wrap .project_title h1 {}
#wrap main .works_wrap .graphic_wrap .grap_contents {}
#wrap main .works_wrap .graphic_wrap .grap_contents .swiper-wrapper {}
#wrap main .works_wrap .graphic_wrap .grap_contents .swiper-wrapper .grap_project {}
#wrap main .works_wrap .graphic_wrap .grap_contents .swiper-wrapper .grap_project .mockup {}
#wrap main .works_wrap .graphic_wrap .grap_contents .swiper-wrapper .grap_project .mockup img {}
#wrap main .works_wrap .graphic_wrap .grap_contents .swiper-wrapper .grap_project .mockup .hover_box {}
#wrap main .works_wrap .graphic_wrap .grap_contents .swiper-wrapper .grap_project .mockup .hover_box > p {}
#wrap main .works_wrap .graphic_wrap .grap_contents .swiper-wrapper .grap_project .mockup .hover_box .hover_title {}
#wrap main .works_wrap .graphic_wrap .grap_contents .swiper-wrapper .grap_project .mockup .hover_box .hover_text {}

/* ----------------------------------------------------------- 영상 디자인 */
#wrap main .works_wrap .video_wrap {}
#wrap main .works_wrap .video_wrap .project_title {}
#wrap main .works_wrap .video_wrap .project_title {}
#wrap main .works_wrap .video_wrap .project_title h1 {}
#wrap main .works_wrap .video_wrap .project_title > p {margin-top: 30px; line-height: 1.8; text-wrap: nowrap;}
#wrap main .works_wrap .video_wrap .video_contents {}
#wrap main .works_wrap .video_wrap .video_contents .swiper-wrapper {}
#wrap main .works_wrap .video_wrap .video_contents .swiper-wrapper .video_project {}
#wrap main .works_wrap .video_wrap .video_contents .swiper-wrapper .video_project .mockup {}
#wrap main .works_wrap .video_wrap .video_contents .swiper-wrapper .video_project .mockup img {}
#wrap main .works_wrap .video_wrap .video_contents .swiper-wrapper .video_project .mockup .play_icon {/* 영상 아이콘 */
    position: absolute; right: 20px; top: 20px; z-index: 2; width: 36px;
    opacity: 0; transition: 0.3s;
}
#wrap main .works_wrap .video_wrap .video_contents .swiper-wrapper .video_project .mockup:hover .play_icon {opacity: 1;}/* hover */
#wrap main .works_wrap .video_wrap .video_contents .swiper-wrapper .video_project .mockup .play_icon img {width: 100%; display: block;}
#wrap main .works_wrap .video_wrap .video_contents .swiper-wrapper .video_project .mockup .hover_box {}
#wrap main .works_wrap .video_wrap .video_contents .swiper-wrapper .video_project .mockup .hover_box > p {}
#wrap main .works_wrap .video_wrap .video_contents .swiper-wrapper .video_project .mockup .hover_box .hover_title {}
#wrap main .works_wrap .video_wrap .video_contents .swiper-wrapper .video_project .mockup .hover_box .hover_text {}

/* ----------------------------------------------------------- 팝업(공통) */
#wrap main .works_wrap .popup_bg {
    position: fixed; left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.5); z-index: 999;
}
/* ----------------------------------------------------------- 팝업 이미지 */
#wrap main .works_wrap .popup_bg_i {display: none;}
#wrap main .works_wrap .popup_bg_i .popup_i {
    width: 50%; height: 80vh;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
#wrap main .works_wrap .popup_bg_i .popup_i > img {width: 100%;}
/* ----------------------------------------------------------- 이미지 닫기 버튼 */
#wrap main .works_wrap .popup_bg_i .close_ga {position: fixed; right: 500px; top: 50px;}
#wrap main .works_wrap .popup_bg_i .close_ga > img {width: 50px;}

/* ----------------------------------------------------------- 팝업 비디오 */
#wrap main .works_wrap .popup_bg_v {display: none;}
#wrap main .works_wrap .popup_bg_v .popup_v {
    width: 60%; height: 70vh;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
#wrap main .works_wrap .popup_bg_v {}
#wrap main .works_wrap .popup_bg_v .popup_v {}
#wrap main .works_wrap .popup_bg_v .popup_v > iframe {width: 100%; height: 100%;}
/* ----------------------------------------------------------- 비디오 닫기 버튼 */
#wrap main .works_wrap .popup_bg_v .popup_v .close_vd {position: fixed; right: -70px; top: 0;}
#wrap main .works_wrap .popup_bg_v .popup_v .close_vd > img {width: 50px;}
/* =========================================================== footer */
#wrap footer {
    background: #1f1f1f; height: 200px;
    display: flex; justify-content: center; align-items: center;
}
#wrap footer .copyright {color: #eee; font-weight: 300;}