/**
 * 8 BALL — MTV Common Override
 * STEP 1 / 2026-05-20
 *
 * shop.css 다음에 로드되어 헤더/푸터/사이드바/챗/모바일메뉴를 MTV 톤으로 override.
 * shop.css의 클래스명/구조 100% 보존, 컬러/타이포/박스섀도우만 갈음.
 * 페이지 본문 영역(.main-bag, .main-checkout, .hero 등)에는 영향 없음.
 *
 * 토큰: css/shop/_mtv-tokens.css 참고
 * 롤백: header.jsp의 link 1줄 제거 또는 이 파일 삭제
 */

@import url('/css/shop/_mtv-tokens.css');

/* ============================================
   HEADER
   ============================================ */

.header {
    background: var(--mtv-bg);
    border-bottom: var(--mtv-border-bold);
    box-shadow: 0 4px 0 var(--mtv-black);
    font-family: var(--mtv-font-body);
}

.header-spacer { height: 105px; }

.header-inner {
    height: auto;
    padding: 14px 28px;
}

.header-left .logo img { height: 22px; }

.nav-list { gap: 22px; }

.nav-link {
    font-family: var(--mtv-font-body);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: var(--mtv-tracking-wide);
    text-transform: uppercase;
    color: var(--mtv-black);
    padding: 6px 10px;
    border: 2px solid transparent;
    transition: all var(--mtv-trans-fast);
}

.nav-link:hover,
.nav-link.active {
    opacity: 1;
    background: var(--mtv-yellow);
    border-color: var(--mtv-black);
}

.header-right {
    gap: 10px;
    font-family: var(--mtv-font-body);
}

.header-btn {
    font-family: var(--mtv-font-body);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: var(--mtv-tracking-wide);
    color: var(--mtv-black);
    text-transform: uppercase;
    padding: 8px 14px;
    border: 2px solid var(--mtv-black);
    background: var(--mtv-bg);
    transition: all var(--mtv-trans-fast);
}

.header-btn:hover {
    opacity: 1;
    background: var(--mtv-yellow);
}

.header-btn.bag-btn {
    background: var(--mtv-black);
    color: var(--mtv-bg);
}
.header-btn.bag-btn:hover {
    background: var(--mtv-hot-pink);
    color: var(--mtv-bg);
}

/* ============================================
   MTV-EXCLUSIVE: ON AIR BAR + BRAND BADGE
   header.jsp 신규 마크업 - 클래스명 mtv-* prefix
   ============================================ */

.mtv-onair-bar {
    background: var(--mtv-hot-pink);
    color: var(--mtv-bg);
    padding: 8px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--mtv-font-mono);
    font-size: 11px;
    letter-spacing: var(--mtv-tracking-wider);
    font-weight: 700;
    border-bottom: var(--mtv-border-thin);
    text-transform: uppercase;
}
.mtv-onair-bar .mtv-onair-live::before {
    content: '●';
    margin-right: 6px;
    animation: mtv-onair-blink 1.2s steps(2) infinite;
}
@keyframes mtv-onair-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.mtv-brand-skew {
    background: var(--mtv-hot-pink);
    color: var(--mtv-bg);
    padding: 6px 14px;
    font-family: var(--mtv-font-body);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 2px;
    transform: skew(-8deg);
    box-shadow: 3px 3px 0 var(--mtv-black);
    margin-right: 12px;
    text-transform: uppercase;
    display: inline-block;
}
.mtv-brand-skew > span {
    display: inline-block;
    transform: skew(8deg);
}

/* ============================================
   HEADER SEARCH (inline)
   ============================================ */

.header-search-wrap.open {
    border-bottom: 2px solid var(--mtv-black);
    padding-bottom: 2px;
}

.header-search-input {
    font-family: var(--mtv-font-mono);
    font-weight: 600;
    color: var(--mtv-black);
    border-bottom: none;
    letter-spacing: 1px;
}
.header-search-input::placeholder {
    color: var(--mtv-mute);
    font-family: var(--mtv-font-mono);
    font-weight: 400;
}

/* ============================================
   HAMBURGER + MOBILE MENU
   ============================================ */

.hamburger-btn span {
    background: var(--mtv-black);
    height: 2px;
}

.mobile-menu-overlay {
    background: var(--mtv-bg);
}

.mobile-menu-inner {
    padding-top: 56px;
}

.mobile-nav-link {
    font-family: var(--mtv-font-display);
    font-weight: 900;
    font-size: 42px;
    letter-spacing: var(--mtv-tracking-tight);
    color: var(--mtv-black);
    text-transform: uppercase;
    text-shadow: 3px 3px 0 var(--mtv-hot-pink);
}
.mobile-nav-link:hover {
    opacity: 1;
    color: var(--mtv-hot-pink);
    text-shadow: 3px 3px 0 var(--mtv-black);
}

.mobile-nav-sub {
    font-family: var(--mtv-font-body);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: var(--mtv-tracking-wider);
    color: var(--mtv-black);
    text-transform: uppercase;
    background: var(--mtv-yellow);
    border: 2px solid var(--mtv-black);
    padding: 10px 18px;
    box-shadow: 4px 4px 0 var(--mtv-black);
    transition: transform var(--mtv-trans-fast);
}
.mobile-nav-sub:hover { opacity: 1; transform: translate(-2px, -2px); }

/* ============================================
   BAG SIDEBAR (Side panel)
   ============================================ */

.bag-sidebar {
    background: var(--mtv-bg);
    border-left: var(--mtv-border-bold);
}

.bag-sidebar-header {
    background: var(--mtv-black);
    color: var(--mtv-bg);
    border-bottom: var(--mtv-border-bold);
    padding: 18px 24px;
}
.bag-sidebar-header h2 {
    font-family: var(--mtv-font-body);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: var(--mtv-tracking-wide);
    color: var(--mtv-bg);
    text-transform: uppercase;
}

.bag-sidebar-close {
    color: var(--mtv-bg);
    background: var(--mtv-hot-pink);
    border: 2px solid var(--mtv-bg);
    width: 32px; height: 32px;
    font-size: 18px;
}
.bag-sidebar-close:hover { background: var(--mtv-yellow); color: var(--mtv-black); }

.sidebar-item {
    padding: 16px 0;
    border-bottom: 2px dashed var(--mtv-black);
}

.sidebar-item-name {
    font-family: var(--mtv-font-body);
    font-weight: 600;
    font-size: 13px;
    color: var(--mtv-black);
    text-transform: uppercase;
    letter-spacing: -0.2px;
}
.sidebar-item-options {
    font-family: var(--mtv-font-mono);
    font-size: 10px;
    color: var(--mtv-mute);
    letter-spacing: 1px;
}
.sidebar-price-now {
    font-family: var(--mtv-font-body);
    font-weight: 700;
    font-size: 14px;
    color: var(--mtv-black);
}
.sidebar-price-original {
    font-family: var(--mtv-font-mono);
    font-size: 11px;
    color: var(--mtv-mute);
}
.sidebar-discount-rate {
    font-family: var(--mtv-font-body);
    font-weight: 700;
    font-size: 12px;
    color: var(--mtv-hot-pink);
    background: var(--mtv-yellow);
    padding: 1px 6px;
    border: 1.5px solid var(--mtv-black);
}

.remove-item-btn { color: var(--mtv-black); }
.remove-item-btn:hover { color: var(--mtv-hot-pink); }

.bag-sidebar-footer {
    background: var(--mtv-bg-warm);
    border-top: var(--mtv-border-bold);
    padding: 20px 24px;
}

.sidebar-total {
    font-family: var(--mtv-font-body);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: var(--mtv-tracking-wide);
    color: var(--mtv-black);
    margin-bottom: 16px;
}

.sidebar-buttons { gap: 8px; }

.sidebar-continue-btn {
    background: var(--mtv-bg);
    color: var(--mtv-black);
    border: 2px solid var(--mtv-black);
    font-family: var(--mtv-font-body);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: var(--mtv-tracking-wide);
    text-transform: uppercase;
    padding: 14px;
    box-shadow: 4px 4px 0 var(--mtv-black);
    transition: transform var(--mtv-trans-fast);
}
.sidebar-continue-btn:hover { background: var(--mtv-yellow); transform: translate(-2px, -2px); }

.sidebar-checkout-btn {
    background: var(--mtv-hot-pink);
    color: var(--mtv-bg);
    border: 2px solid var(--mtv-black);
    font-family: var(--mtv-font-body);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: var(--mtv-tracking-wide);
    text-transform: uppercase;
    padding: 14px;
    box-shadow: 4px 4px 0 var(--mtv-black);
    transition: transform var(--mtv-trans-fast);
}
.sidebar-checkout-btn:hover { background: var(--mtv-black); color: var(--mtv-yellow); transform: translate(-2px, -2px); }

.bag-sidebar-overlay { background: rgba(10,10,10,0.55); }

/* ============================================
   CART ADDED POPUP
   ============================================ */

.cart-added-popup {
    background: var(--mtv-bg);
    border: var(--mtv-border-bold);
    box-shadow: 8px 8px 0 var(--mtv-hot-pink);
    border-radius: 0;
}
.popup-title {
    background: var(--mtv-yellow);
    color: var(--mtv-black);
    font-family: var(--mtv-font-body);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: var(--mtv-tracking-wide);
    text-transform: uppercase;
    border-bottom: var(--mtv-border-thin);
}
.popup-product-name {
    font-family: var(--mtv-font-body);
    font-weight: 600;
    font-size: 13px;
    color: var(--mtv-black);
    text-transform: uppercase;
}
.popup-product-options {
    font-family: var(--mtv-font-mono);
    font-size: 11px;
    color: var(--mtv-mute);
}
.popup-product-price {
    font-family: var(--mtv-font-body);
    font-weight: 700;
    color: var(--mtv-black);
}
.popup-btn-view {
    background: var(--mtv-hot-pink);
    color: var(--mtv-bg);
    border: 2px solid var(--mtv-black);
    font-family: var(--mtv-font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--mtv-tracking-wide);
}
.popup-btn-view:hover { background: var(--mtv-black); }
.popup-btn-checkout {
    background: var(--mtv-bg);
    color: var(--mtv-black);
    border: 2px solid var(--mtv-black);
    font-family: var(--mtv-font-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--mtv-tracking-wide);
}
.popup-btn-checkout:hover { background: var(--mtv-yellow); }
.popup-close {
    color: var(--mtv-black);
    font-weight: 900;
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
    background: var(--mtv-black);
    color: var(--mtv-bg);
    border-top: 4px solid var(--mtv-hot-pink);
}

.footer-row { padding: 16px 24px; }

.footer-brand {
    font-family: var(--mtv-font-body);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: var(--mtv-tracking-wide);
    text-transform: uppercase;
    color: var(--mtv-bg);
}

.footer-policy-wrapper {
    border-top: 2px dashed var(--mtv-bg);
    padding: 14px 24px;
    background: var(--mtv-black);
}

.footer-policy-link {
    color: var(--mtv-bg);
    font-family: var(--mtv-font-body);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: var(--mtv-tracking-wide);
    text-transform: uppercase;
}
.footer-policy-link--bold { color: var(--mtv-yellow); font-weight: 700; }
.footer-policy-link:hover { color: var(--mtv-hot-pink); opacity: 1; }
.footer-policy-sep { color: var(--mtv-mute); }

.footer-info-wrapper {
    background: var(--mtv-black);
    padding: 12px 24px 18px;
}

.footer-info {
    font-family: var(--mtv-font-mono);
    font-size: 10px;
    color: var(--mtv-bg);
    opacity: 0.85;
    letter-spacing: 0.3px;
}

.footer-biz-link, .admin-link-inline {
    color: var(--mtv-yellow);
    font-family: var(--mtv-font-mono);
    text-decoration: underline;
}
.footer-biz-link:hover, .admin-link-inline:hover { color: var(--mtv-hot-pink); }

/* ============================================
   LIVE CHAT
   ============================================ */

.chat-bubble {
    background: var(--mtv-hot-pink);
    border: 2px solid var(--mtv-black);
    border-radius: 50%;
    box-shadow: 4px 4px 0 var(--mtv-black);
}
.chat-bubble:hover {
    background: var(--mtv-yellow);
    transform: translate(-2px, -2px) scale(1.05);
    box-shadow: 6px 6px 0 var(--mtv-black);
}
.chat-bubble svg { stroke: var(--mtv-bg); }
.chat-bubble:hover svg { stroke: var(--mtv-black); }

.chat-bubble-badge {
    background: var(--mtv-yellow);
    color: var(--mtv-black);
    font-family: var(--mtv-font-mono);
    font-weight: 700;
    border: 1.5px solid var(--mtv-black);
}

.chat-window {
    background: var(--mtv-bg);
    border: var(--mtv-border-bold);
    border-radius: 0;
    box-shadow: 8px 8px 0 var(--mtv-hot-pink);
}

.chat-win-header {
    background: var(--mtv-black);
    color: var(--mtv-bg);
    border-bottom: var(--mtv-border-thin);
    padding: 14px 18px;
}
.chat-win-title strong {
    font-family: var(--mtv-font-body);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: var(--mtv-tracking-wide);
    text-transform: uppercase;
}
.chat-win-title span {
    font-family: var(--mtv-font-mono);
    font-size: 10px;
    color: var(--mtv-yellow);
    letter-spacing: 2px;
}
.chat-win-avatar {
    background: var(--mtv-hot-pink);
    border-radius: 0;
    border: 2px solid var(--mtv-bg);
}
.chat-win-close {
    color: var(--mtv-bg);
    background: var(--mtv-hot-pink);
    border: 1.5px solid var(--mtv-bg);
    width: 26px; height: 26px;
    font-size: 16px;
    border-radius: 0;
}

.chat-win-body { background: var(--mtv-bg); }

.chat-msg.user .chat-msg-bubble {
    background: var(--mtv-black);
    color: var(--mtv-bg);
    border-radius: 4px;
    font-family: var(--mtv-font-body);
    font-weight: 400;
}
.chat-msg.admin .chat-msg-bubble {
    background: var(--mtv-yellow);
    color: var(--mtv-black);
    border-radius: 4px;
    font-family: var(--mtv-font-body);
    font-weight: 400;
    border: 1.5px solid var(--mtv-black);
}
.chat-msg-time {
    font-family: var(--mtv-font-mono);
    color: var(--mtv-mute);
}

.chat-msg-avatar {
    background: var(--mtv-hot-pink);
    border-radius: 0;
    border: 1.5px solid var(--mtv-black);
}

.chat-date-divider {
    font-family: var(--mtv-font-mono);
    color: var(--mtv-mute);
    letter-spacing: 1.5px;
    font-weight: 500;
}
.chat-system-msg {
    font-family: var(--mtv-font-mono);
    color: var(--mtv-mute);
    letter-spacing: 1px;
}

.chat-win-footer {
    background: var(--mtv-bg);
    border-top: 2px solid var(--mtv-black);
    padding: 12px 14px;
}
.chat-win-input {
    border: 2px solid var(--mtv-black);
    border-radius: 0;
    font-family: var(--mtv-font-body);
    font-size: 13px;
}
.chat-win-input:focus { border-color: var(--mtv-hot-pink); }

.chat-win-send {
    background: var(--mtv-hot-pink);
    border: 2px solid var(--mtv-black);
    border-radius: 0;
    box-shadow: 2px 2px 0 var(--mtv-black);
    transition: transform var(--mtv-trans-fast);
}
.chat-win-send:hover {
    background: var(--mtv-yellow);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--mtv-black);
}
.chat-win-send svg { stroke: var(--mtv-bg); }
.chat-win-send:hover svg { stroke: var(--mtv-black); }
.chat-win-send:disabled { background: var(--mtv-mute); }

.chat-login-prompt p {
    font-family: var(--mtv-font-body);
    color: var(--mtv-black);
}
.chat-login-prompt p strong {
    font-family: var(--mtv-font-body);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: var(--mtv-tracking-wide);
    text-transform: uppercase;
    color: var(--mtv-black);
}

.chat-guest-btn-primary {
    background: var(--mtv-hot-pink) !important;
    color: var(--mtv-bg) !important;
    font-family: var(--mtv-font-body);
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: var(--mtv-tracking-wide);
    text-transform: uppercase;
    border: 2px solid var(--mtv-black) !important;
    border-radius: 0;
    box-shadow: 3px 3px 0 var(--mtv-black);
    transition: transform var(--mtv-trans-fast);
}
.chat-guest-btn-primary:hover {
    background: var(--mtv-yellow) !important;
    color: var(--mtv-black) !important;
    transform: translate(-2px, -2px);
}
.chat-guest-btn-secondary {
    background: var(--mtv-bg) !important;
    color: var(--mtv-black) !important;
    border: 2px solid var(--mtv-black) !important;
    border-radius: 0;
    font-family: var(--mtv-font-body);
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: var(--mtv-tracking-wide);
}
.chat-guest-btn-secondary:hover { background: var(--mtv-yellow) !important; }

.chat-closed-notice {
    background: var(--mtv-bg-warm);
    color: var(--mtv-mute);
    border-top: 2px solid var(--mtv-black);
    font-family: var(--mtv-font-mono);
    letter-spacing: 1px;
}

/* ============================================
   NAV SPLASH OVERLAY — TV STATIC (Splash 01)
   ============================================ */

.nav-splash-overlay.mtv-splash {
    background: var(--mtv-black);
    overflow: hidden;
}

/* SMPTE Color Bars (배경) */
.splash-color-bars {
    position: absolute; inset: 0;
    display: flex;
    opacity: 0.18;
    z-index: 1;
    pointer-events: none;
}
.splash-color-bars > div { flex: 1; }
.splash-color-bars > div:nth-child(1) { background: #c0c0c0; }
.splash-color-bars > div:nth-child(2) { background: #c0c000; }
.splash-color-bars > div:nth-child(3) { background: #00c0c0; }
.splash-color-bars > div:nth-child(4) { background: #00c000; }
.splash-color-bars > div:nth-child(5) { background: #c000c0; }
.splash-color-bars > div:nth-child(6) { background: #c00000; }
.splash-color-bars > div:nth-child(7) { background: #0000c0; }

/* Static noise (애니메이션) */
.splash-static-bg {
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,0.06) 2px 3px),
        repeating-linear-gradient(90deg, transparent 0 1px, rgba(255,255,255,0.02) 1px 2px),
        radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.6) 100%);
    background-color: transparent;
    background-image:
        repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,0.06) 2px 3px),
        repeating-linear-gradient(90deg, transparent 0 1px, rgba(255,255,255,0.02) 1px 2px),
        radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.6) 100%);
    filter: none;
    animation: mtv-splash-noise 0.15s steps(2) infinite;
    z-index: 2;
    pointer-events: none;
}
@keyframes mtv-splash-noise {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-3px, 2px); }
    50%  { transform: translate(2px, -3px); }
    75%  { transform: translate(-2px, -1px); }
    100% { transform: translate(0, 0); }
}

/* Scanlines */
.splash-scanlines {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,0.4) 3px 4px);
    pointer-events: none;
    z-index: 3;
}

/* Signal Bar (top) */
.splash-signal-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    background: var(--mtv-hot-pink);
    color: var(--mtv-bg);
    padding: 6px 24px;
    font-family: var(--mtv-font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-align: center;
    z-index: 6;
    text-transform: uppercase;
}
.splash-signal-bar::before {
    content: '● ';
    animation: mtv-splash-blink 0.7s steps(2) infinite;
}
@keyframes mtv-splash-blink { 50% { opacity: 0.3; } }

/* Center content */
.nav-splash-overlay .splash-content {
    position: relative;
    z-index: 10;
    text-align: center;
}

.nav-splash-overlay .splash-eyebrow {
    font-family: var(--mtv-font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 5px;
    color: var(--mtv-yellow);
    margin-bottom: 18px;
    background: rgba(10,10,10,0.75);
    padding: 4px 12px;
    border: 1px solid var(--mtv-yellow);
    display: inline-block;
    text-transform: uppercase;
}

.nav-splash-overlay .splash-logo {
    font-family: var(--mtv-font-display);
    font-weight: 400;
    font-size: clamp(72px, 13vw, 170px);
    letter-spacing: 8px;
    line-height: 1;
    color: var(--mtv-bg);
    text-transform: uppercase;
    text-shadow:
        4px 0 0 var(--mtv-hot-pink),
        -4px 0 0 #00d4ff,
        0 4px 0 var(--mtv-black),
        0 0 40px rgba(255,46,110,0.5);
    margin-bottom: 14px;
}

.nav-splash-overlay .splash-sub {
    font-family: var(--mtv-font-mono);
    font-size: 13px;
    color: var(--mtv-yellow);
    letter-spacing: 6px;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(255,227,61,0.6);
}

/* Timestamp (bottom-right) */
.splash-timestamp {
    position: absolute;
    bottom: 24px; right: 24px;
    z-index: 6;
    font-family: var(--mtv-font-mono);
    color: var(--mtv-yellow);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    background: rgba(10,10,10,0.65);
    padding: 4px 10px;
    border: 1px solid var(--mtv-yellow);
}

@media (max-width: 480px) {
    .splash-signal-bar { font-size: 9px; letter-spacing: 1.5px; padding: 5px 14px; }
    .nav-splash-overlay .splash-logo { letter-spacing: 6px; text-shadow: 3px 0 0 var(--mtv-hot-pink), -3px 0 0 #00d4ff, 0 3px 0 var(--mtv-black); }
    .nav-splash-overlay .splash-eyebrow { font-size: 10px; letter-spacing: 3px; }
    .nav-splash-overlay .splash-sub { font-size: 11px; letter-spacing: 4px; }
    .splash-timestamp { font-size: 9px; padding: 3px 8px; bottom: 16px; right: 16px; }
}

/* ============================================
   RESPONSIVE OVERRIDES
   ============================================ */

@media (max-width: 768px) {
    .header-spacer { height: 92px; }
    .header-inner { padding: 12px 16px; }
    .mtv-onair-bar { padding: 7px 14px; font-size: 10px; letter-spacing: 2px; }
    .mobile-nav-link { font-size: 34px; letter-spacing: 0; }
    .mtv-brand-skew { font-size: 14px; padding: 4px 10px; letter-spacing: 1.5px; }
    .chat-window { box-shadow: 4px 4px 0 var(--mtv-hot-pink); }
}

/* ============================================
   Step 2 — Safe Area (iPhone 노치/홈 인디케이터)
   2026-05-20
   ============================================ */

/* ON AIR bar 상단: iPhone 노치 영역 회피 */
.mtv-onair-bar {
    padding-top: calc(8px + var(--mtv-safe-top, 0px));
}

/* 모바일 메뉴 오버레이: 노치 + 홈 인디케이터 회피 */
.mobile-menu-inner {
    padding-top: calc(56px + var(--mtv-safe-top, 0px));
    padding-bottom: calc(24px + var(--mtv-safe-bottom, 0px));
}

/* ============================================
   Step 2 — Mobile Search (햄버거 메뉴 내부)
   ============================================ */

.mobile-search-form {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin-bottom: 28px;
    padding: 0 4px;
}

.mobile-search-input {
    flex: 1;
    min-width: 0;
    min-height: var(--mtv-touch-min);
    padding: 10px 14px;
    border: 3px solid var(--mtv-black);
    border-radius: 0;
    background: var(--mtv-bg-warm);
    font-family: var(--mtv-font-mono);
    /* iOS Safari 자동 확대 방지: input font-size >= 16px 필수 */
    font-size: 16px;
    font-weight: 600;
    color: var(--mtv-black);
    outline: none;
    box-shadow: 4px 4px 0 var(--mtv-hot-pink);
    transition: background var(--mtv-trans-fast);
    -webkit-appearance: none;
    appearance: none;
}
.mobile-search-input:focus {
    background: var(--mtv-yellow);
}
.mobile-search-input::placeholder {
    color: var(--mtv-mute);
    font-weight: 400;
    letter-spacing: 0.5px;
}
/* iOS Safari 검색 input 의 기본 clear 버튼 숨김 (커스텀 디자인 유지) */
.mobile-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.mobile-search-btn {
    width: var(--mtv-touch-min);
    min-width: var(--mtv-touch-min);
    height: auto;
    background: var(--mtv-hot-pink);
    color: var(--mtv-bg);
    border: 3px solid var(--mtv-black);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 4px 4px 0 var(--mtv-black);
    transition: transform var(--mtv-trans-fast), box-shadow var(--mtv-trans-fast);
}
.mobile-search-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--mtv-black);
}
.mobile-search-btn:active {
    transform: translate(0, 0);
    box-shadow: 2px 2px 0 var(--mtv-black);
}
.mobile-search-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
}

/* Bag 사이드바: 상하 safe-area 보정 */
.bag-sidebar-header {
    padding-top: calc(20px + var(--mtv-safe-top, 0px));
}
.bag-sidebar-footer {
    padding-bottom: calc(20px + var(--mtv-safe-bottom, 0px));
}

/* Chat 위젯 (모바일 풀스크린 모드) 하단 보정 */
@media (max-width: 480px) {
    .chat-win-footer {
        padding-bottom: calc(10px + var(--mtv-safe-bottom, 0px));
    }
    .chat-bubble {
        bottom: calc(90px + var(--mtv-safe-bottom, 0px));
    }
}

/* ============================================
   Step 2 — iPhone 13 mini / 메인 폰 미세조정 (480 이하)
   ============================================ */

@media (max-width: 480px) {
    .mtv-onair-bar {
        padding: 6px 12px;
        font-size: 9px;
        letter-spacing: 1.5px;
    }
    .mtv-onair-bar > span:nth-child(2) {
        /* "EST. 2024 · SEOUL · ALL DAY VINTAGE" 가 좁아 두 줄 위험 → 보존하되 letter-spacing 축소 */
        letter-spacing: 1px;
    }
    .header-inner {
        padding: 10px 14px;
    }
    .mobile-nav-link {
        font-size: 28px;
    }
    .mobile-nav-sub {
        font-size: 13px;
        min-height: var(--mtv-touch-min);
        display: inline-flex;
        align-items: center;
    }
    .mtv-brand-skew {
        font-size: 13px;
        padding: 3px 9px;
    }
}

/* ============================================
   Step 2 — 폴드 외화면 / 초소형 (360 이하)
   ============================================ */

@media (max-width: 360px) {
    .mtv-onair-bar > span:nth-child(2) {
        display: none;  /* EST. 2024... 부속 라인 숨김. 핵심 ON AIR · 8 BALL 만 유지 */
    }
    .mobile-nav-link {
        font-size: 24px;
    }
    .header-inner {
        padding: 8px 12px;
    }
}