/* project_view_chungnam.css — project_view_chungnam.html 전용 오버라이드.
   project_view.css의 공통 project_view_* 패턴 위에 충남대학교 페이지만 다른 부분만 여기서 재정의한다.
   이 파일은 project_view_chungnam.html에서만 로드되므로 .project_view_chungnam 접두어 없이 바로 써도 된다.

   현재는 모바일 앱 프로젝트라 contents04(PC/MOBILE 비교) 섹션 자체를 생략했고, contents03도
   다른 프로젝트와 공유하는 범용 클래스(.project_view_contents03_inner_showcase)를 그대로 쓰고 있다 */

/* contents03 — 좌우 여백 없이 화면 끝까지 붙던 걸 15px씩 띄운다 */
.project_view_contents03{padding:0 15px;}
.view_list_wrap { display: flex; max-width: 1715px;margin: 0 auto;padding: 0 15px; flex-direction: column; margin-bottom: 100px;}
.view_list_wrap a.explore_all_btn { margin-bottom: 0;}


/* contents03 showcase num — 01/02/03 큰 숫자를 개별 left 좌표 대신 각자의 showcase_col을 기준으로
   가운데 정렬한다. showcase_col에 position:relative를 줘서 숫자의 위치 기준을 컬럼 자신으로 좁힌다 */
.project_view_contents03_showcase_col{position:relative;}
.project_view_contents03_showcase_num{display:block;position:absolute;left:50%;top:-115px;transform:translateX(-50%);font-family:'Zalando Sans Expanded',sans-serif;font-weight:900;font-size:140px;line-height:128px;letter-spacing:-0.04em;color:rgba(91,79,63,0.08);text-align:right;text-transform:uppercase;}

/* contents02 media — One Campus, One APP. 표준 2장짜리 shot_row 대신 앱 스크린샷 4장을 나란히 배치한다.
   각 스크린샷 실제 비율이 서로 달라 높이를 억지로 맞추지 않고 project_view_contents02_img의 기본 height:auto를
   그대로 살려서(245px 너비만 고정) 계단식으로 떨어지게 두고, 가장 긴 3번째 화면만 아래쪽에
   project_view_contents02_shot_fade(공용 그라디언트 페이드 클래스)로 배경에 자연스럽게 녹아들게 한다 */
.project_view_contents02_shot_row{width:1031px;align-items:flex-start;}
.project_view_contents02_shot_row_item{position:relative;width:245px;flex-shrink:0;}

.project_view_contents03{padding:0 15px;display:block;align-items:normal;position:relative;top:auto;overflow:hidden;height:auto;min-height:0;}
.project_view_contents03_showcase_divider{display:none;} /* span 자체는 안 씀 */

.project_view_contents03_showcase_divider + .project_view_contents03_showcase_col{position:relative;}
.project_view_contents03_showcase_divider + .project_view_contents03_showcase_col::before{
  content:'';
  position:absolute;
  top:0;
  left:-90px; /* gap(180px)의 절반만큼 왼쪽으로 — 컬럼 사이 정중앙 */
  width:1px;
  height:90%;
  background:#dedede;
}

/* 반응형(1025~1920px) — vw = px / 1920 * 100 */
@media screen and (min-width:1025px) and (max-width:1920px){
  .project_view_contents02_shot_row{width:53.6979vw;}
  .project_view_contents02_shot_row_item{width:12.7604vw;}
  .project_view_contents03_showcase_num{top:-5.9896vw;font-size:7.2917vw;line-height:6.6667vw;}
}

/* 모바일(max-width:1024px) — 4장을 한 줄에 다 못 넣으니 2x2로 접는다.
   기본 모바일 규칙(.project_view_contents02_shot_row .project_view_contents02_img{width:calc(50% - 8.5px)})은
   img가 shot_row 바로 아래 있던 2장짜리 구성 기준이라, 여기서는 wrapper(shot_row_item)가 이미 50%를 잡고 있으므로
   img는 그 안에서 100%를 채우도록 다시 재정의해야 50%의 50%로 줄어드는 걸 막을 수 있다 */
@media (max-width:1024px){
  .project_view_contents02_shot_row{flex-wrap:wrap;width:100%;gap:15px;}
  .project_view_contents02_shot_row_item{width:calc(50% - 7.5px);}
  .project_view_contents02_shot_row_item .project_view_contents02_img{width:100%;flex-shrink:0;}
  .project_view_contents03_showcase{gap: 150px;}
  .project_view_contents03_inner_showcase{padding: 150px 0;}
  .project_view_contents03_showcase_text {margin-top: 40px;gap: 10px;}

}

a.explore_all_btn { max-width: 1715px; margin: 0 auto; margin-bottom: 100px;}


/* contents03 showcase — 스택(핀+스크럽 겹침) 대신, 3개 화면이 나란히 정적으로 배치되고 스크롤에 따라 하나씩 떠오른다 */
.project_view_contents03_inner_showcase{height:auto;padding-bottom:160px;}
.project_view_contents03_showcase{display:flex;position:relative;justify-content:center;gap:180px;padding-top:278px;}
.project_view_contents03_showcase_col{display:flex;width:33.33%;flex-direction:column;align-items:center;gap:50px;}
.project_view_contents03_showcase_shot{overflow:hidden;width:359px;height:739px;}
.project_view_contents03_showcase_img{display:block;width:100%;height:100%;object-fit:cover;}
.project_view_contents03_showcase_text{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;}
.project_view_contents03_showcase_tit{font-family:'Pretendard',sans-serif;font-weight:800;font-size:20px;line-height:1.35;letter-spacing:-0.04em;color:#193d74;}
.project_view_contents03_showcase_desc{width:380px;font-family:'Pretendard',sans-serif;font-weight:500;font-size:16px;line-height:1.5;letter-spacing:-0.03em;color:#666666;}

@media screen and (min-width:1025px) and (max-width:1920px){
  .project_view_contents03_inner_showcase{padding-bottom:8.3333vw;}
  .project_view_contents03_showcase{gap:9.375vw;padding-top:14.4792vw;}
  .project_view_contents03_showcase_col{width:18.2292vw;gap:2.6042vw;}
  .project_view_contents03_showcase_shot{width:18.6979vw;height:38.4896vw;}
  .project_view_contents03_showcase_tit{font-size:1.0417vw;}
  .project_view_contents03_showcase_desc{width:19.7917vw;font-size:0.8333vw;}
}

@media (max-width:1024px){
  .project_view_contents03_inner_showcase{height:auto;padding:60px 0;}
  .project_view_contents03_showcase{flex-direction:column;gap:60px;padding-top:0;}
  .project_view_contents03_showcase_col{width:100%;gap:0;}
  .project_view_contents03_showcase_shot{ width: 359px; height: 740px; aspect-ratio: 49 / 101;margin:0 auto;}
    .project_view_contents03_showcase_shot img { width: 100%;height: 100%; object-fit: cover;}
  .project_view_contents03_showcase_num{position:static;transform:none;text-align:center;font-size:80px;line-height:1;}
  .project_view_contents03_showcase_desc{width:100%;}
}

.project_view_contents03{padding:0 15px;}
.project_view_contents03_showcase_col{position:relative;}
.project_view_contents03_showcase_num{display:block;position:absolute;left:50%;top:-115px;transform:translateX(-50%);font-family:'Zalando Sans Expanded',sans-serif;font-weight:900;font-size:140px;line-height:128px;letter-spacing:-0.04em;color:rgba(91,79,63,0.08);text-align:right;text-transform:uppercase;}

@media screen and (min-width:1025px) and (max-width:1920px){
  .project_view_contents03_showcase_num{top:-5.9896vw;font-size:7.2917vw;line-height:6.6667vw;}
}

@media (max-width:1024px){
  .project_view_contents03_showcase{gap:150px;}
  .project_view_contents03_inner_showcase{padding:150px 0; margin: 0;}
  .project_view_contents03_showcase_text{margin-top:40px;gap:10px;}
   .project_view_contents03_showcase_num {font-size: 110px;top: -105px;}
   .project_view_contents02_text {margin: 0; }
    
}
@media (max-width: 760px) {
.project_view_contents03_showcase_text { width: 100%; }
.project_view_contents02_detail {text-align: center;word-break: keep-all;}
.project_view_contents02_detail br { display: none;}
    
}