/* 베트남 진행 순서 — 쌓이는 카드 (parts/journey-stack.php · 2026-10-14 메인 시안 H) */
.js-stack { padding: clamp(72px, 8vw, 112px) 0; background: var(--bg-sand); }
.jst { list-style: none; margin: clamp(36px, 4.5vw, 56px) 0 0; padding: 0; }
.jst-c { position: sticky; top: calc(var(--hd-h) + 20px + var(--i) * 16px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  height: clamp(380px, 34vw, 440px); margin-bottom: 36px; background: #fff; border-radius: var(--r-lg, 26px); overflow: hidden;
  box-shadow: 0 -10px 30px rgba(60, 40, 20, .08); }
.jst-c:last-child { margin-bottom: 0; }
.jst-ph { position: relative; margin: 0; }
.jst-ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50%) center; }
.jst-no { position: absolute; left: 22px; top: 14px; font-family: var(--font-num); font-weight: 200; font-size: clamp(56px, 5.4vw, 76px); line-height: 1; letter-spacing: -.05em; color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, .25); }
.jst-bd { padding: clamp(32px, 3.6vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.jst-meta { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; font-weight: 700; color: var(--point-ink); }
.jst-ic { display: grid; font-size: 26px; color: var(--ink); }
.jst-ic .ico { width: 26px; height: 26px; }
.jst-bd h3 { margin: 10px 0 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(23px, 2.1vw, 30px); line-height: 1.35; letter-spacing: -.03em; word-break: keep-all; }
.jst-d { margin: 12px 0 0; font-size: 15.5px; line-height: 1.85; color: var(--ink-2); word-break: keep-all; }
.jst-pay { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 16px 0 0; font-size: 13.5px; font-weight: 700; }
.jst-pay b { font-weight: 700; }
.jst-pay::before { content: ""; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--point); }
.jst-pay span { font-weight: 400; color: var(--ink-3); }
.jst-of { position: absolute; right: 26px; top: 20px; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.js-stack .journey-sum { text-align: center; margin: clamp(36px, 4vw, 52px) 0 0; }

@media (max-width: 760px) {
  .jst-c { top: calc(var(--hd-h) + 12px + var(--i) * 10px); grid-template-columns: 1fr; grid-template-rows: 190px auto; height: auto; margin-bottom: 24px; }
  .jst-bd { padding: 22px 22px 26px; justify-content: flex-start; }
  .jst-d { font-size: 14.5px; line-height: 1.8; }
  .jst-of { top: 14px; right: 16px; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
  .js-stack .journey-sum { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .jst-c { position: relative; top: auto; } }