:root {
  --bg: #f7f7f5;
  --text: #1d2521;
  --muted: #6b7570;
  --line: #d9ddd9;
  --school: #2f6b4f;
  --gone: #c9cfcb;
  --ok: #2f6b4f;
  --ng: #b3402f;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  line-height: 1.7;
}
.intro, .checks, .outro { max-width: 640px; margin: 0 auto; padding: 56px 20px 24px; }
.intro h1 { font-size: clamp(1.9rem, 6vw, 2.8rem); line-height: 1.25; margin: 0 0 12px; }
.intro p { color: var(--muted); margin: 0; }

.checks ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.checks li { padding: 12px 0 12px 28px; border-bottom: 1px solid var(--line); position: relative; color: var(--ng); }
.checks li::before { content: "✕"; position: absolute; left: 0; font-weight: 700; }
.checks li.ok { color: var(--ok); }
.checks li.ok::before { content: "✓"; }

/* 스크롤리텔링 레이아웃: 모바일은 도형 고정 + 텍스트가 위로 지나감 */
.scrolly { position: relative; }
.sticky {
  position: sticky; top: 0; height: 55vh; z-index: 1;
  background: var(--bg); border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.sticky svg { width: min(90%, 420px); height: auto; }
#status { margin: 8px 0 0; color: var(--muted); font-size: .9rem; }
.steps { position: relative; z-index: 2; padding: 0 20px; }
.step { min-height: 70vh; display: flex; align-items: center; justify-content: center; }
.step p {
  max-width: 420px; margin: 0; padding: 16px 20px;
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  opacity: .45; transition: opacity .3s;
}
.step.is-active p { opacity: 1; border-color: var(--school); }

.outro { text-align: center; padding-bottom: 96px; color: var(--muted); }

/* 데스크톱: 도형은 왼쪽 고정, 텍스트는 오른쪽 */
@media (min-width: 860px) {
  .scrolly { display: grid; grid-template-columns: 1.2fr 1fr; max-width: 1100px; margin: 0 auto; }
  .sticky { height: 100vh; border-bottom: 0; background: transparent; }
  .step { min-height: 90vh; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .step p { transition: none; }
}