/* hymns/static/hymns/css/hymns_styles.css */
/* 역할: hymns 앱의 템플릿에서만 사용되는 고유 스타일을 정의합니다. */

[data-current-app="hymns"] .list-page-container {
    padding: 0 4px;
}

[data-current-app="hymns"] .no-content-message {
    text-align: center; padding: 40px 20px;
    color: var(--color-text-secondary);
}

[data-current-app="hymns"] input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

[data-current-app="hymns"] .search-sort-form .search-button {
    color: var(--color-text-secondary);
    font-size: 16px;
}

[data-current-app="hymns"] .clear-search-btn {
    display: block;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--color-primary);
}

[data-current-app="hymns"] .cancel-search-btn {
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-primary);
    text-decoration: none;
}

/* [수정] 찬송가 목록의 카테고리 헤더는 검색창(61px) 아래에 고정되어야 함 */
[data-current-app="hymns"] .category-header {
    position: sticky;
    top: calc(var(--header-height) + 61px);
    background-color: var(--color-content-bg);
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    /* margin: 0 -16px; /* list-page-container의 패딩을 무시하고 꽉 채움 */
    border-bottom: 0px solid var(--color-border);
    z-index: 940;
}

[data-current-app="hymns"] .score-view-area,
[data-current-app="hymns"] .lyrics-view-area {
    display: none;
}
[data-current-app="hymns"] .score-view-area.active {
    display: flex;
}
[data-current-app="hymns"] .lyrics-view-area.active {
    display: block;
}