『안녕』
당신은 말하고 있다
<div id="click-counter" style="text-align:center; font-size:1em; padding:50px;">
<br>
<span id="count">0</span> / 2
</div>
[[안녕.]]
<script>
setTimeout(function() {
var clickCount = 0;
var countDisplay = document.getElementById('count');
var link = document.querySelector('tw-link');
// 링크 숨기기
if (link) {
link.style.display = 'none';
}
// 화면 아무데나 클릭 감지
document.addEventListener('click', function() {
clickCount++;
countDisplay.textContent = clickCount;
if (clickCount >= 2) {
if (link) {
link.click();
}
}
});
}, 100);
</script>
누가 듣는다고 [[계속]] 말하는지?
당신은 하고 싶은 [[말]] 이 있어 보인다당신의 앞에 [[의사]] 가 놓일 것이다의사는 [[흰]] 가운을 입었고
모든 의사를 [[대표]] 한다<style>
::selection {
background-color: #ffffff; /* 흰색 배경 */
color: #ffffff; /* 검은 글자 */
text-shadow:
0 0 15px rgba(0, 0, 0, 0.8),
0 0 30px rgba(0, 0, 0, 0.6),
0 0 45px rgba(0, 0, 0, 0.4);
}
::-moz-selection {
background-color: #ffffff;
color: #ffffff;
}
::-webkit-selection {
background-color: #ffffff;
color: #ffffff;
text-shadow:
0 0 15px rgba(0, 0, 0, 0.8),
0 0 30px rgba(0, 0, 0, 0.6),
0 0 45px rgba(0, 0, 0, 0.4);
}
</style>
나아가 전 <b>인류</b>를······
<div id="drag-text">◥████◣
│田│▤╠╣▤│
╱◥████◣ ╱◥◣
╱◥◣║ ▤∩▤║║田│║
│田│◥███◣╱◥███◣
╱◥◣ ◥███◣ 田 ∩│▤║
╱◥◣│╱◥█◣║∩∩∩║◥███◣
║田 ││田│∩║ 田∩田 ║田∩田 ║</div>
<div style="display:none;">[[인류]]</div>
<script>
setTimeout(function() {
var link = document.querySelector('tw-link');
if (link) {
document.getElementById('drag-text').addEventListener('mouseup', function() {
if (window.getSelection().toString().length > 0) {
link.click();
}
});
}
}, 200);
</script>
<div class="footnote">//*drag//</div>
오늘 아침 당신은······
『[[걷는다]]』
『[[운다]]』
『[[고통]]』
<div id="jong-text"></div>
<script>
setTimeout(function() {
animateJongseonWithMove("당신", "jong-text");
}, 100);
</script> [[>]]<div class="simple-rain">
<span style="--i:0">당</span><span style="--i:1">신</span><span style="--i:2">당</span><span style="--i:3">신</span><span style="--i:4"> </span><span style="--i:5">당</span><span style="--i:6">신</span>
</div>
[[>>]]<style>
::selection {
background-color: #ffffff; /* 흰색 배경 */
color: #ffffff; /* 검은 글자 */
text-shadow:
0 0 15px rgba(0, 0, 0, 0.8),
0 0 30px rgba(0, 0, 0, 0.6),
0 0 45px rgba(0, 0, 0, 0.4);
}
::-moz-selection {
background-color: #ffffff;
color: #ffffff;
}
::-webkit-selection {
background-color: #ffffff;
color: #ffffff;
text-shadow:
0 0 15px rgba(0, 0, 0, 0.8),
0 0 30px rgba(0, 0, 0, 0.6),
0 0 45px rgba(0, 0, 0, 0.4);
}
</style>
당신은
<div id="drag-text">류마티즘
</div><span id="hidden-link">[[류마티즘]]</span>
<script>
setTimeout(function() {
document.getElementById('hidden-link').style.display = 'none';
var link = document.querySelector('#hidden-link tw-link');
if (link) { document.getElementById('drag-text').addEventListener('mouseup', function() {
if (window.getSelection().toString().length > 0) {
link.click();
}
});
}}, 200);</script>
이 된다
<div class="footnote">//*drag//</div><div id="jong-text"></div>
<script>
setTimeout(function() {
animateJongseonWithMove("당신", "jong-text");
}, 100);
</script> <!-- 링크로 만들기 -->
<span class="badge-icon">[[병원]]</span><style>
::selection {
background-color: #ffffff; /* 흰색 배경 */
color: #ffffff; /* 검은 글자 */
text-shadow:
0 0 15px rgba(0, 0, 0, 0.8),
0 0 30px rgba(0, 0, 0, 0.6),
0 0 45px rgba(0, 0, 0, 0.4);
}
::-moz-selection {
background-color: #ffffff;
color: #ffffff;
}
::-webkit-selection {
background-color: #ffffff;
color: #ffffff;
text-shadow:
0 0 15px rgba(0, 0, 0, 0.8),
0 0 30px rgba(0, 0, 0, 0.6),
0 0 45px rgba(0, 0, 0, 0.4);
}
</style>
당신이 원하는 것은
<div id="drag-text">■┃■■■┃■■■┃■■■┃■■■┃■■■┃■■
┻┻┻┻┻┻┻┻┻┻┻┻┻┻┻┻┻┻┻┻┻┻┻┻
</div>
<div style="display:none;">[[.]]</div>
<script>
setTimeout(function() {
var link = document.querySelector('tw-link');
if (link) {
document.getElementById('drag-text').addEventListener('mouseup', function() {
if (window.getSelection().toString().length > 0) {
link.click();
}
});
}
}, 200);
</script>
<div class="footnote">//*drag//</div><style>
::selection {
background-color: #ffffff; /* 흰색 배경 */
color: #ffffff; /* 검은 글자 */
text-shadow:
0 0 15px rgba(0, 0, 0, 0.8),
0 0 30px rgba(0, 0, 0, 0.6),
0 0 45px rgba(0, 0, 0, 0.4);
}
::-moz-selection {
background-color: #ffffff;
color: #ffffff;
}
::-webkit-selection {
background-color: #ffffff;
color: #ffffff;
text-shadow:
0 0 15px rgba(0, 0, 0, 0.8),
0 0 30px rgba(0, 0, 0, 0.6),
0 0 45px rgba(0, 0, 0, 0.4);
}
</style>
그러니까
오늘 아침에 눈을 떴을 때,
당신은 스스로가
<div id="drag-text">기압계
</div>
<div style="display:none;">[[기압계]]</div>
<script>
setTimeout(function() {
var link = document.querySelector('tw-link');
if (link) {
document.getElementById('drag-text').addEventListener('mouseup', function() {
if (window.getSelection().toString().length > 0) {
link.click();
}
});
}
}, 200);
</script>
가 되었다는 사실을 알아차린 것이다거꾸로 매달린 온습도 기압계의 형상
<div id="drag-container"
style="
position:relative;
margin:100px auto 0 auto; /* 위쪽 여백 100px, 좌우 auto로 가로 중앙 */
width: 200px; /* 글자 4개 들어갈 만큼만 폭 고정 */
white-space:nowrap;
">
<span id="char1" style="position:absolute; left:0; top:0; cursor:move; font-size:20px;">V</span>
<span id="char2" style="position:absolute; left:40px; top:0; cursor:move; font-size:20px;">|</span>
<span id="char3" style="position:absolute; left:80px; top:0; cursor:move; font-size:20px;"> ̄</span>
<span id="char4" style="position:absolute; left:120px; top:0; cursor:move; font-size:20px;">O</span>
</div>
<div style="position:absolute; left:50%; transform:translateX(-50%); top:250px; line-height:0;">
<div id="target1" style="width:20px; height:20px; border:1px dashed lightgray; margin:0 auto; line-height:20px;"></div>
<div id="target2" style="width:20px; height:20px; border:1px dashed lightgray; margin:0 auto; line-height:20px;"></div>
<div id="target3" style="width:20px; height:20px; border:1px dashed lightgray; margin:0 auto; line-height:20px;"></div>
<div id="target4" style="width:20px; height:20px; border:1px dashed lightgray; margin:0 auto; line-height:20px;"></div>
</div>
<span style="display:none;">[[O]]</span>
<script>
window.setupDragGame([
{draggableId: 'char1', targetId: 'target1'},
{draggableId: 'char2', targetId: 'target2'},
{draggableId: 'char3', targetId: 'target3'},
{draggableId: 'char4', targetId: 'target4'}
]);
</script>
그 안의 바늘이 어디를 향하고 있는지
<div class="tiny-clock" style="position:relative;">
<div class="tiny-hand tiny-hour"></div>
<div class="tiny-hand tiny-minute"></div>
<div class="tiny-hand tiny-second"></div>
<span id="center-text">●</span>
</div>
<div id="target-area"></div>
[[바늘]]
<script>
(function() {
var attempts = 0;
var checkInterval = setInterval(function() {
var centerText = document.getElementById('center-text');
var clock = document.querySelector('.tiny-clock');
var link = document.querySelector('tw-link');
if (centerText && clock && link) {
clearInterval(checkInterval);
link.style.display = 'none';
// 1. 시작 위치: 시계 바깥 (예: 화면 왼쪽 위 근처)
centerText.style.position = 'fixed';
centerText.style.left = '20%';
centerText.style.top = '20%';
centerText.style.transform = 'none';
centerText.style.color = 'white';
centerText.style.fontSize = '0.5em';
centerText.style.zIndex = '100';
centerText.style.cursor = 'move';
var isDragging = false;
var offsetX = 0;
var offsetY = 0;
centerText.addEventListener('mousedown', function(e) {
isDragging = true;
e.preventDefault();
var rect = centerText.getBoundingClientRect();
offsetX = e.clientX - rect.left;
offsetY = e.clientY - rect.top;
});
document.addEventListener('mousemove', function(e) {
if (!isDragging) return;
var x = e.clientX - offsetX;
var y = e.clientY - offsetY;
centerText.style.left = x + 'px';
centerText.style.top = y + 'px';
});
document.addEventListener('mouseup', function(e) {
if (!isDragging) return;
isDragging = false;
var clockRect = clock.getBoundingClientRect();
var textRect = centerText.getBoundingClientRect();
// 2. ●이 시계 위에 들어왔는지 확인
var insideClock =
textRect.left < clockRect.right &&
textRect.right > clockRect.left &&
textRect.top < clockRect.bottom &&
textRect.bottom > clockRect.top;
if (insideClock) {
// 3. 시계 정중앙으로 스냅
centerText.style.position = 'absolute';
centerText.style.left = '50%';
centerText.style.top = '50%';
centerText.style.transform = 'translate(-50%, -50%)';
// 4. 그리고 페이지 이동
link.click();
}
});
}
attempts++;
if (attempts > 20) {
clearInterval(checkInterval);
}
}, 100);
})();
</script>
정지한 바늘을 관찰하기 위해 당신은
바늘을 [[적는다]]<div id="rain1" class="text-rain"></div>
<script>
makeTextRain("당신당신당신", "rain1");
</script>
당신은 [[고통]]의사는 당신에게 물을 것이다
당신의 고통이 여느때처럼
콕콕 쑤시는 형태인지
<div id="click-counter" style="text-align:center; font-size:1em; padding:50px;">
<br>
<span id="count">0</span> / 10
</div>
[[.....]]
<script>
setTimeout(function() {
var clickCount = 0;
var countDisplay = document.getElementById('count');
var link = document.querySelector('tw-link');
// 링크 숨기기
if (link) {
link.style.display = 'none';
}
// 화면 아무데나 클릭 감지
document.addEventListener('click', function() {
clickCount++;
countDisplay.textContent = clickCount;
if (clickCount >= 10) {
if (link) {
link.click();
}
}
});
}, 100);
</script>
<style>
::selection {
background-color: #ffffff; /* 흰색 배경 */
color: #ffffff; /* 검은 글자 */
text-shadow:
0 0 15px rgba(0, 0, 0, 0.8),
0 0 30px rgba(0, 0, 0, 0.6),
0 0 45px rgba(0, 0, 0, 0.4);
}
::-moz-selection {
background-color: #ffffff;
color: #ffffff;
}
::-webkit-selection {
background-color: #ffffff;
color: #ffffff;
text-shadow:
0 0 15px rgba(0, 0, 0, 0.8),
0 0 30px rgba(0, 0, 0, 0.6),
0 0 45px rgba(0, 0, 0, 0.4);
}
</style>
단지
<div id="drag-text">●▅▇█▇▆▅▄▇
</div>
<div style="display:none;">[[..]]</div>
<script>
setTimeout(function() {
var link = document.querySelector('tw-link');
if (link) {
document.getElementById('drag-text').addEventListener('mouseup', function() {
if (window.getSelection().toString().length > 0) {
link.click();
}
});
}
}, 200);
</script>
<div class="footnote">//*drag//</div><style>
::selection {
background-color: #ffffff; /* 흰색 배경 */
color: #ffffff; /* 검은 글자 */
text-shadow:
0 0 15px rgba(0, 0, 0, 0.8),
0 0 30px rgba(0, 0, 0, 0.6),
0 0 45px rgba(0, 0, 0, 0.4);
}
::-moz-selection {
background-color: #ffffff;
color: #ffffff;
}
::-webkit-selection {
background-color: #ffffff;
color: #ffffff;
text-shadow:
0 0 15px rgba(0, 0, 0, 0.8),
0 0 30px rgba(0, 0, 0, 0.6),
0 0 45px rgba(0, 0, 0, 0.4);
}
</style>
단지
<div id="drag-text">당신을 읽어주는 것
</div>
<div style="display:none;">[[...]]</div>
<script>
setTimeout(function() {
var link = document.querySelector('tw-link');
if (link) {
document.getElementById('drag-text').addEventListener('mouseup', function() {
if (window.getSelection().toString().length > 0) {
link.click();
}
});
}
}, 200);
</script>
<div class="footnote">//*drag//</div><style>
::selection {
background-color: #ffffff; /* 흰색 배경 */
color: #ffffff; /* 검은 글자 */
text-shadow:
0 0 15px rgba(0, 0, 0, 0.8),
0 0 30px rgba(0, 0, 0, 0.6),
0 0 45px rgba(0, 0, 0, 0.4);
}
::-moz-selection {
background-color: #ffffff;
color: #ffffff;
}
::-webkit-selection {
background-color: #ffffff;
color: #ffffff;
text-shadow:
0 0 15px rgba(0, 0, 0, 0.8),
0 0 30px rgba(0, 0, 0, 0.6),
0 0 45px rgba(0, 0, 0, 0.4);
}
</style>
<div id="drag-text">··················
</div>
<div style="display:none;">[[....]]</div>
<script>
setTimeout(function() {
var link = document.querySelector('tw-link');
if (link) {
document.getElementById('drag-text').addEventListener('mouseup', function() {
if (window.getSelection().toString().length > 0) {
link.click();
}
});
}
}, 200);
</script>
<div class="footnote">//*drag//</div><style>
::selection {
background-color: #ffffff; /* 흰색 배경 */
color: #ffffff; /* 검은 글자 */
text-shadow:
0 0 15px rgba(0, 0, 0, 0.8),
0 0 30px rgba(0, 0, 0, 0.6),
0 0 45px rgba(0, 0, 0, 0.4);
}
::-moz-selection {
background-color: #ffffff;
color: #ffffff;
}
::-webkit-selection {
background-color: #ffffff;
color: #ffffff;
text-shadow:
0 0 15px rgba(0, 0, 0, 0.8),
0 0 30px rgba(0, 0, 0, 0.6),
0 0 45px rgba(0, 0, 0, 0.4);
}
</style>
<div id="catch-area" style="position:relative; width:100%; height:400px; overflow:hidden;">
</div>
당신은 고통을 잡아보려고 한다
</div>
[[병원]]
<script>
setTimeout(function() {
var area = document.getElementById('catch-area');
var link = document.querySelector('tw-link');
link.style.display = 'none';
var words = ['콕', '콕', '콕', '콕', '콕'];
var caught = 0;
var needed = words.length;
words.forEach(function(word, index) {
setTimeout(function() {
var letter = document.createElement('div');
letter.textContent = word;
letter.style.position = 'absolute';
letter.style.left = (20 + index * 15) + '%';
letter.style.top = '0';
letter.style.fontSize = '1em';
letter.style.cursor = 'pointer';
letter.style.animation = 'fall-down ' + (3 + Math.random() * 2) + 's linear infinite';
area.appendChild(letter);
letter.addEventListener('click', function() {
this.remove();
caught++;
if (caught >= needed) {
link.click();
}
});
}, index * 500);
});
}, 100);
</script>
<style>
::selection {
background-color: #ffffff; /* 흰색 배경 */
color: #ffffff; /* 검은 글자 */
text-shadow:
0 0 15px rgba(0, 0, 0, 0.8),
0 0 30px rgba(0, 0, 0, 0.6),
0 0 45px rgba(0, 0, 0, 0.4);
}
::-moz-selection {
background-color: #ffffff;
color: #ffffff;
}
::-webkit-selection {
background-color: #ffffff;
color: #ffffff;
text-shadow:
0 0 15px rgba(0, 0, 0, 0.8),
0 0 30px rgba(0, 0, 0, 0.6),
0 0 45px rgba(0, 0, 0, 0.4);
}
</style>
<div id="catch-area" style="position:relative; width:100%; height:400px; overflow:hidden;">
</div>
플레이어는 당신을 알게 될까
[[......]]
<script>
setTimeout(function() {
var area = document.getElementById('catch-area');
var link = document.querySelector('tw-link');
link.style.display = 'none';
var words = ['당신', '당신','당신','당신','당신'];
var caught = 0;
var needed = words.length;
words.forEach(function(word, index) {
setTimeout(function() {
var letter = document.createElement('div');
letter.textContent = word;
letter.style.position = 'absolute';
letter.style.left = (20 + index * 15) + '%';
letter.style.top = '0';
letter.style.fontSize = '1em';
letter.style.cursor = 'pointer';
letter.style.animation = 'fall-down ' + (3 + Math.random() * 2) + 's linear infinite';
area.appendChild(letter);
letter.addEventListener('click', function() {
this.textContent = '*';
this.style.cursor = 'default';
this.onclick = null;
caught++;
if (caught >= needed) {
link.click();
}
});
}, index * 500);
});
}, 100);
</script>
<script>
if (window.pageSound) {
window.pageSound.pause();
window.pageSound.currentTime = 0;
}
if (window.bgmAudio) {
window.bgmAudio.pause();
window.bgmAudio.currentTime = 0;
}
if (window.pageSoundObserver) {
window.pageSoundObserver.disconnect(); // ★ 이후로는 자동 재생 자체를 막기
}
</script>
<div id="rain1" style="position:fixed; top:0; left:0; width:100%; height:100vh; overflow:hidden; z-index:1000; pointer-events:none;"></div>
<script>
setTimeout(function() {
if (window.fillScreenWithStars) {
window.fillScreenWithStars("rain1");
}
}, 100);
</script>