@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap");@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css");.procedure-page{--navy:#0f1d3a;--navy-soft:#2a3a5c;--paper:#fff;--bg:#fafaf8;--rule:#e8e6e1;--muted:#8a8780;--transition:cubic-bezier(0.4,0,0.2,1);font-family:Pretendard Variable,Pretendard,system-ui,sans-serif;color:var(--navy);background:var(--bg);min-height:100vh;line-height:1.6;max-width:560px;margin:0 auto;padding:80px 32px 60px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.procedure-page,.procedure-page *{box-sizing:border-box}.procedure-page header{margin-bottom:80px}.procedure-page .brand{font-family:EB Garamond,serif;font-size:32px;font-weight:500;font-style:italic;letter-spacing:.02em;line-height:1;margin:0}.procedure-page .rule{border:none;border-top:1px solid var(--rule);margin:32px 0 24px}.procedure-page .page-title{font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0}.procedure-page .stage{position:relative;margin-bottom:56px}.procedure-page .illustration-frame{position:relative;width:100%;aspect-ratio:4/3;background:var(--paper);border:1px solid var(--rule);overflow:hidden}.procedure-page .illustration{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(.96);transition:opacity .8s var(--transition),transform 1.2s var(--transition);pointer-events:none}.procedure-page .illustration.active{opacity:1;transform:scale(1)}.procedure-page .illustration svg{width:100%;height:100%;display:block}.procedure-page .progress{position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--rule)}.procedure-page .progress-fill{height:100%;background:var(--navy);width:0}.procedure-page .caption{margin-top:40px;min-height:130px}.procedure-page .step-num{font-family:EB Garamond,serif;font-size:13px;font-style:italic;color:var(--muted);letter-spacing:.05em;margin-bottom:12px}.procedure-page .step-title{font-size:22px;font-weight:600;line-height:1.35;letter-spacing:-.01em;margin:0 0 16px;transition:opacity .6s var(--transition)}.procedure-page .step-desc{font-size:15px;color:var(--navy-soft);line-height:1.7;transition:opacity .6s var(--transition);max-width:460px;margin:0}.procedure-page .caption.fading .step-desc,.procedure-page .caption.fading .step-title{opacity:0}.procedure-page .indicator{display:flex;gap:6px;margin-top:56px;align-items:center}.procedure-page .dot{width:28px;height:28px;background:transparent;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}.procedure-page .dot:after{content:"";display:block;width:8px;height:8px;border-radius:50%;background:var(--rule);transition:all .4s var(--transition)}.procedure-page .dot.active:after{background:var(--navy);transform:scale(1.4)}.procedure-page .dot.passed:after,.procedure-page .dot:hover:after{background:var(--navy-soft)}.procedure-page .controls{display:flex;align-items:center;gap:24px;margin-top:32px;padding-top:24px;border-top:1px solid var(--rule)}.procedure-page .play-toggle{background:none;border:none;color:var(--navy);font-family:inherit;font-size:13px;letter-spacing:.04em;cursor:pointer;padding:0;display:flex;align-items:center;gap:8px}.procedure-page .play-toggle:hover{opacity:.6}.procedure-page .play-toggle .icon{display:inline-block;width:10px;height:10px;position:relative}.procedure-page .play-toggle.playing .icon:after,.procedure-page .play-toggle.playing .icon:before{content:"";position:absolute;top:0;width:3px;height:10px;background:var(--navy)}.procedure-page .play-toggle.playing .icon:before{left:1px}.procedure-page .play-toggle.playing .icon:after{right:1px}.procedure-page .play-toggle:not(.playing) .icon:before{content:"";position:absolute;left:1px;top:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--navy)}.procedure-page .step-counter{font-family:EB Garamond,serif;font-size:13px;font-style:italic;color:var(--muted);letter-spacing:.05em;margin-left:auto}.procedure-page footer{margin-top:100px;padding-top:24px;border-top:1px solid var(--rule);font-size:12px;color:var(--muted);line-height:1.7;letter-spacing:.02em}.procedure-page .illustration svg .stroke{stroke:var(--navy);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}.procedure-page .illustration svg .stroke-thin{stroke:var(--navy);stroke-width:.8;fill:none;stroke-linecap:round}.procedure-page .illustration svg .fill{fill:var(--navy);stroke:none}@keyframes proc-breathe{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}.procedure-page .illustration.active .breathe{animation:proc-breathe 3.5s ease-in-out infinite;transform-origin:center}@keyframes proc-blink{0%,50%{opacity:1}51%,to{opacity:0}}.procedure-page .illustration.active .blink{animation:proc-blink 1s steps(1) infinite}@keyframes proc-draw-check{0%{stroke-dashoffset:30}to{stroke-dashoffset:0}}.procedure-page .illustration.active .draw-check{stroke-dasharray:30;stroke-dashoffset:30;animation:proc-draw-check .9s ease-out .7s forwards}@keyframes proc-float-arrow{0%,to{transform:translateY(0)}50%{transform:translateY(6px)}}.procedure-page .illustration.active .float-arrow{animation:proc-float-arrow 2s ease-in-out infinite}@keyframes proc-scissor{0%,60%,to{transform:rotate(0deg)}20%,40%{transform:rotate(-8deg)}}.procedure-page .illustration.active .scissor{animation:proc-scissor 3s ease-in-out infinite;transform-origin:100px 80px}@keyframes proc-label-fade{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.procedure-page .illustration.active .label-in{transform-origin:center;animation:proc-label-fade 1s ease-out .4s backwards}@keyframes proc-lock-open{0%,30%{transform:rotate(0deg)}50%,to{transform:rotate(-15deg)}}.procedure-page .illustration.active .lock-shackle{animation:proc-lock-open 2.5s ease-in-out .8s forwards;transform-origin:bottom right}@keyframes proc-slide-arrow{0%,to{transform:translateX(0);opacity:.5}50%{transform:translateX(8px);opacity:1}}.procedure-page .illustration.active .slide-arrow{animation:proc-slide-arrow 2s ease-in-out infinite}@media (max-width:480px){.procedure-page{padding:56px 24px 48px}.procedure-page .brand{font-size:28px}.procedure-page .step-title{font-size:19px}.procedure-page .step-desc{font-size:14px}.procedure-page header{margin-bottom:56px}}