@import url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR:wght@400;600;800&display=swap');

:root { --ink:#233044; --navy:#17233a; --cream:#fff8e8; --pink:#ff7f9f; --yellow:#ffd76a; --mint:#5dd6b5; --blue:#62c8e7; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }
body { color:var(--ink); font-family:"Noto Sans KR",sans-serif; }
button, input { font:inherit; }

.overlay-page { overflow:hidden; background:transparent; }
.race-stage { position:relative; width:100vw; height:100vh; min-height:540px; overflow:hidden; background:linear-gradient(#9cecff 0 27%,#f7e9ba 27% 30%,#4ab9d4 30% 100%); }
.race-stage::before { content:""; position:absolute; inset:0 0 auto; height:31%; background:radial-gradient(circle at 8% 80%,#65c477 0 7%,transparent 7.4%),radial-gradient(circle at 87% 75%,#53b96b 0 9%,transparent 9.4%),linear-gradient(165deg,transparent 58%,#50b96a 59% 75%,#318f4e 76%); opacity:.82; }
.race-header { position:relative; z-index:5; height:22%; display:flex; align-items:center; justify-content:space-between; padding:2.3vh 4vw; }
.eyebrow { margin:0 0 5px; color:#ef527d; font-size:clamp(14px,1.1vw,19px); font-weight:800; letter-spacing:.16em; }
.race-header h1 { margin:0; color:#fff; font:clamp(42px,3.4vw,64px)/1 "Jua",sans-serif; text-shadow:0 5px 0 rgba(20,72,92,.24),0 0 3px #186078; }
.race-status { padding:.72em 1.25em; border:4px solid rgba(35,48,68,.8); border-radius:999px; background:rgba(255,255,255,.9); font-weight:800; font-size:clamp(20px,1.65vw,30px); box-shadow:0 7px 0 rgba(35,48,68,.18); }
.race-status.live { color:#ef3f6b; animation:pulse 1.2s infinite; }
.sign-dock { position:absolute; z-index:12; left:calc(50% + 40px); top:4.8%; display:flex; gap:12px; align-items:center; justify-content:center; transform:translateX(-50%); }
.sign-dock::before { content:"공용 시그 선착장 · 먼저 먹는 사람이 임자!"; position:absolute; left:50%; top:-34px; transform:translateX(-50%); padding:5px 16px; border-radius:999px; color:#fff; background:#ef527d; font-size:15px; font-weight:800; white-space:nowrap; box-shadow:0 3px 0 #b63b5c; }
.sign-card { position:relative; flex:0 0 auto; width:clamp(205px,15.26vw,293px); aspect-ratio:293/167; overflow:hidden; border:4px solid #fff; border-radius:18px; background:linear-gradient(145deg,#fff6cc,#f7a9bb); box-shadow:0 7px 0 #25445d99,0 10px 22px #163c5866; animation:card-float 2.2s ease-in-out infinite alternate; animation-delay:calc(var(--card-index) * -.28s); }
.sign-card img { display:block; width:100%; height:100%; object-fit:cover; }.sign-placeholder { display:grid; place-items:center; align-content:center; width:100%; height:100%; color:#fff; background:linear-gradient(135deg,#51c8e1,#776bd9); text-align:center; font:44px/1 "Jua"; }.sign-placeholder small { display:block; max-width:90%; margin-top:8px; font:16px/1.2 "Noto Sans KR"; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sign-card-info { position:absolute; inset:auto 0 0; display:flex; align-items:center; gap:8px; padding:9px 12px; color:#fff; background:linear-gradient(transparent,#14253ddd 28%); text-shadow:0 2px 2px #0008; }.sign-card-info b { font-size:24px; white-space:nowrap; }.sign-card-info span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; font-weight:700; }
.get-stamp { position:absolute; z-index:5; inset:0; display:grid; place-content:center; opacity:0; color:#fff; background:#ef527df2; text-align:center; transform:scale(2) rotate(-12deg); }.get-stamp b { font:52px/1 "Jua"; text-shadow:0 4px 0 #9b2749; }.get-stamp span { font:25px/1.2 "Jua"; }.get-stamp small { margin-top:4px; font-weight:800; }
.sign-card.claimed { border-color:#fff4a5; animation:card-hit .36s ease-out both; }.sign-card.claimed .get-stamp { animation:stamp-in .32s cubic-bezier(.2,1.8,.3,1) forwards; }.sign-card.departing { opacity:0; transform:scale(.5); transition:.2s; }
.dock-empty { width:min(900px,55vw); padding:24px; border:3px dashed #ffffffaa; border-radius:18px; color:#24627a; background:#ffffff66; text-align:center; font-weight:800; }
.race-course { position:relative; height:78%; display:grid; grid-template-rows:repeat(var(--lane-count),minmax(0,1fr)); border-top:5px solid rgba(27,100,121,.35); }
.race-lane { position:relative; min-height:0; overflow:hidden; border-bottom:2px dashed rgba(255,255,255,.33); background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(22,106,142,.12)); }
.lane-water { position:absolute; inset:auto -5% 4% -5%; height:32%; opacity:.25; background:radial-gradient(ellipse at center,transparent 44%,#d5f8ff 46% 54%,transparent 56%) 0 0/180px 45px; animation:water 5s linear infinite; }
.start-line,.finish-line { position:absolute; z-index:1; top:0; bottom:0; width:26px; background:repeating-conic-gradient(#fff 0 25%,#17233a 0 50%) 0/26px 26px; box-shadow:0 0 0 3px rgba(23,35,58,.18); }
.start-line { left:7%; opacity:.8; }.finish-line { right:4%; }
.racer { position:absolute; z-index:3; left:5%; top:50%; width:var(--racer-size); height:min(90%,calc(var(--racer-size) * 1.4)); transform:translate(0,-50%); transition:left .85s cubic-bezier(.18,.88,.32,1.2),transform .85s cubic-bezier(.18,.88,.32,1.2); }
.racer img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 8px 4px rgba(16,57,76,.25)); }
.racer:not(.moving) img { animation:kart-engine-idle .72s ease-in-out infinite alternate; transform-origin:50% 86%; }
.racer::after { content:""; position:absolute; z-index:-1; left:-53%; top:50%; width:72%; aspect-ratio:2/1; opacity:0; background:url("assets/kart-vfx-gpt-image-2.png") 0 0/400% 200% no-repeat; pointer-events:none; transform:translateY(-50%) scaleX(-1); }
.racer-wake { position:absolute; z-index:-1; left:-38%; bottom:8%; width:72%; height:25%; opacity:0; background:repeating-radial-gradient(ellipse at right,transparent 0 8px,rgba(220,249,255,.75) 10px 13px,transparent 15px 22px); transform:skewX(-18deg); }
.racer.moving img { animation:racer-dash .85s ease-out; }.racer.moving .racer-wake { animation:wake-burst 1.25s ease-out; }.racer.moving::after { animation:gpt-boost-vfx 1.05s ease-out both; }
.name-bubble { position:absolute; z-index:4; left:50%; top:3px; transform:translate(-50%,-22%); min-width:118px; padding:7px 14px; border:4px solid var(--navy); border-radius:18px; background:#fff; text-align:center; font:clamp(20px,1.65vw,30px)/1 "Jua",sans-serif; box-shadow:0 5px 0 rgba(23,35,58,.2); white-space:nowrap; }
.name-bubble small { display:block; margin-top:4px; color:#ec5e82; font:800 14px/1 "Noto Sans KR"; }
.place-badge { position:absolute; right:-8px; top:9%; display:grid; place-items:center; width:48px; aspect-ratio:1; border-radius:50%; color:#8a5300; background:var(--yellow); border:3px solid #fff4c2; box-shadow:0 3px 0 #b37718; font-family:"Jua"; }
.race-course[data-dense="true"] .name-bubble { min-width:78px; max-width:150px; overflow:hidden; padding:3px 7px; border-width:2px; border-radius:10px; font-size:14px; text-overflow:ellipsis; }
.race-course[data-dense="true"] .name-bubble small { margin-top:2px; font-size:10px; }
.race-course[data-dense="true"] .place-badge { right:-4px; width:30px; border-width:2px; font-size:11px; }
.move-toast { position:absolute; z-index:20; left:50%; bottom:5%; padding:.55em 1.4em; transform:translate(-50%,60px) scale(.7); opacity:0; border:4px solid #fff; border-radius:999px; color:#fff; background:#ef5e85; box-shadow:0 7px 0 #bd3a61,0 12px 30px rgba(41,34,63,.28); font:clamp(24px,3vw,50px)/1.2 "Jua"; transition:.35s; }
.move-toast.show { transform:translate(-50%,0) scale(1); opacity:1; }
.winner-banner { position:absolute; z-index:30; left:50%; top:52%; min-width:46%; padding:.55em 1.1em; opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.4) rotate(-5deg); border:7px solid #fff7c4; border-radius:35px; color:#fff; background:linear-gradient(135deg,#ffbd3e,#ef527d); box-shadow:0 12px 0 #a93c5c,0 22px 55px #17334b66; text-align:center; font:clamp(42px,6vw,100px)/1.15 "Jua",sans-serif; text-shadow:0 4px 0 #a54d3c; transition:.45s cubic-bezier(.2,1.5,.4,1); }.winner-banner.show { opacity:1; transform:translate(-50%,-50%) scale(1) rotate(-1deg); animation:winner-pop 1.2s ease-in-out infinite alternate; }
.claim-flyer { position:fixed; z-index:100; margin:0; overflow:hidden; border:5px solid #fff4a5; border-radius:18px; pointer-events:none; transform-origin:center; filter:drop-shadow(0 15px 12px #183b5966); }
.claim-splash { position:fixed; z-index:99; width:10px; height:10px; pointer-events:none; transform:translate(-50%,-50%); }.claim-splash::before { content:""; position:absolute; left:50%; top:50%; width:35px; height:16px; border:6px solid #d8faff; border-radius:50%; animation:splash-ring .7s ease-out forwards; }.claim-splash i { position:absolute; width:13px; height:22px; border-radius:60% 40% 60% 40%; background:#c7f7ff; animation:splash-drop .85s ease-out forwards; }.claim-splash i:nth-child(1){--x:-62px;--y:-42px}.claim-splash i:nth-child(2){--x:-28px;--y:-70px}.claim-splash i:nth-child(3){--x:14px;--y:-78px}.claim-splash i:nth-child(4){--x:48px;--y:-51px}.claim-splash i:nth-child(5){--x:72px;--y:-22px}

.focus-page { width:100vw; height:100vh; overflow:hidden; background:transparent; }
.focus-stage { position:relative; width:100vw; height:min(36vh,390px); min-height:320px; overflow:hidden; background:linear-gradient(#9cecff 0 55%,#f7e9ba 55% 62%,#4ab9d4 62% 100%); }
.focus-stage::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 8% 74%,#65c477 0 14%,transparent 14.4%),radial-gradient(circle at 88% 74%,#53b96b 0 17%,transparent 17.4%),linear-gradient(165deg,transparent 55%,#50b96a 56% 69%,#318f4e 70%); opacity:.82; }
.focus-header { position:relative; z-index:5; height:55%; display:flex; align-items:center; padding:2.3vh 2.4vw; }
.focus-header h1 { margin:0; color:#fff; font:clamp(42px,3.4vw,64px)/1 "Jua",sans-serif; text-shadow:0 5px 0 rgba(20,72,92,.24),0 0 3px #186078; }
.focus-course { position:absolute; z-index:4; left:0; right:0; bottom:0; height:48%; border-top:5px solid rgba(27,100,121,.35); }
.focus-course .race-lane { width:100%; height:100%; }
.focus-course .racer { --racer-size:150px; }
.focus-stage .move-toast { bottom:4%; font-size:clamp(22px,2.2vw,38px); }

.control-page { min-height:100vh; background:#f6f3eb; }
.control-wrap { width:min(1200px,calc(100% - 32px)); margin:auto; padding:34px 0 70px; }
.control-header,.section-title,.hero-panel,.test-row { display:flex; align-items:center; gap:12px; }
.control-header { justify-content:space-between; margin-bottom:22px; }.control-header h1,.section-title h2 { margin:0; color:var(--navy); font-family:"Jua"; }.control-header h1 { font-size:42px; }
.obs-links { display:flex; align-items:center; gap:9px; }
.button.focus-link { background:#ef527d; }
.panel { padding:24px; margin-bottom:18px; border:1px solid #ded8cb; border-radius:24px; background:#fff; box-shadow:0 9px 26px rgba(44,47,60,.07); }
.hero-panel { flex-wrap:wrap; }.hero-panel .field { flex:1; }.hero-panel .field.small { flex:0 0 110px; }
.control-grid { display:grid; grid-template-columns:1.35fr .85fr; gap:18px; }.control-grid .panel { margin:0 0 18px; }
.field { display:grid; gap:6px; }.field label { color:#777; font-size:12px; font-weight:800; }.field input,.test-row input { width:100%; padding:11px 13px; border:2px solid #e3dfd5; border-radius:12px; outline:none; }.field input:focus,.test-row input:focus { border-color:var(--pink); }
.button { border:0; border-radius:12px; padding:11px 15px; color:#fff; background:var(--navy); font-weight:800; cursor:pointer; text-decoration:none; transition:.15s; }.button:hover { transform:translateY(-2px); }.button:disabled { opacity:.45; cursor:not-allowed; transform:none; }.button.start { background:#24aa7d; }.button.round-start { color:#17233a; background:#ffd21f; box-shadow:0 4px 0 #b78200; }.button.danger { background:#e25767; }.button.ghost { color:var(--navy); background:#fff; border:2px solid var(--navy); }.button.wide { width:100%; }.small-button { padding:8px 12px; }
.section-title { justify-content:space-between; margin-bottom:16px; }.hint { margin:7px 0 16px; color:#8a8690; font-size:13px; }.racer-editor { display:grid; gap:10px; margin-bottom:14px; }
.character-add-controls { display:flex; align-items:center; gap:8px; }.character-add-controls select,.character-change-label select { padding:8px 10px; border:2px solid #cbd7e4; border-radius:10px; color:var(--ink); background:#fff; font-weight:700; outline:none; }.character-add-controls select:focus,.character-change-label select:focus { border-color:var(--blue); }.character-change-label { display:flex; align-items:center; gap:6px; color:#2681a3; font-weight:800; }.character-change-label select { max-width:150px; padding:5px 7px; font-size:12px; }
.sign-setup-row { display:flex; align-items:end; gap:10px; flex-wrap:wrap; }.sign-setup-row .field.small { width:145px; }.file-button input { display:none; }.sign-setup-panel .status-line { margin:14px 0 0; }
.next-round-preview { margin-top:14px; padding:14px; border:3px solid #ffd21f; border-radius:16px; background:linear-gradient(145deg,#fffdf0,#eef7ff); box-shadow:inset 0 0 0 2px #fff; }.next-round-preview[hidden] { display:none; }.next-round-preview header { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:10px; }.next-round-preview header div { display:grid; }.next-round-preview header small { color:#e25767; font-size:10px; font-weight:900; letter-spacing:.12em; }.next-round-preview header strong { font-size:18px; }.next-round-preview header span { color:#607086; font-size:12px; font-weight:800; }.next-sign-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }.next-sign-card { min-width:0; padding:3px; border:2px solid #d8e1ec; border-radius:12px; background:#fff; box-shadow:0 4px 0 #17233a33; }.next-sign-art { position:relative; aspect-ratio:293/167; overflow:hidden; border-radius:8px; background:linear-gradient(145deg,#50cfff,#7569df); animation:card-float 2.2s ease-in-out infinite alternate; animation-delay:calc(var(--preview-index) * -.22s); }.next-sign-art img,.next-sign-placeholder { display:grid; place-items:center; width:100%; height:100%; object-fit:cover; color:#fff; font:24px "Jua"; }.next-sign-copy { position:absolute; inset:auto 0 0; display:grid; padding:18px 8px 7px; color:#fff; background:linear-gradient(transparent,#102038e8 35%); text-shadow:0 1px 2px #000; }.next-sign-copy b { font-size:16px; }.next-sign-copy span { overflow:hidden; font-size:11px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }.next-sign-manual { display:flex; gap:5px; padding:7px 3px 3px; }.next-sign-manual input { min-width:0; width:100%; padding:7px 8px; border:2px solid #cbd7e4; border-radius:8px; font-size:11px; outline:none; }.next-sign-manual input:focus { border-color:#087ce6; }.next-sign-manual button { flex:0 0 auto; border:0; border-radius:8px; padding:6px 8px; color:#fff; background:#17233a; font-size:10px; font-weight:800; cursor:pointer; }
.racer-card { display:flex; gap:14px; align-items:center; padding:12px; border:2px solid #f0ede5; border-radius:16px; background:#fcfbf7; }.racer-card img { width:84px; height:84px; object-fit:contain; border-radius:12px; background:linear-gradient(#c8f1fa,#79c9dd); }.racer-fields { min-width:0; flex:1; display:grid; grid-template-columns:1fr 1fr; gap:9px; }.racer-meta { grid-column:1/-1; display:flex; align-items:center; gap:12px; font-size:12px; }.text-button { border:0; padding:0; color:#2681a3; background:none; font-weight:800; cursor:pointer; }.text-button.remove { margin-left:auto; color:#df5768; }.file-label input { display:none; }
.signature-summary { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 12px; border-radius:12px; background:#eaf8f5; color:#168468; font-size:13px; }.assigned-signs { grid-column:1/-1; max-height:190px; overflow:auto; padding:10px; border-radius:12px; background:#f2f0e9; }.sign-chip { display:block; padding:5px 8px; margin:3px 0; border-radius:7px; background:#fff; color:#555; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.sign-chip.eaten { color:#999; background:#dfe8e3; text-decoration:line-through; }
.button-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.status-line { padding:11px; border-radius:10px; background:#f4f1e9; font-size:13px; }.dot { width:13px; height:13px; border-radius:50%; background:#aaa; }.dot.on { background:#23bc7e; box-shadow:0 0 0 6px rgba(35,188,126,.15); }.dot.error { background:#e25767; box-shadow:0 0 0 6px rgba(226,87,103,.15); }.test-row input { flex:1; }.panel hr { margin:22px 0; border:0; border-top:1px solid #eee9df; }
.sound-check-panel .status-line { margin:0; }.sound-actions { display:flex; align-items:center; gap:14px; margin-top:12px; }.sound-actions .hint { margin:0; }
.test-fields { display:grid; grid-template-columns:1fr 1fr auto; gap:8px; }.test-fields input { min-width:0; padding:11px 13px; border:2px solid #e3dfd5; border-radius:12px; outline:none; }.test-fields input:focus { border-color:var(--pink); }
.donation-log { display:grid; gap:7px; }.log-row { display:grid; grid-template-columns:100px 1fr 100px 130px; gap:8px; padding:10px 12px; border-radius:10px; background:#f6f4ef; font-size:13px; }.log-row.matched { background:#e9faf3; }.log-row em { color:#888; text-align:right; }.log-row.matched em { color:#159164; font-weight:800; }.empty { color:#999; text-align:center; }.live-text { color:#e85276; }.global-status { position:fixed; z-index:30; right:24px; bottom:18px; padding:10px 16px; color:#fff; background:var(--navy); border-radius:999px; box-shadow:0 5px 18px #0003; }.global-status.error { background:#d64659; }
@keyframes water { to { transform:translateX(180px); } } @keyframes pulse { 50% { transform:scale(1.04); } }
@keyframes racer-dash { 0% { transform:rotate(-5deg) translateY(3px) scale(.96); } 38% { transform:rotate(7deg) translateY(-13px) scale(1.08); } 70% { transform:rotate(-3deg) translateY(2px); } 100% { transform:none; } }
@keyframes kart-engine-idle { from { transform:translateY(1.5px) rotate(-.45deg) scaleY(.992); } to { transform:translateY(-2.5px) rotate(.55deg) scaleY(1.008); } }
@keyframes gpt-boost-vfx { 0% { opacity:0; transform:translate(28px,-50%) scale(.25) scaleX(-1); } 18% { opacity:1; } 72% { opacity:.82; } 100% { opacity:0; transform:translate(-34px,-50%) scale(1.18) scaleX(-1); } }
@keyframes wake-burst { 0% { opacity:0; transform:translateX(30px) scale(.3) skewX(-18deg); } 25% { opacity:1; } 100% { opacity:0; transform:translateX(-55px) scale(1.4) skewX(-18deg); } }
@keyframes winner-pop { to { transform:translate(-50%,-53%) scale(1.04) rotate(1deg); filter:brightness(1.08); } }
@keyframes card-float { from { transform:translateY(-3px) rotate(-.35deg); } to { transform:translateY(4px) rotate(.35deg); } }
@keyframes card-hit { 0% { transform:scale(1); } 35% { transform:scale(1.12) rotate(-3deg); filter:brightness(1.7); } 100% { transform:scale(1.04) rotate(1deg); } }
@keyframes stamp-in { to { opacity:1; transform:scale(1) rotate(-4deg); } }
@keyframes splash-ring { to { width:150px; height:60px; opacity:0; transform:translate(-50%,-50%); } }
@keyframes splash-drop { to { opacity:0; transform:translate(var(--x),var(--y)) rotate(140deg) scale(.3); } }
@media(max-width:800px) { .control-grid { grid-template-columns:1fr; }.hero-panel { align-items:stretch; }.control-header { align-items:flex-start; flex-direction:column; }.control-header h1 { font-size:30px; }.obs-links,.character-add-controls { flex-wrap:wrap; }.section-title,.next-round-preview header { align-items:flex-start; flex-direction:column; }.next-sign-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.racer-fields { grid-template-columns:1fr; }.racer-meta { grid-column:auto; flex-wrap:wrap; }.log-row { grid-template-columns:75px 1fr 70px; }.log-row em { grid-column:1/-1; text-align:left; } }