/*=====================================
  Sections 기본
=====================================*/
section { position:relative; width:100%; min-height: 100vh; display:flex;  justify-content:center;  align-items:center;  padding:5%;}
.page-sub{background: #000;}

/*=====================================
  준비중 팝업
=====================================*/
#notice-popup {position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; z-index: 9999;}
.notice-box {background: #fff; color: #000; padding: 30px 50px; text-align: center; font-size: 1.1rem; box-shadow: 0 5px 25px rgba(0,0,0,0.3);}
.notice-box button { margin-top: 15px; background: #000; color: #fff; border: none; padding: 8px 18px; cursor: pointer; transition: 0.3s;}
.notice-box button:hover { color: #fcbf49;}

/*=====================================
  팝업
=====================================*/
.popup {position: fixed; inset: 0; background: rgba(60, 60, 60, 0.5);  display: none; justify-content: center; 
  align-items:flex-start; /* ✅ 중앙에서 위로 조금 올림 */  z-index: 9999;  padding: 10vh 0; /* ✅ 위아래 여백 */}
.popup.show { display: flex; animation: fadeIn 0.4s ease;}
.popup-content { position: relative; text-align: center; display: flex;  flex-direction: column;  align-items: center;  max-height: 90vh;  overflow: visible;}

/* ===== 포스터 이미지 ===== */
.popup-img-wrap { position: relative; max-height: 85vh;}
.popup-img { width: auto; height: 70vh; max-width: 90vw; object-fit: contain; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);}

/* ===== ZIP 다운로드 버튼 ===== */
.btn-overlay-download {
  display: block; margin: 7px auto 0;  background: #000; color: #fff; padding: 12px 28px;
  font-size: 1rem; text-decoration: none;
  backdrop-filter: blur(4px); transition: 0.3s; width: 100%;
}
.btn-overlay-download:hover { background: #fcbf49; color: #000;
}
/* ===== 닫기 버튼 ===== */
.popup-close {
  position: absolute; top: 15px; right: 15px; width: 38px; height: 38px; border: none; color: #fff;
  font-size: 2rem; font-weight: 100; cursor: pointer; display: flex; align-items: center;  justify-content: center;  transition: all 0.3s;  z-index: 10;  background: #000;
}
.popup-close:hover { color: #fcbf49;}

/* ===== Hide for today 버튼 ===== */
.popup-hide-today { display: block; margin: 12px auto 0; background: none; border: none; color: rgba(255, 255, 255, 0.6); font-size: 0.75rem;
  cursor: pointer; transition: color 0.3s; text-align: center;  
}
.popup-hide-today:hover { color: #fff;}


/* 애니메이션 */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

/*=====================================
  Section_1: Video + Overlay
=====================================*/
#cover_section {position: relative; display:flex; align-items:center; overflow:hidden; padding:0 5%; justify-content:space-between; z-index: 0;}
.head_line { flex:8; position: relative; z-index: 10; /* ✅ 글씨가 항상 위에 보이게 */ }
.head_line .intro-title {color: #fff; font-size: 10vw; font-weight: 100; line-height: 1; letter-spacing: -0.5rem; margin-top: 0.5em; opacity: 0;}

.bg-video { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:-2;}
.overlay-dark { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.4); z-index:-1; }

.intro-overlay {position: absolute; inset: 0; background: #000; z-index: 5; opacity: 1; transition: opacity 1.2s ease;}
.intro-overlay.hide { opacity: 0; pointer-events: none;}

@keyframes fadeIn { from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);} }
@keyframes tracking-in-expand { 0%{letter-spacing:-0.5em; opacity:0;} 40%{opacity:0.6;} 100%{opacity:1;} }

/* ===== 상단 스크롤 ===== */
.section1-slide { position:absolute; top:0; left:0; width:100%; height:40px; background:#000; display:flex; align-items:center; overflow:hidden; }
.scroll-text { display:flex; gap:8rem; white-space:nowrap; color:#fff; font-weight: 300; font-size:0.85rem}


/*=====================================
  Section_2. 메세지 전달
=====================================*/

.hero-dark { position: relative; background-color: #000; color: #fff; overflow: hidden; height: 100vh;
  display: flex; align-items: center; justify-content: center; text-align: center;}

.hero-dark::before { content: ""; position: absolute; top: 0%; left: 0; width: 100%; height: 140%;
  background: url("/img_ver1/section2_bg.png") center/cover no-repeat; opacity: 0.2; transform: translateY(0); transition: transform 1s ease-out;}
.hero-dark .hero-inner {position: relative; z-index: 2; max-width: 900px; padding: 0 2rem; margin: 0 auto; text-align: center;}
.hero-dark h1 { font-size: 3rem; line-height: 1; font-weight: 100; opacity: 0; transform: translateY(0px); filter: blur(4px); text-transform: uppercase; letter-spacing:0.02em;}
.hero-dark p {margin-top: 2rem; font-size: 1.25rem; line-height: 1.2; font-weight: 100; color: #ddd; opacity: 0; filter: blur(4px); transform: translateY(50px);}


/*=====================================
  Sections3. 포트폴리오 리스트 
=====================================*/

#about { background-color: #000;}
.about__item { display: inline-block; width: 600px; height: 100%; padding: 0px 40px; display: flex; flex-direction: column; /* overflow: hidden;*/
  opacity: 0; transform: translateY(0);  will-change: transform, opacity;}
.about__item:nth-child(odd) img { margin-bottom: 64px;}
.about__item.animated { opacity: 1; transform: translateY(0);}

.about__item:nth-child(even) { flex-direction: column-reverse; }
.about__item.odd {transform: translateY(100px); /* 아래에서 위로 올라옴 */}
.about__item.even { transform: translateY(-100px); /* 위에서 아래로 내려옴 */}

.about__item .content { height:50%; max-width: 500px; flex: 1; display: flex; align-items:center;}
.about__item .content h3 { font-size: 3rem; max-width: 250px; line-height:1; font-weight: 100; color: #fff; text-transform: uppercase;}
.about__item .content p { color: #cdcdcd !important; max-width: 100%; margin-top: 20px; }

.horizontal-scroll__section { position: relative; height: 350vh;  display:block; padding:0;}
.horizontal-scroll__wrapper { position: sticky; top: 0; left: 0; height: 100vh; width: 100vw; overflow: hidden;}
.horizontal-scroll__content { display: flex; padding: 80px; height: 100vh; width: 350vh; will-change: transform;}

.about__link {display: flex; flex-direction: column;  text-decoration: none;}
.img-wrapper { position: relative;  width: 500px;  height: 500px; overflow: hidden; /* 이미지 확대 시 영역 밖으로 안 나가게 */}
.img-wrapper img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;}
.img-wrapper .overlay {position: absolute;  top: 0; left: 0;  width: 100%; height: 100%;  background: rgba(0,0,0,0.4);  display: flex;  justify-content: center;
    align-items: center;   opacity: 0;  transition: opacity 0.3s ease;}
.img-wrapper .view-more {color: #fff; font-weight: bold; font-size: 18px; opacity: 0; transition: opacity 0.3s ease; z-index: 10;}

.hover-icon { display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; transition: opacity 0.3s ease;}
.hover-icon .plus {font-size:3rem; color: #fff; display: inline-block; transform: rotate(0deg); transition: transform 0.3s ease;}
.hover-icon .text { color: #fff; font-size:1.5rem; opacity: 0; transition: opacity 0.3s ease;  display: block;}

/* hover 효과 */
.img-wrapper:hover img {transform: scale(1.2);}
.img-wrapper:hover .overlay{ opacity: 1;}
.img-wrapper:hover .hover-icon {opacity: 1;}
.img-wrapper:hover .hover-icon .text {opacity: 1;}
.img-wrapper:hover .hover-icon .plus { animation: plus-wobble 0.5s ease forwards;}

@keyframes plus-wobble {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(15deg); }
    50%  { transform: rotate(-10deg); }
    75%  { transform: rotate(10deg); }
    100% { transform: rotate(0deg); }
}


/*=====================================
  Sections3. 커서 스타일
=====================================*/
.custom-cursor {
  position: fixed; top: 0; left: 0;
  width: 80px; height: 80px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  display: flex; align-items: center; justify-content: center; color: #fff;
  font-size: 0.8rem; font-weight: 500;
  pointer-events: none; mix-blend-mode: difference;
  z-index: 2000; transition: transform 0.2s ease, opacity 0.3s ease; opacity: 0.8;
}
.custom-cursor.active { transform: scale(1.3); opacity: 1;}


/*=====================================
  로케이션
=====================================*/

#location-section {padding:5%; background: #000; color: #fff;}
#location-section .location-container {display: flex; width: 100%; align-items: stretch; /* ✅ 자식이 부모 높이에 맞게 확장 */ gap: 7vw;}
.location-info{display: flex; flex-direction: column; justify-content: space-between; flex: 1; /* 부모 높이에 따라 유연하게 확장 */ min-height: 100%;    /* 최소한 공간 확보 */}
.location-info div h3{font-size:2rem; letter-spacing: -0.05rem; line-height: 1.2; font-weight: 100; text-transform: uppercase; }
.rolling-word { display:block; overflow:hidden;  position: relative;  width: 310px; /* 단어 길이에 맞게 조정 */   height: 1.5em;   overflow: hidden; }
.rolling-word span { font-size:3rem; display:block; transform: translateY(100%); position: absolute; left: 0;  top: 0;  width: 100%;  transform: translateY(100%); color:#d6601d; font-weight: 300;}
.location-info div.add{align-items:flex-end}
.location-info .location-title {font-size: 1.75rem; font-weight: 100; letter-spacing: 0.02em;}
.location-info .location-sub {font-size: 16px; color: #555; margin-bottom: 24px;}
.location-info .address,
.location-info .contact {margin-bottom: 20px;}

.location-map {position:relative; width: 1000px; height:100%; border:1px solid #d8d8d8;}
.location-map img {width: 100%; }
.location-map .btn_details{position:absolute; right:2%; bottom:2%; font-size:1.25rem; padding:5px 20px; border-radius:35px; border:1px solid #000; color:#000; margin:2px;
  text-decoration:none; transition:color 0.3s; animation:tracking-in-expand 0.7s cubic-bezier(0.215,0.61,0.355,1) both; }
.location-map .btn_details::after { content: " →"; justify-content:flex-end}
.location-map .btn_details.liquid {
  background: linear-gradient(#000 0 0) no-repeat calc(200% - var(--p, 0%)) 100% / 200% var(--p, 0.2em);
  transition: 0.3s var(--t, 0s), background-position 0.3s calc(0.3s - var(--t, 0s));}
.location-map .btn_details.liquid:hover { --p: 100%; --t: 0.3s; color: #fff;}

#location-section a,
#location-section a[href^="tel"],
#location-section a[href^="mailto"],
#location-section {
  text-decoration: none !important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -webkit-text-size-adjust: none;
  -webkit-text-decoration-skip: none;
}


/*=====================================
  프로젝트화면
=====================================*/
.animate { opacity:0; transform:translateY(50px); }

.project{width: 100%; height: auto; padding:0; display: flex; align-items: center; justify-content: center;background-color: #fff; z-index: 9; }
.project.full_main{position: relative; height: 90vh;}
.project.full_main .project_name{position: absolute; left:1%; top:8%; width: 30%; word-break: keep-all; text-align:left;}
.project.full_main .project_name h1{font-size: 2.5vw; font-weight: 700; line-height: 1.2; color:#000; letter-spacing: -0.25rem;}
.project img{width: 100%; height: auto; object-fit: cover;}

.project.comment{position: relative; min-height:50vh; display: flex; padding:5%;  color:#000;}
.project.comment div {flex:5;}
.project.comment .project_summary{display: flex; align-items: flex-end;flex-direction: column; gap:1rem; font-size:0.9rem;}
.project.comment .project_summary div{width: 80%;}
.project.comment .project_summary dl{display: flex; flex-wrap: wrap;border-top:2px solid #000; border-bottom:2px solid #000;   padding: 0.5rem 0; /* 상하 여백 */}
.project.comment .project_summary dl dt {flex: 1 1 20%; /* 최소 20%, 필요시 줄 바꿈 */ padding: 0.5% 0 0.5% 1%;  font-weight: 700;}
.project.comment .project_summary dl dd {flex: 3 1 75%; /* 최소 75%, 필요시 줄 바꿈 */ padding: 0.5%;  margin: 0; /* inline-block 제거 */}

.project.comment .project_summary p{ text-align: justify; line-height: 1.5; color:#666; margin-top:2rem}
.project.img_grid{display: grid; min-height:50vh; grid-template-columns: 1fr 1fr; padding:1%; gap: 1%;}

/* ================================
   프로젝트_헤더 INTERACTIVE CATEGORY
================================== */
.project-header.interactive {position: relative; width: 100%; padding: 2% 1%;}
.back_title_area h4 {font-size: 4vw; font-weight: 100; letter-spacing: -0.02em; margin-bottom: 10px;  color:#fff;}

/* 카테고리 - 라인 + 버튼 그룹 */
.project-category.interactive-line {position: relative; display: flex; flex-wrap: wrap; gap: 30px; padding-top: 0; opacity: 0; transform: translateY(20px); margin-left: 5px;}
.project-category.interactive-line::before { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 0; background: #000; transform-origin: left;}

/* 버튼 스타일 */
.project-category.interactive-line .btn {  position: relative; background: none; border: none; font-size: 1rem; text-transform: uppercase; color: #777; cursor: pointer; transition: color 0.3s ease;}
.project-category.interactive-line .btn::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0; background: #fff; transition: width 0.4s ease;}
.project-category.interactive-line .project-count { margin-left:2px; font-size:0.75rem; font-weight:500; color:#555;}
.project-category.interactive-line .btn:hover::after,
.project-category.interactive-line .btn.active::after {width: 100%;}
.project-category.interactive-line .btn:hover,
.project-category.interactive-line .btn.active {color: #fff;}


/*=====================================
  프로젝트 썸네일 갤러리 project.php
=====================================*/
.project-gallery { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; padding:20px;}

.project-item {position:relative; width:100%; padding-top:100%; overflow:hidden; opacity:0; transform:translateY(50px); transition:transform 0.6s ease, opacity 0.6s ease;  background:#eaeaea;}
.project-item img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; transition: transform 0.5s ease;}

/* 오버레이 */
.project-overlay {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.35); display:flex; justify-content:center; align-items:center; opacity:0; transition:opacity 0.3s ease; z-index:5;}
.project-hover-icon {display:flex; flex-direction:column; align-items:center; gap:8px; opacity:0; transition:opacity 0.3s ease;}
.project-hover-icon .project-plus { font-size:3rem; color:#fff; transform:rotate(0deg); transition:transform 0.3s ease; }
.project-hover-icon .project-text { color:#fff; font-size:1.25rem; opacity:0; transition:opacity 0.3s ease; text-align:center; width: 80%; word-break: keep-all;   }

.project-item:hover img { transform:scale(1.15); }
.project-item:hover .project-overlay { opacity:1; }
.project-item:hover .project-hover-icon { opacity:1; }
.project-item:hover .project-hover-icon .project-text { opacity:1; }
.project-item:hover .project-hover-icon .project-plus { animation:project-plus-wobble 0.5s ease forwards; }
.project-item.show { opacity:1; transform:translateY(0); }
.project-title-mobile { display:none; }

@keyframes project-plus-wobble { 
  0%{transform:rotate(0deg);} 
  25%{transform:rotate(15deg);} 
  50%{transform:rotate(-10deg);} 
  75%{transform:rotate(10deg);} 
  100%{transform:rotate(0deg);} 
}

/*=====================================
  프로젝트 디테일 project_detail.php
=====================================*/

.proj-hero { position: relative; width: 100%; height: 100vh; display: flex; justify-content: flex-start; align-items: flex-start; /* 💡 위로 붙임 */ overflow: hidden; margin: 0; padding:0;}
.proj-hero img {width: 100%; height: 100%; object-fit: cover;}
.proj-hero h1 {position: absolute; left: 6%; top: 40%; font-size: clamp(35px, 5vw, 70px); font-weight: 200; line-height: 1; letter-spacing: -0.02em; color: #000; margin: 0;  z-index: 5; letter-spacing: -0.25rem;}
.proj-hero video { position: absolute; top: 0;/* 💡 화면 최상단에 딱 붙음 */ left: 0;  width: 100%;  height: 100%;  object-fit: cover;       /* 💡 꽉 채우기 (잘림 방지) */  z-index: 0;}

/* ============== 프로젝트 디테일_ 상단 마우스 Scroll indicator ============== */
.mouse-scroll {position: absolute; top: 50px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center;  gap: 5px;  z-index: 10;  opacity: 0.9;}
.mouse-scroll .mouse { width: 23px; height: 37px; border: 1px solid #000; border-radius: 16px; position: relative;}
.mouse-scroll .wheel { width: 2px; height: 6px; border-radius: 2px;  background:#000; margin: 6px auto 0; animation: wheelDown 1.6s ease-in-out infinite;}
.mouse-scroll .scroll-text { font-size: 10px; color:#000; text-transform: uppercase;}
@keyframes wheelDown {
  0% { transform: translateY(0); opacity:1; }
  70% { transform: translateY(12px); opacity:0; }
  100% { transform: translateY(0); opacity:0; }
}

/* ============== 프로젝트 디테일_ Sections (Left/Center/Right) ============== */
.proj-left,
.proj-center,
.proj-right {position: relative; display: flex; align-items: center; gap: 48px; padding: 5%; min-height: 92vh; /* 살짝 여유 */}

/* 공통 이미지 스타일 */
.proj-left img,
.proj-center img { width: 100%; height: 72vh; object-fit: cover; display: block; opacity: 1;}

/* ========== LEFT: 이미지 좌측 / 텍스트 하단 정렬 ========== */
.proj-left { justify-content: space-between;}
.proj-left .img-wrap { flex: 1.05;}
.proj-left .text-block { flex: 0.95; display: flex; flex-direction: column; justify-content: flex-end;  min-height: 72vh; padding-bottom: 8px; }
.proj-left h2 {font-size: clamp(56px, 5vw, 200px); line-height: 1; font-weight: 100; letter-spacing: -0.05em; margin: 0 0 16px; color: #CDCDCD;}
.proj-left p { max-width: 560px; font-size: 15px; line-height: 1.5; color: #777; text-align: justify; margin: 0;}

/* ========== CENTER: 중앙 이미지 + 오버레이 타이틀 ========== */
.proj-center { flex-direction: column;}
.proj-center img { width: 80%; height: 72vh; margin: 0 auto;}
.proj-center h2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -52%); font-size: clamp(48px, 6vw, 80px); font-weight: 100; letter-spacing: -0.02em;
  color: rgba(255,255,255,0.95); mix-blend-mode: overlay; margin: 0; text-transform: uppercase;}
.proj-center .desc { position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); font-size: 14px; letter-spacing: 0.02em; color: #fff;  opacity: 0.9;  text-align: center;}

/* ========== RIGHT: 이미지 우측 / 텍스트 오버레이 ========== */
.proj-right {justify-content: flex-end;}
/*.proj-right img { width: 58%; margin-left: auto;}*/
.proj-right .text { position: absolute; right: 21%; bottom: 18%; max-width: 520px; color: #111;}
.proj-right h2 { font-size: clamp(40px, 4.6vw, 84px); font-weight: 100; line-height: 1;  margin: 0;  color:#fff;}

/* ============== FACTS ============== */
.proj-facts { max-width: 500px; margin: 160px auto 200px; border-top: 1px solid #666; display: grid; grid-template-columns: 160px 1fr; column-gap: 30px; row-gap: 8px; font-size: 0.75rem; padding-top: 25px;}
.proj-facts > div:nth-child(odd) { color: #f5f5f5; text-transform: uppercase; letter-spacing: 0.05em;}
.proj-facts > div:nth-child(even) {color: #ccc;}

/* ============== OUTRO ============== */
.proj-outro { background: #333; color: #fff; text-align: center; padding: 100px 60px;}
.proj-outro h3 { font-size: clamp(25px, 6vw, 60px); margin-bottom: 20px; font-weight: 100;}
.proj-outro p { font-size: 12px; color: #aaa; letter-spacing: 0.4px; line-height: 1; margin: 0;}

/* ============== Fixed info strip ============== */
.info-strip { position: fixed; top: 0; left: 0; width: 100%; background: #000; color: #fff; font-size: 11px; text-transform: uppercase; padding: 6px 0; text-align: center; opacity: 0.85; z-index: 9999;}
.noResult{text-align: center; font-weight: 100; padding:2rem; font-size: 2rem;}


/* ✅ 기본 이미지 / 비디오 공통 설정 */
.proj-left .img-wrap {position: relative; width: 100%; height: 100%; overflow: hidden;}

.proj-left .img-wrap img,
.proj-left .img-wrap video { width: 100%; height: 100%; object-fit: cover; /* 이미지·영상 모두 영역 꽉 채우기 */ display: block; transition: transform 1.2s ease, opacity 0.6s ease;}

/* ✅ 등장 애니메이션 효과 (선택) */
.proj-left .img-wrap img.show,
.proj-left .img-wrap video.show { opacity: 1; transform: scale(1);}

/* ✅ 로드 전 약간의 페이드/확대 효과 */
.proj-left .img-wrap img,
.proj-left .img-wrap video { opacity: 0; transform: scale(1.05);}

/* ✅ poster 이미지가 있을 때도 자연스럽게 */
.proj-left video { background-color: #000; /* 로딩 시 어두운 배경 */ border-radius: inherit;}