/* 공개 화면(홈·쇼케이스·검색·마켓·패키지·요금제·도움말) 보정 — 2026-11-06 출시 QA 반영.
   각 화면 템플릿이 직접 싣는다(머리 공용 CSS 를 건드리지 않으려고). 색·간격은 토큰만 쓴다. */

/* ---------- 쇼케이스 카드 썸네일: 원본 비율 그대로 + 흐린 바탕(QA #7) ---------- */
.vd-showcase__media { background: var(--surface-2); overflow: hidden; }
.vd-showcase__media .vd-showcase__blur { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(18px) saturate(1.2) brightness(.85); opacity: .6; transform: scale(1.04); }
.vd-showcase__media .vd-showcase__img, .vd-showcase__media video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; background: transparent; }

/* ---------- 쇼케이스 목록: 비율별 고정 열(QA #48·#83) ---------- */
.vd-sclist__count { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }
.vd-sclist__count b { font-size: 18px; font-weight: 800; color: var(--ink); }
.vd-sclist__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.vd-sclist__filters .vd-sclist__forms { margin: 0; }
.vd-sclist__topics { display: flex; flex-wrap: wrap; gap: 6px; }
.vd-sclist__topics a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 700; text-decoration: none; }
.vd-sclist__topics a:hover, .vd-sclist__topics a[aria-current] { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.vd-sclist__search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; min-width: min(100%, 300px); }
.vd-sclist__search .vd-searchbox { flex: 1 1 240px; }
.vd-sclist__group { margin: 4px 0 -6px; font-size: 18px; font-weight: 800; }
.vd-sclist__group small { margin-left: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.vd-sclist.vd-sclist--portrait, .vd-sclist.vd-sclist--landscape { display: grid; gap: 14px; }
.vd-sclist.vd-sclist--portrait::after, .vd-sclist.vd-sclist--landscape::after { content: none; }
.vd-sclist--portrait { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.vd-sclist--landscape { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vd-sclist--portrait .vd-sclist__item, .vd-sclist--landscape .vd-sclist__item { flex: none; width: auto; max-width: none; height: auto; aspect-ratio: auto; }
.vd-sclist--portrait .vd-showcase__media, .vd-sclist--landscape .vd-showcase__media { position: relative; inset: auto; display: block; height: auto; }
.vd-sclist--portrait .vd-showcase__media { aspect-ratio: 9 / 16; }
.vd-sclist--landscape .vd-showcase__media { aspect-ratio: 16 / 9; }
/* 그림을 받기 전 회색 칸 대신 은은한 바탕(QA #83) */
.vd-sclist .vd-showcase__media { background: linear-gradient(135deg, var(--surface-2), color-mix(in srgb, var(--accent) 6%, var(--surface-2))); }
@media (max-width: 1180px) { .vd-sclist--portrait { grid-template-columns: repeat(4, minmax(0, 1fr)); } .vd-sclist--landscape { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
	.vd-sclist--portrait { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.vd-sclist--landscape { grid-template-columns: 1fr; gap: 10px; }
	.vd-sclist__search { margin-left: 0; width: 100%; }
}

/* ---------- 통합 검색(QA #2·#40·#99) ---------- */
.vd-search__form { display: flex; gap: 8px; align-items: stretch; width: 100%; max-width: 760px; }
.vd-search__box { position: relative; flex: 1 1 auto; min-width: 0; }
.vd-search__box > .vd-ic, .vd-search__box > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.vd-search__box .vd-input { width: 100%; min-height: 48px; padding-left: 42px; font-size: 16px; }
.vd-search__tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line); }
.vd-search__tabs a { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 14px; margin-bottom: -1px; border-bottom: 3px solid transparent; color: var(--ink-2); font-weight: 700; text-decoration: none; }
.vd-search__tabs a small { font-size: 12px; color: var(--muted); font-weight: 600; }
.vd-search__tabs a[aria-current] { border-bottom-color: var(--accent); color: var(--accent-ink); }
.vd-search__results { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.vd-search__item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); }
.vd-search__item--noimg { grid-template-columns: minmax(0, 1fr); }
.vd-search__thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-2); background: var(--surface-2); }
.vd-search__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vd-search__body { display: grid; gap: 4px; min-width: 0; }
.vd-search__body h2 { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.4; }
.vd-search__body p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vd-search__kind { justify-self: start; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 800; }
.vd-search__empty { display: grid; gap: 12px; }
.vd-search__suggest { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vd-search__suggest a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); font-size: 13px; font-weight: 700; text-decoration: none; }
.vd-search__suggest a:hover { border-color: var(--accent); color: var(--accent-ink); }
@media (max-width: 560px) { .vd-search__item { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; } }

/* ---------- 패키지 목록 카드(QA #49·#81) ---------- */
.vd-pkg-list__note { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; }
.vd-pkg-list__note > .vd-ic, .vd-pkg-list__note > svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--accent); }
.vd-card__facts { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.vd-pkg-family__facts { padding: 8px 14px 0; }
.vd-card__tags { display: flex; flex-wrap: wrap; gap: 2px 8px; }
.vd-card__tags span { white-space: nowrap; }
@media (max-width: 640px) {
	.vd-pkg-card .vd-card__tags, .vd-pkg-card .vd-card__time { display: none; }
}

/* ---------- 영상 마켓(QA #82·#84·#94) ---------- */
.vd-mkt-filter-open { display: none; }
@media (max-width: 760px) {
	/* 필터는 '필터' 버튼 → 아래에서 올라오는 시트(public/js/market/shop.js). */
	.vd-mkt-filter-open { display: inline-flex; }
	.vd-mkt-filter { display: none; }
	.vd-mkt-filter.is-open { display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; /* 하단 탭바(.vd-botnav z 80) 위 */ max-height: 82vh; overflow-y: auto; gap: 12px; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; background: var(--surface); box-shadow: 0 -18px 40px -16px rgba(15, 23, 42, .45); }
	.vd-mkt-filter.is-open .vd-toolbar__left { display: grid; gap: 10px; }
	.vd-mkt-filter.is-open .vd-field, .vd-mkt-filter.is-open .vd-select, .vd-mkt-filter.is-open .vd-input { width: 100%; }
	.vd-mkt-filter__head { display: flex; align-items: center; justify-content: space-between; }
	.vd-mkt-filter-backdrop { position: fixed; inset: 0; z-index: 89; background: rgba(15, 23, 42, .4); }
	/* 카드 썸네일은 카드 폭 전체(QA #82). */
	.vd-cards--market { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vd-cards--market .vd-card__media { width: 100%; max-width: none; }
}
@media (max-width: 420px) { .vd-cards--market { grid-template-columns: 1fr; } }
.vd-mkt-filter__head { display: none; }
@media (max-width: 760px) { .vd-mkt-filter.is-open .vd-mkt-filter__head { display: flex; } }

/* 주제별 구역(2026-11-08 사용자 지시) — 마켓 첫 화면은 카테고리별 대표 영상을 먼저 보여 준다.
   조건을 걸어 찾는 종합 검색은 「상세검색」에서 한다. */
.vd-mkt-searchbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 14px; }
.vd-mkt-searchbar > p, .vd-mkt-searchbar > span { margin: 0; }
.vd-mkt-section { margin: 0 0 26px; }
.vd-mkt-section__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0 0 10px; }
.vd-mkt-section__head .vd-h2 { margin: 0; font-size: 19px; }
.vd-mkt-section__head .vd-btn { margin-left: auto; }
@media (max-width: 760px) {
	.vd-mkt-section { margin-bottom: 20px; }
	.vd-mkt-section__head .vd-h2 { font-size: 17px; }
}

/* 마켓 상세: 추천 패키지는 구매 상자 아래, 미리보기와 간격(QA #95·#79) */
.vd-own-hero__recs { display: grid; gap: 6px; margin: 0 0 var(--s-4); padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface-2); }
.vd-own-hero__recs h2 { margin: 0; }
.vd-own-hero__recs ul { margin: 0; padding-left: 18px; }
.vd-own-hero__buy > details { margin-bottom: 12px; }
.vd-own-hero__preview-note { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-2); background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; font-weight: 700; }

/* 빈 장바구니·보관함에 인기 판매 영상 4편(QA #100) */
.vd-mkt-popular { display: grid; gap: 10px; margin-top: 8px; }
.vd-mkt-popular h2 { margin: 0; font-size: 18px; }
.vd-mkt-popular ul { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; }
.vd-mkt-popular a { display: grid; gap: 6px; color: var(--ink); text-decoration: none; }
.vd-mkt-popular__thumb { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-2); background: var(--surface-2); }
.vd-mkt-popular__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.vd-mkt-popular strong { font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vd-mkt-popular small { color: var(--accent-ink); font-weight: 800; }
@media (max-width: 760px) { .vd-mkt-popular ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 요금제(QA #85·#97) ---------- */
.vd-pricing2__table th.is-pro, .vd-pricing2__table thead th { text-decoration: none; }
/* 비교표 행 설명(옛 기능 카드 설명을 합침, QA #97) */
.vd-pricing2__rowdesc { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--muted); word-break: keep-all; }
.vd-pricing2__table thead th a, .vd-pricing2__table thead th abbr { text-decoration: none; border: 0; }
@media (max-width: 640px) {
	/* 비교표는 항목별 카드(무료 · 프로)로 */
	.vd-pricing2__table, .vd-pricing2__table tbody, .vd-pricing2__table tr, .vd-pricing2__table th, .vd-pricing2__table td { display: block; width: 100%; }
	.vd-pricing2__table thead { display: none; }
	.vd-pricing2__table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 12px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); }
	.vd-pricing2__table tr > th[scope="row"] { grid-column: 1 / -1; padding: 0; font-size: 15px; font-weight: 800; border: 0; }
	.vd-pricing2__table tr > td { padding: 8px 10px; border: 0; border-radius: var(--r-2); background: var(--surface-2); font-size: 13px; word-break: keep-all; }
	.vd-pricing2__table tr > td::before { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 800; color: var(--muted); }
	.vd-pricing2__table tr > td:nth-of-type(1)::before { content: "무료"; }
	.vd-pricing2__table tr > td:nth-of-type(2)::before { content: "프로"; color: var(--accent-ink); }
}

/* ---------- 도움말(QA #15·#98) ---------- */
.vd-help-tabs-wrap { position: relative; min-width: 0; max-width: 100%; overflow: hidden; } /* 줄바꿈 없는 탭 줄의 최소 폭이 격자 부모를 밀지 않게 */
@media (max-width: 760px) {
	.vd-help-tabs-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--canvas, var(--surface))); }
	.vd-help-tabs-wrap > nav { display: flex; flex-wrap: nowrap; max-width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-right: 28px; }
	.vd-help-tabs-wrap > nav::-webkit-scrollbar { display: none; }
	.vd-help-tabs-wrap > nav > a { flex: none; white-space: nowrap; }
}

/* 도움말 머리(2026-11-06 QA #98): 「도움말」 라벨이 격자 칸 전체로 늘어나 흰 막대처럼 보이던 것 → 글자 폭 배지.
   검색창 왼쪽 돋보기, 위쪽 FAQ 5개도 아코디언 모양(.vd-faq)으로. */
.vd-help__head > .vd-hero__eyebrow { justify-self: start; align-self: start; width: fit-content; max-width: 100%; }
.vd-help__searchbox { position: relative; display: block; }
.vd-help__searchbox > svg, .vd-help__searchbox > .vd-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.vd-help .vd-help__search .vd-field .vd-help__searchbox input.vd-input { width: 100%; min-height: 46px; padding-left: 42px; }
.vd-help .vd-panel > .vd-faq { margin: 8px 0; }

/* 패키지 상세 발행 패널 접기(2026-11-06 QA #96) */
.vd-pubflow-fold { margin: 0 0 16px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); }
.vd-pubflow-fold > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 16px; cursor: pointer; font-weight: 700; list-style: none; }
.vd-pubflow-fold > summary::-webkit-details-marker { display: none; }
.vd-pubflow-fold > summary small { margin-left: auto; font-weight: 500; }
.vd-pubflow-fold > .vd-pubflow { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-3) var(--r-3); }