/* 원장의 여정(단계별 솔루션) 페이지 공용 스타일 — /before-opening /opening /after-opening /in-operation
   홈의 여정 섹션과 같은 어휘(서클 넘버·헤어라인·민트 필드)를 페이지 단위로 확장 */

/* 여정 레일 — 4단계 상시 노출, 현재 단계 점등 (PracticePath 번호 레일) */
.journey-rail {
  list-style: none;
  margin: 0 0 var(--space-12);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  border-block: 1px solid var(--color-border);
}

.journey-rail li {
  flex: 1 1 10rem;
}

.journey-rail li + li {
  border-left: 1px solid var(--color-border);
}

.journey-rail a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  text-decoration: none;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: var(--font-size-sm);
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}

.journey-rail a:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

.journey-rail b {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: inherit;
}

.journey-rail li[aria-current="page"] a {
  color: var(--color-primary-deep);
  background: var(--color-primary-soft);
  box-shadow: inset 0 -2px 0 var(--color-primary);
}

@media (max-width: 767px) {
  .journey-rail li {
    flex: 1 1 50%;
  }

  .journey-rail li:nth-child(3) {
    border-left: 0;
  }

  .journey-rail li:nth-child(n + 3) {
    border-top: 1px solid var(--color-border);
  }
}

/* 단계 헤더 */
.journey-kicker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary-deep);
  margin-bottom: var(--space-4);
}

.journey-title {
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  word-break: keep-all;
  text-wrap: pretty;
  margin-bottom: var(--space-6);
}

.journey-title small {
  display: block;
  font-size: 0.5em;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: -0.01em;
  margin-top: var(--space-2);
}

.journey-lede {
  font-size: var(--font-size-lg);
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 52ch;
  margin: 0;
  word-break: keep-all;
  text-wrap: balance;
}

.journey-h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-8);
}

/* 이 단계에서 하는 일 — 체크리스트 */
.journey-checks {
  list-style: none;
  margin: 0 0 var(--space-12);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}

.journey-checks li {
  position: relative;
  padding: var(--space-4) var(--space-4) var(--space-4) 2.4em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  font-weight: 600;
}

.journey-checks li::before {
  content: "✓";
  position: absolute;
  left: var(--space-4);
  font-weight: 700;
  color: var(--color-primary-deep);
}

/* 관련 사업 카드 */
.journey-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 640px) {
  .journey-cards {
    grid-template-columns: 1fr;
  }
}

.journey-card-brand {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-deep);
  margin-bottom: var(--space-2);
}

.journey-card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: 11px; /* 44px 터치 영역 */
  margin-top: calc(var(--space-4) - 11px);
  margin-bottom: -11px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
}

.journey-card-link svg {
  transition: transform 0.2s ease-out;
}

.journey-card-link:hover svg {
  transform: translateX(3px);
}

/* 단계 내비게이션 — 이전/다음 페어(문서 페이지네이션 문법). 전환 CTA는
   detail-cta 스트립으로 분리해 내비와 위계가 섞이지 않게 한다 */
.journey-next__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

.journey-next__stage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease-out, background-color 0.2s ease-out;
}

.journey-next__stage:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

/* 이전 카드 — 화살표가 왼쪽, 텍스트는 그대로 좌정렬 */
.journey-next__stage--prev {
  justify-content: flex-start;
}

.journey-next__label {
  display: block;
  margin: 0 0 var(--space-1);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.journey-next__name {
  display: block;
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: 800;
  letter-spacing: -0.01em;
  word-break: keep-all;
  text-wrap: pretty;
}

.journey-next__stage svg {
  flex: none;
  color: var(--color-primary-deep);
}

/* ---------- 다크 히어로(detail-hero) 위의 여정 어휘 재조색 ----------
   상세페이지 표준(detail.css) 도입 후: 레일·키커·타이틀·리드가 딥 블랙 무대 위에 선다 */
.detail-hero .journey-rail {
  border-color: rgba(248, 250, 252, 0.14);
  margin-bottom: var(--space-12);
}

.detail-hero .journey-rail li + li {
  border-color: rgba(248, 250, 252, 0.14);
}

@media (max-width: 767px) {
  .detail-hero .journey-rail li:nth-child(n + 3) {
    border-top-color: rgba(248, 250, 252, 0.14);
  }
}

.detail-hero .journey-rail a {
  color: rgba(248, 250, 252, 0.55);
}

.detail-hero .journey-rail a:hover {
  background: rgba(248, 250, 252, 0.06);
  color: #ffffff;
}

.detail-hero .journey-rail li[aria-current="page"] a {
  color: var(--color-glow);
  background: rgba(157, 248, 195, 0.12);
  box-shadow: inset 0 -2px 0 var(--color-glow);
}

.detail-hero .journey-kicker {
  color: var(--color-glow);
}

.detail-hero .journey-title {
  background: var(--grad-hero-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.detail-hero .journey-title small {
  color: rgba(248, 250, 252, 0.6);
}

.detail-hero .journey-lede {
  color: rgba(248, 250, 252, 0.72);
}

/* 솔루션 카드 뒤 현장 이미지 슬롯 간격 */
.journey-cards + .detail-imgslot {
  margin-top: var(--space-8);
}

/* 체크리스트 4개 — 태블릿 2×2, 모바일 1열 (auto-fit의 3+1 방지) */
@media (max-width: 900px) {
  .journey-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .journey-checks {
    grid-template-columns: 1fr;
  }
}