/* 메인 화면 전용 레이아웃 보정.
   글자 크기는 기본 체계(vidia.css)를 그대로 쓴다.
   (이전에 있던 +12pt 글자 확대는 화면이 엉망이 되어 사용자 요청으로 제거 — 2026-10-05) */

/* 안내 카드에서는 공통 패널 사이 여백을 없애고 위아래를 맞춘다. */
.vd-studio-home .vd-home-help > .vd-panel { margin: 0; }
/* 기본(모두 접힌 상태)에는 두 칸 높이를 같게 맞추고, FAQ 를 펼쳐도 옆 칸이 따라 늘어나지 않게 한다(2026-10-19 사용자 지시).
   오른쪽 칸은 기본 격자(grid-auto-rows)가 남는 높이를 나눠 가져 아래 버튼이 바닥에 붙는다. */
.vd-home-help { align-items: stretch; }
.vd-home-help:has(details[open]) { align-items: start; }

/* 첫 화면 맨 위에 오는 쇼케이스 띠 — 헤더에 붙지 않게 위아래 숨을 주고, 아래 URL 히어로와 구분한다(2026-10-19 사용자 지시 "최상단으로"). */
.vd-studio-home > .vd-showcase:first-of-type { margin: var(--s-3) 0 var(--s-6); }
.vd-studio-home > .vd-showcase:first-of-type .vd-showcase__head h2 { font-size: clamp(20px, 2.2vw, 24px); }
@media (max-width: 800px) {
	.vd-studio-home > .vd-showcase:first-of-type { margin: var(--s-2) 0 var(--s-5); }
	.vd-studio-home > .vd-showcase:first-of-type .vd-showcase__head p { display: none; }
}

/* 가입 축하 쿠폰 안내 띠 */
.vd-home-coupon { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 18px; margin: 0 0 var(--s-5); border: 1px solid var(--accent); border-radius: var(--r-3); background: var(--accent-soft); }
.vd-home-coupon__text { margin: 0; display: grid; gap: 2px; min-width: 0; }
.vd-home-coupon__text strong { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--accent-ink); word-break: keep-all; }
.vd-home-coupon__text span { font-size: 13.5px; color: var(--ink-2); word-break: keep-all; }
.vd-home-coupon > .vd-btn { flex: none; }
/* 가입 체험 포인트(10,000P 등) 강조 띠 — 두 테마 모두 같은 진한 브랜드 파랑 바탕에 흰 글자(대비 6.9:1) */
.vd-home-coupon--bonus { flex-wrap: nowrap; gap: 20px; padding: 18px 22px; border: 0; background: #1E4FD8; color: #fff; box-shadow: 0 12px 28px -16px rgba(30, 79, 216, .7); }
.vd-home-coupon__amount { flex: none; margin: 0; font-size: 44px; font-weight: 900; line-height: 1; letter-spacing: -.03em; color: #FFE45C; }
.vd-home-coupon__amount .vd-num { font-size: inherit; font-weight: inherit; }
.vd-home-coupon--bonus .vd-home-coupon__text { flex: 1; gap: 4px; }
.vd-home-coupon--bonus .vd-home-coupon__text strong { font-size: 22px; color: #fff; }
.vd-home-coupon--bonus .vd-home-coupon__text span { font-size: 14px; color: rgba(255, 255, 255, .88); }
.vd-home-coupon__soon { display: inline-block; justify-self: start; margin-top: 4px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 12.5px; font-style: normal; font-weight: 700; word-break: keep-all; }
.vd-home-coupon__cta.vd-btn { background: #fff; color: #12307F; border-color: #fff; font-weight: 800; }
.vd-home-coupon__cta.vd-btn:hover { background: #FFE45C; color: #12307F; border-color: #FFE45C; }
.vd-home-coupon__cta.vd-btn svg { color: inherit; }

/* 상단 URL 입력 — 직설 홍보 문구와 형광펜 강조 */
.vd-home-start label { display: block; font-size: 18px; font-weight: 800; margin-bottom: 12px; }
.vd-home-start__label { line-height: 1.55; word-break: keep-all; }
.vd-home-start__sub { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.vd-home-hl { display: inline; padding: 1px 4px; border-radius: 4px; background: linear-gradient(transparent 55%, var(--accent-soft-2) 55%); color: var(--accent-ink); font-weight: 800; }
/* 상단 URL 섹션을 그라데이션 테두리로 강조한다 */
.vd-home-start--url { position: relative; border: 1px solid transparent; background:
		radial-gradient(120% 135% at 0% 0%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 62%) padding-box,
		radial-gradient(95% 120% at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 64%) padding-box,
		linear-gradient(var(--surface), var(--surface)) padding-box,
		linear-gradient(135deg, var(--accent), var(--accent-hover) 55%, var(--accent)) border-box;
	box-shadow: 0 18px 44px -26px color-mix(in srgb, var(--accent) 60%, transparent); }
.vd-home-start__row { display: flex; gap: 12px; align-items: stretch; }
.vd-home-start__row input { flex: 1; min-width: 0; }
.vd-home-start [role=status] { font-size: 13.5px; color: var(--muted); margin: 10px 0 0; }

/* 메인 맨 위 URL 벤치마킹 — 첫 화면에서 바로 넣어 보고 싶게 크게(2026-10-19 사용자 지시) */
.vd-home-urlhero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: clamp(20px, 3vw, 40px); align-items: stretch; padding: clamp(22px, 3vw, 38px); margin: 0 0 var(--s-5); scroll-margin-top: 90px; }
.vd-home-urlhero > * { position: relative; z-index: 1; }
/* 장식 점 격자 — 판이 비어 보이지 않게 왼쪽 위에서 옅게 번진다(2026-10-19 사용자 "허전하고 안 예쁘다"). */
.vd-home-urlhero::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(color-mix(in srgb, var(--accent) 22%, transparent) 1px, transparent 1px); background-size: 20px 20px; -webkit-mask-image: linear-gradient(118deg, var(--ink) 0%, transparent 54%); mask-image: linear-gradient(118deg, var(--ink) 0%, transparent 54%); opacity: .55; }
.vd-home-urlhero__eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 13px; border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--surface) 82%, var(--accent-soft)); color: var(--accent-ink); font-size: 13px; font-weight: 800; box-shadow: 0 6px 16px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
.vd-home-urlhero__eyebrow .vd-ic, .vd-home-urlhero__eyebrow svg { width: 15px; height: 15px; }
.vd-home-urlhero__title { margin: 14px 0 10px; font-size: clamp(27px, 3.4vw, 42px); font-weight: 900; line-height: 1.22; letter-spacing: -.04em; word-break: keep-all; }
.vd-home-urlhero__lead { margin: 0 0 18px; font-size: 15px; line-height: 1.7; color: var(--ink-2); word-break: keep-all; }
.vd-home-urlhero__lead b { color: var(--accent-ink); }
.vd-home-urlhero input { min-height: 52px; font-size: 16px; border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); background: var(--surface); box-shadow: var(--sh-1), 0 14px 28px -22px color-mix(in srgb, var(--accent) 80%, transparent); }
.vd-home-urlhero input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); outline: none; }
.vd-home-urlhero .vd-btn { min-height: 52px; padding-inline: 22px; font-size: 16px; font-weight: 800; flex: none; }
.vd-home-urlhero__points { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; font-size: 12.5px; color: var(--ink-2); }
.vd-home-urlhero__points li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--surface) 72%, transparent); font-weight: 600; word-break: keep-all; }
.vd-home-urlhero__points li { display: inline-flex; align-items: center; gap: 5px; }
.vd-home-urlhero__points .vd-ic, .vd-home-urlhero__points svg { width: 15px; height: 15px; color: var(--accent); flex: none; }
.vd-home-urlhero__guide { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line)); border-radius: var(--r-3); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, var(--surface)), var(--surface) 46%); box-shadow: var(--sh-2); }
.vd-home-urlhero__guide-h { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 13px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.vd-home-urlhero__guide-h .vd-ic, .vd-home-urlhero__guide-h svg { width: 15px; height: 15px; color: var(--accent); flex: none; }
.vd-home-urlhero__steps { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.vd-home-urlhero__steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 9px; align-items: start; padding-bottom: 10px; border-bottom: 1px dashed color-mix(in srgb, var(--accent) 20%, var(--line)); }
.vd-home-urlhero__steps li:last-child { padding-bottom: 0; border-bottom: 0; }
.vd-home-urlhero__steps li > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(140deg, var(--accent), var(--accent-hover)); color: var(--on-fill); font-size: 11.5px; font-weight: 800; box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--accent) 90%, transparent); }
.vd-home-urlhero__guide strong { display: block; font-size: 13.5px; line-height: 1.35; word-break: keep-all; }
.vd-home-urlhero__guide small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); line-height: 1.45; word-break: keep-all; }
/* 오른쪽 칸 아래를 실제 결과물 3장으로 채운다 — 한 줄 고정(좁은 칸에서도 절대 세로로 쌓이지 않는다). */
.vd-home-urlhero__preview { display: flex; flex-direction: column; gap: 10px; }
.vd-home-urlhero__thumbs { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.vd-home-urlhero__thumbs li { position: relative; flex: 1 1 0; min-width: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); }
.vd-home-urlhero__thumbs img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.vd-home-urlhero__thumbs .vd-ic, .vd-home-urlhero__thumbs svg { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; padding: 5px; box-sizing: content-box; border-radius: 50%; background: color-mix(in srgb, var(--ink) 62%, transparent); color: var(--on-fill); transform: translate(-50%, -50%); backdrop-filter: blur(2px); }
.vd-home-urlhero__guide-link { display: flex; align-items: center; gap: 4px; margin: 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--accent); }
.vd-home-urlhero__preview .vd-home-urlhero__guide-link { border-top: 0; padding-top: 0; }
.vd-home-urlhero__guide-link--alone { margin-top: auto; }
.vd-home-urlhero__guide-link .vd-ic:last-child { width: 15px; height: 15px; margin-left: auto; }
@media (max-width: 900px) {
	.vd-home-urlhero { grid-template-columns: 1fr; }
	.vd-home-urlhero__guide { display: none; }
}

/* 비디아를 쓰는 이유 — 핵심 장점·기능 카드(2026-10-19 사용자 지시) */
.vd-home-features { display: grid; gap: var(--s-4); margin: 0 0 var(--s-6); }
.vd-home-features__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.vd-home-features__head h2 { font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -.03em; }
.vd-home-features__head p { margin: 0; font-size: 14px; color: var(--muted); word-break: keep-all; }
.vd-home-features__head b { color: var(--ink); }
.vd-home-features__grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin: 0; padding: 0; }
.vd-home-features__card { display: grid; gap: 6px; height: 100%; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.vd-home-features__card:hover { border-color: var(--accent); box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--accent) 60%, transparent); transform: translateY(-2px); }
.vd-home-features__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.vd-home-features__ic svg { width: 18px; height: 18px; }
.vd-home-features__card strong { font-size: 15.5px; font-weight: 800; word-break: keep-all; }
.vd-home-features__card p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); word-break: keep-all; }
.vd-home-features__more { display: inline-flex; align-items: center; gap: 3px; margin-top: auto; padding-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--accent); }
.vd-home-features__more svg { width: 14px; height: 14px; }
@media (max-width: 900px) { .vd-home-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vd-home-features__grid { grid-template-columns: 1fr; } }

/* 핵심 히어로 — 빈 공간 없이 밀도 높게, 서비스를 바로 이해시키는 문구·버튼 배치 */
.vd-home-hero { align-items: stretch; gap: var(--s-5); padding: clamp(18px, 2.2vw, 28px); }
.vd-home-hero__copy { display: flex; flex-direction: column; align-content: start; gap: 10px; min-width: 0; }
.vd-home-hero__eyebrow { font-size: 13px; }
.vd-home-hero__title { margin: 0; }
.vd-home-hero__promo { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vd-home-hero__promo li { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); word-break: keep-all; }
.vd-home-hero__promo li b { color: var(--accent-ink); font-weight: 800; }
.vd-home-hero__promo .vd-ic { width: 17px; height: 17px; margin-top: 2px; color: var(--accent); flex: none; }
.vd-home-hero__acts { margin-top: 4px; }
.vd-home-hero__points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }
.vd-home-hero__points li { display: grid; gap: 3px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-2); font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.vd-home-hero__points .vd-ic { width: 15px; height: 15px; margin: 0; }
.vd-home-hero__points b { font-weight: 700; color: var(--ink); }
.vd-home-hero__samples-link { margin-top: auto; }
/* 왼쪽 단의 남는 높이는 광고문구 패널이 흡수해 빈 공간을 남기지 않는다(2026-10-05 사용자 지시). */
.vd-home-hero__pitch { flex: 1 1 auto; display: flex; flex-direction: column; }
.vd-home-hero__pitch-list { flex: 0 0 auto; }
.vd-home-hero__samples-link { margin-top: 14px; }
@media (max-width: 860px) {
	.vd-home-hero__pitch { flex: 0 0 auto; }
	.vd-home-hero__samples-link { margin-top: auto; }
}

/* 추천 숏츠가 세로로 길어 생기는 빈 공간은 높이만 줄인다.
   감싸개 폭을 영상 폭에 맞춰 줄이지 않으면 영상 오른쪽에 검은 여백이 남는다(2026-10-05). */
.vd-home-shorts .vd-home-hero__sample > .vdp--video { width: fit-content; max-width: 100%; }
.vd-home-shorts .vd-home-hero__sample video { max-height: 340px; }

/* 영상 틀: 플레이어 감싸개(.vdp--video)가 틀 안에 들어간다. 좁은 화면에서는 예전처럼 가운데 정렬만 한다. */
.vd-home-shorts .vd-home-hero__frame { width: 100%; min-width: 0; display: grid; justify-items: center; }
.vd-home-shorts .vd-home-hero__frame > .vdp--video { width: fit-content; max-width: 100%; box-shadow: var(--sh-2); }

/* 카드 구조(2026-10-13 사용자 지시 "제목이 1줄일 때와 2줄일 때 UI 가 달라진다" — 고침): 제목은 늘 두 줄 자리를 차지하고(한 줄이면 가운데),
   두 카드가 영상·제목·작성자·사용량·단추 다섯 행을 subgrid 로 나눠 써 작성자 줄이 한쪽만 접혀도 사용량 띠·단추 높이가 같다. 두 칸 배치에만 적용한다. */
/* 2026-10-20 사용자 지시 "제목이 길면 영상 컨트롤 위로 넘쳐 겹친다" — 제목 칸은 두 줄 높이로 고정하고 넘치면 말줄임(…)으로 자른다.
   예전에는 flex 가운데 정렬에 높이 상한이 없어 세 줄 이상이 위아래로 번지며 영상 하단을 덮었다. 한 줄이면 두 줄 자리의 가운데(box-pack). */
.vd-home-shorts figcaption strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; height: calc(2 * 1.45em); min-height: 0; }
@media (min-width: 561px) {
	.vd-home-shorts { grid-template-rows: auto auto auto auto auto; row-gap: 0; }
	.vd-home-shorts .vd-home-hero__sample { grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
	.vd-home-shorts .vd-home-hero__sample > figcaption { grid-row: span 4; grid-template-rows: subgrid; row-gap: 5px; padding-top: 8px; align-content: start; }
	.vd-home-shorts .vd-home-hero__sample > figcaption > * { align-self: center; }
}

/* 넓은 화면: 두 숏츠가 왼쪽 글 단 높이 안에서 가장 큰 9:16 으로 보인다(2026-10-12 "두 편 크기가 다르고 위아래 검정 영역" — 고침).
   2026-10-13 사용자 지시 "영상 바로 밑 빈 공간 제거": 예전에는 영상 틀이 남은 높이를 다 차지하고 영상을 그 가운데 두어,
   칸이 좁아 영상이 폭에 맞춰지면 영상과 제목 사이가 크게 비었다. 이제 숏츠 묶음 전체를 크기 컨테이너로 두고
   영상 폭 = min(칸 폭, (묶음 높이 − 글 자리) × 9/16) 이라 틀이 영상 높이만큼만 차지하고, 남는 높이는 묶음 위아래로 나뉜다. 한 칸 배치(860px 이하)에는 적용하지 않는다. */
@media (min-width: 861px) {
	.vd-home-shorts { --hero-cap: 176px; container-type: size; align-self: stretch; align-content: center; }
	/* WebKit은 subgrid 안의 auto 높이를 0으로 기여시킬 수 있어 영상과 캡션이 겹친다. */
	.vd-home-shorts .vd-home-hero__frame { height: min(calc((100cqw - 16px) * 8 / 9), max(0px, calc(100cqh - var(--hero-cap)))); min-height: 0; align-items: start; }
	.vd-home-shorts:has(> :only-child) .vd-home-hero__frame { height: min(calc(260px * 16 / 9), max(0px, calc(100cqh - var(--hero-cap)))); }
	.vd-home-shorts .vd-home-hero__frame > .vdp--video,
	.vd-home-shorts .vd-home-hero__frame > video { width: min(100%, calc((100cqh - var(--hero-cap)) * 9 / 16)); max-width: none; height: auto; aspect-ratio: 9 / 16; }
	.vd-home-shorts .vd-home-hero__frame > .vdp--video > .vdp-media,
	.vd-home-shorts .vd-home-hero__frame video { width: 100%; height: auto; max-width: none; max-height: none; }
}

.vd-body--home-large :is(button, input, a, .vd-panel, .vd-rail, .vd-home-grid) { max-width: 100%; }
/* 메인 화면만 단추를 44px 로 키우던 예외를 없앤다(2026-10-05 사용자: 버튼 높이가 너무 큼).
   높이는 밀도 정본(ui-consistency.css)의 사다리 그대로 쓴다 — 기본 32px, 큰 단추 38px, 탭 34px. */
.vd-body--home-large .vd-btn { white-space: normal; height: auto; }
.vd-body--home-large .vd-tab { min-height: var(--row-tab); }
.vd-body--home-large .vd-header .vd-btn { min-height: var(--ctl-sm); }

@media (max-width: 900px) {
	.vd-home-start__row { flex-direction: column; }
}

@media (max-width: 640px) {
	.vd-home-coupon > .vd-btn { width: 100%; justify-content: center; }
	.vd-home-coupon--bonus { flex-wrap: wrap; gap: 10px 14px; padding: 16px; }
	.vd-home-coupon__amount { font-size: 36px; }
	.vd-home-coupon--bonus .vd-home-coupon__text { flex-basis: 100%; }
	.vd-home-coupon--bonus .vd-home-coupon__text strong { font-size: 19px; }
	.vd-home-hero__points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 쇼케이스 바로가기(2026-10-11): 히어로 왼쪽 글 아래, 눈에 띄는 큰 버튼 */
.vd-home-hero__showcase { align-self: flex-start; margin-top: 16px; min-height: 48px; padding-inline: 22px; font-size: 1.02rem; font-weight: 700; }
.vd-home-hero__showcase + .vd-home-hero__samples-link { margin-top: 12px; }

/* 2026-10-16 신규 회원 2차: 판매 안내를 맨 아래 '제작자·개발자용 자세히'로 옮겨 안내 칸이 둘이 되었다(좁은 화면은 vidia.css 860px 규칙대로 한 줄).
   API·MCP 안내 줄도 그 영역 맨 끝에 작게 둔다. */
@media (min-width: 861px) {
	.vd-home-help { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vd-home-pro__api { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 13.5px; color: var(--muted); word-break: keep-all; }
.vd-home-pro__api .vd-ic, .vd-home-pro__api > svg { flex: none; width: 15px; height: 15px; color: var(--accent); }

/* '처음이라면 여기부터' — 링크 목록 대신 실제 순서(URL → 비용 확인 → 완성)로 안내(2026-10-19 사용자 지시). */
.vd-home-start__lead { margin: 0; font-size: 13.5px; color: var(--muted); word-break: keep-all; }
.vd-home-start__steps { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; }
.vd-home-start__steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
.vd-home-start__num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; font-weight: 800; }
.vd-home-start__steps strong { display: block; font-size: 14.5px; word-break: keep-all; }
.vd-home-start__steps p { margin: 2px 0 2px; font-size: 13px; line-height: 1.5; color: var(--muted); word-break: keep-all; }
.vd-home-start__steps .vd-link { font-size: 12.5px; font-weight: 700; }
.vd-home-start__links { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; }
.vd-home-start__links a { display: flex; align-items: center; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-2); font-size: 12.5px; font-weight: 600; color: var(--ink-2); text-decoration: none; word-break: keep-all; }
.vd-home-start__links a:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }

/* 제작자·개발자 — 클릭할 곳이 없던 제목 띠를 실제 바로가기 카드로 바꿨다(2026-10-19 사용자 지시). */
.vd-home-pro__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 32px); align-items: center; min-height: 0; padding: clamp(18px, 2.4vw, 28px); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); font-size: 14px; font-weight: 400; color: var(--ink); }
.vd-home-pro__eyebrow { margin: 0 0 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: var(--accent); }
.vd-home-pro__intro h2 { margin: 0; font-size: clamp(20px, 2.4vw, 27px); font-weight: 900; letter-spacing: -.03em; line-height: 1.35; word-break: keep-all; }
.vd-home-pro__intro > p:last-child { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); word-break: keep-all; }
.vd-home-pro__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vd-home-pro__links a { display: grid; grid-template-columns: 18px minmax(0, 1fr) 14px; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-2); color: inherit; text-decoration: none; }
.vd-home-pro__links a:hover { border-color: var(--accent); background: var(--accent-soft); }
.vd-home-pro__links > a > .vd-ic:first-child { color: var(--accent); width: 17px; height: 17px; }
.vd-home-pro__links > a > .vd-ic:last-child { color: var(--muted); width: 14px; height: 14px; }
.vd-home-pro__links strong { display: block; font-size: 13px; font-weight: 800; }
.vd-home-pro__links small { display: block; margin-top: 1px; font-size: 12px; color: var(--muted); line-height: 1.4; }
@media (max-width: 980px) { .vd-home-pro__head { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .vd-home-pro__links { grid-template-columns: 1fr; } }

/* �Ǹ� ���� ���� ��(2026-11-01 ����� ����) ? '���� �ڵ� �� ��Ŭ��' ȫ�� ���� �ٷ� ���� 2�ٷ�.
   ���󸶴� �� ��: ����� �� ����/����/����� �� ����(���� �ݾס����ް����ΰ���) �� �Ѿ�� �Ǹ�.
   �»�� ������ ����� ���� ��ġ��, ������ �����ʿ� ���������� �ξ� �� ���� ���� �ڸ��� ����. */
.vd-mktband { display: grid; gap: 14px; margin: 0 0 40px; }
.vd-mktband__head { display: grid; gap: 6px; max-width: 860px; }
.vd-mktband__kicker { margin: 0; font-size: 13px; font-weight: 800; color: var(--accent); }
.vd-mktband__head h2 { margin: 0; font-size: clamp(22px, 2.8vw, 30px); line-height: 1.25; font-weight: 900; letter-spacing: -.03em; word-break: keep-all; }
.vd-mktband__head h2 span { color: var(--accent); }
.vd-mktband__lead { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); word-break: keep-all; }
.vd-mktband__lead b { color: var(--ink); }
.vd-mktband__list { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; grid-template-columns: repeat(var(--mb-wide, 2), minmax(0, 1fr)); align-items: stretch; }
.vd-mktband__row { display: grid; grid-template-columns: 1fr; gap: 10px; align-content: start; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
/* 형식이 바뀌는 첫 카드는 새 줄에서 시작한다(숏폼 두 줄 아래 롱폼 두 줄 — 2026-11-02 사용자 지시). */
.vd-mktband__row--break { grid-column-start: 1; }
/* 판매 상품이 한 편뿐이면 카드가 화면 폭만큼 커지므로 썸네일을 왼쪽에 두는 가로 카드로 그린다. */
.vd-mktband__list--wide .vd-mktband__row { grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px; }
.vd-mktband__list--wide .vd-mktband__title { display: block; overflow: visible; font-size: 16px; }
/* 썸네일 틀(2026-11-01 사용자 지시 "비율이 유지가 안 되고 짤렸다"): 4:5 틀 하나로 카드 높이를 맞추고,
   그림은 원본 비율 그대로(object-fit: contain) 넣는다. 남는 자리는 같은 그림을 흐리게 깐 바탕(.vd-mktband__shot)이 채운다. */
/* 썸네일 틀 높이를 하나로 고정한다(2026-11-02 사용자 지시 "롱폼·숏폼 높이를 다 일치시켜줘"):
   세로·가로·정방형이 섞여도 카드 높이가 어긋나지 않는다. 세로 영상은 원본 비율 그대로(contain) 넣고
   남는 옆자리는 같은 그림을 흐리게 깐 바탕이 채우며, 가로·정방형은 cover 로 틀을 가득 채운다(위아래 여백 없음). */
.vd-mktband__thumb { position: relative; display: block; height: clamp(148px, 15.5vw, 196px); overflow: hidden; border-radius: 10px; background: var(--surface-2); isolation: isolate; }
.vd-mktband__thumb--landscape .vd-mktband__still,
.vd-mktband__thumb--landscape .vd-mktband__video { object-fit: cover; }
.vd-mktband__thumb--square .vd-mktband__still,
.vd-mktband__thumb--square .vd-mktband__video { object-fit: cover; }
.vd-mktband__shot { position: absolute; inset: -8%; z-index: 0; width: 116%; height: 116%; object-fit: cover; filter: blur(22px) saturate(1.25) brightness(.86); transform: scale(1.04); opacity: .55; }
.vd-mktband__still { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; }
.vd-mktband__video { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; }
.vd-mktband__thumb::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); pointer-events: none; }
.vd-mktband__tag { position: absolute; left: 6px; top: 6px; z-index: 3; padding: 3px 7px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 72%, transparent); color: var(--on-fill); font-size: 11px; font-weight: 800; letter-spacing: -.02em; word-break: keep-all; }
.vd-mktband__body { display: grid; grid-template-rows: auto auto 1fr auto; gap: 5px; min-width: 0; align-content: start; height: 100%; }
.vd-mktband__title { font-size: 15px; font-weight: 800; color: var(--ink); text-decoration: none; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; min-height: 3em; height: 3em; }
.vd-mktband__title:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.vd-mktband__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0; font-size: 12.5px; color: var(--muted); }
.vd-mktband__rights { list-style: none; display: grid; gap: 2px; margin: 2px 0 0; padding: 0; }
.vd-mktband__rights li { display: flex; align-items: flex-start; gap: 5px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); word-break: keep-all; }
.vd-mktband__rights svg { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--ok); }
.vd-mktband__side { display: grid; gap: 3px; justify-items: start; text-align: left; margin-top: 2px; }
.vd-mktband__price { display: flex; align-items: baseline; gap: 5px; margin: 0; }
.vd-mktband__price strong { font-size: 20px; font-weight: 900; letter-spacing: -.03em; color: var(--accent-ink); }
.vd-mktband__price span { font-size: 12px; color: var(--muted); }
.vd-mktband__cta { margin-top: 4px; }
.vd-mktband__foot { display: flex; align-items: flex-start; gap: 7px; margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); word-break: keep-all; }
.vd-mktband__foot svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }
@media (max-width: 1180px) {
	.vd-mktband__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.vd-mktband__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.vd-mktband__list { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.vd-mktband__thumb { aspect-ratio: 16 / 9; }
	.vd-mktband__list--wide .vd-mktband__row { grid-template-columns: 1fr; }
}