/* 방문 목적별 랜딩 /shorts·/ads·/developers(2026-10-07, views/studio/landing.ejs). 색·간격은 tokens.css 토큰만 쓴다(다크 모드는 토큰이 바꾼다). */
.vd-landing { display: grid; gap: var(--s-8); padding-bottom: var(--s-10); }

.vd-landing__hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; padding-top: var(--s-6); }
.vd-landing__copy { display: grid; gap: var(--s-4); }
.vd-landing__eyebrow { margin: 0; color: var(--accent); font-weight: 700; font-size: 14px; }
.vd-landing__h1 { margin: 0; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.18; letter-spacing: -0.02em; color: var(--ink); }
.vd-landing__lead { margin: 0; font-size: 17px; line-height: 1.65; color: var(--ink-2); max-width: 38em; }
.vd-landing__start { display: grid; gap: var(--s-2); }
.vd-landing__label { font-weight: 700; color: var(--ink); }
.vd-landing__row { display: flex; gap: var(--s-2); }
.vd-landing__row .vd-input { flex: 1; min-width: 0; }
.vd-landing__acts { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.vd-landing__bonus { display: flex; gap: var(--s-2); align-items: flex-start; margin: 0; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); color: var(--ink-2); font-size: 14.5px; }
.vd-landing__bonus svg { flex: none; margin-top: 2px; color: var(--accent); }

/* 재생기(vidia-player)가 video 를 감싸개로 감싸므로 폭은 바깥 틀(figure)에서 정한다. */
.vd-landing__hero-video { margin: 0; display: grid; gap: var(--s-2); justify-self: center; width: 100%; }
.vd-landing__hero-video--portrait { max-width: 300px; }
.vd-landing__hero-video--landscape, .vd-landing__hero-video--square { max-width: 560px; }
.vd-landing__hero-video video { width: 100%; border-radius: var(--r-3); background: var(--surface-2); object-fit: cover; }
.vd-landing__hero-video--portrait video { aspect-ratio: 9 / 16; }
.vd-landing__hero-video--landscape video { aspect-ratio: 16 / 9; }
.vd-landing__hero-video--square video { aspect-ratio: 1 / 1; }
.vd-landing__hero-video figcaption { display: grid; gap: 2px; text-align: center; }
.vd-landing__hero-video small { color: var(--muted); }

.vd-landing__section { display: grid; gap: var(--s-4); }
.vd-landing__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.vd-landing__head h2 { margin: 0; font-size: 22px; color: var(--ink); }
.vd-landing__head p { margin: 0; flex-basis: 100%; }

.vd-landing__samples { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-4); }
.vd-landing__sample { display: grid; gap: var(--s-3); padding: var(--s-3); }
.vd-landing__sample video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r-2); background: var(--surface-2); }
.vd-landing__sample--landscape video { aspect-ratio: 16 / 9; }
.vd-landing__sample--square video { aspect-ratio: 1 / 1; }
.vd-landing__sample-body { display: grid; gap: 4px; }
.vd-landing__cost { display: flex; gap: var(--s-2); align-items: flex-start; margin: 0; color: var(--ink-2); font-size: 14.5px; }
.vd-landing__cost svg { flex: none; margin-top: 2px; color: var(--accent); }

.vd-landing__inputs { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-3); }
.vd-landing__inputs > div { padding: var(--s-4); display: grid; gap: 4px; align-content: start; }
.vd-landing__inputs dt { font-weight: 700; color: var(--ink); }
.vd-landing__inputs dd { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }

.vd-landing__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-3); counter-reset: vd-landing-step; }
.vd-landing__steps li { counter-increment: vd-landing-step; display: grid; gap: 4px; align-content: start; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); }
.vd-landing__steps li::before { content: counter(vd-landing-step); width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; font-size: 13px; }
.vd-landing__steps span { color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }

.vd-landing__code { display: grid; gap: var(--s-4); }
.vd-landing__code article { display: grid; gap: var(--s-2); padding: var(--s-4); min-width: 0; }
.vd-landing__code p { margin: 0; color: var(--ink-2); }
.vd-landing__pre { margin: 0; padding: var(--s-3) var(--s-4); overflow-x: auto; border-radius: var(--r-2); background: var(--surface-2); border: 1px solid var(--line); font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--ink); }

.vd-landing__fits { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-4); }
.vd-landing__fits > .vd-panel { padding: var(--s-4); display: grid; gap: var(--s-3); align-content: start; }
.vd-landing__no { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }

.vd-landing__faq { display: grid; gap: var(--s-2); }
.vd-landing__faq details { padding: var(--s-3) var(--s-4); }
.vd-landing__faq summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.vd-landing__faq p { margin: var(--s-2) 0 0; color: var(--ink-2); line-height: 1.6; }

.vd-landing__closing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-6); }
.vd-landing__closing h2 { margin: 0 0 4px; font-size: 22px; color: var(--ink); }
.vd-landing__closing p { margin: 0; }

@media (max-width: 767px) {
	.vd-landing { gap: var(--s-6); }
	.vd-landing__hero { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); padding-top: var(--s-4); }
	.vd-landing__row { flex-direction: column; }
	.vd-landing__lead { font-size: 16px; }
}

/* 격자 안 패널은 공통 '패널 다음 패널' 위 여백을 받지 않는다(같은 줄 카드 높이가 어긋나지 않게). */
.vd-landing :is(.vd-landing__samples, .vd-landing__inputs, .vd-landing__code, .vd-landing__fits, .vd-landing__faq) > .vd-panel,
.vd-landing :is(.vd-landing__samples, .vd-landing__inputs, .vd-landing__code, .vd-landing__fits, .vd-landing__faq) > li.vd-panel { margin-top: 0; }