🎞️호러 × 추리🎞️ 🕵️추리 요소가 있는 작품이 아닌 첫 100%추리물입니다. 심한 내상 있을 수 있음. 작동 잘 안될 수 있습니다 ㅠ.ㅜ🕵️ 🚬엔딩 여러개, 한번 본 장소나 물건도 2~3번정도 더 보면 힌트가 나올지도 몰라요🚬 依頼書 * { margin: 0; padding: 0; box-sizing: border-box; } :root { --bg: #f0ece4; --paper: #f8f4ec; --ink: #1c1810; --muted: #6a6058; --faint: #a09888; --rule: #c8bfb0; --red: #8a2020; --stamp: #9a1818; } body { background: var(--bg); min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; padding: 48px 20px 80px; font-family: 'MS Mincho', '游明朝', 'Yu Mincho', 'HiraMinProN-W3', serif; position: relative; overflow-x: hidden; } /* ── 먼지 파티클 ── */ .dust { position: fixed; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.7); pointer-events: none; z-index: 0; animation: floatdust linear infinite; } @keyframes floatdust { 0% { transform: translateY(100vh) translateX(0px); opacity: 0; } 10% { opacity: 0.6; } 90% { opacity: 0.3; } 100% { transform: translateY(-40px) translateX(var(--drift)); opacity: 0; } } /* ── 용지 질감 오버레이 ── */ body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-image: repeating-linear-gradient( 0deg, transparent, transparent 28px, rgba(160,148,130,0.06) 28px, rgba(160,148,130,0.06) 29px ); pointer-events: none; z-index: 0; } /* ── 카드 ── */ .card { width: 480px; background: var(--paper); position: relative; z-index: 1; padding: 52px 56px 48px; box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 8px 32px rgba(0,0,0,0.08), inset 0 0 60px rgba(180,160,130,0.08); border: 1px solid rgba(180,160,130,0.3); } /* 종이 상단 접힘 효과 */ .card::before { content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 28px 28px 0; border-color: transparent var(--bg) transparent transparent; filter: drop-shadow(-2px 2px 2px rgba(0,0,0,0.08)); } /* 황변 효과 */ .card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 80% 10%, rgba(200,170,100,0.06) 0%, transparent 60%); pointer-events: none; } /* ── 상단 사무소 헤더 ── */ .letterhead { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 32px; padding-bottom: 16px; border-bottom: 2px solid var(--ink); } .firm-name { font-size: 11px; color: var(--ink); letter-spacing: 3px; line-height: 1.8; } .firm-name strong { display: block; font-size: 14px; letter-spacing: 4px; margin-bottom: 2px; } .firm-detail { font-size: 9px; color: var(--muted); letter-spacing: 2px; text-align: right; line-height: 2; } /* ── 문서 번호 ── */ .doc-meta { display: flex; justify-content: space-between; margin-bottom: 28px; font-size: 9px; color: var(--faint); letter-spacing: 2px; } /* ── 제목 ── */ .doc-title { text-align: center; margin-bottom: 28px; position: relative; } .doc-title h1 { font-size: 22px; letter-spacing: 10px; color: var(--ink); font-weight: 700; margin-bottom: 6px; } .doc-title .underline { width: 80%; margin: 0 auto; height: 1px; background: var(--ink); } .doc-title .underline2 { width: 80%; margin: 3px auto 0; height: 1px; background: var(--ink); } /* ── 수신/발신 ── */ .address-block { margin-bottom: 24px; font-size: 11px; color: var(--ink); letter-spacing: 1px; line-height: 2.2; border-left: 2px solid var(--rule); padding-left: 14px; } .address-block .label { font-size: 9px; color: var(--muted); letter-spacing: 3px; display: block; margin-bottom: 2px; } /* ── 구분선 ── */ .hr { height: 1px; background: var(--rule); margin: 20px 0; } /* ── 본문 ── */ .body-text { font-size: 12.5px; color: var(--ink); line-height: 2.5; letter-spacing: 0.8px; font-weight: 400; margin-bottom: 8px; } .body-text .indent { display: block; text-indent: 1em; } /* 인용 대사 */ .quote { margin: 20px 0; padding: 12px 20px; border-left: 3px solid var(--rule); border-right: 1px solid var(--rule); background: rgba(160,148,130,0.05); } .quote p { font-size: 12px; color: var(--muted); letter-spacing: 1px; line-height: 2.4; font-style: italic; } .quote p strong { color: var(--ink); font-style: normal; font-weight: 700; } /* ── 경고 박스 ── */ .warning-box { margin: 24px 0; padding: 14px 18px; border: 1px solid var(--red); position: relative; } .warning-box::before { content: '! 주의'; position: absolute; top: -9px; left: 16px; background: var(--paper); padding: 0 6px; font-size: 9px; color: var(--red); letter-spacing: 3px; } .warning-box p { font-size: 11px; color: var(--red); letter-spacing: 1px; line-height: 2.2; } /* ── 하단 서명란 ── */ .sign-block { margin-top: 36px; display: flex; justify-content: flex-end; } .sign-inner { text-align: right; font-size: 10px; color: var(--muted); letter-spacing: 2px; line-height: 2.2; } .sign-line { width: 160px; height: 1px; background: var(--rule); margin: 8px 0 4px auto; } /* ── 도장 ── */ .stamp { position: absolute; bottom: 52px; left: 56px; width: 68px; height: 68px; border-radius: 50%; border: 3px solid rgba(154,24,24,0.5); display: flex; align-items: center; justify-content: center; transform: rotate(-12deg); opacity: 0.55; } .stamp::before { content: ''; position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px; border-radius: 50%; border: 1px solid rgba(154,24,24,0.4); } .stamp-text { font-size: 9px; color: var(--stamp); letter-spacing: 1px; text-align: center; line-height: 1.6; font-weight: 700; } /* ── 하단 주석 ── */ .footnote { margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 9px; color: var(--faint); letter-spacing: 2px; line-height: 2; } /* ── 페이드인 ── */ .card { animation: pagein 0.8s ease both; } @keyframes pagein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } // 파티클을 body 로드 전에 생성하지 않고 DOMContentLoaded 후 생성 木木 法律事務所 유산정리 · 상속 · 부동산 昭和二十九年 제 호 문서 기밀 취급 문서번호 : KMZ-1954-088 취급 : 극비 依　頼　書 수 신 귀하 (유산정리 담당자) 고(故) 木次 茂左衛門 씨의 유산 정리를 위하여 귀하를 본 저택으로 파견하였습니다. 도착 즉시 저택의 문을 확인하시고, 각 구역——현관, 응접실, 서재, 식당, 침실, 안뜰——을 순서에 따라 점검하여 상속 관련 문서 및 유품 목록을 작성하여 주시기 바랍니다. 「저도... 갇혔어요.」 현장에서 귀하와 합류할 탐정 마미야 아리스 씨의 첫 보고입니다. 저택 도착 직후, 외부와의 연락이 두절되었습니다. 저택 내부에서는 원인불명의 현상이 지속적으로 보고되고 있습니다. 노려보는 초상화, 저절로 울리는 집전화, 어둠 속의 발자국 소리. 동행 탐정과 협력하여 이 저택의 진실을 밝혀주시기 바랍니다. 상속인들은 이미 저택을 방문하였으나, 현재까지 소재가 파악되지 않고 있습니다. 본 저택에서는 어떠한 것도 액면 그대로 신뢰하지 마십시오. 이 저택에서는——아무것도 믿을 수 없습니다. 의뢰인 대리 木木 法律事務所 소장 昭和二十九年 十月 極秘 ※ 본 의뢰서는 열람 후 소각 처리할 것. ※ 저택 내 발생하는 일체의 사항에 대하여 당 사무소는 책임을 지지 않습니다. // 먼지 파티클 생성 const count = 28; for (let i = 0; i < count; i++) { const el = document.createElement('div'); el.className = 'dust'; const size = 1 + Math.random() * 3; const left = Math.random() * 100; const duration = 8 + Math.random() * 16; const delay = Math.random() * 20; const drift = (Math.random() - 0.5) * 60; el.style.cssText = ` left: ${left}vw; width: ${size}px; height: ${size}px; animation-duration: ${duration}s; animation-delay: -${delay}s; --drift: ${drift}px; opacity: ${0.3 + Math.random() * 0.4}; `; document.body.appendChild(el); }