/* /pbl-story 코드 렌더 장면용 레이아웃 (pbl-story.css 뒤에 로드). 헤더·모달·버튼 스타일은 pbl-story.css 그대로 사용 */
#world{display:block}
.st-track{position:relative}
.st-stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden}
.st-canvas{position:absolute;inset:0;display:block}
.st-fade{position:absolute;inset:0;background:#081216;opacity:0;pointer-events:none}
.st-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#081216b8,#08121648 45%,transparent 70%)}
.st-copy{position:absolute;left:7.2vw;top:42%;width:min(62vw,880px);opacity:0;will-change:opacity,transform;pointer-events:none}
.st-eyebrow{font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.2em;color:#b1d8c9;margin:0 0 25px}
.st-title{font-weight:500;font-size:clamp(46px,5.4vw,86px);line-height:1.18;letter-spacing:-.065em;white-space:pre-line;margin:0;text-shadow:0 4px 40px #08121666;word-break:keep-all}
.st-body{margin-top:28px;white-space:pre-line;font-size:15px;font-weight:400;line-height:1.85;letter-spacing:-.025em;color:#c5cfcb}
.st-tags{margin:28px 0 0;padding:0;list-style:none;color:#9eb8ad;font-size:10px;letter-spacing:.08em}
.st-cta{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}
.st-btn{border-radius:2px;font-size:12px;font-weight:500;padding:15px 22px;text-decoration:none}
.st-btn--p{background:#e8efe8;color:#0a201a}.st-btn--g{border:1px solid #e8efe84a;color:#e8efe8}
.st-hint{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;font:9px ui-monospace,monospace;letter-spacing:.2em;color:#b6c4c0;pointer-events:none}
.st-hint i{display:block;width:1px;height:26px;background:#b3cdc35c;position:relative;overflow:hidden}
.st-hint i:after{content:"";position:absolute;left:0;top:-8px;width:1px;height:8px;background:#9ee9d0;animation:st-drop 1.6s infinite}
@keyframes st-drop{to{top:26px}}
.st-bar{position:fixed;z-index:90;left:0;top:0;height:2px;width:100%;background:#9ee9d0;transform-origin:left;transform:scaleX(0)}
.st-route{position:absolute;right:4vw;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:20px}
.st-route b{display:block;width:5px;height:5px;border-radius:50%;background:#7f9b93;transition:transform .3s,background .3s}
.st-route b{position:relative}.st-route b.on{background:#9ee9d0;box-shadow:0 0 0 5px #9ee9d014;transform:scale(1.3)}
.st-route b.on::after{content:attr(title);position:absolute;right:18px;top:50%;transform:translateY(-50%) scale(.77);transform-origin:right center;white-space:nowrap;font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;color:#c0d3ca}
.st-grain{position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
body.stills-only .st-hint i:after{animation:none}
@media(max-width:860px){
 .st-copy{left:7vw;right:10vw;top:auto;bottom:calc(14dvh + env(safe-area-inset-bottom));width:auto}
 .st-title{font-size:clamp(32px,8.6vw,58px);line-height:1.22;letter-spacing:-.055em}.st-eyebrow{font-size:8px;letter-spacing:.13em;margin-bottom:14px}
 .st-body{font-size:12px;line-height:1.9;margin-top:16px}.st-tags{margin-top:16px}.st-tags li{font-size:9px}
 .st-scrim{background:linear-gradient(0deg,#081216ed,#08121699 40%,transparent 78%)}
 .st-route{right:2px;gap:9px}.st-route b.on::after{display:none}.st-hint{bottom:calc(80px + env(safe-area-inset-bottom));font-size:8px}
 .st-cta{gap:8px;margin-top:25px}.st-btn{padding:13px 16px;font-size:11px}
}
@media(max-height:520px) and (orientation:landscape){.st-copy{top:28%;bottom:auto;left:7vw;width:78vw}.st-title{font-size:32px}.st-eyebrow{margin-bottom:12px}.st-body{margin-top:12px;font-size:11px}.st-tags{display:none}.st-cta{margin-top:15px}.st-hint{display:none}}

.ab-bg{background-image:url(/story/code-auto.webp)}