/* ============================================
   80년의 기록 (80 Years of Heritage)
   PC-first → Tablet(768~1023) → Mobile(≤767)
   Grid: 12col/20px gutter/80px margin (PC/Laptop)
          8col/20px gutter/40px margin (Tablet)
          4col/20px gutter/20px margin (Mobile)
   ============================================ */

/* ─── Lenis + GSAP pinSpacing 보정: html height를 auto로 풀어야 pin-spacer 높이가 scrollHeight에 반영됨 ─── */
html.eighty-years-html {
	height: auto;
	background: #fff;
	overflow-y: auto;
	overflow-y: overlay;
}

/* ─── CSS Variables ─── */
.eighty-years-page {
	--ey-margin: 80px;
	--ey-gutter: 20px;
	--ey-font-en: 'Google Sans Flex', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	--ey-font-kr: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	--ey-color-white: #FFFFFF;
	--ey-color-dark: #1E1D17;
	--ey-color-anchor-bg: #4A4D50;
	--ey-color-card-border: rgba(0, 0, 0, 0.08);
	--ey-dimmed-opacity: 0.6;
	--ey-blur: 20px;
	--ey-card-gap: 100px;
	--ey-transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── Reset for this page ─── */
.eighty-years-page {
	overflow-x: hidden;
	background: #fff;
	color: var(--ey-color-white);
}

.eighty-years-page .ey {
	position: relative;
	width: 100%;
}

/* ─── Common Section ─── */
.ey-section {
	position: relative;
	width: 100%;
	min-height: 100vh;
	min-height: 100dvh;
	overflow: hidden;
}

/* ─────────────────────────────────
   Era Timeline — 단일 pin 컨테이너
   ───────────────────────────────── */
.ey-timeline-pin {
	position: relative;
	width: 100%;
	height: 100vh;
	z-index: 20;
}

.ey-timeline-pin.is-passed {
	z-index: 0 !important;
	pointer-events: none !important;
}

.ey-timeline-pin.is-passed * {
	pointer-events: none !important;
}

.pin-spacer.is-passed {
	z-index: 0 !important;
	pointer-events: none !important;
}

.ey-timeline {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #000;
}

.ey-era {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* era 내부: intro와 cards를 겹쳐 놓기 */
.ey-era .ey-era-intro,
.ey-era .ey-era-cards {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 100vh;
}

/* ─────────────────────────────────
   Section 01: 인트로
   ───────────────────────────────── */
/* page-specific intro overrides (base styles in common-intro.css) */
.ey-intro {
	background: #fff;
	--intro-title-color: #171B1E;
	--intro-subtitle-color: #171B1E;
}

.ey-intro__title {
	font-family: var(--Family-Pretendard, Pretendard);
	letter-spacing: -2px;
	color: var(--intro-title-color, #171B1E);
}

.ey-intro__subtitle {
	font-family: var(--Family-Pretendard, Pretendard);
	letter-spacing: -0.48px;
	color: var(--intro-subtitle-color, #171B1E);
}

.ey-mobile-br {
	display: none;
}

@keyframes ruler-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-90px); }
}
@keyframes ruler-marquee-top {
	from { transform: scaleY(-1) translateX(0); }
	to   { transform: scaleY(-1) translateX(-90px); }
}
@keyframes ruler-marquee-bottom {
	from { transform: translateX(-90px); }
	to   { transform: translateX(0); }
}
@keyframes ruler-marquee-mob {
	from { transform: translateX(0); }
	to   { transform: translateX(-72px); }
}
@keyframes ruler-marquee-mob-top {
	from { transform: scaleY(-1) translateX(0); }
	to   { transform: scaleY(-1) translateX(-72px); }
}
@keyframes ruler-marquee-mob-bottom {
	from { transform: translateX(-72px); }
	to   { transform: translateX(0); }
}

.ey-intro__ruler-track {
	width: calc(100% + 90px);
	height: 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='30'%3E%3Cline x1='0.75' y1='8' x2='0.75' y2='30' stroke='white' stroke-width='1.5'/%3E%3Cline x1='18.75' y1='8' x2='18.75' y2='30' stroke='white' stroke-width='1.5'/%3E%3Cline x1='36.75' y1='8' x2='36.75' y2='30' stroke='white' stroke-width='1.5'/%3E%3Cline x1='54.75' y1='8' x2='54.75' y2='30' stroke='white' stroke-width='1.5'/%3E%3Cline x1='73' y1='0' x2='73' y2='30' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-size: 90px 30px;
	will-change: transform;
}

.ey-intro__ruler--top .ey-intro__ruler-track {
	transform: scaleY(-1);
}

.ey-intro__ruler-track.is-marquee {
	animation: ruler-marquee 4s linear infinite;
}

.ey-intro__ruler--top .ey-intro__ruler-track.is-marquee {
	animation: ruler-marquee-top 4s linear infinite;
}

.ey-intro__ruler--bottom .ey-intro__ruler-track {
	transform: none;
}

.ey-intro__ruler--bottom .ey-intro__ruler-track.is-marquee {
	animation: ruler-marquee-bottom 4s linear infinite;
}


/* ─────────────────────────────────
   Section 02: 트랜지션
   ───────────────────────────────── */
.ey-transition {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
}

.ey-transition__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
}

.ey-transition__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.2);
}

.ey-transition__timeline {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	z-index: 1;
}

.ey-transition__timeline-line {
	width: 1px;
	height: 100%;
	background: rgba(255, 255, 255, 0.2);
}

.ey-transition__title {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: baseline;
	gap: 16px;
	font-family: var(--ey-font-en);
	font-size: 120px;
	font-weight: 500;
	line-height: 100%;
	letter-spacing: -0.02em;
	color: var(--ey-color-white);
}

.ey-transition__year-sep {
	font-size: 80px;
	font-weight: 300;
	opacity: 0.5;
}

/* ─────────────────────────────────
   시대 소개 섹션 (era-intro)
   Figma: 2열 레이아웃, 콘텐츠 1166px, 좌측 정렬
   ───────────────────────────────── */
.ey-era-intro {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
}

.ey-era__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
}

.ey-era__dimmed {
	position: absolute;
	inset: 0;
	background: rgba(23, 27, 30, 0.60);
}

.ey-era__blur {
	position: absolute;
	inset: 0;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	opacity: 0;
	pointer-events: none;
}

.ey-era__blur--1946 { background: rgba(153, 120, 67, 0.10); }
.ey-era__blur--1980 { background: rgba(15, 16, 21, 0.64); }
.ey-era__blur--2000 { background: rgba(15, 16, 21, 0.20); }
.ey-era__blur--2010 { background: rgba(34, 39, 54, 0.20); }

.ey-era-intro__content {
	position: relative;
	z-index: 1;
	width: calc(100% - var(--ey-margin) * 2);
	max-width: 1166px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* title_TOP: heading 블록 + 구분선 */
.ey-era-intro__title-top {
	display: flex;
	flex-direction: column;
	gap: 48px;
	width: 100%;
}

/* 좌측 블록: 연도+카테고리 + heading (width: 573px) */
.ey-era-intro__left {
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 573px;
}

/* 메타: 연도 + 구분자 + 카테고리 (horizontal) */
.ey-era-intro__meta {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: nowrap;
}

.ey-era-intro__meta > * {
	line-height: 1;
}

.ey-era-intro__year-num {
	font-family: var(--ey-font-en);
	font-size: 32px;
	font-weight: 300;
	line-height: 100%;
	letter-spacing: 0;
	color: var(--ey-color-white);
}

.ey-era-intro__year-num--now {
	font-size: 32px;
}

.ey-era-intro__year-sep {
	font-family: var(--ey-font-en);
	font-size: 32px;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.5);
	line-height: 130%;
}

/* 연도와 카테고리 사이 원형 구분자 (Figma: Ellipse 12, 8×8, white, opacity 0.3) */
.ey-era-intro__meta-divider {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ey-color-white);
	opacity: 0.3;
	flex-shrink: 0;
}

.ey-era-intro__category {
	font-family: var(--ey-font-kr);
	font-size: 32px;
	font-weight: 400;
	letter-spacing: -0.64px;
	color: rgba(255, 255, 255);
	line-height: 130%;
}

/* heading: Figma 56px SemiBold 130% -1.12px */
.ey-era-intro__heading {
	font-family: var(--ey-font-kr);
	font-size: 56px;
	font-weight: 600;
	line-height: 130%;
	letter-spacing: -1.12px;
	color: var(--ey-color-white);
	margin: 0;
}

/* 구분선: 흰색 1px, 전체 width */
.ey-era-intro__line {
	width: 100%;
	height: 1px;
	background: rgba(255, 255, 255);
}

/* 본문 wrap: paddingLeft로 우측 배치 */
.ey-era-intro__body-wrap {
	width: 100%;
	padding-left: 573px;
}

/* body: Figma 20px Regular 150% -0.4px */
.ey-era-intro__body {
	font-family: var(--ey-font-kr);
	font-size: 20px;
	font-weight: 400;
	line-height: 150%;
	letter-spacing: -0.4px;
	color: rgba(255, 255, 255);
	margin: 0;
	max-width: 593px;
}

/* ─────────────────────────────────
   카드 섹션 (era-cards)
   ───────────────────────────────── */
.ey-era-cards {
	display: flex;
	align-items: flex-start;
	height: 100vh;
	padding: 0 var(--ey-margin);
}

.ey-era-cards__exit-dimmed {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	opacity: 0;
	z-index: 10;
	pointer-events: none;
	will-change: opacity;
}

.ey-era-cards__ruler {
	position: absolute;
	left: 20px;
	top: 0;
	height: 100vh;
	width: 30px;
	overflow: hidden;
	z-index: 110;
	pointer-events: none;
	opacity: 0;
}

.ey-era-cards__ruler-track {
	display: flex;
	flex-direction: column;
	will-change: transform;
}

.ey-era-cards__ruler-track svg {
	display: block;
	flex-shrink: 0;
	transform: rotate(180deg);
}

/* 연도 워터마크 (우측 상단) — 초기: hidden, JS reveal */
.ey-era-cards__watermark {
	position: absolute;
	top: 96px;
	right: var(--ey-margin);
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-family: 'Google Sans Flex', var(--ey-font-en);
	font-size: 160px;
	font-weight: 300;
	line-height: 100%;
	pointer-events: none;
	opacity: 0;
	transform: translateX(40px);
}

.ey-era-cards__watermark > span {
	background: linear-gradient(180deg, #FFF 27.88%, rgba(255, 255, 255, 0.00) 85.1%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.ey-era-cards__watermark .ey-slot-col {
	display: inline-block;
	overflow: hidden;
	height: 1em;
	line-height: 1;
	vertical-align: top;
	min-width: 0.52em;
	text-align: center;
	margin-right: -6px;
}

.ey-era-cards__watermark .ey-slot-col:last-child {
	margin-right: 0;
}

.ey-era-cards__watermark .ey-slot-track {
	display: block;
	will-change: transform;
}

.ey-era-cards__watermark .ey-slot-digit {
	display: block;
	height: 1em;
	line-height: 1;
	text-align: center;
	background: linear-gradient(180deg, #FFF 27.88%, rgba(255, 255, 255, 0.00) 85.1%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Cards container (2-column layout) — 초기 위치: viewport 아래, JS scrub으로 올라옴 */
.ey-era-cards__container {
	position: relative;
	z-index: 10;
	display: flex;
	gap: var(--ey-card-gap);
	width: calc(100% - 178px);
	max-width: 950px;
	margin: 0;
	margin-left: 178px;
	padding: 140px 0;
}

.ey-era-cards__column {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 100px;
}

/* 오른쪽 컬럼 오프셋 — Figma에서 staggered 레이아웃 */
.ey-era-cards__column--right {
	padding-top: 120px;
}

/* ─────────────────────────────────
   카드 컴포넌트
   ───────────────────────────────── */
.ey-card {
	width: 425px;
	height: 560px;
	max-width: 425px;
	background: rgba(255, 255, 255, 0.80);
	overflow: hidden;
	padding: 10px;
}

.ey-card__img {
	width: 100%;
	height: auto;
	overflow: hidden;
}

.ey-card__img img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	aspect-ratio: 3 / 2;
}

.ey-card__text {
	padding: 12px 10px 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ey-card__date {
	font-family: var(--Family-Google-Sans-Flex, "Google Sans Flex");
	font-size: var(--Size-P2, 18px);
	font-style: normal;
	font-weight: 500;
	line-height: 140%;
	color: var(--Text-Secondary, #4A4D50);
	padding-bottom: 8px;
	border-bottom: 1px solid var(--Border-Secondary, #E2E2E2);
}

.ey-card__info {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ey-card__title {
	font-family: var(--Family-Pretendard, Pretendard);
	font-size: var(--Size-H6, 24px);
	font-style: normal;
	font-weight: 600;
	line-height: 130%;
	letter-spacing: -0.48px;
	color: var(--Text-Primary, #171B1E);
	margin: 0;
	word-break: keep-all;
}

.ey-card__desc {
	font-family: var(--Family-Pretendard, Pretendard);
	font-size: var(--Size-P1, 20px);
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	letter-spacing: -0.4px;
	color: var(--Text-Secondary, #4A4D50);
	margin: 0;
}

/* ─────────────────────────────────
   Anchor Navigation (하단 고정)
   ───────────────────────────────── */
.ey-anchor-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 35;
	display: none;
	align-items: center;
	gap: 24px;
	height: 46px;
	background: var(--ey-color-anchor-bg);
	padding: 0 20px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
	scrollbar-width: none;
	-ms-overflow-style: none;
	visibility: hidden;
}

.ey-anchor-nav::-webkit-scrollbar {
	display: none;
}

.ey-anchor-nav.is-visible {
	display: none;
}

.ey-anchor-nav__item {
	text-decoration: none;
	padding: 8px 12px;
	flex-shrink: 0;
	transition: color 0.3s ease;
}

.ey-anchor-nav__label {
	font-family: var(--ey-font-kr);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.02em;
	color: rgba(255, 255, 255, 0.6);
	transition: color 0.3s ease, font-weight 0.3s ease;
}

.ey-anchor-nav__item.is-active .ey-anchor-nav__label {
	color: var(--ey-color-white);
	font-weight: 600;
}

@media (hover: hover) {
	.ey-anchor-nav__item:hover .ey-anchor-nav__label {
		color: var(--ey-color-white);
		font-weight: 600;
	}
}

/* PC Anchor Navigation (우측 세로) */
.ey-anchor-nav-pc {
	position: absolute;
	top: calc(96px + 320px + 24px);
	right: var(--ey-margin);
	z-index: 9;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	opacity: 0;
	pointer-events: none;
	transform: translateX(40px);
}

.ey-anchor-nav-pc.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(0);
}

.ey-anchor-nav-pc__item {
	text-decoration: none;
}

.ey-anchor-nav-pc__label {
	font-family: var(--ey-font-kr);
	font-size: 24px;
	font-weight: 400;
	line-height: 150%;
	letter-spacing: -0.48px;
	color: rgba(255, 255, 255, 0.6);
	transition: color 0.3s ease;
}

.ey-anchor-nav-pc__item.is-active {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ey-anchor-nav-pc__item.is-active .ey-anchor-nav-pc__label {
	color: var(--ey-color-white);
	font-weight: 600;
}

@media (hover: hover) {
	.ey-anchor-nav-pc__item:hover .ey-anchor-nav-pc__label {
		color: var(--ey-color-white);
	}
}

.ey-anchor-nav-pc__sep {
	width: 32px;
	height: 2px;
	background: rgba(217, 217, 217, 0.85);
	margin: 4px 0;
	display: none;
}

.ey-anchor-nav-pc__item.is-active .ey-anchor-nav-pc__sep {
	display: block;
}

/* ─────────────────────────────────
   맨 위로 버튼
   ───────────────────────────────── */
.anniversary-btn-top {
	position: fixed;
	bottom: 40px;
	right: 40px;
	z-index: 44;
	width: 60px;
	height: 60px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease, background 0.3s ease;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.anniversary-btn-top.is-visible {
	opacity: 1;
	visibility: visible;
}

@media (hover: hover) {
	.anniversary-btn-top:hover {
		background: rgba(0, 0, 0, 0.6);
		border-color: rgba(255, 255, 255, 0.5);
	}
}

/* SVG 프로그레스 링 — 기존 border 위에 오버레이 */
.anniversary-btn-top__progress {
	position: absolute;
	inset: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	transform: rotate(-90deg);
	pointer-events: none;
}

.anniversary-btn-top__progress-bar {
	transition: stroke-dashoffset 0.05s linear;
}

.anniversary-btn-top__icon {
	position: relative;
	z-index: 1;
}

/* ─────────────────────────────────
   극장 커튼 — 타임라인 뒤 고정 배경
   ───────────────────────────────── */
/* base styles in common-curtain.css */

/* ─────────────────────────────────
   서브페이지 배너 (푸터 직전)
   ───────────────────────────────── */
.anniversary-sub-banner {
	position: relative;
	background: #171B1E;
}

.anniversary-sub-banner__inner {
	display: flex;
	align-items: stretch;
}

.anniversary-sub-banner__item {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 90px 0 70px;
	text-decoration: none;
	color: #fff;
}

.anniversary-sub-banner__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 22px;
}

.anniversary-sub-banner__text {
	font-family: 'Pretendard', sans-serif;
	font-size: 32px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.64px;
	color: #fff;
	margin: 0;
	text-align: center;
}

.anniversary-sub-banner__text span {
	display: block;
}

.anniversary-sub-banner__text strong {
	font-weight: 600;
}

.anniversary-sub-banner__go-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	color: #fff;
}

.anniversary-sub-banner__go-btn-circle {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid #fff;
	transition: background 400ms cubic-bezier(0.42, 0, 0.34, 0.99),
				border-color 400ms cubic-bezier(0.42, 0, 0.34, 0.99);
}

.anniversary-sub-banner__go-btn-arrows {
	position: relative;
	z-index: 1;
	width: 24px;
	height: 24px;
	overflow: hidden;
}

.anniversary-sub-banner__go-btn-arrow {
	position: absolute;
	top: 0;
	left: 0;
}

.anniversary-sub-banner__go-btn-arrow--default {
	transform: translateX(0);
	transition: transform 200ms cubic-bezier(0.42, 0, 0.34, 0.99);
}

.anniversary-sub-banner__go-btn-arrow--hover {
	transform: translateX(-100%);
	transition: transform 200ms cubic-bezier(0.42, 0, 0.34, 0.99);
}

@media (hover: hover) {
	.anniversary-sub-banner__item:hover .anniversary-sub-banner__go-btn-arrow--default {
		transform: translateX(100%);
		transition: transform 200ms cubic-bezier(0.42, 0, 0.34, 0.99);
	}

	.anniversary-sub-banner__item:hover .anniversary-sub-banner__go-btn-arrow--hover {
		transform: translateX(0);
		transition: transform 200ms cubic-bezier(0.42, 0, 0.34, 0.99) 40ms;
	}

	.anniversary-sub-banner__item:hover .anniversary-sub-banner__go-btn-circle {
		background: #FF4E1C;
		border-color: #FF4E1C;
	}

	.anniversary-sub-banner__item:hover .anniversary-sub-banner__go-btn--left {
		transform: rotate(180deg);
	}
}

.anniversary-sub-banner__go-btn--left {
	transform: rotate(180deg);
}

.anniversary-sub-banner__divider {
	flex-shrink: 0;
	width: 1px;
	align-self: stretch;
	background: #666A6D;
}

.anniversary-sub-banner__line {
	width: 100%;
	height: 1px;
	background: #666A6D;
}

/* ─────────────────────────────────
   GSAP Pin 관련 보정
   ───────────────────────────────── */
.ey-section.is-pinned {
	will-change: transform;
}

/* ─────────────────────────────────
   연도 카운팅 애니메이션 초기 상태
   ───────────────────────────────── */
.ey-era-intro__year-num,
.ey-transition__year-start,
.ey-transition__year-end {
	display: inline-block;
	min-width: 2ch;
}

/* 인트로 콘텐츠 fade-in 초기 상태 */
.ey-intro__content {
	opacity: 0;
}

.ey-intro__scroll-cta {
	left: 0;
	right: 0;
	opacity: 0;
}

.ey-intro__content.is-visible {
	opacity: 1;
	transition: opacity 0.8s ease;
}

.ey-intro__scroll-cta.is-visible {
	opacity: 1;
	transition: opacity 0.8s ease;
}

/* Era intro 콘텐츠 reveal 상태 — GSAP에서 opacity/transform 관리 */

.ey-era-intro__line {
	transform: scaleX(0);
	transform-origin: center;
}

.ey-era-intro.is-active .ey-era-intro__line {
	transform: scaleX(1);
}

/* ─────────────────────────────────
   Heritage subpage header override
   (이미 80.css에서 처리되나, anchor nav z-index 확보)
   ───────────────────────────────── */
.eighty-years-page .anniversary-header {
	z-index: 45;
}

/* ─────────────────────────────────────────────────────────────────
   GPU Layer Promotion: GSAP ScrollTrigger 애니메이션 대상
   서브픽셀 렌더링 안정화 → 스크롤 jitter 방지
   ───────────────────────────────────────────────────────────────── */
.ey-intro,
.ey-intro__bg-wrapper,
.ey-intro__content,
.ey-intro__scroll-cta,
.ey-intro__dimmed,
.ey-intro__ruler-top,
.ey-intro__ruler-bottom,
.ey-intro__ruler-track,
.ey-era,
.ey-era-cards,
.ey-era-intro__content,
.ey-era-intro__line,
.ey-era-cards__exit-dimmed,
.ey-era-cards__watermark,
.ey-era-cards__ruler,
.ey-era-cards__ruler-track,
.ey-era-cards__container,
.ey-anchor-nav,
.ey-anchor-nav-pc,
.ey-timeline {
	will-change: transform, opacity;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* ================================================================
   PC Fluid: 1024px 이상
   기본 스타일(1920px 고정값)을 clamp()로 오버라이드하여
   1024~1920px 범위에서 자연스럽게 축소
   ================================================================ */
@media (min-width: 1024px) {
	.eighty-years-page {
		--ey-margin: clamp(43px, 4.167vw, 80px);
		--ey-card-gap: clamp(40px, calc(10.417vw - 100px), 100px);
	}

	.ey-era-intro__content {
		max-width: clamp(860px, 60.729vw, 1166px);
	}

	.ey-era-intro__left {
		width: clamp(420px, 29.844vw, 573px);
	}

	.ey-era-intro__body-wrap {
		padding-left: clamp(420px, 29.844vw, 573px);
	}

	.ey-era-intro__body {
		max-width: clamp(430px, 30.885vw, 593px);
	}

	.ey-era-cards__watermark {
		top: clamp(51px, 5vw, 96px);
		font-size: clamp(85px, 8.333vw, 160px);
	}

	.ey-era-cards__container {
		width: calc(100% - clamp(50px, calc(33.333vw - 462px), 178px));
		max-width: clamp(507px, 49.479vw, 950px);
		margin-left: clamp(50px, calc(33.333vw - 462px), 178px);
		padding: clamp(51px, 7.292vw, 140px) 0;
	}

	.ey-era-cards__column {
		gap: clamp(40px, calc(10.417vw - 100px), 100px);
	}

	.ey-era-cards__column--right {
		padding-top: clamp(64px, 6.25vw, 120px);
	}

	.ey-anchor-nav-pc {
		top: calc(clamp(51px, 5vw, 96px) + clamp(170px, 16.667vw, 320px) + 24px);
	}
}

/* ================================================================
   Large Desktop + short viewport: 1280px ~ 1535px (e.g. LG Gram)
   ================================================================ */
@media (min-width: 1280px) and (max-width: 1535px) {
}

/* ================================================================
   Small PC: 1024px ~ 1279px
   fluid 기본값이 자연스럽게 축소되므로 별도 리셋 불필요
   ================================================================ */
@media (min-width: 1024px) and (max-width: 1279px) {
}

/* ================================================================
   Small PC + short viewport (e.g. 1024×768 landscape tablet)
   ================================================================ */
@media (min-width: 1024px) and (max-width: 1279px) and (max-height: 800px) {
}

/* ================================================================
   Tablet: 768px ~ 1023px
   8 columns, 20px gutter, 40px margin
   ================================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
	.eighty-years-page {
		--ey-margin: 40px;
		--ey-card-gap: 40px;
	}

	.ey-era__dimmed {
		display: none;
	}

	.ey-intro__bg-wrapper {
		width: 512px;
		height: 500px;
	}

	.ey-anchor-nav-pc {
		display: flex;
		right: var(--ey-margin);
		gap: 12px;
	}

	.ey-anchor-nav-pc__label {
		font-size: 20px;
	}

	.ey-intro__title {
		font-size: 48px;
	}

	.ey-intro__subtitle {
		font-size: 20px;
	}

	.ey-intro__content {
		top: calc(var(--header-h, 90px) + 10vh);
	}

	.ey-intro__ruler--top {
		top: 10px;
	}

	.ey-intro__ruler--bottom {
		bottom: 10px;
	}

	.ey-intro__ruler {
		height: 24px;
	}

	.ey-intro__ruler-track {
		width: calc(100% + 72px);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='24'%3E%3Cline x1='0.6' y1='6.4' x2='0.6' y2='24' stroke='white' stroke-width='1.2'/%3E%3Cline x1='15' y1='6.4' x2='15' y2='24' stroke='white' stroke-width='1.2'/%3E%3Cline x1='29.4' y1='6.4' x2='29.4' y2='24' stroke='white' stroke-width='1.2'/%3E%3Cline x1='43.8' y1='6.4' x2='43.8' y2='24' stroke='white' stroke-width='1.2'/%3E%3Cline x1='58.4' y1='0' x2='58.4' y2='24' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E");
		background-size: 72px 24px;
	}

	.ey-intro__ruler-track.is-marquee {
		animation: ruler-marquee-mob 3.2s linear infinite;
	}

	.ey-intro__ruler--top .ey-intro__ruler-track.is-marquee {
		animation: ruler-marquee-mob-top 3.2s linear infinite;
	}

	.ey-intro__ruler--bottom .ey-intro__ruler-track.is-marquee {
		animation: ruler-marquee-mob-bottom 3.2s linear infinite;
	}

	.ey-transition__title {
		font-size: 80px;
	}

	.ey-transition__year-sep {
		font-size: 56px;
	}

	.ey-era-intro__year-num,
	.ey-era-intro__year-num--now {
		font-family: var(--ey-font-en);
		font-size: 24px;
		font-weight: 300;
		line-height: 130%;
	}

	.ey-era-intro__year-sep {
		font-size: 24px;
	}

	.ey-era-intro__category {
		font-family: var(--ey-font-kr);
		font-size: 24px;
		font-weight: 400;
		line-height: 130%;
		letter-spacing: -0.48px;
	}

	.ey-era-intro__meta-divider {
		width: 6px;
		height: 6px;
	}

	.ey-era-intro__content {
		max-width: 688px;
		margin: 0 auto;
		gap: 24px;
	}

	.ey-era-intro__title-top {
		gap: 30px;
	}

	.ey-era-intro__left {
		width: 100%;
		gap: 12px;
	}

	.ey-era-intro__heading {
		font-size: 34px;
		letter-spacing: -0.68px;
	}

	.ey-era-intro__body-wrap {
		padding-left: 334px;
	}

	.ey-era-intro__body {
		max-width: 354px;
		font-size: 18px;
		line-height: 150%;
		letter-spacing: -0.36px;
	}

	/* 카드: Figma Tablet */
	.ey-era-cards__watermark {
		font-size: 100px;
		top: 120px;
	}

	.ey-anchor-nav-pc {
		display: flex;
		right: var(--ey-margin);
		gap: 12px;
		top: calc(120px + 200px + 30px);
	}

	.ey-anchor-nav-pc__label {
		font-size: 20px;
	}

	.ey-era-cards__container {
		flex-direction: column;
		max-width: 334px;
		margin: 0;
		margin-left: 40px;
		gap: var(--ey-card-gap);
		padding: 120px 0;
		padding-left: 0;
	}

	.ey-era-cards__column {
		display: contents;
	}

	.ey-era-cards__column--right {
		padding-top: 0;
	}

	.ey-era-cards__column--left .ey-card:nth-child(1) { order: 1; }
	.ey-era-cards__column--right .ey-card:nth-child(1) { order: 2; }
	.ey-era-cards__column--left .ey-card:nth-child(2) { order: 3; }
	.ey-era-cards__column--right .ey-card:nth-child(2) { order: 4; }
	.ey-era-cards__column--left .ey-card:nth-child(3) { order: 5; }
	.ey-era-cards__column--right .ey-card:nth-child(3) { order: 6; }
	.ey-era-cards__column--left .ey-card:nth-child(4) { order: 7; }
	.ey-era-cards__column--right .ey-card:nth-child(4) { order: 8; }
	.ey-era-cards__column--left .ey-card:nth-child(5) { order: 9; }
	.ey-era-cards__column--right .ey-card:nth-child(5) { order: 10; }
	.ey-era-cards__column--left .ey-card:nth-child(6) { order: 11; }
	.ey-era-cards__column--right .ey-card:nth-child(6) { order: 12; }

	.ey-card {
		width: 334px;
		height: 460px;
		max-width: 100%;
		padding: 8px;
	}

	.ey-card__text {
		padding: 10px 12px 0 12px;
	}

	.ey-card__date {
		font-family: var(--ey-font-en);
		font-size: 16px;
		font-weight: 500;
		line-height: 140%;
		color: #4A4D50;
	}

	.ey-card__title {
		font-size: 20px;
		font-weight: 600;
		line-height: 130%;
		letter-spacing: -0.4px;
		color: #171B1E;
	}

	.ey-card__desc {
		font-size: 18px;
		font-weight: 400;
		line-height: 150%;
		letter-spacing: -0.36px;
		color: #4A4D50;
	}

	.ey-era-cards__ruler {
		display: none;
	}

	/* 배너: 태블릿 */
	.anniversary-sub-banner__item {
		padding: 50px 0 40px;
	}

	.anniversary-sub-banner__text {
		font-size: 20px;
		line-height: 150%;
		letter-spacing: -0.4px;
	}

	.anniversary-sub-banner__go-btn-circle {
		width: 40px;
		height: 40px;
	}

	.anniversary-sub-banner__go-btn {
		width: 40px;
		height: 40px;
	}

	.anniversary-sub-banner__go-btn-arrows {
		width: 16px;
		height: 16px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.anniversary-sub-banner__go-btn-arrow svg {
		width: 16px;
		height: 16px;
	}

	.anniversary-sub-banner__go-btn-arrow {
		position: relative;
	}

	.anniversary-sub-banner__go-btn-arrow--hover {
		display: none;
	}

	.anniversary-sub-banner__go-btn-arrow--default {
		transform: none;
	}

	/* era별 배경 이미지: 태블릿 */
	.ey-era__bg--1946 { background-image: url('../images/80-years/bg/bg-1946-cards-tablet.webp') !important; }
	.ey-era__bg--1980 { background-image: url('../images/80-years/bg/bg-1980-cards-tablet.webp') !important; }
	.ey-era__bg--2000 { background-image: url('../images/80-years/bg/bg-2000-cards-tablet.webp') !important; }
	.ey-era__bg--2010 { background-image: url('../images/80-years/bg/bg-2010-cards-tablet.webp') !important; }

	.anniversary-btn-top {
		right: 20px;
		bottom: 20px;
		width: 40px;
		height: 40px;
	}
}

/* ================================================================
   Mobile: ≤767px
   4 columns, 20px gutter, 20px margin
   ================================================================ */
@media (max-width: 767px) {
	.eighty-years-page {
		--ey-margin: 20px;
		--ey-card-gap: 40px;
	}

	.ey-era__dimmed {
		display: none;
	}

	.ey-era-cards__column {
		gap: 40px;
	}

	.ey-intro__bg-wrapper {
		width: 334px;
		height: 300px;
	}

	.ey-anchor-nav-pc {
		display: none;
	}

	/* 인트로 */
	.ey-intro__title {
		font-size: 48px;
		margin-bottom: 24px;
	}

	.ey-intro__subtitle {
		font-size: 20px;
	}

	.ey-intro__scroll-cta {
		display: none;
	}

	.ey-mobile-br {
		display: inline;
	}

	.ey-intro__content {
		top: calc(var(--header-h, 60px) + 10vh);
	}

	.ey-intro__ruler--top {
		top: 10px;
	}

	.ey-intro__ruler--bottom {
		bottom: 10px;
	}

	.ey-intro__ruler {
		height: 24px;
	}

	.ey-intro__ruler-track {
		width: calc(100% + 72px);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='24'%3E%3Cline x1='0.6' y1='6.4' x2='0.6' y2='24' stroke='white' stroke-width='1.2'/%3E%3Cline x1='15' y1='6.4' x2='15' y2='24' stroke='white' stroke-width='1.2'/%3E%3Cline x1='29.4' y1='6.4' x2='29.4' y2='24' stroke='white' stroke-width='1.2'/%3E%3Cline x1='43.8' y1='6.4' x2='43.8' y2='24' stroke='white' stroke-width='1.2'/%3E%3Cline x1='58.4' y1='0' x2='58.4' y2='24' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E");
		background-size: 72px 24px;
	}

	.ey-intro__ruler-track.is-marquee {
		animation: ruler-marquee-mob 3.2s linear infinite;
	}

	.ey-intro__ruler--top .ey-intro__ruler-track.is-marquee {
		animation: ruler-marquee-mob-top 3.2s linear infinite;
	}

	.ey-intro__ruler--bottom .ey-intro__ruler-track.is-marquee {
		animation: ruler-marquee-mob-bottom 3.2s linear infinite;
	}

	/* 트랜지션 */
	.ey-transition__title {
		font-size: 52px;
		gap: 8px;
	}

	.ey-transition__year-sep {
		font-size: 36px;
	}

	.ey-era-intro__year-num,
	.ey-era-intro__year-num--now {
		font-family: var(--Family-Google-Sans-Flex, "Google Sans Flex");
		font-size: var(--Size-H5, 24px);
		font-style: normal;
		font-weight: 300;
		line-height: 130%;
		color: var(--Text-White, #FFF);
	}

	.ey-era-intro__year-sep {
		font-size: 24px;
	}

	.ey-era-intro__meta {
		gap: 10px;
	}

	.ey-era-intro__category {
		font-family: var(--Family-Pretendard, Pretendard);
		font-size: var(--Size-H5, 24px);
		font-weight: 400;
		line-height: 130%;
		letter-spacing: -0.48px;
		color: var(--Text-White, #FFF);
	}

	.ey-era-intro__meta-divider {
		width: 4px;
		height: 4px;
		aspect-ratio: 1 / 1;
		background-color: #FFF;
		opacity: 0.3;
	}

	.ey-era-intro__content {
		max-width: 335px;
		margin: 0 auto;
		gap: 24px;
	}

	.ey-era-intro__title-top {
		gap: 30px;
	}

	.ey-era-intro__left {
		width: 100%;
		gap: 12px;
	}

	.ey-era-intro__heading {
		font-size: 34px;
		letter-spacing: -0.68px;
	}

	.ey-era-intro__body-wrap {
		padding-left: 0;
	}

	.ey-era-intro__body {
		font-size: 18px;
		line-height: 150%;
		letter-spacing: -0.36px;
		max-width: 100%;
	}

	.ey-era-intro__body br {
		display: none;
	}

	.ey-era-cards__watermark {
		font-size: 72px;
		top: 90px;
		right: var(--ey-margin);
		transform: none;
	}

	.ey-era-cards {
		padding: 0 var(--ey-margin);
	}

	.ey-era-cards__container {
		flex-direction: column;
		align-items: center;
		gap: var(--ey-card-gap);
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		padding: 274px 0 0;
		padding-left: 0;
	}

	.ey-era-cards__column {
		display: contents;
	}

	.ey-era-cards__column--right {
		padding-top: 0;
	}

	.ey-era-cards__column--left .ey-card:nth-child(1) { order: 1; }
	.ey-era-cards__column--right .ey-card:nth-child(1) { order: 2; }
	.ey-era-cards__column--left .ey-card:nth-child(2) { order: 3; }
	.ey-era-cards__column--right .ey-card:nth-child(2) { order: 4; }
	.ey-era-cards__column--left .ey-card:nth-child(3) { order: 5; }
	.ey-era-cards__column--right .ey-card:nth-child(3) { order: 6; }
	.ey-era-cards__column--left .ey-card:nth-child(4) { order: 7; }
	.ey-era-cards__column--right .ey-card:nth-child(4) { order: 8; }
	.ey-era-cards__column--left .ey-card:nth-child(5) { order: 9; }
	.ey-era-cards__column--right .ey-card:nth-child(5) { order: 10; }
	.ey-era-cards__column--left .ey-card:nth-child(6) { order: 11; }
	.ey-era-cards__column--right .ey-card:nth-child(6) { order: 12; }

	.ey-card {
		width: 335px;
		height: 460px;
		max-width: 100%;
		min-height: auto;
		padding: 8px;
	}

	.ey-card__text {
		padding: 10px 12px 0 12px;
	}

	.ey-card__date {
		font-family: var(--ey-font-en);
		font-size: 16px;
		font-weight: 500;
		line-height: 140%;
		color: #4A4D50;
	}

	.ey-card__title {
		font-size: 20px;
		font-weight: 600;
		line-height: 130%;
		letter-spacing: -0.4px;
		color: #171B1E;
	}

	.ey-card__desc {
		font-size: 18px;
		font-weight: 400;
		line-height: 150%;
		letter-spacing: -0.36px;
		color: #4A4D50;
	}

	.ey-era-cards__ruler {
		display: none;
	}

	/* Anchor Nav: 모바일에서만 표시 */
	.ey-anchor-nav {
		display: flex;
		gap: 24px;
		padding: 12px 20px;
		background: #4A4D50;
	}

	.ey-anchor-nav__item {
		display: flex;
		padding: 0;
	}

	.ey-anchor-nav__label {
		font-size: 16px;
		font-weight: 400;
		line-height: 140%;
		letter-spacing: -0.32px;
		color: rgba(255, 255, 255, 0.6);
		text-align: center;
	}

	.ey-anchor-nav__item.is-active .ey-anchor-nav__label {
		font-weight: 600;
		color: #FFF;
	}

	/* 맨 위로 */
	.anniversary-btn-top {
		right: 20px;
		bottom: 20px;
		width: 40px;
		height: 40px;
	}

	/* 배너: 모바일 */
	.anniversary-sub-banner__inner {
		flex-direction: column;
	}

	.anniversary-sub-banner__item {
		padding: 50px 0 40px;
		border-bottom: 1px solid #666A6D;
	}

	.anniversary-sub-banner__divider {
		display: none;
	}

	.anniversary-sub-banner__text {
		font-size: 20px;
		line-height: 150%;
		letter-spacing: -0.4px;
	}

	.anniversary-sub-banner__go-btn-circle {
		width: 40px;
		height: 40px;
	}

	.anniversary-sub-banner__go-btn {
		width: 40px;
		height: 40px;
	}

	.anniversary-sub-banner__go-btn-arrows {
		width: 16px;
		height: 16px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.anniversary-sub-banner__go-btn-arrow svg {
		width: 16px;
		height: 16px;
	}

	.anniversary-sub-banner__go-btn-arrow {
		position: relative;
	}

	.anniversary-sub-banner__go-btn-arrow--default,
	.anniversary-sub-banner__go-btn-arrow--hover {
		transition: none;
	}

	.anniversary-sub-banner__go-btn-arrow--hover {
		display: none;
	}

	.anniversary-sub-banner__go-btn-arrow--default {
		transform: none;
	}

	.anniversary-sub-banner__go-btn-circle {
		transition: none;
	}

	.ey-era__bg--1946 { background-image: url('../images/80-years/bg/bg-1946-cards-mobile.webp') !important; }
	.ey-era__bg--1980 { background-image: url('../images/80-years/bg/bg-1980-cards-mobile.webp') !important; }
	.ey-era__bg--2000 { background-image: url('../images/80-years/bg/bg-2000-cards-mobile.webp') !important; }
	.ey-era__bg--2010 { background-image: url('../images/80-years/bg/bg-2010-cards-mobile.webp') !important; }
}

/* ================================================================
   Small Mobile: ≤375px
   ================================================================ */
@media (max-width: 375px) {
	.ey-anchor-nav {
		gap: 16px;
	}

	.ey-anchor-nav__label {
		font-size: 14px;
	}
}