@import url('/comm/css/sub.css');



/* 리스트 */
.main_project{display:flex; flex-direction:column; align-items:center; gap:50px;}
.project_tit{display:flex; align-items:center; gap:15px;}
.project_logo{display:block; width:166px; height:auto; flex-shrink:0; filter:brightness(0) invert(1);}
.project_tit_txt{color:var(--white); opacity:0.5;}
.project_grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; width:100%; }
.project_item{position:relative; height:auto; aspect-ratio:395/510; overflow:hidden; background:var(--bk000);}
/* 12개 주기: 2-1-1 / 1-1-2 / 1-2-1 / 1-1-2 */
.project_item:nth-child(12n+1), .project_item:nth-child(12n+6), .project_item:nth-child(12n+8), .project_item:nth-child(12n){grid-column:span 2; aspect-ratio:800/510;}
/* 행에 혼자 남은 마지막 아이템 — 원래 비율 유지하며 가로 꽉 채움 */
.project_item:last-child:nth-child(12n+1){grid-column:1 / -1; aspect-ratio:800/510;}
.project_item:last-child:nth-child(12n+4), .project_item:last-child:nth-child(12n+7), .project_item:last-child:nth-child(12n+10){grid-column:1 / -1; aspect-ratio:395/510;}
.project_link{display:block; position:relative; width:100%; height:100%; overflow:hidden;}
.project_img{position:absolute; inset:0; width:100%; height:100%; overflow:hidden;}
.project_img::after{content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,0) 45%, var(--bk000)); opacity:0.3; z-index:1; pointer-events:none;}
.project_img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1); transition:transform 1s;}
/* 기본: 세로형 노출 / 가로형 숨김 — PC·모바일 그리드 규칙에 맞춰 nth-child로 전환 */
.project_img_land{display:none;}
.project_img_tall{display:block;}
.project_item:nth-child(12n+1) .project_img_land,
.project_item:nth-child(12n+6) .project_img_land,
.project_item:nth-child(12n+8) .project_img_land,
.project_item:nth-child(12n) .project_img_land{display:block;}
.project_item:nth-child(12n+1) .project_img_tall,
.project_item:nth-child(12n+6) .project_img_tall,
.project_item:nth-child(12n+8) .project_img_tall,
.project_item:nth-child(12n) .project_img_tall{display:none;}
.project_item:hover .project_img img{transform:scale(1.08); transition:transform 2.5s cubic-bezier(0.25,0.1,0.25,1);}
.project_hover{position:absolute; inset:-1px; z-index:2; display:flex; gap:30px; align-items:flex-end; justify-content:space-between; padding:50px; background:rgba(42,41,36,0.8); opacity:0; transition:opacity 0.5s; backface-visibility:hidden; -webkit-backface-visibility:hidden; transform:translateZ(0);}
.project_item:hover .project_hover, .project_item:focus-within .project_hover{opacity:1; transition:opacity 0.5s cubic-bezier(0.215,0.61,0.355,1);}
.project_link:focus-visible{outline:2px solid var(--white); outline-offset:-4px;}
.project_info{display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:0; flex:1; color:var(--white);}
.project_name{display:block; max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; line-height:130%;}
.project_year{display:block; opacity:0.5; line-height: 140%;}
.project_ico{flex-shrink:0; width:36px; height:36px;}
.project_ico::before{content:"add_2"; font-family:var(--icon); font-size:36px; color:var(--white); line-height:36px; font-weight:200;}
.project_paging{width:100%; padding:40px 0 0; box-sizing:border-box;}
.project_paging .page_num{padding:0;}


@media (prefers-reduced-motion:reduce){.project_img img, .project_hover{transition:none;}}






/* 뷰 */
.pro_view{display:flex; flex-direction:column; align-items:center; gap:60px; padding:150px 0 200px; box-sizing:border-box; position:relative; z-index:2;}
.pro_view_top{display:flex; flex-direction:column; align-items:center; gap:60px;}
.pro_view_head{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;}
.pro_view_tit{text-transform:uppercase; color:var(--white);}
.pro_view_meta{display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap;}
.pro_view_meta_txt{color:var(--white); opacity:0.6;}
.pro_view_meta_bar{width:1px; height:16px; background:var(--white); opacity:0.2; flex-shrink:0;}

.pro_view_hero{width:100%; box-sizing:border-box;}
.pro_view_hero_in{width:100%; height:100%; aspect-ratio: 1920/1080; overflow: hidden;}
.pro_view_hero_in img{width:100%; height:100%; object-fit:cover; display:block;}

.pro_view_more{display:flex; justify-content:center; width:100%;}
.pro_view_more .more-btn .more-txt{text-transform: uppercase;}
.pro_view_more .more-ico::after {content:"\e25d";}



.pro_view_project{display:flex; flex-direction:column; align-items:center; gap:50px; box-sizing:border-box;}
.pro_view_gallery { width: 100%; }
.pro_view_gallery .pro_view_gitem a { display: block; width: 100%; overflow: hidden; }
.pro_view_gallery .pro_view_gitem--land a { aspect-ratio: 531/354; height: auto; }
.pro_view_gallery .pro_view_gitem--tall a { aspect-ratio: 530/718; height: auto; }
.pro_view_gallery .pro_view_gitem a img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- PC 해상도 (기본 3단, 간격 10px) --- */
.pro_view_gallery .grid-sizer,
.pro_view_gallery .pro_view_gitem { width: calc((100% - 20px) / 3); margin-bottom: 10px; opacity: 0;}
.pro_view_gallery .gutter-sizer { width: 10px; } 

/* --- 모바일 해상도 680px 미만 (기본 3단 유지, 간격 5px) --- */
@media (max-width: 680px) {
    /* 간격이 5px 2개(10px)로 줄었으므로 빼는 값도 10px로 변경 */
    .pro_view_gallery .grid-sizer,
    .pro_view_gallery .pro_view_gitem { width: calc((100% - 10px) / 2); margin-bottom: 5px; }
    .pro_view_gallery .gutter-sizer { width: 5px; }
}


/* PhotoSwipe — Material Symbols (prd view) */
.pswp--pro-view .pswp__button {display:flex; align-items:center; justify-content:center; transition: opacity 0.2s ease;}

/* JS에 포함된 기본 SVG 아이콘 숨기기 */
.pswp--pro-view .pswp__button .pswp__icn {display:none;}

/* 이전 / 다음 / 닫기 버튼 */
.pswp--pro-view .pswp__button--arrow--prev::before {content:'\e5c4'; display:block; font-family:var(--icon); font-size:32px; line-height:32px; font-weight:300; color:var(--white);}
.pswp--pro-view .pswp__button--arrow--next::before {content:'\e5c8'; display:block; font-family:var(--icon); font-size:32px; line-height:32px; font-weight:300; color:var(--white);}
.pswp--pro-view .pswp__button--close::before {content:'\e5cd'; display:block; font-family:var(--icon); font-size:28px; line-height:28px; font-weight:300; color:var(--white);}

/* --- 커스텀 버튼 아이콘 맵핑 --- */
/* 초기화(화면맞춤) 아이콘: 겹친 사각형(content_copy) 또는 화면맞춤 아이콘 유니코드 입력 */
.pswp--pro-view .pswp__button--reset-button::before {content:'\e14d'; display:block; font-family:var(--icon); font-size:26px; line-height:26px; font-weight:300; color:var(--white);}

/* 축소 / 확대 아이콘 */
.pswp--pro-view .pswp__button--zoom-out-button::before {content:'\e900'; display:block; font-family:var(--icon); font-size:28px; line-height:28px; font-weight:300; color:var(--white);}
.pswp--pro-view .pswp__button--zoom-in-button::before {content:'\e8ff'; display:block; font-family:var(--icon); font-size:28px; line-height:28px; font-weight:300; color:var(--white);}

/* --- 버튼 비활성화(투명도) 클래스 --- */
.pswp--pro-view .is-disabled {
    opacity: 0.3 !important; /* 30% 투명도 (원하는 수치로 조절 가능) */
    pointer-events: none;    /* 클릭 방지 */
    cursor: default;         /* 마우스 커서 기본 모양으로 변경 */
}

/* 카운터 및 커서 설정 */
/* 카운터 설정 뒤에 이어서 추가 */
.pswp--pro-view .pswp__counter {font-family:var(--eng); font-size:0.778rem; font-weight:400; line-height:171.43%; letter-spacing:0.56px; color:var(--white);}

/* --- 수정된 커서 설정 --- */
/* PhotoSwipe — Material Symbols (prd view) - 커서 최종 설정 */

/* 1. 이미지 호버/대기 상태: 펼친 손바닥 (Grab) */
/* 확대 전/후 상관없이 이미지 위에 마우스를 올리면 펼친 손바닥이 나옵니다. */
.pswp--pro-view .pswp__img,
.pswp--pro-view.pswp--zoomed-in .pswp__img,
.pswp--pro-view .pswp__img:hover {
    cursor: -webkit-grab !important;
    cursor: -moz-grab !important;
    cursor: grab !important;
}

/* 2. 마우스 클릭 및 드래그 중: 움켜쥔 손바닥 (Grabbing) */
/* 마우스 왼쪽 버튼을 꾹 누르고 움직일 때 커서가 바뀝니다. */
.pswp--pro-view.pswp--dragging .pswp__img,
.pswp--pro-view .pswp__img:active {
    cursor: -webkit-grabbing !important;
    cursor: -moz-grabbing !important;
    cursor: grabbing !important;
}


/*******************************************************************************
    @media 1760px
*******************************************************************************/
@media all and (max-width:1760px){


}
/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){

/* 리스트 */
.project_hover{padding:40px;}



}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){






/* 리스트 */
.project_hover{gap:20px; padding:30px;}
.project_ico{width:30px; height:30px;}
.project_ico::before{font-size:30px; line-height:30px;}


/* 뷰 */
.pro_view{padding:120px 0 150px;}


}
/*******************************************************************************
    @media  ~980px
*******************************************************************************/
@media all and (max-width:980px){






/* 리스트 */
.main_project{gap:35px;}
.project_tit{gap:10px;}
.project_logo{width:140px;}
.project_grid{grid-template-columns:repeat(2, 1fr); gap:8px;}
.project_item{grid-column:span 1; height:auto; aspect-ratio:189/244;}
/* 모바일 12개 주기: 2 / 1-1 / 1-1 / 2 / 3 / 2 / 3 / 1-1 / 2 */
.project_item:nth-child(12n+1), .project_item:nth-child(12n+6), .project_item:nth-child(12n+8), .project_item:nth-child(12n){grid-column:span 2; aspect-ratio:380/243;}
.project_item:nth-child(12n+7), .project_item:nth-child(12n+9){grid-column:span 2; aspect-ratio:189/244;}
/* PC last-child 덮어쓰기 + 짝 없이 혼자 남은 마지막 아이템 */
.project_item:last-child:nth-child(12n+1), .project_item:last-child:nth-child(12n+6), .project_item:last-child:nth-child(12n+8), .project_item:last-child:nth-child(12n){grid-column:span 2; aspect-ratio:380/243;}
.project_item:last-child:nth-child(12n+7), .project_item:last-child:nth-child(12n+9){grid-column:span 2; aspect-ratio:189/244;}
.project_item:last-child:nth-child(12n+2), .project_item:last-child:nth-child(12n+4), .project_item:last-child:nth-child(12n+10){grid-column:span 2; aspect-ratio:189/244;}
.project_hover{padding:25px;}

/* 뷰 */
.pro_view{padding:100px 0 120px; gap:40px;}
.pro_view_top{gap:40px;}
.pro_view_head{gap: 5px;}
.pro_view_gallery{grid-template-columns:repeat(2, minmax(0, 1fr)); --pro-view-cell-w:calc((100% - 10px) / 2);}
.pro_view_gallery .pro_view_gitem--tall{grid-row:span 2;}
.pro_view_gallery .pro_view_gitem--tall a{aspect-ratio:530/718;}


}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){


/* 리스트 */
.main_project{gap:20px;}
.project_logo{width:116px;}
.project_hover{padding:20px; gap:10px;}
.project_ico{width:17px; height:17px;}
.project_ico::before{font-size:17px; line-height:17px;}


/* 뷰 */
.pro_view{padding:80px 0; gap:30px;}
.pro_view_top{gap:30px;}

.pro_view_meta{gap:10px;}
.pro_view_meta_bar{height:12px;}
.pro_view_gallery{grid-template-columns:1fr; --pro-view-cell-w:100%; grid-auto-rows:auto;}
.pro_view_gallery .pro_view_gitem--tall{grid-row:span 1;}
.pro_view_gallery .pro_view_gitem--land a{aspect-ratio:531/354;}
.pro_view_gallery .pro_view_gitem--tall a{aspect-ratio:530/718;}
}