/* ============================================================================
   악보바다 리디자인 — 화면끼리 나눠 쓰는 컴포넌트

   같은 것을 여섯 화면이 저마다 다시 쓰고 있던 것들을 여기로 모았다.
   클래스 이름은 화면마다 그대로 둔다(마크업을 건드리지 않는다) — 대신 선택자를 묶고,
   화면마다 다른 부분만 아래에 델타로 남긴다.

   싣는 차례 : rd-tokens.css → rd-common.css → 화면별 <style>
   (뒤에 오는 화면 CSS 가 이겨야 하므로 반드시 <style> 보다 먼저.)
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. 키보드 포커스
   마우스로 눌렀을 때는 나타나지 않는다(:focus-visible).
   지금까지 상세화면에만 있던 규칙을 여섯 화면 모두에 건다.
   --------------------------------------------------------------------------- */
.rd-wrap a:focus-visible,  .rd-wrap button:focus-visible,  .rd-wrap input:focus-visible,
.mo-wrap a:focus-visible,  .mo-wrap button:focus-visible,  .mo-wrap input:focus-visible,
.pl-wrap a:focus-visible,  .pl-wrap button:focus-visible,  .pl-wrap input:focus-visible,
.pm-wrap a:focus-visible,  .pm-wrap button:focus-visible,  .pm-wrap input:focus-visible,
.sd-wrap a:focus-visible,  .sd-wrap button:focus-visible,  .sd-wrap input:focus-visible,
.sm-wrap a:focus-visible,  .sm-wrap button:focus-visible,  .sm-wrap input:focus-visible,
.sd-modal a:focus-visible, .sd-modal button:focus-visible,
.mo-sheet button:focus-visible, .mo-cta button:focus-visible, .mo-selfab-wrap button:focus-visible,
.rd-bottombar a:focus-visible, .rd-bottombar button:focus-visible {
    outline: 2px solid var(--c-brand); outline-offset: 2px; border-radius: var(--r-xs);
}

/* ---------------------------------------------------------------------------
   2. 도움됨 — 리뷰마다 눌러 두는 공감 버튼
   네 화면이 같은 알약. 높이·글자만 화면에 맞춰 다르다.
   --------------------------------------------------------------------------- */
.rd-helpful, .mo-helpful, .sd-helpful, .sm-helpful {
    margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
    background: var(--c-surface); border: 1px solid var(--c-border-pill);
    border-radius: var(--r-pill);
    font-weight: 700; color: var(--c-text-sub); cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.rd-helpful svg, .mo-helpful svg, .sd-helpful svg, .sm-helpful svg { display: block; }
.rd-helpful.on, .mo-helpful.on, .sd-helpful.on, .sm-helpful.on {
    background: var(--c-brand-100); border-color: var(--c-brand); color: var(--c-brand);
}
/* 마우스가 있는 화면에서만 hover 를 준다 */
.rd-helpful, .sd-helpful {
    transition: border-color var(--t-base), color var(--t-base), background-color var(--t-base);
}
.rd-helpful:hover, .sd-helpful:hover { border-color: var(--c-brand); color: var(--c-brand); }

.rd-helpful { height: 28px; padding: 0 12px; font-size: 12px; }
.mo-helpful { height: 28px; padding: 0 11px; font-size: 12px; }
.sd-helpful { height: 26px; padding: 0 11px; font-size: 11.5px; }
.sm-helpful { height: 26px; padding: 0 10px; font-size: 11.5px; }

/* ---------------------------------------------------------------------------
   3. 더 보기 — 리뷰 목록 아래 알약 버튼
   --------------------------------------------------------------------------- */
.rd-more-btn, .mo-more-btn, .sm-more-btn {
    background: var(--c-surface); border: 1px solid var(--c-border-pill);
    border-radius: var(--r-pill);
    font-family: inherit; font-size: 13px; font-weight: 700; color: var(--c-text-sub);
    cursor: pointer; font-variant-numeric: tabular-nums;
}
.rd-more-btn {
    padding: 11px 26px;
    transition: border-color var(--t-base), color var(--t-base), background-color var(--t-base);
}
.rd-more-btn:hover { border-color: var(--c-brand); color: var(--c-brand); background: var(--c-brand-50); }
.mo-more-btn, .sm-more-btn { display: block; width: 100%; }
.mo-more-btn { margin-top: 14px; height: 42px; }
.sm-more-btn { margin-top: 12px; height: 40px; }

/* ---------------------------------------------------------------------------
   4. 리뷰 한 건
   바깥 여백·구분선만 화면마다 다르고, 안쪽(작성자 / 날짜 / 본문 / 키워드)은 같다.
   --------------------------------------------------------------------------- */
.rd-review-card .top, .sd-rv-item .top, .mo-rv-top, .sm-rv-top {
    display: flex; align-items: center; justify-content: space-between;
}
.rd-review-card .top, .sd-rv-item .top { gap: 10px; }
.mo-rv-top { gap: 8px; margin-bottom: 7px; }
.sm-rv-top { gap: 8px; margin-bottom: 6px; }

.rd-review-card .user, .sd-rv-item .user, .mo-rv-top .user, .sm-rv-top .user {
    display: flex; align-items: center; min-width: 0;
}
.rd-review-card .user, .sd-rv-item .user { gap: 8px; }
.mo-rv-top .user, .sm-rv-top .user { gap: 7px; }
.rd-review-card .user svg, .sd-rv-item .user svg,
.mo-rv-top .user svg, .sm-rv-top .user svg { display: block; flex-shrink: 0; }

.rd-review-card .user b, .sd-rv-item .user b, .mo-rv-top .user b, .sm-rv-top .user b {
    font-weight: 700; color: var(--c-text);
}
.rd-review-card .user b, .sd-rv-item .user b { font-size: 14px; }
.mo-rv-top .user b, .sm-rv-top .user b { font-size: 13px; }

.rd-review-card .date, .sd-rv-item .date, .mo-rv-top .date, .sm-rv-top .date {
    color: var(--c-text-muted); flex-shrink: 0;
}
.rd-review-card .date, .sd-rv-item .date { font-size: 12px; }
.mo-rv-top .date, .sm-rv-top .date { font-size: 11px; line-height: 1.2; }

.rd-review-card .txt, .sd-rv-item .txt, .mo-rv-item .txt, .sm-rv-item .txt {
    line-height: 1.65; color: var(--c-text-review);
}
/* 1열이라 폭을 다 쓰면 한 줄이 너무 길어진다 — 읽기 좋은 길이로 제한 */
.rd-review-card .txt { max-width: 860px; font-size: 14px; word-break: break-word; }
.sd-rv-item .txt { margin: 0; font-size: 14px; word-break: keep-all; overflow-wrap: break-word; }
.mo-rv-item .txt { margin: 0; font-size: 13px; word-break: keep-all; overflow-wrap: anywhere; }
.sm-rv-item .txt { margin: 0; font-size: 13px; word-break: keep-all; }

.rd-review-meta, .sd-rv-meta, .mo-rv-meta, .sm-rv-meta {
    display: flex; flex-wrap: wrap; align-items: center;
}
.rd-review-meta, .sd-rv-meta { gap: 6px; }
.mo-rv-meta { margin-top: 7px; gap: 5px; }
.sm-rv-meta { margin-top: 6px; gap: 5px; }

.rd-review-meta .kw, .sd-rv-meta .kw, .mo-rv-meta .kw, .sm-rv-meta .kw { color: var(--c-text-muted); }
.rd-review-meta .kw, .sd-rv-meta .kw { font-size: 12px; line-height: 1.5; }
.mo-rv-meta .kw, .sm-rv-meta .kw { font-size: 11px; }

/* 평점 요약 : 큰 숫자 + 별 */
.rd-score, .mo-rv-score, .sd-rv-score, .sm-rv-score {
    display: flex; flex-direction: column; align-items: center;
}
.rd-score, .sd-rv-score { gap: 4px; }
.sd-rv-score { flex: 0 0 auto; }   /* 평점 요약 줄에서 줄어들지 않게 */
.mo-rv-score, .sm-rv-score { gap: 3px; }
.rd-score .num, .mo-rv-score .num, .sd-rv-score .num, .sm-rv-score .num {
    font-weight: 700; line-height: 1.1; color: var(--c-text);
    font-variant-numeric: tabular-nums;
}
.rd-score .num, .sd-rv-score .num { font-size: 34px; }
.mo-rv-score .num { font-size: 30px; }
.sm-rv-score .num { font-size: 28px; }

/* 리뷰 태그(파트·조 등) */
.rd-tag.is-part, .sd-rv-tag {
    padding: 3px 8px; border-radius: var(--r-xs); font-size: 11px; font-weight: 700;
    background: var(--c-mr-bg); color: var(--c-mr-fg);
}

/* ---------------------------------------------------------------------------
   5. 난이도 게이지 — 5칸 도트
   숫자만으로는 감이 안 와서 네 화면 모두 같은 게이지를 쓴다.
   --------------------------------------------------------------------------- */
.rd-gspec .dots, .rd-pspec .dots, .sd-dots, .sm-dots { display: inline-flex; align-items: center; }
.rd-gspec .dots, .rd-pspec .dots { gap: 4px; }
.sd-dots { gap: 4px; }
.sm-dots { gap: 3px; }

.rd-gspec .dots .d, .rd-pspec .dots .d, .sd-dots i, .sm-dots i {
    display: block; border-radius: 50%; background: var(--c-dot-off);
}
.rd-gspec .dots .d { width: 8px; height: 8px; }
.rd-pspec .dots .d { width: 7px; height: 7px; }
.sd-dots i, .sm-dots i { width: 9px; height: 9px; }

.rd-gspec .dots .d.on, .rd-pspec .dots .d.on, .sd-dots i.on, .sm-dots i.on { background: var(--c-brand); }

/* ---------------------------------------------------------------------------
   6. 미리듣기 — jPlayer(blue.monday) 껍데기 갈아끼우기
   스킨이 스프라이트 이미지와 절대좌표로 짜여 있어 이 화면과 안 맞는다.
   DOM 훅(.jp-play / .jp-progress / .jp-play-bar …)은 그대로 두고 겉모습만 전부 덮는다.
   common.css 가 !important 를 쓰므로 여기서도 !important 가 필요하다.
   --------------------------------------------------------------------------- */
.sd-player .jp-jplayer, .sm-player .jp-jplayer { width: 0 !important; height: 0 !important; }

.sd-player .jp-audio, .sd-player .jp-type-single,
.sm-player .jp-audio, .sm-player .jp-type-single {
    width: auto !important; height: auto !important;
    padding: 0 !important; margin: 0 !important; border: 0 !important;
    background: none !important; font-family: inherit !important;
}
.sd-player .jp-gui.jp-interface, .sm-player .jp-gui.jp-interface {
    display: flex !important; align-items: center;
    width: auto !important; height: auto !important; background: none !important;
}
.sd-player .jp-gui.jp-interface { gap: 12px; }
.sm-player .jp-gui.jp-interface { gap: 11px; }

.sd-player .jp-controls, .sm-player .jp-controls {
    flex: 0 0 auto; width: auto !important; height: auto !important;
    margin: 0 !important; padding: 0 !important;
}
.sd-player .jp-controls { list-style: none; }

/* 재생 / 일시정지 : 파란 원 + CSS 로 그린 아이콘 */
.sd-player .jp-play, .sm-player .jp-play {
    position: relative !important; display: block; float: none !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50%;
    background: var(--c-brand) !important; cursor: pointer;
    font-size: 0 !important; color: transparent !important; overflow: hidden;
}
.sd-player .jp-play { width: 34px !important; height: 34px !important;
                      transition: background-color var(--t-base); }
.sm-player .jp-play { width: 36px !important; height: 36px !important; }
.sd-player .jp-play:hover { background: var(--c-brand-hover) !important; }

.sd-player .jp-play:after, .sm-player .jp-play:after {
    content: ""; position: absolute; top: 50%; margin-top: -7px; width: 0; height: 0;
    border-left: 11px solid #fff;
    border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.sd-player .jp-play:after { left: 13px; }
.sm-player .jp-play:after { left: 14px; }

.sd-player .jp-state-playing .jp-play:after,
.sm-player .jp-state-playing .jp-play:after {
    margin-top: -6px; width: 12px; height: 12px; border: 0;
    background: linear-gradient(to right,
                #fff 0, #fff 4px, transparent 4px, transparent 8px, #fff 8px, #fff 12px);
}
.sd-player .jp-state-playing .jp-play:after { left: 11px; }
.sm-player .jp-state-playing .jp-play:after { left: 12px; }

/* 진행 바 */
.sd-player .jp-progress, .sm-player .jp-progress {
    position: relative !important; flex: 1 1 auto; min-width: 0;
    width: auto !important; top: auto !important; left: auto !important;
    height: 6px !important; margin: 0 !important; padding: 0 !important;
    border-radius: 3px; background: var(--c-dot-off) !important; overflow: hidden;
}
.sd-player .jp-progress { cursor: pointer; }
.sd-player .jp-seek-bar, .sm-player .jp-seek-bar {
    width: 0; height: 100% !important; margin: 0 !important; padding: 0 !important;
    background: #cddcf4 !important;
}
.sd-player .jp-seek-bar { cursor: pointer; }
.sd-player .jp-play-bar, .sm-player .jp-play-bar {
    width: 0; height: 100% !important; margin: 0 !important; padding: 0 !important;
    background: var(--c-brand) !important;
}

/* 재생 시간 */
.sd-player .jp-time-holder, .sm-player .jp-time-holder {
    position: static !important; flex: 0 0 auto; display: flex; align-items: center;
    width: auto !important; height: auto !important; top: auto !important; left: auto !important;
}
.sd-player .jp-current-time, .sd-player .jp-duration,
.sm-player .jp-current-time, .sm-player .jp-duration {
    position: static !important; float: none !important; width: auto !important;
    margin: 0 !important; padding: 0 !important;
    line-height: 1.3 !important; color: var(--c-text-sub2) !important;
    font-variant-numeric: tabular-nums;
}
.sd-player .jp-current-time, .sd-player .jp-duration { font-size: 12px !important; cursor: default; }
.sm-player .jp-current-time, .sm-player .jp-duration { font-size: 11px !important; }
.sd-player .jp-current-time:after,
.sm-player .jp-current-time:after { content: "/"; color: #c6ccd6; }
.sd-player .jp-current-time:after { margin: 0 4px; }
.sm-player .jp-current-time:after { margin: 0 3px; }

.sd-player .jp-no-solution, .sm-player .jp-no-solution { display: none; }

/* 미리듣기 판 */
.sd-player, .sm-player {
    background: var(--c-sunken2); border: 1px solid #e9edf3; border-radius: var(--r-lg);
}
.sd-player { margin: 16px 0 0; padding: 13px 14px; }
.sm-player { margin: 0 0 10px; padding: 12px 14px; }
.sm-player:last-child { margin-bottom: 0; }
.sd-player-tit, .sm-player-tit { margin: 0 0 10px; font-size: 12px; font-weight: 700; color: var(--c-text-body); }
.sd-player-tit .sub, .sm-player-tit .sub { font-weight: 400; color: var(--c-text-muted); }
.sm-player-tit { margin-bottom: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-player-msg, .sm-player-msg {
    padding-top: 10px; border-top: 1px solid #e6eaf1;
    font-size: 11px; line-height: 1.6; color: var(--c-text-sub2);
}
.sd-player-msg { margin: 10px 0 0; }
.sm-player-msg { margin: 9px 0 0; padding-top: 9px; }
.sd-player-msg a, .sm-player-msg a {
    color: var(--c-brand); font-weight: 700; cursor: pointer; text-decoration: none;
}
.sd-player-msg a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   7. 선택 파트 목록 — 구매 직전에 뭘 담았는지 확인하는 작은 창
   --------------------------------------------------------------------------- */
.rd-selpanel, .mo-selpop {
    background: var(--c-surface); border: 1px solid #d6deea; border-radius: var(--r-card);
    overflow: hidden; box-shadow: var(--e-pop);
}
.rd-selpanel-head, .mo-selpop-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--c-brand-panel); border-bottom: 1px solid #e6ecf6;
}
.rd-selpanel-head { padding: 10px 14px; }
.mo-selpop-head { padding: 9px 12px; }
.rd-selpanel-head .t, .mo-selpop-head .t { font-weight: 700; color: var(--c-text-deep); }
.rd-selpanel-head .t { font-size: 13px; }
.mo-selpop-head .t { font-size: 12.5px; line-height: 1.2; }
.rd-selpanel-head .t b, .mo-selpop-head .t b { color: var(--c-brand); }
.rd-selpanel-head .clr, .mo-selpop-head .clr {
    border: 0; background: none; font-family: inherit; font-size: 12px;
    font-weight: 700; color: #79818f; cursor: pointer;
}
.mo-selpop-head .clr { line-height: 1.2; }
.rd-selpanel-head .clr:hover { color: var(--c-brand); text-decoration: underline; }

/* 줄끼리 잘 갈리도록 한 줄씩 옅은 판으로 세우고 사이를 띄운다 */
.rd-sellist, .mo-sellist { margin: 0; list-style: none; overflow-y: auto; }
.rd-sellist { padding: 8px; max-height: 196px; }
.mo-sellist { padding: 7px; max-height: 248px; overscroll-behavior: contain; }
.rd-sellist li, .mo-sellist li {
    display: flex; align-items: center;
    border: 1px solid #eceff4; border-radius: var(--r-md); background: #fbfcfe;
}
.rd-sellist li { gap: 8px; padding: 8px 10px; }
.mo-sellist li { gap: 7px; padding: 8px 9px; }
.rd-sellist li + li, .mo-sellist li + li { margin-top: 6px; }
.rd-sellist li:hover { border-color: #dbe4f2; background: #f6f9ff; }

.rd-sellist .nm, .mo-sellist .nm {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 700; color: var(--c-text);
}
.rd-sellist .nm { font-size: 13.5px; }
.mo-sellist .nm { font-size: 13px; line-height: 1.35; }
/* 조가 원곡키와 다르면 그것도 같이 — 이름만으로는 옆줄과 구별이 안 된다 */
.rd-sellist .key, .mo-sellist .key {
    flex: 0 0 auto; border-radius: var(--r-xs);
    background: var(--c-key-bg); font-weight: 700; color: var(--c-key-fg);
}
.rd-sellist .key { padding: 1px 6px; font-size: 11px; }
.mo-sellist .key { padding: 1px 5px; font-size: 10.5px; line-height: 1.5; }
.rd-sellist .pr, .mo-sellist .pr {
    flex: 0 0 auto; font-weight: 700; color: var(--c-brand); font-variant-numeric: tabular-nums;
}
.rd-sellist .pr { font-size: 13px; }
.mo-sellist .pr { font-size: 12.5px; line-height: 1.2; }
.rd-sellist .del, .mo-sellist .del {
    flex: 0 0 auto; padding: 0; border: 1px solid var(--c-border-ctl2); border-radius: 50%;
    background: var(--c-surface); font-family: inherit; line-height: 1;
    color: var(--c-text-muted); cursor: pointer;
}
.rd-sellist .del { width: 22px; height: 22px; font-size: 13px; }
.mo-sellist .del { width: 24px; height: 24px; font-size: 14px; }
.rd-sellist .del:hover { border-color: #f0c4c4; background: #fff6f6; color: #c62828; }

/* 담긴 것을 알리는 짧은 효과 — 화면 구석에서 일어난 일이라 그냥 두면 담긴 줄 모른다.
   transform 만 건드려 자리를 다시 재지 않는다. */
@keyframes rdSelPop {
    0%   { transform: scale(1); }
    25%  { transform: scale(1.11); }
    45%  { transform: scale(.96); }
    65%  { transform: scale(1.05); }
    85%  { transform: scale(.99); }
    100% { transform: scale(1); }
}
.rd-selfab.is-pop, .mo-selfab.is-pop { animation: rdSelPop .42s ease-out; }
@media (prefers-reduced-motion: reduce) {
    .rd-selfab.is-pop, .mo-selfab.is-pop { animation: none; }
}

/* 떠 있는 선택 단추 */
.rd-selfab, .mo-selfab {
    position: relative; display: inline-flex; align-items: center;
    height: 44px; border: 0; border-radius: var(--r-pill);
    background: var(--c-brand); color: #fff;
    font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
    box-shadow: var(--e-fab);
}
.rd-selfab { gap: 7px; padding: 0 18px; transition: background-color var(--t-base); }
.mo-selfab { gap: 6px; padding: 0 16px; line-height: 1.2; }
.rd-selfab svg, .mo-selfab svg { display: block; }
.rd-selfab:hover, .rd-selfab.is-open, .mo-selfab-wrap.is-open .mo-selfab { background: var(--c-brand-hover); }

/* ---------------------------------------------------------------------------
   8. 토스트 — 장바구니 담김 안내 (fadeIn/fadeOut 으로 제어)
   --------------------------------------------------------------------------- */
.rd-bb-toast, .sd-toast {
    display: none; position: absolute; left: 50%; bottom: calc(100% + 10px);
    transform: translateX(-50%); white-space: nowrap;
    padding: 9px 14px; border-radius: var(--r-md); background: var(--c-inverse);
    font-size: 12px; font-weight: 400; color: #fff;
}
.sd-toast { z-index: 5; line-height: 1.5; }
.rd-bb-toast:after, .sd-toast:after {
    content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px;
    border: 5px solid transparent; border-top-color: var(--c-inverse);
}

/* ---------------------------------------------------------------------------
   9. 스크롤 막대 — 안에서 굴리는 칸은 모두 같은 모양
   --------------------------------------------------------------------------- */
.rd-lyrics-body::-webkit-scrollbar,
.sd-parts::-webkit-scrollbar { width: 6px; }
.sd-panel-body::-webkit-scrollbar,
.sd-mr-lyric-body::-webkit-scrollbar,
.sd-modal-body::-webkit-scrollbar { width: 8px; }

.rd-lyrics-body::-webkit-scrollbar-track { background: transparent; }

.rd-lyrics-body::-webkit-scrollbar-thumb,
.sd-parts::-webkit-scrollbar-thumb { background: var(--c-border-m); border-radius: 3px; }
.sd-panel-body::-webkit-scrollbar-thumb,
.sd-mr-lyric-body::-webkit-scrollbar-thumb,
.sd-modal-body::-webkit-scrollbar-thumb { background: var(--c-border-m); border-radius: var(--r-xs); }

/* 옆으로 미는 줄은 막대를 감춘다 */
.mo-reco::-webkit-scrollbar,
.pm-tabs-in::-webkit-scrollbar,
.pm-top::-webkit-scrollbar { display: none; }

/* ---------------------------------------------------------------------------
   10. MR 타입 안내 — 샘플보기 PC/모바일이 같은 판을 쓴다
   --------------------------------------------------------------------------- */
.sd-mr-type, .sm-mr-type {
    display: flex; flex-wrap: wrap; align-items: center;
    background: var(--c-brand-panel); border: 1px solid #e6edf8;
}
.sd-mr-type { flex: 0 0 auto; gap: 10px 12px; padding: 14px 16px; border-radius: var(--r-md); }
.sm-mr-type { gap: 9px 10px; padding: 13px 14px; margin-bottom: 12px; border-radius: var(--r-lg); }
.sd-mr-type .badge, .sm-mr-type .badge {
    flex: 0 0 auto; border-radius: var(--r-sm);
    background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-deep) 100%);
    font-weight: 700; color: #fff; white-space: nowrap;
}
.sd-mr-type .badge { padding: 5px 12px; font-size: 13px; line-height: 1.2; }
.sm-mr-type .badge { padding: 5px 11px; font-size: 12px; }
.sd-mr-type .nm, .sm-mr-type .nm {
    flex: 0 1 auto; min-width: 0; font-weight: 700; color: var(--c-text-deep);
}
.sd-mr-type .nm { font-size: 13px; }
.sm-mr-type .nm { font-size: 12.5px; }
.sd-mr-type .desc, .sm-mr-type .desc {
    flex: 0 0 100%; width: 100%; line-height: 1.6; color: var(--c-text-body); word-break: keep-all;
}
.sd-mr-type .desc { font-size: 13px; overflow-wrap: break-word; }
.sm-mr-type .desc { font-size: 12px; }
.sd-mr-type .desc em, .sm-mr-type .desc em { font-style: normal; font-weight: 700; color: var(--c-brand); }

/* ---------------------------------------------------------------------------
   11. 가사 — 줄바꿈(\n)이 그대로 들어오므로 pre-line 으로 살려서 보여 준다
   --------------------------------------------------------------------------- */
.mo-lyric-body, .sm-lyric-body {
    padding: 14px; background: var(--c-sunken);
    border: 1px solid var(--c-border-soft); border-radius: var(--r-lg);
    font-size: 13px; line-height: 1.9; color: var(--c-text-review);
}
.mo-lyric-body { white-space: pre-line; word-break: break-word; }

/* ---------------------------------------------------------------------------
   12. 눈썹 제목 (SHEET MUSIC SAMPLE 같은 작은 대문자 줄)
   --------------------------------------------------------------------------- */
.sd-eyebrow, .sm-eyebrow {
    font-weight: 700; letter-spacing: .16em; color: var(--c-eyebrow);
}
.sd-eyebrow { margin: 0 0 10px; font-size: 11px; line-height: 1; }
.sm-eyebrow { margin: 0 0 8px; font-size: 10px; }

/* ---------------------------------------------------------------------------
   13. 접기 — 앞부분만 보여 주고 아래를 흐리게, '더보기'로 펼친다
   --------------------------------------------------------------------------- */
.rd-lyrics-more, .rd-info-more, .mo-desc-more {
    display: block; width: 100%; border: 0; background: var(--c-surface); cursor: pointer;
    font-family: inherit; font-size: 12px; font-weight: 700; color: var(--c-text-sub);
}
.rd-lyrics-more, .rd-info-more {
    padding: 9px 0 11px; border-top: 1px solid var(--c-divider);
    transition: color var(--t-base), background-color var(--t-base);
}
.mo-desc-more { padding: 10px 0 12px; border-top: 1px solid var(--c-bg-view); }
.rd-lyrics-more:hover, .rd-info-more:hover { background: var(--c-brand-50); color: var(--c-brand); }
.rd-info-more.is-hidden, .mo-desc-more.is-hidden { display: none; }