/* ==========================================================================
   청담언니 · 모바일 최적화  2026-10-01
   style.css 뒤에 로드되어 필요한 부분만 덮어쓴다.
   근거: 헤드리스 크롬 390×844 실측(가로 넘침 없음 확인) + AGENTS.md 8·9항
   ========================================================================== */

/* 1. iOS 가로 모드에서 글자를 임의로 키우지 않게 */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* 2. 뷰포트 높이 — 모바일 주소창이 움직여도 레이아웃이 흔들리지 않게 */
@supports (min-height:100dvh){
  .shell,#app{min-height:100dvh}
  .sheet{max-height:88dvh}
}

/* 3. 세이프 에어리어 — 홈 인디케이터에 가리지 않게 */
#app{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
.toast{bottom:calc(105px + env(safe-area-inset-bottom))}

/* 4. 200% 글자 확대에서 잘리지 않게 — 고정 높이를 최소 높이로 */
header{height:auto;min-height:85px}
.datebox{height:auto;min-height:64px}
.bubble{overflow-wrap:anywhere}

/* 5. 제목·본문이 한 글자만 다음 줄로 떨어지지 않게 */
.hero h2,.hero p,.page-title,.subtitle{text-wrap:balance}

/* 6. 가로 스크롤 영역 — 터치 스크롤 부드럽게, 스크롤바 숨김 */
.suggestions,.chips{-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-right:8px}
.suggestions::-webkit-scrollbar,.chips::-webkit-scrollbar{display:none}

/* 7. 터치 기기에서 손가락 영역 44px 확보 (AGENTS.md 8항) */
@media (max-width:700px),(pointer:coarse){
  header{padding-left:max(23px,env(safe-area-inset-left));padding-right:max(23px,env(safe-area-inset-right))}
  #content{padding-left:max(23px,env(safe-area-inset-left));padding-right:max(23px,env(safe-area-inset-right))}

  /* iOS 는 16px 미만 입력에 포커스가 가면 화면 전체를 확대한다 */
  .chat-compose input,.search input{font-size:16px}

  .language{min-height:44px;padding:0 8px;display:inline-flex;align-items:center}
  .profile{width:44px;height:44px}
  .text-button{min-height:44px;display:inline-flex;align-items:center;padding:0 8px}
  .save{min-width:44px;min-height:44px;display:grid;place-items:center;margin-left:auto}
  .suggestions button,.chip{min-height:44px;display:inline-flex;align-items:center;padding-top:0;padding-bottom:0}
  .clinic-bottom button{min-height:44px;display:inline-flex;align-items:center;padding:0 14px}
  .near-card button{min-height:44px;display:inline-flex;align-items:center;padding:0}
  .event button{min-height:44px;display:inline-flex;align-items:center;padding:0}
  .close{width:44px;height:44px;top:10px;right:10px}
  .send{width:44px;height:44px}
  .room-controls select{min-height:44px}
}

/* 8. 좁은 화면(≤430px) — 홈 4열 그리드가 눌려 글자가 붙던 문제 */
@media (max-width:430px){
  .quick-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .quick{padding:12px 0 10px}
  .pairing-steps{font-size:11px}
}

/* 9. 아주 좁은 화면·200% 확대(≤340px) — 2열을 1열로 */
@media (max-width:340px){
  .room-devices{grid-template-columns:1fr}
  .room-controls{grid-template-columns:1fr}
  .topic-grid{grid-template-columns:1fr}
  .quick-grid{grid-template-columns:1fr}
}