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

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

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

   CSS 를 어디에 두나 — WEB-INF/views 아래 폴더를 도메인으로 본다.
     여러 도메인(폴더)의 화면이 함께 쓰는 규칙   → 이 파일 (rd-assets.jspf 로 모든 리디자인 화면에 실린다)
     한 도메인 안 여러 화면이 함께 쓰는 규칙     → rd-<도메인>.css (rd-search.css · rd-mypage.css …)
     한 화면만 쓰는 규칙                         → 그 화면의 <style>
   이 파일은 모든 화면에 실리므로, 여기 넣는 규칙이 다른 화면의 같은 이름 클래스에 걸리지 않는지 먼저 본다.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. 키보드 포커스
   마우스로 눌렀을 때는 나타나지 않는다(:focus-visible).
   지금까지 상세화면에만 있던 규칙을 여섯 화면 모두에 건다.
   --------------------------------------------------------------------------- */
.rd-wrap a:focus-visible,  .rd-wrap button:focus-visible,
.mo-wrap a:focus-visible,  .mo-wrap button:focus-visible,
.pl-wrap a:focus-visible,  .pl-wrap button:focus-visible,
.pm-wrap a:focus-visible,  .pm-wrap button:focus-visible,
.sd-wrap a:focus-visible,  .sd-wrap button:focus-visible,
.sm-wrap a:focus-visible,  .sm-wrap button: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 {
    /* border-radius 를 여기서 못박지 않는다 — 못박으면 포커스가 갔을 때
       <b>요소의 모양 자체가</b> 바뀐다. 알약 단추가 각지고, 8px 짜리 입력칸에
       4px 짜리 테가 둘려 안팎이 어긋나 보였다.
       outline 은 요소가 가진 모서리를 알아서 따라간다. */
    outline: 2px solid var(--c-brand); outline-offset: 2px;
}

/* 입력칸은 따로 본다. 글씨를 넣는 곳이라 마우스로 눌러도 :focus-visible 이 잡힌다 —
   위의 굵은 테를 그대로 쓰면 검색하러 누를 때마다 칸 밖으로 큰 테가 튀어나온다.
   화면 어디서나 쓰는 부드러운 표시(테 색 + 옅은 무리)로 낸다. 사이드바 입력칸과
   헤더 검색창이 이미 쓰는 그 모양이라 사이트 안에서 하나로 읽힌다. */
.rd-wrap input:focus, .rd-wrap input:focus-visible,
.mo-wrap input:focus, .mo-wrap input:focus-visible,
.pl-wrap input:focus, .pl-wrap input:focus-visible,
.pm-wrap input:focus, .pm-wrap input:focus-visible,
.sd-wrap input:focus, .sd-wrap input:focus-visible,
.sm-wrap input:focus, .sm-wrap input:focus-visible {
    outline: 0; border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-focus);
}

/* ---------------------------------------------------------------------------
   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. 음역 비교 게이지 — C1~C8 을 100% 로 놓고 악기 구간을 그린다
   --------------------------------------------------------------------------- */
.sd-range-key { display: flex; flex-direction: column; gap: 8px; }
.sm-range-key { display: flex; gap: 8px; }
.sd-range-key .box, .sm-range-key .box {
    background: var(--c-brand-panel); border: 1px solid #e6edf8; border-radius: var(--r-md);
}
.sd-range-key .box { display: flex; align-items: baseline; gap: 10px; padding: 11px 14px; }
.sm-range-key .box { flex: 1 1 0; min-width: 0; padding: 10px 12px; }
.sd-range-key .box .k { flex: 0 0 46px; font-size: 12px; }
.sm-range-key .box .k { display: block; margin-bottom: 4px; font-size: 11px; }
.sd-range-key .box .kor { font-size: 12px; }
.sm-range-key .box .kor { display: block; margin-top: 2px; font-size: 11px; }
.sd-range-key .box .note, .sm-range-key .box .note {
    font-weight: 700; color: var(--c-brand); font-variant-numeric: tabular-nums;
}
.sd-range-key .box .note { font-size: 19px; line-height: 1; }
.sm-range-key .box .note { font-size: 17px; line-height: 1.1; }
.sd-range-key .box .k,   .sm-range-key .box .k,
.sd-range-key .box .kor, .sm-range-key .box .kor { color: var(--c-text-sub2); }

.sd-range-list, .sm-range-list { display: flex; flex-direction: column; }
.sd-range-row,  .sm-range-row  { display: flex; align-items: center; }
.sd-range-row .name, .sm-range-row .name { color: var(--c-text-sub2); white-space: nowrap; }
.sd-range-row .track, .sm-range-row .track {
    position: relative; flex: 1 1 auto; border-radius: var(--r-xs);
    background: var(--c-border-soft); overflow: hidden;
}
.sd-range-row .bar, .sm-range-row .bar {
    position: absolute; top: 0; bottom: 0; border-radius: var(--r-xs);
    background: linear-gradient(90deg, #c3d6f2 0%, #9dbdea 100%);
}
.sd-range-row .lbl, .sm-range-row .lbl {
    text-align: right; color: var(--c-text-muted); white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* 지금 보고 있는 파트의 악기 */
.sd-range-row.is-self .name, .sm-range-row.is-self .name,
.sd-range-row.is-self .lbl,  .sm-range-row.is-self .lbl { color: var(--c-brand); font-weight: 700; }
.sd-range-row.is-self .bar,  .sm-range-row.is-self .bar {
    background: linear-gradient(90deg, #3d86e8 0%, var(--c-brand) 100%);
}
.sd-range-row.is-self .bar { box-shadow: 0 0 0 1px rgba(31,97,193,.25); }

.sd-range-list { gap: 9px; margin-top: 14px; }
.sm-range-list { gap: 8px; margin-top: 12px; }
.sd-range-row  { gap: 10px; }
.sm-range-row  { gap: 8px; }
.sd-range-row .name { flex: 0 0 52px; font-size: 12px; }
.sm-range-row .name { flex: 0 0 46px; font-size: 11px; }
.sd-range-row .track { height: 8px; }
.sm-range-row .track { height: 7px; }
.sd-range-row .lbl { flex: 0 0 66px; font-size: 11px; }
.sm-range-row .lbl { flex: 0 0 62px; font-size: 10px; }

/* ---------------------------------------------------------------------------
   7. 미리듣기 — 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 { 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; }

/* ---------------------------------------------------------------------------
   8. 선택 파트 목록 — 구매 직전에 뭘 담았는지 확인하는 작은 창
   --------------------------------------------------------------------------- */
.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: var(--c-text-sub2); 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: 15px; 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); }

/* ---------------------------------------------------------------------------
   9. 토스트 — 장바구니 담김 안내 (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);
}

/* ---------------------------------------------------------------------------
   10. 스크롤 막대 — 안에서 굴리는 칸은 모두 같은 모양
   --------------------------------------------------------------------------- */
.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); }

/* 음역 악기 목록 : 트랙 없이 가는 손잡이만. 눈금 줄(.sd-rg-scale)도 같은 폭을 비워 막대 폭을 맞춘다 */
.sd-rg-list::-webkit-scrollbar,
.sd-rg-scale::-webkit-scrollbar { width: 4px; }
.sd-rg-list::-webkit-scrollbar-track,
.sd-rg-list::-webkit-scrollbar-corner { background: transparent; }
.sd-rg-list::-webkit-scrollbar-button { display: none; height: 0; }
.sd-rg-list::-webkit-scrollbar-thumb { background: var(--c-border-m); border-radius: 2px; }
.sd-rg-list::-webkit-scrollbar-thumb:hover { background: var(--c-text-sub2); }
/* ::-webkit-scrollbar 를 모르는 브라우저(파이어폭스)만. 크롬에 걸면 위 모양이 무시된다 */
@supports not selector(::-webkit-scrollbar) {
    .sd-rg-list { scrollbar-width: thin; scrollbar-color: var(--c-border-m) transparent; }
}

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

/* ---------------------------------------------------------------------------
   11. 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); }

/* ---------------------------------------------------------------------------
   12. 가사 — 줄바꿈(\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; }

/* ---------------------------------------------------------------------------
   13. 눈썹 제목 (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; }

/* ---------------------------------------------------------------------------
   14. 접기 — 앞부분만 보여 주고 아래를 흐리게, '더보기'로 펼친다
   --------------------------------------------------------------------------- */
.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; }


/* ---- 여러 화면에 똑같이 흩어져 있던 규칙 (규칙 단위로 모음) ---- */
/* 조(Key) 표기 : 원곡키와 다른 조로 편곡된 파트에만 붙는다 (원키는 기본이라 표기하지 않음) */
.rd-keytag { display:inline-block; margin-right:6px; padding:1px 7px; border-radius:5px;
             background:var(--c-key-bg); border:1px solid var(--c-key-line); color:var(--c-key-fg);
             font-size:11px; font-weight:700; line-height:16px; vertical-align:1px; }

/* ============================================================================
   [cart · mypage 공통] 주문/결제 — 장바구니 주문 MYP-01-02 · 주문제작 결제 bbs_order_t_settle (.od-)

   아래 화면들의 <style> 에 똑같이 들어 있던 규칙을 그대로 옮겼다.
   (MYP-01-02-Redesign.jsp · bbs_order_t_settle-Redesign.jsp)
   ============================================================================ */

/* ============================================================
   주문/결제 리디자인 — 전용 스코프 : .od-
   새 모양을 만들지 않는다. 값은 장바구니 리디자인(.wl-)에서 옮겨 왔다.
     머리 카드 · 표 머리 · 줄 · 섹션 머리   장바구니 .wl-hero · .wl-thead · .wl-row · .wl-sec-head
     오른쪽 결제 정보                     장바구니 시안 B .wl-sum
     결제 수단 칸                         장바구니 시안 판 .wl-proto-v 단추(선택 = 파랑 테두리 + 연한 바닥)
   ============================================================ */
.od-wrap { width:1110px; margin:0 auto; padding:22px 0 70px; color:var(--c-text);
           font-size:13px; line-height:normal; box-sizing:border-box; }
.od-wrap *, .od-wrap *:before, .od-wrap *:after { box-sizing:border-box; }
.od-wrap a { text-decoration:none; color:inherit; }
.od-wrap button { font-family:inherit; }
.od-wrap a:focus-visible, .od-wrap button:focus-visible, .od-wrap input:focus-visible {
    outline:2px solid var(--c-brand); outline-offset:2px; }

/* ---------- 머리 : 구입목록(MYP-02-01-Redesign .by-banner)과 같은 얇은 파란 머리 ----------
   왼쪽 마이페이지 › 제목 · 설명, 오른쪽 주문 단계. 단계 알약은 파란 바탕 위라 유리 모양으로 뒤집는다(지금 단계만 흰 알약) */
.od-hero { position:relative; isolation:isolate; display:flex; align-items:center; gap:12px; margin:0 0 16px; padding:20px 24px;
            border-radius:var(--r-card); overflow:hidden; box-shadow:var(--e-card);
            background:linear-gradient(120deg, var(--c-brand) 0%, var(--c-brand-deep) 58%, #243f93 100%); }
.od-bn-fx { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.od-bn-fx .bl { position:absolute; border-radius:50%; filter:blur(42px); }
.od-bn-fx .b1 { width:300px; height:300px; right:-60px; top:-190px; background:#5ea3ff; opacity:.5; }
.od-bn-fx .b2 { width:240px; height:240px; left:40%; bottom:-200px; background:#7c6cff; opacity:.4; }
.od-bn-fx .staff { position:absolute; left:0; right:0; top:4px; width:100%; height:80px; opacity:.14;
                   -webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 34%, #000 66%, #000 100%);
                           mask-image:linear-gradient(90deg, transparent 0%, transparent 34%, #000 66%, #000 100%); }
.od-hd { min-width:0; }
.od-crumb { display:inline-flex; align-items:center; gap:4px; margin:0 0 6px; font-size:12.5px; font-weight:700; line-height:1;
            color:rgba(255,255,255,.72); letter-spacing:.02em; }
.od-wrap .od-crumb a { color:rgba(255,255,255,.72); }
.od-wrap .od-crumb a:hover { color:#fff; }
.od-crumb svg { display:block; }
.od-tit { margin:0; font-size:22px; font-weight:700; line-height:1.3; color:#fff; letter-spacing:-.01em; white-space:nowrap; }
.od-tit .sub { margin-left:10px; font-size:13px; font-weight:400; letter-spacing:0; color:rgba(255,255,255,.7); }
.od-steps { display:flex; align-items:center; gap:6px; margin:0 0 0 auto; padding:0; list-style:none; }
.od-steps li { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 14px; border-radius:var(--r-pill);
               border:1px solid rgba(255,255,255,.2); background:rgba(10,28,84,.22);
               font-size:13px; font-weight:700; color:rgba(255,255,255,.62); white-space:nowrap; list-style:none; }
.od-steps li .n { font-size:12px; font-weight:700; color:rgba(255,255,255,.42); }
.od-steps li.on { border-color:#fff; background:#fff; color:var(--c-brand); }
.od-steps li.on .n { color:var(--c-brand-border); }
.od-steps li.done { color:rgba(255,255,255,.85); }
.od-steps .sep { display:block; color:rgba(255,255,255,.45); }

/* ---------- 두 칸 : 왼쪽 주문 · 결제 수단 / 오른쪽 결제 금액 ---------- */
.od-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start; }
.od-card { background:#fff; border:1px solid var(--c-border); border-radius:var(--r-card);
           box-shadow:var(--e-card); overflow:hidden; }
.od-card + .od-card { margin-top:16px; }
.od-card-h { display:flex; align-items:center; gap:10px; padding:13px 18px; }
.od-card-h .t { margin:0; font-size:15px; font-weight:700; color:var(--c-text); }
.od-card-h .c { font-size:12.5px; color:var(--c-text-muted); }
.od-card-h .c b { color:var(--c-brand); }
.od-card-h .sp { flex:1 1 auto; }
/* 장바구니로 돌아가기 : 페이지의 다른 테두리 단추(.od-btn · 장바구니 .wl-btn)와 같은 톤, 머리 줄에 맞춰 작게 */
.od-wrap .od-back { display:inline-flex; align-items:center; gap:5px; height:32px; padding:0 12px 0 10px;
                    border:1px solid var(--c-border-ctl); border-radius:var(--r-md); background:#fff;
                    font-size:12.5px; font-weight:700; color:var(--c-text-sub); white-space:nowrap;
                    transition:border-color var(--t-base), color var(--t-base), background-color var(--t-base); }
.od-wrap .od-back:hover { border-color:var(--c-brand); color:var(--c-brand); background:var(--c-brand-50); }
.od-back svg { display:block; }

/* ---------- 주문 곡 표 ---------- */
.od-thead { display:flex; align-items:center; gap:10px; padding:11px 18px; background:var(--c-thead);
            border-top:1px solid var(--c-border); border-bottom:1px solid var(--c-border);
            font-size:12.5px; font-weight:700; color:var(--c-text-sub); white-space:nowrap; }
.od-row { display:flex; align-items:center; gap:10px; padding:7px 18px; min-height:60px; background:#fff;
          border-bottom:1px solid var(--c-divider); }
.od-rows .od-row:last-child { border-bottom:0; }
.od-c-th    { width:46px;  flex:0 0 46px; }
.od-c-tit   { flex:1 1 0;  min-width:1px; }
.od-c-part  { width:170px; flex:0 0 170px; min-width:0; }
.od-c-key   { width:150px; flex:0 0 150px; min-width:0; }
.od-c-price { width:90px;  flex:0 0 90px; text-align:right; font-size:15px; font-weight:700; color:var(--c-text);
              font-variant-numeric:tabular-nums; white-space:nowrap; }
.od-thead .od-c-price { font-size:12.5px; }
.od-th { display:block; width:46px; height:46px; border:1px solid var(--c-border); border-radius:var(--r-md);
         overflow:hidden; background:var(--c-fill); }
.od-th img { width:100%; height:100%; object-fit:cover; display:block; }
.od-name { display:block; font-size:13px; font-weight:700; color:var(--c-text);
           overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.od-sub2 { display:block; margin-top:2px; font-size:12.5px; color:var(--c-text-sub);
           overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.od-muted { display:block; margin-top:2px; font-size:12px; color:var(--c-text-muted);
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.od-part { display:block; font-size:13px; color:var(--c-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.od-mr { display:inline-block; margin-left:4px; padding:1px 6px; border-radius:5px; background:var(--c-mr-bg);
         color:var(--c-mr-fg); font-size:10.5px; font-weight:700; line-height:15px; vertical-align:1px; }
.od-keytxt { font-size:13px; color:var(--c-text-sub); white-space:nowrap; }
.od-keytxt b { font-weight:700; color:var(--c-text); }
.od-eta { display:block; margin-top:3px; font-size:11px; font-weight:400; color:var(--c-text-muted); white-space:nowrap; }
/* 조옮김 줄 : 장바구니와 같은 주황(조 색) 하나만. 원곡 바로 아래에 붙고 경계는 점선으로 옅게 — 한 묶음으로 읽히게 */
.od-row.is-t { background:#fffcf6; }
.od-row:has(+ .od-row.is-t) { border-bottom-style:dashed; }
.od-name .tx { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.od-name:has(.od-tbadge) { display:flex; align-items:center; gap:4px; }
.od-tbadge { flex:0 0 auto; display:inline-flex; align-items:center; margin-left:2px; padding:1px 6px 0; height:18px; box-sizing:border-box;
             border-radius:5px; background:var(--c-key-fg); color:#fff; font-size:10.5px; font-weight:700; line-height:1; white-space:nowrap; }

.od-kfrom { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:var(--r-sm);
            background:var(--c-key-bg); border:1px solid var(--c-key-line); color:var(--c-key-fg);
            font-size:13px; font-weight:700; white-space:nowrap; }
.od-kfrom .o { font-weight:400; color:#c59a55; }
.od-kfrom svg { display:block; color:#c59a55; }
.od-ktab { display:inline-block; margin-left:4px; padding:0 5px; border-radius:4px; background:#fff;
           border:1px solid var(--c-key-line); color:var(--c-key-fg); font-size:10.5px; line-height:16px; font-weight:700; }

/* ---------- 주문 정보 더보기 — 공용 .rd-more-btn(곡 상세 리뷰 더보기)을 그대로 ---------- */
.od-more { display:flex; justify-content:center; padding:14px 18px 16px; border-top:1px solid var(--c-divider); }
.od-more .rd-more-btn { display:inline-flex; align-items:center; gap:6px; }
.od-more .rd-more-btn b { color:var(--c-brand); }
.od-more .rd-more-btn svg { display:block; }

/* ---------- 결제 수단 ----------
   칸 = 그림(36px 둥근 사각) + 이름/보조 두 줄 + 오른쪽 위 체크. 고르면 파랑 테두리 · 연한 바닥 · 채운 체크 */
.od-pays { padding:2px 18px 18px; border-top:1px solid var(--c-border); }
.od-pgroup { padding-top:16px; }
.od-pgrid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.od-pay { position:relative; display:flex; align-items:center; gap:14px; min-height:76px; padding:14px 34px 14px 16px;
          border:1px solid var(--c-border-ctl2); border-radius:var(--r-lg); background:#fff; text-align:left; cursor:pointer;
          transition:border-color var(--t-base), background-color var(--t-base), box-shadow var(--t-base), transform var(--t-base); }
.od-pay:hover { border-color:var(--c-brand-border); box-shadow:0 4px 12px rgba(31,97,193,.08); transform:translateY(-1px); }
.od-pay .tx { display:flex; flex-direction:column; gap:3px; min-width:0; }
.od-pay .nm { font-size:14px; font-weight:700; color:var(--c-text); white-space:nowrap; }
.od-pay .sub { font-size:11.5px; color:var(--c-text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.od-pay .sub b { font-weight:700; color:var(--c-text-sub); font-variant-numeric:tabular-nums; }
.od-pay .ck { position:absolute; top:10px; right:10px; display:flex; align-items:center; justify-content:center;
              width:18px; height:18px; border-radius:50%; border:1.5px solid var(--c-border-ctl); background:#fff; color:transparent;
              transition:background-color var(--t-base), border-color var(--t-base); }
.od-pay .ck svg { display:block; width:10px; height:10px; }
.od-pay.on { border-color:var(--c-brand); background:var(--c-brand-50); box-shadow:0 0 0 1px var(--c-brand) inset; }
.od-pay.on:hover { transform:none; box-shadow:0 0 0 1px var(--c-brand) inset, 0 4px 12px rgba(31,97,193,.12); }
.od-pay.on .nm { color:var(--c-brand); }
.od-pay.on .sub b { color:var(--c-brand); }
.od-pay.on .ck { border-color:var(--c-brand); background:var(--c-brand); color:#fff; }
/* 못 고르는 수단(잔액 부족 · 금액 미달) — 누르면 옛 화면과 같은 알림으로 까닭을 알린다 */
.od-pay.is-off { background:#f9fafb; border-color:#eceef2; cursor:not-allowed; }
.od-pay.is-off:hover { transform:none; box-shadow:none; }
.od-pay.is-off .od-pic { filter:grayscale(1); opacity:.4; }
.od-pay.is-off .nm { color:var(--c-text-disabled); }
.od-pay.is-off .sub { color:var(--c-lv5-fg); }
.od-pay.is-off .sub b { color:inherit; }
.od-pay.is-off .ck { opacity:.4; }

/* 그림 : 타사는 공식 이미지 그대로(둥근 사각으로 잘라 보임), 자체 수단은 연한 파랑 바탕 선 아이콘 */
.od-pic { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
          border-radius:12px; overflow:hidden; }
.od-pic svg { display:block; width:24px; height:24px; }
.od-pic.is-img img { display:block; width:100%; height:100%; object-fit:cover; }
/* 흰 바탕 공식 아이콘(토스 · 알리페이)은 칸 바탕과 구분되게 가는 테두리 */
.od-pic.is-toss, .od-pic.is-alipay { position:relative; }
.od-pic.is-toss:after, .od-pic.is-alipay:after { content:""; position:absolute; inset:0; border-radius:inherit;
                                                 box-shadow:inset 0 0 0 1px #e5e8eb; pointer-events:none; }
.od-pic.is-line   { background:var(--c-brand-100); color:var(--c-brand); }

.od-desc { margin-top:16px; padding:14px 16px; border-radius:var(--r-md); background:var(--c-sunken2);
           border:1px solid #e9edf3; }
.od-desc .h { display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:13px; font-weight:700; color:var(--c-text); }
.od-desc .h .od-pic { width:28px; height:28px; border-radius:8px; }
.od-desc .h .od-pic svg { width:16px; height:16px; }
.od-desc ul { margin:0; padding:0 0 0 16px; }
.od-desc li { margin:0 0 4px; font-size:12.5px; line-height:1.6; color:var(--c-text-sub); }
.od-desc li:last-child { margin-bottom:0; }
.od-desc li b { color:var(--c-lv5-fg); }
.od-desc li a { color:var(--c-brand); font-weight:700; }

/* ---------- 오른쪽 결제 금액 : 장바구니 시안 B 결제 정보 ----------
   간격 넓힘(2026-09-30) : 머리 16/20 · 줄 사이 12 · TOTAL 위아래 16/18 · 좌우 20 — 장바구니 · 주문/결제 · 결제 완료 오른쪽 판 같은 값 */
.od-sum { position:sticky; top:74px; background:#fff; border:1px solid var(--c-border); border-radius:var(--r-card);
          box-shadow:var(--e-card); overflow:hidden; }
.od-sum .h { margin:0; padding:16px 20px; font-size:15px; font-weight:700; color:var(--c-text); border-bottom:1px solid var(--c-border); }
.od-sum dl { margin:0; padding:16px 20px 6px; }
.od-sum dl div { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 12px; font-size:13px; }
.od-sum dt { color:var(--c-text-sub); white-space:nowrap; }
.od-sum dd { margin:0; font-weight:700; color:var(--c-text); font-variant-numeric:tabular-nums; text-align:right; }
.od-sum dd.is-none { font-weight:400; color:var(--c-text-muted); }
.od-sum dd.is-pay { color:var(--c-brand); }
.od-sum .tot { display:flex; align-items:baseline; justify-content:space-between; margin:0 20px; padding:16px 0 18px;
               border-top:1px solid var(--c-divider); }
.od-sum .tot .lbl { font-size:12px; font-weight:700; color:var(--c-text-muted); letter-spacing:.04em; }
.od-sum .tot .num { font-size:24px; font-weight:700; color:var(--c-brand); font-variant-numeric:tabular-nums; }
.od-sum .tot .won { margin-left:2px; font-size:15px; font-weight:700; color:var(--c-text); }
.od-sum .sub { margin:-4px 20px 16px; padding:11px 14px; border-radius:var(--r-md); background:var(--c-sunken2); }
.od-sum .sub div { display:flex; justify-content:space-between; font-size:12px; color:var(--c-text-sub); }
.od-sum .sub div + div { margin-top:6px; }
.od-sum .sub b { font-variant-numeric:tabular-nums; color:var(--c-text); }

.od-agree { display:flex; align-items:flex-start; gap:8px; margin:0 20px 16px; font-size:12.5px; line-height:1.5;
            color:var(--c-text-sub); cursor:pointer; }
.od-cb { -webkit-appearance:none; -moz-appearance:none; appearance:none; margin:0; flex:0 0 auto;
         width:18px; height:18px; border:1.5px solid var(--c-rule); border-radius:var(--r-xs);
         background:#fff; opacity:.5; cursor:pointer; }
.od-cb:checked { opacity:1; background-color:var(--c-brand); border-color:var(--c-brand);
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.4l3.3 3.3L15 6.8' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:center; background-size:18px 18px; }
.od-buy { display:block; width:calc(100% - 40px); height:48px; margin:0 20px; padding:0 20px;
          border:1px solid var(--c-brand); border-radius:var(--r-md); background:var(--c-brand);
          font-size:15px; font-weight:700; color:#fff; cursor:pointer; white-space:nowrap; transition:background-color var(--t-base); }
.od-buy:hover { background:var(--c-brand-hover); border-color:var(--c-brand-hover); }
.od-sum .hint { margin:14px 20px 20px; font-size:12px; line-height:1.6; color:var(--c-text-muted); word-break:keep-all; }
.od-sum .hint b { color:var(--c-lv5-fg); font-weight:700; }

/* ---------- 빈 주문 ---------- */
.od-empty { padding:70px 20px; text-align:center; }
.od-empty p { margin:0 0 14px; font-size:14px; color:var(--c-text-sub); }
.od-btn { display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 18px;
          border:1px solid var(--c-border-ctl); border-radius:var(--r-md); background:#fff;
          font-size:13px; font-weight:700; color:var(--c-text-sub); }
.od-btn:hover { border-color:var(--c-brand); color:var(--c-brand); }
/* 아래 고정 구매바(약 69px)에 끝줄이 가리지 않게 바닥을 넉넉히 둔다 */
.al-wrap { width:1110px; margin:0 auto; padding:20px 0 40px; color:var(--c-text);
           font-size:13px; line-height:normal; box-sizing:border-box; }
.al-wrap *, .al-wrap *:before, .al-wrap *:after { box-sizing:border-box; }
.al-wrap a { text-decoration:none; color:inherit; }
.al-layout { display:flex; align-items:flex-start; gap:22px; }
.al-card { background:#fff; border:1px solid var(--c-border);
           border-top:2px solid var(--c-border); border-radius:var(--r-card); padding:20px;
           box-shadow:var(--e-card); overflow:hidden; min-height:0; flex:0 1 auto;
           display:flex; flex-direction:column; gap:16px; }
.al-cover { position:relative; width:100%; aspect-ratio:1 / 1; flex-shrink:0; background:var(--c-fill);
            border:1px solid var(--c-border); border-radius:var(--r-card); overflow:hidden; }
.al-cover > img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:block; }
.al-cover-title { margin:0; font-size:22px; font-weight:700; line-height:1.35; color:#fff;
                  text-shadow:0 1px 4px rgba(0,0,0,.55);
                  word-break:keep-all; overflow-wrap:break-word;
                  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
/* 검색용 '앨범 악보' 는 본문에 남기고 화면에서만 감춘다(폭도 차지하지 않게) */
.al-seo { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* 겉장 위 '앨범정보' 한 줄 — 카드 안쪽 여백(20) · 칸 사이(16)를 그대로 쓰고 위만 7 당긴다. 옛 뱃지(.al-kind) 대신 (OST 상세 .od-ctit 와 같다) */
.al-ctit { margin:-7px 0 -4px; font-size:18px; font-weight:700; line-height:1.3; color:var(--c-text); }
.al-main { flex:1 1 auto; min-width:0; }
.al-box { background:#fff; border:1px solid var(--c-border); border-radius:var(--r-card);
          box-shadow:var(--e-card); overflow:hidden; }
.al-head { display:flex; align-items:center; gap:8px; padding:16px 18px 14px; }
.al-head:before { content:""; width:3px; height:15px; border-radius:2px; background:var(--c-brand); flex:none; }
.al-head .t { font-size:16px; font-weight:700; color:var(--c-text); letter-spacing:-.01em;
              min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.al-head .n { display:inline-flex; align-items:center; height:20px; padding:0 8px; flex:none;
              border-radius:var(--r-pill); background:var(--c-brand-100);
              font-size:11.5px; font-weight:700; color:var(--c-brand); }
.al-head .s { margin-left:auto; flex:none; font-size:12px; color:var(--c-text-muted); }
/* 수록곡은 겉장 카드 안 아래쪽에 붙는다 — 카드 안쪽 여백을 되물려 줄이 카드 양끝 · 바닥까지 닿게 */
.al-trbox { flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
            margin:0 -20px -20px; border-top:1px solid var(--c-border); }
.al-trbox .al-head { flex:none; }
.al-trbox .al-head { padding:14px 18px 12px; }
/* 수록곡은 카드에 남는 높이를 채우고, 넘치면 칸 안에서 굴린다 */
.al-tracks { flex:1 1 auto; min-height:0; overflow-y:auto; border-top:1px solid var(--c-border); }
.al-tr { display:flex; align-items:center; gap:8px; min-height:54px; padding:8px 12px 8px 10px; background:#fff;
         border-bottom:1px solid var(--c-divider); cursor:pointer; transition:background-color var(--t-fast); }
.al-tr:last-child { border-bottom:0; }
.al-tr:hover { background:var(--c-brand-50); }
/* 지금 파트를 보고 있는 곡 */
.al-tr.is-on { background:var(--c-brand-150); box-shadow:inset 3px 0 0 var(--c-brand); }
.al-c-no   { width:24px;  flex:0 0 24px; text-align:center; font-size:12.5px; font-weight:700;
             color:var(--c-text-muted); font-variant-numeric:tabular-nums; }
.al-tr.is-on .al-c-no { color:var(--c-brand); }
/* 곡명 위 · 아티스트 아래 두 줄 */
.al-c-tit  { flex:1 1 0;  min-width:1px; display:flex; flex-direction:column; gap:2px; }
.al-name { display:block; font-size:13.5px; font-weight:700; color:var(--c-text);
           overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.al-tr.is-on .al-name { color:var(--c-brand); }
.al-art { display:block; align-self:flex-start; max-width:100%; font-size:12px; color:var(--c-text-sub); cursor:pointer;
          overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.al-wrap a.al-art:hover { color:var(--c-brand); text-decoration:underline; }
.al-art.is-none { color:var(--c-text-disabled); cursor:default; }
/* 곡 정보 단추 : MR 목록(.mr-info)과 같은 그림 · 같은 값 */
.al-info-btn { display:flex; align-items:center; justify-content:center;
               width:28px; height:28px; padding:0; border:0; border-radius:7px;
               background:transparent; color:var(--c-text-muted); cursor:pointer;
               transition:color var(--t-base), background-color var(--t-base); }
.al-info-btn:hover { color:var(--c-brand); background:var(--c-brand-50); }
.al-info-btn[disabled] { opacity:.4; cursor:default; }
.al-info-btn[disabled]:hover { color:var(--c-text-muted); background:transparent; }
.al-info-btn svg { display:block; }
.al-parts { padding-bottom:14px; scroll-margin-top:90px; }
/* 곡 머리 : 곡 정보(수록곡 번호 · 곡명 + 아티스트 한 줄) + 단추. 아래 알약 줄과는 가는 선으로 나눈다 */
.al-song { display:flex; align-items:center; gap:18px; margin:0 20px; padding:14px 0 12px;
           border-bottom:1px solid var(--c-border-soft); }
.al-song-tx { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.al-song-line { display:flex; align-items:baseline; gap:10px; max-width:100%; min-width:0; }
.al-song-lb { font-size:11.5px; font-weight:700; color:var(--c-brand); letter-spacing:.01em; }
.al-song-t { flex:0 1 auto; min-width:0; max-width:100%; margin:0; font-size:19px; font-weight:700; line-height:1.3; color:var(--c-text);
             letter-spacing:-.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.al-song-a { flex:0 1 auto; min-width:0; max-width:100%; font-size:14px; color:var(--c-text-sub); cursor:pointer;
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.al-wrap a.al-song-a:hover { color:var(--c-brand); text-decoration:underline; }
.al-song-a.is-none { color:var(--c-text-disabled); cursor:default; }
.al-song-act { flex:none; align-self:center; display:flex; gap:6px; }
.al-song-act .al-head-btn { margin-left:0; }
.al-head-btn { display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 12px; flex:none;
               margin-left:auto;
               border:1px solid var(--c-border-ctl); border-radius:var(--r-md); background:#fff;
               font-family:inherit; font-size:12.5px; font-weight:700; color:var(--c-text-sub);
               white-space:nowrap; cursor:pointer;
               transition:border-color var(--t-base), color var(--t-base), background-color var(--t-base); }
.al-wrap a.al-head-btn:hover { border-color:var(--c-brand); color:var(--c-brand); background:var(--c-brand-50); }
.al-head-btn svg { display:block; }
/* 분류 알약 (= .rd-topbar · .rd-pills · .rd-pill) */
.al-topbar { display:flex; align-items:center; justify-content:space-between; padding:14px 20px 16px; }
.al-pills { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.al-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:0;
           border-radius:var(--r-pill); background:var(--c-fill); cursor:pointer; font-weight:700;
           font-family:inherit; transition:background-color var(--t-base), color var(--t-base); }
.al-pill .n { font-size:13px; color:var(--c-text-sub); }
.al-pill .c { font-size:12px; color:var(--c-text-muted); }
.al-pill:hover { background:#e6e9ef; }
.al-pill.on { background:var(--c-brand); }
.al-pill.on:hover { background:var(--c-brand-hover); }
.al-pill.on .n { color:#fff; }
.al-pill.on .c { color:var(--c-brand-on); }
.al-thead { display:flex; align-items:flex-start; gap:8px; padding:12px 24px; background:var(--c-thead);
            border-top:1px solid var(--c-rule); border-bottom:2px solid var(--c-rule);
            font-size:13px; font-weight:700; color:var(--c-text-sub); }
.al-thead > * { white-space:nowrap; }
.al-sec-head { display:flex; align-items:center; justify-content:space-between; padding:8px 24px;
               background:var(--c-sechead); border-bottom:1px solid var(--c-rule); cursor:pointer;
               transition:background-color var(--t-base); }
.al-sec-head:hover { background:#e7eef9; }
.al-sec-head .l { display:flex; align-items:center; gap:12px; }
.al-sec-head .t { font-size:15px; font-weight:700; color:var(--c-text); }
.al-badge { min-width:22px; height:22px; flex:0 0 auto; padding:0 6px;
            border-radius:var(--r-pill); background:var(--c-brand);
            color:#fff; font-size:12px; font-weight:700; line-height:1;
            display:flex; align-items:center; justify-content:center; }
.al-collapse { width:24px; height:24px; flex:0 0 24px; display:flex; align-items:center; justify-content:center;
               background:#fff; border:1px solid var(--c-border); border-radius:var(--r-sm); }
.al-collapse svg { display:block; }
.al-collapse .plus { display:none; }
/* 줄 (= .rd-row) */
.al-row { display:flex; align-items:center; gap:8px; padding:6px 24px; background:#fff;
          border-bottom:1px solid var(--c-border); min-height:36px;
          transition:background-color var(--t-fast); }
.al-row.is-sub { min-height:32px; }
.al-row.is-pick { cursor:pointer; }
.al-row:hover { background:var(--c-brand-50); }
.al-row.is-on { background:var(--c-brand-150); }
.al-row.is-on:hover { background:#e3eefd; }
.al-row.is-on .al-p-part { font-weight:700; }
.al-row.is-on .al-p-price { color:var(--c-brand); }
/* 칸 (= .rd-c-part · -desc · -pages · -sample · -price · -sel) */
.al-p-part  { width:160px; flex:0 0 160px; font-size:13px; color:var(--c-text);
              overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.al-p-part.is-sub { color:var(--c-text-muted); }
.al-p-desc  { flex:1 1 0; min-width:1px; font-size:13px; color:var(--c-text-sub);
              overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.al-p-pages { width:62px; flex:0 0 62px; margin-left:6px; text-align:right;
              font-size:13px; color:var(--c-text-muted); font-variant-numeric:tabular-nums; }
.al-p-sample{ width:104px; flex:0 0 104px; display:flex; align-items:center; justify-content:flex-end; gap:4px; }
/* 80px : 10만 원대(120,000원 ≈ 76px)까지 '원' 이 다음 줄로 밀리지 않는 폭 (= 곡 상세 .rd-c-price) */
.al-p-price { width:80px; flex:0 0 80px; text-align:right;
              font-size:15px; font-weight:700; color:var(--c-text);
              font-variant-numeric:tabular-nums; }
.al-p-sel   { width:24px; flex:0 0 24px; display:flex; align-items:center; justify-content:flex-end; }
/* 조(Key) 태그 (= 곡 상세 .rd-keytag) */
.al-thead .al-p-sel    { text-align:right; }
.al-thead .al-p-price  { text-align:center; }
.al-thead .al-p-sample { justify-content:center; padding-left:41px; }
/* 샘플 단추 (= .rd-c-sample …) — 버튼 요소는 옛 것(btn_icon · btn_n)이고 그림은 아래 SVG 묶음.
   common.css 가 !important 를 쓰므로 여기서도 !important 가 필요하다.
   글자는 title 로 가른다 : '샘플보기' → 샘플, '…듣기' → 듣기, 동영상 → 영상, 없음 */
.al-p-sample .btn_icon,
.al-p-sample .btn_n { margin:0; vertical-align:middle; }
.al-p-sample .btn_icon,
.al-p-sample .btn_n.btn_video {
    display:inline-flex !important; align-items:center; justify-content:center;
    padding:0 !important; box-shadow:none;
    transition:background-color var(--t-base), border-color var(--t-base),
               box-shadow var(--t-base), color var(--t-base);
}
.al-p-sample .rd-ico { display:block; width:18px; height:18px; flex:none; }
.al-p-sample .btn_icon.btn_line_primary {
    width:auto; min-width:0 !important; height:28px !important; line-height:1 !important;
    padding:0 9px 0 7px !important; gap:5px;
    border-radius:var(--r-md) !important;
    font-size:11.5px; font-weight:700; letter-spacing:-.02em;
    color:#4575f5 !important;
    background-color:var(--c-brand-100) !important;
    border:1px solid rgba(69,117,245,.32) !important;
}
.al-p-sample .btn_icon[title="샘플보기"]:after { content:"샘플"; }
.al-p-sample .btn_icon[title*="듣기"]:after   { content:"듣기"; }
.al-p-sample .btn_icon.btn_line_primary:hover {
    color:var(--c-brand) !important;
    background-color:#dde8ff !important; border-color:#4575f5 !important;
    box-shadow:0 2px 6px 0 rgba(31,97,193,.16);
}
.al-p-sample .btn_icon.btn_line_primary:active { box-shadow:none; }
.al-p-sample button.btn_icon[disabled],
.al-p-sample button.btn_icon[disabled]:hover {
    color:var(--c-text-disabled) !important;
    background-color:var(--c-sunken3) !important; border-color:var(--c-divider2) !important;
    box-shadow:none; cursor:default;
}
.al-p-sample .btn_icon[disabled]:after { content:"없음"; }
.al-p-sample .btn_n.btn_video {
    width:auto !important; height:28px !important; line-height:1 !important;
    padding:0 9px 0 7px !important; gap:5px;
    border-radius:var(--r-md) !important;
    font-size:11.5px; font-weight:700; letter-spacing:-.02em;
    color:var(--c-video-fg) !important;
    background-color:var(--c-video-bg) !important;
    border:1px solid rgba(235,41,41,.3) !important;
}
.al-p-sample .btn_n.btn_video:after { content:"영상"; }
.al-p-sample .btn_n.btn_video:hover {
    color:var(--c-video-fg-h) !important;
    background-color:var(--c-video-bg-h) !important; border-color:var(--c-video-fg) !important;
    box-shadow:0 2px 6px 0 rgba(235,41,41,.16);
}
.al-cb { -webkit-appearance:none; -moz-appearance:none; appearance:none; margin:0;
         width:20px; height:20px; border:1.5px solid var(--c-rule); border-radius:var(--r-xs);
         background:#fff; opacity:.4; cursor:pointer; }
.al-cb:checked { opacity:1; background-color:var(--c-brand); border-color:var(--c-brand);
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.4l3.3 3.3L15 6.8' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:center; background-size:20px 20px; }
.al-cb:hover { opacity:.75; border-color:var(--c-brand); }
.al-cb:checked:hover { opacity:1; }
.al-empty { padding:60px 0; text-align:center; font-size:14px; color:var(--c-text-muted); }
/* MR 안내 : MR 이 있는 곡에만 */
.al-mrnote { display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; margin:0; padding:14px 18px;
             background:var(--c-sunken); border-top:1px solid var(--c-border); }
.al-mrnote li { display:flex; align-items:center; gap:7px; list-style:none; font-size:12px; color:var(--c-text-sub); }
.al-mrnote .tp { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
                 border-radius:var(--r-pill); background:var(--c-brand); font-size:11px; font-weight:700; color:#fff; }
.al-mrnote .note { width:100%; color:var(--c-text-muted); }
/* ---------- 하단 고정 구매바 : 곡 상세(.rd-bottombar)와 같은 틀 ----------
   우측 사이드바 폭(--sb-w)만큼 비켜 깔린다. 동작 id(part_price_view · bucket_in · wishStr)는 옛 화면 그대로 */
.al-bar { position:fixed; left:0; right:0; bottom:0; z-index:10;
          padding-right:var(--sb-w, 150px);
          background:rgba(255,255,255,.96); border-top:1px solid var(--c-border-ctl2);
          box-shadow:var(--e-bar); }
.al-bar-in { position:relative; width:1130px; margin:0 auto; padding:12px 10px;
             display:flex; align-items:center; justify-content:space-between; gap:16px; }
.al-bar a { text-decoration:none; }
/* 고정 구매바에 푸터 끝이 가리지 않게 페이지 맨 끝에 바 높이만큼 비워 둔다(본문 끝이 아니라 푸터 뒤) */
.al-bar-space { height:70px; }
.al-bar-list { display:inline-flex; align-items:center; gap:6px; height:44px; padding:0 20px;
               background:#fff; border:1px solid var(--c-border-ctl); border-radius:var(--r-md);
               font-size:15px; font-weight:700; color:var(--c-text-sub); cursor:pointer;
               transition:border-color var(--t-base), color var(--t-base); }
.al-bar-list:hover { border-color:var(--c-brand); color:var(--c-brand); }
.al-bar-list svg { display:block; }
.al-bar-r { display:flex; align-items:center; gap:20px; }
.al-total { display:flex; align-items:baseline; gap:8px; white-space:nowrap; }
.al-total .cnt { margin-right:4px; font-size:13px; color:var(--c-text-muted); }
.al-total .cnt b { color:var(--c-brand); font-weight:700; }
.al-total .lbl { font-size:12px; font-weight:700; color:var(--c-text-muted); letter-spacing:.04em; }
.al-total .num { font-size:24px; font-weight:700; color:var(--c-brand); font-variant-numeric:tabular-nums; }
.al-total .won { font-size:15px; font-weight:700; color:var(--c-text); }
.al-bar-btns { display:flex; align-items:center; gap:8px; }
.al-cart, .al-buy { height:44px; border-radius:var(--r-md); font-family:inherit; font-size:15px; font-weight:700;
                    cursor:pointer; transition:background-color var(--t-base), border-color var(--t-base); }
.al-cart { position:relative; padding:0 22px; background:#fff; border:1px solid var(--c-brand); color:var(--c-brand); }
.al-cart:hover { background:var(--c-brand-100); }
.al-buy  { padding:0 28px; background:var(--c-brand); border:1px solid var(--c-brand); color:#fff; }
.al-buy:hover { background:var(--c-brand-hover); border-color:var(--c-brand-hover); }
/* 담김 안내 말풍선은 공용 블록의 .rd-bb-toast 를 그대로 쓴다 */
.al-cart .rd-bb-toast #wishStr { color:#ffb3b3; }
.tm-toast { position:fixed; left:50%; bottom:110px; z-index:1200; transform:translate(-50%, 8px); opacity:0;
            padding:11px 18px; border-radius:var(--r-md); background:var(--c-inverse); color:#fff;
            font-size:13px; font-weight:700; white-space:nowrap; pointer-events:none;
            box-shadow:0 6px 18px rgba(16,22,35,.28); transition:opacity var(--t-move), transform var(--t-move); }
.tm-toast.is-on { opacity:1; transform:translate(-50%, 0); }
.tm-toast b { color:var(--c-star-soft); }
.tm-kbtn.is-in, .tm-kbtn.is-in:hover { background:var(--c-sunken); color:var(--c-text-muted); }
.tm-kbtn.is-in small { color:var(--c-key-fg); font-weight:700; }
.tm-dup { margin:0 0 0 auto; font-size:12px; font-weight:700; color:var(--c-lv5-fg); }
.tm-name .tx { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 같은 곡 다른 파트도 함께 조옮김 — 장바구니 .wl-sib* · .wl-cb 그대로 */
.tm-cb { -webkit-appearance:none; -moz-appearance:none; appearance:none; margin:0; flex:0 0 auto;
         width:20px; height:20px; border:1.5px solid var(--c-rule); border-radius:var(--r-xs);
         background:#fff; opacity:.4; cursor:pointer; }
.tm-cb:checked { opacity:1; background-color:var(--c-brand); border-color:var(--c-brand);
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.4l3.3 3.3L15 6.8' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:center; background-size:20px 20px; }
.tm-cb:hover { opacity:.75; border-color:var(--c-brand); }
.tm-cb:checked:hover { opacity:1; }
.tm-name { display:block; font-size:13px; font-weight:700; color:var(--c-text);
           overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-sub2 { display:block; margin-top:2px; font-size:12.5px; color:var(--c-text-sub);
           overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-del { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0;
          border:0; border-radius:var(--r-sm); background:transparent; color:var(--c-text-ghost); cursor:pointer;
          transition:background-color var(--t-base), color var(--t-base); }
.tm-del:hover { background:var(--c-fill); color:var(--c-text-sub); }
.tm-del svg { display:block; }
/* 일반 단추 */
.tm-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:34px; padding:0 14px;
          border:1px solid var(--c-border-ctl); border-radius:var(--r-md); background:#fff;
          font-size:13px; font-weight:700; color:var(--c-text-sub); cursor:pointer; white-space:nowrap;
          transition:border-color var(--t-base), color var(--t-base), background-color var(--t-base); }
.tm-btn:hover { border-color:var(--c-brand); color:var(--c-brand); }
.tm-btn.is-pri { border-color:var(--c-brand); background:var(--c-brand); color:#fff; }
.tm-btn.is-pri:hover { background:var(--c-brand-hover); border-color:var(--c-brand-hover); }
.tm-btn:disabled, .tm-btn:disabled:hover { border-color:var(--c-border-ctl2); background:var(--c-fill);
                                           color:var(--c-text-disabled); cursor:default; }
.tm-btn.sm { height:30px; padding:0 11px; font-size:12px; }
/* 신청 키 : 곡 상세 보기 전환(.rd-view-btn) 결 — 선택만 연한 파랑 */
.tm-keys { display:grid; grid-template-columns:repeat(12, 1fr); border:1px solid var(--c-border-ctl2);
           border-radius:var(--r-md); overflow:hidden; background:#fff; }
.tm-kbtn { height:40px; padding:0; border:0; background:#fff; font-size:13px; font-weight:700; color:var(--c-text);
           line-height:1.1; cursor:pointer; transition:background-color var(--t-base), color var(--t-base); }
.tm-kbtn + .tm-kbtn { border-left:1px solid var(--c-border-ctl2); }
.tm-kbtn small { display:block; margin-top:1px; font-size:10.5px; font-weight:400; color:var(--c-text-muted); }
.tm-kbtn:hover { background:#f7f8fa; }
.tm-kbtn.on { background:var(--c-brand-100); color:var(--c-brand); }
.tm-kbtn.on small { color:var(--c-brand); }
.tm-kbtn.is-base, .tm-kbtn.is-base:hover { background:var(--c-sunken); color:var(--c-text-disabled); cursor:default; }
.tm-kbtn.is-base small { color:var(--c-text-disabled); }
/* 원키 칸 — 반음 줄에서 찾기 쉽게 회색 바닥. 고르면 다른 칸과 같은 선택 색 */
.tm-kbtn.is-orig, .tm-kbtn.is-orig:hover { background:var(--c-fill); }
.tm-kbtn.is-orig.on { background:var(--c-brand-100); }
/* z-index : 헤더 · 오른쪽 사이드바(999 ~ 1001)까지 덮는다 */
.tm-modal { position:fixed; left:0; top:0; right:0; bottom:0; z-index:1100; display:flex; align-items:center;
            justify-content:safe center; padding:20px; overflow-x:auto; }
.tm-modal-dim { position:absolute; left:0; top:0; right:0; bottom:0; background:var(--c-dim-modal); }
/* 폭 고정 840 — 좁은 창에서도 줄지 않는다(PC 화면. 모자라면 딤 쪽이 가로로 스크롤) */
.tm-modal-box { position:relative; display:flex; flex-direction:column; flex:0 0 840px; width:840px;
                max-height:calc(100vh - 40px); background:#fff; border-radius:var(--r-modal);
                box-shadow:0 20px 50px rgba(16,22,35,.28); overflow:hidden; }
.tm-modal-h { display:flex; align-items:center; justify-content:space-between; padding:14px 18px 12px 22px;
              border-bottom:1px solid var(--c-border); }
.tm-modal-h .t { font-size:17px; font-weight:700; color:var(--c-text); }
.tm-modal-song { display:flex; align-items:center; gap:12px; padding:12px 22px; background:var(--c-thead);
                 border-bottom:1px solid var(--c-border); }
.tm-modal-song dl { display:flex; gap:18px; margin:0 0 0 auto; }
.tm-modal-song dl div { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.tm-modal-song dt { font-size:11.5px; color:var(--c-text-muted); }
.tm-modal-song dd { margin:0; font-size:13px; font-weight:700; color:var(--c-text); white-space:nowrap; }
/* 위에서 아래로 한 줄기 : ① 방법 → ② 키 → ③ 결과(악보 둘 나란히 · 문구) */
/* 스크롤바 자리를 늘 비워 둔다 — 방법에 따라 내용이 길어져 스크롤바가 생기면(윈도우 17px) 키 칸 · 악보 폭이 줄었다 늘었다 했다 */
.tm-modal-body { min-height:0; overflow:auto; scrollbar-gutter:stable; padding:18px 22px 20px; }
.tm-mres { padding:14px; background:#fcfdff; border:1px solid var(--c-border); border-radius:var(--r-md); }
.tm-mres .tm-vex { flex-direction:row; gap:10px; }
.tm-mres .tm-vex .pv { flex:1 1 0; min-width:0; }
/* 원키가 없으면 조옮김 악보 하나만 — 둘일 때와 같은 크기(절반 폭)로 둔다 */
.tm-mres .tm-vex .pv:only-child { flex:0 1 calc(50% - 5px); }
.tm-mres .tm-result { word-break:keep-all; }
/* 결과 판 공통(2026-10-07) : 미리보기 아래 구성음 안내 한 줄 · 결과 문구는 크게 */
.tm-mres .tm-vex-note { margin:8px 0 0; font-size:12px; line-height:1.55; color:var(--c-text-muted); word-break:keep-all; }
.tm-mres .tm-result:not(.is-empty) { font-size:15px; line-height:1.65; color:var(--c-text); }
.tm-mres .tm-result:not(.is-empty) strong { font-size:17px; }
.tm-modal-f { display:flex; align-items:center; gap:8px; padding:12px 22px; border-top:1px solid var(--c-border); }
.tm-modal-f .sum { flex:1 1 auto; font-size:13px; color:var(--c-text-sub); }
.tm-modal-f .sum b { font-size:17px; color:var(--c-text); font-variant-numeric:tabular-nums; }
.tm-modal-f .sum i { margin-left:10px; font-style:normal; font-size:12px; color:var(--c-text-muted); }
/* 완료 예정 : 금액 아래 줄에 — 날짜는 조(Key) 색 */
.tm-modal-f .sum .eta { display:block; margin-top:2px; font-size:14px; color:var(--c-text-sub); white-space:nowrap; }
.tm-modal-f .sum .eta b { margin-left:2px; font-size:15px; color:var(--c-key-fg); }
.tm-modal-tip { margin:0; padding:9px 22px 9px 36px; background:var(--c-thead); border-top:1px solid var(--c-border); }
.tm-modal-tip li { font-size:11.5px; line-height:1.6; color:var(--c-text-muted); list-style:disc; }
.tm-modal-f .tm-btn { height:40px; padding:0 18px; }
.tm-step + .tm-step { margin-top:20px; }
.tm-step-h { display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:14px; font-weight:700; color:var(--c-text); }
.tm-step-h .n { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
                border-radius:50%; background:var(--c-brand); color:#fff; font-size:11.5px; line-height:1; }
.tm-step-h i, .tm-sub-h i { margin-left:4px; font-style:normal; font-size:12px; font-weight:400; color:var(--c-text-muted); }
.tm-sub-h { margin:14px 0 6px; font-size:12.5px; font-weight:700; color:var(--c-text-sub); }
/* ④ 상담내역 : 옛 조옮김 신청 화면(CUS-02-02 #bmemo)과 같은 칸 · 같은 안내 문구 */
.tm-memo { display:block; width:100%; height:88px; padding:10px 12px; border:1px solid var(--c-border-ctl2); border-radius:var(--r-md);
           background:#fff; font-family:inherit; font-size:13px; line-height:1.6; color:var(--c-text); resize:none;
           transition:border-color var(--t-base); }
.tm-memo::placeholder { color:var(--c-text-muted); }
.tm-memo:hover { border-color:var(--c-brand-border); }
.tm-memo:focus { outline:0; border-color:var(--c-brand); }
.tm-memo-cnt { margin-left:auto; font-weight:400; font-size:11.5px; color:var(--c-text-muted); font-variant-numeric:tabular-nums; }
/* 요청사항 입력 : 말풍선 — 테두리 없는 옅은 파랑 판, 오른쪽 아래만 각지게 + 작은 꼬리(보내는 말풍선). 올리거나 치는 동안 한 단계 진하게 */
.tm-memo-bub { --bub:var(--c-brand-100); position:relative; margin-right:8px; }
.tm-memo-bub:hover { --bub:#e7f0fc; }
.tm-memo-bub:focus-within { --bub:#e1ebfb; }
.tm-memo-bub:after { content:""; position:absolute; right:-7px; bottom:0; width:12px; height:14px; background:var(--bub);
                      clip-path:polygon(0 0, 0 100%, 100% 100%); transition:background-color var(--t-base); }
.tm-memo-bub .tm-memo { border:0; border-radius:18px 18px 4px 18px; background:var(--bub); padding:11px 15px; line-height:1.6; resize:none;
                          transition:background-color var(--t-base); }
.tm-memo-bub .tm-memo:hover, .tm-memo-bub .tm-memo:focus { border:0; outline:0; }
/* 안내 글 : 입력칸과 같은 칸에 겹쳐 두고 글을 치면 감춘다(칸 높이는 안내 글에 맞춘다) */
/* 카포 활용 여부 : 세 칸 카드(제목 · 설명) */
.tm-capo-d, .tm-memo-d { margin:0 0 10px; font-size:13px; line-height:1.55; color:var(--c-text-sub); word-break:keep-all; }
.tm-capo-d b, .tm-memo-d b { font-weight:700; color:var(--c-text); }
.tm-capo { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.tm-capo button { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:12px 14px; border:1px solid var(--c-border-ctl2); border-radius:var(--r-md);
                  background:#fff; font-family:inherit; text-align:left; cursor:pointer; transition:border-color var(--t-base), background-color var(--t-base); }
.tm-capo button b { font-size:14px; font-weight:700; color:var(--c-text); }
.tm-capo button span { font-size:12px; line-height:1.45; color:var(--c-text-sub); white-space:nowrap; }
.tm-capo button:hover { border-color:var(--c-brand-border); }
.tm-capo button.on { border-color:var(--c-brand); background:var(--c-brand-100); box-shadow:inset 0 0 0 1px var(--c-brand); }
.tm-capo button.on b { color:var(--c-brand); }
.tm-memo-bub.has-ph { display:grid; }
.tm-memo-bub.has-ph > .tm-memo, .tm-memo-ph { grid-area:1/1; }
.tm-memo-bub.has-ph > .tm-memo { height:auto; min-height:88px; }
.tm-memo-ph { padding:11px 15px; font-size:13px; line-height:1.6; color:var(--c-text-muted); word-break:keep-all; pointer-events:none; }
.tm-memo-ph p { margin:0; }
.tm-memo-ph p + p { margin-top:1.6em; }
.tm-memo-ph b { font-weight:700; color:var(--c-text-sub); }
.tm-memo:not(:placeholder-shown) + .tm-memo-ph { visibility:hidden; }
/* ① 방법 : 네 칸 카드 */
.tm-tt { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.tm-tt button { display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:10px 12px;
                border:1px solid var(--c-border-ctl2); border-radius:var(--r-md); background:#fff; text-align:left; cursor:pointer;
                transition:border-color var(--t-base), background-color var(--t-base); }
.tm-tt button b { font-size:13.5px; color:var(--c-text); }
.tm-tt button span { font-size:11.5px; color:var(--c-text-muted); white-space:nowrap; }
.tm-tt button:hover { border-color:var(--c-brand-border); }
.tm-tt button.on { border-color:var(--c-brand); background:var(--c-brand-100); box-shadow:inset 0 0 0 1px var(--c-brand); }
.tm-tt button.on b { color:var(--c-brand); }
.tm-kstrip { display:flex; align-items:stretch; gap:6px; }
.tm-kstrip .tm-keys { flex:1 1 auto; }
.tm-kstep { flex:0 0 36px; border:1px solid var(--c-border-ctl2); border-radius:var(--r-md); background:#fff;
            font-size:18px; font-weight:700; color:var(--c-text-sub); cursor:pointer; }
.tm-kstep:hover { border-color:var(--c-brand); color:var(--c-brand); }
.tm-kstep:disabled { color:var(--c-text-disabled); cursor:default; border-color:var(--c-border-ctl2); }
.tm-keys.c5 { grid-template-columns:repeat(5, 1fr); }
.tm-keys.c4 { grid-template-columns:repeat(4, 1fr); }
.tm-keys.c4 .tm-kbtn { font-size:12.5px; }
/* 실음 키 머리 줄 (이조악기 안내는 선택 방법 아래 .tm-inote 상자로 옮겼다) */
.tm-sub-h { display:flex; align-items:center; }
/* 이조악기 안내 — [이조악기로] 를 고르면 선택 방법 탭 아래에 늘 보인다(예전에는 ⓘ 말풍선이라 놓치기 쉬웠다). 신청 페이지(CUS-02-02)와 같다.
   예시 줄은 고른 악기 · 실음 키를 따라 바뀌고, 그 값만 칩으로 띄운다 */
.tm-inote { margin:12px 0 0; padding:12px 14px; border-radius:var(--r-md); background:var(--c-sunken); border:1px solid var(--c-border-soft); }
.tm-inote .li { position:relative; margin:0; padding-left:12px; font-size:12.5px; line-height:1.65; color:var(--c-text-body); word-break:keep-all; }
.tm-inote .li + .li { margin-top:4px; }
.tm-inote .li:before { content:"*"; position:absolute; left:0; top:0; font-weight:700; color:var(--c-brand); }
.tm-inote .li b { font-weight:700; color:var(--c-text); }
.tm-inote .sub { display:block; margin-top:2px; font-size:12px; color:var(--c-text-sub); }
/* 예시 줄 : 판으로 묶지 않고 글씨로만 세운다 — 굵고 진하게 */
.tm-inote .ex { margin:8px 0 0; font-size:13px; font-weight:700; line-height:1.9; color:var(--c-text); word-break:keep-all; }
.tm-inote .ex .v { display:inline-block; min-width:20px; margin:0 2px; padding:0 5px; border-radius:var(--r-xs); background:#fff; border:1px solid var(--c-brand-border);
                   font-size:12px; font-weight:700; line-height:1.5; color:var(--c-brand); text-align:center; }
.tm-inote .ex .v.is-snd { border-color:var(--c-key-line); background:var(--c-key-bg); color:var(--c-key-fg); }
.tm-kbtn { height:46px; }
/* 조옮김 신청 모달(구입목록 · 장바구니) — 신청서 페이지(CUS-02-02-Redesign .tm-page-body)와 같은 모습.
   키 단추 : 키 이름 · 한글 조 이름 · 보조 줄. 모달은 칸이 좁아(약 51px) 한글 글자를 한 단계 작게 */
.tm-modal-body .tm-kbtn { height:auto; min-height:40px; padding:6px 0; line-height:1.25; }
.tm-modal-body .tm-kbtn .ko { display:block; margin-top:1px; font-style:normal; font-size:9.5px; font-weight:500; color:var(--c-text-sub); white-space:nowrap; letter-spacing:-.04em; }
.tm-modal-body .tm-kbtn.on .ko { color:var(--c-brand); }
.tm-modal-body .tm-kbtn.is-base .ko { color:inherit; }
/* 결과 판 : 왼쪽 오선 카드 둘(원키 | 조옮김, 온음표 하나) | 오른쪽 결과 문구 · 안내 */
.tm-modal-body .tm-mres.is-v { display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:center; }
.tm-modal-body .tm-mres.is-v .tm-vex { flex-direction:row; gap:8px; }
.tm-modal-body .tm-mres.is-v .tm-vex .pv { flex:none; width:200px; }
.tm-modal-body .tm-mres.is-v .tm-vex .s svg { aspect-ratio:auto; }
.tm-modal-body .tm-mres.is-v .tm-vex-msg { padding:24px 0; }
.tm-modal-body .tm-mres.is-v .tm-result { margin-top:0; padding:7px 12px; }
.tm-modal-body .tm-mres.is-v .tm-result:not(.is-empty) { font-size:13.5px; line-height:1.55; }
.tm-modal-body .tm-mres.is-v .tm-result:not(.is-empty) strong { font-size:14.5px; }
.tm-modal-body .tm-mres.is-v .tm-vex-note { margin-top:6px; font-size:11.5px; line-height:1.5; }
.tm-rrow { display:flex; align-items:center; gap:8px; }
.tm-rrow .hint { font-size:12px; color:var(--c-text-muted); }
.tm-rkeys { margin-top:10px; }
.tm-sel { height:32px; min-width:190px; padding:0 30px 0 12px; border:1px solid var(--c-border-ctl2); border-radius:var(--r-md);
          background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239ca2ae' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center;
          -webkit-appearance:none; appearance:none; font-size:12.5px; font-weight:700; color:var(--c-text-muted); cursor:pointer; }
.tm-sel:hover { border-color:var(--c-brand-border); }
.tm-sel.is-on { border-color:var(--c-brand); background-color:var(--c-brand-100); color:var(--c-brand); }
.tm-modal .tm-tseg button { height:30px; }
.tm-chs { display:flex; flex-wrap:wrap; gap:6px; }
.tm-ch { height:32px; padding:0 13px; border:1px solid var(--c-border-ctl2); border-radius:var(--r-pill); background:#fff;
         font-size:12.5px; font-weight:700; color:var(--c-text-sub); cursor:pointer; white-space:nowrap;
         transition:border-color var(--t-base), background-color var(--t-base), color var(--t-base); }
.tm-ch:hover { border-color:var(--c-brand-border); color:var(--c-brand); }
.tm-ch.on { border-color:var(--c-brand); background:var(--c-brand); color:#fff; }
/* ③ 결과 : 악보(원키 / 바뀐 키 위아래) + 옛 화면 결과 문구 */
.tm-vex { display:flex; flex-direction:column; gap:6px; }
.tm-vex .pv { padding:8px 10px 0; background:#fff; border:1px solid var(--c-border); border-radius:var(--r-md); }
.tm-vex .pv .l { display:flex; align-items:baseline; gap:6px; font-size:11.5px; color:var(--c-text-muted); }
.tm-vex .pv .l b { font-size:13px; color:var(--c-text); }
.tm-vex .pv.is-to { border-color:var(--c-key-line); background:#fffdf8; }
.tm-vex .pv.is-to .l b { color:var(--c-key-fg); }
.tm-vex .pv.is-empty .s { opacity:.3; }
/* [퍼블리싱 전용] 결과 오선 보기(음표 · 키) 파란 알약 스위치 — 결과 제목 줄 오른쪽 끝(신청서 · 장바구니 '조옮김 신청 결과', 조옮김 상세 '조옮김 정보'). 두 칸 폭은 같게 */
.tm-svsel { display:inline-flex; gap:2px; margin-left:auto; padding:2px; border-radius:var(--r-pill); background:var(--c-brand-100); box-shadow:inset 0 0 0 1px rgba(31,97,193,.22); }
.tm-svsel button { width:32px; height:18px; padding:0; border:0; border-radius:var(--r-pill); background:transparent; font-family:inherit; font-size:10.5px; font-weight:700; color:var(--c-brand); opacity:.6; cursor:pointer; transition:background-color var(--t-base), opacity var(--t-base); }
.tm-svsel button:hover { opacity:1; }
.tm-svsel button.on { background:var(--c-brand); color:#fff; opacity:1; box-shadow:0 1px 3px rgba(31,97,193,.3); }
/* 오선 크기 고정(STAFF_VB 488 × 144) — 카드 폭을 꽉 채우고 높이는 틀 비율대로(카드 316px 에서 약 93px) */
.tm-vex .s svg { display:block; width:100%; height:auto; aspect-ratio:488 / 144; }
.tm-vex .s { overflow:hidden; }
.tm-vex-msg { margin:0; padding:40px 0; text-align:center; font-size:12px; color:var(--c-text-muted); }
.tm-result { margin-top:10px; padding:12px 14px; border-radius:var(--r-md); background:var(--c-brand-100);
             font-size:13px; line-height:1.7; color:var(--c-text-body); }
.tm-result strong { color:var(--c-brand); }
.tm-result b { color:var(--c-text); }
.tm-result.is-empty { background:var(--c-fill); color:var(--c-text-muted); }
.tm-result.is-dup { background:var(--c-lv5-bg); }
.tm-result .tm-dup { margin:6px 0 0; }
.tm-tseg { display:inline-flex; border:1px solid var(--c-border-ctl2); border-radius:var(--r-md); overflow:hidden; background:#fff; }
.tm-tseg button + button { border-left:1px solid var(--c-border-ctl2); }
.tm-tseg button:hover { color:var(--c-text-sub); background:#f7f8fa; }
.tm-tseg button.on { background:var(--c-brand-100); color:var(--c-brand); }
/* 곡 단위 일괄 조옮김 : 같은 곡의 다른 파트 */
.tm-txtbtn { padding:0; border:0; background:none; font-size:12px; font-weight:700; color:var(--c-brand); cursor:pointer; }
.tm-txtbtn:hover { text-decoration:underline; }
.tm-sibbtn { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border:1px solid var(--c-border-ctl);
             border-radius:var(--r-md); background:#fff; font-size:12.5px; font-weight:700; color:var(--c-text-sub); cursor:pointer;
             transition:border-color var(--t-base), color var(--t-base), background-color var(--t-base); }
.tm-sibbtn svg { display:block; }
.tm-sibdd { position:relative; display:inline-flex; }
.tm-sibbtn .s { margin-left:2px; padding:2px 7px; border-radius:var(--r-pill); background:var(--c-key-bg); color:var(--c-key-fg); font-size:11.5px; }
.tm-sibbtn .ar { margin-left:2px; color:var(--c-text-muted); transition:transform var(--t-move); }
.tm-sibbtn:hover { border-color:var(--c-brand); color:var(--c-brand); }
.tm-sibbtn:disabled, .tm-sibbtn:disabled:hover { border-color:var(--c-border-ctl2); background:var(--c-fill); color:var(--c-text-disabled); cursor:default; }
.tm-sibbtn:disabled .ar { color:var(--c-text-disabled); }
.tm-sibbtn.is-open { border-color:var(--c-brand-border); background:var(--c-brand-50); color:var(--c-brand); }
.tm-sibbtn.is-open .ar { transform:rotate(180deg); }
/* 단추 위로 떠오르는 판 — 오른끝을 단추에 맞춘다 */
.tm-sibs { position:absolute; right:0; bottom:calc(100% + 8px); z-index:40; width:360px; padding:12px 14px; background:#fff;
           border:1px solid var(--c-border); border-radius:var(--r-md); box-shadow:0 10px 28px rgba(16,22,35,.18); text-align:left; }
.tm-sibs .h { display:flex; align-items:center; justify-content:space-between; margin:0 0 4px; font-size:12.5px; font-weight:700; color:var(--c-text-sub); }
.tm-sibs .h i { margin-left:6px; font-style:normal; font-weight:400; color:var(--c-text-muted); }
.tm-sib { display:flex; align-items:center; gap:8px; padding:5px 2px; font-size:13px; color:var(--c-text); cursor:pointer; }
.tm-sib .tm-cb { width:18px; height:18px; background-size:18px 18px; }
.tm-sib .k { font-size:12.5px; font-weight:700; color:var(--c-key-fg); }
.tm-sib .p { margin-left:auto; font-size:12.5px; color:var(--c-text-muted); font-variant-numeric:tabular-nums; }
.tm-sib.is-on .n { font-weight:700; }
.tm-sib.is-off { cursor:default; color:var(--c-text-muted); }
.tm-sib.is-off .k { color:var(--c-text-disabled); font-weight:400; }
.tm-modal-f .tm-sibbtn { height:40px; }
.pl-top-list { display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; }
.pl-top-card:hover { transform:translateY(-2px); box-shadow:0 8px 20px 0 rgba(20,32,56,.28); }
.pl-top-card:hover .bg { transform:scale(1.1); }
.pl-top-card .v { font-size:13px; font-weight:700; color:#fff;
                  text-shadow:0 1px 5px rgba(0,0,0,.7);
                  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl-top-card .k { font-size:11.5px; color:rgba(255,255,255,.8);
                  text-shadow:0 1px 4px rgba(0,0,0,.7);
                  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 표 머리에는 따로 테두리를 두르지 않는다 — 둥근 모서리에서 선이 끊겨 보인다.
   바탕색과 옅은 밑줄만으로 칸 이름줄임을 알린다. */
.pl-thead { display:flex; align-items:center; gap:10px; padding:11px 18px; background:var(--c-thead);
            border-bottom:1px solid var(--c-border);
            font-size:12.5px; font-weight:700; color:var(--c-text-sub); }
/* 칸 이름 정렬은 옛 화면(PAR-B-01 … PAR-C-01-All2)의 th 를 그대로 따른다 —
   민 th 는 가운데(곡명·구매·태그), th.tl 은 왼쪽(아티스트·앨범)이었다.
   칸 안의 글은 왼쪽에서 시작하므로 이름줄도 같은 자리에서 시작한다. */
.pl-thead > * { white-space:nowrap; text-align:center; }
.pl-thead .pl-c-art, .pl-thead .pl-c-alb { text-align:left; }
.pl-thead .pl-c-type { justify-content:center; }
.pl-c-art  { width:226px; flex:0 0 226px; }
.pl-c-alb  { width:200px; flex:0 0 200px; }
.pl-c-type { width:206px; flex:0 0 206px; display:flex; align-items:center; gap:3px; }
.pl-sub.link { cursor:pointer; }
.pl-t { display:inline-flex; align-items:center; justify-content:center;
        width:22px; height:22px; flex:0 0 22px; padding:0;
        border:1px solid #ebedf1; border-radius:var(--r-pill); background:#f7f8fa;
        font-family:inherit; font-size:11px; font-weight:700; line-height:1; color:var(--c-text-disabled); }
.pl-t.mr { width:30px; flex:0 0 30px; font-size:10px; }
.pl-t svg { display:block; }
.pl-legend li { display:flex; align-items:center; gap:7px; list-style:none;
                font-size:12px; color:var(--c-text-sub); }
.pl-legend .pl-t { cursor:default; }
/* 파트 배지 말풍선 (rd-ui.js) : 목록 상자가 overflow:hidden 이라 배지 곁이 아니라 body 에 하나만 띄운다 */
.rd-ptip { position:fixed; z-index:10000; transform:translate(-50%, calc(-100% - 8px));
           padding:6px 10px; border-radius:var(--r-md); background:var(--c-text); color:#fff;
           font-size:12px; font-weight:500; line-height:1.4; white-space:nowrap;
           pointer-events:none; opacity:0; visibility:hidden; transition:opacity var(--t-base); }
.rd-ptip.on { opacity:1; visibility:visible; }
/* 꼬리를 1px 겹쳐 사각형과 꼬리 사이 소수점 이음매(가는 선)를 없앤다 */
.rd-ptip:after { content:""; position:absolute; left:50%; top:100%; margin:-1px 0 0 -5px;
                 border:5px solid transparent; border-top-color:var(--c-text); }
.pl-head { display:flex; align-items:center; gap:14px; margin:0; }
.pl-head-r { margin-left:auto; flex-shrink:0; display:flex; align-items:center; gap:8px; }
.pl-btn { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px;
          border:1px solid var(--c-border-ctl); border-radius:var(--r-md); background:#fff;
          font-family:inherit; font-size:12.5px; font-weight:700; color:var(--c-text-sub);
          white-space:nowrap; cursor:pointer;
          transition:border-color var(--t-base), color var(--t-base), background-color var(--t-base); }
.pl-btn:hover { border-color:var(--c-brand); color:var(--c-brand); background:var(--c-brand-50); }
.pl-btn svg { display:block; flex:none; }
.pl-pill:hover { background:#e6e9ef; }
.pl-pill.on { background:var(--c-brand); color:#fff; }
.pl-pill.on:hover { background:var(--c-brand-hover); }
.pl-more { margin:12px 0 0; text-align:center; font-size:12.5px; color:var(--c-text-muted); }
.pl-more b { color:var(--c-brand); }
.pl-page { display:flex; align-items:center; justify-content:center; gap:4px; margin:22px 0 0; }
.pl-page a, .pl-page strong { display:inline-flex; align-items:center; justify-content:center;
                              min-width:34px; height:34px; padding:0 6px; border-radius:var(--r-md);
                              font-size:13px; font-weight:700; }
.pl-page a:hover { border-color:var(--c-brand); color:var(--c-brand); background:var(--c-brand-50); }
.pl-page strong { color:#fff; background:var(--c-brand); border:1px solid var(--c-brand); }
.pl-page .off { color:var(--c-text-disabled); background:#f7f8fa; border-color:var(--c-border); cursor:default; }
.pl-page svg { display:block; }