.control-guide[hidden]{display:none!important}.control-guide{position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:32px;background:rgba(245,244,240,.86);overscroll-behavior:contain;animation:guide-appear .36s cubic-bezier(.22,.75,.18,1)}
.control-guide *{box-sizing:border-box}.guide-dialog{width:min(100%,490px);max-height:calc(100dvh - 64px);overflow:auto;overscroll-behavior:contain;border:1px solid #c7c6bf;background:#f5f4f0;padding:26px 32px;color:#292929}
.guide-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:23px}.guide-brand{display:flex;align-items:center;gap:10px;font:700 26px/1 Arial,Helvetica,sans-serif;letter-spacing:-.8px}.guide-brand .logo,.guide-brand img{width:26px;height:32px;display:block;object-fit:contain}
.guide-close{min-height:44px;min-width:66px;text-align:right}.guide-mono{font:10px/1.8 'IBM Plex Mono',monospace;letter-spacing:.7px}.guide-close,.guide-kicker,.guide-counter,.guide-back{color:#777773}.guide-kicker{margin:0 0 12px}
.guide-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;border-bottom:1px solid #c7c6bf}.guide-tab{position:relative;min-height:44px;color:#777773}.guide-tab[aria-selected=true]{color:#292929}.guide-tab[aria-selected=true]:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:#292929}
.guide-art{margin:23px 0 20px;min-height:170px;display:grid;place-items:center}.guide-art svg{display:block;width:100%;height:180px;max-width:340px;overflow:visible}.gesture-frame{fill:none;stroke:#aaa99f;stroke-width:1}.gesture-line{fill:none;stroke:#aaa99f;stroke-width:1}.gesture-dot,.gesture-wheel{fill:#292929}.gesture-ripple{fill:none;stroke:#aaa99f;stroke-width:1;transform-box:fill-box;transform-origin:center}
.guide-dialog h2{font:500 27px/1.2 Arial,Helvetica,sans-serif;letter-spacing:-.8px;margin:0 0 15px}.guide-description{font:13px/1.95 'IBM Plex Sans KR',Arial,sans-serif;color:#686862;min-height:79px;margin:0;word-break:keep-all;overflow-wrap:anywhere}.guide-bottom{display:flex;justify-content:space-between;align-items:center;gap:18px;border-top:1px solid #c7c6bf;margin-top:24px;padding-top:14px}.guide-actions{display:flex;gap:22px;align-items:center}.guide-actions button{min-height:44px}.guide-actions [hidden]{display:none!important}
.how-to-open{font:10px/24px 'IBM Plex Mono',monospace;letter-spacing:.6px}.guide-mobile-bar{display:none}.guide-dialog button:focus-visible,.how-to-open:focus-visible{outline:1px solid #888882;outline-offset:4px}
.gesture-scroll{--gx:0px;--gy:-32px}.gesture-pinch-left{--gx:-30px;--gy:0px}.gesture-pinch-right{--gx:30px;--gy:0px}.gesture-drag,.gesture-mouse-drag{--gx:54px;--gy:0px}.gesture-wheel{--gx:0px;--gy:9px}
.gesture-scroll,.gesture-pinch-left,.gesture-pinch-right,.gesture-drag,.gesture-mouse-drag,.gesture-wheel{animation:gesture-move 3.2s cubic-bezier(.4,0,.2,1) infinite}.gesture-press{transform-box:fill-box;transform-origin:center;animation:gesture-press 3.2s ease-in-out infinite}.gesture-ripple{animation:gesture-ripple 3.2s ease-out infinite}
@keyframes gesture-move{0%,15%{opacity:0;transform:translate(0,0)}24%{opacity:1;transform:translate(0,0)}65%,78%{opacity:1;transform:translate(var(--gx),var(--gy))}88%,100%{opacity:0;transform:translate(var(--gx),var(--gy))}}
@keyframes gesture-press{0%,16%,86%,100%{opacity:0;transform:scale(1)}28%,66%{opacity:1;transform:scale(.78)}74%{opacity:1;transform:scale(1)}}
@keyframes gesture-ripple{0%,30%{opacity:0;transform:scale(.5)}38%{opacity:.7;transform:scale(.5)}68%,100%{opacity:0;transform:scale(1.8)}}
@keyframes guide-appear{from{opacity:0}to{opacity:1}}
@media(max-width:1000px){.control-guide{bottom:auto;height:var(--mobile-vh,100dvh);padding:20px max(20px,env(safe-area-inset-left),env(safe-area-inset-right))}.guide-dialog{max-height:calc(var(--mobile-vh,100dvh) - 40px);padding:22px 24px}.guide-mobile-bar{display:flex;grid-column:1/-1;grid-row:4;align-items:center;justify-content:center;gap:16px;min-width:0}.guide-mobile-bar .mobile-map-hint{margin:0;min-width:0;font-size:9px;text-align:left}.guide-mobile-bar .how-to-open{min-height:44px;flex:none;font-size:9px;border-bottom:1px solid #c7c6bf;line-height:1.8}.guide-dialog h2{font-size:25px}.guide-description{min-height:90px}}
@media(max-width:360px){.control-guide{padding:14px}.guide-dialog{padding:18px 20px;max-height:calc(var(--mobile-vh,100dvh) - 28px)}.guide-mobile-bar{gap:10px}.guide-mobile-bar .mobile-map-hint{font-size:8px}.guide-brand{font-size:24px}.guide-art{margin-top:15px}.guide-art svg{height:160px}.guide-description{font-size:12px}.guide-tabs{gap:12px}}
@media(prefers-reduced-motion:reduce){.control-guide,.guide-art svg *{animation:none}.gesture-ripple{opacity:.4}}
