.history-popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 199;
	background: #000;
}

body.history-page .anniversary-header {
	z-index: 202;
	transition: background .3s ease, backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease, border-color .3s ease;
}

body.history-page .anniversary-nav__dropdown-bg {
	z-index: 201;
}

body.history-page .menu-dimmed {
	z-index: 200;
}

body.history-page .mega-menu.active {
	z-index: 203;
}

.history-container {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

.history-section {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	visibility: hidden;
	z-index: 1;
}

.history-section.active {
	visibility: visible;
	z-index: 10;
}

.history-bg {
	transform: scale(1.2);
	transition: transform 1.8s cubic-bezier(0.35, 0.01, 0.25, 1), opacity 0.6s cubic-bezier(0.35, 0.01, 0.25, 1);
}

.history-bg__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.history-section.active .history-bg.zoom-out {
	transform: scale(1.0);
}


.history-page .history-dashed-ring {
	animation: none !important;
}

/* 서브페이지 hero-overlay: 링 도넛 영역에 마스크 구멍 (딤드 제거) */
.history-page .hero-overlay {
	-webkit-mask-image:
		radial-gradient(circle 285px at center, black calc(100% - 0.5px), transparent 100%),
		radial-gradient(circle 393px at center, transparent calc(100% - 0.5px), black 100%);
	-webkit-mask-composite: source-over;
	mask-image:
		radial-gradient(circle 285px at center, black calc(100% - 0.5px), transparent 100%),
		radial-gradient(circle 393px at center, transparent calc(100% - 0.5px), black 100%);
	mask-composite: add;
}


/* Heritage content — 휠 중앙 (366x366 원 안) */
.history-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	text-align: center;
	padding: 0 20px;
	height: clamp(315px, var(--wh), 786px);
}

.history-content__info {
	margin-bottom: clamp(38px, min(5vw, 8.89vh), 96px);
}

.history-content__tag {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: 'Pretendard', sans-serif;
	font-size: clamp(16px, min(0.94vw, 1.67vh), 18px);
	font-weight: 600;
	line-height: 140%;
	letter-spacing: -0.36px;
	text-align: center;
	color: #ffffff;
	margin-bottom: clamp(8px, min(0.63vw, 1.12vh), 12px);
}

.history-content__tag svg {
	flex-shrink: 0;
}

.history-content__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: clamp(48px, min(3.02vw, 5.37vh), 58px);
	padding: 0 24px;
	cursor: none;
	border: 2px solid rgba(221, 221, 221, 0.6);
	border-radius: 999px;
	margin-bottom: clamp(66px, min(8.65vw, 15.38vh), 166px);
	font-family: 'Pretendard', sans-serif;
	font-size: clamp(14px, min(0.94vw, 1.67vh), 18px);
	font-weight: 600;
	line-height: 140%;
	color: #ffffff;
	text-decoration: none;
	letter-spacing: -0.02em;
	z-index: 51;
	background: transparent;
	transition: background 400ms cubic-bezier(0.42, 0, 0.34, 0.99),
				color 400ms cubic-bezier(0.42, 0, 0.34, 0.99),
				border-color 400ms cubic-bezier(0.42, 0, 0.34, 0.99);
}

@media (hover: hover) {
	.history-content__link:hover {
		background: #ffffff;
		color: #FF4E1C;
		border-color: #ffffff;
	}

	.history-content__link:hover .history-content__link-arrow--default {
		transform: translateX(100%);
		transition: transform 200ms cubic-bezier(0.42, 0, 0.34, 0.99);
	}

	.history-content__link:hover .history-content__link-arrow--hover {
		transform: translateX(0);
		transition: transform 200ms cubic-bezier(0.42, 0, 0.34, 0.99) 80ms;
	}
}

.history-content__link-arrows {
	position: relative;
	width: 14px;
	height: 12px;
	overflow: hidden;
	flex-shrink: 0;
}

.history-content__link-arrow {
	position: absolute;
	top: 0;
	left: 0;
}

.history-content__link-arrow--default {
	transform: translateX(0);
	transition: transform 250ms cubic-bezier(0.42, 0, 0.34, 0.99);
}

.history-content__link-arrow--hover {
	transform: translateX(-100%);
	transition: transform 250ms cubic-bezier(0.42, 0, 0.34, 0.99);
}

.history-content__title {
	font-family: 'Pretendard', sans-serif;
	font-size: clamp(22px, min(2.74vw, 4.87vh), 40px);
	font-weight: 600;
	line-height: 130%;
	letter-spacing: -0.02em;
	text-align: center;
	margin-bottom: clamp(8px, min(1.04vw, 1.85vh), 20px);
	color: #ffffff;
}

.history-content__description {
	font-family: 'Pretendard', sans-serif;
	font-size: clamp(14px, min(0.94vw, 1.67vh), 18px);
	font-weight: 400;
	line-height: 140%;
	letter-spacing: -0.02em;
	text-align: center;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: clamp(20px, min(2.6vw, 4.62vh), 50px);
}

.history-content__divider {
	width: clamp(172px, min(22.40vw, 39.82vh), 430px);
	height: 1px;
	background: rgba(221, 221, 221, 0.4);
	margin: 0 auto;
}

.history-scroll-indicator {
	position: fixed;
	bottom: 34px;
	left: 0;
	right: 0;
	text-align: center;
	color: #fff;
	font-family: 'Google Sans Flex', sans-serif;
	font-size: 18px;
	font-weight: 300;
	line-height: 140%;
	pointer-events: none;
	z-index: 30;
}

.history-arc {
	opacity: 0;
	transition: none;
}

.history-arc.active {
	opacity: 1;
}

/* ── 초기진입 애니메이션 (entry-*) ── */
.entry-fade {
	opacity: 0;
}

.entry-fade.entry-active {
	opacity: 1;
	transition: opacity 0.8s cubic-bezier(0.42, 0, 0.39, 0.99);
}

.entry-slide {
	opacity: 0;
	transition: opacity 0.8s cubic-bezier(0.42, 0, 0.39, 0.99),
				transform 0.8s cubic-bezier(0.42, 0, 0.39, 0.99);
}

.entry-slide.year-text-left {
	transform: translateX(60px);
}

.entry-slide.year-text-right {
	transform: translateX(-60px);
}

.entry-slide.entry-active {
	opacity: 1;
	transform: translateX(0);
}

.entry-fadeup {
	opacity: 0;
	transform: translateY(30px);
}

.entry-fadeup.entry-active {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.8s cubic-bezier(0.42, 0, 0.39, 0.99),
				transform 0.8s cubic-bezier(0.42, 0, 0.39, 0.99);
}

.entry-expand {
	transform: scaleX(0);
}

.entry-expand.entry-active {
	transform: scaleX(1);
	transition: transform 0.8s cubic-bezier(0.42, 0, 0.39, 0.99);
}

/* ── /초기진입 애니메이션 ── */

.history-home-link {
	position: fixed;
	top: 140px;
	right: 80px;
	z-index: 30;
	cursor: none;
	width: clamp(42px, min(3.85vw, 6.84vh), 74px);
	height: clamp(42px, min(3.85vw, 6.84vh), 74px);
	display: block;
}

@media (min-width: 1024px) and (max-width: 1199px) {
	.history-home-link {
		top: 138px;
		right: 40px;
	}
}

.history-home-link-pc {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: opacity 250ms cubic-bezier(0, 0, 0.58, 1),
				transform 250ms cubic-bezier(0, 0, 0.58, 1);
}

.history-home-link-pc--default {
	opacity: 1;
	transform: scale(1);
}

.history-home-link-pc--hover {
	opacity: 0;
	transform: scale(1);
}

@media (hover: hover) {
	.history-home-link:hover .history-home-link-pc--default {
		opacity: 0;
		transform: scale(0.89);
	}

	.history-home-link:hover .history-home-link-pc--hover {
		opacity: 1;
		transform: scale(1);
	}
}

/* Heritage 레이아웃 간격 fluid */
.history-layout {
	gap: clamp(51px, min(5vw, 8.89vh), 96px) !important;
}

/* 연혁 year-text: 1920px에서 헤더 padding(80px)과 양끝 정렬, 1920px 초과 시 고정 */
.history-page .year-text-left {
	right: auto;
	left: max(80px, calc(50% - 880px));
}

.history-page .year-text-right {
	left: auto;
	right: max(80px, calc(50% - 880px));
}

/* year-text 폰트 크기 fluid (1920px 기준 160px, Figma digit width: "1"=60px, "0~9"≈93px) */
.year-digit {
	width: clamp(40px, min(4.844vw, 8.61vh), 93px);
	height: 1em;
	overflow: hidden;
	display: inline-block;
	font-size: clamp(64px, min(8.33vw, 14.81vh), 160px);
	color: #FFF;
	text-align: center;
	font-family: 'Google Sans Flex', sans-serif;
	font-weight: 300;
	line-height: 100%;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

@media (min-width: 1024px) and (max-width: 1919px) {
	.history-page .year-text-left {
		right: calc(50% + calc(var(--wh) / 2) + max(16px, calc(4.46vw - 29.7px)));
		left: auto;
	}

	.history-page .year-text-right {
		left: calc(50% + calc(var(--wh) / 2) + max(16px, calc(4.46vw - 29.7px)));
		right: auto;
	}

	.year-digit {
		width: min(max(46px, calc(5.24vw - 7.7px)), max(46px, calc(9.32vh - 7.7px)));
		font-size: min(max(80px, calc(8.93vw - 11.5px)), max(80px, calc(15.88vh - 11.5px)));
	}
}

.year-digit__strip {
	display: flex;
	flex-direction: column;
	transition: transform 0s;
}

.year-digit__num {
	display: block;
	height: 1em;
	line-height: 1;
}

/* Heritage 휠 요소 fluid scaling — header(98px×2) 침범 방지 */
.history-page {
	--wh: min(46vw, calc(100vh - 196px));
}

.history-wheel-container {
	width: clamp(315px, var(--wh), 786px) !important;
	height: clamp(315px, var(--wh), 786px) !important;
}

.history-dashed-ring {
	width: clamp(349px, calc(var(--wh) * 1.1082), 871px) !important;
	height: clamp(349px, calc(var(--wh) * 1.1082), 871px) !important;
}

.history-clock-svg {
	width: clamp(349px, calc(var(--wh) * 1.1082), 871px) !important;
	height: clamp(349px, calc(var(--wh) * 1.1082), 871px) !important;
}

.history-arcs-svg {
	width: clamp(349px, calc(var(--wh) * 1.1082), 871px) !important;
	height: clamp(349px, calc(var(--wh) * 1.1082), 871px) !important;
}

.history-page .outer-ring {
	width: clamp(335px, calc(var(--wh) * 1.0611), 834px) !important;
	height: clamp(335px, calc(var(--wh) * 1.0611), 834px) !important;
}

.center-mask {
	width: clamp(135px, calc(var(--wh) * 0.4656), 366px) !important;
	height: clamp(135px, calc(var(--wh) * 0.4656), 366px) !important;
}

.history-page .hero-overlay {
	-webkit-mask-image:
		radial-gradient(circle clamp(114px, calc(var(--wh) * 0.3626), 285px) at center, black calc(100% - 0.5px), transparent 100%),
		radial-gradient(circle clamp(157px, calc(var(--wh) * 0.5000), 393px) at center, transparent calc(100% - 0.5px), black 100%);
	-webkit-mask-composite: source-over;
	mask-image:
		radial-gradient(circle clamp(114px, calc(var(--wh) * 0.3626), 285px) at center, black calc(100% - 0.5px), transparent 100%),
		radial-gradient(circle clamp(157px, calc(var(--wh) * 0.5000), 393px) at center, transparent calc(100% - 0.5px), black 100%);
	mask-composite: add;
}

.history-home-link svg {
	width: 100%;
	height: 100%;
}

.history-home-link-mobile {
	display: none;
}

.year-text-mobile {
	display: none;
}

@media (min-width: 768px) and (max-width: 1023px) {
	.year-text-mobile__number {
		font-family: "Google Sans Flex", sans-serif;
		font-size: 64px;
		width: 160px;
	}
	
	.history-content__tag {
		font-size: 20px;
		line-height: 150%;
		letter-spacing: -0.4px;
	}
}

/* 모바일 전용 스타일 */
@media (max-width: 1023px) {
	.history-home-link {
		top: 98px;
		right: 20px;
		transition: none;
		backdrop-filter: blur(40px);
		-webkit-backdrop-filter: blur(40px);
		border-radius: 50%;
		cursor: auto;
	}
	
	/* PC SVG 숨김, 모바일 SVG 표시 */
	.history-home-link-pc {
		display: none !important;
	}
	
	.history-home-link-mobile {
		display: block !important;
	}
	
	/* PC year-text 숨김 */
	.year-text {
		display: none !important;
	}
	
	/* 모바일 통합 year-text — line 기준 가운데 정렬 */
	.year-text-mobile {
		position: fixed;
		bottom: 104px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 90;
		
		display: flex;
		align-items: center;
		gap: 22px;
	}
	
	.year-text-mobile__number {
		color: #FFF;
		font-family: 'Google Sans', sans-serif;
		font-size: 52px;
		font-weight: 300;
		line-height: 100%;
		width: 130px;
	}
	
	.year-text-mobile__number:first-child {
		text-align: right;
	}
	
	.year-text-mobile__number:last-child {
		text-align: left;
	}
	
	.year-text-mobile__line {
		flex-shrink: 0;
	}
	
	/* history-content__link 모바일 스타일 */
	.history-content__link {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 30px;
		left: 50%;
		transform: translateX(-50%);
		right: auto;
		width: calc(100vw - 48px);
		height: auto;
		padding: 11px 0;
		margin-bottom: 0;
		border: none;
		cursor: auto;
		
		font-family: 'Google Sans Flex', sans-serif;
		font-size: 16px;
		font-weight: 500;
		text-align: center;
		line-height: 140%;
		
		background: rgba(255, 255, 255, 0.20);
		backdrop-filter: blur(20px);
		z-index: 100;
		transition: none;
	}
	
	.history-content__link-arrows {
		position: relative;
		width: 14px;
		height: 12px;
		overflow: visible;
		flex-shrink: 0;
	}
	
	.history-content__link-arrow {
		position: static;
		transition: none;
	}
	
	.history-content__link-arrow--default {
		transform: none;
	}
	
	.history-content__link-arrow--hover {
		display: none;
	}
	
	
	.history-layout {
		align-items: flex-start !important;
		padding-top: 18.71vh;
	}
	
	.history-content {
		justify-content: center;
	}
	
	.history-content__info {
		margin-bottom: 20px;
	}
	
	.history-content__title {
		display: block;
		margin-bottom: 0;
		font-size: min(2.74vw, 28px);
	}
	
	/* SCROLL TO EXPLORE 숨김 */
	.history-scroll-indicator {
		display: none;
	}
	
	.history-page .hero-overlay {
		-webkit-mask-image:
			radial-gradient(circle 114px at 50% calc(18.71vh + 157px), black calc(100% - 0.5px), transparent 100%),
			radial-gradient(circle 157px at 50% calc(18.71vh + 157px), transparent calc(100% - 0.5px), black 100%);
		-webkit-mask-composite: source-over;
		mask-image:
			radial-gradient(circle 114px at 50% calc(18.71vh + 157px), black calc(100% - 0.5px), transparent 100%),
			radial-gradient(circle 157px at 50% calc(18.71vh + 157px), transparent calc(100% - 0.5px), black 100%);
		mask-composite: add;
	}
	
	/* 모바일/태블릿 공통 wheel 크기 — 모바일 Figma 기준값 (태블릿은 아래 768px 블록에서 오버라이드) */
	.history-wheel-container {
		width: 314px !important;
		height: 314px !important;
	}

	.history-dashed-ring {
		width: 349px !important;
		height: 349px !important;
	}
	
	.history-clock-svg {
		width: 349px !important;
		height: 349px !important;
	}

	.history-arcs-svg {
		width: 349px !important;
		height: 349px !important;
	}
	
	.history-page .outer-ring {
		width: 335px !important;
		height: 335px !important;
	}

	.center-mask {
		width: 146px !important;
		height: 146px !important;
	}

	.history-content {
		height: 314px !important;
	}
}

/* 태블릿 전용 오버라이드 (max-width:1023px 뒤에 배치) */
@media (min-width: 768px) and (max-width: 1023px) {
	.history-home-link {
		top: 98px;
		right: 40px;
	}
	
	.history-wheel-container {
		width: 490px !important;
		height: 490px !important;
	}
	
	.history-dashed-ring {
		width: 566px !important;
		height: 566px !important;
	}
	
	.history-clock-svg {
		width: 566px !important;
		height: 566px !important;
	}
	
	.history-arcs-svg {
		width: 566px !important;
		height: 566px !important;
	}
	
	.history-page .outer-ring {
		width: 536px !important;
		height: 536px !important;
	}
	
	.center-mask {
		width: 228px !important;
		height: 228px !important;
	}
	
	.history-content {
		height: 490px !important;
	}
	
	.history-page .hero-overlay {
		-webkit-mask-image:
			radial-gradient(circle 178px at 50% calc(18.71vh + 245px), black calc(100% - 0.5px), transparent 100%),
			radial-gradient(circle 245px at 50% calc(18.71vh + 245px), transparent calc(100% - 0.5px), black 100%);
		-webkit-mask-composite: source-over;
		mask-image:
			radial-gradient(circle 178px at 50% calc(18.71vh + 245px), black calc(100% - 0.5px), transparent 100%),
			radial-gradient(circle 245px at 50% calc(18.71vh + 245px), transparent calc(100% - 0.5px), black 100%);
		mask-composite: add;
	}
	
	.history-content__title {
		color: #FFF;
		text-align: center;
		font-family: 'Pretendard', sans-serif;
		font-size: 34px;
		font-weight: 600;
		line-height: 130%;
		letter-spacing: -0.68px;
	}
	
	.history-content__description {
		display: none;
	}
	
	.history-content__divider {
		display: none;
	}
	
	.history-content__link {
		width: 428px;
		height: 52px;
		padding: 0;
		bottom: 60px;
		font-family: 'Google Sans Flex', sans-serif;
		font-size: 16px;
		font-weight: 500;
	}
	
	.year-text-mobile {
		bottom: 172px;
		gap: 40px;
	}
	
	.year-text-mobile__number {
		font-size: 64px;
		width: 160px;
	}
	
	.history-content__info {
		margin-bottom: 0;
	}
}

/* 모바일 767px 이하 */
@media (max-width: 767px) {
	.history-content__title {
		font-size: 24px;
		font-weight: 600;
		line-height: 130%;
		letter-spacing: -0.48px;
	}
	
	.history-content__tag {
		font-size: 16px;
		line-height: 140%;
		letter-spacing: -0.32px;
	}
	
	.history-content__description {
		display: none;
	}
	
	.history-content__divider {
		display: none;
	}
	
	.year-text-mobile__number {
		font-size: 52px;
	}
	
	.history-content__link {
		width: 327px;
		max-width: calc(100% - 48px);
		height: 44px;
		padding: 0;
	}
}

/* 모바일 375px 이하 */
@media (max-width: 375px) {
	.history-home-link {
		top: 82px;
		right: 20px;
	}
}

@media (min-width: 376px) and (max-width: 1023px) {
	.history-home-link {
		width: 42px;
		height: 42px;
	}
}



.history-mobile-popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 203;
	background: rgba(0, 0, 0, 0.75);
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
}

@media (max-width: 767px) {
	.history-mobile-popup.is-visible {
		display: flex;
	}
}

.history-mobile-popup__overlay {
	display: none;
}

.history-mobile-popup__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.history-mobile-popup__close {
	position: fixed;
	top: 10px;
	right: 10px;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s;
	z-index: 204;
}

@media (max-width: 375px) {
	.history-mobile-popup__close {
		top: 10px;
		right: 10px;
	}
}

@media (hover: hover) {
	.history-mobile-popup__close:hover {
		opacity: 0.7;
	}
}

.history-mobile-popup__close svg {
	width: 100%;
	height: 100%;
}

.history-mobile-popup__icon {
	width: 95px;
	height: 84px;
	flex-shrink: 0;
}

.history-mobile-popup__text {
	color: #FFF;
	text-align: center;
	font-family: 'Pretendard', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 120%;
}

.history-mobile-popup__highlight {
	color: #F8F6A1;
	font-weight: 700;
}