/* ============================================================
   sec-journey — 3단계 여정 (3색 아이덴티티: 틸/인디고/바이올렛)
   전 규칙 #sec-journey 하위로 스코프. tokens.css 변수 사용.
   ============================================================ */

#sec-journey .journey {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--space-4), 3vw, var(--space-6));
  position: relative;
  counter-reset: journey;
}

/* 단계별 신호색 (로컬 변수로 카드가 참조) */
#sec-journey .journey__step--teal   { --step-c: var(--c-teal);   --step-vivid: var(--c-teal-vivid);   --step-soft: var(--c-teal-soft);   --step-glow: var(--c-teal-glow); }
#sec-journey .journey__step--indigo { --step-c: var(--c-indigo); --step-vivid: var(--c-indigo-vivid); --step-soft: var(--c-indigo-soft); --step-glow: var(--c-indigo-glow); }
#sec-journey .journey__step--violet { --step-c: var(--c-violet); --step-vivid: var(--c-violet-vivid); --step-soft: var(--c-violet-soft); --step-glow: var(--c-violet-glow); }

#sec-journey .journey__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}

/* ---- 번호 마커 + 누적 연결선 ---- */
#sec-journey .journey__marker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  position: relative;
}
#sec-journey .journey__num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  background: linear-gradient(135deg, var(--step-vivid), var(--step-c));
  box-shadow: 0 8px 20px -8px var(--step-glow);
  position: relative;
  z-index: 2;
}
/* 단계 사이 연결선 (누적 표현) — 마커에서 다음 단계로 이어짐 */
#sec-journey .journey__marker::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 44px;
  height: 2px;
  width: calc(100% - 44px + clamp(var(--space-4), 3vw, var(--space-6)));
  background: linear-gradient(90deg, var(--step-c), var(--step-glow) 60%, transparent);
  z-index: 1;
}
/* 마지막 단계는 연결선 없음 */
#sec-journey .journey__step--violet .journey__marker::after { display: none; }

/* ---- 카드 (글라스 패널) ---- */
#sec-journey .journey__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: clamp(var(--space-5), 2.4vw, var(--space-6));
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--step-c);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  position: relative;
  overflow: hidden;
}
/* 상단 은은한 오로라 워시 */
#sec-journey .journey__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 120px;
  background: radial-gradient(120% 80% at 15% 0%, var(--step-soft), transparent 70%);
  opacity: .7;
  pointer-events: none;
}
#sec-journey .journey__card:hover,
#sec-journey .journey__card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--step-c) 45%, var(--line));
}

#sec-journey .journey__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  background: var(--step-soft);
  color: var(--step-c);
  font-size: 1.7rem;
  margin-bottom: var(--space-3);
}
#sec-journey .journey__icon i { line-height: 1; }

#sec-journey .journey__tag {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--step-c);
}
#sec-journey .journey__title {
  position: relative;
  z-index: 1;
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: var(--lh-tight);
}
#sec-journey .journey__desc {
  position: relative;
  z-index: 1;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
  word-break: keep-all;
  margin-top: var(--space-1);
}

/* ---- 반응형 ---- */
@media (max-width: 860px) {
  #sec-journey .journey {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  /* 세로 배치에서는 연결선을 마커 아래 세로선으로 전환 */
  #sec-journey .journey__marker::after {
    top: 44px;
    left: 21px;
    width: 2px;
    height: calc(100% + var(--space-5) - 44px);
    background: linear-gradient(180deg, var(--step-c), var(--step-glow) 60%, transparent);
  }
}

/* ---- 모션 축소 존중 (장식 트랜지션만 축소) ---- */
@media (prefers-reduced-motion: reduce) {
  #sec-journey .journey__card { transition: none; }
  #sec-journey .journey__card:hover,
  #sec-journey .journey__card:focus-within { transform: none; }
}