:root{--navy:#07111f;--blue:#1687ff;--orange:#ff5a2a;--lime:#c9ff34}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#eef2f5;color:#0d1b2d;font-family:Pretendard,"Noto Sans KR",Arial,sans-serif}button,input{font:inherit}.app-shell{width:min(1480px,100%);margin:auto;padding:clamp(22px,4vw,58px)}.app-header{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:28px}.eyebrow{margin:0 0 8px;color:var(--orange);font-size:11px;letter-spacing:.19em;font-weight:900}.app-header h1{margin:0;font-size:clamp(28px,4vw,48px);letter-spacing:-.04em}.app-header h1 span{color:#31506f;font-weight:500}.progress-wrap{width:230px}.progress-wrap>span{display:block;text-align:right;color:#5b6978;font-size:12px;font-weight:800;margin-bottom:8px}.progress{height:6px;border-radius:6px;background:#d7dee5;overflow:hidden}.progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--blue),#66b5ff);transition:.35s}.player-card{background:#fff;box-shadow:0 25px 70px rgba(12,30,50,.14);border:1px solid #dce3e9}.player-meta,.controls{height:58px;padding:0 20px;display:flex;align-items:center;gap:13px}.player-meta{justify-content:space-between;color:#738090;font-size:12px}.player-meta span:first-child{color:#17283c;font-weight:900}.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ff4e35;box-shadow:0 0 0 4px #ffe0da;margin-right:8px}.video-stage{position:relative;width:100%;aspect-ratio:16/9;background:#02070d;overflow:hidden;user-select:none;touch-action:none}.video-stage video,.interaction-layer,.start-overlay{position:absolute;inset:0;width:100%;height:100%}.video-stage video{object-fit:contain}.interaction-layer{z-index:5;pointer-events:none}.is-interacting .interaction-layer{pointer-events:auto;background:rgba(2,8,15,.06)}.start-overlay{z-index:8;display:grid;place-items:center;background:rgba(2,8,15,.34);backdrop-filter:blur(2px)}.start-overlay[hidden]{display:none}.start-overlay button{border:0;background:var(--orange);color:#fff;font-weight:900;padding:17px 26px;box-shadow:0 12px 34px rgba(255,90,42,.42);cursor:pointer}.fullscreen-button{position:absolute;right:14px;bottom:14px;z-index:10;width:42px;height:38px;border:1px solid #ffffff4d;border-radius:5px;background:#07111fbd;color:#fff;font-size:22px;cursor:pointer}.controls{color:#697786;font-size:12px}.controls button{border:0;background:none;color:#24364a;font-weight:800;cursor:pointer}.controls input{flex:1;accent-color:var(--orange)}#restart{margin-left:8px}.privacy-note{text-align:center;color:#85919d;font-size:11px;margin:16px 0 0}.instruction{position:absolute;left:50%;top:3.3%;transform:translateX(-50%);min-width:330px;text-align:center;color:#111;background:#fff;border-top:3px solid var(--blue);padding:10px 22px;z-index:9}.instruction strong,.instruction small{display:block}.instruction strong{font-size:15px}.instruction small{font-size:9px;color:#596675;margin-top:3px}.guide-icon{position:absolute;width:20%;height:34%;object-fit:contain;transform:translate(-50%,-50%);pointer-events:none;z-index:7}.drag-guide{width:34%;height:44%}.move-guide,.ripple-guide{width:22%;height:36%}.hit-zone,.drag-source{position:absolute;border:2px dashed #ffffff85;background:#1687ff0f;border-radius:50%;cursor:pointer;z-index:8}.hit-zone:hover{border-color:#fff;background:#1687ff29}.gesture-zone{position:absolute;border:2px dashed #ffffff66;background:linear-gradient(90deg,#1687ff14,#1687ff2e);z-index:6;cursor:ew-resize}.gesture-zone.invisible-zone{border:0;background:transparent}.gesture-zone.invisible-zone span{display:none}.gesture-zone span{position:absolute;left:12px;bottom:10px;color:#fff;font-size:10px;font-weight:800;text-shadow:0 1px 4px #000}.drag-source{border-radius:8px;cursor:grab}.drag-source.dragging{cursor:grabbing;border-color:var(--lime);background:#c9ff3429}.drop-target{position:absolute;border:2px dashed var(--lime);background:#c9ff341a;z-index:6}.drop-target span{position:absolute;left:50%;bottom:5px;transform:translateX(-50%);white-space:nowrap;color:var(--lime);font-size:9px;font-weight:900;text-shadow:0 1px 4px #000}.interaction-layer.success:after{content:"✓ 완료";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:18px 28px;border-radius:50px;background:var(--lime);color:#10200b;font-size:22px;font-weight:900;z-index:20}.video-stage:fullscreen{width:100vw;height:100vh;aspect-ratio:auto}@media(max-width:700px){.app-shell{padding:14px}.app-header{display:block}.progress-wrap{width:100%;margin-top:18px}.progress-wrap>span{text-align:left}.instruction{top:2%;min-width:0;width:84%;padding:7px 10px}.instruction strong{font-size:12px}.controls{padding:0 10px;gap:7px}.controls span{font-size:10px}#restart{font-size:11px}.guide-icon{min-width:48px;min-height:48px}}


.instruction.instruction-bottom{top:auto;bottom:3.3%}@media(max-width:700px){.instruction.instruction-bottom{top:auto;bottom:2%}}