/* GOAL STOP 화면 — v2(큰 숫자 · 가로 게이지) 2026-10-22
   큰 화면(data-role=screen) 치수는 무대 단위 --u(FHD 10px · 4K 20px)로 쓴다. 휴대폰(controller)은 px.
   단계(data-phase): idle · queued · ready · countdown · intro(도입, STOP 비활성) · playing · stopped · success · failure
   motion=focus(5,000 집중 왕복)이면 data-motion=focus — 게이지에 도전 구간을 그린다.
   판정·숫자는 서버 값만 표시한다(이 파일은 모양만 정한다). 이전 A안 스타일은 git 이력에 보존. */
:root{--accent:#a7dbe5;--secondary:#dce8f6;--bg:#081b2a;--ink:#f4f7fb;--muted:#acbfd2;--dim:#7f9aa8;--line:#ffffff24;--panel:#ffffff08;
  --mint:#73ddc9;--cyan:#8ff0e6;--gold1:#fff6dc;--gold2:#f3cf86;--gold3:#c9963f;
  --sans:"Pretendard","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;--num:"SF Pro Display","Helvetica Neue",Arial,sans-serif;color-scheme:dark}
*{box-sizing:border-box}[hidden]{display:none!important}
html{background:var(--bg)}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;overflow-x:hidden;color:var(--ink);font-family:var(--sans);word-break:keep-all;-webkit-font-smoothing:antialiased;
  background:radial-gradient(90% 70% at 50% 46%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%),linear-gradient(180deg,#04101a 0%,var(--bg) 52%,#05141d 100%)}
button,input{font:inherit}
.brand,main,footer{position:relative;z-index:1}

/* ── 배경: 빛 물결 · 키비주얼 · 수평선 ── */
.event-atmosphere,.keyvisual{position:fixed;inset:0;pointer-events:none}
.event-atmosphere i{position:absolute;left:-10%;width:120%;border-top:1px solid color-mix(in srgb,var(--cyan) 22%,transparent);border-radius:50%;filter:blur(.4px)}
.event-atmosphere i:nth-child(1){top:24%;height:40%;transform:rotate(-4deg)}
.event-atmosphere i:nth-child(2){top:31%;height:52%;transform:rotate(3deg);border-top-color:color-mix(in srgb,var(--gold2) 16%,transparent)}
.event-atmosphere i:nth-child(3){top:56%;height:30%;transform:rotate(-2deg);opacity:.6}
.keyvisual{background-image:var(--event-kv,none);background-position:center;background-size:cover;opacity:.07;transition:opacity .4s}
body[data-phase=idle] .keyvisual{opacity:.5}
main::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--cyan) 45%,transparent),transparent);box-shadow:0 0 18px color-mix(in srgb,var(--cyan) 40%,transparent);pointer-events:none}
body[data-phase=idle] main::after{opacity:.35}

/* ── 헤더(로고·행사명 크게, 프로그램은 보조) ── */
.brand{display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}
.brand-left{display:flex;align-items:center;gap:24px;min-width:0}
.brand-event{display:flex;flex-direction:column;gap:4px;min-width:0}
#logo{display:block;object-fit:contain;object-position:left center}
#eventName{font-weight:800;letter-spacing:.01em;font-family:var(--num);overflow-wrap:anywhere}
.demo-tag{color:var(--muted);white-space:nowrap}
.program-identity{text-align:right}
.eyebrow{font-family:var(--num);font-weight:800;letter-spacing:.28em;color:var(--mint);white-space:nowrap}
#programTitle{margin:0;font-weight:600;color:var(--secondary)}

/* ── 공통 요소 ── */
main{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
.stage{flex:1;min-width:0;text-align:center;position:relative}
.event-intro{display:none}
.topline{display:flex;justify-content:flex-end}
.participant{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.record{display:flex;flex-direction:column;align-items:center}
.target{order:1;display:inline-flex;align-items:center;gap:.6em;white-space:nowrap;border-radius:999px;color:color-mix(in srgb,var(--gold2) 85%,white);
  background:linear-gradient(180deg,rgba(40,32,14,.78),rgba(18,14,6,.86));border:2px solid color-mix(in srgb,var(--gold2) 80%,white);box-shadow:0 0 18px color-mix(in srgb,var(--gold2) 40%,transparent)}
.target #targetLabel{font-weight:700;letter-spacing:.06em}
.target-amount{display:inline-flex;align-items:baseline;gap:.2em}
.target strong{font-family:var(--num);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,var(--gold1),#e8b862);-webkit-background-clip:text;background-clip:text;color:transparent}
.target small{font-weight:800;color:var(--gold1)}
.tolerance{color:rgba(255,236,200,.85);padding-left:.8em;border-left:1.5px solid color-mix(in srgb,var(--gold2) 45%,transparent)}
.number-label{order:2;font-family:var(--num);font-weight:800;letter-spacing:.3em;color:var(--dim)}
.number-wrap{order:3;position:relative;display:flex;align-items:baseline;justify-content:center;gap:.04em}
.number{position:relative;z-index:1;font-family:var(--num);font-weight:800;line-height:.95;letter-spacing:.005em;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#ffffff 0%,#e6fbff 45%,#9ff0f2 80%,#55cfd2 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 .07em color-mix(in srgb,var(--cyan) 55%,transparent)) drop-shadow(0 .025em 0 rgba(0,8,14,.55))}
.number-unit{position:relative;z-index:1;font-weight:700;color:color-mix(in srgb,var(--secondary) 80%,transparent)}
.track{order:4;position:relative;border-radius:999px;background:linear-gradient(180deg,#010608,#0b2430);box-shadow:0 0 0 .35em rgba(2,10,16,.85),0 0 0 .42em color-mix(in srgb,var(--cyan) 22%,transparent)}
.track #fill{position:absolute;left:0;top:0;bottom:0;width:var(--fill,0);min-width:1em;border-radius:999px;background:linear-gradient(90deg,#0f6b72,#38c8cf 55%,#b8fbff 92%,#fff);box-shadow:0 0 1.2em color-mix(in srgb,var(--cyan) 80%,transparent)}
.track #fill::after{content:'';position:absolute;right:-.15em;top:50%;width:.9em;height:.9em;transform:translateY(-50%);border-radius:50%;background:#fff;box-shadow:0 0 1em .3em rgba(210,255,255,.9)}
.track .zone{position:absolute;left:var(--zone,100%);right:0;top:-.55em;bottom:-.55em;border-radius:.5em;background:linear-gradient(180deg,rgba(255,226,160,.16),rgba(160,110,40,.12));border:1.5px solid color-mix(in srgb,var(--gold2) 60%,transparent)}
.track #targetMark{position:absolute;left:var(--mark,100%);top:-.8em;bottom:-.8em;width:.28em;margin-left:-.14em;border-radius:.2em;background:var(--gold1);box-shadow:0 0 .8em color-mix(in srgb,var(--gold2) 90%,transparent)}
.track #targetMark::after{content:attr(data-goal);position:absolute;bottom:calc(100% + .45em);left:50%;transform:translateX(-50%);white-space:nowrap;font:800 .62em/1 var(--num);letter-spacing:.14em;color:var(--gold2)}
body[data-motion=focus] .track #targetMark{left:calc(var(--mark,100%) - .14em)}
.track-labels{order:5;position:relative;display:flex;justify-content:space-between;color:color-mix(in srgb,var(--muted) 85%,transparent);font-family:var(--num);font-variant-numeric:tabular-nums}
.track-labels #rangeLow{position:absolute;left:var(--zone,75%);top:0;transform:translateX(-50%);white-space:nowrap;color:color-mix(in srgb,var(--gold2) 85%,white)}
.track-labels #rangeLow:empty{display:none}
h1{order:6;margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.subtitle{order:7;margin:0;color:var(--muted)}
.difference{order:8;color:var(--mint);font-weight:700}
.result-detail{order:9;color:var(--dim)}
.notice{color:var(--muted);margin:0}
.difference:empty,.result-detail:empty,.notice:empty,.subtitle:empty{display:none}

/* 정지 순간 · 성공 · 재도전 숫자 */
body[data-phase=stopped] .number{background:linear-gradient(180deg,#fff,#d8fbff);-webkit-background-clip:text;background-clip:text;animation:freeze .5s ease-out}
body[data-phase=success] .number{background:linear-gradient(180deg,#fffaf0 0%,#ffe3a3 50%,#d7a24a 100%);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 .09em rgba(255,214,140,.75)) drop-shadow(0 .025em 0 rgba(30,18,4,.6))}
body[data-phase=success] .number-wrap{animation:goalPop 1.15s cubic-bezier(.2,.9,.25,1.15) both}   /* 숫자·단위를 함께 확대 */
body[data-phase=success] .number-unit{color:var(--gold1)}
body[data-phase=failure] .number{background:linear-gradient(180deg,#ffffff,#9fb4bd);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 .025em 0 rgba(0,8,14,.55))}
body[data-phase=success] h1{color:var(--gold1);text-shadow:0 0 .5em rgba(255,214,140,.55);animation:rise .6s .45s both}
body[data-phase=success] .subtitle,body[data-phase=success] .difference{animation:rise .6s .6s both}
@keyframes goalPop{0%{transform:scale(1)}38%{transform:scale(1.3)}62%{transform:scale(1.12)}100%{transform:scale(1.16)}}
@keyframes freeze{0%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(.6em)}to{opacity:1;transform:none}}

/* 성공 연출: 빛살 + 빛 알갱이(약 2.5초 집중 후 정착) */
.celebrate{display:none;position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:0;font-size:.1em}   /* 1em = 숫자 크기의 1/10 */
body[data-phase=success] .celebrate{display:block}
.celebrate b{position:absolute;left:-18em;top:-18em;width:36em;height:36em;border-radius:50%;
  background:repeating-conic-gradient(rgba(255,226,160,.22) 0 4deg,transparent 4deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 18%,transparent 68%);mask:radial-gradient(circle,#000 18%,transparent 68%);
  animation:rays 2.6s ease-out both,spin 24s linear infinite}
.celebrate b::after{content:'';position:absolute;inset:28%;border-radius:50%;background:radial-gradient(circle,rgba(255,236,190,.55),transparent 70%)}
.celebrate i{position:absolute;left:0;top:0;width:.5em;height:.5em;margin:-.25em 0 0 -.25em;border-radius:50%;background:#fff3cf;box-shadow:0 0 .6em .25em rgba(255,214,140,.9);
  --a:0deg;--d:13em;animation:burst 1.5s cubic-bezier(.15,.7,.3,1) both}
.celebrate i:nth-child(odd){--d:17em;background:#c4f2e8;box-shadow:0 0 .6em .25em rgba(160,245,230,.8)}
.celebrate i:nth-child(2){--a:10deg}.celebrate i:nth-child(3){--a:30deg}.celebrate i:nth-child(4){--a:50deg}.celebrate i:nth-child(5){--a:70deg}.celebrate i:nth-child(6){--a:90deg}
.celebrate i:nth-child(7){--a:110deg}.celebrate i:nth-child(8){--a:130deg}.celebrate i:nth-child(9){--a:150deg}.celebrate i:nth-child(10){--a:170deg}.celebrate i:nth-child(11){--a:190deg}
.celebrate i:nth-child(12){--a:210deg}.celebrate i:nth-child(13){--a:230deg}.celebrate i:nth-child(14){--a:250deg}.celebrate i:nth-child(15){--a:270deg}.celebrate i:nth-child(16){--a:290deg}
.celebrate i:nth-child(17){--a:310deg}.celebrate i:nth-child(18){--a:330deg}.celebrate i:nth-child(19){--a:350deg}
@keyframes burst{0%{transform:rotate(var(--a)) translateX(0) scale(2);opacity:0}12%{opacity:1}100%{transform:rotate(var(--a)) translateX(var(--d)) scale(.5);opacity:0}}
@keyframes rays{0%{opacity:0;transform:scale(.6)}25%{opacity:1;transform:scale(1.08)}100%{opacity:.45;transform:scale(1)}}
@keyframes spin{to{rotate:360deg}}

/* 가상 상품 카드 · 참여 카드 · 개인 코드 */
.gift{display:flex;align-items:center;text-align:left;border-radius:1.1em;background:linear-gradient(155deg,rgba(30,74,90,.68),rgba(10,33,46,.86));border:1px solid color-mix(in srgb,var(--cyan) 22%,transparent);box-shadow:0 1.6em 3em rgba(2,10,16,.55),inset 0 1px 0 rgba(214,244,238,.2)}
.gift img{object-fit:contain;filter:drop-shadow(0 .5em 1em rgba(0,0,0,.4))}
.gift .eyebrow{color:var(--gold2)}
.gift h2{margin:.3em 0;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.gift p{margin:0;color:var(--dim);line-height:1.5}
body[data-phase=success] .gift{animation:giftIn .7s 1.25s both}
@keyframes giftIn{from{opacity:0;transform:translateY(1em) scale(.96)}to{opacity:1;transform:none}}
.join-card{flex-shrink:0;text-align:left;border-radius:1.2em;background:linear-gradient(155deg,rgba(30,74,90,.62),rgba(8,27,40,.86));border:1px solid color-mix(in srgb,var(--cyan) 20%,transparent);box-shadow:0 2em 4em rgba(2,10,16,.55),inset 0 1px 0 rgba(214,244,238,.22);backdrop-filter:blur(6px)}
.join-card .eyebrow{color:var(--muted)}
.join-card h2{margin:.4em 0 .7em;font-weight:800;letter-spacing:-.02em}
.qr-frame{background:#fff;border-radius:.6em;box-shadow:0 0 0 .35em rgba(255,255,255,.06)}
.qr-frame img{display:block;width:100%;height:100%}
.join-steps{list-style:none;padding:0;margin:0;color:var(--secondary);line-height:1.6}
.join-steps b{font-family:var(--num);color:var(--gold2);margin-right:.6em}
.join-hint{color:var(--dim);line-height:1.55}
.personal{display:grid;gap:12px;justify-items:center;margin:20px auto;padding:20px;max-width:320px;border-radius:14px;background:#fff;color:#0b1f2b}
.personal strong{font:900 36px/1 var(--num);letter-spacing:.16em}
.personal img{width:140px}
.personal span{font-size:12px;color:#5d7480;font-weight:700}

/* 참여 폼 · 버튼(휴대폰) */
#joinForm{display:grid;gap:10px;text-align:left;margin-top:22px}
#joinForm label{font-size:12px;color:var(--muted);letter-spacing:.04em}
#joinForm input{height:52px;padding:0 16px;border-radius:14px;border:1px solid color-mix(in srgb,var(--cyan) 26%,transparent);background:rgba(8,27,40,.8);color:var(--ink);font-size:17px}
#joinButton,.actions button{height:58px;border:0;border-radius:18px;font-size:18px;font-weight:800;color:#2a1d05;cursor:pointer;
  background:linear-gradient(180deg,#fff3d4 0%,#f3cf86 45%,#e0a952 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.85),inset 0 -6px 12px rgba(150,95,25,.35),0 6px 0 #8a6326}
#joinButton:disabled{filter:saturate(.3) brightness(.7)}
#joinButton span{margin-left:6px}
.actions{display:flex;gap:10px;margin-top:20px}
.actions button{flex:1}
.actions button.secondary{color:var(--ink);background:linear-gradient(180deg,#1d4756,#0e2a36);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 6px 0 #04161e}
.stop-button{position:relative;display:grid;place-items:center;margin:26px auto 44px;border:0;padding:0;border-radius:50%;cursor:pointer;touch-action:manipulation;
  width:216px;height:216px;font:900 46px/1 var(--num);letter-spacing:.08em;padding-left:.08em;color:#3a2606;text-shadow:0 2px 0 rgba(255,255,255,.55);
  background:radial-gradient(circle at 36% 28%,#fffdf6 0%,#ffe8b3 20%,#f0c873 52%,#c08c3c 86%,#8f6327 100%);
  box-shadow:0 0 0 9px #1c2b33,0 0 0 12px #8ea3ab,0 0 0 14px #2b3a42,inset 0 -14px 22px rgba(110,70,20,.5),inset 0 5px 8px rgba(255,255,255,.7),0 12px 0 6px #0d1a20,0 0 46px rgba(239,199,121,.45);transition:transform .07s}
.stop-button:active:not(:disabled){transform:translateY(5px)}
.stop-button:disabled{cursor:default;filter:saturate(.2) brightness(.55)}
.stop-button::after{content:attr(data-hint);position:absolute;top:calc(100% + 26px);left:50%;transform:translateX(-50%);white-space:nowrap;font:700 15px/1.3 var(--sans);letter-spacing:0;padding:0;color:var(--muted);text-shadow:none}
body[data-phase=playing] .stop-button:not(:disabled){animation:stopPulse 1.3s ease-in-out infinite}
@keyframes stopPulse{50%{box-shadow:0 0 0 9px #1c2b33,0 0 0 12px #8ea3ab,0 0 0 14px #2b3a42,inset 0 -14px 22px rgba(110,70,20,.5),inset 0 5px 8px rgba(255,255,255,.7),0 12px 0 6px #0d1a20,0 0 70px rgba(255,214,140,.85)}}

footer{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--line);color:var(--dim)}
.footer-meta{display:flex;gap:16px;align-items:center}
#connection[data-online=true]{color:var(--mint)}

/* ═════════ 큰 화면(무대 단위 --u: FHD 10px · 4K 20px) ═════════ */
body[data-role=screen]{--u:clamp(3.2px,min(100vw / 192,100vh / 108),40px);height:100vh;min-height:0;overflow:hidden}
body[data-role=screen] .brand{min-height:calc(var(--u)*11.5);padding:calc(var(--u)*2) calc(var(--u)*8.4)}
body[data-role=screen] .brand-left{gap:calc(var(--u)*3)}
body[data-role=screen] #logo{height:calc(var(--u)*6.6);max-width:calc(var(--u)*34)}
body[data-role=screen] .brand-event{border-left:1px solid var(--line);padding-left:calc(var(--u)*3)}
body[data-role=screen] #eventName{font-size:calc(var(--u)*3.6)}
body[data-role=screen] .demo-tag{font-size:calc(var(--u)*1.6);letter-spacing:.06em}
body[data-role=screen] .eyebrow{font-size:calc(var(--u)*1.5)}
body[data-role=screen] #programTitle{font-size:calc(var(--u)*2);margin-top:calc(var(--u)*.5)}
body[data-role=screen] main{padding:calc(var(--u)*2) calc(var(--u)*8.4) calc(var(--u)*3);gap:calc(var(--u)*6)}
body[data-role=screen] .topline{position:absolute;right:0;top:0}
body[data-role=screen] .participant{font-size:calc(var(--u)*2.2)}
body[data-role=screen] .target{padding:calc(var(--u)*1.1) calc(var(--u)*3.4);font-size:calc(var(--u)*2.2)}
body[data-role=screen] .target strong{font-size:calc(var(--u)*5.2)}
body[data-role=screen] .target small{font-size:calc(var(--u)*2.6)}
body[data-role=screen] .number-label{font-size:calc(var(--u)*1.9);margin-top:calc(var(--u)*4)}
body[data-role=screen] .number-wrap{font-size:calc(var(--u)*34);margin-top:calc(var(--u)*.6)}
body[data-role=screen] .number-unit{font-size:calc(var(--u)*7);margin-left:calc(var(--u)*1.4)}
body[data-role=screen] .track{width:calc(var(--u)*126);height:calc(var(--u)*2.6);margin-top:calc(var(--u)*5);font-size:calc(var(--u)*2.6)}
body[data-role=screen] .track-labels{width:calc(var(--u)*126);font-size:calc(var(--u)*1.9);margin-top:calc(var(--u)*1.8)}
body[data-role=screen] h1{font-size:calc(var(--u)*4.2);margin-top:calc(var(--u)*3.4)}
body[data-role=screen] .subtitle{font-size:calc(var(--u)*2.2);margin-top:calc(var(--u)*1)}
body[data-role=screen] .difference{font-size:calc(var(--u)*3.4);margin-top:calc(var(--u)*1.6)}
body[data-role=screen] .result-detail{font-size:calc(var(--u)*1.9);margin-top:calc(var(--u)*1)}
body[data-role=screen] .notice{position:absolute;left:0;right:0;bottom:calc(var(--u)*-2);font-size:calc(var(--u)*1.8)}
body[data-role=screen] footer{padding:calc(var(--u)*1.4) calc(var(--u)*8.4);font-size:calc(var(--u)*1.6)}
body[data-role=screen] .powered-by{letter-spacing:.3em;font-family:var(--num);font-weight:800}
/* 단계별 숫자 크기 */
body[data-role=screen][data-phase=ready] .number-wrap{font-size:calc(var(--u)*15)}
body[data-role=screen][data-phase=countdown] .number-wrap{font-size:calc(var(--u)*30)}
body[data-role=screen][data-phase=queued] .number-wrap{font-size:calc(var(--u)*15)}
body[data-role=screen][data-phase=success] .number-wrap{font-size:calc(var(--u)*30);transform-origin:50% 60%}
body[data-role=screen][data-phase=success][data-gift=true] .number-wrap{font-size:calc(var(--u)*22)}
body[data-role=screen][data-phase=failure] .number-wrap{font-size:calc(var(--u)*26)}
body[data-role=screen][data-digits="7"] .number-wrap,body[data-role=screen][data-digits="8"] .number-wrap,body[data-role=screen][data-digits="9"] .number-wrap{font-size:calc(var(--u)*24)}
body[data-role=screen]:is([data-phase=ready],[data-phase=countdown]) .number{background:linear-gradient(180deg,#fff,var(--cyan));-webkit-background-clip:text;background-clip:text}
body[data-role=screen]:is([data-phase=ready],[data-phase=countdown],[data-phase=intro],[data-phase=playing],[data-phase=stopped]) h1{font-size:calc(var(--u)*3.4)}
body[data-role=screen][data-phase=intro] h1{color:var(--muted)}
body[data-role=screen][data-phase=playing] h1{color:var(--gold1)}
body[data-role=screen][data-phase=success] h1{font-size:calc(var(--u)*5.2)}
/* 대기: 행사 키비주얼 · 큰 행사명 · 목표 · QR */
body[data-role=screen][data-phase=idle] main{justify-content:space-between;align-items:center}
body[data-role=screen][data-phase=idle] .stage{text-align:left}
body[data-role=screen][data-phase=idle] .record{align-items:flex-start}
body[data-role=screen][data-phase=idle] .event-intro{display:block;margin-bottom:calc(var(--u)*4)}
body[data-role=screen] .event-year{display:block;font-family:var(--num);font-size:calc(var(--u)*4);font-weight:800;letter-spacing:.32em;color:var(--gold2)}
body[data-role=screen] .event-intro h2{margin:calc(var(--u)*.4) 0 0;font-family:var(--num);font-size:calc(var(--u)*15);font-weight:800;line-height:.95;letter-spacing:-.035em;
  background:linear-gradient(180deg,#fff,#d9f4f2);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 calc(var(--u)*2) rgba(110,230,240,.25))}
body[data-role=screen] .event-intro p{margin:calc(var(--u)*2) 0 0;font-size:calc(var(--u)*2.8);color:var(--cyan);font-weight:600}
body[data-role=screen][data-phase=idle] .number-wrap,body[data-role=screen][data-phase=idle] h1,body[data-role=screen][data-phase=idle] .number-label{display:none}
body[data-role=screen][data-phase=idle] .target{font-size:calc(var(--u)*2.4)}
body[data-role=screen][data-phase=idle] .subtitle{order:2;margin-top:calc(var(--u)*2.2);font-size:calc(var(--u)*2.4);color:var(--secondary)}
body[data-role=screen] .join-card{width:calc(var(--u)*40);padding:calc(var(--u)*3.2)}
body[data-role=screen] .join-card .eyebrow{font-size:calc(var(--u)*1.4)}
body[data-role=screen] .join-card h2{font-size:calc(var(--u)*3)}
body[data-role=screen] .qr-frame{width:calc(var(--u)*24);height:calc(var(--u)*24);padding:calc(var(--u)*1.4);margin-bottom:calc(var(--u)*2.6)}
body[data-role=screen] .join-steps{font-size:calc(var(--u)*2)}
body[data-role=screen] .join-hint{font-size:calc(var(--u)*1.6);margin-top:calc(var(--u)*1.8)}
/* 결과: 기록(가운데) + 가상 상품(오른쪽) */
body[data-role=screen][data-gift=true] .result-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center;gap:calc(var(--u)*6)}
body[data-role=screen] .gift{gap:calc(var(--u)*3);padding:calc(var(--u)*3) calc(var(--u)*3.6);font-size:calc(var(--u)*1)}
body[data-role=screen] .gift img{width:calc(var(--u)*18);height:calc(var(--u)*16)}
body[data-role=screen] .gift .eyebrow{font-size:calc(var(--u)*1.5)}
body[data-role=screen] .gift h2{font-size:calc(var(--u)*3.6)}
body[data-role=screen] .gift p{font-size:calc(var(--u)*1.8)}
body[data-role=screen]:is([data-phase=success],[data-phase=failure]) .target{font-size:calc(var(--u)*1.8)}
body[data-role=screen]:is([data-phase=success],[data-phase=failure]) .target strong{font-size:calc(var(--u)*4)}

/* ═════════ 휴대폰 ═════════ */
body[data-role=controller] .brand{min-height:72px;padding:14px 20px;gap:12px}
body[data-role=controller] .brand-left{gap:12px;flex-wrap:wrap}
body[data-role=controller] #logo{height:40px;max-width:200px}
body[data-role=controller] #eventName{font-size:16px}
body[data-role=controller] .demo-tag{display:none}
body[data-role=controller] main{padding:18px 20px 22px;align-items:flex-start}
body[data-role=controller] .stage{max-width:480px;margin:0 auto}
body[data-role=controller] .topline{justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:16px}
body[data-role=controller] .program-identity{text-align:left}
body[data-role=controller] .eyebrow{font-size:11px}
body[data-role=controller] #programTitle{font-size:18px;margin-top:4px}
body[data-role=controller] .participant{font-size:12px}
body[data-role=controller] .target{padding:8px 16px;font-size:12px}
body[data-role=controller] .target strong{font-size:28px}
body[data-role=controller] .target small{font-size:14px}
body[data-role=controller] .tolerance{font-size:11px}
body[data-role=controller] .number-label{display:none}
body[data-role=controller] .number-wrap{font-size:84px;margin-top:20px}
body[data-role=controller] .number-unit{font-size:22px;margin-left:4px}
body[data-role=controller] .track{width:100%;height:12px;margin-top:20px;font-size:12px}
body[data-role=controller] .track #targetMark::after{font-size:9px;letter-spacing:.1em}
body[data-role=controller] .track-labels{width:100%;font-size:11px;margin-top:10px}
body[data-role=controller] h1{font-size:24px;margin-top:16px}
body[data-role=controller] .subtitle{font-size:14px;margin-top:6px}
body[data-role=controller] .difference{font-size:20px;margin-top:10px}
body[data-role=controller] .result-detail{font-size:12px;margin-top:6px}
body[data-role=controller] .notice{font-size:12px;margin-top:10px;text-align:center}
body[data-role=controller] footer{padding:12px 20px;font-size:11px}
body[data-role=controller] .powered-by{display:none}
body[data-role=controller]:is([data-phase=ready],[data-phase=queued]) .number-wrap{font-size:52px}
body[data-role=controller][data-phase=countdown] .number-wrap{font-size:96px}
body[data-role=controller]:is([data-phase=ready],[data-phase=countdown],[data-phase=intro],[data-phase=playing]) h1,
body[data-role=controller]:is([data-phase=ready],[data-phase=countdown],[data-phase=intro],[data-phase=playing]) .subtitle{display:none}
body[data-role=controller][data-phase=idle] .event-intro{display:block;text-align:left;margin-bottom:18px}
body[data-role=controller] .event-year{display:block;font-family:var(--num);font-size:16px;font-weight:800;letter-spacing:.3em;color:var(--gold2)}
body[data-role=controller] .event-intro h2{margin:2px 0 0;font-family:var(--num);font-size:52px;font-weight:800;line-height:.95;letter-spacing:-.03em}
body[data-role=controller] .event-intro p{margin:10px 0 0;font-size:15px;color:var(--cyan)}
body[data-role=controller][data-phase=idle] .record{align-items:flex-start;text-align:left}
body[data-role=controller][data-phase=idle] :is(.number-wrap,h1,.number-label){display:none}
body[data-role=controller][data-phase=idle] .subtitle{order:2;margin-top:12px;color:var(--secondary)}
body[data-role=controller]:is([data-phase=success],[data-phase=failure]) .number-wrap{font-size:64px;margin-top:14px}
body[data-role=controller] .gift{gap:12px;padding:12px 14px;margin-top:18px;font-size:12px}
body[data-role=controller] .gift img{width:80px;height:70px}
body[data-role=controller] .gift h2{font-size:17px}
body[data-role=controller] .gift .eyebrow{font-size:10px}
body[data-role=controller] .gift p{font-size:11px}
@media(max-height:760px){body[data-role=controller] .stop-button{width:176px;height:176px;font-size:38px;margin:18px auto 38px}body[data-role=controller] .number-wrap{font-size:68px}}
@media(max-width:370px){body[data-role=controller] .number-wrap{font-size:70px}body[data-role=controller] .stop-button{width:188px;height:188px}}

/* 한 판의 준비→카운트다운→도입→도전은 같은 자리를 쓴다.
   숨긴 게이지도 공간은 보존하며, 숨김 모드의 내용은 노출하지 않는다. */
body:is([data-phase=ready],[data-phase=countdown],[data-phase=intro],[data-phase=playing]) .track[hidden]{display:block!important;visibility:hidden}
body:is([data-phase=ready],[data-phase=countdown],[data-phase=intro],[data-phase=playing]) .track-labels[hidden]{display:flex!important;visibility:hidden}
body[data-role=screen]:is([data-phase=ready],[data-phase=countdown],[data-phase=intro],[data-phase=playing]) .number-label{display:block!important;line-height:1.2;height:1.2em}
body[data-role=screen]:is([data-phase=ready],[data-phase=countdown],[data-phase=intro],[data-phase=playing]) .number-label[hidden]{visibility:hidden}
body[data-role=screen]:is([data-phase=ready],[data-phase=countdown],[data-phase=intro],[data-phase=playing]) .number-wrap{height:calc(var(--u)*34);align-items:center}
body[data-role=screen]:is([data-phase=ready],[data-phase=countdown],[data-phase=intro],[data-phase=playing]) .subtitle{height:1.4em;line-height:1.4}
body[data-role=controller]:is([data-phase=ready],[data-phase=countdown],[data-phase=intro],[data-phase=playing]) .number-wrap{height:96px;align-items:center}
body[data-role=controller] .track-labels #rangeLow{left:50%;font-size:10px}
/* PC 목업의 짧은 폰 창에서도 STOP 전체와 목표를 함께 볼 수 있게. */
@media(max-height:600px){
  body[data-role=controller]:is([data-phase=ready],[data-phase=countdown],[data-phase=intro],[data-phase=playing]){min-height:100svh}
  body[data-role=controller]:is([data-phase=ready],[data-phase=countdown],[data-phase=intro],[data-phase=playing]) .brand{min-height:40px;padding:8px 14px}
  body[data-role=controller]:is([data-phase=ready],[data-phase=countdown],[data-phase=intro],[data-phase=playing]) .brand-left{flex-wrap:nowrap;gap:10px;width:100%;justify-content:space-between}
  body[data-role=controller]:is([data-phase=ready],[data-phase=countdown],[data-phase=intro],[data-phase=playing]) #logo{height:24px;max-width:126px}
  body[data-role=controller]:is([data-phase=ready],[data-phase=countdown],[data-phase=intro],[data-phase=playing]) #eventName{font-size:11px}
  body[data-role=controller]:is([data-phase=ready],[data-phase=countdown],[data-phase=intro],[data-phase=playing]) main{padding:8px 20px 4px}
  body[data-role=controller]:is([data-phase=ready],[data-phase=countdown],[data-phase=intro],[data-phase=playing]) .topline{display:none}
  body[data-role=controller]:is([data-phase=ready],[data-phase=countdown],[data-phase=intro],[data-phase=playing]) .target{padding:6px 9px;gap:5px;font-size:10px}
  body[data-role=controller]:is([data-phase=ready],[data-phase=countdown],[data-phase=intro],[data-phase=playing]) .target strong{font-size:22px}
  body[data-role=controller]:is([data-phase=ready],[data-phase=countdown],[data-phase=intro],[data-phase=playing]) .target small{font-size:11px}
  body[data-role=controller]:is([data-phase=ready],[data-phase=countdown],[data-phase=intro],[data-phase=playing]) .tolerance{font-size:9px;padding-left:5px}
  body[data-role=controller]:is([data-phase=ready],[data-phase=countdown],[data-phase=intro],[data-phase=playing]) .number-wrap{height:60px;font-size:58px;margin-top:8px}
  body[data-role=controller]:is([data-phase=ready],[data-phase=countdown],[data-phase=intro],[data-phase=playing]) .number-unit{font-size:18px}
  body[data-role=controller]:is([data-phase=ready],[data-phase=countdown],[data-phase=intro],[data-phase=playing]) .track{height:10px;margin-top:18px}
  body[data-role=controller]:is([data-phase=ready],[data-phase=countdown],[data-phase=intro],[data-phase=playing]) .track-labels{height:14px;line-height:14px;margin-top:8px}
  body[data-role=controller]:is([data-phase=ready],[data-phase=countdown],[data-phase=intro],[data-phase=playing]) .stop-button{width:clamp(108px,26vh,154px);height:clamp(108px,26vh,154px);font-size:30px;margin:22px auto 32px}
  body[data-role=controller]:is([data-phase=ready],[data-phase=countdown],[data-phase=intro],[data-phase=playing]) .stop-button::after{top:calc(100% + 20px);font-size:12px}
  body[data-role=controller]:is([data-phase=ready],[data-phase=countdown],[data-phase=intro],[data-phase=playing]) footer{padding:6px 12px;font-size:9px}
}

/* 테마 키 보존(기존 관리자 선택값) */
body[data-theme=neon] .track #fill{box-shadow:0 0 1.6em var(--accent)}
body[data-theme=vivid] .number{font-weight:900}
body[data-theme=playful] .gift{border-radius:1.6em}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}