/* 화면 전용 — 첫 화면(준비 중, public/index.php). 모바일 먼저, 960px 부터 두 칸. */

.soon { display: grid; gap: var(--space-7); align-items: center; padding-top: var(--space-4); }
.soon-copy { display: grid; gap: var(--space-5); align-content: start; }
.soon-status { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--brand-text); }
.soon h1 { font-size: var(--font-h1); max-width: 14ch; }
.soon-accent { color: var(--brand-text); }
.soon-lead { font-size: var(--text-base); color: var(--sub); max-width: 40ch; }
.soon-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); max-width: 520px; }
.soon-steps li { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border-top: 1px solid var(--line); }
.soon-steps .ico { color: var(--brand-text); margin-top: 2px; }
.soon-steps span { display: grid; gap: 2px; font-size: var(--text-sm); color: var(--sub); }
.soon-steps b { font-size: var(--text-base); color: var(--ink); }

/* 오른쪽 그림: 세로 영상 틀(늘 어두운 영역 — DESIGN.md §1 미리보기 캔버스와 같은 규칙) */
.soon-visual { display: grid; justify-items: center; gap: var(--space-4); padding: var(--space-6) var(--space-4); border-radius: var(--r-lg); background: var(--brand-soft); }
.soon-phone {
  width: min(200px, 60%); aspect-ratio: 9 / 16; border-radius: var(--r-lg); border: 6px solid var(--line);
  background: var(--bg); display: grid; place-items: center; align-content: end; gap: var(--space-2); padding: var(--space-5) var(--space-4); position: relative;
}
.soon-play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: var(--r); display: grid; place-items: center; background: var(--brand-deco); color: var(--on-brand); }
.soon-play .ico { width: 26px; height: 26px; fill: currentColor; }
.soon-caption { display: block; width: 80%; height: 8px; border-radius: var(--r-full); background: var(--line-strong); }
.soon-caption.is-short { width: 55%; background: var(--line); }
.soon-progress { width: min(200px, 60%); }

@media (min-width: 600px) {
  .soon-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
  .soon-steps li { flex-direction: column; gap: var(--space-2); }
}
@media (min-width: 960px) {
  .soon { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-8); padding-top: var(--space-7); }
  .soon h1 { font-size: var(--font-display); }
  .soon-lead { font-size: var(--text-lg); }
  .soon-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .soon-visual { padding: var(--space-8) var(--space-6); }
}
@media (min-width: 1280px) {
  .soon-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}