/* ==========================================================================
   메인 작업물 섹션 보조 스타일 (theme/basic/css/works.css)
   main.css 뒤에 불러옵니다. (같은 선택자는 이 파일이 우선)
   ========================================================================== */

/* 분류 탭 */
.sr-wtab { min-height: 44px; padding: 0 22px; background: var(--sr-chip); color: var(--sr-ink); font-size: 15px; font-weight: 700; text-transform: uppercase; }
.sr-wtab.is-active { background: var(--sr-dark); color: var(--sr-lime); }

/* 목록 */
.sr-works { transition: opacity 0.15s; }
.sr-works.is-loading { opacity: 0.45; }

.sr-works__link,
.sr-works__link:hover { display: block; color: var(--sr-ink); }
.sr-works__link:hover .sr-works__name { color: var(--sr-green); }

/* 썸네일 비율은 PHP 의 SR_WORKS_THUMB_W / H 값을 따른다 */
.sr-works__thumb { height: auto; aspect-ratio: var(--sr-works-ratio, 1 / 1); }
.sr-works__tag { padding: 4px 10px; background: rgba(6, 15, 10, 0.72); }

.sr-works__empty { grid-column: 1 / -1; padding: 64px 0; text-align: center; font-size: 16px; color: var(--sr-muted); }

.sr-works__more { margin-top: 40px; text-align: center; }

@media (max-width: 767px) {
    .sr-works__more { margin-top: 28px; }
    .sr-works__more .sr-btn { width: 100%; }
}