/* ============================================================
   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; }

/* 로고 — 모플랜 D안(2026-08-21 사장님 확정): 그라데이션(보라→파랑) 사각 M 심볼 +
   오른쪽에 「모플랜」 워드마크(같은 그라데이션) / moplan.co.kr 2줄 스택.
   ⚠크기 규칙은 기존 브레이크포인트(word/dom) 재사용 — 심볼(p82n-sym)만 같은 지점에서 따로 줄인다. */
.p82n-logo{ display:flex; flex-direction:row; align-items:center; gap:9px; margin-right:26px;
  white-space:nowrap; text-decoration:none; flex:none; }
.p82n-sym{ width:36px; height:36px; border-radius:9px; flex:none;
  background:linear-gradient(135deg,#a34be5,#387be9); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:900; line-height:1; }
.p82n-stack{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.p82n-word{ font-size:25px; 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:11.5px; font-weight:750;
  color:#172033; line-height:1; letter-spacing:.2px; }
.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 안에 심볼 28px·워드 18.5 들어감 */
  .p82n-logo{ margin-right:0; gap:6px; }
  .p82n-sym{ width:28px; height:28px; border-radius:7px; font-size:15px; }
  .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-sym{ width:25px; height:25px; border-radius:6px; font-size:13px; }
  .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-sym{ width:23px; height:23px; border-radius:6px; font-size:12px; }
  .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로 넓혔다. */
/* 본문 카드가 좁은 페이지(공지 800px · 가이드 760px)에서는 헤더가 카드보다 넓어져 어긋난다
   → p82-nav.js가 .p82n-tight를 붙이면 같은 축소 규칙을 적용해 폭을 맞춘다 (2026-08-19) */
.p82nav.p82n-tight .p82n-inner{ padding:0 8px; }
.p82nav.p82n-tight .p82n-logo{ margin-right:14px; gap:7px; }
.p82nav.p82n-tight .p82n-sym{ width:31px; height:31px; border-radius:8px; font-size:17px; }
.p82nav.p82n-tight .p82n-word{ font-size:21px; }
.p82nav.p82n-tight .p82n-dom{ font-size:11px; }
.p82nav.p82n-tight .p82n-link{ padding:0 11px; font-size:14.5px; }
.p82nav.p82n-tight .p82n-right{ gap:5px; }
.p82nav.p82n-tight .p82n-ico{ padding:0 9px; font-size:12.5px; }

/* 한 단계 더 좁은 경우(공지사항 800px) — 로고·메뉴를 조금 더 줄여 카드 폭에 넣는다 */
.p82nav.p82n-tight2 .p82n-sym{ width:27px; height:27px; border-radius:7px; font-size:14px; }
.p82nav.p82n-tight2 .p82n-word{ font-size:18px; }
.p82nav.p82n-tight2 .p82n-dom{ font-size:10px; }
.p82nav.p82n-tight2 .p82n-logo{ margin-right:10px; gap:6px; }
.p82nav.p82n-tight2 .p82n-link{ padding:0 9px; font-size:13.5px; }
.p82nav.p82n-tight2 .p82n-ico{ padding:0 8px; font-size:12px; height:38px; min-width:38px; }
.p82nav.p82n-tight2 .p82n-right{ gap:4px; }

@media (min-width: 768px) and (max-width: 959px){
  .p82n-inner{ padding:0 8px; }
  .p82n-logo{ margin-right:14px; gap:7px; }
  .p82n-sym{ width:29px; height:29px; border-radius:7px; font-size:15px; }
  .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,
  body.dark-mode.p82n-hascard.p82n-guide .page{ border-color:#374151 !important; }  /* 가이드(.page)가 빠져 다크에서 흰 테두리 — 2026-08-20 */
}
/* 스크롤 중일 때만 아주 옅은 그림자 — 본문이 헤더 밑으로 지나가는 게 보이게 */
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; }
}

/* ── 옆으로 펼치는 하위 목록 (2026-08-19 확정) ──
   이용 가이드 드롭다운이 8줄로 길어서, 글 4편은 「가이드 전체 목록」에 마우스를 올리면
   오른쪽으로 한 겹 더 펼쳐지게 했다. 목록 자체를 눌러 /guide/로 들어가는 길은 그대로.
   ※ 부모 .p82n-drop에 overflow를 걸면 안 된다 — 걸리면 이 칸이 잘려서 안 보인다. */
.p82n-sub{ position:relative; }
.p82n-drop a.p82n-hassub::after{ content:'▸'; margin-left:auto; padding-left:8px;
  font-size:11px; color:#9ca3af; }
.p82n-sub:hover > a.p82n-hassub,
.p82n-sub:focus-within > a.p82n-hassub{ background:#e8f0fe; color:#1a73e8; }
body.dark-mode .p82n-sub:hover > a.p82n-hassub,
body.dark-mode .p82n-sub:focus-within > a.p82n-hassub{ background:#374151; color:#4f9bff; }

/* ⛔닫혀 있을 때 위치가 중요하다 — visibility:hidden이어도 자리는 차지하므로,
   밖으로 튀어나가 있으면 그만큼 페이지에 가로 스크롤이 생긴다(가이드 768px에서 82px 확인, 2026-08-19)
   → 닫혀 있을 땐 드롭다운 안(left:0)에 포개 두고, 펼칠 때만 옆(left:100%)으로 내보낸다.

   ⛔그래서 「닫히는 순간」 두 가지를 반드시 지켜야 한다(2026-08-19 「치지직거린다」 신고) —
     ① pointer-events:none  : 닫힌 칸은 드롭다운 목록 위에 포개져 있다. 마우스를 받으면
        그 칸에 닿아 → 다시 열려 옆으로 비켜남 → 마우스가 떨어져 닫힘 → 제자리로 → 또 닿음…
        이 되먹임이 초당 수십 번 돌아 화면이 떨린다.
     ② 닫힐 때는 전환효과 없음  : 페이드아웃 0.15초 동안 패널이 목록을 덮어 번쩍인다.
        그래서 transition은 「펼칠 때만」 건다(아래 :hover 규칙 안). */
.p82n-flyout{ position:absolute; left:0; top:-9px; min-width:222px;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  box-shadow:0 14px 34px rgba(15,23,42,.16); padding:8px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:none; z-index:6; }
/* 마우스가 부모 칸 → 하위 칸으로 건너갈 때 3px 틈에서 끊기지 않게 다리를 놓는다 */
.p82n-flyout::before{ content:''; position:absolute; left:-9px; top:0; width:9px; height:100%; }
.p82n-sub:hover > .p82n-flyout,
.p82n-sub:focus-within > .p82n-flyout{ left:100%; margin-left:3px; opacity:1; visibility:visible;
  pointer-events:auto; transition:opacity .15s; }
/* 창 오른쪽 끝을 넘칠 때는 왼쪽으로 뒤집는다(p82-nav.js가 폭을 재서 붙여준다).
   뒤집기도 「펼쳤을 때만」 — 닫힌 채로 왼쪽에 나가 있으면 같은 가로 스크롤이 생긴다 */
.p82n-sub.p82n-flip:hover > .p82n-flyout,
.p82n-sub.p82n-flip:focus-within > .p82n-flyout{ left:auto; right:100%; margin:0 3px 0 0; }
.p82n-sub.p82n-flip > .p82n-flyout::before{ left:auto; right:-9px; }
/* 부모 줄 「클릭」 강제 펼침(p82n-subon) — 터치 기기(PC 레이아웃 태블릿·폴드)는 hover가 없어
   p82-nav.js가 클릭 때 토글해준다 (2026-08-20, 눌러도 이동 안 함과 한 세트) */
.p82n-sub.p82n-subon > .p82n-flyout{ left:100%; margin-left:3px; opacity:1; visibility:visible; pointer-events:auto; }
.p82n-sub.p82n-flip.p82n-subon > .p82n-flyout{ left:auto; right:100%; margin:0 3px 0 0; }
.p82n-sub.p82n-subon > a.p82n-hassub{ background:#e8f0fe; color:#1a73e8; }
body.dark-mode .p82n-sub.p82n-subon > a.p82n-hassub{ background:#374151; color:#4f9bff; }
body.dark-mode .p82n-flyout{ background:#1f2937; border-color:#374151; }

/* 모바일 시트에는 옆으로 펼칠 자리가 없다 → 눌러서 펼치는 아코디언 (2026-08-19) */
.p82n-sheet a.p82n-acc .p82n-accar{ margin-left:auto; font-size:10px; color:#9ca3af;
  transition:transform .18s; }
.p82n-sheet a.p82n-acc.p82n-accon{ color:#1a73e8; }
.p82n-sheet a.p82n-acc.p82n-accon .p82n-accar{ transform:rotate(180deg); color:#1a73e8; }
body.dark-mode .p82n-sheet a.p82n-acc.p82n-accon{ color:#4f9bff; }
.p82n-accbox{ display:none; }
.p82n-sheet a.p82n-acc.p82n-accon + .p82n-accbox{ display:block; }
.p82n-sheet a.p82n-in{ padding-left:30px; font-size:14.5px; min-height:44px; }
.p82n-sheet a.p82n-in .p82n-ic{ font-size:15px; }

/* ── 문의하기 팝업 (2026-08-19) ──
   PC에 기본 메일 앱이 없으면 mailto: 링크는 눌러도 아무 일이 없다 → 「무반응」 신고의 원인.
   메일 앱에 기대지 않는 길(주소 복사 · Gmail 웹 작성창)을 같이 준다. */
/* z-index는 사이트 모달 최상단(계산기 10050)보다 위 — 알림 동의 팝업 등에 가리지 않게 */
.p82n-cdim{ position:fixed; inset:0; z-index:10060; background:rgba(15,23,42,.5);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:p82n-cin .16s ease-out; }
@keyframes p82n-cin{ from{ opacity:0; } to{ opacity:1; } }
.p82n-card{ position:relative; width:100%; max-width:392px; background:#fff; border-radius:16px;
  padding:24px 22px 20px; box-shadow:0 24px 60px rgba(15,23,42,.3);
  font-family:inherit; color:#374151; text-align:left; }
.p82n-card h3{ margin:0 0 8px; font-size:19px; font-weight:800; color:#111827; }
.p82n-cdesc{ margin:0 0 16px; font-size:14px; line-height:1.6; color:#6b7280; word-break:keep-all; }
.p82n-cx{ position:absolute; top:12px; right:12px; width:34px; height:34px; border:0;
  border-radius:50%; background:#eef2f7; color:#4b5563; font-size:14px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-family:inherit; }
.p82n-cmail{ display:flex; align-items:center; gap:8px; padding:11px 12px; margin-bottom:12px;
  background:#f3f4f6; border-radius:10px; }
.p82n-cmail span{ flex:1; min-width:0; font-size:14.5px; font-weight:700; color:#111827;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.p82n-ccopy{ flex:none; height:32px; padding:0 12px; border:1px solid #d1d5db; border-radius:8px;
  background:#fff; color:#374151; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; }
.p82n-ccopy:hover{ border-color:#1a73e8; color:#1a73e8; }
.p82n-ccopy.p82n-cdone{ border-color:#16a34a; color:#16a34a; }
.p82n-cbtn{ display:flex; align-items:center; justify-content:center; min-height:46px;
  margin-bottom:8px; border-radius:10px; border:1px solid #d1d5db; background:#fff;
  color:#374151; font-size:15px; font-weight:700; text-decoration:none; }
.p82n-cbtn:hover{ border-color:#1a73e8; color:#1a73e8; }
.p82n-cbtn-main{ background:#1a73e8; border-color:#1a73e8; color:#fff; }
.p82n-cbtn-main:hover{ background:#1668d4; border-color:#1668d4; color:#fff; }
.p82n-cnote{ margin:10px 0 0; font-size:12.5px; line-height:1.5; color:#9ca3af; word-break:keep-all; }
body.dark-mode .p82n-card{ background:#1f2937; color:#e5e7eb; }
body.dark-mode .p82n-card h3{ color:#f9fafb; }
body.dark-mode .p82n-cdesc{ color:#9ca3af; }
body.dark-mode .p82n-cx{ background:#374151; color:#e5e7eb; }
body.dark-mode .p82n-cmail{ background:#111827; }
body.dark-mode .p82n-cmail span{ color:#f9fafb; }
body.dark-mode .p82n-ccopy,
body.dark-mode .p82n-cbtn{ background:#1f2937; border-color:#4b5563; color:#e5e7eb; }
body.dark-mode .p82n-cbtn-main{ background:#1a73e8; border-color:#1a73e8; color:#fff; }
.p82n-card:focus{ outline:none; }

/* 헤더 폭을 잴 때만 「옆으로 펼치는 칸」을 뺀다 — 절대배치라 메뉴의 scrollWidth를 부풀려서
   헤더가 통째로 넓어지고 글자가 줄던 문제(2026-08-19). p82-nav.js의 needOf()가 켰다 끈다.
   ⛔드롭다운(.p82n-drop)까지 빼면 안 된다 — 기존 축소 기준이 그 폭을 포함해 잡혀 있어,
     같이 빼면 축소가 안 걸려 바가 진짜로 넘친다(768px에서 85px 넘침 확인). */
.p82nav.p82n-measuring .p82n-flyout{ display:none !important; }

/* 안내 한 줄은 PC 전용 — 폰·태블릿은 메일 앱이 늘 있어서 필요 없는 말이 된다 */
@media (max-width: 767px){ .p82n-cnote{ display:none; } }

/* 왼쪽으로 뒤집혔으면 화살표도 왼쪽을 가리켜야 방향이 맞다 */
.p82n-sub.p82n-flip > a.p82n-hassub::after{ content:'◂'; }