/* ═══════════════════════════════════════════════════════════════════
   MEGASKOREA Mobile UX Improvements
   파일: public/css/mobile-ux.css
   목적: 76.4% 모바일 트래픽 체류시간·결제율 개선
   ═══════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────
   1. 터치 친화적 버튼 크기 (Apple HIG 44px / Material 48dp)
   ────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {

    body {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }

    /* 햄버거 버튼 44px */
    .hamburger {
        width: 44px !important;
        height: 44px !important;
        right: 8px !important;
    }
    .hamburger span {
        width: 22px !important;
    }

    /* 충전 빠른 버튼 */
    .charge__quick--mo {
        right: 50px !important;
        padding: 6px !important;
        min-width: 44px;
        min-height: 44px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* 정렬 탭 버튼 터치 영역 48px */
    .list__area > .list__btn {
        gap: 0 !important;
        margin-bottom: 0 !important;
        background: #161616;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid #222;
        margin-bottom: 14px !important;
        position: relative;
    }
    .list__area > .list__btn > li {
        min-height: 48px;
        min-width: 72px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 14px;
        position: relative;
        flex: 1;
    }
    .list__area > .list__btn > li h2 {
        font-size: 15px !important;
        margin: 0 !important;
    }
    .list__area > .list__btn > li.active {
        background: #1e1e1e;
    }
    .list__area > .list__btn > li.active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 10px;
        right: 10px;
        height: 2px;
        background: #e53935;
        border-radius: 1px;
    }

    /* 더보기 버튼 */
    .more__btn {
        min-height: 48px !important;
        width: 140px !important;
    }

    /* 결제/시청 버튼 */
    .red__btn.play__movie {
        min-height: 54px !important;
        font-size: 17px !important;
        border-radius: 14px !important;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
    .red__btn, .line__btn {
        min-height: 50px;
    }

    /* 모바일 메뉴 링크 터치 영역 */
    .mo__menu__area li a {
        min-height: 52px;
        display: flex;
        align-items: center;
        padding: 0 10px;
    }

    section {
        margin-bottom: 0 !important;
    }

    /* 검색창 전폭 */
    .list__search {
        max-width: 100% !important;
    }

    /* 스와이프 뒤로가기 힌트 */
    .swipe-back-hint {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #555;
        font-size: 11px;
        padding: 6px 0 2px;
    }
    .swipe-back-hint svg {
        width: 14px;
        height: 14px;
        stroke: #555;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
    }
}
@media screen and (min-width: 769px) {
    .swipe-back-hint { display: none; }
}

/* ──────────────────────────────────────────────────────────────────
   2. 하단 고정 탭바 (Bottom Navigation Bar)
   ────────────────────────────────────────────────────────────────── */
.mobile-tabbar {
    display: none;
}

@media screen and (max-width: 768px) {
    .mobile-tabbar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #0e0e0e;
        border-top: 1px solid #1e1e1e;
        z-index: 9990;
        align-items: stretch;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        height: calc(60px + env(safe-area-inset-bottom, 0px));
    }

    /* 결제 페이지에서 숨김 */
    body.is-payment-page .mobile-tabbar {
        display: none;
    }
    body.is-payment-page {
        padding-bottom: 0 !important;
    }

    .mobile-tabbar__item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        text-decoration: none;
        color: #555;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: -0.01em;
        transition: color 0.15s;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
        height: 60px;
    }
    .mobile-tabbar__item svg {
        width: 22px;
        height: 22px;
        stroke: #555;
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: stroke 0.15s;
    }
    .mobile-tabbar__item.is-active {
        color: #e53935;
    }
    .mobile-tabbar__item.is-active svg {
        stroke: #e53935;
    }
    /* 충전 탭 강조 */
    .mobile-tabbar__item--charge {
        color: #F0FF00;
    }
    /* charge.svg 는 img 태그 사용 — svg stroke 불필요 */
    .mobile-tabbar__item--charge img {
        width: 22px;
        height: 22px;
        /* 헤더의 chargeWiggle 애니메이션 동일 적용 */
        animation: chargeWiggle 1.6s ease-in-out infinite;
        transform-origin: center;
    }
    @media (prefers-reduced-motion: reduce) {
        .mobile-tabbar__item--charge img { animation: none; }
    }
    .mobile-tabbar__item:active {
        background: rgba(255,255,255,0.04);
    }
}

/* ──────────────────────────────────────────────────────────────────
   3. 인스타그램 인앱 브라우저 외부 유도 배너
   ────────────────────────────────────────────────────────────────── */
.inapp-notice-bar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #110c1a;
    border-bottom: 2px solid #e53935;
    padding: 8px 12px 8px 14px;
    z-index: 10001;
    align-items: center;
    gap: 10px;
}
.inapp-notice-bar.is-visible {
    display: flex;
}
body.inapp-detected header {
    top: 46px !important;
    transition: top 0.2s;
}
body.inapp-detected .mo__menu__wrap {
    top: calc(80px + 46px) !important;
}
.inapp-notice-bar__text {
    flex: 1;
    min-width: 0;
}
.inapp-notice-bar__text strong {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1px;
}
.inapp-notice-bar__text span {
    font-size: 11px;
    color: #aaa;
}
.inapp-notice-bar__close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #666;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
    -webkit-tap-highlight-color: transparent;
}

/* ──────────────────────────────────────────────────────────────────
   4. 스크롤 시 헤더 축소 애니메이션 (모바일)
   ────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
    header {
        transition: height 0.25s ease, background-color 0.25s ease;
    }
    header .header__logo {
        transition: width 0.25s ease;
    }
    header.scrolled {
        height: 56px !important;
        background-color: rgba(0, 0, 0, 0.85) !important;
    }
    header.scrolled .header__logo {
        width: 88px !important;
    }
}