@charset "UTF-8";

/* ** INTRO : PC 기본 CSS ** */
:root {
	--paper: #e3dfd3;
	--ink: #292519;
	--navy: #28323d;
	--dark: #21262c;
	--green: #174a3b;
	--copper: #b3614e;
	--button-paper: #e6e4d8;
	--view-height: 100vh;
	--safe-top: env(safe-area-inset-top, 0px);
	--safe-right: env(safe-area-inset-right, 0px);
	--safe-bottom: env(safe-area-inset-bottom, 0px);
	--safe-left: env(safe-area-inset-left, 0px);
	--u: min(0.0520833333vw, calc(var(--view-height) / 1080));
	/* --title-start: 0.3275; 첫 장면 위치는 chapterStartOffset()에서 계산 */
	/* --brands-start: -0.325; 기존 첫 장면 위치 미사용 */
	color-scheme: light;
}

@supports (height: 100dvh) {
	:root {
		--view-height: 100dvh;
	}
}

.intro {
	position: relative;
	width: 100%;
	height: var(--view-height);
	isolation: isolate;
	overflow: hidden;
}

.chapter-title,
.chapter-brands {
	position: absolute;
	z-index: 3;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	pointer-events: none;
}

/* 미사용 opening 요소의 기존 CSS
.opening {
	opacity: 0;
	visibility: hidden;
	top: 50%;
	width: max-content;
	max-width: 94%;
	font-size: calc(34 * var(--u));
	line-height: 1.4;
	letter-spacing: -0.045em;
}
*/

.chapter-title {
	top: 10.5%;
	width: max-content;
	font-size: calc(50 * var(--u));
	font-weight: 400;
	line-height: 1.24;
	letter-spacing: -0.055em;
	opacity: 0;
	visibility: hidden;
	transform-origin: center;
}

.chapter-title span,
.chapter-title strong {
	display: block;
}

.chapter-brands {
	top: 90.75%;
	display: flex;
	align-items: center;
	gap: calc(64 * var(--u));
	opacity: 0;
	visibility: hidden;
	transform-origin: center;
}

.brand-mark {
	display: block;
	flex-shrink: 0;
	object-fit: contain;
	filter: brightness(1) invert(0);
}

.brand-mark--kaive {
	width: calc(253 * var(--u));
	height: calc(79 * var(--u));
	color: #29313e;
}

.brand-mark--sigan {
	width: calc(154 * var(--u));
	height: calc(154 * var(--u));
	color: #004438;
}

.chapter-brands .brand-mark--sigan {
	width: calc(116 * var(--u));
	height: calc(131 * var(--u));
}

.chapter-line {
	position: absolute;
	z-index: 2;
	left: 50%;
	width: 1px;
	height: 30.1%;
	background: #aaa492;
	transform: scaleY(0);
}

.chapter-line--top {
	top: 0;
	transform-origin: top;
}

/* 첫 장면 하단 세로선 미사용: 수정 시안의 가로선으로 교체
.chapter-line--bottom {
	bottom: 0;
	height: 29.45%;
	transform-origin: bottom;
}
*/

.visual {
	position: absolute;
	z-index: 1;
	inset: 0;
}

.visual-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
}

.frame-shade,
.aperture-tile {
	position: absolute;
	background: var(--paper);
	pointer-events: none;
}

.frame-shade--top {
	top: 0;
	left: 0;
	width: 100%;
	height: calc(22.962963% + 1px);
}

.frame-shade--bottom {
	bottom: 0;
	left: 0;
	width: 100%;
	height: calc(23.703704% + 1px);
}

.frame-shade--left {
	top: 22.962963%;
	left: 0;
	width: calc(32.395833% + 1px);
	height: 53.333333%;
}

.frame-shade--right {
	top: 22.962963%;
	right: 0;
	width: calc(32.395833% + 1px);
	height: 53.333333%;
}

.aperture {
	position: absolute;
	top: 22.962963%;
	left: 32.395833%;
	width: 35.208334%;
	height: 53.333333%;
	overflow: hidden;
	pointer-events: none;
}
.aperture-tile {
	height: calc(50% + 0.5px);
}
.aperture-tile--tl,
.aperture-tile--bl {
	left: 0;
	width: calc(50% + 0.5px);
}
.aperture-tile--tr,
.aperture-tile--br {
	right: 0;
	width: calc(50% + 0.5px);
}
.aperture-tile--tl,
.aperture-tile--tr {
	top: 0;
}

.aperture-tile--bl,
.aperture-tile--br {
	bottom: 0;
}

.reveal-axis {
	position: absolute;
	background: #a8a293;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

.reveal-axis--vertical {
	top: 22.962963%;
	left: calc(50% - 0.5px);
	width: 1px;
	height: 53.333333%;
	transform: scaleY(0);
	transform-origin: center;
}

.reveal-axis--horizontal {
	top: calc(49.62963% - 0.5px);
	left: 32.395833%;
	width: 35.208334%;
	height: 1px;
	transform: scaleX(0);
	transform-origin: center;
}

.panel-entry {
	position: absolute;
	inset: 0;
}

.intro.is-animating .visual-image,
.intro.is-animating .frame-shade,
.intro.is-animating .aperture-tile,
.intro.is-animating .reveal-axis,
.intro.is-animating .chapter-title,
.intro.is-animating .chapter-brands,
.intro.is-animating .panel-entry,
.intro.is-animating .divider {
    will-change: transform;
}

.selector {
	position: absolute;
	z-index: 4;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}
.intro.is-ready .selector {
	pointer-events: auto;
}

.panel {
	position: relative;
	min-width: 0;
	overflow: hidden;
}
.panel-surface {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
}


/* ** 마지막 브랜드 선택: 카이브·시간 공통 호버 건물 배경 ** */
.panel-surface::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../image/building.png");
    background-repeat: no-repeat;
    background-position: center calc(100% + 1.04vw);
    background-size: 56% auto;
    pointer-events: none;
}

.panel--kaive .panel-surface {
	background: var(--dark);
}

.panel--sigan .panel-surface {
	background: var(--green);
}

.panel-logo,
.panel-copy,
.entry-link {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.panel--kaive .panel-logo {
	top: 33.796296%;
}
.panel--sigan .panel-logo {
	top: 23.5%;
}

.panel-copy {
	width: 100%;
	padding-inline: calc(30 * var(--u));
	text-align: center;
	color: #fff;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.panel--kaive .panel-copy {
	top: 40.185185%;
}

.panel--sigan .panel-copy {
	top: 40.185185%;
}

.panel-eyebrow {
	width: max-content;
	max-width: 100%;
	margin-inline: auto;
	font-size: calc(27 * var(--u));
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.2em;
}

.panel-headline {
	margin-top: calc(19 * var(--u));
	font-size: calc(50 * var(--u));
	font-weight: 400;
	line-height: 1.42;
	letter-spacing: -0.055em;
}
.panel-headline span,
.panel-headline strong {
	display: block;
	width: max-content;
	max-width: 100%;
	margin-inline: auto;
}
/*.panel--kaive .panel-headline {
    font-family:'Nanum Myeongjo', serif;
}
.panel--kaive .panel-headline strong {
	color: var(--copper);
	font-weight:600;
}*/
.panel--sigan .panel-eyebrow {
	letter-spacing: 0.12em;
}
.panel--sigan .panel-headline {
	margin-top: calc(22 * var(--u));
	font-size: calc(48 * var(--u));
	line-height: 1.45;
}

.entry-link {
	top: 48.796296%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: calc(10 * var(--u));
	width: calc(190 * var(--u));
	height: calc(57 * var(--u));
	border-radius: 100px;
	color: #fff;
	background: var(--navy);
	font-size: calc(18 * var(--u));
	line-height: 1;
	letter-spacing: -0.045em;
	white-space: nowrap;
	text-decoration: none;
	touch-action: manipulation;
}

.panel--sigan .entry-link {
	width: calc(204 * var(--u));
	gap: calc(20 * var(--u));
	background: var(--green);
}

.entry-arrow {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: calc(23 * var(--u));
	height: calc(23 * var(--u));
	border-radius: 50%;
	background: #fff;
	color: #29344e;
}
.entry-arrow svg {
	width: 48%;
	height: 62%;
}

.entry-link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 6px;
}

.divider {
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	background: rgb(255 255 255 / 28%);
	transform-origin: center;
	pointer-events: none;
}

.bando {
	position: absolute;
	z-index: 5;
	top: 4.722222%;
	left: 2.8125%;
	width: calc(168 * var(--u));
	height: calc(40 * var(--u));
	pointer-events: none;
}

.opening-badge {
	position: absolute;
	z-index: 6;
	top: 50%;
	left: 50%;
	width: calc(160 * var(--u));
	height: calc(160 * var(--u));
	transform: translate(-50%, -50%);
	pointer-events: none;
	color: #004438;

	opacity: 0 !important;
    pointer-events: none !important;
}

.badge-ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.badge-ring text {
	fill: currentColor;
	font-family: 'Montserrat', sans-serif;
	font-size: 11px;
	letter-spacing: 4px;
	font-weight:700
}

.badge-center {
	position: absolute;
	inset: 16%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
}

.badge-date {
	font-family: 'Montserrat', sans-serif;
	font-size: calc(32 * var(--u));
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.06em;
}

.badge-date small {
	font-size: calc(21 * var(--u));
}

.badge-label {
	margin-top: calc(4 * var(--u));
	font-size: calc(16 * var(--u));
	line-height: 1.2;;
	font-weight:500
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ** INTRO : 데스크톱 미디어 쿼리 - 1025px ~ 2559px ** */
@media (min-width: 1025px) and (max-width: 2559px) and (min-height: 601px) {
	.chapter-title {
		top: 2.5%;
	}

	.chapter-brands {
		top: 88.5%;
	}
}

/* ** INTRO : 태블릿 / 모바일 공통 미디어 쿼리 ** */
@media (max-width: 1024px), (max-height: 600px) {
	:root {
		--u: min(clamp(0.48px, 0.071vw, 0.74px), calc(var(--view-height) / 650));
	}

/* 미사용 opening 요소의 기존 CSS
	.opening {
		width: 94%;
		font-size: clamp(16px, 3.5vw, 28px);
		word-break: keep-all;
	}
*/

/* 미사용 opening 요소의 기존 CSS
	.opening strong {
		display: inline-block;
	}
*/

	.chapter-title {
		top: max(10.5%, calc(var(--safe-top) + 24px));
		font-size: clamp(26px, 6vw, 44px);
		white-space: nowrap;
	}

	.chapter-brands {
		top: min(90.75%, calc(100% - var(--safe-bottom) - 30px));
		gap: clamp(18px, 4vw, 42px);
	}
    
	.panel-copy {
		padding-inline: max(8px, calc(30 * var(--u)));
	}
	.panel--kaive .panel-copy{margin-top:calc(var(--safe-top) + 80px)}
	.panel--sigan .panel-copy{margin-top:calc(var(--safe-top) + 40px)}

	.panel-eyebrow {
		font-size: clamp(12px, 2.65vw, 20px);
		letter-spacing: 0.04em;
		white-space: nowrap;
	}

	.panel--sigan .panel-eyebrow {
		letter-spacing: 0.04em;
	}

	.panel-headline,
	.panel--sigan .panel-headline {
		margin-top: clamp(10px, 1.8vw, 16px);
		font-size: clamp(15px, 3.65vw, 34px);
		white-space: nowrap;
	}

	.entry-link,
	.panel--sigan .entry-link {
		width: calc(100% - 28px);
		max-width: 184px;
		height: 44px;
		gap: 6px;
		font-size: clamp(14px, 2.7vw, 18px);
	}

	.panel--sigan .entry-link {
		max-width: 204px;
	}

	.entry-arrow {
		width: 18px;
		height: 18px;
	}

	.bando {
		top: max(4.722222%, calc(var(--safe-top) + 12px));
		left: max(2.8125%, calc(var(--safe-left) + 12px));
		width: clamp(92px, 13vw, 124px);
		height: auto;
	}

	.opening-badge {
		width: clamp(72px, 11vw, 112px);
		height: clamp(72px, 11vw, 112px);
	}

	.badge-date {
		font-size: clamp(19px, 3.1vw, 26px);
	}

	.badge-date small {
		font-size: clamp(12px, 1.8vw, 17px);
	}

	.badge-label {
		margin-top: 3px;
		font-size: clamp(10px, 1.5vw, 13px);
	}
}

/* ** INTRO : 모바일 세로 미디어 쿼리 ** */
@media (max-width: 767px) and (orientation: portrait) {
	:root {
		/* --brands-start: -0.385; 기존 첫 장면 위치 미사용 */
	}

	.reveal-axis--horizontal {
		left: 22%;
		width: 56%;
		transform-origin: center;
	}
	.entry-link{width:185px !important}
}
@media (max-width:395px) {
    .panel--kaive .panel-copy{margin-top:calc(var(--safe-top) + 80px)}
	.panel--sigan .panel-copy{margin-top:calc(var(--safe-top) + 40px)}
	.entry-link{width:150px !important}
}
@media (max-width:385px) {
    .panel--kaive .panel-copy{margin-top:calc(var(--safe-top) + 80px)}
	.panel--sigan .panel-copy{margin-top:calc(var(--safe-top) + 70px)}
    
	.panel--kaive .panel-copy p{letter-spacing:-0.5px;}
}
@media (max-width:320px) {
	.panel--kaive .panel-copy p{letter-spacing:-1px;}
	.entry-link{width:130px !important; font-size:13px;}
}

/* ** INTRO : 모바일 가로 / 낮은 높이 미디어 쿼리 ** */
@media (orientation: landscape) and (max-height: 600px) {
	:root {
		/* --title-start: 0.295; 기존 첫 장면 위치 미사용 */
		/* --brands-start: -0.2575; 기존 첫 장면 위치 미사용 */
	}

/* 미사용 opening 요소의 기존 CSS
	.opening {
		font-size: clamp(16px, calc(var(--view-height) * 0.045), 26px);
	}
*/

	.chapter-title {
		font-size: clamp(24px, calc(var(--view-height) * 0.075), 40px);
	}

	.panel-eyebrow {
		font-size: clamp(12px, calc(var(--view-height) * 0.032), 18px);
	}

	.panel-headline,
	.panel--sigan .panel-headline {
		margin-top: 8px;
		font-size: clamp(16px, calc(var(--view-height) * 0.05), 28px);
	}

	.bando {
		width: 92px;
	}

	.opening-badge {
		width: 72px;
		height: 72px;
	}

	.badge-date {
		font-size: 19px;
	}

	.badge-date small {
		font-size: 12px;
	}

	.badge-label {
		font-size: 10px;
	}
}

/* ** INTRO : 초소형 모바일 미디어 쿼리 ** */
@media (max-width: 359px) {
	.panel-copy {
		padding-inline: 6px;
	}

	.panel-headline,
	.panel--sigan .panel-headline {
		font-size: clamp(13px, 4.65vw, 15px);
	}

	.entry-link,
	.panel--sigan .entry-link {
		width: calc(100% - 16px);
	}
}

/* ** INTRO : 터치 디바이스 미디어 쿼리 ** */
@media (pointer: coarse) {
	.entry-link {
		min-height: 44px;
	}
}


/* ** 2026-09-21 첫 장면 수정 **
   1920 × 1080 시안: 상단선 530px / 제목 중심 635px / 가로선 738px / 로고 중심 850px.
   --chapter-compose: 0은 수정 첫 장면, 1은 기존 후속 장면의 크기와 간격입니다.
   이후 장면의 공통 brand-mark 및 panel 스타일은 변경하지 않습니다.
*/
@font-face {
    font-family: "Pretendard";
    src: url("../image/fonts/Pretendard-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Pretendard";
    src: url("../image/fonts/Pretendard-Bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

.intro {
    --chapter-compose: 0;
    --identity-u: min(0.0520833333vw, calc(var(--view-height) / 1080));
    --identity-brand-gap: calc(120 * var(--identity-u));
    --chapter-end-gap: calc(64 * var(--u));
}

.chapter-title span {
    font-size: calc(40 * var(--identity-u) * (1 - var(--chapter-compose)) + 1em * var(--chapter-compose));
}

.chapter-title strong {
    margin-top: calc(19 * var(--identity-u) * (1 - var(--chapter-compose)));
    font-size: calc(56 * var(--identity-u) * (1 - var(--chapter-compose)) + 1em * var(--chapter-compose));
}

.chapter-brands {
    gap: calc(var(--identity-brand-gap) * (1 - var(--chapter-compose)) + var(--chapter-end-gap) * var(--chapter-compose));
}

.chapter-brands .brand-mark--kaive {
    width: calc(220 * var(--identity-u) * (1 - var(--chapter-compose)) + 253 * var(--u) * var(--chapter-compose));
    height: calc(73 * var(--identity-u) * (1 - var(--chapter-compose)) + 79 * var(--u) * var(--chapter-compose));
}

.chapter-brands .brand-mark--sigan {
    width: calc(116 * var(--identity-u) * (1 - var(--chapter-compose)) + 116 * var(--u) * var(--chapter-compose));
    height: calc(116 * var(--identity-u) * (1 - var(--chapter-compose)) + 131 * var(--u) * var(--chapter-compose));
}

.chapter-line--top {
    height: 49.074074%;
}

.chapter-line--rule {
    top: 68.333333%;
    left: calc(50% - 47.5 * var(--identity-u));
    width: calc(95 * var(--identity-u));
    height: 1px;
    transform-origin: center;
}

@media (max-width: 1024px), (max-height: 600px) {
    .intro {
        --identity-u: min(0.105vw, calc(var(--view-height) / 1080));
        --chapter-end-gap: clamp(18px, 4vw, 42px);
    }
}

.chapter-title span,
.chapter-title strong {
    letter-spacing: calc(-0.02em * (1 - var(--chapter-compose)) - 0.055em * var(--chapter-compose));
}

.chapter-brands .brand-mark--kaive {
    position: relative;
    left: calc(-4 * var(--identity-u) * (1 - var(--chapter-compose)));
    top: calc(9 * var(--identity-u) * (1 - var(--chapter-compose)));
}

.chapter-title strong {
    letter-spacing: calc(-0.013em * (1 - var(--chapter-compose)) - 0.055em * var(--chapter-compose));
}