비몽사몽 새벽을 위한 배려: 야간 모드와 부드러운 웹 알람 구현기 (디테일 및 배포)

function playGentleChime() {
    audioContext = new (window.AudioContext || window.webkitAudioContext)();

    function triggerBell() {
        const osc = audioContext.createOscillator();
        const gainNode = audioContext.createGain();
        
        osc.type = 'sine'; // 부드러운 곡선 파형(사인파) 사용
        osc.connect(gainNode);
        gainNode.connect(audioContext.destination);
        
        const now = audioContext.currentTime;
        
        // 맑은 차임벨 소리 주파수 세팅 (미-솔)
        osc.frequency.setValueAtTime(659.25, now); 
        osc.frequency.setValueAtTime(783.99, now + 0.4); 
        
        // 소리가 서서히 커졌다가 부드럽게 사라지도록 볼륨(Envelope) 조절
        gainNode.gain.setValueAtTime(0, now);
        gainNode.gain.linearRampToValueAtTime(0.3, now + 0.05);
        gainNode.gain.exponentialRampToValueAtTime(0.01, now + 0.4);
        
        osc.start(now);
        osc.stop(now + 1.2);
    }
    
    triggerBell();
    window.chimeInterval = setInterval(triggerBell, 2000); // 2초마다 반복
}

/* 야간 모드 전환 CSS 변수 활용 */
body.dark-mode {
    --bg-color: #121212;
    --card-bg: #1E1E1E;
    --text-main: #E0E0E0;
    --text-sub: #9E9E9E;
    --input-bg: #2C2C2C;
}

/* 두근거리는 알약 애니메이션 */
@keyframes pulseEmoji { 
    0% { transform: scale(1) rotate(0deg); } 
    50% { transform: scale(1.15) rotate(-10deg); } 
    100% { transform: scale(1) rotate(0deg); } 
}
.alarm-emoji {
    animation: pulseEmoji 1.5s infinite;
}