@import url(reset.css);

@font-face {
    font-family: 'PalchilmmDailyItalic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201@1.0/87MMILSANG-Oblique.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

/* 1. 브라우저 기본 여백 없애기 */
body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#wrap { width: 100%; background: #000; }

/* 원페이지 스크롤--------------------------------------- */

html {
    scroll-behavior: smooth; /* 부드러운 이동 */
    scroll-snap-type: y mandatory; /* 세로 방향으로 착 달라붙게 설정 */
}
section {
    width: 100%;
    height: 100vh;
    scroll-snap-align: start; /* 섹션 시작 부분에 스냅 고정 */
    scroll-snap-stop: always; /* 중간에 멈추지 않고 한 섹션씩 이동 */
    position: relative;
    overflow: hidden;
}

/* 3. 섹션 안의 헤더 프레임 --------------------------------------------------- */
.header { 
    position: absolute; /* 섹션 도화지 위에서 공중에 띄움 */
    top: 42px; /* 위에서 40px 띄움 */
    left: 0;
    right: 0;
    margin: 0 auto; 
    width: 100%;
    max-width: 1600px;
    z-index: 999; 
}

.nav {
    display: flex;
    justify-content: space-between; /* ★핵심: 양끝에 딱 붙이고 중간 여백을 똑같이 나눔 */
    align-items: center; /* 세로 중앙 정렬 */
    width: 100%; 
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav li a {
    display: block;
    position: relative;
    overflow: hidden; /* 글자가 박스 밖으로 나갈 때 숨김 */
    height: 30px; /* 글자 높이에 맞게 조절 */
    line-height: 30px;
    font-size: 19px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
}

/* 텍스트 내용 복제 효과 */
.nav li a span {
    display: block;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}

/* 아래에 숨어있는 가짜 텍스트 */
.nav li a span::after {
    content: attr(data-link-alt); /* HTML의 data 속성값을 가져옴 */
    position: absolute;
    top: 100%;
    left: 0;
}

/* 호버 시 위로 슥 밀어 올림 */
.nav li a:hover span {
    transform: translateY(-100%);
}
/* 활성화(active) 되었을 때의 색상 */
.nav li.active a {
    color: #ffc002; 
}

/* 위아래 라인------------------------------------------------------------------------- */
/* 1. 상단 라인 기본 설정 */
.main_line {
    width: 100%;
    max-width: 1600px;
    height: 1px;
    background-color: #ffffff;
    margin: 25px auto 30px;
    /* 초기 상태를 0으로 두되, 애니메이션이 없을 때도 대비 */
    transform: scaleX(0); 
}

/* 2. 하단 라인 기본 설정 */
.bottom_line {
    position: absolute;
    bottom: 70px;
    left: 0; right: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 1600px;
    height: 1px;
    background-color: #fff;
    transform: scaleX(0); 
}

/* ★ 중요: active 클래스가 붙었을 때만 애니메이션 작동 ★ */
section.active .main_line {
    animation: lineToRight 1.5s ease-out forwards;
}

section.active .bottom_line {
    animation: lineToLeft 1.5s ease-out forwards;
}

/* ============================================================
    1. 공통 애니메이션 정의 
   ============================================================ */

/* 왼쪽에서 오른쪽으로 (상단선, 포폴 오른쪽선) */
@keyframes lineToRight {
    0% { transform: scaleX(0); transform-origin: left; }
    100% { transform: scaleX(1); transform-origin: left; }
}

/* 오른쪽에서 왼쪽으로 (하단선, 웹디자인 왼쪽선) */
@keyframes lineToLeft {
    0% { transform: scaleX(0); transform-origin: right; }
    100% { transform: scaleX(1); transform-origin: right; }
}

/* 꺾임선 전용 (ㄱ자, ┛자 모양) */
@keyframes cornerGrow {
    0% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}


/* ============================================================
    2. 위아래 메인 프레임 선 (가장 먼저 실행: 0s)
   ============================================================ */
.main_line, .bottom_line {
    transform: scaleX(0); /* 초기 상태 숨김 */
}

/* 상단 메인선 */
section.active .main_line {
    animation: lineToRight 1.5s ease-out forwards;
}

/* 하단 메인선 */
section.active .bottom_line {
    animation: lineToLeft 1.5s ease-out forwards;
}

/* 섹션1-------------------------------------------------------------- */

/* 1. 메인 도화지 설정 (기준점 만들기) */
#main {
    position: relative; /* ★가장 중요: 자식 요소들이 움직일 기준점이 됩니다 */
    width: 100%;
    max-width: 1600px; /* 네비게이션과 똑같이 1600px에 맞춤 */
    margin: 0 auto;
    height: 100vh; /* 화면 꽉 차게 */
}

/* 포트폴리오 텍스트----------------------------------------------------- */
.portfolio_text {
    position: absolute;
    top: 24%;
    left: 150px; 
    font-family: 'PalchilmmDailyItalic';
    font-size: 100px;
    color: #ffc002;
    margin: 0;
}

/* PORTFOLIO 왼쪽 프레임 ('ㄱ'자 모양) */
.portfolio_text::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -150px;
    width: 120px;
    height: 300px;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    opacity: 0;
    transform-origin: left top;
}
section.active .portfolio_text::before {
    animation: cornerGrow 1.2s ease-out 0.6s forwards;
}
/* PORTFOLIO 오른쪽 선 */
.portfolio_text::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-left: 20px;
    width: 120px;
    border-top: 1px solid #fff;
    transform: translateY(-50%) scaleX(0);
    transform-origin: left;
}
section.active .portfolio_text::after {
    animation: lineToRight 1s ease-out 0.8s forwards;
}

/* 웹디자인 텍스트--------------------------------------------------- */
/* 3. WEB DESIGNER 글자 위치 및 가로선 */
.web_design {
    position: absolute;
    bottom: 23%;
    right: 15%;
    font-size: 48px;
    font-weight: 300;
    font-family: 'PalchilmmDailyItalic';
    color: #fff;
    margin: 0;
}

/* WEB DESIGNER 왼쪽 긴 가로선 */
.web_design::before {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    width: 120px;
    height: 1px;
    background-color: #fff;
    margin-right: 30px;
    transform: scaleX(0);
    transform-origin: right;
}
section.active .web_design::before {
    animation: lineToLeft 1s ease-out 0.6s forwards;
}

/* 네임 텍스트-------------------------------------------------------- */
/* 4. SUHYEON LEE 글자 위치 및 세로선 */
.name {
    position: absolute;
    bottom: 16%;
    right: 150px;
    font-size: 48px;
    color: #ffc002;
    margin: 0;
}

/* SUHYEON LEE 오른쪽 위로 꺾이는 '┛' 자 선 */
.name::after {
    content: "";
    position: absolute;
    bottom: 50%;
    right: -150px;
    width: 120px;
    height: 300px;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    opacity: 0;
    transform-origin: right bottom;
}
section.active .name::after {
    animation: cornerGrow 1.2s ease-out 0.8s forwards;
}

/* 섹션2------------------------------------------------------------------------ */

/* 전체 프로필 영역 (사진 + 텍스트) */
.profile-container {
    width: 100%;
    max-width: 1500px; /* 기존 1600px 프레임 안쪽에 여백을 주기 위해 1400px 설정 */
    margin: 0 auto;
    padding-top: 180px; /* 헤더 아래로 여백 확보 */
    
    display: flex; /* 사진(왼쪽)과 텍스트(오른쪽)를 양옆으로 배치 */
    justify-content: space-between;
    align-items: flex-start; /* 위쪽 정렬 */
}

/* 왼쪽 사진 영역------------------------------- */
.profile-left {
    width: 20%; /* 전체 넓이의 30% 차지 */
}

.profile-left .photo img {
    display: block;
}

/* ★핵심: 오른쪽 텍스트 영역--------------------------- (Grid 적용) */
.profile-right {
    width: 75%; /* 전체 넓이의 65% 차지 (가운데 5% 여백) */
    
    display: grid; /* 바둑판처럼 나누기 시작! */
    grid-template-columns: 1fr 1fr 1fr; /* 가로로 3칸 나누기 (Personal, Career, License) */
    grid-template-rows: auto auto; /* 세로로 2줄 (위쪽 정보, 아래쪽 학력/스킬) */
    row-gap: 60px; /* 위아래 줄 간격 */
    column-gap: 40px; /* 좌우 칸 간격 */
}

/* 텍스트------------------------------------------------- */
.data_name { 
    font-size: 22px;
    font-weight: 700;
    color: #ffc002;    
    display: flex;
    align-items: center; 
    margin-bottom: 30px;
}

/* 2. 글자 바로 옆에 선 그리기 */
.data_name::after {
    content: ""; /* 가상 요소 필수 값 */
    display: block; /* 선이 공간을 차지하도록 블록 처리 */
    width: 50px; /* 선의 길이 (디자인에 맞게 조절하세요) */
    height: 1px; /* 선의 두께 */
    background-color: #fff; /* 선 색상 (보내주신 이미지처럼 살짝 어두운 회색) */
    margin-left: 15px; /* 글자와 선 사이의 여백 */
}

.info-list {
    display: flex;
    flex-direction: column; /* 목록을 세로로 나열하게 설정 */
    gap: 20px; /* li와 li '사이'에만 정확히 20px 간격을 줍니다 */
    
    /* 기존에 있던 list-style: none; padding: 0; 등은 그대로 두세요 */
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 가로 항목--------------------------------- */
.label {
    font-size: 16px;
    color: #ccc;
    font-weight: 600;
    padding-right: 20px;
}
.value {
    font-size: 16px;
    color: #fff;
    font-weight: 300;
}

/* 세로 항목------------------------------------- */
.career_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 각 경력(li) 사이의 띄어쓰기 간격 */
.career_list li {
    margin-bottom: 25px; 
}
.title {
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    padding-bottom: 3px;
}
.date {
    font-size: 14px;
    color: #ccc; /* 시안처럼 회색으로 처리 */
    font-weight: 300;
    margin: 0;
}


/* EDUCATION 섹션만 특별히 가로 2칸 차지하게 만들기------------------- */
.info_box.education {
    grid-column: span 2; 
}

/* 스킬-------------------------------------------- */
/* 가로 태그 리스트 */
.skill_tags {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* 자리가 좁으면 다음 줄로 넘김 */
    gap: 10px; /* 태그들 사이 간격 */
}

/* 개별 스킬 태그 디자인 */
.skill_tags li {
    font-size: 14px;
    color: #eee;
    border: 1px solid #555; /* 얇은 테두리로 시크한 느낌 */
    padding: 6px 15px; /* 안쪽 여백 */
    transition: all 0.3s; /* 마우스 올렸을 때 부드럽게 변함 */
    cursor: default;
}

/* 마우스 올렸을 때 노란색 포인트 */
.skill_tags li:hover {
    border-color: #ffc002;
    color: #ffc002;
}


/* 섹션3------------------------------------------------- */

/* 1. 전체 섹션 */
#portfolio {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* 2. 컨테이너 (좌우 6:4 고정) */
.portfolio-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px; /* 좌우 간격 */
    padding: 0 50px;
}

/* --- [왼쪽] 이미지 영역 (정확히 60% 확보) --- */
.portfolio-left {
    flex: 0 0 60%; /* ★ 60% 공간을 절대적으로 고정 */
    display: flex;
    justify-content: center; /* 이미지 창을 가로 중앙에 배치 */
    align-items: center;
}

/* ★ 초슬림 크롬 창 틀 (왼쪽 60% 안에서 노는 창) */
.browser-window {
    width: 100%; /* portfolio-left 안에서 가득 차게 */
    max-width: 850px; 
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    /* border: 1px solid #dfdfdf; */
}

/* 크롬 상단바 스타일 */
.window-header {
    height: 43px;
    background: #f1f3f4;
    display: flex;
    align-items: center;
    padding: 0 15px;
    border-bottom: 1px solid #dadce0;
    /* ★ 아이콘과 주소창 사이의 전체적인 간격 조절 */
    gap: 12px; 
}
.header-left { 
    display: flex; 
    align-items: center; 
    gap: 8px; /* 아이콘들끼리의 간격 */
    flex-shrink: 0; /* 아이콘들이 찌그러지지 않게 보호 */
}
.nav-icons { display: flex; gap: 10px; color: #5f6368; }
.nav-icons .material-symbols-outlined { font-size: 16px; cursor: pointer; }

.address-bar {
    background: #fff;
    /* width: 70%;  <-- ★ 고정 퍼센트 대신 flex: 1; 을 쓰면 남은 공간을 알아서 채웁니다. */
    flex: 1; 
    height: 25px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid #e8eaed;
    
    /* 마진이 없다면 여기서 수치를 직접 넣어서 붙일 수도 있습니다. */
    margin-left: 0; 
}
.address-bar .lock { font-size: 14px; color: #aaa; margin-right: 8px; }
.address-bar .url-text { font-size: 11px; color: #3c4043; font-family: sans-serif; padding-bottom: 1px;  }

.header-right {
    display: flex;
    align-items: center; /* ★ 수직 중앙 정렬 */
    height: 100%;       /* 부모 높이를 다 쓰게 함 */
}
.header-right .material-symbols-outlined { font-size: 16px; }

/* 3. 이미지 박스 (65vh 높이 유지) */
.single-img-box {
    width: 100%; 
    height: calc(65vh - 30px);
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
}

.single-img-box img {
    width: 100%;
    height: auto;
    display: block;
}

/* 스크롤바 디자인 */
.single-img-box::-webkit-scrollbar { width: 6px; }
.single-img-box::-webkit-scrollbar-track { background-color: #f1f3f4; }
.single-img-box::-webkit-scrollbar-thumb {
    background-color: #c1c1c1; 
    border-radius: 10px;
}

/* --- [오른쪽] 텍스트 영역 (정확히 40% 확보) --- */
.portfolio-right {
    flex: 0 0 40%; /* ★ 40% 공간을 절대적으로 고정 */
    display: flex;
    flex-direction: column;
}

.project_name {
    font-family: 'PalchilmmDailyItalic';
    font-size: 42px;
    color: #ffc002;
    display: flex;
    align-items: center;
    gap: 20px;
}

.project_name::after {
    content: "";
    display: block;
    width: 80px;
    height: 1px;
    background-color: #fff;
}

.project-title h2 {
    font-size: 30px;
    font-weight: 500;
    color: #fff;
    margin: 60px 0 40px;
}

.subtitle {
    font-size: 20px;
    color: #fff;
    font-weight: 300;
    margin-bottom: 13px;
}

.project-desc {
    font-size: 16px;
    line-height: 1.7;
    color: #ccc;
    margin-bottom: 40px;
    max-width: 100%; /* 40% 영역 안에서 꽉 차게 */
    word-break: keep-all; /* 한글 줄바꿈 예쁘게 */
}

/* 방문하기 버튼 */
.visit-btn {
    position: relative;
    display: inline-block;
    width: fit-content;
    background: #ffc002;
    color: #000;
    padding: 8px 20px; 
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease; 
    margin-top: 10px;
}

/* 길쭉한 화살표 준비 */
.visit-btn::after {
    content: '⟶'; 
    position: absolute;
    top: 50%;
    right: 25px; 
    transform: translateY(-50%);
    opacity: 0;
    transition: all 0.3s ease;
}


.visit-btn:hover {
    padding-right: 50px; 
    background-color: #ffc002;
    color: #000; 
}

/* 호버 시 화살표 스르륵 등장 */
.visit-btn:hover::after {
    opacity: 1;
    right: 20px; 
}



/* 컨택트-------------------------------------------------------- */
/* [컨택트 본문 전체 컨테이너] */
.contact_body {
    position: relative;
    width: 1500px;
    margin: 0 auto;
    height: calc(100vh - 220px);
}

/* [중앙 슬로건: Design That Moves You] */
.contact_text {
    position: absolute;
    top: 34%;
    left: 27.5%;
    transform: translate(-50%, -50%);
    font-family: 'PalchilmmDailyItalic';
    font-size: 55px;
    font-weight: 700;
    color: #ffc002;
    white-space: nowrap;
}

/* 슬로건 왼쪽 선 (오른쪽에서 왼쪽으로 뻗음) */
.contact_text::before {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    width: 80px;
    height: 1px;
    background-color: #fff;
    margin-right: 30px;
    transform: scaleX(0);         /* 시작 상태: 숨김 */
    transform-origin: right;      /* 오른쪽에서 왼쪽으로 뻗어나감 */
}

/* 슬로건 오른쪽 선 (왼쪽에서 오른쪽으로 뻗음) */
.contact_text::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    width: 80px;
    height: 1px;
    background-color: #fff;
    margin-left: 30px;
    transform: scaleX(0);         /* 시작 상태: 숨김 */
    transform-origin: left;       /* 왼쪽에서 오른쪽으로 뻗어나감 */
}

/* 활성화 시 애니메이션 실행 */
#contact.active .contact_text::before {
    animation: lineToLeft 1s ease-out 0.4s forwards;
}
#contact.active .contact_text::after {
    animation: lineToRight 1s ease-out 0.4s forwards;
}

/* [우측 하단 정보 그룹] */
.contact_info_group {
    position: absolute;
    top: 95%; 
    right: 2%;
    text-align: left;
}

.contact_name {
    position: relative;
    display: inline-block; 
    font-size: 40px;
    color: #fff;
    margin-bottom: 30px;
    white-space: nowrap;  
}

/* 이름 옆 오른쪽 선 (왼쪽에서 오른쪽으로 뻗음) */
.contact_name::after {
    content: "";
    position: absolute;
    left: 100%;            
    top: 55%;              
    width: 135px;
    height: 1px;
    background-color: #fff;
    margin-left: 20px;     
    transform: scaleX(0);         /* 시작 상태: 숨김 */
    transform-origin: left;       /* 왼쪽에서 오른쪽으로 뻗어나감 */
}

/* 활성화 시 이름 옆 선 애니메이션 */
#contact.active .contact_name::after {
    animation: lineToRight 1s ease-out 0.8s forwards;
}
/* 전화번호 & 메일 공통 (아이콘 정렬 포함) */
.contact_number, .contact_mail {
    display: flex;
    align-items: center; /* 아이콘과 글자 높이 맞춤 */
    font-size: 22px;
    color: #fff;
    margin: 15px 0;
    font-weight: 300;
    letter-spacing: 1px;
    opacity: 0.8;
}

/* 구글 머티리얼 심볼 아이콘 간격 */
.material-symbols-outlined {
    margin-right: 12px; /* 아이콘과 텍스트 사이 간격 */
    font-size: 24px;
}

/* 복사 아이콘 버튼 스타일 */
.contact_mail {
    display: flex;
    align-items: center;
}

/* 복사 아이콘 스타일 */
.copy_icon {
    margin-left: 10px;
    font-size: 18px !important;
    cursor: pointer; /* 마우스 커서 손가락 모양 */
    opacity: 0.5;
    transition: 0.3s;
    color: #fff;
}

.copy_icon:hover {
    opacity: 1;
    color: #ffc002;
}