/* ============================================================
   PC(넓은 화면)에서 모바일 폭으로 가운데 정렬 (2026-09-28)
   ------------------------------------------------------------
   m.yudeung.com 을 PC 브라우저로 열면 본문이 화면 전체로 늘어나 깨져 보였다.
   화면 폭이 --mob-w 보다 넉넉하면 본문(#wrap)을 휴대폰 폭으로 가운데에 두고,
   뷰포트에 직접 붙는 고정 요소(상단바·하단 탭바·팝업 시트·토스트·퀵메뉴)도
   같은 폭에 맞춘다. 이 파일은 layouts/2026/main.edge 에서 다른 스타일보다
   나중에 불러오며, 여기 규칙은 모두 min-width 미디어쿼리 안에 있어
   휴대폰에서는 아무 영향이 없다.
   - 고정 요소는 left:0 / right:0 + width + margin:auto 로 가운데를 맞춘다
     (transform 은 팝업·토스트 애니메이션이 이미 쓰고 있어 건드리지 않는다).
   - #wrap 은 overflow-x:clip 으로 좌우만 자른다. hidden 을 쓰면 스크롤 컨테이너가
     되어 지도의 position:sticky 가 깨지므로 clip 이어야 한다.
   ============================================================ */
:root {
  --mob-w: 480px;
}

@media (min-width: 600px) {
  /* 본문 기둥. 배경은 html 이 화면 전체에 칠하므로 기둥 바깥도 같은 그라데이션이다.
     기둥 경계는 얇은 선과 그림자로만 구분한다 */
  #wrap {
    width: 100%;
    max-width: var(--mob-w);
    margin-left: auto;
    margin-right: auto;
    overflow-x: clip;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.08),
      0 0 80px rgba(0, 0, 0, 0.45);
  }

  /* 하단 탭바: 휴대폰에서는 좌우 12px 띄운 라운드 바 */
  #wrap .bottomBtn {
    left: 0;
    right: 0;
    width: calc(var(--mob-w) - 24px);
    margin-left: auto;
    margin-right: auto;
  }

  /* 화면 상단에 고정되는 헤더들 (서브 페이지 컨테이너·예약/신청 헤더).
     header.sub_hd 자체는 잡지 않는다: program.css 가 fixed 로 선언해도 layouts.css 의
     `#wrap header { position: relative }` 가 이겨 모든 서브 헤더는 .sub_container.inner 안에
     흐름으로 놓이므로, 컨테이너만 맞추면 된다. 헤더에 width 를 주면 오른쪽으로 40px 삐져나온다. */
  .sub_container.inner,
  .sub_container.fix_top header,
  #wrap header.rsv_hd,
  .rsv_hd {
    left: 0;
    right: 0;
    width: var(--mob-w);
    margin-left: auto;
    margin-right: auto;
  }

  /* 홈 공지 팝업(bottom sheet): 어둡게 덮는 막은 화면 전체, 시트만 기둥 폭 */
  .app_popup .app_popup_sheet {
    left: 0;
    right: 0;
    width: var(--mob-w);
    margin-left: auto;
    margin-right: auto;
  }

  /* 스탬프 북의 선물·굿즈 팝업(style.css .pop-layer): 내용 상자만 기둥 폭 */
  .pop-layer .pop-contents {
    max-width: var(--mob-w);
  }

  /* 앱이 열린 채 도착한 푸시 배너 (좌우 12px 띄움) */
  .yd_push_toast {
    left: 0;
    right: 0;
    width: calc(var(--mob-w) - 24px);
    margin-left: auto;
    margin-right: auto;
  }

  /* 스캔 결과 토스트 (가운데 정렬은 그대로, 최대 폭만 기둥 기준) */
  .sw_toast {
    max-width: calc(var(--mob-w) - 32px);
  }

  /* 예약·신청 화면 아래쪽 마젠타 글로우: 140vw 이던 폭을 기둥 기준으로 */
  .rsv::before {
    width: calc(var(--mob-w) * 1.4);
  }

  /* 홈 챗봇 퀵메뉴: 휴대폰의 right:5% 를 기둥 오른쪽 안쪽으로 옮긴다 */
  .quick_menu {
    right: calc(50% - var(--mob-w) / 2 + 24px);
  }
}