/* ============================================================
   보니하니 섹션 서브페이지: 캔버스 섹션(1920 풀스케일)이 과하게 커서
   한 화면에 안 들어오고 이미지도 큰 문제를 해결.
   zoom으로 섹션 전체(위치/이미지/폰트)를 균일 축소 → 좌표·폰트 비율이
   유지되어 글자 깨짐/치우침 없이 작아지고, margin:auto로 중앙정렬.
   풋터(.sec-wrap 밖)는 영향 없음.
   ============================================================ */
.sec-wrap {
    width: 100%;
}
/* 데스크탑: 화면이 클수록 더 축소해 한 화면에 섹션이 더 많이 보이게(반응형).
   화면폭이 커질수록 캔버스(--u=100vw/1920)가 커지므로 zoom을 더 줄여 상쇄. */
.sec-wrap .pc-layout {
    zoom: 0.62; /* 노트북/소형 데스크탑(1024~1439) */
}
@media (min-width: 1440px) { /* 대형 데스크탑 */
    .sec-wrap .pc-layout { zoom: 0.52; }
}
@media (min-width: 1920px) { /* FHD */
    .sec-wrap .pc-layout { zoom: 0.44; }
}
@media (min-width: 2400px) { /* QHD */
    .sec-wrap .pc-layout { zoom: 0.36; }
}
/* 모바일(≤1023px): 모바일 레이아웃은 이미 뷰포트 기준이라 축소 불필요 */
@media (max-width: 1023px) {
    .sec-wrap .pc-layout { zoom: 1; }
    .sec-wrap .mobile-layout { zoom: 1; }
}

/* PC 섹션 1개가 모바일 섹션 여러 개(원본 사이트의 "모바일 전용 삽입 섹션")와
   매칭되는 경우, 섹션 추출 스크립트가 각 모바일 조각을 별도의
   .mobile-layout 블록으로 나눠 이 파일에 순서대로 이어붙인다. 홈 캔버스에서는
   이 조각들이 하나의 .mobile-layout 안에 중첩된 자식으로 있어 원본 여백을
   유지하지만, 여기서는 각 블록이 독립적으로 top:0부터 다시 시작하는 별도
   래퍼라 여백 없이 바로 이어져 서로 다른 내용이 경계 없이 붙어 보인다
   (여러 테마의 섹션 서브페이지에서 재현, 2026-07-31). */
.sec-wrap .mobile-layout + .mobile-layout {
    margin-top: calc(var(--u, 1px) * 48);
}