/* 첫 화면에서 이어지는 카드 질문 장면 (2026-11-11, 사용자 스토리보드 design/ref/cascade-*-ref.webp).
   흐름: "나의 이야기 시작하기" -> 카드 뒷면이 위에서 쏟아져 화면을 덮음 -> 그 사이 장면이 바뀜
   -> 카드가 빠져나가면 애니 점술사가 나무 테이블 앞에 앉아 있고 테이블 위에 커튼 카드가 놓여 있음
   -> 카드를 누르면 집어 들듯 일어나 앞으로 오며 뒤집혀 질문을 적는다.
   소재: cards/back.webp(사용자 카드 뒷면), assets/teller-scene.webp(스토리보드 구도를 애니로 다시 그림, design/render/scene_i2i.py).
   카드 그림과 줄 위치는 curtain.html 과 같다. 흐림 효과 없음. */

:root {--qc-ease:cubic-bezier(.2,.8,.2,1); --qc-in:cubic-bezier(.55,0,.8,.2)}

/* ---------- 첫 화면은 카드가 덮은 사이에 사라진다 ---------- */
body.qc-ready .hero-copy,body.qc-ready .hero-caption,body.qc-ready .scene-enter,body.qc-ready .cinema-header {transition:opacity .35s ease}
body.qc-away .hero-copy,body.qc-away .hero-caption,body.qc-away .scene-enter,body.qc-away .cinema-header {opacity:0!important;pointer-events:none}
body.qc-snap .hero-copy,body.qc-snap .hero-caption,body.qc-snap .scene-enter,body.qc-snap .cinema-header {transition:none!important}

/* ---------- 쏟아지는 카드 ---------- */
.qc-rain {position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden}
.qc-rain i {position:absolute;left:0;top:0;aspect-ratio:900/1500;background:url('cards/back.webp') center/100% 100% no-repeat;
  border-radius:4.5%/2.7%;box-shadow:0 10px 30px #000a;will-change:transform}

/* ---------- 마지막 장면: 테이블 앞의 점술사 ---------- */
.qc {--ratio:.6564;--card-w:min(92vw,460px,calc((100svh - 120px) * var(--ratio)));--opened:.74;
  position:fixed;inset:0;z-index:60;visibility:hidden;opacity:1;overflow:hidden;color:#f3e7cf;background:transparent}
.qc.on {visibility:visible}
.qc.scene-on {background:#05070d}   /* 카드가 덮기 전까지는 첫 화면이 그대로 보인다 */
.qc.leaving {opacity:0;transition:opacity .5s ease}
.qc-scene {position:absolute;inset:0;opacity:0}
.qc.scene-on .qc-scene {opacity:1}
.qc-scene {display:block}
.qc-scene img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* 넓은 화면(3:4 이상)은 picture 의 가로 그림(teller-scene-wide.webp)을 쓴다. 허리를 편 머리 위 여백이 잘리지 않게 위쪽을 덜 자른다 */
/* 11-14 23시: 상담자별 세로 방(휴대폰 기준). PC 는 아직 따로 맞추지 않고(사용자: "PC 까진 일단 상정하지 말자") 세로 그림을 가운데에 통째로 */
@media (min-aspect-ratio:3/4) and (min-width:700px) {.qc-scene img {object-fit:contain;object-position:50% 50%}}   /* 휴대폰은 자판이 올라와 가로가 길어져도 꽉 채운 채로 */
/* 16:9 처럼 아주 넓은 화면은 그림이 세로로 많이 넘쳐 카드가 아래로 밀려난다: 위쪽을 조금 자른다(머리 위 여백 안에서) */
/* 11-14 검수: 창이 낮고 넓으면(1920x950, 1536x730 같은 실제 브라우저 창) 넘침의 30% 가 머리 위 여백보다 커져 두건 꼭대기가 잘렸다.
   자르는 양을 장면 110px(= 화면 너비의 5.93%) 까지로 막는다. 30vh - 21.85vw 는 넘침(72.845vw - 100vh)의 30% 를 위로 올린 값 */

/* 점술사 움직임 영상: 점술사 자리에만 겹치고, 테이블 쪽과 옆 가장자리는 서서히 투명해져 그림이 그대로 보인다 */
.qc-motion {position:absolute;opacity:0;pointer-events:none;transition:filter .6s ease}
.qc.scene-on .qc-motion {opacity:1}
.qc-motion video {position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:0}
.qc-motion .m-in {z-index:1}
.qc-motion.live .m-in {opacity:1;transition:opacity .25s ease}
.qc-motion.looping .m-loop {opacity:1}
/* 전환 영상 마지막 장면을 0.4초 동안 걷어 내며 숨쉬기로 (둘이 아주 조금 달라서 바로 바꾸면 튄다) */
.qc-motion.looping .m-in {opacity:0;transition:opacity .4s ease}
/* 점술사를 누르면 나오는 반응(question-card.js react): 숨쉬기 위에 0.25초 겹쳐 나타나고 끝나면 0.3초 걷힌다 */
.qc-motion .m-react {z-index:2;transition:opacity .3s ease}
.qc-motion.reacting .m-react {opacity:1;transition:opacity .25s ease}
.qc.can-react {cursor:pointer}
.qc-motion[data-kind=wide] {
  -webkit-mask-image:linear-gradient(#000 74.5%,transparent 83.5%);mask-image:linear-gradient(#000 74.5%,transparent 83.5%)}
/* 11-14 사용자: 휴대폰 세로 화면은 점술사가 테이블, 화면에 너무 가깝다. 장면을 15% 작게(위쪽 15% 비움) 두고
   위 끝은 어둠으로 서서히 사라지게(머리 꼭대기 잘린 곳도 함께). 영상은 그림 자리를 따라가므로(imgPoint) 같은 띠만 흐리게 */

/* 11-14 카산드라 영상은 장면 x 376~1504, y 70~902 만 그린다(question-card.js READERS.cassandra.box). 위, 옆 가장자리도 그림에 녹이고,
   테이블 쪽은 루시안과 같은 장면 줄(y 790~885)에서 흐린다. 휴대폰, PC 공통(위 끝 y 70 은 두건 꼭대기 y 151 보다 위) */
.qc-motion[data-reader=cassandra][data-kind=wide] {
  -webkit-mask-image:linear-gradient(transparent,#000 6%,#000 86.5%,transparent 98%),linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(transparent,#000 6%,#000 86.5%,transparent 98%),linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-composite:intersect}
/* 11-14 23시 세로 방: 영상은 상담자 둘레만 그린다(READERS.*.box). 위, 옆 가장자리를 그림에 녹이고, 테이블 윗변(상자 높이의 약 90%) 부근에서 흐린다 */
.qc-motion[data-kind=tall] {
  -webkit-mask-image:linear-gradient(transparent,#000 6%,#000 88%,transparent 98%),linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(transparent,#000 6%,#000 88%,transparent 98%),linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-composite:intersect}

/* 카드를 집어 들었을 때 뒤가 조금 어두워진다 */
.qc-scene::after {content:'';position:absolute;inset:0;background:#05070d;opacity:0;transition:opacity .6s ease}

.qc-home {position:absolute;z-index:4;top:max(16px,env(safe-area-inset-top));left:16px;min-height:44px;padding:0 8px;border:0;background:none;
  font:400 18px/1 Georgia,'Times New Roman',serif;letter-spacing:.08em;color:#efe2c8cc;cursor:pointer;opacity:0;transition:opacity .4s}
.qc.card-in .qc-home {opacity:1}
.qc-home:focus-visible {outline:2px solid #f3e7cf;outline-offset:2px}

/* 11-15 사용자 예제: 수정구를 누르면 종이 카드 대신 장면 안에서 바로 묻는다. 점술사 한마디(.qc-say) 아래에 적은 글이 크게 보이고
   오른쪽 아래 "카드 펼치기"로 카드 섞기에 들어간다. 수정구 받침 바로 아래(--ask-top)부터 화면 아래까지 어둡게 깔린다 */
.qc-card {position:absolute;z-index:3;left:0;right:0;top:var(--ask-top,62%);bottom:0;display:flex;flex-direction:column;
  padding:14px max(24px,7vw) calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(rgba(8,3,5,0),rgba(8,3,5,.72) 22%,rgba(8,3,5,.9));
  opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .45s ease,transform .6s var(--qc-ease)}
.qc-card.open {opacity:1;transform:none;pointer-events:auto}
/* 휴대폰 자판이 올라오면(visualViewport) 질문 칸을 자판 바로 위로 올린다. 장면은 그대로 두고 칸만 사람 앞에 겹친다 */
.qc.kb .qc-card {top:auto;bottom:var(--kb,0px);padding-top:56px;background:linear-gradient(rgba(8,3,5,0),rgba(8,3,5,.8) 30%,rgba(8,3,5,.92))}
/* 테이블 위 수정구(11-14 23시). 누르면 위 질문 칸이 열린다 */
.qc-ball {--glow:255,90,70;position:absolute;z-index:2;left:50%;top:80%;width:30vw;padding:0;border:0;background:none;cursor:pointer;
  transform:translate(-50%,-50%);opacity:0;pointer-events:none;transition:opacity .5s ease,transform .5s var(--qc-ease),filter .3s ease;
  -webkit-tap-highlight-color:transparent}
.qc[data-reader=lucian] .qc-ball {--glow:190,240,200}
.qc.scene-on .qc-ball {opacity:1}
.qc.card-in .qc-ball {pointer-events:auto}
.qc-ball img {position:relative;z-index:1;display:block;width:100%;height:auto;filter:drop-shadow(0 10px 14px #000c);
  animation:qc-glow-img 3.2s ease-in-out infinite}
/* 11-15 검수: 뒤에 깐 빛은 불투명한 구슬에 가려 안 보였다. 구슬 둘레로 번지는 빛을 함께 숨 쉬게 한다 */
@keyframes qc-glow-img {0%,100% {filter:drop-shadow(0 10px 14px #000c) drop-shadow(0 0 6px rgba(var(--glow),.25))}
  50% {filter:drop-shadow(0 10px 14px #000c) drop-shadow(0 0 22px rgba(var(--glow),.75))}}
.qc-ball::before {content:'';position:absolute;left:8%;right:8%;top:2%;aspect-ratio:1;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--glow),.55),rgba(var(--glow),.18) 55%,transparent);animation:qc-glow 3.2s ease-in-out infinite}
@keyframes qc-glow {0%,100% {opacity:.45;transform:scale(.96)} 50% {opacity:.95;transform:scale(1.08)}}
.qc-ball:hover {filter:brightness(1.12)}
.qc-ball:active {transform:translate(-50%,-50%) scale(.97)}
.qc-ball:focus-visible {outline:2px solid #f3e7cf;outline-offset:4px;border-radius:50%}
.qc:has(.qc-card.open) .qc-ball {pointer-events:none;filter:brightness(.75)}
.qc:has(.qc-card.open) .qc-ball img,.qc:has(.qc-card.open) .qc-ball::before {animation-play-state:paused}
.qc-form {display:flex;flex-direction:column;flex:1;max-width:560px;width:100%;margin:0 auto}
.qc-say {margin:0 0 10px;font:400 clamp(17px,4.6vw,21px)/1.5 var(--serif,'Gowun Batang',serif);color:#efe2c8;letter-spacing:.01em;
  text-shadow:0 1px 8px #000c}
.qc-form textarea {width:100%;min-height:1.6em;padding:0;border:0;resize:none;outline:0;background:transparent;overflow-y:auto;
  font:400 clamp(20px,5.6vw,26px)/1.6 var(--serif,'Gowun Batang',serif);color:#f6ead2;caret-color:#f0c98a;
  word-break:keep-all;overflow-wrap:anywhere;text-shadow:0 1px 10px #000d}
.qc-form textarea::placeholder {color:#efe2c880;font-size:clamp(15px,4.2vw,18px)}
.qc-row {margin-top:auto;padding-top:6px;display:flex;justify-content:flex-end}
.qc-go {min-height:40px;padding:0 4px;border:0;background:none;cursor:pointer;font:400 clamp(16px,4.4vw,19px)/1 var(--serif,'Gowun Batang',serif);
  color:#ecd8ae;letter-spacing:.02em;transition:opacity .15s}
.qc-go span {display:inline-block;margin-left:6px;transition:transform .2s var(--qc-ease)}
.qc-go:hover span {transform:translateX(3px)}
.qc-go:active {opacity:.6}
.qc-go:focus-visible {outline:2px solid #ecd8ae;outline-offset:4px}
.qc-hint {position:absolute;z-index:4;left:0;right:0;pointer-events:none;bottom:calc(28px + env(safe-area-inset-bottom));text-align:center;
  font:14px/1.5 -apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;color:#efe2c8d9;
  opacity:0;transition:opacity .4s}
.qc.card-in .qc-hint {opacity:1;transition-delay:.9s}
/* 세로 화면은 테이블이 화면 맨 아래라 안내 글이 카드를 가린다: 위쪽 창 앞으로. 넓은 화면은 아래 끝에 붙인다(위는 얼굴) */
/* 11-14 휴대폰도 넓은 그림이라 안내 글은 question-card.js(layCard)가 카드 바로 위에 놓는다 */
/* 넓은 화면은 question-card.js(layCard)가 카드 바로 위에 놓는다 */
.qc:has(.qc-card.open) .qc-hint {opacity:0;transition-delay:0s}

/* ---------- 상담 준비 칸: 질문 입력칸 대신 적은 질문을 보여 준다 ---------- */
body.qc-ready .question-label,body.qc-ready #q {display:none}
.qc-summary {display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--rule,rgba(236,230,217,.15))}
.qc-summary .qc-label {font:700 12px/1.4 var(--ui,sans-serif);color:var(--muted,#9ba8b8)}
.qc-summary p {margin:0;font:16px/1.7 var(--serif,serif);color:var(--txt,#ece6d9);word-break:keep-all}
.qc-summary p.empty {font:14px/1.6 var(--ui,sans-serif);color:var(--muted,#9ba8b8)}
.qc-edit {align-self:flex-start;min-height:36px;padding:4px 0;border:0;background:none;font:600 14px/1 var(--ui,sans-serif);
  color:var(--txt,#ece6d9);text-decoration:underline;text-underline-offset:4px;cursor:pointer}

@media(prefers-reduced-motion:reduce) {
  .qc,.qc-card,.qc-scene::after,.qc-ball {transition:none!important}
  .qc-ball::before,.qc-ball img {animation:none}
}
/* 11-15 이름과 생년월일: 상담자가 질문 칸에서 먼저 묻는다(question-card.js). 한 줄 입력칸, 건너뛰기, 말투 그대로의 안내 */
.qc-form.intake textarea,.qc-form:not(.intake) .qc-field,.qc-form:not(.intake) .qc-skip {display:none}
.qc-field {width:100%;padding:2px 0 8px;border:0;border-bottom:1px solid #ecd8ae55;outline:0;background:transparent;border-radius:0;
  font:400 clamp(20px,5.6vw,26px)/1.4 var(--serif,'Gowun Batang',serif);color:#f6ead2;caret-color:#f0c98a;text-shadow:0 1px 10px #000d;color-scheme:dark}
.qc-field::placeholder {color:#efe2c855;font-size:clamp(17px,4.8vw,22px)}
.qc-field:focus {border-bottom-color:#ecd8aeaa}
.qc-err {min-height:1.4em;margin:6px 0 0;font:400 clamp(13px,3.6vw,15px)/1.4 var(--serif,'Gowun Batang',serif);color:#f0b7a0;text-shadow:0 1px 8px #000c}
.qc-form:not(.intake) .qc-err {display:none}
.qc-form.intake .qc-row {justify-content:space-between}
.qc-skip {min-height:40px;padding:0 4px;border:0;background:none;cursor:pointer;font:400 clamp(14px,3.9vw,16px)/1 var(--serif,'Gowun Batang',serif);color:#c9b48c}
.qc-skip:focus-visible {outline:2px solid #ecd8ae;outline-offset:4px}
/* 첫 물음 위 안내(왜 묻는지, 이 기기에만 남고 서버에는 저장되지 않는다는 것). 상담자 말투, 조금 작게 */
.qc-lead {margin:0 0 10px;font:400 clamp(14px,3.8vw,16px)/1.6 var(--serif,'Gowun Batang',serif);color:#d9cbb0;text-shadow:0 1px 8px #000c;word-break:keep-all}
.qc-lead[hidden] {display:none}
/* 글이 길어지면(작은 화면, 안내 글) 질문 칸이 수정구 아래에서 시작하는 대신 위로 늘어나 단추가 화면 밖으로 밀리지 않는다.
   11-15 검수: 360x640 고민 질문 단계의 "카드 펼치기"도 아래로 잘렸다 */
.qc:not(.kb) .qc-card {top:auto;min-height:calc(100% - var(--ask-top,62%))}