@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");  /* pretendard 글꼴 */


/* 전체 정리 ctrl+A, ctrl+I */
* { margin: 0; padding: 0; font-size: 10px; font-family: 'Pretendard', 'Druk'} /* 앞에 있는 폰트가 우선순위 높음. */
html { overflow-x: hidden;}
/* html {overflow-x: hidden; font-family: 'Pretendard-Regular'; } */
ul li { list-style: none; }
a { color: #888; text-decoration: none; }

/* @charset="UTF-8" */
/* css 리셋파일 안에 들어가는 내용임 */

.main {width: 100%; height: auto; margin: 0 auto;}



/* intro */
.intro {width: 100%; max-width: 1440px; height: auto; margin: 0 auto; padding-top: 90px; box-sizing: border-box; }
.intro > div {margin: 180px 0; display: flex; justify-content: space-between; align-items: center; }
.intro span {width: 100%; max-width: 499px; height: 500px; display: block; background: url("../images/intro_Me.png") no-repeat center center; background-size: cover;}


.intro_text {width: calc(100% - 499px - 60px); max-width: 800px; height: auto; display: inline-block; }
.intro_text h2 {font-size: 5rem; font-weight: 700; line-height: 90%; /* letter-spacing: 1px; */ font-family: 'Druk'; color: #fff;}
.intro_text i {font-size: 13rem; font-weight: 700; line-height: 90%; font-family: 'Druk'; color: #fff; display: block;}
.intro_text p {font-size: 2.4rem; font-weight: 400; line-height: 1.16; color: #fff; margin-top: 30px;}
.pdfDownload { display: unset; width: auto; /* 콘텐츠 + padding에 따라 크기 결정 */ height: auto; max-width: 100%; /* 너무 커지는 것을 방지(부모너비 한도) */ display: inline-flex; /* 가로/세로 중앙 정렬용, 콘텐츠 크기 기반 */ align-items: center; justify-content: center; box-sizing: border-box; /* padding이 너비에 포함되도록 */ border-radius: 50px; padding: 15px 30px; background: #FFCC00; font-size: 2.4rem; font-weight: 400; line-height: 100%; color: #000; margin-top: 50px; white-space: nowrap; /* 한 줄 유지(원하면 제거) */ }


/* summary */
.summary {width: 100%; max-width: 1440px; height: auto; margin: 0 auto; padding-bottom: 180px; scroll-margin-top: 180px;}
.summary-grid { width: 100%; display: flex; justify-content: space-between; gap: 20px;}
.smry_left {display: inline-block; width: 950px; }
.smry_right {display: inline-block; width: 470px;}
.smry_left_bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 20px;}

.box { display: flex; flex-direction: column; background: #ffffff10; border-radius: 40px; color: #fff; padding: 30px 40px; box-sizing: border-box; position: relative; z-index: 1; overflow: hidden; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.box::before { content: ""; position: absolute; inset: 0; border-radius: 40px; padding: 1px; /*border두께*/background: linear-gradient(0deg, #fff, #ffffff50); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 0; pointer-events: none; -webkit-border-radius: 40px; -moz-border-radius: 40px; -ms-border-radius: 40px; -o-border-radius: 40px; }

.vision {width: 100%; height: 260px; display: block; background: url('../images/vision_bg.png') center/cover, #ffffff10; }
.box-size1 {width: calc(50% + 10px); height: auto; display: inline-block; align-content: space-between;}
.box-size2 {width: calc(50% - 30px); height: auto; display: inline-block; }
.box-size3 { width: 100%; height: auto; display: inline-block;}
.edu {height: 160px; margin-bottom: 20px;}
.exp {height: 230px}
.int_center {height: 240px; margin-bottom: 20px;}
.box-empty {height: 150px;}
.Skills {height: 370px; margin-bottom: 20px;}
.learning {width: 100%; height: 300px; background: url('../images/learning_bg.png') center/cover, #ffffff10; }

.skills-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.skill { display: flex; align-items: center; width: auto; height: auto; border-radius: 12px; padding: 6px 15px; box-sizing: border-box; background: #ffffff10; /* 단색 배경 */ font-size: 2.4rem; font-weight: 400; line-height: 1.16; color: #fff; position: relative; z-index: 1; overflow: hidden; text-align: center; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);}
.skill::before { content: ""; position: absolute; inset: 0; border-radius: 12px; padding: 1px; /* border 두께 */ background: linear-gradient(0deg, #fff, #ffffff50); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 0; pointer-events: none; }
.skills-list p {width: 28px; height: 28px; display: inline-block; margin-right: 10px;}
/* skill svg는 svg.css에 있음 */


.learning-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.learning-list span {width: auto; height: auto; border-radius: 30px; padding: 6px 20px; box-sizing: border-box; background: #ffffff10; /* 단색 배경 */  font-size: 2.4rem; font-weight: 400; line-height: 1.16; color: #fff; position: relative; z-index: 1; overflow: hidden; -webkit-backdrop-filter: 4px; backdrop-filter: blur(4px);}
.learning-list span::before { content: ""; position: absolute; inset: 0; border-radius: 30px; padding: 1px; /* border 두께 */ background: linear-gradient(0deg, #fff, #ffffff50); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 0; pointer-events: none; }

.vision h2{ font-size: 5.6rem; font-weight: 700; line-height: 1.08; color: #fff; }
.vision p { font-size: 2.4rem; font-weight: 400; line-height: 1.16; color: #888; margin-top: 20px; }
.Skills p, .edu p, .exp p, .int_center p, .learning p {display: inline-block; font-size: 2.4rem; font-weight: 400; line-height: 1.16; color: #fff; }
.Skills h3, .edu h3, .exp h3, .int_center h3, .learning h3 { font-size: 3.2rem; font-weight: 700; line-height: 1.14; margin-bottom: 10px; }
.edu span, .exp span { font-size: 2rem; font-weight: 400; line-height: 1.2; color: #888; display: inline-block;}
.edu div, .exp div { display: flex; justify-content: space-between;}


/* Works */
.works { width: 100%; max-width: 1440px; height: auto; margin: 0 auto;}
.works h2 { font-family: 'Druk'; font-size: 8rem; font-weight: 500; line-height: 100%; letter-spacing: 0.3rem; color: #fff; margin-bottom: 40px; text-align: center; }
.works-grid { width: 100%; display: flex; justify-content: space-between; gap: 40px;}
.work_left { width: 50%; height: auto;}
.work_right { width: 50%; height: auto; }
.flip-front{ width: 100%; height: 100%; border-radius: 40px; border: 1px solid #888; box-sizing: border-box;}
.work-img { width: 100%; height: 100%; border-radius: 40px; display: block; }


.work_left .work-card:last-child, .work_right .work-card:last-child {margin-top: 80px;}
.work_right .work-card:first-child {margin-top: 160px;}


/* 더보기 버튼 중앙 정렬 및 배경 보정 */
.work-img.more { width: 100%; height: 600px; display: flex; justify-content: center; align-items: center; cursor: pointer; border: 1px solid #888; box-sizing: border-box; }
.more-btn {padding: 20px 50px; border-radius: 10px; background: #ffffff20; font-size: 5.6rem; line-height: 1.08; font-weight: 700; color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); cursor: pointer; position: relative; z-index: 1; overflow: hidden; border: none;}
.more-btn::before { content: ""; position: absolute; inset: 0; border-radius: 10px; padding: 1px; /* border 두께 */ background: linear-gradient(0deg, #ffffff20, #ffffff50); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 0; pointer-events: none; }


.work-info {padding-top: 40px;}
.work-info strong {font-size: 3.6rem; line-height: 4rem; font-weight: 700; display: flex; align-items: center; color: #fff;}
.work-info span {font-size: 2.4rem; line-height: 2.8rem; font-weight: 400; color: #fff; margin-left: 50px;}
.work-info p {width: 100%; height: 100px; font-size: 2rem; line-height: 150%; font-weight: 400; color: #888; margin-top: 20px;}


/* ---------- Flip card (works) : card-img 영역만 flip 처리 ---------- */
/* 3D flip 효과를 제거하고 hover 시 오버레이가 나타나도록 수정 */
.work-card.flip-card { width: 100%; max-width: 700px; margin-bottom: 40px; position: relative; }
.work-card.flip-card .flip-inner { position: relative; width: 100%; /* height: 600px; */ /* 고정 높이 대신 aspect-ratio 사용 */ aspect-ratio: 7 / 6; /* 너비에 맞춰 높이를 7:6 비율로 자동 조절 */ box-sizing: border-box; }

/* front/back은 flip-inner 영역(이미지 영역)만 덮도록 절대 위치로 설정 */
.work-card.flip-card .flip-front, .work-card.flip-card .flip-back { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 40px; overflow: hidden; box-sizing: border-box; }

/* front는 이미지 컨테이너 역할 */
.work-card.flip-card .flip-front { z-index: 1; }

/* back은 어두운 오버레이 역할 */
.work-card.flip-card .flip-back { z-index: 2; display: flex; align-items: center; justify-content: center; background: #000000a6; color: #fff; padding: 32px; opacity: 0; pointer-events: none; /* 평소에는 클릭되지 않도록 */ transition: opacity 0.3s ease; border: 1px solid #888; }

/* hover 시 오버레이 표시 */
.work-card.flip-card:hover .flip-back { opacity: 1; pointer-events: auto; /* hover 시 내부 요소 클릭 가능하도록 */ }

/* flip-back 영역 button */
.flip-back-content {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;}
.flip-back-content .btn { display: inline-block; padding: 15px 30px; border: none; border-radius: 15px; background: #ffffff20; color: #fff; font-size: 2.6rem; transition: background 0.3s;}
.flip-back-content .btn:hover {background: #FFCC00; font-weight: 500; color: #000;}


/* responsive: 이미지 높이만 축소 -> aspect-ratio로 대체되었으므로 관련 규칙 제거 */
/* 
@media (max-width:900px) {
    .work-card.flip-card .flip-inner { height: 420px; }
    .flip-back-content h3 { font-size: 2.4rem; }
}
@media (max-width:700px) {
    .work-card.flip-card .flip-inner { height: 320px; }
    .work-card.flip-card .flip-back { padding: 18px; }
} 
*/
/* ---------- end flip ---------- */







/* card-img: blurred background + 전면 스크린샷 스타일 */
.card-img { position: relative; width: 100%; height: 100%; border-radius: 40px; overflow: hidden; display: block; background: transparent; }

/* 내부 컨테이너 (이미지/배경) */
.card-img .work-img { position: relative; width: 100%; height: 100%; /* 부모(.flip-inner)의 높이를 따르도록 100%로 변경 */ }

/* 블러 처리된 배경(원본 이미지를 확대해서 흐리게) */
.card-img .work_BG { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(14px) saturate(0.95); transform: scale(1.06); z-index: 1; transition: filter 0.25s ease, transform 0.25s ease; }

/* 전면 스크린샷(실제 콘텐츠) */
.card-img .work-img img { position: absolute; top: 14%; left: 50%; transform: translateX(-50%); /* 안쪽 여백을 줘서 테두리 느낌 */ /* inset: 18px; */ width: calc(100% - 20%); height: calc(100% - 6%); object-fit: cover; object-position: top center; border-radius: 20px; box-shadow: 0 28px 70px rgba(0,0,0,0.55); z-index: 2; display: block; transition: transform 0.28s ease, box-shadow 0.28s ease; }




/* --- flip card: 클릭 불가 문제 수정 --- */
/* 더 이상 flip이 아니므로 관련 규칙을 제거하거나 단순화합니다. */
/* 아래 블록 전체를 삭제하거나 주석 처리해도 무방합니다. */
/*
.flip-card { perspective: 1200px; position: relative; }
.flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.6s; }
.flip-front, .flip-back { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flip-back { transform: rotateY(180deg); }
.flip-card.is-flipped .flip-inner, .flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-back { z-index: 3; pointer-events: auto; }
.flip-front { z-index: 2; pointer-events: auto; }
.card-img, .card-img * { pointer-events: none; }
.flip-back a, .flip-back button { pointer-events: auto; z-index: 4; }
.flip-card .flip-front[aria-hidden="true"] { pointer-events: none; opacity: 0.999; }
@media (max-width:900px) {
    .flip-inner { transition-duration: 0.45s; }
}
*/