/* 이 코드는 portrait, project, stage template page 전용코드 */

/* =========================
   0) 네비 높이·타이포 변수
   ========================= */
:root {
  --nav-font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.25rem);
  --nav-line-height: 1.25;
  --nav-menu-count: 4;
  --nav-content-height: calc(var(--wf-grid-gutter) + (var(--nav-font-size) * var(--nav-line-height) * var(--nav-menu-count)));
}

/* =========================
   1) 페이지 래퍼
   ========================= */
.page-wrapper.gallery-shell {
  /* 기존: height: 100svh;  → 네비 높이 차감 버전 유지 */
  height: calc(100svh - var(--nav-content-height));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* 콘텐츠를 페이지 하단으로 밀기 */
  overflow: hidden;
  /* 셸 바깥으로 넘치는 것 숨김 */
}

/* =========================
   2) 네비 바
   ========================= */
.nav-bar {
  padding-block: calc(var(--wf-grid-gutter) / 2);
  font-size: var(--nav-font-size);
  line-height: var(--nav-line-height);
  box-sizing: border-box;
}

/* =========================
   3) 갤러리 레이아웃(그리드 부모)
   =========================
   - margin-top: auto; → 페이지 래퍼 안에서 그리드를 아래로 밀기
   - align-items: stretch; → row 높이를 viewer가 주도하도록 두고, 두 컬럼을 동일한 트랙 높이로 강제
   - max-height: calc(100svh - 네비 높이) → grid 자체가 래퍼 높이를 초과하지 않도록 제한
*/
.gallery-layout>.wf-grid {
  margin-top: auto;
  /* flex 부모(.page-wrapper.gallery-shell)에서 아래로 밀기 */
  align-items: stretch;
  /* viewer가 만든 row 높이를 thumbs에도 동일하게 적용 */
  height: 100%;
  max-height: calc(100svh - var(--nav-content-height));
  min-height: 0;
  /* 내부 아이템들이 overflow 제어를 사용할 수 있도록 */
  /* .wf-grid 자체의 display/grid 설정은 프로젝트 전역 규칙을 따른다고 가정 */
}

/* =========================
   4) 썸네일 & 뷰어 공통
   =========================
   - align-self: stretch로 개별 컬럼을 동일한 row 높이에 고정
   - 그리드 row 높이는 주로 viewer의 1:1 비율이 결정하도록 둔다
*/
.gallery-thumbs,
.gallery-viewer {
  padding-bottom: var(--wf-grid-gutter);
  box-sizing: border-box;
  align-self: stretch;
  /* 각 컬럼을 동일한 row 높이에 고정 */
  max-height: 100%;
  /* grid 높이 한계 안에서만 성장 */
  min-height: 0;
}

/* =========================
   5) 뷰어
   ========================= */
.gallery-viewer {
  align-self: stretch;
  /* row 높이와 동일하게 유지해 thumbs와 top 라인 동기화 */
  display: flex;
  justify-content: flex-end;
  /* span-6일 때 오른쪽 여백 유지 (필요시 조정 가능) */
  max-height: 100%;
  width: 100%;
  /* 그리드 span 폭을 그대로 따라 서브픽셀 틈 방지 */
  overflow: hidden;
  /* 슬라이드 이동 시 잔상 숨김 */
  /* stretch 상태에서 viewer의 1:1 비율이 전체 row 높이를 결정 */
}

/* 1:1 프레임 유지 */
.gallery-viewer-frame {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  max-height: calc(100svh - var(--nav-content-height) - var(--wf-grid-gutter) + 8px);
  /* Chrome에서 address bar로 줄어든 svh 보정값(+8px) */
  max-width: calc(100svh - var(--nav-content-height) - var(--wf-grid-gutter));
  /* 정사각형이 wrapper 높이를 넘지 않도록 폭도 동일 값으로 제한 */
  overflow: hidden;
  /* 내부에서 다음 슬라이드가 살짝 보여도 잘라냄 */
}

/* =========================
   6) 썸네일(윗선 맞춤 + 내부 스크롤)
   =========================
   핵심 포인트:
   - 그리드(.wf-grid)는 align-items:stretch → thumbs / viewer가 동일한 row 높이 공유
   - thumbs는 해당 row 높이 안에서만 꽉 차게 쓰고, 내용이 넘치면 내부에서만 스크롤
*/
.gallery-thumbs {
  /* 그리드 row 높이(=viewer가 만드는 높이)를 그대로 사용 */
  height: 100%;
  max-height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* 내부 콘텐츠는 위에서부터 */
  overflow: auto;
  /* 썸네일이 넘치면 자체 스크롤 */
}

/* (선택) 썸네일 내부 리스트가 있다면 적절히 한정 가능
.gallery-thumbs .thumbs-list {
  max-height: 100%;
  overflow: auto;
}
*/

/* -------------------------------------------------------------------------
   모바일 전용 높이 완화 (≤767.98px)
   - Shell의 고정 높이·max-height를 풀어 스택 레이아웃에서 잘리는 문제 방지
   - 기존 데스크톱 스타일은 그대로 유지
   ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

  /* 래퍼를 자동 높이로 전환 */
  .page-wrapper.gallery-shell {
    height: auto;
    min-height: auto;
  }

  /* 그리드 높이 제약 해제 + 위쪽부터 배치 */
  .gallery-layout>.wf-grid {
    height: auto;
    max-height: none;
    align-items: flex-start;
  }

  /* 뷰어 컬럼의 max-height/overflow 잠금 해제 */
  .gallery-viewer {
    max-height: none;
    height: auto;
    overflow: visible;
    justify-content: flex-start;
    /* 모바일에서는 좌측 정렬 */
  }

  /* 뷰어 프레임의 최대 높이/폭 제한 해제 */
  .gallery-viewer-frame {
    max-height: none;
    max-width: 100%;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    /* 1:1 고정 해제 */
  }

  /* 썸네일 컬럼도 고정 높이 해제 */
  .gallery-thumbs {
    height: auto;
    max-height: none;
    overflow: visible;
  }
}

/* -------------------------------------------------------------------------
   모바일 전용: 1:1 프레임 복구 + 네비 높이만큼 상단 여백 확보
   - 기존 완화 스타일 위에 덮어써서 자르지 않으면서도 정사각 비율 유지
   - 네비 영역과 겹치지 않도록 페이지 래퍼 상단에 패딩 추가
   ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

  /* 네비 높이만큼 위에서 떨어뜨려 로고/햄버거와 겹침 방지 */
  .page-wrapper.gallery-shell {
    padding-top: var(--nav-content-height);
    box-sizing: border-box;
  }

  /* 모바일에서도 정사각 비율 유지, 최대 높이는 여유 있게 제한 */
  .gallery-viewer-frame {
    aspect-ratio: 1 / 1;
    max-height: calc(100svh - var(--nav-content-height) - var(--wf-grid-gutter));
    max-width: 100%;
  }
}