fix(ui): iOS safe-area 겹침 수정 — 헤더·하단 내비 콘텐츠 눌림 해결

- border-box 전역에서 고정 height 가 safe-area 패딩을 포함해 콘텐츠 행이 눌리던 문제
- AppBottomNav: height = calc(56px + safe-area-inset-bottom) → 아이콘 행 온전한 56px + 홈인디케이터 분리
- AppHeader: height → min-height → layout-top 상단 safe-area 패딩만큼 헤더가 커지도록

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
sb
2026-07-04 17:12:50 +09:00
parent 1cbf47ff87
commit cbb3d47bfa
2 changed files with 7 additions and 3 deletions
+4 -2
View File
@@ -74,8 +74,10 @@ function goSettings() {
display: flex;
align-items: stretch;
justify-content: space-around;
height: 56px;
/* 안드로이드 소프트키(시스템 내비게이션 바) 위에 위치 */
/* 아이콘 행은 항상 56px 확보 + 그 아래로 홈 인디케이터(safe-area) 공간을 더한다.
(box-sizing:border-box 전역이라 height 에 인셋을 더해야 아이콘 행이 눌리지 않음) */
height: calc(56px + env(safe-area-inset-bottom, 0));
/* 안드로이드 소프트키·iOS 홈 인디케이터 영역 확보 */
padding-bottom: env(safe-area-inset-bottom, 0);
background: var(--color-background-soft);
border-top: 1px solid var(--color-border);