*{box-sizing:border-box;margin:0;padding:0}html,body{color:#cfc8bc;background:#000;width:100%;height:100%;overflow:hidden}body{cursor:default;-webkit-user-select:none;user-select:none;font-family:Noto Serif KR,serif}.hidden{display:none!important}#view{position:fixed;inset:0}#view canvas{width:100%;height:100%;display:block}#crosshair{pointer-events:none;background:#ffffff59;border-radius:50%;width:4px;height:4px;margin:-2px 0 0 -2px;transition:transform .15s,background .15s;position:fixed;top:50%;left:50%}#crosshair.active{background:#ffffffb3;transform:scale(2.2)}kbd{text-align:center;color:#fff;background:#ffffff1f;border:1px solid #ffffffbf;border-radius:4px;min-width:1.7em;margin-right:.35em;padding:.1em .45em;font:600 .9em/1.3 ui-monospace,monospace;display:inline-block}#prompt{letter-spacing:.06em;color:#fff;white-space:nowrap;opacity:0;pointer-events:none;text-shadow:0 1px 3px #000;background:#0000009e;border-radius:6px;padding:7px 16px;font-size:17px;font-weight:600;transition:opacity .2s;position:fixed;top:calc(50% + 34px);left:50%;transform:translate(-50%)}#prompt.show{opacity:1}#subtitle{text-align:center;letter-spacing:.04em;color:#f1ebe0;opacity:0;pointer-events:none;text-shadow:0 1px 4px #000;background:#0000008c;border-radius:6px;max-width:80vw;padding:10px 22px;font-size:21px;font-weight:600;line-height:1.6;transition:opacity .6s;position:fixed;bottom:11%;left:50%;transform:translate(-50%)}#subtitle.show{opacity:1}.overlay{z-index:20;background:#000000d1;flex-direction:column;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.overlay.show{animation:.35s ease-out overlayIn;display:flex}@keyframes overlayIn{0%{opacity:0}}.overlay .hint{color:#e8e2d6;letter-spacing:.06em;background:#0009;border-radius:5px;margin-top:20px;padding:6px 14px;font-size:16px;font-weight:600;transition:opacity .4s}.overlay .hint.wait{opacity:0}#note .paper{--w:min(480px, 82vw, 60vh);width:var(--w);aspect-ratio:3/4;padding:calc(var(--w) * .15) calc(var(--w) * .1) calc(var(--w) * .08) calc(var(--w) * .17);filter:brightness(.82)sepia(.15);background:url(/assets/img/paper.webp) 50%/cover;overflow:hidden;transform:rotate(-1.5deg);box-shadow:0 0 60px #000;container-type:inline-size}#note-text{color:#26211b;white-space:pre-line;opacity:.88;font-family:Nanum Pen Script,cursive;font-size:7.4cqw;line-height:1.34}#note-text em{color:#5a130c;font-style:normal}#note-text .note-warn{color:#b8130b;transform-origin:0;opacity:0;margin:.5em 0 .4em;font-size:1.7em;line-height:1.15;animation:.5s cubic-bezier(.2,.8,.3,1) 2.8s forwards noteBleed;display:block;transform:rotate(-2.5deg)}#note-text .note-doodle{mix-blend-mode:multiply;filter:contrast(1.15)saturate(.85);opacity:0;width:auto;height:72cqw;margin:.1em auto 0;animation:2.2s ease-in 4.4s forwards doodleSeep;display:block;transform:rotate(-4deg)}@keyframes doodleSeep{0%{opacity:0;filter:blur(6px)contrast(1.15)}60%{opacity:.7;filter:blur(1px)contrast(1.15)}to{opacity:.92;filter:blur()contrast(1.15)saturate(.85)}}#note-text .note-tail{opacity:0;animation:.8s 1.9s forwards noteFade;display:block}@keyframes noteBleed{0%{opacity:0;filter:blur(8px);letter-spacing:.3em}35%{opacity:1;filter:blur(1.5px)}to{opacity:1;filter:blur(.3px);letter-spacing:0;text-shadow:0 0 2px #78000099}}@keyframes noteFade{to{opacity:.9}}#photo img{filter:brightness(.8)contrast(1.05);max-width:78vw;max-height:74vh;transform:rotate(1deg);box-shadow:0 0 80px #000}#keypad .pad{background:linear-gradient(160deg,#3b3a36,#1e1d1b);border-radius:6px;width:280px;padding:22px;box-shadow:inset 0 0 0 1px #555,0 0 60px #000}#keypad .display{color:#7dff9a;letter-spacing:.5em;text-align:center;text-shadow:0 0 8px #3f9;background:#0b120c;border-radius:3px;height:58px;margin-bottom:18px;font:600 34px/58px monospace;box-shadow:inset 0 0 12px #000}#keypad .display.error{color:#ff4a3a;text-shadow:0 0 8px #f33}#keypad .keys{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}#keypad button{color:#ddd;cursor:pointer;background:linear-gradient(#57554f,#37352f);border:none;border-radius:4px;height:52px;font:600 20px monospace;box-shadow:0 2px #111}#keypad button:active{box-shadow:none;transform:translateY(2px)}#subliminal,#scare{z-index:50;pointer-events:none;background:#000;display:none;position:fixed;inset:0}#subliminal img,#scare img{object-fit:cover;width:100%;height:100%}#subliminal{mix-blend-mode:screen;background:0 0}#subliminal.show,#scare.show{display:block}#scare.lunge img{animation:.11s cubic-bezier(.1,.9,.2,1) forwards lunge}@keyframes lunge{0%{filter:blur(6px)brightness(2);transform:scale(2.4)}to{filter:none;transform:scale(1.05)}}#scare.jitter img{animation:60ms steps(2,end) infinite jitter}@keyframes jitter{0%{transform:scale(1.08)translate(-1.2%,.8%)}50%{transform:scale(1.12)translate(1.4%,-1%)}}#scare.red img{filter:sepia()saturate(6)hue-rotate(-40deg)contrast(1.6)brightness(.8)}#scare.invert img{filter:invert()contrast(1.8)}#flash{z-index:60;pointer-events:none;opacity:0;background:#fff;position:fixed;inset:0}#fade{z-index:40;pointer-events:none;opacity:1;background:#000;transition:opacity 3s;position:fixed;inset:0}body.shake #view,body.shake #scare{animation:70ms linear infinite shake}@keyframes shake{0%{transform:translate(0)}25%{transform:translate(-14px,9px)}50%{transform:translate(11px,-12px)}75%{transform:translate(-8px,-6px)}}body.glitch #view{animation:90ms step-end infinite glitch}@keyframes glitch{0%{filter:none;transform:translate(0)}33%{filter:hue-rotate(90deg)contrast(2);clip-path:inset(10% 0 40%);transform:translate(-3%)skew(8deg)}66%{filter:invert();clip-path:inset(50% 0 5%);transform:translate(2%,1%)}}.screen{z-index:70;text-align:center;background:#000;flex-direction:column;justify-content:center;align-items:center;gap:22px;padding:16px;display:flex;position:fixed;inset:0}.screen h1{letter-spacing:.4em;color:#8d1a12;text-shadow:0 0 30px #400;margin-left:.4em;font-size:clamp(48px,10vw,110px);font-weight:600}.screen h2{letter-spacing:.2em;font-size:34px;font-weight:300}.screen .warn{opacity:.55;font-size:13px;line-height:1.8}.screen .phones{opacity:.8;font-size:15px}.screen .keys-help{opacity:.4;letter-spacing:.08em;font-size:12px}.screen button{color:#cfc8bc;letter-spacing:.3em;cursor:pointer;background:0 0;border:1px solid #5a1510;padding:14px 44px;font:300 17px Noto Serif KR,serif;transition:background .3s}.screen button:hover:not(:disabled){background:#2a0806}.screen button:disabled{opacity:.4;cursor:wait}#paused{cursor:pointer;background:#000000b3}#end{background:#000}.screen .sub{letter-spacing:.3em;opacity:.6;margin-top:-8px;font-size:17px}.screen .buttons{flex-wrap:wrap;justify-content:center;gap:14px;display:flex}.screen .cam{opacity:.85;font-size:14px}.screen .cam span{opacity:.55;font-size:12px}.screen h1{letter-spacing:.25em;margin-left:.25em}#hud{pointer-events:none;z-index:5;flex-direction:column;gap:10px;display:flex;position:fixed;top:18px;left:20px}#battery{background:#00000080;border-radius:5px;align-items:center;gap:8px;width:max-content;padding:5px 10px;display:flex}#battery .icon:before{content:"🔦";font-size:15px}#battery .bar{border:1px solid #fff9;border-radius:2px;width:90px;height:8px;overflow:hidden}#battery .bar i{background:#e8e2d6;height:100%;transition:width .4s;display:block}#battery.low .bar i{background:#c0301f;animation:.8s steps(2,end) infinite blink}@keyframes blink{50%{opacity:.3}}#inventory{flex-direction:column;gap:4px;list-style:none;display:flex}#inventory li{color:#efe7d8;background:#00000080;border-radius:5px;width:max-content;padding:4px 10px;font-size:14px;font-weight:600}#inventory li:before{content:"🗝 "}#breath{z-index:30;text-align:center;pointer-events:none;position:fixed;bottom:20%;left:50%;transform:translate(-50%)}#breath .label{color:#fff;background:#0009;border-radius:6px;margin-bottom:8px;padding:6px 14px;font-weight:600}#breath .bar{background:#ffffff26;border-radius:4px;width:240px;height:8px;margin:0 auto;overflow:hidden}#breath .bar i{background:#d9d2c4;width:100%;height:100%;display:block}#breath.holding .label{color:#ff9b8f}#slats{z-index:15;pointer-events:none;background:radial-gradient(#0000 40%,#000c 85%),repeating-linear-gradient(#0b0806 0 3.6vh,#140e0af7 3.6vh 4.1vh,#0000 4.1vh 7.6vh,#080503e6 7.6vh 8vh);position:fixed;inset:0}#diary .page{--w:min(520px, 84vw, 64vh);width:var(--w);aspect-ratio:3/4;filter:brightness(.85)sepia(.1);background:url(/assets/img/diary_page.webp) 50%/cover;position:relative;transform:rotate(.8deg);box-shadow:0 0 60px #000;container-type:inline-size}#diary .drawing{mix-blend-mode:multiply;opacity:.85;background-position:50%;background-size:cover;width:78%;height:37%;position:absolute;top:6.5%;left:11%}#diary .text{color:#23213a;white-space:pre-line;font-family:Nanum Pen Script,cursive;font-size:6.2cqw;line-height:1.32;position:absolute;inset:50% 10% 6% 12%}#diary .text em{color:#9b1a10;font-style:normal}#flashback{z-index:45;background:#000;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#flashback img{object-fit:cover;opacity:0;filter:contrast(1.1)brightness(.9);width:100%;height:100%;transition:opacity 1.2s;animation:9s linear infinite alternate fbDrift;position:absolute;inset:0}#flashback img.on{opacity:.85}@keyframes fbDrift{0%{transform:scale(1.04)translate(-.5%)}to{transform:scale(1.1)translate(.5%,-.5%)}}#flashback p{color:#efe7d8;opacity:0;text-align:center;background:#0000008c;border-radius:6px;margin-top:60vh;padding:10px 22px;font-size:22px;font-weight:600;transition:opacity .8s;position:relative}#flashback p.on{opacity:1}#chapter{z-index:42;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:12px;animation:4.2s forwards chapterIn;display:flex;position:fixed;inset:0}#chapter small{letter-spacing:.5em;opacity:.6;font-size:15px}#chapter h2{letter-spacing:.3em;color:#d8cfc0;text-shadow:0 0 20px #000;font-size:clamp(34px,5vw,56px);font-weight:300}@keyframes chapterIn{0%{opacity:0}20%,70%{opacity:1}to{opacity:0}}#webcam{z-index:48;background:#000;position:fixed;inset:0;overflow:hidden}#webcam canvas{object-fit:cover;filter:grayscale()contrast(1.35)brightness(.62);width:100%;height:100%;transform:scaleX(-1)}#webcam .lunge{opacity:0;filter:grayscale(.4)contrast(1.3);pointer-events:none;height:120%;position:absolute;top:55%;left:50%;transform:translate(-50%,-50%)scale(.3)}#webcam .lunge.go{opacity:1;animation:.16s cubic-bezier(.2,.9,.2,1) forwards camLunge}@keyframes camLunge{to{transform:translate(-50%,-50%)scale(1.9)}}#webcam .motion{color:#ff3b30;opacity:0;text-shadow:0 0 6px #000;font:700 20px ui-monospace,monospace;position:absolute;bottom:30px;left:28px}#webcam .motion.on{animation:.5s steps(2,end) infinite blink}#webcam.shaking canvas{animation:60ms linear infinite shake}#webcam .osd{color:#fff;text-shadow:0 0 4px #000;justify-content:space-between;font:600 22px ui-monospace,monospace;display:flex;position:absolute;top:24px;left:28px;right:28px}#webcam .rec{color:#ff3b30;animation:1s steps(2,end) infinite blink}#crash{z-index:49;cursor:default;background:#ffffff14;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#crash .dialog{color:#111;background:#f0f0f0;border:1px solid #888;width:min(440px,90vw);font:14px system-ui,sans-serif;box-shadow:0 8px 30px #00000080}#crash .title{background:#dcdcdc;padding:8px 12px;font-weight:600}#crash .body{gap:14px;padding:18px;display:flex}#crash .icon{color:#fff;background:#e6a817;border-radius:50%;flex:none;place-items:center;width:34px;height:34px;font-size:22px;font-weight:900;display:grid}#crash p{color:#333;margin-top:6px;line-height:1.5}#crash .buttons{justify-content:flex-end;gap:8px;padding:0 18px 16px;display:flex}#crash button{cursor:pointer;background:#fafafa;border:1px solid #999;min-width:88px;padding:5px 12px;font:14px system-ui,sans-serif}#choice{z-index:65;background:#000000eb}#choice .q{letter-spacing:.1em;max-width:80vw;font-size:22px;font-weight:300;line-height:1.8}#choice .options{flex-direction:column;gap:14px;display:flex}#choice button{min-width:320px}#end small{letter-spacing:.5em;opacity:.55;font-size:14px}#end p{opacity:.8;white-space:pre-line;max-width:70ch;line-height:1.9}#itemToast{z-index:25;pointer-events:none;opacity:0;background:linear-gradient(90deg,#140e0aeb,#281c12e0);border:1px solid #d6b46e8c;border-radius:8px;align-items:center;gap:14px;padding:12px 22px 12px 16px;display:flex;position:fixed;top:62%;left:50%;transform:translate(-50%,10px)scale(.96);box-shadow:0 0 30px #000c,inset 0 0 18px #d6b46e1f}#itemToast.show{animation:2.6s forwards toastIn}#itemToast .icon{filter:drop-shadow(0 0 6px #ffd278cc);font-size:28px}#itemToast small{letter-spacing:.4em;color:#d6b46e;font-size:12px;display:block}#itemToast b{color:#f3ead8;letter-spacing:.05em;font-size:20px}@keyframes toastIn{0%{opacity:0;transform:translate(-50%,16px)scale(.9)}12%{opacity:1;transform:translate(-50%)scale(1.04)}20%,80%{opacity:1;transform:translate(-50%)scale(1)}to{opacity:0;transform:translate(-50%,-8px)scale(1)}}#inventory li.new{animation:1.4s invNew}@keyframes invNew{0%,40%{background:#d6b46e8c;transform:scale(1.12)}to{background:#00000080;transform:none}}#peek{z-index:14;pointer-events:none;opacity:0;transition:opacity 1.4s ease-in;position:fixed;inset:0}#peek img{object-fit:cover;filter:brightness(1.3)contrast(1.25);width:100%;height:100%;animation:5s ease-in-out infinite alternate peekDrift;transform:translateY(3.8vh)}#peek.on{opacity:1}#peek.off{opacity:0;transition:opacity .25s}@keyframes peekDrift{0%{transform:translateY(3.8vh)scale(1)}to{transform:translateY(3.8vh)scale(1.08)}}#slats.suffocate{box-shadow:inset 0 0 22vw 12vw #000000e6}#slats.bang{animation:50ms linear infinite shake}#breath .label{animation:.8s ease-in-out infinite alternate breathPulse}@keyframes breathPulse{0%{opacity:.75}to{opacity:1}}html,body{touch-action:none;overscroll-behavior:none;-webkit-user-select:none;-webkit-touch-callout:none}#touch{z-index:12;pointer-events:none;position:fixed;inset:0}#touch .joy{left:calc(28px + env(safe-area-inset-left));bottom:calc(28px + env(safe-area-inset-bottom));pointer-events:auto;background:radial-gradient(circle,#ffffff0f,#ffffff05);border:1px solid #ffffff2e;border-radius:50%;width:140px;height:140px;position:absolute}#touch .knob{background:#ffffff2e;border:1px solid #ffffff59;border-radius:50%;width:58px;height:58px;margin:-29px 0 0 -29px;position:absolute;top:50%;left:50%}#touch .tbtn{pointer-events:auto;color:#fff;background:#00000073;border:1px solid #ffffff4d;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:74px;height:74px;font-size:26px;line-height:1;display:flex;position:absolute}#touch .tbtn small{opacity:.8;margin-top:4px;font-size:11px}#touch .b-use{right:calc(28px + env(safe-area-inset-right));bottom:calc(40px + env(safe-area-inset-bottom));width:88px;height:88px}#touch .b-light{right:calc(132px + env(safe-area-inset-right));bottom:calc(28px + env(safe-area-inset-bottom))}#touch .b-breath{right:calc(28px + env(safe-area-inset-right));bottom:calc(150px + env(safe-area-inset-bottom));background:#3c000080;border-color:#ff786eb3;width:96px;height:96px;font-size:22px;font-weight:700}#touch .b-breath.down{background:#a0140ab3;transform:scale(.94)}#rotate{display:none}@media (pointer:coarse) and (orientation:portrait){#rotate{z-index:90;text-align:center;color:#cfc8bc;background:#000;justify-content:center;align-items:center;font-size:20px;line-height:2;display:flex;position:fixed;inset:0}}@media (pointer:coarse){#hud{top:calc(10px + env(safe-area-inset-top));left:calc(14px + env(safe-area-inset-left))}#subtitle{max-width:70vw;font-size:16px;bottom:32%}#prompt{font-size:15px}.screen h1{font-size:clamp(40px,9vw,80px)}.screen{gap:14px}.screen .warn{font-size:11px}}