/* 팔자마을 카드 하나로 통일: NPC·장소 대화, 밤하늘 별자리 카드, 걷는 사람 말풍선 카드, 장소 목록, 담벼락.
   기본은 크림 테마, 밤(body.tod-night)에는 모든 카드가 같이 남색 유리 테마로 바뀐다. */
.vcard {
  --vc-bg: #fffdf9; --vc-ink: #43352d; --vc-sub: #86705f; --vc-inset: rgba(251, 239, 226, .8); --vc-line: rgba(67, 53, 45, .12);
  --vc-soft: #fbefe2; --vc-soft-ink: #43352d; --vc-pri: #b8472d; --vc-pri-ink: #fff; --vc-star: #e8a33d;
  --vc-shadow: 0 18px 48px rgba(120, 80, 40, .2);
  background: var(--vc-bg); color: var(--vc-ink); border: 1.5px solid var(--vc-line); border-radius: 24px; box-shadow: var(--vc-shadow);
  box-sizing: border-box; font-family: 'Pretendard Variable', system-ui, sans-serif;
}
body.tod-night .vcard {
  --vc-bg: rgba(30, 36, 72, .95); --vc-ink: #f4f1ff; --vc-sub: #aeb8ee; --vc-inset: rgba(255, 255, 255, .07); --vc-line: rgba(190, 200, 255, .35);
  --vc-soft: rgba(255, 255, 255, .13); --vc-soft-ink: #f4f1ff; --vc-pri: #fff3c4; --vc-pri-ink: #43352d; --vc-star: #ffd86b;
  --vc-shadow: 0 18px 48px rgba(10, 14, 40, .5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.vcard[hidden] { display: none; }

/* 위치·크기: 고정 카드(대화·별자리)는 오른쪽 아래, 모바일은 아래 시트 */
.talk.vcard, .sky-card.vcard { position: fixed; z-index: 4; right: 24px; bottom: 24px; width: 340px; max-width: calc(100vw - 24px); padding: 18px 20px; }
.sky-card.vcard { max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; }

/* 공통 부품 */
.vc-eyebrow { display: block; margin: 0 0 2px; font-size: 12.5px; letter-spacing: .02em; color: var(--vc-sub); }
.vc-eyebrow:empty { display: none; }
.vc-title, .talk.vcard strong { display: block; margin: 0 0 6px; font-family: 'Jua', sans-serif; font-weight: 400; font-size: 21px; line-height: 1.25; color: var(--vc-ink); }
.vc-body, .talk.vcard > p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.6; color: var(--vc-ink); word-break: keep-all; }
.vc-sub { margin: 0 0 10px; font-size: 13px; color: var(--vc-sub); }
.vc-rows { margin: 0 0 12px; padding: 10px 12px; border-radius: 16px; background: var(--vc-inset); }
.vc-rows[hidden] { display: none; }
.vc-row + .vc-row { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--vc-line); }
.vc-row[hidden] { display: none; }
.vc-label { margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.vc-text { margin: 2px 0 0; font-size: 14px; line-height: 1.55; word-break: keep-all; }
.vc-note { margin: 6px 0 0; font-size: 12px; color: var(--vc-sub); }
.vc-note[hidden] { display: none; }
.vc-link { display: inline-block; margin-top: 2px; font-size: 13px; color: var(--vc-ink); text-decoration: underline; text-underline-offset: 3px; }
/* 별점: 어디서나 같은 글자·색·크기 */
.vc-st, .tk-stars, .wt-stars { color: var(--vc-star, #e8a33d); font-size: 13px; font-weight: 400; letter-spacing: 1px; }
.vcard .tk-dot { border-color: var(--vc-line); }

/* 버튼: 주(채움) 하나 + 보조(연한 칩) 하나, 크기 같음 */
.vc-acts, .talk.vcard .talk-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.vc-btn, .talk.vcard .talk-more, .talk.vcard .close, .vcard .wt-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 0 16px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--vc-soft); color: var(--vc-soft-ink); font-family: 'Jua', sans-serif; font-size: 15px; line-height: 1.2; text-decoration: none; box-sizing: border-box;
}
.vc-btn--primary, .talk.vcard .talk-more:not(.talk-more2), .vcard .wt-go { background: var(--vc-pri); color: var(--vc-pri-ink); }
.talk.vcard .talk-more[hidden], .talk.vcard .close[hidden], .vc-btn[hidden] { display: none; }

/* NPC 메뉴: 묵직한 코랄 버튼 대신 가벼운 칩 */
.talk.vcard .talk-menus { gap: 8px; margin: 0 0 12px; }
.talk.vcard .tk-menu { 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); }
.talk.vcard a.tk-menu:hover { filter: none; box-shadow: inset 0 0 0 1.5px var(--vc-ink); }
.talk.vcard .tk-soon { opacity: .55; box-shadow: none; font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--vc-sub); }
.talk.vcard .tk-line, .talk.vcard .tk-head { color: var(--vc-ink); }
.talk.vcard .tk-p { background: var(--vc-inset); }
.talk.vcard .tk-p i { color: var(--vc-ink); }
.talk.vcard .tk-p small { color: var(--vc-sub); }

/* 걷는 사람 말풍선 카드 */
.walk-tip.vcard { padding: 14px 16px 16px; font-size: 14px; }
.walk-tip.vcard::after { background: var(--vc-bg); border-radius: 0 0 4px 0; box-shadow: 3px 3px 0 -1px var(--vc-line); }
.walk-tip.vcard .wt-head strong { font-family: 'Jua', sans-serif; font-size: 18px; color: var(--vc-ink); }
.walk-tip.vcard .wt-badge { background: var(--vc-soft); color: var(--vc-ink); }
.walk-tip.vcard .wt-x { color: var(--vc-sub); }
.walk-tip.vcard .wt-line { color: var(--vc-ink); }

/* 장소 목록(대문 말풍선에서 여는 카드) */
.placelist.vcard { padding: 16px 18px 18px; }
.placelist.vcard .pl-head h2 { color: var(--vc-ink); }
.placelist.vcard .pl-close, .placelist.vcard .pl-menu { background: var(--vc-soft); color: var(--vc-soft-ink); }
.placelist.vcard .pl-item { background: var(--vc-inset); box-shadow: inset 0 0 0 1px var(--vc-line); }
.placelist.vcard .pl-item h3 { color: var(--vc-ink); }
.placelist.vcard .pl-item p, .placelist.vcard .pl-item h3 small { color: var(--vc-sub); }
.placelist.vcard .pl-soon { opacity: .6; }

@media (max-width: 640px) {
  .talk.vcard, .sky-card.vcard { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; padding: 16px 18px; }
}
@media (prefers-reduced-motion: reduce) { .vcard { transition: none; animation: none; } }