/* ======================================== */
/* Mobile Back Button Module */
/* 모바일 전용 백 버튼 스타일 - 독립 모듈 */
/* ======================================== */

/* 모바일 백 버튼 - 상세 페이지에서만 표시 (최고 우선순위) */
.detail-page .header.mobile-device .nav-container .nav-actions .back-button,
.detail-page .header .nav-container .nav-actions .back-button {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 1000 !important;
    cursor: pointer !important;
    padding: var(--spacing-3) !important;
    border-radius: var(--radius-md) !important;
    transition: all 0.2s ease !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    outline: none !important;
    width: 44px !important;
    height: 44px !important;
    gap: 4px !important;
    backdrop-filter: blur(5px) !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    /* 클릭 가능하도록 강제 설정 */
    pointer-events: auto !important;
    /* 터치 반응 강화 */
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.3) !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

/* 메인 페이지에서는 백 버튼 숨김 */
.header.mobile-device .nav-container .nav-actions .back-button,
.header .nav-container .nav-actions .back-button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 백 버튼 호버 효과 */
.detail-page .header.mobile-device .nav-container .nav-actions .back-button:hover,
.detail-page .header .nav-container .nav-actions .back-button:hover {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* 백 버튼 아이콘 스타일 */
.detail-page .header.mobile-device .nav-container .nav-actions .back-button i,
.detail-page .header .nav-container .nav-actions .back-button i {
    font-size: 18px !important;
    color: var(--white) !important;
    transition: all var(--transition-normal) !important;
    display: block !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    /* 추가 강력한 표시 속성 */
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 백 버튼 아이콘 호버 효과 */
.detail-page .header.mobile-device .nav-container .nav-actions .back-button:hover i,
.detail-page .header .nav-container .nav-actions .back-button:hover i {
    transform: translateX(-2px) !important;
    color: var(--white) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* 모바일 터치 효과 - 진해지는 효과 (강화) */
.detail-page .header.mobile-device .nav-container .nav-actions .back-button:active,
.detail-page .header .nav-container .nav-actions .back-button:active {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    transform: scale(0.95) !important;
}

.detail-page .header.mobile-device .nav-container .nav-actions .back-button:active i,
.detail-page .header .nav-container .nav-actions .back-button:active i {
    transform: translateX(-3px) scale(0.95) !important;
    color: var(--white) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

/* 포커스 효과 */
.detail-page .header.mobile-device .nav-container .nav-actions .back-button:focus,
.detail-page .header .nav-container .nav-actions .back-button:focus {
    outline: 2px solid rgba(255, 255, 255, 0.6) !important;
    outline-offset: 2px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
}

/* 추가 호버 효과 (터치 디바이스에서도 작동) */
.detail-page .header.mobile-device .nav-container .nav-actions .back-button:hover,
.detail-page .header .nav-container .nav-actions .back-button:hover {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-1px) !important;
}

.detail-page .header.mobile-device .nav-container .nav-actions .back-button:hover i,
.detail-page .header .nav-container .nav-actions .back-button:hover i {
    transform: translateX(-2px) !important;
    color: var(--white) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* 로딩 상태 스타일 */
.detail-page .header.mobile-device .nav-container .nav-actions .back-button.loading,
.detail-page .header .nav-container .nav-actions .back-button.loading {
    opacity: 0.7 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

.detail-page .header.mobile-device .nav-container .nav-actions .back-button.loading i,
.detail-page .header .nav-container .nav-actions .back-button.loading i {
    animation: spin 1s linear infinite !important;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 상세 페이지에서 로고 숨김 (모바일) */
.detail-page .header.mobile-device .nav-container .nav-logo,
.detail-page .header .nav-container .nav-logo {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

.detail-page .header.mobile-device .nav-container .nav-logo a,
.detail-page .header .nav-container .nav-logo img {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 상세 페이지에서 햄버거 아이콘 숨김 (모바일) */
.detail-page .header.mobile-device .nav-container .nav-actions .hamburger,
.detail-page .header .nav-container .nav-actions .hamburger {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.detail-page .header.mobile-device .nav-container .nav-actions .hamburger span,
.detail-page .header .nav-container .nav-actions .hamburger span {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ======================================== */
/* 모바일 전용 백 버튼 모듈 끝 */
/* ======================================== */