*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}@font-face{font-family:AJonghapMyeongjoB;src:local("A종합명조B"),local("AJonghapMyeongjoB"),local("A Jonghap Myeongjo B");font-weight:400;font-style:normal}:root{--bg: #0a0a0c;--text: #e8e4dc;--text-dim: rgba(232, 228, 220, .42);--text-faint: rgba(232, 228, 220, .18);--font-en: "IM Fell English", Georgia, serif;--font-title: "AJonghapMyeongjoB", "Noto Serif KR", Georgia, serif;--ease: cubic-bezier(.22, 1, .36, 1)}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font-en);-webkit-font-smoothing:antialiased}#app{position:fixed;top:0;right:0;bottom:0;left:0}#bg-canvas{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}#webcam-pip{position:fixed;bottom:2rem;left:2rem;width:200px;z-index:30;border-radius:10px;overflow:hidden;opacity:0;transform:translateY(12px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease);box-shadow:0 4px 24px #00000080,0 0 0 1px #ffffff0f}#webcam-pip.active{opacity:1;transform:translateY(0)}#webcam{width:100%;display:block;transform:scaleX(-1);border-radius:10px}#pip-overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border-radius:10px;pointer-events:none}.pip-progress-ring{position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;width:calc(100% + 10px);height:calc(100% + 10px);pointer-events:none;transform:rotate(-90deg);z-index:2}.pip-progress-track{fill:none;stroke:#ffffff0a;stroke-width:1.5}.pip-progress-fill{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:301.6;stroke-dashoffset:301.6;transition:stroke .8s var(--ease)}.pip-border{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:10px;border:1px solid rgba(255,255,255,.08);pointer-events:none;transition:border-color 1s var(--ease),box-shadow 1s var(--ease)}.screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 2rem;text-align:center;opacity:0;pointer-events:none;transition:opacity 1.8s var(--ease);gap:1.4rem}.screen.active{opacity:1;pointer-events:all}.title-lockup{display:flex;flex-direction:column;align-items:center;gap:.7rem;margin-bottom:2.5rem;position:relative}.title-glow{position:absolute;width:380px;height:160px;top:50%;left:50%;transform:translate(-50%,-58%);background:radial-gradient(ellipse at center,rgba(200,168,75,.14) 0%,transparent 70%);filter:blur(30px);pointer-events:none;animation:glowBreath 6s ease-in-out infinite}.logotype{font-family:var(--font-title);font-size:clamp(4rem,11vw,8rem);font-weight:400;letter-spacing:.06em;color:var(--text);line-height:1}.logotype-sub{font-size:clamp(.55rem,1.3vw,.78rem);letter-spacing:.26em;text-transform:uppercase;color:var(--text-dim)}.color-bar{position:fixed;bottom:2rem;left:50%;transform:translate(-50%);z-index:33;display:flex;flex-direction:column;align-items:center;gap:.5rem;opacity:0;pointer-events:none;transition:opacity 1.2s var(--ease)}.color-bar.visible{opacity:1}.color-swatches{display:flex;gap:5px;align-items:flex-end}.color-swatch{width:32px;min-height:4px;height:4px;border-radius:2px;transition:height .25s var(--ease),opacity .3s}.live-color-name{font-family:var(--font-en);font-size:clamp(.5rem,1vw,.62rem);letter-spacing:.08em;color:var(--text-dim);transition:color .6s var(--ease);min-height:1em}.action-btn{background:transparent;border:1px solid rgba(232,228,220,.25);color:var(--text);font-family:var(--font-en);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;padding:.8rem 2.8rem;cursor:pointer;border-radius:0;transition:border-color .4s,background .4s,letter-spacing .4s}.action-btn:hover{border-color:var(--text);background:#e8e4dc0f;letter-spacing:.3em}.msg-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:35;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;pointer-events:none;opacity:0;transition:opacity 1.5s var(--ease)}.msg-overlay.visible{opacity:1}.msg-text{font-family:var(--font-en);font-size:clamp(.9rem,2.2vw,1.3rem);font-style:italic;color:var(--text);letter-spacing:.05em;line-height:1.6;text-align:center}.msg-sub{font-size:clamp(.5rem,1vw,.65rem);letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim)}.print-btn{position:fixed;bottom:2rem;right:2rem;z-index:38;background:transparent;border:1px solid rgba(232,228,220,.2);color:var(--text-dim);font-family:var(--font-en);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;padding:.6rem 1.8rem;cursor:pointer;border-radius:0;opacity:0;pointer-events:none;transition:opacity 1s var(--ease),border-color .4s,background .4s}.print-btn.visible{opacity:1;pointer-events:all}.print-btn:hover{border-color:var(--text);background:#e8e4dc0f;color:var(--text)}.print-preview{position:fixed;top:0;right:0;bottom:0;left:0;z-index:36;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.8rem;background:#050507f7;pointer-events:none;opacity:0;transition:opacity 1.8s var(--ease)}.print-preview.visible{opacity:1}.result-layout{display:flex;gap:3.5rem;align-items:center;justify-content:center}.result-main{display:flex;flex-direction:column;align-items:center;gap:.8rem}.result-form-label{font-family:var(--font-en);font-size:clamp(.45rem,.9vw,.55rem);letter-spacing:.25em;text-transform:uppercase;color:var(--text-faint);opacity:0;transition:opacity 1s var(--ease) .3s}.print-preview.visible .result-form-label{opacity:1}#preview-pattern{max-width:min(45vw,440px);max-height:min(58vh,380px);width:100%;border:1px solid rgba(232,228,220,.08);box-shadow:0 0 80px #c8a84b0f,0 16px 60px #0009;background:transparent;transform:scale(.85);opacity:0;clip-path:circle(0% at 50% 50%);transition:transform 2s var(--ease) .5s,opacity 1.5s var(--ease) .5s,clip-path 2.5s var(--ease) .5s}.print-preview.visible #preview-pattern{transform:scale(1);opacity:1;clip-path:circle(75% at 50% 50%)}.result-form-names{font-family:var(--font-en);font-size:clamp(.6rem,1.2vw,.78rem);font-style:italic;color:var(--text-dim);letter-spacing:.06em;opacity:0;transition:opacity 1s var(--ease) 2s}.print-preview.visible .result-form-names{opacity:1}.result-chain{display:flex;flex-direction:column;gap:.9rem;min-width:160px;max-width:220px}.result-chain-title{font-family:var(--font-en);font-size:clamp(.42rem,.8vw,.5rem);letter-spacing:.25em;text-transform:uppercase;color:var(--text-faint);margin-bottom:.3rem;opacity:0;transition:opacity 1s var(--ease) .6s}.print-preview.visible .result-chain-title{opacity:1}.chain-step{display:flex;flex-direction:column;gap:.2rem;opacity:0;transform:translateY(8px);transition:opacity .8s var(--ease),transform .8s var(--ease)}.chain-label{font-family:var(--font-en);font-size:clamp(.4rem,.8vw,.5rem);letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint)}.chain-value{font-family:var(--font-en);font-size:clamp(.75rem,1.3vw,.92rem);color:var(--text);letter-spacing:.03em;line-height:1.4}.chain-meaning{font-style:italic;color:var(--text-dim);font-size:clamp(.65rem,1.1vw,.82rem)}.chain-arrow{font-family:var(--font-en);font-size:.6rem;color:var(--text-faint);padding-left:.1rem;opacity:0;transition:opacity .6s var(--ease)}.print-preview.visible .chain-step:nth-child(2){opacity:1;transform:translateY(0);transition-delay:1s}.print-preview.visible .chain-arrow:nth-child(3){opacity:1;transition-delay:1.4s}.print-preview.visible .chain-step:nth-child(4){opacity:1;transform:translateY(0);transition-delay:1.6s}.print-preview.visible .chain-arrow:nth-child(5){opacity:1;transition-delay:2s}.print-preview.visible .chain-step:nth-child(6){opacity:1;transform:translateY(0);transition-delay:2.2s}.result-footer{display:flex;flex-direction:column;align-items:center;gap:.8rem}.start-desc{font-family:var(--font-en);font-size:clamp(.65rem,1.3vw,.82rem);font-style:italic;color:var(--text-dim);line-height:2;letter-spacing:.03em;text-align:center}.start-desc-note{font-family:var(--font-en);font-size:clamp(.5rem,1vw,.62rem);letter-spacing:.15em;text-transform:uppercase;color:var(--text-faint);margin-bottom:.8rem}.idle-sub-hint{font-family:var(--font-en);font-size:clamp(.55rem,1.1vw,.7rem);font-style:italic;color:var(--text-dim);letter-spacing:.04em;line-height:1.6}.print-btn-main{background:transparent;border:1px solid rgba(232,228,220,.3);color:var(--text);font-family:var(--font-en);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;padding:.9rem 3rem;cursor:pointer;border-radius:0;opacity:0;pointer-events:none;transition:opacity 1.2s var(--ease) 3.2s,border-color .4s,background .4s,letter-spacing .4s}.print-preview.visible .print-btn-main{opacity:1;pointer-events:all}.print-btn-main:hover{border-color:var(--text);background:#e8e4dc14;letter-spacing:.28em}.preview-label-sub{font-family:var(--font-en);font-size:clamp(.45rem,.85vw,.54rem);font-style:italic;color:var(--text-faint);letter-spacing:.04em;opacity:0;transition:opacity 1.5s var(--ease) 3.6s}.print-preview.visible .preview-label-sub{opacity:1}.idle-invite{position:fixed;top:0;right:0;bottom:0;left:0;z-index:32;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;pointer-events:none;opacity:0;transition:opacity 2s var(--ease)}.idle-invite.visible{opacity:1}.idle-title{font-family:var(--font-title);font-size:clamp(3rem,9vw,6rem);font-weight:400;letter-spacing:.06em;color:var(--text);line-height:1}.idle-desc{font-family:var(--font-en);font-size:clamp(.65rem,1.4vw,.85rem);font-style:italic;letter-spacing:.04em;color:var(--text-dim);line-height:1.6}.idle-sub{font-family:var(--font-en);font-size:clamp(.55rem,1.2vw,.72rem);letter-spacing:.22em;text-transform:uppercase;color:var(--text-dim);animation:idlePulse 4s ease-in-out infinite}@keyframes idlePulse{0%,to{opacity:.4}50%{opacity:1}}.idle-rings{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.idle-ring{position:absolute;top:50%;left:50%;border-radius:50%;border:1px solid}.idle-ring-1{width:240px;height:240px;margin:-120px 0 0 -120px;border-color:#c8a84b12;animation:idleRingSpin 35s linear infinite}.idle-ring-2{width:320px;height:320px;margin:-160px 0 0 -160px;border-color:#2e7d9b0d;animation:idleRingSpin 50s linear infinite reverse}.idle-ring-3{width:400px;height:400px;margin:-200px 0 0 -200px;border-color:#7b5b8d0a;animation:idleRingSpin 70s linear infinite}@keyframes idleRingSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.watermark{position:fixed;bottom:1.5rem;right:2rem;z-index:30;font-family:var(--font-title);font-size:.65rem;letter-spacing:.18em;color:#e8e4dc00;pointer-events:none;transition:color 2s var(--ease)}.watermark.visible{color:#e8e4dc1f}.privacy-note{position:fixed;bottom:1.8rem;left:50%;transform:translate(-50%);font-size:.52rem;letter-spacing:.1em;color:var(--text-faint);white-space:nowrap;pointer-events:none;line-height:1.8}#debug-panel{position:fixed;top:1rem;left:1rem;z-index:100;background:#000000e0;border:1px solid rgba(255,255,255,.06);padding:1rem;border-radius:3px;font-size:.58rem;font-family:SF Mono,Fira Code,monospace;color:#a0c8a0bf;line-height:1.6;max-width:240px;transition:opacity .3s;pointer-events:none}#debug-panel.debug-hidden{opacity:0}.intro-desc{position:fixed;top:0;right:0;bottom:0;left:0;z-index:42;display:flex;align-items:center;justify-content:center;background:#0a0a0cf2;opacity:0;pointer-events:none;transition:opacity .8s var(--ease)}.intro-desc.visible{opacity:1}.intro-desc-text{font-family:var(--font-en);font-size:clamp(1rem,2.5vw,1.5rem);font-style:italic;color:#fff;letter-spacing:.04em;line-height:1.6;text-align:center;padding:0 2rem}.door-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:31;overflow:hidden;pointer-events:none;opacity:0;transition:opacity 1.5s var(--ease)}.door-overlay.visible{opacity:1}.door-panel{position:absolute;top:0;width:50%;height:100%;background-color:#0a0a0c73;background-image:linear-gradient(45deg,transparent 49%,rgba(232,228,220,.08) 49%,rgba(232,228,220,.08) 51%,transparent 51%),linear-gradient(-45deg,transparent 49%,rgba(232,228,220,.08) 49%,rgba(232,228,220,.08) 51%,transparent 51%),linear-gradient(45deg,transparent 49%,rgba(232,228,220,.04) 49%,rgba(232,228,220,.04) 51%,transparent 51%),linear-gradient(-45deg,transparent 49%,rgba(232,228,220,.04) 49%,rgba(232,228,220,.04) 51%,transparent 51%);background-size:55px 55px,55px 55px,27.5px 27.5px,27.5px 27.5px;transition:transform 1.6s var(--ease);will-change:transform}.door-left{left:0;border-right:1px solid rgba(232,228,220,.06)}.door-right{right:0;border-left:1px solid rgba(232,228,220,.06)}.door-overlay.opening .door-left{transform:translate(-105%)}.door-overlay.opening .door-right{transform:translate(105%)}@keyframes glowBreath{0%,to{opacity:.5;transform:translate(-50%,-58%) scale(1)}50%{opacity:1;transform:translate(-50%,-58%) scale(1.3)}}@media (max-width: 480px){.logotype{font-size:clamp(2.8rem,14vw,4.5rem)}#webcam-pip{width:140px;bottom:1rem;left:1rem}.privacy-note{font-size:.45rem;white-space:normal;max-width:80vw}.handle-ring{width:48px;height:48px;border-width:4px}}