/* =======================================
   기본 스타일 (Mobile) - 767px 미만
   ======================================= */

    body {
    margin: 0px;
    }

    :root {
        --primary: #2889e4;
        --primary-dark: #1f6fd8;
        --bg: #FEFEFE;
        --text: #1e293b;
        --text-muted: #64748b;
    }

    * {
        transition: 
            background-color 0.18s ease,
            color 0.18s ease,
            box-shadow 0.18s ease,
            transform 0.18s ease;
    }

/* =======================================
   태블릿 스타일 (Tablet) - 768px 이상
   ======================================= */
@media (min-width: 768px) {
    
    body {
    margin: 0px;
    }

}

/* =======================================
   데스크탑 스타일 (Desktop) - 1024px 이상
   ======================================= */
@media (min-width: 1024px) {
    
    /* 기본 스타일 */
    body {
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    
    :root {
        --primary: #2889e4;
        --primary-dark: #1f6fd8;
        --bg: #FEFEFE;
        --text: #1e293b;
        --text-muted: #64748b;
    }
    
    * {
        transition: 
        background-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
    }
    
    /* Topbar */
    .topbar {
        height: 6vh;
        background-color: #2889e4;
        display: flex;
        align-items: center;
        position: relative;
    }
    
    .header-left {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: max-content;
    }
    
    .header-right {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: max-content;
        padding: 0 24px;
    }
    
    .header-center {
        flex: 1;
        display: flex;
        justify-content: center;
        padding: 0 24px;
    }
    
    .topbar-logo {
        height: 6vh;
    }
    
    /* 검색 */
    .search-input {
        width: 100%;
        max-width: 520px;
        height: 40px;
        border-radius: 20px;
        border: none;
        padding: 0 16px;
        outline: none;
    }
    
    /* 텍스트 링크 */
    .text-link {
        color: #fff;
        font-weight: 500;
        cursor: pointer;
        user-select: none;
    }
    .text-link:hover {
        color: #e5e7eb;
    }
    
    /* 프로필 */
    .profile-wrapper {
        position: relative;
        display: flex;
        align-items: center;
    }
    
    .profile-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        cursor: pointer;
        object-fit: cover;
        display: block;
    }
    .profile-avatar:hover {
        transform: scale(1.05);
        box-shadow: 0 0 0 3px rgba(255,255,255,0.25);
    }
    
    /* 잔액 */
    .balance {
        color: #fff;
        font-weight: 600;
        cursor: pointer;
        padding: 8px 16px;
        border-radius: 20px;
        background: rgba(255,255,255,0.1);
        display: flex;
        align-items: center;
    }
    .balance:hover {
        background: rgba(255,255,255,0.2);
    }
    
    /* 드롭다운 */
    .dropdown {
        display: none;
        position: absolute;
        top: calc(6vh + 8px);
        right: 0;
        background: #fff;
        border-radius: 12px;
        padding: 8px;
        min-width: 220px;
        box-shadow: 0 12px 24px rgba(0,0,0,.15);
        z-index: 1000;
    }
    
    .dropdown.open {
        display: block;
    }
    
    .dropdown-header {
        display: flex;
        align-items: center;
        padding: 12px;
        gap: 12px;
        border-bottom: 1px solid #e5e7eb;
        margin-bottom: 4px;
    }
    
    .dropdown-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
    }
    
    .dropdown-user-info {
        flex: 1;
        overflow: hidden;
    }
    
    .dropdown-username {
        font-weight: 600;
        color: #1e293b;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .dropdown-email {
        font-size: 12px;
        color: #64748b;
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .dropdown-item {
        padding: 10px 14px;
        border-radius: 8px;
        cursor: pointer;
        color: #1e293b;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .dropdown-item:hover {
        background: rgba(40,137,228,.08);
    }
    
    .dropdown-divider {
        height: 1px;
        background: #e5e7eb;
        margin: 4px 0;
    }
    
    .hidden {
        display: none !important;
    }

    
}