/**
 * ip_school 웹/앱 공용 분기 유틸리티 CSS
 *
 * body 클래스(user_js_inc.php 에서 부여):
 *   - .lb-platform-ios     : iOS 앱
 *   - .lb-platform-android : Android 앱
 *   - .lb-platform-web     : 웹 브라우저
 *
 * 유틸 클래스:
 *   - .web-only : 웹에서만 노출 (앱에서는 숨김)
 *   - .app-only : 앱에서만 노출 (웹에서는 숨김)
 *
 * 사용 예시:
 *   <button class="web-only">파일 다운로드</button>       <!-- 앱에선 숨김 -->
 *   <div class="app-only">앱 전용 푸시 알림 설정</div>      <!-- 웹에선 숨김 -->
 */

/* 기본: 둘 다 표시 되도록 놔두되, 분기 클래스가 붙으면 해당 요소 숨김 */
.lb-platform-ios .web-only,
.lb-platform-android .web-only {
    display: none !important;
}

/* 앱이 아닌 환경(웹)에서는 app-only 숨김 */
.lb-platform-web .app-only {
    display: none !important;
}

/* ===== iOS safe-area 보정 (노치/홈 인디케이터 영역) =====
 * WebView 는 SafeArea 바깥으로 확장되는 경우가 있으므로, 하단 고정 요소는
 * env(safe-area-inset-bottom) 만큼 여유를 주도록 페이지별 CSS 에서 활용. */
.lb-platform-ios .safe-area-bottom {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
}

.lb-platform-ios .safe-area-top {
    padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
}

/* iOS 앱은 탭 하이라이트 색상 제거(기본 파란 플래시 방지) */
.lb-platform-ios *,
.lb-platform-android * {
    -webkit-tap-highlight-color: transparent;
}

/* Google Translate 내부 위젯(iframe)은 앱/웹 모두 숨김 — UI는 커스텀 langModal 사용 */
.lb-platform-ios #google_translate_element,
.lb-platform-android #google_translate_element {
    display: none !important;
}
/* 언어 변경 버튼 (langModalBtn) 은 앱에서도 표시되어야 다국어 지원 가능 */

/* ===== 앱 전용: 푸터 기본 숨김 ===== */
.lb-platform-ios .footer,
.lb-platform-android .footer {
    display: none !important;
}

/* 앱에서 body 에 .app-show-footer 가 붙은 페이지(마이페이지류)만 푸터 노출 */
.lb-platform-ios.app-show-footer .footer,
.lb-platform-android.app-show-footer .footer {
    display: block !important;
    /* 하단 네비게이션 바와 겹치지 않도록 여유 padding */
    padding-bottom: var(--app-bottom-nav-space, calc(60px + env(safe-area-inset-bottom, 0px) + 12px)) !important;
}

/* ===== 앱 전용 하단 네비게이션 바 ===== */
.app-bottom-nav {
    display: none; /* 웹에서는 기본 숨김 */
}

.lb-platform-ios .app-bottom-nav,
.lb-platform-android .app-bottom-nav {
    display: flex !important;
    /* body 가 스크롤 안 하므로 fixed 가 항상 body 기준으로 고정됨 */
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2147483646 !important;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
    pointer-events: auto !important;
}

/* 세로모드에서만 하단 네비게이션 노출. 가로모드에서는 숨김.
   body 의 .is-portrait / .is-landscape 클래스는 app_bottom_nav_inc.php 의 JS 가
   네이티브 lb:orientation-change / lb:app-resume 이벤트로 갱신.
   미디어 쿼리도 함께 적용해 네이티브 이벤트가 늦거나 누락된 경우 폴백.
   nav 자체뿐 아니라 .app-scroll-wrapper 가 예약하던 76px 도 0 으로 회수해
   가로 화면에서 빈 띠가 남지 않도록 함. */
.lb-platform-ios.is-landscape .app-bottom-nav,
.lb-platform-android.is-landscape .app-bottom-nav {
    display: none !important;
}
.lb-platform-ios.is-landscape,
.lb-platform-android.is-landscape,
.lb-platform-ios.is-landscape body,
.lb-platform-android.is-landscape body,
.lb-platform-ios.is-landscape html,
.lb-platform-android.is-landscape html {
    --app-bottom-nav-space: 0px !important;
}
@media (orientation: landscape) {
    .lb-platform-ios .app-bottom-nav,
    .lb-platform-android .app-bottom-nav {
        display: none !important;
    }
    .lb-platform-ios,
    .lb-platform-android,
    .lb-platform-ios body,
    .lb-platform-android body,
    .lb-platform-ios html,
    .lb-platform-android html {
        --app-bottom-nav-space: 0px !important;
    }
    /* JS 로 삽입된 spacer 도 가로에선 회수 */
    .lb-platform-ios .app-bottom-nav-spacer,
    .lb-platform-android .app-bottom-nav-spacer {
        display: none !important;
    }
}

.lb-platform-ios .app-bottom-nav__item,
.lb-platform-android .app-bottom-nav__item {
    pointer-events: auto !important;
    cursor: pointer;
}

.app-bottom-nav__item {
    flex: 1 1 0;
    min-width: 0;              /* flex 라벨 overflow ellipsis 허용 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 7px 2px 8px;
    color: #9ca3af;
    text-decoration: none;
    line-height: 1.1;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.app-bottom-nav__item:active {
    background: rgba(0, 0, 0, 0.04);
}

.app-bottom-nav__item.is-active {
    color: #F36D22;            /* ip_school 브랜드 오렌지 (로고 색상 계열) */
    font-weight: 600;
}

.app-bottom-nav__item.is-active .app-bottom-nav__icon {
    stroke-width: 2.2;         /* 활성 탭은 살짝 두껍게 강조 */
}

.app-bottom-nav__icon {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    display: block;
}

.app-bottom-nav__label {
    font-size: 10.5px;
    letter-spacing: -0.2px;
    color: inherit;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 앱에서 body / 주요 컨테이너 하단에 네비바 높이 + 여유 공간 확보
   (바닥 스크롤 시 마지막 콘텐츠가 네비바에 가리지 않도록)
   CSS 변수 사용 시 WebView 재계산 이슈가 있을 수 있어 고정값으로 처리 */
.lb-platform-ios body,
.lb-platform-android body,
.lb-platform-ios html,
.lb-platform-android html {
    --app-bottom-nav-space: 76px;  /* 네비바 60px + 하단 여유 16px */
}

/* 앱에서 body 자체는 스크롤 안 함 (내부 .app-scroll-wrapper 가 스크롤 담당) */
.lb-platform-ios body,
.lb-platform-android body {
    padding-bottom: 0 !important;
    margin: 0;
    height: 100vh;
    overflow: hidden !important;
    overscroll-behavior-y: contain;
    position: relative;  /* fixed 네비바가 body 기준으로 고정되도록 */
}

.lb-platform-ios html,
.lb-platform-android html {
    height: 100vh;
    overflow: hidden;
    overscroll-behavior-y: contain;
}

/* 앱 전용 스크롤 컨테이너 — 기존 body 자식 전체가 이 wrapper 로 이동됨 */
.app-scroll-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--app-bottom-nav-space, 76px);  /* 네비바 공간 제외한 높이 */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    /* 스크롤바 숨김 — content 영역이 scrollbar 만큼 좁아져 우측 요소(햄버거 등) 잘리는 현상 방지 */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE / old Edge */
}
.app-scroll-wrapper::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
}
.app-scroll-wrapper::-webkit-scrollbar-thumb,
.app-scroll-wrapper::-webkit-scrollbar-track,
.app-scroll-wrapper::-webkit-scrollbar-corner {
    display: none !important;
    background: transparent !important;
}

/* JS 로 wrapper 끝에 삽입되는 spacer — 콘텐츠가 바닥에 닿을 때 여유 */
.app-bottom-nav-spacer {
    display: block;
    height: 16px;
    width: 100%;
    flex-shrink: 0;
    pointer-events: none;
}

/* ===== 앱 전용 헤더 반응형 보정 (좁은 뷰포트에서 우측 요소 잘림 방지) =====
   미디어쿼리 조건 제거하고 앱에선 항상 적용 (앱은 항상 모바일 좁은 폭) */
.lb-platform-ios .header,
.lb-platform-android .header {
    padding-right: 20px !important;  /* 햄버거 오른쪽 여백 확보 (14→20px) */
    padding-left: 12px !important;
    box-sizing: border-box !important;
    overflow: visible !important;    /* 햄버거가 잘리지 않도록 */
}
.lb-platform-ios .header-container,
.lb-platform-android .header-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}
.lb-platform-ios .header-actions,
.lb-platform-android .header-actions {
    gap: 6px !important;  /* 각 요소 간 간격 (LOGIN / 국기 / 햄버거 사이) */
    flex-shrink: 0 !important;
    margin-right: 0 !important;
    align-items: center !important;
}
.lb-platform-ios .header-btn,
.lb-platform-android .header-btn {
    width: 36px !important;
    height: 36px !important;
    padding: 4px !important;
    flex-shrink: 0 !important;
    color: #222 !important;  /* 연한 회색(#656565) → 진한 색으로 대비 강화 */
}
.lb-platform-ios .header-btn svg,
.lb-platform-android .header-btn svg {
    width: 24px !important;
    height: 24px !important;
    stroke-width: 2.5 !important;  /* 얇음 방지 */
}
/* 햄버거 버튼 특화 — 더 굵게 */
.lb-platform-ios #mobileMenuBtn svg,
.lb-platform-android #mobileMenuBtn svg {
    stroke-width: 2.8 !important;
    stroke: #222 !important;
}
.lb-platform-ios .lang-btn,
.lb-platform-android .lang-btn {
    width: auto !important;
    min-width: 36px !important;
    height: 32px !important;
    padding: 2px 4px !important;
    flex-shrink: 0 !important;
}
.lb-platform-ios .lang-btn img,
.lb-platform-android .lang-btn img {
    width: 32px !important;
    height: auto !important;
}
.lb-platform-ios .menu-btn,
.lb-platform-android .menu-btn {
    margin-right: 0 !important;
    flex-shrink: 0 !important;
}
/* LOGIN 버튼(header-user-avatar guest 상태) — 박스/폰트 대폭 축소 (앱 모바일 전용) */
.lb-platform-ios .header-user-avatar[data-state="guest"],
.lb-platform-android .header-user-avatar[data-state="guest"] {
    padding: 0 !important;
    flex-shrink: 0 !important;
}

/* 실제 LOGIN 텍스트 박스 내부 스타일 축소 — common.css 의 min-width 72px, h 36px, padding 0 18px 오버라이드 */
.lb-platform-ios .header-user-avatar[data-state="guest"] .header-user-login-text,
.lb-platform-android .header-user-avatar[data-state="guest"] .header-user-login-text {
    min-width: auto !important;
    height: 28px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    border-radius: 4px !important;
    line-height: 1 !important;
}

/* 로그인 링크 버튼(header-btn.user-btn) 자체의 여유 padding 제거 */
.lb-platform-ios #headerUser .header-btn,
.lb-platform-android #headerUser .header-btn,
.lb-platform-ios #headerMypageBtn,
.lb-platform-android #headerMypageBtn {
    width: auto !important;
    height: 28px !important;
    padding: 0 !important;
}
/* 로고 영역 — SHOPPING 텍스트가 공간 많이 먹어서 좁힘 */
.lb-platform-ios .logo,
.lb-platform-android .logo {
    gap: 4px !important;
}

/* footer 표시 페이지(마이페이지류)는 이미 .app-show-footer .footer 에서 처리되므로
   별도 padding 필요 없음. 그 외 페이지의 주 콘텐츠 래퍼에도 여유 적용 */
.lb-platform-ios main,
.lb-platform-android main,
.lb-platform-ios .container,
.lb-platform-android .container,
.lb-platform-ios .page-content,
.lb-platform-android .page-content {
    padding-bottom: var(--app-bottom-nav-space);
}