/* 모바일 앱 셸 — viewport.js 와 한 쌍. <body class="app-shell"> */
:root { --app-h: 100%; --vv-top: 0px; --shell-bg: #070a13; }
html[data-ui-theme-mode="light"] { --shell-bg: #eef0f7; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; }
button, a, summary, label, [role="button"], .call-item, .row-cell { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* 앱 전체를 화면에 고정. 문서는 스크롤하지 않고 내용 영역만 스크롤한다. */
html:has(body.app-shell) { height: 100%; overflow: hidden; }
body.app-shell {
  position: fixed; left: 0; right: 0; top: var(--vv-top);
  height: var(--app-h); width: 100%; overflow: hidden; overscroll-behavior: none;
}

/* safe-area — 유틸리티 CSS 가 뒤에 와도 지지 않게 !important */
.safe-top    { padding-top: max(1.25rem, env(safe-area-inset-top)) !important; }
.safe-bottom { padding-bottom: max(0.5rem, env(safe-area-inset-bottom)) !important; }
header.safe-top-header {
  padding-top: env(safe-area-inset-top) !important;
  height: calc(3.5rem + env(safe-area-inset-top)) !important;
  min-height: calc(3.5rem + env(safe-area-inset-top)) !important;
}
aside.safe-top-aside { padding-top: env(safe-area-inset-top) !important; }
.safe-top-fixed { top: max(16px, calc(env(safe-area-inset-top) + 8px)) !important; }

@media (pointer: coarse), (max-width: 767.98px) {
  /* 16px 미만이면 iOS 가 포커스 때 확대 */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select { font-size: 16px !important; }
  body.app-shell { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  body.app-shell :is(input, textarea, pre, code, table, .select-text, .bubble, .transcript-text) { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
  ::-webkit-scrollbar { width: 0; height: 0; }
  .overflow-y-auto, .overflow-auto, .overflow-x-auto { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  /* 터치 대상 최소 44px */
  .theme-settings-btn, .icon-btn { width: 40px; height: 40px; }
}

/* 하단 탭바 (md 미만) — 홈 인디케이터와 살짝 겹치게 해야 네이티브처럼 낮아 보인다 */
.tabbar {
  display: flex; flex-shrink: 0; z-index: 30; position: relative;
  padding: 6px 6px max(6px, calc(env(safe-area-inset-bottom) - 12px));
  background: rgba(10, 13, 24, .92);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
html[data-ui-theme-mode="light"] .tabbar { background: rgba(255,255,255,.94); border-color: rgba(15,23,42,.08); }
.tab-item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
            padding: 5px 0 2px; border-radius: 12px; color: rgba(255, 255, 255, .45); }
html[data-ui-theme-mode="light"] .tab-item { color: #5a6781; }
.tab-item .tab-icon { position: relative; font-size: 18px; line-height: 1; height: 20px; }
.tab-item .tab-label { font-size: 10.5px; font-weight: 700; }
.tab-item.active { color: #93c5fd; }
html[data-ui-theme-mode="light"] .tab-item.active { color: #1d4ed8; }
.tab-item.tab-call .tab-icon { top: -12px; height: 28px; }
.tab-item.tab-call .call-orb { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #22c55e, #10b981); color: #fff; box-shadow: 0 8px 24px rgba(34,197,94,.45); border: 3px solid rgba(8,11,22,.9); margin-top: -8px; }
html[data-ui-theme-mode="light"] .tab-item.tab-call .call-orb { border-color: #fff; }
.tab-badge { position: absolute; top: -5px; left: 13px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
             background: #f59e0b; color: #111827; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.tab-badge.hidden { display: none; }
html.kb-open .tabbar { display: none; }
@media (min-width: 768px) { .tabbar { display: none; } }

/* 전체 화면 슬라이드 패널 (목록 → 상세) */
@media (max-width: 1023.98px) {
  .detail-pane { position: fixed; left: 0; right: 0; top: var(--vv-top); height: var(--app-h); z-index: 60;
                 background: var(--shell-bg); transform: translateX(100%); visibility: hidden;
                 transition: transform 240ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 240ms; display: flex; flex-direction: column; }
  body.detail-open .detail-pane { transform: none; visibility: visible; transition: transform 240ms cubic-bezier(.2,.8,.2,1); }
  .detail-pane .glass, .detail-pane .glass-strong, .detail-pane .glass-soft { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) { .detail-pane { transition: none !important; } }

/* 키보드가 올라오면 고정 하단 CTA 는 inset 없이 */
html.kb-open .kb-hide { display: none !important; }
html.kb-open .composer.safe-bottom { padding-bottom: .25rem !important; }

/* ── 누르는 느낌 (press.js 가 .is-pressed / .press-release 를 붙인다 · 09-native-touch-feel) ──
   누를 땐 0ms, 뗄 땐 200ms. transform 대신 개별 scale 속성 → 슬라이드 패널 · 칩의 transform 을 건드리지 않는다 */
.is-pressed { transition: none !important; opacity: .5; scale: .96; }
.is-pressed:disabled { opacity: .3; scale: none; }
/* 넓은 버튼 · 탭 · 큰 카드는 작아지면 어색하다 → 흐려지기만 */
:is(.tab-item, .w-full, .nav-link, .topic-card.block).is-pressed { scale: none; }
/* 통화 중 원형 버튼은 흐려지지 않고 살짝 작아지기만 (아이폰 통화 화면) */
.ctl .is-pressed { opacity: .75; scale: .92; }
/* 목록 줄: 흐려지지 않고 배경만 진해진다 (UITableViewCell). box-shadow 로 덧칠 → 선택 · 활성 배경을 유지 */
:is(.call-item, .row-cell, .nav-link, .sheet-action).is-pressed { opacity: 1; scale: none; box-shadow: inset 0 0 0 999px rgba(255,255,255,.08); }
html[data-ui-theme-mode="light"] :is(.call-item, .row-cell, .nav-link, .sheet-action).is-pressed { box-shadow: inset 0 0 0 999px rgba(15,23,42,.07); }
.press-release { transition: opacity .2s ease-out, scale .2s cubic-bezier(.2,.9,.3,1.2), box-shadow .25s ease-out !important; }
/* 느린 요청: 방금 누른 버튼을 흐리게 + 다시 누르기 막기 */
.is-busy { opacity: .55; pointer-events: none; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .is-pressed { scale: none; } .press-release { transition: opacity .15s !important; } }

/* 작은 버튼의 터치 영역만 넓히기 (보이는 크기는 그대로, ≥44pt). 모바일 .icon-btn · 테마 버튼은 이미 40px → 사방 5px.
   .hit 는 글자만 있는 작은 버튼(번역 · 듣기 · 저장 · 닫기 ✕)용 — 이웃과 겹치면 뒤 버튼이 이기므로 세로로만 넓힌다 */
@media (pointer: coarse) {
  .icon-btn, .theme-settings-btn { position: relative; }   /* absolute 인 버튼은 Tailwind .absolute 가 뒤에서 이긴다 */
  .icon-btn::after, .theme-settings-btn::after { content: ''; position: absolute; inset: -5px; }   /* 테두리 1px 포함 40 → 50px */
  .hit { position: relative; }
  .hit::after { content: ''; position: absolute; inset: -10px -2px; }
}