/* 음악 목록·상세·업로드 공용. 색·글꼴은 사이트 변수, 액션은 기존 새 글 버튼 기준. */
.music-browser,.music-detail,.music-upload{--music-line:rgba(120,180,220,.18);--music-muted:#8298a4;--music-radius:4px;font-family:var(--font-body);font-size:var(--fs-comment)}
.music-list.music-browser{display:flex;flex-direction:column;gap:8px;padding:0;color:var(--text,#e9edf0)}
.music-browser[hidden],.music-map[hidden]{display:none}
.mb-heading{display:flex;justify-content:space-between}.mb-heading p,.mb-count,.mb-status{margin:0;line-height:1.6}
.mb-tools{flex-wrap:wrap}.mb-tools input{box-sizing:border-box;font:inherit;color:inherit;padding:7px 10px;min-height:32px;border:1px solid var(--music-line);border-radius:var(--music-radius)}
.mb-filters{display:flex;justify-content:space-between;flex-wrap:wrap}
.music-browser .mb-track{display:block;position:relative;margin:0;padding:0;border:0;background:none;box-shadow:none}
.music-browser .mb-track .post-card{box-sizing:border-box}.music-browser .mb-track .pc-title{white-space:normal;min-width:0}
.music-browser .mb-track .mb-play{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;margin:0;padding:0;border:0;border-radius:5px;color:#fff;cursor:pointer}
.music-browser .mb-track .mb-play:active{transform:translateY(-50%)}
.music-browser .mb-track .mb-play:hover,.music-browser .mb-track.is-playing .mb-play{background:rgba(0,0,0,.7);color:var(--blue)}
.music-browser .mb-track .mb-play:disabled{display:none}
.music-browser>.mb-status{color:#c4a48b;font-size:12px}.mb-empty{color:var(--music-muted);line-height:1.7}
.mb-audio-host .ssemb-audio{max-width:none;margin:0;border-radius:4px;background:rgba(255,255,255,.025);padding:10px;gap:12px}
.mb-audio-host .ssaud-cover{width:40px;height:40px;border-radius:4px;background:rgba(var(--acc-rgb),.07)!important;border:1px solid rgba(var(--acc-rgb),.42)}
.mb-audio-host .ssaud-cover-ic{background:none;color:var(--blue);border-radius:0}
.mb-audio-host .ssemb-audio.playing .ssaud-cover{box-shadow:none}
.mb-audio-host .ssaud-title{font-family:"Galmuri9",var(--font-mono);font-size:12px;font-weight:400}
.mb-audio-host .ssaud-wave{height:22px}.mb-audio-host .ssaud-wave:focus-visible{outline:1px solid var(--blue);outline-offset:4px}
/* 높낮이 장식 대신 실제 재생 진행률. 조작 영역은 32px로 확보. */
.mb-audio-host .ssaud-seek{display:block;appearance:none;-webkit-appearance:none;width:100%;height:32px;margin:0;padding:0;border:0;border-radius:0;cursor:pointer;touch-action:pan-y;background:transparent;outline:none}
.ssaud-seek::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(to right,var(--blue) 0 var(--seek-progress,0%),#354047 var(--seek-progress,0%) 100%)}
.ssaud-seek::-moz-range-track{height:3px;border-radius:2px;background:#354047}
.ssaud-seek::-moz-range-progress{height:3px;background:var(--blue)}
.ssaud-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:11px;height:11px;margin-top:-4px;border:0;border-radius:50%;background:var(--blue)}
.ssaud-seek::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:var(--blue)}
.mb-audio-host .ssaud-seek:focus-visible{outline:1px solid var(--blue);outline-offset:2px}
.mb-audio-host .ssaud-seek:disabled{opacity:.35;cursor:default}
.mb-audio-host .ssaud-body{gap:0}.mb-audio-host .ssaud-time{font-variant-numeric:tabular-nums}

.np-seek{appearance:none;-webkit-appearance:none;display:block;width:100%;height:16px;margin:0;padding:0;border:0;background:transparent;touch-action:pan-y;cursor:pointer}
.np-seek[hidden]{display:none}.np-seek:focus-visible{outline:1px solid var(--blue)}
.np-seek::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--blue) 0 var(--seek-progress,0%),#354047 var(--seek-progress,0%) 100%)}
.np-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:8px;height:8px;margin-top:-3px;border:0;border-radius:50%;background:var(--blue)}
.np-seek::-moz-range-track{height:2px;background:#354047}.np-seek::-moz-range-progress{height:2px;background:var(--blue)}
.np-seek::-moz-range-thumb{width:8px;height:8px;border:0;border-radius:50%;background:var(--blue)}
.orb-emotes .np-ctrl button:disabled{opacity:.3;cursor:default}
.np-seek-wrap{display:flex;align-items:center;gap:5px;min-width:0}.np-seek-wrap[hidden]{display:none}
.np-seek-wrap .np-seek{min-width:0;flex:1;height:22px}.np-time{font-size:12px;font-variant-numeric:tabular-nums;color:#8aa;flex:none}
@media(pointer:coarse){.np-seek-wrap .np-seek{height:28px}.music-browser .mb-track .mb-play{width:44px;height:44px;left:3px;background:transparent}.music-browser .mb-track .mb-play svg{background:rgba(0,0,0,.65);border-radius:3px;padding:3px}.music-browser .mb-track .post-card{min-height:52px}}

/* 음악 정보 정렬: 공통 카드 안에서 제목과 작성자·역할을 묶음. */
.music-browser .mb-heading{align-items:center;border:0;padding:4px 7px 12px;gap:12px}
.music-browser .mb-heading>div{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.music-browser .mb-heading h3{font-family:inherit;font-size:12px;font-weight:400;margin:0;color:#dce8ee}
.music-browser .mb-heading p{font-size:12px;color:#71848e}
.music-browser .mb-heading .mb-count{padding:0;white-space:nowrap;font-size:12px;color:#71848e}
.music-browser .mb-tools{display:flex;align-items:center;gap:8px;padding:0 0 8px;border-bottom:1px solid rgba(120,180,220,.14)}
.music-browser .mb-search-row{display:flex;align-items:center;gap:8px;flex:1 1 260px;min-width:0;max-width:380px}
.music-browser .mb-search-row input{min-width:0;width:100%;flex:1;background:transparent;border-color:rgba(120,180,220,.24)}
.music-browser .mb-search-row button{flex:none;white-space:nowrap}
.music-browser .mb-filters{flex:1 1 300px;margin:0;align-items:center;gap:12px}.music-browser .mb-tracks{padding-top:0}
.music-browser .mb-track .post-card{padding:5px 7px;gap:7px;min-height:50px;border-radius:6px}
.music-browser .mb-track+.mb-track{border-top:1px solid rgba(120,180,220,.08)}
.music-browser .mb-track .pc-thumb{width:40px;height:40px;border-radius:5px}
.music-browser .mb-track .pc-title{font-size:var(--fs-comment);line-height:1.4;overflow:hidden}
.music-browser .mb-credit{display:flex;align-items:center;gap:8px;margin-top:4px;min-width:0;font-size:12px;line-height:1.4;font-weight:400}
.music-browser .mb-credit .pc-nick{display:block;max-width:14em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#7fbce0}
.music-browser .mb-credit .pc-nick:hover{text-decoration:underline}
.music-browser .mb-credit .mb-role{display:block;margin:0;padding-left:8px;border-left:1px solid rgba(120,180,220,.2);font-size:12px;color:#81939c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.music-browser .mb-track .mb-play{left:7px;width:40px;height:40px;background:rgba(0,0,0,.25);transition:background .15s,color .15s}
.music-browser .mb-track .mb-play svg{filter:drop-shadow(0 1px 2px #000)}
.music-browser .mb-track.is-current .pc-title{color:var(--blue)}
.music-browser .mb-track.is-playing .post-card{background:rgba(var(--acc-rgb),.035)}
.music-browser .mb-empty{box-sizing:border-box;width:100%;padding:28px 7px;margin:0;font-size:12px;text-align:center}
.mb-audio-host .ssaud-title{text-align:left}
@media(max-width:600px){
 .music-browser .mb-heading{flex-direction:row;align-items:baseline}.music-browser .mb-heading>div{gap:5px}.music-browser .mb-heading h3{display:none}
 .music-browser .mb-tools{gap:10px}.music-browser .mb-search-row{max-width:none;flex-basis:100%}.music-browser .mb-filters{flex-basis:100%}
 .music-browser .mb-track .post-card{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:7px;padding:5px 7px}
 .music-browser .mb-track .pc-thumb{position:static;transform:none}.music-browser .mb-track .pc-title{min-width:0}
 .music-browser .mb-track .pc-right{flex-direction:column;align-items:flex-end;gap:5px}
 .music-browser .mb-credit{gap:5px;flex-wrap:wrap}.music-browser .mb-credit .pc-nick{max-width:10em}.music-browser .mb-credit .mb-role{padding-left:5px}
}
@media(pointer:coarse){.music-browser .mb-track .mb-play{width:44px;height:44px;left:5px;background:transparent}}
    /* 음악 상세: 목록과 같은 검정 바탕, 얇은 경계선, 작은 사각 컨트롤. */
    body.music-detail { background:#000; }
    .music-detail .post-main { max-width:800px; }
    .music-detail .pv-wrap { padding:8px 16px; }
    .music-detail .set-topbar { background:#000; border-bottom:1px solid rgba(120,180,220,.18); }
    .music-detail .set-back { display:inline-flex; width:auto; align-items:center; gap:6px; font-size:12px; text-decoration:none; }
    .music-detail .set-back svg { width:14px; height:14px; }

    .music-detail .pv-body { min-height:0; margin:18px 0; font-size:13px; }
    .music-detail .pv-body .ss-embed { margin:0 0 16px; }
    .music-detail .pv-body .ssemb-audio { width:100%;box-sizing:border-box; }
    .music-detail .pv-section-title { font-size:14px; font-weight:400; margin:0; }
    @media(max-width:520px){.music-detail .pv-wrap{padding:8px 16px}}

/* 동일한 버튼은 동일한 모서리·높이·서체·상태 표시를 공유. */
.music-browser :focus-visible,.music-detail :is(a,button,input):focus-visible,.music-upload :is(a,button,input,textarea):focus-visible{outline:1px solid var(--blue);outline-offset:3px}
.music-browser .mb-track .pc-title{font-size:var(--fs-comment)}
.music-detail .pv-body{font-size:var(--fs-comment)}
.music-detail .pv-section-title,.music-upload .wr-boards-lab{font-size:12px;font-weight:400}.music-upload .mw-lead-s,.music-upload .mw-parent-sub,.music-upload .mw-by,.music-upload .mw-note{font-size:12px;line-height:1.6;color:var(--music-muted)}
body.music-upload{background:#000;color:#e6eef2}
.music-upload .mw-wrap{max-width:800px;padding:8px 16px;box-sizing:border-box}
.music-upload .wr-top{background:#000;border-bottom:1px solid var(--music-line)}
.music-upload :is(.wr-title,.mw-desc){background:transparent;border:1px solid var(--music-line);border-radius:4px;font-family:var(--font-body);font-size:var(--fs-comment)}
.music-upload .mw-cov{border-radius:5px;border-color:var(--music-line)}
.music-upload .mw-parent{border:1px solid var(--music-line);border-radius:4px;background:transparent;padding:12px}
.music-upload .mw-drop{border-radius:4px;background:transparent}


/* 긴 번역·사용자 제목은 숨겨 넘침을 가리지 않고 컨테이너 안에서 줄바꿈. */
.music-browser,.music-detail .pv-wrap,.music-upload .mw-wrap{min-width:0;overflow-wrap:anywhere}
.music-browser .mb-heading{flex-wrap:wrap}
.music-browser .mb-heading .mb-count{white-space:normal;min-width:0}.music-browser .mb-filters{min-width:0;max-width:100%}.music-upload .wr-board{max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.5}
.music-browser .mb-credit>*{min-width:0;max-width:100%}
.music-browser .mb-credit .mb-role{white-space:normal;overflow-wrap:anywhere}.music-upload .mw-by{flex-wrap:wrap;min-width:0}.music-upload .mw-parent-lab{overflow-wrap:anywhere;line-height:1.5}
.mb-audio-host .ssaud-body{min-width:0;flex:1}
.mb-audio-host .ssaud-title{font-family:var(--font-body);line-height:1.5}
.music-upload .mw-drop-t,.music-upload .mw-gate-t{font-family:var(--font-body);line-height:1.6}
.music-upload .mw-upline{min-width:0;flex-wrap:wrap}
.music-upload .mw-upline b{min-width:0;max-width:100%}
@media(max-width:380px){.music-browser .mb-search-row{flex-wrap:wrap}.music-browser .mb-search-row input{flex-basis:100%}.music-upload .mw-head{flex-wrap:wrap}.music-upload .mw-head-r{flex-basis:100%}}

/* 컴포넌트 display 규칙보다 hidden 상태가 우선해야 한다. */
.music-browser [hidden]{display:none!important}

/* 탐색 분류는 기존 wall-subtabs, 새로고침은 선택 상태 없는 작업 버튼. */
.music-views{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:0;margin:-2px 0 8px;border:0}
.music-views>.wall-subtabs{display:flex;flex-wrap:wrap;gap:6px 0;min-width:0;margin:0;padding:0;border:0;overflow:visible}
.music-views>.wall-subtabs button,.music-browser .mb-category{max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.5}
.music-views>.mus-view{font-family:var(--font-body);font-size:12px;border:0;background:none;padding:6px 8px;color:var(--music-muted);text-decoration:underline;text-underline-offset:3px}
.music-views>.mus-view:focus-visible{outline:1px solid var(--blue);outline-offset:2px}
@media(pointer:coarse){.music-views button,.music-browser .mb-category{min-height:36px}}

/* 글·릴리즈와 같은 섹션 끝 간격. 곡 수는 별도 제목 행 없이 도구줄 끝에. */
#music-section{padding:2px 0 4px}
.music-browser .mb-count{flex:0 0 100%;box-sizing:border-box;min-width:0;margin:0;text-align:center;font-size:12px;line-height:1.5;color:var(--music-muted)}
.music-browser .mb-tools{align-items:center}
.music-browser .mb-filters{gap:8px}
.music-browser .mb-search-row{max-width:380px}
@media(max-width:600px){.music-browser .mb-count{flex-basis:100%;text-align:center}.music-browser .mb-tools{gap:8px}}

/* 로그아웃 업로드 진입: 뒤로 갈 동선을 유지하고 작은 화면에서도 안쪽 여백 확보. */
.music-upload .wr-top{flex-wrap:wrap;gap:8px}
.music-upload .wr-top-actions{flex-wrap:wrap;min-width:0}
.music-upload .mw-gate{box-sizing:border-box;width:100%;max-width:420px;padding:0 16px;margin:40px auto;gap:16px}
.music-upload .mw-gate-t{overflow-wrap:anywhere;line-height:1.6}
.music-upload [hidden]{display:none!important}

/* 업로드 동작은 일반 글쓰기의 wr-save/wr-cancel을 그대로 사용한다. */
.music-upload .wr-top-actions > button{max-width:100%;height:auto;min-height:34px;white-space:normal;overflow-wrap:anywhere;padding-top:6px;padding-bottom:6px}

/* 현재 곡의 속성은 작성자 옆, 새 버전 동작은 본문 아래. */
.music-detail .pv-music-role{display:inline-flex;gap:4px;flex-wrap:wrap;margin-left:10px;color:var(--music-muted);font-size:12px;line-height:1.5}

/* 계보 선택도 음악 목록과 같은 카드. 지도에는 선택한 곡의 연결만 표시. */
.music-map-families{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:4px;margin-bottom:12px;max-height:220px;overflow:auto}
.music-map-families[hidden]{display:none}
.music-map-families .pc-time,.music-map-families .pc-right{display:none}
.music-map-families .post-card[aria-pressed="true"]{background:rgba(var(--acc-rgb),.08);box-shadow:inset 2px 0 var(--blue)}

/* 규칙 출처: styles.css의 타입 스케일·pl-tp-btn·wr-*와 post-card.css. */
.music-browser,.music-detail,.music-upload,.music-history{font-weight:400;letter-spacing:0;font-synthesis:none}
.music-browser :is(button,input),.music-detail :is(button,summary),.music-upload :is(button,input,textarea),.music-history button{letter-spacing:0;font-weight:400}
.music-browser :is(.mb-count,.mb-credit,.mb-clear),.music-detail :is(.pv-auline,.pv-meta,.pv-music-role),.music-upload :is(.mw-lead-s,.mw-parent-sub,.mw-drop-s,.mw-upline,.mw-cov-ph,.mw-warn,.mw-note,.mw-gate-s){font-family:"Galmuri9",var(--font-mono);font-size:12px;line-height:20px}
.music-browser .mb-track .post-card{border-radius:6px;line-height:1.4}
.music-browser .mb-credit{gap:8px;line-height:16px}
.music-browser .mb-clear{padding:6px 12px;line-height:16px}
.music-detail .pv-title{font-family:"Galmuri14",var(--font-body);font-size:20px;font-weight:400;letter-spacing:0;line-height:28px}
.music-detail .pv-body{line-height:1.8;margin:16px 0}
.music-detail .pv-body p+p{margin-top:8px}
.music-detail .pv-music-role{margin-left:8px;line-height:16px}
.music-detail .pv-section-title{font-family:"Galmuri9",var(--font-mono);font-size:12px;line-height:20px}
.music-detail .pl-tp-btn,.music-history .pl-tp-btn{line-height:16px;letter-spacing:0;font-weight:400;text-decoration:none}
.mb-audio-host .ssemb-audio{padding:12px;gap:12px;border-radius:10px}
.mb-audio-host .ssaud-cover{width:56px;height:56px;border:0;border-radius:10px}
.mb-audio-host .ssaud-cover-ic{width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.4);color:#fff}
.mb-audio-host .ssaud-title,.mb-audio-host .ssaud-time{font-family:"Galmuri9",var(--font-mono);font-size:12px;font-weight:400;letter-spacing:0;line-height:16px}
.mb-audio-host .ssaud-title{white-space:normal;overflow-wrap:anywhere}
.mb-audio-host .ssaud-loop{min-width:28px;min-height:28px;align-items:center;justify-content:center}
.music-upload .mw-parent-lab,.music-upload .mw-parent-sub{white-space:normal;overflow-wrap:anywhere}
.music-upload .mw-parent{margin-bottom:16px}
.music-upload .mw-desc{line-height:1.8;padding:12px}
.music-upload .mw-note{min-height:20px}
.music-upload .mw-warn{padding:8px 12px}
@media(pointer:coarse){.music-browser .mb-clear,.mb-audio-host .ssaud-loop{min-height:36px;min-width:36px}}

.music-browser .mb-options.wall-subtabs{display:flex;flex-wrap:wrap;gap:6px 0;min-width:0;max-width:100%;margin:0;padding:0;border:0;overflow:visible}

/* 검색/분류/정렬의 기준선을 분리해 중간 너비에서도 버튼 묶음이 엇갈리지 않게 한다. */
.music-browser .mb-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:start}
.music-browser .mb-search-row{grid-column:1/-1;width:100%;max-width:none}
.music-browser .mb-filters{min-width:0;justify-content:space-between;gap:8px 16px}
.music-browser .mb-count{padding:4px 0;line-height:20px}
.music-detail .pv-primary-audio{margin-bottom:12px}
/* 지도도 기존 글 메타의 정격 크기로. 역할은 버튼이 아닌 정보로 표시한다. */
.mn-node :is(.mus-cat,.mus-sub,.mus-stats){font-family:"Galmuri9",var(--font-mono);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0}
.mn-node .mus-cat{border-radius:0;background:none;padding:0;color:#8298a4;overflow-wrap:anywhere}
.mn-node .mus-sub{white-space:normal}
.mn-node .mus-auth{max-width:100%;overflow-wrap:anywhere}
.mn-node .mus-stats{gap:8px;align-items:center;margin-top:auto}
@media(pointer:coarse){.mn-node .mus-thumb .mus-play{width:40px;height:40px}.mn-node .mn-bar{height:28px}}

/* 기존 인기 목록의 페이지 버튼을 그대로 사용한다. */
.music-browser .mb-pager{flex-wrap:wrap;align-items:center;margin-top:8px;padding:8px 0;gap:6px}
.music-browser .mb-pager[hidden]{display:none}
.music-browser .mb-pager button{min-height:28px}
.music-browser .mb-pager button:disabled{opacity:.3;cursor:default}
.music-browser .mb-page-gap{color:var(--music-muted)}
.music-browser .mb-tracks:focus{outline:none}
@media(pointer:coarse){.music-browser .mb-pager button{min-height:36px;min-width:36px}}

.music-browser .mb-tools[hidden]{display:none}

/* 데이터가 오기 전에 전체 작업 종류가 번쩍이지 않도록 한다. */
.music-browser .mb-filters[hidden]{display:none}