/* =============================================================
   더한글 서브헤더 (THG Subheader) — 프론트 스타일
   -------------------------------------------------------------
   구조
     1) PHP 가 브레이크포인트별 값을 --thg-*-d / -t / -m 으로 전부 출력
        (상속은 PHP 에서 해결하므로 세 값 모두 구체값입니다)
     2) 이 파일이 미디어쿼리로 --thg-x-* (현재 적용값) 을 갈아끼움
     3) 실제 속성은 --thg-x-* 만 참조
   숫자 변수는 단위 없이 들어오고 여기서 *1px 로 환산합니다.
   ============================================================= */

/* ── 1. 브레이크포인트 스위치 ─────────────────────────────── */
section.thg-sh {
	--thg-vw: 100vw;

	--thg-x-h:         var(--thg-h-d, 400);
	--thg-x-pt:        var(--thg-pt-d, 0);
	--thg-x-ts:        var(--thg-ts-d, 60);
	--thg-x-ss:        var(--thg-ss-d, 18);
	--thg-x-tw:        var(--thg-tw-d, 800);
	--thg-x-sw:        var(--thg-sw-d, 600);
	--thg-x-ls:        var(--thg-ls-d, 2);
	--thg-x-lht:       var(--thg-lht-d, 1.2);
	--thg-x-lhs:       var(--thg-lhs-d, 1.7);
	--thg-x-maxw:      var(--thg-maxw-d, 1240);
	--thg-x-offset:    var(--thg-offset-d, 16);

	--thg-x-fxname:    var(--thg-fxname-d, none);
	--thg-x-fxch:      var(--thg-fxch-d, none);
	--thg-x-fxmask:    var(--thg-fxmask-d, visible);
	--thg-x-fxdur:     var(--thg-fxdur-d, 0.9s);
	--thg-x-fxdelay:   var(--thg-fxdelay-d, 0.1s);
	--thg-x-fxstag:    var(--thg-fxstag-d, 0.22s);
	--thg-x-fxgap:     var(--thg-fxgap-d, 0.035s);

	--thg-x-fximg:     var(--thg-fximg-d, none);
	--thg-x-fximgdur:  var(--thg-fximgdur-d, 12s);
	--thg-x-fximgease: var(--thg-fximgease-d, linear);
	--thg-x-fximgiter: var(--thg-fximgiter-d, 1);
	--thg-x-fximgdir:  var(--thg-fximgdir-d, normal);

	--thg-fx-ease: cubic-bezier(0.22, 0.68, 0.24, 1);
}

@media (max-width: 999px) {
	section.thg-sh {
		--thg-x-h:         var(--thg-h-t, 360);
		--thg-x-pt:        var(--thg-pt-t, 0);
		--thg-x-ts:        var(--thg-ts-t, 44);
		--thg-x-ss:        var(--thg-ss-t, 17);
		--thg-x-tw:        var(--thg-tw-t, 800);
		--thg-x-sw:        var(--thg-sw-t, 600);
		--thg-x-ls:        var(--thg-ls-t, 1);
		--thg-x-lht:       var(--thg-lht-t, 1.25);
		--thg-x-lhs:       var(--thg-lhs-t, 1.7);
		--thg-x-maxw:      var(--thg-maxw-t, 1240);
		--thg-x-offset:    var(--thg-offset-t, 24);

		--thg-x-fxname:    var(--thg-fxname-t, none);
		--thg-x-fxch:      var(--thg-fxch-t, none);
		--thg-x-fxmask:    var(--thg-fxmask-t, visible);
		--thg-x-fxdur:     var(--thg-fxdur-t, 0.9s);
		--thg-x-fxdelay:   var(--thg-fxdelay-t, 0.1s);
		--thg-x-fxstag:    var(--thg-fxstag-t, 0.22s);
		--thg-x-fxgap:     var(--thg-fxgap-t, 0.035s);

		--thg-x-fximg:     var(--thg-fximg-t, none);
		--thg-x-fximgdur:  var(--thg-fximgdur-t, 12s);
		--thg-x-fximgease: var(--thg-fximgease-t, linear);
		--thg-x-fximgiter: var(--thg-fximgiter-t, 1);
		--thg-x-fximgdir:  var(--thg-fximgdir-t, normal);
	}
}

@media (max-width: 690px) {
	section.thg-sh {
		--thg-x-h:         var(--thg-h-m, 320);
		--thg-x-pt:        var(--thg-pt-m, 0);
		--thg-x-ts:        var(--thg-ts-m, 30);
		--thg-x-ss:        var(--thg-ss-m, 15);
		--thg-x-tw:        var(--thg-tw-m, 800);
		--thg-x-sw:        var(--thg-sw-m, 600);
		--thg-x-ls:        var(--thg-ls-m, 0);
		--thg-x-lht:       var(--thg-lht-m, 1.3);
		--thg-x-lhs:       var(--thg-lhs-m, 1.65);
		--thg-x-maxw:      var(--thg-maxw-m, 1240);
		--thg-x-offset:    var(--thg-offset-m, 20);

		--thg-x-fxname:    var(--thg-fxname-m, none);
		--thg-x-fxch:      var(--thg-fxch-m, none);
		--thg-x-fxmask:    var(--thg-fxmask-m, visible);
		--thg-x-fxdur:     var(--thg-fxdur-m, 0.9s);
		--thg-x-fxdelay:   var(--thg-fxdelay-m, 0.1s);
		--thg-x-fxstag:    var(--thg-fxstag-m, 0.22s);
		--thg-x-fxgap:     var(--thg-fxgap-m, 0.035s);

		--thg-x-fximg:     var(--thg-fximg-m, none);
		--thg-x-fximgdur:  var(--thg-fximgdur-m, 12s);
		--thg-x-fximgease: var(--thg-fximgease-m, linear);
		--thg-x-fximgiter: var(--thg-fximgiter-m, 1);
		--thg-x-fximgdir:  var(--thg-fximgdir-m, normal);
	}
}

/* ── 2. 뼈대 ──────────────────────────────────────────────── */
section.thg-sh {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	padding: 0;
	padding-top: calc(var(--thg-x-pt) * 1px);

	/* 지정 높이는 "최소" 값. 글이 길어지면 잘리지 않고 늘어납니다. */
	min-height: calc(var(--thg-x-h) * 1px);

	overflow: hidden;
	isolation: isolate;
	background-color: #eceff2;
	box-sizing: border-box;
}

section.thg-sh,
section.thg-sh *,
section.thg-sh *::before,
section.thg-sh *::after {
	box-sizing: border-box;
}

/* 행이 전체 너비가 아닐 때 화면 끝까지 넓히기 */
.thg-sh--full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
body:has(.thg-sh--full) { overflow-x: clip; }

/* ── 3. 배경 ──────────────────────────────────────────────── */
/* 이미지 이펙트와 hover 변형이 서로 간섭하지 않도록 한 겹 감쌉니다. */
.thg-sh__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	overflow: hidden;
	pointer-events: none;
}

/* Salient 의 img{height:auto} / .row .col img{width:auto} 방어 */
section.thg-sh .thg-sh__img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: auto !important;
	bottom: auto !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	object-fit: cover !important;
	object-position: var(--thg-pos, center center) !important;
	display: block !important;
	z-index: 0;
	pointer-events: none;
}

.thg-sh__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	background: var(--thg-ov-color, #000);
	opacity: var(--thg-ov, 0);
	pointer-events: none;
}

/* ── 4. 콘텐츠 그리드 ─────────────────────────────────────── */
.thg-sh__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	width: 100%;
	max-width: calc(var(--thg-x-maxw) * 1px);
	margin: 0 auto;
	padding: 24px calc(var(--thg-x-offset) * 1px);
}

.thg-sh__link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	width: 100%;
	color: inherit;
	text-decoration: none !important;
	border: 0 !important;
}

.thg-sh__content { max-width: 100%; }

/* 세로 정렬 — 데스크톱 */
.thg-sh--v-top .thg-sh__inner    { justify-content: flex-start; padding-top: 48px; }
.thg-sh--v-middle .thg-sh__inner { justify-content: center; }
.thg-sh--v-bottom .thg-sh__inner { justify-content: flex-end; padding-bottom: 48px; }

/* 가로 정렬 — 데스크톱 */
.thg-sh--a-left .thg-sh__inner   { align-items: flex-start; text-align: left; }
.thg-sh--a-center .thg-sh__inner { align-items: center;     text-align: center; }
.thg-sh--a-right .thg-sh__inner  { align-items: flex-end;   text-align: right; }

/* 정렬 — 태블릿 */
@media (max-width: 999px) {
	.thg-sh--vt-top .thg-sh__inner    { justify-content: flex-start; padding-top: 36px; padding-bottom: 24px; }
	.thg-sh--vt-middle .thg-sh__inner { justify-content: center; padding-top: 24px; padding-bottom: 24px; }
	.thg-sh--vt-bottom .thg-sh__inner { justify-content: flex-end; padding-top: 24px; padding-bottom: 36px; }

	.thg-sh--at-left .thg-sh__inner   { align-items: flex-start; text-align: left; }
	.thg-sh--at-center .thg-sh__inner { align-items: center;     text-align: center; }
	.thg-sh--at-right .thg-sh__inner  { align-items: flex-end;   text-align: right; }
}

/* 정렬 — 모바일 */
@media (max-width: 690px) {
	.thg-sh--vm-top .thg-sh__inner    { justify-content: flex-start; padding-top: 28px; padding-bottom: 20px; }
	.thg-sh--vm-middle .thg-sh__inner { justify-content: center; padding-top: 20px; padding-bottom: 20px; }
	.thg-sh--vm-bottom .thg-sh__inner { justify-content: flex-end; padding-top: 20px; padding-bottom: 28px; }

	.thg-sh--am-left .thg-sh__inner   { align-items: flex-start; text-align: left; }
	.thg-sh--am-center .thg-sh__inner { align-items: center;     text-align: center; }
	.thg-sh--am-right .thg-sh__inner  { align-items: flex-end;   text-align: right; }
}

/* ── 5. 글자 ──────────────────────────────────────────────── */
section.thg-sh .thg-sh__title {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--thg-font, inherit);
	font-size: calc(var(--thg-x-ts) * 1px);
	font-weight: var(--thg-x-tw);
	line-height: var(--thg-x-lht);
	letter-spacing: calc(var(--thg-x-ls) * 1px);
	color: var(--thg-color, #2d2d2d);
	word-break: keep-all;
	overflow-wrap: break-word;
	text-transform: none;
	overflow: var(--thg-x-fxmask);
}

section.thg-sh .thg-sh__sub {
	margin: 16px 0 0 !important;
	padding: 0 !important;
	font-family: var(--thg-font, inherit);
	font-size: calc(var(--thg-x-ss) * 1px);
	font-weight: var(--thg-x-sw);
	line-height: var(--thg-x-lhs);
	letter-spacing: 0;
	color: var(--thg-color, #2d2d2d);
	word-break: keep-all;
	overflow-wrap: break-word;
	max-width: 62ch;
	overflow: var(--thg-x-fxmask);
}

@media (max-width: 690px) {
	section.thg-sh .thg-sh__sub { margin-top: 12px !important; }
}

.thg-sh--a-center .thg-sh__sub { margin-left: auto !important; margin-right: auto !important; }
.thg-sh--a-right .thg-sh__sub  { margin-left: auto !important; }
@media (max-width: 999px) {
	.thg-sh--at-center .thg-sh__sub { margin-left: auto !important; margin-right: auto !important; }
	.thg-sh--at-right .thg-sh__sub  { margin-left: auto !important; }
	.thg-sh--at-left .thg-sh__sub   { margin-left: 0 !important; margin-right: 0 !important; }
}
@media (max-width: 690px) {
	.thg-sh--am-center .thg-sh__sub { margin-left: auto !important; margin-right: auto !important; }
	.thg-sh--am-right .thg-sh__sub  { margin-left: auto !important; }
	.thg-sh--am-left .thg-sh__sub   { margin-left: 0 !important; margin-right: 0 !important; }
}

/* =============================================================
   6. 이펙트 엔진 (JS 0줄 — 전부 CSS 애니메이션)
   ============================================================= */

/* 글자 이펙트 키프레임 */
@keyframes thg-fx-fade  { from { opacity: 0; }                                      to { opacity: 1; } }
@keyframes thg-fx-up    { from { opacity: 0; transform: translate3d(0, 30px, 0); }  to { opacity: 1; transform: none; } }
@keyframes thg-fx-down  { from { opacity: 0; transform: translate3d(0, -30px, 0); } to { opacity: 1; transform: none; } }
@keyframes thg-fx-left  { from { opacity: 0; transform: translate3d(-44px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes thg-fx-right { from { opacity: 0; transform: translate3d(44px, 0, 0); }  to { opacity: 1; transform: none; } }
@keyframes thg-fx-zoom  { from { opacity: 0; transform: scale(0.84); }              to { opacity: 1; transform: none; } }
@keyframes thg-fx-pop   { from { opacity: 0; transform: scale(1.18); }              to { opacity: 1; transform: none; } }
@keyframes thg-fx-blur  { from { opacity: 0; filter: blur(16px); }                  to { opacity: 1; filter: blur(0); } }
@keyframes thg-fx-mask  { from { transform: translate3d(0, 108%, 0); }              to { transform: none; } }
@keyframes thg-fx-tilt  { from { opacity: 0; transform: translate3d(0, 34px, 0) rotate(-6deg); } to { opacity: 1; transform: none; } }

.thg-sh__anim { display: block; }

/* animation 단축 속성은 이름이 none 일 때 fill-mode 로 잘못 읽히므로 개별 속성으로 씁니다. */
section.thg-sh .thg-sh__title > .thg-sh__anim,
section.thg-sh .thg-sh__sub > .thg-sh__anim {
	animation-name: var(--thg-x-fxname);
	animation-duration: var(--thg-x-fxdur);
	animation-timing-function: var(--thg-fx-ease);
	animation-fill-mode: both;
}
section.thg-sh .thg-sh__title > .thg-sh__anim {
	animation-delay: var(--thg-x-fxdelay);
}
section.thg-sh .thg-sh__sub > .thg-sh__anim {
	animation-delay: calc(var(--thg-x-fxdelay) + var(--thg-x-fxstag));
}

/* 글자 / 단어 단위 */
.thg-sh__ch,
.thg-sh__wd { display: inline-block; white-space: pre-wrap; }

section.thg-sh .thg-sh__ch,
section.thg-sh .thg-sh__wd {
	animation-name: var(--thg-x-fxch);
	animation-duration: var(--thg-x-fxdur);
	animation-timing-function: var(--thg-fx-ease);
	animation-delay: calc(var(--thg-x-fxdelay) + var(--i, 0) * var(--thg-x-fxgap));
	animation-fill-mode: both;
}

/* 사진 이펙트 키프레임 */
@keyframes thg-fx-zoomin  { from { transform: scale(1); }                     to { transform: scale(1.14); } }
@keyframes thg-fx-zoomout { from { transform: scale(1.14); }                  to { transform: scale(1); } }
@keyframes thg-fx-panr    { from { transform: scale(1.16) translateX(-3.5%); } to { transform: scale(1.16) translateX(3.5%); } }
@keyframes thg-fx-panl    { from { transform: scale(1.16) translateX(3.5%); }  to { transform: scale(1.16) translateX(-3.5%); } }
@keyframes thg-fx-pany    { from { transform: scale(1.16) translateY(-3.5%); } to { transform: scale(1.16) translateY(3.5%); } }
@keyframes thg-fx-imgfade { from { opacity: 0; }                              to { opacity: 1; } }
@keyframes thg-fx-imgblur { from { opacity: 0; filter: blur(20px); transform: scale(1.08); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes thg-fx-gray    { from { filter: grayscale(1) contrast(1.05); }     to { filter: grayscale(0) contrast(1); } }

section.thg-sh .thg-sh__img {
	animation-name: var(--thg-x-fximg);
	animation-duration: var(--thg-x-fximgdur);
	animation-timing-function: var(--thg-x-fximgease);
	animation-delay: 0s;
	animation-iteration-count: var(--thg-x-fximgiter);
	animation-direction: var(--thg-x-fximgdir);
	animation-fill-mode: both;
}

/* ── 7. 마우스 올렸을 때 (전역 · 터치 기기엔 hover 없음) ──── */
section.thg-sh[data-fx-hover]:not([data-fx-hover="none"]) .thg-sh__media {
	transition: transform 0.7s cubic-bezier(0.22, 0.68, 0.24, 1), filter 0.45s ease;
}
section.thg-sh[data-fx-hover="zoom"]:hover   .thg-sh__media { transform: scale(1.06); }
section.thg-sh[data-fx-hover="bright"]:hover .thg-sh__media { filter: brightness(1.12); }
section.thg-sh[data-fx-hover="dark"]:hover   .thg-sh__media { filter: brightness(0.82); }
section.thg-sh[data-fx-hover="gray"] .thg-sh__media         { filter: grayscale(1); }
section.thg-sh[data-fx-hover="gray"]:hover .thg-sh__media   { filter: grayscale(0); }

/* 관리자 미리보기 전용 — 마우스 없이 hover 상태를 재현 */
section.thg-sh[data-fx-hover="zoom"].is-fxhover   .thg-sh__media { transform: scale(1.06); }
section.thg-sh[data-fx-hover="bright"].is-fxhover .thg-sh__media { filter: brightness(1.12); }
section.thg-sh[data-fx-hover="dark"].is-fxhover   .thg-sh__media { filter: brightness(0.82); }
section.thg-sh[data-fx-hover="gray"].is-fxhover   .thg-sh__media { filter: grayscale(0); }

/* ── 8. 접근성 : 모션 최소화 존중 ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	section.thg-sh .thg-sh__anim,
	section.thg-sh .thg-sh__ch,
	section.thg-sh .thg-sh__wd,
	section.thg-sh .thg-sh__img,
	section.thg-sh .thg-sh__media {
		animation: none !important;
		transition: none !important;
		transform: none !important;
		filter: none !important;
		opacity: 1 !important;
	}
}

/* ── 9. 페이지빌더 래퍼 여백 제거 (:has 지원 브라우저) ────── */
.wpb_text_column:has(> .wpb_wrapper > section.thg-sh),
.wpb_raw_code:has(> .wpb_wrapper > section.thg-sh) {
	margin-bottom: 0 !important;
}
.wpb_wrapper:has(> section.thg-sh) > section.thg-sh { margin-bottom: 0 !important; }

/* ── 10. 편집자 전용 오류 안내 ────────────────────────────── */
.thg-sh-error {
	padding: 14px 18px;
	border: 1px dashed #d63638;
	border-radius: 4px;
	background: #fcf0f1;
	color: #8a1f21;
	font-size: 14px;
	line-height: 1.6;
}