/* ============================================================
   Use Case — 02-use-case.html 페이지 전용
   ▸ 대표 설치사례 슬라이더 (Slick centerMode + variableWidth)
   ※ 공통 스타일은 common.css 참조
   ============================================================ */

/* ── 스켈레톤 공통 (shimmer) ────────────────────────────
   부드러운 쿨톤 그라디언트가 좌→우 로 흐름. */
@keyframes useCaseSkeletonShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 메인 컬러(#FF8C49) 기반 — 채도 낮춘 페일 오렌지로 너무 진하지 않게.
   base → mid → highlight 로 shimmer 가 부드럽게 흐름.
   ※ 슬라이드 쪽은 부모 규칙 `.use-case-slider__list .use-case-slide { background: #f5f5f5 }` 와
     specificity 가 같은데 카스케이드 상 뒤에 정의돼서 회색이 이김.
     `.use-case-slide.use-case-slide--skeleton` 으로 specificity 한 단계 올려 회색을 덮어씀. */
.use-case-slider__list .use-case-slide.use-case-slide--skeleton,
.use-case-board__list .use-case-board__visual--skeleton,
.use-case-board__skeleton-line {
    background-color: #FBEADA;
    background-image: linear-gradient(
        100deg,
        #FBEADA 0%,
        #FDF3E9 30%,
        #FEFAF5 50%,
        #FDF3E9 70%,
        #FBEADA 100%
    );
    background-size: 200% 100%;
    animation: useCaseSkeletonShimmer 1.6s linear infinite;
}

/* ── 슬라이더 스켈레톤 — slick centerMode 시작 화면과 동일한 모습 ──
   1000×400 슬라이드 3장이 48px 간격(좌우 24px 마진씩)으로 배치,
   가운데 슬라이드가 뷰포트 중앙에 오고 양옆은 컨테이너 overflow:hidden 으로 잘림.
   width: max-content + margin-left: 50% + translateX(-50%) 패턴으로
   정확히 가운데 정렬되는 트랙을 만든다. */
.use-case-slider__list.is-skeleton {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    margin-left: 50%;
    transform: translateX(-50%);
}

.use-case-slide--skeleton {
    position: relative;
    border-radius: 16px;
    /* width/height/margin 은 .use-case-slide 기본 규칙 (1000×400, margin 0 24px) 그대로 */
}

/* `.use-case-slide::after` 의 multiply 그라디언트(좌측 #737373)가 스켈레톤 위에서도
   회색 오버레이로 작동해 왼쪽이 잿빛으로 보임 → 스켈레톤 상태에서는 숨김. */
.use-case-slide.use-case-slide--skeleton::after {
    display: none;
}

/* 좌하단 캡션 placeholder — 실제 슬라이드 레이아웃 그대로 */
.use-case-slide__skeleton-caption {
    position: absolute;
    left: 40px;
    bottom: 40px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 캡션 placeholder — 흰색 알파를 쓰면 오렌지 위에서 채도가 빠져 회색빛이 됨.
   같은 페일 오렌지 톤 안에서 한 단계 진한 색 사용 → 따뜻한 톤 유지. */
.use-case-slide__skeleton-badge,
.use-case-slide__skeleton-name {
    background: #F3D5B8;
}

.use-case-slide__skeleton-badge {
    width: 120px;
    height: 28px;
    border-radius: 8px;
}

.use-case-slide__skeleton-name {
    width: 280px;
    height: 36px;
    border-radius: 8px;
}

/* ── 보드 카드 스켈레톤 ───────────────────────────────── */
.use-case-board__card--skeleton {
    pointer-events: none;
    cursor: default;
}

/* 이미지 영역 — 실제 카드의 하단 그라디언트(::after)는 로딩 중엔 숨기고
   대신 좌상단 뱃지 placeholder(::before)만 노출 */
.use-case-board__visual--skeleton::after {
    display: none;
}

.use-case-board__visual--skeleton::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 14px;
    width: 96px;
    height: 26px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.55);
    z-index: 1;
}

.use-case-board__skeleton-line {
    border-radius: 6px;
}

.use-case-board__skeleton-line--sm { width: 32%; height: 16px; } /* 위치 */
.use-case-board__skeleton-line--lg { width: 72%; height: 22px; } /* 기관명 */
.use-case-board__skeleton-line--xs { width: 30%; height: 14px; } /* 설치일자 */

@media (prefers-reduced-motion: reduce) {
    .use-case-slide--skeleton,
    .use-case-board__visual--skeleton,
    .use-case-board__skeleton-line {
        animation-duration: 3.2s;
    }
}

.use-case-slider {
    overflow: hidden;
}

/* ── 슬라이더 트랙 ─────────────────────────────────────────
   variableWidth: true 사용 — 슬라이드(.use-case-slide) 자체에 너비 지정.
   centerMode 와 함께 활성 슬라이드는 화면 중앙, 좌우 슬라이드는 양옆에 peek.
   슬라이드 간격 48px → 좌우 margin 24px. */
.use-case-slider__list .use-case-slide {
    position: relative;
    width: 1000px;
    height: 400px;
    margin: 0 24px;
    border-radius: 16px;
    overflow: hidden;
    background: #f5f5f5;

    display: flex;
    align-items: center;
    justify-content: center;

    /* 슬라이드 자체가 <a> — 기본 링크 스타일 제거 */
    color: inherit;
    text-decoration: none;
}

.use-case-slider__list .use-case-slide:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: -3px;
}

.use-case-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 이미지 위 불투명 박스 — 좌측 그레이 → 우측 화이트 그라디언트
   multiply 블렌딩으로 좌측은 톤다운, 우측은 원본 노출되는 효과. */
.use-case-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #737373 0%, #FFF 61.54%);
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* ── 슬라이드 캡션 (왼쪽 하단 뱃지 + 기관명) ─────────────
   ::after 오버레이 위에 노출되도록 z-index 부여. */
.use-case-slide__caption {
    position: absolute;
    left: 40px;
    bottom: 40px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.use-case-slide__badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 8px;
    background: #EFF6FF;
    color: #4A90E2;
    font-size: 1rem; /* 16px */
    font-weight: 700;
    line-height: 1.5; /* 24px */
}

.use-case-slide__name {
    color: #FFF;
    font-size: 2rem; /* 32px */
    font-weight: 700;
    line-height: 1.5; /* 48px */
    letter-spacing: -2px;
}

/* ── Slick 도트 ─────────────────────────────────────────── */
.use-case-slider .slick-dots {
    position: static;
    margin-top: 40px;
    padding: 0;
    list-style: none;

    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

/* li 박스를 active dot(8px) 기준으로 잡아 활성 전환 시 레이아웃 흔들림 방지 */
.use-case-slider .slick-dots li {
    width: 8px;
    height: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.use-case-slider .slick-dots button {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #D9D9D9;
    font-size: 0;
    cursor: pointer;
    transition: background 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.use-case-slider .slick-dots .slick-active button {
    width: 8px;
    height: 8px;
    background: #787878;
}

/* ============================================================
   설치사례 보드 — 필터 탭 + 3열 카드 그리드 + 페이지네이션
   데이터는 02-use-case.js 에서 https://weromy.co.kr/api/case 호출
   ============================================================ */

.use-case-board {
    padding: 6vw 0;
}

/* ── 필터 탭 (pill 형태) ─────────────────────────────── */
.use-case-board__filters {
    margin: 0 0 40px;
    padding: 0;
    list-style: none;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.use-case-board__filter {
    width: 200px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: transparent;

    color: #B4B4B4;
    text-align: center;
    font-family: "Spoqa Han Sans Neo", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    font-size: 1.125rem; /* 18px */
    font-weight: 500;
    line-height: 1.3; /* 24px */

    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.use-case-board__filter:hover {
    color: var(--color-primary);
}

.use-case-board__filter.is-active {
    background: #FF8C49;
    color: #fff;
}

/* ── 툴바 (필터 탭 ↔ 카드 그리드 사이) ────────────────
   좌: 결과 건수 / 우: 검색창. 그리드 폭에 맞춘 한 줄 + 하단 구분선으로 목록과 연결. */
.use-case-board__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-line);
}

.use-case-board__count {
    color: var(--color-muted);
    font-size: 1.125rem; /* 18px */
    font-weight: 500;
}

.use-case-board__count strong {
    color: var(--color-primary);
    font-weight: 700;
}

.use-case-board__search {
    position: relative;
    flex: 0 1 360px;
}

.use-case-board__search-input {
    width: 100%;
    height: 52px;
    padding: 0 52px 0 24px;
    border: 1px solid transparent;
    border-radius: 16px; /* 필터 탭과 동일 */
    background: #F5F5F5;
    color: var(--color-text);
    font-family: "Spoqa Han Sans Neo", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    font-size: 1rem;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.use-case-board__search-input::placeholder {
    color: #B4B4B4;
}

.use-case-board__search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: #fff;
}

.use-case-board__search-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #797979;
    font-size: 1.375rem;
    cursor: pointer;
}

.use-case-board__search-btn:hover,
.use-case-board__search-btn:focus-visible {
    color: var(--color-primary);
}

/* 카드 그리드(.use-case-board__list) 및 카드 본체(.use-case-board__card 외) +
   1024 / 768 그리드 반응형은 common.css 의 "Use Case Board Card" 섹션 참조 —
   02-use-case-detail.html 의 더보기 섹션과 공유. */

/* ============================================================
   반응형
   ============================================================ */

/* ── 1440px 이하 ──────────────────────────────────────── */
@media (max-width: 1440px) {
    .use-case-slider__list .use-case-slide {
        width: 800px;
        height: 320px;
    }

    .use-case-slide__caption {
        left: 32px;
        bottom: 32px;
        gap: 12px;
    }

    .use-case-slide__name {
        font-size: 1.625rem; /* 26px */
        line-height: 1.4;
    }
}

/* ── 768px 이하 (모바일) ──────────────────────────────── */
@media (max-width: 768px) {
    .use-case-slider {
        padding: 60px 0;
    }

    .use-case-slider__list .use-case-slide {
        width: 84vw;
        height: 180px;
        margin: 0 8px;
        border-radius: 12px;
    }

    .use-case-slide__caption {
        left: 20px;
        bottom: 20px;
        gap: 10px;
    }

    .use-case-slide__badge {
        padding: 3px 8px;
        font-size: 0.875rem;
    }

    .use-case-slide__name {
        font-size: 1.5rem; /* 모바일 12px 루트 → 18px */
        line-height: 1.3;
        letter-spacing: -1px;
    }

    /* 보드 */
    .use-case-board {
        padding: 60px 0;
    }

    .use-case-board__filters {
        margin-bottom: 20px;
    }

    /* 모바일: 검색창 전체 폭 위 / 건수 아래 */
    .use-case-board__toolbar {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 24px;
        padding-bottom: 16px;
    }

    .use-case-board__count {
        font-size: 1.1667rem; /* 14px */
    }

    .use-case-board__search {
        flex: none;
    }

    .use-case-board__search-input,
    .use-case-board__search-btn {
        height: 40px;
    }

    .use-case-board__search-input {
        border-radius: 8px;
        font-size: 1.3333rem; /* 16px — iOS 는 16px 미만 input 포커스 시 자동 줌 */
    }

    .use-case-board__search-btn {
        width: 40px;
    }

    .use-case-board__filter {
        /* 모바일은 200px 고정 폭 해제 — 가변 폭으로 텍스트 따라 */
        width: auto;
        height: 30px;
        padding: 0 6px;
        border-radius: 6px;
        font-size: 0.875rem;
        letter-spacing: -0.5px;
    }

}