/* ===== 포트폴리오 전체보기 페이지 (works/list.php) ===== */
.wl-section {background: #0a0a0a;padding: 160px 24px 120px;color: #fff;min-height: 70vh;}
.wl-inner {max-width: 1600px;margin: 0 auto;}

/* ---- 히어로 ---- */
.wl-hero {margin-bottom: 56px;}
.wl-eyebrow {display: flex;align-items: center;gap: 10px;margin-bottom: 24px;}
.wl-dot {width: 8px;height: 8px;background: var(--color-green);border-radius: 50%;display: inline-block;}
.wl-eyebrow span:last-child {font-size: 13px;letter-spacing: .14em;color: var(--color-green);font-weight: 700;text-transform: uppercase;}
.wl-title {font-size: var(--title-size);line-height: 1.2;font-weight: 800;letter-spacing: -0.02em;margin: 0 0 20px;}
.wl-desc {font-size: 16px;line-height: 1.7;color: #9a9a9a;margin: 0;max-width: 560px;}
.wl-count-num {color: var(--color-green);font-weight: 700;}

/* ---- 필터 영역 ---- */
.wl-filters {border: 1px solid #222;background: #101010;padding: 28px 28px 32px;margin-bottom: 32px;}
.wl-filter-row {display: flex;flex-wrap: wrap;gap: 10px;}

.wl-tab-btn {padding: 10px 20px;border: 1px solid #333;background: transparent;color: #9a9a9a;font-size: 14px;font-weight: 700;cursor: pointer;transition: border-color .2s ease, color .2s ease, background .2s ease;}
.wl-tab-btn:hover {border-color: #555;color: #fff;}
.wl-tab-btn.is-active {background: var(--color-green);border-color: var(--color-green);color: #0a0a0a;}

/* ---- 결과 카운트 ---- */
.wl-result-bar {font-size: 14px;color: #9a9a9a;margin-bottom: 24px;}
.wl-result-bar strong {color: #fff;font-weight: 800;}

/* ---- 그리드 (as-works-grid/card 스타일 재사용) ---- */
.wl-grid {margin-bottom: 0;}

/* ---- 빈 결과 ---- */
.wl-empty {text-align: center;padding: 100px 20px;color: #666;font-size: 15px;line-height: 1.8;}

/* ===== 반응형 ===== */
@media (max-width: 1024px) {
  .wl-section {padding: var(--area-sapce);}
  .wl-filters {padding: 22px 20px 26px;}
}

@media (max-width: 640px) {
  .wl-title {font-size: var(--title-size);}
  .wl-filter-row {gap: 8px;}
  .wl-tab-btn {padding: 8px 14px;font-size: 12px;}
}