/* Music Vibe 첫 화면(MV 형제 앱 소개 카드). 편집기 위를 덮는 화면, 닫으면 편집기. */
html.mvh-open,html.mvh-open body{overflow:hidden}
#mvHome{--bg:#0b0b0d;--panel:#131417;--line:#25272c;--fg:#eceef0;--mut:#8f939a;
--c-mv:#c5ef86;--c-atom:#ff7a2a;--c-sf:#5ee6ff;--c-ki:#d8ff3c;--c-ar:#ffd23f;
--f-d:"Archivo","Noto Sans KR",system-ui,sans-serif;--f-b:"Noto Sans KR",system-ui,sans-serif;
position:fixed;inset:0;z-index:2147483000;overflow-y:auto;background:var(--bg);color:var(--fg);font-family:var(--f-b);font-size:15px;line-height:1.6;color-scheme:dark;
padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
#mvHome[hidden]{display:none}
#mvHome .mvh-main{max-width:1180px;margin:0 auto;box-sizing:border-box;padding:44px clamp(8px,3vw,40px) 56px;display:flex;flex-direction:column;gap:30px}
#mvHome h1{font:500 clamp(22px,3vw,32px)/1.25 var(--f-d);letter-spacing:-.02em;margin:0;text-wrap:balance;word-break:keep-all;color:var(--fg)}
#mvHome .lead{color:var(--mut);margin:10px 0 0;word-break:keep-all}
#mvHome .grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;width:100%}
#mvHome .card{box-sizing:border-box;flex:0 0 calc((100% - 32px)/3);display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 10px 16px;transition:border-color .2s}
#mvHome .card:hover{border-color:var(--c)}
#mvHome .card:focus-visible{outline:2px solid #5aa0ff;outline-offset:-2px}
#mvHome .stage{position:relative;border-radius:8px;overflow:hidden;background:#000;aspect-ratio:16/10}
#mvHome canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;object-fit:fill}
#mvHome .ctl{z-index:1;position:absolute;left:0;right:0;bottom:0;height:34px;display:flex;align-items:center;gap:10px;padding:0 12px;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0));color:var(--c)}
#mvHome .pp{width:18px;height:18px;display:grid;place-items:center;cursor:pointer;flex:none}
#mvHome .pp svg,#mvHome .vol svg{width:14px;height:14px;fill:currentColor;stroke:none}
#mvHome .vol{width:16px;height:16px;flex:none;opacity:.7}
#mvHome .vol svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#mvHome .bar{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.16);position:relative}
#mvHome .bar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:var(--c)}
#mvHome .bar i::after{content:"";position:absolute;right:-4px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--c)}
#mvHome .meta{padding:0 6px;display:flex;flex-direction:column;gap:3px}
#mvHome .meta h2{font:500 18px/1.2 var(--f-d);letter-spacing:.04em;text-transform:uppercase;margin:0;display:flex;align-items:center;gap:9px;color:var(--fg)}
#mvHome .fav{width:22px;height:22px;border-radius:5px;flex:none;display:block}
#mvHome .meta p{margin:0 0 0 31px;color:var(--mut);font-size:13.5px;word-break:keep-all}
#mvHome .go{margin:6px 0 0 31px;font:500 12px var(--f-d);letter-spacing:.08em;color:var(--c);opacity:0;transition:opacity .2s}
#mvHome .card:hover .go,#mvHome .card:focus-visible .go{opacity:1}
@media (max-width:860px){#mvHome .card{flex-basis:calc((100% - 16px)/2)}}
@media (max-width:560px){#mvHome .card{flex-basis:100%}}
@media (min-width:561px){html.mvnav #mvHome{left:48px}}