/**
 * isystem_new/assets/css/pages/cases.css
 *
 * 시공 사례 페이지 — 카드 그리드 + 단순 필터.
 * 디자인 토큰(design_tokens.css) 사용 — KT 블루톤 일관성 유지.
 */

/* ════════════════════════════════════════════════
   히어로
   ════════════════════════════════════════════════ */
.cases-hero {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 60%, var(--color-primary-deep) 100%);
    color: var(--color-text-on-dark);
    padding: var(--space-16) var(--space-5) var(--space-12);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cases-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.1) 0%, transparent 40%),
                      radial-gradient(circle at 80% 70%, rgba(126,200,255,0.15) 0%, transparent 40%);
    pointer-events: none;
}
.cases-hero__inner {
    max-width: var(--container-narrow);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.cases-hero__title {
    font-size: var(--text-5xl);
    font-weight: var(--weight-extrabold);
    margin: 0 0 var(--space-3);
    color: #fff;
    letter-spacing: var(--tracking-tight);
}
.cases-hero__subtitle {
    font-size: var(--text-base);
    color: var(--color-text-on-dark-muted);
    margin: 0 0 var(--space-5);
    line-height: var(--leading-normal);
}
.cases-hero__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-on-dark-muted);
    margin: 0;
    padding: 6px 14px;
    background: rgba(255,255,255,0.1);
    border-radius: var(--radius-full);
    backdrop-filter: blur(4px);
}
.cases-hero__meta i { color: var(--color-primary-light); }
.cases-hero__meta-divider { opacity: 0.5; }
.mobile-only { display: none; }

/* page_hero 사용 시 — hero 아래 별도 라인으로 갱신 시각 표시 */
.cases-hero__meta--external {
    display: flex;
    justify-content: center;
    background: var(--color-bg-soft, #f8fafc);
    color: var(--color-text-muted, #64748b);
    padding: 8px 14px;
    border-radius: 0;
    font-size: var(--text-xs);
}
.cases-hero__meta--external i { color: var(--color-primary, #0ea5e9); margin-right: 6px; }

/* ════════════════════════════════════════════════
   Hero 하단 메타 스트립 — 통계·시공영역·자격·연동
   • KT 블루 단일 톤, 글래스모피즘·neon 배제
   • 정보 밀도 우선 (B2B 대시보드 톤)
   ════════════════════════════════════════════════ */
.cases-meta-strip {
    background: #ffffff;
    border-bottom: 1px solid #e6ebf2;
    padding: 28px 24px 24px;
}
.cases-meta-strip__inner {
    max-width: var(--container-max, 1280px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* A. 통계 4개 — 가로 행, 세로 구분선 */
.cases-meta-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border: 1px solid #e6ebf2;
    border-radius: 12px;
    background: #f8fafc;
    overflow: hidden;
}
.cases-meta-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-right: 1px solid #e6ebf2;
}
.cases-meta-stat:last-child { border-right: 0; }
.cases-meta-stat__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #eaf2fc;
    color: #0066cc;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cases-meta-stat__body { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.cases-meta-stat__value {
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: 0;
    font-feature-settings: "tnum";
}
.cases-meta-stat__unit {
    font-size: 14px;
    font-weight: 700;
    color: #475569;
    margin-left: 3px;
    letter-spacing: 0;
}
.cases-meta-stat__label {
    font-size: 12.5px;
    font-weight: 500;
    color: #64748b;
    margin-top: 4px;
    letter-spacing: 0;
}

/* B. 시공 영역 + 자격 — 2단 레이아웃 */
.cases-meta-tags-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.cases-meta-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 22px;
    background: #f8fafc;
    border: 1px solid #e6ebf2;
    border-radius: 12px;
}
.cases-meta-row__label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #0066cc;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cases-meta-row__label i { font-size: 11px; }

.cases-meta-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cases-meta-tags li {
    background: #ffffff;
    border: 1px solid #d6deea;
    color: #1e293b;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    padding: 5px 10px;
    border-radius: 6px;
    line-height: 1.4;
}

.cases-meta-creds {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
}
.cases-meta-creds li {
    font-size: 12.5px;
    color: #1e293b;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.cases-meta-creds li i {
    color: #0066cc;
    font-size: 10px;
    margin-top: 5px;
    flex-shrink: 0;
}

/* C. 자동 연동 정보 — 미니멀 한 줄 (2026-05-11 정돈) */
.cases-meta-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: transparent;
    border: 0;
    border-top: 1px solid #e6ebf2;
    border-radius: 0;
    font-size: 11.5px;
    color: #94a3b8;
    letter-spacing: 0;
    margin-top: 6px;
}
.cases-meta-foot__group {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.cases-meta-foot__group i { color: #94a3b8; font-size: 10.5px; opacity: 0.85; }
.cases-meta-foot__divider { color: #cbd5e1; font-size: 10px; }
.cases-meta-foot__link {
    color: #0066cc;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}
.cases-meta-foot__link i { color: #0066cc; opacity: 0.9; }
.cases-meta-foot__link:hover { color: #003d7a; text-decoration: underline; }

/* 반응형 */
@media (max-width: 1024px) {
    .cases-meta-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cases-meta-stat:nth-child(2) { border-right: 0; }
    .cases-meta-stat:nth-child(1),
    .cases-meta-stat:nth-child(2) { border-bottom: 1px solid #e6ebf2; }
    .cases-meta-tags-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .cases-meta-strip { padding: 22px 16px 18px; }
    .cases-meta-stats { grid-template-columns: 1fr; }
    .cases-meta-stat { border-right: 0; border-bottom: 1px solid #e6ebf2; padding: 14px 18px; }
    .cases-meta-stat:last-child { border-bottom: 0; }
    .cases-meta-stat__value { font-size: 22px; }
    .cases-meta-creds { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════
   메인 영역
   ════════════════════════════════════════════════ */
.cases-main {
    background: var(--color-bg-soft);
    padding: var(--space-12) var(--space-5) var(--space-16);
    min-height: 60vh;
}
.cases-main__inner {
    max-width: var(--container-max);
    margin: 0 auto;
}

/* ════════════════════════════════════════════════
   통합 필터 바 — 분류 탭 + 상품·업종 태그 (sticky)
   ════════════════════════════════════════════════ */
/* ⚠ top 은 «.page-subnav 의 아래»여야 한다 — 2026-09-02 실측으로 확정.
   서브내비가 z-index 900 이고 필터바는 40 이라, 겹치면 서브내비가 항상 위에 온다.
   그 상태에서 검색칸이 서브내비 띠 안에 들어가 «보이는데 클릭이 안 되는» 상태였다
   (elementFromPoint 가 ul.page-subnav__menu 를 반환. 사업주 신고 「검색이 안 돼」의 실체).
   실측: 1280px 에서 .page-subnav = sticky top 70 · 높이 61 → 아래가 131.
   ⚠ z-index 를 올려 필터바를 위로 올리면 이번엔 서브내비가 안 눌린다. «겹치지 않게» 하는 것이 답이다. */
.cases-filterbar {
    position: sticky;
    top: 131px;
    z-index: 40;
    background: #fff;
    border-top: 1px solid #edf0f5;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 3px 12px rgba(15,23,42,.06);
    margin-bottom: 28px;
}
.cases-filterbar__inner {
    max-width: var(--container-max, 1280px);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    min-height: 68px;
}
.cases-filterbar__tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    padding: 12px 0;
}
.cases-filterbar__search {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 14px;
    flex-shrink: 0;
}
.cases-filterbar__search-icon {
    position: absolute;
    left: 11px;
    color: #94a3b8;
    font-size: 11.5px;
    pointer-events: none;
}
.cases-filterbar__search-input {
    padding: 7px 30px 7px 32px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: 12.5px;
    font-family: inherit;
    color: #334155;
    background: #f8fafc;
    width: 180px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s, width 0.2s;
    -webkit-appearance: none;
}
.cases-filterbar__search-input:focus {
    border-color: #0066cc;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0,102,204,.1);
    width: 210px;
}
.cases-filterbar__search-input::placeholder { color: #b0bac8; }
.cases-filterbar__search-input::-webkit-search-cancel-button { display: none; }
.cases-filterbar__search-clear {
    position: absolute;
    right: 9px;
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 2px;
    font-size: 10.5px;
    line-height: 1;
    display: flex;
    align-items: center;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
}
.cases-filterbar__search-clear:hover {
    color: #475569;
    background: #e2e8f0;
}

.cases-filterbar__sep {
    width: 1px;
    height: 38px;
    background: #e2e8f0;
    margin: 0 20px;
    flex-shrink: 0;
}
.cases-filterbar__tags {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}
.cases-filterbar__tagrows {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.cases-filterbar__total {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding-left: 16px;
    border-left: 1px solid #e2e8f0;
    min-width: 48px;
}
.cases-filterbar__total-num {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.cases-filterbar__total-lbl {
    font-size: 10px;
    color: #94a3b8;
    font-weight: 600;
    text-align: right;
    margin-top: 1px;
}

/* 분류 탭 버튼 */
.cases-filter__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 0;
    background: transparent;
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    letter-spacing: 0;
    white-space: nowrap;
}
.cases-filter__btn:hover {
    background: #eef6ff;
    color: #0066cc;
}
.cases-filter__btn.is-active {
    background: linear-gradient(135deg, #0066cc 0%, #004ea8 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,102,204,.28);
}
.cases-filter__count {
    display: inline-block;
    min-width: 20px;
    padding: 1px 6px;
    background: rgba(15,23,42,.07);
    color: #64748b;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.cases-filter__btn.is-active .cases-filter__count {
    background: rgba(255,255,255,.22);
    color: #fff;
}

/* 상품·업종 태그 행 */
.cases-filterbar .cases-tagfilter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0;
}
.cases-tagfilter__label {
    display: inline-block;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    color: #0066cc;
    background: #e8f1fb;
    border: 1px solid #c2d9f5;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 5px;
    line-height: 1.5;
    white-space: nowrap;
}
.cases-tagfilter__chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 1px;
}
.cases-tagfilter__chips::-webkit-scrollbar { display: none; }
.cases-tagfilter__btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 11px;
    background: #f1f5f9;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.cases-tagfilter__btn:hover {
    background: #eef6ff;
    border-color: #c7dcf2;
    color: #0066cc;
}
.cases-tagfilter__btn.is-active {
    background: #0066cc;
    border-color: #0066cc;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0,102,204,.22);
}
.cases-tagfilter__count {
    display: inline-block;
    min-width: 16px;
    padding: 0 5px;
    background: rgba(15,23,42,.06);
    color: #64748b;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 15px;
    font-variant-numeric: tabular-nums;
}
.cases-tagfilter__btn.is-active .cases-tagfilter__count {
    background: rgba(255,255,255,.22);
    color: #fff;
}

/* ════════════════════════════════════════════════
   카드 그리드
   ════════════════════════════════════════════════ */
.cases-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

@media (max-width: 1200px) {
    .cases-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .cases-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .cases-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ── 카드 ────────────────────────────────────────────── */
.cases-card {
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.cases-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary-soft);
}
.cases-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit !important;
    text-decoration: none;
}

/* 썸네일 */
.cases-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-bg-soft);
}
.cases-card__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}
.cases-card:hover .cases-card__thumb {
    transform: scale(1.05);
}
.cases-card__thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-border-strong);
    font-size: 48px;
    background: linear-gradient(135deg, var(--color-bg-soft), var(--color-border));
}
/* 이미지 로드 실패 시 (onerror 핸들러로 .cases-card__media--err 부착) */
.cases-card__media--err {
    background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
}
.cases-card__media--err::before {
    content: "\f03e";  /* fa-image */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome;
    font-weight: 900;
    font-size: 48px;
    color: #94a3b8;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
    opacity: 0.7;
}

/* 키워드 검색 결과 배너 */
.cases-search-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    font-size: 14px;
    color: #1e3a8a;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.cases-search-notice i { color: #3b82f6; }
.cases-search-notice__count {
    background: #3b82f6;
    color: #fff;
    border-radius: 999px;
    padding: 1px 10px;
    font-size: 12px;
    font-weight: 700;
}
.cases-search-notice__reset {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}
.cases-search-notice__reset:hover { background: #dbeafe; text-decoration: none; }

/* fallback 안내 (정확 매칭 부족 시 유사 사례 표시) */
.cases-search-notice.is-fallback {
    background: #fffbeb;
    border-color: #fde68a;
    color: #78350f;
}
.cases-search-notice.is-fallback i { color: #d97706; }
.cases-search-notice.is-fallback .cases-search-notice__count {
    background: #d97706;
}
.cases-search-notice.is-fallback .cases-search-notice__reset {
    border-color: #fde68a;
    color: #78350f;
}
.cases-search-notice.is-fallback .cases-search-notice__reset:hover { background: #fef3c7; }
.cases-search-notice__fallback {
    width: 100%;
    font-size: 12.5px;
    color: #92400e;
    margin-top: 4px;
    line-height: 1.5;
}
.cases-search-notice__kw {
    display: inline-block;
    margin-left: 6px;
    color: #b45309;
    font-size: 12px;
}

/* 카테고리 뱃지 */
.cases-card__category {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: #fff;
    backdrop-filter: blur(4px);
    box-shadow: var(--shadow-sm);
    max-width: calc(100% - var(--space-6));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cases-card__category--install {
    background: rgba(0, 102, 204, 0.92);
}
.cases-card__category--other {
    background: rgba(26, 58, 107, 0.92);
}

/* 카드 본문 */
.cases-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
    gap: var(--space-3);
}
.cases-card__title {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin: 0;
    line-height: var(--leading-snug);
    /* 2줄 클램프 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(var(--text-base) * var(--leading-snug) * 2);
    transition: color var(--transition-fast);
}
.cases-card:hover .cases-card__title {
    color: var(--color-primary);
}
.cases-card__summary {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
    line-height: var(--leading-snug);
    /* 3줄 클램프 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* AI 자동 요약 — 좌측 라이트 블루 인디케이터로 출처 구분 */
.cases-card__summary--ai {
    border-left: 2px solid #c7dcf2;
    padding-left: 8px;
    color: #475569;
    font-weight: 500;
    position: relative;
}
.cases-card__summary--ai::before {
    content: "AI";
    position: absolute;
    top: 0;
    right: 0;
    font-size: 9px;
    font-weight: 700;
    color: #0066cc;
    background: #eaf2fb;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.04em;
    line-height: 1.4;
    opacity: 0.85;
}
.cases-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-xs);
}
.cases-card__date {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-light);
}
.cases-card__date i { font-size: 11px; }
.cases-card__more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-primary);
    font-weight: var(--weight-semibold);
    transition: gap var(--transition-fast);
}
.cases-card:hover .cases-card__more {
    gap: var(--space-2);
}

/* ════════════════════════════════════════════════
   빈 상태
   ════════════════════════════════════════════════ */
.cases-empty {
    text-align: center;
    padding: var(--space-16) var(--space-5);
    color: var(--color-text-muted);
}
.cases-empty i {
    font-size: 56px;
    color: var(--color-border-strong);
    margin-bottom: var(--space-4);
}
.cases-empty__title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--space-2);
}
.cases-empty__sub {
    font-size: var(--text-sm);
    margin: 0;
    line-height: var(--leading-normal);
}
.cases-empty__sub a {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: var(--weight-semibold);
}

/* ════════════════════════════════════════════════
   하단 CTA
   ════════════════════════════════════════════════ */
.cases-cta {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    color: #fff;
    padding: var(--space-16) var(--space-5);
    text-align: center;
}
.cases-cta__inner {
    max-width: 800px;
    margin: 0 auto;
}
.cases-cta__title {
    font-size: var(--text-3xl);
    color: #fff;
    margin: 0 0 var(--space-3);
    font-weight: var(--weight-bold);
}
.cases-cta__subtitle {
    font-size: var(--text-base);
    color: var(--color-text-on-dark-muted);
    margin: 0 0 var(--space-8);
}
.cases-cta__buttons {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}
.cases-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 14px 24px;
    border-radius: var(--radius-md);
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    text-decoration: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: var(--shadow-sm);
    min-width: 200px;
    justify-content: center;
}
.cases-cta__btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.cases-cta__btn--phone { background: #fff; color: var(--color-primary-dark) !important; }
.cases-cta__btn--phone:hover { color: var(--color-primary-deep) !important; }
.cases-cta__btn--form  { background: var(--color-primary-light); color: var(--color-primary-dark) !important; }
.cases-cta__btn--blog  { background: #2db400; color: #fff !important; }

/* ════════════════════════════════════════════════
   반응형
   ════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .cases-hero { padding: var(--space-12) var(--space-4) var(--space-10); }
    .cases-hero__title { font-size: var(--text-4xl); }
    .cases-hero__subtitle { font-size: var(--text-sm); }
    .mobile-only { display: inline; }

    .cases-main { padding: var(--space-10) var(--space-3); }

    .cases-filter__btn {
        padding: 7px 11px;
        font-size: 12.5px;
    }

    .cases-card__body { padding: var(--space-4); gap: var(--space-2); }
    .cases-card__title { font-size: var(--text-sm); }
    .cases-card__summary { display: none; }

    .cases-cta__title { font-size: var(--text-2xl); }
    .cases-cta__btn   { width: 100%; min-width: 0; }

    /* 통합 필터 바 — 모바일 수직 스택 */
    /* ⚠ top:0 이었는데, 모바일에서는 .page-subnav 가 **position:fixed** 로 top 60 에 상주한다
       (실측 360px: 60~110 / 768px: 60~111 · z-index 900). 그래서 top:0 이면 필터바 상단
       50px 남짓이 «항상» 내비에 덮이고, 그 자리에 검색칸이 놓여 눌리지 않았다. */
    /* 2026-10-13: 내비 띠를 헤더 실제 높이(71px) 밑으로 내림 → 띠 아래 끝 121px. page_subnav.js 가 실제 값을 변수로 준다 */
    .cases-filterbar { top: 121px; top: var(--isys-subnav-bottom, 121px); margin-bottom: 20px; }
    .cases-filterbar__inner {
        flex-direction: column;
        align-items: stretch;
        min-height: auto;
        padding: 8px 16px 10px;
        gap: 0;
    }
    .cases-filterbar__sep { display: none; }
    .cases-filterbar__tabs {
        padding: 6px 0 8px;
        border-bottom: 1px solid #edf0f5;
        gap: 4px;
        width: 100%;
        justify-content: stretch;
    }
    .cases-filterbar__tabs .cases-filter__btn { flex: 1; justify-content: center; }
    .cases-filterbar__search {
        width: 100%;
        margin: 0 0 8px;
        padding-bottom: 8px;
        border-bottom: 1px solid #edf0f5;
    }
    .cases-filterbar__search-input,
    .cases-filterbar__search-input:focus { width: 100%; box-sizing: border-box; }
    .cases-filterbar__tags { padding: 8px 0 4px; gap: 8px; flex-direction: row; align-items: center; }
    .cases-filterbar__tagrows { gap: 6px; }
    .cases-filterbar .cases-tagfilter { gap: 7px; }
    .cases-filterbar__total { padding-left: 12px; min-width: 40px; }
    .cases-filterbar__total-num { font-size: 18px; }
}

@media (max-width: 480px) {
    .cases-hero__title { font-size: var(--text-3xl); }
}

/* ── 영상 기술가이드 (2026-10-13) — 카드 썸네일 왼쪽 아래 «▶ 영상 N초» · 필터 «영상» 탭 ──
   includes/case_video.php · data/case_videos.json. 플랫 남색 배지(그라데이션·글로우 금지). */
.cases-card__video {
    position: absolute;
    left: var(--space-3);
    bottom: var(--space-3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: #1e2d7c;
    color: #fff;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}
.cases-filter__btn--video i { margin-right: 4px; font-size: 0.85em; }

/* ── 기술영상 모아보기 (2026-10-13) — 마크업 pages/cases.php #vreel · 동작 vreel.js ──
   ⚠ minify_css 가 «+» 앞뒤 공백을 지운다 → calc() 안에 + 쓰지 말 것 */
.cases-reel-open {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid #1e2d7c;
    background: #1e2d7c;
    color: #fff;
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.cases-reel-open:hover { background: #2a3c9e; border-color: #2a3c9e; }
html.vreel-lock, html.vreel-lock body { overflow: hidden; }
.vreel {
    position: fixed;
    inset: 0;
    z-index: 10000001;
    display: flex;
    flex-direction: column;
    background: #0b1020;
    color: #eef2ff;
    font-family: var(--font-sans);
}
.vreel[hidden] { display: none; }
.vreel__bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; flex: 0 0 auto; }
/* 목록 먼저 (2026-10-14) — 카드 선택 → .vreel__player · «목록» 버튼으로 복귀 */
.vreel__back {
    display: inline-flex; align-items: center; gap: 6px;
    height: 38px; padding: 0 13px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.3); background: transparent; color: #fff;
    font-family: var(--font-sans); font-size: 14px; font-weight: 700; cursor: pointer;
}
.vreel__back:hover { background: rgba(255,255,255,0.1); }
.vreel__back[hidden], .vreel__list[hidden], .vreel__player[hidden] { display: none; }
.vreel__list {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 4px 16px 32px;
}
.vreel__lead { max-width: 1080px; margin: 0 auto 14px; font-size: 14px; color: #9aa6cc; }
.vreel__grid {
    list-style: none; margin: 0 auto; padding: 0; max-width: 1080px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px;
}
.vreel__item {
    display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0;
    text-align: left; background: #141b33; color: #eef2ff;
    border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden;
    font-family: var(--font-sans); cursor: pointer;
}
.vreel__item:hover, .vreel__item:focus-visible { border-color: #ff9a3c; outline: none; }
.vreel__item.is-next { border-color: #ff9a3c; }
.vreel__thumb { position: relative; display: block; aspect-ratio: 1 / 1; background: #0b1020; }
.vreel__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vreel__ico {
    position: absolute; left: 8px; bottom: 8px;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(11,16,32,0.8); color: #fff; font-size: 13px;
}
.vreel__ico i { margin-left: 2px; }
.vreel__item:hover .vreel__ico { background: #ff9a3c; color: #0b1020; }
.vreel__dur {
    position: absolute; right: 8px; bottom: 8px; padding: 3px 7px; border-radius: 4px;
    background: rgba(11,16,32,0.8); color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.vreel__flag { position: absolute; left: 8px; top: 8px; }
.vreel__item.is-seen .vreel__flag::before, .vreel__item.is-next .vreel__flag::before {
    display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 12px; font-weight: 700;
}
.vreel__item.is-seen .vreel__flag::before { content: "봤어요"; background: rgba(11,16,32,0.8); color: #c9d4f5; }
.vreel__item.is-next .vreel__flag::before { content: "다음 영상"; background: #ff9a3c; color: #0b1020; }
.vreel__new {   /* 어제·오늘 올리거나 바꾼 영상 (2026-10-17) — 제목 앞 (포스터 위 AI 표시를 가리지 않게) */
    display: inline-block; margin-right: 6px; padding: 2px 7px; border-radius: 4px; vertical-align: 2px;
    background: #fff; color: #1e2d7c; font-size: 12px; font-weight: 700; line-height: 1.4;
}
.vreel__name { display: block; padding: 10px 12px 13px; font-size: 15px; font-weight: 700; line-height: 1.45; word-break: keep-all; }
.vreel__player { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.vreel__brand { font-size: 15px; font-weight: 700; color: #c9d4f5; }
.vreel__brand i { color: #ff9a3c; margin-right: 4px; }
.vreel__count { margin-left: auto; font-size: 14px; color: #7f8bb3; font-variant-numeric: tabular-nums; }
.vreel__close {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.25); background: transparent; color: #fff;
    font-size: 17px; cursor: pointer;
}
.vreel__close:hover { background: rgba(255,255,255,0.1); }
.vreel__stage {
    flex: 1 1 auto; min-height: 0;
    display: flex; align-items: center; justify-content: center; gap: 24px;
    padding: 0 16px;
}
.vreel__frame { position: relative; height: 100%; max-height: min(72vh, 720px); aspect-ratio: 1 / 1; max-width: 100%; }
.vreel.is-vt .vreel__frame { aspect-ratio: 9 / 16; max-height: 100%; }
.vreel__video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0b1020; border-radius: 10px; }
.vreel__play {
    position: absolute; inset: 0; margin: auto;
    width: 84px; height: 84px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.75); background: rgba(11,16,32,0.6); color: #fff;
    font-size: 30px; cursor: pointer;
}
.vreel__play i { margin-left: 5px; }
.vreel__play[hidden] { display: none; }
.vreel__nav {
    flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.06); color: #fff;
    font-size: 20px; cursor: pointer;
}
.vreel__nav:hover { background: rgba(255,255,255,0.14); }
.vreel.is-ended .vreel__nav--next { border-color: #ff9a3c; color: #ff9a3c; }
.vreel__info { flex: 0 0 auto; width: 100%; max-width: 720px; margin: 0 auto; padding: 12px 16px 18px; text-align: center; }
.vreel__title { margin: 0 0 10px; font-size: 18px; font-weight: 700; line-height: 1.4; color: #fff; word-break: keep-all; }
.vreel__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.vreel__btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 8px; font-size: 15px; font-weight: 700; text-decoration: none; }
.vreel__btn--guide { background: #fff; color: #1e2d7c; }
.vreel__btn--call { border: 1px solid rgba(255,255,255,0.4); color: #fff; }
.vreel__btn--call:hover, .vreel__btn--guide:hover { opacity: 0.9; }
.vreel__hint { margin: 10px 0 0; font-size: 13px; color: #7f8bb3; }
@keyframes vreelInR { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes vreelInL { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
.vreel__frame.vreel-in-r { animation: vreelInR 0.28s ease-out; }
.vreel__frame.vreel-in-l { animation: vreelInL 0.28s ease-out; }
@media (max-width: 768px) {
    .vreel__nav { display: none; }
    .vreel__bar { padding: 8px 12px; gap: 10px; }
    .vreel__list { padding: 2px 12px 24px; }
    .vreel__lead { margin-bottom: 10px; font-size: 13px; }
    .vreel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .vreel__name { padding: 8px 10px 11px; font-size: 14px; }
    .vreel__stage { padding: 0 12px; }
    .vreel__frame { width: 100%; height: auto; max-height: 100%; }
    .vreel.is-vt .vreel__frame { width: auto; height: 100%; }
    .vreel__info { padding: 10px 14px 14px; }
    .vreel__title { font-size: 15px; margin-bottom: 8px; }
    .vreel__btn { padding: 10px 14px; font-size: 14px; }
    .vreel__hint { margin-top: 8px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .vreel__frame { animation: none !important; } }

/* 모바일 세로판 재생 중엔 아래 제목·버튼을 숨겨 영상을 크게 (2026-10-16 사장님 «여기서 실행한 영상은 세로로 안 나와»).
   삼성 인터넷처럼 보이는 높이가 낮으면 세로 틀이 248×440 까지 줄어 가운데 사진만 네모로 보였다. 멈추거나 끝나면 다시 보인다(vreel.js is-playing). */
@media (max-width: 768px) {
    .vreel.is-vt.is-playing .vreel__info { display: none; }
    .vreel.is-vt .vreel__stage { padding: 0 6px; }
}

/* ── 영상 모음 분류·검색 (2026-10-19 사장님 «상품별·성격별 분류 · 상단에서 골라 바로 가게» + Gemini 손님 평가) ──
   한 번에 한 축(상황별 | 분야별) · 칩 한 줄(휴대폰은 옆으로 밀기) · 편수 표시 · 검색. 마크업 pages/cases.php #vreelFilters · 동작 vreel.js
   ⛔ 그라데이션·캡슐 버튼·글로우 금지(feedback_avoid_ai_style) — 사각 6px · 단색 · 선택 = 흰 바탕 */
.vreel__filters {
    max-width: 1080px; margin: 0 auto 12px; padding: 4px 0 10px;
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: center;
}
@media (min-width: 769px) {
    .vreel__filters { position: sticky; top: -4px; z-index: 2; background: #0b1020; }
}
.vreel__axis { display: inline-flex; border: 1px solid rgba(255,255,255,0.25); border-radius: 6px; overflow: hidden; }
.vreel__axis-btn {
    min-height: 40px; padding: 0 16px; border: 0; background: transparent; color: #c9d4f5;
    font: 700 14px/1 var(--font-sans); cursor: pointer;
}
.vreel__axis-btn + .vreel__axis-btn { border-left: 1px solid rgba(255,255,255,0.25); }
.vreel__axis-btn[aria-pressed="true"] { background: #fff; color: #1e2d7c; }
.vreel__axis-btn:focus-visible { outline: 2px solid #ff9a3c; outline-offset: -2px; }
.vreel__search { position: relative; max-width: 360px; justify-self: end; width: 100%; }
.vreel__search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; color: #9aa6cc; }
.vreel__search input {
    width: 100%; min-height: 40px; padding: 0 12px 0 34px; box-sizing: border-box;
    border: 1px solid rgba(255,255,255,0.25); border-radius: 6px; background: #141b33; color: #eef2ff;
    font: 400 14px var(--font-sans);
}
.vreel__search input::placeholder { color: #9aa6cc; }
.vreel__search input:focus { outline: 2px solid #ff9a3c; outline-offset: 0; border-color: transparent; }
.vreel__chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.vreel__chip {
    display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
    min-height: 44px; padding: 6px 12px; border: 1px solid rgba(255,255,255,0.22); border-radius: 6px;
    background: transparent; color: #eef2ff; text-align: left; cursor: pointer; font-family: var(--font-sans);
}
.vreel__chip:hover { border-color: #ff9a3c; }
.vreel__chip:focus-visible { outline: 2px solid #ff9a3c; outline-offset: 1px; }
.vreel__chip[aria-pressed="true"] { background: #fff; border-color: #fff; color: #0b1020; }
.vreel__chip-t { font-size: 14px; font-weight: 700; line-height: 1.25; white-space: nowrap; }
.vreel__chip-n { margin-left: 6px; font-size: 12px; font-weight: 600; color: #9aa6cc; font-variant-numeric: tabular-nums; }
.vreel__chip[aria-pressed="true"] .vreel__chip-n { color: #4a5578; }
.vreel__chip-s { font-size: 11.5px; line-height: 1.2; color: #9aa6cc; white-space: nowrap; }
.vreel__chip[aria-pressed="true"] .vreel__chip-s { color: #4a5578; }
.vreel__grid > li[hidden] { display: none; }
.vreel__tag { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: #9aa6cc; }
.vreel__empty { max-width: 1080px; margin: 24px auto; text-align: center; font-size: 15px; color: #c9d4f5; }
.vreel__empty[hidden] { display: none; }
.vreel__reset {
    margin-left: 6px; min-height: 40px; padding: 0 14px; border: 1px solid rgba(255,255,255,0.4); border-radius: 6px;
    background: transparent; color: #fff; font: 700 14px var(--font-sans); cursor: pointer;
}
@media (max-width: 768px) {
    .vreel__filters { grid-template-columns: auto minmax(0, 1fr); gap: 8px; margin-bottom: 8px; padding-bottom: 6px; }
    .vreel__axis-btn { padding: 0 12px; font-size: 13px; }
    .vreel__search { max-width: none; }
    .vreel__search input { font-size: 16px; }   /* iOS 가 입력칸을 눌렀을 때 화면을 키우지 않게 */
    /* 칩은 한 줄로 옆으로 밀기(Gemini «휴대폰은 한 줄 가로 밀기 — 두 줄 이상으로 화면을 가리지 말 것») */
    .vreel__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
        margin: 0 -16px; padding: 0 16px 2px; scroll-padding: 0 16px; }
    .vreel__chips::-webkit-scrollbar { display: none; }
    .vreel__chip { flex: 0 0 auto; }
    .vreel__chip-s { display: none; }   /* 휴대폰은 칩 높이를 낮게 — 풀이는 PC 에서만 */
    .vreel__chip { min-height: 44px; }
    .vreel__tag { font-size: 11px; margin-bottom: 3px; }
}