/* static/css/components/score_detail.css */

/* --- 1. 전체 컨테이너 배경 및 레이아웃 --- */
.content-container.score-detail-container {
    padding: 0;
    /* 스크롤은 여기서 직접 처리하지 않음 (부모인 layout.css에서 제어) */
}
.score-detail-container .content-wrapper {
    padding: 0;
    /* 높이를 100%로 명시하여 상속 체인 연결 */
    height: 100%;
}
#detail-content-wrapper {
    width: 100%;
    /* 높이를 100%로 명시하여 상속 체인 연결 */
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* --- 2. 악보 및 가사 보기 영역 --- */
.score-view-area,
.lyrics-view-area {
    /* detail-content-wrapper 안에서 남은 공간을 차지하도록 flex-grow 설정 */
    flex-grow: 1;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
}

/* score-view-area를 flex 컨테이너로 만들어 내부의 a 태그를 중앙 정렬 */
.score-view-area {
    display: flex;
    justify-content: center;
    align-items: center;
}
.lyrics-view-area {
    display: none;
    overflow-y: auto; /* 가사 영역만 자체 스크롤을 가짐 */
}

/* object-fit: contain이 올바르게 작동하려면, 부모(.pswp-gallery-item)의 크기가 확정되어야 함 */
.sheet-image-preview { max-width: 100%; max-height: 100%; object-fit: contain; }

.pswp-gallery-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}
.lyrics-view-area {
    color: var(--color-text-primary);
    white-space: pre-wrap;
    font-family: 'Noto Sans KR', 'inter', sans-serif;
    font-size: 20px;
    line-height: 2;
    text-align: center;
    padding: 24px;
}
.lyrics-view-area .lyrics-content-wrapper { margin: 0; }

/* --- 3. 하단 컨트롤 영역 (플레이어 등) --- */
.score-bottom-controls {
    flex-shrink: 0;
    background-color: rgba(250, 250, 250, 0.8);
    backdrop-filter: blur(5px);
    border-top: 0px solid #444;
}
.audio-player-container {
    padding: 12px 16px; box-sizing: border-box;
    max-width: var(--content-max-width); margin: 0 auto;
}
.audio-player-container audio { width: 100%; height: 36px; }
.no-content-message { text-align: center; padding: 40px 20px; color: #888; }