/* 터(址) 장면(대표 11/12, scroll-craft 1순위): 빈 층에 입구·통로·라커가 차례로 들어차는 스크롤 고정 장면.
 * 색은 Astryx Stone 테마 값(대표가 고름)을 이 구간 안에서만 쓴다. 웹폰트 없음. 움직임은 transform·opacity만. */
.teo-scene{
  --st-body:#f0f0f7;--st-surface:#fff;--st-muted:#e2e2e8;--st-text:#25252a;--st-text2:#5f5f64;--st-border:#e2e2e8;--st-strong:#848489;
  --st-seal:#B3261E;--st-mint:#00C6B2;--st-serif:"AppleMyungjo","Nanum Myeongjo","Batang","Noto Serif KR",serif;
  background:var(--st-body);color:var(--st-text);position:relative;height:200vh}
.teo-scene.still{height:auto}
.teo-scene .ts2-stick{position:sticky;top:0;min-height:100vh;box-sizing:border-box;max-width:1180px;margin:0 auto;padding:56px 20px 24px;
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:20px 32px;align-items:start;align-content:center}
.teo-scene.still .ts2-stick{position:static;min-height:0}
.ts2-head{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:0}
.ts2-head h2{margin:0;font-size:clamp(20px,2.4vw,26px)}
.ts2-head .ts2-seal{color:var(--st-seal);font-family:var(--st-serif);border:1.5px solid var(--st-seal);border-radius:4px;padding:0 5px;font-size:18px;line-height:1.3}
.ts2-plan{background:var(--st-surface);border:1px solid var(--st-border);border-radius:12px;padding:16px}
.ts2-plan svg{width:100%;height:auto;display:block}
.ts2-plan .fl{fill:var(--st-surface)}
.ts2-plan .gr{fill:none;stroke:var(--st-border);stroke-width:.5}
.ts2-plan .wl{fill:none;stroke:var(--st-text);stroke-width:3}
.ts2-plan .pl{fill:var(--st-text2)}
.ts2-plan .ai{fill:var(--st-muted)}
.ts2-plan .dr{fill:var(--st-mint)}
.ts2-plan .lb{font-size:12px;text-anchor:middle;fill:var(--st-text2)}
.ts2-plan .lk{fill:#d4f4f0;stroke:var(--st-mint);stroke-width:1.5}
.ts2-plan .ways,.ts2-plan .lk{opacity:0}
.ts2-plan .sl{opacity:0;transition:opacity .4s}
.ts2-plan .sl rect{fill:none;stroke:var(--st-seal);stroke-width:2}
.ts2-plan .sl text{fill:var(--st-seal);font-family:var(--st-serif);font-size:22px;text-anchor:middle}
.teo-scene.done .ts2-plan .sl{opacity:1}
.ts2-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ts2-steps li{display:grid;gap:2px;padding-left:14px;border-left:2px solid var(--st-border);opacity:.45;transition:opacity .3s}
.ts2-steps li b{font-size:16px}
.ts2-steps li span{font-size:14px;color:var(--st-text2)}
.ts2-steps li.on{opacity:.8}
.ts2-steps li.cur{opacity:1;border-left-color:var(--st-seal)}
.ts2-sum{background:var(--st-muted);border-radius:12px;padding:16px 18px;display:grid;gap:4px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.ts2-sum small{color:var(--st-text2);font-size:13px}
.ts2-sum b{font-size:20px}
.ts2-sum span{color:var(--st-text2);font-size:13px;line-height:1.5}
.teo-scene.done .ts2-sum{opacity:1;transform:none}
/* 스크립트가 없거나 동작 줄이기: 완성된 모습 */
.teo-scene:not(.ts2-js) .ways,.teo-scene:not(.ts2-js) .lk,.teo-scene.still .ways,.teo-scene.still .lk{opacity:1}
.teo-scene:not(.ts2-js) .sl,.teo-scene:not(.ts2-js) .ts2-sum{opacity:1;transform:none}
@media (max-width:760px){
  .teo-scene .ts2-stick{grid-template-columns:1fr;gap:14px;padding:56px 16px 20px;align-content:start}
  .teo-scene.ts2-js:not(.still) .ts2-steps li:not(.cur){display:none}
}
@media (prefers-reduced-motion:reduce){.ts2-steps li,.ts2-sum,.ts2-plan .sl{transition:none}}
.teo-scene:not(.ts2-js){height:auto}
.teo-scene:not(.ts2-js) .ts2-stick{position:static;min-height:0}
.teo-scene:not(.ts2-js) .ts2-plan{display:none}