```html

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>카운트다운 타이머</title>

    <style>

        /* CSS */

        body {

            font-family: Arial, sans-serif;

            background-color: #f0f0f0;

        }


        #countdown {

            text-align: center;

            margin: 20px;

        }


        #countdown button {

            margin: 5px;

        }


        #countdown button:hover {

            background-color: #ccc;

        }


        #countdown .timer {

            font-size: 36px;

            font-weight: bold;

            color: #000;

        }


        #countdown .timer.red {

            color: #f00;

        }


        #countdown .dark-mode {

            display: none;

        }


        @media (prefers-color-scheme: dark) {

            #countdown .dark-mode {

                display: block;

            }

        }

    </style>

</head>

<body>

    <div id="countdown">

        <input type="number" id="minute" placeholder="분">

        <input type="number" id="second" placeholder="초">

        <button id="preset-5">5분</button>

        <button id="preset-10">10분</button>

        <button id="preset-15">15분</button>

        <button id="preset-30">30분</button>

        <button id="preset-60">60분</button>

        <button id="start">시작</button>

        <button id="pause">일시정지</button>

        <button id="resume">재개</button>

        <button id="reset">초기화</button>

        <div class="dark-mode">

            <button id="dark-mode">다크 모드</button>

        </div>

        <div class="timer" id="timer"></div>

    </div>


    <script>

        // JavaScript

        let timer;

        let audioContext;

        let oscillator;


        document.getElementById("preset-5").addEventListener("click", function() {

            document.getElementById("minute").value = 5;

            document.getElementById("second").value = 0;

        });


        document.getElementById("preset-10").addEventListener("click", function() {

            document.getElementById("minute").value = 10;

            document.getElementById("second").value = 0;

        });


        document.getElementById("preset-15").addEventListener("click", function() {

            document.getElementById("minute").value = 15;

            document.getElementById("second").value = 0;

        });


        document.getElementById("preset-30").addEventListener("click", function() {

            document.getElementById("minute").value = 30;

            document.getElementById("second").value = 0;

        });


        document.getElementById("preset-60").addEventListener("click", function() {

            document.getElementById("minute").value = 60;

            document.getElementById("second").value = 0;

        });


        document.getElementById("dark-mode").addEventListener("click", function() {

            document.body.classList.toggle("dark-mode");

        });


        document.getElementById("start").addEventListener("click", function() {

            timer = setInterval(function() {

                let minute = parseInt(document.getElementById("minute").value);

                let second = parseInt(document.getElementById("second").value);

                let time = minute * 60 + second;

                let remainingTime = time - Date.now() / 1000;

                if (remainingTime < 0) {

                    clearInterval(timer);

                    finish();

                    return;

                }

                let minuteDisplay = Math.floor(remainingTime / 60);

                let secondDisplay = Math.floor(remainingTime % 60);

                document.getElementById("timer").innerText = `${minuteDisplay.toString().padStart(2, 

"0")}:${secondDisplay.toString().padStart(2, "0")}`;

                if (secondDisplay < 10) {

                    document.getElementById("timer").classList.add("red");

                } else {

                    document.getElementById("timer").classList.remove("red");

                }

            }, 1000);


            // AudioContext resume

            audioContext = new AudioContext();

            audioContext.resume();


            // Sound effects

            let soundEffects = [

                [520, 650, 0.09, 0.06, 2],

                [440, 550, 0.15, 0.15, 6]

            ];


            function playSoundEffect(index) {

                let sound = audioContext.createOscillator();

                sound.type = "square";

                sound.frequency.value = soundEffects[index][0];

                sound.connect(audioContext.destination);

                sound.start(soundEffects[index][2]);

                sound.stop(soundEffects[index][2] + soundEffects[index][3]);

            }


            function finish() {

                if (minute < 5) return;

                if (minute < 1) return;

                playSoundEffect(0);

                setTimeout(function() {

                    playSoundEffect(0);

                }, 1000);

                setTimeout(function() {

                    playSoundEffect(1);

                }, 2000);

            }

        });


        document.getElementById("pause").addEventListener("click", function() {

            clearInterval(timer);

        });


        document.getElementById("resume").addEventListener("click", function() {

            timer = setInterval(function() {

                // ...

            }, 1000);

        });


        document.getElementById("reset").addEventListener("click", function() {

            clearInterval(timer);

            document.getElementById("minute").value = 0;

            document.getElementById("second").value = 0;

            document.getElementById("timer").innerText = "00:00";

            document.getElementById("timer").classList.remove("red");

        });

    </script>

</body>

</html>

```