/* ── WORK INDEX — Slidesgo-style grid layout ──────────────── */

/* body padding-top:68px → nav.css 에서 처리 */
body { background: #fff; }

/* ── 페이지 래퍼 ──────────────────────────────────────────── */
.wk-page { min-height: calc(100vh - 68px); }

/* ── 페이지 헤더 ──────────────────────────────────────────── */
.wk-hero {
    background: #fff;
    border-bottom: 1px solid var(--border, var(--border));
    padding: 2.5rem 0 0;
}
.wk-hero-inner {
    max-width: 1320px; margin: 0 auto; padding: 0 2rem;
}
.wk-hero-label {
    display: inline-block;
    font-size: var(--fs-12); font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--accent, var(--accent));
    margin-bottom: .5rem;
}
.wk-hero h1 {
    font-size: clamp(var(--fs-22), 3vw, var(--fs-32));
    font-weight: 700; letter-spacing: -.01em; color: var(--text, var(--text));
    line-height: 1.3; margin-bottom: .5rem;
}
.wk-hero-sub {
    font-size: var(--fs-14); font-weight: 400; color: var(--text); margin-bottom: 1.75rem;
}
.wk-count-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--accent-tint, var(--accent-tint)); color: var(--accent, var(--accent));
    font-size: var(--fs-13); font-weight: 400; padding: .25rem .7rem;
    border-radius: 999px;
}

/* ── 필터 바 ──────────────────────────────────────────────── */
.wk-filter-bar {
    background: #fff;
    border-bottom: 1px solid var(--border, var(--border));
    position: sticky; top: 68px; z-index: 50;
}
.wk-filter-inner {
    max-width: 1320px; margin: 0 auto;
    padding: .75rem 2rem;
    display: flex; align-items: center; gap: .5rem;
    overflow-x: auto; scrollbar-width: none;
}
.wk-filter-inner::-webkit-scrollbar { display: none; }

.wk-tag {
    flex-shrink: 0;
    height: 36px;
    display: inline-flex; align-items: center;
    padding: 0 16px; border-radius: 999px;
    font-size: var(--fs-13); font-weight: 400; cursor: pointer;
    border: 1px solid var(--border, var(--border));
    background: var(--bg); color: var(--text);
    transition: all .18s ease; user-select: none;
}
.wk-tag:hover { border-color: var(--text); color: var(--text); }
.wk-tag.active {
    background: var(--text); color: var(--bg);
    border-color: var(--text);
}

/* ── 그리드 영역 ──────────────────────────────────────────── */
.wk-grid-section {
    max-width: 1320px; margin: 0 auto;
    padding: 2rem 2rem 4rem;
}
.wk-grid-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1.25rem;
}
.wk-grid-header h2 {
    font-size: var(--fs-16); font-weight: 700; color: var(--text, var(--text));
}
.wk-visible-count {
    font-size: var(--fs-14); color: var(--text-muted, var(--text-muted));
}

.wk-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.1rem;
}

/* ── 카드 ──────────────────────────────────────────────────── */
.wk-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: var(--border);
    aspect-ratio: 3 / 4;
    /* hidden by default when filtered */
}
.wk-card.wk-hidden { display: none; }

.wk-card img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    pointer-events: none;
    transition: transform .45s ease;
}
.wk-card:hover img { transform: scale(1.06); }

/* 항상 보이는 하단 그라디언트 */
.wk-card-grad {
    position: absolute; inset: 0;
    background: linear-gradient(
        to top,
        rgba(var(--text-rgb), .85) 0%,
        rgba(var(--text-rgb), .3)  38%,
        transparent        65%
    );
    pointer-events: none;
}

/* 오버레이 텍스트 */
.wk-card-body {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 1.1rem 1rem .9rem;
    color: var(--bg);
    transform: translateY(0);
    transition: transform .3s ease;
}
.wk-card-title {
    font-size: var(--fs-16); font-weight: 700;
    line-height: 1.3; letter-spacing: -.02em;
    margin-bottom: .3rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wk-card-desc {
    font-size: var(--fs-13); color: rgba(var(--bg-rgb), .6);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .3s ease, opacity .3s ease;
}
.wk-card:hover .wk-card-desc {
    max-height: 2.5rem; opacity: 1;
}

/* 우상단 번호 배지 */
.wk-card-num {
    position: absolute; top: .65rem; right: .65rem;
    font-size: var(--fs-12); font-weight: 700; letter-spacing: .06em;
    color: rgba(var(--bg-rgb), .5);
    pointer-events: none;
}

/* 호버 → 테두리 링 */
.wk-card::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: 12px;
    box-shadow: inset 0 0 0 0 var(--accent, var(--accent));
    transition: box-shadow .25s ease;
    pointer-events: none;
}
.wk-card:hover::after { box-shadow: inset 0 0 0 2.5px var(--bg); }

/* 빈 상태 */
.wk-empty {
    grid-column: 1 / -1;
    text-align: center; padding: 5rem 1rem;
    color: var(--text-muted, var(--text-muted)); font-size: var(--fs-16);
}

/* ── 반응형 ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .wk-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .wk-grid { grid-template-columns: repeat(2, 1fr); gap: .85rem; }
    .wk-grid-section { padding: 1.4rem 1rem 3rem; }
    .wk-hero-inner { padding: 0 1rem; }
    .wk-filter-inner { padding: .75rem 1rem; }
}
@media (max-width: 480px) {
    .wk-grid { grid-template-columns: 1fr 1fr; gap: .65rem; }
}