@charset "utf-8";
/* =========================================================================
 * JDH 메인 히어로 (히어로 섹션 + 투명 오버레이 헤더) - 페이지 코딩
 * Figma node 252:248(히어로), 252:251(헤더)
 * 이 파일은 www/index.jsp 에서만 로드된다(메인 전용 스코프).
 * ========================================================================= */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&display=swap');

/* ── 메인 전용: 개발/관리자 스캐폴딩 숨김 ──────────────────────────
 * devMenu.jsp 가 .program_box 로 leftmenu.jsp(상단 검정바 .navbar-fixed-top +
 * 좌측 사이드바 .fixed-sidebar-left)를 렌더한다. 이 CSS는 메인(index.jsp)에서만
 * 로드되므로 여기서 숨겨도 서브페이지에는 영향이 없다.
 * (프론트 GNB 정식 구축 시 header.jsp 의 devMenu include 자체를 제거 예정) */
.program_box { display: none !important; }
#wrap, .wrap { margin-left: 0 !important; padding: 0 !important; min-height: 0 !important; }

/* GNB·메가 공통 폭 — 이 값 하나로 상단 메뉴와 메가 컬럼을 동일 폭·정렬 유지 */
:root { --jdh-gnb-w: 1040px; }

/* 메인 히어로 컨테이너 */
.jdh_main_visual { position: relative; width: 100%; }
.jdh_main_visual * { box-sizing: border-box; }

/* ============ 히어로 전용 투명 오버레이 헤더 ============ */
.jdh_hero_header {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 80px;
	z-index: 20;
}
/* GNB 뒤 다크 그라데이션 스크림 — 밝은 배경에서도 로고/메뉴 가독성 확보 */
.jdh_hero_header::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 180px;
	background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,0) 100%);
	pointer-events: none;
	z-index: -1;
}
.jdh_hero_header__inner {
	position: relative;
	max-width: 1600px;
	height: 100%;
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	align-items: center;
	justify-content: center;      /* GNB 를 화면 중앙 기준 정렬 */
}
.jdh_logo { display: inline-flex; align-items: center; }
.jdh_logo a { position: relative; display: block; }
.jdh_logo img { height: 38px; width: auto; display: block; transition: opacity .3s ease; }
/* 히어로 헤더용 어두운 로고 — 평소엔 숨고, 메가가 열려 헤더가 밝아질 때만 보인다 */
.jdh_logo__dark {
	position: absolute;
	left: 0; top: 0;
	opacity: 0;
	pointer-events: none;
}

/* ── 메가가 열린 히어로 헤더: 투명 → 메가와 같은 바닐라 패널로 전환 ──
 * 투명 헤더(흰 글씨) 바로 아래에 크림색 메가가 붙으면 두 덩어리로 끊겨 보인다.
 * 헤더까지 같은 색으로 바꿔 하나의 판처럼 이어지게 한다(2026-08-03 사용자 지적). */
.jdh_hero_header.mega-open {
	background: #FBF9F2;
	transition: background .3s ease;
}
.jdh_hero_header.mega-open::before { opacity: 0; transition: opacity .3s ease; }
.jdh_hero_header::before { transition: opacity .3s ease; }
.jdh_hero_header.mega-open .jdh_logo img { opacity: 0; }
.jdh_hero_header.mega-open .jdh_logo__dark { opacity: 1; }
.jdh_hero_header.mega-open .jdh_gnb li a { color: #2A2F27; }
.jdh_hero_header.mega-open .jdh_gnb li.on a { color: #3B5843; }
.jdh_hero_header.mega-open .jdh_gnb li a:hover { opacity: 1; color: #3B5843; }
.jdh_hero_header.mega-open .jdh_login_btn { border-color: #233C2A; color: #233C2A; }
.jdh_hero_header.mega-open .jdh_login_btn:hover { background: #233C2A; color: #fff; }
.jdh_hero_header.mega-open .jdh_menu_btn__label { color: #2A2F27; }
.jdh_hero_header.mega-open .jdh_menu_btn__bars i { background: #2A2F27; }

/* 로고·우측 유틸은 좌우 끝에 고정(절대배치) → GNB·메가가 항상 화면 중앙 기준 정렬 */
.jdh_hero_header .jdh_logo,
.jdh_sticky_header .jdh_logo {
	position: absolute; left: 40px; top: 50%; transform: translateY(-50%); margin: 0;
}
.jdh_hero_header .jdh_hero_util,
.jdh_sticky_header .jdh_hero_util {
	position: absolute; right: 40px; top: 50%; transform: translateY(-50%);
}

/* GNB: 화면 중앙 기준 고정 폭, 메뉴는 5등분 슬롯(메가 컬럼과 동일 정렬) */
.jdh_gnb { flex: 0 1 auto; width: 100%; max-width: var(--jdh-gnb-w); }
.jdh_gnb ul {
	display: flex;
	align-items: center;
	width: 100%;
	list-style: none;
	margin: 0; padding: 0;
}
.jdh_gnb > ul > li { flex: 1 1 0; min-width: 0; }
.jdh_gnb li a {
	display: block;
	padding: 20px 8px;
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 22px;
	color: #fff;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	transition: opacity .2s;
}
.jdh_gnb li.on a { font-weight: 700; }
.jdh_gnb li a:hover { opacity: .7; }

.jdh_hero_util { display: flex; align-items: center; gap: 20px; }
.jdh_login_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 30px;
	border: 1.5px solid #fff;
	border-radius: 40px;
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 22px;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	transition: all .2s;
}
.jdh_login_btn:hover { background: #fff; color: #233C2A; }

/* ⚠ 언어 선택(.jdh_lang, 로그인 옆)의 스타일은 `/css/jdh_lang.css` 에 따로 있다.
   이 파일은 36개 JSP 가 `?v=` 없이 링크하고 있어 새 규칙이 캐시에 막힌다 →
   컴포넌트 CSS 를 분리하고 /include/jdh_lang.jsp 가 버전 붙여 직접 로드한다(quickmenu 와 같은 방식).
   ⚠ 이 주석에 `**` + `/` 를 붙여 쓰지 말 것 — CSS 주석이 거기서 끝나 버려
     아래 .jdh_menu_btn 규칙이 통째로 무시됐다(2026-08-28, PC 에 햄버거가 노출된 원인). */

.jdh_menu_btn {
	display: none;   /* 기본(데스크톱) 숨김 → 모바일(≤1024)에서만 노출 */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 50px;
	height: 50px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}
.jdh_menu_btn__label {
	font-family: 'Jost', sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 1px;
	color: #fff;
}
.jdh_menu_btn__bars { display: flex; flex-direction: column; gap: 3px; width: 37px; }
.jdh_menu_btn__bars i { display: block; width: 100%; height: 1px; background: #fff; }

/* ============ 스크롤 고정 GNB (히어로 헤더가 나가면 최상단 고정 등장) ============ */
.jdh_sticky_header {
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: 72px;
	z-index: 100;
	background: #FBF9F2;                           /* 화이트 바닐라 톤 (불투명) */
	border-bottom: 1px solid #EAE4D9;
	box-shadow: 0 6px 20px rgba(28, 30, 26, .06);
	transform: translateY(-100%);                 /* 기본: 화면 위로 숨김 */
	opacity: 0;
	pointer-events: none;
	transition: transform .35s ease, opacity .35s ease;
}
.jdh_sticky_header.is-visible {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}
.jdh_sticky_header__inner {
	position: relative;
	max-width: 1600px;
	height: 100%;
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	align-items: center;
	justify-content: center;      /* GNB 를 화면 중앙 기준 정렬 */
}
/* 고정바는 컴팩트하게: 메뉴 링크 패딩·폰트 축소 */
.jdh_sticky_header .jdh_logo img { height: 34px; }
.jdh_gnb--sticky li a { padding: 14px 18px; font-size: 17px; }
.jdh_sticky_header .jdh_login_btn { padding: 8px 26px; font-size: 16px; }

/* 바닐라 배경 → 텍스트/버튼 어두운 색으로 오버라이드 */
.jdh_sticky_header .jdh_gnb li a { color: #2A2F27; }
.jdh_sticky_header .jdh_gnb li.on a { color: #3B5843; }        /* 활성 메뉴: 브랜드 그린 */
.jdh_sticky_header .jdh_gnb li a:hover { opacity: 1; color: #3B5843; }
.jdh_sticky_header .jdh_login_btn { border-color: #233C2A; color: #233C2A; }
.jdh_sticky_header .jdh_login_btn:hover { background: #233C2A; color: #fff; }
.jdh_sticky_header .jdh_menu_btn__label { color: #2A2F27; }
.jdh_sticky_header .jdh_menu_btn__bars i { background: #2A2F27; }

/* ── 메가 드롭다운 (GNB hover → 하단 펼침, 고정바와 같은 바닐라 톤) ── */
.jdh_mega {
	position: absolute;
	top: 100%; left: 0;
	width: 100%;
	background: #FBF9F2;                          /* 불투명 바닐라 톤 */
	border-bottom: 1px solid #EAE4D9;
	box-shadow: 0 18px 30px rgba(28, 30, 26, .08);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-12px);
	pointer-events: none;
	transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.mega-open .jdh_mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}
/* 메가 컬럼 = GNB 와 동일 폭·5등분 슬롯 → 각 메뉴 라벨 아래에 컬럼 정렬 */
.jdh_mega__inner {
	width: 100%;
	max-width: var(--jdh-gnb-w);
	margin: 0 auto;
	padding: 26px 0 34px;
	display: flex;
	gap: 0;
}
.jdh_mega__col { flex: 1 1 0; min-width: 0; }
.jdh_mega__col ul { list-style: none; margin: 0; padding: 0; }
.jdh_mega__col li + li { margin-top: 2px; }
.jdh_mega__col a {
	display: block;
	padding: 9px 10px;
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 15.5px;
	line-height: 1.45;
	color: #4A4F48;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	border-radius: 8px;
	transition: color .18s, background .18s, font-weight .18s;
}
.jdh_mega__col a:hover { color: #233C2A; font-weight: 700; background: #F1EDE2; }

/* ============ 모바일 전체메뉴 (햄버거 클릭 시 우측 슬라이드) ============ */
.jdh_mmenu {
	position: fixed; inset: 0; z-index: 200;
	visibility: hidden; opacity: 0;
	transition: opacity .3s ease, visibility .3s;
}
.jdh_mmenu.is-open { visibility: visible; opacity: 1; }
.jdh_mmenu__backdrop { position: absolute; inset: 0; background: rgba(18, 24, 18, .5); }
.jdh_mmenu__panel {
	position: absolute; top: 0; right: 0; bottom: 0;
	width: min(88%, 400px);
	background: #FBF9F2;
	display: flex; flex-direction: column;
	transform: translateX(100%);
	transition: transform .32s cubic-bezier(.22,.61,.36,1);
	overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.jdh_mmenu.is-open .jdh_mmenu__panel { transform: translateX(0); }
.jdh_mmenu__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 20px; border-bottom: 1px solid #EAE4D9;
}
.jdh_mmenu__logo img { height: 30px; width: auto; display: block; }
.jdh_mmenu__close { position: relative; width: 42px; height: 42px; padding: 0; border: 0; background: none; cursor: pointer; }
.jdh_mmenu__close span { position: absolute; left: 9px; right: 9px; top: 50%; height: 2px; background: #2A2F27; border-radius: 2px; }
.jdh_mmenu__close span:first-child { transform: rotate(45deg); }
.jdh_mmenu__close span:last-child { transform: rotate(-45deg); }

.jdh_mmenu__list { list-style: none; margin: 0; padding: 6px 0; }
.jdh_mmenu__item { border-bottom: 1px solid #F0EBE0; }
.jdh_mmenu__cat {
	display: flex; align-items: center; justify-content: space-between; width: 100%;
	padding: 16px 20px; border: 0; background: none; text-align: left;
	font-family: 'Pretendard', sans-serif; font-weight: 700; font-size: 16px; color: #22271F;
	text-decoration: none; cursor: pointer;
}
.jdh_mmenu__chev {
	flex: 0 0 auto; width: 8px; height: 8px; margin-right: 2px;
	border-right: 2px solid #B0966A; border-bottom: 2px solid #B0966A;
	transform: rotate(45deg); transition: transform .25s;
}
.jdh_mmenu__item.is-open .jdh_mmenu__chev { transform: rotate(-135deg); }
.jdh_mmenu__sub {
	list-style: none; margin: 0; padding: 0; background: #F5F1E8;
	max-height: 0; overflow: hidden; transition: max-height .3s ease;
}
.jdh_mmenu__item.is-open .jdh_mmenu__sub { max-height: 520px; }
.jdh_mmenu__sub a {
	display: block; padding: 12px 20px 12px 32px;
	font-family: 'Pretendard', sans-serif; font-weight: 500; font-size: 14.5px;
	color: #5B615A; text-decoration: none;
}
.jdh_mmenu__sub a:active { color: #233C2A; background: #EFE9DC; }
.jdh_mmenu__foot { margin-top: auto; padding: 18px 20px; border-top: 1px solid #EAE4D9; }
.jdh_mmenu__login {
	display: block; text-align: center; padding: 14px; border-radius: 999px;
	background: #24382C; color: #fff !important; text-decoration: none;
	font-family: 'Pretendard', sans-serif; font-weight: 700; font-size: 15px;
}
body.jdh-noscroll { overflow: hidden; }

/* ============ 히어로 본체 ============ */
.jdh_hero {
	position: relative;
	width: 100%;
	height: 100vh;              /* 풀스크린 */
	overflow: hidden;
}
@supports (height: 100dvh) { .jdh_hero { height: 100dvh; } }  /* 모바일 주소창 대응 */

/* 배경 자동 슬라이드 레이어 */
.jdh_hero__bg {
	position: absolute; inset: 0;
	z-index: 0;
	width: 100%; height: 100%;
}
/* 배경 영상 — 화면비와 무관하게 히어로를 가득 채운다(Swiper 슬라이드에서 교체) */
.jdh_hero__bg video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	pointer-events: none;
}

/* 텍스트 가독성용 좌측 다크 스크림 */
.jdh_hero__scrim {
	position: absolute; inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.18) 38%, rgba(0,0,0,0) 72%);
	pointer-events: none;
}
.jdh_hero__inner {
	position: relative;
	z-index: 2;
	max-width: 1600px;
	height: 100%;
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	align-items: center;
}
.jdh_hero__copy { padding-left: 40px; }
.jdh_hero__eyebrow {
	margin: 0;
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 30px;
	line-height: 36px;
	letter-spacing: -.6px;
	color: #fff;
}
.jdh_hero__title {
	margin: 20px 0 0;
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 54px;
	line-height: 64px;
	letter-spacing: -1px;
	color: #fff;
}
/* 타이틀 "JDH" — 문의하기 버튼 배경(초록 그라데이션)과 동일 색상 */
.jdh_hero__title .jdh_hl {
	background: linear-gradient(135deg, #4A6E54 0%, #233C2A 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #4A6E54; /* 폴백 */
}
/* 타이틀·설명이 각각 2줄로 늘어나(영상 가림 최소화 목적) 사이 여백을 76px → 44px 로 축소 */
.jdh_hero__desc {
	margin: 44px 0 0;
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 22px;
	line-height: 28px;
	letter-spacing: -.45px;
	color: #fff;
}
.jdh_hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 40px;         /* desc 아래, 좌측정렬(카피 블록 흐름 안) */
	padding: 16px 32px;
	border-radius: 16px;
	background: linear-gradient(135deg, #4A6E54 0%, #233C2A 100%);
	font-family: 'Pretendard', sans-serif;
	font-weight: 800;
	font-size: 24px;
	line-height: 29px;
	color: #fff !important;   /* 문의하기 텍스트 흰색 고정(전역 a 색상 오버라이드 방지) */
	text-decoration: none;
	box-shadow: 0 8px 24px rgba(0,0,0,.25);
	transition: transform .2s;
}
.jdh_hero__cta:hover { transform: scale(1.04); }

/* ============ 반응형 ============ */
/* 화면이 좁아지면 GNB·메가 공통 폭 축소 → 좌우 로고/유틸과 겹침 방지(정렬은 유지) */
@media all and (max-width: 1440px) { :root { --jdh-gnb-w: 920px; } }
@media all and (max-width: 1200px) {
	:root { --jdh-gnb-w: 800px; }
	.jdh_gnb li a { font-size: 16px; padding-left: 4px; padding-right: 4px; }
	.jdh_gnb--sticky li a { font-size: 15px; padding-left: 10px; padding-right: 10px; }
	.jdh_mega__col a { font-size: 14.5px; padding-left: 4px; padding-right: 4px; }
}

@media all and (max-width: 1280px) {
	.jdh_hero__title { font-size: 46px; line-height: 56px; }
	.jdh_hero__desc { margin-top: 36px; }
}
@media all and (max-width: 1024px) {
	.jdh_hero_header { height: 64px; }
	.jdh_hero_header__inner { padding: 0 20px; }
	.jdh_sticky_header { height: 60px; }
	.jdh_sticky_header__inner { padding: 0 20px; }
	.jdh_hero_header .jdh_logo, .jdh_sticky_header .jdh_logo { left: 20px; }
	.jdh_hero_header .jdh_hero_util, .jdh_sticky_header .jdh_hero_util { right: 20px; }
	.jdh_mega { display: none; }                          /* 모바일: 메가 드롭다운 숨김(햄버거 사용) */
	.jdh_gnb, .jdh_login_btn { display: none; }          /* 모바일: PC 네비/로그인 숨김(햄버거 사용) */
	.jdh_menu_btn { display: flex; width: 44px; height: 44px; }   /* 메뉴 버튼은 모바일에서만 노출 */
	.jdh_logo img { height: 32px; }
	.jdh_hero { min-height: 560px; }
	.jdh_hero__copy { padding-left: 0; }
	.jdh_hero__eyebrow { font-size: 22px; line-height: 28px; }
	.jdh_hero__title { font-size: 40px; line-height: 50px; }
	.jdh_hero__desc { margin-top: 28px; font-size: 17px; line-height: 24px; }
	.jdh_hero__cta { font-size: 20px; padding: 14px 28px; margin-top: 32px; }
}
@media all and (max-width: 640px) {
	.jdh_hero__eyebrow { font-size: 17px; line-height: 24px; }
	.jdh_hero__title { font-size: 30px; line-height: 40px; letter-spacing: -.5px; }
	.jdh_hero__desc { margin-top: 22px; font-size: 16px; line-height: 22px; }
	.jdh_hero__cta { font-size: 17px; padding: 12px 24px; border-radius: 12px; margin-top: 24px; }
}