:root {
            --bg-main: #0f0f0f;
            --bg-sidebar: #121212;
            --point-pink: #f2507e;
            --text-white: #ffffff;
            --text-gray: #999999;
            --border: #262626;
        }

        body, html { margin: 0; padding: 0; background: var(--bg-main); color: var(--text-white); font-family: 'Pretendard', sans-serif; }

        /* --- 헤더 --- */
        header {
            height: 60px; background: var(--bg-main); display: flex; align-items: center;
            padding: 0 20px; position: fixed; top: 0; width: 100%; z-index: 2000;
            border-bottom: 1px solid var(--border); box-sizing: border-box;
        }
        .menu-toggle { display: none; font-size: 24px; cursor: pointer; margin-right: 15px; }
        .logo { font-size: 20px; font-weight: bold; color: #fff; text-decoration: none; margin-right: 30px; }
        .search-bar { flex: 1; max-width: 400px; }
        .search-bar input {
            width: 100%; background: #222; border: none; padding: 8px 15px;
            border-radius: 20px; color: #fff; outline: none;
        }
        .header-right { margin-left: auto; display: flex; gap: 10px; }
        .btn-auth { padding: 6px 12px; border-radius: 4px; font-size: 13px; text-decoration: none; color: #fff; }

        /* --- 사이드바 --- */
        .sidebar {
            width: 240px; 
            background: var(--bg-sidebar); 
            /* 고정 높이 설정 및 전체 화면 사용 */
            height: 100vh !important; 
            position: fixed; 
            top: 0; 
            left: 0; 
            border-right: 1px solid var(--border);
            
            /* 중요: 내용이 넘치면 스크롤 생성 */
            overflow-y: auto !important; 
            display: flex;
            flex-direction: column;
            
            /* 모바일에서 아래 메뉴가 잘리지 않도록 하단 여백 충분히 확보 */
            padding-top: 60px; /* 헤더 높이만큼 */
            padding-bottom: 100px; 
            
            transition: transform 0.3s ease; 
            z-index: 1500;
            box-sizing: border-box;
        }
        /* 스크롤바를 얇고 깔끔하게 (선택 사항) */
        .sidebar::-webkit-scrollbar {
            width: 4px;
        }
        .sidebar::-webkit-scrollbar-thumb {
            background: #333;
            border-radius: 10px;
        }
        .rec-title {
            padding: 24px 20px 12px;
            font-size: 13px; font-weight: 800; color: #666;
            letter-spacing: 0.5px; display: flex; justify-content: space-between; align-items: center;
        }
        .side-menu { padding: 12px 24px; color: var(--text-gray); cursor: pointer; display: flex; align-items: center; text-decoration: none; font-size: 14px; }
        .side-menu:hover { background: rgba(255,255,255,0.05); color: #fff; }
        .side-menu.active { color: var(--point-pink); background: rgba(242, 80, 126, 0.1); border-right: 3px solid var(--point-pink); }
        .sidebar-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1400; }
        .user-img-small { width: 24px; height: 24px; border-radius: 50%; margin-right: 10px; object-fit: cover; }
        /* --- 메인 컨텐츠 --- */
        main { flex: 1; margin-left: 240px; margin-top: 60px; padding: 30px; box-sizing: border-box; }
        
        
        
        /* 사이드바 내 모바일 프로필 스타일 */
.mobile-user-profile {
    padding: 25px 20px;
    background: linear-gradient(180deg, rgba(242, 80, 126, 0.1) 0%, transparent 100%);
}

.profile-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    position: relative;
}

.profile-img-area {
    position: relative;
    width: 45px;
    height: 45px;
    cursor: pointer;
}

.m-pfp {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--point-pink);
}

.m-online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background: #2ecc71;
    border: 2px solid #1a1a1a;
    border-radius: 50%;
}

.profile-info-area {
    flex: 1;
}

.m-nick {
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 2px;
}

.m-grade {
    font-size: 12px;
    color: var(--point-pink);
    font-weight: 600;
}

.m-logout-btn {
    font-size: 11px;
    color: #666;
    text-decoration: none;
    padding: 4px 8px;
    border: 1px solid #333;
    border-radius: 4px;
}

.m-coin-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 15px;
    border-radius: 12px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.m-coin-icon { font-size: 16px; }
.m-coin-amount { 
    font-size: 15px; 
    font-weight: 800; 
    color: #fff; 
    flex: 1;
}
.m-coin-unit { font-size: 11px; color: #888; }

/* 모바일 대응 */
@media (max-width: 768px) {
    header {
        display: flex;
        justify-content: space-between; /* 양 끝 배치 */
        align-items: center;
        padding: 0 15px;
        position: relative; /* 로고 절대 위치 기준점 */
    }
    /* 1. 메뉴 버튼은 왼쪽에 고정 */
    .menu-toggle {
        display: block;
        z-index: 10;
        width: 40px; /* 오른쪽 가상 공간과 크기를 맞춰 균형 조절 */
    }
    .mobile-sub-menu {
        position: sticky;
        top: 60px; /* 헤더가 60px이므로 그 바로 아래 고정 */
        z-index: 999;
    }
    .search-bar, .header-right .btn-auth:not(.btn-join) { display: none; }
    .sidebar { transform: translateX(-100%); top: 0; height: 100vh; padding-top: 60px; }
    .sidebar.open { transform: translateX(0); }
    main { margin-left: 0; padding: 15px; margin-top:0px; }
    /* 헤더 우측의 사용자 정보/버튼 그룹을 완전히 숨깁니다. */
    .header-right, .search-bar {
        display: none !important;
    }
    header::after {
        content: "";
        width: 40px; /* .menu-toggle과 동일한 너비 */
    }
    /* 검색바도 모바일에서 숨기고 싶다면 기존 코드 유지 */
    .search-bar { 
        display: none; 
    }

    /* 로고가 중앙에 오게 하거나 왼쪽 여백을 조정하고 싶을 때 */
    .logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        font-size: 1.2rem;
        z-index: 5;
    }
}

@media (min-width: 769px) {
    .mobile-user-profile { display: none; }
}

/* 모바일 서브 메뉴 스타일 */
.mobile-sub-menu {
    display: flex;
    justify-content: space-around; /* 메뉴 간격 균등 분배 */
    align-items: center;
    background: #121212; /* 헤더보다 약간 진한 검정 */
    border-bottom: 1px solid #222;
    padding: 12px 0;
    position: sticky; /* 스크롤 시 상단 고정 (선택 사항) */
    top: 0px; /* 헤더 높이에 맞게 조절 */
    z-index: 99;
}

.mobile-sub-menu a {
    text-decoration: none;
    color: #999; /* 기본은 회색조 */
    font-size: 15px;
    font-weight: 600;
    transition: 0.2s;
    padding: 5px 10px;
}

/* 활성화된 메뉴(현재 페이지) 스타일 */
.mobile-sub-menu a.active {
    color: #fff; /* 활성화 시 흰색 */
    position: relative;
}

/* 이미지처럼 강조선을 넣고 싶을 경우 (선택 사항) */
.mobile-sub-menu a.active::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--point-pink); /* 핑크색 하단 라인 */
}

/* PC에서는 숨기고 모바일에서만 보이게 설정 */
@media (min-width: 1025px) {
    .mobile-sub-menu {
        display: none; /* PC 버전 Aside(사이드바)가 있다면 숨김 처리 */
    }
}

/* 모바일 인증 영역 스타일 */
    .mobile-auth-area {
        padding: 25px 20px;
        text-align: center;
    }

    .auth-welcome-text {
        font-size: 13px;
        color: #999;
        margin-bottom: 15px;
        line-height: 1.4;
    }

    .auth-btn-group {
        display: flex;
        flex-direction: column; /* 세로 나열 */
        gap: 8px;
    }

    .m-side-btn {
        display: block;
        padding: 12px;
        border-radius: 8px;
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        transition: 0.2s;
    }

    .m-btn-login {
        background: #262626;
        color: #fff;
        border: 1px solid #333;
    }

    .m-btn-join {
        background: var(--point-pink); /* 기존 핑크색 변수 사용 */
        color: #fff;
    }

    .m-side-btn:active {
        transform: scale(0.98);
    }

    /* PC 화면에서는 사이드바 상단 버튼 숨기기 (헤더에 이미 있으므로) */
    @media (min-width: 1025px) {
        .mobile-auth-area {
            display: none;
        }
    }