\uc5b4\ub290 \uc544\ub984\ub2e4\uc6b4 \uacfc\ubd80\uc758 \uace0\ubbfc<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Gowun+Batang:wght@400;700&family=Noto+Serif+KR:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Gowun Batang', 'Noto Serif KR', serif;\n background: linear-gradient(180deg, #EBF4F6 0%, #E2EEF0 100%);\n color: #2D3748;\n word-break: keep-all;\n }\n .quote-box {\n background: rgba(255, 255, 255, 0.75);\n border-left: 4px solid #3182CE;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);\n }\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 550px;\n margin-left: auto;\n margin-right: auto;\n height: 280px;\n max-height: 380px;\n }\n @media (min-width: 768px) {\n .chart-container {\n height: 340px;\n }\n }\n <\/style>\n<\/head>\n<body class=\"min-h-screen flex flex-col justify-between selection:bg-sky-200 selection:text-sky-900\">\n\n \n <header class=\"w-full border-b border-sky-100 bg-white\/80 backdrop-blur sticky top-0 z-50 transition-all shadow-sm\">\n <div class=\"max-w-4xl mx-auto px-4 py-3 sm:px-6 sm:py-4 flex justify-between items-center flex-wrap gap-2\">\n <div class=\"flex items-center space-x-1.5\">\n <span class=\"text-lg sm:text-xl text-sky-600\">\u2615<\/span>\n <span class=\"text-xs sm:text-sm tracking-widest text-sky-900 font-semibold uppercase\">\ubc14\ub2f7\uac00 \ucc3b\uc9d1 ‘\uace0\ub3c5’<\/span>\n <\/div>\n \n <div class=\"flex items-center space-x-2 text-xs text-slate-600\">\n \n <div class=\"flex items-center gap-1.5 bg-sky-50 p-1 sm:p-1.5 rounded-full border border-sky-200\/60\">\n <button id=\"soundToggleBtn\" onclick=\"toggleOceanSound()\" class=\"hover:text-sky-800 transition px-2.5 py-1 rounded-full flex items-center gap-1 bg-white shadow-sm font-sans text-xs text-sky-900 font-medium\">\n <span id=\"soundIcon\">\ud83c\udf0a<\/span> <span id=\"soundText\">\ud30c\ub3c4 \uc18c\ub9ac<\/span>\n <\/button>\n <div class=\"flex items-center gap-1 pr-1.5\">\n <span class=\"text-sky-400 text-xs\">\ud83d\udd08<\/span>\n <input id=\"volumeSlider\" type=\"range\" min=\"0\" max=\"1\" step=\"0.05\" value=\"0.3\" oninput=\"changeVolume(this.value)\" class=\"w-12 sm:w-16 h-1 bg-sky-200 rounded-lg appearance-none cursor-pointer accent-sky-600\" title=\"\ud30c\ub3c4 \uc18c\ub9ac \uc74c\ub7c9 \uc870\uc808\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/header>\n\n \n <main class=\"max-w-3xl mx-auto px-4 py-8 md:py-14 flex-grow w-full\">\n\n \n <div class=\"text-center mb-8 md:mb-12 space-y-2\">\n <span class=\"inline-block text-xs tracking-widest text-sky-800 bg-sky-100\/80 px-3 py-1 rounded-full border border-sky-200 mb-1 font-sans font-medium\">\n \uc778\uc0dd\uc758 \uac08\ub4f1\uacfc \uc120\ud0dd\uc5d0 \uad00\ud55c \uc774\uc57c\uae30\n <\/span>\n <h1 class=\"text-2xl sm:text-3xl md:text-4xl font-bold text-slate-800 tracking-tight leading-snug\">\n \uc5b4\ub290 \uc544\ub984\ub2e4\uc6b4 \uacfc\ubd80\uc758 \uace0\ubbfc\n <\/h1>\n <div class=\"w-12 h-0.5 bg-sky-500\/50 mx-auto mt-3 rounded-full\"><\/div>\n <\/div>\n\n \n <section id=\"storySection\" class=\"prose prose-slate max-w-none text-base sm:text-lg leading-relaxed sm:leading-loose text-slate-700 space-y-6 sm:space-y-8 bg-white\/80 backdrop-blur-sm p-6 sm:p-9 md:p-11 rounded-3xl border border-sky-100 shadow-sm transition-all\">\n \n <p class=\"text-slate-800 leading-loose\">\n \ub9e4\uc6b0 \uc544\ub984\ub2e4\uc6b4 \uacfc\ubd80\ub97c<br>\n \ubc14\ub2f7\uac00 <strong class=\"font-semibold text-sky-900 border-b-2 border-sky-300 px-1 py-0.5\">‘\uace0\ub3c5’<\/strong>\uc774\ub780 \uc774\ub984\uc758 \ucc3b\uc9d1\uc5d0\uc11c \uc6b0\uc5f0\ud788 \ub9cc\ub0ac\ub294\ub370<br>\n \uc870\uc5b8\uc744 \uad6c\ud574\uc654\uc2b5\ub2c8\ub2e4.\n <\/p>\n\n <blockquote class=\"quote-box p-5 sm:p-6 rounded-r-2xl my-6 not-italic\">\n <p class=\"text-slate-800 leading-relaxed font-normal\">\n “\ubb38\uc81c\uac00 \uc788\ub294\ub370 \ub3c4\uc640\uc8fc\uc138\uc694.<br>\n \ub09c \uc9c0\uae08 \ub098\ubcf4\ub2e4 \ub098\uc774\uac00 \uc5b4\ub9b0 \ub9e4\uc6b0 \uc798 \uc0dd\uae34 \ub0a8\uc790\uc640 \uc0ac\ub791\uc5d0 \ube60\uc84c\uc2b5\ub2c8\ub2e4.<br>\n \ud558\uc9c0\ub9cc \uadf8\ub294 \uac00\ub09c\ud569\ub2c8\ub2e4.”\n <\/p>\n <p class=\"text-slate-800 leading-relaxed font-normal mt-4\">\n “\uadf8\ub7f0\ub370 \uc544\uc8fc \ubabb\uc0dd\uacbc\uc9c0\ub9cc \uad49\uc7a5\ud788 \ubd80\uc790\uc778 \ud55c \ub178\uc778\uc774 \ub098\ub97c \uc0ac\ub791\ud569\ub2c8\ub2e4.<br>\n \uc5b4\ub5bb\uac8c \ud558\uba74 \uc88b\uc744\uae4c\uc694, \ub204\uad6c\uc640 \uacb0\ud63c\ud574\uc57c \ud560\uae4c\uc694?”\n <\/p>\n <\/blockquote>\n\n <p class=\"text-slate-700 leading-loose\">\n \ub098\ub294 \ub208\uc744 \uac10\uace0 \uc0dd\uac01\uc5d0 \uae4a\uc774 \uc7a0\uacbc\uc2b5\ub2c8\ub2e4.<br>\n \uadf8\ub9ac\uace0\ub294 \ub9d0\ud588\uc2b5\ub2c8\ub2e4.\n <\/p>\n\n <blockquote class=\"quote-box p-5 sm:p-6 rounded-r-2xl border-l-sky-600 my-6 not-italic bg-sky-50\/60\">\n <p class=\"text-base sm:text-lg md:text-xl font-medium text-sky-950 leading-relaxed\">\n “\ubd80\uc790\uc640 \uacb0\ud63c\ud558\uc2dc\uc624, \uadf8\ub9ac\uace0 \uac00\ub09c\ud55c \uc80a\uc740\uc774\uc640 \ubc14\ub78c\uc744 \ud53c\uc6b0\uc2dc\uc624.”\n <\/p>\n <\/blockquote>\n\n <div class=\"py-2 sm:py-4 space-y-4 sm:space-y-6\">\n <p class=\"text-slate-800 leading-loose\">\n \uc138\uc0c1\uc758 \ubaa8\ub4e0 \uac08\ub4f1\uc740 \uc774\ub7f0 \uc2dd\uc73c\ub85c \uc77c\uc5b4\ub0a9\ub2c8\ub2e4.<br>\n \ud754\ud788\ub4e4 \uc6b0\ub9ac\ub294 \uc774\ub7f0 \uc2dd\uc73c\ub85c \uc591\ucabd\uc744 \ub2e4 \uc120\ud0dd\ud569\ub2c8\ub2e4.\n <\/p>\n\n <p class=\"text-slate-800 leading-loose\">\n \uadf8\ub54c\ubd80\ud130 \ubc24\ub9c8\ub2e4 \uc790\uc2e0\uc758 \uac10\uc815\uc5d0 \uc591\ub150\uc744 \uce58\uba70<br>\n \ud569\ub9ac\ud654\ub294 \uc2dc\uc791\uc774 \ub418\uace0 \uc0b6 \uc790\uccb4\uac00 \uac08\ub4f1\uc774 \ub418\ub294 \uac83\uc785\ub2c8\ub2e4.\n <\/p>\n <\/div>\n\n <hr class=\"border-sky-100 my-8\">\n\n <div class=\"text-center pt-2\">\n <h3 id=\"questionHeading\" class=\"text-lg sm:text-xl md:text-2xl font-bold text-sky-900 tracking-wide\">\n \u2664 \ub2f9\uc2e0\uc740 \uc5b4\ub5a4 \uc120\ud0dd, \uacb0\uc815\uc744 \ud558\uc2dc\uaca0\uc5b4\uc694???\n <\/h3>\n <\/div>\n <\/section>\n\n \n <section class=\"mt-8 sm:mt-10 bg-white\/60 backdrop-blur-sm border border-sky-100 rounded-3xl p-5 sm:p-7 space-y-6 shadow-sm\">\n <div class=\"text-center space-y-1\">\n <h2 class=\"text-base sm:text-lg font-semibold text-slate-800\">\uc544\ub798 \uc120\ud0dd\uc9c0\ub97c \ub20c\ub7ec \uc0ac\ub78c\ub4e4\uc758 \uc0dd\uac01\uacfc \ube44\uad50\ud574 \ubcf4\uc138\uc694<\/h2>\n <p class=\"text-xs text-slate-500 font-sans\">\uc120\ud0dd\uc9c0\ub97c \ud074\ub9ad\ud558\uba74 \ud558\ub2e8 \uacb0\uacfc\ub85c \uc774\ub3d9\ud558\uba70 \ud1b5\uacc4 \uadf8\ub798\ud504\uac00 \uc5c5\ub370\uc774\ud2b8\ub429\ub2c8\ub2e4.<\/p>\n <\/div>\n\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-3 max-w-xl mx-auto font-sans text-sm\">\n <button onclick=\"voteChoice(0)\" class=\"choice-btn p-4 rounded-2xl border border-sky-200\/80 bg-white hover:border-sky-500 hover:bg-sky-50\/80 transition text-left shadow-sm flex items-start gap-3.5 group active:scale-[0.98]\">\n <span class=\"w-6 h-6 rounded-full bg-sky-100 text-sky-700 flex items-center justify-center font-bold text-xs group-hover:bg-sky-600 group-hover:text-white transition shrink-0 mt-0.5\">1<\/span>\n <div>\n <div class=\"font-semibold text-slate-800\">\ubd80\uc790\uc640 \uacb0\ud63c\ud55c\ub2e4<\/div>\n <div class=\"text-xs text-slate-500 mt-0.5\">\ud604\uc2e4\uc801\uc778 \ud48d\uc694\uc640 \uc548\uc815\uc744 \uc6b0\uc120 \uc120\ud0dd<\/div>\n <\/div>\n <\/button>\n\n <button onclick=\"voteChoice(1)\" class=\"choice-btn p-4 rounded-2xl border border-sky-200\/80 bg-white hover:border-sky-500 hover:bg-sky-50\/80 transition text-left shadow-sm flex items-start gap-3.5 group active:scale-[0.98]\">\n <span class=\"w-6 h-6 rounded-full bg-sky-100 text-sky-700 flex items-center justify-center font-bold text-xs group-hover:bg-sky-600 group-hover:text-white transition shrink-0 mt-0.5\">2<\/span>\n <div>\n <div class=\"font-semibold text-slate-800\">\uac00\ub09c\ud55c \uc80a\uc740\uc774\uc640 \uacb0\ud63c\ud55c\ub2e4<\/div>\n <div class=\"text-xs text-slate-500 mt-0.5\">\uc21c\uc218\ud55c \uc0ac\ub791\uacfc \uc80a\uc74c\uc744 \uc6b0\uc120 \uc120\ud0dd<\/div>\n <\/div>\n <\/button>\n\n <button onclick=\"voteChoice(2)\" class=\"choice-btn p-4 rounded-2xl border border-sky-200\/80 bg-white hover:border-sky-500 hover:bg-sky-50\/80 transition text-left shadow-sm flex items-start gap-3.5 group active:scale-[0.98]\">\n <span class=\"w-6 h-6 rounded-full bg-sky-100 text-sky-700 flex items-center justify-center font-bold text-xs group-hover:bg-sky-600 group-hover:text-white transition shrink-0 mt-0.5\">3<\/span>\n <div>\n <div class=\"font-semibold text-slate-800\">\uc591\ucabd \ub2e4 \uc120\ud0dd\/\ud0c0\ud611\ud55c\ub2e4<\/div>\n <div class=\"text-xs text-slate-500 mt-0.5\">\ubcf8\ubb38 \uc18d \uc870\uc5b8\ucc98\ub7fc \uc774\uc911\uc801 \uc120\ud0dd<\/div>\n <\/div>\n <\/button>\n\n <button onclick=\"voteChoice(3)\" class=\"choice-btn p-4 rounded-2xl border border-sky-200\/80 bg-white hover:border-sky-500 hover:bg-sky-50\/80 transition text-left shadow-sm flex items-start gap-3.5 group active:scale-[0.98]\">\n <span class=\"w-6 h-6 rounded-full bg-sky-100 text-sky-700 flex items-center justify-center font-bold text-xs group-hover:bg-sky-600 group-hover:text-white transition shrink-0 mt-0.5\">4<\/span>\n <div>\n <div class=\"font-semibold text-slate-800\">\ub458 \ub2e4 \ud3ec\uae30\ud558\uace0 \ud640\ub85c\uc11c\uae30<\/div>\n <div class=\"text-xs text-slate-500 mt-0.5\">\uac08\ub4f1\uc758 \uc528\uc557\uc744 \ub04a\uace0 \uc8fc\uccb4\uc801 \uc0b6 \uc120\ud0dd<\/div>\n <\/div>\n <\/button>\n <\/div>\n <\/section>\n\n \n <section id=\"resultContainer\" class=\"mt-8 scroll-mt-20\">\n \n <div id=\"reflectionResult\" class=\"hidden bg-sky-50\/90 border border-sky-200 rounded-2xl p-5 sm:p-6 text-sm text-slate-800 leading-relaxed font-sans shadow-sm transition-all mb-6\">\n <div class=\"font-semibold text-sky-950 text-base mb-2 flex items-center gap-2 border-b border-sky-200 pb-2\">\n <span>\ud83d\udca1<\/span> <span id=\"selectedChoiceTitle\">\uc120\ud0dd\uc5d0 \ub300\ud55c \uc131\ucc30<\/span>\n <\/div>\n <p id=\"selectedChoiceDesc\" class=\"text-slate-700 text-sm sm:text-base leading-relaxed\"><\/p>\n <\/div>\n\n \n <div class=\"bg-white\/80 backdrop-blur-sm border border-sky-100 rounded-3xl p-4 sm:p-6 shadow-sm\">\n <div class=\"text-center mb-3\">\n <span class=\"text-xs font-sans tracking-wider text-slate-500 font-semibold uppercase\">\uc2e4\uc2dc\uac04 \ub300\uc911 \uc751\ub2f5 \ud1b5\uacc4<\/span>\n <\/div>\n <div class=\"chart-container\">\n <canvas id=\"dilemmaChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/section>\n\n <\/main>\n\n \n <footer class=\"w-full border-t border-sky-100 bg-white\/50 py-6 text-center text-xs text-slate-500 font-sans\">\n <div class=\"max-w-3xl mx-auto px-4 space-y-1\">\n <p>\ubc14\ub2f7\uac00 \ucc3b\uc9d1 ‘\uace0\ub3c5’\uc5d0\uc11c \ub098\ub204\ub294 \uc5d0\uc138\uc774 \uac10\uc0c1<\/p>\n <p class=\"text-slate-400\">\u00a9 \uc544\ub984\ub2e4\uc6b4 \uae00\uadc0\uc640 \uc778\ubb38\ud559\uc801 \uc131\ucc30<\/p>\n <\/div>\n <\/footer>\n\n \n <script>\n let oceanAudioCtx = null;\n let oceanGainNode = null;\n let isAudioPlaying = false;\n\n const initialData = [32, 28, 15, 25];\n const labels = [\n ['1. \ubd80\uc790\uc640', '\uacb0\ud63c'],\n ['2. \uc80a\uc740\uc774\uc640', '\uacb0\ud63c'],\n ['3. \uc591\ucabd \ubaa8\ub450', '\ud0c0\ud611'],\n ['4. \ubaa8\ub450 \ud3ec\uae30', '\ud640\ub85c\uc11c\uae30']\n ];\n\n const descriptions = [\n \"\ubd80\uc720\ud55c \ub178\uc778\uc744 \uc120\ud0dd\ud568\uc73c\ub85c\uc11c \uc138\uc18d\uc801 \uc548\uc815\uac10\uc744 \uc5bb\uc9c0\ub9cc, \ub9c8\uc74c \ud55c\uad6c\uc11d \ucc44\uc6cc\uc9c0\uc9c0 \uc54a\ub294 \uc5f0\ubaa8\uc758 \uc815 \ub54c\ubb38\uc5d0 \ubc24\ub9c8\ub2e4 \uc790\uc2e0\uc758 \uac10\uc815\uc744 \ud569\ub9ac\ud654\ud558\ub294 \uac08\ub4f1\uc5d0 \uc9c1\uba74\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\",\n \"\uc21c\uc218\ud55c \uc0ac\ub791\uc744 \uc120\ud0dd\ud558\uc5ec \ub9c8\uc74c\uc758 \uc5f4\uc815\uc744 \uc5bb\uc9c0\ub9cc, \ub2e5\uccd0\uc624\ub294 \ud604\uc2e4\uc801 \uac00\ub09c\uacfc \uc5b4\ub824\uc6c0 \uc55e\uc5d0\uc11c \uc120\ud0dd\uc744 \ud6c4\ud68c\ud558\uc9c0 \uc54a\uae30 \uc704\ud574 \uac10\uc815\uc744 \ub367\uce60\ud558\ub294 \uc2dc\ud5d8\uc5d0 \ub4e4\uac8c \ub429\ub2c8\ub2e4.\",\n \"\ubcf8\ubb38\uc758 \uc870\uc5b8\ucc98\ub7fc \ud0c0\ud611\uc548\uc744 \ubaa8\uc0c9\ud558\uc9c0\ub9cc, \uc774\ub294 \uac89\uc73c\ub85c\ub294 \uc695\ub9dd\uc744 \ub2e4 \ucc44\uc6b4 \ub4ef \ubcf4\uc5ec\ub3c4 \ubc24\ub9c8\ub2e4 \uc591\uc2ec\uc744 \uc18d\uc774\uba70 \ud569\ub9ac\ud654\uc758 \uc591\ub150\uc744 \uce58\ub294 \uc0b6\uc758 \uc2dc\uc791\uc810\uc774 \ub429\ub2c8\ub2e4.\",\n \"\ud0c0\uc778\uc758 \uc7ac\ub825\uc774\ub098 \uc5f0\ubaa8\uc5d0 \uc758\uc874\ud558\uc9c0 \uc54a\uace0 \ub3c5\ub9bd\uc744 \uc120\ud0dd\ud569\ub2c8\ub2e4. \uc695\ub9dd\uc758 \uc591\uadf9\ub2e8\uc5d0\uc11c \ubc97\uc5b4\ub098 \ub0b4\uba74\uc758 \ud3c9\uc628\uacfc \ubcf8\uc9c8\uc744 \uc9c0\ud0a4\ub824\ub294 \uacb0\ub2e8\uc785\ub2c8\ub2e4.\"\n ];\n\n let chartInstance = null;\n\n document.addEventListener('DOMContentLoaded', () => {\n initChart();\n setupMobileAudioUnlock();\n });\n\n function initChart() {\n const ctx = document.getElementById('dilemmaChart').getContext('2d');\n \n chartInstance = new Chart(ctx, {\n type: 'bar',\n data: {\n labels: labels,\n datasets: [{\n label: '\uc751\ub2f5 \ube44\uc728 (%)',\n data: initialData,\n backgroundColor: [\n 'rgba(56, 189, 248, 0.75)',\n 'rgba(14, 165, 233, 0.75)',\n 'rgba(2, 132, 199, 0.75)',\n 'rgba(71, 85, 105, 0.75)'\n ],\n borderColor: [\n '#38BDF8',\n '#0EA5E9',\n '#0284C7',\n '#475569'\n ],\n borderWidth: 1.5,\n borderRadius: 8\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: { display: false },\n tooltip: {\n callbacks: {\n label: function(context) {\n return ` \uc120\ud0dd \ube44\uc728: ${context.raw}%`;\n }\n }\n }\n },\n scales: {\n y: {\n beginAtZero: true,\n max: 55,\n grid: { color: 'rgba(0, 0, 0, 0.04)' },\n ticks: {\n callback: function(value) { return value + '%'; },\n font: { family: 'sans-serif', size: 10 }\n }\n },\n x: {\n grid: { display: false },\n ticks: { font: { family: 'sans-serif', size: 11 } }\n }\n }\n }\n });\n }\n\n function voteChoice(index) {\n initialData[index] += 3;\n \n const total = initialData.reduce((a, b) => a + b, 0);\n const normalized = initialData.map(val => Math.round((val \/ total) * 100));\n \n chartInstance.data.datasets[0].data = normalized;\n chartInstance.update();\n\n const buttons = document.querySelectorAll('.choice-btn');\n buttons.forEach((btn, idx) => {\n if(idx === index) {\n btn.classList.add('border-sky-500', 'bg-sky-50', 'ring-2', 'ring-sky-400\/40');\n } else {\n btn.classList.remove('border-sky-500', 'bg-sky-50', 'ring-2', 'ring-sky-400\/40');\n }\n });\n\n const resultBox = document.getElementById('reflectionResult');\n const titleEl = document.getElementById('selectedChoiceTitle');\n const descEl = document.getElementById('selectedChoiceDesc');\n\n const titleList = [\n \"1. \ubd80\uc790\uc640\uc758 \uacb0\ud63c\uc744 \uc120\ud0dd\ud55c \ub2f9\uc2e0\",\n \"2. \uac00\ub09c\ud558\uc9c0\ub9cc \uc80a\uc740 \uc5f0\uc778\uc744 \uc120\ud0dd\ud55c \ub2f9\uc2e0\",\n \"3. \uc591\ucabd\uc744 \ub2e4 \ucde8\ud558\ub294 \ud0c0\ud611\uc744 \uc0dd\uac01\ud55c \ub2f9\uc2e0\",\n \"4. \ubaa8\ub4e0 \uc695\ub9dd\uc758 \uace0\ub9ac\ub97c \ub04a\uace0 \ud640\ub85c\uc11c\uae30\ub97c \uc120\ud0dd\ud55c \ub2f9\uc2e0\"\n ];\n\n titleEl.textContent = titleList[index];\n descEl.textContent = descriptions[index];\n resultBox.classList.remove('hidden');\n\n document.getElementById('resultContainer').scrollIntoView({ behavior: 'smooth', block: 'start' });\n }\n\n function setupMobileAudioUnlock() {\n const unlockAudio = () => {\n if (oceanAudioCtx && oceanAudioCtx.state === 'suspended') {\n oceanAudioCtx.resume();\n }\n document.removeEventListener('touchstart', unlockAudio);\n document.removeEventListener('touchend', unlockAudio);\n document.removeEventListener('click', unlockAudio);\n };\n\n document.addEventListener('touchstart', unlockAudio, { once: true });\n document.addEventListener('touchend', unlockAudio, { once: true });\n document.addEventListener('click', unlockAudio, { once: true });\n }\n\n function toggleOceanSound() {\n const btnText = document.getElementById('soundText');\n const btnIcon = document.getElementById('soundIcon');\n\n if (!oceanAudioCtx) {\n const AudioContextClass = window.AudioContext || window.webkitAudioContext;\n oceanAudioCtx = new AudioContextClass();\n\n const bufferSize = oceanAudioCtx.sampleRate * 3;\n const noiseBuffer = oceanAudioCtx.createBuffer(1, bufferSize, oceanAudioCtx.sampleRate);\n const output = noiseBuffer.getChannelData(0);\n \n let b0 = 0, b1 = 0, b2 = 0, b3 = 0, b4 = 0, b5 = 0, b6 = 0;\n for (let i = 0; i < bufferSize; i++) {\n const white = Math.random() * 2 - 1;\n b0 = 0.99886 * b0 + white * 0.0555179;\n b1 = 0.99332 * b1 + white * 0.0750759;\n b2 = 0.96900 * b2 + white * 0.1538520;\n b3 = 0.86650 * b3 + white * 0.3104856;\n b4 = 0.55000 * b4 + white * 0.5329522;\n b5 = -0.7616 * b5 - white * 0.0168980;\n output[i] = b0 + b1 + b2 + b3 + b4 + b5 + b6 + white * 0.5362;\n output[i] *= 0.04; \n b6 = white * 0.115926;\n }\n\n const whiteNoise = oceanAudioCtx.createBufferSource();\n whiteNoise.buffer = noiseBuffer;\n whiteNoise.loop = true;\n\n const filter = oceanAudioCtx.createBiquadFilter();\n filter.type = 'lowpass';\n filter.frequency.setValueAtTime(300, oceanAudioCtx.currentTime);\n\n const lfo = oceanAudioCtx.createOscillator();\n lfo.frequency.setValueAtTime(0.12, oceanAudioCtx.currentTime);\n \n const lfoGain = oceanAudioCtx.createGain();\n lfoGain.gain.setValueAtTime(250, oceanAudioCtx.currentTime);\n\n lfo.connect(lfoGain);\n lfoGain.connect(filter.frequency);\n\n oceanGainNode = oceanAudioCtx.createGain();\n const initialVol = parseFloat(document.getElementById('volumeSlider').value);\n oceanGainNode.gain.setValueAtTime(initialVol, oceanAudioCtx.currentTime);\n\n whiteNoise.connect(filter);\n filter.connect(oceanGainNode);\n oceanGainNode.connect(oceanAudioCtx.destination);\n\n whiteNoise.start();\n lfo.start();\n }\n\n if (oceanAudioCtx.state === 'suspended' || !isAudioPlaying) {\n oceanAudioCtx.resume().then(() => {\n isAudioPlaying = true;\n btnText.textContent = \"\uc18c\ub9ac \ub044\uae30\";\n btnIcon.textContent = \"\ud83d\udd0a\";\n });\n } else {\n oceanAudioCtx.suspend().then(() => {\n isAudioPlaying = false;\n btnText.textContent = \"\ud30c\ub3c4 \uc18c\ub9ac\";\n btnIcon.textContent = \"\ud83c\udf0a\";\n });\n }\n }\n\n function changeVolume(val) {\n if (oceanGainNode && oceanAudioCtx) {\n oceanGainNode.gain.setValueAtTime(parseFloat(val), oceanAudioCtx.currentTime);\n }\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\uc5b4\ub290 \uc544\ub984\ub2e4\uc6b4 \uacfc\ubd80\uc758 \uace0\ubbfc \u2615 \ubc14\ub2f7\uac00 \ucc3b\uc9d1 ‘\uace0\ub3c5’ \ud83c\udf0a \ud30c\ub3c4 \uc18c\ub9ac \ud83d\udd08 \uc778\uc0dd\uc758 \uac08\ub4f1\uacfc \uc120\ud0dd\uc5d0 \uad00\ud55c \uc774\uc57c\uae30 \uc5b4\ub290 \uc544\ub984\ub2e4\uc6b4 \uacfc\ubd80\uc758 \uace0\ubbfc \ub9e4\uc6b0 \uc544\ub984\ub2e4\uc6b4 \uacfc\ubd80\ub97c \ubc14\ub2f7\uac00 ‘\uace0\ub3c5’\uc774\ub780 \uc774\ub984\uc758 \ucc3b\uc9d1\uc5d0\uc11c \uc6b0\uc5f0\ud788 \ub9cc\ub0ac\ub294\ub370 \uc870\uc5b8\uc744 \uad6c\ud574\uc654\uc2b5\ub2c8\ub2e4. “\ubb38\uc81c\uac00 \uc788\ub294\ub370 \ub3c4\uc640\uc8fc\uc138\uc694. \ub09c \uc9c0\uae08 \ub098\ubcf4\ub2e4 \ub098\uc774\uac00 \uc5b4\ub9b0 \ub9e4\uc6b0 \uc798 \uc0dd\uae34 \ub0a8\uc790\uc640 \uc0ac\ub791\uc5d0 \ube60\uc84c\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uadf8\ub294 \uac00\ub09c\ud569\ub2c8\ub2e4.” “\uadf8\ub7f0\ub370 \uc544\uc8fc \ubabb\uc0dd\uacbc\uc9c0\ub9cc \uad49\uc7a5\ud788 \ubd80\uc790\uc778 \ud55c […]<\/p>\n","protected":false},"author":1,"featured_media":12220,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","_uag_custom_page_level_css":"","pgc_sgb_lightbox_settings":"","fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-12219","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-1"],"views":23,"uagb_featured_image_src":{"full":["https:\/\/h9988.cbox.kr\/wp-content\/uploads\/2026\/09\/\uc5b4\ub290-\uc544\ub984\ub2e4\uc6b4-\uacfc\ubd80\uc758-\uace0\ubbfc.jpg",1536,1024,false],"thumbnail":["https:\/\/h9988.cbox.kr\/wp-content\/uploads\/2026\/09\/\uc5b4\ub290-\uc544\ub984\ub2e4\uc6b4-\uacfc\ubd80\uc758-\uace0\ubbfc-150x150.jpg",150,150,true],"medium":["https:\/\/h9988.cbox.kr\/wp-content\/uploads\/2026\/09\/\uc5b4\ub290-\uc544\ub984\ub2e4\uc6b4-\uacfc\ubd80\uc758-\uace0\ubbfc-300x200.jpg",300,200,true],"medium_large":["https:\/\/h9988.cbox.kr\/wp-content\/uploads\/2026\/09\/\uc5b4\ub290-\uc544\ub984\ub2e4\uc6b4-\uacfc\ubd80\uc758-\uace0\ubbfc-768x512.jpg",768,512,true],"large":["https:\/\/h9988.cbox.kr\/wp-content\/uploads\/2026\/09\/\uc5b4\ub290-\uc544\ub984\ub2e4\uc6b4-\uacfc\ubd80\uc758-\uace0\ubbfc-1024x683.jpg",1024,683,true],"1536x1536":["https:\/\/h9988.cbox.kr\/wp-content\/uploads\/2026\/09\/\uc5b4\ub290-\uc544\ub984\ub2e4\uc6b4-\uacfc\ubd80\uc758-\uace0\ubbfc.jpg",1536,1024,false],"2048x2048":["https:\/\/h9988.cbox.kr\/wp-content\/uploads\/2026\/09\/\uc5b4\ub290-\uc544\ub984\ub2e4\uc6b4-\uacfc\ubd80\uc758-\uace0\ubbfc.jpg",1536,1024,false]},"uagb_author_info":{"display_name":"ds1avz10","author_link":"https:\/\/h9988.cbox.kr\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"\uc5b4\ub290 \uc544\ub984\ub2e4\uc6b4 \uacfc\ubd80\uc758 \uace0\ubbfc \u2615 \ubc14\ub2f7\uac00 \ucc3b\uc9d1 ‘\uace0\ub3c5’ \ud83c\udf0a \ud30c\ub3c4 \uc18c\ub9ac \ud83d\udd08 \uc778\uc0dd\uc758 \uac08\ub4f1\uacfc \uc120\ud0dd\uc5d0 \uad00\ud55c \uc774\uc57c\uae30 \uc5b4\ub290 \uc544\ub984\ub2e4\uc6b4 \uacfc\ubd80\uc758 \uace0\ubbfc \ub9e4\uc6b0 \uc544\ub984\ub2e4\uc6b4 \uacfc\ubd80\ub97c \ubc14\ub2f7\uac00 ‘\uace0\ub3c5’\uc774\ub780 \uc774\ub984\uc758 \ucc3b\uc9d1\uc5d0\uc11c \uc6b0\uc5f0\ud788 \ub9cc\ub0ac\ub294\ub370 \uc870\uc5b8\uc744 \uad6c\ud574\uc654\uc2b5\ub2c8\ub2e4. “\ubb38\uc81c\uac00 \uc788\ub294\ub370 \ub3c4\uc640\uc8fc\uc138\uc694. \ub09c \uc9c0\uae08 \ub098\ubcf4\ub2e4 \ub098\uc774\uac00 \uc5b4\ub9b0 \ub9e4\uc6b0 \uc798 \uc0dd\uae34 \ub0a8\uc790\uc640 \uc0ac\ub791\uc5d0 \ube60\uc84c\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uadf8\ub294 \uac00\ub09c\ud569\ub2c8\ub2e4.” “\uadf8\ub7f0\ub370 \uc544\uc8fc \ubabb\uc0dd\uacbc\uc9c0\ub9cc \uad49\uc7a5\ud788 \ubd80\uc790\uc778 \ud55c…","_links":{"self":[{"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=\/wp\/v2\/posts\/12219","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12219"}],"version-history":[{"count":1,"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=\/wp\/v2\/posts\/12219\/revisions"}],"predecessor-version":[{"id":12221,"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=\/wp\/v2\/posts\/12219\/revisions\/12221"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=\/wp\/v2\/media\/12220"}],"wp:attachment":[{"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12219"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=12219"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=12219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}