/* 승인된 아이폰 앱 디자인 보정. 공통 웹/Android 간격은 각 원본 CSS에서 유지한다. */
/* 날짜와 글쓰기 리모콘이 같은 상단 기준을 사용한다. */
html.native-ios {
    /* 모든 공통 토스트를 카메라 안전 영역 아래 12px에 표시한다. */
    --app-toast-top: max(40px, calc(env(safe-area-inset-top, 0px) + 12px));
    --ios-diary-header-top: calc(15px + env(safe-area-inset-top, 0px) - min(16px, env(safe-area-inset-top, 0px)));
}
html.native-ios #diary-feed-container {
    --diary-header-lift: min(16px, env(safe-area-inset-top, 0px));
    padding-top: var(--ios-diary-header-top);
}
html.native-ios .night-sky-bg {
    top: calc(env(safe-area-inset-top, 0px) - var(--diary-header-lift));
}
/* 물결 높이는 그대로 두고 카메라 위쪽만 같은 네이비로 채운다. */
html.native-ios #diary-feed-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: env(safe-area-inset-top, 0px);
    background-color: #15273f;
    pointer-events: none;
    z-index: 0;
}
html.native-ios .fab-container {
    top: var(--ios-diary-header-top);
}
/* 설정 화면의 안전 영역은 공통 헤더가 담당한다. 본문에는 중복으로 더하지 않는다. */
html.native-ios #bottom-nav,
html.native-ios #view-shop .bottom-nav {
    height: calc(70px + env(safe-area-inset-bottom, 0px));
}
html.native-ios .shop-hero-area {
    padding-top: env(safe-area-inset-top, 0px);
}
/* 간판은 공통 원래 위치를 사용하고 이미지 위쪽에만 네이비 안전 영역을 더한다. */
/* 상점의 모든 하위 화면에서 헤더와 고정 콘텐츠가 같은 안전 영역 기준을 사용한다. */
html.native-ios #view-shop {
    --ios-shop-subpage-header-height: calc(env(safe-area-inset-top, 0px) + 42px);
}
/* 상점 버튼을 카메라 아래로 배치하며 배경은 그라데이션 없이 유지한다. */
html.native-ios #view-shop .app-header {
    --shop-header-height: var(--ios-shop-subpage-header-height);
    padding-top: calc(env(safe-area-inset-top, 0px) + 4px);
    padding-bottom: 4px;
}

html.native-ios #view-shop .app-header--subpage-sticky {
    top: 0;
}

/* iOS WebKit에서 높이가 변하는 sticky 형제 둘을 따로 계산하면 메뉴가 미리보기를
   덮을 수 있다. 미리보기와 메뉴를 한 묶음으로 고정해 항상 순서대로 배치한다. */
/* 일기 앱 안의 상점(index.html)은 shop.preview.embedded.css의 `#view-shop #page-otomo …`(ID 2개)를
   쓰므로, 같은 요소를 `#view-shop #page-otomo`로도 지정해야 이 보정이 우선한다. shop.html에는
   #view-shop이 없어 앞의 선택자가 적용된다. */
html.native-ios #page-otomo .otomo-sticky-stack,
html.native-ios #view-shop #page-otomo .otomo-sticky-stack {
    display: block;
    position: sticky;
    top: var(--ios-shop-subpage-header-height);
    z-index: 95;
}

html.native-ios #page-otomo .fitting-area,
html.native-ios #view-shop #page-otomo .fitting-area {
    position: relative;
    top: auto;
    z-index: 0;
    overflow: hidden;
}

html.native-ios #page-otomo .sub-tabs-container,
html.native-ios #view-shop #page-otomo .sub-tabs-container {
    position: relative;
    top: auto;
    z-index: 1;
    box-shadow: 0 1px 0 rgba(26, 42, 58, 0.06);
}

/* 상점 다이어리 화면의 고정 카테고리 줄은 iPhone 헤더 높이 바로 아래에 붙인다.
   앱 안 상점은 `#view-shop #page-diary …`(ID 2개) 규칙을 쓰므로 같은 선택자로 지정한다. */
html.native-ios #page-diary .sub-tabs-container,
html.native-ios #view-shop #page-diary .sub-tabs-container {
    top: var(--ios-shop-subpage-header-height);
}

/* 바깥 WebView 고정(bounces=false)과 별개로, 일기 메인과 모든 상점 화면(별친구 포함)이 끝에서
   당겨질 때 목록 자체가 고무줄처럼 늘어나지 않게 한다. contain은 바깥 전달만 막고 늘어남은 남긴다.
   별친구 묶음 고정이 깨졌던 원인은 이 설정이 아니라 위의 선택자 우선순위였다. */
html.native-ios #diary-feed-container,
html.native-ios #view-shop .page-view {
    overscroll-behavior-y: none;
}

/* 일기가 없을 때 환영 안내의 최소 높이(50vh)가 iPhone 상단 여백과 합쳐져 목록을 26px 넘치게 해
   위로 밀면 화면이 올라갔다. 남은 공간만 채우고(flex: 1) 내용보다 작아지지 않게 한다. */
html.native-ios .otomo-welcome-message {
    min-height: auto;
}