/* LIVE 회전판(2026-11-11 대표 「각 부위별 버튼들을 회전판으로」「인터페이스를 단순화 너덜너덜 진열하지말고」「눈 아이콘들을 사실적으로 표현」「전체 투명메탈릭스로 리뉴얼」)
   아래 세 줄(나가기 줄·탭 줄·견본 줄)을 회전판 하나로 모은다. 위 고리 = 견본(가운데가 고른 칸), 아래 고리 = 부위.
   투명유리메탈: 몸체는 비치는 유리(흐림·어두운 깔개 없음 — 얼굴을 안 가린다), 테두리는 가는 금속 선.
   옛 조작부는 지우지 않고 숨기기만 한다 — turn.js 가 그 단추를 대신 누른다. 주소에 ?classic=1 을 붙이면 옛 화면. */
.stage.turnui .dock{display:block;padding:0 0 max(4px,env(safe-area-inset-bottom,0px));background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.stage.turnui .dock>.ctl,.stage.turnui .dock>.tabs,.stage.turnui .dock>.subtabs,.stage.turnui .dock>.rail{display:none!important}

.turn{--apex:40px;--tsh:0 0 2px rgba(0,0,0,.75),0 1px 3px rgba(0,0,0,.8),0 0 10px rgba(0,0,0,.5);position:relative;height:166px;overflow:visible;color:#f3f5f7;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;font-family:var(--f-body,inherit)}
.turn.has-sub{--apex:72px;height:198px}
/* 밝은 화면에서만 켜지는 옅은 스모크 유리(--tint 0~1 은 turn.js 가 화면 아래 밝기를 재서 넣는다). 어두운 화면에서는 0 = 완전히 투명 */
.turn::before{content:"";position:absolute;inset:-14px 0 0;background:linear-gradient(rgba(18,21,26,0),rgba(18,21,26,.42) 34%,rgba(18,21,26,.6));opacity:calc(var(--tint,0)*.66);transition:opacity .9s;pointer-events:none}
.turn.mini{height:104px}
.turn.mini.has-sub{height:136px}
.turn.wait .tn-tok{filter:grayscale(1) brightness(.72)}

/* 견본 고리 */
.tn-items,.tn-parts{position:absolute;inset:0;outline:none}
.tn-parts{pointer-events:none}
.tn-tok{position:absolute;left:0;top:0;width:92px;height:62px;margin:0;padding:0;border:0;border-radius:22px;background:rgba(255,255,255,.07);color:inherit;cursor:pointer;will-change:transform,opacity;transform-origin:50% 50%;touch-action:none;-webkit-tap-highlight-color:transparent;box-shadow:0 2px 10px rgba(0,0,0,.22)}
.tn-tok::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;background:linear-gradient(140deg,rgba(255,255,255,.86),rgba(255,255,255,.22) 40%,rgba(8,10,12,.34) 72%,rgba(255,255,255,.42));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none;z-index:2}
.tn-tok .ph{position:absolute;inset:1.5px;border-radius:20.5px;overflow:hidden;display:grid;place-items:center;pointer-events:none}
.tn-tok .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* 유리 반사 — 사진 위 왼쪽 위에서 비스듬히 */
.tn-tok .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(142deg,rgba(255,255,255,.34),rgba(255,255,255,0) 30%,rgba(255,255,255,0) 72%,rgba(255,255,255,.14));pointer-events:none}
.tn-tok .ph svg{position:relative;width:30px;height:30px;stroke:#fff;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.95;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.6))}
.tn-tok em{position:absolute;z-index:3;top:5px;right:6px;font:500 8px/1 var(--f-data,ui-monospace,monospace);font-style:normal;letter-spacing:.06em;padding:2px 3.5px;border-radius:4px;background:rgba(10,12,15,.42);color:#fff;pointer-events:none}
/* 켠 견본 = 밝은 유리(민트 아님) */
.tn-tok.on{background:rgba(255,255,255,.24);box-shadow:0 0 0 1.4px rgba(255,255,255,.96),0 0 16px rgba(255,255,255,.4)}
.tn-tok.on::before{background:linear-gradient(140deg,#fff,rgba(255,255,255,.86) 45%,rgba(255,255,255,.6))}
.tn-tok.on::after{content:"";position:absolute;z-index:3;left:50%;bottom:-7px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff}
.tn-items:focus-visible .tn-tok[aria-selected="true"]{outline:2px solid rgba(240,240,241,.95);outline-offset:3px}
.tn-tok.shake{animation:tnShake .35s}
@keyframes tnShake{25%{margin-left:-4px}75%{margin-left:4px}}
.turn.mini .tn-tok.far{visibility:hidden!important}

/* 고른 칸 이름 */
.tn-cap{position:absolute;left:50%;top:calc(var(--apex) + 36px);transform:translateX(-50%);max-width:calc(100% - 100px);display:flex;gap:6px;align-items:baseline;justify-content:center;white-space:nowrap;text-shadow:var(--tsh);pointer-events:none;line-height:18px}
.tn-cap small{font-size:10.5px;opacity:.78;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0}
.tn-cap b{font-size:13px;font-weight:600;letter-spacing:-.01em;flex:0 0 auto}
.tn-cap em{flex:0 0 auto;font:500 8.5px/1 var(--f-data,ui-monospace,monospace);font-style:normal;letter-spacing:.06em;padding:2px 4px;border-radius:4px;background:rgba(255,255,255,.2);align-self:center;text-shadow:none}
.tn-cap small:empty,.tn-cap em[hidden]{display:none}

/* 금속 눈금 고리 */
.tn-arc{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;overflow:visible}
.tn-arc .e{fill:none;stroke:rgba(6,8,10,.26);stroke-width:2.8}
.tn-arc .m{fill:none;stroke-width:1.3}
.tn-arc .t{fill:none;stroke:rgba(242,242,243,.74);stroke-width:5.5}
.tn-arc .ts{fill:none;stroke:rgba(6,8,10,.3);stroke-width:5.5}
.tn-arc .tb{fill:none;stroke:#fff;stroke-width:9}
.tn-arc .k{fill:#f3f5f7;stroke:rgba(6,8,10,.45);stroke-width:.6}
.turn.mini .tn-arc,.turn.mini .tn-parts{display:none}

/* 부위 고리 */
.tn-part{position:absolute;left:0;top:0;height:28px;margin:0;padding:0 10px;border:0;border-radius:999px;background:none;color:inherit;font:500 12.5px/28px var(--f-body,inherit);white-space:nowrap;text-shadow:var(--tsh);pointer-events:auto;cursor:pointer;will-change:transform,opacity;touch-action:none;-webkit-tap-highlight-color:transparent}
.tn-part[aria-selected="true"]{background:rgba(255,255,255,.2);font-weight:600;color:#fff;box-shadow:inset 0 0 10px rgba(255,255,255,.16)}
.tn-part[aria-selected="true"]::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,#fff,rgba(255,255,255,.7) 45%,rgba(255,255,255,.4));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none}
.tn-part.live::after{content:"";position:absolute;top:3px;right:5px;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff}
.tn-parts:focus-visible .tn-part[aria-selected="true"]{outline:2px solid rgba(240,240,241,.95);outline-offset:2px}

/* 헤어 스타일러 작은 줄(여자·남자 + 칸) — 헤어를 고른 동안만 */
.tn-sub{position:absolute;z-index:3;left:46px;right:46px;top:2px;height:28px;display:flex;gap:5px;align-items:center;justify-content:safe center;overflow-x:auto;scrollbar-width:none;touch-action:pan-x}
.tn-sub::-webkit-scrollbar{display:none}
.tn-sub[hidden]{display:none}
/* 줄이 화면보다 길 때 — 더 있는 쪽 끝을 흐리게(마지막 칸이 뚝 잘려 보이지 않게, 11-13) */
.tn-sub.more{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent)}
.tn-sub.moreL{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 34px),transparent)}
.tn-sub.more.moreL{-webkit-mask-image:linear-gradient(to right,transparent,#000 34px,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(to right,transparent,#000 34px,#000 calc(100% - 34px),transparent)}
.tn-sub button{position:relative;flex:0 0 auto;height:24px;padding:0 9px;border:0;border-radius:999px;background:rgba(255,255,255,.05);color:inherit;font:500 11px/24px var(--f-body,inherit);white-space:nowrap;text-shadow:var(--tsh);cursor:pointer}
.tn-sub button::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.2) 42%,rgba(8,10,12,.3));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none}
.tn-sub button[aria-pressed="true"]{background:rgba(255,255,255,.26);font-weight:600}
.tn-sub button.g{padding:0 8px}
.tn-sub i{flex:0 0 1px;width:1px;height:12px;background:rgba(255,255,255,.4);margin:0 2px}

/* 아래 두 귀퉁이 — 나가기 · 다시 맞추기(작게, 대표 11-09 「설정 버튼은 최대한 작게 하단에」) */
.tn-btn{position:absolute;z-index:12;top:126px;width:32px;height:32px;margin:0;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.06);color:#f3f5f7;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.tn-btn::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(255,255,255,.8),rgba(255,255,255,.2) 45%,rgba(8,10,12,.3));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none}
.tn-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.7))}
.tn-btn:active{background:rgba(255,255,255,.3)}
.tn-btn:focus-visible{outline:2px solid rgba(240,240,241,.95);outline-offset:2px}
.tn-x{left:max(10px,env(safe-area-inset-left,0px))}
.tn-re{right:max(10px,env(safe-area-inset-right,0px))}

/* 강도 막대 — 가운데 견본 것 한 줄만(여러 줄 쌓지 않는다) */
.stage.turnui>.sliders:not(:has(.liddial)){left:50%;right:auto;transform:translateX(-50%);width:min(74%,290px);padding:0;bottom:calc(var(--dockH,0px) - 2px)}
.stage.turnui .sliders.many{grid-template-columns:minmax(0,1fr);row-gap:0}
.stage.turnui .sliders .sl.tn-hide{display:none}
.stage.turnui .sliders .sl:not(.liddial),.stage.turnui .sliders.many .sl:not(.liddial){display:grid;grid-template-columns:minmax(0,1fr) 3ch;grid-template-areas:none;align-items:center;gap:9px;min-height:32px;padding:0;font-size:12px}
.stage.turnui .sliders .sl:not(.liddial) .sl-n{display:none}
.stage.turnui .sliders .sl:not(.liddial) input,.stage.turnui .sliders.many .sl:not(.liddial) input{grid-area:auto;height:30px}
.stage.turnui .sliders .sl:not(.liddial) output,.stage.turnui .sliders.many .sl:not(.liddial) output{grid-area:auto;color:#fff;font-size:12px;text-shadow:var(--tsh,0 1px 2px rgba(0,0,0,.8))}
.stage.turnui .sl:not(.liddial) input::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,.5),rgba(255,255,255,.92) 50%,rgba(255,255,255,.5));box-shadow:0 0 0 .6px rgba(6,8,10,.3)}
.stage.turnui .sl:not(.liddial) input::-webkit-slider-thumb{width:22px;height:22px;margin-top:-9.5px;border:0;background:radial-gradient(circle at 38% 32%,#fff,#cdd4db 55%,#69727c);box-shadow:0 0 0 .7px rgba(6,8,10,.5),0 1px 4px rgba(0,0,0,.5)}
.stage.turnui .sl:not(.liddial) input::-moz-range-track{height:3px;border-radius:2px;background:rgba(255,255,255,.8)}
.stage.turnui .sl:not(.liddial) input::-moz-range-thumb{width:20px;height:20px;border:0;background:radial-gradient(circle at 38% 32%,#fff,#cdd4db 55%,#69727c)}

/* 위쪽 알림 글 — 어두운 흐림 판 대신 유리 한 줄 */
@media (max-width:859px),(pointer:coarse){
  .stage.turnui.docked .status,.stage.turnui .snote,.stage.turnui .fnote,.stage.turnui .timer{background:rgba(255,255,255,.07);backdrop-filter:none;-webkit-backdrop-filter:none;border:0;color:#f6f8fa;text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 7px rgba(0,0,0,.45);box-shadow:inset 0 0 0 .8px rgba(255,255,255,.42)}
}
@media (prefers-reduced-motion:reduce){.tn-tok.shake{animation:none}}

/* 쉴 때(아직 아무것도 안 켠 때) 얼굴을 절반 밝기로 어둡게 하던 것을 푼다 — 거울은 처음부터 밝게(대표 「어두워 얼굴이 안보이고」) */
.stage.turnui.locked.dim #cam,.stage.turnui.locked.dim #warp{filter:none}

/* 확대경은 뺀다(11-11 대표 「확대경빼고」) — 단추와 창을 숨긴다 */
.stage.turnui .liddial .lr-mag{display:none}
.stage.turnui .lidmag{display:none!important}
/* 미니화면 — 단추는 나가기 옆. 누르면 회전판을 접고 왼쪽 아래 모서리에 가로 1/3 · 9:16 · 각진 화면 */
.tn-mn[aria-pressed="true"]{background:rgba(255,255,255,.28);box-shadow:0 0 10px rgba(255,255,255,.3)}
.turn.fold{height:48px}
.turn.fold.has-sub{height:48px}
.turn.fold .tn-items,.turn.fold .tn-parts,.turn.fold .tn-arc,.turn.fold .tn-cap,.turn.fold .tn-sub{display:none}
.turn.fold .tn-btn{top:8px!important;left:auto!important}
.turn.fold .tn-x{right:calc(max(10px,env(safe-area-inset-right,0px)) + 76px)!important}
.turn.fold .tn-mn{right:calc(max(10px,env(safe-area-inset-right,0px)) + 38px)!important}
.turn.fold .tn-re{right:max(10px,env(safe-area-inset-right,0px))!important}
.tn-mini{position:absolute;left:0;bottom:0;z-index:6;width:33.333%;aspect-ratio:9/16;border-radius:0;overflow:hidden;background:rgba(12,14,18,.34);box-shadow:inset 0 0 0 1px rgba(255,255,255,.82),0 0 0 .6px rgba(6,8,10,.45),0 6px 18px rgba(0,0,0,.28)}
.tn-mini[hidden]{display:none}
.tn-mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tn-mini img[hidden]{display:none}
.tn-mini-add{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:none;color:#fff;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tn-mini-add svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
.tn-mini.has .tn-mini-add{inset:auto 5px 5px auto;width:28px;height:28px;border-radius:50%;background:rgba(12,14,18,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.tn-mini.has .tn-mini-add svg{width:15px;height:15px}
.stage.hold .tn-mini{opacity:.25}
/* 미니화면을 연 동안(회전판 접힘)은 강도 막대도 감춘다 — 미니화면과 겹친다 */
.stage.turnui:has(.turn.fold)>.sliders .sl:not(.liddial){display:none}
/* 미니화면 사진 → 눈·코·입(11-12) — 재는 동안 얇은 훑는 선 하나, 사진 지우기 작은 ✕(오른쪽 위) */
.tn-mini img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.tn-mini-scan{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.9);box-shadow:0 0 6px rgba(255,255,255,.7);opacity:0;pointer-events:none}
.tn-mini.scan .tn-mini-scan{opacity:1;animation:tnScan 1.3s linear infinite}
@keyframes tnScan{from{top:0}to{top:100%}}
@media (prefers-reduced-motion:reduce){.tn-mini.scan .tn-mini-scan{animation:none;top:50%}}
.tn-mini-del{position:absolute;top:5px;right:5px;width:24px;height:24px;margin:0;padding:0;border:0;border-radius:50%;background:rgba(12,14,18,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);color:#fff;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tn-mini-del[hidden]{display:none}
.tn-mini-del svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* 세 줄 — 미니화면 오른쪽 옆, 아래 단추 줄 위. 칩 = 헤어 작은 줄(.tn-sub)과 같은 유리, 막대 = 강도 막대와 같은 금속 */
.tn-mx{position:absolute;z-index:6;right:max(10px,env(safe-area-inset-right,0px));left:calc(33.333% + 10px);bottom:56px;display:grid;row-gap:2px;color:#f3f5f7}
.tn-mx[hidden]{display:none}
.tn-mx-r{display:grid;grid-template-columns:auto minmax(0,1fr) 3ch;align-items:center;gap:8px;min-height:30px}
.tn-mx-c{position:relative;min-width:38px;height:24px;margin:0;padding:0 9px;border:0;border-radius:999px;background:rgba(255,255,255,.05);color:inherit;font:500 11px/24px var(--f-body,inherit);white-space:nowrap;text-shadow:var(--tsh,0 1px 2px rgba(0,0,0,.8));cursor:pointer;-webkit-tap-highlight-color:transparent}
.tn-mx-c::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.2) 42%,rgba(8,10,12,.3));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none}
.tn-mx-c[aria-pressed="true"]{background:rgba(255,255,255,.26);font-weight:600}
.tn-mx-c:focus-visible{outline:2px solid rgba(240,240,241,.95);outline-offset:2px}
.tn-mx-r.off .tn-mx-c{opacity:.4}
.tn-mx-r input{width:100%;height:30px;margin:0;background:none;-webkit-appearance:none;appearance:none;touch-action:pan-y}
.tn-mx-r input:disabled{opacity:.35}
.tn-mx-r input::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,.5),rgba(255,255,255,.92) 50%,rgba(255,255,255,.5));box-shadow:0 0 0 .6px rgba(6,8,10,.3)}
.tn-mx-r input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-8.5px;border:0;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff,#cdd4db 55%,#69727c);box-shadow:0 0 0 .7px rgba(6,8,10,.5),0 1px 4px rgba(0,0,0,.5)}
.tn-mx-r input::-moz-range-track{height:3px;border-radius:2px;background:rgba(255,255,255,.8)}
.tn-mx-r input::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff,#cdd4db 55%,#69727c)}
.tn-mx-r output{color:#fff;font-size:12px;text-align:right;font-variant-numeric:tabular-nums;text-shadow:var(--tsh,0 1px 2px rgba(0,0,0,.8))}
.tn-mx-r.off output{opacity:.4}
.stage.hold .tn-mx{opacity:.25}

/* ───── 흐림 없는 두꺼운 유리(11-12 대표 「이런 느낌의 글라스UI로 전체적으로」) ─────
   얼굴 위라서 뒤 흐림(backdrop-filter)·어두운 판은 쓰지 않는다. 몸체는 지금처럼 거의 투명 그대로,
   ① 바깥 금속 테(기존 ::before 테 + 바깥 가는 그늘선) ② 안쪽 얇은 테(outline 안으로) ③ 아래 가장자리 빛줄기
   ④ 오른쪽 아래 부드러운 그림자 ⑤ 오른쪽 아래 모서리 흰 반사 만 더한다.
   색: 대표 「푸르딩딩 빼고 맑은 투명 메탈」 — 테·반사·빛줄기 모두 무채색(흰색·은회색), 색 번짐 없음. 자리·크기·동작은 그대로. */
.tn-tok,.tn-btn,.tn-part[aria-selected="true"],.tn-mx-c,.tn-sub button,.liddial .lw-in button,#startBtn,#consentOk,#consentNo{
  background-image:radial-gradient(44% 70% at 100% 100%,rgba(255,255,255,.16),rgba(255,255,255,0) 72%)}
.tn-tok:not(:focus-visible),.tn-btn:not(:focus-visible),.tn-mx-c:not(:focus-visible),.liddial .lw-in button:not(:focus-visible),#startBtn:not(:focus-visible),#consentOk:not(:focus-visible),#consentNo:not(:focus-visible){outline:1px solid rgba(255,255,255,.34);outline-offset:-4px}
.tn-mx-c:not(:focus-visible),.tn-sub button:not(:focus-visible),.tn-part[aria-selected="true"]:not(:focus-visible){outline:1px solid rgba(255,255,255,.3);outline-offset:-3px}
.tn-tok{box-shadow:0 0 0 .6px rgba(6,8,10,.4),5px 8px 14px -6px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.16)}
.tn-tok.on{box-shadow:0 0 0 1.4px rgba(255,255,255,.96),0 0 16px rgba(255,255,255,.4),6px 10px 16px -6px rgba(0,0,0,.42)}
/* 견본 칸은 사진이 몸체를 덮으므로 빛줄기·무지갯빛을 사진 위 반사 층에 얹는다 */
.tn-tok .ph::after{background:linear-gradient(0deg,rgba(255,255,255,.62),rgba(255,255,255,0) 2.5px),linear-gradient(0deg,rgba(255,255,255,.26),rgba(255,255,255,0) 11px),radial-gradient(46% 66% at 100% 100%,rgba(255,255,255,.2),rgba(255,255,255,0) 72%),linear-gradient(142deg,rgba(255,255,255,.34),rgba(255,255,255,0) 30%,rgba(255,255,255,0) 72%,rgba(255,255,255,.14))}
.tn-btn,.tn-mx-c,.tn-sub button,.liddial .lw-in button{box-shadow:0 0 0 .6px rgba(6,8,10,.4),inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1.5px 0 rgba(255,255,255,.72),inset 0 -7px 8px -7px rgba(255,255,255,.5),4px 7px 12px -5px rgba(0,0,0,.4)}
.tn-part[aria-selected="true"]{box-shadow:inset 0 0 10px rgba(255,255,255,.16),0 0 0 .6px rgba(6,8,10,.4),inset 0 -1.5px 0 rgba(255,255,255,.72),inset 0 -7px 8px -7px rgba(255,255,255,.5),4px 7px 12px -5px rgba(0,0,0,.4)}
.tn-mn[aria-pressed="true"]{box-shadow:0 0 10px rgba(255,255,255,.3),0 0 0 .6px rgba(6,8,10,.4),inset 0 -1.5px 0 rgba(255,255,255,.8),4px 7px 12px -5px rgba(0,0,0,.4)}
.tn-mx-c[aria-pressed="true"],.tn-sub button[aria-pressed="true"]{box-shadow:0 0 0 .6px rgba(6,8,10,.4),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1.5px 0 rgba(255,255,255,.85),inset 0 -7px 8px -7px rgba(255,255,255,.6),4px 7px 12px -5px rgba(0,0,0,.4)}
/* 안내 카드·동의 창 단추 — 몸체 색은 그대로, 테·빛줄기·그림자만 */
#startBtn,#consentOk,#consentNo{border-color:rgba(255,255,255,.5) rgba(255,255,255,.18) rgba(255,255,255,.36) rgba(255,255,255,.24);box-shadow:0 0 0 .6px rgba(6,8,10,.5),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1.5px 0 rgba(255,255,255,.7),inset 0 -9px 10px -8px rgba(255,255,255,.45),6px 10px 18px -8px rgba(0,0,0,.55)}
@media (max-width:859px),(pointer:coarse){
  .stage.turnui.docked .status,.stage.turnui .snote,.stage.turnui .fnote,.stage.turnui .timer{background-image:radial-gradient(40% 90% at 100% 100%,rgba(255,255,255,.14),rgba(255,255,255,0) 72%);box-shadow:inset 0 0 0 .8px rgba(255,255,255,.46),0 0 0 .6px rgba(6,8,10,.36),inset 0 -1.5px 0 rgba(255,255,255,.62),inset 0 -7px 8px -7px rgba(255,255,255,.4),4px 7px 12px -5px rgba(0,0,0,.36);outline:1px solid rgba(255,255,255,.22);outline-offset:-4px}
}
/* 11-12 v5 「푸르딩딩 빼고」 — 쌍꺼풀 휠의 스캔 선 빛·눈금·초점 테의 옅은 푸른 기운을 무채색 흰빛으로(index.html 안 값은 그대로 두고 여기서 덮는다) */
.liddial .lw-scan{filter:drop-shadow(0 0 5px rgba(255,255,255,.9))}
.liddial .lrail button:focus-visible{outline-color:rgba(240,240,241,.9)}
.liddial .lwheel:focus-visible{outline-color:rgba(240,240,241,.9)}
.lidmag{box-shadow:0 0 0 1px rgba(240,240,241,.6),0 6px 18px rgba(0,0,0,.45)}
.liddial .lw-ticks line{stroke:rgba(240,240,241,.72)}
/* 11-12 v6 대표 「이것도 색 바꿔 투명메탈로」 — 안내 카드·끝 카드·동의 창의 남색 몸체와 민트 단추를 무채색 맑은 유리 + 은빛 금속 단추로.
   자리·크기·글·동작은 그대로. 이 묶음만 지우면 앞 판 색으로 돌아간다. */
:root{--ink:#0a0a0b;--panel:#1b1b1c;--raise:#262627;--mute:#a0a2a5}
.stage{background:#060606}
.card{background:linear-gradient(152deg,rgba(255,255,255,.2),rgba(255,255,255,.06) 30%,rgba(255,255,255,0) 52%),rgba(46,47,49,.86);backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid;border-color:rgba(255,255,255,.62) rgba(255,255,255,.2) rgba(255,255,255,.4) rgba(255,255,255,.3);
  box-shadow:0 0 0 .6px rgba(6,6,7,.6),inset 0 1px 0 rgba(255,255,255,.3),10px 18px 34px -14px rgba(0,0,0,.7);outline:1px solid rgba(255,255,255,.16);outline-offset:-5px}
.card p,.card ul{color:#b9bbbe}
.card .row{background:linear-gradient(rgba(40,41,43,0),rgba(40,41,43,.97) 30%);border-radius:0 0 15px 15px;box-shadow:inset 0 -1.5px 0 rgba(255,255,255,.55),inset 0 -10px 12px -10px rgba(255,255,255,.3)}
.queue{background:rgba(40,41,43,.9);border-color:rgba(255,255,255,.3)}
.sheet{background:linear-gradient(170deg,rgba(255,255,255,.14),rgba(255,255,255,0) 38%),#222324;border-top:1px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 -20px 60px rgba(0,0,0,.55)}
.chk{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22)}
.chk input{accent-color:#e4e5e7}
.sheet .links a{color:#e9eaeb}
#startBtn,#consentOk,#endOk{background-color:#e6e7e8;background-image:linear-gradient(180deg,#ffffff,#eff0f1 46%,#cdcfd2 54%,#e3e4e6);color:#0c0c0d;
  border:1px solid;border-color:rgba(255,255,255,.95) rgba(150,152,156,.7) rgba(120,122,126,.75) rgba(190,192,195,.8);
  box-shadow:0 0 0 .6px rgba(6,6,7,.7),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1.5px 0 rgba(255,255,255,.75),0 0 14px rgba(255,255,255,.14),6px 10px 18px -8px rgba(0,0,0,.6)}
#startBtn:not(:focus-visible),#consentOk:not(:focus-visible),#endOk:not(:focus-visible){outline:1px solid rgba(60,62,66,.22);outline-offset:-4px}
#startBtn:focus-visible,#consentOk:focus-visible,#endOk:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* 11-12 v7 미니화면 = 작은 카메라(뒤 카메라). 영상이 미니화면을 꽉 채우고, 아래 가운데 흰 동그라미로 찍는다. 왼쪽 아래는 사진첩 */
.tn-mini-v{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;display:block;background:#000}
.tn-mini-v[hidden],.tn-mini-shot[hidden],.tn-mini-lib[hidden]{display:none}
.tn-mini-shot{position:absolute;z-index:2;left:50%;bottom:9px;width:38px;height:38px;margin:0 0 0 -19px;padding:0;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.4),0 0 0 3.5px rgba(255,255,255,.92),0 2px 8px rgba(0,0,0,.45);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s}
.tn-mini-shot::after{content:"";position:absolute;inset:-8px}
.tn-mini-shot:active{transform:scale(.9)}
.tn-mini-lib{position:absolute;z-index:2;left:6px;bottom:14px;width:28px;height:28px;margin:0;padding:0;border:0;border-radius:50%;background:rgba(12,12,13,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);color:#fff;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tn-mini-lib::after{content:"";position:absolute;inset:-6px}
.tn-mini-lib svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tn-mini.live .tn-mini-add,.tn-mini.live .tn-mini-del{display:none}
.tn-mini.opening .tn-mini-add{pointer-events:none}
.tn-mini.opening .tn-mini-add svg{animation:tnMiniWait .7s ease-in-out infinite alternate}
@keyframes tnMiniWait{from{opacity:.3}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.tn-mini.opening .tn-mini-add svg{animation:none;opacity:.5}}
.tn-mini-shot:focus-visible,.tn-mini-lib:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* 11-12 v8 미니화면 옮기기·크기 바꾸기 — 손짓을 미니화면이 받는다(화면 밀림·확대 없음). 옮기는 동안만 테를 조금 밝게 */
.tn-mini,.tn-mini *{touch-action:none}
.tn-mini{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:grab}
.tn-mini.drag{cursor:grabbing;box-shadow:inset 0 0 0 1px #fff,0 0 0 .6px rgba(6,8,10,.45),0 10px 26px rgba(0,0,0,.4)}
/* 11-12 v8 미니 카메라의 얼굴 그물(영상 위 · 단추 아래) */
.tn-mini-net{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;pointer-events:none}
.tn-mini-net[hidden]{display:none}
.tn-mini-fit{position:absolute;z-index:3;top:5px;left:5px;width:28px;height:28px;margin:0;padding:0;border:0;border-radius:50%;background:rgba(12,12,13,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);color:#fff;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tn-mini-fit[hidden]{display:none}
.tn-mini-fit::after{content:"";position:absolute;inset:-7px}
.tn-mini-fit svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tn-mini-fit:focus-visible{outline:2px solid #fff;outline-offset:2px}
.tn-mini-del{z-index:3}
/* 11-12 「AI」 견본 이용권 결제 창 — 동의 창(#consent)과 같은 맑은 투명 메탈(무채색 유리 · 은빛 테). 시트는 카메라 영상 밖(화면 아래 고정)이라 흐림 없이 몸체 색만. 청록·민트 안 씀 */
.paysheet{gap:12px}
.paysheet #payBuy,.paysheet #payPass{display:grid;gap:10px}
.paysheet #payBuy[hidden],.paysheet #payPass[hidden]{display:none}
.pay-taste{margin:0;font-size:13px;color:#c9cbce}
.pay-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pay-opt{position:relative;display:grid;gap:3px;justify-items:start;text-align:left;padding:12px 12px 11px;border-radius:14px;border:1px solid;border-color:rgba(255,255,255,.34) rgba(255,255,255,.12) rgba(255,255,255,.24) rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#f3f5f7;cursor:pointer;
  box-shadow:0 0 0 .6px rgba(6,6,7,.5),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1.5px 0 rgba(255,255,255,.35),4px 7px 12px -6px rgba(0,0,0,.5)}
.pay-opt b{font-size:15px;font-weight:700}
.pay-opt span{font-size:12px;color:#c3c5c8;font-variant-numeric:tabular-nums}
.pay-opt[aria-checked="true"]{background:linear-gradient(160deg,rgba(255,255,255,.3),rgba(255,255,255,.12) 55%,rgba(255,255,255,.18));border-color:rgba(255,255,255,.95) rgba(255,255,255,.5) rgba(255,255,255,.75) rgba(255,255,255,.6);
  box-shadow:0 0 0 .6px rgba(6,6,7,.6),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1.5px 0 rgba(255,255,255,.8),0 0 14px rgba(255,255,255,.18),4px 7px 12px -6px rgba(0,0,0,.5)}
.pay-opt[aria-checked="true"] span{color:#fff}
.pay-opt:focus-visible{outline:2px solid #fff;outline-offset:2px}
#payGo,#payPassOk{width:100%;padding:13px 14px;font-size:15px;font-weight:700;background-color:#e6e7e8;background-image:linear-gradient(180deg,#ffffff,#eff0f1 46%,#cdcfd2 54%,#e3e4e6);color:#0c0c0d;
  border:1px solid;border-color:rgba(255,255,255,.95) rgba(150,152,156,.7) rgba(120,122,126,.75) rgba(190,192,195,.8);border-radius:12px;
  box-shadow:0 0 0 .6px rgba(6,6,7,.7),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1.5px 0 rgba(255,255,255,.75),0 0 14px rgba(255,255,255,.14),6px 10px 18px -8px rgba(0,0,0,.6)}
#payGo[disabled]{opacity:.45}
#payGo:focus-visible,#payPassOk:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pay-law{display:flex;gap:8px;align-items:flex-start;margin:-2px 0 0;font-size:11.5px;line-height:1.5;color:#b9bbbe;cursor:pointer}
.pay-law input{flex:0 0 16px;width:16px;height:16px;margin:1px 0 0;accent-color:#e4e5e7}
.pay-law a{color:#e9eaeb}
.paysheet #payClose,#endClose{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28);color:#f3f5f7}
.pay-paypal{background:#fff;border-radius:12px;padding:10px;min-height:120px}
.pay-paypal[hidden]{display:none}
.pay-ticket{display:grid;gap:4px;padding:14px 14px 13px;border-radius:14px;border:1px solid;border-color:rgba(255,255,255,.7) rgba(255,255,255,.22) rgba(255,255,255,.45) rgba(255,255,255,.3);
  background:linear-gradient(152deg,rgba(255,255,255,.22),rgba(255,255,255,.06) 40%,rgba(255,255,255,.1));box-shadow:0 0 0 .6px rgba(6,6,7,.6),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1.5px 0 rgba(255,255,255,.6),6px 10px 18px -10px rgba(0,0,0,.6)}
.pay-ticket b{font-size:15px;font-weight:700;color:#fff}
.pay-ticket small{font-size:12px;color:#c9cbce}
.pay-ticket[hidden]{display:none}
/* 11-12 미니화면 안내 한 줄(못 쓰는 사진일 때) — 사진 위 아래쪽, 무채색 유리 */
.tn-mini-why{position:absolute;z-index:3;left:6px;right:6px;bottom:44px;padding:6px 8px;border-radius:10px;background:rgba(12,12,13,.58);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);color:#fff;font:600 12px/1.35 var(--f-body,inherit);text-align:center;pointer-events:none;word-break:keep-all}
.tn-mini-why[hidden]{display:none}