/* ───────── 공통 토큰 (티오더 디자인 가이드) ───────── */
:root {
  --bg: #eef0f4; --surface: #fff; --ink: #14213d; --navy: #14213d;
  --blue: #2f6bff; --blue-dark: #1f56e8; --blue-bg: #e8efff;
  --sub: #66718c; --line: #e3e7f0;
  --ok: #16a34a; --bad: #dc2626;
  --gold: #ffd166; --gold-deep: #f4a300;
  --shadow-card: 0 14px 32px -24px rgba(20,33,61,.18), 0 1px 3px rgba(20,33,61,.04);
  --shadow-float: 0 24px 48px -22px rgba(20,33,61,.18), 0 2px 8px rgba(20,33,61,.05);
  --grad-blue: linear-gradient(180deg, #4a80ff, #2f63f0);
  --grad-navy: linear-gradient(180deg, #1d2e5c, #14213d);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  background: radial-gradient(140% 90% at 50% -20%, #f8fafd 0%, var(--bg) 65%);
  color: var(--ink); line-height: 1.5; word-break: keep-all;
}
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; }
textarea, input[type=text], input[type=number] {
  font: inherit; color: var(--ink); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; background: #fff; width: 100%;
}
textarea:focus, input:focus { outline: 2px solid var(--blue-bg); border-color: var(--blue); }

/* ───────── 설정 화면 ───────── */
.setup { max-width: 1180px; margin: 0 auto; padding: 36px 24px 64px; }
.setup-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 24px; }
.brand { height: 24px; width: auto; display: block; margin-bottom: 8px; }   /* t'order AI CI 로고 (assets/logo-torder-ai.png) */
.setup h1 { font-size: 28px; font-weight: 900; margin: 2px 0 6px; letter-spacing: -.02em; }
.setup .sub { margin: 0; color: var(--sub); font-size: 14px; }
.setup-actions { display: flex; gap: 10px; flex-shrink: 0; }

.btn-primary {
  background: var(--grad-blue); color: #fff; font-weight: 800; border: 0; border-radius: 14px;
  padding: 12px 22px; box-shadow: 0 14px 24px -12px rgba(47,99,240,.55), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary.big { padding: 14px 28px; font-size: 16px; }
.btn-primary:active { background: var(--blue-dark); transform: translateY(1px); }
.btn-ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 12px 18px; font-weight: 700; }
.btn-ghost.danger { color: var(--bad); }
.btn-mini { background: var(--blue-bg); color: var(--blue); border: 0; border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 13px; }
.btn-mini.danger { background: #fdecec; color: var(--bad); }

.setup-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 20px; }
.card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-card); }
.card-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.card h2 { font-size: 17px; font-weight: 800; margin: 0; display: flex; align-items: center; gap: 8px; }
.pill { background: var(--blue-bg); color: var(--blue); border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 800; }
.hint { color: var(--sub); font-size: 13px; margin: 4px 0 12px; }
.check { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--sub); margin-top: 12px; }
.hint-inline { font-size: 12px; color: #8b94ab; }
.p-drop { display: flex; align-items: center; gap: 12px; border: 2px dashed #c9d5f5; background: var(--blue-bg); border-radius: 14px; padding: 12px 14px; cursor: pointer; margin-bottom: 10px; font-size: 13px; color: var(--ink); transition: background .15s, border-color .15s; }
.p-drop:hover, .p-drop.over { background: #dbe6ff; border-color: var(--blue); }
.p-drop input { display: none; }
.p-drop-icon { font-size: 26px; }
.p-drop small { color: var(--sub); }
.p-add { display: flex; gap: 8px; align-items: stretch; }
.p-add textarea { resize: none; font-size: 14px; }
.p-add .btn-primary { flex-shrink: 0; padding: 10px 18px; }
.p-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; max-height: 480px; overflow: auto; padding: 2px; }
.p-row { display: flex; align-items: center; gap: 8px; background: #f6f8fc; border: 1px solid var(--line); border-radius: 12px; padding: 6px; }
.p-row.done { opacity: .5; }
.p-row .p-thumb { width: 44px; height: 44px; border-radius: 10px; background: #fff; border: 1px solid var(--line); color: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 900; overflow: hidden; flex-shrink: 0; cursor: pointer; position: relative; }
.p-row .p-thumb img { width: 100%; height: 100%; object-fit: contain; }
.p-row .p-thumb::after { content: '🖼'; position: absolute; right: 1px; bottom: 0; font-size: 10px; opacity: .7; }
.p-row .p-thumb input { display: none; }
.p-row input.p-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; padding: 7px 10px; border-radius: 9px; }
.p-row button.del { background: none; border: 0; padding: 4px 6px; font-size: 14px; color: var(--sub); line-height: 1; }
.p-row button.del:hover { color: var(--bad); }
.p-list .empty { color: var(--sub); font-size: 13px; }

.prize-list { display: flex; flex-direction: column; gap: 12px; }
.prize-item { border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: grid; grid-template-columns: 96px 1fr; gap: 14px; background: #fbfcfe; }
.prize-thumb {
  width: 96px; height: 96px; border-radius: 14px; background: var(--blue-bg); display: flex; align-items: center;
  justify-content: center; font-size: 40px; overflow: hidden; cursor: pointer; position: relative; border: 1px dashed #c9d5f5;
}
.prize-thumb img { width: 100%; height: 100%; object-fit: cover; }
.prize-thumb span { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--blue); font-weight: 700; background: rgba(255,255,255,.8); }
.prize-thumb input { display: none; }
.prize-fields { display: grid; grid-template-columns: 1fr 90px auto; gap: 8px; align-items: center; }
.prize-fields .full { grid-column: 1 / -1; }
.prize-fields label { font-size: 12px; color: var(--sub); font-weight: 700; display: block; margin-bottom: 4px; }
.prize-fields textarea { min-height: 54px; resize: vertical; font-size: 13px; }
.prize-order { display: flex; gap: 4px; }
.prize-order button { background: #fff; border: 1px solid var(--line); border-radius: 8px; width: 32px; height: 36px; }
.warn { color: #8a6116; background: #fff8eb; border-radius: 8px; padding: 4px 8px; font-size: 12px; margin-top: 6px; }

.winners-card { margin-top: 20px; }
.winner-log { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.winner-log .tag { background: var(--blue-bg); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700; }
.winner-log .tag b { color: var(--blue); margin-right: 6px; }
.winner-log .empty { color: var(--sub); font-size: 13px; }
.foot { color: var(--sub); font-size: 12px; text-align: center; margin-top: 28px; }


/* ───────── 관리자: 진행 제어 카드 (다크 강조 — 화면당 하나) ───────── */
.card.control { background: var(--grad-navy); color: #fff; margin-bottom: 20px; box-shadow: var(--shadow-float); }
.control-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.disp-buttons { display: flex; flex-direction: column; gap: 8px; align-items: stretch; flex-shrink: 0; }
.btn-ghost.light { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.2); }
/* 내장 추첨 화면(노트북 한 대로 진행): 스크롤해도 화면 위에 붙어 있고, 아래 버튼으로 조작 */
.embed-panel { position: sticky; top: 10px; z-index: 40; background: #0b1230; border-radius: 18px; padding: 10px 12px 12px; margin-bottom: 20px; box-shadow: 0 24px 48px -18px rgba(4,9,26,.7), 0 2px 8px rgba(20,33,61,.2); }
.embed-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #fff; font-size: 13px; font-weight: 800; margin-bottom: 8px; }
.embed-sub { font-weight: 600; color: rgba(255,255,255,.55); margin-left: 8px; }
.embed-actions { display: flex; gap: 6px; }
.embed-frame { height: 44vh; display: flex; justify-content: center; }
.embed-panel.big .embed-frame { height: 76vh; }
.embed-frame iframe { height: 100%; aspect-ratio: 16 / 9; width: auto; max-width: 100%; border: 0; border-radius: 12px; background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.1); }
.disp-status { display: flex; align-items: center; gap: 14px; }
.disp-dot { width: 14px; height: 14px; border-radius: 50%; background: #6b7280; box-shadow: 0 0 0 4px rgba(255,255,255,.08); flex-shrink: 0; }
.disp-dot.on { background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.25); }
.disp-dot.warn { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,.25); }
.disp-title { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.disp-count { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.12); color: rgba(255,255,255,.7); }
.disp-count.on { background: rgba(34,197,94,.2); color: #86efac; }
.disp-desc { font-size: 13px; color: rgba(255,255,255,.65); margin-top: 2px; }
.control-grid { display: grid; grid-template-columns: 300px 1fr; gap: 20px; padding: 18px 0; }
.ctl-label { font-size: 12px; font-weight: 800; letter-spacing: .06em; color: rgba(255,255,255,.55); }
.ctl-phase { font-size: 26px; font-weight: 900; letter-spacing: -.02em; margin-top: 2px; }
.ctl-prize { font-size: 17px; font-weight: 800; margin-top: 4px; color: var(--gold); }
.ctl-sub { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 6px; }
.pill.dark { background: rgba(255,255,255,.15); color: #fff; }
.pill.ok { background: #e8f7ee; color: #157347; margin-left: 6px; font-style: normal; }
.ctl-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ctl-btn { text-align: left; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; transition: transform .1s, background .15s; }
.ctl-btn b { font-size: 15px; font-weight: 900; }
.ctl-btn span { font-size: 12px; color: rgba(255,255,255,.6); line-height: 1.4; }
.ctl-btn:hover:not(:disabled) { background: rgba(255,255,255,.14); transform: translateY(-1px); }
.ctl-btn:active:not(:disabled) { transform: translateY(1px); }
.ctl-btn:disabled { opacity: .35; cursor: not-allowed; }
.ctl-btn.primary { background: var(--grad-blue); border-color: transparent; grid-column: 1 / -1; box-shadow: 0 14px 24px -12px rgba(47,99,240,.7), inset 0 1px 0 rgba(255,255,255,.22); }
.ctl-btn.primary span { color: rgba(255,255,255,.8); }
.ctl-btn.warn { border-color: rgba(255,209,102,.5); }
.ctl-btn.warn b { color: var(--gold); }
.ctl-btn.ghost { background: transparent; }
.ctl-btn.danger { grid-column: 1 / -1; border-color: rgba(255,120,120,.5); background: rgba(220,38,38,.12); }
.ctl-btn.danger b { color: #ff9a9a; }
.ctl-btn.danger:hover:not(:disabled) { background: rgba(220,38,38,.22); }
.control-foot { display: flex; gap: 24px; align-items: center; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; }
.control-foot input[type=number] { width: 64px; padding: 6px 8px; border-radius: 8px; font-weight: 800; text-align: center; }
.check.light { color: rgba(255,255,255,.75); margin: 0; }

/* ───────── 추첨 화면 (display.html) ───────── */
.display-body { background: #06102a; overflow: hidden; }
/* 무대(.show)가 크기 기준(container). 안의 모든 치수는 cqw/cqh라서 PC 전체화면·관리자 내장·휴대폰 어디서나 같은 비율로 그려진다 */
.show { position: fixed; inset: 0; background: #06102a; color: #fff; overflow: hidden; cursor: none; container-type: size; }
/* 휴대폰 세로: 무대를 90° 돌려 16:9로 화면을 꽉 채운다 (휴대폰을 옆으로 돌려 본다). 휴대폰 가로: 16:9로 가운데 맞춤 */
@media (orientation: portrait) and (max-width: 900px) { .show { inset: auto; top: 50%; left: 50%; width: min(100vh, 177.78vw); height: min(56.25vh, 100vw); transform: translate(-50%, -50%) rotate(90deg); } }
@media (orientation: portrait) and (max-width: 900px) { .show { width: min(100dvh, 177.78vw); height: min(56.25dvh, 100vw); } }   /* iOS 사파리: 주소창을 뺀 실제 높이 */
@media (orientation: landscape) and (max-height: 520px) { .show { inset: auto; top: 50%; left: 50%; width: min(100vw, 177.78vh); height: min(56.25vw, 100vh); transform: translate(-50%, -50%); } }
@media (orientation: landscape) and (max-height: 520px) { .show { width: min(100vw, 177.78dvh); height: min(56.25vw, 100dvh); } }
/* 휴대폰에서는 연등을 1.5배 크게 (작은 화면에서 너무 작아 보이지 않게) */
@media (orientation: portrait) and (max-width: 900px), (orientation: landscape) and (max-height: 520px) { .lantern { --ph: 1.5; } }
.show.cursor { cursor: default; }
.bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter 1s, transform 1s; }
.show.live .bg-video { filter: blur(22px) saturate(1.3); transform: scale(1.12); }
.bg-dim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,16,42,.45) 0%, rgba(6,16,42,.72) 55%, rgba(6,16,42,.85) 100%); opacity: 0; transition: opacity .8s; }
.show.live .bg-dim { opacity: 1; }
#fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 9; pointer-events: none; }
.show-brand { position: absolute; top: 3.2cqh; left: 2.6cqw; width: 10cqw; height: auto; filter: drop-shadow(0 .2cqw 1cqw rgba(0,0,0,.55)); z-index: 10; pointer-events: none; }   /* t'order AI CI 로고(흰색) — 2026-10-12 배경 영상에서 구워진 로고를 지웠으므로 대기 중에도 늘 표시 */
html.embed .show-brand { display: none; }   /* 발표 장표·관리 화면 안에 내장(?embed=1)되면 로고 숨김 — 바깥 화면이 이미 그린다(2026-10-12) */
@keyframes fadeIn { to { opacity: 1; } }
@keyframes breathe { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* 전체화면 게이트 */
.fs-gate { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(6,16,42,.75); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; }
.fs-gate-card { text-align: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); border-radius: 2cqw; padding: 4cqh 4cqw; animation: breathe 2.4s ease-in-out infinite; }
.fs-gate-title { font-size: 2.4cqw; font-weight: 900; }
.fs-gate-desc { font-size: 1.3cqw; margin-top: 1.4cqh; line-height: 1.6; color: rgba(255,255,255,.85); }

/* 대기 */
.idle { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4cqh; z-index: 4; animation: fadeIn .6s forwards; }
.idle-chip { background: rgba(6,16,42,.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 1cqh 2cqw; font-size: 1.1cqw; font-weight: 700; color: rgba(255,255,255,.9); }

/* 종료 */
.finish { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; animation: fadeIn .6s forwards; }
.finish-card { background: rgba(6,16,42,.78); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.18); border-radius: 1.8cqw; padding: 3cqh 3cqw; min-width: 46cqw; max-width: 80cqw; max-height: 84cqh; display: flex; flex-direction: column; gap: 2cqh; box-shadow: 0 2cqw 5cqw -1.6cqw rgba(0,0,0,.8); }
.finish-title { font-size: 2.2cqw; font-weight: 900; text-align: center; letter-spacing: -.02em; }
.finish-list { overflow: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(20cqw, 1fr)); gap: 1cqw; }
.finish-group { background: rgba(255,255,255,.08); border-radius: 1cqw; padding: 1.2cqh 1cqw; }
.finish-group h3 { margin: 0 0 .6cqh; font-size: 1cqw; color: var(--gold); font-weight: 800; letter-spacing: .04em; }
.finish-group div { font-size: 1.25cqw; font-weight: 800; line-height: 1.5; word-break: keep-all; }

/* 스테이지 */
.stage { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 24cqw; gap: 2cqw; padding: 9cqh 2.6cqw 5cqh; z-index: 4; opacity: 0; animation: fadeIn .5s forwards; }
.board-wrap { position: relative; min-width: 0; }
.board { display: grid; gap: .55cqw; height: 100%; align-content: stretch; }
.cell {
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 .4cqw;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: .8cqw;
  font-weight: 800; color: rgba(255,255,255,.82); letter-spacing: -.02em; overflow: hidden; line-height: 1.15;
  white-space: nowrap; text-overflow: ellipsis; word-break: keep-all;
  transition: background .2s, color .2s, transform .2s, box-shadow .2s, border-color .2s, opacity .4s;
}
.cell.wrap { white-space: normal; }
.cell.done { opacity: .28; text-decoration: line-through; }
.cell.trail2 { background: rgba(47,107,255,.25); border-color: rgba(47,107,255,.4); }
.cell.trail1 { background: rgba(47,107,255,.5); border-color: rgba(74,128,255,.7); }
.cell.on { background: var(--grad-blue); color: #fff; border-color: #7aa2ff; transform: scale(1.08); box-shadow: 0 0 0 .2cqw rgba(122,162,255,.35), 0 .6cqw 2.4cqw rgba(47,107,255,.65); z-index: 2; transition-duration: .06s; }
.cell.tense { animation: tense .45s ease-in-out infinite; }
@keyframes tense { 0%,100% { transform: scale(1.08); } 50% { transform: scale(1.16); box-shadow: 0 0 0 .35cqw rgba(255,209,102,.4), 0 .6cqw 3cqw rgba(255,209,102,.7); background: linear-gradient(180deg,#ffd166,#f4a300); color: #3b2b00; } }
.cell.win { background: linear-gradient(180deg,#ffe08a,#f4a300); color: #3b2b00; border-color: #ffe9a8; transform: scale(1.14); box-shadow: 0 0 0 .3cqw rgba(255,209,102,.45), 0 .8cqw 3cqw rgba(244,163,0,.8); z-index: 3; opacity: 1; text-decoration: none; animation: winPop .4s cubic-bezier(.2,1.6,.4,1); }
@keyframes winPop { from { transform: scale(.6); } to { transform: scale(1.14); } }

.side { display: flex; flex-direction: column; gap: 1.6cqh; min-width: 0; }
.prize-card, .now-card, .win-list-card { background: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.14); border-radius: 1.3cqw; padding: 1.2cqw; box-shadow: 0 1.2cqw 3cqw -1.4cqw rgba(0,0,0,.6); }
.prize-card { display: flex; gap: 1cqw; align-items: center; }
.prize-img { width: 6.4cqw; height: 6.4cqw; border-radius: 1cqw; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; font-size: 3.2cqw; overflow: hidden; flex-shrink: 0; }
.mini-box { width: 4.6cqw; height: 4.6cqw; border-radius: .8cqw; background: linear-gradient(180deg,#4a80ff,#1f4fc4); box-shadow: inset 0 0 0 .18cqw rgba(255,209,102,.9), 0 .4cqw 1.2cqw rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; font-size: 2.6cqw; font-weight: 900; color: var(--gold); animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-.3cqw) rotate(3deg); } }
.prize-meta { min-width: 0; }
.prize-label { font-size: .85cqw; color: var(--gold); font-weight: 800; letter-spacing: .08em; }
.prize-name { font-size: 1.7cqw; font-weight: 900; letter-spacing: .1em; line-height: 1.2; }
.prize-progress { font-size: .95cqw; color: rgba(255,255,255,.7); margin-top: .3cqh; }
.now-card { text-align: center; padding: 2cqh 1cqw; background: rgba(20,33,61,.55); }
.now-label { font-size: .85cqw; letter-spacing: .25em; color: rgba(255,255,255,.55); font-weight: 800; }
.now-name { font-size: 3.2cqw; font-weight: 900; letter-spacing: -.03em; line-height: 1.15; min-height: 2.3em; display: flex; align-items: center; justify-content: center; margin-top: .6cqh; text-shadow: 0 .3cqw 1.5cqw rgba(47,107,255,.5); word-break: keep-all; }
.now-card.tense .now-name { color: var(--gold); animation: shake .1s linear infinite; }
@keyframes shake { 0% { transform: translateX(-.15cqw); } 100% { transform: translateX(.15cqw); } }
.now-card.win .now-name { color: var(--gold); }
.win-list-card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.win-list-title { font-size: .85cqw; letter-spacing: .12em; color: rgba(255,255,255,.55); font-weight: 800; margin-bottom: .8cqh; }
.win-list { overflow: hidden; display: flex; flex-direction: column; gap: .6cqh; }
.win-row { display: flex; justify-content: space-between; align-items: center; gap: .6cqw; background: rgba(255,255,255,.08); border-radius: .7cqw; padding: .7cqh .9cqw; font-size: 1.05cqw; animation: slideIn .4s ease-out; }
.win-row b { color: var(--gold); font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-row span { color: rgba(255,255,255,.65); font-size: .85cqw; max-width: 45%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.win-list .empty { color: rgba(255,255,255,.4); font-size: .95cqw; }
@keyframes slideIn { from { transform: translateX(2cqw); opacity: 0; } }

/* ───────── 당첨 → 상자 → 터짐 → 상품 ───────── */
.reveal { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqh; background: radial-gradient(60% 60% at 50% 45%, rgba(20,33,61,.55), rgba(4,9,26,.92)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: fadeIn .4s forwards; }
.rv-top { text-align: center; transition: transform .6s cubic-bezier(.2,1,.3,1); animation: revealPop .55s cubic-bezier(.2,1.5,.4,1); }
@keyframes revealPop { from { transform: scale(.4); opacity: 0; } }
.rv-congrats { font-size: 1.8cqw; font-weight: 800; color: var(--gold); letter-spacing: .1em; }
.rv-names { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 1cqh 3cqw; max-width: 92cqw; }
.rv-nm { text-align: center; }
.rv-name { font-size: 8cqw; font-weight: 900; letter-spacing: -.04em; line-height: 1.1; word-break: keep-all; max-width: 90cqw; text-shadow: 0 .5cqw 3cqw rgba(255,209,102,.5); animation: glow 1.6s ease-in-out infinite alternate; transition: font-size .6s; }
@keyframes glow { from { text-shadow: 0 .5cqw 2cqw rgba(255,209,102,.35); } to { text-shadow: 0 .5cqw 4cqw rgba(255,209,102,.8), 0 0 1cqw rgba(255,255,255,.4); } }
.rv-sub { font-size: 1.6cqw; font-weight: 800; color: rgba(255,255,255,.85); margin-top: 1cqh; }
/* 상자 단계: 이름은 위로 작게 */
.reveal.st-box .rv-name, .reveal.st-burst .rv-name, .reveal.st-prize .rv-name { font-size: calc(var(--nf, 8cqw) * .55) !important; animation: none; }
.reveal.st-box .rv-top, .reveal.st-burst .rv-top, .reveal.st-prize .rv-top { animation: none; }
.reveal.st-name .rv-box-wrap { opacity: 0; }
.rv-box-wrap { height: 36cqh; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1cqh 3cqw; transition: opacity .5s; }
.rv-box-wrap.many { gap: 0 1cqw; height: 40cqh; }
.giftbox.burst { transition: opacity .25s; opacity: 0; }
.reveal.st-burst .rv-box-wrap { opacity: 0; transition: opacity .3s; }

/* 선물 상자 (CSS로 그림). will-change 없이 매 프레임 다시 그려 커져도 흐려지지 않게 */
.giftbox { --glow: 0; position: relative; width: 14cqw; height: 14cqw; transform-origin: 50% 62%; transform: scale(.3); flex-shrink: 0; filter: drop-shadow(0 1.2cqw 1.4cqw rgba(0,0,0,.5)); }
.gb-glow { position: absolute; inset: -35%; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,110,.6), rgba(255,214,110,0) 62%); opacity: var(--glow); }
.gb-body { position: absolute; left: 1cqw; right: 1cqw; bottom: 0; height: 9.2cqw; border-radius: .55cqw; background: linear-gradient(180deg, #4b86ff 0%, #2f63f0 60%, #234fcc 100%); box-shadow: inset 0 .18cqw 0 rgba(255,255,255,.38), inset .18cqw 0 0 rgba(255,255,255,.12), inset -.18cqw 0 0 rgba(0,0,0,.12), inset 0 -.7cqw 0 rgba(0,0,0,.16); }
.gb-lid { position: absolute; left: 0; right: 0; top: 3.1cqw; height: 2.7cqw; border-radius: .5cqw; background: linear-gradient(180deg, #7ba5ff 0%, #3b6ffb 100%); box-shadow: inset 0 .18cqw 0 rgba(255,255,255,.5), 0 .35cqw .5cqw rgba(0,0,0,.28); }
.gb-ribbon-v { position: absolute; left: 50%; width: 2cqw; margin-left: -1cqw; top: 3.1cqw; bottom: 0; background: linear-gradient(90deg, #e39a00 0%, #ffd166 28%, #fff1c2 50%, #ffd166 72%, #e39a00 100%); border-radius: 0 0 .2cqw .2cqw; }
.gb-ribbon-lid { position: absolute; left: 50%; width: 2.2cqw; margin-left: -1.1cqw; top: 3.1cqw; height: 2.7cqw; background: linear-gradient(90deg, #e39a00 0%, #ffd166 28%, #fff1c2 50%, #ffd166 72%, #e39a00 100%); border-radius: .15cqw; box-shadow: 0 .1cqw .25cqw rgba(0,0,0,.25); }
.gb-bow { position: absolute; top: .5cqw; left: 50%; width: 6.4cqw; height: 3.2cqw; transform: translateX(-50%); }
.gb-bow::before, .gb-bow::after { content: ''; position: absolute; top: .3cqw; width: 2.7cqw; height: 2.3cqw; border-radius: 62% 62% 62% 12%; background: linear-gradient(160deg, #fff1c2 0%, #ffd166 45%, #e39a00 100%); box-shadow: inset 0 -.25cqw 0 rgba(0,0,0,.14), inset 0 .15cqw 0 rgba(255,255,255,.5); }
.gb-bow::before { left: .35cqw; transform: rotate(-22deg) scaleX(-1); } .gb-bow::after { right: .35cqw; transform: rotate(22deg); }
.gb-bow i { position: absolute; left: 50%; top: 1.55cqw; width: 1.5cqw; height: 1.5cqw; margin-left: -.75cqw; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff1c2, #f0b400 70%); box-shadow: 0 .1cqw .25cqw rgba(0,0,0,.3); }
.gb-q { position: absolute; left: 0; right: 0; top: 6.3cqw; text-align: center; font-size: 4.6cqw; line-height: 1; font-weight: 900; color: #fff; text-shadow: 0 .18cqw 0 rgba(0,0,0,.35), 0 0 1cqw rgba(255,255,255,.35); }

/* 터짐 플래시 */
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 3; }
.flash.go { animation: flashGo .7s ease-out forwards; }
@keyframes flashGo { 0% { opacity: 0; } 8% { opacity: 1; } 100% { opacity: 0; } }

/* 상품 공개 */
.rv-prize { text-align: center; animation: prizePop .7s cubic-bezier(.2,1.6,.35,1); }
@keyframes prizePop { 0% { transform: scale(.2); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
/* 상품 단계: 위쪽 이름·로고를 더 작게 줄여 상품에 자리를 준다 */
.reveal.st-prize .rv-name { font-size: calc(var(--nf, 8cqw) * .38) !important; }
.reveal.st-prize .rv-nm .rv-img { width: 4.6cqw; height: 4.6cqw; }
.reveal.st-prize .rv-congrats { font-size: 1.4cqw; }
.reveal.st-prize .rv-sub { font-size: 1.4cqw; margin-top: 0; }
.reveal.st-prize { gap: 1cqh; }
.rv-prize-img { width: 40cqw; height: 40cqw; max-height: 52cqh; max-width: 52cqh; margin: 0 auto 1.6cqh; border-radius: 2cqw; background: rgba(255,255,255,.1); border: .25cqw solid rgba(255,209,102,.7); display: flex; align-items: center; justify-content: center; font-size: 14cqw; overflow: hidden; box-shadow: 0 0 0 .8cqw rgba(255,209,102,.15), 0 2cqw 6cqw rgba(0,0,0,.6), 0 0 6cqw rgba(255,209,102,.35); }
.rv-prize-img img { width: 100%; height: 100%; object-fit: cover; }
.rv-prize-name { font-size: 5cqw; font-weight: 900; letter-spacing: -.03em; color: var(--gold); text-shadow: 0 .4cqw 2cqw rgba(255,209,102,.5); word-break: keep-all; max-width: 88cqw; }

/* ───────── 소망 연등 (추첨 화면 대기 장면) ───────── */
.lanterns { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.lantern { position: absolute; bottom: -40cqh; width: 10.5cqw; animation: rise var(--dur, 18s) linear forwards; will-change: transform, opacity; }
@keyframes rise { 0% { transform: translateY(0) scale(calc(var(--s, 1) * var(--ph, 1))); opacity: 0; } 6% { opacity: 1; } 84% { opacity: 1; } 100% { transform: translateY(-160cqh) scale(calc(var(--s, 1) * var(--ph, 1))); opacity: 0; } }
.lt-drift { animation: drift var(--dur, 18s) ease-in-out forwards; }
@keyframes drift { 0% { transform: translateX(0); } 33% { transform: translateX(var(--dx1, 0)); } 66% { transform: translateX(var(--dx2, 0)); } 100% { transform: translateX(var(--dx3, 0)); } }
.lt-sway { display: flex; flex-direction: column; align-items: center; animation: sway var(--sway, 4s) ease-in-out infinite alternate; transform-origin: 50% 0; }
@keyframes sway { from { transform: rotate(-2.5deg) translateX(-.5cqw); } to { transform: rotate(2.5deg) translateX(.5cqw); } }
.lt-hook { width: .12cqw; height: 1.2cqw; background: linear-gradient(180deg, rgba(255,220,150,0), #d9a441); }
.lt-top { width: 3.8cqw; height: .55cqw; background: linear-gradient(180deg,#b8762a,#6b3f0c); border-radius: .3cqw .3cqw .1cqw .1cqw; box-shadow: 0 .1cqw .3cqw rgba(0,0,0,.4); }
/* 몸통: 세로로 긴 타원. 글은 가로쓰기, 최대 4줄 */
.lt-body { width: 100%; min-height: 10cqw; margin-top: .1cqw; padding: 1.3cqw 1cqw; border-radius: 50% / 40%; position: relative; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 32%, #ffe59a 0%, #ffa94f 42%, #f0662d 78%, #c9451f 100%);
  box-shadow: 0 0 2.4cqw rgba(255,160,70,.75), 0 0 6cqw rgba(255,120,40,.35), inset 0 -.8cqw 1.4cqw rgba(150,35,10,.3), inset 0 .5cqw 1cqw rgba(255,255,255,.25); }
.lt-body::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 1.3cqw, rgba(120,30,0,.13) 1.3cqw 1.45cqw); pointer-events: none; }
.lt-text { position: relative; text-align: center; color: #3b1a00; font-weight: 800; font-size: .95cqw; line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; text-shadow: 0 1px 0 rgba(255,255,255,.35);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.lt-bottom { width: 3.2cqw; height: .5cqw; margin-top: .1cqw; background: linear-gradient(180deg,#8a5218,#4e2c08); border-radius: .1cqw .1cqw .3cqw .3cqw; }
.lt-tassel { width: .16cqw; height: 1.8cqw; background: linear-gradient(180deg,#c93a2a,#ff9d7a); }
.lt-note { background: #fff8e6; color: var(--ink); font-size: .8cqw; font-weight: 800; padding: .3cqw .8cqw; border-radius: .2cqw; box-shadow: 0 .3cqw .8cqw rgba(0,0,0,.35); transform: rotate(-3deg); position: relative; max-width: 11cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-note::after { content: ''; position: absolute; right: 0; bottom: 0; border-style: solid; border-width: 0 0 .7cqw .7cqw; border-color: transparent transparent rgba(20,33,61,.12) transparent; }
/* 연등 터짐: 빛나며 부풀어 사라진다 (폭죽은 canvas) */
.lantern.pop .lt-sway { animation: lanternPop .48s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes lanternPop { 0% { transform: scale(1); filter: brightness(1); opacity: 1; } 35% { transform: scale(1.25); filter: brightness(2.2); opacity: 1; } 100% { transform: scale(1.9); filter: brightness(3); opacity: 0; } }
.lantern.pop .lt-body { box-shadow: 0 0 4cqw rgba(255,220,120,1), 0 0 10cqw rgba(255,170,60,.8); }

/* 참가자 이미지(로고): 흰 바탕에 로고 전체가 보이게(잘림 없음), 강조는 테두리 링으로 */
.cell.has-img { padding: .25cqw; background: rgba(255,255,255,.94); border-color: rgba(255,255,255,.6); }
.cell.has-img img { width: 100%; height: 100%; object-fit: contain; border-radius: .4cqw; display: block; }
.cell.has-img.trail2 { background: rgba(255,255,255,.94); box-shadow: 0 0 0 .18cqw rgba(47,107,255,.35); }
.cell.has-img.trail1 { background: rgba(255,255,255,.94); box-shadow: 0 0 0 .22cqw rgba(47,107,255,.6); }
.cell.has-img.on { background: #fff; box-shadow: 0 0 0 .3cqw #4a80ff, 0 .6cqw 2.4cqw rgba(47,107,255,.7); }
.cell.has-img.win { background: #fff; box-shadow: 0 0 0 .35cqw #f4a300, 0 .8cqw 3cqw rgba(244,163,0,.8); }
.cell.has-img.done { opacity: .3; }
@keyframes tenseImg { 0%,100% { transform: scale(1.08); box-shadow: 0 0 0 .3cqw #4a80ff; } 50% { transform: scale(1.16); box-shadow: 0 0 0 .4cqw #ffd166, 0 .6cqw 3cqw rgba(255,209,102,.7); } }
.cell.has-img.tense { animation: tenseImg .45s ease-in-out infinite; }
.board.logo-mode { gap: .5cqw; }
.board.logo-mode .cell { border-radius: .7cqw; }
.rv-img { width: 14cqw; height: 14cqw; margin: 0 auto 1.2cqh; border-radius: 1.6cqw; background: rgba(255,255,255,.95); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 1.5cqw 4cqw rgba(0,0,0,.5), 0 0 3cqw rgba(255,209,102,.35); animation: revealPop .55s cubic-bezier(.2,1.5,.4,1); }
.rv-img img { width: 100%; height: 100%; object-fit: contain; padding: .6cqw; }
.reveal.st-box .rv-img, .reveal.st-burst .rv-img, .reveal.st-prize .rv-img { width: 7cqw; height: 7cqw; border-radius: .9cqw; animation: none; }
.now-img { width: 4.5cqw; height: 4.5cqw; border-radius: .7cqw; background: rgba(255,255,255,.95); margin: 0 auto .4cqh; overflow: hidden; display: none; }
.now-img img { width: 100%; height: 100%; object-fit: contain; padding: .25cqw; }
.now-card.has-img .now-img { display: block; }
/* 전체화면이 아닐 때 작은 안내 */
.fs-hint { position: absolute; left: 50%; bottom: 9cqh; transform: translateX(-50%); z-index: 21; background: rgba(6,16,42,.75); color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: .6cqh 1.4cqw; font-size: .9cqw; font-weight: 700; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; }

/* ───────── 게임 추첨 모드 (관리자 /event) ───────── */
body.game .prize-only { display: none !important; }
body:not(.game) .game-only { display: none !important; }
.mode-tabs { display: flex; align-items: center; gap: 8px; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.12); }
.mode-tabs button { background: rgba(255,255,255,.08); color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 8px 16px; font-weight: 800; font-size: 14px; }
.mode-tabs button.on { background: #fff; color: var(--navy); border-color: #fff; }
.mode-tabs button:disabled { opacity: .5; cursor: not-allowed; }
.mode-tabs .ctl-sub { margin: 0 0 0 6px; }
/* 발표 화면 탭: 추첨 제어·설정을 감추고 /ppt/admin/ iframe 만 보여 준다.
   네이비 카드 안에 갇힌 느낌(2026-09-11 대표 요청)을 없애기 위해 이 탭에서는 카드 배경·여백·그림자를 걷어내고
   탭 줄만 남긴 뒤, iframe 은 1180px 기둥을 벗어나 브라우저 폭 전체로 펼친다. */
.ppt-panel { margin-top: 14px; }
.ppt-panel iframe { display: block; width: 100%; height: calc(100vh - 150px); min-height: 640px; border: 0; border-radius: 16px; background: #eef0f4; }
body.ppt .card.control > *:not(.mode-tabs):not(.ppt-panel), body.ppt section.setup > *:not(.setup-head):not(.card.control), body.ppt .embed-panel { display: none !important; }
body.ppt .setup-actions { visibility: hidden; }
body.ppt .setup { padding-bottom: 0; }
body.ppt .card.control { background: none; color: var(--ink); padding: 0; margin: 0; box-shadow: none; border-radius: 0; }
body.ppt .mode-tabs { border-bottom: 0; padding-bottom: 0; }
body.ppt .mode-tabs button { background: #fff; color: var(--sub); border-color: var(--line); box-shadow: var(--shadow-card); }
body.ppt .mode-tabs button.on { background: var(--grad-navy); color: #fff; border-color: transparent; }
body.ppt .mode-tabs .ctl-sub { color: var(--sub); }
body.ppt .ppt-panel { width: 100vw; margin-left: calc(50% - 50vw); margin-top: 18px; }
body.ppt .ppt-panel iframe { border-radius: 0; height: calc(100vh - 160px); background: transparent; }
.game-count { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.game-count button { width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; font-size: 18px; font-weight: 900; }
.game-count input { width: 60px; text-align: center; font-weight: 900; font-size: 18px; padding: 5px; border-radius: 9px; }
body.game .card.control { background: linear-gradient(180deg,#2a1d5c,#16123d); }
/* 추첨 화면: 게임 참가자 발표 */
.reveal.st-game .rv-box-wrap, .reveal.st-game .rv-prize { display: none; }
.reveal.st-game .rv-congrats { color: #9ec5ff; }
.reveal.st-game .rv-names { gap: 2cqh 2cqw; justify-content: center; align-items: stretch; margin: 0 auto; }
.reveal.st-game .rv-nm { width: var(--card-w, 16cqw); box-sizing: border-box; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 1.4cqw; padding: 1.6cqh 1.2cqw; display: flex; flex-direction: column; align-items: center; animation: revealPop .55s cubic-bezier(.2,1.5,.4,1) both; }
.reveal.st-game .rv-nm .rv-img { width: var(--img, 8cqw); height: var(--img, 8cqw); margin-bottom: 1cqh; border-radius: 1cqw; animation: none; flex-shrink: 0; }
.reveal.st-game .rv-nm .rv-img img { padding: .5cqw; }
.reveal.st-game .rv-nm .rv-init { font-size: calc(var(--img, 8cqw) * .45); font-weight: 900; color: var(--navy); }
.reveal.st-game .rv-nm .rv-name { font-size: var(--fs, 3cqw) !important; line-height: 1.15; min-height: 2.3em; display: flex; align-items: center; justify-content: center; text-align: center; animation: glow 1.6s ease-in-out infinite alternate; }
.reveal.st-game .rv-nm .rv-order { font-size: .9cqw; letter-spacing: .2em; color: var(--gold); font-weight: 800; margin-bottom: .8cqh; }
.reveal.st-game .rv-vs { width: 7cqw; font-size: 3.5cqw; font-weight: 900; color: var(--gold); text-shadow: 0 0 2cqw rgba(255,209,102,.6); align-self: center; text-align: center; animation: revealPop .55s cubic-bezier(.2,1.5,.4,1) both; }
.prize-card.game .prize-name { letter-spacing: -.02em; }

/* 보드 당첨 칸: 금색 번호 배지, 나머지 칸은 어둡게 */
.cell { position: relative; }
.cell.win::after { content: attr(data-badge); position: absolute; top: -.55cqw; right: -.55cqw; background: linear-gradient(180deg,#ffe08a,#f4a300); color: #3b1a00; font-size: .85cqw; font-weight: 900; padding: .15cqw .6cqw; border-radius: 999px; box-shadow: 0 .2cqw .8cqw rgba(0,0,0,.45); letter-spacing: -.02em; z-index: 4; animation: badgePop .4s cubic-bezier(.2,1.6,.4,1); }
@keyframes badgePop { from { transform: scale(0); } to { transform: scale(1); } }
.board.has-winner .cell:not(.win):not(.on):not(.trail1):not(.trail2):not(.tense) { opacity: .4; filter: saturate(.6); }
.board.has-winner .cell.done { opacity: .18; }
.cell.has-img.win { transform: scale(1.14); }

/* 소망 연등 꼬리 사진: 인생네컷 프레임 */
.lt-photo { width: 6.4cqw; background: #fff; padding: .3cqw .3cqw 1.3cqw; border-radius: .15cqw; box-shadow: 0 .5cqw 1.4cqw rgba(0,0,0,.45); transform: rotate(-4deg); position: relative; }
.lt-photo.land { width: 9.2cqw; }
.lt-photo.logo { width: 7.4cqw; padding: .35cqw; }   /* 참가자 로고: 잘리지 않게 통째로 */
.lt-photo.logo img { object-fit: contain; background: #fff; aspect-ratio: var(--ar, 1); padding: .3cqw; box-sizing: border-box; }
.lt-photo img, .lt-photo video { width: 100%; aspect-ratio: var(--ar, 4 / 5); object-fit: cover; display: block; border-radius: .1cqw; background: #000; }   /* --ar: 실제 사진·영상 비율 */
.lt-photo.land img, .lt-photo.land video { aspect-ratio: var(--ar, 5 / 4); }
.lt-photo .lt-cap { position: absolute; left: 0; right: 0; bottom: .3cqw; text-align: center; font-size: .7cqw; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 .3cqw; }
.lantern { bottom: -48cqh; }
.winner-log .tag.has-photo { display: inline-flex; align-items: center; gap: 8px; padding-left: 6px; }
.wish-thumb { width: 36px; height: 44px; object-fit: cover; border-radius: 4px; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.winner-log .tag .dl { color: var(--blue); text-decoration: none; font-weight: 900; margin-right: 4px; padding: 2px 6px; border-radius: 6px; background: #fff; }
.winner-log .tag .dl:hover { background: var(--blue); color: #fff; }
.wish-thumb { cursor: zoom-in; }
.wish-preview { position: fixed; z-index: 1000; width: 300px; background: #fff; border-radius: 14px; padding: 10px 10px 8px; box-shadow: 0 24px 48px -12px rgba(20,33,61,.45), 0 2px 8px rgba(20,33,61,.15); pointer-events: none; }
.wish-preview img { width: 100%; height: 360px; object-fit: contain; border-radius: 8px; background: #f3f5f9; display: block; }
.wish-preview .cap { font-size: 13px; font-weight: 800; color: var(--ink); margin-top: 8px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-hint.strong { background: rgba(244,163,0,.92); color: #3b1a00; border-color: #ffe08a; font-size: 1.05cqw; padding: .9cqh 1.8cqw; pointer-events: none; }
.winner-log .tag .likes { color: #dc2626; font-weight: 900; margin-left: 8px; font-size: 12px; }
select.sort { font: inherit; font-size: 13px; font-weight: 700; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; background: #fff; }
/* 영상 제목 글자만 뽑은 마스크: 연등 위에 얹어 연등이 글자 뒤로 지나가는 것처럼 보이게 (영상과 같은 배치) */
/* 당첨 칸은 배지가 밖으로 나가야 하므로 잘라내지 않는다 */
.cell.win { overflow: visible; }

/* ───────── 휴대폰 관리자 ───────── */
body.mobile .control-row { flex-direction: column; align-items: stretch; }
body.mobile #btnOpen { display: none; }
@media (max-width: 760px) {
  .setup { padding: 20px 14px 48px; }
  .setup-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .setup h1 { font-size: 22px; }
  .setup-actions { flex-wrap: wrap; }
  .setup-actions button { flex: 1; padding: 10px 12px; font-size: 13px; }
  .card { padding: 16px; border-radius: 16px; }
  .mode-tabs { flex-wrap: wrap; }
  .mode-tabs .ctl-sub { width: 100%; margin: 4px 0 0; }
  .control-grid { grid-template-columns: 1fr; gap: 14px; }
  .ctl-buttons { grid-template-columns: 1fr; }
  .control-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
  .setup-grid { grid-template-columns: 1fr; gap: 14px; }
  .p-list { grid-template-columns: 1fr; max-height: 360px; }
  .prize-item { grid-template-columns: 72px 1fr; gap: 10px; }
  .prize-thumb { width: 72px; height: 72px; }
  .prize-fields { grid-template-columns: 1fr 80px; }
  .prize-order { grid-column: 1 / -1; }
  .winner-log .tag { font-size: 12px; }
  .p-add { flex-direction: column; }
  .wish-preview { display: none; }
}
body.mobile .embed-frame { height: 32vh; }
.winner-log .tag video.wish-thumb { background: #000; }
.winner-log .tag .phone { font-size: 12px; color: var(--blue); margin-right: 6px; }
.wish-preview video { width: 100%; height: 360px; object-fit: contain; border-radius: 8px; background: #000; display: block; }

/* ───────── 모니터링 / 버전 기록 ───────── */
.mon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 8px; }
.mon { background: #f6f8fc; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.mon .k { font-size: 11px; color: var(--sub); font-weight: 800; letter-spacing: .04em; }
.mon .v { font-size: 18px; font-weight: 900; color: var(--ink); margin-top: 2px; letter-spacing: -.02em; word-break: break-all; }
.mon .s { font-size: 11px; color: var(--sub); margin-top: 2px; }
.mon.bad { background: #fdecec; border-color: #f5b5b5; } .mon.bad .v { color: var(--bad); }
.mon.ok .v { color: #157347; }
#monitorCard.down { border: 2px solid var(--bad); }
.pill.bad { background: #fdecec; color: var(--bad); } .pill.ok { background: #e8f7ee; color: #157347; }
.mon-logs { margin-top: 12px; background: #14213d; color: #dbe4ff; border-radius: 12px; padding: 12px 14px; font: 12px/1.5 ui-monospace, Menlo, monospace; max-height: 260px; overflow: auto; white-space: pre-wrap; }
.hist-overview { background: #f6f8fc; border-radius: 12px; padding: 12px 14px; margin: 8px 0 12px; }
.hist-overview h3 { margin: 0 0 6px; font-size: 14px; }
.hist-overview ul { margin: 0 0 8px 18px; padding: 0; font-size: 13px; line-height: 1.55; }
.hist-overview .links a { display: inline-block; margin: 2px 8px 2px 0; font-size: 13px; color: var(--blue); font-weight: 700; }
.hist-v { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-top: 8px; }
.hist-v summary { cursor: pointer; font-weight: 800; font-size: 14px; display: flex; gap: 8px; align-items: center; }
.hist-v summary .pill { font-size: 11px; }
.hist-v summary .d { color: var(--sub); font-weight: 600; font-size: 12px; margin-left: auto; }
.hist-v .row { margin-top: 8px; font-size: 13px; line-height: 1.55; }
.hist-v .row b { display: block; font-size: 11px; color: var(--sub); letter-spacing: .04em; margin-bottom: 2px; }
.hist-v .row.req { background: var(--blue-bg); border-radius: 8px; padding: 8px 10px; }
.hist-v ul { margin: 0 0 0 18px; padding: 0; }

/* ───────── 관리자: 추첨 유형 (랜덤 선택형 / 매너티 경주) ───────── */
.draw-type { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 0 2px; }
.dt-opts { display: flex; gap: 8px; }
.dt-opts button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 8px 14px; font-weight: 800; font-size: 14px; text-align: left; }
.dt-opts button small { font-weight: 600; font-size: 11px; color: rgba(255,255,255,.55); }
.dt-opts button.on { background: #fff; color: var(--navy); border-color: #fff; }
.dt-opts button.on small { color: var(--sub); }
.draw-type label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,.85); flex-wrap: wrap; }
.draw-type input[type=number] { width: 64px; padding: 6px 8px; border-radius: 8px; font-weight: 800; text-align: center; }
body:not(.race) .race-only { display: none !important; }
body.race .ctl-btn.primary { background: linear-gradient(180deg, #ff9a3c, #f4640a); box-shadow: 0 14px 24px -12px rgba(244,100,10,.7), inset 0 1px 0 rgba(255,255,255,.22); }

/* ───────── 추첨 화면: 매너티 경주 ───────── */
.stage.race .board-wrap { display: flex; flex-direction: column; }
.track { display: grid; grid-template-columns: repeat(var(--cols, 1), 1fr); gap: 0 1.4cqw; height: 100%; align-content: start; }
.tcol { display: flex; flex-direction: column; gap: .35cqh; min-width: 0; }
.lane { height: var(--lane-h, 8cqh); display: grid; grid-template-columns: 9cqw 1fr 1.1cqw; align-items: center; gap: .4cqw; min-width: 0; }
.track.narrow .lane { grid-template-columns: 5.4cqw 1fr .8cqw; gap: .3cqw; }
.lane-name { font-size: min(1.25cqw, calc(var(--lane-h) * .34)); font-weight: 900; color: #fff; display: flex; align-items: center; gap: .35cqw; min-width: 0; text-shadow: 0 .1cqw .3cqw rgba(0,0,0,.6); }
.lane-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane-name i { width: .6cqw; height: .6cqw; border-radius: 50%; background: hsl(var(--hue) 85% 60%); flex-shrink: 0; box-shadow: 0 0 .4cqw hsl(var(--hue) 85% 60% / .8); }
.track.tiny .lane-name { font-size: .78cqw; }
.track.tiny .lane-name i { width: .4cqw; height: .4cqw; }
.lane-track { position: relative; height: 100%; background: linear-gradient(180deg, rgba(255,255,255,.04) 0 78%, rgba(255,255,255,.16) 78% 80%, rgba(210,225,255,.13) 80% 92%, rgba(0,0,0,.28) 100%); border: 1px solid rgba(255,255,255,.09); border-radius: .5cqw; transition: background .3s, box-shadow .3s; overflow: visible; }   /* 아래 1/5은 트랙 바닥(밝은 띠 + 그림자)으로 땅에 서 있는 느낌 */
.lane-track::before { content: ''; position: absolute; left: 2%; right: 2%; top: 86%; border-top: .1cqw dashed rgba(255,255,255,.22); }   /* 바닥의 레인 점선 */
.lane-goal { height: 100%; background: repeating-conic-gradient(#fff 0 25%, #14213d 0 50%) 0 0 / .55cqw .55cqw; border-radius: .2cqw; opacity: .8; position: relative; }
.track.tiny .lane-goal { background-size: .35cqw .35cqw; }
.racer { position: absolute; left: 0; bottom: 0; height: 100%; width: calc(var(--lane-h) * 1.05); will-change: transform; }
.racer .shadow { position: absolute; left: 14%; right: 14%; bottom: 1%; height: 9%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,0,0,.5), rgba(0,0,0,.18) 60%, transparent 72%); transform-origin: 50% 50%; transition: transform .25s; }   /* 바닥 접지 그림자 (점프하면 작아진다) */
.mt-wrap { position: relative; width: 100%; height: 100%; transform-origin: 50% 100%; transition: transform .11s ease-out; filter: drop-shadow(0 .18cqw .3cqw rgba(0,0,0,.35)); }
.mt-wrap .mt { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; display: block; }
.band { position: absolute; left: 40%; right: 16%; top: 12%; height: 6%; border-radius: 999px; background: hsl(var(--hue) 85% 55%); box-shadow: 0 .1cqw .3cqw rgba(0,0,0,.35), inset 0 .05cqw 0 rgba(255,255,255,.5); transform: rotate(-6deg); }   /* 머리띠 (참가자 색) — 옆모습 머리 위쪽 */
.bib { position: absolute; left: 18%; right: 14%; top: 54%; background: #fff; color: var(--navy); border: .06cqw solid rgba(20,33,61,.35); border-radius: .3cqw; font-size: calc(var(--lane-h) * .15); font-weight: 900; text-align: center; padding: .1em .22em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 .1cqw .3cqw rgba(0,0,0,.35); line-height: 1.2; letter-spacing: -.02em; }   /* 배번 — 항상 이름(로고보다 글자 우선) */
.bib img { width: 100%; height: calc(var(--lane-h) * .18); object-fit: contain; display: block; }
.finish-flag { position: absolute; right: -.2cqw; bottom: 4%; height: 70%; width: auto; filter: drop-shadow(0 .15cqw .3cqw rgba(0,0,0,.4)); pointer-events: none; }   /* 결승 깃발 (3D 소품) */
.track.tiny .finish-flag { display: none; }
.track.tiny .bib, .track.tiny .band { display: none; }
.racer.fast::before { content: ''; position: absolute; right: 92%; top: 30%; width: 70%; height: 40%; background: repeating-linear-gradient(180deg, rgba(255,255,255,.75) 0 12%, transparent 12% 34%); -webkit-mask: linear-gradient(90deg, transparent, #000); mask: linear-gradient(90deg, transparent, #000); opacity: .8; }
.lane.done { opacity: .55; }
.lane.goal .mt-wrap { animation: none; transform: none !important; }
.lane.goal .band { left: 24%; right: 24%; top: 13%; height: 8%; transform: none; }
.lane.goal .bib { left: 16%; right: 16%; top: 54%; }
.lane.goal .lane-goal::after { content: attr(data-rank); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(6,16,42,.85); color: #fff; font-size: calc(var(--lane-h) * .32); font-weight: 900; padding: .05em .35em; border-radius: 999px; border: 1px solid rgba(255,255,255,.5); animation: badgePop .35s cubic-bezier(.2,1.6,.4,1); white-space: nowrap; z-index: 2; }
.track.tiny .lane.goal .lane-goal::after { font-size: .7cqw; }
.lane.first .lane-track { background: rgba(255,209,102,.16); border-color: rgba(255,209,102,.6); box-shadow: 0 0 1.2cqw rgba(255,209,102,.45); }
.lane.first .lane-name { color: var(--gold); }
.lane.first .lane-goal::after { background: linear-gradient(180deg,#ffe08a,#f4a300); color: #3b1a00; border-color: #fff3c4; }
.stage.sprint .lane-goal { animation: goalPulse .5s ease-in-out infinite alternate; }
@keyframes goalPulse { from { box-shadow: 0 0 0 rgba(255,255,255,0); opacity: .8; } to { box-shadow: 0 0 .8cqw rgba(255,255,255,.7); opacity: 1; } }
/* 오른쪽 실시간 순위 */
.stage.race .win-row { animation: none; justify-content: flex-start; gap: .8cqw; padding: .55cqh .9cqw; }
.stage.race .win-row b { width: 1.9cqw; height: 1.9cqw; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .95cqw; flex-shrink: 0; }
.stage.race .win-row span { max-width: none; flex: 1; text-align: left; color: #fff; font-size: 1cqw; font-weight: 800; }
.stage.race .win-row.rk1 b { background: linear-gradient(180deg,#ffe08a,#f4a300); color: #3b1a00; }
.stage.race .win-row.rk2 b { background: linear-gradient(180deg,#e8ecf3,#b7c0cf); color: #1d2740; }
.stage.race .win-row.rk3 b { background: linear-gradient(180deg,#e0a06a,#a86230); color: #2d1300; }
.stage.race .win-row.fin.rk1 { background: rgba(255,209,102,.2); }
.stage.race .win-row.fin.rk1 span { color: var(--gold); }
/* 중계 HUD (위쪽), 카운트다운, 사진 판정, 플래시 */
.race-hud { position: absolute; top: 2.4cqh; left: 14cqw; right: 29cqw; display: flex; align-items: center; justify-content: space-between; gap: 1cqw; z-index: 5; }
.race-msg { font-size: 1.5cqw; font-weight: 900; color: #fff; text-shadow: 0 .2cqw 1cqw rgba(0,0,0,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.race-msg.pop { animation: msgPop .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes msgPop { from { transform: translateY(-.8cqh) scale(.9); opacity: 0; } }
.race-msg.big { color: var(--gold); font-size: 2.1cqw; }
.race-time { display: flex; align-items: center; gap: .6cqw; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.race-time span { font-size: 1.8cqw; font-weight: 900; color: var(--gold); min-width: 4.4cqw; text-align: right; text-shadow: 0 .2cqw .8cqw rgba(0,0,0,.5); }
.race-time i { width: 14cqw; height: .8cqh; background: rgba(255,255,255,.15); border-radius: 999px; overflow: hidden; display: block; }
.race-time b { display: block; height: 100%; width: 0; background: var(--grad-blue); border-radius: 999px; }
.countdown { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15cqw; font-weight: 900; color: #fff; text-shadow: 0 .6cqw 3cqw rgba(0,0,0,.7), 0 0 2cqw rgba(74,128,255,.6); z-index: 6; pointer-events: none; letter-spacing: -.04em; }
.countdown.start { font-size: 11cqw; color: var(--gold); }
.countdown.go { animation: cdPop .85s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes cdPop { 0% { transform: scale(2.4); opacity: 0; } 22% { transform: scale(1); opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; transform: scale(.85); } }
.photo-finish { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) rotate(-6deg); z-index: 7; background: #fff; color: #dc2626; font-size: 4cqw; font-weight: 900; letter-spacing: .06em; padding: .6cqh 2cqw; border: .3cqw solid #dc2626; box-shadow: 0 1cqw 3cqw rgba(0,0,0,.5); animation: revealPop .4s cubic-bezier(.2,1.6,.4,1); pointer-events: none; }
/* 시상대 */
.podium { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6cqh; background: radial-gradient(60% 60% at 50% 45%, rgba(20,33,61,.55), rgba(4,9,26,.92)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: fadeIn .4s forwards; }
.pd-title { font-size: 2cqw; font-weight: 900; color: var(--gold); letter-spacing: .1em; }
.pd-row { display: flex; align-items: flex-end; justify-content: center; gap: 2.4cqw; }
.pd-row.many { gap: 1.2cqw; }
.pd-card { display: flex; flex-direction: column; align-items: center; gap: .5cqh; animation: revealPop .55s cubic-bezier(.2,1.5,.4,1) both; width: 18cqw; }
.pd-card.r1 { width: 28cqw; }
.pd-row.many .pd-card { width: 12cqw; }
.pd-rank { font-size: 1.3cqw; font-weight: 900; color: rgba(255,255,255,.7); letter-spacing: .12em; }
.pd-card.r1 .pd-rank { color: var(--gold); font-size: 2cqw; margin-bottom: 1.2cqh; }   /* 머리 위 우승판이 순위 글자를 가리지 않게 */
.pd-rank { margin-bottom: .6cqh; }
.pd-mt { position: relative; width: 16cqw; height: 16cqw; --lane-h: 40cqh; }
.pd-card.r1 .pd-mt { width: 26cqw; height: 26cqw; }
.pd-row.many .pd-mt { width: 10cqw; height: 10cqw; }
.pd-mt > img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 1cqw 1.5cqw rgba(0,0,0,.5)); }
/* 시상대 턴어라운드: 프레임 두 장을 겹쳐 번갈아 켠다(살짝 크로스페이드) + 바닥의 빛나는 턴테이블 원반 */
.pd-mt.sway { animation: pdSway 2.6s ease-in-out infinite alternate; transform-origin: 50% 100%; }   /* 좌우로 살랑살랑 (회전·프레임 교체 없음) */
.pd-mt.flying { animation: pdFly 2.4s ease-in-out infinite alternate; }   /* 1위: 유니콘을 타고 둥실 떠오른다 */
@keyframes pdFly { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-6%) rotate(2deg); } }
.pd-rank small { font-size: .7em; color: rgba(255,255,255,.55); margin-left: .4em; }
@keyframes pdSway { from { transform: rotate(-3.5deg); } to { transform: rotate(3.5deg); } }
.pd-mt .pd-turn { position: absolute; inset: 0; opacity: 0; }
.pd-mt .pd-turn.fading { opacity: 0; }   /* 옛 프레임은 새 프레임이 위에서 나타나는 동안 같이 사라진다(크로스디졸브) */
.pd-mt .pd-turn.on { opacity: 1; }
.pd-mt .pd-disc { position: absolute; left: 6%; right: 6%; bottom: -1.5%; height: 11%; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.55), rgba(160,190,255,.25) 55%, rgba(160,190,255,0) 72%); box-shadow: 0 0 1.2cqw rgba(140,180,255,.35); animation: discPulse 1.5s ease-in-out infinite; }
.pd-card.r1 .pd-mt .pd-disc { background: radial-gradient(ellipse at 50% 50%, rgba(255,240,190,.7), rgba(255,209,102,.3) 55%, rgba(255,209,102,0) 72%); box-shadow: 0 0 2cqw rgba(255,209,102,.45); }
@keyframes discPulse { 0%, 100% { transform: scaleX(1); opacity: .85; } 50% { transform: scaleX(1.06); opacity: 1; } }
/* 우승판: 머리 위로 든 흰 판 자리(board.json)에 당첨자 로고 또는 이름. 정면 계열 프레임(1·2·8)에서만 보이고 위치가 프레임 따라 살짝 옮겨 간다 */
.pd-mt .pd-board { position: absolute; z-index: 3; display: flex; align-items: center; justify-content: center; container-type: size; opacity: 0; transition: opacity .2s; pointer-events: none; padding: 5% 5%; box-sizing: border-box; background: #fff; border-radius: 6% / 12%; box-shadow: 0 .3cqw 1cqw rgba(0,0,0,.35), inset 0 0 0 .12cqw #dfe3ec; }   /* 우승판 자체를 흰 판으로 그려 이름·로고가 판 크기에 맞게 크게 */
.pd-mt .pd-board.on { opacity: 1; }
.pd-mt .pd-board { flex-direction: column; gap: 4%; }
.pd-mt .pd-board span { font-size: min(64cqh, calc(96cqw / var(--tw, 6))); font-weight: 900; color: var(--navy); letter-spacing: -.03em; white-space: nowrap; line-height: 1; }   /* 이름이 우선, 판 높이의 64%까지 */
.pd-mt .pd-board.has-logo span { font-size: min(44cqh, calc(96cqw / var(--tw, 6))); }
.pd-mt .pd-board img { width: 80%; height: 40%; object-fit: contain; }
.pd-mt .bib { display: none; }
.pd-mt .bib { font-size: 1.05cqw; top: 55%; left: 22%; right: 22%; }
.pd-card.r1 .pd-mt .bib { font-size: 1.8cqw; }
.pd-mt .bib img { height: 2.2cqw; }
.pd-card.r1 .pd-mt .bib img { height: 4cqw; }
.pd-name { font-size: 1.6cqw; font-weight: 900; text-align: center; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-card.r1 .pd-name { font-size: 3cqw; color: var(--gold); text-shadow: 0 .4cqw 2cqw rgba(255,209,102,.5); }
.pd-tag { font-size: 1cqw; font-weight: 800; padding: .3cqh 1cqw; border-radius: 999px; background: rgba(255,255,255,.12); color: rgba(255,255,255,.7); }
.pd-card.win .pd-tag { background: linear-gradient(180deg,#ffe08a,#f4a300); color: #3b1a00; }
.pd-card.r1.win .pd-tag { font-size: 1.3cqw; }
.pd-stand { position: relative; width: 100%; height: 6cqh; margin-top: 1.4cqh; background: linear-gradient(180deg, #3b6ffb 0%, #2a55d4 55%, #1d3a8f 100%); border-radius: 0 0 .3cqw .3cqw; display: flex; align-items: center; justify-content: center; font-size: 2.4cqw; font-weight: 900; color: rgba(255,255,255,.9); text-shadow: 0 .15cqw .3cqw rgba(0,0,0,.35); box-shadow: 0 1.2cqh 2cqh -1cqh rgba(0,0,0,.6), inset 0 -.4cqh .8cqh rgba(0,0,0,.25); }   /* 3D 단상: 앞면(그라디언트) + 윗면(::before, 원근) */
.pd-stand::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 1.4cqh; background: linear-gradient(180deg, #8fb0ff, #5d87ff); transform: perspective(40cqw) rotateX(55deg); transform-origin: 50% 100%; border-radius: .4cqw .4cqw 0 0; box-shadow: inset 0 .1cqh 0 rgba(255,255,255,.55); }
.pd-stand::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.14), transparent 30%, transparent 70%, rgba(0,0,0,.18)); pointer-events: none; }
.pd-card.r1 .pd-stand { height: 10cqh; background: linear-gradient(180deg, #ffd980 0%, #f7b32b 55%, #c97a00 100%); color: #3b1a00; font-size: 3.4cqw; text-shadow: 0 .15cqw .3cqw rgba(255,255,255,.35); }
.pd-card.r1 .pd-stand::before { background: linear-gradient(180deg, #fff1c2, #ffd166); }
.pd-card.r3 .pd-stand { height: 4cqh; }
.pd-sub { font-size: 1.6cqw; font-weight: 800; color: rgba(255,255,255,.85); }
/* 경주 장애물: 3D 소품 이미지(assets/props) — 허들·바나나·물웅덩이·부스터. 느려지고 빨라지는 이유가 보이게 */
.ob { position: absolute; bottom: 3%; transform: translateX(-50%); z-index: 1; pointer-events: none; width: auto; filter: drop-shadow(0 .12cqw .25cqw rgba(0,0,0,.45)); transition: transform .4s cubic-bezier(.3,1.3,.5,1), opacity .4s; }
.ob.hurdle { height: calc(var(--lane-h) * .17); transform-origin: 20% 100%; }   /* 정말 작은 허들: 매너티 발목~무릎 아래, 뛰어넘는 느낌이 나게 */
.ob.hurdle.hit { transform: translateX(-30%) rotate(78deg); opacity: .8; }   /* 걸려 넘어지면 허들이 앞으로 쓰러진다 */
.ob.banana { height: calc(var(--lane-h) * .2); }
.ob.banana.hit { transform: translateX(-20%) translateY(-40%) rotate(70deg); opacity: .6; }
.ob.puddle { height: calc(var(--lane-h) * .13); bottom: 1%; filter: drop-shadow(0 0 .4cqw rgba(120,190,255,.5)); }
.ob.puddle.hit { animation: splash .5s ease-out; }
@keyframes splash { 0% { transform: translateX(-50%) scale(1); } 40% { transform: translateX(-50%) scale(1.4, 1.9); opacity: .9; } 100% { transform: translateX(-50%) scale(1); opacity: .7; } }
.ob.boost { height: calc(var(--lane-h) * .16); bottom: 1%; animation: boostGlow 1s ease-in-out infinite alternate; }
@keyframes boostGlow { from { filter: brightness(.9) drop-shadow(0 0 .2cqw rgba(255,209,102,.4)); } to { filter: brightness(1.35) drop-shadow(0 0 .7cqw rgba(255,209,102,.9)); } }
.ob.boost.hit { animation: none; opacity: .5; }
.track.tiny .ob.hurdle { height: calc(var(--lane-h) * .2); }
/* 매너티 반응 (그동안 race.js 가 jump/trip 프레임으로 바꿔 둔다) */
/* 점프·엎드리기는 race.js 가 속도에 맞춰 포물선/납작 이동을 직접 그린다 (CSS 애니메이션 없음) */
.racer.jumping .mt-wrap, .racer.sliding .mt-wrap { transition: none; }
.racer.sliding .band, .racer.sliding .bib { opacity: 0; }   /* 엎드린 프레임에서는 머리띠·배번 자리가 틀어지므로 숨긴다 */
.racer.tired .mt-wrap { animation: tiredPant .55s ease-in-out infinite; filter: saturate(.85) drop-shadow(0 .18cqw .3cqw rgba(0,0,0,.35)); }
@keyframes tiredPant { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(1.5%) scale(1.02, .97); } }
.racer.tired::before { content: '💦'; position: absolute; left: 62%; top: -6%; font-size: calc(var(--lane-h) * .24); animation: tiredDrop 1.1s ease-in infinite; pointer-events: none; }
@keyframes tiredDrop { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(40%); opacity: 0; } }
.racer.trip .mt-wrap { animation: tripFall .9s cubic-bezier(.3,1.1,.5,1); transition: none; }   /* 앞으로 고꾸라졌다가(넘어짐 프레임) 튕기고 일어난다 */
@keyframes tripFall { 0% { transform: translateY(-14%) translateX(4%) rotate(14deg); } 22% { transform: translateY(2%) translateX(10%) rotate(2deg) scale(1.06, .9); } 34% { transform: translateY(-4%) translateX(11%) rotate(-2deg) scale(1); } 46% { transform: translateY(2%) translateX(12%) rotate(0); } 78% { transform: translateY(2%) translateX(12%) rotate(0); } 100% { transform: translateY(0) translateX(0) rotate(0); } }
.racer.slip .mt-wrap { animation: slipSlide .9s ease-out; transition: none; }   /* 미끄러져 배로 쭉 밀려간다 */
@keyframes slipSlide { 0% { transform: translateY(-20%) rotate(-24deg); } 28% { transform: translateY(2%) translateX(10%) rotate(-6deg) scale(1.08, .92); } 60% { transform: translateY(2%) translateX(22%) rotate(2deg) scale(1); } 80% { transform: translateY(2%) translateX(24%) rotate(0); } 100% { transform: translateY(0) translateX(0) rotate(0); } }
.racer.trip .band, .racer.slip .band { opacity: 0; }   /* 엎어진 프레임에서는 머리띠·배번이 제자리를 벗어나므로 숨긴다 */
.racer.trip .bib, .racer.slip .bib { opacity: 0; }
.band, .bib { transition: opacity .15s; }
.racer.trip::after, .racer.slip::after { content: '💫'; position: absolute; left: 60%; top: -10%; transform: translateX(-50%); font-size: calc(var(--lane-h) * .3); animation: starsSpin .9s linear; pointer-events: none; }
@keyframes starsSpin { from { transform: translateX(-50%) rotate(0); opacity: 1; } to { transform: translateX(-50%) rotate(360deg); opacity: 0; } }
.racer.boost .mt-wrap { animation: boostDash .8s ease-out; transition: none; filter: drop-shadow(0 0 .6cqw rgba(255,209,102,.9)) drop-shadow(0 .2cqw .35cqw rgba(0,0,0,.4)); }   /* 앞으로 쏠리며 쭉 늘어난다 */
@keyframes boostDash { 0% { transform: translateY(-6%) rotate(10deg) scale(1.18, .9); } 35% { transform: translateY(-10%) rotate(8deg) scale(1.1, .96); } 100% { transform: translateY(0) rotate(0) scale(1); } }
.racer.boost::after { content: '⚡'; position: absolute; left: 50%; top: -18%; transform: translateX(-50%); font-size: calc(var(--lane-h) * .34); animation: boostPop .8s ease-out forwards; pointer-events: none; }
@keyframes boostPop { 0% { transform: translateX(-50%) scale(.4); opacity: 0; } 30% { transform: translateX(-50%) scale(1.3); opacity: 1; } 100% { transform: translateX(-50%) translateY(-60%) scale(1); opacity: 0; } }
.racer.dizzy .mt-wrap { animation: none; }
@keyframes dizzyWobble { 0%, 100% { transform: rotate(-7deg) translateY(2%); } 50% { transform: rotate(7deg) translateY(0); } }
.racer.dizzy::before { content: '✨'; position: absolute; left: 60%; top: -8%; font-size: calc(var(--lane-h) * .26); animation: dizzyStars 1.2s linear infinite; pointer-events: none; }
@keyframes dizzyStars { from { transform: rotate(0) translateX(20%); opacity: .9; } to { transform: rotate(360deg) translateX(20%); opacity: .6; } }
.track.tiny .racer::before, .track.tiny .racer::after { display: none; }
/* 연결된 추첨 화면 목록 (내 화면은 파란 배경) */
.disp-list { margin: 10px 0 4px; display: grid; gap: 6px; }
.disp-list-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: rgba(255,255,255,.65); padding: 2px 4px; }
.disp-list-head b { color: #fff; font-size: 13px; }
.disp-list-head button { margin-left: auto; }
.disp-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.disp-row.mine { background: rgba(47,107,255,.28); border-color: rgba(96,140,255,.6); }
.disp-row-dot { width: 10px; height: 10px; border-radius: 50%; background: #f59e0b; flex-shrink: 0; }
.disp-row-dot.on { background: #22c55e; }
.disp-row-main { flex: 1; min-width: 0; font-size: 13px; }
.disp-row-main b { font-weight: 800; }
.disp-row-sub { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 2px; }
.disp-tag { display: inline-block; font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.14); color: rgba(255,255,255,.8); margin-right: 6px; vertical-align: 1px; }
.disp-tag.mine { background: #2f6bff; color: #fff; }
button.small { padding: 6px 12px; min-height: 32px; font-size: 13px; }

/* 내장 추첨 화면: 기본은 위에 고정(스크롤해도 따라옴), .flow 면 다른 카드처럼 제자리에서 같이 스크롤 */
.embed-panel.flow { position: static; }

/* 천장 장애물(림보 바): 엎드려 미끄러져 통과. 아이템(로켓·버섯·별): 먹으면 튀어 오르며 사라지고 가속 */
.ob.limbo { height: calc(var(--lane-h) * .56); bottom: 2%; transform-origin: 50% 100%; }
.ob.limbo.passed { filter: drop-shadow(0 0 .5cqw rgba(140,220,255,.6)) drop-shadow(0 .12cqw .25cqw rgba(0,0,0,.45)); }
.ob.item { height: calc(var(--lane-h) * .26); bottom: 22%; animation: itemFloat 1.1s ease-in-out infinite alternate; filter: drop-shadow(0 0 .5cqw rgba(255,230,120,.7)) drop-shadow(0 .12cqw .25cqw rgba(0,0,0,.45)); }
@keyframes itemFloat { from { transform: translateX(-50%) translateY(0) rotate(-6deg); } to { transform: translateX(-50%) translateY(-14%) rotate(6deg); } }
.ob.item.taken { animation: itemTaken .5s ease-out forwards; }
@keyframes itemTaken { 0% { transform: translateX(-50%) scale(1); opacity: 1; } 100% { transform: translateX(-50%) translateY(-120%) scale(1.6); opacity: 0; } }
.track.tiny .ob.item { height: calc(var(--lane-h) * .32); }
.racer.boost::after { content: '⚡ SPEED UP'; font-size: calc(var(--lane-h) * .16); white-space: nowrap; color: #ffd166; font-weight: 900; text-shadow: 0 .1cqw .3cqw rgba(0,0,0,.7); }
.racer.boost[data-item="rocket"]::after { content: '🚀 로켓!'; }
.racer.boost[data-item="mushroom"]::after { content: '🍄 버섯!'; }
.racer.boost[data-item="star"]::after { content: '⭐ 스타!'; }
/* 참가자 채팅 티커 (트랙 아래, 경주 중) */
.chat-ticker { position: absolute; left: 2.6cqw; right: 29cqw; bottom: 1cqh; display: flex; gap: .8cqw; z-index: 6; pointer-events: none; overflow: hidden; }
.chat-item { background: rgba(6,16,42,.72); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: .5cqh 1.1cqw; font-size: 1cqw; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30cqw; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.chat-item b { color: #9ec5ff; margin-right: .5cqw; font-weight: 900; }
.chat-item.pop { animation: msgPop .45s cubic-bezier(.2,1.6,.4,1); }
/* ───── 경주 v3: 바닥 기둥(점프)·천장 기둥(엎드려 기기)·게임식 아이템 효과 ───── */
.ob.pillar { height: calc(var(--lane-h) * .36); bottom: 2%; }   /* 바닥 기둥: 매너티 허리 높이 → 확실히 도약해야 넘는다 */
.ob.ceiling { top: -2%; bottom: auto; height: calc(var(--lane-h) * .5); transform: translateX(-50%); }   /* 천장 기둥: 위에서 내려와 아래 절반만 남는다 → 엎드려 통과 */
.ob.pillar.passed, .ob.ceiling.passed { filter: drop-shadow(0 0 .5cqw rgba(140,220,255,.55)) drop-shadow(0 .12cqw .25cqw rgba(0,0,0,.45)); }
.track.tiny .ob.pillar { height: calc(var(--lane-h) * .42); }
.ob.weight { height: calc(var(--lane-h) * .24); bottom: 3%; animation: none; filter: drop-shadow(0 0 .4cqw rgba(190,120,255,.6)) drop-shadow(0 .12cqw .25cqw rgba(0,0,0,.45)); }
.racer.crawling .band, .racer.crawling .bib { opacity: 0; }
.racer.jumping .bib { top: 40%; }
.racer.jumping { z-index: 3; }   /* 점프 중엔 기둥 앞으로 나와 '넘는' 것이 보인다 */
.racer.crawling { z-index: 0; }   /* 천장 기둥 아래로 들어간다 */
.ob.pillar { z-index: 1; } .ob.ceiling { z-index: 2; }
/* 아이템 효과 라벨: 속도 증가 ▲ / 부스터 모드 / 속도 감소 ▼ */
.racer.boost::after { content: '속도 증가 ▲'; color: #7cff9a; }
.racer.booster::after { content: '🚀 부스터 모드!'; position: absolute; left: 50%; top: -22%; transform: translateX(-50%); font-size: calc(var(--lane-h) * .17); white-space: nowrap; color: #ffd166; font-weight: 900; text-shadow: 0 .1cqw .3cqw rgba(0,0,0,.7); animation: boostPop 1.6s ease-out forwards; pointer-events: none; }
.racer.booster .mt-wrap { filter: drop-shadow(0 0 .8cqw rgba(255,150,60,.95)) drop-shadow(0 .2cqw .35cqw rgba(0,0,0,.4)); transform: scale(1.45) translateY(-4%) !important; transform-origin: 50% 100%; }   /* 유니콘을 타면 몸집이 커 보인다 */
.racer.booster .band, .racer.booster .bib { opacity: 0; }
.racer.booster::before { content: ''; position: absolute; right: 78%; top: 38%; width: 90%; height: 34%; background: linear-gradient(90deg, transparent, rgba(255,120,40,.35) 30%, rgba(255,200,80,.9) 70%, #fff8c0); -webkit-mask: radial-gradient(ellipse at 100% 50%, #000 40%, transparent 75%); mask: radial-gradient(ellipse at 100% 50%, #000 40%, transparent 75%); animation: flameFlick .12s ease-in-out infinite alternate; }   /* 불꽃 꼬리 */
@keyframes flameFlick { from { transform: scaleX(1) scaleY(1); opacity: .85; } to { transform: scaleX(1.15) scaleY(.85); opacity: 1; } }
.racer.slowed::after { content: '속도 감소 ▼'; position: absolute; left: 50%; top: -18%; transform: translateX(-50%); font-size: calc(var(--lane-h) * .16); white-space: nowrap; color: #c9a6ff; font-weight: 900; text-shadow: 0 .1cqw .3cqw rgba(0,0,0,.7); animation: boostPop 1.3s ease-out forwards; pointer-events: none; }
.racer.slowed .mt-wrap { filter: saturate(.6) brightness(.9) drop-shadow(0 0 .5cqw rgba(160,100,255,.7)); }
.track.tiny .racer::before, .track.tiny .racer::after { display: none; }