.tour-page{background:#f3f4f1}.tour-page main{max-width:1180px}
.tour-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 -12px 20px;padding:10px 12px;background:#f3f4f1e0;backdrop-filter:blur(12px);border-bottom:1px solid #e3e7e2}
.tour-track{display:flex;align-items:center;gap:12px;font-size:14px}
.tour-dots{display:flex;gap:6px}.tour-dots i{position:relative;width:26px;height:5px;border-radius:9px;background:#dbe0dc;cursor:pointer;transition:.25s}.tour-dots i::after{content:"";position:absolute;inset:-9px -3px}.tour-dots i.is-done{background:#9dcdb7}.tour-dots i.is-on{background:var(--accent);width:38px}
.tour-demo{margin-left:auto;font-size:12px;color:#8a6a1f;background:#fbf3e0;border-radius:99px;padding:5px 12px}.tour-demo-line{color:#8a6a1f;font-size:13px}
/* 말풍선: 지금 비추는 요소 옆 빈 자리에 붙는다. 자리는 JS가 매 스텝 다시 계산한다. */
.tour-say{position:fixed;z-index:32;top:56px;left:16px;max-width:340px;padding:16px 19px 17px;border-radius:14px;opacity:0;
 background:var(--paper);border:1px solid var(--line);box-shadow:0 24px 50px -22px rgba(9,17,14,.6);
 transition:top .45s cubic-bezier(.2,.8,.2,1),left .45s cubic-bezier(.2,.8,.2,1),opacity .25s ease}
.tour-say.is-placed{opacity:1}
.tour-say b{display:block;font-size:18.5px;letter-spacing:-.02em;line-height:1.32;margin-bottom:6px}
.tour-say p{margin:0;color:var(--muted);line-height:1.6;font-size:13.5px}
.tour-say.is-key{border-left:3px solid var(--accent);padding-left:16px}.tour-say.is-key b{color:var(--accent)}
.key-chip{display:inline-block;font-size:11px;font-weight:750;letter-spacing:.09em;color:var(--accent);background:var(--accent2);border-radius:99px;padding:4px 11px;margin-bottom:10px}
.say-arrow{position:absolute;width:13px;height:13px;background:var(--paper);transform:rotate(45deg);box-shadow:0 3px 8px -2px rgba(9,17,14,.3)}
.say-bottom .say-arrow{top:-6px}.say-top .say-arrow{bottom:-6px}
.say-left .say-arrow{right:-6px}.say-right .say-arrow{left:-6px}
.say-actions{margin-top:13px;display:flex;justify-content:flex-end}
.say-next{border:0;border-radius:10px;padding:8px 17px;font:inherit;font-size:13px;font-weight:750;cursor:pointer;
 background:linear-gradient(135deg,#2eb983,#8ef2cc);color:#04150f}
.say-next:hover{filter:brightness(1.06)}
/* 좁은 화면에서는 옆에 붙일 자리가 마땅치 않으니 아래 시트로 고정한다. */
.tour-say.say-fixed{left:12px!important;right:12px;top:auto!important;bottom:12px;max-width:none}
.tour-say.say-fixed .say-arrow{display:none}
/* 화면은 창처럼 보이게 감싼다. 안쪽은 제품 UI 그대로, 클릭만 막는다. */
.tour-screen{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 80px #21362c1f,0 2px 8px #21362c0a;overflow:hidden;pointer-events:none}
.screen-chrome{display:flex;align-items:center;gap:6px;padding:11px 16px;background:#f7f8f6;border-bottom:1px solid var(--line)}
.screen-chrome i{width:9px;height:9px;border-radius:50%;background:#dcdfda}.screen-chrome i:first-child{background:#eab6ad}.screen-chrome i:nth-child(2){background:#ecd6a4}.screen-chrome i:nth-child(3){background:#b5d9c2}
.screen-chrome span{margin-left:10px;font:650 10px/1 monospace;letter-spacing:.12em;color:#96a09a}
.screen-body{padding:26px 24px;background:var(--bg)}
.screen-body .heading{margin-bottom:22px}.screen-body textarea,.screen-body input{background:#fbfcfb}
/* 등장 연출: 요소가 순서대로 떠오른다. */
.pop{opacity:0;animation:tourpop .6s cubic-bezier(.16,.84,.3,1) forwards}
@keyframes tourpop{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
/* 실행 로그는 재생하듯 한 줄씩 나타난다. */
.log-line{display:none}.log-line.on{display:inline;animation:login .3s ease-out}
@keyframes login{from{opacity:0;transform:translateX(-4px)}}
.log-line.is-warn{color:#ffcf9c;font-weight:600}
.scene-log{min-height:190px}
.scene-done{display:none;font-size:12px;font-weight:700;color:var(--accent);background:var(--accent2);border-radius:99px;padding:3px 10px}
.tour-step.scene-ended .scene-done{display:inline-block;animation:donepop .25s ease}
@keyframes donepop{from{opacity:0;transform:scale(.9)}}
.scene-replay{margin-left:auto;pointer-events:auto;border-color:transparent;background:#f1f3f0;color:var(--muted);font-size:12px;padding:4px 10px;cursor:pointer}
.scene-replay:hover{background:var(--accent2);color:var(--accent)}
.tour-screen .progress-track i{transition:none}
.tour-studio{display:grid;grid-template-columns:340px 1fr;gap:16px;padding:0;height:auto;min-height:0}
.tour-studio .studio-panel{overflow:visible;padding:0 18px 18px}.tour-studio .studio-preview{max-height:460px}
.tour-preview{padding:22px 24px;overflow:hidden;font-size:14px}.tour-preview pre{margin:0;font-size:14px;line-height:1.7}
.tour-preview-doc p{margin:.45em 0}
/* 넘김 버튼은 스크롤 위치와 무관하게 항상 손 닿는 곳에 붙어 있는다. */
.tour-nav{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:12px;margin:24px -12px 0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#f3f4f1e0;backdrop-filter:blur(12px);border-top:1px solid #e3e7e2}
.tour-hint{color:#a5aeaa;font-size:12px;margin:0 auto}
/* 아래쪽에 여유를 둬야 낮은 곳을 비출 때 화면 가운데로 끌어올 수 있다. */
.tour-stage{padding-bottom:150px}
/* 스포트라이트: 지금 이야기하는 곳만 남기고 나머지를 덮는다. 구멍은 그림자 하나로 만든다. */
#tour-spot{position:fixed;z-index:30;pointer-events:none;border-radius:16px;
 box-shadow:0 0 0 9999px rgba(8,15,13,.72),0 0 0 1px rgba(46,185,131,.55),0 0 44px rgba(46,185,131,.22);
 transition:top .55s cubic-bezier(.2,.8,.2,1),left .55s cubic-bezier(.2,.8,.2,1),width .55s cubic-bezier(.2,.8,.2,1),height .55s cubic-bezier(.2,.8,.2,1)}
/* 설명과 조작은 덮개 위에 남아 계속 읽힌다. */
/* 덮개 위에 남는 것들. 스포트라이트가 유일한 '불'이 되도록 모두 어두운 유리판으로 둔다. */
.tour-bar,.tour-nav,.tour-say,#tour-end{z-index:32}
.tour-page .tour-bar{background:rgba(10,19,16,.86);border-bottom-color:rgba(255,255,255,.1);color:#e6f3ee}
.tour-page .tour-bar .back,.tour-page .tour-track{color:#cfe3db}
.tour-page .tour-dots i{background:rgba(255,255,255,.18)}
.tour-page .tour-dots i.is-done{background:#59c99b}
.tour-page .tour-dots i.is-on{background:#8ef2cc}
.tour-page .tour-demo{color:#ffd9a0;background:rgba(245,180,83,.14)}
.tour-say{color:#eaf7f1;background:rgba(12,22,18,.94);border-color:rgba(255,255,255,.12);
 box-shadow:0 26px 60px -30px #000;backdrop-filter:blur(14px)}
.tour-say p{color:#b9d2c9}
.tour-say.is-key{border-left-color:#8ef2cc}.tour-say.is-key b{color:#8ef2cc}
.key-chip{color:#04150f;background:#8ef2cc}
.say-arrow{background:#0f1c17;box-shadow:0 3px 10px -2px rgba(0,0,0,.5)}
.tour-page .tour-nav{background:rgba(10,19,16,.86);border-top-color:rgba(255,255,255,.1)}
.tour-page .tour-nav button{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#e6f3ee}
.tour-page .tour-nav button:hover{background:rgba(255,255,255,.14)}
.tour-page .tour-hint{color:#87a49a}
#tour-end{position:relative;color:#eaf7f1}
.tour-closing{color:#cfe3db}
/* 스크롤하는 동안에는 따라붙기만 한다. 효과를 켜 두면 요소보다 늦게 따라와 흔들려 보인다. */
.tour-scrolling #tour-spot,.tour-scrolling .tour-say{transition:opacity .25s ease}
@media(prefers-reduced-motion:reduce){#tour-spot{transition:none}}
#tour-end{margin-top:28px;padding:22px 24px;background:#fff;border:1px solid var(--line);border-radius:16px}
.tour-closing{margin:0 0 14px;font-size:18px;font-weight:650;letter-spacing:-.02em}.tour-end-actions{display:flex;gap:10px;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){.pop,.tour-step.is-in .tour-say,.log-line.on{animation:none;opacity:1}.log-line{display:inline}}
@media(max-width:900px){.tour-studio{grid-template-columns:1fr}.tour-studio .studio-preview{order:-1}}
@media(max-width:700px){.screen-body{padding:16px 12px}.tour-demo{margin-left:0}.tour-hint{display:none}.tour-end-actions .button{width:100%;text-align:center}.screen-body .pipeline{display:block}.tour-bar{position:static;margin:0 0 16px;padding:0;background:none;border:0;backdrop-filter:none}}