body.no-scroll { overflow: hidden; }


/* menu */
.global-menu {
	display: flex;
	align-items: center;
	padding: 15px 150px; /* 좌우 패딩을 넉넉하게 유지 */
		backdrop-filter: blur(10px);
background-color: rgba(0, 0, 0, 0.2);
	color: white;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000;
	justify-content: space-between; /* 요소들을 양 끝으로 분리 */
	  max-width: 100vw; /* 혹시 모를 초과 폭 클램프 */
}

.global-menu .logo-area { /* 로고 이미지와 텍스트를 포함하는 영역 */
	display: flex;
	align-items: center; /* 이미지와 텍스트 세로 중앙 정렬 */
	gap: 10px; /* 로고 이미지와 텍스트 사이 간격 */
}

.global-menu .logo-area img {
	height: 32px;
	vertical-align: middle; /* 텍스트와 정렬을 위해 */
}

.global-menu .logo-area .logo-text { /* 로고 텍스트 스타일 */
	font-size: 24px; /* 이미지 폰트 크기에 맞춰 조정 */
	font-weight: bold; /* 이미지 폰트 굵기에 맞춰 조정 */
	color: #007bff; /* 이미지 로고 색상 (예시, 정확한 색상 코드로 변경) */
	white-space: nowrap; /* 텍스트가 줄바꿈되지 않도록 */
}


.nav-links {
	display: flex;
	gap: 30px; /* 메뉴 항목 간 간격 */
	list-style: none;
	margin:0;
	margin-left: 70px; /* 중앙 정렬을 위해 auto margin 사용 */
	padding: 0; /* 기본 패딩 제거 */
}

.nav-links li {
	padding: 0 5px; /* 메뉴 항목 자체에 약간의 패딩 추가 */
}

.nav-links li a {
	color: white;
	text-decoration: none;
	padding-bottom: 5px; /* active 밑줄과 텍스트 간격 */
	transition: border-bottom 0.3s ease; /* 부드러운 전환 효과 */
	font-size: 1rem;
	font-weight: 400;
	font-size: 20px;
	line-height: 140%;
	text-align: center;
	letter-spacing: -0.025em;
}


.nav-links li a.active {
    background: linear-gradient(to right top, #3787FF, #3AD4FF); /* 좌하단에서 우상단으로 (대각선) */
    -webkit-background-clip: text; /* 웹킷 기반 브라우저 (Chrome, Safari 등) */
    background-clip: text;
    -webkit-text-fill-color: transparent; /* 웹킷 기반 브라우저 */
    color: transparent; /* 일반 브라우저 (fallback) */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight:700;
	
}

.nav-links li a:hover { /* 호버 효과 추가 (선택 사항) */
	border-bottom: 2px solid rgba(255, 255, 255, 0.5);
}

.menu-etc {
	display: flex;
	align-items: center;
	gap: 15px; /* 언어, 로그인 버튼, 토글 사이 간격 */
	margin-left: auto;
	/* nav-links가 auto margin을 가지므로, 이 요소를 오른쪽 끝으로 밀어냅니다. */
	/* margin-right: 20px; */
}

.menu-etc .lang-option { /* KO, ENG 텍스트 스타일 */
	font-size: 16px;
	font-weight: 400;
	cursor: pointer;

}

.menu-etc .divider{ /* | 기호 스타일 */
	font-size: 16px;
	font-weight:400;
	color: #ddd; /* 약간 흐린 색상 */
}

.menu-etc .login-btn {
	background: white;
	color: black;
	border: none;
	padding: 8px 18px; /* 버튼 패딩 조정 */
	border-radius: 20px; /* 버튼 둥글게 */
	cursor: pointer;
	font-weight: bold;
	font-size: 16px;
	transition: background-color 0.2s ease;
}

.menu-etc .login-btn:hover {
	background-color: #f0f0f0;
}

.theme-toggle input[type="checkbox"] {
	display: none; /* 체크박스 숨기기 */
}

.theme-toggle label {
	cursor: pointer;
	font-size: 24px; /* 이모지 크기 조정 */
}



/* 기본(데스크톱)에서는 햄버거 숨김 */
.hamburger { display: none; }

#mobileMenu{
	display:none;
	
}


/* =========================1019
   Tablet 대응 미디어쿼리
   (모바일 전환 전까지 여백과 간격만 축소)
   ========================= */

/* 1280px 이하 ~ 1025px 이상: 넓은 태블릿/작은 데스크톱 */
@media (max-width: 1280px) and (min-width: 1025px) {
  .global-menu {
    padding: 15px 100px; /* 좌우 150 → 100 */
    box-sizing: border-box;
  }
  .nav-links {
    gap: 24px;           /* 30 → 24 */
    margin-left: 48px;   /* 70 → 48 */
  }
  .menu-etc {
    gap: 12px;           /* 15 → 12 */
  }
}

/* 1024px 이하 ~ 769px 이상: 일반 태블릿 */
@media (max-width: 1024px) and (min-width: 769px) {
  .global-menu {
    padding: 12px 40px;  /* 좌우 150 → 40 (글자끼리 붙지 않도록 여백만 축소) */
    box-sizing: border-box;
  }
  .logo-area img {
    height: 28px;        /* 로고 약간 축소 */
  }

  .nav-links {
    gap: 16px;           /* 30 → 16 */
    margin-left: 16px;   /* 70 → 16 */
  }
  .nav-links li a {
    font-size: 16px;     /* 18 → 16 (가독성 유지 선에서만 소폭 축소) */
  }

  .menu-etc {
    gap: 10px;           /* 15 → 10 */
  }
  .menu-etc .login-btn {
    padding: 6px 14px;   /* 버튼 과도한 폭 방지 */
    font-size: 14px;
  }
  #tryDemo {
    padding: 8px 14px;   /* 버튼 좌우 폭 살짝 축소 */
  }
}

/* 필요 시: 900px 근처에서 한 번 더 타이트하게 조정하고 싶다면 사용
@media (max-width: 900px) and (min-width: 769px) {
  .global-menu { padding: 12px 28px; }
  .nav-links { gap: 12px; margin-left: 12px; }
}
*/

/* 글자 겹침 방지용 (선택 사항) */
.global-menu, .nav-links, .menu-etc {
  min-width: 0; /* flex 아이템 축소 시 overflow 계산 안정화 */
}





/* ======= 모바일 ======= */
@media (max-width: 932px) {
  .global-menu {
    padding: 12px 16px;
    backdrop-filter: unset;
  }

  /* 데스크톱용 요소 숨김 */
  .nav-links,
  #tryDemo,
  #lang-inline,
  #auth-inline,
  #not-auth-inline {
    display: none !important;
  }

  /* 햄버거 버튼 표시 */
  .hamburger {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    background: transparent;
    border: 0;
    padding: 6px;
    margin-left: 8px;
    cursor: pointer;
  }
  .hamburger-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
  }

  /* menu-etc 오른쪽 정렬 유지 */
  .menu-etc {
    margin-left: auto;
    gap: 8px;
  }

  /* 모바일 오버레이 */
  .mobile-menu {
    position: fixed;
    /* inset: 0;  ← 일부 브라우저 호환 이슈 가능, 아래 fallback으로 대체 */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;   /* ← inset:0 대체(fallback) */
    /* width: 100vw; */
    /* height: 100vh; */           /* 안전망 */
    background: rgba(0,0,0,0.9);
    color: #fff;
    z-index: 9999;                          /* 충분히 높게 올림 */
    display: none;
    flex-direction: column;
    padding: 16px;
    overflow-y: auto;
  }
  .mobile-menu.open {
    display: flex !important; /* ← 핵심 */
    animation: fadeIn 180ms ease-out;
	  
  }

  
  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-bottom: 12px;
  }
  .icon-btn {
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  .close-btn {
    background: transparent;
    border: 0;
    font-size: 24px;
    color: #fff;
    cursor: pointer;
  }


	#not-auth-inline-m, #lang-inline-m, #auth-inline-m{
		text-align:right;
margin-right:10px;
	}

	
  .inline-box {
    display: none;
    margin: 8px 0 16px 0;
    font-size: 16px;
  }
  .inline-box a,
  .inline-box .auth-option-m,
  .inline-box .lang-option-m {
    color: #3787FF;
	  background-color:white;
	  padding:0.3rem 1rem;
	  border-radius:10px;
	  font-weight:600;
	  
    text-decoration: none;
    cursor: pointer;
	  
  }
  .inline-box .lang-divider,
  .inline-box .auth-divider {
    margin: 0 8px;
    color: #bbb;
  }

  .mobile-links {
    list-style: none;
    padding: 16px 0;
    margin: 0;
    border-top: 1px solid rgba(255,255,255,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }
  .mobile-links li {
    margin: 8px 0;
  }
  .mobile-links a {
    display: block;
    padding: 12px 4px;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .mobile-links a.active {
    color: #83D6FF;
  }
  .mobile-links a:hover {
    border-bottom: 2px solid rgba(255,255,255,0.4);
  }

  .mobile-demo-btn {
    display: block;
    margin: 16px 0 12px 0;
    text-align: center;
    padding: 12px 16px;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
  }
  
   /* 모바일 헤더에는 로고 + 햄버거만 보이도록 */
  #lang-icon,
  #profile-icon {
    display: none !important;
  }
  
}




/* 769px ~ 1280px: 데스크톱 레이아웃 유지 + 좌우 여백 축소, 모바일 UI 숨김 */
@media (min-width: 932px) and (max-width: 1280px) {

  /* 상단 바 여백 축소 */
  .global-menu {
    padding: 12px 48px; /* 데스크톱(150px) 대비 좌우 여백 축소 */
    box-sizing: border-box;
  }

  /* 데스크톱 네비게이션 유지 */
  .nav-links {
    display: flex !important;
    gap: 20px;          /* 항목 간격 소폭 축소 */
    margin-left: 32px;  /* 중앙 쏠림 방지용 약간의 좌측 여백 */
  }
  .nav-links li a {
    font-size: 16px;    /* 가독성 유지 선에서 축소 */
  }

  /* 우측 기타 영역 간격 조정 */
  .menu-etc {
    gap: 10px;
    margin-left: auto;
  }

  /* 데스크톱 버튼/아이콘은 표시 */
  #tryDemo { display: inline-flex !important; }
  #lang-icon,
  #profile-icon { display: inline-block !important; }

  /* 햄버거 및 모바일 전용 UI 전부 숨김 */
  #hamburger { display: none !important; }

  /* 오버레이 자체 및 내부 요소 숨김 */
  .mobile-menu,
  .mobile-menu.open,
  .mobile-menu-header,
  .mobile-links,
  #mobileMenu,
  #mobileClose,
  #tryDemoM,
  #lang-icon-m,
  #profile-icon-m,
  #lang-inline-m,
  #auth-inline-m,
  #not-auth-inline-m {
    display: none !important;
  }
}





.popup-box {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  background: #fff;
  color: #333;
  padding: 8px 12px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 2000;
  white-space: nowrap;
  min-width: 160px;
  text-align: center;
}

.popup-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.popup-box .auth-option,
.popup-box .lang-option {
  color: #111;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}

.popup-box .lang-option.active{
color:#3787FF;
}

.popup-box .auth-option:hover{
	color:#3787FF;
}