/* Generated runtime bundle: base.css + hero.css + sections.css. Run landing/build-css.sh after editing source CSS. */
@font-face {
	font-family: "Pretendard";
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	src: url("fonts/PretendardVariable.subset.woff2") format("woff2-variations");
}

:root {
	color-scheme: light;
	--brand-50: #fbf4ee;
	--brand-100: #f7e7da;
	--brand-300: #e6ad8a;
	--brand-400: #dc8b60;
	--brand: #b4542c;
	--brand-strong: #9d4826;
	--brand-deep: #7c3820;
	--brand-2: #a9502a;
	--brand-grad: linear-gradient(135deg, #e08a5f 0%, #bd5a30 100%);
	--bg: #f4eee2;
	--bg-deep: #ece3d2;
	--surface: #fdfbf5;
	--surface-2: #f8f2e8;
	--surface-3: #f1e9da;
	--text: #2c2519;
	--text-2: #4e4535;
	--muted: #6c604c;
	--border: #e7dcc8;
	--border-strong: #d7c9af;
	--on-brand: #fdfbf5;
	--ok: #456c41;
	--ok-bg: #e8efdf;
	--warn: #815713;
	--warn-bg: #f6ecd6;
	--info: #3a6b82;
	--info-bg: #e3ecf1;
	--danger: #b0442a;
	--danger-bg: #f7e3db;
	--craft: #2a2016;
	--craft-2: #1d150d;
	--craft-text: #eee2d2;
	--craft-muted: #bba98f;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 32px;
	--space-8: 48px;
	--space-9: 64px;
	--radius-xs: 7px;
	--radius-sm: 10px;
	--radius-md: 13px;
	--radius-lg: 17px;
	--radius-xl: 22px;
	--radius-2xl: 30px;
	--radius-pill: 999px;
	--shadow-card: 0 8px 26px rgba(90, 68, 42, 0.11);
	--shadow-lg: 0 24px 60px rgba(74, 54, 34, 0.17);
	--shadow-brand: 0 10px 26px rgba(189, 90, 48, 0.28);
	--ring: 0 0 0 3px rgba(207, 111, 64, 0.3);
	--duration-fast: 140ms;
	--duration: 240ms;
	--duration-slow: 420ms;
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--text-display: clamp(32px, 4.4vw, 52px);
	--text-title: 22px;
	--text-heading: 18px;
	--text-large: 15.5px;
	--text-body: 14.5px;
	--text-small: 13px;
	--text-caption: 12px;
	--nav-height: 80px;
	--max-width: 1200px;
	--font:
		"Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
		"Malgun Gothic", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--bg: #1d1811;
		--bg-deep: #15110b;
		--surface: #282218;
		--surface-2: #312a1f;
		--surface-3: #3a3227;
		--text: #f1e9db;
		--text-2: #d5cab5;
		--muted: #aa9d84;
		--border: #3c3327;
		--border-strong: #4e4436;
		--brand: #dc8b60;
		--brand-strong: #e6ad8a;
		--brand-deep: #dc8b60;
		--on-brand: #241c12;
		--ok: #94c187;
		--ok-bg: rgba(124, 135, 103, 0.2);
		--warn: #e2b256;
		--warn-bg: rgba(224, 176, 84, 0.16);
		--info: #82adc4;
		--info-bg: rgba(58, 107, 130, 0.2);
		--danger: #e88a6f;
		--danger-bg: rgba(184, 68, 42, 0.2);
		--shadow-card: 0 10px 30px rgba(0, 0, 0, 0.5);
		--shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.62);
		--ring: 0 0 0 3px rgba(224, 138, 95, 0.42);
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--bg: #1d1811;
	--bg-deep: #15110b;
	--surface: #282218;
	--surface-2: #312a1f;
	--surface-3: #3a3227;
	--text: #f1e9db;
	--text-2: #d5cab5;
	--muted: #aa9d84;
	--border: #3c3327;
	--border-strong: #4e4436;
	--brand: #dc8b60;
	--brand-strong: #e6ad8a;
	--brand-deep: #dc8b60;
	--on-brand: #241c12;
	--ok: #94c187;
	--ok-bg: rgba(124, 135, 103, 0.2);
	--warn: #e2b256;
	--warn-bg: rgba(224, 176, 84, 0.16);
	--info: #82adc4;
	--info-bg: rgba(58, 107, 130, 0.2);
	--danger: #e88a6f;
	--danger-bg: rgba(184, 68, 42, 0.2);
	--shadow-card: 0 10px 30px rgba(0, 0, 0, 0.5);
	--shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.62);
	--ring: 0 0 0 3px rgba(224, 138, 95, 0.42);
}

* {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
	scroll-padding-top: 80px;
	-webkit-text-size-adjust: 100%;
}
body {
	margin: 0;
	overflow-x: hidden;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.65;
	letter-spacing: -0.01em;
	-webkit-font-smoothing: antialiased;
}
a {
	color: inherit;
	text-decoration: none;
}
button,
input {
	font: inherit;
}
button,
a {
	-webkit-tap-highlight-color: transparent;
}
svg {
	display: block;
	max-width: 100%;
}
h1,
h2,
h3,
p {
	margin: 0;
}
h1,
h2,
h3 {
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.04em;
	text-wrap: balance;
	word-break: keep-all;
}
p {
	text-wrap: pretty;
}

.wrap {
	width: min(100%, var(--max-width));
	margin-inline: auto;
	padding-inline: var(--space-6);
}
.section {
	padding-block: calc(var(--space-9) * 2);
	/* 진입 리빌은 요소를 가로로 밀어둔다 — 그 변위가 문서 폭을 넘기면 가로 스크롤이
	   생긴다(실제로 375px 에서 8px 넌치기 발생했다). clip 은 hidden 과 달리 스크롤
	   컨테이너를 만들지 않아 sticky 내비·스크롤 연동 연출을 깨뜨리지 않는다. */
	overflow-x: clip;
}
.section.sub {
	background: var(--surface-2);
}
.section-head {
	max-width: 800px;
	margin: 0 auto calc(var(--space-9) + var(--space-4));
	text-align: center;
}
.section-head h2 {
	margin-top: var(--space-3);
	font-size: clamp(30px, 4vw, 46px);
}
.section-head p {
	max-width: 62ch;
	margin: var(--space-4) auto 0;
	color: var(--text-2);
	font-size: 16px;
}
.eyebrow {
	color: var(--brand-strong);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
}
.eyebrow.inverse {
	color: var(--brand-300);
}
.gradient-text {
	background: var(--brand-grad);
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
}
.ic {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.svg-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: fixed;
	top: -80px;
	left: var(--space-3);
	z-index: 200;
	min-height: 44px;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-sm);
	background: var(--craft);
	color: var(--craft-text);
	font-weight: 700;
	transition: top var(--duration-fast) var(--ease);
}
.skip-link:focus {
	top: var(--space-3);
}
:focus-visible {
	outline: none;
	box-shadow: var(--ring);
}

.btn {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	cursor: pointer;
	font-weight: 800;
	line-height: 1.2;
	transition:
		transform var(--duration-fast) var(--ease),
		background-color var(--duration) var(--ease),
		border-color var(--duration) var(--ease),
		box-shadow var(--duration) var(--ease);
}
.btn:hover {
	transform: translateY(-2px);
}
.btn:active {
	transform: translateY(0) scale(0.98);
}
.btn-primary {
	background: var(--brand-strong);
	color: var(--on-brand);
	box-shadow: var(--shadow-brand);
}
.btn-primary:hover {
	background: var(--brand-deep);
}
.btn-ghost {
	background: transparent;
	color: var(--text);
	border-color: var(--border-strong);
}
.btn-ghost:hover {
	border-color: var(--brand);
	color: var(--brand-strong);
}
.btn-lg {
	min-height: 52px;
	padding-inline: var(--space-7);
	font-size: 16px;
}
.btn-sm {
	padding-inline: var(--space-4);
	font-size: 13px;
}
.btn[disabled] {
	cursor: wait;
	opacity: 0.72;
	transform: none;
}
.text-link {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	color: var(--text-2);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--border-strong);
	text-underline-offset: 4px;
}

/* 막대로 링크라 배너 높이가 그대로 탭 영역이 된다 — 44px 아래로 내려서는 안 된다. */
.announcement {
	display: flex;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding-inline: var(--space-4);
	background: var(--craft);
	color: var(--craft-text);
	font-size: var(--text-small);
	font-weight: 700;
	letter-spacing: 0;
}
.announcement .ic {
	width: 16px;
	height: 16px;
	transition: transform var(--duration-fast) var(--ease-out);
}
.announcement:hover .ic,
.announcement:focus-visible .ic {
	transform: translateX(var(--space-1));
}
.nav {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--border);
	background: color-mix(in srgb, var(--surface) 92%, transparent);
	backdrop-filter: blur(16px) saturate(150%);
	transition:
		background var(--duration) var(--ease-out),
		border-color var(--duration) var(--ease-out),
		box-shadow var(--duration) var(--ease-out);
}
/* 스크롤을 시작하면 내비가 종이에서 떨어져 본문 위로 올라온다.
   높이는 건들지 않는다 — sticky 바의 높이가 변하면 본문이 튀기 때문이다. */
:root[data-scrolled] .nav {
	border-bottom-color: var(--border-strong);
	background: color-mix(in srgb, var(--surface) 97%, transparent);
	box-shadow: var(--shadow-card);
}

/* 읽기 진행률 — assets/reveal.js 가 --scroll-progress 하나만 갱신하고
   그려지는 건 scaleX 뿐이라 매 프레임 레이아웃이 생기지 않는다.
   장식이 아니라 위치 정보라 prefers-reduced-motion 에서도 살려둔다. */
.scroll-progress {
	position: absolute;
	inset-inline: 0;
	bottom: -1px;
	height: 2px;
	overflow: hidden;
	pointer-events: none;
}
.scroll-progress::before {
	content: "";
	display: block;
	height: 100%;
	background: var(--brand-grad);
	transform: scaleX(var(--scroll-progress, 0));
	transform-origin: left center;
}
/* 모바일 섹션 칩 — 데스크톱 목차(.nav-links)가 접히는 폭에서만 나타난다.
   기본은 없는 셈 치고, 접히는 폭에서만 살린다(중복 목차 금지). */
.section-nav {
	display: none;
}
.nav-inner {
	display: flex;
	height: var(--nav-height);
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
}
/* 로고 락업 — 앱(apps/web Shell.jsx)과 동일한 새싹 마크 + 소문자 워드마크.
   색 블록 안에 글자를 넣는 대신 마크 자체가 브랜드 색을 입는다. */
.brand {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	gap: var(--space-2);
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -0.045em;
}
.nav .brand {
	color: var(--brand);
}
.brand .mark {
	display: grid;
	width: 28px;
	height: 28px;
	place-items: center;
	border-radius: 0;
	background: none;
	color: var(--brand);
	box-shadow: none;
}
.brand-letter {
	width: 26px;
	height: 26px;
	fill: currentColor;
}
.nav-links {
	display: flex;
	align-items: center;
	gap: var(--space-6);
}
.nav-links a {
	position: relative;
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	color: var(--text-2);
	font-size: 14px;
	font-weight: 700;
	transition: color var(--duration-fast) var(--ease-out);
}
.nav-links a:hover {
	color: var(--text);
}
/* 현재 읽고 있는 섹션 — 페이지가 바뀜 게 아니라 페이지 안의 위치라
   aria-current="page" 가 아니라 "location" 이다. 색 + 밑줄 이중 표기. */
.nav-links a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 16px;
	height: 2px;
	border-radius: var(--radius-pill);
	background: var(--brand);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--duration) var(--ease-out);
}
.nav-links a[aria-current="location"] {
	color: var(--brand-strong);
}
.nav-links a[aria-current="location"]::after,
.nav-links a:hover::after {
	transform: scaleX(1);
}
.nav-actions {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}
.theme-toggle {
	display: grid;
	width: 44px;
	min-height: 44px;
	place-items: center;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
	background: var(--surface);
	color: var(--text-2);
	cursor: pointer;
}
.theme-toggle:hover {
	color: var(--brand-strong);
	border-color: var(--brand);
}

/* ── 스크롤 진입 리빌 ─────────────────────────────────────
   기본값은 "보임"이다. 진입 전 상태는 :root[data-reveal="on"] 안에만 있고,
   그 플래그는 assets/reveal.js 가 "JS 가 돌고 있고 모션이 허용됨"을 확인했을
   때만 붙는다 — 스크립트가 차단되거나 실패해도 본문이 영원히 숨는 사고가
   구조적으로 일어나지 않는다. 이동은 transform/opacity 만 쓴다. */
.reveal {
	opacity: 1;
	transform: none;
}
:root[data-reveal="on"] .reveal {
	--reveal-x: 0px;
	--reveal-y: 22px;
	--reveal-scale: 1;
	opacity: 0;
	transform: translate3d(var(--reveal-x), var(--reveal-y), 0)
		scale(var(--reveal-scale));
	transition:
		opacity var(--duration-slow) var(--ease-out),
		transform var(--duration-slow) var(--ease-out);
}
:root[data-reveal="on"] .reveal[data-reveal-from="left"] {
	--reveal-x: -28px;
	--reveal-y: 0px;
}
:root[data-reveal="on"] .reveal[data-reveal-from="right"] {
	--reveal-x: 28px;
	--reveal-y: 0px;
}
:root[data-reveal="on"] .reveal[data-reveal-from="scale"] {
	--reveal-y: 14px;
	--reveal-scale: 0.97;
}
:root[data-reveal="on"] .reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* 그룹은 컬테이너가 통째로 뜸따 자식이 한 박자씩 들어온다.
   순서 인덱스는 reveal.js 가 --reveal-i 로 심고 여기서 지연으로 환산한다. */
:root[data-reveal="on"] .reveal[data-stagger] {
	opacity: 1;
	transform: none;
}
:root[data-reveal="on"] .reveal[data-stagger] > * {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transition:
		opacity var(--duration-slow) var(--ease-out),
		transform var(--duration-slow) var(--ease-out);
}
:root[data-reveal="on"] .reveal[data-stagger].is-revealed > * {
	opacity: 1;
	transform: none;
	transition-delay: calc(var(--reveal-i, 0) * 65ms);
}

@media (max-width: 760px) {
	/* 한 열로 접힌 화면에서는 좌/우 구분이 의미를 잃는다 — 수직 리빌로 통일해
	   좋은 장치에서 가로 변위 자체가 생기지 않게 한다. */
	:root[data-reveal="on"] .reveal[data-reveal-from="left"],
	:root[data-reveal="on"] .reveal[data-reveal-from="right"] {
		--reveal-x: 0px;
		--reveal-y: 22px;
	}
	.nav-links {
		display: none;
	}
	/* 접힌 목차의 대체물. sticky 내비 바로 아래에 붙어 스크롤 내내 남는다. */
	.section-nav {
		display: block;
		position: sticky;
		top: calc(var(--nav-height) - 1px);
		z-index: 90;
		border-bottom: 1px solid var(--border);
		background: color-mix(in srgb, var(--surface) 97%, transparent);
	}
	.section-nav-track {
		display: flex;
		gap: var(--space-2);
		overflow-x: auto;
		padding-inline: var(--space-5);
		scrollbar-width: none;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-inline: contain;
	}
	.section-nav-track::-webkit-scrollbar {
		display: none;
	}
	.section-nav a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding-inline: var(--space-3);
		border-bottom: 2px solid transparent;
		color: var(--text-2);
		white-space: nowrap;
		font-size: var(--text-caption);
		font-weight: 700;
		scroll-snap-align: center;
	}
	/* 현재 위치는 색 하나로 말하지 않는다 — 색·굵기·아래선 셋이 같이 바뀐다. */
	.section-nav a[aria-current="location"] {
		border-bottom-color: var(--brand);
		color: var(--brand);
		font-weight: 800;
	}
	/* 앵커로 뛸 때 칩 바에 제목이 가리지 않도록 내비 + 칩 높이만큼 비운다. */
	:root {
		scroll-padding-top: calc(var(--nav-height) + 44px);
	}
	.section {
		padding-block: calc(var(--space-9) + var(--space-6));
	}
	.wrap {
		padding-inline: var(--space-5);
	}
}
@media (max-width: 520px) {
	.announcement {
		justify-content: space-between;
		font-size: var(--text-caption);
	}
	/* 링크가 접힌 폭에서 sticky 바에 남는 건 CTA 하나뿐이다 — 그걸 숨기면
	   스크롤을 시작한 순간부터 다음 행동이 화면에서 사라진다. 폭만 줄인다. */
	.nav .btn-primary {
		padding-inline: var(--space-3);
		/* 320px 에서는 "얼리 액세스 신청"이 두 줄로 접히며 "신/청"으로 갈라졌다.
		   sticky 바에 남은 유일한 다음 행동이 깨져 보이면 신뢰부터 깎인다. */
		white-space: nowrap;
		font-size: var(--text-caption);
	}
	.section {
		padding-block: var(--space-9);
	}
	.section-head {
		margin-bottom: var(--space-8);
		text-align: left;
	}
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.reveal,
	.reveal[data-stagger] > * {
		opacity: 1;
		transform: none;
	}
	.nav-links a[aria-current="location"]::after,
	.nav-links a:hover::after {
		transform: none;
	}
}

/* ── 좁은 화면 네비: 보조 버튼을 접는다 ─────────────────────────────
   360px 에서 브랜드+테마+버튼 둘을 넣으면 버튼 안에서 글자가 줄바꿈된다
   ("둘러 / 보기", "얼리액세 / 스 신청"). 실측 가용폭 182px, 필요폭 210px.

   접는 것은 primary 가 아니라 보조(둘러보기)다. 전환 목표인 신청은 끝까지
   남는다. 데모 경로도 사라지지 않는다 — 히어로의 "먼저 둘러보기"가 같은 곳으로
   가고, 그 버튼은 접히지 않는다. */
@media (max-width: 560px) {
	.nav-demo {
		display: none;
	}
}
.hero {
	position: relative;
	min-height: 720px;
	overflow: hidden;
	background: var(--surface-2);
}
.hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(
		58% 58% at 78% 50%,
		color-mix(in srgb, var(--brand-100) 78%, transparent),
		transparent 72%
	);
}
.hero-bg::after {
	position: absolute;
	inset: 0;
	opacity: 0.14;
	background-image: radial-gradient(
		circle at center,
		var(--brand) 1px,
		transparent 1px
	);
	background-size: 24px 24px;
	mask-image: linear-gradient(
		to right,
		transparent 4%,
		black 54%,
		transparent 100%
	);
	content: "";
}
.hero-inner {
	position: relative;
	z-index: 1;
	display: grid;
	min-height: 720px;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	align-items: center;
}
.hero-copy {
	max-width: 560px;
	padding: calc(var(--space-9) + var(--space-7)) var(--space-8)
		calc(var(--space-9) + var(--space-7)) 0;
	text-align: left;
}
.pill {
	display: inline-flex;
	min-height: 36px;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-6);
	padding: var(--space-2) var(--space-4);
	border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--border));
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--brand) 9%, var(--surface));
	color: var(--brand-strong);
	font-size: 12px;
	font-weight: 800;
}
.pill .ic {
	width: 16px;
	height: 16px;
}
.hero h1 {
	max-width: 12ch;
	font-size: clamp(42px, 4.4vw, 56px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.055em;
}
.hero h1.hero-in {
	opacity: 1;
	translate: none;
	animation: none;
}
.hero .gradient-text {
	background: none;
	color: var(--brand-strong);
	-webkit-text-fill-color: currentColor;
}
.hero-lead {
	max-width: 52ch;
	margin: var(--space-6) 0 0;
	color: var(--text-2);
	font-size: 17px;
	line-height: 1.7;
	word-break: keep-all;
}
.hero-cta {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-5);
	margin-top: var(--space-7);
}
.hero-note {
	max-width: 54ch;
	margin-top: var(--space-4);
	color: var(--muted);
	font-size: 13px;
}
/* 진입 연출은 transform 이 아니라 독립 속성 translate 만 건드린다.
   transform 을 쓰면 forwards 로 고정된 `transform: none` 이 같은 요소의
   자신의 transform 을 통째로 덮어쓴다 — .product-frame 의 원근 기울기가
   그렇게 사라졌다. 합성 계층은 그대로라 성능은 동일하다. */
.hero-in {
	opacity: 0;
	translate: 0 16px;
	animation: hero-enter 640ms var(--ease-out) forwards;
}
.hero-in.d1 {
	animation-delay: 60ms;
}
.hero-in.d2 {
	animation-delay: 120ms;
}
.hero-in.d3 {
	animation-delay: 180ms;
}
.hero-in.d4 {
	animation-delay: 240ms;
}
@keyframes hero-enter {
	to {
		opacity: 1;
		translate: none;
	}
}

/* 기울기는 오른쪽 모서리를 보는 사람 쪽으로 당기므로(rotateY 음수) 투사 폭이
   실제 폭보다 커진다. 거기에 고정 760px 까지 겹치면 1280~1500px 구간에서
   워크스페이스의 오른쪽(“초안 4개”·“초안생성”)이 화면 밖으로 잘렸다.
   칼럼을 넘지 않게 두고 깊이만 기울기로 만든다. */
.product-frame {
	width: min(760px, 100%);
	max-width: none;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-xl);
	background: var(--surface);
	box-shadow: var(--shadow-lg);
	transform: perspective(1200px) rotateY(-6deg) rotateX(2deg);
	transform-origin: left center;
}
.frame-bar {
	display: flex;
	height: 44px;
	align-items: center;
	gap: var(--space-2);
	padding-inline: var(--space-4);
	border-bottom: 1px solid var(--border);
	background: var(--surface-2);
}
.frame-bar span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--border-strong);
}
.frame-bar b {
	width: 200px;
	margin: 0 auto;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-xs);
	background: var(--surface-3);
	color: var(--text-2);
	font-size: 11px;
	font-weight: 600;
	text-align: center;
}
.demo-shell {
	display: grid;
	grid-template-columns: 64px 1fr;
	min-height: 500px;
	background: var(--surface-2);
}
.demo-nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
	padding-top: var(--space-5);
	border-right: 1px solid var(--border);
	background: var(--craft);
}
/* 목업 사이드바 로고도 앱·네비게이션과 같은 새싹 마크 — 색 블록 안의 글자 대신 글리프가 브랜드 색을 입는다. */
.demo-logo {
	display: grid;
	width: 32px;
	height: 32px;
	place-items: center;
	border-radius: var(--radius-sm);
	background: none;
	color: var(--brand-400);
	font-weight: 900;
}
.demo-logo svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}
.demo-nav i {
	width: 24px;
	height: 4px;
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--craft-text) 28%, transparent);
}
.demo-nav i.active {
	background: var(--brand-300);
}
.demo-main {
	min-width: 0;
	padding: var(--space-7);
}
.demo-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}
.demo-head div {
	display: grid;
	gap: var(--space-1);
}
.demo-head small,
.metric-card small {
	color: var(--muted);
	font-size: 11px;
	font-weight: 700;
}
.demo-head strong {
	font-size: 18px;
}
.draft-badge {
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	background: var(--warn-bg);
	color: var(--text-2);
	font-size: 11px;
	font-weight: 800;
}
.prompt-card {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-5);
	padding: var(--space-4);
	border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border));
	border-radius: var(--radius-md);
	background: var(--surface);
	box-shadow: var(--shadow-card);
}
.prompt-card .ic {
	color: var(--brand);
}
.prompt-card p {
	overflow: hidden;
	color: var(--text-2);
	font-size: 13px;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.prompt-card span {
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	background: var(--brand-strong);
	color: var(--on-brand);
	font-size: 11px;
	font-weight: 800;
}
.slide-deck {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-3);
	margin-top: var(--space-5);
}
.slide {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	min-height: 170px;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface);
	box-shadow: var(--shadow-card);
}
.slide-art {
	display: block;
	width: 100%;
	height: calc(var(--space-6) * 4);
	object-fit: cover;
}
.slide-copy {
	position: relative;
	display: flex;
	min-height: 0;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--space-3);
}
.slide.cover {
	background: var(--craft);
	color: var(--craft-text);
}
.slide small {
	margin-bottom: var(--space-2);
	color: var(--muted);
	font-size: 9px;
	font-weight: 800;
}
.slide.cover small {
	color: var(--brand-300);
}
.slide b {
	font-size: 13px;
	line-height: 1.45;
}
.slide span {
	position: absolute;
	right: var(--space-3);
	bottom: var(--space-2);
	color: var(--muted);
	font-size: 9px;
}
/* 커버 카드는 어두운 --craft 바닥이라 밝은 테마의 --muted 를 그대로 쓰면 대비가
   무너진다(axe serious). 이 바닥을 위해 준비된 --craft-muted 를 쓴다. */
.slide.cover span {
	color: var(--craft-muted);
}
.metric-card {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-3) var(--space-6);
	margin-top: var(--space-5);
	padding: var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface);
}
.metric-card div:first-child {
	display: grid;
}
.metric-card b {
	color: var(--ok);
	font-size: 24px;
	font-variant-numeric: tabular-nums;
}
.metric-bars {
	display: flex;
	height: 42px;
	align-items: end;
	gap: var(--space-2);
}
.metric-bars i {
	flex: 1;
	border-radius: var(--radius-xs) var(--radius-xs) 0 0;
	background: var(--brand-300);
}
.metric-bars i:nth-child(1) {
	height: 32%;
}
.metric-bars i:nth-child(2) {
	height: 46%;
}
.metric-bars i:nth-child(3) {
	height: 58%;
}
.metric-bars i:nth-child(4) {
	height: 72%;
}
.metric-bars i:nth-child(5) {
	height: 88%;
	background: var(--brand);
}
.metric-card p {
	grid-column: 1 / -1;
	color: var(--muted);
	font-size: 10px;
}

.trust-strip {
	border-block: 1px solid var(--border);
	background: var(--surface);
}
.trust-strip .wrap {
	display: flex;
	min-height: 96px;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4) var(--space-7);
	flex-wrap: wrap;
}
.trust-strip span {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--text-2);
	font-size: 13px;
	font-weight: 700;
}
.trust-strip .ic {
	width: 17px;
	height: 17px;
	color: var(--brand-strong);
}

@media (max-width: 980px) {
	.hero {
		min-height: auto;
	}
	/*
	  1fr 로 접을 때 minmax(0,…) 를 잃으면 트랙이 자식의 min-content 까지
	  밀려 올라간다. 히어로 폼 안 input 의 고유 폭(287px)이 트랙을 323px 로
	  고정시켜 뷰포트 363px 미만에서 초과분이 body{overflow-x:hidden} 에 잘렸다
	  — 갤럭시(360px)·SE(320px) 에서 제목과 본문이 화면 밖으로 사라진다.
	  가로 스크롤도 안 생기므로 사용자가 되찾을 방법이 없었다.
	*/
	.hero-inner {
		min-height: auto;
		grid-template-columns: minmax(0, 1fr);
	}
	.hero-copy {
		min-width: 0;
		max-width: 720px;
		padding: calc(var(--space-9) + var(--space-6)) 0 var(--space-8);
	}
	.product-frame {
		width: min(100%, 860px);
		margin: 0 auto var(--space-9);
		transform: none;
	}
}
@media (max-width: 760px) {
	.hero-copy {
		padding-top: var(--space-9);
	}
	.hero-cta {
		flex-direction: column;
		gap: var(--space-2);
	}
	.hero-cta .btn,
	.hero-cta .text-link {
		width: 100%;
		justify-content: center;
	}
	.demo-shell {
		grid-template-columns: 44px 1fr;
		min-height: 410px;
	}
	.demo-main {
		padding: var(--space-4);
	}
	.slide-deck {
		grid-template-columns: repeat(4, minmax(116px, 1fr));
		overflow-x: auto;
		padding-bottom: var(--space-2);
		scroll-snap-type: x mandatory;
	}
	.slide {
		min-height: 150px;
		scroll-snap-align: start;
	}
	.metric-card {
		grid-template-columns: 1fr;
	}
	.metric-bars,
	.metric-card p {
		grid-column: 1;
	}
}
@media (max-width: 600px) {
	.hero h1 {
		font-size: 40px;
	}
	.hero-lead {
		font-size: 16px;
	}
	.product-frame {
		width: 116%;
		margin-left: -8%;
	}
	.frame-bar b {
		width: 140px;
	}
	.demo-head {
		align-items: flex-start;
	}
	.prompt-card {
		grid-template-columns: auto 1fr;
	}
	.prompt-card span {
		grid-column: 1 / -1;
		text-align: center;
	}
	.trust-strip .wrap {
		justify-content: flex-start;
		padding-block: var(--space-5);
	}
}
@media (prefers-reduced-motion: reduce) {
	/* 거두는 건 이동뿐이다. .product-frame 의 원근 기울기는 움직이지 않는
	   정적 스타일이라 모션 선호와 무관하게 남아야 한다. */
	.hero-in {
		opacity: 1;
		translate: none;
		animation: none;
	}
}

/* ── 히어로 이메일 캡처 ─────────────────────────────────────────────
   신청 폼이 페이지 맨 아래에만 있어서 전환하려면 15.3화면을 스크롤해야 했다.
   여기서 주소를 먼저 받고 실제 폼으로 넘긴다.

   토큰만 쓴다(design.md 금지 4·5). 여백은 4px 스케일. */
.hero-capture {
	display: flex;
	gap: var(--space-2);
	margin-top: var(--space-6);
	width: min(520px, 100%);
	flex-wrap: wrap;
}
.hero-capture input {
	flex: 1 1 160px;
	min-width: 0; /* flex 자식이 placeholder 폭에 밀려 넘치는 것 방지 */
	height: 52px; /* btn-lg 와 같은 높이 — 나란히 서면 밑선이 맞아야 한다 */
	padding: 0 var(--space-4);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--surface);
	color: var(--text);
	font: inherit;
	font-size: var(--text-large);
}
.hero-capture input::placeholder {
	color: var(--muted);
}
.hero-capture input:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
	border-color: var(--brand);
}
.hero-capture input[aria-invalid="true"] {
	border-color: var(--danger);
}
.hero-capture .btn {
	flex: 0 0 auto;
}

/* 둘러보기는 약속이라 없애지 않는다(design.md §공개 인증 라우트).
   다만 전환 목표가 아니므로 시각 위계를 한 단계 낮춘다. */
.hero-cta {
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-4);
}
.hero-cta-aside {
	font-size: var(--text-small);
	color: var(--muted);
}

@media (max-width: 520px) {
	.hero-capture {
		gap: var(--space-3);
	}
	.hero-capture input,
	.hero-capture .btn {
		flex: 1 1 100%;
	}
}

/* ── 히어로 신뢰 신호 ───────────────────────────────────────────────
   고객 수·로고·후기가 하나도 없다(실제로 0명이다). 지어내지 않고,
   대신 "주소를 주면 무슨 일이 생기는가"를 행동 바로 옆에서 답한다.
   안 하는 것을 밝히는 문장은 검증 가능해서 후기보다 싸구려가 아니다.

   마커는 신청 섹션과 같은 언어(— + brand-300)를 쓴다. */
.hero-trust {
	display: grid;
	gap: var(--space-1);
	margin: var(--space-4) 0 0;
	padding: 0;
	list-style: none;
	color: var(--muted);
	font-size: var(--text-small);
}
.hero-trust li::before {
	content: "—";
	margin-right: var(--space-2);
	color: var(--brand-300);
}
.workflow-list {
	display: grid;
	gap: 112px;
}
.workflow-row,
.workflow-row.reverse {
	display: grid;
	grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
	align-items: center;
	gap: calc(var(--space-9) + var(--space-4));
}
.workflow-copy {
	order: 1;
	max-width: 440px;
}
.workflow-visual,
.workflow-row.reverse .workflow-visual {
	order: 2;
}
.workflow-visual {
	display: grid;
	min-height: 440px;
	place-items: center;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--radius-2xl);
	background: linear-gradient(145deg, var(--brand-50), var(--surface-3));
}
.workflow-copy > span {
	color: var(--brand-strong);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
}
.workflow-copy h3 {
	margin-top: var(--space-2);
	font-size: clamp(28px, 3vw, 38px);
}
.workflow-copy > p {
	margin-top: var(--space-4);
	color: var(--text-2);
	font-size: 16px;
}
.workflow-copy ul {
	display: grid;
	gap: var(--space-3);
	margin: var(--space-6) 0 0;
	padding: 0;
	list-style: none;
}
.workflow-copy li {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	color: var(--text-2);
	font-size: 14px;
}
.workflow-copy li::before {
	content: "";
	width: 7px;
	height: 7px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--brand);
}
.workflow-photo-visual {
	display: block;
	width: 100%;
	min-width: 0;
	aspect-ratio: 3 / 2;
	background: var(--surface-3);
}
.workflow-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* 스크롤 연동 시차 — JS 없이, 지원하는 브라우저에서만 붙는다.
   프레임(.workflow-visual)이 overflow:hidden 이라 사진만 안쪽에서 미세하게 흔른다.
   먼저 확대해두지 않으면 이동한 만큼 가장자리에 빈 틈이 생긴다. transform 만 쓴다. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.workflow-photo {
			animation: photo-drift linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 100%;
		}
	}
}
@keyframes photo-drift {
	from {
		transform: scale(1.12) translate3d(0, -2.2%, 0);
	}
	to {
		transform: scale(1.12) translate3d(0, 2.2%, 0);
	}
}
.output-visual {
	grid-template-columns: auto auto;
	gap: var(--space-6);
	padding: var(--space-7);
}
.mini-stack {
	position: relative;
	width: 190px;
	height: 230px;
}
.mini-card {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: var(--surface);
	box-shadow: var(--shadow-card);
	transform: translate(
			calc(var(--n) * var(--space-3)),
			calc(var(--n) * var(--space-2))
		)
		rotate(calc((var(--n) - 2) * 2deg));
}
.mini-card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mini-card:nth-child(1) {
	--n: 0;
}
.mini-card:nth-child(2) {
	--n: 1;
}
.mini-card:nth-child(3) {
	--n: 2;
}
.mini-card:nth-child(4) {
	--n: 3;
}
.output-list {
	display: grid;
	gap: var(--space-2);
}
.output-list span {
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface);
	color: var(--text-2);
	font-size: 12px;
	font-weight: 700;
	box-shadow: var(--shadow-card);
}
.cardnews-section {
	position: relative;
	overflow: clip;
	background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}
.cardnews-head {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(
			calc(var(--space-9) * 4),
			0.85fr
		);
	align-items: end;
	gap: var(--space-8);
	max-width: none;
	margin: 0 0 var(--space-8);
	text-align: left;
}
.cardnews-head h2 {
	max-width: 14ch;
	margin-top: var(--space-3);
	font-size: clamp(32px, 4vw, 48px);
}
.cardnews-head p {
	max-width: 36ch;
	margin: 0;
	color: var(--text-2);
	font-size: var(--text-large);
}
.cardnews-flow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: var(--space-4);
	padding-block: var(--space-5);
	border-block: 1px solid var(--border-strong);
}
.cardnews-flow div {
	min-width: 0;
}
.cardnews-flow span,
.story-copy > span {
	display: block;
	color: var(--brand-strong);
	font-size: var(--text-caption);
	font-weight: 800;
	letter-spacing: 0.08em;
}
.cardnews-flow strong {
	display: block;
	margin-top: var(--space-2);
	font-size: var(--text-small);
	line-height: 1.45;
}
.cardnews-flow .ic {
	color: var(--brand);
}
.cardnews-deck {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: start;
	gap: var(--space-4);
	margin: var(--space-8) 0 0;
	padding: 0;
	list-style: none;
}
.story-card {
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-card);
}
.story-card:nth-child(even) {
	transform: translateY(var(--space-4));
}
.story-visual {
	margin: 0;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--surface-3);
}
.story-visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.story-copy {
	min-height: calc(var(--space-9) * 3);
	padding: var(--space-5);
}
.story-copy h3 {
	margin-top: var(--space-3);
	font-size: var(--text-heading);
	line-height: 1.3;
}
.story-copy p {
	margin-top: var(--space-3);
	color: var(--text-2);
	font-size: var(--text-small);
	line-height: 1.6;
}
.cardnews-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin: calc(var(--space-8) + var(--space-4)) 0 0;
	color: var(--muted);
	font-size: var(--text-caption);
	text-align: center;
}
.cardnews-note .ic {
	color: var(--brand-strong);
}

.capability-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: var(--border);
}
.capability-grid article {
	min-height: 240px;
	padding: var(--space-8);
	background: var(--surface);
}
.capability-grid .ic {
	width: 28px;
	height: 28px;
	color: var(--brand-strong);
}
.capability-grid h3 {
	margin-top: var(--space-6);
	font-size: 19px;
}
.capability-grid p {
	margin-top: var(--space-2);
	color: var(--text-2);
	font-size: 14px;
}
.usecase-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-4);
}
.usecase-grid article {
	min-height: 180px;
	padding: var(--space-7);
	border: 1px solid var(--border);
	border-top: 2px solid var(--brand);
	border-radius: var(--radius-lg);
	background: var(--surface);
}
.usecase-grid h3 {
	font-size: 16px;
}
.usecase-grid p {
	margin-top: var(--space-2);
	color: var(--text-2);
	font-size: 13px;
}

.compare-scroll {
	overflow-x: auto;
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: var(--surface);
}
.compare {
	width: 100%;
	min-width: 700px;
	border-collapse: collapse;
}
.compare th,
.compare td {
	padding: var(--space-4) var(--space-5);
	border-bottom: 1px solid var(--border);
	text-align: center;
}
.compare th:first-child {
	text-align: left;
}
.compare thead th {
	color: var(--muted);
	font-size: 12px;
	font-weight: 800;
}
.compare tbody th {
	color: var(--text);
	font-size: 13px;
}
.compare .col-us {
	background: var(--surface);
	box-shadow:
		inset 1px 0 var(--brand-100),
		inset -1px 0 var(--brand-100);
}
.compare thead .col-us {
	color: var(--brand-strong);
	background: color-mix(in srgb, var(--brand) 12%, var(--surface));
}
.cell {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}
.cell .ic {
	width: 15px;
	height: 15px;
}
.cell.yes {
	color: var(--ok);
}
.cell.part {
	color: var(--warn);
}
.cell.no {
	color: var(--muted);
}
.compare-note {
	margin-top: var(--space-4);
	color: var(--muted);
	font-size: 11px;
	text-align: center;
}

.integrity-panel {
	display: grid;
	min-height: 560px;
	grid-template-columns: 0.85fr 1.15fr;
	align-items: center;
	gap: calc(var(--space-9) + var(--space-6));
	padding: calc(var(--space-9) + var(--space-7));
	border-radius: var(--radius-2xl);
	background: var(--craft);
	color: var(--craft-text);
	box-shadow: var(--shadow-lg);
}
.integrity-panel h2 {
	margin-top: var(--space-3);
	font-size: clamp(32px, 4vw, 46px);
}
.integrity-panel > div > p {
	margin-top: var(--space-4);
	color: var(--craft-muted);
}
.integrity-panel ul {
	display: grid;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.integrity-panel li {
	display: flex;
	gap: var(--space-4);
	padding: var(--space-4);
	border: 1px solid color-mix(in srgb, var(--craft-text) 14%, transparent);
	border-radius: var(--radius-lg);
	background: color-mix(in srgb, var(--craft-text) 6%, transparent);
}
.integrity-panel li .ic {
	margin-top: var(--space-1);
	color: var(--brand-300);
}
.integrity-panel li span {
	color: var(--craft-muted);
	font-size: 13px;
}
.integrity-panel li b {
	display: block;
	color: var(--craft-text);
	font-size: 14px;
}

.pricing-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5);
	max-width: 800px;
	margin-inline: auto;
}
.price-card {
	display: flex;
	min-height: 320px;
	flex-direction: column;
	padding: var(--space-7);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: var(--surface);
}
.price-card.featured {
	border-color: var(--brand);
	box-shadow: var(--shadow-card);
}
.price-label {
	width: fit-content;
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-xs);
	background: color-mix(in srgb, var(--brand) 12%, var(--surface));
	color: var(--brand-strong);
	font-size: 10px;
	font-weight: 800;
}
.price-card h3 {
	margin-top: var(--space-5);
	font-size: 18px;
}
.price-card .price {
	margin-top: var(--space-2);
	color: var(--text);
	font-size: 30px;
	font-weight: 800;
}
.price-card > p:not(.price) {
	margin-top: var(--space-4);
	color: var(--text-2);
	font-size: 14px;
}
.price-card .btn {
	width: 100%;
	margin-top: auto;
}

.faq {
	display: grid;
	max-width: 780px;
	margin-inline: auto;
	border-top: 1px solid var(--border);
}
.faq details {
	border-bottom: 1px solid var(--border);
}
.faq summary {
	display: flex;
	min-height: 64px;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	cursor: pointer;
	list-style: none;
	font-size: 15px;
	font-weight: 800;
}
.faq summary::-webkit-details-marker {
	display: none;
}
.faq summary .ic {
	color: var(--brand-strong);
	transition: transform var(--duration) var(--ease);
}
.faq details[open] summary .ic {
	transform: rotate(180deg);
}
.faq details p {
	padding: 0 var(--space-8) var(--space-5) 0;
	color: var(--text-2);
	font-size: 14px;
}
.trust-card {
	display: grid;
	grid-template-columns: 1.1fr 1fr auto;
	align-items: center;
	gap: var(--space-7);
	padding: var(--space-8);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: var(--surface);
}
.trust-card h2 {
	margin-top: var(--space-2);
	font-size: clamp(27px, 3vw, 36px);
}
.trust-card > p {
	color: var(--text-2);
}

.waitlist-section {
	padding-block: calc(var(--space-9) * 2);
	background: var(--craft);
	color: var(--craft-text);
}
.waitlist-grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	align-items: center;
	gap: 80px;
}
.waitlist-copy h2 {
	margin-top: var(--space-3);
	font-size: clamp(34px, 4vw, 48px);
}
.waitlist-copy > p {
	margin-top: var(--space-5);
	color: var(--craft-muted);
	font-size: 16px;
}
.waitlist-copy ul {
	display: grid;
	gap: var(--space-2);
	margin: var(--space-6) 0 0;
	padding: 0;
	color: var(--craft-muted);
	font-size: 13px;
	list-style: none;
}
.waitlist-copy li::before {
	content: "—";
	margin-right: var(--space-2);
	color: var(--brand-300);
}
.waitlist-card {
	padding: var(--space-7);
	border: 1px solid color-mix(in srgb, var(--craft-text) 18%, transparent);
	border-radius: var(--radius-xl);
	background: var(--surface);
	color: var(--text);
	box-shadow: var(--shadow-lg);
}
.form-intro {
	font-size: 19px;
	font-weight: 800;
}
.field {
	margin-top: var(--space-5);
}
.field label {
	display: block;
	font-size: 13px;
	font-weight: 800;
}
.field-help {
	margin-top: var(--space-1);
	color: var(--muted);
	font-size: 11px;
}
.field input {
	width: 100%;
	min-height: 48px;
	margin-top: var(--space-2);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
	background: var(--surface);
	color: var(--text);
}
.field input:focus {
	border-color: var(--brand);
	box-shadow: var(--ring);
	outline: none;
}
.field input[aria-invalid="true"] {
	border-color: var(--danger);
}
.field-error {
	margin-top: var(--space-2);
	color: var(--danger);
	font-size: 12px;
	font-weight: 700;
}
.consent {
	display: grid;
	min-height: 44px;
	grid-template-columns: 20px 1fr;
	gap: var(--space-3);
	margin-top: var(--space-4);
	color: var(--text-2);
	font-size: 12px;
	cursor: pointer;
}
.consent input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--brand);
}
.consent b {
	color: var(--text);
}
.privacy-copy {
	margin-top: var(--space-4);
	color: var(--muted);
	font-size: 11px;
}
.privacy-copy a {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	color: var(--brand-strong);
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.submit-btn {
	width: 100%;
	margin-top: var(--space-5);
}
.btn-spinner {
	display: none;
	width: 15px;
	height: 15px;
	border: 2px solid color-mix(in srgb, var(--on-brand) 35%, transparent);
	border-top-color: var(--on-brand);
	border-radius: 50%;
	animation: spin 700ms linear infinite;
}
.submit-btn[aria-busy="true"] .btn-spinner {
	display: inline-block;
}
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}
.form-status {
	min-height: 24px;
	margin-top: var(--space-3);
	color: var(--text-2);
	font-size: 12px;
	text-align: center;
}
.form-status.error {
	color: var(--danger);
}
.honeypot {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.waitlist-success {
	padding-block: var(--space-8);
	text-align: center;
}
.waitlist-success .ic {
	width: 40px;
	height: 40px;
	margin: 0 auto;
	padding: var(--space-2);
	border-radius: 50%;
	background: var(--ok-bg);
	color: var(--ok);
}
.waitlist-success h3 {
	margin-top: var(--space-4);
	font-size: 23px;
}
.waitlist-success p {
	margin-top: var(--space-3);
	color: var(--text-2);
}

footer {
	padding-block: calc(var(--space-9) + var(--space-7)) var(--space-7);
	border-top: 1px solid color-mix(in srgb, var(--craft-text) 14%, transparent);
	background: var(--craft);
}
.foot-grid {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--space-7);
	align-items: start;
}
.foot-grid .brand {
	color: var(--craft-text);
}
.foot-grid > div p {
	max-width: 420px;
	margin-top: var(--space-2);
	color: var(--craft-muted);
	font-size: 12px;
}
.foot-grid nav {
	display: flex;
	gap: var(--space-2);
}
/* 탭 영역은 min-width 가 아니라 좌우 여백으로 벌린다. min-width 는 짧은
   라벨(“문의”)에만 여유를 붙여 링크 사이 시각 간격이 제각각이 된다 —
   여백은 모든 링크에 똑같이 붙어 리듬이 유지된다. */
.foot-grid nav a {
	display: inline-flex;
	min-height: 44px;
	padding-inline: var(--space-3);
	align-items: center;
	justify-content: center;
	color: var(--craft-muted);
	font-size: 12px;
	font-weight: 700;
}
.foot-grid nav a:hover {
	color: var(--craft-text);
}
.copyright {
	grid-column: 1 / -1;
	padding-top: var(--space-5);
	border-top: 1px solid color-mix(in srgb, var(--craft-text) 14%, transparent);
	color: var(--craft-muted);
	font-size: 11px;
}
.footer-wordmark {
	grid-column: 1 / -1;
	overflow: hidden;
	color: var(--craft-text);
	font-size: clamp(72px, 17vw, 204px);
	font-weight: 900;
	line-height: 0.78;
	letter-spacing: -0.08em;
	white-space: nowrap;
}

.route-page {
	min-height: 100dvh;
	background: var(--bg);
}
.route-page .route-nav-shell {
	view-transition-name: route-navigation;
}
.route-current {
	color: var(--muted);
	font-size: var(--text-caption);
	font-weight: 800;
	letter-spacing: 0.04em;
}
.route-main {
	position: relative;
	isolation: isolate;
}
.route-main::before {
	position: absolute;
	z-index: -1;
	inset: 0 0 auto;
	min-height: 32rem;
	background: radial-gradient(
		circle at 82% 12%,
		color-mix(in srgb, var(--brand-100) 74%, transparent),
		transparent 64%
	);
	content: "";
	pointer-events: none;
}
.route-hero {
	padding-block: var(--space-9) var(--space-8);
}
.route-hero-copy {
	max-width: 52rem;
	animation: route-rise var(--duration-slow) var(--ease-out) both;
}
.route-hero h1 {
	max-width: 20ch;
	margin-top: var(--space-3);
	font-size: var(--text-display);
}
.route-lead {
	max-width: 64ch;
	margin-top: var(--space-5);
	color: var(--text-2);
	font-size: var(--text-large);
}
.route-notice {
	display: grid;
	max-width: 48rem;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: var(--space-4);
	margin-top: var(--space-7);
	padding: var(--space-4);
	border: 1px solid color-mix(in srgb, var(--warn) 32%, var(--border));
	border-radius: var(--radius-lg);
	background: var(--warn-bg);
}
.route-notice > .ic {
	width: 44px;
	height: 44px;
	padding: var(--space-3);
	border-radius: var(--radius-md);
	background: color-mix(in srgb, var(--warn) 12%, transparent);
	color: var(--warn);
}
.route-notice strong {
	color: var(--text);
	font-size: var(--text-small);
}
.route-notice p {
	margin-top: var(--space-1);
	color: var(--text-2);
	font-size: var(--text-small);
}
.route-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: var(--space-8) 0 0;
	border-block: 1px solid var(--border);
	animation: route-rise var(--duration-slow) var(--ease-out) both;
	animation-delay: var(--duration-fast);
}
.route-facts > div {
	display: grid;
	grid-template-areas: "icon term" "icon description";
	grid-template-columns: 44px minmax(0, 1fr);
	align-items: center;
	gap: var(--space-1) var(--space-4);
	padding: var(--space-6);
}
.route-facts > div + div {
	border-left: 1px solid var(--border);
}
.route-fact-icon {
	display: grid;
	width: 44px;
	height: 44px;
	grid-area: icon;
	place-items: center;
	border-radius: var(--radius-md);
	background: var(--brand-100);
	color: var(--brand-strong);
}
.route-fact-icon .ic {
	width: 19px;
	height: 19px;
}
.route-facts dt {
	grid-area: term;
	color: var(--muted);
	font-size: var(--text-caption);
	font-weight: 800;
}
.route-facts dd {
	grid-area: description;
	margin: 0;
	color: var(--text);
	font-size: var(--text-body);
	font-weight: 800;
}
.legal-layout {
	display: grid;
	grid-template-columns: minmax(11rem, 0.32fr) minmax(0, 1fr);
	gap: var(--space-9);
	padding-bottom: var(--space-9);
	animation: route-rise var(--duration-slow) var(--ease-out) both;
	animation-delay: var(--duration);
}
.legal-index {
	position: sticky;
	top: calc(var(--nav-height) + var(--space-7));
	align-self: start;
}
.legal-index > p {
	color: var(--muted);
	font-size: var(--text-caption);
	font-weight: 800;
	letter-spacing: 0.08em;
}
.legal-index nav {
	display: grid;
	margin-top: var(--space-3);
	border-left: 1px solid var(--border-strong);
}
.legal-index a {
	display: flex;
	min-height: 44px;
	align-items: center;
	padding-inline: var(--space-4);
	color: var(--muted);
	font-size: var(--text-small);
	font-weight: 700;
	transition:
		color var(--duration-fast) var(--ease),
		transform var(--duration-fast) var(--ease);
}
.legal-index a:hover,
.legal-index a:focus-visible {
	color: var(--brand-strong);
	transform: translateX(var(--space-1));
}
.legal-content {
	min-width: 0;
	border-top: 1px solid var(--border);
}
.legal-section {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr);
	gap: var(--space-6);
	padding-block: var(--space-8);
	border-bottom: 1px solid var(--border);
	scroll-margin-top: calc(var(--nav-height) + var(--space-6));
}
.section-index {
	padding-top: var(--space-1);
	color: var(--brand-strong);
	font-size: var(--text-caption);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
.legal-section h2 {
	font-size: var(--text-heading);
}
.legal-section p {
	max-width: 66ch;
	margin-top: var(--space-3);
	color: var(--text-2);
}
.legal-section p a {
	color: var(--brand-strong);
	font-weight: 800;
	text-decoration: underline;
	text-decoration-color: var(--border-strong);
	text-underline-offset: 4px;
}
.contact-panel {
	margin-top: var(--space-4);
	padding-inline: var(--space-7);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: var(--surface);
	box-shadow: var(--shadow-card);
}
.contact-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-6);
}
.contact-meta span {
	color: var(--muted);
	font-size: var(--text-caption);
}
.route-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-7);
}
.route-footer {
	border-top: 1px solid var(--border);
	background: var(--surface-2);
}
.route-footer-inner {
	display: flex;
	min-height: calc(var(--space-9) + var(--space-6));
	align-items: center;
	justify-content: space-between;
	gap: var(--space-7);
}
.route-footer p {
	color: var(--muted);
	font-size: 11px;
}
.route-footer nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
}
.route-footer a {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	color: var(--text-2);
	font-size: var(--text-caption);
	font-weight: 700;
}
.route-footer a:hover {
	color: var(--brand-strong);
}

.route-page--success .route-main {
	display: grid;
	min-height: calc(100dvh - var(--nav-height));
	align-items: center;
	padding: var(--space-9) var(--space-6);
}
.route-page--success .route-main::before {
	min-height: 100%;
	background:
		radial-gradient(
			circle at 18% 18%,
			color-mix(in srgb, var(--brand-100) 82%, transparent),
			transparent 48%
		),
		radial-gradient(
			circle at 88% 72%,
			color-mix(in srgb, var(--surface-3) 80%, transparent),
			transparent 42%
		);
}
.success-shell {
	display: grid;
	width: min(100%, var(--max-width));
	grid-template-columns: 1.05fr 0.95fr;
	margin-inline: auto;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--radius-2xl);
	background: var(--surface);
	box-shadow: var(--shadow-lg);
	animation: route-rise var(--duration-slow) var(--ease-out) both;
}
.success-intro,
.success-details {
	padding: var(--space-9);
}
.success-intro {
	display: flex;
	min-width: 0;
	flex-direction: column;
	justify-content: center;
}
.success-details {
	background: var(--surface-2);
}
.success-mark {
	display: grid;
	width: var(--space-9);
	height: var(--space-9);
	place-items: center;
	border-radius: 50%;
	background: var(--ok-bg);
	color: var(--ok);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--ok) 26%, transparent);
	animation: status-in var(--duration-slow) var(--ease-out) both;
	animation-delay: var(--duration-fast);
}
.success-mark .ic {
	width: 30px;
	height: 30px;
	stroke-width: 2.2;
}
.status-label {
	margin-top: var(--space-6);
	color: var(--ok);
	font-size: var(--text-caption);
	font-weight: 800;
	letter-spacing: 0.04em;
}
.success-intro h1 {
	max-width: 10ch;
	margin-top: var(--space-2);
	font-size: var(--text-display);
}
.success-lead {
	max-width: 52ch;
	margin-top: var(--space-5);
	color: var(--text-2);
	font-size: var(--text-large);
}
.success-contact {
	margin-top: var(--space-7);
	color: var(--muted);
	font-size: var(--text-caption);
}
.success-contact a {
	color: var(--brand-strong);
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.next-steps h2 {
	margin-top: var(--space-2);
	font-size: var(--text-title);
}
.route-timeline {
	display: grid;
	gap: var(--space-5);
	margin: var(--space-7) 0 0;
	padding: 0;
	list-style: none;
}
.route-timeline li {
	position: relative;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--space-3);
}
.route-timeline li:not(:last-child)::after {
	position: absolute;
	top: 44px;
	bottom: calc(var(--space-5) * -1);
	left: 22px;
	width: 1px;
	background: var(--border-strong);
	content: "";
}
.step-index {
	display: grid;
	width: 44px;
	height: 44px;
	place-items: center;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
	background: var(--surface);
	color: var(--muted);
	font-size: 11px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
.route-timeline strong {
	display: block;
	padding-top: var(--space-1);
	font-size: var(--text-body);
}
.route-timeline p {
	margin-top: var(--space-1);
	color: var(--muted);
	font-size: var(--text-caption);
}
.step-state {
	padding-top: var(--space-2);
	color: var(--muted);
	font-size: var(--text-caption);
	font-weight: 800;
	white-space: nowrap;
}
.route-timeline .is-current .step-index {
	border-color: var(--ok);
	background: var(--ok-bg);
	color: var(--ok);
}
.route-timeline .is-current .step-state {
	color: var(--ok);
}
.not-created {
	margin-top: var(--space-8);
	padding-top: var(--space-7);
	border-top: 1px solid var(--border);
}
.not-created h2 {
	font-size: var(--text-heading);
}
.not-created ul {
	display: grid;
	gap: var(--space-4);
	margin: var(--space-5) 0 0;
	padding: 0;
	list-style: none;
}
.not-created li {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: var(--space-3);
}
.not-created li > span {
	display: grid;
	width: 44px;
	height: 44px;
	place-items: center;
	border-radius: var(--radius-md);
	background: var(--surface-3);
	color: var(--text-2);
}
.not-created li > span .ic {
	width: 19px;
	height: 19px;
}
.not-created strong {
	font-size: var(--text-small);
}
.not-created li p {
	margin-top: var(--space-1);
	color: var(--muted);
	font-size: var(--text-caption);
}
.route-assurance {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: var(--space-3);
	margin-top: var(--space-7);
	padding: var(--space-4);
	border: 1px solid color-mix(in srgb, var(--info) 30%, var(--border));
	border-radius: var(--radius-lg);
	background: var(--info-bg);
}
.route-assurance > .ic {
	width: 44px;
	height: 44px;
	padding: var(--space-3);
	color: var(--info);
}
.route-assurance strong {
	font-size: var(--text-small);
}
.route-assurance p {
	margin-top: var(--space-1);
	color: var(--text-2);
	font-size: var(--text-caption);
}

@keyframes route-rise {
	from {
		opacity: 0;
		transform: translateY(var(--space-4));
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes status-in {
	from {
		opacity: 0;
		transform: scale(0.78);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@media (max-width: 900px) {
	.workflow-row,
	.workflow-row.reverse,
	.waitlist-grid,
	.integrity-panel,
	.trust-card {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}
	.workflow-copy {
		max-width: 620px;
	}
	.cardnews-head {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-4);
	}
	.cardnews-head h2 {
		max-width: 16ch;
	}
	.cardnews-head p {
		max-width: 48ch;
	}
	.cardnews-deck {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-6);
	}
	.workflow-visual,
	.workflow-row.reverse .workflow-visual {
		order: 2;
	}
	.capability-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.usecase-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.waitlist-grid {
		max-width: 720px;
	}
	.trust-card .btn {
		width: fit-content;
	}
	.legal-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-8);
	}
	.legal-index {
		min-width: 0;
		position: static;
	}
	.legal-index nav {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		border-top: 1px solid var(--border-strong);
		border-left: 0;
	}
	.success-shell {
		max-width: 45rem;
		grid-template-columns: 1fr;
	}
}
@media (max-width: 760px) {
	.route-current {
		display: none;
	}
	.route-facts {
		grid-template-columns: 1fr;
	}
	.route-facts > div + div {
		border-top: 1px solid var(--border);
		border-left: 0;
	}
	.legal-layout {
		gap: var(--space-7);
	}
	.legal-index nav {
		display: flex;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scrollbar-width: thin;
	}
	.legal-index a {
		flex: 0 0 auto;
		white-space: nowrap;
	}
	.legal-section {
		grid-template-columns: 1fr;
		gap: var(--space-2);
	}
	.section-index {
		padding-top: 0;
	}
	.success-intro,
	.success-details {
		padding: var(--space-7);
	}
	.route-footer-inner {
		align-items: flex-start;
		flex-direction: column;
		justify-content: center;
		gap: var(--space-2);
		padding-block: var(--space-5);
	}
}
@media (max-width: 600px) {
	.workflow-list {
		gap: var(--space-9);
	}
	.workflow-visual {
		min-height: 300px;
	}
	.cardnews-head {
		margin-bottom: var(--space-6);
	}
	.cardnews-head h2 {
		max-width: 12ch;
	}
	.cardnews-flow {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-3);
		padding-block: var(--space-4);
	}
	.cardnews-flow .ic {
		justify-self: start;
		transform: rotate(90deg);
	}
	.cardnews-deck {
		grid-template-columns: none;
		grid-auto-columns: minmax(calc(var(--space-9) * 4), 80vw);
		grid-auto-flow: column;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		padding-bottom: var(--space-4);
		scroll-padding-inline: var(--space-1);
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
	}
	.story-card {
		scroll-snap-align: start;
	}
	.story-card:nth-child(even) {
		transform: none;
	}
	.cardnews-note {
		align-items: flex-start;
		margin-top: var(--space-8);
		line-height: 1.55;
	}
	.output-visual {
		grid-template-columns: 1fr;
	}
	.output-list {
		grid-template-columns: repeat(2, 1fr);
	}
	.mini-stack {
		transform: scale(0.84);
	}
	.capability-grid,
	.pricing-grid,
	.usecase-grid {
		grid-template-columns: 1fr;
	}
	.capability-grid article {
		min-height: auto;
	}
	.integrity-panel,
	.trust-card,
	.waitlist-card {
		padding: var(--space-6);
	}
	.waitlist-section {
		padding-block: 80px;
	}
	.foot-grid {
		grid-template-columns: 1fr;
	}
	.foot-grid nav {
		flex-wrap: wrap;
		gap: 0 var(--space-4);
	}
	.copyright,
	.footer-wordmark {
		grid-column: 1;
	}
	.footer-wordmark {
		margin-top: var(--space-5);
	}
	.route-hero {
		padding-block: var(--space-8);
	}
	.route-notice {
		grid-template-columns: 1fr;
	}
	.route-facts > div {
		padding-inline: 0;
	}
	.contact-panel {
		padding-inline: var(--space-5);
	}
	.route-page--success .route-main {
		min-height: auto;
		padding: var(--space-7) var(--space-4);
	}
	.success-shell {
		border-radius: var(--radius-xl);
	}
	.success-intro,
	.success-details {
		padding: var(--space-6);
	}
	.route-actions {
		align-items: stretch;
		flex-direction: column;
	}
	.route-actions .btn {
		width: 100%;
	}
	.route-actions .text-link {
		justify-content: center;
	}
	.route-back {
		width: 44px;
		padding: 0;
	}
	.route-back span {
		display: none;
	}
	.route-timeline li {
		grid-template-columns: 44px minmax(0, 1fr);
	}
	.step-state {
		grid-column: 2;
		padding-top: 0;
	}
}