@charset "utf-8";

/* ============================================================
   DGICT 커스텀 페이지 템플릿 스타일
   위치: /wp-content/dgict/style.css

   목차
     1. 토큰
     2. 리셋 · 공통
     3. 외부 요소 차단
     4. 헤더
     5. 검색
     6. 히어로
     7. 서브내비
     8. 본문
     9. 푸터
    10. 우측 고정 버튼
    11. 반응형
   ============================================================ */


/* ============================================================
   1. 토큰 — 색과 치수는 전부 여기서 관리
   ============================================================ */
:root {
	/* 색 */
	--dg-orange:      #f07300;
	--dg-orange-dark: #d96700;
	--dg-navy:        #0b1a33;
	--dg-ink:         #222222;
	--dg-gray:        #666666;
	--dg-line:        #e0e0e0;
	--dg-white:       #ffffff;

	/* 치수 */
	--dg-max:      1845px;
	--dg-pad:      clamp(20px, 7vw, 130px);
	--dg-header-h: 100px;
	--dg-hero-h:   430px;
	--dg-subnav-h: 64px;
	--dg-adminbar: 0px;          /* 관리자 바 높이 · 아래에서 자동 전환 */
	--dg-gap:      14px;         /* 메뉴와 드롭다운 사이 간격 */

	/* 모션 */
	--dg-ease: .2s ease;
}

/* 로그인 상태에서만 관리자 바 높이를 잡는다 */
body.admin-bar { --dg-adminbar: 32px; }

@media (max-width: 782px) {
	body.admin-bar { --dg-adminbar: 46px; }
}


/* ============================================================
   2. 리셋 · 공통

   주의: a 에 color 를 지정하지 않습니다.
   color: inherit 을 주면 .dg-body 의 진한 회색이 상속되어
   어두운 배경 위의 흰 글자를 전부 덮어씁니다.
   색은 각 영역에서 부모가 물려주도록 둡니다.
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

/* Avada 가 wp_head 로 직접 찍는 인라인 CSS 가 회색 배경을 남깁니다 */
html { background: var(--dg-white) !important; }

.dg-body {
	margin: 0;
	overflow-x: hidden;
	font-family: "Pretendard", "Noto Sans KR", -apple-system, "Malgun Gothic", sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: var(--dg-ink);
	background: var(--dg-white) !important;
	word-break: keep-all;
}

.dg-body img { display: block; max-width: 100%; height: auto; }
.dg-body a { text-decoration: none; }
.dg-body ul,
.dg-body ol,
.dg-body dl,
.dg-body dd { margin: 0; padding: 0; list-style: none; }
.dg-body button { font: inherit; background: none; border: 0; cursor: pointer; }

/* 외부 스타일이 링크에 opacity 를 거는 것을 차단 */
.dg-body a,
.dg-body a:hover,
.dg-body a:focus,
.dg-body button,
.dg-body button:hover { opacity: 1; }

.dg-body :focus-visible {
	outline: 2px solid var(--dg-orange);
	outline-offset: 3px;
}

/* 공통 컨테이너 — width 100% 가 없으면 flex 안에서 가운데로 밀립니다 */
.dg-inner {
	width: 100%;
	max-width: var(--dg-max);
	margin: 0 auto;
	padding: 0 var(--dg-pad);
}


/* ============================================================
   3. 외부 요소 차단

   Avada 와 플러그인이 wp_footer 로 밀어 넣는 부유 요소들이
   CSS 를 걷어낸 상태에서 본문에 그대로 떨어집니다.
   이 템플릿이 직접 만든 요소만 남기고 전부 숨깁니다.

   나중에 팝업 등 외부 요소를 살리려면
   :not() 목록에 그 클래스를 추가하세요.
   ============================================================ */
body.dg-body > *:not(.dg-header):not(.dg-hero):not(.dg-subnav):not(.dg-main):not(.dg-footer):not(.dg-side):not(#wpadminbar):not(script):not(style):not(noscript):not(template) {
	display: none !important;
}


/* ============================================================
   4. 헤더 — 히어로 위에 겹치는 투명 헤더

   처음부터 fixed 로 두고 배경색만 바꿉니다.
   스크롤 중에 position 을 바꾸면 문서 흐름이 순간 달라져
   히어로가 위로 튀어 오릅니다.
   ============================================================ */
.dg-header {
	position: fixed;
	top: var(--dg-adminbar);
	right: 0;
	left: 0;
	z-index: 100;
	height: var(--dg-header-h);
	color: var(--dg-white);
	background: transparent;
	transition: background-color .25s ease;
}

.dg-header.is-solid {
	background: rgba(11, 26, 51, .95);
	backdrop-filter: blur(6px);
}

.dg-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	height: 100%;
}

/* 로고 */
.dg-logo {
	position: relative;
	z-index: 220;
	flex: 0 0 auto;
}

.dg-logo img { width: auto; height: 34px; }

/* 주 메뉴 */
.dg-gnb {
	position: relative;               /* 검색창 기준점 */
	display: flex;
	align-items: center;
	gap: 30px;
}

.dg-gnb__list {
	display: flex;
	align-items: center;
	gap: 38px;
}

.dg-gnb__list > li { position: relative; }

.dg-gnb__list > li > a {
	display: block;
	padding: 6px 0;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.02em;
	white-space: nowrap;
	color: var(--dg-white);
	transition: color var(--dg-ease);
}

.dg-gnb__list > li > a:hover,
.dg-gnb__list > li.current-menu-item > a,
.dg-gnb__list > li.current-menu-ancestor > a,
.dg-gnb__list > li.current-page-ancestor > a { color: var(--dg-orange); }

/* ---- 2차 메뉴 ---- */
.dg-gnb__list .sub-menu {
	position: absolute;
	top: calc(100% + var(--dg-gap));
	left: 50%;
	min-width: 170px;
	padding: 10px 0;
	background: var(--dg-white);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .14);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(-6px);
	transition: opacity var(--dg-ease), transform var(--dg-ease), visibility var(--dg-ease);
}

/* 메뉴와 드롭다운 사이의 틈을 투명 다리로 잇는다.
   이게 없으면 마우스를 내리는 도중 hover 가 끊겨 깜빡 사라집니다. */
.dg-gnb__list .sub-menu::before {
	content: "";
	position: absolute;
	top: calc(var(--dg-gap) * -1);
	left: 0;
	right: 0;
	height: var(--dg-gap);
}

.dg-gnb__list > li:hover .sub-menu,
.dg-gnb__list > li:focus-within .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.dg-gnb__list .sub-menu a {
	display: block;
	padding: 9px 22px;
	font-size: 15px;
	white-space: nowrap;
	color: var(--dg-ink);
}

.dg-gnb__list .sub-menu a:hover {
	color: var(--dg-orange);
	background: #f7f7f7;
}

/* 햄버거 — 반응형 구간에서만 노출 */
.dg-burger {
	display: none;
	position: relative;
	z-index: 220;
	width: 30px;
	height: 22px;
}

.dg-burger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--dg-white);
	transition: transform .25s ease, opacity var(--dg-ease);
}

.dg-burger span:nth-child(1) { top: 0; }
.dg-burger span:nth-child(2) { top: 10px; }
.dg-burger span:nth-child(3) { top: 20px; }

.dg-nav-open .dg-burger span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.dg-nav-open .dg-burger span:nth-child(2) { opacity: 0; }
.dg-nav-open .dg-burger span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }


/* ============================================================
   5. 검색
   ============================================================ */
.dg-search {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.dg-search svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: var(--dg-white);
	stroke-width: 2;
	stroke-linecap: round;
	transition: stroke var(--dg-ease);
}

.dg-search:hover svg,
.dg-search[aria-expanded="true"] svg { stroke: var(--dg-orange); }

/* 펼쳐지는 검색창 */
.dg-searchbox {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	z-index: 130;
	display: flex;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--dg-ease), transform var(--dg-ease), visibility var(--dg-ease);
}

.dg-search[aria-expanded="true"] ~ .dg-searchbox {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.dg-searchbox input {
	width: 280px;
	padding: 13px 16px;
	font: inherit;
	font-size: 15px;
	color: var(--dg-ink);
	background: var(--dg-white);
	border: 0;
	box-shadow: 0 10px 26px rgba(0, 0, 0, .2);
}

.dg-searchbox input:focus { outline: 0; }

.dg-body .dg-searchbox button {
	flex: 0 0 auto;
	padding: 0 20px;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	color: var(--dg-white);
	background: var(--dg-orange);
	transition: background-color var(--dg-ease);
}

.dg-body .dg-searchbox button:hover { background: var(--dg-orange-dark); }


/* ============================================================
   6. 히어로
   ============================================================ */
.dg-hero {
	display: flex;
	align-items: center;
	min-height: var(--dg-hero-h);
	padding-top: var(--dg-header-h);
	background: var(--dg-navy) url("hero.jpg") center / cover no-repeat;
}

.dg-hero__title {
	margin: 0;
	font-size: 52px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.03em;
	text-align: left;
	color: var(--dg-white);
}


/* ============================================================
   7. 서브내비 — 홈 · 대메뉴 · 소메뉴

   중요: 이 영역에는 overflow 를 걸지 않습니다.
   한 축을 auto 로 두면 다른 축도 visible 이 될 수 없어서
   아래로 펼쳐지는 드롭다운이 잘려 보이지 않습니다.
   ============================================================ */
.dg-subnav {
	position: relative;
	z-index: 50;
	color: var(--dg-ink);
	background: var(--dg-white);
	border-bottom: 1px solid var(--dg-line);
}

.dg-subnav__bar {
	display: flex;
	height: var(--dg-subnav-h);
}

/* 홈 */
.dg-subnav__home {
	display: flex;
	flex: 0 0 64px;
	align-items: center;
	justify-content: center;
	border-left: 1px solid var(--dg-line);
	border-right: 1px solid var(--dg-line);
}

.dg-subnav__home svg {
	width: 22px;
	height: 22px;
	fill: var(--dg-orange);
	transition: fill var(--dg-ease);
}

.dg-subnav__home:hover svg { fill: var(--dg-orange-dark); }

/* 셀 */
.dg-subnav__cell {
	position: relative;
	flex: 0 0 auto;
	min-width: 200px;
	border-right: 1px solid var(--dg-line);
}

.dg-subnav__cell.is-main { min-width: 190px; }

.dg-subnav__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	height: 100%;
	padding: 0 22px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.02em;
	text-align: left;
	color: var(--dg-ink);
}

.dg-subnav__btn span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dg-subnav__btn svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: var(--dg-gray);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--dg-ease), stroke var(--dg-ease);
}

.dg-subnav__btn[aria-expanded="true"] { color: var(--dg-orange); }

.dg-subnav__btn[aria-expanded="true"] svg {
	stroke: var(--dg-orange);
	transform: rotate(180deg);
}

/* 드롭다운 */
.dg-subnav__drop {
	position: absolute;
	top: 100%;
	left: -1px;
	right: -1px;
	z-index: 90;
	padding: 6px 0;
	background: var(--dg-white);
	border: 1px solid var(--dg-line);
	border-top: 0;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--dg-ease), transform var(--dg-ease), visibility var(--dg-ease);
}

.dg-subnav__btn[aria-expanded="true"] + .dg-subnav__drop {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.dg-subnav__drop a {
	display: block;
	padding: 10px 22px;
	font-size: 15px;
	color: var(--dg-gray);
}

.dg-subnav__drop a:hover {
	color: var(--dg-orange);
	background: #fafafa;
}

.dg-subnav__drop a.is-current {
	font-weight: 700;
	color: var(--dg-orange);
}


/* ============================================================
   8. 본문
   ============================================================ */
.dg-main {
	position: relative;
	z-index: 10;
	min-height: 300px;
	padding: 110px 0 140px;
	color: var(--dg-ink);
	background: var(--dg-white) !important;
}

.dg-main a { color: var(--dg-orange); }
.dg-main a:hover { text-decoration: underline; }

.dg-main > .dg-inner > *:first-child { margin-top: 0; }


/* ============================================================
   9. 푸터 — 상하 80px · 좌우 30px
   ============================================================ */
.dg-footer {
	padding: 80px 30px;
	color: var(--dg-white);
	background: var(--dg-orange);
}

.dg-footer a,
.dg-footer a:hover { color: var(--dg-white); }
.dg-footer a:hover { text-decoration: underline; }

.dg-footer__inner {
	display: flex;
	align-items: flex-start;
	gap: 120px;
	max-width: var(--dg-max);
	margin: 0 auto;
	padding: 0 calc(var(--dg-pad) - 30px);
}

.dg-footer__brand {
	flex: 0 0 auto;
	padding-top: 4px;
}

.dg-footer__brand img { width: auto; height: 40px; }

.dg-footer__info {
	flex: 1 1 auto;
	max-width: 800px;
}

.dg-footer__list {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 10px 18px;
	font-size: 15px;
	line-height: 1.6;
}

.dg-footer__list dt { font-weight: 700; }
.dg-footer__list dd { margin: 0; }

.dg-footer__copy {
	margin: 28px 0 0;
	padding-top: 26px;
	font-size: 15px;
	font-weight: 700;
	border-top: 1px solid rgba(255, 255, 255, .45);
}


/* ============================================================
   10. 우측 고정 버튼

   배경색을 바꾸려면 background 한 줄만 고치세요.
   ============================================================ */
.dg-side {
	position: fixed;
	right: 20px;
	bottom: 40px;
	z-index: 120;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dg-body .dg-side__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
	text-decoration: none;
	color: #ffffff !important;
	background: #333333;
	border-radius: 4px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
	transition: background-color var(--dg-ease);
}

.dg-body .dg-side__btn:hover,
.dg-body .dg-side__btn:focus-visible {
	color: #ffffff !important;
	background: var(--dg-orange);
	text-decoration: none;
}

.dg-body .dg-side__top svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: #ffffff;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* ============================================================
   11. 반응형
   ============================================================ */

/* ---------- 노트북 ---------- */
@media (max-width: 1500px) {
	.dg-gnb__list { gap: 26px; }
	.dg-gnb__list > li > a { font-size: 16px; }
	.dg-footer__inner { gap: 60px; }
}

/* ---------- 태블릿 이하 · 햄버거 전환 ----------
   메뉴 항목이 길어 1200px 부터 전환합니다.
   더 늦게 전환하려면 이 숫자만 낮추세요.                        */
@media (max-width: 1200px) {
	:root {
		--dg-header-h: 72px;
		--dg-hero-h:   300px;
		--dg-pad:      24px;
	}

	.dg-burger { display: block; }

	/* ---- 메뉴 서랍 · 오른쪽에서 슬라이드 ----
	   PC 규칙의 잔재(top·left·opacity·transition)를 모두 초기화합니다 */
	.dg-gnb {
		position: fixed;
		top: var(--dg-adminbar);
		right: 0;
		bottom: 0;
		left: auto;
		z-index: 200;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: min(320px, 84vw);
		padding: calc(var(--dg-header-h) + 16px) 0 30px;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--dg-navy);
		box-shadow: -8px 0 30px rgba(0, 0, 0, .3);
		opacity: 1;
		visibility: visible;
		transform: translateX(100%);
		transition: transform .28s ease;
	}

	.dg-nav-open .dg-gnb { transform: translateX(0); }

	/* 서랍이 열리면 배경 스크롤 잠금 */
	.dg-nav-open { overflow: hidden; }

	.dg-gnb__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.dg-gnb__list > li + li { border-top: 1px solid rgba(255, 255, 255, .12); }

	.dg-gnb__list > li > a {
		padding: 15px 24px;
		font-size: 16px;
		white-space: normal;
	}

	/* 2차 메뉴 — 펼친 상태로 고정 */
	.dg-gnb__list .sub-menu {
		position: static;
		top: auto;
		left: auto;
		min-width: 0;
		margin: 0;
		padding: 0 0 6px;
		background: transparent;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}

	/* PC 의 hover 규칙이 모바일까지 따라오는 것을 막는다.
	   translateX(-50%) 가 남으면 서랍 안에서 메뉴가 옆으로 밀려납니다. */
	.dg-gnb__list > li:hover .sub-menu,
	.dg-gnb__list > li:focus-within .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	/* 서랍에서는 hover 다리가 필요 없습니다 */
	.dg-gnb__list .sub-menu::before { display: none; }

	.dg-gnb__list .sub-menu a {
		padding: 8px 24px 8px 40px;
		font-size: 15px;
		white-space: normal;
		color: rgba(255, 255, 255, .7);
	}

	.dg-gnb__list .sub-menu a:hover {
		color: var(--dg-orange);
		background: transparent;
	}

	/* 검색 — 서랍 안에 배치 */
	.dg-search {
		align-self: flex-start;
		margin: 16px 24px 8px;
	}

	.dg-searchbox {
		position: static;
		margin: 0 24px;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.dg-searchbox input {
		width: 100%;
		min-width: 0;
		box-shadow: none;
	}

	.dg-hero__title { font-size: 34px; }

	/* ---- 서브내비 ----
	   가로 스크롤 대신 남은 폭을 두 칸이 나눠 갖습니다.
	   overflow 를 쓰면 드롭다운이 잘려서 열려도 보이지 않습니다.
	   긴 메뉴명은 말줄임표로 처리됩니다.                        */
	.dg-subnav .dg-inner { padding: 0; }

	.dg-subnav__bar { overflow: visible; }

	.dg-subnav__home {
		flex: 0 0 48px;
		border-left: 0;
	}

	.dg-subnav__cell,
	.dg-subnav__cell.is-main {
		flex: 1 1 0;
		min-width: 0;
	}

	.dg-subnav__btn {
		gap: 8px;
		padding: 0 12px;
		font-size: 13px;
	}

	.dg-main { padding: 55px 0 80px; }

	/* 푸터 세로 정렬 */
	.dg-footer { padding: 55px 24px; }

	.dg-footer__inner {
		flex-direction: column;
		gap: 32px;
		padding: 0;
	}

	.dg-footer__brand img { height: 34px; }

	.dg-footer__list {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.dg-footer__list dt { margin-top: 12px; }
	.dg-footer__list dt:first-child { margin-top: 0; }

	.dg-side { right: 14px; bottom: 20px; }
	.dg-body .dg-side__btn { width: 42px; height: 42px; }
}

/* ---------- 모바일 ---------- */
@media (max-width: 480px) {
	.dg-hero__title { font-size: 27px; }

	.dg-subnav__btn { padding: 0 10px; font-size: 12px; }

	.dg-footer__list,
	.dg-footer__copy { font-size: 14px; }
}

/* ---------- 모션 최소화 설정 존중 ---------- */
@media (prefers-reduced-motion: reduce) {
	.dg-body *,
	.dg-body *::before,
	.dg-body *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}