/* =========================================================================
   서연과 통화 — 신당에서 걸려 온 영상통화.
   사이트 공통 결(검정 바탕 · 적색 #d81f2a · Gowun Batang · 480 모바일 컬럼 · 잿불)을 그대로 쓰고,
   통화 화면은 상대 영상이 화면을 채우고 컨트롤이 떠 있는 페이스타임 문법을 따른다.
   ========================================================================= */
:root {
  --v-bg: #000;
  --v-red: #d81f2a;
  --v-red-bright: #f0323f;
  --v-red-deep: #8f141c;
  --v-ink: #fff;
  --v-ink-2: rgba(255, 255, 255, .62);
  --v-ink-3: rgba(255, 255, 255, .38);
  --v-line: rgba(255, 255, 255, .12);
  --v-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
            'Noto Sans KR', 'Apple SD Gothic Neo', system-ui, sans-serif;
  --v-serif: 'Gowun Batang', 'Noto Serif KR', serif;
  --lvl: 0;   /* 서연 음량 0~1 */
  --mic: 0;   /* 내 음량 0~1 */
}
html, body { margin: 0; background: var(--v-bg); color: var(--v-ink); font-family: var(--v-sans); -webkit-font-smoothing: antialiased; }
body { min-height: 100dvh; overscroll-behavior: none; }
* { box-sizing: border-box; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

/* 사이트 시그니처: 데스크톱에서도 가운데 480 컬럼, 바깥은 검정 */
.vc-root {
  position: fixed; inset: 0; margin-inline: auto;
  width: 100%; max-width: 480px;
  background: var(--v-bg); overflow: hidden;
  box-shadow: 0 0 0 100vmax #000;
}

/* ───────── 잿불 (사이트 공통 분위기) ───────── */
.vc-embers { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.vc-embers i {
  position: absolute; bottom: -12px; width: 3px; height: 3px; border-radius: 50%;
  background: var(--v-red-bright); box-shadow: 0 0 7px 1px rgba(240, 50, 63, .75);
  opacity: 0; animation: vc-ember linear infinite;
}
@keyframes vc-ember {
  0% { transform: translateY(0) translateX(0) scale(.7); opacity: 0; }
  12% { opacity: .8; }
  70% { opacity: .5; }
  100% { transform: translateY(-104dvh) translateX(var(--dx, 14px)) scale(.25); opacity: 0; }
}

/* =========================================================================
   1. 첫 장 — 통화 걸기
   ========================================================================= */
.vc-landing { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.vc-landing::-webkit-scrollbar { width: 0; }

/* 헤더 — 다른 신당(gate.css .gate-top)과 같은 모양이다: 뒤로 · 가운데 로고 · 공유 · 소리.
   값을 바꿀 때는 gate.css 와 같이 바꾼다(test/voice-call.test.js 가 둘을 맞대 본다). */
.vc-top { position: absolute; top: 0; left: 0; right: 0; z-index: 9; display: flex; align-items: center; justify-content: center;
  height: 58px; padding-top: env(safe-area-inset-top, 0px); pointer-events: none; transition: background .25s, backdrop-filter .25s; }
/* 스크롤하면 뒤에 유리판을 깔아 본문과 겹쳐 읽히지 않게 한다 */
.vc-top.is-stuck { background: linear-gradient(180deg, rgba(0,0,0,.86), rgba(0,0,0,.5) 70%, transparent); backdrop-filter: blur(12px); }
.vc-top a, .vc-top button { pointer-events: auto; }
.vc-back { position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  color: #fff; text-decoration: none; background: transparent; border: none; cursor: pointer; }
.vc-back svg { width: 24px; height: 24px; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.8)); }
.vc-brand { display: inline-flex; align-items: baseline; gap: 5px; cursor: pointer; text-decoration: none;
  font-family: var(--v-serif); font-size: 16px; font-weight: 900; letter-spacing: 0.5px;
  color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); }
.vc-brand-mark { align-self: center; width: 20px; height: 20px; margin-right: 1px; border-radius: 5px; }
.vc-brand-han { font-family: var(--v-serif); font-weight: 700; font-size: 14px; letter-spacing: 1px;
  color: var(--v-red-bright); text-shadow: 0 0 14px rgba(216, 31, 42, 0.4); }
.vc-hbtn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 12px; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.9); cursor: pointer;
  transition: background .2s, border-color .2s, transform .12s, color .2s; }
.vc-share { right: 56px; }
.vc-hbtn svg { width: 20px; height: 20px; }
.vc-sound .ic-on { display: none; }
.vc-sound.is-on .ic-off { display: none; }
.vc-sound.is-on .ic-on { display: block; }
.vc-sound.is-on { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.28); }
.vc-hbtn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.vc-hbtn:active { transform: translateY(-50%) scale(0.9); }
.vc-back:focus-visible, .vc-brand:focus-visible, .vc-hbtn:focus-visible { outline: 2px solid #ffb3b8; outline-offset: 2px; }
/* 좁은 화면(360px 미만): 오른쪽 단추가 둘이라 로고를 뒤로가기와 공유 단추 사이 가운데에 둔다(신당 헤더와 같다) */
@media (max-width: 359px) {
  .vc-top { padding-left: 56px; padding-right: 102px; }
}

/* 히어로 — 서연이 화면을 채우고 아래로 검정에 잠긴다 */
.vc-hero { position: relative; height: 74dvh; min-height: 440px; }
.vc-hero-img { position: absolute; inset: 0; background: center 16% / cover no-repeat; transform: scale(1.06); animation: vc-kenburns 19s ease-in-out infinite; }
@keyframes vc-kenburns { 0%, 100% { transform: scale(1.06) translateY(0); } 50% { transform: scale(1.13) translateY(-1.2%); } }
.vc-hero-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; opacity: 0; transition: opacity .9s ease; }
.vc-hero-vid.is-on { opacity: 1; }
.vc-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,.30) 40%, rgba(0,0,0,.64) 62%, #000 100%); }
.vc-hero-copy { position: absolute; left: 20px; right: 20px; bottom: 40px; z-index: 2; }
.vc-eyebrow { font-family: var(--v-sans); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; color: var(--v-red-bright); text-transform: none; text-shadow: 0 2px 10px rgba(0,0,0,.9); }
.vc-name { font-family: var(--v-serif); font-size: 42px; font-weight: 700; line-height: 1.14; letter-spacing: 1px; margin: 4px 0 0; text-shadow: 0 4px 26px rgba(0,0,0,.85); }
.vc-name em { font-style: normal; font-size: 17px; color: rgba(255,255,255,.55); margin-left: 9px; letter-spacing: .04em; }
/* 서연이 먼저 건네는 말 — 소개문 위에 사람 목소리를 하나 얹는다 */
.vc-greet { font-family: var(--v-serif); font-size: 19px; line-height: 1.5; color: #fff;
  margin: 12px 0 0; text-shadow: 0 2px 14px rgba(0,0,0,.6); max-width: 17em; }
.vc-tag { margin: 9px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--v-ink-2); max-width: 22em; }
.vc-live { display: flex; width: fit-content; margin: 13px auto 0; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: 999px; border: 1px solid rgba(240,50,63,.4); background: rgba(216,31,42,.14); font-size: 11.5px; font-weight: 700; color: #ffb3b8; }
.vc-live i { width: 6px; height: 6px; border-radius: 50%; background: #ff4d57; animation: vc-pulse 1.9s infinite; }
@keyframes vc-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,77,87,.65); } 70% { box-shadow: 0 0 0 8px rgba(255,77,87,0); } 100% { box-shadow: 0 0 0 0 rgba(255,77,87,0); } }

/* 사진은 여기서 끝나고 읽을 것이 시작된다 — 종이 한 장을 깔아 둘을 갈라 놓는다.
   경계가 없으니 잔액 카드가 서연 얼굴 위에 떠 있는 것처럼 보였다. */
.vc-body { position: relative; z-index: 2; margin-top: -30px; padding: 24px 20px 190px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, rgba(7,5,5,.94) 0, #000 60px);
  /* 옅은 붉은 선으로 둘러 놓는다 — 신당의 등불 색이고, 검은 배경에서 판의 가장자리가 보인다.
     아래는 화면 끝까지 흘러 나가므로 선을 두지 않는다. */
  border: 1px solid rgba(240,50,63,.28); border-bottom: 0;
  box-shadow: 0 -22px 46px rgba(0,0,0,.9), inset 0 1px 0 rgba(240,50,63,.16),
    0 0 34px rgba(216,31,42,.09); }

/* 아래에 더 있다는 표시. 스크롤할 게 없거나 한 번 내리면 사라진다. */
.vc-scrollcue { position: absolute; z-index: 3; right: 18px; bottom: 38px;
  display: grid; grid-auto-flow: column; align-items: center; gap: 8px; padding: 0; background: none;
  font-family: var(--v-sans); font-size: 10px; font-weight: 600; letter-spacing: .1em; color: rgba(255,255,255,.62);
  text-shadow: 0 2px 10px rgba(0,0,0,.9); transition: opacity .35s ease, transform .35s ease; }
.vc-scrollcue.is-gone { opacity: 0; transform: translateY(8px); pointer-events: none; }
.vc-scrollcue i { display: block; position: relative; width: 25px; height: 25px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.24); background: rgba(0,0,0,.4); backdrop-filter: blur(8px);
  animation: vc-bob 1.9s ease-in-out infinite; }
.vc-scrollcue i::after { content: ""; position: absolute; left: 50%; top: 44%; width: 7px; height: 7px;
  border-right: 1.5px solid rgba(255,255,255,.8); border-bottom: 1.5px solid rgba(255,255,255,.8);
  transform: translate(-50%, -50%) rotate(45deg); }
@keyframes vc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .vc-scrollcue i { animation: none; } }

/* 잔액 */
.vc-wallet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px; border: 1px solid rgba(240,50,63,.22); border-radius: 4px; background: linear-gradient(180deg, rgba(216,31,42,.12), rgba(216,31,42,.03)); }
.vc-wallet b { font-family: var(--v-serif); font-size: 25px; font-weight: 700; color: #fff; line-height: 1; }
.vc-wallet small { display: block; margin-top: 5px; font-size: 12.5px; color: var(--v-ink-3); letter-spacing: .02em; }
/* 담아 둔 시간이 없어지지 않는다는 안내 — 기한이 있는 줄 알고 안 쓰는 사람이 있다 */
.vc-keep { flex: 1 0 100%; margin-top: 2px; padding-top: 9px; font-size: 12px; font-weight: 600;
  color: #ffb3b8; border-top: 1px solid rgba(255,255,255,.08); }
.vc-keep::before { content: "∞ "; opacity: .8; }
.vc-keep-note { margin-top: 12px; padding: 11px 13px; border-radius: 4px; font-size: 12.5px; line-height: 1.7;
  color: var(--v-ink-2); background: rgba(255,255,255,.035); border-left: 2px solid rgba(240,50,63,.45); }
.vc-keep-note b { color: #fff; font-weight: 800; }
.vc-wallet .r { text-align: right; font-size: 12.5px; line-height: 1.55; color: var(--v-ink-3); }
.vc-free { font-style: normal; font-weight: 800; color: #ffb3b8; }

/* 지난 통화에서 받아 둔 사주 */
.vc-known { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px;
  padding: 13px 15px; border: 1px solid var(--v-line); border-radius: 4px; background: rgba(255,255,255,.035); }
.vc-known b { display: block; font-size: 14.5px; font-weight: 700; color: #fff; }
.vc-known small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--v-ink-3); }
.vc-known button { flex: 0 0 auto; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--v-line);
  font-size: 12px; font-weight: 600; color: var(--v-ink-2); }

/* 처음 거는 사람에게 — 무엇이 일어나는지 */
.vc-steps { counter-reset: st; list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.vc-steps li { counter-increment: st; position: relative; padding: 26px 9px 11px; border-radius: 4px;
  border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.025); }
.vc-steps li::before { content: counter(st); position: absolute; left: 9px; top: 9px; width: 17px; height: 17px;
  border-radius: 50%; background: rgba(216,31,42,.22); border: 1px solid rgba(240,50,63,.45);
  color: #ff9aa1; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.vc-steps b { display: block; font-size: 12.5px; font-weight: 700; color: #fff; letter-spacing: -.03em; word-break: keep-all; }
.vc-steps span { display: block; margin-top: 3px; font-size: 11px; line-height: 1.5; color: var(--v-ink-3); word-break: keep-all; }

.vc-sec { margin-top: 24px; scroll-margin-top: 72px; }
.vc-sec > h2 { display: flex; align-items: baseline; gap: 9px; margin: 0 0 12px; font-family: var(--v-serif); font-size: 17px; font-weight: 700; color: #fff; letter-spacing: .5px; }
.vc-sec > h2 span { font-family: var(--v-sans); font-size: 11.5px; font-weight: 600; color: var(--v-ink-3); letter-spacing: 0; }

/* 폼 */
.vc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.vc-f { display: flex; flex-direction: column; gap: 7px; }
.vc-f.full { grid-column: 1 / -1; }
.vc-f > label, .vc-f > span { font-size: 11.5px; font-weight: 600; color: var(--v-ink-3); letter-spacing: .02em; }
.vc-f input, .vc-f select {
  width: 100%; height: 48px; padding: 0 13px; border-radius: 4px;
  border: 1px solid var(--v-line); background: rgba(255,255,255,.045); color: #fff;
  font-family: var(--v-sans); font-size: 15px; font-weight: 600; outline: none; appearance: none;
  transition: border-color .16s, background .16s;
}
.vc-f input::placeholder { color: rgba(255,255,255,.24); font-weight: 500; }
.vc-f input:focus, .vc-f select:focus { border-color: rgba(240,50,63,.65); background: rgba(216,31,42,.08); }
.vc-f select { background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.4) 50%), linear-gradient(135deg, rgba(255,255,255,.4) 50%, transparent 50%); background-position: calc(100% - 17px) 21px, calc(100% - 12px) 21px; background-size: 5px 5px; background-repeat: no-repeat; }
.vc-birth { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 8px; }
.vc-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vc-seg button { height: 48px; border-radius: 4px; border: 1px solid var(--v-line); background: rgba(255,255,255,.045); color: var(--v-ink-2); font-size: 15px; font-weight: 600; transition: .16s; }
.vc-seg button.is-on { border-color: rgba(240,50,63,.7); background: rgba(216,31,42,.16); color: #fff; }

/* 상품 */
.vc-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.vc-plan { position: relative; display: flex; flex-direction: column; min-width: 0; text-align: left;
  padding: 20px 14px 12px; border-radius: 4px; border: 1px solid rgba(240,50,63,.22);
  background: linear-gradient(160deg, rgba(216,31,42,.09), rgba(255,255,255,.02)); transition: transform .14s, border-color .16s, background .16s; }
.vc-plan:active { transform: scale(.975); }
/* 아직 열지 않은 동안 — 눌러 보고 막히는 것보다 잠긴 게 보이는 편이 낫다 */
.vc-plan[disabled] { opacity: .4; filter: grayscale(.7); }
.vc-plan[disabled]:active { transform: none; }
.vc-plan.is-hot { border-color: rgba(240,50,63,.62); background: linear-gradient(160deg, rgba(216,31,42,.22), rgba(216,31,42,.05)); box-shadow: 0 4px 22px rgba(216,31,42,.16); }
.vc-plan .m { font-family: var(--v-serif); font-size: 30px; font-weight: 700; line-height: 1; color: #fff; }
.vc-plan .m small { font-size: 13px; font-family: var(--v-sans); font-weight: 700; color: var(--v-ink-2); margin-left: 3px; }
.vc-plan .p { margin-top: 13px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.vc-plan .p b { font-size: 23px; font-weight: 800; color: #fff; letter-spacing: -.04em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vc-plan .p s { font-size: 11.5px; color: var(--v-ink-3); }
/* 통화가 끝난 자리의 상품 — 첫 장으로 되돌리지 않고 여기서 바로 담게 한다 */
.vc-endbuy { margin: 18px 0 6px; }
.vc-endbuy > b { display: block; margin-bottom: 10px; font-size: 13.5px; font-weight: 700; color: var(--v-ink-2); line-height: 1.55; }
.vc-endplans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; }

/* 분당 단가 — 취소선 자리를 대신한다. 계단이 저절로 읽히게 하는 자리라 너무 흐리면 안 된다. */
.vc-plan .p i { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--v-ink-2); }
.vc-plan .d { display: block; margin: 9px 0 12px; font-size: 12px; line-height: 1.5; color: var(--v-ink-2); word-break: keep-all; }
.vc-plan .tag { position: absolute; top: -9px; left: 12px; padding: 4px 9px; border-radius: 3px; background: var(--v-red); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: -.02em; box-shadow: 0 3px 12px rgba(216,31,42,.4); }
.vc-plan-action { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: auto;
  border-top: 1px solid rgba(240,50,63,.2); padding-top: 9px; font-size: 12px; color: #ffb3b8; font-weight: 700; }
.vc-plan.is-hot .vc-plan-action { color: #ff9aa1; }
.vc-plan:focus-visible { outline: 2px solid var(--v-red-bright); outline-offset: 3px; }
.vc-keep-note { margin-top: 12px; padding: 13px 15px; border: 0; border-left: 2px solid rgba(240,50,63,.5); border-radius: 0 4px 4px 0;
  background: rgba(255,255,255,.035); }
.vc-keep-note b { display: block; font-family: var(--v-serif); font-size: 15px; color: #fff; }
.vc-keep-note > span { display: block; margin-top: 3px; font-size: 12px; color: #ffb3b8; }
.vc-keep-note small { display: block; margin-top: 6px; font-size: 12px; line-height: 1.65; color: var(--v-ink-3); word-break: keep-all; }

/* 걸기 버튼 — 사이트 CTA 결(적색 글로우 필) */
.vc-engine-test { margin: 0 0 28px; padding: 18px; border: 1px solid rgba(210,181,133,.3); border-radius: 18px; background: rgba(38,26,25,.85); }
.vc-engine-test > b { display: block; margin-bottom: 12px; color: #e4cfac; font-size: 14px; }
.vc-engine-options { display: flex; gap: 8px; }
.vc-engine-options button { flex: 1; min-width: 0; min-height: 48px; padding: 10px 6px; border: 1px solid rgba(210,181,133,.25); border-radius: 12px; background: transparent; color: #d7c9bd; font: inherit; font-size: 13px; cursor: pointer; }
.vc-engine-options button[aria-pressed="true"] { background: #753337; border-color: #d9ab87; color: #fff4e4; }
.vc-engine-options button:focus-visible { outline: 2px solid #e4cfac; outline-offset: 3px; }
.vc-engine-test p { margin: 12px 0 6px; color: #eadbc9; font-size: 12px; line-height: 1.6; }
.vc-engine-test small { color: #bba99b; font-size: 11px; }
.vc-cta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7;
  padding: 46px 20px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,.74) 36%, #000 70%); pointer-events: none; }
/* 흐림을 아래로 갈수록 세게 먹여 본문이 이 아래로 "지나간다"는 게 읽히게 한다 */
.vc-cta::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 78%;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  mask-image: linear-gradient(180deg, transparent, #000 42%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 42%); }
.vc-cta > * { pointer-events: auto; position: relative; }
.vc-dialbtn {
  width: 100%; height: 60px; border-radius: 999px;
  background: linear-gradient(180deg, var(--v-red-bright), var(--v-red-deep));
  color: #fff; font-size: 17px; font-weight: 800; letter-spacing: -.01em;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 12px 34px rgba(216,31,42,.38), inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .13s, box-shadow .2s, filter .2s;
}
.vc-dialbtn svg { width: 21px; height: 21px; fill: #fff; }
.vc-dialbtn:not(:disabled) { animation: vc-cta-breathe 3.4s ease-in-out infinite; }
@keyframes vc-cta-breathe { 0%, 100% { box-shadow: 0 12px 34px rgba(216,31,42,.34), inset 0 1px 0 rgba(255,255,255,.22); } 50% { box-shadow: 0 12px 44px rgba(216,31,42,.6), inset 0 1px 0 rgba(255,255,255,.22); } }
.vc-dialbtn:active { transform: scale(.985); }
.vc-dialbtn:disabled { background: rgba(255,255,255,.07); border-color: var(--v-line); color: var(--v-ink-3); box-shadow: none; animation: none; }
.vc-dialbtn:disabled svg { fill: rgba(255,255,255,.3); }
.vc-hint { margin-top: 10px; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--v-ink-3); }
.vc-hint.is-warn { color: #ff9aa1; }

/* 최근 통화 — 지난 상담을 돌아본다 */
.vc-hist-list { display: grid; gap: 8px; }
.vc-hist-wait, .vc-hist-none { padding: 14px 15px; border-radius: 4px; border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.025); font-size: 11.5px; color: var(--v-ink-3); }
.vc-hist-row { padding: 12px 14px; border-radius: 4px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.028); }
.vc-hist-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.vc-hist-top b { font-family: var(--v-serif); font-size: 13.5px; font-weight: 700; color: #fff; }
.vc-hist-top span { font-size: 11.5px; color: var(--v-ink-3); }
.vc-hist-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.vc-hist-tags i { font-style: normal; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(240,50,63,.32);
  background: rgba(216,31,42,.13); font-size: 10.5px; font-weight: 700; color: #ffb3b8; }
.vc-hist-point { margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--v-ink-2); }
.vc-hist-todo { margin-top: 6px; font-size: 11.5px; line-height: 1.55; color: var(--v-ink-3); }
.vc-hist-todo b { color: #ffb3b8; font-weight: 700; }

.vc-notes { margin-top: 22px; padding: 13px 15px; border-radius: 4px; border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.025); font-size: 12.5px; line-height: 1.85; color: var(--v-ink-3); }
.vc-notes b { color: var(--v-ink-2); font-weight: 700; }
.vc-notes > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; user-select: none; }
.vc-notes > summary::-webkit-details-marker { display: none; }
.vc-notes > summary i { width: 7px; height: 7px; border-right: 1.5px solid var(--v-ink-3); border-bottom: 1.5px solid var(--v-ink-3);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
.vc-notes[open] > summary { margin-bottom: 8px; }
.vc-notes[open] > summary i { transform: rotate(225deg) translate(-1px, -1px); }
.vc-notes code { font-size: 11px; color: #ff9aa1; }

/* =========================================================================
   2. 통화 화면 — 상대 영상이 화면을 채우고 컨트롤이 떠 있다
   ========================================================================= */
.vc-call { position: absolute; inset: 0; overflow: hidden; background: #000; }

/* "영상" — 두 장을 크로스페이드하고 살아있는 카메라로 움직인다 */
/* 네 변을 모두 값으로 잡아 둔다. auto 가 하나라도 끼면 전환이 안 걸려 툭 튄다 —
   폰의 화상통화처럼 화면이 그대로 줄어들려면 left·top·너비·높이가 다 이어져야 한다.
   px 로 옮겨 가는 자리는 calc(100% - …) 로 적어 % 에서 이어지게 한다. */
.vc-feed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
  --pip-w: 142px; --pip-h: 190px;
  transition: top .42s cubic-bezier(.3,.9,.35,1), left .42s cubic-bezier(.3,.9,.35,1),
              width .42s cubic-bezier(.3,.9,.35,1), height .42s cubic-bezier(.3,.9,.35,1),
              border-radius .42s ease, box-shadow .42s ease; }
/* 자료가 떠 있는 동안에는 영상이 위쪽만 쓴다 — 말하는 사람을 보면서 자료를 볼 수 있게.
   얼굴이 잘리지 않도록 담는 위치도 위로 당긴다.
   예전 주석에 "%끼리는 전환이 안 걸린다"고 적혀 있었는데 아니었다 — 브라우저가 height 전환을
   실제로 만든다(getAnimations 로 확인). 그때 안 움직여 보인 건 탭이 숨겨져 전환이 멈춰 있었던 탓이다. */
/* 펼쳤을 때는 자료가 주인공이다 — 얼굴을 보고 싶으면 판을 접으면 영상이 다시 꽉 찬다.
   62% 로 뒀더니 카드가 150px 밖에 안 돼서 스크롤 없이는 명식을 못 읽었다. */
/* 자료를 펼치면 화면을 나누지 않는다 — 영상이 떠 있는 작은 창으로 빠지고 자료가 화면을 다 쓴다.
   나눠 쓰면 둘 다 좁아서 명식을 제대로 못 편다. 얼굴은 계속 보이되 자리를 뺏지 않는 쪽이 낫다. */
.vc-call.has-card .vc-feed {
  /* 오른쪽 아래로 줄어든다. 자료는 위에서 아래로 읽으므로 그 자리가 가장 덜 아깝다.
     끌어서 옮길 수 있으니(JS) 걸리적거리면 사용자가 치우면 된다. */
  left: calc(100% - var(--vc-pip-width, var(--pip-w)) - 12px);
  top: var(--vc-pip-top, 84px);
  width: var(--vc-pip-width, var(--pip-w)); height: var(--vc-pip-height, var(--pip-h)); z-index: 9;
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 14px 40px rgba(0,0,0,.65);
  cursor: grab; touch-action: none; }
/* 끌고 있는 동안은 전환을 끊는다 — 안 그러면 손가락을 늦게 따라온다 */
.vc-call.has-card .vc-feed.is-moving { transition: none; cursor: grabbing;
  box-shadow: 0 18px 52px rgba(0,0,0,.75); transform: none; }
.vc-call.has-card .vc-feed::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); border-radius: inherit; }
.vc-call.has-card .vc-frame { object-position: 50% 29%; }
/* 자료가 뜨면 아래 판을 영상 밑으로 묶는다. 안 묶으면 카드가 자란 만큼 위로 올라와 얼굴을 덮는다 —
   실제로 머리 꼭대기만 남고 다 가려졌다. top 을 주면 영상이 끝나는 자리에서 시작한다.
   top 을 접힌 상태에도 %로 주면 bottom:0 과 겹쳐 높이가 0 이 되어 단추가 사라진다 —
   그래서 여기는 전환을 걸지 않는다. 눈에 보이는 움직임은 영상이 맡고, 이 판은 투명한 그러데이션이라
   윗변이 어디서 시작하든 티가 나지 않는다. */
/* 판이 화면을 다 쓴다. 다만 오른쪽 위 시간·마이크 표시 아래에서 시작해야
   판 머리글과 탭이 그 밑에 깔리지 않는다 — 표시는 z-index 가 더 높아 덮어 버린다. */
.vc-call.has-card .vc-bottom { top: calc(max(12px, env(safe-area-inset-top)) + 48px); max-height: none;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.82) 22%, rgba(0,0,0,.92) 100%); }
/* 영상은 패널 위에 배치되므로 카드 아래에 별도의 영상 여백을 예약하지 않는다. */
/* 화면을 다 쓰는 판이니 글씨도 그만큼 키운다. 좁을 때 쓰던 크기를 그대로 두면
   넓은 자리에 잔글씨만 흩어져 오히려 읽기 나쁘다. */
/* 펼친 판은 판 높이에 맞춰 통째로 커진다 — 배율 --cs 는 fitCard() 가 재서 넣는다.
   명식이 짧으면 크게, 구조가 여럿이라 길면 조금 작게. 어느 쪽이든 판은 늘 꽉 찬다. */
.vc-call.has-card .vc-card { --cs: 1; padding-bottom: 24px; padding-left: 16px; padding-right: 16px; }
.vc-call.has-card .vc-card .h { font-size: calc(17px * var(--cs)); margin-bottom: calc(14px * var(--cs)); }
.vc-call.has-card .vc-card .h span { font-size: calc(12px * var(--cs)); }
.vc-call.has-card .vc-pillars { gap: calc(8px * var(--cs)); }
.vc-call.has-card .vc-pillar { padding: calc(11px * var(--cs)) 2px calc(12px * var(--cs)); }
.vc-call.has-card .vc-pillar .g { font-size: calc(38px * var(--cs)); }
.vc-call.has-card .vc-pillar .l,
.vc-call.has-card .vc-pillar .k { font-size: calc(11.5px * var(--cs)); }
.vc-call.has-card .vc-elrow { gap: calc(6px * var(--cs)); margin: calc(12px * var(--cs)) 0 2px; }
.vc-call.has-card .vc-kv { font-size: calc(14px * var(--cs)); gap: calc(7px * var(--cs)) 14px; margin-top: calc(14px * var(--cs)); }
.vc-call.has-card .vc-elchip { font-size: calc(12.5px * var(--cs)); padding: calc(9px * var(--cs)) 0 calc(10px * var(--cs)); }
.vc-call.has-card .vc-elchip b { font-size: calc(20px * var(--cs)); }
.vc-call.has-card .vc-note { font-size: calc(13px * var(--cs)); line-height: 1.7; padding: calc(11px * var(--cs)) 13px; margin-top: calc(12px * var(--cs)); }
.vc-call.has-card .vc-structs { margin-top: calc(12px * var(--cs)); }
.vc-call.has-card .vc-structs .t { font-size: calc(11.5px * var(--cs)); }
.vc-call.has-card .vc-structs .s { font-size: calc(13px * var(--cs)); line-height: 1.7; padding: calc(7px * var(--cs)) 0 calc(7px * var(--cs)) 12px; }
.vc-call.has-card .vc-card .cap { font-size: calc(13px * var(--cs)); line-height: 1.65; margin-top: calc(12px * var(--cs)); }
/* 판을 채우려고 늘렸는데 단추만 그대로면 어색하다 — 같이 큰다 */
.vc-call.has-card .vc-mini { font-size: calc(13px * var(--cs)); padding: calc(9px * var(--cs)) calc(15px * var(--cs)); }
.vc-call.has-card .vc-card-actions { margin-top: calc(12px * var(--cs)); }
/* 남은 자리를 꽉 채운다. flex-end 로 두면 카드 위에 빈 자리가 생겨 어색하다 —
   길면 카드 안에서 스크롤되고, 짧아도 판이 헐렁해 보이지 않는다. */
/* 카드가 화면을 넉넉히 쓴다 — 명식을 접지 않고 펴 놓고 본다 */
.vc-call.has-card .vc-tray { align-items: stretch; min-height: 0; flex: 1 1 auto; }
/* 판이 이미 43dvh 로 잘려 있다(.vc-panel-body). 카드에서 또 화면 높이를 재면
   낮은 창에서 두 번 깎여 60px 짜리 쪽지가 된다 — 트레이가 주는 높이를 그대로 쓴다. */
.vc-call.has-card .vc-card { max-height: 100%; height: auto; }
.vc-call.has-card .vc-deck { flex: 1 1 auto; }
.vc-frame { transition: object-position .38s cubic-bezier(.22,.61,.36,1); }

/* 첫 장 가운데의 소리 켜기 단추 — 처음에만 보이고, 한 번 켜면 사라진다(그 뒤로는 헤더 소리 단추 #vcSound).
   신당 첫 화면의 '소리 켜고 시작' 안내와 같은 자리·같은 말이다. */
.vc-hear { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: pointer;
  background: none; border: 0; padding: 0; transition: transform .14s; }
.vc-hear[hidden] { display: none; }
.vc-hear-ring { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%;
  position: relative; isolation: isolate;
  background: radial-gradient(circle at 35% 25%, rgba(128,95,68,.42), rgba(10,5,6,.72) 75%);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(241,219,186,.8);
  box-shadow: 0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.16);
  animation: vc-hear-breathe 3.2s ease-in-out infinite; }
.vc-hear-ring::before,
.vc-hear-ring::after { content: ''; position: absolute; inset: -1px;
  border: 1px solid rgba(239,212,175,.65); border-radius: 50%; pointer-events: none;
  animation: vc-hear-wave 3.2s ease-out infinite; }
.vc-hear-ring::after { animation-delay: -1.6s; }
@keyframes vc-hear-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes vc-hear-wave { 0% { transform: scale(1); opacity: .5; }
  80%, 100% { transform: scale(1.55); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .vc-hear-ring { animation: none; }
  .vc-hear-ring::before,
  .vc-hear-ring::after { animation: none; opacity: 0; }
}
.vc-hear svg { width: 36px; height: 36px; fill: #fff; }
.vc-hear-label { display: block; white-space: nowrap;
  color: #fff; font: inherit; font-size: 16px; font-weight: 700; text-shadow: 0 2px 8px #000; text-align: center; }
.vc-hear-label small { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; opacity: .8; }
.vc-hear:active { transform: translate(-50%, -50%) scale(.94); }
.vc-hear:focus-visible { outline: 2px solid #fff; outline-offset: 6px; border-radius: 12px; }

/* 최근 통화 — 쌓이면 첫 장이 길어진다. 접어 두고 눌러서 편다. */
.vc-hist-h { display: flex; align-items: baseline; gap: 8px; cursor: pointer; user-select: none; }
.vc-hist-cx { margin-left: auto; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--v-ink-2); transition: transform .2s ease; align-self: center; }
.vc-hist.is-folded .vc-hist-cx { transform: rotate(-90deg); }
.vc-hist .vc-hist-list { overflow: hidden; transition: max-height .3s ease, opacity .22s, margin .3s; max-height: 1400px; }
.vc-hist.is-folded .vc-hist-list { max-height: 0; opacity: 0; margin-top: -4px; }
.vc-hist-h:active { opacity: .75; }

/* 판 아래 왼쪽 접기 — 자료가 화면을 다 쓰면 위쪽 바가 멀다. 평소엔 숨어 있다. */


/* 뭘 봐 줄 수 있는지 — 물어야 열리는 기능이라 알려 주지 않으면 아무도 안 쓴다.
   누르면 그 말이 그대로 서연에게 가서, 상대가 문장을 떠올릴 필요가 없다. */
.vc-help { position: absolute; left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 12; max-height: 56dvh; overflow-y: auto; border-radius: 16px; padding: 12px;
  background: rgba(16,9,10,.95); backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 18px 50px rgba(0,0,0,.7);
  animation: vc-help-in .2s ease; }
@keyframes vc-help-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .vc-help { animation: none; } }
.vc-help-h { display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; font-weight: 800; color: #fff; padding: 2px 4px 10px; }
.vc-help-h button { width: 26px; height: 26px; border-radius: 50%; color: var(--v-ink-2);
  background: rgba(255,255,255,.08); font-size: 12px; }
.vc-help-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.vc-help-i { text-align: left; padding: 10px 11px; border-radius: 11px;
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.09);
  transition: transform .12s, background .15s, border-color .15s; }
.vc-help-i:active { transform: scale(.97); background: rgba(255,255,255,.12); }
.vc-help-art { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 7px; margin-bottom: 8px; background: #050303; }
.vc-help-i b { display: block; font-size: 12.5px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.vc-help-i small { display: block; font-size: 10.5px; line-height: 1.45; color: var(--v-ink-3); }
.vc-help-i.is-edit { grid-column: 1 / -1; border-color: rgba(240,50,63,.34); background: rgba(216,31,42,.12); }

/* 명식판 안의 오행 줄 — 다섯을 한 줄에, 치우침이 눈에 들어오게 */
.vc-elrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 10px 0 2px; }
.vc-elchip { position: relative; overflow: hidden; padding: 6px 0 7px; border-radius: 8px; text-align: center;
  font-size: 11px; font-weight: 700; color: var(--v-ink-2); background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08); }
.vc-elchip[data-none="1"] { opacity: .38; }
.vc-elchip b { display: block; font-size: 15px; color: #fff; line-height: 1.2; }
.vc-elchip i { position: absolute; left: 0; bottom: 0; height: 2px; background: currentColor; opacity: .75; }
/* 강약의 근거 — 결론만 있으면 점집이고, 근거가 있어야 사주다 */
.vc-note { margin-top: 9px; padding: 8px 10px; border-radius: 8px; font-size: 11.5px; line-height: 1.65;
  color: var(--v-ink-2); background: rgba(255,255,255,.04); border-left: 2px solid rgba(240,50,63,.5); }
/* 이 명식에 선 구조 — 식상견관·재다신약 같은 것 */
.vc-structs { margin-top: 10px; }
.vc-structs .t { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: var(--v-ink-3); margin-bottom: 5px; }
.vc-structs .s { font-size: 11.5px; line-height: 1.6; color: var(--v-ink-2); padding: 5px 0 5px 10px;
  border-left: 1px solid rgba(255,255,255,.12); margin-bottom: 3px; }

/* 카드에서 이미지로 내리는 단추 */
/* 저장·공유 — 카드 맨 위 오른쪽에 고정(스크롤해도 그 자리). float 로 띄워 제목 줄만 비켜 간다. */
.vc-card-tools { position: sticky; top: 0; z-index: 4; float: right; display: flex; gap: 6px; margin: 0 0 6px 10px; }
.vc-card-save, .vc-card-share { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: rgba(20,13,15,.86); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 4px 12px rgba(0,0,0,.45); }
.vc-card-save svg, .vc-card-share svg { width: 18px; height: 18px; fill: rgba(255,255,255,.82); }
.vc-card-save:active, .vc-card-share:active { background: rgba(60,40,44,.95); }
.vc-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; opacity: 0; transition: opacity .55s ease; will-change: transform, opacity; background: #000; }
.vc-frame.is-on { opacity: 1; }
/* 사진일 때만 살아있는 카메라를 흉내낸다. 영상은 제 움직임이 있으므로 건드리지 않는다. */
img.vc-frame.is-on { animation: vc-kenburns 21s ease-in-out infinite; }
/* 말할 때 아주 살짝 다가온다 — 음량에 반응 */
/* 말할 때 아주 살짝, 천천히 다가온다 — 음량을 매 프레임 따라가던 것은 얼굴이 부들부들 떨려 보였다 */
.vc-call.is-talking video.vc-frame.is-on { transform: none; }   /* 영상은 그대로 튼다 — 확대 효과 없음 */
/* 얼굴 위에 깔린 어둠일 뿐이다 — 판이 위로 올라온 좁은 화면에서 손잡이를 가로채면 안 된다. */
.vc-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background:
  radial-gradient(120% 62% at 50% 8%, rgba(0,0,0,.72), transparent 62%),
  radial-gradient(140% 58% at 50% 100%, rgba(0,0,0,.86), transparent 66%); }
/* 통화 중인 화면 특유의 미세한 노이즈 */
.vc-grain { position: absolute; inset: -50%; z-index: 2; opacity: .05; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: vc-grain 7s steps(6) infinite; }
@keyframes vc-grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,1%)} 100%{transform:translate(0,0)} }

/* HUD — 늘 보인다. 통화가 살아 있다는 표시라 숨기지 않는다. */
.vc-hud { position: absolute; left: 0; right: 0; z-index: 8; }

/* 남은 시간과 내 마이크를 한 덩이로 묶어 오른쪽 위에 둔다.
   전에는 아래 컨트롤 위에 둘로 나뉘어 떠 있었다 — 서연 얼굴 한가운데를 가로지르고,
   자막·카드와 자리를 다투고, 볼 것이 두 곳으로 갈렸다. 오른쪽 위는 아무도 쓰지 않던 자리다.
   "서연"·"내 마이크" 같은 이름표는 걷어냈다. 통화 상대는 하나뿐이고, 마이크는 아이콘이 대신한다. */
.vc-topright { position: absolute; z-index: 9; right: 12px; top: max(12px, env(safe-area-inset-top));
  display: flex; align-items: center; gap: 9px; padding: 7px 12px 7px 13px; border-radius: 999px;
  background: rgba(10,5,6,.6); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 8px 24px rgba(0,0,0,.42);
  transition: border-color .25s, background .25s; }
.vc-topright .vc-clock { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.88);
  font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; }
.vc-topright .vc-clock.is-low { color: #ff8a8f; }
/* 시간 추가 — 왼쪽 위에 따로 둔다. 오른쪽 위 알약(남은 시간·마이크)과 같은 높이로 맞춘다. 연결 전에는 숨는다(hidden). */
.vc-addtime { position: absolute; z-index: 9; left: 12px; top: max(12px, env(safe-area-inset-top));
  min-height: 36px; padding: 7px 14px; border: 1px solid rgba(232,196,142,.55); border-radius: 999px;
  background: rgba(40,28,20,.8); box-shadow: 0 8px 24px rgba(0,0,0,.42);
  color: #f1d9b4; font: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.vc-addtime[hidden] { display: none; }
.vc-addtime:focus-visible { outline: 2px solid #ffb3b8; outline-offset: 2px; }
.vc-call.is-ending .vc-addtime { visibility: hidden; }
/* 통화 중 시간 더하기 창 — 여는 동안 통화 시간과 서연이 멈춘다(최대 3분). 알림(.vc-toast, 40)은 이 위에 뜬다. */
.vc-topup { position: absolute; inset: 0; z-index: 35; display: grid; place-items: center; padding: 16px;
  background: rgba(0,0,0,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: vc-topup-in .2s ease; }
@keyframes vc-topup-in { from { opacity: 0; } }
.vc-topup-card { width: 100%; max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 16px 14px; border-radius: 12px; border: 1px solid rgba(240,50,63,.3);
  background: rgba(14,8,9,.97); box-shadow: 0 24px 60px rgba(0,0,0,.7); }
.vc-topup-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vc-topup-head b { font-family: var(--v-serif); font-size: 17px; font-weight: 700; color: #fff; }
.vc-topup-hold { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 5px 8px; border-radius: 999px;
  border: 1px solid rgba(232,196,142,.4); background: rgba(40,28,20,.7); color: #f1d9b4;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vc-topup-hold svg { width: 11px; height: 11px; fill: currentColor; }
.vc-topup-sub { margin: 9px 0 16px; font-size: 12.5px; line-height: 1.6; color: var(--v-ink-2); word-break: keep-all; }
/* 추천 표(.tag)가 카드 위로 9px 나온다 — 스크롤 상자 안에서 잘리지 않게 위를 띄운다 */
.vc-topup-plans { padding-top: 6px; gap: 10px; }
.vc-topup-plans .vc-plan { padding: 16px 12px 10px; }
.vc-topup-plans .vc-plan .m { font-size: 25px; }
.vc-topup-plans .vc-plan .p { margin-top: 10px; }
.vc-topup-plans .vc-plan .p b { font-size: 19px; }
.vc-topup-plans .vc-plan .d { margin: 7px 0 10px; font-size: 11.5px; }
.vc-topup-note { margin: 12px 0 0; font-size: 12px; line-height: 1.55; color: #ffb3b8; word-break: keep-all; }
.vc-topup-note:empty { display: none; }
.vc-topup-back { display: block; width: 100%; min-height: 46px; margin-top: 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); color: #fff;
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.vc-topup-back:focus-visible { outline: 2px solid #ffb3b8; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .vc-topup { animation: none; } }
.vc-topright.is-dial .vc-clock { animation: vc-fade 1.7s ease-in-out infinite; }
.vc-topright .vc-meter { display: flex; align-items: center; gap: 6px; padding-left: 9px;
  border-left: 1px solid rgba(255,255,255,.14); }
/* 실제 음량의 짧은 기록을 흐르는 파형으로 보여 준다. */
.vc-topright .bars { display: flex; align-items: center; gap: 2px; height: 15px; }
.vc-topright .bars i { display: block; flex: 0 0 2px; height: 15px; border-radius: 999px;
  background: linear-gradient(to top, #ba979f, #fff1f3);
  transform: scaleY(calc(.14 + var(--amp, 0) * .86)); transform-origin: center;
  transition: transform .08s linear, background .25s; }
.vc-topright .vc-micglyph, .vc-topright .vc-micglyph svg { display: block; width: 13px; height: 13px; fill: #e7dade; }
.vc-topright.is-speaking { border-color: rgba(255,146,169,.46); background: rgba(48,15,24,.66); }
.vc-topright.is-speaking .bars i { background: linear-gradient(to top, #e25e87, #ffd5df); }
.vc-topright.is-speaking .vc-micglyph svg { fill: #ffd3df; }
.vc-topright.is-muted .bars i { transform: scaleY(.14); background: #73656a; }
.vc-topright.is-muted .vc-micglyph svg { fill: #e6a2ae; }
@media (prefers-reduced-motion: reduce) { .vc-topright .bars i { transition: none; } }

/* 연결 중 — 큰 이름이 가운데 */
/* 영상 끄기 — 얼굴 영상과 불씨·결을 걷고 검은 바탕에 이름과 통화 시간만. 자막(.vc-subtitle)은 피드 안에 있어 그대로 뜬다. */
.vc-audio-only { display: none; position: absolute; left: 0; right: 0; top: 22%; z-index: 3; text-align: center; pointer-events: none; }
.vc-audio-only h2 { margin: 0; font-family: var(--v-serif); font-size: 34px; font-weight: 700; color: #f5ead8; }
.vc-audio-only p { margin: 10px 0 0; font-size: 15px; color: var(--v-ink-3); font-variant-numeric: tabular-nums; }
.vc-call.is-video-off { background: #000; }
.vc-call.is-video-off .vc-frame, .vc-call.is-video-off .vc-scrim, .vc-call.is-video-off .vc-grain, .vc-call.is-video-off .vc-embers { visibility: hidden; }
.vc-call.is-video-off .vc-audio-only { display: block; }
.vc-call.is-video-off.is-panel-open .vc-audio-only { display: none; }
/* 판을 열면 영상이 오른쪽 위 떠 있는 창으로 줄어드는데, 영상을 껐으면 그 창도 띄우지 않는다. */
.vc-call.is-video-off.has-card .vc-feed { visibility: hidden; pointer-events: none; }
/* 꿈 카드 — 들려준 꿈 인용, 긴 풀이를 쓰는 동안의 자리 */
.vc-dream-quote { margin: 0 0 16px; padding: 12px 14px; border-left: 3px solid #6bb6ff; border-radius: 0 10px 10px 0; background: rgba(107,182,255,.08);
  color: #e6eefb; font-family: var(--v-serif); font-size: 15px; line-height: 1.7; word-break: keep-all; }
.vc-dream-pending { margin-bottom: 16px; animation: vc-dream-pulse 1.6s ease-in-out infinite; }
@keyframes vc-dream-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .vc-dream-pending { animation: none; } }
.vc-dreamcard .vc-reading + .vc-dream-dict { margin-top: 22px; }
/* "말로 해도 알아들어" 팁 — 버튼 줄 바로 위에 잠깐 뜬다. 누르면 그 말을 보낸다. */
/* 팁은 위에서 내려온다 — 아래 판 바로 위에 띄우면 세로가 짧은 폰(인앱 브라우저)에서 입과 턱을 덮었다.
   오른쪽 위 시간·마이크 알약 밑, 머리 위쪽이라 얼굴을 가리지 않는다. */
.vc-saytip { position: absolute; z-index: 30; left: 50%; top: calc(max(12px, env(safe-area-inset-top)) + 54px); transform: translateX(-50%);
  display: flex; align-items: stretch; width: min(92%, 380px); border-radius: 16px; overflow: hidden;
  /* 은은하게 — 반투명 바탕에 얇은 테두리. 뒤 영상이 비쳐 보이고, 글자는 그림자로 읽힌다. */
  background: rgba(18,9,11,.38); border: 1px solid rgba(232,200,120,.22); box-shadow: 0 6px 18px rgba(0,0,0,.2);
  animation: vc-saytip-in .35s cubic-bezier(.2,.8,.2,1) both; }
.vc-saytip-try small, .vc-saytip-try b, .vc-saytip-x { text-shadow: 0 1px 6px rgba(0,0,0,.75); }
@keyframes vc-saytip-in { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .vc-saytip { animation: none; } }
.vc-saytip-try { flex: 1 1 auto; min-width: 0; padding: 11px 14px; border: 0; background: none; color: #fff; text-align: left; cursor: pointer; }
.vc-saytip-try small { display: block; margin-bottom: 3px; color: rgba(232,200,120,.85); font-size: 11.5px; font-weight: 700; }
.vc-saytip-try b { display: block; font-family: var(--v-serif); font-size: 16px; line-height: 1.4; word-break: keep-all; color: rgba(255,255,255,.92); }
.vc-saytip-x { flex: 0 0 44px; border: 0; border-left: 1px solid rgba(255,255,255,.06); background: none; color: rgba(255,255,255,.5); font-size: 20px; cursor: pointer; }
.vc-call.is-panel-open .vc-saytip { display: none; }
.vc-dialing { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; transition: opacity .5s ease, transform .5s ease; }
.vc-dialing.is-gone { opacity: 0; transform: scale(1.04); pointer-events: none; }
.vc-dialing .ring { position: relative; width: 118px; height: 118px; border-radius: 50%; overflow: hidden; border: 1px solid rgba(255,255,255,.2); box-shadow: 0 0 0 8px rgba(216,31,42,.1), 0 20px 50px rgba(0,0,0,.7); }
.vc-dialing .ring img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.vc-dialing .ring::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid rgba(240,50,63,.55); animation: vc-ripple 1.9s ease-out infinite; }
@keyframes vc-ripple { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } }
.vc-dialing h2 { margin: 8px 0 0; font-family: var(--v-serif); font-size: 34px; font-weight: 700; letter-spacing: 1px; text-shadow: 0 4px 26px rgba(0,0,0,.85); }
.vc-dialing p { margin: 0; font-size: 13px; color: var(--v-ink-2); letter-spacing: .04em; animation: vc-fade 1.8s ease-in-out infinite; }

/* 1분 남음 */
.vc-lowpill { position: absolute; z-index: 9; left: 50%; top: calc(max(12px, env(safe-area-inset-top)) + 70px); transform: translateX(-50%); padding: 7px 14px; border-radius: 999px; background: rgba(216,31,42,.92); color: #fff; font-size: 12px; font-weight: 800; box-shadow: 0 8px 24px rgba(216,31,42,.45); animation: vc-drop .34s cubic-bezier(.2,.9,.3,1.3); }
@keyframes vc-drop { from { transform: translate(-50%, -14px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* 바닥 — 카드·자막·컨트롤을 세로로 쌓는다.
   전엔 셋 다 bottom 을 잡고 절대 위치로 떠 있어서 자막이 카드에 가렸다. */
.vc-bottom { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  max-height: 78dvh; pointer-events: none;
  /* 아래로 갈수록 어두워져 카드·자막·버튼이 얼굴 위에서 또렷이 읽힌다 */
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 30%, rgba(0,0,0,.72) 100%); }
.vc-bottom > * { pointer-events: auto; }

/* 슬라이드 덱 — 좌우로 넘기고, 접을 수 있다 */
.vc-deck { display: none; flex-direction: column; gap: 6px; min-height: 0; }
.vc-deck.is-on { display: flex; }
.vc-deck-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px; }
.vc-deck-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  gap: 10px; min-height: 52px; padding: 13px 20px; border-radius: 999px;
  background: rgba(0,0,0,.45); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.08);
  font-size: 16px; font-weight: 700; color: var(--v-ink-2); }
.vc-deck-toggle b { font-weight: 800; color: #fff; }
.vc-deck-toggle i { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--v-ink-3); transition: transform .22s; }
.vc-deck.is-folded .vc-deck-toggle i { transform: rotate(180deg); }
.vc-deck.is-folded .vc-deck-toggle { border-color: rgba(255,117,128,.7);
  background: linear-gradient(145deg, rgba(119,24,42,.96), rgba(58,9,19,.96));
  box-shadow: 0 6px 24px rgba(218,40,66,.25), inset 0 1px rgba(255,255,255,.12);
  animation: vc-deck-bounce 2.8s ease-in-out infinite; }
@keyframes vc-deck-bounce {
  0%, 36%, 100% { transform: translateY(0); }
  12% { transform: translateY(-7px); }
  24% { transform: translateY(-3px); }
}
.vc-deck-toggle:active { scale: .96; }
.vc-deck-toggle:focus-visible, .vc-navbtn:focus-visible { outline: 2px solid #ffb3b8; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .vc-deck.is-folded .vc-deck-toggle { animation: none; } }
.vc-deck.is-folded .vc-deck-toggle b { color: #ffb3b8; }
/* 자료를 넘기는 화살표 — 폰은 손가락으로 밀면 되지만 PC 는 넘길 길이 없다.
   "자료 숨김"은 접기와 하는 일이 같아 걷어냈다 — 한 자리에 같은 일을 하는 단추가 둘이었다. */
.vc-deck-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: 0 0 auto; }
.vc-deck-nav[hidden] { display: none; }
.vc-deck-count { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--v-ink-2); min-width: 34px; text-align: center; }
.vc-navbtn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.45); backdrop-filter: blur(12px);
  transition: transform .12s, background .15s; }
.vc-navbtn svg { width: 17px; height: 17px; fill: rgba(255,255,255,.72); }
.vc-navbtn:active { transform: scale(.9); background: rgba(255,255,255,.14); }
.vc-navbtn:disabled { opacity: .3; cursor: default; }
@media (max-width: 390px) { .vc-deck-bar .vc-dots { display: none; } }

/* 카드 안 작은 버튼 줄 */
.vc-card-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.vc-card-actions span { font-size: 11px; color: var(--v-ink-3); }
.vc-mini { padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08);
  font-size: 12px; font-weight: 700; color: #fff; }
.vc-mini.is-primary { border-color: rgba(240,50,63,.6); background: rgba(216,31,42,.35); }
.vc-mini:disabled { opacity: .5; }

/* 카드 안 편집 폼 */
.vc-edit { display: grid; gap: 8px; }
.vc-edit label { display: flex; flex-direction: column; gap: 4px; font-size: 10.5px; font-weight: 700; color: var(--v-ink-3); }
.vc-edit label { min-width: 0; }
.vc-edit input, .vc-edit select { width: 100%; min-width: 0; height: 38px; padding: 0 10px; border-radius: 4px; border: 1px solid var(--v-line);
  background: rgba(255,255,255,.06); color: #fff; font: 600 14px var(--v-sans); outline: none; appearance: none; }
.vc-edit input:focus, .vc-edit select:focus { border-color: rgba(240,50,63,.65); }
/* 펼친 목록은 창(OS)이 그린다 — 어두운 화면에서 흰 바탕에 흰 글자가 되어 안 보였다 */
select option, select optgroup { background: #171012; color: #f3ebe8; }
.vc-edit .row3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 6px; }
.vc-edit .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.vc-dots { display: inline-flex; align-items: center; gap: 5px; }
.vc-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.26); transition: background .2s, width .2s; }
.vc-dots i.on { width: 14px; border-radius: 3px; background: var(--v-red-bright); }

.vc-tray { display: flex; align-items: flex-end; gap: 12px; padding: 2px 16px 4px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none;
  transition: max-height .28s ease, opacity .2s, margin .28s; }
.vc-tray::-webkit-scrollbar { display: none; }
.vc-tray, .vc-tray > .vc-card { touch-action: pan-y pinch-zoom; }
.vc-tray.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
.vc-tray.is-dragging * { user-select: none; }
.vc-tray img { -webkit-user-drag: none; }
.vc-deck.is-folded .vc-tray { max-height: 0; opacity: 0; margin-bottom: -6px; pointer-events: none; }
/* 카드 한 장이 컬럼 폭을 꽉 채운다 — 그래야 가운데 오고, 넘기면 다음 장이 그 자리에 온다.
   높이는 화면의 1/3 까지 — 넘치면 카드 안에서 스크롤한다. */
.vc-card { position: relative; scroll-snap-align: center; scroll-snap-stop: always; flex: 0 0 auto; width: calc(100% - 32px); max-height: 34dvh; overflow-y: auto; scrollbar-width: none;
  padding: 13px 13px 12px; border-radius: 6px; border: 1px solid rgba(240,50,63,.24);
  background: rgba(10,6,7,.88); backdrop-filter: blur(18px); box-shadow: 0 16px 44px rgba(0,0,0,.62);
  animation: vc-cardin .38s cubic-bezier(.2,.9,.3,1.15); }
.vc-card.is-swap { animation: vc-cardswap .28s ease; }
@keyframes vc-cardin { from { transform: translateY(26px) scale(.95); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes vc-cardswap { from { opacity: .35; } to { opacity: 1; } }
.vc-card .h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px;
  font-family: var(--v-serif); font-size: 13px; font-weight: 700; color: #fff; }
.vc-card .h span { font-family: var(--v-sans); font-size: 10.5px; font-weight: 600; color: var(--v-ink-3); }
.vc-card .cap { margin-top: 9px; font-size: 11.5px; line-height: 1.55; color: var(--v-ink-2); }

/* 최근 네 메시지를 시간순으로 유지하는 통화 채팅창. */
.vc-cc { margin: 0 16px; padding: 10px; border-radius: 14px; display: flex; flex-direction: column; gap: 8px;
  flex: 0 0 auto; min-height: 0;
  background: rgba(8,5,6,.88); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.vc-cc.is-off .vc-chat-log { display: none; }
.vc-cc.is-off { gap: 0; }
.vc-cc-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-left: auto; }
.vc-cc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; flex: 0 0 auto; }
.vc-cc .who { font-size: 11px; font-weight: 700; color: var(--v-ink-2); }
.vc-cc-more { min-height: 36px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07); font-size: 11px; font-weight: 700; color: var(--v-ink-2); }
.vc-chat-log { display: flex; flex-direction: column; gap: 8px; min-height: 0; max-height: min(32dvh, 280px);
  overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none; scrollbar-width: thin; scrollbar-color: #655056 transparent; }
.vc-chat-message { flex: 0 0 auto; max-width: 90%; padding: 8px 11px; border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px 12px 12px 3px; background: rgba(255,255,255,.07); align-self: flex-start; }
.vc-chat-message b { display: block; margin-bottom: 3px; font-size: 10px; font-weight: 700; color: #ffb3b8; }
.vc-chat-message p { margin: 0; font-family: var(--v-serif); font-size: 13px; line-height: 1.5; color: #fff; overflow-wrap: anywhere; }
.vc-chat-message.me p { font-family: var(--v-sans); }
.vc-chat-message.me { align-self: flex-end; border-radius: 12px 12px 3px 12px;
  background: rgba(216,31,42,.24); border-color: rgba(240,50,63,.28); }
.vc-chat-message.me b { color: var(--v-ink-2); }
.vc-chat-message.is-live p::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 3px;
  vertical-align: -2px; background: var(--v-red-bright); animation: vc-caret 1s steps(1) infinite; }
@keyframes vc-caret { 50% { opacity: 0; } }

/* 카드 안 내용 — 명식판·오행·대운·사진 */
.vc-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.vc-pillar { text-align: center; padding: 7px 2px 8px; border-radius: 4px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); }
.vc-pillar .l { font-size: 9.5px; font-weight: 700; color: var(--v-ink-3); letter-spacing: .1em; }
.vc-pillar .g { font-family: var(--v-serif); font-size: 28px; font-weight: 700; line-height: 1.18; }
.vc-pillar .k { font-size: 9.5px; color: var(--v-ink-3); }
.vc-pillar.is-day { border-color: rgba(240,50,63,.45); background: rgba(216,31,42,.1); }
.el-목 { color: #6ee7a0; } .el-화 { color: #ff6b6b; } .el-토 { color: #e8c878; } .el-금 { color: #e8eaed; } .el-수 { color: #6bb6ff; }
.vc-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 11px; margin: 10px 0 0; font-size: 11.5px; line-height: 1.45; }
.vc-kv dt { color: var(--v-ink-3); font-weight: 600; } .vc-kv dd { margin: 0; color: rgba(255,255,255,.9); }
/* 받아 적는 중 — 아직 못 들은 칸은 흐리게 둔다 */
.vc-fill dd.wait { color: rgba(255,255,255,.26); }
.vc-fill dd:not(.wait) { animation: vc-filled .5s ease; }
@keyframes vc-filled { from { color: var(--v-red-bright); } }

/* ── 받아 적은 것 · 명식판 다듬기(2026-10-09 운영자 "받아 적은 것 명식판 좀 멋있게") ── */
.vc-fill-top { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.vc-fill-seal { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: linear-gradient(145deg, #c8202c, #8e1219);
  color: #ffe9d6; font-family: var(--v-serif); font-size: 17px; font-weight: 700; box-shadow: 0 0 0 1px rgba(255,220,190,.18) inset, 0 6px 16px rgba(200,32,44,.35); transform: rotate(-4deg); }
.vc-fill-dots { display: flex; gap: 6px; }
.vc-fill-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.14); transition: background .3s, box-shadow .3s; }
.vc-fill-dots i.on { background: #e8c878; box-shadow: 0 0 8px rgba(232,200,120,.7); }
.vc-kv.vc-fill { grid-template-columns: 1fr 1fr; gap: 8px; }
.vc-fill-cell { position: relative; padding: 9px 11px 10px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(160deg, rgba(232,200,120,.09), rgba(255,255,255,.02) 60%); border: 1px solid rgba(232,200,120,.22); }
.vc-fill-cell::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: linear-gradient(180deg, #e8c878, rgba(232,200,120,0)); }
.vc-fill-cell.is-wait { background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.07); border-style: dashed; }
.vc-fill-cell.is-wait::before { display: none; }
.vc-fill-cell dt { font-size: .82em; letter-spacing: .04em; color: rgba(232,200,120,.8); }
.vc-fill-cell.is-wait dt { color: var(--v-ink-3); }
.vc-fill-cell dd { margin-top: 2px; font-family: var(--v-serif); font-size: 1.12em; font-weight: 700; color: #fff; word-break: keep-all; }

.vc-pillars { gap: 8px; }
.vc-pillar { position: relative; overflow: hidden; border-radius: 12px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.04);   /* color-mix 를 못 읽는 옛 브라우저는 이 한 줄을 쓴다 */
  background: linear-gradient(180deg, color-mix(in srgb, var(--pc, #ffffff) 14%, transparent), rgba(255,255,255,.02) 70%); box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.vc-pillar.tint-목 { --pc: #6ee7a0; } .vc-pillar.tint-화 { --pc: #ff6b6b; } .vc-pillar.tint-토 { --pc: #e8c878; } .vc-pillar.tint-금 { --pc: #e8eaed; } .vc-pillar.tint-수 { --pc: #6bb6ff; }
.vc-pillar .l { color: rgba(232,200,120,.85); letter-spacing: .14em; }
.vc-pillar .g { text-shadow: 0 0 14px color-mix(in srgb, currentColor 55%, transparent); }
/* 천간과 지지 사이 금선 */
.vc-pillar .g + .k { position: relative; padding-bottom: 6px; margin-bottom: 4px; }
.vc-pillar .g + .k::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(232,200,120,.55), transparent); }
.vc-pillar .g ~ .g + .k { padding-bottom: 0; margin-bottom: 0; }
.vc-pillar .g ~ .g + .k::after { display: none; }
.vc-pillar.is-day { border-color: rgba(240,50,63,.6); box-shadow: 0 0 0 1px rgba(240,50,63,.25) inset, 0 10px 26px rgba(216,31,42,.28); }
.vc-pillar.is-day::after { content: "나"; position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 4px;
  background: #c8202c; color: #ffe9d6; font-family: var(--v-serif); font-size: 10.5px; font-weight: 700; transform: rotate(-6deg); }
/* 명식판 머리의 생년월일·태어난 시·성별 — 받아 적은 것과 같은 금빛 타일 */
.vc-birth[role="group"] > div { border-radius: 10px; background: linear-gradient(160deg, rgba(232,200,120,.09), rgba(255,255,255,.02) 60%); border-color: rgba(232,200,120,.22); }
.vc-birth[role="group"] small { color: rgba(232,200,120,.8); }
.vc-birth[role="group"] b { font-family: var(--v-serif); }

.vc-els { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; align-items: end; height: 92px; }
.vc-el { display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.vc-el i { width: 100%; max-width: 26px; border-radius: 3px 3px 1px 1px; background: currentColor; transform-origin: bottom; animation: vc-grow .55s cubic-bezier(.2,.9,.3,1.1) both; }
@keyframes vc-grow { from { transform: scaleY(0); } }
.vc-el b { font-family: var(--v-serif); font-size: 13px; font-weight: 700; }
.vc-el small { font-size: 9.5px; color: var(--v-ink-3); }

.vc-luck { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.vc-luck::-webkit-scrollbar { display: none; }
.vc-luck div { flex: 0 0 auto; min-width: 54px; text-align: center; padding: 7px 8px; border-radius: 4px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); }
.vc-luck div.is-now { border-color: rgba(240,50,63,.5); background: rgba(216,31,42,.12); }
.vc-luck b { display: block; font-family: var(--v-serif); font-size: 16px; font-weight: 700; }
.vc-luck small { display: block; margin-top: 2px; font-size: 9.5px; color: var(--v-ink-3); }
.vc-photo img { width: 100%; border-radius: 4px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 14%; }

/* 하단 컨트롤 — 유리 알약 (페이스타임) */
/* 세로로 쌓는다 — 가로였을 때 글 입력칸이 단추 줄 옆에 끼어 폭이 0 으로 눌렸다 */
.vc-hud-bottom { position: static; padding: 2px 16px calc(18px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; }
.vc-controls-toggle { min-height: 44px; padding: 8px 16px; margin: 0 0 5px;
  display: inline-flex; align-items: center; gap: 9px; border: 1px solid rgba(255,255,255,.16);
  border-radius: 24px; color: #f4e8df; background: rgba(24,16,18,.76);
  backdrop-filter: blur(16px); font: inherit; font-size: 12px; cursor: pointer; }
.vc-controls-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.vc-controls-toggle[aria-expanded="false"] svg { transform: rotate(180deg); }
.vc-controls-toggle:focus-visible { outline: 2px solid #ffb3b8; outline-offset: 3px; }
.vc-call-controls { max-width: 100%; }
/* 체험 30초 전 — 통화 단추 위의 '이어서 듣기'. 서연의 말은 끊지 않는다(showOffer) */
.vc-offer { align-self: stretch; box-sizing: border-box; margin: 0 0 10px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(232,196,126,.55);
  background: rgba(20,8,8,.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: vc-drop .34s cubic-bezier(.2,.9,.3,1.3); }
.vc-offer > b { display: block; font-size: 13.5px; font-weight: 800; color: #f3e2bf; word-break: keep-all; }
.vc-offer-row { display: flex; gap: 8px; margin-top: 9px; }
.vc-offer-pay { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #e8323f, #a3111c); color: #fff; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.vc-offer-pay svg { width: 18px; height: 18px; }
.vc-offer-more { flex: 0 0 auto; min-height: 46px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--v-line); background: transparent;
  color: var(--v-ink-2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.vc-offer-pay:focus-visible, .vc-offer-more:focus-visible { outline: 2px solid #ffb3b8; outline-offset: 2px; }
.vc-call-controls[hidden] { display: none; }
/* 단추 상자 — 버튼 숨기기 줄과 단추 줄을 한 상자에 담는다. 버튼 숨기기가 상자 밖 알약이었을 때는
   위 판과 단추 상자 사이가 50px 넘게 벌어졌다. 접으면(.is-collapsed) 상자는 지우고 알약만 남긴다. */
.vc-dock { display: flex; flex-direction: column; align-items: center; max-width: calc(100vw - 24px); }
.vc-dock:not(.is-collapsed) { border-radius: 28px; background: rgba(14,8,9,.78); backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 14px 40px rgba(0,0,0,.6); }
.vc-dock:not(.is-collapsed) > .vc-controls-toggle { min-height: 30px; margin: 0; padding: 7px 14px 0; gap: 4px;
  border: 0; border-radius: 0; background: none; backdrop-filter: none; color: rgba(244,232,223,.6); font-size: 11px; }
.vc-dock:not(.is-collapsed) > .vc-controls-toggle svg { width: 15px; height: 15px; }
.vc-dock .vc-bar { background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; padding-top: 5px; }
.vc-inactivity-notice { position: absolute; z-index: 20; top: max(12px, env(safe-area-inset-top));
  left: 16px; right: 16px; padding: 10px 14px; border: 1px solid #aa896455; border-radius: 12px;
  background: rgba(31,22,20,.94); color: #f4e8df; font-size: 13px; line-height: 1.6;
  text-align: center; pointer-events: none; }
.vc-inactivity-notice[hidden] { display: none; }
.vc-bar { display: flex; align-items: flex-end; justify-content: center; gap: 10px; padding: 11px 12px 13px; border-radius: 28px; max-width: calc(100vw - 24px); background: rgba(14,8,9,.78); backdrop-filter: blur(22px) saturate(1.3); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 14px 40px rgba(0,0,0,.6); }
/* 아이콘 + 이름. 무슨 단추인지 눌러 보지 않아도 알아야 한다. */
.vc-btn { display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: auto; background: none; border: 0; padding: 0; transition: transform .12s; }
.vc-btn > i { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.1);
  transition: background .16s, border-color .16s; }
.vc-btn > span { font-size: 10.5px; font-weight: 700; color: var(--v-ink-3); letter-spacing: .02em; }
.vc-btn.is-on > i { background: rgba(255,255,255,.92); border-color: transparent; }
.vc-btn.is-on svg { fill: #17090b; }
.vc-btn.is-on > span { color: #fff; }
/* 켜고 끄는 단추(마이크·영상·소리)는 꺼졌을 때 모두 같은 모양 — 붉은 원, 사선 아이콘, "… 꺼짐".
   흰 원(is-on)은 창을 여는 단추(직접 입력)가 열려 있을 때만 쓴다. */
.vc-btn.is-off > i { background: rgba(224,50,63,.2); border-color: rgba(255,120,130,.6); }
.vc-btn.is-off svg { fill: #ff9aa3; }
.vc-btn.is-off > span { color: #ff9aa3; }
.vc-btn:active { transform: scale(.93); }
.vc-btn svg { width: 24px; height: 24px; fill: #fff; }
/* 뭘 봐 줄까 — 단추 줄 바로 위 가운데. 손금·부적이 여기 들어 있어 손이 닿아야 한다. */
.vc-ask { display: inline-flex; align-items: center; gap: 7px; margin: 0 auto 10px;
  padding: 8px 15px 8px 12px; border-radius: 999px; pointer-events: auto;
  background: linear-gradient(180deg, rgba(240,50,63,.4), rgba(216,31,42,.2));
  border: 1px solid rgba(240,50,63,.5); backdrop-filter: blur(14px);
  transition: transform .12s, background .16s; }
.vc-ask svg { width: 17px; height: 17px; fill: #ffd7da; }
.vc-ask span { font-size: 12px; font-weight: 800; color: #ffd7da; white-space: nowrap; }
.vc-ask:active { transform: scale(.95); }
.vc-ask.is-on { background: linear-gradient(180deg, rgba(240,50,63,.68), rgba(216,31,42,.4)); }
.vc-ask.is-on svg, .vc-ask.is-on span { fill: #fff; color: #fff; }
/* 글로 말하기 — 하단 바 위에 붙는다. 평소엔 숨어 있다. */
.vc-type { display: flex; align-items: center; gap: 8px; margin: 0 auto 10px; width: 100%; max-width: 420px; padding: 6px 6px 6px 16px;
  border-radius: 999px; background: rgba(14,8,9,.86); backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.16); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.vc-type input { flex: 1; min-width: 0; background: none; border: 0; color: #fff; font-size: 16px; padding: 10px 0; }
.vc-type input::placeholder { color: rgba(255,255,255,.42); }
.vc-type input:focus { outline: none; }
.vc-type-send { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: linear-gradient(180deg, var(--v-red-bright), var(--v-red-deep)); }
.vc-type-send svg { width: 19px; height: 19px; fill: #fff; }

/* 끊기 — 가운데에 가장 크게. 전에는 폭만 늘려 두어 타원이었다. */
.vc-btn-end { margin: 0 4px; }
.vc-btn-end > i { width: 68px; height: 68px; border: 0;
  background: linear-gradient(180deg, var(--v-red-bright), var(--v-red-deep));
  box-shadow: 0 10px 28px rgba(216,31,42,.55); }
.vc-btn-end:active > i { background: linear-gradient(180deg, var(--v-red-deep), var(--v-red-deep)); }
.vc-btn-end svg { transform: rotate(133deg); width: 30px; height: 30px; }

/* 토스트 */
.vc-toast { position: absolute; z-index: 40; left: 50%; top: calc(max(14px, env(safe-area-inset-top)) + 8px); transform: translateX(-50%); max-width: 88%; padding: 11px 16px; border-radius: 999px; background: rgba(18,10,11,.94); border: 1px solid rgba(240,50,63,.4); backdrop-filter: blur(14px); box-shadow: 0 12px 34px rgba(0,0,0,.6); font-size: 13px; font-weight: 600; text-align: center; animation: vc-drop .28s cubic-bezier(.2,.9,.3,1.3); }

/* =========================================================================
   3. 통화 끝
   ========================================================================= */
.vc-ended { position: absolute; inset: 0; overflow-y: auto; padding: 0 20px calc(28px + env(safe-area-inset-bottom)); text-align: center; }
.vc-ended::-webkit-scrollbar { width: 0; }
.vc-ended .top { padding-top: max(56px, calc(env(safe-area-inset-top) + 46px)); }
.vc-ended .face { width: 104px; height: 104px; margin: 0 auto; border-radius: 50%; overflow: hidden; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 0 0 7px rgba(216,31,42,.09), 0 16px 40px rgba(0,0,0,.6); }
.vc-ended .face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
/* 체험 끝 — 얼굴은 작게, 이어서 듣기 상자가 첫 화면 위쪽에 오게 */
.vc-ended.is-trial-over .top { padding-top: max(52px, calc(env(safe-area-inset-top) + 42px)); }
.vc-ended.is-trial-over .face { width: 64px; height: 64px; box-shadow: 0 0 0 5px rgba(216,31,42,.09), 0 10px 28px rgba(0,0,0,.6); }
.vc-ended.is-trial-over .vc-trial-end { margin-top: 14px; }
.vc-ended.is-trial-over .vc-trial-end > b { font-size: 22px; }
.vc-ended.is-trial-over .vc-trial-end > b:focus { outline: none; }
.vc-ended h2 { margin: 18px 0 5px; font-family: var(--v-serif); font-size: 26px; font-weight: 700; letter-spacing: .6px; }
.vc-ended .why { margin: 0; font-size: 13.5px; color: var(--v-ink-2); }
.vc-goodbye { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(288px, calc(100% - 40px)); box-sizing: border-box; z-index: 2000; padding: 20px; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: rgba(25,17,22,.97); box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.vc-goodbye-box { text-align: center; color: #fff; }
.vc-goodbye-box > i { display: grid; place-items: center; width: 36px; height: 36px; margin: 0 auto 10px; border-radius: 50%; background: #ab3541; }
.vc-goodbye-box > i svg { width: 18px; height: 18px; fill: #fff; transform: rotate(133deg); }
.vc-goodbye-box h2 { margin: 0 0 6px; font-size: 17px; line-height: 1.5; }
.vc-goodbye-box p { margin: 0 0 14px; color: #e2d7dc; font-size: 12px; line-height: 1.7; }
.vc-goodbye-box button { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid #e2b6be; border-radius: 8px; background: #a93240; color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.vc-goodbye-box button:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.vc-ended .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 24px 0 0; }
.vc-ended .stats div { padding: 15px 12px; border-radius: 4px; border: 1px solid var(--v-line); background: rgba(255,255,255,.035); }
.vc-ended .stats b { display: block; font-family: var(--v-serif); font-size: 23px; font-weight: 700; color: #fff; }
.vc-ended .stats small { display: block; margin-top: 5px; font-size: 11px; color: var(--v-ink-3); }
.vc-memo { margin: 14px 0 0; padding: 12px 14px; border-radius: 4px; border: 1px solid rgba(240,50,63,.22); background: rgba(216,31,42,.07); font-size: 12.5px; line-height: 1.6; color: var(--v-ink-2); text-align: left; }
.vc-memo b { display: block; margin-bottom: 4px; color: #ff9aa1; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.vc-again { width: 100%; height: 56px; margin-top: 22px; border-radius: 999px; background: linear-gradient(180deg, var(--v-red-bright), var(--v-red-deep)); border: 1px solid rgba(255,255,255,.16); color: #fff; font-size: 16px; font-weight: 800; box-shadow: 0 12px 30px rgba(216,31,42,.34); display: flex; align-items: center; justify-content: center; gap: 9px; }
.vc-again svg { width: 19px; height: 19px; fill: #fff; }
.vc-home { display: block; width: 100%; height: 52px; line-height: 52px; margin-top: 10px; border-radius: 999px; border: 1px solid var(--v-line); background: rgba(255,255,255,.04); color: var(--v-ink-2); font-size: 15px; font-weight: 700; text-decoration: none; }
/* 끝 화면의 다른 상담가 — 가로로 밀어 고른다(voice-call.js otherCallersHtml) */
.vc-others { margin-top: 22px; text-align: left; }
.vc-others > b { display: block; font-size: 15px; font-weight: 800; color: #fff; }
.vc-others > small { display: block; margin-top: 3px; font-size: 12px; color: var(--v-ink-3); }
.vc-others-row { display: grid; grid-auto-flow: column; grid-auto-columns: 42%; gap: 10px; margin: 12px -16px 0; padding: 0 16px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.vc-others-row::-webkit-scrollbar { display: none; }
.vc-others-row a { scroll-snap-align: start; display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--v-line); background: rgba(255,255,255,.04); color: inherit; text-decoration: none; }
.vc-others-row img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 18%; }
.vc-others-row span { display: block; padding: 8px 10px 10px; }
.vc-others-row span b { display: block; font-size: 14px; font-weight: 800; color: #fff; }
.vc-others-row span i { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-style: normal; font-size: 11.5px; line-height: 1.45; color: var(--v-ink-2); word-break: keep-all; }
.vc-others-row a:active { transform: scale(.98); }
/* 종료 화면 — 사주풀이 기록 */
.vc-r { margin-top: 28px; text-align: left; }
.vc-r h3 { margin: 0 0 12px; font-family: var(--v-serif); font-size: 17px; font-weight: 700; letter-spacing: .5px; }
.vc-r-row { display: flex; justify-content: space-between; gap: 10px; padding: 11px 13px; border-radius: 4px; border: 1px solid var(--v-line); background: rgba(255,255,255,.035); font-size: 12.5px; }
.vc-r-row b { color: var(--v-ink-3); font-weight: 700; flex: 0 0 auto; }
.vc-r-row span { color: #fff; font-weight: 600; text-align: right; }
.vc-r-chart { margin-top: 10px; padding: 13px; border-radius: 6px; border: 1px solid rgba(240,50,63,.24); background: rgba(10,6,7,.7); }
.vc-r-struct { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.vc-r-struct div { padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(240,50,63,.35); background: rgba(216,31,42,.12); font-size: 11px; font-weight: 700; color: #ffb3b8; }
.vc-r-box { margin-top: 10px; padding: 13px 14px; border-radius: 6px; border: 1px solid var(--v-line); background: rgba(255,255,255,.035); }
.vc-r-h { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--v-red-bright); }
.vc-r-points { margin: 0; padding: 0 0 0 16px; display: grid; gap: 7px; font-family: var(--v-serif); font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.94); }
.vc-r-todo { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(255,255,255,.12); font-size: 13px; color: #fff; }
.vc-r-todo b { display: block; margin-bottom: 3px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: var(--v-ink-3); }
.vc-r-empty { margin: 0; font-size: 12.5px; color: var(--v-ink-3); }
.vc-r-wait { animation: vc-fade 1.6s ease-in-out infinite; }

.vc-log { margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.07); text-align: left; }
.vc-log > b { display: block; margin-bottom: 10px; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--v-ink-3); }
.vc-log div { padding: 5px 0; font-size: 13px; line-height: 1.6; }
.vc-log div.her { font-family: var(--v-serif); color: rgba(255,255,255,.94); }
/* 이름표는 통화 캐릭터를 따른다 — voice-call.js 가 #vcRoot 에 --vc-her 를 넣는다(없으면 서연) */
.vc-log div.her::before { content: var(--vc-her, "서연") " "; font-family: var(--v-sans); font-size: 10px; font-weight: 800; color: var(--v-red-bright); letter-spacing: .04em; }
.vc-log div.me { color: var(--v-ink-2); }
.vc-log div.me::before { content: "나 "; font-size: 10px; font-weight: 800; color: var(--v-ink-3); letter-spacing: .04em; }
/* 앞부분만 — 펼치면 스크롤 상자 */
.vc-log-body.is-full { max-height: 46dvh; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
.vc-log-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.vc-log-actions span { font-size: 11px; color: var(--v-ink-3); }
.vc-log-actions .vc-mini { display: inline-flex; align-items: center; gap: 6px; }
.vc-log-actions .vc-mini svg { width: 14px; height: 14px; fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .vc-frame.is-on, .vc-hero-img { animation: none; }
  .vc-embers, .vc-grain { display: none; }
  .vc-dialbtn:not(:disabled), .vc-dialing p, .vc-topright.is-dial .vc-clock, .vc-live i { animation: none; }
}

/* 비회원 첫 장 — 로그인부터 */
.vc-login { margin-top: 11px; padding: 15px 16px 14px; border: 1px solid var(--v-line); border-radius: 4px; background: rgba(255,255,255,.035); }
.vc-login b { display: block; font-size: 15px; font-weight: 700; color: #fff; }
.vc-login small { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.7; color: var(--v-ink-3); }
.vc-login .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.vc-login-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; border-radius: 4px;
  font-size: 13px; font-weight: 700; border: 1px solid transparent; }
.vc-login-btn.kakao { background: #fee500; color: #191600; }
.vc-login-btn.google { background: #fff; color: #1f1f1f; border-color: #dadce0; }
/* 로고는 제 색으로 둔다 — 구글 마크는 네 색이 한 벌이라 한 색으로 칠하면 로고가 아니다 */
.vc-logo { flex: none; width: 17px; height: 17px; }
.vc-login-btn:active { transform: translateY(1px); }

/* 서연이 봐 주는 것 — 값을 보기 전에 무엇을 받는지부터 읽는 자리다.
   두 열로 깔고 한 칸에 두 줄만 둔다. 자세한 건 통화하며 듣는 게 이 서비스다. */
/* 통화 중에 뜨는 명식판(.vc-pillars)과 같은 문법으로 짠다 —
   격자선으로 판을 만들고, 한자는 큰 전서체에 오행 색을 입힌다.
   값을 보기 전에 무엇을 받는지부터 읽는 자리라 한 칸에 두 줄만 둔다. */
.vc-board { margin-top: 20px; border: 1px solid rgba(240,50,63,.26); border-radius: 6px;
  background: rgba(10,6,7,.72); overflow: hidden; box-shadow: inset 0 1px 0 rgba(240,50,63,.12); }
.vc-board-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 11px 13px; border-bottom: 1px solid var(--v-line); background: rgba(255,255,255,.03); }
.vc-board-h b { font-family: var(--v-serif); font-size: 13.5px; font-weight: 700; color: #fff; letter-spacing: .02em; }
.vc-board-h span { font-family: var(--v-sans); font-size: 10.5px; font-weight: 600; color: var(--v-ink-3); }
/* 칸 사이를 1px 틈으로 두고 바닥색을 비추면 명식판의 괘선이 된다 */
.vc-can { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; padding: 0; background: rgba(255,255,255,.09); }
.vc-can-i { display: block; text-align: center; min-width: 0; padding: 0 8px 12px; background: #0a0607; overflow: hidden; }
/* 칸 윗부분을 그림으로 채우고, 한자는 그림 아래쪽에 걸쳐 얹는다 */
.vc-can-art { display: block; width: calc(100% + 16px); max-width: none; margin: 0 -8px; aspect-ratio: 4 / 3; object-fit: cover; background: #050303;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent); mask-image: linear-gradient(180deg, #000 62%, transparent); }
.vc-can-han { position: relative; display: block; margin-top: -20px; font-family: var(--v-serif); font-size: 25px; font-weight: 700;
  line-height: 1.15; letter-spacing: .05em; text-shadow: 0 2px 10px #000, 0 0 2px #000; }
.vc-can-i b { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 700;
  color: #fff; letter-spacing: -.02em; word-break: keep-all; }
.vc-can-i small { display: block; margin-top: 4px; font-size: 11px; line-height: 1.55;
  color: var(--v-ink-3); word-break: keep-all; }
/* 명식판의 일주 칸처럼, 제일 먼저 보는 것 하나만 붉게 세운다 */
.vc-can-i.is-key { background: rgba(216,31,42,.11); box-shadow: inset 0 0 0 1px rgba(240,50,63,.42); }
@media (max-width: 360px) { .vc-can-i { padding: 0 6px 11px; } .vc-can-art { width: calc(100% + 12px); margin: 0 -6px; } .vc-can-han { font-size: 23px; } }
.vc-can-note { margin-top: 10px; font-size: 12px; line-height: 1.7; color: var(--v-ink-3); word-break: keep-all; }

/* 기억 초기화 — 잔액은 그대로 */
/* 기억을 지우는 자리 — 되돌릴 수 없는 일이라 판을 세워 눈에 띄게 한다.
   테두리 없이 38% 회색 글씨로 두었더니 어두운 배경에 그대로 묻혔다. */
.vc-reset { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 9px 12px;
  margin-top: 12px; padding: 13px 14px; border-radius: 4px;
  border: 1px solid rgba(240, 50, 63, .42);
  background: linear-gradient(165deg, rgba(216, 31, 42, .15), rgba(216, 31, 42, .035));
  font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .74); }
.vc-reset > span b { display: block; font-weight: 700; color: #fff; margin-bottom: 2px; }
.vc-reset > span i { font-style: normal; color: var(--v-ink-3); }
.vc-linkbtn { padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); font-size: 11.5px; font-weight: 600;
  color: var(--v-ink-2); background: rgba(255,255,255,.07); }
.vc-linkbtn:active { background: rgba(255,255,255,.13); }
/* 지우는 단추는 눌렀을 때 되돌릴 수 없다 — 눈에 띄어야 잘못 누르지 않는다 */
.vc-linkbtn.is-danger { border-color: rgba(240,50,63,.7); color: #ffb3b8; background: rgba(216,31,42,.16); }
.vc-linkbtn.is-danger:active { background: rgba(216,31,42,.26); }
.vc-linkbtn + .vc-linkbtn { margin-left: 6px; }

/* ───────── 손금·관상 카메라 — 얼굴 위(7), 위쪽 HUD 아래(8) ───────── */
.vc-cam { position: absolute; inset: 0; z-index: 7; background: #000; }
.vc-cam-view { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vc-cam.is-mirror .vc-cam-view { transform: scaleX(-1); }
.vc-cam-guide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.vc-cam-guide .hand { width: 64vw; max-width: 300px; aspect-ratio: 3 / 4; border: 2px dashed rgba(255,255,255,.75); border-radius: 26px; box-shadow: 0 0 0 200vmax rgba(0,0,0,.35); }
.vc-cam-guide .oval { width: 62vw; max-width: 280px; aspect-ratio: 3 / 4; border: 2px dashed rgba(255,255,255,.75); border-radius: 50%; box-shadow: 0 0 0 200vmax rgba(0,0,0,.35); }
.vc-cam-hint { position: absolute; left: 16px; right: 16px; top: calc(72px + env(safe-area-inset-top)); text-align: center; font-size: 13px; font-weight: 700; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.vc-cam-bar { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) 68px minmax(0, 1fr); align-items: center; gap: 10px;
  padding: 14px 14px calc(22px + env(safe-area-inset-bottom)); background: linear-gradient(to top, rgba(0,0,0,.85), transparent); }
.vc-cam .vc-cam-bar .vc-mini { width: 100%; min-width: 0; min-height: 56px; padding: 12px 8px;
  font-size: 16px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; color: #fff;
  border-color: rgba(255,255,255,.42); background: rgba(24,20,22,.85); }
.vc-cam-bar .vc-mini:active { transform: scale(.96); background: rgba(70,56,62,.95); }
.vc-cam-bar .vc-mini:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.vc-cam-shutter { width: 68px; height: 68px; border-radius: 50%; border: 4px solid #fff; background: transparent; display: grid; place-items: center; padding: 0; }
.vc-cam-shutter i { width: 52px; height: 52px; border-radius: 50%; background: #fff; transition: transform .1s; }
.vc-cam-shutter:active i { transform: scale(.88); }

/* 손금·관상 판 — 찍은 사진과 세 자리 */
.vc-shot img { width: 100%; border-radius: 4px; aspect-ratio: 3 / 4; object-fit: cover; background: #000; }
.vc-vision { display: grid; grid-template-columns: 84px 1fr; gap: 8px; align-items: start; }
.vc-pillars-3 { grid-template-columns: repeat(3, 1fr); gap: 5px; }
.vc-pillars-3 .vc-pillar .g { font-size: 24px; }
.vc-pillars-3 .vc-pillar .l { letter-spacing: 0; font-size: 9px; }
.vc-pillar.is-rev { border-color: rgba(240,50,63,.45); }
.vc-card .cap p { margin: 0 0 6px; } .vc-card .cap p:last-child { margin-bottom: 0; }

/* 부적 */
.vc-talisman { display: grid; grid-template-columns: minmax(110px, 42%) 1fr; gap: 10px; align-items: start; }
.vc-talisman img { width: 100%; aspect-ratio: 2 / 3; object-fit: contain; border-radius: 4px; background: rgba(0,0,0,.35); }
.vc-talisman .poem { margin: 0; white-space: pre-wrap; font-family: var(--v-serif); font-size: 12.5px; line-height: 1.7; color: rgba(255,255,255,.92); }

/* 오늘 하루 · 이름 */
.vc-today .g { font-family: var(--v-serif); font-size: 30px; font-weight: 700; line-height: 1.1; }
.vc-today .k { font-size: 11px; color: var(--v-ink-3); margin-top: 3px; }
.vc-kv em { font-style: normal; font-weight: 700; } .vc-kv em.is-good { color: #ffb3b8; } .vc-kv em.is-bad { color: #8fb3ff; }

/* ───────── 자료 트레이 — 한 장씩 넘기기 ───────── */
/* 카드를 한 장 폭으로 꽉 채운다. 이전에는 calc(100% - 32px) 라 옆 장이 걸쳐 보였다. */
.vc-tray > .vc-card { width: 100%; scroll-snap-align: center; }
/* 높이는 지금 보는 카드가 정한다 — 머리(자료·화살표)가 카드에 딱 붙어 따라온다 */
.vc-tray { height: var(--tray-h, auto); transition: height .22s ease; }
.vc-tray > .vc-card { max-height: 100%; }
.vc-tray { gap: 16px; scroll-padding: 0 16px; }
/* 트레이 머리 — 왼쪽에 "자료", 오른쪽에 쪽수와 화살표 */
.vc-deck-bar { align-items: center; }
/* 화살표 규칙은 위(자료 바 정리)에 한 벌만 둔다 — 여기 또 두었더니 값이 갈라졌다 */
.vc-deck-arrow:active:not(:disabled) { transform: scale(.92); border-color: rgba(240,50,63,.5); }
/* 자료가 하나도 없으면 트레이 머리를 아예 감춘다 — 빈 화면에 단추만 떠 있으면 어색하다 */
.vc-deck.is-empty .vc-deck-bar, .vc-deck.is-empty .vc-tray { display: none; }

/* 채팅창 오른쪽 위의 상담 메뉴. 펼친 동안에는 움직임을 멈춘다. */
.vc-cc .vc-ask { margin: 0; padding: 7px 10px; gap: 4px; animation: vc-deck-bounce 2.8s ease-in-out infinite; }
.vc-cc .vc-ask span { font-size: 11px; }
.vc-cc .vc-ask svg { width: 14px; height: 14px; }
.vc-cc .vc-ask.is-on { animation: none; }
.vc-cc-actions .vc-cc-more, .vc-cc-actions .vc-ask { width: 94px; height: 36px; min-height: 36px;
  padding: 6px 8px; box-sizing: border-box; justify-content: center; flex: 0 0 94px; }
.vc-talisman-progress { padding: 28px 12px; text-align: center; color: #eacfa7; }
.vc-talisman-progress i { display: inline-block; width: 32px; height: 32px; border: 2px solid #5c4233; border-top-color: #eacfa7; border-radius: 50%; animation: vc-talisman-spin 1.2s linear infinite; }
.vc-talisman-progress p { font-size: 14px; line-height: 1.8; }
@keyframes vc-talisman-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vc-cc .vc-ask, .vc-talisman-progress i { animation: none; } }

.vc-call.has-card .vc-feed.is-crowded { visibility: hidden; pointer-events: none; }

@media (max-width: 360px) {
  .vc-dock:not(.is-collapsed) { align-self: stretch; }
  .vc-bar { width: 100%; gap: 6px; padding-inline: 7px; }
  .vc-btn > i { width: 44px; height: 44px; }
  .vc-btn-end { margin: 0; }
  .vc-btn-end > i { width: 60px; height: 60px; }
}

/* 통화 중 명식도 종료 후 사주풀이 기록과 같은 색과 구성으로 표시한다. */
.vc-card:has(.vc-myeongsik) { background: #110c0e; color: var(--v-ink); border: 1px solid var(--v-line); border-radius: 4px; }
.vc-myeongsik { font-family: var(--v-sans); text-align: left; }
.vc-record-title { margin: 0 38px 16px 0; font-family: var(--v-serif); font-size: 17px; font-weight: 700; color: var(--v-ink); }
.vc-myeongsik .vc-r-chart { margin-top: 12px; }
.vc-record-section { margin: 18px 0 9px; font-size: 12px; font-weight: 700; color: var(--v-ink-2); }
.vc-record-muted { margin: 10px 0 0; font-size: 11px; line-height: 1.7; color: var(--v-ink-3); }
.vc-record-basis { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--v-line); color: var(--v-ink-2); font-size: 12px; }
.vc-record-basis summary { cursor: pointer; min-height: 32px; font-weight: 700; }
.vc-record-basis p { line-height: 1.8; margin: 8px 0; }
.vc-reading-person { margin: 0 0 16px; color: var(--v-ink-3); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
/* 판 머리의 생년월일시 — 생년월일 · 태어난 시 · 성별 세 칸(voice-cards.js identity). 저장·공유 단추(float) 밑에서 시작한다. */
.vc-birth { clear: both; display: grid; grid-template-columns: 1.3fr 1fr .72fr; gap: 6px; margin: 2px 0 14px; }
.vc-birth > div { min-width: 0; padding: 8px 10px 9px; border-radius: 6px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); }
.vc-birth small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: var(--v-ink-3); }
.vc-birth b { display: block; margin-top: 3px; font-size: 15px; font-weight: 800; line-height: 1.35; color: #fff; word-break: keep-all; font-variant-numeric: tabular-nums; }
.vc-birth i { display: block; margin-top: 2px; font-style: normal; font-size: 11px; color: var(--v-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 궁합판 사람 칸의 생년월일시 — 좁은 칸이라 날짜 한 줄, 시·성별 한 줄 */
.vc-compat-side .vc-compat-birth { display: flex; flex-direction: column; align-items: center; gap: 1px; margin: 3px 0 4px; }
.vc-compat-side .vc-compat-birth b { font-size: 12.5px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vc-compat-side .vc-compat-birth i { font-style: normal; font-size: 10px; color: var(--v-ink-3); }
.vc-compat-side .vc-compat-birth span { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.72); white-space: nowrap; }
.vc-reading { text-align: left; line-height: 1.85; font-size: 13px; word-break: keep-all; overflow-wrap: anywhere; }
.vc-reading .vc-reading-lead { margin: 0 0 18px; color: var(--v-ink); font-size: 17px; font-weight: 700; line-height: 1.65; }
.vc-reading section + section { margin-top: 16px; }
.vc-reading h4 { margin: 0 0 5px; font-size: 12px; color: var(--v-ink-3); }
.vc-reading section p { margin: 0; color: var(--v-ink-2); }
.vc-call.has-card .vc-card:has(.vc-myeongsik) { padding-bottom: 24px; }
/* Shared consultation controls and a separate, transient spoken subtitle. */
.vc-conversation-panel { margin: 0 16px; padding: 0; min-height: 0; border: 1px solid #79604c55; border-radius: 4px; background: rgba(17,12,14,.94); backdrop-filter: blur(18px); display: flex; flex-direction: column; overflow: hidden; touch-action: pan-y; }
.vc-panel-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); flex-shrink: 0; padding: 7px 5px; border-bottom: 1px solid #79604c33; }
/* 가로 화면이나 키보드가 올라온 동안에는 판이 줄어드는데 이 줄들은 안 줄어서
   손잡이가 판 밖으로 밀려나고 화면 위 어둠에 덮여 눌리지 않았다 — 같이 줄인다. */
@media (max-height: 460px) {
  /* 판 위쪽을 48px 밑으로 못박아 두면 세로가 320px 일 때 판에 줄 자리가 3px 밖에 안 남는다.
     그러면 손잡이가 판 밖으로 밀려 화면 위로 빠지고, 눌러도 어둠만 잡힌다. */
  .vc-call .vc-bottom { top: max(4px, env(safe-area-inset-top)); }
  /* 아래 컨트롤 덩어리가 247px 를 그대로 물고 있으면 판에 59px 밖에 안 남는다.
     좁은 화면에서는 컨트롤이 먼저 양보한다 — 판이 없으면 볼 것도 없다. */
  .vc-call .vc-hud-bottom { flex: 0 1 auto; min-height: 0; overflow: hidden;
    padding: 2px 16px calc(4px + env(safe-area-inset-bottom)); }
  .vc-call.is-panel-open .vc-controls-toggle { display: none; }
  .vc-panel-actions { flex-shrink: 1; padding: 2px 5px; }
  .vc-panel-actions > button { height: 40px; min-height: 40px; }
  .vc-panel-handle { min-height: 28px; padding: 4px 12px; }
}
.vc-panel-actions > button { position: relative; width: 100%; min-width: 0; height: 58px; min-height: 58px; margin: 0; padding: 6px 3px; border: 0; border-right: 1px solid #79604c33; border-radius: 0; font: 700 13px/1.45 var(--v-serif); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; animation: none; background: transparent; color: #bcb0a2; cursor: grab; user-select: none; }
.vc-panel-actions > button:last-child { border-right: 0; }
.vc-panel-actions > button::before { content: attr(data-han); font: 400 17px/1 var(--v-serif); color: #92785e; }
.vc-panel-actions > button[aria-expanded="true"] { background: linear-gradient(0deg,#8f141c33,transparent); color: #f2e6d5; }
.vc-panel-actions > button[aria-expanded="true"]::before { color: #f0666f; }
.vc-panel-actions > button[aria-expanded="true"]::after { content: ''; position: absolute; bottom: -7px; width: 24px; height: 2px; background: #d81f2a; }
.vc-panel-actions .vc-deck-toggle i, .vc-panel-actions .vc-ask svg { display: none; }
.vc-panel-actions .vc-ask span { font: inherit; color: inherit; }
.vc-panel-body { display: flex; flex-direction: column; min-height: 0; max-height: 43dvh; overflow: hidden; padding: 14px 10px; transform: translateX(var(--swipe-x,0px)); transition: transform .2s ease; }
.vc-panel-body[hidden], .vc-panel-body > [data-panel][hidden] { display: none !important; }
/* 세 판이 똑같이 화면을 다 쓴다. 예전에는 명식판만 그랬고, 뭘 봐줄까와 대화내역은
   아래쪽에 작게 떠 있었다 — 뭘 봐줄까는 목록 끝이 잘려 나갔고 대화내역은 서너 줄에서 끊겼다.
   판을 고르는 단추가 셋인데 하나만 커지면 나머지 둘은 고장 난 것처럼 보인다. */
.vc-call.is-panel-open .vc-conversation-panel { flex: 1 1 0; margin: 0; border-radius: 0; }
.vc-call.is-panel-open .vc-panel-body { flex: 1 1 0; max-height: none; }
.vc-call.is-panel-open .vc-card { height: 100%; max-height: none; }
.vc-panel-body > #vcDeck:not([hidden]) { display: flex; }
.vc-panel-body #vcDeck.is-empty .vc-tray { display: flex; }
.vc-panel-body #vcTray:empty::before { content: '사주를 받아 적으면 여기에 명식이 펼쳐져요.'; display: block; padding: 22px 12px; color: #bcb0a2; font: 14px/1.8 var(--v-serif); }
/* 뭘 봐줄까 — 판 안에서는 스스로 상자가 아니라 판의 내용이 된다.
   목록이 남은 높이를 나눠 가지므로 잘리는 줄이 없다. */
.vc-panel-body > .vc-help { position: static; min-height: 0; margin: 0; padding: 0;
  max-height: none; overflow: hidden; border: 0; border-radius: 0; background: none;
  box-shadow: none; animation: none; }
.vc-conversation-panel .vc-deck-bar { padding: 0; justify-content: flex-end; }
.vc-call.is-panel-open .vc-panel-body > .vc-help { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; }
/* 줄 높이는 글자가 정한다(auto). 1fr 로 똑같이 나누면 열한 항목이 여섯 줄이 되어
   한 줄에 62px 밖에 안 돌아가고, 제목 아래 설명 둘째 줄이 잘려 나갔다.
   auto 줄은 남는 자리를 나눠 채우고(align-content: stretch), 넘치면 목록 안에서 구른다. */
.vc-call.is-panel-open .vc-help-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; grid-auto-rows: auto; gap: 9px; }
.vc-call.is-panel-open .vc-help-i { display: flex; flex-direction: column; justify-content: center; padding: 10px 12px; border-radius: 4px; }
.vc-call.is-panel-open .vc-help-i b { font-size: 15px; }
.vc-call.is-panel-open .vc-help-i small { font-size: 12px; line-height: 1.45; }
/* 대화내역 — 판과 같은 결로. 서연의 말은 활자(serif), 내 말은 산세리프로 갈라
   누가 한 말인지 글자 생김새만으로 구분된다. 색도 보라빛 대신 판과 같은 따뜻한 갈색이다. */
.vc-conversation-panel .vc-cc { display: flex; flex-direction: column; min-height: 0; margin: 0; padding: 12px 0 0; border: 0; border-top: 1px solid #79604c33; border-radius: 0; background: none; box-shadow: none; }
.vc-conversation-panel .vc-cc.is-off { display: none; }
.vc-call.is-panel-open .vc-conversation-panel .vc-cc { flex: 1 1 auto; }
.vc-conversation-panel .vc-cc .who { font: 700 12px/1.4 var(--v-serif); letter-spacing: .08em; color: #bcaa94; }
.vc-conversation-panel .vc-chat-log { min-height: 0; max-height: min(30dvh,260px); padding: 6px 2px; gap: 14px; }
.vc-call.is-panel-open .vc-conversation-panel .vc-chat-log { flex: 1 1 auto; max-height: none; }
/* 자막은 대화내역을 열어도 영상 안에서 함께 보인다. */
/* 영상은 오른쪽 아래에 떠 있다. 바닥을 비워 두지 않으면 방금 온 말이 그 밑으로 들어가
   가려진다 — 영상 높이만큼 비워 두면 새 말이 올 때마다 그 위로 밀려 올라온다. */
.vc-call.is-history-open .vc-chat-log { padding-bottom: calc(var(--vc-pip-height, 126px) + 20px); }

.vc-chat-message { max-width: 92%; padding: 11px 14px 12px; border: 1px solid #79604c3d;
  border-radius: 3px 14px 14px 14px;
  background: linear-gradient(180deg, rgba(58,44,40,.5), rgba(28,20,22,.5)); }
.vc-chat-message.me { background: linear-gradient(180deg, rgba(216,31,42,.2), rgba(143,20,28,.16));
  border-color: rgba(240,50,63,.28); border-radius: 14px 3px 14px 14px; }
.vc-chat-message p { font-size: 15px; line-height: 1.78; }
.vc-chat-message.me p { font-size: 14px; line-height: 1.66; }
.vc-chat-message b { margin-bottom: 5px; font: 700 11px/1 var(--v-serif); letter-spacing: .1em; color: #d3ad7e; }
.vc-chat-message.me b { color: #ffb3b8; }
.vc-subtitle { position: absolute; z-index: 3; left: 0; right: 0; bottom: var(--vc-caption-bottom, 250px); height: 64px; box-sizing: border-box; margin: 0; display: flex; align-items: center; justify-content: center; padding: 8px 16px; pointer-events: none; text-align: center; background: transparent; }
.vc-subtitle > span { color: #f4ecdf; display: block; max-height: 48px; overflow: hidden; font: 400 16px/1.5 var(--v-serif); word-break: keep-all; text-shadow: 0 2px 8px #000,0 0 22px #000; }
/* 플로팅 영상과 자막은 하나의 창이다. 자막은 영상 위에 얹는다 —
   아래를 48px 떼어 두면 그만큼 영상이 줄어들어, 작은 창에서 얼굴이 반만 남았다.
   영상이 작아 글자가 배경에 묻히므로 아래에서 위로 옅어지는 어둠만 깔아 준다(불투명 띠가 아니라). */
.vc-call.has-card .vc-feed { container-type: inline-size; }
.vc-call.has-card .vc-frame { height: 100%; }
.vc-call.has-card .vc-subtitle { bottom: 0; height: auto; padding: 12px 6px 7px;
  background: linear-gradient(0deg, rgba(10,7,8,.86) 0%, rgba(10,7,8,.6) 58%, rgba(10,7,8,0) 100%);
  border-top: 0; }
.vc-call.has-card .vc-subtitle > span { width: 100%; font-size: clamp(11px,8.5cqw,15px); line-height: 1.4; max-height: 2.8em; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.vc-subtitle-word { display: inline-block; max-width: 100%; overflow-wrap: anywhere; white-space: pre-wrap; opacity: 0; }
.vc-subtitle.is-visible .vc-subtitle-word { animation: vc-word-in .48s cubic-bezier(.2,.7,.3,1) var(--word-delay,0ms) both; }
.vc-subtitle.is-timed.is-visible .vc-subtitle-word { animation: vc-timed-word-in .14s ease-out both; }
.vc-subtitle.is-leaving .vc-subtitle-word { animation: vc-word-out .6s ease var(--word-delay,0ms) both; }
@keyframes vc-timed-word-in { from { opacity: .65; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vc-word-in { from { opacity: 0; filter: blur(4px); transform: translateY(7px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
@keyframes vc-word-out { from { opacity: 1; filter: blur(0); transform: translateY(0); } to { opacity: 0; filter: blur(5px); transform: translateY(-5px); } }
@media(prefers-reduced-motion:reduce) { .vc-subtitle.is-visible .vc-subtitle-word, .vc-subtitle.is-timed.is-visible .vc-subtitle-word { animation: none; opacity: 1; } .vc-subtitle.is-leaving .vc-subtitle-word { animation: none; opacity: 0; } .vc-panel-body, .vc-call.is-panel-open .vc-subtitle { transition: none; } }

/* Shared sheet handle; content scrolls normally until a downward pull starts at its top. */
.vc-panel-handle { width: 100%; min-height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 8px 12px; border: 0; border-bottom: 1px solid #79604c22; background: transparent; color: #bcaa94; font: 10px/1.2 var(--v-sans); touch-action: none; cursor: ns-resize; }
.vc-panel-handle i { display: block; width: 36px; height: 3px; border-radius: 3px; background: #aa8965; }
/* 손님이 판을 접어 둔 사이 새 자료가 왔다(voice-call.js addCard) — 손잡이에 붉은 점만 띄운다 */
.vc-panel-handle { position: relative; }
.vc-panel-handle.has-new::after { content: ""; position: absolute; top: 6px; left: calc(50% + 24px); width: 8px; height: 8px; border-radius: 50%; background: var(--v-red-bright, #f0323f); box-shadow: 0 0 0 0 rgba(240,50,63,.6); animation: vc-new-dot 1.6s ease-out infinite; }
@keyframes vc-new-dot { 0% { box-shadow: 0 0 0 0 rgba(240,50,63,.6); } 100% { box-shadow: 0 0 0 9px rgba(240,50,63,0); } }
@media (prefers-reduced-motion: reduce) { .vc-panel-handle.has-new::after { animation: none; } }
.vc-panel-handle:focus-visible { outline: 2px solid #d3ad7e; outline-offset: -3px; }
.vc-conversation-panel { transform: translateY(var(--dismiss-y,0px)); transition: transform .22s ease; }
.vc-conversation-panel.is-pulling { transition: none; }
.vc-panel-body .vc-card, .vc-panel-body .vc-chat-log, .vc-panel-body .vc-help-list { scrollbar-width: thin; scrollbar-color: #a18360 #241b18; scrollbar-gutter: stable; }
.vc-panel-body .vc-card::-webkit-scrollbar, .vc-panel-body .vc-chat-log::-webkit-scrollbar, .vc-panel-body .vc-help-list::-webkit-scrollbar { display: block; width: 5px; }
.vc-panel-body .vc-card::-webkit-scrollbar-thumb, .vc-panel-body .vc-chat-log::-webkit-scrollbar-thumb, .vc-panel-body .vc-help-list::-webkit-scrollbar-thumb { background: #a18360; border-radius: 6px; }
.vc-panel-body .vc-card::-webkit-scrollbar-track, .vc-panel-body .vc-chat-log::-webkit-scrollbar-track, .vc-panel-body .vc-help-list::-webkit-scrollbar-track { background: #241b18; border-radius: 6px; }
.vc-panel-body .vc-card { overscroll-behavior-y: contain; }
@media(prefers-reduced-motion:reduce) { .vc-conversation-panel { transition: none; } }
/* Seoyeon introduction: a personal invitation, then the concrete consultation experience. */
.vc-landing .vc-hero { min-height: 520px; height: 78dvh; max-height: 720px; overflow: hidden; }
.vc-landing .vc-hero-copy { left: 24px; right: 24px; bottom: 44px; }
.vc-landing .vc-eyebrow { color: var(--v-red-bright); font-size: 10px; letter-spacing: .08em; }
.vc-landing .vc-name { margin-top: 6px; font-size: 24px; }
.vc-landing .vc-greet { margin-top: 10px; font-size: clamp(20px,5.4vw,23px); font-weight: 400; line-height: 1.45; letter-spacing: -.04em; color: #fff; }
.vc-landing .vc-tag:not(.vc-greet) { margin-top: 8px; font-size: 12px; line-height: 1.7; color: var(--v-ink-2); }
.vc-landing .vc-live { margin: 13px 0 0; border: 0; padding: 0; background: none; font-size: 10px; font-weight: 700; letter-spacing: .02em; color: #ffb3b8; }
.vc-landing .vc-body { border-radius: 0; border: 0; border-top: 1px solid rgba(240,50,63,.3); background: #000; padding-inline: 24px; box-shadow: 0 -1px 0 rgba(240,50,63,.12); }
/* 묻는 것 · 봐 주는 것 — 한 판. 색은 사이트 공통(검정·적색)을 그대로 쓴다. */
.vc-section-kicker { display: block; color: var(--v-red-bright); font: 700 10px/1.6 var(--v-sans); letter-spacing: .13em; }
.vc-landing .vc-sec.vc-invite > h2 { display: block; margin: 9px 0 16px; color: #fff; font: 400 clamp(20px,5.4vw,25px)/1.55 var(--v-serif); letter-spacing: -.03em; }
.vc-question-list { border-top: 1px solid var(--v-line); }
.vc-question-list p { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--v-line); color: #e8e3e0; font: 14px/1.7 var(--v-serif); word-break: keep-all; }
.vc-question-list span { display: inline-block; margin-right: 8px; color: #ff9aa1; font: 700 11px/1.4 var(--v-sans); letter-spacing: .02em; }
.vc-invite-note { margin: 14px 0 0; color: var(--v-ink-3); font-size: 12px; line-height: 1.8; word-break: keep-all; }
.vc-landing .vc-sec > h2 { flex-wrap: wrap; gap: 6px 10px; color: #fff; font-size: 19px; }
.vc-landing .vc-plan { border-radius: 5px; }
@media(max-width:360px) { .vc-landing .vc-body { padding-inline: 18px; } .vc-landing .vc-hero-copy { left: 20px; right: 20px; } }


/* 작은 화면에서도 떠 있는 영상 왼쪽에서 도움말을 닫을 수 있다. */
.vc-panel-body .vc-help-h { justify-content: flex-start; gap: 8px; }
.vc-panel-body .vc-help-h button { order: -1; flex-shrink: 0; }

.vc-end-confirm-actions { display: flex; gap: 10px; }
.vc-goodbye-box .vc-end-confirm-actions #vcEndCancel { background: transparent; border-color: rgba(255,255,255,.25); }

/* 종료가 시작되면 화면 전체를 한 겹 덮는다 — 아직 살아 있는 통화 화면과 지금 끝나는 중인
   화면을 구분한다. 누를 것은 위에 있어야 하므로 pointer-events 는 통과시킨다. */
.vc-call.is-ending::after { content: ''; position: absolute; inset: 0; z-index: 2000; pointer-events: none;
  background: rgba(0,0,0,.45); animation: vc-ending-dim .38s ease both; }
@keyframes vc-ending-dim { from { opacity: 0; } to { opacity: 1; } }
.vc-call.is-ending .vc-topright {visibility:hidden;}

/* The ending status belongs to the top edge; the consultation stays readable. */
/* 인사가 오가는 동안만 뜨는 띠라 눈에 띄어야 한다 — 사이트 적색으로 채우고 천천히 깜빡인다. */
.vc-ending-bar {position:absolute;z-index:2001;top:max(12px,env(safe-area-inset-top));left:16px;right:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 9px 9px 15px;border-radius:16px;color:#fff;pointer-events:none;font-size:13px;font-weight:700;
  border:1px solid rgba(240,50,63,.6);
  background:linear-gradient(135deg,rgba(216,31,42,.94),rgba(143,20,28,.9));
  animation:vc-ending-blink 1.15s ease-in-out infinite;}
@keyframes vc-ending-blink {
  0%,100% { opacity:1; box-shadow:0 10px 28px rgba(216,31,42,.34); }
  50% { opacity:.7; box-shadow:0 10px 34px rgba(240,50,63,.68); }
}
.vc-ending-bar small {display:block;font-size:10px;font-weight:400;color:rgba(255,255,255,.82);margin-top:3px;}
.vc-ending-bar button {pointer-events:auto;flex:none;min-height:44px;padding:9px 16px;border-radius:22px;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.94);color:#8f141c;font:inherit;font-weight:700;cursor:pointer;}
.vc-ending-bar button:focus-visible {outline:2px solid white;outline-offset:3px;}
@media (prefers-reduced-motion: reduce) {
  .vc-call.is-ending::after { animation: none; }
  .vc-ending-bar { animation: none; box-shadow: 0 10px 28px rgba(216,31,42,.34); }
}
.vc-hist-top {cursor:pointer;list-style:revert;min-height:44px;gap:8px;}
.vc-hist-top b {font-size:12px;}.vc-hist-top span {font-size:11px;white-space:nowrap;}
.vc-history-note {font-size:11px;line-height:1.7;color:#a898a2;}
.vc-history-transcript {max-height:300px;overflow:auto;overscroll-behavior:contain;font-size:12px;line-height:1.8;}
.vc-history-transcript p {padding:9px 12px;border-radius:10px;background:#ffffff06;white-space:pre-wrap;overflow-wrap:anywhere;}
.vc-history-transcript .me {margin-left:20px;background:#d2ad8a12;}
.vc-past-calls {padding:0 12px;color:#d6c4cd;font-size:12px;}
.vc-past-calls>summary {padding:10px 0;cursor:pointer;min-height:24px;}
.vc-past-list {max-height:35dvh;overflow:auto;overscroll-behavior:contain;}
.vc-history-more {display:block;margin:12px auto;min-height:44px;}

/* 첫 통화 무료 — 히어로 알약과 로그인 판에서 같은 말을 한다. 흐린 태그라인 결이면 아무도 못 본다. */
.vc-landing .vc-live.is-free { margin-top: 11px; padding: 6px 12px 6px 10px; border: 1px solid rgba(240,50,63,.6);
  border-radius: 999px; background: rgba(216,31,42,.24); font-size: 12px; letter-spacing: 0; color: #fff;
  box-shadow: 0 0 18px rgba(216,31,42,.28); }
.vc-freebox { margin: 10px 0 2px; padding: 11px 13px; border-radius: 4px; border: 1px solid rgba(240,50,63,.42);
  background: rgba(216,31,42,.1); }
.vc-freebox em { display: block; font-style: normal; font-family: var(--v-serif); font-size: 17px; font-weight: 700; color: #fff; }
.vc-freebox span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.65; color: var(--v-ink-2); word-break: keep-all; }
.vc-landing .vc-hear { top: 44%; }   /* 가운데 원은 얼굴 쪽으로 조금 올린다 — 문구와 안 겹치게 */

/* 첫 장 중간의 서연 목소리 카드 — 들어보기 단추 하나, 화면을 누르면 멈춤. */
.vc-voicecard { margin-top: 30px; padding: 18px 16px 16px; border: 1px solid rgba(214,170,110,.22); border-radius: 18px;
  background: radial-gradient(120% 70% at 50% 0%, rgba(170,40,40,.16), transparent 70%), rgba(255,255,255,.02); }
.vc-voicecard-h { margin: 6px 0 14px; font-family: var(--v-serif); font-size: 21px; line-height: 1.45; font-weight: 700; color: #f5ead8; word-break: keep-all; }
.vc-voicecard-media { position: relative; aspect-ratio: 4 / 5; max-height: 460px; border-radius: 14px; overflow: hidden; background: #0b0808; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vc-voicecard-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.vc-voicecard-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.45)); pointer-events: none; }
.vc-voicecard-play { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 10px; border: 0; background: none; color: #fff; cursor: pointer; }
.vc-voicecard-play[hidden] { display: none; }
.vc-voicecard-ring { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: rgba(12,5,5,.62); border: 1px solid rgba(255,220,190,.6);
  box-shadow: 0 0 0 8px rgba(255,255,255,.07), 0 10px 30px rgba(0,0,0,.45); }
.vc-voicecard-ring svg { width: 30px; height: 30px; margin-left: 4px; fill: #fff; }
.vc-voicecard-label { white-space: nowrap; padding: 5px 13px; border-radius: 999px; background: rgba(0,0,0,.5); font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; }
.vc-voicecard-line { margin: 14px 2px 0; font-family: var(--v-serif); font-size: 16px; line-height: 1.7; color: #eadfcf; word-break: keep-all; }
.vc-voicecard-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; counter-reset: vcstep; }
.vc-voicecard-steps li { counter-increment: vcstep; display: grid; grid-template-columns: 24px 1fr; column-gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }
.vc-voicecard-steps li::before { content: counter(vcstep); grid-row: span 2; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(224,50,63,.18); color: #ff8d95; font-size: 12px; font-weight: 700; }
.vc-voicecard-steps b { color: #f3e7d6; font-size: 14px; }
.vc-voicecard-steps span { color: var(--v-ink-3); font-size: 12.5px; line-height: 1.5; word-break: keep-all; }
.vc-voicecard-note { margin: 12px 2px 0; color: var(--v-ink-3); font-size: 12.5px; line-height: 1.7; word-break: keep-all; }
.vc-voicecard-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; margin-top: 14px; border: 0; border-radius: 14px;
  background: linear-gradient(180deg, #e0323f, #a91f2a); color: #fff; font-size: 15.5px; font-weight: 700; box-shadow: 0 10px 24px rgba(200,30,40,.28); cursor: pointer; }
.vc-voicecard-cta svg { width: 18px; height: 18px; fill: #fff; }
.vc-voicecard-cta:active { transform: scale(.98); }

/* ───── 명식 인포그래픽(voice-cards.js infographic) + 명식판 글씨 키움 ───── */
.vc-myeongsik .vc-record-title { font-size: 19px; }
.vc-myeongsik .vc-reading-person { font-size: 14px; margin-bottom: 14px; }
.vc-myeongsik .vc-reading { font-size: 15.5px; line-height: 1.85; }
.vc-myeongsik .vc-reading .vc-reading-lead { font-size: 19.5px; line-height: 1.6; }
.vc-myeongsik .vc-reading h4 { font-size: 14px; margin-bottom: 6px; color: #d7b98a; }
.vc-myeongsik .vc-record-basis, .vc-myeongsik .vc-record-basis p { font-size: 14px; }
.vc-myeongsik > .vc-pillars { margin: 0 0 14px; }
.vc-myeongsik > .vc-pillars .vc-pillar .g { font-size: 36px; }
.vc-myeongsik > .vc-pillars .vc-pillar .l, .vc-myeongsik > .vc-pillars .vc-pillar .k { font-size: 12px; }
.vc-ig { display: grid; gap: 12px; margin: 0 0 20px; }
.vc-ig-map, .vc-ig-block { padding: 14px; border-radius: 12px; background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.08); }
.vc-ig-map-h, .vc-ig-label { margin: 0 0 10px; color: #d7b98a; font-size: 13.5px; font-weight: 700; letter-spacing: .02em; }
.vc-ig-label b { margin-left: 6px; color: #fff; font-size: 15px; }
.vc-ig-map-row { display: flex; align-items: center; gap: 14px; }
.vc-ig-donut { flex: 0 0 auto; width: min(38%, 132px); height: auto; }
.vc-ig-donut circle { transition: stroke-width .2s; }
.vc-ig-day { font-family: var(--v-serif); font-size: 30px; font-weight: 700; }
.vc-ig-daysub { font-size: 10px; fill: rgba(255,255,255,.6); }
.vc-ig-legend { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.vc-ig-legend li { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.vc-ig-legend li i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; }
.vc-ig-legend li span { flex: 1 1 auto; }
.vc-ig-legend li small { margin-left: 5px; color: var(--v-ink-3); font-size: 12px; }
.vc-ig-legend li b { font-size: 16px; font-variant-numeric: tabular-nums; }
.vc-ig-legend li em { flex: 0 0 auto; padding: 2px 7px; border-radius: 999px; background: #e8c878; color: #1b140b; font: 700 11px/1.4 var(--v-sans); font-style: normal; }
.vc-ig-legend li em.is-empty { background: rgba(255,255,255,.1); color: rgba(255,255,255,.6); }
.vc-ig-legend li.is-none span, .vc-ig-legend li.is-none b { color: var(--v-ink-3); }
.vc-ig-legend li.is-yong span { font-weight: 700; }
.vc-ig-gauge { position: relative; height: 10px; margin: 4px 2px 6px; border-radius: 999px; background: linear-gradient(90deg, #6bb6ff, #e8c878 50%, #ff6b6b); }
.vc-ig-gauge i { position: absolute; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: #fff; border: 3px solid #140c0e; box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0,0,0,.6); }
.vc-ig-ends { display: flex; justify-content: space-between; color: var(--v-ink-3); font-size: 12px; }
.vc-ig-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.vc-ig-chip { padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.82); font-size: 13px; }
.vc-ig-chip.is-main { background: #d81f2a; color: #fff; font-weight: 700; }
.vc-ig-road { display: flex; gap: 6px; margin: 0; padding: 2px 0 4px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.vc-ig-road::-webkit-scrollbar { display: none; }
.vc-ig-road li { position: relative; flex: 0 0 auto; min-width: 54px; padding: 8px 6px 7px; border-radius: 9px; text-align: center; background: rgba(255,255,255,.04); border-top: 3px solid var(--el); }
.vc-ig-road li b { display: block; font-family: var(--v-serif); font-size: 16px; }
.vc-ig-road li small { color: var(--v-ink-3); font-size: 11.5px; }
.vc-ig-road li.is-past { opacity: .45; }
.vc-ig-road li.is-now { background: rgba(216,31,42,.22); box-shadow: inset 0 0 0 1.5px #f0323f; }
.vc-ig-road li em { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 0 6px; border-radius: 999px; background: #f0323f; color: #fff; font: 700 10px/1.6 var(--v-sans); font-style: normal; }
.vc-ig { grid-template-columns: minmax(0, 1fr); }
.vc-ig > * { min-width: 0; }
.vc-ig-road li em { white-space: nowrap; }
/* 판이 열리면 세 판 모두 화면 맨 위까지 올라온다 — 남은 시간 알약은 손잡이 줄 오른쪽에 겹쳐 뜬다.
   명식판만 올라오게 두었더니 탭을 바꿀 때마다 판이 56px 씩 들썩였고, 뭘 봐줄까·대화내역만 작아 보였다. */
.vc-call.is-panel-open.has-card .vc-bottom { top: max(4px, env(safe-area-inset-top)); }
.vc-call.is-panel-open .vc-panel-handle span { display: none; }
.vc-call.is-panel-open .vc-panel-handle { min-height: 48px; }
/* ───── 통화 화면 가볍게 — 재생 중인 영상 위 흐림은 폰이 매 프레임 다시 계산한다 ─────
   흐림 반경을 줄이고(비용은 반경에 비례해 커진다), 판이 열려 영상이 작게 떠 있을 때는
   흐림·잿불·필름 결을 아예 끈다(판이 거의 불투명해 흐림이 보이지도 않는다). */
.vc-call .vc-help, .vc-call .vc-topright, .vc-call .vc-deck-toggle, .vc-call .vc-navbtn, .vc-call .vc-card, .vc-call .vc-cc, .vc-call .vc-controls-toggle, .vc-call .vc-dock,.vc-call .vc-ask, .vc-call .vc-type, .vc-call .vc-toast, .vc-call .vc-conversation-panel { -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; }
.vc-call.is-panel-open .vc-help, .vc-call.is-panel-open .vc-topright, .vc-call.is-panel-open .vc-deck-toggle, .vc-call.is-panel-open .vc-navbtn, .vc-call.is-panel-open .vc-card, .vc-call.is-panel-open .vc-cc, .vc-call.is-panel-open .vc-controls-toggle, .vc-call.is-panel-open .vc-dock,.vc-call.is-panel-open .vc-ask, .vc-call.is-panel-open .vc-type, .vc-call.is-panel-open .vc-toast, .vc-call.is-panel-open .vc-conversation-panel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.vc-call.is-panel-open .vc-embers, .vc-call.is-panel-open .vc-grain { display: none; }
.vc-grain { will-change: transform; contain: strict; }

/* 판 넘기기 — 끄는 동안은 전환 없이 손가락을 바로 따르고, 놓으면 짧게 돌아오거나 들어온다 */
.vc-panel-body, .vc-panel-body * { touch-action: pan-y pinch-zoom; }
.vc-panel-body { opacity: var(--swipe-o, 1); will-change: transform; transition: transform .18s cubic-bezier(.2,.8,.2,1), opacity .18s ease; }
.vc-panel-body.is-swiping { transition: none; }

/* ───── 명식판 쉬운 풀이 (2026-09-18) ───── */
.vc-ig-plain { margin: 10px 0 0; font-size: calc(13px * var(--cs, 1)); line-height: 1.6; color: rgba(255,255,255,.72); word-break: keep-all; }
.vc-ig-plain b { color: #f3d7a4; font-weight: 700; }
.vc-ig-types { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.vc-ig-types li { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); }
.vc-ig-types li.is-main { background: rgba(216,31,42,.16); border-color: rgba(240,80,90,.45); }
.vc-ig-types b { font-size: calc(14.5px * var(--cs, 1)); color: #fff; }
.vc-ig-types span { font-size: calc(12.5px * var(--cs, 1)); line-height: 1.5; color: rgba(255,255,255,.72); word-break: keep-all; }
.vc-ig-road li .vc-ig-roadel { display: block; margin-top: 1px; font-style: normal; font-size: 11px; color: rgba(255,255,255,.62); }
.vc-plain-inline { display: block; margin-top: 2px; font-family: var(--v-sans); font-size: .82em; font-weight: 500; color: rgba(255,255,255,.6); }
.vc-plain-box { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(232,200,120,.07); border: 1px solid rgba(232,200,120,.22); }
.vc-plain-h { margin-bottom: 8px; color: #e8c878; font-size: calc(13px * var(--cs, 1)); font-weight: 700; }
.vc-plain-box dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; }
.vc-plain-box dt { font-weight: 700; color: #fff; font-size: calc(13px * var(--cs, 1)); white-space: nowrap; }
.vc-plain-box dd { margin: 0; color: rgba(255,255,255,.74); font-size: calc(13px * var(--cs, 1)); line-height: 1.5; word-break: keep-all; }

/* ───── 통화 화면 가볍게 (2026-09-19) ─────
   · 자막 낱말의 blur 필터 애니메이션 — 낱말마다 필터를 다시 그려 폰에서 끊겼다. 투명도·이동만 쓴다.
   · 영상 위 요소들의 backdrop blur — 영상이 매 프레임 바뀌니 요소마다 흐림을 매번 다시 계산했다.
     통화 중에는 흐림 없이 조금 더 짙은 바탕으로 같은 가독성을 낸다. */
@keyframes vc-word-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vc-word-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-5px); } }
.vc-call .vc-help, .vc-call .vc-topright, .vc-call .vc-deck-toggle, .vc-call .vc-navbtn, .vc-call .vc-card, .vc-call .vc-cc, .vc-call .vc-controls-toggle, .vc-call .vc-dock,.vc-call .vc-ask, .vc-call .vc-type, .vc-call .vc-toast, .vc-call .vc-conversation-panel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.vc-call .vc-dock:not(.is-collapsed) { background: rgba(14,8,9,.9); }
.vc-call video.vc-frame { --lvl: 0; }

/* 입 맞추기: 말하는 얼굴 ↔ 다문 얼굴은 빨리 바꾼다(0.55초 크로스페이드면 문장 사이 쉼이 다 뭉개진다) */
.vc-frame[data-face="talk"], .vc-frame[data-face="idle"] { transition-duration: .14s; }
/* 소리 크기 패널 — 단추 줄 위에 뜬다(글로 말하기 줄과 같은 자리) */
.vc-volbox { width: 100%; max-width: 420px; margin: 0 auto 10px; padding: 12px 14px 10px; border-radius: 18px; background: rgba(14,8,9,.92); border: 1px solid rgba(255,255,255,.14); box-sizing: border-box; }
.vc-volbox label { display: grid; grid-template-columns: 76px 1fr 30px; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 13px; color: rgba(255,255,255,.86); }
.vc-volbox input[type=range] { width: 100%; accent-color: #f0323f; }
.vc-volbox b { font-size: 12px; text-align: right; color: rgba(255,255,255,.62); font-variant-numeric: tabular-nums; }
.vc-volbox p { margin: 2px 0 0; font-size: 11.5px; color: rgba(255,255,255,.5); }

/* 입 여닫기 전환 — 0.14초는 끊겨 보였다. 0.22초로, 확대는 천천히 */
.vc-frame[data-face="talk"], .vc-frame[data-face="idle"] { transition: opacity .22s ease-in-out, transform 1.2s ease, object-position .38s cubic-bezier(.22,.61,.36,1); }

/* 눌러서 뜻 보기 — 카드 안 한 줄 풀이 */
[data-tip] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
[data-tip]:focus-visible { outline: 1px solid rgba(255,207,122,.7); outline-offset: 2px; }
.is-tip { box-shadow: 0 0 0 1px #ffcf7a inset; border-radius: 6px; }
.vc-tipword { border-bottom: 1px dotted rgba(255,255,255,.5); }
.vc-tipbox { margin: 8px 0 2px; padding: 9px 11px; border-radius: 10px; background: rgba(255,207,122,.1); border: 1px solid rgba(255,207,122,.28); font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.88); word-break: keep-all; }
.vc-tipbox b { display: block; margin-bottom: 2px; color: #ffcf7a; font-size: 12.5px; }
.vc-tiphint { margin: 4px 0 0; font-size: 11px; color: rgba(255,255,255,.42); text-align: center; }
.vc-ig-map-h small, .vc-ig-label small { font-weight: 400; font-size: 11px; color: rgba(255,255,255,.42); }

/* ───── 도구 카드들을 명식판과 같은 모양으로 (voice-cards.js: luck·elements·today·dream·name) ───── */
.vc-ig-after { margin-top: 20px; }
.vc-ig-block .vc-els { height: auto; }  /* 고정 92px 이면 숫자·막대·이름이 넘쳐 아래 글과 겹친다 */
.vc-els + .vc-ig-plain { margin-top: 12px; }
.vc-card .cap + .vc-talisman { margin-top: 10px; }
/* 간지 두 글자 — 올해의 글자·오늘의 글자 */
.vc-gz-row { display: flex; align-items: center; gap: 12px; }
.vc-gz-han { flex: 0 0 auto; display: flex; gap: 6px; }
.vc-gz-han span { display: flex; flex-direction: column; align-items: center; min-width: 54px; padding: 8px 4px 7px; border-radius: 10px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.vc-gz-han b { font-family: var(--v-serif); font-size: calc(40px * var(--cs, 1)); font-weight: 700; line-height: 1.1; }
.vc-gz-han small { margin-top: 3px; font-size: 11px; color: rgba(255,255,255,.6); white-space: nowrap; }
.vc-gz-gods { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.vc-gz-gods li { display: flex; flex-direction: column; gap: 1px; word-break: keep-all; overflow-wrap: anywhere; }
.vc-gz-gods small { font-size: 11px; color: rgba(255,255,255,.5); }
.vc-gz-gods b { font-size: calc(15.5px * var(--cs, 1)); color: #fff; }
.vc-gz-gods span { font-size: calc(12.5px * var(--cs, 1)); line-height: 1.45; color: rgba(255,255,255,.72); }
/* 오늘 곁에 두면 좋은 것 — 전통 상징 칸 */
.vc-code { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.vc-code li { display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); min-width: 0; }
.vc-code li.is-color { grid-column: 1 / -1; }
.vc-code small { font-size: 11px; color: rgba(255,255,255,.5); }
.vc-code b { display: flex; align-items: center; gap: 7px; font-size: calc(14px * var(--cs, 1)); font-weight: 700; color: #fff; word-break: keep-all; overflow-wrap: anywhere; }
.vc-swatch { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.18); }
/* 해몽 — 상징마다 한 블록 */
.vc-dream-sym .vc-ig-label { display: flex; align-items: center; gap: 8px; color: #fff; font-size: calc(15px * var(--cs, 1)); }
.vc-dream-no { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(216,31,42,.22); color: #ff8d95; font-size: 12px; }
.vc-dream-lead { margin: 0; font-family: var(--v-serif); font-size: calc(16px * var(--cs, 1)); font-weight: 700; line-height: 1.6; color: #f3e7d6; word-break: keep-all; }
.vc-dream-more { margin: 8px 0 0; padding: 0 0 0 16px; font-size: calc(13px * var(--cs, 1)); line-height: 1.6; color: rgba(255,255,255,.7); word-break: keep-all; }
.vc-dream-more li + li { margin-top: 2px; }
.vc-dream-row { display: flex; flex-direction: column; gap: 2px; margin-top: 9px; padding: 9px 11px; border-radius: 10px; word-break: keep-all; }
.vc-dream-row b { font-size: 12px; }
.vc-dream-row span { font-size: calc(13.5px * var(--cs, 1)); line-height: 1.55; color: rgba(255,255,255,.88); }
.vc-dream-row.is-do { background: rgba(232,200,120,.08); border: 1px solid rgba(232,200,120,.22); }
.vc-dream-row.is-do b { color: #e8c878; }
.vc-dream-row.is-luck { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.vc-dream-row.is-luck b { color: rgba(255,255,255,.55); }
/* 이름 — 소리 오행 흐름과 사격 */
.vc-name-han { margin-left: 4px; font-size: .85em; color: rgba(255,255,255,.7); }
.vc-name-sound { display: flex; align-items: center; gap: 4px; }
.vc-name-ch { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 8px 2px 7px; border-radius: 10px;
  background: rgba(255,255,255,.05); border-top: 3px solid var(--el); }
.vc-name-ch b { font-family: var(--v-serif); font-size: calc(26px * var(--cs, 1)); line-height: 1.15; }
.vc-name-ch small { margin-top: 2px; font-size: 11.5px; color: rgba(255,255,255,.62); white-space: nowrap; }
.vc-name-rel { flex: 0 0 auto; padding: 2px 6px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 700; white-space: nowrap; }
.vc-name-rel.is-good, .vc-suri li.is-good em { background: rgba(110,231,160,.16); color: #8ff0b6; }
.vc-name-rel.is-bad, .vc-suri li.is-bad em { background: rgba(255,107,107,.16); color: #ff9a9a; }
.vc-name-rel.is-same { background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); }
.vc-name-yong { margin: 10px 0 0; padding: 9px 11px; border-radius: 10px; background: rgba(232,200,120,.08); border: 1px solid rgba(232,200,120,.24);
  font-size: calc(13.5px * var(--cs, 1)); line-height: 1.55; color: #f3d7a4; word-break: keep-all; }
.vc-suri { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.vc-suri li { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 9px 10px 10px; border-radius: 10px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); border-top: 3px solid rgba(255,255,255,.2); }
.vc-suri li.is-good { border-top-color: #6ee7a0; }
.vc-suri li.is-bad { border-top-color: #ff6b6b; }
.vc-suri-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.vc-suri-top small { font-size: 11px; color: rgba(255,255,255,.55); white-space: nowrap; }
.vc-suri em { flex: 0 0 auto; padding: 1px 7px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 700; background: rgba(255,255,255,.08); }
.vc-suri b { font-family: var(--v-serif); font-size: calc(22px * var(--cs, 1)); color: #fff; line-height: 1.2; }
.vc-suri b i { margin-left: 2px; font-style: normal; font-family: var(--v-sans); font-size: 12px; color: rgba(255,255,255,.6); }
.vc-suri span { font-size: calc(13.5px * var(--cs, 1)); font-weight: 700; color: #f3e7d6; }
.vc-suri p { margin: 2px 0 0; font-size: calc(12px * var(--cs, 1)); line-height: 1.45; color: rgba(255,255,255,.66); word-break: keep-all; }
/* 이름 풀이 맨 위 요약 — 사격 길흉 · 소리 흐름 · 용신 */
.vc-name-verdict { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.vc-name-verdict li { min-width: 0; padding: 8px 9px; border-radius: 10px; text-align: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.vc-name-verdict small { display: block; font-size: 11px; color: rgba(255,255,255,.5); white-space: nowrap; }
.vc-name-verdict b { display: block; margin-top: 2px; font-size: calc(13.5px * var(--cs, 1)); color: #f3e7d6; white-space: nowrap; }
.vc-name-verdict li.is-good b { color: #8ff0b6; }
.vc-name-verdict li.is-bad b { color: #ff9a9a; }
/* 글자별 표 — 한자·획수·소리 오행·음양 */
.vc-name-table { width: 100%; border-collapse: collapse; font-size: calc(13.5px * var(--cs, 1)); text-align: center; }
.vc-name-table th { padding: 0 0 6px; font-size: 11px; font-weight: 400; color: rgba(255,255,255,.45); }
.vc-name-table td { padding: 7px 2px; border-top: 1px solid rgba(255,255,255,.07); color: #f3e7d6; }
.vc-name-table td.han { font-family: var(--v-serif); font-size: calc(19px * var(--cs, 1)); }
/* 궁합판 */
.vc-compat-verdict { margin: 0 0 12px; }
.vc-compat-verdict b { display: block; font-family: var(--v-serif); font-size: calc(21px * var(--cs, 1)); color: #f3d7a4; }
.vc-compat-verdict small { display: block; margin-top: 2px; font-size: calc(13px * var(--cs, 1)); color: rgba(255,255,255,.66); }
.vc-compat-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; margin: 0 0 14px; }
.vc-compat-side { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 10px 6px; border-radius: 12px; text-align: center;
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.09); border-top: 3px solid var(--el); }
.vc-compat-side small { font-size: 11.5px; color: rgba(255,255,255,.55); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-compat-side b.han { font-family: var(--v-serif); font-size: calc(34px * var(--cs, 1)); line-height: 1.1; color: var(--el); }
.vc-compat-side span { font-size: calc(13px * var(--cs, 1)); font-weight: 700; color: #f3e7d6; }
.vc-compat-side em { font-style: normal; font-size: 11.5px; color: rgba(255,255,255,.6); white-space: nowrap; }
.vc-compat-link { display: flex; flex-direction: column; align-items: center; gap: 1px; max-width: 76px; padding: 5px 7px; border-radius: 10px; text-align: center; word-break: keep-all; }
.vc-compat-link b { font-size: 12px; }
.vc-compat-link small { font-size: 10.5px; opacity: .8; }
.vc-compat-link.is-good { background: rgba(110,231,160,.14); color: #8ff0b6; }
.vc-compat-link.is-bad { background: rgba(255,107,107,.14); color: #ff9a9a; }
.vc-compat-rows { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: calc(13.5px * var(--cs, 1)); }
.vc-compat-rows dt { color: #d7b98a; font-weight: 700; white-space: nowrap; }
.vc-compat-rows dt small { display: block; font-weight: 400; font-size: 10.5px; color: rgba(255,255,255,.45); }
.vc-compat-rows dd { margin: 0; color: #f3e7d6; line-height: 1.5; word-break: keep-all; }
.vc-compat-rows dd small { color: rgba(255,255,255,.6); }
.vc-compat-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: calc(13.5px * var(--cs, 1)); line-height: 1.5; word-break: keep-all; }
.vc-compat-list li { position: relative; padding-left: 16px; color: #f3e7d6; }
.vc-compat-list li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 6px; height: 6px; border-radius: 50%; }
.vc-compat-list.is-good li::before { background: #6ee7a0; }
.vc-compat-list.is-bad li::before { background: #ff6b6b; }
.vc-compat-list li.is-empty { color: rgba(255,255,255,.5); }
.vc-compat-list li.is-empty::before { background: rgba(255,255,255,.3); }

/* ───── 타로 뽑기판 · 타로 결과 (voice-cards.js tarotSheet · tarot) ─────
   뒷면은 그림 없이 CSS 로만 — 스물두 장을 한 판에 깔아야 해서 무늬가 가벼워야 한다. */
.vc-tarot-sheet { display: grid; gap: 12px; }
.vc-tarot-ask { margin: 0; font-size: calc(14px * var(--cs, 1)); color: #f3e7d6; text-align: center; word-break: keep-all; }
.vc-tarot-ask b { color: #ffcf7a; }
.vc-tarot-deck { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
.vc-tarot-back { position: relative; aspect-ratio: 2 / 3; min-width: 0; padding: 0; border-radius: 6px; cursor: pointer;
  border: 1px solid rgba(215,185,138,.45);
  background: radial-gradient(circle at 50% 50%, rgba(255,207,122,.28) 0 14%, transparent 15%),
    repeating-linear-gradient(45deg, rgba(215,185,138,.14) 0 2px, transparent 2px 7px),
    linear-gradient(160deg, #2a1a2e, #120b14);
  box-shadow: 0 4px 10px rgba(0,0,0,.45); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.vc-tarot-back i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal;
  font-size: 13px; font-weight: 800; color: #1a1014; }
.vc-tarot-back[aria-pressed="true"] { transform: translateY(-5px); border-color: #ffcf7a;
  box-shadow: 0 0 0 2px rgba(255,207,122,.55), 0 8px 18px rgba(0,0,0,.5);
  background: radial-gradient(circle at 50% 50%, #ffcf7a 0 30%, transparent 31%),
    repeating-linear-gradient(45deg, rgba(255,207,122,.22) 0 2px, transparent 2px 7px),
    linear-gradient(160deg, #3a2233, #1a0f18); }
.vc-tarot-back:disabled { cursor: default; opacity: .55; }
.vc-tarot-back[aria-pressed="true"]:disabled { opacity: 1; }
.vc-tarot-back:focus-visible { outline: 2px solid #ffcf7a; outline-offset: 2px; }
.vc-tarot-sheet .vc-card-tools { justify-content: center; }
.vc-tarot-sheet .vc-mini:disabled { opacity: .45; cursor: default; }
.vc-tarot-spread { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 10px; }
.vc-tarot-pick { display: grid; grid-template-columns: 74px minmax(0, 1fr); grid-template-areas: "pos pos" "face text"; gap: 6px 12px;
  padding: 12px; border-radius: 12px; background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.08); }
.vc-tarot-pos { grid-area: pos; color: #d7b98a; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.vc-tarot-face { grid-area: face; aspect-ratio: 2 / 3; border-radius: 6px; padding: 4px; box-sizing: border-box;
  background: linear-gradient(170deg, #f6ead2, #d9c29a); box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.vc-tarot-face > div { height: 100%; box-sizing: border-box; border: 1px solid rgba(90,60,30,.45); border-radius: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 6px 2px; text-align: center; color: #3a2616; }
.vc-tarot-face em { font-style: normal; font-family: var(--v-serif); font-size: 12px; font-weight: 700; }
.vc-tarot-face b { font-family: var(--v-serif); font-size: 14px; line-height: 1.2; word-break: keep-all; }
.vc-tarot-face i { font-style: normal; font-size: 8.5px; line-height: 1.2; opacity: .75; }
.vc-tarot-pick.is-reversed .vc-tarot-face > div { transform: rotate(180deg); }
.vc-tarot-text { grid-area: text; min-width: 0; }
.vc-tarot-text b { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: calc(15px * var(--cs, 1)); color: #fff; }
.vc-tarot-text b span { font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: rgba(110,231,160,.16); color: #8ff0b6; }
.vc-tarot-pick.is-reversed .vc-tarot-text b span { background: rgba(255,107,107,.16); color: #ff9a9a; }
.vc-tarot-text p { margin: 6px 0 0; font-size: calc(13.5px * var(--cs, 1)); line-height: 1.6; color: #f3e7d6; word-break: keep-all; }

/* ───── 좋은 날 (voice-cards.js dates) — 오늘부터 한 달 달력 ───── */
.vc-dates-week, .vc-dates-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.vc-dates-week { margin-bottom: 4px; font-size: 11px; color: rgba(255,255,255,.5); }
.vc-dates-week span:first-child { color: #ff9a9a; }
.vc-dates-grid span { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 34px;
  border-radius: 8px; background: rgba(255,255,255,.04); color: rgba(255,255,255,.8); }
.vc-dates-grid span.is-pad { background: none; }
.vc-dates-grid b { font-size: 13px; font-weight: 700; }
.vc-dates-grid small { font-size: 9px; line-height: 1; color: rgba(255,255,255,.55); }
.vc-dates-grid .is-good { background: rgba(110,231,160,.2); color: #b8f7cf; box-shadow: inset 0 0 0 1px rgba(110,231,160,.55); }
.vc-dates-grid .is-avoid { background: rgba(255,107,107,.14); color: #ffb0b0; }
.vc-dates-grid .is-today::after { content: ""; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: #ffcf7a; }
.vc-dates-key { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 11.5px; color: rgba(255,255,255,.6); }
.vc-dates-key i { width: 10px; height: 10px; border-radius: 3px; }
.vc-dates-key i.is-good { background: rgba(110,231,160,.55); }
.vc-dates-key i.is-avoid { margin-left: 8px; background: rgba(255,107,107,.45); }
.vc-dates-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.vc-dates-list li { padding-left: 12px; border-left: 3px solid rgba(255,255,255,.2); }
.vc-dates-list.is-good li { border-left-color: #6ee7a0; }
.vc-dates-list.is-bad li { border-left-color: #ff6b6b; }
.vc-dates-list li.is-empty { border-left-color: rgba(255,255,255,.2); color: rgba(255,255,255,.5); font-size: 13px; }
.vc-dates-list b { display: flex; align-items: baseline; gap: 6px; font-size: calc(14.5px * var(--cs, 1)); color: #fff; }
.vc-dates-list b span { font-size: 11.5px; font-weight: 400; color: rgba(255,255,255,.55); }
.vc-dates-list p { margin: 3px 0 0; font-size: calc(13px * var(--cs, 1)); line-height: 1.5; color: #f3e7d6; word-break: keep-all; }

/* ───── 열두 달 흐름 (voice-cards.js months) ───── */
.vc-months { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.vc-months li { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 9px 9px 10px; border-radius: 10px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.07); }
.vc-months li.is-up { background: rgba(110,231,160,.12); border-color: rgba(110,231,160,.4); }
.vc-months li.is-care { background: rgba(255,107,107,.1); border-color: rgba(255,107,107,.35); }
.vc-months li.is-now { box-shadow: 0 0 0 2px rgba(255,207,122,.6); }
.vc-month-top { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }
.vc-month-top b { font-size: calc(15px * var(--cs, 1)); color: #fff; }
.vc-month-top b small { display: block; font-size: 9.5px; font-weight: 400; color: rgba(255,255,255,.5); }
.vc-month-top em { font-style: normal; font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.55); white-space: nowrap; }
.vc-months li.is-up .vc-month-top em { color: #8ff0b6; }
.vc-months li.is-care .vc-month-top em { color: #ff9a9a; }
.vc-month-ganji { font-family: var(--v-serif); font-size: 12px; color: #d7b98a; }
.vc-month-key { font-size: 11.5px; color: #f3e7d6; word-break: keep-all; }
@media (max-width: 350px) {
  .vc-months { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .vc-tarot-back { transition: none; } }

/* ───── 그림 크게 보기(voice-cards.js openZoom) ───── */
.vc-zoom { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; color: inherit; font: inherit; }
.vc-zoom:focus-visible { outline: 2px solid #ffcf7a; outline-offset: 2px; border-radius: 4px; }
.vc-zoom-hint { position: absolute; right: 6px; bottom: 6px; padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.66); color: #fff; font-size: 11px; font-weight: 700; pointer-events: none; }
.vc-zoom-hint { display: flex; align-items: center; gap: 4px; }
.vc-zoom-hint svg { width: 13px; height: 13px; fill: #fff; }
.vc-zoom-hint em { font-style: normal; }
/* 관상·손금 썸네일은 84px 라 글자는 빼고 표시만 둔다 */
.vc-shot .vc-zoom-hint { right: 4px; bottom: 4px; padding: 4px; }
.vc-shot .vc-zoom-hint em { display: none; }
.vc-viewer { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  padding: calc(max(10px, env(safe-area-inset-top)) + 58px) 12px calc(max(12px, env(safe-area-inset-bottom)) + 12px);
  background: rgba(0,0,0,.94); touch-action: pinch-zoom; }
.vc-viewer-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 4px; }
.vc-viewer-bar { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; justify-content: flex-end; gap: 8px; }
.vc-viewer-dl, .vc-viewer-x { height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); background: rgba(40,30,34,.92); color: #fff; cursor: pointer; }
.vc-viewer-dl { display: flex; align-items: center; gap: 6px; padding: 0 14px; font: 700 14px/1 var(--v-sans); }
.vc-viewer-dl svg { width: 18px; height: 18px; fill: #fff; }
.vc-viewer-x { width: 44px; padding: 0; font-size: 26px; line-height: 1; }
.vc-viewer-dl:focus-visible, .vc-viewer-x:focus-visible { outline: 2px solid #ffcf7a; outline-offset: 2px; }
.vc-viewer-msg { position: absolute; left: 16px; right: 16px; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 8px); margin: 0; padding: 10px 12px; border-radius: 12px;
  background: rgba(30,22,26,.95); color: #fff; font-size: 13.5px; line-height: 1.5; text-align: center; word-break: keep-all; }

/* ───── 비회원 체험(로그인 없이 무료 한 번) ─────
   체험을 다 썼거나 시간을 담으려 하면 아래 전화 단추 자리에 로그인 안내가 대신 뜬다. */
.vc-login-ask { margin: 0 0 2px; padding: 14px 14px 13px; border-radius: 6px; border: 1px solid rgba(240,50,63,.42);
  background: linear-gradient(180deg, rgba(216,31,42,.2), rgba(20,12,14,.94)); box-shadow: 0 14px 34px rgba(0,0,0,.55); }
.vc-login-ask p { margin: 0 26px 0 0; font-size: 13.5px; font-weight: 700; line-height: 1.6; color: #fff; word-break: keep-all; }
.vc-login-ask .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.vc-login-ask .vc-login-btn { height: 46px; font-size: 13.5px; }
.vc-login-ask-x { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--v-ink-2); font-size: 20px; line-height: 1; cursor: pointer; }
.vc-landing.is-asking .vc-body { padding-bottom: 250px; }
.vc-login-trial .vc-freebox em { font-size: 18px; }
/* 통화 중 한 줄 알림 — 체험 안내는 두 줄까지 간다. 화면 폭을 넘지 않게 둔다. */
.vc-lowpill.is-trial { width: max-content; max-width: calc(100% - 40px); box-sizing: border-box; padding: 8px 14px; border-radius: 16px;
  background: rgba(20,12,14,.9); border: 1px solid rgba(240,50,63,.55); box-shadow: 0 8px 24px rgba(0,0,0,.5); text-align: center; line-height: 1.45; word-break: keep-all; }
/* 체험 통화가 끝난 자리 — 상품 대신 로그인하고 이어 가기 */
.vc-trial-end { margin: 20px 0 0; padding: 18px 16px 14px; border-radius: 6px; border: 1px solid rgba(240,50,63,.45);
  background: linear-gradient(180deg, rgba(216,31,42,.16), rgba(255,255,255,.03)); text-align: center; }
.vc-trial-end > b { display: block; font-family: var(--v-serif); font-size: 21px; font-weight: 700; color: #fff; word-break: keep-all; }
/* 체험 끝 — 서연이 30초 전에 예고한 말을 그대로 인용한다(이어서 걸면 이것부터) */
.vc-tease { margin: 12px 0 0; padding: 12px 14px; text-align: left; border-left: 3px solid rgba(232,196,126,.8); border-radius: 0 6px 6px 0;
  background: rgba(232,196,126,.08); font-family: var(--v-serif); font-size: 15.5px; line-height: 1.6; color: #fff; word-break: keep-all; }
.vc-tease small { display: block; margin-bottom: 4px; font-family: var(--v-sans); font-size: 11.5px; font-weight: 800; letter-spacing: .04em; color: #e8c47e; }
.vc-trial-end > span { display: block; margin-top: 7px; font-size: 13.5px; line-height: 1.6; color: var(--v-ink-2); word-break: keep-all; }
.vc-trial-end .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 15px; }
.vc-trial-end .vc-login-btn, .vc-login-ask .vc-login-btn { white-space: nowrap; }
.vc-trial-end .vc-login-btn { height: 50px; font-size: 13.5px; }
.vc-trial-end small { display: block; margin-top: 10px; font-size: 11.5px; color: var(--v-ink-3); }
/* 광고로 온 사람의 첫 장 — 영상과 큰 통화 단추 하나만(voice-call.js adCompact). '더 알아보기' 로 보통 첫 장을 편다. */
.vc-landing.is-ad { overflow: hidden; }
.vc-landing.is-ad .vc-hero { height: 100dvh; min-height: 0; max-height: none; }
.vc-landing.is-ad .vc-body, .vc-landing.is-ad .vc-scrollcue { display: none; }
/* 무료 알약은 통화 단추("서연에게 전화 걸기 · 2분 무료")와 같은 말이라 광고 첫 장에선 뺀다 — 문구 블록이 얼굴로 올라가지 않게 */
.vc-landing.is-ad .vc-live { display: none; }
/* 소리 켜기 — 가운데 동그란 단추(지름 64)와 짧은 글. 얼굴 아래·문구 블록 바로 위 16px 에 선다: 문구 블록 높이는
   voice-call.js layoutAdHero 가 재어 --vc-copy-h 로 준다(문구 위치와 같은 셈, 170·160px 은 ResizeObserver 가 없을 때 값).
   그 자리가 얼굴(화면 위쪽 44%)까지 밀려 올라가면(작은 화면·인앱 안내) 머리 위 작은 알약(.is-tight)으로 물러난다. */
.vc-landing.is-ad .vc-hear { top: auto; bottom: calc(var(--vc-cta-content, 170px) + 20px + var(--vc-copy-h, 160px) + 16px);
  transform: translateX(-50%); gap: 8px; }
.vc-landing.is-ad .vc-hear:active { transform: translateX(-50%) scale(.96); }
.vc-landing.is-ad .vc-hear-ring { width: 64px; height: 64px; }
.vc-landing.is-ad .vc-hear svg { width: 28px; height: 28px; }
.vc-landing.is-ad .vc-hear-label { font-size: 13px; }
.vc-landing.is-ad .vc-hear-label small { display: none; }
.vc-landing.is-ad .vc-hear.is-tight { top: calc(66px + env(safe-area-inset-top)); bottom: auto; flex-direction: row;
  padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid rgba(241,219,186,.45); background: rgba(10,5,6,.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.vc-landing.is-ad .vc-hear.is-tight .vc-hear-ring { width: 32px; height: 32px; }
.vc-landing.is-ad .vc-hear.is-tight svg { width: 16px; height: 16px; }
/* 광고 첫 장의 문구는 크고 굵게 — 이름과 한 줄 문구가 영상 위에서 먼저 읽혀야 한다(2026-10-03 운영자: 더 크고 강렬하게).
   키운 만큼 문구 블록이 높아지는데, 375×812 에서 소리 단추가 얼굴 선(44%) 아래에 남는 높이까지만 키웠다 — 웹 글꼴이 늦게 와 기본 글꼴로 그려질 때(테스트도 그렇다)도 들어가게 여유를 둔다. */
.vc-landing.is-ad .vc-eyebrow { font-size: 12.5px; letter-spacing: .14em; }
.vc-landing.is-ad .vc-name { font-size: 42px; line-height: 1.05; margin-top: 2px; }
.vc-landing.is-ad .vc-name em { font-size: 20px; color: #e8c47e; opacity: .9; }
.vc-landing.is-ad .vc-tag { margin-top: 7px; font-family: var(--v-serif); font-size: 21px; font-weight: 800; line-height: 1.25; color: #fff;
  letter-spacing: -.01em; text-shadow: 0 2px 4px rgba(0,0,0,.9), 0 4px 24px rgba(0,0,0,.85); }
.vc-landing.is-ad .vc-tag::first-line { color: rgba(255,255,255,.86); }
.vc-ad-topics { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.vc-ad-topics span { padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(232,196,126,.55); background: rgba(20,8,8,.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); font-size: 13.5px; font-weight: 700; color: #fff; white-space: nowrap; }
/* 통화 단추가 울린다 — 퍼지는 고리와 흔들리는 수화기 */
.vc-landing.is-ad ~ .vc-cta .vc-dialbtn:not(:disabled)::after { content: ""; position: absolute; inset: -1px; border-radius: inherit;
  border: 2px solid rgba(255,77,87,.75); pointer-events: none; animation: vc-cta-ring 1.8s ease-out infinite; }
@keyframes vc-cta-ring { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(1.08, 1.45); opacity: 0; } }
.vc-landing.is-ad ~ .vc-cta .vc-dialbtn:not(:disabled) svg { transform-origin: 50% 60%; animation: vc-phone-ring 1.8s ease-in-out infinite; }
@keyframes vc-phone-ring { 0%, 45%, 100% { transform: rotate(0); } 5%, 15%, 25%, 35% { transform: rotate(-14deg); } 10%, 20%, 30%, 40% { transform: rotate(14deg); } }
@media (prefers-reduced-motion: reduce) {
  .vc-landing.is-ad ~ .vc-cta .vc-dialbtn::after, .vc-landing.is-ad ~ .vc-cta .vc-dialbtn svg { animation: none; }
  .vc-landing.is-ad ~ .vc-cta .vc-dialbtn::after { display: none; }
}
/* 광고 첫 장의 인앱 안내는 한 줄 — 문구 블록이 얼굴까지 밀려 올라가지 않게 */
.vc-landing.is-ad ~ .vc-cta .vc-inapp { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; }
.vc-landing.is-ad ~ .vc-cta .vc-inapp p { flex: 1 1 auto; font-size: 12.5px; }
.vc-landing.is-ad ~ .vc-cta .vc-inapp-btn { flex: 0 0 auto; width: auto; min-height: 38px; margin: 0; padding: 0 14px; white-space: nowrap; }
/* 문구 블록은 통화 단추 판(.vc-cta)의 내용 바로 위 20px 에 붙는다. 판의 키는 인앱·로그인 안내가 뜨고 지며 바뀌어
   voice-call.js layoutAdHero 가 재어 --vc-cta-content 로 준다. 170px 은 ResizeObserver 가 없는 브라우저의 단추·안내 한 줄 높이다. */
.vc-landing.is-ad .vc-hero-copy { bottom: calc(var(--vc-cta-content, 170px) + 20px); }
.vc-landing.is-ad ~ .vc-cta .vc-dialbtn { height: 68px; font-size: 19px; }
.vc-more-info { display: block; margin: 4px auto 0; min-height: 36px; padding: 0 12px; border: 0; background: transparent;
  color: var(--v-ink-2); font: inherit; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* 인앱 브라우저 — 크롬(안드로이드)·Safari(iOS) 로 여는 안내 */
.vc-inapp { margin: 0 0 10px; padding: 12px 14px; border-radius: 6px; border: 1px solid rgba(232,196,142,.45); background: rgba(30,22,16,.94); }
.vc-inapp p { margin: 0; font-size: 13px; line-height: 1.55; color: #f1d9b4; word-break: keep-all; }
.vc-inapp-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-top: 10px; border-radius: 999px;
  border: 1px solid rgba(232,196,142,.6); background: rgba(232,196,142,.14); color: #fff; font: inherit; font-size: 14px; font-weight: 800; text-decoration: none; cursor: pointer; }
/* 걸기 전 인앱 넘기기(voice-call.js handoffArmed) — 주소 복사와 '그냥 여기서 걸기'. 넘기기가 막혔으면(is-tried)·넘길 수 없는 앱에서
   전화 단추를 눌렀으면(is-alert) 테두리로 눈길을 끈다. */
.vc-inapp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px; }
.vc-inapp-acts .vc-inapp-btn { flex: 1 1 auto; width: auto; margin-top: 0; }
.vc-inapp-stay { min-height: 36px; padding: 0 4px; border: 0; background: transparent; color: #f1d9b4; font: inherit; font-size: 12.5px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.vc-inapp.is-tried, .vc-inapp.is-alert { border-color: rgba(255,214,150,.95); box-shadow: 0 0 0 2px rgba(232,196,142,.25); }
.vc-inapp:focus { outline: none; }
.vc-landing.is-ad ~ .vc-cta .vc-inapp-acts { flex: 0 0 auto; flex-direction: column; align-items: stretch; margin-top: 0; }
/* 걸기 전 생년월일 한 장 — 시간 더하기 창과 같은 판. 입력은 16px(아이폰이 확대하지 않게) */
/* 카드는 위쪽에 붙인다 — 가운데 두면 휴대폰 키보드가 전화 걸기 단추를 덮는다 */
.vc-birthsheet { position: absolute; inset: 0; z-index: 40; display: grid; place-items: start center; padding: calc(16px + env(safe-area-inset-top)) 16px 16px;
  grid-template-columns: minmax(0, 420px); justify-content: center;   /* 트랙을 정해 두지 않으면 카드가 글자 폭으로 줄어든다 */
  background: rgba(0,0,0,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: vc-topup-in .2s ease; }
.vc-birth-card { position: relative; width: 100%; max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
  padding: 20px 16px 14px; border-radius: 12px; border: 1px solid rgba(240,50,63,.3);
  background: rgba(14,8,9,.97); box-shadow: 0 24px 60px rgba(0,0,0,.7); }
.vc-birth-card > b { display: block; padding-right: 40px; font-family: var(--v-serif); font-size: 19px; font-weight: 700; color: #fff; word-break: keep-all; }
.vc-birth-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent;
  color: var(--v-ink-2); font: inherit; font-size: 24px; line-height: 1; cursor: pointer; }
.vc-birth-close:focus-visible { outline: 2px solid #ffb3b8; outline-offset: 2px; }
.vc-birth-card > b + .vc-edit { margin-top: 16px; }
.vc-birthsheet .vc-edit { gap: 12px; }
.vc-birthsheet .vc-edit input, .vc-birthsheet .vc-edit select { height: 44px; font-size: 16px; }
.vc-birthsheet .vc-edit label small { font-weight: 400; }
.vc-birth-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 10.5px; font-weight: 700; color: var(--v-ink-3); }
.vc-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.vc-seg button { height: 44px; border-radius: 4px; border: 1px solid var(--v-line); background: rgba(255,255,255,.05); color: var(--v-ink-2);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.vc-seg button[aria-pressed="true"] { border-color: rgba(240,50,63,.75); background: rgba(216,31,42,.3); color: #fff; }
.vc-seg button:focus-visible, .vc-birth-skip:focus-visible { outline: 2px solid #ffb3b8; outline-offset: 2px; }
.vc-edit label.vc-birth-leap { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: var(--v-ink-2); }
.vc-edit label.vc-birth-leap[hidden] { display: none; }
.vc-birthsheet .vc-edit label.vc-birth-leap input { width: 18px; height: 18px; }
.vc-birthsheet .vc-again { margin-top: 16px; }
/* 음력·태어난 시는 접어 둔다 — 대부분은 양력 생년월일과 성별만 넣고 건다 */
.vc-birth-more { align-self: start; min-height: 36px; padding: 0; border: 0; background: transparent; color: var(--v-ink-2);
  font: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; }
.vc-birth-more::after { content: " +"; }
.vc-birth-more[aria-expanded="true"]::after { content: " −"; }
.vc-birth-more:focus-visible { outline: 2px solid #ffb3b8; outline-offset: 2px; }
.vc-birth-extra { display: grid; gap: 12px; }
.vc-birth-extra[hidden] { display: none; }
.vc-birth-skip { display: block; width: 100%; min-height: 44px; margin-top: 6px; border: 0; background: transparent; color: var(--v-ink-2);
  font: inherit; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* 체험 끝의 원터치 충전 — 로그인 단추보다 위, 가장 먼저 눈에 들어오는 자리 */
.vc-trial-end .vc-offer-buy { margin-top: 16px; }
.vc-login-ask .vc-ask-buy { height: 50px; margin-top: 12px; font-size: 15px; }
.vc-login-ask .vc-ask-buy[hidden] { display: none; }
.vc-again.is-quiet { height: 50px; margin-top: 10px; background: rgba(255,255,255,.05); border-color: var(--v-line); box-shadow: none; font-size: 15px; }
@media (max-width: 350px) {
  .vc-login-ask .row, .vc-trial-end .row { grid-template-columns: 1fr; }
}

/* 못 알아들었을 때 주제 단추(2026-10-12) — "말로 해도 알아들어" 팁과 같은 자리·같은 결. 누르면 그 주제가 글로 들어간다. */
.vc-topics { position: absolute; z-index: 31; left: 50%; top: calc(max(12px, env(safe-area-inset-top)) + 54px); transform: translateX(-50%);
  width: min(92%, 380px); padding: 10px 40px 12px 14px; border-radius: 16px; box-sizing: border-box;
  background: rgba(18,9,11,.62); border: 1px solid rgba(232,200,120,.28); box-shadow: 0 6px 18px rgba(0,0,0,.25);
  animation: vc-saytip-in .35s cubic-bezier(.2,.8,.2,1) both; }
.vc-topics small { display: block; margin-bottom: 8px; color: rgba(232,200,120,.9); font-size: 12px; font-weight: 700; text-shadow: 0 1px 6px rgba(0,0,0,.75); }
.vc-topics-row { display: flex; flex-wrap: wrap; gap: 6px; }
.vc-topic { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(232,200,120,.35); background: rgba(255,255,255,.08);
  color: #fff; font-family: var(--v-serif); font-size: 15px; cursor: pointer; }
.vc-topic:active { background: rgba(232,200,120,.25); }
.vc-topics-x { position: absolute; top: 4px; right: 4px; width: 36px; height: 36px; border: 0; background: none; color: rgba(255,255,255,.55); font-size: 20px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .vc-topics { animation: none; } }