/* ==========================================================================
   방문자 화면 디자인 시스템 v1 — taste-skill 방향 적용 (2026-11-12 사용자 지시)

   대상(루트에 .vd-visitor 가 붙은 화면만): 홈 · 쇼케이스 목록 · 영상 마켓
   목록/상세 · 패키지 찾기 · 요금제 · AI 모델. 회원 작업 화면(스튜디오·관리자)은
   공통 UI 지침 3.0 계통 그대로고 이 파일은 거기에 얹지 않는다.

   원칙(정본은 docs/system/ui/design-direction.md)
   - 베이스 색·토큰은 tokens.css 그대로 둔다(2026-11-11 사용자 지시 「베이스
     색상을 싹 바꾸면 절대 안 된다」). 이 파일은 타이포그래피·동작·카드 질감만
     얹는 얇은 계층이다.
   - 제목은 SUIT(기하·두께), 본문은 Pretendard. 두 얼굴이 일을 나눠 갖는다.
   - hover 로 요소 위치를 움직이지 않는다(공통 UI 지침 v3.1 「hover 위치 고정」).
     반응은 누름(press)·틀 안 그림 확대·선 색 변화로만 낸다.
   - 등장 연출은 페이지당 첫 화면에 1회, 0.6초 안으로 끝나며,
     prefers-reduced-motion 에서는 전부 끈다.
   ========================================================================== */

/* ---- 얼굴: 제목 SUIT, 본문 Pretendard(jsdelivr woff2 — CSP font-src 허용됨) ----
   - 본문 Pretendard 는 layout_head.ejs 가 부르는 dynamic-subset CSS(글자 범위별로 잘게 나눈 파일)가 이미 정의한다.
     여기서 같은 이름을 다시 정의하지 않는다(2026-11-12 운영 글꼴 실패 49건 — 이 파일이 2MB 통짜 파일을
     없는 주소(gh/.../woff2/PretendardVariable.woff2 → 404)로 다시 정의해 모든 방문 화면에서 글꼴 실패가 났다).
   - 외부 글꼴 주소는 버전을 고정한다(@2.0.5) — 버전 없는 gh 주소는 저장소가 바뀌면 파일이 바뀌거나 사라진다. */
@font-face {
	font-family: "SUIT";
	src: url("https://cdn.jsdelivr.net/gh/sunn-us/SUIT@2.0.5/fonts/static/woff2/SUIT-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "SUIT";
	src: url("https://cdn.jsdelivr.net/gh/sunn-us/SUIT@2.0.5/fonts/static/woff2/SUIT-ExtraBold.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

.vd-visitor {
	--v-display: "SUIT", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

/* ---- 제목 계층: 하나의 제목체로, 크기·무게·자간만 단계를 나눈다 ---- */
.vd-visitor h1,
.vd-visitor .vd-h1,
.vd-visitor h2,
.vd-visitor .vd-home-hero__title,
.vd-visitor .vd-home-urlhero__title,
.vd-visitor .vd-page__head h1 {
	font-family: var(--v-display);
	font-weight: 800;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.vd-visitor h2 { font-weight: 700; letter-spacing: -0.015em; }
.vd-visitor h3 { font-family: var(--v-display); font-weight: 700; letter-spacing: -0.01em; }
/* 카드 제목·숫자 통계는 본문체가 버티고, 강조만 제목체로 바꾼다. */
.vd-visitor .vd-mod-card__name,
.vd-visitor .vd-sclist__item .vd-showcase__cap strong { font-weight: 700; }

/* 키커(구역 꼬리표): 작은 라벨은 본문체 700에 악센트 색 — 제목과 목소리를 나눈다. */
.vd-visitor .vd-home-kicker { font-weight: 700; }

/* ---- 단추: 누름에만 살짝 눌린다(hover 는 위치 불변) ---- */
.vd-visitor .vd-btn:not(:disabled):active { transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) { .vd-visitor .vd-btn:not(:disabled):active { transform: none; } }

/* ---- 카드: 하나의 레시피 — 둥근 모서리(토큰) + 1px 선 + 그림은 틀 안에서만 확대 ---- */
.vd-visitor .vd-card,
.vd-visitor .vd-mod-card,
.vd-visitor .vd-sclist__item {
	transition: border-color var(--tr), box-shadow var(--tr);
}
.vd-visitor a.vd-card:hover,
.vd-visitor .vd-mod-card:hover,
.vd-visitor .vd-sclist__item:hover { border-color: var(--line-2); }
/* 틀 안 그림 확대: 선을 넘지 않게 미디어 틀에서 잘라 둔다. */
.vd-visitor .vd-card__media,
.vd-visitor .vd-mod-card { overflow: hidden; }
.vd-visitor .vd-card__media img,
.vd-visitor .vd-mod-card__cover,
.vd-visitor .vd-sclist__item img {
	transition: transform 0.35s ease;
}
.vd-visitor a.vd-card:hover .vd-card__media img,
.vd-visitor .vd-mod-card:hover .vd-mod-card__cover,
.vd-visitor .vd-sclist__item:hover img { transform: scale(1.02); }

/* ---- 첫 화면 등장 연출: JS(visitor-motion.js)가 html 에 .js 를 붙여야만 숨긴다 ---- */
html.js [data-v-enter] { opacity: 0; transform: translateY(10px); }
html.js [data-v-enter].is-v-in {
	opacity: 1;
	transform: none;
	transition: opacity 0.55s ease, transform 0.55s ease;
}
html.js [data-v-enter][data-v-delay="1"].is-v-in { transition-delay: 90ms; }
html.js [data-v-enter][data-v-delay="2"].is-v-in { transition-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
	html.js [data-v-enter] { opacity: 1; transform: none; transition: none; }
	.vd-visitor .vd-card__media img,
	.vd-visitor .vd-mod-card__cover,
	.vd-visitor .vd-sclist__item img { transition: none; }
}