:root{color-scheme:dark;--bg:#111;--panel:#1d1d1d;--panel-hover:#2b2b2b;--text:#fff;--border:#5a5a5a;--focus:#ffe266}
*{box-sizing:border-box}
html,body{width:100%;min-height:100%;margin:0;background:var(--bg);color:var(--text);font-family:Pretendard,"Noto Sans KR","Apple SD Gothic Neo",Arial,sans-serif}
button,input{font:inherit} button,a{-webkit-tap-highlight-color:transparent}.app-shell{min-height:100dvh}.screen{min-height:100dvh;padding:clamp(24px,4vw,64px)}
.menu-screen{display:flex;flex-direction:column;justify-content:center;max-width:1400px;margin:0 auto}.menu-screen h1{margin:0 0 clamp(28px,5vw,64px);text-align:center;font-size:clamp(34px,5vw,72px);line-height:1.2}
.video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,40px)}
.video-select,.control-button{min-height:76px;border:3px solid var(--border);border-radius:18px;background:var(--panel);color:var(--text);cursor:pointer;touch-action:manipulation}
.video-select{display:flex;align-items:center;justify-content:center;min-height:min(30vw,320px);font-size:clamp(60px,12vw,180px);font-weight:800;text-decoration:none}
.video-select:hover,.control-button:hover{background:var(--panel-hover)}
.video-select:focus-visible,.control-button:focus-visible,input[type="range"]:focus-visible{outline:4px solid var(--focus);outline-offset:4px}
.player-screen{display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,3vw,36px);max-width:1700px;margin:0 auto}
.video-frame{position:relative;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:18px;background:#000}
video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.video-message{position:absolute;left:50%;top:50%;width:min(90%,780px);margin:0;transform:translate(-50%,-50%);padding:22px 24px;border-radius:14px;background:rgba(20,20,20,.92);color:#fff;font-size:clamp(18px,2.3vw,34px);line-height:1.5;text-align:center}.is-hidden{display:none!important}
.controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);align-items:stretch}.control-button{padding:18px 16px;font-size:clamp(22px,2.6vw,38px);font-weight:700}
.volume-control{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(12px,2vw,24px);min-height:84px;padding:14px clamp(16px,2vw,28px);border:3px solid var(--border);border-radius:18px;background:var(--panel);font-size:clamp(20px,2.4vw,32px);font-weight:700}
input[type="range"]{width:100%;min-width:80px;accent-color:#fff;cursor:pointer}output{min-width:64px;text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:700px){.screen{padding:20px}.video-grid{gap:16px}.video-select{min-height:36vw;border-radius:14px}.controls{grid-template-columns:1fr}.control-button{min-height:68px}.volume-control{grid-template-columns:1fr;gap:8px}output{text-align:left}}