.font-hand {font-family: 'Nanum Brush Script', cursive;}
body.open {overflow:hidden;}
label.error {
    color: #ef4444;         /* 빨간색 */
    font-size: 0.75rem;     /* 12px */
    font-weight: 500;       /* medium font weight */
    margin-top: 0.25rem;    /* 상단 여백 */
    display: block;         /* 줄바꿈 처리 */
    line-height: 1.25;      /* 줄간격 조정 */
}

/* 2. 에러가 난 입력 필드 스타일 (Tailwind: border-red-500) */
input.error, 
textarea.error, 
select.error {
    border-color: #ef4444 !important; /* 강제로 빨간 테두리 적용 */
    color: #b91c1c;         /* 입력 텍스트도 짙은 빨간색으로 */
}

/* 3. 에러 입력 필드 포커스 효과 (Tailwind: ring-red-500) */
input.error:focus, 
textarea.error:focus, 
select.error:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 1px #ef4444 !important; /* Tailwind ring 효과 흉내 */
    outline: none;
}

/* 4. 라디오/체크박스 에러 위치 조정 */
/* 라디오 버튼 그룹 뒤에 에러 메시지가 올 때 줄바꿈 */
input[type="radio"].error + label.error,
input[type="checkbox"].error + label.error {
    margin-top: 0.5rem;
}

.scrollbar-hide {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera*/
}

.cm_banner_wrap {position:relative;}
.cm_banner_wrap span.cm_banner_edit_button {display:none; z-index:999999; position:absolute; top:0; right:0; padding:0 6px; font-size:12px; font-weight:normal; line-height:20px; background:#328ffe; -webkit-user-select: none; -khtml-user-select:none; -moz-user-select:none; -o-user-select:none; user-select:none;}
.cm_banner_wrap span.cm_banner_edit_button a {color:#fff; font-size:12px!important;}
.cm_banner_wrap.active:hover:after {content:""; position:absolute; z-index:0; top:0; left:0; right:0; width:100%; height:100%; border:2px solid #328ffe; box-sizing:border-box; pointer-events:none;}
.cm_banner_wrap.active:hover span.cm_banner_edit_button {display:block;}

/* 롤링 애니메이션 */
.notice-container { height: 2rem; overflow: hidden; position: relative; }
.notice-list { transition: transform 0.5s ease-in-out; }
.notice-item { height: 2rem; display: flex; align-items: center; }

/* 모바일 메뉴 트랜지션 */
#nav-overlay.active + nav {background:none; border:none;}
#nav-overlay.active + nav #logo {opacity:0;}
#nav-overlay.active + nav #gnb {opacity:0;}
#nav-overlay.active + nav #contactBtn {opacity:0;}

#menu-toggle {overflow:hidden; position:relative;}

/* --- [메뉴 스타일] --- */

.menu-overlay {
  --x: 100%;
  --y: 0%;
  clip-path: circle(0px at var(--x) var(--y));
  pointer-events: none;
  transition: clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-overlay.active {
  clip-path: circle(150% at var(--x) var(--y));
  pointer-events: all;
}
#menu-toggle { transition: transform 0.3s ease; }
#menu-toggle:active { transform: scale(0.95); }
.hamburger-line {
	transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
	transform-origin: center;
}
.menu-open .line-top { transform: translateY(0.375rem) rotate(45deg); }
.menu-open .line-middle { opacity: 0; }
.menu-open .line-bottom { transform: translateY(-0.375rem) rotate(-45deg); }

.menu-list-item {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.menu-overlay.active .menu-list-item {
	opacity: 1;
	transform: translateY(0);
}
.menu-overlay.active .menu-list-item:nth-child(1) { transition-delay: 0.1s; }
.menu-overlay.active .menu-list-item:nth-child(2) { transition-delay: 0.2s; }
.menu-overlay.active .menu-list-item:nth-child(3) { transition-delay: 0.3s; }
.menu-overlay.active .menu-list-item:nth-child(4) { transition-delay: 0.4s; }

.cta-fade-in {
	opacity: 0;
	transition: opacity 0.6s ease 0.5s;
}
.menu-overlay.active .cta-fade-in { opacity: 1; }

.hover-dot {
	width: 10px; height: 10px;
	border-radius: 50%;
	background-color: #38bdf8;
	opacity: 0;
	transform: translateX(-10px) scale(0);
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.menu-text { transition: transform 0.3s ease, color 0.3s ease; }
.menu-plus { font-variant-numeric: tabular-nums; }


/* =========================================
   [핵심] GNB 스타일링
   ========================================= */

.gnb-item {
	position: relative;
}

.submenu-wrapper {display: none; position: absolute; top: 100%;	left: 0; width: max-content; z-index: 50;}

/* [수정] 우측 정렬 클래스 (강제 적용) */
.gnb-item.sub-right .submenu-wrapper {
	left: auto !important;
	right: 0 !important;
}

/* [Hover 모드] 배경 트릭 */
.submenu-wrapper::before {
	content: '';
	position: absolute;
	top: 0;
	left: -150vw; 
	width: 300vw;
	height: 100%;
	background: white;
	border-top: 1px solid #f3f4f6;
	border-bottom: 1px solid #f3f4f6;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
	z-index: -1;
	pointer-events: none;
	display: none;
}

/* Hover 시 동작 (전체메뉴 닫힌 상태) */
header:not(.header-open) .gnb-item:hover .submenu-wrapper {
	display: block;
	animation: fadeIn 0.2s ease-out;
}
header:not(.header-open) .gnb-item:hover .submenu-wrapper::before {
	display: block;
}


/* 4. [Click 모드] 전체메뉴 열림 상태 */
#gnb-backdrop {
	position: absolute;
	top: calc(100% + 1px);
	left: 0;
	width: 100%;
	background: white;
	border-bottom: 1px solid #e5e7eb;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	z-index: 0;
	height: 0;
	opacity: 0;
	transition: all 0.3s ease-in-out;
	pointer-events: none;
}

.header-open #gnb-backdrop {
	height: 350px; /* 메뉴 높이에 맞춰 조절 */
	opacity: 1;
	pointer-events: auto;
}

.header-open .submenu-wrapper {
	display: block !important;
	animation: slideDown 0.3s ease-out forwards;
	opacity: 0;
	background: transparent; 
	box-shadow: none;
	border: none;
	
	/* [수정] 레이아웃 깨짐 방지를 위해 absolute 유지 */
	position: absolute; 
	top: 100%; /* 부모 바로 아래 */
	width: max-content; /* 내용 너비만큼 */
	left: 50%;
    transform: translate(-50%, 0)!important;
}

/* 전체메뉴 모드에서도 sub-right는 우측 정렬 유지 */
.header-open .gnb-item.sub-right .submenu-wrapper {
	left: auto !important;
	right: 0 !important;
}

.header-open .submenu-content {
	flex-direction: column !important;
	padding: 20px 0 0;
	text-align:center;
	position: relative;
}

.header-open .submenu-content li a {
	border-right: none !important;
	padding: 0;
	color: #666;
	display: block;
	font-size:13px;
}
.header-open .submenu-content li a:hover {
	color: #2563eb;
	text-decoration: underline;
}

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