@charset "UTF-8";

/* 1. 기본 바디 및 레이아웃 세팅 */
body { font-family: 'Pretendard', sans-serif; padding: 0; background: #f1f5f9; margin: 0; }

/* 2. 상단 헤더 및 로고 영역 */
header { background-color: white; padding: 15px 20px 0; box-shadow: 0 2px 10px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 1000; margin: 0; flex-shrink: 0;}
.header-top { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding-bottom: 10px; flex-wrap: nowrap;}   
.logo { font-size: 18px; font-weight: 900; color: #ff4d4f; text-decoration: none; white-space: nowrap;}

/* 3. 로그인 정보 및 우측 버튼 그룹 */
.header-btn-group { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; }
.user-name-text { font-size: 14px; font-weight: bold; color: #555; white-space: nowrap; margin-right: 5px; }
.mypage-btn { padding: 6px 12px; background-color: #ff4d4f; color: white; text-decoration: none; border-radius: 6px; font-weight: bold; font-size: 13px; cursor: pointer; border: none; white-space: nowrap; transition: 0.2s;}
.logout-btn, .login-btn { padding: 6px 12px; background-color: #333; color: white; text-decoration: none; border-radius: 6px; font-weight: bold; font-size: 13px; border: none; cursor: pointer; white-space: nowrap; transition: 0.2s;}
.mypage-btn:hover { background-color: #e03e3e; }
.logout-btn:hover, .login-btn:hover { background-color: #111; }

/* 4. 네비게이션 가로 스크롤 메뉴바 */
nav { display: flex; justify-content: flex-start; gap: 20px; border-top: 1px solid #eee; padding: 12px 0 12px !important; max-width: 1200px; margin: 0 auto; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
nav a { text-decoration: none; color: #333; font-weight: 600; font-size: 15px; transition: 0.2s; flex-shrink: 0;}
nav a:hover { color: #ff4d4f; }
.admin-link { color: #888 !important; }

/* 5. 직관적인 이동을 위한 메뉴바 하단 스크롤바 디자인 */
nav::-webkit-scrollbar { display: block !important; height: 6px !important; }
nav::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
nav::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
nav::-webkit-scrollbar-thumb:hover { background: #ff4d4f; }

/* 🚨 마우스를 올리면 강제로 빨간색으로 변하게 하는 코드 추가 (1번 해결) */
.admin-link:hover { color: #ff4d4f !important; }

/* 6. PC 및 모바일 화면 크기 맞춤 (반응형 미디어쿼리) */
@media (min-width: 769px) {
    nav { 
        /* 🚨 범인이었던 중앙 강제 정렬(center)을 좌측 시작(flex-start)으로 변경하여 잘림 완벽 방지! */
        justify-content: flex-start !important; 
        padding: 12px 20px !important; 
    }
}
@media (max-width: 768px) {
  header { padding: 12px 15px 0; }
  .logo { font-size: 16px; }
  .header-btn-group { gap: 5px; }
  .user-name-text { font-size: 12px; margin-right: 2px; }
  .mypage-btn, .logout-btn, .login-btn { padding: 5px 8px; font-size: 11px; }
  nav { gap: 15px; padding: 10px 15px; } 
  nav a { font-size: 14px; }
}