/* AI 대신맨 — 공용 UI "고민 해결소" (docs/DESIGN.md). 모바일 우선, 다크 모드, 인앱 브라우저(카카오톡·인스타) 호환.
   호환 메모: backdrop-filter/:has()/container query/100vh 의존 없음. gap 은 flex 에서도 쓰지만 없어도 margin 으로 버티게.
   하위 호환: 기존 --vl-* 변수와 .vl-* 클래스 이름은 전부 유지(ai-court 가 그대로 상속). */

/* 웹폰트(무료·OFL): 본문 Pretendard(jsDelivr), 제목 Jua(Google Fonts). 못 불러오면 시스템 폰트. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url("https://fonts.googleapis.com/css2?family=Jua&display=swap");

:root {
  --vl-bg: #f6efe3;
  --vl-surface: #fffaf2;
  --vl-surface-2: #f2e7d5;
  --vl-edge: #e3d3bb;
  --vl-text: #2b211b;
  --vl-text-soft: #5a4b40;
  --vl-text-faint: #74655a;
  --vl-border: #e6d8c3;
  --vl-accent: #ad4320;
  --vl-accent-deep: #7f2f15;
  --vl-accent-ink: #ffffff;
  --vl-accent-soft: #fbe3d5;
  --vl-pink: #ee8c9c;
  --vl-premium: #e7a13a;
  --vl-danger: #bf3a2f;
  --vl-navy: #283158;
  --vl-navy-soft: #e2e5f2;
  --vl-mint: #2a7559;
  --vl-mint-soft: #dcefe5;
  --vl-butter: #f4d77c;
  --vl-tape: rgba(232, 214, 160, .85);
  --vl-dot: rgba(120, 90, 60, .09);

  --vl-radius-sm: 12px;
  --vl-radius: 20px;
  --vl-radius-lg: 28px;
  --vl-shadow: 0 8px 24px rgba(80, 52, 24, .08);
  --vl-shadow-pop: 0 3px 0 var(--vl-edge), 0 10px 24px rgba(80, 52, 24, .07);
  --vl-shadow-lift: 0 5px 0 var(--vl-edge), 0 16px 32px rgba(80, 52, 24, .12);

  --vl-s1: 4px; --vl-s2: 8px; --vl-s3: 12px; --vl-s4: 16px; --vl-s5: 24px; --vl-s6: 32px; --vl-s7: 48px;
  --vl-ease: cubic-bezier(.2, .8, .2, 1);

  --vl-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Segoe UI", Roboto, sans-serif;
  --vl-font-display: "Jua", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --vl-maxw: 560px;
  --vl-result-accent: var(--vl-accent);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --vl-bg: #1a1613;
    --vl-surface: #251f1a;
    --vl-surface-2: #30281f;
    --vl-edge: #0f0c0a;
    --vl-text: #f4ebdf;
    --vl-text-soft: #d0c2b1;
    --vl-text-faint: #a99a89;
    --vl-border: #3b3128;
    --vl-accent: #f08259;
    --vl-accent-deep: #a8492a;
    --vl-accent-ink: #24130b;
    --vl-accent-soft: #43271b;
    --vl-danger: #ff8a7a;
    --vl-navy: #aab4ec;
    --vl-navy-soft: #262b45;
    --vl-mint: #7fd1ad;
    --vl-mint-soft: #1d3a2f;
    --vl-butter: #6b5622;
    --vl-tape: rgba(200, 180, 120, .45);
    --vl-dot: rgba(255, 235, 210, .05);
    --vl-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    --vl-shadow-pop: 0 3px 0 var(--vl-edge), 0 10px 24px rgba(0, 0, 0, .3);
    --vl-shadow-lift: 0 5px 0 var(--vl-edge), 0 16px 32px rgba(0, 0, 0, .4);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background-color: var(--vl-bg);
  background-image: radial-gradient(var(--vl-dot) 1.2px, transparent 1.3px);
  background-size: 18px 18px;
  color: var(--vl-text);
  font-family: var(--vl-font);
  font-size: 1rem;
  line-height: 1.65;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--vl-accent); text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
::selection { background: var(--vl-butter); color: #2b211b; }
:focus-visible { outline: 3px solid var(--vl-accent); outline-offset: 2px; }

/* 레이아웃 */
.vl-app, .vl-container {
  width: 100%;
  max-width: var(--vl-maxw);
  margin: 0 auto;
  padding: var(--vl-s5) var(--vl-s4) calc(var(--vl-s6) + env(safe-area-inset-bottom, 0px));
}
.vl-header { display: flex; align-items: center; justify-content: space-between; gap: var(--vl-s3); padding: 0 0 var(--vl-s4); }
.vl-logo {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-family: var(--vl-font-display); font-weight: 400; font-size: 1.375rem; letter-spacing: -.01em;
  text-decoration: none; color: var(--vl-text);
}
.vl-logo span { color: var(--vl-accent); }
.vl-logo-mark { width: 30px; height: 30px; flex: 0 0 30px; }
.vl-screen { animation: vl-fade .28s var(--vl-ease); }
@keyframes vl-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.vl-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }

/* 등장: 목록 자식이 차례로 떠오른다 */
.vl-rise > * { animation: vl-rise .42s var(--vl-ease) both; }
.vl-rise > :nth-child(2) { animation-delay: .06s; }
.vl-rise > :nth-child(3) { animation-delay: .12s; }
.vl-rise > :nth-child(4) { animation-delay: .18s; }
.vl-rise > :nth-child(5) { animation-delay: .24s; }
.vl-rise > :nth-child(n+6) { animation-delay: .3s; }
@keyframes vl-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes vl-pop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes vl-wiggle { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(-1deg); } }
@keyframes vl-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* 타이포 */
.vl-title {
  font-family: var(--vl-font-display); font-weight: 400;
  font-size: 1.875rem; line-height: 1.25; letter-spacing: -.01em; margin: 8px 0 10px; text-align: center;
}
.vl-subtitle { font-size: 1rem; color: var(--vl-text-soft); text-align: center; margin: 0 0 8px; }
.vl-desc { color: var(--vl-text-soft); text-align: center; }
.vl-meta { color: var(--vl-text-faint); font-size: 0.875rem; text-align: center; margin: 16px 0 24px; }
.vl-link { display: block; text-align: center; margin-top: 16px; font-size: 0.875rem; color: var(--vl-text-faint); }
.vl-kicker {
  display: inline-block; margin: 0 0 6px; font-size: 0.875rem; font-weight: 800; letter-spacing: .02em;
  color: var(--vl-accent);
}
.vl-section-title {
  display: inline; font-family: var(--vl-font-display); font-weight: 400; font-size: 1.3125rem; line-height: 1.3; margin: 0;
  background: linear-gradient(transparent 62%, var(--vl-butter) 62%, var(--vl-butter) 92%, transparent 92%);
}
.vl-section-head { margin: var(--vl-s6) 0 var(--vl-s3); }
.vl-hl { background: linear-gradient(transparent 60%, var(--vl-butter) 60%, var(--vl-butter) 92%, transparent 92%); padding: 0 2px; }
.vl-empty { text-align: center; color: var(--vl-text-faint); padding: 40px 0; }
.vl-hero-emoji { font-size: 5rem; line-height: 1.1; text-align: center; margin-top: 16px; animation: vl-bob 3s ease-in-out infinite; }

/* 버튼 — 누르면 2px 내려가는 두께 있는 버튼 */
.vl-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; padding: 12px 22px;
  border: 1.5px solid transparent; border-radius: 999px;
  font-size: 1rem; font-weight: 700; line-height: 1.3; text-decoration: none; cursor: pointer;
  background: var(--vl-surface-2); color: var(--vl-text);
  box-shadow: 0 3px 0 var(--vl-edge);
  transition: transform .12s var(--vl-ease), box-shadow .12s var(--vl-ease), background-color .15s ease, opacity .15s ease;
  -webkit-appearance: none; appearance: none;
  -webkit-user-select: none; user-select: none;
}
.vl-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--vl-edge); }
.vl-btn:focus-visible, .vl-option:focus-visible, .vl-share-btn:focus-visible, .vl-svc:focus-visible, .vl-chip:focus-visible { outline: 3px solid var(--vl-accent); outline-offset: 3px; }
.vl-btn[disabled], .vl-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.vl-btn-primary { background: var(--vl-accent); color: var(--vl-accent-ink); box-shadow: 0 4px 0 var(--vl-accent-deep); }
.vl-btn-primary:active { box-shadow: 0 1px 0 var(--vl-accent-deep); transform: translateY(3px); }
.vl-btn-secondary { background: var(--vl-accent-soft); color: var(--vl-accent); box-shadow: 0 3px 0 color-mix(in srgb, var(--vl-accent) 25%, var(--vl-accent-soft)); }
.vl-btn-ghost { background: var(--vl-surface); color: var(--vl-text-soft); border-color: var(--vl-border); }
.vl-btn-premium { background: var(--vl-premium); color: #2b1a00; box-shadow: 0 4px 0 #b57619; }
.vl-btn-lg { display: flex; width: 100%; min-height: 56px; font-size: 1.125rem; }
.vl-screen > .vl-btn { display: flex; width: 100%; margin-top: 12px; }
@media (hover: hover) {
  .vl-btn:hover { filter: brightness(1.04); }
  .vl-btn-ghost:hover { border-color: var(--vl-text-faint); color: var(--vl-text); }
}

/* 카드 · 테이프 · 도장 · 타일 */
.vl-card {
  display: block; position: relative; background: var(--vl-surface); color: var(--vl-text);
  border: 1.5px solid var(--vl-border); border-radius: var(--vl-radius);
  box-shadow: var(--vl-shadow-pop); padding: 20px; text-decoration: none;
}
.vl-taped { position: relative; }
.vl-taped::before, .vl-taped::after, .vl-tape {
  content: ""; position: absolute; top: -12px; width: 76px; height: 24px; z-index: 2;
  background: var(--vl-tape);
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 4px, transparent 4px 8px);
  box-shadow: 0 1px 2px rgba(80, 52, 24, .12);
  pointer-events: none;
}
.vl-taped::before { left: 18px; transform: rotate(-6deg); }
.vl-taped::after { right: 18px; transform: rotate(5deg); }
.vl-tape { display: block; }
.vl-stamp {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 12px; border: 2.5px solid #fff;
  background: var(--vl-accent); color: #fff; font-size: 0.9375rem; font-weight: 800; line-height: 1.2;
  box-shadow: 0 4px 10px rgba(127, 47, 21, .28);
  transform: rotate(-4deg);
}
.vl-tile {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 64px; height: 64px; border-radius: 20px; font-size: 2.125rem; line-height: 1;
  background: var(--vl-accent-soft); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .06);
}
.vl-errors { color: var(--vl-danger); font-size: 0.875rem; padding-left: 20px; }

/* 상태(빈·오류·로딩) — 캐릭터가 안내한다 */
.vl-state { text-align: center; padding: var(--vl-s6) var(--vl-s4); color: var(--vl-text-soft); }
.vl-state-art { display: block; width: 120px; height: auto; margin: 0 auto var(--vl-s3); }
.vl-state-title { font-family: var(--vl-font-display); font-size: 1.25rem; color: var(--vl-text); margin: 0 0 4px; }
.vl-state p { margin: 0 0 var(--vl-s4); font-size: 0.9375rem; }
.vl-state.is-loading .vl-state-art { animation: vl-bob 1.4s ease-in-out infinite; }

/* 허브 */
.vl-hub-hero { text-align: center; padding: 8px 0 24px; }
.vl-hub-hero h1 { font-family: var(--vl-font-display); font-weight: 400; font-size: 1.875rem; line-height: 1.25; margin: 0 0 8px; }
.vl-hub-hero p { margin: 0; color: var(--vl-text-soft); }
.vl-svc-list { display: grid; grid-template-columns: 1fr; gap: 28px; padding-top: 12px; }
.vl-svc {
  display: flex; align-items: center; gap: 16px; padding: 18px;
  transition: transform .18s var(--vl-ease), box-shadow .18s var(--vl-ease);
}
.vl-svc:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--vl-edge); }
@media (hover: hover) { a.vl-svc:hover { transform: translateY(-3px); box-shadow: var(--vl-shadow-lift); } }
.vl-svc.is-disabled { opacity: .6; }
.vl-svc-emoji {
  flex: 0 0 64px; width: 64px; height: 64px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.125rem; background: var(--vl-accent-soft); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .06);
}
.vl-svc-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.vl-svc-title { font-family: var(--vl-font-display); font-weight: 400; font-size: 1.375rem; line-height: 1.3; }
.vl-svc-tagline { color: var(--vl-text-soft); font-size: 0.9063rem; line-height: 1.5; margin-top: 2px; }
.vl-svc-meta { color: var(--vl-text-faint); font-size: 0.875rem; margin-top: 6px; }
.vl-svc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding: 0; list-style: none; }
.vl-svc-tags li { font-size: 0.875rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--vl-surface-2); color: var(--vl-text-soft); }
.vl-svc-cta {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; margin-top: 12px;
  min-height: 40px; padding: 8px 16px; border-radius: 999px; font-weight: 800; font-size: 0.9375rem;
  background: var(--vl-accent); color: var(--vl-accent-ink); box-shadow: 0 3px 0 var(--vl-accent-deep);
}

/* 포스터형 서비스 카드(hub.js 가 data-slug 로 테마) */
.vl-svc-poster { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: visible; }
.vl-svc-poster .vl-svc-art {
  position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  min-height: 132px; padding: 18px 18px 0; border-radius: calc(var(--vl-radius) - 2px) calc(var(--vl-radius) - 2px) 0 0;
  background: var(--svc-bg, var(--vl-accent-soft)); overflow: hidden;
}
.vl-svc-poster .vl-svc-emoji { background: var(--vl-surface); margin-bottom: 18px; transform: rotate(-4deg); box-shadow: 0 3px 0 rgba(0, 0, 0, .12); }
.vl-svc-poster .vl-svc-scene { width: 170px; max-width: 55%; height: auto; display: block; }
.vl-svc-poster .vl-svc-body { padding: 16px 18px 20px; }
.vl-svc[data-slug="hard-talk"] { --svc-bg: #f6dc8c; }
.vl-svc[data-slug="ai-court"] { --svc-bg: #2b3560; }
.vl-svc[data-slug="ai-court"] .vl-svc-cta { background: #283158; color: #fff; box-shadow: 0 3px 0 #161c36; }
@media (prefers-color-scheme: dark) {
  .vl-svc[data-slug="hard-talk"] { --svc-bg: #5d4a1f; }
  .vl-svc[data-slug="ai-court"] { --svc-bg: #1f2647; }
  .vl-svc[data-slug="ai-court"] .vl-svc-cta { background: #aab4ec; color: #161c36; box-shadow: 0 3px 0 #5d6699; }
}
.vl-badge {
  display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px;
  font-family: var(--vl-font); font-size: 0.875rem; font-weight: 800; vertical-align: 3px; line-height: 1.5;
  background: var(--vl-accent); color: var(--vl-accent-ink);
}
.vl-badge-muted { background: var(--vl-surface-2); color: var(--vl-text-soft); }

/* 칩(단일·다중 선택) */
.vl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vl-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 44px; padding: 8px 14px; margin: 0;
  border: 1.5px solid var(--vl-border); border-radius: 14px;
  background: var(--vl-surface); color: var(--vl-text); font: inherit; font-weight: 700; cursor: pointer;
  box-shadow: 0 2px 0 var(--vl-edge);
  transition: transform .12s var(--vl-ease), border-color .15s ease, background-color .15s ease;
  -webkit-appearance: none; appearance: none;
}
.vl-chip:active { transform: translateY(2px); box-shadow: none; }
.vl-chip.is-on { border-color: var(--vl-accent); background: var(--vl-accent-soft); color: var(--vl-accent); box-shadow: 0 2px 0 color-mix(in srgb, var(--vl-accent) 40%, transparent); animation: vl-pop .3s var(--vl-ease); }

/* 진행바 */
.vl-progress { height: 10px; border-radius: 999px; background: var(--vl-surface-2); overflow: hidden; margin-top: 8px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06); }
.vl-progress-bar {
  height: 100%; border-radius: 999px;
  background: var(--vl-accent);
  background: linear-gradient(90deg, var(--vl-accent), var(--vl-premium));
  transition: width .35s var(--vl-ease);
}
.vl-progress-label { text-align: right; font-size: 0.875rem; color: var(--vl-text-faint); margin-top: 6px; }

/* 문항·선택지 */
.vl-q-text { font-family: var(--vl-font-display); font-weight: 400; font-size: 1.4375rem; line-height: 1.4; margin: 24px 0 20px; text-align: center; }
.vl-q-image { display: block; margin: 0 auto 16px; border-radius: var(--vl-radius-sm); }
.vl-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.vl-option {
  display: block; width: 100%; text-align: left; color: var(--vl-text); text-decoration: none;
  min-height: 56px; padding: 14px 18px; margin: 0;
  background: var(--vl-surface); border: 1.5px solid var(--vl-border); border-radius: 16px;
  box-shadow: 0 3px 0 var(--vl-edge);
  font-size: 1rem; line-height: 1.45; cursor: pointer;
  transition: transform .12s var(--vl-ease), border-color .15s ease, box-shadow .12s var(--vl-ease);
  -webkit-appearance: none; appearance: none;
}
.vl-option:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--vl-edge); border-color: var(--vl-accent); background: var(--vl-accent-soft); }
@media (hover: hover) { .vl-option:hover { border-color: var(--vl-accent); transform: translateY(-1px); } }

/* 결과 카드 — 크림 종이 + 테이프 */
.vl-banner {
  text-align: center; font-size: 0.875rem; font-weight: 700; padding: 10px 12px; margin-bottom: 16px;
  border-radius: var(--vl-radius-sm); background: var(--vl-accent-soft); color: var(--vl-accent);
}
.vl-result-card {
  position: relative; text-align: center;
  background: var(--vl-surface); border: 1.5px solid var(--vl-border); border-radius: var(--vl-radius-lg);
  box-shadow: var(--vl-shadow-pop); padding: 32px 20px 24px; margin: 14px 0 20px;
  animation: vl-rise .45s var(--vl-ease) both;
}
.vl-result-card::before {
  content: ""; position: absolute; left: 50%; top: -12px; width: 96px; height: 24px; margin-left: -48px;
  background: var(--vl-tape); transform: rotate(-3deg); box-shadow: 0 1px 2px rgba(80, 52, 24, .12);
}
.vl-result-card::after {
  content: ""; position: absolute; left: 20px; right: 20px; top: 14px; height: 4px; border-radius: 999px;
  background: var(--vl-result-accent); opacity: .9;
}
.vl-result-label { font-size: 0.875rem; color: var(--vl-text-faint); font-weight: 700; }
.vl-result-emoji { font-size: 5.75rem; line-height: 1.15; margin: 8px 0; }
.vl-result-title { font-family: var(--vl-font-display); font-weight: 400; font-size: 1.875rem; line-height: 1.25; margin: 0 0 8px; color: var(--vl-result-accent); }
.vl-result-summary { font-size: 1.0625rem; font-weight: 700; margin: 0 0 12px; }
.vl-result-desc { text-align: left; color: var(--vl-text-soft); font-size: 0.9375rem; }
.vl-result-desc p { margin: 0 0 10px; }
.vl-tags { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.vl-tags li { font-size: 0.875rem; font-weight: 700; padding: 3px 11px; border-radius: 999px; background: var(--vl-surface-2); color: var(--vl-text-soft); }

/* 궁합 미니 카드(results[].related) — 탭하면 미리보기 모달 */
.vl-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0 0 16px; }
.vl-related-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; margin: 0;
  padding: 12px 8px; cursor: pointer; text-align: center; font: inherit; color: var(--vl-text);
  background: var(--vl-surface); border: 1.5px solid var(--vl-border); border-radius: 16px; box-shadow: 0 3px 0 var(--vl-edge);
  -webkit-appearance: none; appearance: none;
}
.vl-related-card:focus-visible { outline: 3px solid var(--vl-accent); outline-offset: 2px; }
@media (hover: hover) { .vl-related-card:hover { border-color: var(--vl-accent); } }
.vl-related-label { font-size: 0.875rem; font-weight: 700; color: var(--vl-text-faint); }
.vl-related-emoji { font-size: 2rem; line-height: 1.2; }
.vl-related-title { font-size: 0.9375rem; font-weight: 700; }
.vl-modal .vl-result-card { box-shadow: none; margin-bottom: 0; }

/* 폼 입력(공용) — <label class="vl-field"><span class="vl-label">이름 <small>선택</small></span><input class="vl-input"></label> */
.vl-field { display: grid; gap: 6px; font-weight: 700; font-size: 0.9375rem; }
.vl-label { display: block; }
.vl-field small { font-weight: 400; color: var(--vl-text-faint); }
.vl-input, .vl-select {
  width: 100%; min-width: 0; min-height: 48px; margin: 0;
  font: inherit; font-size: 1rem; font-weight: 500; padding: 12px 14px; border-radius: var(--vl-radius-sm);
  border: 1.5px solid var(--vl-border); background: var(--vl-surface); color: var(--vl-text);
  box-shadow: inset 0 2px 0 rgba(80, 52, 24, .04);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.vl-input::placeholder { color: var(--vl-text-faint); opacity: 1; }
.vl-input:focus, .vl-select:focus { border-color: var(--vl-accent); }
.vl-input:focus-visible, .vl-select:focus-visible { outline: 3px solid color-mix(in srgb, var(--vl-accent) 35%, transparent); outline-offset: 1px; }
textarea.vl-input { resize: vertical; line-height: 1.55; }
.vl-check { display: flex; gap: 8px; align-items: center; min-height: 44px; font-size: 0.875rem; color: var(--vl-text-soft); }
.vl-check input { width: 20px; height: 20px; accent-color: var(--vl-accent); }

/* 공유 바 */
.vl-share { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.vl-share-label { margin: 4px 0 0; text-align: center; font-size: 0.875rem; font-weight: 700; color: var(--vl-text-faint); }
.vl-share-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.vl-share-btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 64px; min-height: 44px; padding: 0; border: 0; background: none;
  font-size: 0.875rem; font-weight: 700; text-decoration: none; cursor: pointer; color: var(--vl-text-soft);
}
.vl-share-btn[hidden] { display: none; }
.vl-share-ico {
  display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px;
  background: var(--vl-surface-2); color: var(--vl-text); font-size: 0.9375rem; font-weight: 900;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .14); transition: transform .12s var(--vl-ease), box-shadow .12s var(--vl-ease);
}
.vl-share-ico svg { width: 22px; height: 22px; display: block; }
.vl-share-btn:active .vl-share-ico { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .14); }
.vl-share-kakao .vl-share-ico { background: #fee500; color: #191919; }
.vl-share-x .vl-share-ico { background: #111; color: #fff; }
.vl-share-fb .vl-share-ico { background: #1877f2; color: #fff; }
.vl-share-line .vl-share-ico { background: #06c755; color: #fff; }
.vl-share-copy .vl-share-ico { background: var(--vl-surface); border: 1.5px solid var(--vl-border); }

/* 모달·토스트 */
.vl-modal-backdrop {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(30, 20, 12, .55);
  animation: vl-fade-in .18s ease-out;
}
.vl-modal {
  width: 100%; max-width: 420px; max-height: 90%; overflow: auto;
  background: var(--vl-surface); color: var(--vl-text); border: 1.5px solid var(--vl-border);
  border-radius: var(--vl-radius-lg); padding: 24px 20px 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
  animation: vl-rise .3s var(--vl-ease);
}
@keyframes vl-fade-in { from { opacity: 0; } to { opacity: 1; } }
.vl-modal-title { font-family: var(--vl-font-display); font-weight: 400; font-size: 1.3125rem; margin: 0 0 10px; }
.vl-modal-body { color: var(--vl-text-soft); }
.vl-modal-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.vl-card-preview { display: block; width: 100%; border-radius: var(--vl-radius-sm); -webkit-touch-callout: default; }
.vl-toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 1100;
  transform: translate(-50%, 20px) scale(.96); opacity: 0; pointer-events: none;
  max-width: calc(100% - 32px); padding: 12px 20px; border-radius: 999px;
  background: #2b211b; color: #fff8ee; font-size: 0.875rem; font-weight: 700;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
  transition: opacity .2s ease, transform .25s var(--vl-ease);
}
.vl-toast.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* 푸터 */
.vl-footer {
  max-width: var(--vl-maxw); margin: 16px auto 0; padding: 24px 16px calc(28px + env(safe-area-inset-bottom, 0px));
  text-align: center; font-size: 0.875rem; color: var(--vl-text-faint);
  border-top: 2px dashed var(--vl-border);
}
.vl-footer a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; margin: 0 2px;
  color: var(--vl-text-soft); text-decoration: none; font-weight: 600; border-radius: 999px;
}
.vl-footer a:hover { color: var(--vl-accent); text-decoration: underline; }
.vl-footer-brand { display: block; margin-bottom: 4px; font-family: var(--vl-font-display); font-size: 1.0625rem; color: var(--vl-text); }
.vl-footer-note { display: block; margin-top: 6px; }

/* 정적 문서(legal) — 종이 문서 카드 */
.vl-doc h1 { font-family: var(--vl-font-display); font-weight: 400; font-size: 1.75rem; line-height: 1.3; margin: 8px 0 12px; }
.vl-doc h2 { font-size: 1.0625rem; font-weight: 800; margin: 32px 0 8px; padding-left: 12px; border-left: 4px solid var(--vl-accent); line-height: 1.4; }
.vl-doc p, .vl-doc li { color: var(--vl-text-soft); font-size: 0.9688rem; }
.vl-doc li { margin-bottom: 4px; }
.vl-doc strong { color: var(--vl-text); }
.vl-doc code { font-size: 0.875rem; padding: 1px 6px; border-radius: 6px; background: var(--vl-surface-2); }
.vl-doc table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.vl-doc th, .vl-doc td { border: 1px solid var(--vl-border); padding: 8px; text-align: left; vertical-align: top; }
.vl-doc th { background: var(--vl-surface-2); }
.vl-paper {
  background: var(--vl-surface); border: 1.5px solid var(--vl-border); border-radius: var(--vl-radius-lg);
  box-shadow: var(--vl-shadow-pop); padding: 28px 20px 24px; margin-top: 16px;
}
.vl-doc-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.vl-doc-meta li { margin: 0; font-size: 0.875rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--vl-surface-2); color: var(--vl-text-soft); }

@media (min-width: 720px) {
  .vl-title, .vl-result-title { font-size: 2.125rem; }
  .vl-hub-hero h1 { font-size: 2.25rem; }
  .vl-paper { padding: 36px 36px 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .vl-screen, .vl-rise > *, .vl-result-card, .vl-modal, .vl-modal-backdrop, .vl-hero-emoji, .vl-chip.is-on, .vl-state-art { animation: none !important; }
  .vl-btn, .vl-svc, .vl-option, .vl-chip, .vl-share-ico, .vl-toast { transition: none !important; }
}

/* 넓은 화면(≥1100px): 본문 최대 폭 560 → 720px (C5). 카드 2열 배치는 각 서비스 CSS 몫. */
@media (min-width: 1100px) {
  :root { --vl-maxw: 720px; }
}