/* ============================================================
   p82-nav.css — 상단 4메뉴(PC) + 하단 탭바(모바일)
   2026-08-18 · 시안(phone82-tools/sian/top-nav)에서 build-real.js로 생성.
   고칠 일이 있으면 시안 쪽을 고치고 다시 생성하는 편이 안전하다.
   ============================================================ */

/* ── 기존 내비게이션 감추기 ── */
.top-left-buttons,
.top-right-buttons,
.sidebar-menu,
.menu-overlay { display: none !important; }
/* 우리가족 페이지: 헤더 줄(로고 +「우리가족 요금 계산」)은 p82-nav.js가 통째로 제거하고
   「초기화」만 하단 총액 바로 옮긴다. 나머지 버튼(메뉴·홈·다크)은 상단 바와 중복이라 숨긴다.
   ※ 이 화면은 가로모드로 쓰는 계산기라 세로 56px을 비워주는 효과가 크다. */
.family-controls .icon-button:not(.btn-reset) { display: none !important; }
/* 총액 바는 flex-wrap:wrap이라 그냥 넣으면 「초기화」가 아랫줄로 떨어져 바가 두 줄이 된다
   → 총액 문구는 그대로 두고 버튼만 오른쪽에 겹쳐 배치 */
.family-footer { position: fixed; }
.family-footer .family-controls { position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%); margin: 0; flex: none; }

/* 상단 바로 로고가 올라갔으므로 본문 안 브랜드 로고는 전부 중복
   (계산기는 page-header 안, 게시판·공지는 본문 상단에 따로 들어 있다) */
.phone82-brand { display: none !important; }
/* 랜딩(index)은 상단 바를 얹지 않기로 확정(2026-08-18) → 이 CSS 자체가 로드되지 않는다.
   나중에 랜딩에도 넣기로 바뀌면 .phone82-brand--landing 예외 처리가 필요하다. */

/* ── 상단 바 ── */
.p82nav{
  position: sticky; top: 0; z-index: 90;   /* 게시판 상세 팝업(120) 등 사이트 오버레이보다 아래 — 2026-08-18 버그 수정 */
  display: block; height: 68px; padding: 0;
  background: transparent; border-bottom: 0;
  font-family: inherit;
}
body.dark-mode .p82nav{ background:#1f2937; }
/* 배경 띠는 화면 끝까지, 내용은 본문(.container 1100px)과 같은 폭으로 묶어 좌우 라인을 맞춘다.
   넓은 모니터에서 로고·메뉴만 저 멀리 떨어져 가운데가 텅 비어 보이던 문제 */
.p82n-inner{ max-width:1100px; height:100%; margin:0 auto; padding:0 4px;
  display:flex; align-items:center; }

/* 로고 — 실서비스 브랜드와 동일한 규칙: 워드마크는 보라→파랑 그라디언트,
   도메인은 「.online · .com」 둘 다 노출(가운데 점만 파랑). 상단 바라 가로로 눕혔다. */
/* PC는 실서비스 브랜드처럼 2줄 락업(Phone82 / .online · .com), 모바일은 바 높이가 54px라 한 줄 */
.p82n-logo{ display:flex; flex-direction:column; align-items:center; gap:1px; margin-right:26px;
  white-space:nowrap; text-decoration:none; flex:none; }
.p82n-word{ font-size:27px; font-weight:850; letter-spacing:-.5px; line-height:1;
  background:linear-gradient(100deg,#a34be5 4%,#387be9 82%);
  background-clip:text; -webkit-background-clip:text;
  color:#4779e8; -webkit-text-fill-color:transparent; }
.p82n-dom{ display:flex; align-items:center; font-size:13px; font-weight:750;
  color:#172033; line-height:1; }
.p82n-dom i{ font-style:normal; color:#3f68ea; padding:0 4px; }
body.dark-mode .p82n-dom{ color:#e5e7eb; }
body.dark-mode .p82n-dom i{ color:#7aa8ff; }

.p82n-menu{ display:flex; align-items:center; height:100%; }
.p82n-item{ position:relative; height:100%; display:flex; align-items:center; }
.p82n-link{ display:flex; align-items:center; gap:5px; height:100%; padding:0 16px;
  font-size:17px; font-weight:650; color:#374151; background:none; border:0;
  border-bottom:3px solid transparent; cursor:pointer; text-decoration:none; white-space:nowrap;   /* 좁은 카드(공지 상세 800px)에서 「요금 계 산」처럼 꺾이지 않게 */
  transition:color .15s, border-color .15s; font-family:inherit; }
.p82n-link:hover{ color:#1a73e8; }
.p82n-item.p82n-cur > .p82n-link{ color:#1a73e8; border-bottom-color:#1a73e8; }
.p82n-item.p82n-open > .p82n-link{ color:#1a73e8; }
body.dark-mode .p82n-link{ color:#e5e7eb; }
body.dark-mode .p82n-link:hover,
body.dark-mode .p82n-item.p82n-cur > .p82n-link,
body.dark-mode .p82n-item.p82n-open > .p82n-link{ color:#4f9bff; }
body.dark-mode .p82n-item.p82n-cur > .p82n-link{ border-bottom-color:#4f9bff; }

.p82n-caret{ font-size:9px; color:#9ca3af; transition:transform .15s; }
.p82n-item.p82n-open .p82n-caret{ transform:rotate(180deg); color:#1a73e8; }

.p82n-drop{ position:absolute; top:68px; left:6px; min-width:236px; background:#fff;
  border:1px solid #e5e7eb; border-radius:0 0 12px 12px; box-shadow:0 14px 34px rgba(15,23,42,.16);
  padding:8px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s, transform .16s, visibility .16s; z-index:5; }
.p82n-item.p82n-open .p82n-drop{ opacity:1; visibility:visible; transform:translateY(0); }
.p82n-drop a{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:8px;
  font-size:15.5px; color:#374151; text-decoration:none; }
.p82n-drop a:hover{ background:#e8f0fe; color:#1a73e8; }
.p82n-drop .p82n-ic{ width:20px; text-align:center; flex:none; }
.p82n-drop .p82n-new{ margin-left:auto; font-size:10px; font-weight:800; color:#fff;
  background:#7c3aed; border-radius:99px; padding:1px 6px; }
body.dark-mode .p82n-drop{ background:#1f2937; border-color:#374151; }
body.dark-mode .p82n-drop a{ color:#e5e7eb; }
body.dark-mode .p82n-drop a:hover{ background:#374151; color:#4f9bff; }

.p82n-right{ margin-left:auto; display:flex; align-items:center; gap:6px; }
.p82n-ico{ position:relative; display:flex; align-items:center; justify-content:center; gap:6px;
  height:41px; min-width:41px; padding:0 13px; border-radius:10px; border:1px solid #e5e7eb;
  background:#fff; color:#4b5563; font-size:14.5px; font-weight:600; cursor:pointer; font-family:inherit; }
.p82n-ico:hover{ border-color:#1a73e8; color:#1a73e8; }
.p82n-ico .p82n-badge{ position:absolute; top:-3px; right:-3px; width:9px; height:9px;
  border-radius:50%; background:#ef4444; border:2px solid #fff; }
body.dark-mode .p82n-ico{ background:#1f2937; border-color:#374151; color:#e5e7eb; }
.p82n-right .p82n-drop{ top:57px; left:auto; right:0; border-radius:12px; }

/* ── 모바일 ── */
.p82n-tabs{ display:none; }
.p82n-sheet, .p82n-dim{ display:none; }

@media (max-width: 767px){
  .p82nav{ height:54px; }
  .p82n-inner{ padding:0 12px; }
  .p82n-menu{ display:none; }
  .p82n-right > .p82n-item{ display:none; }   /* 🧮 계산기는 「더보기」 시트로 */
  /* 모바일도 PC와 같은 2줄 락업 — 바 높이 54px 안에 워드마크 17 + 도메인 9.5 = 약 28px이라 여유 */
  .p82n-logo{ margin-right:0; gap:0; }
  .p82n-word{ font-size:18.5px; }
  .p82n-dom{ font-size:10.5px; }
  .p82n-ico{ height:34px; min-width:34px; padding:0 10px; }

  body{ padding-bottom: calc(56px + env(safe-area-inset-bottom)) !important; }

  .family-header { top: 54px !important; }
  /* ★ 가족 총액 푸터는 position:fixed; bottom:0 — 하단 탭바가 덮으면
     「월 예상 총 납부액」이 통째로 가려진다(계산기의 결론이 사라짐) → 탭바 위로 올린다.
     본문도 그만큼 더 비워줘야 마지막 카드가 푸터 뒤로 들어가지 않는다. */
  .family-footer { bottom: calc(56px + env(safe-area-inset-bottom)) !important; }
  .family-container { padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important; }
  /* 버튼 3개가 빠져 자리가 생겼으므로, 모바일에서 숨겨두던 「우리가족 요금 계산」 제목을 되살린다 */
  .family-header h1 { display: flex !important; }

  .p82n-tabs{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:90;
    background:#fff; border-top:1px solid #e5e7eb; box-shadow:0 -3px 14px rgba(15,23,42,.07);
    padding-bottom: env(safe-area-inset-bottom); }
  body.dark-mode .p82n-tabs{ background:#1f2937; border-top-color:#374151; }
  .p82n-tab{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:3px; height:56px; border:0; background:none; padding:0;
    color:#9ca3af; font-size:10.5px; font-weight:700; position:relative; cursor:pointer;
    font-family:inherit; }
  .p82n-tab .p82n-ti{ font-size:20px; line-height:1; filter:grayscale(1); opacity:.5; transition:.15s; }
  .p82n-tab.p82n-cur{ color:#1a73e8; }
  .p82n-tab.p82n-cur .p82n-ti{ filter:none; opacity:1; transform:translateY(-1px); }
  .p82n-tab .p82n-dot{ position:absolute; top:8px; right:calc(50% - 17px); width:7px; height:7px;
    border-radius:50%; background:#ef4444; }

  .p82n-sheet{ display:block; position:fixed; left:0; right:0; bottom:0; z-index:92;
    background:#fff; border-radius:18px 18px 0 0; box-shadow:0 -8px 30px rgba(15,23,42,.22);
    transform:translateY(105%); transition:transform .25s cubic-bezier(.32,.72,0,1);
    padding:8px 12px calc(14px + env(safe-area-inset-bottom)); max-height:78vh; overflow-y:auto; }
  .p82n-sheet.p82n-on{ transform:translateY(0); }
  body.dark-mode .p82n-sheet{ background:#1f2937; }
  .p82n-grip{ width:38px; height:4px; border-radius:99px; background:#e5e7eb; margin:4px auto 10px; }
  .p82n-x{ position:absolute; top:8px; right:10px; width:36px; height:36px; border:0;
    border-radius:50%; background:#eef2f7; color:#374151; font-size:15px; line-height:1;
    display:flex; align-items:center; justify-content:center; cursor:pointer; }
  body.dark-mode .p82n-x{ background:#374151; color:#e5e7eb; }
  .p82n-sheet h4{ margin:2px 6px 8px; font-size:13px; color:#6b7280; font-weight:800; }
  .p82n-sheet a{ display:flex; align-items:center; gap:12px; padding:13px 12px; border-radius:10px;
    font-size:15px; color:#374151; text-decoration:none; min-height:48px; }
  .p82n-sheet a:active{ background:#e8f0fe; }
  body.dark-mode .p82n-sheet a{ color:#e5e7eb; }
  .p82n-sheet .p82n-ic{ width:24px; text-align:center; font-size:17px; flex:none; }
  .p82n-sheet .p82n-new{ margin-left:auto; font-size:10px; font-weight:800; color:#fff;
    background:#7c3aed; border-radius:99px; padding:1px 6px; }
  .p82n-sheet hr{ border:0; border-top:1px solid #e5e7eb; margin:8px 4px; }

  .p82n-dim{ display:block; position:fixed; inset:0; z-index:91; background:rgba(15,23,42,.42);
    opacity:0; visibility:hidden; transition:.2s; }
  .p82n-dim.p82n-on{ opacity:1; visibility:visible; }
}

/* ── 가로모드(세로가 짧은 화면) ──
   폰을 눕히면 세로가 390px 안팎이라 상단 바 54 + 탭바 60 = 114px(약 30%)를 뺏긴다.
   특히 우리가족 계산기는 가로로 쓰는 화면이라 치명적 → 탭바를 접고 상단 ☰ 하나로 대체한다.
   (orientation:portrait 대신 높이 기준 — 폴더블 대응 규칙과 동일) */
.p82n-burger { display: none; }
@media (max-width: 1023px) and (max-height: 540px) and (min-aspect-ratio: 1/1) {
  .p82n-tabs { display: none !important; }
  body { padding-bottom: 0 !important; }
  .family-footer { bottom: 0 !important; }
  .family-container { padding-bottom: 62px !important; }
  .p82nav { height: 46px; }
  .p82n-word { font-size: 17px; }
  .p82n-dom { font-size: 9px; }
  .p82n-sheet { max-height: 86vh; }
}

/* ☰(상단 메뉴 버튼)는 PC 4메뉴가 감춰진 폭에서만 — 플립 가로(880px)처럼
   메뉴가 이미 보이는 폭에서 같이 뜨면 같은 기능이 두 개가 된다 */
@media (max-width: 767px) and (max-height: 540px) and (min-aspect-ratio: 1/1) {
  .p82n-burger { display: flex !important; }
}


/* ── 「더보기」 시트 2단 구성 (2026-08-18 확정) ──
   기존엔 「이용 가이드 6 + 일반 계산기 4 + 그 외 2」 세 묶음 12줄이라 시트가 길었다.
   기능은 하나도 빼지 않고, 도구·그 외 6개를 2열 그리드로 눕혀 체감 길이만 줄인다. */
.p82n-sheet .p82n-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px 6px; }
.p82n-sheet .p82n-grid a{ padding:11px 10px; font-size:14px; min-height:46px; gap:9px; }
.p82n-sheet .p82n-grid .p82n-ic{ width:20px; font-size:16px; }

/* ── 이용 가이드 4편 + 목록 (2026-08-18 확정: 가이드에도 같은 바) ──
   가이드는 계산기 CSS를 안 쓰는 독립 페이지(html.dark로 다크 판정, body에 20/12px 패딩).
   · 상단 「← 가이드 목록 / 다크 스위치」 줄은 새 바와 역할이 겹쳐 제거
   · 바는 body 패딩 밖으로 빼서 화면 끝까지 (음수 마진)
   · 다크는 p82-nav.js가 html.dark ↔ body.dark-mode를 맞춰준다 */
.p82n-guide .g-top{ display:none !important; }

@media (max-width: 767px){

}

/* ── 커버 화면(플립 커버·폴드 접힘 중 특히 작은 화면) ──
   260×320 같은 화면에선 바 54 + 탭 57 = 세로의 35%를 먹는다.
   높이만으로 판정하면 「일반 폰 + 키보드 올라옴」까지 걸리므로 폭 조건을 함께 건다
   (실서비스 커버 판정과 같은 ≤599 × ≤620 규칙). 탭은 없애지 않고 납작하게만. */
@media (max-width: 599px) and (max-height: 620px){
  .p82nav{ height:44px; }
  .p82n-inner{ padding:0 10px; }
  .p82n-word{ font-size:16px; }
  .p82n-dom{ font-size:8.5px; }
  .p82n-ico{ height:30px; min-width:30px; padding:0 8px; font-size:12px; }
  .p82n-tab{ height:46px; gap:2px; font-size:9.5px; }
  .p82n-tab .p82n-ti{ font-size:16px; }
  body{ padding-bottom: calc(46px + env(safe-area-inset-bottom)) !important; }
  .family-header{ top:44px !important; }
  .family-footer{ bottom: calc(46px + env(safe-area-inset-bottom)) !important; }
  .family-container{ padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
  .p82n-sheet{ max-height:88vh; padding-top:4px; }
  .p82n-sheet a{ min-height:42px; padding:9px 10px; font-size:14px; }
}


/* ── 태블릿·폴드 펼침 구간(768~899px) ──
   2026-08-18 확정: 폴드 펼침 세로·아이패드 세로에서도 상단 4메뉴를 쓴다(PC 전환 기준 860 → 768).
   이 구간(768~959)은 로고+메뉴+우측 버튼이 빠듯해서 여백·글자를 한 단계 줄인다.
   ※ 바 글자를 키운 뒤(메뉴 17px) 900px에서 여유가 53px까지 좁아져 899 → 959로 넓혔다. */
@media (min-width: 768px) and (max-width: 959px){
  .p82n-inner{ padding:0 8px; }
  .p82n-logo{ margin-right:14px; }
  .p82n-word{ font-size:19px; }
  .p82n-link{ padding:0 11px; font-size:14.5px; }
  .p82n-right{ gap:5px; }
  .p82n-ico{ padding:0 9px; font-size:12.5px; }
}


/* ── 넓은 화면 본문 폭 (2026-08-18 확정: 1200px + 바 확대) ──
   "축소하면 좌우가 텅 비어 보인다" → 처음엔 1600px까지 넓혔더니 9버튼이 과하게 커졌다.
   최종: 본문은 1200px까지만 넓히고(약 75%), 대신 상단 바의 로고·메뉴 글자를 키워 바를 채운다.
   전 화면에 거는 건 여전히 금물 — 계산 입력 폼은 입력칸이 늘어나고,
   인터넷 선택 화면(카드 2개·320px 고정 열)은 넓혀도 안쪽만 허전해진다.
   → 3열로 늘어나는 "9버튼 선택 화면"에서만 넓힌다. 바는 화면이 바뀔 때 로고가 튀지 않도록 항상 1200px 고정. */

body.p82n-wideselect .container{ max-width:1200px !important; }
body.p82n-wideselect .content-wrapper,
body.p82n-wideselect .choice-grid{ max-width:1140px !important; }


/* ── 헤더 일체형 (2026-08-18 확정) ──
   헤더를 창 끝까지 늘렸더니, PC에서 화면을 줄이면 헤더만 저 멀리 양 끝으로 가고
   본문(가운데 카드)과 따로 노는 문제. → 헤더 배경을 본문 카드와 같은 폭·같은 색으로 만들어
   위아래가 하나의 덩어리로 보이게 한다. 폭은 p82-nav.js의 fitHeader()가
   실제 본문 카드(.container / 가이드는 .page)를 재서 맞춘다(선택 화면 1200 · 폼 1100 등 자동). */
.p82nav{ background:transparent !important; box-shadow:none !important; border-bottom:0 !important; }
.p82n-inner{ background:#fff; margin:0 auto; padding:0 20px; }
body.dark-mode .p82n-inner{ background:#1f2937; }
/* 헤더와 본문이 이어지도록 카드 위쪽 라운드는 없앤다 */
.container, .p82n-guide .page{ border-top-left-radius:0 !important; border-top-right-radius:0 !important; }
@media (max-width: 767px){
  /* 폰에서는 화면이 좁아 카드와 폭이 같으므로 그대로 꽉 차게 둔다 */
  .p82n-inner{ padding:0 12px; }
}

/* ── 일체형 덩어리의 바깥 테두리 (2026-08-18) ──
   헤더와 본문이 하나가 됐으니 바깥선을 하나로 두른다.
   헤더는 위·좌우, 본문 카드는 좌우·아래를 맡아 이음매 없이 이어진다. */
@media (min-width: 768px){
  body.p82n-hascard .p82n-inner{ border:1px solid #e5e7eb; border-bottom:0;
    border-radius:14px 14px 0 0; }
  body.p82n-hascard .container,
  body.p82n-hascard.p82n-guide .page{ border:1px solid #e5e7eb !important; border-top:0 !important; }
  body.dark-mode.p82n-hascard .p82n-inner{ border-color:#374151; }
  body.dark-mode.p82n-hascard .container{ border-color:#374151 !important; }
}
/* 스크롤 중일 때만 아주 옅은 그림자 — 본문이 헤더 밑으로 지나가는 게 보이게 */
body.p82n-stuck .p82n-inner{ box-shadow:0 2px 10px rgba(15,23,42,.07); }

/* ── 헤더가 긴 화면 중간에서 떨어져 나가던 문제 (2026-08-18) ──
   원인: style-base.css의 `html, body { height: 100% }`.
   sticky는 「부모 박스 안에서만」 붙어 있으므로, body 박스가 한 화면 높이로 끝나면
   그 아래부터 헤더가 같이 밀려 올라간다(계산 폼처럼 긴 화면에서 재현).
   → body는 높이를 내용에 맞추고 최소 한 화면만 보장한다. 실제 적용 때도 이 한 줄이 필요하다. */
body{ height:auto !important; min-height:100% !important; }

/* ── 모바일 「초기화」 버튼이 하단 탭바에 가리던 문제 (2026-08-18) ──
   계산 폼에서 초기화는 모바일에서 position:fixed(우하단 14px)로 떠 있는 버튼이라
   탭바(56px)가 통째로 덮어 버렸다. 우리가족 총액 바와 같은 유형 → 탭바 높이만큼 올린다.
   ※ 선택 화면에는 없고 계산 폼에서만 나타나 처음 점검에서 놓쳤다(폼까지 열어봐야 잡힘). */
@media (max-width: 767px){
  .calc-reset-card-btn{ bottom: calc(14px + 56px + env(safe-area-inset-bottom)) !important; }
}
@media (max-width: 599px) and (max-height: 620px){
  .calc-reset-card-btn{ bottom: calc(10px + 46px + env(safe-area-inset-bottom)) !important; }
}
@media (max-width: 1023px) and (max-height: 540px) and (min-aspect-ratio: 1/1){
  /* 가로모드는 탭바를 접으므로 원래 자리로 */
  .calc-reset-card-btn{ bottom: 14px !important; }
}

/* ── 화면을 꽉 채우는 팝업이 하단 탭바에 가리던 문제 (2026-08-18) ──
   공통지원금·자급제 가격 팝업은 세로 100%를 쓰는 형태라 아래 56px이 탭바에 덮였다
   (목록 마지막 줄·닫기 영역이 안 잡힘). 팝업 바닥에 탭바 높이만큼 여백을 준다.
   ※ 짧은 팝업(만나이·날짜·할부 등)은 원래 탭바 위에서 끝나 영향 없음. */
@media (max-width: 767px){
  .modal-overlay, .bottom-sheet-modal, #unlk-overlay, #subsidy-overlay{
    padding-bottom: calc(56px + env(safe-area-inset-bottom)) !important;
  }
}
@media (max-width: 599px) and (max-height: 620px){
  .modal-overlay, .bottom-sheet-modal, #unlk-overlay, #subsidy-overlay{
    padding-bottom: calc(46px + env(safe-area-inset-bottom)) !important;
  }
}
@media (max-width: 1023px) and (max-height: 540px) and (min-aspect-ratio: 1/1){
  .modal-overlay, .bottom-sheet-modal, #unlk-overlay, #subsidy-overlay{ padding-bottom: 0 !important; }
}

/* ── 팝업 높이를 「실제 보이는 화면」 기준으로 (2026-08-18) ──
   폰 브라우저는 주소창이 접혔다 펴지면서 100vh가 실제 보이는 높이보다 커질 때가 있다.
   팝업 높이가 vh 기준이면 그만큼 아래가 탭바 밑으로 밀려 들어간다 → dvh로 잡고 탭바 높이를 뺀다. */
@media (max-width: 767px){
  .modal-content{ max-height: min(85vh, calc(100dvh - 56px - 34px)) !important; }
}
@media (max-width: 599px) and (max-height: 620px){
  .modal-content{ max-height: min(88vh, calc(100dvh - 46px - 40px)) !important; }   /* 커버: 팝업 위쪽 여백(26px)까지 감안 */
}
@media (max-width: 1023px) and (max-height: 540px) and (min-aspect-ratio: 1/1){
  .modal-content{ max-height: min(90vh, calc(100dvh - 96px)) !important; }   /* 가로: 팝업 위쪽 여백(84px)까지 감안 */
}

/* ── 모바일에서 헤더가 안 따라오던 문제 (2026-08-18) ──
   style-responsive.css가 모바일에서 `html, body { overflow-x: hidden }`을 건다.
   overflow:hidden은 스크롤 상자를 새로 만들어 sticky를 무력화한다(가로 스크롤 방지용 규칙).
   → 같은 효과를 내면서 스크롤 상자를 만들지 않는 `overflow-x: clip`으로 바꾼다.
   실서비스 적용 때도 이 교체가 필요하다(Safari 16+ / Chrome 90+ 지원). */
@media (max-width: 767px){
  html, body{ overflow-x: clip !important; overflow-y: visible !important; }
}