/* ═══════════════════════════════════════════════════════════
   STEP-PROCESS — step-process.css  (창업 절차 STEP 01~06)
   · #cost(연노랑 tint) 다음 · 흰 배경(인접 톤과 교차).
   · 세로 1열 카드 스택, 카드 내부 = 좌 이미지 | 우 텍스트 가로 flex.
   · 모바일: 카드 내부 세로 전환(이미지 위 / 텍스트 아래).
   · STEP 라벨·주체 배지 = 기존 골드 강조 토큰(--gold/--gold-dark) 재사용, 직접 hex 없음.
   · 등장: scroll-reveal(data-reveal="fade-up" + data-reveal-delay stagger).
     반복재생/unobserve 금지·prefers-reduced-motion 정지는 scroll-reveal.js/.css 가 담당.
   · 검정 풀배경·이모지 없음. transform/opacity 전용(엔진 위임).
═══════════════════════════════════════════════════════════ */

.step {
  background: var(--white, #ffffff);
  scroll-margin-top: 80px;
}

/* ── 섹션 헤드 ── */
.step__head {
  text-align: center;
  max-width: 1160px;
  margin: 0 auto clamp(36px, 5vw, 56px);
}
.step__title {
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-weight: 900;
  line-height: 1.4;
  color: var(--color-text, #1a1a1a);
  margin: 0;
  word-break: keep-all;
}
.step__title em {
  font-style: normal;
  color: var(--gold, #f0c000);
}
.step__sub {
  margin: 14px 0 0;
  font-size: clamp(0.96rem, 1.4vw, 1.08rem);
  line-height: 1.7;
  color: var(--color-text-sub, #555);
  word-break: keep-all;
}

/* ── 카드 세로 1열 스택 ── */
.step__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vw, 28px);
}
.step__card {
  display: flex;
  align-items: stretch;
  gap: clamp(20px, 3.5vw, 36px);
  background: var(--white, #ffffff);
  border: 1px solid color-mix(in srgb, var(--gold, #f0c000) 22%, #ffffff);
  border-radius: 18px;
  padding: clamp(16px, 2.4vw, 24px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}

/* ── 좌: 이미지(src="#" 빈상태 → 점선 박스 + 폴백 라벨) ── */
.step__media {
  position: relative;
  flex: 0 0 38%;
  max-width: 38%;
  border-radius: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--gold, #f0c000) 8%, #ffffff);
  border: 1px dashed color-mix(in srgb, var(--gold, #f0c000) 28%, #ffffff);
}
.step__media::before {
  content: 'STEP 이미지';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--gold, #f0c000) 55%, #777777);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 1px;
  pointer-events: none;
}
.step__img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(120px, 16vw, 180px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  color: transparent; /* 빈/깨진 상태 alt·아이콘 노출 최소화 */
  font-size: 0;
}

/* ── 우: 텍스트 ── */
.step__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.step__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.step__label {
  font-family: var(--font-en, sans-serif);
  /* 가독성 강화: 본문/이름보다 먼저 눈에 들어오도록 size·weight 상향 */
  font-size: clamp(0.95rem, 1.4vw, 1.12rem);
  font-weight: 900;
  letter-spacing: 1.2px;
  color: var(--gold-dark, #c9a000); /* 골드 강조 토큰 재사용 */
}
.step__role {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold, #f0c000) 14%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--gold, #f0c000) 36%, #ffffff);
  color: var(--gold-dark, #c9a000);
  font-size: 0.78rem;
  font-weight: 700;
  word-break: keep-all;
}
.step__name {
  margin: 2px 0 0;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--color-text, #1a1a1a);
  word-break: keep-all;
}
.step__text {
  margin: 0;
  font-size: clamp(0.92rem, 1.3vw, 1.02rem);
  line-height: 1.7;
  color: var(--color-text-sub, #555);
  word-break: keep-all;
}

/* ═══════════════════════════════════════════════════════════
   반응형 — 모바일: 카드 내부 가로 → 세로(이미지 위 / 텍스트 아래)
═══════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .step__card {
    flex-direction: column;
    gap: 14px;
  }
  .step__media {
    flex: none;
    max-width: 100%;
  }
  .step__img {
    aspect-ratio: 16 / 9;
  }
}