:root {
  --ink:#14314b;
  --blue:#1674c4;
  --teal:#18a9ad;
  --aqua:#4adfd7;
  --coral:#ff6e5f;
  --yellow:#ffd45c;
  --green:#78c84c;
  --panel:#ffffff;
  --line:#bddce6;
}

* { box-sizing:border-box; }
html,body { min-width:100%; min-height:100%; margin:0; }
body { color:var(--ink); background:#f4f8fa; font-family:Pretendard,"Noto Sans KR","Apple SD Gothic Neo",Arial,sans-serif; }
button { border:0; font:inherit; cursor:pointer; }
[hidden] { display:none!important; }

.jegi-app { width:min(1360px,100%); margin:auto; padding:8px; }
.jegi-header { height:57px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; }
.jegi-brand { display:flex; align-items:center; gap:10px; }
.brand-jegi { position:relative; width:37px; height:37px; border-radius:50%; background:radial-gradient(circle at 40% 32%,#fff 0 11%,#ffcf54 12% 31%,#f77b4c 32% 46%,#1aa4ae 47% 100%); box-shadow:0 4px 0 #0d6688,0 8px 16px rgba(13,89,117,.2); }
.brand-jegi::after { position:absolute; right:-5px; bottom:-4px; width:21px; height:25px; content:""; background:linear-gradient(90deg,#e95244 0 25%,#ffd34e 25% 50%,#1e9fce 50% 75%,#55bd62 75%); clip-path:polygon(0 0,100% 0,78% 100%,53% 55%,32% 100%); }
.jegi-brand small { display:block; color:#67899a; font-size:8px; font-weight:950; letter-spacing:.16em; }
.jegi-brand h1 { margin:0; color:#123c61; font-size:25px; font-style:italic; font-weight:1000; line-height:1; }
.jegi-brand h1 b { color:var(--teal); }
.jegi-header nav a { display:block; padding:9px 14px; border:1px solid #9cc8d5; border-radius:999px; color:#31677f; text-decoration:none; font-size:9px; font-weight:950; letter-spacing:.08em; }

.jegi-machine { overflow:hidden; border:1px solid #9fcbd8; border-radius:28px; background:#fff; box-shadow:0 18px 50px rgba(22,67,92,.14); }
.machine-top { min-height:72px; display:grid; grid-template-columns:150px 1fr 150px; align-items:center; gap:15px; padding:9px 26px; color:#fff; background:linear-gradient(120deg,#075992,#0d9ea8 56%,#08729c); border-bottom:4px solid var(--aqua); }
.led-panel { min-height:51px; display:grid; align-content:center; padding:7px 13px; border:1px solid rgba(129,255,245,.85); border-radius:14px; background:rgba(2,48,79,.78); }
.led-panel:last-child { text-align:right; }
.led-panel span { color:#bafff7; font-size:8px; font-weight:950; letter-spacing:.12em; }
.led-panel strong { display:flex; align-items:flex-end; gap:5px; color:#fff; font:1000 25px/1 "Roboto Mono",Consolas,monospace; }
.led-panel strong i { font-style:normal; }
.led-panel strong small { padding-bottom:2px; color:#bafff7; font-size:10px; }
.machine-title { text-align:center; }
.machine-title small,.machine-title b { display:block; color:#c8fffa; font-size:7px; font-weight:950; letter-spacing:.13em; }
.machine-title strong { display:block; margin:2px 0; font-size:27px; font-style:italic; font-weight:1000; line-height:1; }
.machine-title strong b { color:var(--yellow); }

.jegi-hud { min-height:59px; display:grid; grid-template-columns:160px 1fr 160px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.98); }
.jegi-hud>div { display:grid; place-content:center; padding:7px 14px; text-align:center; border-right:1px solid var(--line); }
.jegi-hud>div:last-child { border:0; }
.jegi-hud span,.target-monitor small { color:#6f8c9b; font-size:7px; font-weight:950; letter-spacing:.14em; }
.jegi-hud strong { color:#6d48d4; font-size:21px; line-height:1; }
.target-monitor strong { display:flex; align-items:center; justify-content:center; gap:13px; margin-top:3px; color:#163c60; font-size:25px; }
.target-monitor i { min-width:105px; color:#075da8; font-style:normal; }
.target-monitor i:last-child { color:var(--coral); }
.target-monitor b { color:#89a5b0; }

.jegi-stage { position:relative; height:650px; overflow:hidden; isolation:isolate; background:#dff8ff url("./assets/word-jegi-commercial-v1/runtime/school-playground.webp") center/cover no-repeat; }
.jegi-stage::before { position:absolute; z-index:0; inset:0; content:""; background:linear-gradient(180deg,rgba(11,112,157,.06),transparent 35%,rgba(2,93,108,.12)); pointer-events:none; }
.jegi-stage::after { position:absolute; z-index:40; inset:0; display:none; place-content:center; content:"PAUSED"; color:#fff; background:rgba(8,50,69,.68); font-size:48px; font-weight:1000; letter-spacing:.12em; }
.jegi-app.paused .jegi-stage::after { display:grid; }

.game-sign { position:absolute; z-index:20; top:16px; left:50%; width:min(480px,68%); min-height:94px; display:grid; place-content:center; padding:10px 18px 12px; transform:translateX(-50%); border:2px solid rgba(255,255,255,.9); border-radius:19px; color:#fff; background:linear-gradient(135deg,rgba(5,80,137,.95),rgba(20,153,164,.94)); box-shadow:0 8px 22px rgba(5,75,111,.25); text-align:center; }
.game-sign strong { display:block; margin:0; font-size:28px; font-style:italic; font-weight:1000; line-height:1; }
.fall-meter { position:absolute; z-index:21; top:124px; left:25%; width:50%; height:6px; overflow:hidden; border-radius:99px; background:rgba(16,70,95,.25); }
.fall-meter i { display:block; width:100%; height:100%; transform-origin:left; background:linear-gradient(90deg,var(--green),var(--yellow),var(--coral)); }

.answer-lanes { display:none; }
.jegi-answer { position:relative; min-height:90px; padding:14px 12px; border:3px solid rgba(255,255,255,.92); border-radius:21px; color:#123b5c; background:rgba(255,255,255,.9); box-shadow:0 9px 20px rgba(18,73,92,.15); transition:transform .16s,border-color .16s,box-shadow .16s; backdrop-filter:blur(6px); }
.jegi-answer::after { position:absolute; right:10px; bottom:8px; width:23px; height:23px; display:grid; place-items:center; content:attr(data-lane); border-radius:50%; color:#fff; background:#214a68; font-size:10px; font-weight:1000; }
.jegi-answer small { display:block; color:#7c99a6; font-size:7px; font-weight:900; letter-spacing:.13em; }
.jegi-answer b { display:block; margin-top:5px; font-size:22px; font-weight:1000; }
.jegi-answer.selected { transform:translateY(-5px); border-color:var(--yellow); box-shadow:0 0 0 5px rgba(255,212,92,.35),0 13px 24px rgba(17,84,105,.2); }
.jegi-answer.correct { border-color:#4dcc7b; background:#eaffee; }
.jegi-answer.wrong { border-color:var(--coral); background:#fff0ed; animation:wrong-shake .35s ease; }

.player { position:absolute; z-index:8; bottom:-44px; left:44%; width:330px; height:430px; transform:translateX(-50%); transition:left .08s linear; pointer-events:none; transform-origin:50% 88%; }
.player img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 13px 9px rgba(20,65,58,.24)); }
.player[data-pose="ready"] img { animation:ready-balance .72s ease-in-out infinite alternate; transform-origin:44% 90%; }
.player[data-pose="kick"] img { animation:precise-kick .29s cubic-bezier(.2,.75,.2,1); transform-origin:44% 90%; }
.player[data-pose="miss"] img { animation:kick-miss .24s ease; transform-origin:44% 90%; }
.jegi-object { position:absolute; z-index:15; left:50%; top:35%; width:58px; height:76px; background:url("./assets/word-jegi-commercial-v1/runtime/jegi.png") top center/100% 200% no-repeat; filter:drop-shadow(0 6px 4px rgba(25,52,44,.32)); pointer-events:none; }
.jegi-shadow { position:absolute; z-index:4; bottom:63px; left:50%; width:68px; height:18px; border-radius:50%; background:rgba(32,58,57,.4); filter:blur(5px); pointer-events:none; }
.kick-zone { position:absolute; z-index:5; bottom:72px; left:var(--foot-x,50%); width:138px; height:34px; transform:translateX(-50%); border:3px dashed rgba(255,255,255,.7); border-radius:50%; opacity:.34; transition:left .08s linear,opacity .15s,box-shadow .15s; pointer-events:none; }
.jegi-stage.kick-ready .kick-zone { opacity:1; border-color:var(--yellow); box-shadow:0 0 0 9px rgba(255,212,92,.24),0 0 30px rgba(255,167,45,.65); animation:kick-pulse .5s infinite alternate; }
.jegi-stage.kick-ready~.control-deck .kick-button { filter:brightness(1.16); box-shadow:inset 0 -6px 0 #b44a2d,0 0 0 6px rgba(255,212,92,.32),0 9px 22px rgba(164,68,35,.3); }
.jegi-stage.kicking .player { animation:player-pop .3s ease; }
.jegi-stage.missed .jegi-object { opacity:.45; }
.jegi-stage.too-early .kick-zone { animation:wrong-shake .32s ease; }

.distance-badge { position:absolute; z-index:22; top:107px; left:18px; min-width:112px; padding:7px 11px; border:1px solid rgba(255,255,255,.85); border-radius:999px; color:#fff; background:rgba(8,94,119,.82); box-shadow:0 5px 14px rgba(9,70,91,.18); font:900 8px/1 "Roboto Mono",monospace; letter-spacing:.1em; text-align:center; pointer-events:none; }
.kick-spark { position:absolute; z-index:31; opacity:0; transform:translate(-50%,-50%); color:#fff; font:1000 15px/1 "Roboto Mono",monospace; text-shadow:0 2px #f56a42,0 0 12px #ffd45c; pointer-events:none; }
.kick-spark::before { position:absolute; inset:50% auto auto 50%; width:58px; height:58px; content:""; transform:translate(-50%,-50%); border:5px solid var(--yellow); border-radius:50%; }
.kick-spark.show { animation:kick-contact .45s ease-out; }
.jegi-progress { position:absolute; z-index:23; top:108px; right:18px; display:grid; grid-template-columns:repeat(5,18px); gap:6px; padding:7px 10px; border:1px solid rgba(255,255,255,.82); border-radius:13px; background:rgba(8,94,119,.82); box-shadow:0 5px 14px rgba(9,70,91,.18); }
.jegi-progress i { width:18px; height:8px; border-radius:99px; background:rgba(255,255,255,.32); box-shadow:inset 0 1px rgba(255,255,255,.28); }
.jegi-progress i.complete { background:var(--yellow); box-shadow:0 0 8px rgba(255,212,92,.8); }

.jegi-callout { position:absolute; z-index:24; left:18px; bottom:18px; max-width:360px; padding:9px 15px; border:1px solid rgba(255,255,255,.82); border-radius:14px; color:#fff; background:rgba(10,68,89,.9); box-shadow:0 7px 18px rgba(7,54,74,.2); }
.jegi-callout small { display:block; color:#86fff0; font-size:7px; font-weight:950; letter-spacing:.13em; }
.jegi-callout strong { display:block; margin-top:3px; font-size:13px; }
.jegi-callout.pop { animation:callout-pop .35s ease; }
.jegi-burst { position:absolute; z-index:29; top:40%; left:50%; opacity:0; transform:translate(-50%,-50%); color:#ff6b3f; font-size:38px; font-weight:1000; text-shadow:0 3px #fff,0 0 18px rgba(255,211,64,.8); pointer-events:none; }
.jegi-burst.wrong { color:#c5424f; font-size:24px; }
.jegi-burst.show { animation:score-rise .75s ease; }
.jegi-last-ten { position:absolute; z-index:35; inset:0; display:grid; place-content:center; color:#ff543f; background:rgba(255,255,255,.12); font-size:120px; font-weight:1000; text-shadow:0 5px #fff; pointer-events:none; animation:last-ten .6s infinite alternate; }

.jegi-start,.jegi-result { position:absolute; z-index:45; inset:0; display:grid; place-items:center; padding:20px; background:rgba(11,60,76,.69); backdrop-filter:blur(7px); }
.start-panel,.jegi-result>div { width:min(680px,94%); padding:31px; border:2px solid rgba(255,255,255,.84); border-radius:25px; color:#173a55; background:rgba(255,255,255,.96); box-shadow:0 22px 55px rgba(10,51,71,.28); text-align:center; }
.start-panel>p:first-child,.jegi-result p { margin:0; color:var(--teal); font-size:9px; font-weight:1000; letter-spacing:.17em; }
.start-panel h2,.jegi-result h2 { margin:11px 0 18px; color:#0a4b76; font-size:31px; }
.start-panel h2 b { color:var(--coral); }
.start-guide { color:#607d8d; font-size:13px; font-weight:750; line-height:1.8; }
.start-guide b { color:#0c7991; }
.start-guide kbd { padding:2px 6px; border:1px solid #8db2bf; border-radius:5px; color:#fff; background:#174c67; }
#jegiStart,#jegiRestart { min-width:230px; margin:7px 0 10px; padding:15px 24px; border-radius:15px; color:#fff; background:linear-gradient(135deg,#13a8aa,#097c9c); box-shadow:inset 0 -5px 0 rgba(5,75,94,.4),0 9px 22px rgba(11,119,139,.24); font-size:15px; font-weight:1000; }
#jegiStart:disabled { opacity:.6; cursor:wait; }
.start-panel>small { display:block; color:#7895a2; font-size:9px; }
.jegi-result>div>strong { display:block; margin:11px; color:var(--coral); font-size:49px; }
.jegi-result section { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:19px 0; }
.jegi-result section span { padding:11px 4px; border-radius:11px; color:#75909d; background:#edf6f7; font-size:8px; font-weight:900; }
.jegi-result section b { display:block; margin-top:5px; color:#164d66; font-size:18px; }

.control-deck { min-height:96px; display:grid; grid-template-columns:100px 165px 100px 1fr 105px 58px 58px; align-items:center; gap:9px; padding:12px 17px; color:#fff; background:linear-gradient(90deg,#073d61,#087c88); border-top:4px solid var(--aqua); }
.move-button,.hear-button,.arcade-button { min-height:60px; border-radius:13px; color:#123b57; background:#fff; box-shadow:inset 0 -5px 0 #cbdde0; }
.move-button span,.hear-button span { display:block; color:var(--teal); font-size:18px; }
.move-button b,.hear-button b { display:block; font-size:8px; }
.move-button kbd,.hear-button kbd { display:block; color:#708e9c; background:transparent; font-size:8px; }
.kick-button { min-height:67px; border-radius:15px; color:#fff; background:linear-gradient(135deg,#ff7b55,#ef5e43); box-shadow:inset 0 -6px 0 #b8442f,0 9px 18px rgba(163,63,37,.23); }
.kick-button small,.kick-button b,.kick-button kbd { display:block; }
.kick-button small { font-size:7px; }
.kick-button b { font-size:19px; }
.kick-button kbd { margin:2px 12px 0; color:#fff; background:#8c332b; font-size:8px; }
.tip { min-width:0; text-align:center; }
.tip small { color:#80d9d7; font-size:8px; font-weight:950; letter-spacing:.14em; }
.tip strong { display:block; overflow:hidden; margin-top:4px; color:#e3ffff; font-size:11px; white-space:nowrap; text-overflow:ellipsis; }
.arcade-button { font-size:18px; font-weight:1000; }
.jegi-footer { display:flex; justify-content:space-between; gap:16px; padding:13px 9px; color:#75909e; font-size:10px; }
.jegi-footer p { margin:0; }
.jegi-footer b { color:var(--teal); }
.jegi-app.danger .led-panel:first-child strong { color:#ffdf70; animation:last-ten .45s infinite alternate; }

@keyframes kick-pulse { to { transform:translateX(-50%) scale(1.08); } }
@keyframes player-pop { 50% { transform:translateX(-50%) scale(1.04); } }
@keyframes ready-balance { from{transform:rotate(-1.1deg) translateY(1px)} to{transform:rotate(1.1deg) translateY(-2px)} }
@keyframes precise-kick { 0%{transform:rotate(-5deg) scale(.98)} 48%{transform:rotate(1.5deg) scale(1.035)} 100%{transform:rotate(0) scale(1)} }
@keyframes kick-miss { 35%{transform:rotate(-4deg) translateX(-4px)} 70%{transform:rotate(3deg) translateX(3px)} }
@keyframes kick-contact { 0%{opacity:0;transform:translate(-50%,-50%) scale(.35)} 30%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.65)} }
@keyframes wrong-shake { 25%{transform:translateX(-7px)} 70%{transform:translateX(7px)} }
@keyframes callout-pop { 50%{transform:scale(1.04)} }
@keyframes score-rise { 0%{opacity:0;transform:translate(-50%,20px) scale(.65)} 30%{opacity:1} 100%{opacity:0;transform:translate(-50%,-70px) scale(1.12)} }
@keyframes last-ten { to { opacity:.45; } }

@media(max-width:900px) {
  .jegi-stage { height:590px; }
  .player { width:285px; height:385px; }
  .control-deck { grid-template-columns:82px 135px 82px 1fr 82px 51px 51px; gap:6px; padding-inline:9px; }
  .jegi-answer b { font-size:18px; }
}

@media(max-width:700px) {
  .jegi-app { padding:0; }
  .jegi-header { height:45px; }
  .jegi-brand h1 { font-size:19px; }
  .brand-jegi { width:29px; height:29px; }
  .jegi-machine { border-right:0; border-left:0; border-radius:0; }
  .machine-top { min-height:58px; grid-template-columns:78px 1fr 78px; gap:7px; padding:7px; }
  .led-panel { min-height:44px; padding:5px 7px; }
  .led-panel strong { font-size:18px; }
  .machine-title strong { font-size:20px; }
  .machine-title b { display:none; }
  .jegi-hud { min-height:49px; grid-template-columns:75px 1fr 75px; }
  .target-monitor strong { gap:5px; font-size:18px; }
  .target-monitor i { min-width:70px; }
  .jegi-stage { height:505px; }
  .game-sign { top:9px; width:74%; min-height:72px; padding:7px; }
  .game-sign strong { font-size:21px; }
  .fall-meter { top:94px; left:18%; width:64%; }
  .answer-lanes { top:95px; left:3%; width:94%; gap:2%; }
  .jegi-answer { min-height:75px; padding:9px 5px; border-radius:15px; }
  .jegi-answer b { font-size:15px; }
  .player { bottom:-35px; width:230px; height:325px; }
  .jegi-object { width:40px; height:59px; }
  .jegi-shadow { bottom:49px; }
  .kick-zone { bottom:55px; width:115px; }
  .distance-badge { top:85px; left:8px; min-width:92px; padding:6px 8px; font-size:6px; }
  .jegi-progress { top:84px; right:8px; grid-template-columns:repeat(5,13px); gap:4px; padding:6px 7px; }
  .jegi-progress i { width:13px; height:6px; }
  .jegi-callout { right:10px; bottom:10px; left:10px; max-width:none; padding:7px 10px; text-align:center; }
  .control-deck { min-height:79px; grid-template-columns:58px 105px 58px 1fr 54px 42px 42px; gap:4px; padding:7px 5px; }
  .move-button,.hear-button,.arcade-button { min-height:52px; }
  .move-button b,.hear-button b { font-size:6px; }
  .kick-button { min-height:58px; }
  .kick-button b { font-size:13px; }
  .tip strong { font-size:8px; }
  .jegi-footer { display:none; }
  .start-panel,.jegi-result>div { padding:22px 12px; }
  .start-panel h2,.jegi-result h2 { font-size:25px; }
}

@media(max-width:430px) {
  .jegi-header { display:none; }
  .machine-top { grid-template-columns:66px 1fr 66px; }
  .jegi-stage { height:470px; }
  .answer-lanes { gap:1%; }
  .jegi-answer b { font-size:13px; }
  .player { width:205px; height:295px; }
  .control-deck { grid-template-columns:47px 86px 47px 1fr 44px 37px 37px; gap:3px; padding-inline:3px; }
  .move-button span,.hear-button span { font-size:14px; }
  .kick-button small,.kick-button kbd,.hear-button b,.hear-button kbd { display:none; }
  .tip small { font-size:6px; }
  .jegi-result section { grid-template-columns:repeat(2,1fr); }
}

@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; } }