:root {
    --primary-bg: #f8fafc; /* 아주 연한 그레이 블루 (눈이 편안함) */
    --card-bg: #ffffff;
    --text-main: #1e293b;
    --text-sub: #64748b;
    --accent-color: #3b82f6; /* 신뢰감을 주는 블루 */
    --admin-accent: #ef4444; /* 관리자 포인트 레드 */
    --border: #e2e8f0;
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* 세로 정렬 */
    min-height: 100vh; /* 화면 전체 높이 확보 */
    background-color: var(--primary-bg);
    background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
    background-size: 30px 30px;
    font-family: 'Pretendard', sans-serif;
    /* 추가: 내용이 적어도 푸터가 바닥에 붙도록 조절 */
    justify-content: space-between;
}


/* 모달창 기본 디자인 */
.custom-modal {
    border: none;
    border-radius: 15px;
    padding: 0; /* 내부 여백 제거 (깔끔하게) */
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    width: 320px;
    overflow: hidden;
}

/* 모달 뒤 어두운 배경 */
.custom-modal::backdrop {
    background: rgba(0, 0, 0, 0.4);
}

.modal-body {
    padding: 25px;
    text-align: center;
    background: white;
}

.modal-body h3 {
    margin-top: 0;
    color: #333;
}

.modal-actions {
    display: flex;
    justify-content: center; /* 오타 수정 완료! */
    gap: 10px;
    margin-top: 20px;
}

/* 버튼 꾸미기 */
.btn-cancel, .btn-confirm {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
}

.btn-cancel {
    background-color: #f0f0f0;
    color: #333;
}

.btn-confirm {
    background-color: #000; /* 검정색 (원하는 색으로 변경 가능) */
    color: white;
}

/* 기본적으로 스위처를 숨깁니다 (PC 모드) */
.world-switcher {
    display: none;
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 1000;
}

/* 화면 너비가 1024px 미만일 때만 보이게 함 (모바일/태블릿 전용) */
@media (max-width: 1023px) {
    .world-switcher {
        display: block;
    }
}

/* 버튼 디자인 개선 */
.switch-btn {
    width: auto !important; /* 원형 포기 */
    height: auto !important;
    padding: 10px 20px;
    border-radius: 30px;
    background: #1e293b; /* 어두운 네이비 */
    color: white;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
/* 버튼 안의 텍스트를 "SWITCH WORLD"로 변경 */

.switch-btn:active {
    transform: scale(0.9) rotate(-15deg);
}

/* 수정 후: 공통 스타일만 남깁니다 */
.world-menu-content {
    position: absolute;
    width: 240px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    padding: 10px;
    border: 1px solid rgba(0,0,0,0.05);
    z-index: 10001;
    
    /* 기본 상태: 숨김 (애니메이션을 위해 opacity 사용) */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 개별 아이템 항목 */
.world-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.2s;
    margin-bottom: 5px;
}

.world-item:last-child { margin-bottom: 0; }

/* 현재 선택된 월드 강조 */
.world-item.active {
    background: rgba(239, 68, 68, 0.1);
}
.world-item.active .w-title { color: var(--admin-accent); }

/* 아이콘 및 텍스트 정렬 */
.w-icon { font-size: 20px; }
.w-text { display: flex; flex-direction: column; text-align: left; }
.w-title { 
    font-size: 14px; 
    font-weight: 800; 
    color: #1e293b; 
    line-height: 1.2;
}
.w-sub { 
    font-size: 11px; 
    color: #64748b; 
    font-weight: 400;
}

/* 마우스 호버/터치 시 반응 */
.world-item:active { background: #f1f5f9; }

/* 애니메이션 */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.world-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.05);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    gap: 8px;
}
.badge-dot {
    width: 6px;
    height: 6px;
    background: var(--admin-accent);
    border-radius: 50%;
}

/* 월드 칩 컨테이너 */
.world-chip-container {
    display: flex;
    justify-content: center;
    position: relative;
    margin-bottom: 10px;
}

/* 칩 버튼 디자인 */
.world-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.04); /* 아주 연한 배경 */
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.world-chip:active { background: rgba(0, 0, 0, 0.1); }

.chip-dot {
    width: 6px;
    height: 6px;
    background: #ef4444; /* 현재 월드 포인트 컬러 */
    border-radius: 50%;
}

.chip-name {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    letter-spacing: 0.5px;
}

.chip-arrow { font-size: 8px; color: #94a3b8; }

.world-menu-content.top-menu {
    /* display: none 대신 아래 속성들 사용 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; 

    position: absolute;
    top: 45px;
    right: 50%;
    transform: translateX(50%) translateY(-10px); /* 살짝 위에서 시작 */
    
    width: 240px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    padding: 10px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    z-index: 10001;
    
    /* 부드러운 전환 효과 추가 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 메뉴가 열렸을 때의 상태 */
.world-menu-content.top-menu.show {
    display: block !important; /* 강제로 보이게 설정 */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(50%) translateY(0);
}