/* [★] 기본 폰트 및 박스 설정 (가로 밀림 방지 추가) */
html, body { 
    background-color: #f9fafb; 
    margin: 0; 
    padding-top: 0 !important; 
    max-width: 100vw; /* 화면 최대 너비 고정 */
    overflow-x: hidden !important; /* ★ 가로로 튀어나간 요소를 잘라내어 스크롤 방지 */
}
* { font-family: 'Pretendard', sans-serif; box-sizing: border-box; letter-spacing: -0.5px; }

/* ★★★ 부모 컨테이너(navbar) z-index 강제 상향 (드롭다운 가림 해결 핵심) ★★★ */
.navbar {
    position: relative !important;
    z-index: 8000 !important; /* 선홍색 배너(3000)보다 부모 계급을 무조건 높임 */
}

/* [★] 로고 스타일 - 물음표 박스 제거 및 위치 고정 */
.brand-logo {
    position: absolute;
    left: 20px;
    top: 13px; 
    z-index: 6000; /* 최상단 레이어 */
    display: flex;
    align-items: center;
}
.brand-logo img { display: none !important; } /* 물음표 박스 원천 차단 */

/* [★] 1. 최상단 선홍빛 안내 바 */
.guest-notice-bar {
    display: block !important;
    background-color: #F04452; color: #fff; text-align: center;
    padding: 14px 15px; font-size: 14px; font-weight: 600; line-height: 1.4;
    width: 100%; position: relative; z-index: 3000;
}

/* [★] 2. 내 정보 헤더 (toss-header) */
.toss-header { display: flex; align-items: center; transition: all 0.3s; }

/* PC 버전: 기존 설정 유지 */
@media (min-width: 992px) {
    .toss-header { 
        position: absolute; z-index: 2000;
        top: 0; right: 20px; height: 75px; 
    }
}

/* ★ 모바일 버전: 겹침 문제 해결 및 아이디 노출 ★ */
@media (max-width: 991px) {
    /* 1. 불필요한 중복 wrapper 및 본문 내 잔액박스 강제 삭제 */
    .toss-nav-wrapper,
    body > .toss-balance-card,
    main .toss-balance-card,
    #content .toss-balance-card,
    .container .toss-balance-card,
    .server-status-container ~ .toss-balance-card {
        display: none !important;
        height: 0 !important;
        visibility: hidden !important;
    }

    /* 2. 정상 박스(navbar 내부) 위치를 우측 메뉴 옆으로 밀착 고정 */
    .navbar .toss-header { 
        position: absolute !important;
        top: 8px !important; 
        right: 48px !important; 
        width: auto !important;
        z-index: 8500 !important; 
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
    }

/* 3. 내 정보 카드 디자인 최적화 및 아이디 공간 확보 */
    .toss-balance-card {
        padding: 5px 12px !important;
        border-radius: 8px !important;
        background: #fff !important;
        border: 1px solid rgba(0,0,0,0.1) !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
        transform: scale(1.05); /* 🌟 0.88을 1.05로 쓱 바꿔주세요! */
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important; 
        white-space: nowrap !important;
    }

    /* ★ 충전 드롭다운 메뉴 최상단 노출 ★ */
    .toss-dropdown, 
    .toss-dropdown.active {
        position: absolute !important;
        top: 110% !important; 
        right: 0 !important; 
        z-index: 9999 !important; /* 자식 요소도 가장 앞으로 */
        background: #fff !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
        border-radius: 8px !important;
    }

    /* ★ 가려진 아이디(tester님 등)를 다시 나타나게 함 ★ */
    .toss-header .user-id,
    .toss-balance-card span:first-child,
    .toss-balance-card .name { 
        display: inline-block !important; 
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #4e5968 !important;
    }

    /* 4. 헤더 내 중복 요소 방어 */
    .toss-header .toss-balance-card:nth-of-type(n+2) {
        display: none !important;
    }

    /* 5. 본문 시작 지점 확보 */
    .server-status-container { 
        margin-top: 60px !important; 
    } 
}

/* [공통] 잔액 카드 디자인 */
.toss-balance-card { 
    background: #fff; padding: 10px 18px; border-radius: 16px; border: 1px solid #f2f4f6;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06); display: flex; align-items: center; gap: 8px; cursor: pointer;
    position: relative;
}
.toss-balance-val { font-size: 15px; font-weight: 700; color: #3182f6; }
.toss-charge-tag { background: #eef2ff; color: #3182f6; padding: 4px 8px; border-radius: 8px; font-weight: 700; font-size: 11px; }

/* 서버 상태 바 기본 디자인 */
.server-status-container {
    background: #fff; border: 1px solid #f2f4f6; border-radius: 24px; padding: 30px 20px;
    text-align: center; margin: 80px 20px 30px 20px; position: relative;
    z-index: 10;
}
.status-title-row { font-size: 19px; font-weight: 600; color: #4e5968; margin-bottom: 12px; }
.status-title-row span { color: #3182f6; font-weight: 700; }
.status-sub-row { display: flex; align-items: center; justify-content: center; gap: 12px; }

/* =========================================================
   [추가된 부분] 토스 스타일 서버상태 버튼 및 말풍선 툴팁 
   ========================================================= */
.status-pill { 
    font-size: 15px; 
    font-weight: 700; 
    color: #2dc84d; 
    background: #eafaf0; 
    padding: 6px 14px; 
    border-radius: 50px; 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    position: relative; /* 툴팁이 버튼을 따라다니도록 기준점 설정 */
    cursor: pointer;
}

/* 말풍선 본체 디자인 (다크그레이) */
.mini-tooltip {
    position: absolute;
    top: calc(100% + 10px); /* 버튼 바로 아래 10px 간격 */
    right: 0; /* 우측 정렬 */
    background-color: #333d4b; /* 토스 다크그레이 */
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 16px;
    border-radius: 10px; /* 둥글게 */
    box-shadow: 0 6px 16px rgba(0,0,0,0.15); /* 입체감 */
    z-index: 1000;
    white-space: nowrap; /* 글씨 한 줄로 강제 정렬 */
    letter-spacing: -0.3px;
    pointer-events: none; /* 클릭 방해 금지 */
    animation: slideDown 0.2s ease-out; /* 부드럽게 나타나는 애니메이션 */
}

/* 말풍선 위쪽 뾰족한 꼬리 (▲) */
.mini-tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%; 
    right: 18px; /* 물음표 아이콘 쪽을 가리키도록 위치 조절 */
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #333d4b transparent;
}

/* 말풍선 등장 애니메이션 (기존 것 재활용) */
@keyframes slideDown { 
    from { opacity: 0; transform: translateY(-5px); } 
    to { opacity: 1; transform: translateY(0); } 
}