/* =========================================
   모바일 최적화 스타일
   ========================================= */

/* [태블릿/모바일 - 950px 이하] */
@media (max-width: 950px) {
    .header-wrapper { 
        margin-left: 0; 
    }
    .layout-wrapper { flex-direction: column; align-items: center; margin-left: 0; max-width: 100%; }
    .official-links-widget {
        display: none;
    }
    .official-links-footer {
        display: block;
        width: 100%;
        margin: 30px auto 20px;
        text-align: center;
    }
    .official-links-footer .official-links-title {
        font-size: 0.65rem;
        margin-bottom: 12px;
        opacity: 0.7;
        text-align: center;
    }
    .official-links-footer .official-links-list {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 40px;
    }
    .official-links-footer .footer-icon-wrapper {
        width: 38px;
        height: 38px;
    }
    .official-links-footer .footer-icon-wrapper i {
        font-size: 1.1rem;
    }
    .footer-divider {
        width: 100%;
        max-width: 300px;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
        margin: 20px auto;
    }
    .shortcut-links {
        gap: 30px;
    }
    .footer-icon-wrapper {
        width: 38px;
        height: 38px;
    }
    .footer-icon-wrapper i {
        font-size: 1.1rem;
    }
    .shortcut-img {
        width: 1.1rem;
        height: 1.1rem;
    }
    .youtube-thumbnail {
        height: 180px;
    }
    .blog-thumbnail {
        height: 180px;
    }
    .youtube-modal-content {
        width: 95%;
        padding: 15px;
    }
    .header-alert-icons { 
        position: static;
        flex-direction: row;
        justify-content: center;
        margin-top: 15px;
        margin-bottom: 8px;
        order: 1;
    }
    header { 
        display: flex; 
        flex-direction: column; 
        align-items: center;
        text-align: center;
    }
    header h1 { 
        order: 0; 
        text-align: center;
        justify-content: center;
    }
    header p { 
        order: 0; 
        text-align: center;
    }
    .title-icon .tooltip {
        left: 50%;
        transform: translateX(-50%);
    }
    .mouse-guide { width: 20px; height: 20px; }
    @keyframes guideClickMove { 
        0% { opacity: 0; transform: translate(0, 0); } 
        15% { opacity: 1; transform: translate(0, 0); } 
        60% { opacity: 1; transform: translate(-50px, -40px); } 
        75% { opacity: 1; transform: translate(-50px, -40px) scale(0.85); }
        85% { opacity: 1; transform: translate(-50px, -40px) scale(1); }
        100% { opacity: 0; transform: translate(-50px, -40px); } 
    }
    header h1 { font-size: 1.6rem; gap: 6px; }
    .sidebar { 
        position: static; 
        width: 100%; 
        max-width: 400px; 
        margin-top: 60px; 
        order: 2; 
        align-items: center;
        height: auto;
        padding: 0;
        background: transparent;
        border-left: none;
        box-shadow: none;
    }
    .container { order: 1; width: 100%; }
    .neighbors-list { gap: 12px; }
    .neighbor-item .banner-wrap img, .neighbor-item.empty .banner-wrap { height: 36px; }
    header h1 { font-size: 1.8rem; }
    .m-br { display: block; }
    
    
    /* 상태 뱃지 모바일 - 숨김 (상단 바에 표시) */
    .status-badge-row {
        display: none;
    }
    
    /* 네비게이션 모바일 - 한 줄로 */
    nav#main-nav {
        gap: 25px;
        padding: 12px 20px;
        margin-bottom: 30px;
        flex-wrap: nowrap;
    }
    nav#main-nav a {
        font-size: 0.75rem;
    }
    
    /* 플레이리스트 프로그레스 바 모바일 최적화 */
    .lp-progress {
        padding: 0 5px; /* 좌우 패딩 줄여서 프로그레스 바 넓게 */
        width: 100%;
        max-width: 100%;
    }
    .lp-progress-time {
        padding: 0 5px; /* 좌우 패딩 추가 */
        gap: 8px; /* 시간 표시 사이 간격 확보 */
    }
    .lp-progress-time span {
        min-width: 40px; /* 최소 너비 설정으로 겹침 방지 */
        text-align: center;
        flex-shrink: 0; /* 축소 방지 */
    }
    #phone-current-time {
        text-align: left;
    }
    #phone-total-time {
        text-align: right;
    }

    /* [인덱스 페이지 모바일 - 950px 이하] */
    body:not(.main-page) header h1 {
        font-size: 1.8rem;
    }
    body:not(.main-page) .header-wrapper {
        margin-left: 0;
        margin-right: 0;
        padding: 30px 20px 0;
    }
    .index-hero {
        padding: 20px;
        max-width: 100%;
    }
    .index-hero .img-layer-container {
        max-width: 100%;
    }
    .index-hero .home-caption {
        font-size: 0.9rem;
        margin-top: 25px;
        padding: 0 20px;
    }
}

/* [작은 모바일 - 600px 이하] */
@media (max-width: 600px) {
    .index-hero .m-br {
        display: inline;
    }
}

/* =========================================
   LP 플레이어 — 모바일 통합 (768px / 440px)
   ========================================= */

/* [모바일 - LP 플레이어 768px 이하, 데스크탑 레이아웃을 65% 비율로 컴팩트 재현] */
@media (max-width: 768px) {
    /* 모바일 초기 확대 방지 */
    #sect-playlist {
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 12px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }
    .lp-player {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 13px !important; /* 데스크탑 20px의 65% */
        overflow: visible !important; /* 파형이 잘리지 않도록 */
        contain: none !important; /* 파형이 밖으로 뻗어나가는 것을 허용 */
    }
    .lp-left-section {
        max-width: 100% !important;
        overflow-x: hidden !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-bottom: 0 !important;
    }
    /* 파형+엘피+그라모폰 래퍼 — 데스크탑 400×350의 65% = 260×228 */
    .lp-record-with-soundwave {
        width: 260px !important;
        height: 228px !important;
        max-width: 100% !important;
        margin: 0 auto 13px !important; /* 데스크탑 20px의 65% */
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        position: relative !important;
    }
    /* 파형 원 — 데스크탑과 동일하게 160% 크기로 충분한 공간 확보 */
    .lp-record-with-soundwave .lp-soundwave-ring {
        min-width: 0 !important;
        min-height: 0 !important;
        width: 160% !important;
        height: 160% !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 0 !important;
        pointer-events: none !important;
        overflow: visible !important;
    }
    .lp-record-with-soundwave .lp-soundwave-ring .soundwave-canvas {
        min-width: 0 !important;
        min-height: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
    /* 그라모폰 + 레코드 컨테이너 — 래퍼에 맞춤 */
    .lp-record-container {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }
    /* 그라모폰 본체 — 데스크탑 320×320의 65% = 208×208, 중앙 정렬 */
    .gramophone-body {
        width: 208px !important;
        height: 208px !important;
        max-width: 208px !important;
        max-height: 208px !important;
        left: 50% !important;
        right: auto !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        object-fit: contain !important;
        position: absolute !important;
        z-index: 2 !important;
    }
    /* LP 디스크 — 모바일에서 적당한 크기로 조정 */
    .lp-disc {
        width: 160px !important;
        height: 160px !important;
        max-width: 160px !important;
        max-height: 160px !important;
        left: 50% !important;
        margin-left: -80px !important; /* 160/2 */
        margin-top: -80px !important; /* 160/2 */
        transform: translate(-15px, -15px) !important;
        position: absolute !important;
        z-index: 1 !important;
        /* 재생/정지 모션을 위한 transition 추가 (애니메이션과 충돌 방지를 위해 playing일 때는 제거) */
        transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
    }
    .lp-player.sliding .lp-disc {
        transform: translate(-75px, -15px) translateZ(0) !important; /* 슬라이딩 모션 */
    }
    /* 재생 시 LP 회전 — 모바일 */
    .lp-player.playing .lp-disc {
        animation: lpSpinMobile 1.8s linear infinite !important;
        transition: none !important; /* 애니메이션과 충돌 방지 */
    }
    @keyframes lpSpinMobile {
        from { transform: translate(-75px, -15px) rotate(0deg); }
        to { transform: translate(-75px, -15px) rotate(360deg); }
    }
    /* LP 레이블 — 데스크탑 60×60의 65% = 39×39 */
    .lp-label {
        width: 39px !important;
        height: 39px !important;
    }
    /* 재생 시 LP 레이블도 함께 회전 — 모바일 */
    .lp-player.playing .lp-label {
        animation: lpLabelSpinMobile 1.8s linear infinite !important;
    }
    @keyframes lpLabelSpinMobile {
        from { transform: translate(-50%, -50%) rotate(0deg); }
        to { transform: translate(-50%, -50%) rotate(360deg); }
    }
    /* 트랙 정보 — 데스크탑과 동일한 비율 */
    .lp-track-info {
        margin-top: 16px !important; /* 데스크탑 24px의 65% */
        margin-bottom: 8px !important; /* 데스크탑 12px의 65% */
    }
    .lp-title {
        font-size: 0.95rem !important; /* 데스크탑 1.1rem의 약 86% */
    }
    .lp-artist {
        font-size: 0.75rem !important; /* 데스크탑 0.85rem의 약 88% */
    }
    /* 프로그레스 바 — 데스크탑과 동일한 비율 */
    .lp-progress {
        width: 100% !important;
        max-width: 325px !important; /* 데스크탑 500px의 65% */
        margin-top: 0 !important;
        margin-bottom: 8px !important; /* 데스크탑 12px의 65% */
    }
    /* 컨트롤 — 데스크탑과 동일한 비율 */
    .lp-controls {
        margin-bottom: 13px !important; /* 데스크탑 25px의 65% */
    }
    /* 플레이리스트 — 우드 크레이트(나무 상자) 스타일 - 모바일 */
    .lp-playlist {
        width: 180px !important; /* 자켓 크기(140px) + 여유 공간 (데스크탑 220px의 약 82%) */
        height: 500px !important; /* 모바일에 맞게 높이 조정 */
        max-height: none !important;
        min-height: 500px !important;
        padding: 30px 16px 20px !important; /* 모바일에 맞게 패딩 조정 */
        
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        position: relative !important; /* 모바일에서는 sticky 제거 */
        top: auto !important;
        
        /* 나무 상자(Wooden Crate) 디자인 — 격자무늬 완전 제거(모바일) */
        background: linear-gradient(180deg, #3e2723 0%, #281a14 100%) !important;
        border: 10px solid #5d4037 !important; /* 모바일에 맞게 테두리 조정 */
        border-radius: 4px !important;
        box-shadow: 
            0 15px 40px rgba(0, 0, 0, 0.6),
            inset 0 8px 25px rgba(0, 0, 0, 0.7),
            inset 0 0 80px rgba(93, 64, 55, 0.2) !important;
        
        overflow-y: auto !important;
        overflow-x: visible !important;
        z-index: 5 !important;
        position: relative !important;
        margin-top: 0 !important;
    }
    /* 나무 질감 오버레이(격자무늬) - 모바일에서 완전 제거 */
    .lp-playlist::before,
    .lp-playlist::after {
        content: none !important;
        display: none !important;
    }
    /* LP 디스크 — 모바일에서 바이닐 홈(repeating-radial) 제거 (격자무늬 원인) */
    .lp-disc {
        background:
            radial-gradient(circle at center, transparent 12%, var(--lp-dark) 13%),
            radial-gradient(circle at center, transparent 30%, var(--lp-dark) 31%),
            radial-gradient(circle at center, var(--lp-base) 0%, var(--lp-dark) 100%) !important;
    }
    /* LP 앨범 아이템 (자켓만 표시) - 모바일 */
    .lp-pl-item {
        flex-shrink: 0 !important;
        width: auto !important;
        height: auto !important;
        margin-bottom: -110px !important; /* 모바일에 맞게 겹침 조정 (데스크탑 -140px의 약 79%) */
        padding: 0 !important;
        
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        
        transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), z-index 0s !important;
        cursor: pointer !important;
        position: relative !important;
        transform-origin: center bottom !important;
        z-index: 2 !important;
        pointer-events: auto !important;
    }
    /* 호버 시 효과 - 모바일 */
    .lp-pl-item:hover {
        transform: translateY(-25px) scale(1.05) !important;
        z-index: 100 !important;
    }
    /* 활성화된 앨범 - 모바일 */
    .lp-pl-item.active {
        transform: translateY(-8px) scale(1.02) !important;
        z-index: 10 !important;
    }
    .lp-pl-item.active:hover {
        transform: translateY(-25px) scale(1.05) !important;
        z-index: 100 !important;
    }
    /* 앨범 커버 (자켓만 표시) - 모바일 */
    .lp-pl-thumb {
        width: 140px !important; /* 모바일에 맞게 크기 조정 (데스크탑 180px의 약 78%) */
        height: 140px !important;
        border-radius: 4px !important;
        object-fit: cover !important;
        margin: 0 !important;
        box-shadow: 
            0 6px 16px rgba(0,0,0,0.6),
            0 2px 5px rgba(0,0,0,0.4),
            inset 0 1px 0 rgba(255,255,255,0.1) !important;
        transition: transform 0.3s ease, box-shadow 0.3s ease !important;
        border: 2px solid rgba(0,0,0,0.3) !important;
    }
    /* 호버 시 자켓 강조 - 모바일 */
    .lp-pl-item:hover .lp-pl-thumb {
        box-shadow: 
            0 10px 25px rgba(0,0,0,0.8),
            0 4px 8px rgba(0,0,0,0.5),
            inset 0 1px 0 rgba(255,255,255,0.15) !important;
    }
    /* 활성화된 자켓 강조 - 모바일 */
    .lp-pl-item.active .lp-pl-thumb {
        box-shadow: 
            0 8px 20px rgba(212, 165, 116, 0.4),
            0 3px 8px rgba(212, 165, 116, 0.3),
            inset 0 1px 0 rgba(255,255,255,0.15) !important;
        border-color: rgba(212, 165, 116, 0.5) !important;
    }
    /* 텍스트 정보 숨김 - 모바일 */
    .lp-pl-text {
        display: none !important;
    }
    .lp-pl-title,
    .lp-pl-artist {
        display: none !important;
    }
    /* z-index 규칙 - 모바일 (데스크탑과 동일) */
    .lp-playlist .lp-pl-item:first-child {
        margin-bottom: -110px !important;
        z-index: 1 !important;
    }
    .lp-playlist .lp-pl-item:nth-child(2) { z-index: 2 !important; }
    .lp-playlist .lp-pl-item:nth-child(3) { z-index: 3 !important; }
    .lp-playlist .lp-pl-item:nth-child(4) { z-index: 4 !important; }
    .lp-playlist .lp-pl-item:nth-child(5) { z-index: 5 !important; }
    .lp-playlist .lp-pl-item:nth-child(6) { z-index: 6 !important; }
    .lp-playlist .lp-pl-item:nth-child(7) { z-index: 7 !important; }
    .lp-playlist .lp-pl-item:nth-child(8) { z-index: 8 !important; }
    .lp-playlist .lp-pl-item:nth-child(9) { z-index: 9 !important; }
    .lp-playlist .lp-pl-item:nth-child(10) { z-index: 10 !important; }
    .lp-playlist .lp-pl-item:nth-child(n+11) {
        z-index: 10 !important;
    }
    .lp-playlist .lp-pl-item:last-child {
        margin-bottom: 0 !important;
        padding-bottom: 20px !important;
    }
    /* 스크롤바 커스텀 - 모바일 */
    .lp-playlist::-webkit-scrollbar {
        display: block !important;
        width: 5px !important;
    }
    .lp-playlist::-webkit-scrollbar-track {
        background: rgba(0,0,0,0.2) !important;
        margin: 8px 0 !important;
    }
    .lp-playlist::-webkit-scrollbar-thumb {
        background: rgba(93, 64, 55, 0.6) !important;
        border-radius: 3px !important;
    }
}

/* [작은 모바일 - LP 플레이어 440px 이하, 데스크탑 레이아웃을 55% 비율로 컴팩트 재현] */
@media (max-width: 440px) {
    #sect-playlist {
        padding: 0 10px !important;
    }
    .lp-player {
        gap: 11px !important; /* 데스크탑 20px의 55% */
        overflow: visible !important; /* 파형이 잘리지 않도록 */
        contain: none !important; /* 파형이 밖으로 뻗어나가는 것을 허용 */
    }
    /* 파형+엘피+그라모폰 래퍼 — 데스크탑 400×350의 55% = 220×193 */
    .lp-record-with-soundwave {
        width: 220px !important;
        height: 193px !important;
        padding: 0 !important;
        margin: 0 auto 11px !important; /* 데스크탑 20px의 55% */
        overflow: visible !important; /* 파형이 잘리지 않도록 */
    }
    /* 파형 원 — 데스크탑과 동일하게 160% 크기로 충분한 공간 확보 */
    .lp-record-with-soundwave .lp-soundwave-ring {
        min-width: 0 !important;
        min-height: 0 !important;
        width: 160% !important;
        height: 160% !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 0 !important;
        pointer-events: none !important;
        overflow: visible !important;
    }
    .lp-record-with-soundwave .lp-soundwave-ring .soundwave-canvas {
        min-width: 0 !important;
        min-height: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
    .lp-record-container {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }
    /* 그라모폰 본체 — 데스크탑 320×320의 55% = 176×176, 중앙 정렬 */
    .gramophone-body {
        width: 176px !important;
        height: 176px !important;
        max-width: 176px !important;
        max-height: 176px !important;
        left: 50% !important;
        right: auto !important;
        top: 50% !important;
        transform: translate(-50%, calc(-50% + 15px)) !important; /* 아래로 15px */
        position: absolute !important;
        z-index: 2 !important;
    }
    /* LP 디스크 — 작은 모바일에서도 적당한 크기로 조정 */
    .lp-disc {
        width: 140px !important;
        height: 140px !important;
        max-width: 140px !important;
        max-height: 140px !important;
        left: 50% !important;
        margin-left: -70px !important; /* 140/2 */
        margin-top: calc(-70px + 15px) !important; /* 아래로 15px */
        transform: translate(-13px, -13px) !important;
        position: absolute !important;
        z-index: 1 !important;
        /* 재생/정지 모션을 위한 transition 추가 (애니메이션과 충돌 방지를 위해 playing일 때는 제거) */
        transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
    }
    .lp-player.sliding .lp-disc {
        transform: translate(-65px, -13px) translateZ(0) !important; /* 슬라이딩 모션 */
    }
    /* 재생 시 LP 회전 — 작은 모바일 (transition 제거하여 애니메이션이 작동하도록) */
    .lp-player.playing .lp-disc {
        animation: lpSpinSmallMobile 1.8s linear infinite !important;
        transition: none !important; /* 애니메이션과 충돌 방지 */
    }
    @keyframes lpSpinSmallMobile {
        from { transform: translate(-65px, -13px) rotate(0deg); }
        to { transform: translate(-65px, -13px) rotate(360deg); }
    }
    .lp-label {
        width: 33px !important; /* 데스크탑 60px의 55% */
        height: 33px !important;
    }
    /* 재생 시 LP 레이블도 함께 회전 — 작은 모바일 */
    .lp-player.playing .lp-label {
        animation: lpLabelSpinSmallMobile 1.8s linear infinite !important;
    }
    @keyframes lpLabelSpinSmallMobile {
        from { transform: translate(-50%, -50%) rotate(0deg); }
        to { transform: translate(-50%, -50%) rotate(360deg); }
    }
    /* 트랙 정보 — 데스크탑과 동일한 비율 */
    .lp-track-info {
        margin-top: 13px !important; /* 데스크탑 24px의 55% */
        margin-bottom: 7px !important; /* 데스크탑 12px의 55% */
    }
    .lp-title {
        font-size: 0.9rem !important;
    }
    .lp-artist {
        font-size: 0.7rem !important;
    }
    /* 프로그레스 바 — 데스크탑과 동일한 비율 */
    .lp-progress {
        width: 100% !important;
        max-width: 275px !important; /* 데스크탑 500px의 55% */
        margin-top: 0 !important;
        margin-bottom: 7px !important;
    }
    .lp-controls {
        margin-bottom: 11px !important; /* 데스크탑 25px의 55% */
    }
    /* 플레이리스트 — 우드 크레이트(나무 상자) 스타일 - 작은 모바일 */
    .lp-playlist {
        width: 150px !important; /* 작은 모바일에 맞게 크기 조정 */
        height: 400px !important;
        max-height: none !important;
        min-height: 400px !important;
        padding: 25px 12px 15px !important;
        
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        position: relative !important;
        top: auto !important;
        
        /* 나무 상자 디자인 — 격자무늬 완전 제거(작은 모바일) */
        background: linear-gradient(180deg, #3e2723 0%, #281a14 100%) !important;
        border: 8px solid #5d4037 !important;
        border-radius: 4px !important;
        box-shadow: 
            0 12px 30px rgba(0, 0, 0, 0.6),
            inset 0 6px 20px rgba(0, 0, 0, 0.7),
            inset 0 0 60px rgba(93, 64, 55, 0.2) !important;
        
        overflow-y: auto !important;
        overflow-x: visible !important;
        z-index: 5 !important;
        position: relative !important;
        margin-top: 0 !important;
    }
    /* 나무 질감 오버레이(격자무늬) - 작은 모바일에서 완전 제거 */
    .lp-playlist::before,
    .lp-playlist::after {
        content: none !important;
        display: none !important;
    }
    /* LP 디스크 — 작은 모바일에서도 홈 패턴 미적용 (격자무늬 방지) */
    .lp-disc {
        background:
            radial-gradient(circle at center, transparent 12%, var(--lp-dark) 13%),
            radial-gradient(circle at center, transparent 30%, var(--lp-dark) 31%),
            radial-gradient(circle at center, var(--lp-base) 0%, var(--lp-dark) 100%) !important;
    }
    /* LP 앨범 아이템 - 작은 모바일 */
    .lp-pl-item {
        flex-shrink: 0 !important;
        width: auto !important;
        height: auto !important;
        margin-bottom: -90px !important; /* 작은 모바일에 맞게 겹침 조정 */
        padding: 0 !important;
        
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        
        transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), z-index 0s !important;
        cursor: pointer !important;
        position: relative !important;
        transform-origin: center bottom !important;
        z-index: 2 !important;
        pointer-events: auto !important;
    }
    .lp-pl-item:hover {
        transform: translateY(-20px) scale(1.05) !important;
        z-index: 100 !important;
    }
    .lp-pl-item.active {
        transform: translateY(-6px) scale(1.02) !important;
        z-index: 10 !important;
    }
    .lp-pl-item.active:hover {
        transform: translateY(-20px) scale(1.05) !important;
        z-index: 100 !important;
    }
    /* 앨범 커버 - 작은 모바일 */
    .lp-pl-thumb {
        width: 110px !important; /* 작은 모바일에 맞게 크기 조정 */
        height: 110px !important;
        border-radius: 4px !important;
        object-fit: cover !important;
        margin: 0 !important;
        box-shadow: 
            0 5px 12px rgba(0,0,0,0.6),
            0 2px 4px rgba(0,0,0,0.4),
            inset 0 1px 0 rgba(255,255,255,0.1) !important;
        transition: transform 0.3s ease, box-shadow 0.3s ease !important;
        border: 2px solid rgba(0,0,0,0.3) !important;
    }
    .lp-pl-item:hover .lp-pl-thumb {
        box-shadow: 
            0 8px 20px rgba(0,0,0,0.8),
            0 3px 7px rgba(0,0,0,0.5),
            inset 0 1px 0 rgba(255,255,255,0.15) !important;
    }
    .lp-pl-item.active .lp-pl-thumb {
        box-shadow: 
            0 6px 16px rgba(212, 165, 116, 0.4),
            0 2px 6px rgba(212, 165, 116, 0.3),
            inset 0 1px 0 rgba(255,255,255,0.15) !important;
        border-color: rgba(212, 165, 116, 0.5) !important;
    }
    /* 텍스트 정보 숨김 - 작은 모바일 */
    .lp-pl-text {
        display: none !important;
    }
    .lp-pl-title,
    .lp-pl-artist {
        display: none !important;
    }
    /* z-index 규칙 - 작은 모바일 */
    .lp-playlist .lp-pl-item:first-child {
        margin-bottom: -90px !important;
        z-index: 1 !important;
    }
    .lp-playlist .lp-pl-item:nth-child(2) { z-index: 2 !important; }
    .lp-playlist .lp-pl-item:nth-child(3) { z-index: 3 !important; }
    .lp-playlist .lp-pl-item:nth-child(4) { z-index: 4 !important; }
    .lp-playlist .lp-pl-item:nth-child(5) { z-index: 5 !important; }
    .lp-playlist .lp-pl-item:nth-child(6) { z-index: 6 !important; }
    .lp-playlist .lp-pl-item:nth-child(7) { z-index: 7 !important; }
    .lp-playlist .lp-pl-item:nth-child(8) { z-index: 8 !important; }
    .lp-playlist .lp-pl-item:nth-child(9) { z-index: 9 !important; }
    .lp-playlist .lp-pl-item:nth-child(10) { z-index: 10 !important; }
    .lp-playlist .lp-pl-item:nth-child(n+11) {
        z-index: 10 !important;
    }
    .lp-playlist .lp-pl-item:last-child {
        margin-bottom: 0 !important;
        padding-bottom: 15px !important;
    }
    /* 스크롤바 커스텀 - 작은 모바일 */
    .lp-playlist::-webkit-scrollbar {
        display: block !important;
        width: 4px !important;
    }
    .lp-playlist::-webkit-scrollbar-track {
        background: rgba(0,0,0,0.2) !important;
        margin: 6px 0 !important;
    }
    .lp-playlist::-webkit-scrollbar-thumb {
        background: rgba(93, 64, 55, 0.6) !important;
        border-radius: 2px !important;
    }
}

/* =========================================
   Writing Viewer (Pagination) - Mobile
   ========================================= */

@media (max-width: 950px) {
    /* 기본 컨테이너 여백 조정 */
    .story-text-container {
        margin: 20px auto;
        padding: 0 15px;
        min-height: 450px; /* 약간 줄임 */
        font-size: 0.95rem; /* 가독성 위해 약간 축소 */
    }
    
    /* 페이지네이션 컨트롤 간격 확대 (터치 용이성) */
    .pagination-controls {
        gap: 25px;
        margin: 25px 0;
    }
    
    /* 모바일에서는 버튼 숨기고 스와이프로 대체 */
    .page-btn {
        display: none !important;
    }
    
    /* 스와이프 안내 (선택사항) - 필요시 주석 해제 */
    /*
    .pagination-controls::after {
        content: 'Swipe ↔';
        font-size: 0.8rem;
        color: rgba(255,255,255,0.4);
        display: block;
    }
    */
}

@media (max-width: 480px) {
    /* 더 작은 화면 대응 */
    .story-text-container {
        min-height: 400px;
        font-size: 0.9rem;
        line-height: 2.2;
    }
    
    #viewer-title {
        font-size: 1.3rem;
    }
    
    .pagination-controls {
        gap: 20px;
    }
    
    .page-btn {
        width: 40px;
        height: 40px;
    }
}