@font-face {
	font-family: 'Porsche Next';
	src: url('../fonts/PorscheNextKorean-Regular.otf') format('opentype');
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'Porsche Next';
	src: url('../fonts/PorscheNextKorean-Bold.otf') format('opentype');
	font-style: normal;
	font-weight: 700;
	font-display: swap;
}
@font-face {
	font-family: 'Porsche Next';
	src: url('../fonts/PorscheNextKorean-Thin.otf') format('opentype');
	font-style: normal;
	font-weight: 300;
	font-display: swap;
}
:root {
	--ink: #111111;
	--muted: #5a5c61;
	--paper: #ebeef4;
	--blue: #224a74;
	--pink: #ef4168;
	--line: #d4d5d8;
	--page-width: 760px;
	--gutter: clamp(20px, 5.4vw, 42px);
	color-scheme: light;
	font-family: 'Porsche Next', Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: var(--ink);
	background: #dfe4eb;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 280px; }
body { -webkit-text-size-adjust: 100%; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button, a { touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { color: inherit; }
button:disabled { cursor: default; }
h1, h2, h3, p { margin: 0; }
svg { display: block; width: 24px; height: 24px; flex: 0 0 auto; }
[hidden] { display: none !important; }
[data-lang='ko'] .lang-en, [data-lang='en'] .lang-ko { display: none !important; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.skip-link { position: fixed; z-index: 100; top: -100px; left: 16px; padding: 12px 20px; color: #fff; background: #111; }
.skip-link:focus { top: 12px; }
.home-shell, .detail-shell {
	width: min(100%, var(--page-width));
	margin-inline: auto;
	background: var(--paper);
	position: relative;
	box-shadow: 0 0 70px #1726370d;
}
.home-shell {
	height: auto;
	min-height: 100vh;
	min-height: 100svh;
	display: block;
	overflow: visible;
}
.home-shell::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('../images/original-waves.svg?v=20260914') center top / 100% auto no-repeat;
	pointer-events: none;
}
.home-header, .map-section, .zone-section { position: relative; }
.home-header { flex: 0 0 auto; padding-bottom: clamp(18px, 4.15vw, 32px); }
.brand-art {
	width: 100%;
	height: auto;
}
.home-title {
	text-align: center;
	font-size: clamp(26px, 6.115vw, 46.5px);
	line-height: 1.34;
	font-weight: 700;
	padding: 0 12px;
	margin-top: 0;
}
.home-language { position: absolute; top: max(10px, env(safe-area-inset-top)); right: var(--gutter); border-radius: 20px; background: #ffffffed; z-index: 2; }
.map-section { padding: 0 var(--gutter); flex: 0 0 auto; }
.map-canvas {
	position: relative;
	width: 100%;
	margin-inline: auto;
	isolation: isolate;
}
.map-canvas > img { width: 100%; height: auto; border-radius: clamp(14px, 2.8vw, 24px); }
.map-hotspot {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--w);
	height: var(--h);
	min-width: 20px;
	min-height: 18px;
	display: grid;
	place-items: center;
	border-radius: 4px;
	z-index: 2;
}
.map-hotspot::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 2px solid transparent;
	border-radius: 4px;
	transition: border-color .2s, box-shadow .2s;
}
.map-hotspot:hover::after, .map-hotspot:focus-visible::after { border-color: #fff; box-shadow: 0 0 0 3px var(--pink); }
.map-tools { position: absolute; right: var(--gutter); bottom: -31px; display: flex; justify-content: flex-end; z-index: 2; }
.text-button { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 0 0 12px; border: 0; background: none; font-size: 14px; }
.text-button svg { width: 17px; height: 17px; }
.zone-section { padding: clamp(34px, 7vw, 54px) var(--gutter) max(16px, env(safe-area-inset-bottom)); }
.language-switch { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.language-switch button { background: none; border: none; color: #62666e; padding: 0 8px; min-width: 40px; min-height: 36px; font-size: 14px; }
.language-switch button[aria-pressed='true'] { color: #111; font-weight: 700; text-decoration: underline; text-decoration-color: var(--pink); text-underline-offset: 5px; text-decoration-thickness: 2px; }
.language-divider { width: 1px; height: 12px; background: #aab0b9; }
/* 메인 10개 존은 모두 펼치고 문서 전체를 스크롤합니다. */
.zone-scroll { height: auto; max-height: none; overflow: visible; }
.zone-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 2.4vw, 18px); }
.zone-card {
	background: #fff;
	border: 1px solid transparent;
	border-radius: clamp(17px, 3.3vw, 25px);
	min-height: 114px;
	aspect-ratio: 506 / 350;
	padding: clamp(12px, 2.9vw, 22px);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	transition: background .2s, border-color .2s, transform .2s;
}
.zone-card:hover { border-color: var(--pink); background: #fffafb; transform: translateY(-2px); }
.zone-name { font-size: clamp(16px, 4.146vw, 31.5px); line-height: 1.32; overflow-wrap: break-word; }
.preopen-note { color: #555b65; font-size: 14px; line-height: 1.4; padding: 20px 4px 10px; }
.detail-shell { height: auto; min-height: 100vh; min-height: 100svh; background: #fff; overflow: visible; }
/* 모든 상세 페이지 공통: 내비게이션은 상단에 유지하고 본문은 문서 흐름에 둡니다. */
.detail-header { position: sticky; top: 0; padding-top: max(clamp(26px, 7.8vw, 60px), env(safe-area-inset-top)); background: #fff; z-index: 20; }
.detail-topbar { display: flex; align-items: center; gap: 0; min-height: 44px; padding: 0 calc(var(--gutter) - 12px); }
.back-link, .icon-button { display: inline-flex; justify-content: center; align-items: center; width: 44px; height: 44px; flex: 0 0 auto; border: 0; padding: 0; background: transparent; border-radius: 50%; }
.back-link:hover, .icon-button:hover { background: #f0f1f3; }
.header-title { font-size: clamp(20px, 4.39vw, 33.4px); font-weight: 700; line-height: 1.12; flex: 1; }
.header-language { margin-left: auto; }
.header-language button { padding-inline: 5px; min-width: 34px; }
.tab-wrap { padding: clamp(16px, 5vw, 38px) var(--gutter) 0; }
.zone-tabs { display: flex; gap: clamp(9px, 2.4vw, 18px); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 0 0 clamp(12px, 3vw, 23px); cursor: grab; scroll-padding-inline: 12px; }
.zone-tabs::-webkit-scrollbar { display: none; }
.zone-tabs.is-dragging { cursor: grabbing; user-select: none; }
.zone-tab { white-space: nowrap; flex-shrink: 0; display: flex; align-items: center; min-height: 42px; padding: clamp(7px, 1.8vw, 14px) clamp(20px, 5vw, 38px); border-radius: 99px; font-size: clamp(17px, 3.867vw, 29.4px); line-height: 1.2; }
.zone-tab:hover { background: #f2f3f5; }
.zone-tab[aria-current='page'] { background: #111; color: #fff; }
.tab-track { height: 2px; background: #e0e1e4; position: relative; overflow: hidden; }
.tab-thumb { position: absolute; top: 0; height: 2px; width: 30%; background: #111; }
.detail-main { display: block; }
.detail-main [id] { scroll-margin-top: calc(var(--detail-header-height, 230px) + 16px); }
.zone-hero { flex: 0 0 auto; width: 100%; height: calc(min(100vw, var(--page-width)) * .5597); object-fit: cover; object-position: center 54%; }
.zone-intro { flex: 0 0 auto; padding: clamp(28px, 7.8vw, 60px) var(--gutter) clamp(22px, 5.3vw, 40px); }
.zone-intro h1 { font-size: clamp(23px, 5.784vw, 44px); line-height: 1.28; letter-spacing: 0; }
.zone-intro .generation-heading { display: block; margin-top: 0; }
.zone-description { font-size: clamp(16px, 3.867vw, 29.4px); line-height: 1.51; color: #3f4043; margin-top: clamp(20px, 5.5vw, 42px); font-weight: 400; word-break: keep-all; overflow-wrap: break-word; }
.zone-description p + p { margin-top: clamp(14px, 3vw, 23px); }
.zone-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 14px; color: #62666e; }
.map-badge { display: inline-flex; align-items: center; gap: 7px; color: #26272a; }
.map-badge { min-height: 32px; text-decoration: underline; text-underline-offset: 4px; }
.zone-intro.compact { padding-top: clamp(25px, 5svh, 50px); background: url('../images/detail-waves.svg') center top / 100% auto no-repeat; }
.zone-intro.compact h1 { max-width: 570px; }
.zone-intro.compact .zone-description { font-size: clamp(16px, 3.6vw, 21px); max-width: 570px; }
.pending-banner { margin-top: 20px; padding: 12px 0 0; border-top: 1px solid #cbd0d7; color: #535860; font-size: 14px; line-height: 1.5; }
.vehicle-section { margin: 0 var(--gutter); border-top: 1px solid #777; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
.vehicle-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 8px 13px 0; flex: 0 0 auto; }
.vehicle-section-heading h2 { font-size: 19px; line-height: 1.2; }
.vehicle-section-heading p { color: #62666e; font-size: 14px; }
.vehicle-scroll { height: auto; max-height: none; overflow: visible; }
.vehicle-row { display: flex; align-items: flex-start; gap: 16px; padding: 21px 0; border-bottom: 1px solid #dedfe2; }
.vehicle-row-index { color: var(--pink); font-size: 16px; width: 25px; padding-top: 3px; font-weight: 700; flex: 0 0 auto; }
.vehicle-row h2, .vehicle-row h3 { font-size: clamp(20px, 4.4vw, 28px); line-height: 1.22; overflow-wrap: anywhere; }
.vehicle-row p { color: #62666e; font-size: 15px; line-height: 1.4; margin-top: 5px; }
.vehicle-footer { padding: 24px 0 12px; }
.vehicle-footer p { font-size: 14px; color: #62666e; line-height: 1.5; }
.return-link { display: inline-flex; gap: 8px; align-items: center; margin-top: 14px; min-height: 44px; font-size: 16px; text-decoration: underline; text-underline-offset: 4px; }
.return-link svg { width: 18px; height: 18px; }
.map-dialog { border: 0; border-radius: 22px; padding: 0; width: min(calc(100% - 24px), 1140px); max-height: calc(100svh - 32px); color: #111; box-shadow: 0 25px 90px #0004; }
.map-dialog::backdrop { background: #0a1524b8; backdrop-filter: blur(4px); }
.dialog-header { position: sticky; top: 0; z-index: 4; background: #fff; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; }
.dialog-header h2 { font-size: 26px; }
.dialog-header p { color: #62666e; font-size: 14px; line-height: 1.4; }
.map-pan { overflow: auto; max-height: 65svh; padding: 0 18px 16px; background: #fff; }
.map-pan .map-canvas { width: 1077px; max-width: none; }
.map-legend { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 22px 22px; }
.map-legend a { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; border: 1px solid #dce0e6; border-radius: 7px; padding: 7px 10px; font-size: 14px; }
.noscript-note { padding: 10px 20px; font-size: 14px; background: #fff; }
@media (max-width: 380px) {
	:root { --gutter: 17px; }
	.detail-topbar { gap: 0; }
	.header-language { gap: 0; }
	.header-language button { font-size: 13px; min-width: 29px; padding-inline: 3px; }
	.zone-card { padding: 12px; }
}
@media (max-height: 600px) {
	/* 가로 모드에서도 본문을 읽을 공간을 확보합니다. */
	.detail-header { padding-top: max(8px, env(safe-area-inset-top)); }
	.tab-wrap { padding-top: 8px; }
	.zone-tabs { padding-bottom: 8px; }
	.zone-tab { min-height: 36px; padding-block: 6px; font-size: 17px; }
}
/* 911 전체 본문: 아트보드 경계와 무관하게 한 페이지에서 끝까지 이어집니다. */
.timeless-page .detail-shell {
	height: auto;
	min-height: 100svh;
	overflow: visible;
	container-type: inline-size;
}
.timeless-page .detail-main { display: block; flex: none; position: relative; isolation: isolate; }
.timeless-page .detail-main::before {
	content: '';
	position: absolute;
	top: min(55.97vw, 425.37px);
	top: 55.97cqw;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background: url('../images/detail-waves.svg') center top / 100% auto no-repeat;
	pointer-events: none;
}
.timeless-page .zone-hero { height: auto; aspect-ratio: 1206 / 675; }
.timeless-page .zone-intro {
	padding: 36px 7.77% 28px 6.05%;
	padding-top: clamp(30px, 8.3cqw, 60px);
	padding-bottom: clamp(22px, 5.3cqw, 40px);
}
.timeless-page .zone-intro h1 {
	font-size: 26px;
	font-size: clamp(24px, 5.784cqw, 33px);
	line-height: 1.28;
}
.timeless-page .zone-description,
.timeless-page .generation-description {
	font-size: 17px;
	font-size: clamp(16px, 3.867cqw, 22px);
	line-height: 1.51;
	font-weight: 400;
	color: #3f4043;
	word-break: normal;
	overflow-wrap: break-word;
}
.timeless-page .zone-description { margin-top: 24px; margin-top: clamp(22px, 5.25cqw, 32px); }
.timeless-page .zone-description p + p { margin-top: 16px; margin-top: clamp(14px, 3cqw, 23px); }
.timeless-page .vehicle-section {
	display: block;
	height: auto;
	min-height: 0;
	margin: 0 7.77% 0 6.05%;
	padding-top: 28px;
	padding-top: clamp(22px, 5.8cqw, 40px);
	border-top-color: #777;
}
.generation-card + .generation-card { margin-top: 34px; margin-top: clamp(28px, 6.3cqw, 46px); }
.generation-card h2 { font-size: 23px; font-size: clamp(20px, 5.058cqw, 29px); line-height: 1.24; }
.generation-card .car-image {
	position: relative;
	margin: 14px 0 0;
	margin-top: clamp(10px, 2.75cqw, 20px);
	aspect-ratio: 1040.263 / 609.592;
	overflow: hidden;
	isolation: isolate;
	border-radius: 3.725% / 6.356%;
	background: #777;
}
.generation-card .car-scene {
	position: absolute;
	left: -3.983%;
	top: -17.043%;
	width: 110.849%;
	height: 129.267%;
	max-width: none;
	filter: brightness(.5);
}
/* 세대별 배치는 HTML의 --car-* 값에 AI 원본 좌표 비율로 기록합니다. */
.generation-card .car-cutout {
	position: absolute;
	left: var(--car-left);
	top: var(--car-top);
	width: var(--car-width);
	height: var(--car-height);
	max-width: none;
}
.generation-card .generation-description { margin-top: 23px; margin-top: clamp(20px, 5cqw, 34px); }
.timeless-page .vehicle-footer { margin-top: 30px; border-top: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}