/* 비회원 빠른 맛보기 카드(.vcard 부품 재사용) + 가입 직후 "내 사주로 저장" 안내.
   dock 안에서 소개 카드(#intro)를 대신한다. 회원에게는 렌더하지 않는다. */
body.has-taste #intro { display: none; }
body.scene-market #taste, body.visiting #taste, body.demo-open #taste { display: none; }

.taste.vcard { position: relative; padding: 16px 18px 14px; max-height: max(300px, calc(100dvh - 330px)); overflow-y: auto; overscroll-behavior: contain; }
/* 결과가 떠 있는 동안에는 예시 사람·예시 오늘 줄을 접어 카드가 마을을 덜 가리게 한다 */
body.has-taste.ts-done .people-wrap, body.has-taste.ts-done #todayLine { display: none; }
.taste .vc-title { font-size: 20px; margin-bottom: 8px; }
.ts-form { margin: 0; }
.ts-row { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.ts-lab { flex: none; width: 4.6em; font-size: 13px; font-weight: 700; color: var(--vc-sub); }
.ts-in {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; box-sizing: border-box; border-radius: 14px; border: 1.5px solid var(--vc-line);
  background: var(--vc-inset); color: var(--vc-ink); font: inherit; font-size: 16px;
}
.ts-in::placeholder { color: var(--vc-sub); opacity: .75; }
.ts-in:focus-visible, .ts-chip input:focus-visible + span, .ts-more summary:focus-visible, .ts-chk input:focus-visible { outline: 3px solid var(--vc-pri); outline-offset: 2px; }
.ts-sex { margin-bottom: 4px; }
.ts-chip { flex: none; position: relative; display: inline-flex; }
.ts-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.ts-chip span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 52px; min-height: 44px; padding: 0 14px; box-sizing: border-box; border-radius: 14px;
  background: var(--vc-soft); color: var(--vc-soft-ink); font-family: 'Jua', sans-serif; font-size: 15px; box-shadow: inset 0 0 0 1px var(--vc-line);
}
.ts-chip input:checked + span { background: var(--vc-ink); color: var(--vc-bg); box-shadow: none; }
.ts-go { flex: 1; margin-left: auto; }
.ts-more { margin: 4px 0 6px; }
.ts-more summary { display: flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--vc-sub); cursor: pointer; border-radius: 10px; }
.ts-chk { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; }
.ts-chk input { width: 22px; height: 22px; margin: 0; accent-color: var(--vc-pri); }
.ts-err { margin: 4px 0 6px; padding: 8px 12px; border-radius: 12px; background: rgba(224, 90, 90, .14); color: var(--vc-ink); font-size: 13px; line-height: 1.5; }
.ts-err[hidden] { display: none; }
.ts-priv { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--vc-sub); word-break: keep-all; }
.ts-go[disabled] { opacity: .6; cursor: progress; }

/* 결과 */
.ts-result-view[hidden], .ts-form-view[hidden] { display: none; }
.ts-nick { margin: 0 0 4px; font-size: 13px; color: var(--vc-sub); }
.ts-sum { margin: 0 0 8px; font-size: 14px; line-height: 1.6; color: var(--vc-ink); word-break: keep-all; }
.ts-kw { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.ts-kw li { padding: 3px 10px; border-radius: 999px; background: var(--vc-soft); font-size: 12.5px; }
.ts-pet { display: flex; align-items: center; gap: 10px; }
.ts-pet .ts-ic { flex: none; width: 36px; height: 36px; }
.ts-pet .ts-ic svg { width: 100%; height: 100%; display: block; }
.ts-night { min-height: 44px; margin-top: 6px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--vc-soft); color: var(--vc-soft-ink); font-family: 'Jua', sans-serif; font-size: 14px; cursor: pointer; }
.ts-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; position: sticky; bottom: -14px; padding: 8px 0 4px; background: var(--vc-bg); }
.ts-acts .vc-btn { flex: 1 1 auto; text-align: center; }
.ts-expand { display: none; min-height: 44px; margin: 0 0 4px; padding: 0; border: 0; background: none; color: var(--vc-sub); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ts-again { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; padding: 0; border: 0; background: none; color: var(--vc-sub); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* 가입 직후 이어 저장 안내(소개 카드 안) */
.carry { margin: 10px 0 0; }
.carry-t { margin: 0 0 4px; font-family: 'Jua', sans-serif; font-size: 17px; }
.carry-s { margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: var(--sub); word-break: keep-all; }

@media (max-width: 640px) {
  .taste.vcard { padding: 14px 16px 12px; border-radius: 22px; max-height: 56dvh; }
  .ts-sum { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .ts-acts { bottom: -12px; }
  /* 별자리를 볼 때는 카드를 제목+버튼만 남겨 하늘을 비운다 */
  .taste.ts-peek .ts-sum, .taste.ts-peek .ts-kw, .taste.ts-peek .vc-rows, .taste.ts-peek .ts-priv, .taste.ts-peek .ts-again { display: none; }
  .taste.ts-peek .ts-expand { display: inline-flex; align-items: center; }
  .taste .vc-title { font-size: 18px; }
  .ts-lab { width: 4.2em; }
  .ts-go { padding: 0 10px; }
  .ts-more summary, .ts-priv { font-size: 12.5px; }
}

/* WebGL 이 없을 때: dock 은 숨겨지므로 맛보기 카드만 위쪽에 보여 주고 장소 목록을 그만큼 내린다 */
body.no-3d.has-taste .dock { display: flex; position: fixed; top: 84px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); width: min(720px, calc(100vw - 24px)); z-index: 3; }
body.no-3d.has-taste .dock > :not(#taste) { display: none; }
body.no-3d.has-taste .placelist { top: calc(96px + var(--taste-h, 0px)); }
body.no-3d.has-taste .taste.vcard { max-height: none; }
body.no-3d .ts-sky-note, body.no-3d .ts-night { display: none; }
@media (max-width: 640px) {
  body.pl-reduce.has-taste .placelist { bottom: calc(var(--taste-h, 200px) + 24px + env(safe-area-inset-bottom)); }
  body.no-3d.has-taste .taste.vcard { max-height: 44dvh; }
  body.no-3d.has-taste .dock { top: 130px; width: auto; left: 12px; right: 12px; transform: none; }
  body.no-3d.has-taste .placelist { top: calc(142px + var(--taste-h, 0px)); }
}