:root{color-scheme:dark;font-family:'Noto Sans KR',sans-serif;background:#080808;color:#eee;font-synthesis:none;font-size:16px;line-height:1.5;letter-spacing:-.02em}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;display:grid;place-items:center;padding:64px 28px}
main{width:min(680px,100%)}
button,input,select{font:inherit;font-size:16px;line-height:1.5;letter-spacing:-.02em}
button,input,select,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;border:1px solid #303030;border-radius:4px;background:#161616;color:#ddd;min-height:52px;padding:12px 24px;font-weight:500}
button:hover{background:#222;color:#fff}
button:disabled{opacity:.45;cursor:wait}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid #bdbdbd;outline-offset:4px}
.label{display:block;font-size:15px;line-height:22px;font-weight:500;color:#aaa;margin-bottom:12px}
.url-row{display:flex;gap:10px}
.url-row input{flex:1;min-width:0;width:100%;height:56px;border:1px solid #303030;border-radius:4px;background:#0d0d0d;padding:0 18px;color:#eee;outline-offset:2px}
.url-row input::placeholder{color:#666}
.url-row button{min-height:56px;min-width:112px;flex:none;padding:14px 20px}
.format-section{margin-top:32px}
.formats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}
.format{height:52px;padding:12px 8px;background:transparent;color:#a8a8a8;font-size:16px;letter-spacing:0;font-weight:500}
.format.selected{color:#111;background:#ededed;border-color:#ededed}
.format.selected:hover{background:#fff}
.actions{margin-top:32px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.quality .label{margin-bottom:10px}
.quality select{height:52px;width:172px;background:#0d0d0d;border:1px solid #303030;border-radius:4px;padding:0 15px;color:#ddd;font-size:16px;font-weight:400}
.primary{min-width:172px;height:52px;background:#ededed;color:#111;border-color:#ededed;font-size:16px;font-weight:600}
.primary:hover{background:#fff;color:#111}
.message{font-size:14px;line-height:1.7;margin:18px 0 0;color:#aaa}
.error{color:#d6aaaa}
.message:empty{display:none}
.message a{color:#ddd;text-underline-offset:4px;margin-left:8px}
.video{display:grid;grid-template-columns:216px minmax(0,1fr) 28px;gap:18px;align-items:center;margin-top:24px;padding:20px 0;border-top:1px solid #242424;border-bottom:1px solid #242424}
.video-media{aspect-ratio:16/9;position:relative;overflow:hidden;background:#111;border-radius:4px}
.video-poster{display:block;position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:0;background:#111;overflow:hidden}
.video-poster img{display:block;width:100%;height:100%;object-fit:cover}
.play-icon{position:absolute;inset:0;display:grid;place-items:center;background:#00000020}
.play-icon svg{width:46px;height:34px;padding:7px 12px;background:#101010cc;border-radius:6px;fill:#fff}
.video-poster:hover .play-icon svg{background:#181818}
.video-info{min-width:0}
#video-title{font-size:17px;line-height:1.65;font-weight:500;color:#e4e4e4;margin:0;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.video-meta{font-size:13px;line-height:1.6;color:#929292;margin:9px 0 0;overflow-wrap:anywhere}
.clear-video{align-self:start;min-height:28px;width:28px;height:28px;padding:0;border:0;border-radius:0;background:transparent;font-size:26px;line-height:1;font-weight:400;color:#999}
.video iframe{display:block;position:absolute;inset:0;width:100%;height:100%;border:0}
.video.playing{grid-template-columns:minmax(0,1fr) 28px;gap:14px}
.video.playing .video-media{grid-column:1/-1;min-height:200px}
.video.playing .clear-video{grid-column:2;grid-row:2}
.job{margin-top:26px}
.job-row{display:flex;align-items:center;gap:12px;color:#aaa;font-size:14px;min-height:24px}
#job-percent{margin-left:auto;font-size:13px;color:#ccc}
#cancel-job{border:0;background:transparent;min-height:0;padding:3px 0 3px 10px;font-size:14px;color:#bbb}
progress{display:block;appearance:none;border:0;border-radius:0;width:100%;height:3px;margin-top:12px;background:#292929;accent-color:#bbb}
progress::-webkit-progress-bar{background:#292929}
progress::-webkit-progress-value{background:#bbb}
progress:indeterminate{opacity:.45}
[hidden]{display:none!important}
@media(max-width:600px){body{padding:48px 22px}button,input,select{font-size:15px}.url-row{gap:8px}.url-row input{padding:0 13px}.url-row button{min-width:96px;padding:14px 16px}.formats{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.format{font-size:16px}.actions{gap:18px}.primary{min-width:144px}.quality select{width:144px}.video{grid-template-columns:140px minmax(0,1fr) 24px;gap:12px;padding:16px 0}.video-meta{font-size:12px}#video-title{font-size:15px}.clear-video{width:24px;height:24px;min-height:24px;font-size:24px}}
@media(max-width:380px){.url-row button{min-width:88px;padding:14px 12px}.video{grid-template-columns:minmax(0,1fr) 24px}.video-media{grid-column:1/-1}.video .clear-video{grid-column:2;grid-row:2}.video-info{grid-column:1}.quality select,.primary{min-width:0;width:132px}}

.back-link{display:inline-block;margin-bottom:30px;color:#999;text-decoration:none;font-size:14px;font-weight:400;line-height:1.5}
.back-link:hover{color:#eee}
#bridge-help{border-top:1px solid #333;margin-top:24px;padding-top:16px;font-size:16px;line-height:1.75}#bridge-help p{margin:8px 0;color:#ccc}#bridge-help>div{display:flex;gap:12px;align-items:center;margin:18px 0}#bridge-help a{background:#eee;color:#111;padding:10px 15px;border-radius:5px;text-decoration:none;font-weight:600}#bridge-help button{padding:10px 15px;min-height:46px}#bridge-help .bridge-note{font-size:14px;color:#aaa}