/* ============================================================
   STIZ Custom Catalog (custom.html) 전용 스타일 — TASK-401 리디자인
   기반: dev/storefront-redesign 브리프 TASK-401 (방향 B: 3D 유지)
   ⚠️ 하드코딩 색상 금지 — CSS 변수(var(--*)) + 디자인시스템 토큰 사용
   ⚠️ 리스킨 전용: 기존 커스텀 상품 API 로드/필터/카드 로직(custom.html <script>)은 그대로 유지
   ⚠️ Tailwind 빌드CSS(css/tailwind.css)에 없는 유틸은 순수 CSS로 작성 (E-26)
   ============================================================ */

/* ─── 히어로 (다크 배경 + 반투명 배경 이미지) ─────────────── */
/* 기존 인라인 <style> 규칙을 그대로 이관 — 겉모습 100% 동일 유지 */
.custom-hero {
    min-height: 560px;
    background: var(--stiz-black);
}

.custom-hero__image {
    opacity: 0.42;
}

/* ─── 히어로 하단 진행 스텝 배지 (상품선택→무료시안→…) ──── */
.custom-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 8px 13px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

/* ─── 종목 필터 탭 (전체/농구/축구/배구/팀웨어/연습복) ────── */
/* JS의 [data-filter] 클릭 → is-active 토글로 활성 표시. 클릭 로직은 <script> 보존 */
.custom-tab {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--stiz-white);
    color: var(--gray-700);
    padding: 9px 15px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    transition: 180ms ease;
}

.custom-tab:hover,
.custom-tab.is-active {
    border-color: var(--stiz-black);
    background: var(--stiz-black);
    color: var(--stiz-white);
}

/* ─── 방식 안내 카드 (상품 먼저 / 3D 랩) ─────────────────── */
.custom-method-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--stiz-white);
    padding: 28px;
    transition: border-color 180ms ease, transform 180ms ease;
}

.custom-method-card:hover {
    border-color: var(--stiz-black);
    transform: translateY(-2px);
}

/* ─── 커스텀 상품 그리드 (모바일 2 → 태블릿 3 → 데스크탑 4) ── */
/* 순수 CSS 미디어쿼리로 다열 그리드 구성 (빌드CSS 반응형 유틸 미의존, E-26) */
.custom-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 18px;
}

/* 상품 카드 좌상단 CUSTOM 배지 */
.custom-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: var(--stiz-black);
    color: var(--stiz-white);
    padding: 5px 9px;
    font-size: 10px;
    font-weight: 900;
}

/* 카드 주 클릭 영역(이미지+이름+가격) → 상세페이지 링크.
   앵커는 기본 inline이라 이미지가 full-width로 안 늘어나므로 block 지정.
   색상은 부모(.stiz-product-card)의 텍스트 색을 그대로 상속받게 inherit 처리. */
.custom-card-main {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* 하단 견적받기 CTA → 시안요청 페이지로 가는 별도 형제 링크.
   메타 영역과 좌측 정렬을 맞추기 위해 상단 마진만 부여. */
.custom-card-cta {
    text-decoration: none;
}

/* ─── 상태 표시(로딩/에러/빈 목록=배구 준비중) 공통 박스 ──── */
.custom-empty {
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    padding: 56px 20px;
    text-align: center;
}

@media (min-width: 768px) {
    .custom-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 42px 24px;
    }
}

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

@media (max-width: 640px) {
    .custom-hero {
        min-height: 520px;
    }

    .custom-method-card {
        padding: 22px;
    }
}

/* ============================================================
   하단 5스텝 프로세스 배지 (접수→시안→수정·확정→주문서→제작)
   TASK-401 신규 추가 — 순수 CSS 그리드. 새 Tailwind 유틸 미사용.
   ============================================================ */
/* 데스크탑: 5칸 가로 배치 / 태블릿 이하: 반응형으로 줄어듦(2~3칸) */
.custom-steplist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

/* 각 스텝 카드: 번호 배지 + 아이콘 + 제목 + 설명 */
.custom-steplist__item {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--stiz-white);
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 좌상단 원형 번호 배지 (검정 배경 + 흰 숫자) */
.custom-steplist__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--stiz-black);
    color: var(--stiz-white);
    font-size: 12px;
    font-weight: 900;
}

.custom-steplist__icon {
    color: var(--stiz-black);
    font-size: 26px;
}

.custom-steplist__title {
    font-size: 15px;
    font-weight: 900;
    color: var(--stiz-black);
    margin: 0;
}

.custom-steplist__desc {
    font-size: 12px;
    line-height: 1.5;
    color: var(--gray-500);
    margin: 0;
}

/* 스텝 사이 화살표(≥1180px에서만 노출) — 카드 우측에 다음 단계로 잇는 시각 신호 */
@media (min-width: 1180px) {
    .custom-steplist__item:not(:last-child)::after {
        content: "chevron_right";
        font-family: "Material Symbols Outlined";
        position: absolute;
        top: 50%;
        right: -14px;
        transform: translateY(-50%);
        color: var(--border-strong);
        font-size: 20px;
        z-index: 1;
    }
}

/* 태블릿: 5칸을 한 줄에 넣기 좁으므로 3칸으로 줄바꿈 */
@media (max-width: 1179px) {
    .custom-steplist {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* 모바일: 2칸 */
@media (max-width: 640px) {
    .custom-steplist {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .custom-steplist__item {
        padding: 16px 14px;
    }
}