:root{--pad:16px;--gap:16px;--info-h:76px}html,body{height:100%;margin:0;overflow:hidden}body{color:#f2f2f2;background:#0b0b0f;font-family:system-ui,-apple-system,Segoe UI,Noto Sans KR,sans-serif}.playlist{box-sizing:border-box;height:100dvh;padding:var(--pad);overflow:hidden}.playlist .layout{grid-template-columns:minmax(0, calc((100dvh - 2 * var(--pad) - var(--info-h)) * 16 / 9)) minmax(260px, 340px);justify-content:center;gap:var(--gap);grid-template-rows:minmax(0,1fr);align-items:start;height:100%;display:grid}.playlist .stage{aspect-ratio:16/9;background:#000;border-radius:12px;width:100%;position:relative;overflow:hidden;box-shadow:0 20px 60px #0009}.playlist .stage:fullscreen{aspect-ratio:auto;border-radius:0}.playlist .host,.playlist .stage iframe{border:0;width:100%;height:100%;position:absolute;inset:0}.playlist .fs{z-index:2;color:#fff;cursor:pointer;opacity:0;background:0 0;border:0;place-items:center;width:40px;height:40px;transition:opacity .2s;display:grid;position:absolute;bottom:4px;right:8px}.playlist .stage:hover .fs,.playlist .fs:focus-visible{opacity:1}.playlist .info{box-sizing:border-box;height:var(--info-h);padding:12px 4px 0;overflow:hidden}.playlist .ep{color:#8b8b99;margin:0 0 6px;font-size:14px;line-height:1.5}.playlist h1{white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:26px;line-height:1.35;overflow:hidden}.playlist .list{box-sizing:border-box;background:#15151c;border-radius:12px;flex-direction:column;align-self:stretch;min-height:0;padding:16px 8px 8px;display:flex}.playlist .list h2{color:#b8b8c6;margin:0 12px 12px;font-size:16px}.playlist ol{flex:1;min-height:0;margin:0;padding:0;list-style:none;overflow-y:auto}.playlist li button{color:#d4d4de;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:8px;align-items:center;gap:12px;width:100%;padding:12px;font-size:15px;display:flex}.playlist li button:hover{background:#20202a}.playlist li button.active{color:#fff;background:#2a2a38;font-weight:600}.playlist .title{-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}@media (width<=960px){:root{--pad:12px;--info-h:auto}.playlist .layout{grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr);justify-content:stretch}.playlist .info{height:auto;padding-bottom:8px}.playlist h1{font-size:18px}}
