/* 지그재그 — 장르: 보라 밤하늘 · 하얀 떠 있는 길 · 노란 공
 * 움직임: 첫 화면 공이 지그재그 길을 따라 꺾으며 굴러감 */
:root {
  --ar-bg: #f1ecff; --ar-fg: #22175a; --ar-sub: #54489a; --ar-panel: #ffffff; --ar-line: #22175a; --ar-edge: #22175a;
  --ar-accent: #ffcf3f; --ar-accent-ink: #2a1b05; --ar-accent-text: #6a4fd8; --ar-bad: #d8322a; --ar-veil: rgba(34, 23, 90, 0.92);
  --ar-hero: linear-gradient(#3d2a9e, #7b5cf0); --ar-ratio: 360 / 560;
  --color-bg: var(--ar-bg); --color-text: var(--ar-fg); --color-text-secondary: var(--ar-sub); color-scheme: light;
}
.hero { position: absolute; inset: 0; background:
  linear-gradient(135deg, transparent 46%, #fffaff 46% 54%, transparent 54%) 40px 60px / 120px 120px no-repeat,
  linear-gradient(45deg, transparent 46%, #fffaff 46% 54%, transparent 54%) 160px 60px / 120px 120px no-repeat,
  linear-gradient(135deg, transparent 46%, #fffaff 46% 54%, transparent 54%) 280px 60px / 120px 120px no-repeat; }
.hero::after { content: ""; position: absolute; left: 40px; top: 168px; width: 18px; height: 18px; margin: -9px; border: 2.5px solid #2a1b66; border-radius: 50%; background: #ffcf3f; animation: zz-roll 3.6s linear infinite; }
@keyframes zz-roll { 0% { transform: translate(0, 0); } 33% { transform: translate(120px, -110px); } 66% { transform: translate(240px, 0); } 100% { transform: translate(360px, -110px); } }
.ar-card { background: var(--ar-panel); }