/* ===== 상단 반응형 네비게이션 (menu.css 교체/추가) ===== */ 
/* 바탕: 흰 로고 대비 좋은 딥블루 + 얇은 경계 + 살짝 그림자 */ 
.main-nav{ 
    background: linear-gradient(180deg,#0b2a5b 0%, #004aad 100%); 
    border-bottom: 1px solid rgba(255,255,255,.15); 
    box-shadow: 0 2px 10px rgba(0,0,0,.08); 
    color:#fff; 
    /* 한 줄에 로고-아이콘-메뉴 정렬 / 모바일은 2줄로 감싸기 */ 
    display:flex; 
    align-items:center; 
    flex-wrap:wrap; 
    /* padding: 6px 12px; */
    position:relative;
    z-index:1000; } 

.main-nav .inner {
    
  max-width: 1200px;                 /* 중앙 컨테이너 폭 */
  width: 100%;
  margin: 0 auto;                    /* 가운데 */
  padding: 0 clamp(16px,2.5vw,32px); /* 좌우 여백 */
  display: flex;
  align-items: center;
  justify-content: space-between;    /* 좌: 로고 / 우: 메뉴 */
  gap: 24px;
  min-height: 76px;                  /* 헤더 높이 느낌 통일 */
}



/* 로고 */ 
.main-nav .logo img{ display:block; height:120px; /* 데스크톱 기본 높이 */ 
width:auto; margin: 15px; } 

/* 공통 메뉴 */ 

.menu{ display:flex;
    align-items:right; 
    gap:4px; 
    list-style:none;
    margin:0; 
    padding-right:30px; 
    /* 데스크톱에선 오른쪽 정렬 */
    margin-left:auto; } 

.menu > li{ position:relative; } 
.menu > li{ list-style:none; } 
.menu li::marker{ content:none; } /* 사파리 안전장치 */
.menu > li > a{ display:block; padding:14px 18px; } 
.menu a{ display:block; padding:12px 14px; color:#fff; text-decoration:none; font-weight:1000; letter-spacing:.1px; white-space:nowrap; border-radius:10px; }
.menu a:hover{ background: rgba(255,255,255,.12); border-radius:0px; } /* 드롭다운(데스크톱 hover, 모바일 focus-within도 지원) */ 

.menu .submenu{ margin-top: 0; display:none; position:absolute; top:100%; left:0; box-sizing: border-box; min-width: 190px; background:#0b2a5b; border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:6px; box-shadow: 0 8px 24px rgba(0,0,0,.2); } 
.menu .submenu li a{ padding:10px 12px; border-radius:8px; } 
.menu .submenu li a:hover{ background: rgba(255,255,255,.12); } .menu > li:hover 
.submenu, .menu > li:focus-within .submenu{ display:block; } /* 모바일 토글 아이콘(햄버거) — 로고 오른쪽으로 붙이기 */ 
.menu-icon{ display:none; /* 데스크톱 숨김 */ font-size:24px; line-height:1; cursor:pointer; padding:10px 12px; margin-left:auto; 
    
    /* 로고와 같은 줄에서 우측 끝으로 밀기 */ user-select:none; } #menu-toggle{ display:none; } 


/* ===== 반응형: 768px 이하 ===== */ 

@media (max-width: 768px){ 
.main-nav .logo img{ height:80px; } /* 살짝 작게 */ /* 햄버거 노출 (로고 오른쪽) */
.menu-icon{ display:block; font-size:40px; text-align:right; padding-right:30px; } /* 펼친 메뉴는 2번째 줄 전체 폭 사용 */ 
.menu{ text-align:right; display:none; flex-direction:column; width:100%; margin: 0 0 0 0; padding:0px; background: #666666; border-radius:0px; line-height:10px; } 
    
/* 토글 체크 시 노출 (input+label+ul 구조 유지) */ 
#menu-toggle:checked + .menu-icon + .menu{ display:flex; } /* 서브메뉴는 인라인(아래로 접힘) */ 
    
 .menu .submenu{ font-size:14px; position:static; display:none; border:none; box-shadow:none; background: transparent; padding:17px; background: #999999; border-radius:0px; margin:0; line-height:5px; list-style: none; } 
    
    /* 상위 메뉴 클릭(포커스)시 펼침 효과 */ 

.menu > li:focus-within .submenu{ display:block; } /* 터치 넓게 */ .menu a{ padding:12px; } }