.magic-story{position:relative;height:calc(var(--scroll-viewport, 100svh) * 6.5);background:#0b0d10;scroll-margin-top:76px;color:#f5f5f7}.magic-stage{position:sticky;top:76px;height:calc(var(--scroll-viewport, 100svh) - 76px);min-height:660px;overflow:hidden;background:radial-gradient(ellipse at 65% 44%,#262c32 0%,#15191e 38%,#0b0d10 75%)}.magic-copy{position:absolute;z-index:2;left:6%;top:9%;width:31%;pointer-events:none}.magic-copy .eyebrow{font-size:12px;color:#9da9b6;letter-spacing:.17em;margin:0 0 20px}.magic-copy h2{font-size:clamp(44px,5.7vw,84px);line-height:1.1;letter-spacing:-.055em;margin:0;font-weight:600}.magic-copy h2 span{color:#b7c9da}.magic-intro{font-size:22px;line-height:1.6;color:#b9c0c8;margin:22px 0}.magic-caption{margin-top:48px;max-width:340px}.magic-caption>span{font-size:12px;letter-spacing:.12em;color:#829aae}.magic-caption h3{font-size:clamp(22px,2.3vw,32px);line-height:1.4;margin:12px 0;letter-spacing:-.04em}.magic-caption p{font-size:16px;line-height:1.85;color:#aeb8c2;margin:0;word-break:keep-all}.magic-scene{position:absolute;inset:0 0 176px 29%;}.magic-scene canvas{display:block;width:100%;height:100%}.magic-loading{position:absolute;inset:40% 10% auto;text-align:center;color:#b9c8d4;font-size:14px}.magic-controls{position:absolute;bottom:18px;left:6%;right:6%;z-index:3}.magic-progress{height:2px;background:#ffffff13;margin:0 0 12px;overflow:hidden}.magic-progress>span{height:100%;width:0;display:block;background:#bed5e8}.magic-nav{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.magic-nav button{font:inherit;font-size:14px;color:#a6b0bb;background:transparent;border:0;border-radius:8px;text-align:left;padding:8px 10px;cursor:pointer;transition:background .25s,color .25s}.magic-nav button span{font-size:11px;display:block;letter-spacing:.12em;color:#768a9d;margin-bottom:6px}.magic-nav button[aria-pressed=true]{background:#ffffff0c;color:#f2f6fa}.magic-nav button[aria-pressed=true] span{color:#bed5e8}.magic-nav button:focus-visible,.magic-foot a:focus-visible{outline:2px solid #a6c9e8;outline-offset:3px}.magic-foot{display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:12px;color:#8393a2;margin-top:14px}.magic-foot a{color:#b3c6d7}.magic-note{font-size:12px;line-height:1.65;color:#82909e;margin:10px 0 0;max-width:1050px}.magic-static{height:auto}.magic-static .magic-stage{position:relative;top:0}.magic-failed .magic-scene{display:flex;align-items:center;justify-content:center;padding:12%}.magic-failed .magic-loading{position:static;font-size:20px;line-height:1.8}.magic-failed .magic-nav{display:none}
@media(min-width:701px) and (max-height:850px){.magic-copy{top:5%}.magic-copy h2{font-size:56px}.magic-intro{font-size:18px;margin:16px 0}.magic-caption{margin-top:28px}.magic-caption h3{font-size:26px}.magic-caption p{font-size:15px}}
@media(max-width:900px){.magic-nav button{font-size:12px;padding:8px 6px}.magic-copy{width:34%;left:5%}.magic-copy h2{font-size:50px}}
@media(max-width:700px){.magic-story{height:calc(var(--scroll-viewport, 100svh) * 5.7);scroll-margin-top:66px}.magic-stage{top:66px;height:calc(var(--scroll-viewport, 100svh) - 66px);min-height:740px}.magic-copy{top:25px;left:6%;width:88%}.magic-copy .eyebrow{font-size:11px;margin-bottom:10px}.magic-copy h2{font-size:40px}.magic-intro{display:none}.magic-caption{margin-top:18px;max-width:none}.magic-caption>span{font-size:11px}.magic-caption h3{font-size:23px;margin:7px 0}.magic-caption p{font-size:14px;line-height:1.6;max-width:330px}.magic-scene{inset:210px 0 224px}.magic-controls{left:5%;right:5%;bottom:14px}.magic-nav{grid-template-columns:repeat(4,1fr);gap:3px}.magic-nav button{font-size:12px;padding:5px 4px;min-height:44px}.magic-nav button span{font-size:10px;margin-bottom:3px}.magic-progress{margin-bottom:7px}.magic-foot{margin-top:8px;font-size:11px}.magic-note{font-size:10px;line-height:1.5;margin-top:8px}.magic-static{height:auto}.magic-static .magic-stage{top:0}}
@media(prefers-reduced-motion:reduce){.magic-story{height:auto}.magic-stage{position:relative;top:0}.magic-nav button{transition:none}.magic-hint{font-size:0}.magic-hint:after{content:'버튼으로 공정을 선택하세요';font-size:12px}}

.magic-foot button{font:inherit;color:#b3c6d7;padding:0;background:transparent;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}.magic-foot button:focus-visible{outline:2px solid #a6c9e8;outline-offset:4px}@media(max-width:700px){.magic-note{font-size:12px}.magic-stage{min-height:790px}.magic-scene{top:240px;bottom:255px}.magic-nav button{font-size:12px}.magic-nav button span{font-size:11px}.magic-caption p{font-size:16px}.magic-foot{gap:8px;flex-wrap:wrap}.magic-hint{display:none}}

@media(max-width:700px){.magic-stage{min-height:0}}