/* 판관의 심판 (기획안 p13): 심판 대기 · 내 차례(태그는 style.css .tag-scene) · 거울 닦기 · 판결 확인
   전시장 거울·대형 화면 연출은 screen.html · screen.css (관리자 도구 링크) */

/* ---------- 심판 대기 ---------- */
.mq-n{display:inline-block;min-width:.7em;text-align:center;color:var(--tal);font-size:1.2em}
/* 11.12 톤앤매너: 원 + 빨간 딱지 도형 → 업경대 원화(judge/v2/mirror.webp). 먹빛 바탕에 한지 결(#loader와 같은 soft-light),
   망자들이 업경대를 향해 한 줄로 서고 발밑에 업경대에서 가까운 순번(1·2·3…), 맨 뒤 내 자리는 금빛 '나'. 앱 코드는 mqScene() */
.mq{position:relative;isolation:isolate;display:flex;align-items:flex-end;gap:10px;margin:28px 0 16px;padding:16px 12px 12px;background:var(--bg2);border:2px solid #000;border-radius:var(--r);box-shadow:3px 3px 0 #000;overflow:hidden}
.mq::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('assets/ui/hanji-paper.webp') 50% 50%/cover;mix-blend-mode:soft-light;opacity:.22}
.mq-mirror{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px}
.mq-mirror img{display:block;width:auto;height:clamp(112px,34vw,136px);filter:drop-shadow(0 0 12px rgba(241,204,69,.16))}
.mq-mirror b{font:var(--fw-solmoe) var(--fs-sm)/var(--sl-lh-sm) var(--font-solmoe);letter-spacing:2px;color:#e8cf93}
.mq-line{flex:1;min-width:0;display:flex;align-items:flex-end;gap:4px;counter-reset:q var(--q0,0)}
/* 그리지 못한 앞사람 수 (서버 줄이 4명 이상일 때) */
.mq-more{flex:none;align-self:center;margin-bottom:24px;font:var(--fw-solmoe) var(--fs-sm)/1 var(--font-solmoe);color:#e8cf93;opacity:.75}
.mq-p{flex:0 1 48px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;transition:flex-basis .6s ease,margin .6s ease,opacity .45s,transform .6s ease}
.mq-p .face{width:100%;max-width:48px;border:2px solid #000;border-radius:var(--head);animation:mqBob 2.4s ease-in-out infinite}
.mq-p:nth-child(2) .face{animation-delay:-.6s}.mq-p:nth-child(3) .face{animation-delay:-1.2s}.mq-p.me .face{animation-delay:-1.8s}
.mq-p.other{overflow:hidden}
.mq-p.other:not(.out){counter-increment:q}
.mq-p.other::after{content:counter(q);font:var(--fw-solmoe) var(--fs-sm)/var(--sl-lh-sm) var(--font-solmoe);color:#e8cf93;opacity:.7}
.mq-p.out{flex-basis:0;margin-right:-4px;opacity:0;transform:translateX(-36px)}
.mq-p.me{flex:0 0 52px}
.mq-p.me .face{max-width:52px;border:3px solid var(--tal)}
.mq-p.me b{font:var(--fw-solmoe) var(--fs-sm)/var(--sl-lh-sm) var(--font-solmoe);padding:0 8px;color:var(--tal-ink);background:var(--tal);border-radius:var(--r)}
.mq-p.me.turn{animation:mqTurn .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes mqBob{50%{transform:translateY(-3px)}}
@keyframes mqTurn{from{transform:translateY(-10px) scale(1.15)}}
/* ---------- 거울 닦기 (태그 뒤 휴대폰) ---------- */
.mirror-stage{position:relative;display:flex;flex-direction:column;align-items:center;margin:28px 0 8px}
/* 11.12 톤: 전시장 업경대와 같은 물건으로 보이게, 거울 틀은 전시 화면(screen-judge-mirror .jm-bezel)과 같은 업경대 원화 렌더(bezel-flames: 붉은 테 + 불꽃 + 구름 받침).
   .mirror = 둥근 거울 유리 상자(지름 --mg). 그림 속 유리 구멍(1600px 기준 x399·y486·지름 802)이 상자 지름의 98%가 되게 얹어, 테가 유리 가장자리를 살짝 덮는다.
   위 불꽃 끝·아래 받침은 그림 가장자리에서 잘려 있어 전시 화면처럼 옅어지게 마스크. 불꽃이 위로 솟는 만큼 위 여백을 둔다 */
.mirror{--mg:min(62vw,240px);position:relative;width:var(--mg);height:var(--mg);margin:calc(var(--mg)*.4) 0 calc(var(--mg)*.16)}
.mirror,.mirror *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}
.mirror-bezel{position:absolute;left:-47.75%;top:-58.4%;width:195.5%;max-width:none;height:auto;z-index:6;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 7.5%,#000 14.5%,#000 84.5%,transparent 90%);mask-image:linear-gradient(to bottom,transparent 7.5%,#000 14.5%,#000 84.5%,transparent 90%)}
/* 11.11 디자인 피드백: 얼굴 칸(흰 타원)을 없애고 캐릭터 바탕색을 거울 유리 전체에 깐다. 색을 바꿀 때는 --mirror-bg 한 줄
   얼굴은 거울 아래쪽에 붙여 어깨가 거울 테두리에서 자연스럽게 잘리게 (AI 얼굴의 흰 바탕은 app.js cutoutWhite가 지운다) */
/* 11.12 버그: iOS Safari는 filter(흐림)가 걸린 얼굴을 overflow:hidden + 둥근 모서리로 자르지 못해 어깨·그림 테두리가 거울 밖으로 삐져나왔다.
   clip-path로 한 번 더 잘라 어느 브라우저에서도 둥근 유리 밖이 보이지 않게 한다 */
.mirror-glass{--mirror-bg:#fee4c7;position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--mirror-bg);
  clip-path:circle(50%);isolation:isolate}
.mirror-face{position:absolute;inset:0;display:grid;place-items:end center}
.mirror-face .face{width:96%;aspect-ratio:1/1.05;object-fit:cover;background:none;border:0;border-radius:0;filter:blur(3px) saturate(.4);opacity:.85;transition:filter 1s .7s,opacity 1s .7s}
.mirror canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;z-index:3;transition:opacity .9s .25s}
/* 닦기 안내: 손가락이 거울을 좌우로 문지르고, 지나간 자리에 닦인 자국이 남는다 (실제 손 에셋 전 placeholder) */
.wipe-guide{position:absolute;inset:0;z-index:4;pointer-events:none;transition:opacity .3s}
.wipe-guide.gone{opacity:0}
.wipe-guide.gone *{animation-play-state:paused}
.wg-box{position:absolute;left:50%;top:50%;width:200px;height:250px;margin:-132px 0 0 -100px;scale:.88}   /* 둥근 거울 안에 획 끝이 들어오게 조금 줄인다 */
.wg-trail{position:absolute;inset:0;overflow:visible}
.wg-trail path{fill:none;stroke:rgba(27,42,38,.55);stroke-width:36;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;animation:wgTrail 3.8s ease-in-out infinite}
.wg-move{position:absolute;left:0;top:0;width:0;height:0;offset-rotate:0deg;animation:wgMove 3.8s ease-in-out infinite}
.wg-dot{position:absolute;left:-15px;top:-15px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.5);border:2px solid rgba(0,0,0,.45);animation:wgDot 3.8s ease-in-out infinite}
.wg-hand{position:absolute;left:-21px;top:-3px;overflow:visible;transform-origin:21px 3px;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.35));animation:wgHand 3.8s ease-in-out infinite}
/* 획마다 끝에서 멈칫하도록 4획을 구간으로 나눈다. 거리 지점(25%·50%…)은 WIPE_PATH 각 꺾임점까지의 길이 비율이며, 손과 닦인 자국이 같은 값을 써야 맞물린다 */
@keyframes wgMove{0%{offset-distance:0%;opacity:0}8%{offset-distance:0%;opacity:1}20%{offset-distance:12%}38%{offset-distance:36.3%}58%{offset-distance:67.4%}80%{offset-distance:100%;opacity:1}90%,100%{offset-distance:100%;opacity:0}}
@keyframes wgTrail{0%,8%{stroke-dashoffset:1;opacity:1}20%{stroke-dashoffset:.88}38%{stroke-dashoffset:.637}58%{stroke-dashoffset:.326}80%,88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes wgHand{0%{transform:translateY(-10px) scale(1.12) rotate(-8deg)}8%{transform:rotate(-8deg)}20%{transform:rotate(7deg)}38%{transform:rotate(-8deg)}58%{transform:rotate(7deg)}80%{transform:rotate(-8deg)}90%,100%{transform:translateY(-10px) scale(1.12) rotate(-8deg)}}
@keyframes wgDot{0%,6%{opacity:0;transform:scale(.4)}10%{opacity:1;transform:scale(1)}80%{opacity:1;transform:scale(1)}90%,100%{opacity:0;transform:scale(1.5)}}

/* 다 닦으면: 남은 김이 뿌연 연기로 부풀어 거울을 한 번 덮었다가 위·바깥으로 흩어지고, 그 뒤로 얼굴이 떠오른다.
   거울 안 연기(9) + 테두리 밖으로 새어 나오는 연기(6). 덩이마다 시작 위치(--l,--t)·흩어지는 방향(--x,--y)·크기(--s)·지연(--d)이 다르다 */
.mirror-smoke{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden;border-radius:inherit}
.mirror-smoke.out{z-index:7;overflow:visible;border-radius:0}
.mirror-smoke i{position:absolute;left:var(--l);top:var(--t);width:var(--w,64%);aspect-ratio:1;translate:-50% -50%;border-radius:50%;opacity:0;
  background:radial-gradient(closest-side,rgba(238,243,240,.96),rgba(214,224,219,.7) 45%,rgba(214,224,219,0));filter:blur(4px)}
/* 거울 전체를 한 번 뿌옇게 덮는 막: 연기 덩이보다 먼저 차올랐다가 얼굴이 떠오를 때 걷힌다 */
.mirror-smoke:not(.out):before{content:'';position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at 50% 55%,rgba(240,245,242,.98),rgba(214,224,219,.9) 55%,rgba(196,208,202,.8))}
.clear .mirror-smoke:not(.out):before{animation:haze 2.4s ease-out both}
@keyframes haze{0%{opacity:0}14%,34%{opacity:1}100%{opacity:0}}
/* 실제 연기 영상 (검은 배경 → screen 블렌드로 검정이 사라짐). 재생이 시작되면(.vid) CSS 연기 덩이 대신 보인다.
   거울보다 크게 깔고 가장자리를 타원 마스크로 흐려 영상 네모 테두리가 드러나지 않게 한다 */
.smoke-vid{position:absolute;left:50%;top:50%;z-index:7;width:min(100vw,440px);aspect-ratio:9/16;translate:-50% -54%;object-fit:cover;pointer-events:none;opacity:0;
  mix-blend-mode:screen;-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}
.vid .smoke-vid{animation:smokeVid 4.6s ease-out both}
.vid .mirror-smoke i{display:none}
@keyframes smokeVid{0%{opacity:0}10%{opacity:1}55%{opacity:.85}100%{opacity:0}}
.clear .mirror-smoke i{animation:smoke var(--dur,3.2s) var(--d,0s) cubic-bezier(.2,.6,.3,1) both}
@keyframes smoke{0%{opacity:0;transform:scale(.35)}16%{opacity:1}40%{opacity:.9}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(var(--s)) rotate(var(--r,20deg))}}
.mirror-smoke i:nth-child(1){--l:50%;--t:50%;--w:90%;--x:0;--y:-60px;--s:1.6;--d:0s}
.mirror-smoke i:nth-child(2){--l:28%;--t:34%;--x:-50px;--y:-70px;--s:1.5;--d:.05s;--r:-30deg}
.mirror-smoke i:nth-child(3){--l:72%;--t:32%;--x:50px;--y:-80px;--s:1.5;--d:.1s}
.mirror-smoke i:nth-child(4){--l:24%;--t:66%;--x:-60px;--y:-20px;--s:1.4;--d:.08s;--r:-20deg}
.mirror-smoke i:nth-child(5){--l:76%;--t:68%;--x:60px;--y:-30px;--s:1.4;--d:.14s}
.mirror-smoke i:nth-child(6){--l:50%;--t:82%;--x:0;--y:-110px;--s:1.7;--d:.2s;--r:40deg}
.mirror-smoke i:nth-child(7){--l:50%;--t:20%;--w:70%;--x:10px;--y:-90px;--s:1.5;--d:.18s}
.mirror-smoke i:nth-child(8){--l:36%;--t:50%;--w:50%;--x:-40px;--y:-100px;--s:1.8;--d:.3s;--dur:3s}
.mirror-smoke i:nth-child(9){--l:64%;--t:52%;--w:50%;--x:40px;--y:-100px;--s:1.8;--d:.34s;--dur:3s;--r:-35deg}
/* 테두리 밖: 거울 가장자리에서 피어올라 위로 흩어진다 (화면 가로를 넘지 않게 작게) */
.mirror-smoke.out i{--w:96px;--dur:3.4s}
.mirror-smoke.out i:nth-child(1){--l:22%;--t:30%;--x:-20px;--y:-70px;--s:1.6;--d:.2s}
.mirror-smoke.out i:nth-child(2){--l:78%;--t:28%;--x:20px;--y:-80px;--s:1.6;--d:.25s}
.mirror-smoke.out i:nth-child(3){--l:18%;--t:62%;--x:-24px;--y:-50px;--s:1.4;--d:.3s}
.mirror-smoke.out i:nth-child(4){--l:82%;--t:64%;--x:24px;--y:-60px;--s:1.4;--d:.35s}
.mirror-smoke.out i:nth-child(5){--l:50%;--t:4%;--w:120px;--x:0;--y:-60px;--s:1.8;--d:.4s;--dur:3.8s}
.mirror-smoke.out i:nth-child(6){--l:40%;--t:96%;--w:104px;--x:-10px;--y:-40px;--s:1.5;--d:.45s}
.clear .mirror canvas{opacity:0;pointer-events:none}
.clear .wipe-guide{opacity:0}
.clear .mirror-face .face{filter:none;opacity:1;animation:faceUp .8s 1.1s cubic-bezier(.3,1.5,.5,1) both}

/* ---------- 다 닦은 뒤: 거울을 거두고 “앞의 업경대를 보세요” (11.12, app.js lookPanel) ----------
   거울이 맑아지고 얼굴이 다 떠오르면(LOOK_HOLD_MS) 제목·거울이 사라지고(LOOK_OUT_MS = .65s) 안내만 남는다. 휴대폰에는 결과·대기 문구를 두지 않는다 */
.looking .scr-head{opacity:0;transition:opacity .4s}
.looked .scr-head{display:none}
.look{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:min(72dvh,620px);padding:12px 0 24px;text-align:center}
.lk-sub{margin:12px 0 0;font:var(--t-body-sm);letter-spacing:var(--t-body-sm-ls);color:var(--muted)}
/* 위쪽 화살 3개: 아래에서 위로 차례로 밝아진다 = 고개를 들라는 손짓 */
.lk-up{display:flex;flex-direction:column;align-items:center;padding-top:6px}
.lk-up i{display:block;width:16px;height:16px;margin-top:-5px;border-top:3px solid var(--tal);border-left:3px solid var(--tal);transform:rotate(45deg);opacity:.15;animation:lkUp 1.4s ease-in-out infinite}
.lk-up i:nth-child(1){animation-delay:.4s}.lk-up i:nth-child(2){animation-delay:.2s}
@keyframes lkUp{0%,100%{opacity:.15}40%{opacity:1}}
@keyframes lkRise{from{opacity:0;transform:translateY(10px)}}

/* 1안 「업경대로 건너간 얼굴」: 휴대폰 거울이 위로 빨려 올라가고, 업경대의 둥근 거울 속에 내 얼굴이 맺힌다.
   업경대는 실시간 3D(.lk-3d 캔버스, mirror3d.js). 3D가 그려지면 .is-3d로 그림(img·.lk-face)을 거둔다 */
.look-out .mirror{animation:lkSuck .65s cubic-bezier(.55,0,.8,.2) both}
@keyframes lkSuck{30%{transform:translateY(8px) scale(1.02)}100%{transform:translateY(-58vh) scale(.22);opacity:0}}
.look .lk-up{margin-bottom:6px}
.look .lk-mirror{position:relative;width:min(58vw,232px);margin:0 0 18px;animation:lkMirrorIn .7s cubic-bezier(.3,1.4,.5,1) both,lkBob 3.2s 1s ease-in-out infinite}
.look .lk-mirror img{display:block;width:100%;height:auto}
.look .lk-face{position:absolute;left:28.5%;top:29.6%;width:43%;aspect-ratio:1;border-radius:50%;overflow:hidden;clip-path:circle(50%);background:#fee4c7;animation:lkFaceIn .6s .5s ease-out both}
.look .lk-face .av{position:absolute;left:-14%;top:-26%;width:128%;background:none}
/* 3D 캔버스: 흔들릴 때 옆이 잘리지 않게 그림 상자보다 넓게. 그려지면 그림과 자리를 바꾼다 */
.look .lk-3d{position:absolute;left:-30%;right:-30%;top:-6%;bottom:-4%;opacity:0;transition:opacity .35s;pointer-events:none}
.look .lk-3d canvas{display:block;width:100%!important;height:100%!important}
.look .is-3d .lk-3d{opacity:1}
.look .is-3d{animation:none}
.look .is-3d>img,.look .is-3d .lk-face{opacity:0;transition:opacity .35s}
.look .wait-3d>img,.look .wait-3d .lk-face{visibility:hidden}
.look .lk-title{margin:0;font:var(--fw-solmoe) var(--fs-2xl)/var(--sl-lh-2xl) var(--font-solmoe);color:var(--text);animation:lkRise .5s .3s ease-out both}
.look .lk-sub{animation:lkRise .5s .45s ease-out both}
@keyframes lkMirrorIn{from{opacity:0;transform:translateY(-48px) scale(.7)}}
@keyframes lkBob{50%{transform:translateY(-6px)}}
@keyframes lkFaceIn{from{opacity:0;transform:scale(.5)}}


/* ---------- 판결 확인 ---------- */
/* 판결문 한 장(verdict-doc.js의 .vdoc)을 앱 여백 안에서 폭 가득. 버튼은 도장 뒤에 나타난다 (startVerdict) */
.vd-sheet,h2.sr-only+.vd-sheet{width:100%;margin-top:0}   /* 제목은 화면 읽기용(sr-only)이라 h2+ 간격을 받지 않는다 */
.vd-img{display:block;width:100%;height:auto}
/* 판결문이 위에서 던져져 들어온다(휴대폰 화면 밖은 .phone이 자른다). 11.12 머리띠 삭제로 머리 막대 밑을 지나가게 하던 규칙은 뺐다 */
.vd-sheet{position:relative;z-index:1}
/* 판결문 클로즈업 연출(verdict-doc.js) 동안에는 확대된 종이가 본문을 스크롤시키지 않게 잘라내기만 한다 */
.scr-body:has(.vdoc:is(.is-pre,.is-playing)){overflow:hidden}
.vd-next:not([hidden]){animation:vdIn .35s ease-out both}
@keyframes vdIn{from{opacity:0;transform:translateY(8px)}}
@media (max-width:374px){.mq{gap:8px;padding:14px 8px 10px}}   /* 얼굴은 .mq-p flex 줄어듦, 업경대는 clamp로 따라 줄어든다 */
@media (prefers-reduced-motion:reduce){.vd-next:not([hidden]){animation:none}.mq-p.out{display:none}.mirror-smoke,.smoke-vid{display:none}.clear .mirror-face .face{animation:none}}