/* ====================== ROOT 컬러 ====================== */
:root {
  --gamjas-main: #3d4c40;     /* 카키 메인 컬러 */
  --gamjas-light: #f9f9f9;    /* 밝은 배경 */
  --gamjas-hover: #dbe5dc;    /* hover 색상 */
}

/* ====================== 기본 BODY ====================== */
body {margin: 0;font-family: 'Noto Sans KR', sans-serif;}

/* ====================== 네비게이션 헤더 ====================== */
nav.gamjas-navbar {border-bottom: 1px solid #e0e0e0;background: #fff;padding: 10px 40px;position: relative;z-index: 100;}

/* 헤더 내부 구조 */
.main-header {display: flex;align-items: center;justify-content: space-between;}

/* 메인 메뉴 구조 */
.main-menu-area {position: relative;}

.main-menu {display: flex;justify-content: center;gap: 80px;list-style: none;margin: 0;padding: 0;}

.main-menu > li > a {text-decoration: none;color: var(--gamjas-main);font-weight: bold;padding: 10px 15px;transition: color 0.2s ease;}

.main-menu > li > a:hover,
.main-menu > li:hover > a {color: #6A8D73;font-weight: 600;}

/* 부트스트랩 내비게이션 링크 */
.navbar-nav .nav-link {color: var(--gamjas-main) !important;font-weight: 500;padding: 0.75rem 1rem;}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {background-color: var(--gamjas-hover);color: black !important;}

/* 로고 이미지 크기 */
.navbar-brand img {height: 32px;}

/* ====================== Mega Menu ====================== */
.mega-menu {position: absolute;top: 100%;left: 0;right: 0;z-index: 1000;background-color: white;display: none;padding: 2rem;border-top: 2px solid var(--gamjas-main);box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);flex-wrap: wrap;}

.nav-item:hover > .mega-menu {display: flex;}

.mega-menu .col {flex: 1;min-width: 200px;padding: 0 1rem;}

.mega-menu .dropdown-item {padding: 0.25rem 0;color: var(--gamjas-main);font-size: 0.95rem;}

.mega-menu .dropdown-item:hover {background-color: var(--gamjas-hover);}

/* ====================== 기존 서브메뉴 (구조 호환) ====================== */
.mega-submenu {display: none;position: absolute;top: 155%;left: -70px;width: 140%;background: #fff;border-top: 1px solid #ddd;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);padding: 50px 80px;z-index: 99;justify-content: space-between;}

.submenu-col {width: 50%; list-style: none; text-decoration: none;}

.submenu-col strong {font-weight: bold;display: block;margin-bottom: 10px;}

.submenu-col a {display: block;text-decoration: none;color: #000;margin-bottom: 8px;font-size: 0.95rem;}

.submenu-col a:hover {color: #6A8D73;}

/* Hover 트리거 */
.main-menu-area:hover .mega-submenu,
.mega-submenu:hover {display: flex;animation: slideDown 0.3s ease-out;}

@keyframes slideDown {
  from {opacity: 0;transform: translateY(-10px);}
  to {opacity: 1;transform: translateY(0);}
}

/* 수정시 손모양 커서 */
.attach-area i,
.attach-thumb .fa-circle-xmark {cursor: pointer;}

/* 옵션: 이미지 썸네일 백그라운드 스타일 */
.attach-thumb div div {background: no-repeat center;background-size: cover;border: 1px solid #ddd;border-radius: 6px;}

/* ====================== 로그인 & 언어 드롭다운 ====================== */
.right-menu a {margin-left: 20px;text-decoration: none;color: #000;font-size: 0.95rem;}

.language-dropdown .dropdown-toggle {font-size: 0.9rem;}

.custom-language-dropdown {left: -5% !important; transform: translateX(-50%);}

/* ====================== 반응형 메가메뉴 숨김 ====================== */
@media (max-width: 991px) {
  .mega-menu {display: none !important;}
}

/* ====================== 여행정보 > 지하철 노선도 ====================== */ 
.line-selectors { display: flex; justify-content: center; gap: 16px; margin: 20px 0; margin-top: 40px;}

.line-item { display: flex; flex-direction: column; align-items: center;}
 
.line-item button { width: 48px; height: 48px; border-radius: 50%; border: none; color: white; font-weight: bold; font-size: 16px; cursor: pointer;}

.line-item span { margin-top: 6px; font-size: 14px; font-weight: bold;}
/* .line-btn { width: 50px; height: 50px; border-radius: 50%; font-size: 18px; color: white; font-weight: bold; border: none; cursor: pointer;}
.line-1 { background: #0052A4; }
.line-2 { background: #00A84D; }
.line-3 { background: #EF7C1C; }
.line-4 { background: #00A5DE; }
.line-5 { background: #996CAC; }
.line-labels { text-align: center; margin-bottom: 20px; }
.line-labels span {margin: 0 40px; font-weight: bold;} */

.map-container {width: 100%; max-width: 1200px; margin: 0 auto; padding-bottom: 60px; }/* ✅ footer와의 여백 확보 */

#map { width: 100%; height: 650px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}

#mission-box {flex: 0.8; min-width: 280px; max-height: 600px; overflow-y: auto; background:#f8f8f8; 
				border-radius: 10px;  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); padding: 20px;}
				
#recomm-content {display:grid;  grid-template-columns: repeat(2, 1fr); gap: 16px;}
#recomm-content .recomm-card {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  font-size: 13px;
}
#map-wrapper {
  margin-bottom: 120px; /* footer랑 겹치지 않게 하단 여백 확보 */
}