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

/* --- 목록 페이지 고유 스타일 (ccm_list.html) --- */

/* 브라우저 기본 'X' 버튼 숨기기 */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* 검색 버튼 아이콘 스타일 */
.search-sort-form .search-button {
    color: var(--color-text-secondary);
    font-size: 16px;
}

/* 'X' 아이콘 버튼 스타일 */
.clear-search-btn {
    display: block;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    text-decoration: none;
    cursor: pointer;
    font-size: 20px;
    color: var(--color-primary);
}

/* '취소' 버튼 스타일 */
.cancel-search-btn {
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-primary);
    text-decoration: none;
}

/* '오늘의 악보' 목록 아이템 액션 버튼 색상 */
.list-action-button i.fa-check-circle {
    color: var(--color-primary);
}
.remove-button i {
    color: #e67e22;
}

/* 기타 메시지 스타일 */
.no-content-message {
    text-align: center; padding: 40px 20px;
    color: var(--color-text-secondary);
}

/* 정렬 버튼 폰트 색상 강제 지정 */
.sort-select {
    color: var(--color-text-primary) !important;
}

/* 드래그 앤 드롭 핸들 스타일 */
.drag-handle {
    cursor: grab;
    color: var(--color-text-tertiary);
    padding: 0 8px; /* 터치 영역 확보 */
    touch-action: none; /* 모바일에서 스크롤 대신 드래그가 되도록 설정 */
    user-select: none; /* [핵심 수정] 드래그 시 텍스트가 선택되는 것을 방지합니다. */
    -webkit-user-select: none; /* Safari 호환성 */
}

.drag-handle:active {
    cursor: grabbing;
}

/* SortableJS가 생성하는 드래그 중인 아이템 스타일 */
.sortable-ghost {
    opacity: 0.4;
    background: #c8ebfb;
}

.sortable-drag {
    opacity: 1 !important;
}