@charset 'utf-8';

:root {
	--baseFont: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Malgun Gothic', sans-serif;
	--engFont:  'Manrope', 'Pretendard', sans-serif;

	--color-primary: #DF540E;
	--color-brown: #655F5A;
	--color-white: #ffffff;
	--color-gray: #888888;
	--gradient-brand: radial-gradient(ellipse 102.44% 171.47% at 32.19% -19.07%, #EDE67B 0%, #DF540E 33%, #E9C22B 100%);

	--header-height: 130px;
}

/* color-scheme/forced-color-adjust로도 안 막히는 구형 다크 렌더링(삼성 인터넷 등) 대응:
   prefers-color-scheme:dark 블록이 실제로 존재해야 "이 사이트는 다크 모드를 이미 처리했다"고 판단해 자체 강제 리컬러링을 건너뛰는 브라우저가 있어,
   값은 라이트와 동일하게 그대로 재선언해서 그 판단 신호만 준다 */
@media (prefers-color-scheme: dark) {
	:root {
		--color-primary: #DF540E;
		--color-brown: #655F5A;
		--color-white: #ffffff;
		--color-gray: #888888;
		--gradient-brand: radial-gradient(ellipse 102.44% 171.47% at 32.19% -19.07%, #EDE67B 0%, #DF540E 33%, #E9C22B 100%);
	}
}

/* ===== 이미지 전역 선언 ===== */
img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.header__logo img,
.allmenu__logo img,
.footer__logo img,
.footer__social-link img,
.news__thumb--default img {
	width: auto;
	height: auto;
	object-fit: contain;
}

/* 모바일에서 폭 좁아질 때 특정 요소가 100vw를 넘기면 페이지 전체가 가로 스크롤되며 우측에 여백이 생김 → 전역 차단 */
/* #wrap(일반 div)에 걸면 overflow-x:hidden이 overflow-y를 강제로 auto로 바꿔 스크롤 컨테이너가 되어버려 하위 position:sticky가 전부 깨짐 → 루트(html)에 걸어 뷰포트로 전파시킴 */
html { overflow-x: hidden; }

/* ===== header ===== */
.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--header-height);
	z-index: 100;
}
/* 서브페이지는 스크롤에 따라붙는 고정(fixed) 헤더가 아니라 문서 흐름 안에 그냥 놓이는 헤더 */
.is-sub .header { position: static; }
.header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1760px;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	padding-top: 20px;
}
.header__logo { position: relative; width: 189px; height: 64px; overflow: hidden; }
.header__logo img.header__logo-img {
	position: absolute; /* stack: 라이트/다크 테마 로고 크로스페이드 */
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity .3s ease;
}
.header__logo-img--dark { opacity: 0; }
body:is(.fp-viewing-sec2, .fp-viewing-sec3, .fp-viewing-sec5, .fp-viewing-sec6, .is-sub) .header .header__logo-img--white { opacity: 0; }
body:is(.fp-viewing-sec2, .fp-viewing-sec3, .fp-viewing-sec5, .fp-viewing-sec6, .is-sub) .header .header__logo-img--dark { opacity: 1; }

.header__right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	height: 100%;
}

.header__top {
	display: flex;
	align-items: center;
	gap: 24px;
	height: 40px;
}

.lang { display: flex; align-items: center; gap: 10px; }
.lang__item { color: var(--color-white) !important; font-size: 16px; font-family: var(--engFont); font-weight: 800; letter-spacing: -0.32px; opacity: .5; transition: color .3s ease, opacity .3s ease; }
.lang__item--on { opacity: 1; }
.lang__bar { width: 1px; height: 10px; background: var(--color-white); opacity: .5; transition: background .3s ease, opacity .3s ease; }

.cta {
	display: flex;
	align-items: center;
	height: 40px;
	padding: 0 20px;
	background: rgba(255, 255, 255, .1);
	border-radius: 100px;
	outline: 1px solid rgba(255, 255, 255, .3);
	outline-offset: -1px;
	transition: outline-color .3s ease;
}
.cta__item { display: flex;  gap: 5px; padding: 0 10px; }
.cta__item:first-child { padding-left: 0; }
.cta__item:last-child { padding-right: 0; }
.cta__text { color: var(--color-white); font-size: 14px; font-family: var(--baseFont); font-weight: 700; letter-spacing: -0.28px; transition: color .3s ease; }
.cta__arrow { display: inline-flex; align-items: center; justify-content: center; width: 8px; height: 8px; color: var(--color-white); transition: color .3s ease; }
.cta__arrow svg { width: 100%; height: 100%; }
.cta__bar { width: 1px; height: 10px; background: var(--color-white); opacity: .5; transition: background .3s ease, opacity .3s ease; }

/* ----- fp-viewing-secN: fullPage.js가 해당 섹션을 보고 있을 때 body에 자동으로 붙이는 클래스(anchor 기반).
   sec2·sec5·sec6은 배경이 밝아 헤더를 어두운 글자색으로 전환해야 하는 섹션이라 함께 묶음.
   is-sub(서브페이지)도 배경이 항상 밝아서 동일하게 묶어 헤더를 다크(어두운 글자) 모드로 고정 ----- */
body:is(.fp-viewing-sec2, .fp-viewing-sec5, .fp-viewing-sec6, .is-sub) .header .lang__item { color: #cccccc !important; opacity: 1; }
body:is(.fp-viewing-sec2, .fp-viewing-sec5, .fp-viewing-sec6, .is-sub) .header .lang__item--on { color: var(--color-primary) !important; }
body:is(.fp-viewing-sec2, .fp-viewing-sec5, .fp-viewing-sec6, .is-sub) .header .lang__bar { background: #e5e5e5; opacity: 1; }

body:is(.fp-viewing-sec2, .fp-viewing-sec5, .fp-viewing-sec6, .is-sub) .header .cta { outline-color: #e5e5e5; }
body:is(.fp-viewing-sec2, .fp-viewing-sec5, .fp-viewing-sec6, .is-sub) .header .cta__text { color: var(--color-gray); }
body:is(.fp-viewing-sec2, .fp-viewing-sec5, .fp-viewing-sec6, .is-sub) .header .cta__arrow { color: var(--color-gray); }
body:is(.fp-viewing-sec2, .fp-viewing-sec5, .fp-viewing-sec6, .is-sub) .header .cta__bar { background: #e5e5e5; opacity: 1; }

.header__bottom {
	display: flex;
	align-items: center;
	gap: 50px;
	height: 70px;
}

.gnb__list { display: flex; align-items: center; height: 100%; }
.gnb__link {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 25px;
	color: var(--color-white) !important;
	font-size: 18px;
	font-family: var(--engFont);
	font-weight: 700;
	letter-spacing: -0.36px;
	text-transform: uppercase;
	transition: color .3s ease;
}
body:is(.fp-viewing-sec2, .fp-viewing-sec5, .fp-viewing-sec6, .is-sub) .header .gnb__link { color: #111111 !important; }
.gnb__item:first-child .gnb__link { padding-left: 0; }
.gnb__item:last-child .gnb__link { padding-right: 0; }

.gnb__item { position: relative; height: 70px; }
.gnb__item:hover .gnb__link,
.gnb__item:focus-within .gnb__link { color: var(--color-primary) !important; }

/* 1depth 텍스트가 70px 박스 안에서 중앙정렬돼 있어 top:100%로 딱 붙여도
   텍스트 밑으로 자연스럽게 여백이 생긴다. 간격 구간이 따로 없어야
   마우스가 1depth→2depth로 내려가는 동안 호버가 안 끊긴다. */
.gnb__dropdown {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	position: absolute; /* popup */
	left: 25px;
	top: 100%;
	gap: 10px;
	padding: 20px;
	background: rgba(255, 255, 255, .95);
	box-shadow: 0 0 20px rgba(0, 0, 0, .15);
	border-radius: 20px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transform-origin: top;
	transform: scaleY(.85);
	transition: opacity .4s ease, transform .2s ease;
}
.gnb__item:first-child .gnb__dropdown { left: 0; }
.gnb__item:hover .gnb__dropdown,
.gnb__item:focus-within .gnb__dropdown {
	opacity: 1;
	pointer-events: auto;
	transform: scaleY(1);
}

.gnb__dropdown-link {
	color: var(--color-gray) !important;
	font-size: 17px;
	font-family: var(--baseFont) !important;
	font-weight: 500;
	letter-spacing: -0.34px;
	line-height: 1.3;
}
.gnb__dropdown-link--en { font-family: var(--engFont); }
.gnb__dropdown-link:hover,
.gnb__dropdown-link:focus {
	color: var(--color-primary) !important;
	text-shadow: 0 4px 30px rgba(0, 0, 0, .25);
}

.header__ham {
	width: 30px;
	height: 20px;
	background: none;
	border: 0;
	padding: 0;
	color: var(--color-white);
	cursor: pointer;
	transition: color .3s ease;
}
.header__ham svg { width: 100%; height: 100%; }
body:is(.fp-viewing-sec2, .fp-viewing-sec5, .fp-viewing-sec6, .is-sub) .header .header__ham { color: #111111; }

/* GNB가 햄버거로 전환되는 구간(@docs/05-responsive)에서만 노출되는 언어전환 복제본 */
.header__lang-mobile { display: none; }

/* ===== 전체메뉴(allmenu) ===== */
body.is-allmenu-open { overflow: hidden; }

.allmenu-overlay {
	position: fixed; /* overlay */
	inset: 0;
	z-index: 200;
	opacity: 0;
	transition: opacity .25s ease;
}
.allmenu-overlay.is-open { opacity: 1; }

.allmenu {
	width: 100%;
	height: 100vh;
	box-sizing: border-box;
	background: var(--color-white);
	overflow-y: auto;
	padding: 43px 80px 60px;
	transform: translateY(-16px);
	transition: transform .25s ease;
}
.allmenu-overlay.is-open .allmenu { transform: translateY(0); }

.allmenu__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
	margin-bottom: 60px;
}
.allmenu__logo { width: 189px; height: 64px; }
.allmenu__close {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--gradient-brand);
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.allmenu__close svg { width: 16px; height: 16px; }

.allmenu__grid {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 20px;
}

.allmenu__card {
	width: 420px;
	height: 335px;
	box-sizing: border-box;
	padding: 40px;
	background: #f8f8f8;
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	transition: background .2s ease;
}
.allmenu__card:hover { background: var(--gradient-brand); }

.allmenu__card-title {
	display: block;
	width: 100%;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	text-align: left;
	font: inherit;
	cursor: pointer;
	color: #111111;
	font-size: 32px;
	font-family: var(--engFont);
	font-weight: 800;
	letter-spacing: -0.64px;
	transition: color .2s ease;
}
.allmenu__card:hover .allmenu__card-title { color: var(--color-white); }

.allmenu__card-list { display: flex; flex-direction: column; gap: 10px; }
.allmenu__card-list a {
	color: #aaaaaa !important;
	font-size: 18px;
	font-family: var(--baseFont);
	font-weight: 600;
	letter-spacing: -0.36px;
	transition: color .2s ease;
}
.allmenu__card:hover .allmenu__card-list a { color: rgba(255, 255, 255, .6) !important; }
.allmenu__card:hover .allmenu__card-list a:hover { color: var(--color-white) !important; }

/* NEWS·CONTACT 카드만 항목이 2개뿐이라 폰트가 더 큼(원본 그대로) */
.allmenu__card-list--lg a { font-size: 20px; font-weight: 500; letter-spacing: -0.40px; }

.allmenu__card-sub { display: block; color: #aaaaaa; font-size: 20px; font-family: var(--baseFont); font-weight: 500; letter-spacing: -0.40px; transition: color .2s ease; }
.allmenu__card:hover .allmenu__card-sub { color: rgba(255, 255, 255, .6); }
.allmenu__card-sub-indent { padding-left: 1.2em; }

.allmenu__cta {
	width: 420px;
	height: 335px;
	box-sizing: border-box;
	padding: 0 40px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 20px;
}
.allmenu__cta-item {
	display: flex;
	align-items: center;
	gap: 15px;
	color: #111111 !important;
	font-size: 28px;
	font-family: var(--baseFont);
	font-weight: 600;
	letter-spacing: -0.56px;
}
.allmenu__cta-item--en { font-family: var(--engFont); }
.allmenu__cta-item--title { font-size: 40px; letter-spacing: -0.8px; }
.allmenu__cta-arrow { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; }
.allmenu__cta-arrow svg { width: 100%; height: 100%; }

/* ===== footer 상단 CTA 배너 ===== */
.outro { width: 100%; box-sizing: border-box; }
.outro__inner {
	position: relative;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	overflow: hidden;
}
.outro__bg { position: absolute; /* stack: 배너 배경 이미지 */ inset: 0; width: 100%; height: 100%; object-fit: cover; }
.outro__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	box-sizing: border-box;
	padding: 100px 20px;
	text-align: center;
}
.outro__title {
	color: #fff;
	font-size: 40px;
	font-family: var(--baseFont);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.8px;
}
.outro__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	box-sizing: border-box;
	padding: 0 32px;
	border: 1px solid #dddddd;
	border-radius: 999px;
	background: var(--color-white);
	color: #111111;
	font-size: 16px;
	font-family: var(--baseFont);
	font-weight: 600;
	letter-spacing: -0.32px;
	transition: background .3s ease, border-color .3s ease;
}
.outro__btn:hover { background: #f8f8f8; border-color: #bbbbbb; }

/* ===== footer ===== */
.footer { width: 100%; background: var(--color-white); border-top: 1px solid #e5e5e5; }
.footer__inner {
	max-width: 1760px;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 80px 0px 60px;
}

.footer__row { display: flex; }

.footer__row--top { align-items: flex-start; justify-content: space-between; }
.footer__logo { display: flex; width: 189px; height: 64px; }
.footer__menu a {
	color: #111111 !important;
	font-size: 18px;
	font-family: var(--baseFont);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.036em;
}

.footer__row--mid { align-items: flex-start; justify-content: space-between; margin-top: 60px; }
.footer__family { position: relative; } /* 드롭다운 팝업 기준점 */

.footer__family-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 220px;
	box-sizing: border-box;
	gap: 20px;
	padding: 20px 30px;
	background: #f8f8f8;
	border: 0;
	border-radius: 100px;
	cursor: pointer;
	transition: border-radius .2s ease;
}
.footer__family.is-open .footer__family-toggle { border-radius: 20px 20px 0 0; }
.footer__family-text {
	color: #aaaaaa;
	font-size: 16px;
	font-family: var(--engFont);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.032em;
}
.footer__family-plus { position: relative; width: 10px; height: 10px; flex: none; }
.footer__family-plus::before,
.footer__family-plus::after {
	content: '';
	position: absolute; /* decoration */
	background: #aaaaaa;
}
.footer__family-plus::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.footer__family-plus::after {
	left: 50%;
	top: 0;
	width: 2px;
	height: 100%;
	transform: translateX(-50%);
	transition: opacity .2s ease;
}
.footer__family.is-open .footer__family-plus::after { opacity: 0; }

.footer__family-list {
	display: flex;
	flex-direction: column;
	gap: 15px;
	position: absolute; /* popup */
	left: 0;
	top: 80%;
	z-index: 10;
	width: 220px;
	box-sizing: border-box;
	margin-top: 10px;
	padding: 0 30px 20px;
	background: #f8f8f8;
	border-radius: 0 0 20px 20px;
	/* box-shadow: 0 10px 30px rgba(0, 0, 0, .1); */
	opacity: 0;
	pointer-events: none;
	transform-origin: top;
	transform: scaleY(.9);
	transition: opacity .2s ease, transform .2s ease;
}
.footer__family.is-open .footer__family-list {
	opacity: 1;
	pointer-events: auto;
	transform: scaleY(1);
	transition: opacity .2s ease .2s, transform .2s ease .2s;
}
.footer__family-list a {
	color: #aaaaaa !important;
	font-size: 16px;
	font-family: var(--baseFont);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.032em;
}
.footer__family-list a:hover { color: var(--color-primary) !important; }

.footer__social { display: flex; align-items: center; gap: 20px; }
.footer__social-link { width: 50px; height: 50px; }

.footer__row--bottom { align-items: flex-end; justify-content: space-between; margin-top: 25px; }
.footer__info { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px; max-width: 565px; }
.footer__info-item { display: flex; align-items: center; gap: 10px; }
.footer__info-item strong {
	flex: none;
	white-space: nowrap;
	color: #111111;
	font-size: 18px;
	font-family: var(--baseFont);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.036em;
	align-self: flex-start;
}
.footer__info-item span {
	color: #111111;
	font-size: 18px;
	font-family: var(--baseFont);
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: -0.036em;
}
.footer__info-num { font-family: var(--engFont); }
.footer__copy {
	width: 100%;
	color: #111111;
	font-size: 18px;
	font-family: var(--engFont);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.036em;
}

.footer__top {
	width: 120px;
	height: 120px;
	flex: none;
	box-sizing: border-box;
	background: var(--gradient-brand);
	border: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.footer__top svg { width: 30px; height: 33px; }
.footer__top:hover svg { animation: footerTopArrow 0.8s ease-in-out infinite; }
@keyframes footerTopArrow {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}


/* privacy */
.privacy { color:#666; width: 100%; overflow: hidden; box-sizing:border-box; padding:20px; font-size:15px;	line-height: 140%; word-break:break-all; }
.privacy h2 { font-size:18px; font-weight:bold; color:#000; text-align: left; margin:50px 0 30px; }
.privacy h2:first-child { margin-top: 0; }
.privacy > p { margin:15px 0; }
.privacy > p+dl { margin-top: 30px; }
.privacy > dl { padding-bottom:20px;}
.privacy > dl > dt{ font-size:15px;color:#3680b9;font-weight:700;padding-bottom:5px;}
.privacy > dl > dd{ padding-bottom:10px;text-align:justify; font-size:15px; line-height:140%;}
.privacy > dl > dd ul{ padding:10px; }
.privacy > dl > dd ul li{ line-height:120%; margin-top: 10px; }
.privacy > dl > dd ul li:first-child { margin-top: 0; }
.privacy > dl > dd ul li p { margin:0 10px 5px; line-height: 140%; }
.sTxt h3 { font-size:16px; color: #333; font-weight: 700; margin: 20px 0 10px; }
.sTxt p { margin-top: 10px; }
.sTxt dt { margin-top: 10px; }
.sTxt dd { margin:0 8px; }