/* --- common.css --- */

/* 1. 기본 리셋 및 폰트 */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { 
    font-family: 'Segoe UI', 'Apple SD Gothic Neo', sans-serif; 
    background-color: #f5f7fa; 
    color: #333; 
    padding-top: 60px; /* 헤더 공간 */
}

/* 2. 네비게이션바 (PC 기본 스타일) */
.navbar {
    position: fixed; top: 0; left: 0; width: 100%; height: 60px;
    background: #2c3e50; color: white; z-index: 1000;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.nav-left { display: flex; align-items: center; gap: 30px; }
.brand { font-size: 18px; font-weight: bold; color: white; text-decoration: none; display: flex; align-items: center; gap: 8px; z-index: 1002; }

/* 메뉴 링크 (PC에서는 가로 나열) */
.nav-links { display: flex; gap: 10px; }
.nav-item {
    text-decoration: none; color: #bdc3c7; font-size: 14px; font-weight: 500;
    padding: 8px 12px; border-radius: 4px; transition: all 0.2s;
    display: flex; align-items: center; gap: 6px;
}
.nav-item:hover { background: rgba(255,255,255,0.1); color: white; }
.nav-item.active { color: white; background: rgba(255,255,255,0.1); font-weight: bold; }

/* 우측 정보 (PC에서는 보임) */
.nav-right { display: flex; align-items: center; gap: 20px; }
.user-info { display: flex; align-items: center; gap: 10px; font-size: 14px; color: white; font-weight: 500; }
.profile-img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.2); }

/* 로그아웃 버튼 */
.logout-btn {
    font-size: 13px; color: #ff6b6b; text-decoration: none; border: 1px solid #ff6b6b;
    padding: 0 12px; height: 32px; border-radius: 4px; transition: 0.2s; 
    background: transparent; display: flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box;
}
.logout-btn:hover { background: #ff6b6b; color: white; }

/* 햄버거 버튼: 기본적으로(데스크탑) 숨김 */
.menu-toggle { 
    display: none; /* 여기가 중요합니다! */
    font-size: 24px; 
    color: white; 
    cursor: pointer; 
}

/* 3. 모바일 반응형 (화면 너비 768px 이하일 때만 적용) */
@media (max-width: 768px) {
    .menu-toggle { 
        display: block; /* 모바일에서만 보임 */
        margin-right: 15px; /* 로고와의 간격 */
    }
    
    /* 메뉴들을 모바일용 드로어(서랍) 형태로 숨김 */
    .nav-links, .nav-right {
        position: fixed; top: 60px; left: 0; width: 100%;
        background: #2c3e50; flex-direction: column;
        padding: 20px; gap: 15px; border-top: 1px solid rgba(255,255,255,0.1);
        display: none; /* 클릭 전에는 숨김 */
    }
    
    /* 활성화(active) 클래스가 붙으면 보임 */
    .nav-links.active, .nav-right.active { display: flex; }
    
    /* 우측 영역(프로필 등) 위치 조정 */
    .nav-right { top: auto; bottom: 0; border-top: none; background: #233140; padding-bottom: 30px; }
    .nav-links { height: calc(100vh - 60px); justify-content: flex-start; }
    
    .nav-item { width: 100%; padding: 15px; font-size: 16px; }
}