/* =============================
   0) 기본 리셋/레이아웃 정리
   ============================= */
html, body { height: 100%; margin: 0; }
body { overflow-x: hidden; }

/* 1) 이 페이지(홈)에서만 헤더/푸터를 투명 오버레이로 고정 */
.masthead,
.masthead .wrap,
.masthead .greedy-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  z-index: 200;
  padding: 1rem 1rem;
}
.page__footer {
  background-color: transparent !important;
  box-shadow: none !important;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 200;
  padding: 1rem 1rem;
}
/* 헤더/푸터 텍스트 대비 */
.masthead, .masthead a,
.page-footer, .page-footer a, .page__footer-copyright {
  color: #ffffff !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.4);
}

/* 2) 본문 풀블리드 */
.page, .page__inner-wrap, .page__content, .initial-content {
  margin: 0 !important; padding: 0 !important; max-width: none !important; box-shadow: none !important;
}
.archive { margin: 0 !important; padding: 0 !important; }
#page-title, .breadcrumbs, .sidebar { display: none !important; }

/* =============================
   3) 인터랙티브 sticky 씬
   ============================= */
/* sticky 캔버스 */
.scroll-track {
  height: 300vh;  /* 씬 전환 수 만큼 늘리기 (씬 3개면 300vh 추천) */
}

.sticky-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: visible;
  background: linear-gradient(#bee6ff,#71c9ff);
}

/* stage를 2컬럼 grid로 고정 */
.stage {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;  /* 왼쪽: 프레임, 오른쪽: 텍스트 */
  align-items: center;
  width: 100%;
  height: 100%;
  padding-inline: clamp(12px, 3vw, 40px);
  box-sizing: border-box;
}

/* 프레임은 비율 유지하면서 자동 확대/축소 */
.frame {
  aspect-ratio: 9 / 16;
  width: 100%;     /* grid 비율 안에서 자동 */
  height: auto;    /* aspect-ratio로 높이 자동 */
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

/* 씬 이미지 겹쳐 놓고 투명도 전환 */
.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 240ms ease;
  opacity: 0;
}
#scene1 { opacity: 1; }

/* 텍스트 칼럼 */
.sidecopy {
  display: grid;
  grid-area: auto;
  padding-inline: clamp(12px, 2vw, 28px) clamp(24px, 4vw, 56px);
  color: #5b5149;
  font-family: "poppins", Helvetica, Arial, sans-serif;
  overflow: hidden;
  box-sizing: border-box;
}

/* 텍스트 블록 겹쳐 배치 */
.copy {
  grid-area: 1 / 1;
  line-height: 1.3;
  opacity: 0;
  transition: opacity .3s ease;
}
#text1 { opacity: 1; }

/* 긴 단어 방어 */
.sidecopy, .copy, .copy p {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.link-top {
  position: relative;    /* ✅ 필수 */
  z-index: 10;           /* ✅ 오버레이 위로 띄움 */
}

/* ================= 반응형(모바일: 2단 → 1단만) ================= */
@media (max-width: 600px){
  /* 디버깅 
  .stage     { outline: 1px dashed #0ff; }
  .sidecopy  { outline: 1px dashed #f0f; }
  .copy      { outline: 1px dashed #ff0; }
}*/
  :root{
    --m-frame-h: 60vh;   /* 모바일에서 프레임 높이 */
    --m-gap: -0.15em;       /* 프레임과 텍스트 사이 간격 */
  }

  /* 1열: 위에 프레임, 아래에 텍스트 */
@media (max-width: 600px){
    .stage{
      display: flex;
      flex-direction: column;
      min-height: 100%;         /* 1) 화면 꽉 채우려면 컨테이너가 부모 높이를 상속하도록 */
      /* 필요 시: min-height: 100dvh; (폴백 100vh) */
    }

    .frame{
      width: 100%;
      aspect-ratio: 16/9;       /* 2) 비율만으로 높이 결정 */
      flex: auto;      
      overflow: hidden;
    }

    .frame > img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: bottom;
      display: block;
    }

    .sidecopy{
      flex: 1 1 auto;           /* 3) 남는 공간을 차지 */
      overflow: hidden;           /* 내부 스크롤 */
      position: relative;       /* 내부 절대배치 기준 */
      padding: 1em;
      box-sizing: border-box;
      font-size: clamp(13px, 2.4vmin, 18px);
      line-height: 1.35;
    }

    /* 페이드 전환은 sidecopy 내부에서만 겹치기 */
    .copy{
      position: relative;
      inset: 0;
      opacity: 0;
      transition: opacity 300ms ease;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
     #text1,
    .copy.is-active { opacity: 1; }
  }
}