/* ============================================================
   STIZ Lookbook (lookbook.html) 전용 스타일 — TASK-403 리스킨
   원칙: 기존 보존 + 리스킨. js/lookbook.js 참조 id·클래스·로직 100% 유지.
   ⚠️ 하드코딩 색상 금지 — CSS 변수(var(--stiz-*)) + 디자인시스템 토큰 사용.
   ※ 이 파일은 style.css 뒤(가장 마지막)에 로드된다. 필터 chip 색상 매핑이
     Tailwind/components 규칙을 확실히 덮으려면 이 순서가 중요하다.
   ============================================================ */

/* ─── 브레드크럼 여백 ─────────────────────────────────────── */
/* 디자인시스템 .stiz-crumb 재사용. 히어로 위 흰 배경에 배치하는 상하 여백만 지정 */
.lookbook-crumb { padding-top: 16px; padding-bottom: 16px; }

/* ─── 히어로 (페이지 헤더) ────────────────────────────────── */
/* 다크 배경 위 흰 텍스트. 배경 이미지는 opacity로 눌러 텍스트 가독성 확보 */
.lookbook-hero {
    position: relative;
    overflow: hidden;
    background: var(--stiz-black);
    color: var(--stiz-white);
}

.lookbook-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(17, 17, 17, 0.3), rgba(17, 17, 17, 0.94)),
        url("../../images/hero_bg.jpg") center / cover;
    /* webp 우선(용량 -54%): image-set 지원 브라우저만 적용, 미지원 시 위 jpg 유지 */
    background-image:
        linear-gradient(180deg, rgba(17, 17, 17, 0.3), rgba(17, 17, 17, 0.94)),
        image-set(url("../../images/hero_bg.webp") type("image/webp"), url("../../images/hero_bg.jpg") type("image/jpeg"));
    opacity: 0.58;
}

/* ─── 필터 패널 ───────────────────────────────────────────── */
.lookbook-filter-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--stiz-white);
    box-shadow: var(--shadow-soft);
    padding: 20px;
}

.lookbook-chip-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
}

/* 필터 chip 레이아웃(색상 없음). 색상은 아래 상태 매핑 규칙이 담당 */
.lookbook-chip {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 999px;
    padding: 9px 15px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

/* ─── 필터 chip 활성/비활성 색상 매핑 (중요) ─────────────────
   js/lookbook.js의 filterBySport/filterBySeason은 상태를 Tailwind 클래스
   (bg-black/text-white/border-black ↔ bg-white/text-gray-500/border-gray-200)로
   토글한다. .stiz-chip(디자인시스템)이 기본색을 지정하면 그 토글이 묻히므로,
   가장 마지막에 로드되는 이 파일에서 고특이성(0,3,0)으로 상태색을 토큰에 매핑.
   → JS 로직·클래스명은 전혀 손대지 않고, 화면 색만 확실히 적용된다. */
.lookbook-chip-row .lookbook-chip.bg-black {
    background: var(--stiz-black);
    color: var(--stiz-white);
    border-color: var(--stiz-black);
}
.lookbook-chip-row .lookbook-chip.bg-white {
    background: var(--stiz-white);
    color: var(--text-secondary);
    border-color: var(--border);
}
.lookbook-chip-row .lookbook-chip.bg-white:hover {
    border-color: var(--stiz-black);
    color: var(--stiz-black);
}

/* ─── 카드 그리드 (1 → 2 → 3열) ───────────────────────────── */
.lookbook-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

/* ─── 카드 (js가 이 클래스로 마크업 생성 — 클래스명 변경 금지) ── */
.lookbook-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--stiz-white);
    overflow: hidden;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.lookbook-card:hover {
    border-color: var(--stiz-black);
    box-shadow: var(--shadow-soft);
    transform: translateY(-3px);
}

.lookbook-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--gray-100);
}

.lookbook-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 520ms ease;
}

.lookbook-card:hover .lookbook-card-img {
    transform: scale(1.06);
}

.lookbook-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(17, 17, 17, 0) 36%, rgba(17, 17, 17, 0.82));
}

.lookbook-overlay {
    position: absolute;
    right: 18px;
    bottom: 16px;
    left: 18px;
}

.lookbook-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--stiz-black);
    padding: 5px 9px;
    font-size: 10px;
    font-weight: 900;
}

.lookbook-badge.dark {
    background: var(--stiz-black);
    color: var(--stiz-white);
}

.lookbook-tag {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--gray-700);
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 700;
}

/* ─── 상세 모달 카드 ──────────────────────────────────────── */
.lookbook-modal-card {
    width: min(920px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    border-radius: var(--radius-md);
    background: var(--stiz-white);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
}

/* ─── 반응형: 2열(태블릿) → 3열(데스크탑) ─────────────────── */
@media (min-width: 768px) {
    .lookbook-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1180px) {
    .lookbook-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}