/* static/css/components/detail_layout.css */
/* 역할: 여러 앱의 상세 페이지(detail)에서 공통으로 사용하는 레이아웃, 특히 하단 버튼 영역의 표준 스타일을 정의합니다. */

/* --- 1. [삭제] 앱 고유 스타일 제거 --- */
/*
  .score-area, .pswp-gallery-item, .sheet-image-preview 등은
  hymns, ccm 앱의 악보 상세 페이지에만 해당하는 고유 스타일입니다.
  이러한 스타일은 각 앱의 전용 CSS 파일(예: score_detail.css)에서 관리하도록 이관합니다.
  이 파일은 모든 상세 페이지에 적용될 수 있는 범용 레이아웃만 다룹니다.
*/


/* --- 2. 하단 고정 버튼 영역 (Bottom Buttons Area) --- */
/*
  이 컴포넌트는 bible, hymns, ccm 앱의 상세 페이지 하단에 위치하는
  '이전/목록/다음'과 같은 네비게이션 버튼 바의 표준 스타일입니다.
*/

/* 2-1. 버튼 영역의 전체 배경 및 위치 (Wrapper) */
/* 이 컨테이너는 화면 하단에 고정되거나, 컨텐츠의 끝에 위치할 수 있습니다. */
.detail-bottom-buttons {
    flex-shrink: 0; /* flex 컨테이너 내에서 줄어들지 않도록 설정 */
    width: 100%;
    height: var(--button-area-height, 48px);
    background-color: var(--color-content-bg); /* [수정] 투명도 제거, 기본 배경색 사용 */
    border-top: 1px solid var(--color-border);
    z-index: 990; /* 다른 요소 위에 표시되도록 z-index 설정 */
    box-sizing: border-box;
}

/* 2-2. 실제 버튼들을 감싸는 내부 컨테이너 (Inner Container) */
/* 이 컨테이너는 버튼들을 중앙 콘텐츠 너비(400px)에 맞춰 정렬하는 역할을 합니다. */
.detail-bottom-buttons-inner {
    width: 100%;
    height: 100%;
    max-width: var(--content-max-width); /* 중앙 콘텐츠 너비와 동일하게 제한 */
    margin: 0 auto; /* 수평 중앙 정렬 */
    display: flex; /* 내부 버튼들을 flex로 정렬 */
}

/* 2-3. 개별 네비게이션 버튼 (Navigation Button) */
.detail-bottom-buttons-inner .nav-button {
    flex: 1; /* 모든 버튼이 동일한 너비를 갖도록 설정 */
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: var(--color-text-primary);
    font-size: 15px;
    font-weight: 500;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s;
}

.detail-bottom-buttons-inner .nav-button:hover {
    background-color: var(--color-hover-bg);
}

/* 버튼 사이의 구분선 */
.detail-bottom-buttons-inner .nav-button + .nav-button {
    border-left: 1px solid var(--color-border);
}

/* 비활성화 상태의 버튼 */
.detail-bottom-buttons-inner .nav-button.disabled {
    color: var(--color-text-secondary);
    opacity: 0.5; /* [수정] 가독성을 위해 투명도 살짝 조정 */
    pointer-events: none;
    background-color: transparent; /* 호버 효과 제거 */
}