/* ═══════════════════════════════════════════════════════════════════
   운하명리 — 모바일 강화 레이어
   ───────────────────────────────────────────────────────────────────
   목적: 본체 HTML은 거의 안 건드리고, 모바일 viewport에서만
        앱 같은 UX(하단 탭바, safe-area, 터치 타깃, 시트 모달) 추가
   적용: 새 페이지에서 una-theme.css 옆에 <link> 한 줄
   주의: 480px 이하에서만 동작 — 데스크톱은 영향 0
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1) 모든 viewport — 안전영역 변수 ──────────────────────────── */
:root {
  --una-safe-top:    env(safe-area-inset-top, 0px);
  --una-safe-bottom: env(safe-area-inset-bottom, 0px);
  --una-safe-left:   env(safe-area-inset-left, 0px);
  --una-safe-right:  env(safe-area-inset-right, 0px);
  --una-tabbar-h:    64px;
}

/* ─── 2) 모바일 viewport 전용 ───────────────────────────────────── */
@media (max-width: 480px) {

  /* iOS 키보드 올라올 때 viewport 안 깨지게 */
  html, body {
    -webkit-text-size-adjust: 100%;
    overscroll-behavior-y: contain;
  }

  /* body 하단에 탭바 영역 + 안전영역 확보 */
  body {
    padding-bottom: calc(var(--una-tabbar-h) + var(--una-safe-bottom)) !important;
  }

  /* 탭바가 콘텐츠 가리지 않게 fixed 요소에도 safe-area 적용 */
  body > * {
    padding-left: var(--una-safe-left);
    padding-right: var(--una-safe-right);
  }

  /* 모든 버튼·링크 최소 터치 타깃 44x44 (Apple HIG) */
  button, a, [role="button"], .btn, input[type="submit"], input[type="button"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* 인풋 zoom-on-focus 방지 (iOS) — font-size 16px 이상 */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* 텍스트 선택 가능 영역에서 long-press 메뉴 활성 유지 */
  p, span, h1, h2, h3, h4, h5, h6, li, td {
    -webkit-user-select: text;
    user-select: text;
  }

  /* 탭/링크 long-press 콜아웃 비활성 (iOS) */
  a, button { -webkit-touch-callout: none; }
}

/* ─── 3) 하단 탭바 (JS가 동적 삽입) ─────────────────────────────── */
.una-tabbar {
  display: none; /* 데스크톱 숨김 */
}
@media (max-width: 480px) {
  .una-tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: calc(var(--una-tabbar-h) + var(--una-safe-bottom));
    padding-bottom: var(--una-safe-bottom);
    background: rgba(244, 237, 225, 0.92);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-top: 0.5px solid #d4c5a7;
    z-index: 9000;
    font-family: 'Noto Serif KR', 'Pretendard', -apple-system, sans-serif;
  }
  .una-tab {
    appearance: none;
    background: transparent;
    border: 0;
    color: #6b6359;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    transition: color 0.15s, transform 0.1s;
    padding: 6px 0 0;
    min-height: 0; /* 위 minheight 44 override */
  }
  .una-tab:active { transform: scale(0.92); }
  .una-tab.active { color: #1a2a36; }
  .una-tab-icon {
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
  }
  .una-tab-icon svg { width: 100%; height: 100%; }
  .una-tab-label { font-size: 10.5px; }
}

/* ─── 4) 모바일 시트 모달 (옵션) ───────────────────────────────── */
@media (max-width: 480px) {
  .una-sheet {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #f4ede1;
    border-radius: 24px 24px 0 0;
    padding: 16px 20px calc(20px + var(--una-safe-bottom));
    box-shadow: 0 -12px 40px rgba(26, 22, 18, 0.18);
    z-index: 9500;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1);
    max-height: 86vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .una-sheet.open { transform: translateY(0); }
  .una-sheet-handle {
    width: 40px; height: 4px;
    background: #c9bea6;
    border-radius: 2px;
    margin: 0 auto 16px;
  }
  .una-sheet-backdrop {
    position: fixed; inset: 0;
    background: rgba(26, 22, 18, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 9400;
  }
  .una-sheet-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ─── 5) 본 페이지 nav가 너무 큰 경우 모바일에서 슬림화 ─────────── */
@media (max-width: 480px) {
  nav, .top-nav, .nav-bar {
    padding-top: var(--una-safe-top) !important;
  }
}

/* ─── 6) 스크롤 모멘텀 (iOS) ──────────────────────────────────── */
@media (max-width: 480px) {
  body, main, section, .scroll-area {
    -webkit-overflow-scrolling: touch;
  }
}

/* ─── 7) Capacitor 앱 전용 ─────────────────────────────────────── */
/* JS에서 html에 .una-in-app 클래스를 자동 부여하면 적용 */
.una-in-app {
  /* 앱 내부에선 외부 링크·zoom·pull-to-refresh 같은 브라우저 UI 제거 */
}
@media (max-width: 480px) {
  .una-in-app body {
    overscroll-behavior-y: none;
  }
}