@import url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root{--ink:#294e46;--cream:#f6f4eb;--green:#365f53;--yellow:#f5d575}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:'Noto Sans KR',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:0}button:focus-visible,a:focus-visible{outline:3px solid #dc906a;outline-offset:4px}main{max-width:1280px;margin:auto;padding:26px 40px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d8ded1;padding-bottom:22px}.brand{display:flex;gap:12px;align-items:center;color:inherit;text-decoration:none;font-size:36px}.brand span{font-family:Jua,sans-serif;font-size:23px}.brand small{display:block;font:9px sans-serif;letter-spacing:2px;margin-top:5px}.open{font-size:11px;color:#778879}.icon{background:none;font-size:12px}.heading{display:flex;justify-content:space-between;align-items:center;padding:29px 0 25px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700}h1{font-size:34px;letter-spacing:-1.8px;margin:9px 0}h1 em{font-style:normal;color:#799b7a}.heading p{font-size:12px;color:#869087;margin:0}.stamp{border:2px solid #8a9b7b;border-radius:50%;width:86px;height:86px;text-align:center;padding-top:13px;font-size:12px;line-height:19px;transform:rotate(12deg);color:#7c9270}.stamp b{font-size:10px}.dashboard{display:flex;background:#e9eee3;border:1px solid #d7dfd0;border-radius:12px;padding:17px 25px;margin-bottom:20px;gap:60px}.dashboard small{display:block;font-size:10px;color:#7d8c7e;margin-bottom:5px}.dashboard strong{font-size:20px;letter-spacing:1px}.dashboard strong span{font-size:12px}.hearts{color:#d88476}.dashboard button{margin-left:auto;background:transparent;font-size:12px}.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:22px}.work{background:#fffdf6;border:1px solid #dce1d4;border-radius:14px;overflow:hidden}.work-title{display:flex;justify-content:space-between;padding:17px 22px;font-size:11px}.work-title b{margin-left:9px}.work-title>span:last-child{color:#949e91}.scene{position:relative;background:#e8eddf;background-image:linear-gradient(#dce4d340 1px,transparent 1px),linear-gradient(90deg,#dce4d340 1px,transparent 1px);background-size:24px 24px;overflow:hidden}.wall-label{text-align:center;font-size:8px;letter-spacing:2px;position:absolute;top:20px;width:100%;color:#92a18b}canvas{display:block;width:100%;touch-action:none}.board-label{position:absolute;bottom:16px;width:100%;text-align:center;letter-spacing:2px;font-size:8px;color:#879781;pointer-events:none}.controls{padding:18px;display:flex;align-items:center;gap:22px}#steam{display:flex;align-items:center;gap:10px;padding:10px 17px;border-radius:10px;background:var(--green);color:white;font-size:24px;position:relative;overflow:hidden;min-width:140px}#steam span{font-size:12px;text-align:left;z-index:1}#steam small{display:block;font-size:9px;opacity:.65;margin-top:3px}#steam i{position:absolute;height:3px;background:#c4d6a6;bottom:0;left:0;width:100%}#steam:active{transform:scale(.97)}.temperature,.progress{flex:1;font-size:10px}.temperature b,.progress b{float:right}.track{height:6px;background:#e7e9df;border-radius:4px;margin:9px 0;overflow:hidden}.track i{display:block;height:100%;width:0;background:#e4ad6c;transition:width .1s}.progress .track i{background:#7f9f7b}.controls small{font-size:8px;color:#9a9f91}aside{display:flex;flex-direction:column;gap:15px}.closet{background:#d5b595;border:8px solid #bea17f;border-radius:12px;height:350px;position:relative;box-shadow:inset 0 0 0 2px #ad8e6e;overflow:hidden}.closet-head{text-align:center;padding:18px 0;font-family:Jua;font-size:17px}.closet-head small{display:block;font:8px sans-serif;letter-spacing:3px;margin-top:5px;color:#806d59}.rail{height:5px;background:#8f765e;margin:5px 12px;border-radius:3px}.closet-note{text-align:center;position:absolute;bottom:30px;width:100%;font-size:11px;color:#8f775f;line-height:1.9}.closet-note span{display:block;font-size:21px}.knob{position:absolute;width:8px;height:8px;border-radius:50%;background:#8e7258;right:10px;top:190px}.hanger-area{border:1px dashed #a9b59e;border-radius:11px;padding:17px 12px;display:flex;align-items:center;gap:12px;background:#eeefe5}.hanger-symbol{font-size:32px}.hanger-area b{font-size:11px}.hanger-area small{display:block;font-size:8px;color:#8c9987;margin-top:5px}.tip{padding:10px 8px}.tip span{font-size:11px;font-weight:700}.tip p{font-size:10px;line-height:1.9;color:#8c9586}.drop-active{outline:4px solid #f2d277;outline-offset:3px}#stored{display:flex;padding:10px;flex-wrap:wrap;gap:2px}#stored span{font-size:37px;filter:drop-shadow(2px 3px 1px #8b6e5b40)}footer{display:flex;justify-content:space-between;align-items:center;margin-top:24px;font-size:8px;letter-spacing:1px;color:#94a08e}footer button{background:none;font-size:10px;letter-spacing:0}#toast{position:absolute;top:50px;left:50%;transform:translateX(-50%);background:#fffdf3ef;padding:12px 20px;border-radius:30px;font-size:12px;white-space:nowrap;opacity:0;transition:opacity .25s;pointer-events:none;box-shadow:0 4px 20px #294e4615}#toast.show{opacity:1}.overlay{position:fixed;inset:0;background:#1f423d69;backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:10;padding:20px}.overlay.hidden{display:none}.modal{text-align:center;background:#fffdf4;max-width:490px;width:100%;padding:34px;border-radius:24px;box-shadow:0 20px 100px #163b3830}.modal-art{font-size:70px;color:#799b7a;line-height:1.2}.modal h2{font:36px Jua,sans-serif;margin:15px 0}.modal p{font-size:13px;line-height:2;color:#7a897b}.instructions{display:flex;gap:10px;justify-content:center;font-size:9px;margin:24px 0}.modal button{display:block;background:#365f53;color:white;width:100%;padding:16px;border-radius:12px;font-weight:700}.modal>small{display:block;font-size:9px;color:#9aab95;margin-top:18px}@media(max-width:800px){main{padding:18px}.open,.stamp{display:none}h1{font-size:28px}.heading{padding:24px 0}.dashboard{gap:20px;padding:14px}.dashboard strong{font-size:16px}.play-layout{grid-template-columns:minmax(0,1fr) 145px;gap:10px}.closet{height:260px;border-width:5px}.closet-head{font-size:13px}.hanger-area{padding:10px;display:block}.hanger-symbol{font-size:25px}.tip{padding:0}.controls{gap:10px;flex-wrap:wrap;padding:12px}#steam{min-width:100px;padding:8px 12px}.controls small{font-size:7px}.progress{min-width:90px}footer>span:last-child{display:none}}@media(max-width:480px){.play-layout{grid-template-columns:minmax(0,1fr)}aside{display:grid;grid-template-columns:1fr 1fr;align-items:center}.closet{height:150px;grid-row:span 2}.closet-head{padding:8px}.closet-note{bottom:4px;font-size:9px}.closet-note span{display:none}.tip p{font-size:9px}.tip span{font-size:10px}.hanger-area{display:flex}.hanger-area small{font-size:8px}.dashboard{gap:15px}.dashboard button{font-size:9px;padding:0}.heading p{font-size:11px}.work-title{padding:12px}#stored span{font-size:27px}.controls{gap:12px}.modal{padding:25px}}

.fabric-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 18px 0;font-size:10px}.fabric-row>span{background:#e9eee3;padding:6px 10px;border-radius:6px;font-weight:700}.fabric-row>span.delicate{background:#f7e6d8;color:#9a5b40}.fabric-row small{font-size:8px;color:#8a9585}@media(max-width:800px){.fabric-row{flex-wrap:wrap}.fabric-row small{font-size:7px}}

.audio-controls{display:flex;align-items:center;gap:15px}.volume-label{font-size:9px;display:flex;align-items:center;gap:6px;color:#869782}#volume{width:65px;accent-color:#628875}.hanger-area{text-align:left;color:inherit;font-family:inherit;touch-action:none;width:100%;transition:background .2s,box-shadow .2s}.hanger-area:disabled{cursor:default;opacity:.6}.hanger-area.available{background:#f7e9bc;box-shadow:0 0 0 3px #f2d57540;cursor:grab}.hanger-area.available:active{cursor:grabbing}.hanger-symbol{width:62px;flex-shrink:0;display:block}.hanger-symbol svg{display:block;width:100%;fill:none;stroke:#7b6853;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}.drag-ghost{position:fixed;z-index:9;pointer-events:none;transform:translate(-50%,-45%);filter:drop-shadow(0 8px 8px #294e4630)}.drag-ghost svg{width:150px;height:95px;fill:none;stroke:#7b6853;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}.drag-ghost canvas{width:225px;height:165px}.scene:has(canvas.drop-active){box-shadow:inset 0 0 0 4px #edca68}.scene canvas.drop-active{outline:0}@media(max-width:800px){.audio-controls{gap:8px}.audio-controls button{font-size:9px}.volume-label{font-size:8px}#volume{width:42px}.hanger-symbol{width:42px}}@media(max-width:480px){header{gap:5px}.brand{gap:6px;font-size:25px}.brand span{font-size:18px}.brand small{font-size:7px;letter-spacing:1px}.audio-controls{flex-wrap:wrap;max-width:150px;justify-content:flex-end;gap:5px}.volume-label{order:3}.hanger-symbol{width:45px}}

.work{position:relative}.scene #toast{position:relative;top:auto;left:auto;transform:none;min-height:58px;width:100%;border-radius:0;padding:16px 18px;margin:0;background:#eef1e5;box-shadow:none;border-bottom:1px solid #d6dfcd;opacity:1;white-space:normal;text-align:center;font-size:12px;line-height:1.7;z-index:6;display:flex;align-items:center;justify-content:center}.glasses-case{position:absolute;left:12px;bottom:10px;background:#f8f4dfed;border:1px solid #c6cdb7;border-radius:12px;padding:5px 9px;display:flex;flex-direction:column;align-items:center;z-index:6;box-shadow:0 3px 9px #294e4610;touch-action:manipulation;max-width:145px}.case-art{width:84px;height:39px}.case-art svg{width:100%;height:100%}.case-shell{fill:#ad8669;stroke:#82624b;stroke-width:2}.case-seam{fill:none;stroke:#d6ba93;stroke-width:2}.spectacles{fill:#f6f5dba0;stroke:#365f53;stroke-width:3}.glasses-case.worn .spectacles{display:none}.glasses-case.worn .case-shell{fill:#745d4b}.glasses-case b{font-size:9px}.glasses-case small{font-size:8px;color:#84907a;margin-top:3px}.work.fogged::after{content:'';position:absolute;inset:0;z-index:5;background:#f0f3ee91;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);pointer-events:none;border-radius:14px}.work.fogged .scene{z-index:auto}.work.fogged #toast,.work.fogged .glasses-case{z-index:6}.scene{isolation:auto}@media(max-width:800px){.scene #toast{font-size:10px;min-height:56px;padding:12px}.glasses-case{left:7px;bottom:6px;padding:3px 7px}.case-art{width:65px;height:30px}.glasses-case b{font-size:8px}.glasses-case small{font-size:7px}}

.packing{display:flex;gap:8px}.packing>button{min-width:0}.bag-area[hidden]{display:none!important}.packing.final-stage>button{width:calc(50% - 4px);flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 5px;gap:4px}.packing.final-stage .hanger-symbol{width:45px}.packing.final-stage small{font-size:8px}.bag-area{border:1px dashed #a9b59e;border-radius:11px;background:#e5edf0;color:#49645e;touch-action:none;cursor:grab}.bag-area:disabled{opacity:.55;cursor:default}.bag-area b{font-size:11px}.bag-area small{font-size:8px;color:#8c9987}.bag-icon{width:35px;height:40px;background:linear-gradient(120deg,#fff9,#e4edf455,#fffc);border:1px solid #b4c5ca;clip-path:polygon(35% 0,65% 0,75% 15%,100% 30%,100% 100%,0 100%,0 30%,25% 15%)}.packing.final-stage .hanger-area div{width:100%}@media(max-width:480px){.packing{align-self:stretch}.packing.final-stage b{font-size:9px}}
.ending-overlay{position:fixed;inset:0;z-index:30;background:#2d493df2;display:flex;align-items:center;justify-content:center;padding:18px;overflow:auto}.ending-card{max-width:850px;width:100%;background:#fff6e5;border-radius:24px;padding:26px;text-align:center;box-shadow:0 20px 90px #13251b60;margin:auto}.ending-card .eyebrow{font-size:9px;color:#a28c72}.ending-card h2{font:30px Jua,sans-serif;margin:10px 0 20px}.ending-card canvas{width:100%;border-radius:15px;aspect-ratio:16/9}.ending-card p{font-size:13px;line-height:1.9;color:#8b826e;margin:16px 0}#endingReplay[hidden]{display:none}#endingReplay button{background:#527660;color:#fff7e5;border-radius:13px;padding:15px 32px;font-size:14px}#endingReplay small{display:block;font-size:10px;color:#a1937d;margin-top:12px}#endingReplay{animation:ending-rise .8s ease both}@keyframes ending-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media(max-width:600px){.ending-card{padding:18px 12px}.ending-card h2{font-size:23px}.ending-card p{font-size:11px}.ending-overlay{padding:12px}}

.packing.final-stage:has(#hanger[hidden]) #bag{width:100%;flex-direction:row;flex-wrap:wrap;justify-content:center;padding:15px}.packing [hidden]{display:none!important}.packing.final-stage:has(#hanger[hidden]) #bag small{width:100%}.closet.delivery-mode .closet-note{display:none}#stored .closet-garment{width:43px;min-height:58px;padding:3px;border-radius:8px;background:var(--cloth);touch-action:none;cursor:grab;display:flex;flex-direction:column;align-items:center;box-shadow:1px 3px 0 #8f765e33}#stored .closet-garment span{font-size:28px}#stored .closet-garment small{font-size:8px;color:#546b57}#stored .closet-garment.packed{background:linear-gradient(120deg,#fff9,var(--cloth),#fff8);cursor:default;outline:1px solid #f7fff7a0}@media(max-width:800px){#stored{gap:3px;padding:7px}#stored .closet-garment{width:33px;min-height:45px}#stored .closet-garment span{font-size:23px}}@media(max-width:480px){.closet.delivery-mode{height:220px}}

.work.packaging #steam,.work.packaging .temperature,.work.packaging #glasses{display:none}.work.packaging .progress{width:100%}
.closet.delivery-mode{height:390px}.closet.delivery-mode #stored{max-height:290px;overflow-y:auto;align-content:flex-start}@media(max-width:800px){.closet.delivery-mode{height:345px}.closet.delivery-mode #stored{max-height:255px}}@media(max-width:480px){.closet.delivery-mode{height:340px}}