@charset "utf-8";
/* ============================================================
   header.css — 앱 셸 프레임 + 상단바 + 전체메뉴 서랍
   ⚠ 세종산업은 "모바일·태블릿 반응형 / PC에서도 앱 셸 유지" 요구사항이므로
     EBIWEB 표준 PC GNB 레이아웃 대신 앱 셸 레이아웃을 사용합니다.

   [셸 폭 규칙]
     ~599px    폰      : 풀블리드 100%
     600px~    태블릿·PC : 최대 1400px 중앙 정렬 (2단 그리드 + 태블릿 타이포)
     1024px~   PC       : 좌우 여백 확대 + 페이지별 다단 그리드
   ============================================================ */

/* ── 페이지 바탕 ── */
html { background:#fff; }
html body { background:#fff; min-height:100%; overflow-x:hidden; }

/* ── 앱 셸 (모바일 기준) ── */
.app {
	position:relative;
	width:100%;
	min-height:100vh;
	margin:0 auto;
	background:#fff;
	box-shadow:0 0 80px rgba(16,32,64,.20);
	padding-bottom:calc(74px + env(safe-area-inset-bottom));

	/* 뷰포트가 넓어도 셸 안에서는 모바일 타이포 스케일 유지 (common.css 767px 값) */
	--fs12:1.1rem; --fs13:1.2rem; --fs14:1.3rem; --fs15:1.4rem;
	--fs16:1.5rem; --fs17:1.55rem; --fs18:1.6rem; --fs20:1.8rem;
	--fs22:1.9rem; --fs23:2rem;    --fs24:2.1rem; --fs26:2.2rem;
	--fs28:2.3rem; --fs30:2.4rem;  --fs32:2.5rem; --fs36:2.6rem;
	--fs38:2.8rem; --fs40:3rem;    --fs45:3.1rem; --fs48:3.1rem;
	--fs50:3.2rem; --fs56:3.2rem;  --fs60:3.3rem; --fs64:3.6rem;
	--fs70:3.8rem; --fs80:5rem;
}

/* layout.css 의 .pc/.mobile 데스크탑 분기를 앱 셸 안에서 무력화 */
.app .pc { display:none !important; }
.app .mobile { display:block !important; }

/* ── 상단바 ── */
header.appTop {
	position:sticky; top:0; z-index:60;
	display:flex; align-items:center; justify-content:space-between;
	height:64px; padding:0 14px;
	background:#fff; border-bottom:1px solid #dfe6ef;
}
header.appTop .appLogo { line-height:0; }
header.appTop .appLogo a { display:block; }
header.appTop .appLogo img { height:38px; width:auto; display:block; }
header.appTop .appLogo img.on { display:none; }
header.appTop .appLogo img.off { display:block; }

/* ── 메인: 상단바 투명 오버레이 ──────────────────────────────
   히어로 영상 위로 로고·홈·햄버거만 떠 있는 형태.
   음수 margin 으로 뒤 콘텐츠를 끌어올려 겹치게 하고, sticky 는 그대로 유지한다.
   최상단에서만 투명하고, 화면을 내리기 시작하면 ebi.gnb.js 가 .scrolled 를 붙여 흰 배경으로 복귀. */
body.isMain header.appTop {
	margin-bottom:-64px;
	background:transparent; border-bottom-color:transparent;
	transition:background .25s, border-color .25s;
}
body.isMain header.appTop .appLogo img.off { display:none; }
body.isMain header.appTop .appLogo img.on  { display:block; }
body.isMain header.appTop .utilBtn { color:#fff; }
body.isMain header.appTop .utilBtn:active { background:rgba(255,255,255,.18); }

body.isMain header.appTop.scrolled { background:#fff; border-bottom-color:#dfe6ef; }
body.isMain header.appTop.scrolled .appLogo img.off { display:block; }
body.isMain header.appTop.scrolled .appLogo img.on  { display:none; }
body.isMain header.appTop.scrolled .utilBtn { color:#20293a; }
body.isMain header.appTop.scrolled .utilBtn:active { background:#eef3fa; }

/* ── 상단바 우측 유틸 (홈 / 전체메뉴) ── */
header.appTop .topUtil { display:flex; align-items:center; gap:16px; }
header.appTop .utilBtn {
	display:flex; align-items:center; justify-content:center;
	width:24px; height:24px; border-radius:10px;
	color:#20293a; background:transparent;
	transition:background .2s;
}
header.appTop .utilBtn:active { background:#eef3fa; }

header.appTop .utilBtn .ic { display:block; width:24px; height:24px; }
header.appTop .gnbView .ic { width:25px; height:25px; }

/* ── 전체메뉴 서랍 ── */
/* 서랍이 열리면 헤더 stacking 을 끌어올려 하단 고정바(z:80) 위로 덮이게 함 */
header.appTop:has(nav.mobile.active) { z-index:300; }

.gnbCover {
	display:none; position:fixed; left:0; top:0; z-index:200;
	width:100%; height:100vh; background:rgba(10,22,44,.55); backdrop-filter:blur(2px);
}
header.appTop nav.mobile {
	position:fixed; right:0; top:0; z-index:210;
	width:min(84vw, 340px); height:100%;
	background:#fff; border-left:3px solid var(--c_base2);
	transform:translateX(100%); transition:transform .35s cubic-bezier(.22,.61,.36,1);
	will-change:transform; box-shadow:-10px 0 30px rgba(16,32,64,.18);
	display:flex !important; flex-direction:column;
}
header.appTop nav.mobile.active { transform:translateX(0); }

header.appTop nav.mobile .closeWrap {
	position:relative; display:flex; align-items:center;
	height:60px; padding-left:20px;
	border-bottom:1px solid #e6ebf2; background:var(--c_base2);
}
header.appTop nav.mobile .closeWrap a.home { color:#fff; font-size:var(--fs14); font-weight:700; letter-spacing:.04em; }
header.appTop nav.mobile .closeWrap .gnbClose {
	position:absolute; right:0; top:0; display:flex; align-items:center; justify-content:center;
	width:60px; height:60px; color:#fff;
	border-left:1px solid rgba(255,255,255,.22);
}
header.appTop nav.mobile .closeWrap .gnbClose .ic { width:22px; height:22px; }

header.appTop nav.mobile .gnb { flex:1; overflow-y:auto; font-family: var(--f_base1);}
header.appTop nav.mobile .gnb .dep1 > li { border-bottom:1px solid #e9eef5; }
header.appTop nav.mobile .gnb .dep1 > li > a {
	display:block; padding:12px 20px; color:#14181d; font-size:var(--fs16); font-weight:600;
}
header.appTop nav.mobile .gnb .dep1 > li.on > a { background:var(--c_base1); color:#fff; }
header.appTop nav.mobile .gnb .dep2 { display:none; background:#f6f9fd; }
header.appTop nav.mobile .gnb .dep2 > li { border-top:1px solid #e9eef5; }
header.appTop nav.mobile .gnb .dep2 > li a {
	position:relative;
	display:block; padding:8px 20px 8px 34px; color:#5c6b7a; font-size:var(--fs15); font-weight:500;
}
header.appTop nav.mobile .gnb .dep2 > li.on a { color:var(--c_base1); font-weight:700; }
/* 현재 페이지 2차 메뉴 앞 마커 (모서리 둥근 작은 네모) */
header.appTop nav.mobile .gnb .dep2 > li.on a:before {
	content:""; position:absolute; left:20px; top:50%;
	width:7px; height:7px; margin-top:-3.5px;
	border-radius:2px; background:var(--c_base1);
}

header.appTop nav.mobile .gnbFoot { padding:20px; border-top:1px solid #e6ebf2; background:#f6f9fd; }
header.appTop nav.mobile .gnbFoot .ftit {
	margin-bottom:10px; color:#20293a;
	font-family:var(--f_en); font-size:var(--fs14); font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
header.appTop nav.mobile .gnbFoot .fcont { display:flex; flex-direction:column; gap:8px; padding-left:0; margin:0;}
header.appTop nav.mobile .gnbFoot .fcont li { display:flex; align-items:flex-start; gap:8px; }
header.appTop nav.mobile .gnbFoot .fcont .ic { flex:0 0 auto; width:15px; height:15px; margin-top:1px; color:var(--c_base1); }
header.appTop nav.mobile .gnbFoot .fcont .tel { color:var(--c_base1); font-size:var(--fs14); font-weight:800; letter-spacing:-.01em; }
header.appTop nav.mobile .gnbFoot .fcont .mail { display:flex; flex-direction:column; gap:2px; }
header.appTop nav.mobile .gnbFoot .fcont .mail a { color:#5c6b7a; font-size:var(--fs13); word-break:break-all; }

/* ── 본문 ── */
.appBody { display:block; }

/* ════════════════════════════════════════════════════════════
   태블릿 이상 (600px~) — 셸 1400px + 타이포 한 단계 업
   ════════════════════════════════════════════════════════════ */
@media screen and (min-width: 600px) {
	.app {
		width:min(100%, 1400px);

		/* common.css 태블릿(~1199px) 스케일 */
		--fs18:1.7rem; --fs20:1.9rem; --fs22:2rem;   --fs23:2.2rem;
		--fs24:2.3rem; --fs26:2.4rem; --fs28:2.6rem; --fs30:2.8rem;
		--fs32:3rem;   --fs36:3rem;   --fs38:3.2rem; --fs40:3.4rem;
		--fs45:4rem;   --fs48:4.1rem; --fs50:4.2rem; --fs56:4.3rem;
		--fs60:4.4rem; --fs64:5rem;   --fs70:5.2rem; --fs80:6rem;
		--fs12:1.2rem; --fs13:1.3rem; --fs14:1.4rem; --fs15:1.5rem;
		--fs16:1.6rem; --fs17:1.7rem;
	}

	.app { padding-bottom:calc(78px + env(safe-area-inset-bottom)); }

	header.appTop { height:72px; padding:0 22px; }
	body.isMain header.appTop { margin-bottom:-72px; }
	header.appTop .appLogo img { height:42px; }
	header.appTop .topUtil { gap:6px; }
	header.appTop .utilBtn { width:46px; height:46px; }
	header.appTop .utilBtn .ic { width:26px; height:26px; }
	header.appTop .gnbView .ic { width:27px; height:27px; }

	header.appTop nav.mobile { width:min(60vw, 380px); }
	header.appTop nav.mobile .gnb .dep1 > li > a { padding:12px 24px; }
	header.appTop nav.mobile .gnb .dep2 > li a { padding:8px 24px 8px 40px; }
	header.appTop nav.mobile .gnb .dep2 > li.on a:before { left:24px; width:6px; height:6px; margin-top:-3px; }
	header.appTop nav.mobile .gnbFoot { padding:22px 24px; }
	header.appTop nav.mobile .gnbFoot .fcont .ic { width:16px; height:16px; }
}

/* ── PC (1024px~) — 넓은 셸 좌우 여백 ── */
@media screen and (min-width: 1024px) {
	header.appTop { padding:0 40px; }
}