/* =====================================================================
   복구천사 복구 가이드 — STEP 세로형(에디토리얼 밴드) 공통 스타일
   탭(슬라이드) 방식 STEP을 스크롤형 세로 밴드로 전환 + 모바일 최적화
   모든 가이드 페이지가 이 한 파일만 링크하면 동일하게 적용됩니다.
   (prefix 무관: pq- / bb- / bl- / cl- / cv- / ps- / rn- / sl- ... 전부 대응)
   ===================================================================== */

/* --- 1. 탭 네비게이션 · 단계 이동 버튼 제거 (세로형엔 불필요) --- */
[class*="tabs-wrap"],
[class*="step-nav"],
[class*="warn-nav"]{ display: none !important; }

/* --- 2. 모든 패널 펼치기 (STEP 또는 경고형 warn-panel; 세로로 전부 노출) --- */
[class*="step-panel"],
[class*="warn-panel"]{ display: flex !important; flex-direction: column; animation: none !important; }

/* --- 3. steps-frame / warnings-frame을 투명 컨테이너로 (테두리/패딩 제거) --- */
[class*="steps-frame"],
[class*="warnings-frame"]{
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  max-width: 1080px;
  margin: 0 auto;
}

/* --- 4. 각 STEP을 에디토리얼 밴드로 (flex+gap으로 내부 간격 균일하게 유지) --- */
.vc-band{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 40px 40px;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 28px;
  background: #ffffff;
  border: 1px solid #e6e6ea;
}
.vc-band.vc-alt{ background: #efeaf7; border-color: transparent; }

/* --- 핀 말풍선이 이미지 우측 경계에서 잘리지 않도록 (전 페이지 공통) --- */
[class*="step-image-wrap"]{ overflow: visible !important; }
[class*="step-image-wrap"] > img,
[class*="step-image-wrap"] > picture > img{ border-radius: 10px; }
.vc-band:last-child{ margin-bottom: 0; }

/* 밴드 내부 콘텐츠는 워터마크 위로 + 세로 간격은 gap이 일괄 담당(개별 margin 제거) */
.vc-band > *{ position: relative; z-index: 1; margin-top: 0 !important; margin-bottom: 0 !important; }
.vc-band > .vc-ghost{ z-index: 0; }

/* 거대 번호 워터마크 */
.vc-ghost{
  position: absolute;
  top: -24px;
  right: 28px;
  font-size: 150px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.05em;
  color: rgba(108, 63, 197, .09);
  pointer-events: none;
  font-family: system-ui, -apple-system, sans-serif;
}
.vc-band.vc-alt .vc-ghost{ color: rgba(108, 63, 197, .14); }

/* 밴드 안의 STEP 헤더 여백 살짝 정리 */
.vc-band [class*="step-head"]{ margin-top: 4px; }

/* 예상시간 pill 줄바꿈 방지 */
[class*="step-time"]{ white-space: nowrap; }

/* =====================================================================
   4-b. 스틱이 단계 네비게이션 (페이지 위치 표시) — JS가 자동 생성
   스크롤 중 "지금 몇 단계인지"를 항상 보여주고, 탭하면 해당 단계로 이동.
   ===================================================================== */
.vc-stepnav{
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 12px;
  margin: 0 0 22px;
  background: rgba(255,255,255,.93);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid #e6e6ea;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,.05);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.vc-stepnav-chip{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1.5px solid #e0e0e6;
  font-size: 12.5px;
  font-weight: 700;
  color: #4a4a4a;
  text-decoration: none;
  cursor: pointer;
  transition: .18s;
  flex-shrink: 0;
}
.vc-stepnav-chip:hover{ border-color: #0a0a0a; color: #0a0a0a; }
.vc-stepnav-chip.active{ background: #0a0a0a; color: #fff; border-color: #0a0a0a; }
.vc-stepnav-n{
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #ece7f5; color: #6C3FC5;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800;
  flex-shrink: 0;
}
.vc-stepnav-chip.active .vc-stepnav-n{ background: #6C3FC5; color: #fff; }

/* =====================================================================
   5. 모바일 최적화 (<= 768px)
   ===================================================================== */
@media (max-width: 768px){
  [class*="steps-frame"],
  [class*="warnings-frame"]{ max-width: 100%; }

  .vc-band{
    padding: 24px 16px;
    border-radius: 18px;
    margin-bottom: 18px;
    gap: 15px;
  }
  .vc-ghost{ font-size: 82px; top: -10px; right: 12px; }

  /* 스틱 단계 네비 모바일 조정 */
  .vc-stepnav{ padding: 9px; margin-bottom: 16px; border-radius: 13px; gap: 6px; }
  .vc-stepnav-chip{ padding: 8px 12px; font-size: 12px; }

  /* 정보/설명 카드 1열로 */
  [class*="step-info-grid"]{ grid-template-columns: 1fr !important; }
  [class*="step-anno-cards"]{ grid-template-columns: 1fr !important; }

  /* 이미지 풀폭 */
  [class*="step-image-wrap"]{ max-width: 100% !important; width: auto !important; }

  /* --- 핀: 모바일에서는 '숫자 마커'만 표시 (텍스트 넘침/겹침 방지) --- */
  /* 보조 핀(optional-mobile-hide)은 숨기고, 핵심 핀만 정확한 좌표에 동그란 번호로.
     숫자는 아래 설명 카드와 1:1 매칭되어 정보 손실 없음. */
  [class*="-pin"].optional-mobile-hide{ display: none !important; }
  [class*="-pin"]:not(.optional-mobile-hide){
    display: inline-flex !important;
    padding: 0 !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px;
    border-radius: 50% !important;
    font-size: 0 !important;
    gap: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.4) !important;
  }
  [class*="-pin"]:not(.optional-mobile-hide) .num{
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }
  [class*="-pin"] br{ display: none !important; }
}

@media (max-width: 480px){
  .vc-band{ padding: 20px 13px; }
  .vc-ghost{ font-size: 66px; right: 8px; }
  [class*="-pin"]{ width: 22px !important; height: 22px !important; min-width: 22px; }
  [class*="-pin"] .num{ font-size: 11px !important; }
}


/* =====================================================================
   범례(legend) 전용 anno-card 보정 — 본문 없이 번호+제목만 있는 카드
   ===================================================================== */
.pq-step-anno-card-head:last-child{ margin-bottom: 0 !important; }
.pq-step-anno-card:has(.pq-step-anno-card-head:last-child){ display: flex; align-items: center; }