/* 고객 여정 — 휴대폰은 세로 줄, 넓으면 가로 줄. Crest: 정거장 이름 Headline 2 · 설명 Label 1 · 표시는 ContentBadge */
.jy { display: grid; gap: var(--space-28); }
.jy-ph { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4) var(--space-8); margin-bottom: var(--space-12); }
.jy-ph b { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--label-strong); }
.jy-ph span { font-size: 13px; color: var(--label-alternative); }
.jy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.jy-st { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: var(--space-12); padding: 0 0 var(--space-20); align-content: start; }
.jy-st::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 2px; width: 2px; border-radius: 1px; background: var(--line-normal-alternative); }
.jy-st:last-child::before { display: none; }
.jy-dot { width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--background-normal); box-shadow: inset 0 0 0 1.5px var(--line-normal); position: relative; z-index: 1; display: grid; place-items: center; margin-top: 2px; }
.jy-st.done .jy-dot { background: var(--primary-normal); box-shadow: none; }
.jy-st.done .jy-dot::after { content: ""; width: 14px; height: 14px; background: var(--static-white); -webkit-mask: var(--cr-icon-check) center / contain no-repeat; mask: var(--cr-icon-check) center / contain no-repeat; }
.jy-st.done::before { background: var(--primary-normal); }
.jy-st.now .jy-dot { background: var(--primary-normal); box-shadow: 0 0 0 5px var(--cr-primary-soft); }
.jy-st.now .jy-dot::after { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--static-white); }
.jy-st h3 { font-size: 17px; line-height: 28px; font-weight: 600; color: var(--label-strong); }
.jy-st h3 em { font-style: normal; display: inline-flex; align-items: center; height: 20px; padding: 0 var(--space-6); border-radius: var(--radius-6); font-size: 11px; font-weight: 500;
  letter-spacing: .0311em; color: var(--primary-normal); background: var(--cr-primary-soft); margin-left: var(--space-4); vertical-align: 2px; }
.jy-you { font-size: 14px; line-height: 20px; color: var(--label-normal); margin-top: var(--space-2); }
.jy-get { font-size: 13px; line-height: 18px; color: var(--label-alternative); margin-top: var(--space-2); }
.jy-when { display: inline-flex; align-items: center; height: 20px; margin-top: var(--space-6); padding: 0 var(--space-6); border-radius: var(--radius-6);
  font-size: 11px; font-weight: 500; letter-spacing: .0311em; color: var(--label-alternative); background: var(--fill-normal); }
.jy-st.done h3, .jy-st.done .jy-you { color: var(--label-alternative); }

/* 지금 여기 · 다음 */
.jy-here { display: grid; gap: var(--space-8); margin: var(--space-16) 0 var(--space-20); }
.jy-here > div { background: var(--background-normal); border-radius: var(--radius-16); padding: var(--space-16) var(--space-20); box-shadow: var(--cf-card); }
.jy-here > .jy-next { background: var(--fill-alternative); box-shadow: none; }
.jy-here b { display: block; font-size: 18px; line-height: 26px; font-weight: 600; color: var(--label-strong); margin-top: var(--space-8); }
.jy-here p { font-size: 14px; line-height: 20px; color: var(--label-neutral); margin-top: var(--space-2); }
.jy-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-6); border-radius: var(--radius-6); font-size: 12px; font-weight: 500; letter-spacing: .0252em;
  color: var(--static-white); background: var(--primary-normal); }
.jy-tag.soft { color: var(--label-alternative); background: var(--fill-normal); }

@media (min-width: 900px) {
  .jy-list { grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-12); }
  .jy-st { grid-template-columns: 1fr; gap: var(--space-12); padding: 0; }
  .jy-st::before { left: 30px; right: -8px; top: 13px; bottom: auto; width: auto; height: 2px; }
  .jy-here { grid-template-columns: 1.3fr 1fr; }
}
/* 좁은 앱 화면(설문·내 공간)에서는 넓어도 세로 줄, 두 구간을 나란히 */
@media (min-width: 900px) {
  main.app .jy { grid-template-columns: 1fr 1fr; gap: var(--space-24); }
  main.app .jy-list { grid-auto-flow: row; gap: 0; }
  main.app .jy-st { grid-template-columns: 24px 1fr; gap: var(--space-12); padding: 0 0 var(--space-20); }
  main.app .jy-st::before { left: 11px; right: auto; top: 26px; bottom: 2px; width: 2px; height: auto; }
}
.me-journey { margin-top: var(--space-12); }
.me-journey .eyebrow { margin-bottom: var(--space-16); }