/* ============================================================================
   악보바다 리디자인 — 곡정보 (곡정보 단추 · 미리듣기 판 · 곡정보 시트)

   rd-common.css 에서 떼어 낸 세 덩어리다. 이유는 <b>간편 화면</b> 이다 —
   간편(.ep- · .eh-)은 rd-common.css 가 닿지 않아(리디자인 스코프 안에서만 걸린다)
   그 27KB 를 싣지 않기로 해 둔 화면인데, 곡정보 단추와 그것이 여는 시트는
   거기서도 써야 한다. 큰 파일을 통째로 싣는 대신 이만큼만 따로 둔다.

   값은 rd-tokens.css 를 본다 — 그 파일이 먼저 실려 있어야 한다
   (공통 머리 /m/headerM.html 이 모든 화면에 싣는다).

   싣는 곳
     일반 화면 : rd-assets.jspf 가 함께 싣는다
     간편 화면 : 화면이 이 파일만 따로 싣는다
   둘 다 rd-ui.js 가 있어야 돈다(rdSongInfo · rdPreviewBind).
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. 곡정보 단추 — 목록 한 줄 오른쪽 끝에 서는 아이콘

   웹(파트 목록 .pl-info · 검색 .sr-info · MR .mr-info)에 있던 것을 모바일 목록에도
   세운다. 웹은 겉장 바로 오른쪽이지만 모바일은 <b>줄 끝</b>이다 — 좁은 화면에서
   겉장 옆에 끼우면 곡명이 그만큼 줄고, 레거시 모바일 목록도 그 자리(play_btn)에
   두어 손이 이미 그쪽을 안다.

   테는 두르지 않는다. 회색 테가 있으면 눈이 테를 먼저 읽어 그림이 늦게 들어온다
   (웹 .pl-info 가 같은 이유로 테를 뺐다). 손가락 자리는 38px 로 잡는다.
   --------------------------------------------------------------------------- */
.pm-info, .mrm-info, .srm-info, .ep-info {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0; border: 0; border-radius: var(--r-lg);
    background: transparent; color: var(--c-text-muted); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--t-base), background-color var(--t-base);
}
/* 간편은 손가락 자리도 그림도 한 치수 크다 — 이 화면은 모든 것이 그렇게 서 있다.
   그림 크기는 여기서 정한다 - 마크업에 박힌 width/height 보다 CSS 가 이긴다 */
.ep-info { width: 54px; height: 54px; border-radius: var(--r-card); }
.ep-info svg { width: 29px; height: 29px; }
.pm-info svg, .mrm-info svg, .srm-info svg, .ep-info svg { display: block; }

.pm-info:active, .mrm-info:active, .srm-info:active, .ep-info:active {
    color: var(--c-brand); background: var(--c-brand-100);
}
/* 들려줄 것도 보여 줄 것도 없는 곡. 자리는 남긴다 — 줄마다 있다 없다 하면
   오른쪽 끝이 들쭉날쭉해 훑기가 어렵다 */
.pm-info[disabled], .mrm-info[disabled], .srm-info[disabled], .ep-info[disabled] {
    color: var(--c-text-disabled); cursor: default;
}
.pm-info[disabled]:active, .mrm-info[disabled]:active,
.srm-info[disabled]:active, .ep-info[disabled]:active { background: transparent; }

/* ---------------------------------------------------------------------------
   2. 미리듣기 — 원음 1분

   원본 샘플 음원은 1분보다 길다. 끊는 것은 화면 몫이라 웹 상세(.rd-player)와 같은
   규칙을 둔다 — 60초에서 멈추고 처음으로 되감으며, 끝 3초는 소리를 줄이며 닫는다.
   1분보다 짧은 샘플은 제 길이대로 들려준다.

   판이 서는 곳은 곡정보 시트 하나다 : 목록의 곡정보 아이콘, 곡 상세 히어로의 단추가 연다.
   동작은 rd-ui.js 의 rdPreviewBind 하나가 맡는다.
   --------------------------------------------------------------------------- */
.rd-pv {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 13px; background: var(--c-sunken2);
    border: 1px solid #e9edf3; border-radius: var(--r-lg);
}
.rd-pv-play {
    flex: 0 0 38px; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-brand); color: #fff; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--t-base);
}
.rd-pv-play:active { background: var(--c-brand-hover); }
.rd-pv-play svg { display: block; }
/* 재생 중에는 ▶ 를 감추고 ❚❚ 를 낸다 — 아이콘 둘을 겹쳐 두지 않고 자리만 바꾼다 */
.rd-pv-play .ic-pause { display: none; }
.rd-pv.is-play .rd-pv-play .ic-play  { display: none; }
.rd-pv.is-play .rd-pv-play .ic-pause { display: block; }
/* 눌러 놓고 아직 소리가 안 나는 사이 */
.rd-pv.is-wait .rd-pv-play { opacity: .55; }

.rd-pv-bar {
    flex: 1 1 auto; min-width: 1px; height: 5px; border-radius: 3px;
    background: var(--c-border-ctl); overflow: hidden; cursor: pointer;
}
.rd-pv-fill { display: block; width: 0; height: 5px; border-radius: 3px; background: var(--c-brand); }
.rd-pv-time {
    flex: 0 0 auto; font-size: 11.5px; color: var(--c-text-sub);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* 샘플 음원이 없는 곡 */
.rd-pv.is-none { background: var(--c-sunken3); }
.rd-pv.is-none .rd-pv-play { background: var(--c-text-disabled); cursor: default; }
.rd-pv.is-none .rd-pv-bar  { cursor: default; }
.rd-pv-none {
    flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--c-text-muted);
}

/* ---------------------------------------------------------------------------
   3. 곡정보 모달 — 목록에서 곡정보 아이콘을 누르면 뜨는 시트

   목록을 떠나지 않는다. '더 보기' 로 스무 곡씩 이어 붙인 화면이라 다른 쪽으로
   보냈다가 돌아오면 보던 자리를 통째로 잃는다.

   마크업은 rd-ui.js 가 처음 열릴 때 한 번만 만들어 body 끝에 붙인다 — 화면 JSP 는
   단추만 두면 된다.
   --------------------------------------------------------------------------- */
.rdsi-dim {
    position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 80;
    background: var(--c-dim); opacity: 0; transition: opacity var(--t-base);
    /* 곱 상세 시트(.mo-dim)와 같은 막음 - 덮개 위에서 쓸어도 뒤 화면이 굴러가지 않는다 */
    touch-action: none; overscroll-behavior: contain;
}
.rdsi-dim.is-on { opacity: 1; }

.rdsi {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 81;
    display: flex; flex-direction: column; max-height: 86vh;
    background: var(--c-surface); box-shadow: var(--e-pop);
    border-radius: var(--r-sheet) var(--r-sheet) 0 0;
    transform: translateY(100%); transition: transform var(--t-sheet);
    overscroll-behavior: contain;
}
.rdsi.is-on { transform: translateY(0); }

/* 손잡이. 잡고 내리면 시트가 따라가고, 많이 내리면 기금 닫힌다(rd-ui.js).
   막대만 보이고 짚는 자리는 줄 전체다 - 손가락으로 40px 막대를 겨누는 것은 어렵다.
   touch-action 을 끕어 두지 않으면 브라우저가 먼저 굴려 끌어도 시트가 가만히 있다 */
.rdsi-grip { flex: 0 0 auto; padding: 13px 0 9px; text-align: center; }
/* 잡는 자리는 막대만이 아니라 <b>시트 머리 전체</b> 다 - 막대 줄만으로는 손가락으로
   겨눌 수가 없다(20px 띠인 데다, 앱 웹뷰는 390 기준으로 한 번 더 줄여 그린다).
   조금만 위를 짚으면 덮개라 그냥 닫히고, 조금만 아래를 짚으면 곡명 줄이라 아무 일도
   없었다 - 마우스로는 되고 손가락으로는 안 되던 자리다.
   touch-action 을 꺼 두어야 브라우저가 스크롤을 먼저 채 가지 않는다.
   닫기(X)만은 제 일을 하도록 비켜 준다(rd-ui.js 가 거른다) */
.rdsi-grip, .rdsi-head {
    cursor: grab; touch-action: none;
    -webkit-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.rdsi-grip:active, .rdsi-head:active { cursor: grabbing; }
.rdsi-x { cursor: pointer; }
.rdsi-grip:after {
    content: ""; display: inline-block; width: 40px; height: 4px;
    border-radius: 2px; background: var(--c-border-ctl2);
    transition: background-color var(--t-base);
}
.rdsi-grip:active:after { background: var(--c-text-muted); }
/* 끌고 있는 동안은 손가락을 그대로 따라야 한다 - 사이에 드는 애니메이션은 끊김으로 읽힌다 */
.rdsi.is-drag { transition: none; }

/* 머리 : 겉장 · 곡명 · 아티스트 · 닫기 */
.rdsi-head {
    flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
    padding: 10px var(--gut) 12px; border-bottom: 1px solid var(--c-divider);
}
.rdsi-th {
    flex: 0 0 56px; width: 56px; height: 56px; border-radius: var(--r-lg); overflow: hidden;
    border: 1px solid var(--c-border-m); background: var(--c-fill);
}
.rdsi-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rdsi-tx { flex: 1 1 auto; min-width: 0; }
.rdsi-tx .v {
    display: block; font-size: 15.5px; font-weight: 700; color: var(--c-text-title);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rdsi-tx .k {
    display: block; margin-top: 3px; font-size: 12.5px; color: var(--c-text-sub);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rdsi-x {
    flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    background: transparent; color: var(--c-text-muted); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.rdsi-x:active { background: var(--c-fill); }

.rdsi-pv { flex: 0 0 auto; padding: 12px var(--gut); }

/* 가사 : 여기만 굴린다. 시트 밖으로 스크롤이 새지 않도록 막는다 */
.rdsi-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--gut) calc(18px + env(safe-area-inset-bottom));
}
.rdsi-lb { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--c-text-muted); }
.rdsi-lyric {
    margin: 0; padding: 14px; background: var(--c-sunken);
    border: 1px solid var(--c-border-soft); border-radius: var(--r-lg);
    font-family: inherit; font-size: 13.5px; line-height: 1.9; color: var(--c-text-review);
    white-space: pre-line; word-break: break-word;
}
.rdsi-msg { padding: 26px 0; text-align: center; font-size: 13px; color: var(--c-text-muted); }

/* 화면이 넓으면 아래에 붙이지 않고 가운데 뜬 창으로 세운다 */
@media (min-width: 720px) {
    .rdsi {
        left: 50%; right: auto; bottom: auto; top: 50%; width: 460px; max-height: 78vh;
        border-radius: var(--r-modal);
        transform: translate(-50%, -46%) scale(.97);
        opacity: 0; transition: transform var(--t-move), opacity var(--t-move);
    }
    .rdsi.is-on { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    .rdsi-grip { display: none; }
    /* 가운데 뜼는 창은 끜는 것이 아니다 - 잡는 손짓을 되돌린다 */
    .rdsi-head { padding-top: 14px; cursor: default; touch-action: auto; }
    .rdsi-head:active { cursor: default; }
}

/* 시트가 떠 있는 동안 뒤 화면은 굴리지 않는다 */
body.rdsi-open { overflow: hidden; }