/* =========================================================
   위드브릿지 공통 모바일 헤더 / 햄버거 드로어 메뉴 (사이트 전역 공용)
   - 대상: index.html, about.html, apply.html, login.html, manager-apply.html,
           mypage.html, mypage-manager.html, terms.html
   - 헤더 마크업은 각 페이지에 그대로 두고(링크 대상이 페이지마다 다름),
     이 파일은 그 마크업에 붙는 클래스(.wb-header-row 등)의 스타일만 공용으로 관리합니다.
   - 사용법: <head> 에 <link rel="stylesheet" href="/mobile-nav.css?v=1.0"> 추가
========================================================= */

/* 페이지 전체가 가로로 스크롤되는 것을 막는 전역 안전장치
   (모바일에서 꽉 끼는 폭 계산을 가진 요소가 있어도 화면 밖으로 밀려나지 않게 함)
   html 에만 적용합니다 — html, body 둘 다에 overflow-x:hidden 을 걸면 두 엘리먼트가 각각
   독립된 스크롤 컨테이너가 되어, 모바일 브라우저(특히 iOS Safari)에서 sticky/fixed 헤더가
   스크롤 중 위치를 놓치거나 화면이 반으로 갈라져 보이는 현상의 원인이 됩니다. */
html {
  overflow-x: hidden;
}

/* 브라우저 기본 reset: html/body 기본 margin(특히 body 의 기본 8px)과 box-sizing 을 명시적으로
   고정합니다. 두 가지는 일부러 건드리지 않습니다 —
   1) body 의 overflow-x 는 위 html 규칙과 똑같이 hidden 을 걸지 않습니다(바로 위 주석 참고:
      html+body 둘 다 걸면 iOS Safari 에서 고정 헤더가 스크롤 중 화면을 가르는 버그가 있었습니다).
   2) body 의 padding 은 0 으로 밀지 않습니다 — 768px 이하에서 고정(fixed) 띠배너+헤더가 본문을
      가리지 않도록 아래 @media 블록이 body 에 padding-top: 99px 을 의도적으로 넣고 있어서,
      여기서 padding 을 건드리면 그 간격이 깨집니다(본문이 헤더 밑에 가려 보이게 됨). */
*, *::before, *::after {
  box-sizing: border-box;
}
html, body {
  margin: 0 !important;
  width: 100% !important;
}

/* 상단 띠배너 · 헤더 · (각 페이지의) 메인 히어로가 항상 정확히 같은 가로 폭 기준(뷰포트 0~100%)을
   공유하도록, 폭에 영향을 줄 수 있는 값을 모든 화면 크기에서(미디어 쿼리와 무관하게) 명시적으로
   고정합니다. header 태그는 .wb-header-row(안쪽 콘텐츠)와 별개의 바깥 박스이며, 이 둘 중 어느 것도
   max-width/container 로 감싸인 부모 안에 있지 않습니다 — 그래도 혹시 모를 상속/캐스케이드發 폭
   오차를 원천 차단하기 위한 안전장치입니다. */
.wb-top-banner,
header {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* 하단 공통 푸터의 "회사 정보 / 연락처" 2열 그리드: minmax(300px, 1fr) 이 좁은 화면(≈360px 이하)에서
   컬럼 최소폭을 강제해 가로 스크롤을 만들 수 있어, 768px 이하에서는 1열로 바꿔 줍니다. */
@media (max-width: 640px) {
  .wb-footer-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- 모바일 전용 요소(햄버거 버튼 / 모바일 CTA) : 기본은 숨김 ---------- */
.wb-mobile-toggle, .wb-mobile-cta {
  display: none;
}

/* ---------- 드로어 오버레이 ---------- */
.wb-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.45);
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.wb-drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* ---------- 드로어 패널 : 모바일 화면 전체를 덮는 풀스크린 메뉴 ---------- */
.wb-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  z-index: 61;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  font-family: 'Noto Sans KR', sans-serif;
}
.wb-drawer.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* 드로어 상단 바 : 좌측 닫기(X) / 중앙 로고 — 닫기 버튼을 absolute 로 빼서 로고가 전체 폭
   기준으로 정확히 가운데 오도록 합니다(마크업은 그대로 두고 CSS만으로 좌-중앙 배치). */
.wb-drawer-topbar {
  position: relative !important;
  justify-content: center !important;
  padding: 8px 20px !important;
}
.wb-drawer-topbar img {
  height: 40px !important;
  position: relative !important;
  top: 2px !important;
}
.wb-drawer-topbar button#wbDrawerClose {
  position: absolute !important;
  left: 20px !important;
  top: 50% !important;
  width: 40px !important;
  height: 40px !important;
  /* 패널 자체의 페이드/슬라이드보다 살짝 늦게(0.08s 지연) 나타나도록 해 자연스럽게 뒤따라오는 느낌을 줍니다 */
  opacity: 0;
  transform: translateY(-50%) scale(0.85) !important;
  transition: opacity 0.25s ease-in-out 0.08s, transform 0.25s ease-in-out 0.08s;
}
.wb-drawer.is-open .wb-drawer-topbar button#wbDrawerClose {
  opacity: 1;
  transform: translateY(-50%) scale(1) !important;
}
.wb-drawer-topbar button#wbDrawerClose svg {
  width: 24px !important;
  height: 24px !important;
}

/* 메뉴 목록 영역: 넉넉한 여백으로 시원하게 배치. 드로어 전체(.wb-drawer)가 단일 스크롤 컨테이너이므로
   여기서는 더 이상 자체 overflow/flex:1 을 갖지 않고, 위(상단 바)·아래(하단 정보)와 함께 하나로 스크롤됩니다. */
.wb-drawer nav {
  display: flex !important;
  flex-direction: column !important;
  padding: 32px 28px !important;
  gap: 6px !important;
}

/* ---------- 드로어 메인 메뉴 링크(소개/서비스/공지사항/고객후기/FAQ/문의하기) ---------- */
.wb-drawer-link {
  display: block;
  padding: 13px 4px;
  border-radius: 10px;
  text-decoration: none;
  color: #111827;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background-color 0.15s;
}
.wb-drawer-link:hover {
  background-color: #F9FAFB;
}

/* ---------- 드로어 하단 세컨더리 메뉴(로그인/회원가입 등) : 작은 글씨로 좌측 정렬 ---------- */
.wb-drawer-auth-buttons {
  justify-content: flex-start !important;
  font-size: 13px !important;
}

/* 드로어가 열려 있는 동안 배경 스크롤 방지 */
body.wb-drawer-open {
  overflow: hidden;
}

/* ---------- 768px 이하: PC 메뉴 숨기고 모바일 헤더로 전환 ---------- */
@media (max-width: 768px) {
  .wb-header-row {
    grid-template-columns: auto 1fr auto !important;
    padding: 10px 16px !important;
    column-gap: 8px !important;
  }
  .wb-desktop-nav, .wb-desktop-actions {
    display: none !important;
  }
  .wb-mobile-toggle {
    display: inline-flex !important;
  }
  .wb-mobile-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 18px !important;
    box-sizing: border-box;
  }

  /* 데스크톱의 position: sticky 는 768px 이하에서 fixed 로 바꿔, 스크롤해도 화면 상단에 항상
     고정되도록 합니다. (sticky 는 문서 흐름 안에서만 "붙잡히는" 방식이라 iOS/안드로이드 일부
     브라우저에서 주소창이 접히고 펴지는 동안 헤더가 밀리거나 화면이 갈라져 보이는 문제가
     있었는데, fixed 는 뷰포트에 직접 고정되어 이 문제가 생기지 않습니다.)

     상단 롤링 띠배너(.wb-top-banner, 38px)는 헤더보다 먼저 문서에 오는 일반 흐름 요소라,
     헤더만 fixed로 띄우면 배너가 헤더 틈새 뒤로 숨거나(겹침) 스크롤 바운스(iOS 오버스크롤)
     때 헤더 가장자리 밑에서 삐죽 튀어나오는 것처럼 보이는 버그가 생깁니다. 그래서 배너도
     헤더와 같은 fixed 로 묶어 둘 다 스크롤과 무관하게 항상 같은 자리에 고정합니다 —
     배너(top:0, 38px) 바로 아래에 헤더(top:38px)가 붙는 구조라 겹침/틈이 생길 여지가 없습니다.

     헤더가 더 이상 문서 흐름을 차지하지 않으므로, body 에 "배너 + 헤더" 실제 높이 합만큼
     패딩을 더해 본문 맨 윗부분이 가려지지 않게 합니다.
     띠배너 높이 38px (고정값, js의 3.5초 롤링 translateY 간격과 동일)
     헤더 높이 61px = 세로 패딩 10px×2 + 내용 높이 40px(모바일 햄버거 버튼 기준) + 테두리 1px
     (.wb-header-row 의 padding 값과 함께 바뀌는 값이므로, 위 padding 을 바꾸면 이 값도 맞춰야 합니다)
     body padding-top = 38 + 61 = 99px */
  .wb-top-banner {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 51 !important;
  }
  header {
    position: fixed !important;
    top: 38px !important;
    left: 0 !important;
    right: 0 !important;
    /* header 태그에는 inline style 로 이미 width: 100% 가 박혀 있어, 여기서 left/right 까지
       같이 고정하면 (width + left + right) 세 값이 동시에 지정된 '과잉 제약(over-constrained)'
       상태가 됩니다. 데스크톱 크롬에서는 큰 문제가 없지만, iOS Safari 는 이 조합에서 간헐적으로
       폭 계산이 어긋나(흰 여백) 좌우 중 한쪽이 viewport 에 딱 맞지 않는 경우가 있어, width 를
       auto 로 비워 left/right 값만으로 폭이 정해지도록 합니다(위 띠배너 .wb-top-banner 는 애초에
       inline width 가 없어 이 문제가 없었습니다). */
    width: auto !important;
  }
  body {
    padding-top: 99px !important;
  }
}

/* 포트원 V2 결제 오버레이(IFRAME 모드) 모바일 대응 — apply.html / mypage.html / package.html
   세 곳 모두 이 파일을 불러오므로 여기 한 군데서 관리합니다.
   포트원 SDK(cdn.portone.io/v2/browser-sdk.js)는 결제창을 열 때 #imp-iframe-wrapper(화면 전체를
   덮는 position:fixed 래퍼) 안에 <iframe id="imp-iframe"> 를 넣는데, 이 iframe 의 width/height 는
   체크아웃 서버가 내려준 고정 px 값을 인라인 style 로 박아 넣습니다(반응형이 아님) — PC 용으로 내려온
   값이 모바일 화면보다 넓으면 좌우가 잘리거나 어색하게 보이는 원인이 됩니다. 인라인 style 보다
   우선하려면 !important 가 필요합니다.
   데스크톱(PC)은 현재의 가운데 정렬된 고정폭 모달 모양을 그대로 유지해야 하므로, 이 보정은
   모바일 폭(≤768px)에서만 적용합니다. */
@media (max-width: 768px) {
  #imp-iframe-wrapper {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden;
  }
  #imp-iframe-wrapper iframe,
  #imp-iframe,
  #imp-watermark {
    width: 100% !important;
    max-width: 100vw !important;
  }
}