\ub208\ubb3c \ub098\ub3c4\ub85d \uc0b4\uc544\ub77c – \uc0ec\ub86f \ud0a4\ud2c0\ub9ac\uc758 \uae30\ub85d<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Noto+Serif+KR:wght@400;700&family=Noto+Sans+KR:wght@300;400;700&display=swap');\n \n :root {\n --primary-warm: #fdfaf6;\n --accent-gold: #c5a059;\n --text-main: #2c2c2c;\n --soft-border: #e5e0d8;\n }\n\n body {\n font-family: 'Noto Sans KR', sans-serif;\n background-color: var(--primary-warm);\n color: var(--text-main);\n overflow-x: hidden;\n }\n\n .serif { font-family: 'Noto Serif KR', serif; }\n\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n height: 280px;\n }\n\n .fade-in {\n animation: fadeIn 1.2s ease-out forwards;\n }\n\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n <\/style>\n<\/head>\n<body>\n\n<nav class=\"fixed top-0 w-full bg-white\/80 backdrop-blur-md z-50 border-b border-gray-200\">\n <div class=\"max-w-5xl mx-auto px-4 h-16 flex items-center justify-between\">\n <span class=\"serif font-bold text-lg text-amber-800\">Live to the point of tears<\/span>\n <div class=\"hidden md:flex space-x-6 text-sm\">\n <a href=\"#intro\" class=\"hover:text-amber-600 transition\">\ubc30\uacbd<\/a>\n <a href=\"#struggle\" class=\"hover:text-amber-600 transition\">\ud22c\ubcd1\uae30<\/a>\n <a href=\"#insight\" class=\"hover:text-amber-600 transition\">\uae68\ub2ec\uc74c<\/a>\n <a href=\"#reflection\" class=\"hover:text-amber-600 transition\">\uc624\ub298\uc758 \ubb35\uc0c1<\/a>\n <\/div>\n <\/div>\n<\/nav>\n\n<header class=\"pt-32 pb-20 px-4 text-center bg-gradient-to-b from-amber-50 to-white\">\n <div class=\"max-w-4xl mx-auto fade-in\">\n <h2 class=\"text-amber-700 serif text-xl mb-4 italic\">\u201cLive to the point of tears\u201d<\/h2>\n <h1 class=\"text-4xl md:text-5xl serif font-bold mb-6 leading-tight\">\ub208\ubb3c \ub098\ub3c4\ub85d \uc0b4\uc544\ub77c<\/h1>\n <p class=\"text-gray-600 text-lg max-w-2xl mx-auto leading-relaxed\">\n \ud504\ub791\uc2a4\uc758 \uc791\uac00 \uc54c\ubca0\ub974 \uce74\ubb88\uac00 \ub0a8\uae34 \uc774 \ub9d0\uc740, \ub2e8\uc21c\ud788 \uc2ac\ud514\uc744 \ub73b\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<br>\n \ub9e4 \uc21c\uac04 \ubc85\ucc2c \uac10\ub3d9\uc744 \ub290\ub07c\uba70 \uc5f4\uc815\uc801\uc73c\ub85c \uc0b4\uc544\uac00\ub77c\ub294 \uc678\uce68\uc785\ub2c8\ub2e4.<br>\n \uadf8\ub9ac\uace0 \uc774 \ub9d0\uc744 \uac00\uc7a5 \uc0b6\uc73c\ub85c \uc99d\uba85\ud574\ub0b8 \ud55c \uc5ec\uc131\uc774 \uc788\uc2b5\ub2c8\ub2e4.\n <\/p>\n <\/div>\n<\/header>\n\n<section id=\"intro\" class=\"py-16 px-4 max-w-5xl mx-auto\">\n <div class=\"grid md:grid-cols-2 gap-12 items-center\">\n <div>\n <h3 class=\"serif text-2xl font-bold mb-4 text-amber-900\">\uc0ec\ub86f \ud0a4\ud2c0\ub9ac (Charlotte Kitley)<\/h3>\n <p class=\"text-gray-700 leading-relaxed mb-6\">\n \uc601\uad6d\uc758 \uc5ec\ub958 \uadf9\uc791\uac00\uc774\uc790 \ub450 \uc544\uc774\uc758 \uc5c4\ub9c8\uc600\ub358 \uc0ec\ub86f\uc740 \ub300\uc7a5\uc554 4\uae30 \uc9c4\ub2e8\uc744 \ubc1b\uc558\uc2b5\ub2c8\ub2e4. \uadf8\ub140\ub294 \uc5b4\ub9b0 \uc790\ub140\uc640 \ub0a8\ud3b8\uc744 \ub450\uace0 \ub5a0\ub098\uc57c \ud558\ub294 \uc808\ub9dd\uc801\uc778 \uc0c1\ud669 \uc18d\uc5d0\uc11c\ub3c4, \uc790\uc2e0\uc774 \ub0a8\uae34 \ube14\ub85c\uadf8 \uae00\uc744 \ud1b5\ud574 \uc804 \uc138\uacc4\uc778\ub4e4\uc5d0\uac8c \uc0b6\uc758 \uc9c4\uc815\ud55c \uac00\uce58\ub97c \uc77c\uae68\uc6cc\uc8fc\uc5c8\uc2b5\ub2c8\ub2e4.\n <\/p>\n <div class=\"p-4 bg-white border-l-4 border-amber-400 shadow-sm italic text-gray-600 rounded-r-lg\">\n “\uc0b4\uace0 \uc2f6\uc740 \ub098\ub0a0\uc774 \uc774\ub807\uac8c\ub3c4 \ub9ce\uc740\ub370 \uc800\ud55c\ud14c\ub294 \ud5c8\ub77d\ud558\uc9c0 \uc54a\ub124\uc694… \ub0b4 \uc544\uc774\ub4e4 \ucee4\uac00\ub294 \ubaa8\uc2b5\ub3c4 \ubcf4\uace0 \uc2f6\uace0, \ub0a8\ud3b8\uc5d0\uac8c\ub294 \ubabb\ub41c \ub9c8\ub204\ub77c\ub3c4 \ub418\uba74\uc11c \ub299\uc5b4\ubcf4\uace0 \uc2f6\uc740\ub370 \ub9d0\uc774\uc8e0.”\n <\/div>\n <\/div>\n <div class=\"bg-white p-6 rounded-2xl shadow-xl\">\n <h4 class=\"font-bold text-center mb-6 text-gray-800\">\uadf8\ub140\uac00 \uc0b6\uc744 \uc704\ud574 \uacac\ub38c\uc628 \uc2dc\uac04\ub4e4<\/h4>\n <div class=\"chart-container\">\n <canvas id=\"treatmentChart\"><\/canvas>\n <\/div>\n <p class=\"text-xs text-gray-400 mt-4 text-center\">\uadf8\ub140\ub294 \uc0b4\uae30 \uc704\ud574 \ucd5c\uc120\uc744 \ub2e4\ud588\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uadf8\ub140\uac00 \uae68\ub2ec\uc740 \uac83\uc740 \uce58\ub8cc\uc758 \uace0\ud1b5\ubcf4\ub2e4 \ud3c9\ubc94\ud55c \uc77c\uc0c1\uc758 \uc18c\uc911\ud568\uc774\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n <\/div>\n <\/div>\n<\/section>\n\n<section id=\"struggle\" class=\"py-20 bg-stone-100\">\n <div class=\"max-w-5xl mx-auto px-4 text-center\">\n <h3 class=\"serif text-3xl font-bold mb-4\">\uae30\uc801\ucc98\ub7fc \uc5bb\uc740 ‘\ubcf4\ub108\uc2a4 \uc2dc\uac04’<\/h3>\n <p class=\"mb-12 text-gray-600\">\uc758\uc0ac\uac00 \uc608\uace0\ud55c 6\uac1c\uc6d4\uc744 \ub118\uc5b4, \uadf8\ub140\ub294 16\uac1c\uc6d4\uc744 \ub354 \uc0b4\uc558\uc2b5\ub2c8\ub2e4.<\/p>\n \n <div class=\"flex flex-col md:flex-row items-center justify-center gap-10\">\n <div class=\"w-full md:w-1\/2 flex justify-center\">\n <div class=\"chart-container\">\n <canvas id=\"bonusTimeChart\"><\/canvas>\n <\/div>\n <\/div>\n <div class=\"w-full md:w-1\/2 text-left\">\n <div class=\"space-y-6\">\n <div class=\"p-5 bg-white rounded-xl shadow-sm border border-stone-200\">\n <span class=\"text-amber-600 font-bold text-lg block mb-1\">\uc544\uc774\uc758 \ucd08\ub4f1\ud559\uad50 \uc785\ud559<\/span>\n <p class=\"text-gray-600 text-sm\">\ubcf4\ub108\uc2a4 1\ub144 \ub355\ubd84\uc5d0 \uc544\uc774\uc758 \uc785\ud559\uc2dd \uccab\ub0a0 \uc190\uc744 \uc7a1\uace0 \ud559\uad50\uc5d0 \ub370\ub824\ub2e4 \uc904 \uc218 \uc788\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"p-5 bg-white rounded-xl shadow-sm border border-stone-200\">\n <span class=\"text-amber-600 font-bold text-lg block mb-1\">\uccab \ubc88\uc9f8 \uc790\uc804\uac70 \uc120\ubb3c<\/span>\n <p class=\"text-gray-600 text-sm\">\uc544\uc774\uc758 \ud754\ub4e4\ub9ac\ub358 \uc774\uac00 \ube60\uc84c\uc744 \ub54c, \ud568\uaed8 \uc790\uc804\uac70\ub97c \uc0ac\ub7ec \uac14\ub358 \uadf8 \uc21c\uac04\uc740 \uc138\uc0c1 \ubb34\uc5c7\ubcf4\ub2e4 \ud589\ubcf5\ud55c \ucd95\uc81c\uc600\uc2b5\ub2c8\ub2e4.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"insight\" class=\"py-24 px-4\">\n <div class=\"max-w-5xl mx-auto\">\n <h3 class=\"serif text-3xl font-bold mb-4 text-center\">\uc0ec\ub86f\uc774 \ub0a8\uae34 \uc0b6\uc758 \uc9c4\uc218<\/h3>\n <p class=\"text-gray-500 text-center mb-16\">\uadf8\ub140\uac00 \uc0b6\uc758 \ub05d\uc790\ub77d\uc5d0\uc11c \ubc1c\uacac\ud55c \ud3c9\ubc94\ud55c \uc77c\uc0c1\uc758 \uc18c\uc911\ud55c \uac00\uce58\ub4e4\uc785\ub2c8\ub2e4.<\/p>\n \n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6\">\n \n <div class=\"p-6 bg-white rounded-xl shadow-md border border-stone-200 flex flex-col items-center text-center\">\n <div class=\"w-14 h-14 bg-amber-100 rounded-full flex items-center justify-center mb-4 text-2xl\">\u2615<\/div>\n <h4 class=\"font-bold text-lg text-amber-900 mb-1\">\uc2dc\ub044\ub7ec\uc6b4 \uc544\uce68\uc758 \uc18c\ub3d9<\/h4>\n <span class=\"text-xs text-amber-600 font-medium mb-3\">\ud589\ubcf5\uc758 \uc2e4\uccb4<\/span>\n <p class=\"text-sm leading-relaxed text-gray-600\">\n \uc544\uc774\ub4e4\uc5d0\uac8c \ube68\ub9ac \uc77c\uc5b4\ub098\ub77c\uace0, \uc774 \ub2e6\uc73c\ub77c\uace0 \uc18c\ub9ac\uc9c0\ub974\ub294 \uadf8 \uc18c\ub780\uc2a4\ub7ec\uc6c0\uc774 \uc0ac\uc2e4\uc740 \uac00\uc7a5 \ud070 \ud589\ubcf5\uc774\uc5c8\uc2b5\ub2c8\ub2e4.\n <\/p>\n <\/div>\n\n \n <div class=\"p-6 bg-white rounded-xl shadow-md border border-stone-200 flex flex-col items-center text-center\">\n <div class=\"w-14 h-14 bg-amber-100 rounded-full flex items-center justify-center mb-4 text-2xl\">\ud83e\udde9<\/div>\n <h4 class=\"font-bold text-lg text-amber-900 mb-1\">\uc783\uc5b4\ubc84\ub9b0 \ub808\uace0 \ud55c \uc870\uac01<\/h4>\n <span class=\"text-xs text-amber-600 font-medium mb-3\">\uc5c4\ub9c8\ub77c\ub294 \uc774\ub984<\/span>\n <p class=\"text-sm leading-relaxed text-gray-600\">\n \uad6c\uc11d\uc5d0 \ubc15\ud78c \ub808\uace0 \uc870\uac01\uc744 \ucc3e\uc544\uc904 \uc218 \uc788\ub294 \uc0ac\ub78c\uc774 \ub098\ubfd0\uc774\ub77c\ub294 \uc0ac\uc2e4\uc774 \uc5bc\ub9c8\ub098 \uc18c\uc911\ud55c \ucc45\uc784\uc778\uc9c0 \uae68\ub2ec\uc558\uc2b5\ub2c8\ub2e4.\n <\/p>\n <\/div>\n\n \n <div class=\"p-6 bg-white rounded-xl shadow-md border border-stone-200 flex flex-col items-center text-center\">\n <div class=\"w-14 h-14 bg-amber-100 rounded-full flex items-center justify-center mb-4 text-2xl\">\u2696\ufe0f<\/div>\n <h4 class=\"font-bold text-lg text-amber-900 mb-1\">\ub298\uc5b4\ub098\ub294 \ud5c8\ub9ac\ub458\ub808<\/h4>\n <span class=\"text-xs text-amber-600 font-medium mb-3\">\uc0b4\uc544\ub0a8\uc558\ub2e4\ub294 \ud6c8\uc7a5<\/span>\n <p class=\"text-sm leading-relaxed text-gray-600\">\n \uc911\ub144\uc758 \ube44\ub9cc\uc870\ucc28\ub3c4 \ubd80\ub7fd\uc2b5\ub2c8\ub2e4. \uadf8\uac83\uc740 \uadf8\ub9cc\ud07c \uc138\uc0c1\uc5d0 \uc0b4\uc544\ub0a8\uc544 \uc2dc\uac04\uc744 \ub204\ub9ac\uace0 \uc788\ub2e4\ub294 \uac00\uc7a5 \ud655\uc2e4\ud55c \uc99d\uac70\ub2c8\uae4c\uc694.\n <\/p>\n <\/div>\n\n \n <div class=\"p-6 bg-white rounded-xl shadow-md border border-stone-200 flex flex-col items-center text-center\">\n <div class=\"w-14 h-14 bg-amber-100 rounded-full flex items-center justify-center mb-4 text-2xl\">\ud83e\udd1d<\/div>\n <h4 class=\"font-bold text-lg text-amber-900 mb-1\">\ub450 \uc190\uc73c\ub85c \uc0b6\uc744 \uaf2d \uc7a1\uae30<\/h4>\n <span class=\"text-xs text-amber-600 font-medium mb-3\">\ub2f9\ubd80\uc758 \ub9d0<\/span>\n <p class=\"text-sm leading-relaxed text-gray-600\">\n “\ubd80\ub514 \uc0b6\uc744 \uc990\uae30\uba74\uc11c \uc0ac\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4. \uc8fc\uc5b4\uc9c4 \ubaa8\ub4e0 \uac83\uc744 \uc628 \uac10\uac01\uc73c\ub85c \ub290\ub07c\uba70 \ub450 \uc190\uc73c\ub85c \uc0b6\uc744 \uaf2d \ubd99\ub4dc\uc138\uc694.”\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<section id=\"reflection\" class=\"py-20 bg-amber-900 text-white\">\n <div class=\"max-w-4xl mx-auto px-4 text-center\">\n <h3 class=\"serif text-3xl font-bold mb-6\">\ub2f9\uc2e0\uc774 \uc624\ub298 \ub204\ub9ac\uace0 \uc788\ub294 ‘\uc0ec\ub86f\uc758 \uafc8’<\/h3>\n <p class=\"text-amber-200 mb-12\">\uc0ec\ub86f\uc774 \uadf8\ud1a0\ub85d \ubc14\ub790\ub358 \uc18c\uc18c\ud55c \uc77c\uc0c1\ub4e4, \ub2f9\uc2e0\uc740 \uc624\ub298 \uba87 \uac00\uc9c0\ub098 \ub204\ub9ac\uace0 \uc788\ub098\uc694?<\/p>\n \n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4 text-left max-w-2xl mx-auto mb-12\">\n <label class=\"flex items-center p-4 bg-white\/10 rounded-lg cursor-pointer hover:bg-white\/20 transition\">\n <input type=\"checkbox\" class=\"w-5 h-5 accent-amber-500 mr-3 cursor-pointer\">\n <span>\uc544\uce68\uc5d0 \ub208\uc744 \ub5a0 \uac00\uc871\uc758 \uc5bc\uad74\uc744 \ubcf8 \uc77c<\/span>\n <\/label>\n <label class=\"flex items-center p-4 bg-white\/10 rounded-lg cursor-pointer hover:bg-white\/20 transition\">\n <input type=\"checkbox\" class=\"w-5 h-5 accent-amber-500 mr-3 cursor-pointer\">\n <span>\ub530\ub73b\ud55c \ucee4\ud53c \ud55c \uc794\uc744 \ub9c8\uc2dc\ub294 \uc5ec\uc720<\/span>\n <\/label>\n <label class=\"flex items-center p-4 bg-white\/10 rounded-lg cursor-pointer hover:bg-white\/20 transition\">\n <input type=\"checkbox\" class=\"w-5 h-5 accent-amber-500 mr-3 cursor-pointer\">\n <span>\uc544\uc774\ub4e4\uc774\ub098 \ubc18\ub824\ub3d9\ubb3c\uc758 \uc18c\ub780\uc2a4\ub7ec\uc6c0<\/span>\n <\/label>\n <label class=\"flex items-center p-4 bg-white\/10 rounded-lg cursor-pointer hover:bg-white\/20 transition\">\n <input type=\"checkbox\" class=\"w-5 h-5 accent-amber-500 mr-3 cursor-pointer\">\n <span>\ub098\uc774\uac00 \ub4e4\uc5b4 \ub298\uc5b4\ub09c \uc8fc\ub984\uc774\ub098 \ubc43\uc0b4<\/span>\n <\/label>\n <label class=\"flex items-center p-4 bg-white\/10 rounded-lg cursor-pointer hover:bg-white\/20 transition\">\n <input type=\"checkbox\" class=\"w-5 h-5 accent-amber-500 mr-3 cursor-pointer\">\n <span>\ub204\uad70\uac00\uc5d0\uac8c ‘\ubabb\ub41c’ \ud22c\uc815\uc774\ub77c\ub3c4 \ubd80\ub9b4 \uc0c1\ub300<\/span>\n <\/label>\n <label class=\"flex items-center p-4 bg-white\/10 rounded-lg cursor-pointer hover:bg-white\/20 transition\">\n <input type=\"checkbox\" class=\"w-5 h-5 accent-amber-500 mr-3 cursor-pointer\">\n <span>\ub0b4\uc77c\uc758 \uacc4\ud68d\uc744 \uc138\uc6b8 \uc218 \uc788\ub294 \uc624\ub298<\/span>\n <\/label>\n <\/div>\n \n <button onclick=\"showAlert()\" class=\"bg-amber-500 hover:bg-amber-400 text-amber-950 font-bold py-4 px-10 rounded-full shadow-lg transition-transform hover:scale-105 active:scale-95\">\n \uc624\ub298 \ud558\ub8e8, \uac10\uc0ac\ud558\uba70 \uc0b4\uae30\n <\/button>\n <\/div>\n<\/section>\n\n<footer class=\"py-12 bg-stone-200 border-t border-stone-300 text-center\">\n <p class=\"serif italic text-gray-600 mb-2\">\u201c\ub208\ubb3c \ub098\ub3c4\ub85d \uc0b4\uc544\ub77c\u201d – \uc54c\ubca0\ub974 \uce74\ubb88 & \uc0ec\ub86f \ud0a4\ud2c0\ub9ac<\/p>\n <p class=\"text-xs text-gray-500 px-4\">\uc774 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc740 \uc0ec\ub86f \ud0a4\ud2c0\ub9ac\uc758 \ub9c8\uc9c0\ub9c9 \ube14\ub85c\uadf8 \uae00\uc744 \ubc14\ud0d5\uc73c\ub85c \uc81c\uc791\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n<\/footer>\n\n<script>\n \/\/ 1. Treatment Chart (\ud22c\ubcd1\uae30 \uc2dc\uac01\ud654)\n const ctx1 = document.getElementById('treatmentChart').getContext('2d');\n new Chart(ctx1, {\n type: 'bar',\n data: {\n labels: ['\uc885\uc591 \uc81c\uac70\uc220', '\ubc29\uc0ac\uc120 \uce58\ub8cc', '\ud654\ud559\uc694\ubc95'],\n datasets: [{\n label: '\uce58\ub8cc \ud69f\uc218',\n data: [2, 25, 39],\n backgroundColor: ['#c5a059', '#d4b475', '#e3c891'],\n borderRadius: 8\n }]\n },\n options: {\n indexAxis: 'y',\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: { display: false }\n },\n scales: {\n x: { beginAtZero: true, grid: { display: false } },\n y: { grid: { display: false } }\n }\n }\n });\n\n \/\/ 2. Bonus Time Chart (\uae30\uc801\uc758 22\uac1c\uc6d4)\n const ctx2 = document.getElementById('bonusTimeChart').getContext('2d');\n new Chart(ctx2, {\n type: 'doughnut',\n data: {\n labels: ['\uc608\uace0\ub41c 6\uac1c\uc6d4', '\uae30\uc801\uc758 \ubcf4\ub108\uc2a4 (16\uac1c\uc6d4)'],\n datasets: [{\n data: [6, 16],\n backgroundColor: ['#e5e0d8', '#c5a059'],\n borderWidth: 0,\n hoverOffset: 10\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n cutout: '70%',\n plugins: {\n legend: { position: 'bottom' },\n tooltip: {\n callbacks: {\n label: function(context) {\n return ` ${context.label}: ${context.raw}\uac1c\uc6d4`;\n }\n }\n }\n }\n }\n });\n\n \/\/ 3. Action Logic\n function showAlert() {\n const checkedCount = document.querySelectorAll('input[type=\"checkbox\"]:checked').length;\n if (checkedCount === 0) {\n alert(\"\ub2f9\uc2e0\uc774 \ub2f9\uc5f0\ud558\uac8c \ub204\ub9ac\uace0 \uc788\ub294 \uc624\ub298 \ud558\ub098\ub9cc\uc774\ub77c\ub3c4 \uccb4\ud06c\ud574 \ubcf4\uc138\uc694. \uc0ec\ub86f\uc740 \uadf8\uac83\uc744 \uac04\uc808\ud788 \ubc14\ub790\uc2b5\ub2c8\ub2e4.\");\n } else {\n alert(`\ucd95\ud558\ud569\ub2c8\ub2e4! \ub2f9\uc2e0\uc740 \uc0ec\ub86f\uc774 \uac08\ub9dd\ud588\ub358 ${checkedCount}\uac00\uc9c0 \ud589\ubcf5\uc744 \uc624\ub298 \ub204\ub9ac\uace0 \uc788\uc2b5\ub2c8\ub2e4. \ub208\ubb3c \ub098\ub3c4\ub85d \uc544\ub984\ub2e4\uc6b4 \ud558\ub8e8 \ub418\uc2dc\uae38 \ubc14\ub78d\ub2c8\ub2e4.`);\n }\n }\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"ko\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\ub208\ubb3c \ub098\ub3c4\ub85d \uc0b4\uc544\ub77c – \uc0ec\ub86f \ud0a4\ud2c0\ub9ac\uc640 \uc624\ub298\uc758 \uc120\ubb3c<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Noto+Serif+KR:wght@400;700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');\n\n :root {\n --bg-warm: #FAF7F2;\n --accent-brown: #8B5E3C;\n --accent-gold: #D4A373;\n --text-dark: #2D2D2D;\n }\n\n body {\n font-family: 'Noto Sans KR', sans-serif;\n background-color: var(--bg-warm);\n color: var(--text-dark);\n scroll-behavior: smooth;\n }\n\n .serif { font-family: 'Noto Serif KR', serif; }\n\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n height: 350px;\n max-height: 400px;\n }\n\n .gift-box {\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n }\n\n .gift-box:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 25px -5px rgba(139, 94, 60, 0.1);\n }\n\n .fade-in {\n animation: fadeIn 1.5s ease-out;\n }\n\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n input[type=\"checkbox\"]:checked + span {\n text-decoration: line-through;\n color: #9CA3AF;\n }\n <\/style>\n<\/head>\n<body>\n\n\n\n\n\n\n<nav class=\"fixed top-0 w-full bg-white\/70 backdrop-blur-md z-50 border-b border-stone-200\">\n <div class=\"max-w-5xl mx-auto px-6 h-16 flex items-center justify-between\">\n <span class=\"serif font-bold text-lg text-amber-900 tracking-tight\">Present: Today<\/span>\n <div class=\"space-x-8 text-sm font-medium text-stone-600\">\n <a href=\"#message\" class=\"hover:text-amber-700 transition\">\uc0ec\ub86f\uc758 \uba54\uc2dc\uc9c0<\/a>\n <a href=\"#wisdom\" class=\"hover:text-amber-700 transition\">\uc624\ub298\uc758 \uc9c0\ud61c<\/a>\n <a href=\"#action\" class=\"hover:text-amber-700 transition\">\uc2e4\ucc9c\ud558\uae30<\/a>\n <\/div>\n <\/div>\n<\/nav>\n\n<header class=\"relative pt-32 pb-24 px-6 overflow-hidden\">\n <div class=\"max-w-4xl mx-auto text-center fade-in\">\n <h2 class=\"serif text-amber-700 text-lg md:text-xl mb-6 tracking-widest italic\">\u201cLive to the point of tears\u201d<\/h2>\n <h1 class=\"serif text-4xl md:text-6xl font-bold mb-8 leading-tight text-stone-800\">\ub208\ubb3c \ub098\ub3c4\ub85d \uc0b4\uc544\ub77c<\/h1>\n <p class=\"text-stone-600 text-lg md:text-xl max-w-2xl mx-auto leading-relaxed font-light\">\n \uc5b4\uc81c \uc8fd\uc5b4\uac04 \uc0ac\ub78c\ub4e4\uc774 \uadf8\ud1a0\ub85d \uadf8\ub9ac\uc6cc\ud588\ub358 \ub0b4\uc77c.<br>\n \uc6b0\ub9ac\uac00 \ub2f9\uc5f0\ud558\uac8c \ub9de\uc774\ud55c \uc774 ‘\uc624\ub298’\uc740 \uc0ac\uc2e4<br>\n \uc138\uc0c1\uc5d0\uc11c \uac00\uc7a5 \uadc0\ud55c \uc120\ubb3c\uc785\ub2c8\ub2e4.\n <\/p>\n <\/div>\n<\/header>\n\n<section id=\"message\" class=\"py-20 bg-white\">\n <div class=\"max-w-5xl mx-auto px-6\">\n <div class=\"grid md:grid-cols-2 gap-16 items-center\">\n <div class=\"order-2 md:order-1\">\n <h3 class=\"serif text-2xl font-bold mb-6 text-stone-800\">\ud76c\uc18c\uc131\uc774 \ub9cc\ub4dc\ub294 \uac00\uce58<\/h3>\n <p class=\"text-stone-600 leading-relaxed mb-6\">\n \uc6b0\ub9ac\ub294 \uc544\uce68\uc5d0 \ub208\uc744 \ub728\uba74 \ubcc4\ub2e4\ub978 \uc0dd\uac01 \uc5c6\uc774 \ud558\ub8e8\ub97c \ub9de\uc774\ud558\uace4 \ud569\ub2c8\ub2e4. \uc6b0\ub9ac\uc5d0\uac8c \uc8fc\uc5b4\uc9c4 \uc774 \ud558\ub8e8\ub97c \ub2f9\uc5f0\ud558\uac8c \uc5ec\uae30\uba70, \uc5b4\uc81c\ub3c4 \uadf8\uc800\uaed8\ub3c4 \uadf8\ub7ac\ub4ef \ub300\ucda9 \ubcf4\ub0b4\ubc84\ub9b4 \ub54c\uac00 \ub9ce\uc2b5\ub2c8\ub2e4.\n <\/p>\n <div class=\"p-6 bg-stone-50 border-l-4 border-amber-400 italic text-stone-700 mb-6\">\n “\ub9ce\ub2e4\ub294 \uac83\uacfc \ud558\ub098\ub294 \uadf8 \uac00\uce58\uc640 \uc758\ubbf8\uac00 \ub2e4\ub985\ub2c8\ub2e4. \ub2e8 \ud558\ub098\ubfd0\uc778 \uc624\ub298\ub85c \ub300\ud560 \ub54c, \ube44\ub85c\uc18c \ud558\ub8e8\uc758 \uc9c4\uc815\ud55c \uc18c\uc911\ud568\uc774 \ub4dc\ub7ec\ub0a9\ub2c8\ub2e4.”\n <\/div>\n <\/div>\n <div class=\"order-1 md:order-2 bg-stone-50 p-8 rounded-3xl shadow-sm border border-stone-100\">\n <h4 class=\"text-center font-bold text-stone-800 mb-6\">\uc778\uc0dd\uc774\ub77c\ub294 \uc2dc\uac04 \uc18d ‘\uc624\ub298’\uc758 \ube44\uc911<\/h4>\n <div class=\"chart-container\">\n <canvas id=\"valueChart\"><\/canvas>\n <\/div>\n <p class=\"text-xs text-center text-stone-400 mt-6\">\uc218\ucc9c \uac1c\uc758 \ud3c9\ubc94\ud55c \ub0a0\ub4e4 \uc18d\uc5d0\uc11c ‘\uc9c0\uae08 \uc774 \uc21c\uac04’\uc740 \ub2e8 \ud558\ub098\ubfd0\uc785\ub2c8\ub2e4.<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<section id=\"wisdom\" class=\"py-24 bg-stone-50\">\n <div class=\"max-w-5xl mx-auto px-6\">\n <div class=\"text-center mb-16\">\n <h3 class=\"serif text-3xl font-bold mb-4\">\uc2a4\ud39c\uc11c \uc874\uc2a8\uc758 ‘\uc120\ubb3c(The Present)’<\/h3>\n <p class=\"text-stone-500\">\uc9c0\ud61c\ub85c\uc6b4 \uc778\uc0dd\uc744 \uc704\ud55c \uc138 \uac00\uc9c0 \uc2dc\uac04\uc758 \ud37c\uc990<\/p>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n <div class=\"gift-box bg-white p-8 rounded-2xl border border-stone-200 text-center\">\n <div class=\"w-16 h-16 bg-stone-100 rounded-full flex items-center justify-center mx-auto mb-6 text-2xl\">\ud83d\udd70\ufe0f<\/div>\n <h4 class=\"font-bold text-xl mb-4 text-stone-800\">\uacfc\uac70\uc5d0\uc11c\uc758 \ubc30\uc6c0<\/h4>\n <p class=\"text-stone-600 text-sm leading-relaxed\">\n \uc9c0\ub09c \uc2dc\uac04\uc5d0 \ub300\ud55c \uc6d0\ub9dd\uc774\ub098 \uc2ac\ud514\uc744 \ud138\uc5b4\ub0b4\uace0, \uadf8 \uc18d\uc5d0\uc11c \ubc30\uc6c0\uc744 \uc5bb\uc73c\uc138\uc694. \ubc30\uc6c0\uc740 \ub450\ub824\uc6c0\uc744 \uc5c6\uc560\uc90d\ub2c8\ub2e4.\n <\/p>\n <\/div>\n <div class=\"gift-box bg-white p-8 rounded-2xl border-2 border-amber-300 text-center relative\">\n <div class=\"absolute -top-4 left-1\/2 -translate-x-1\/2 bg-amber-400 text-white px-4 py-1 rounded-full text-xs font-bold tracking-widest\">MOST PRECIOUS<\/div>\n <div class=\"w-16 h-16 bg-amber-50 rounded-full flex items-center justify-center mx-auto mb-6 text-2xl\">\ud83c\udf81<\/div>\n <h4 class=\"font-bold text-xl mb-4 text-amber-900\">\ud604\uc7ac\uc758 \uc120\ubb3c<\/h4>\n <p class=\"text-stone-600 text-sm leading-relaxed\">\n \uc9c0\uae08 \ubc14\ub85c \uc774 \uc21c\uac04\uc5d0 \ucd5c\uc120\uc744 \ub2e4\ud560 \ub54c \ube44\ub85c\uc18c \ud655\uc2e4\ud55c \ubbf8\ub798\uac00 \uc5f4\ub9bd\ub2c8\ub2e4. \uc624\ub298\uc774 \uac00\uc7a5 \uc18c\uc911\ud55c \uc120\ubb3c\uc785\ub2c8\ub2e4.\n <\/p>\n <\/div>\n <div class=\"gift-box bg-white p-8 rounded-2xl border border-stone-200 text-center\">\n <div class=\"w-16 h-16 bg-stone-100 rounded-full flex items-center justify-center mx-auto mb-6 text-2xl\">\ud83c\udf05<\/div>\n <h4 class=\"font-bold text-xl mb-4 text-stone-800\">\ubbf8\ub798\uc758 \uc790\uac01<\/h4>\n <p class=\"text-stone-600 text-sm leading-relaxed\">\n \uc624\ub298\uc744 \uce58\uc5f4\ud558\uac8c \uc0b4\uc544\uac00\ub294 \ud0dc\ub3c4\ub294 \ub354 \ub098\uc740 \ubbf8\ub798\ub97c \uc704\ud55c \uac00\uc7a5 \ud655\uc2e4\ud55c \ubcf4\uc7a5\uc774\uc790 \uc720\uc77c\ud55c \ud1b5\ub85c\uc785\ub2c8\ub2e4.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<section id=\"action\" class=\"py-24 bg-white\">\n <div class=\"max-w-4xl mx-auto px-6\">\n <div class=\"bg-amber-50 p-10 md:p-16 rounded-[3rem] text-center border border-amber-100\">\n <h3 class=\"serif text-3xl font-bold mb-6 text-amber-900\">\uac10\uc0ac\uc758 \ub300\uc5f4\uc5d0 \ucc38\uc5ec\ud558\uae30<\/h3>\n <p class=\"text-stone-600 mb-12\">\uc0ec\ub86f\uc774 \ub0a8\uae34 \uc720\uc5b8\ucc98\ub7fc, \ub2f9\uc2e0\uc758 \uc624\ub298\uc744 \uc0ac\ub791\ud558\uae30 \uc704\ud55c \uc791\uc740 \uc2e4\ucc9c\uc744 \uccb4\ud06c\ud574\ubcf4\uc138\uc694.<\/p>\n \n <div class=\"max-w-md mx-auto space-y-4 text-left mb-12\">\n <label class=\"flex items-center p-4 bg-white rounded-xl shadow-sm cursor-pointer hover:bg-stone-50 transition border border-transparent hover:border-amber-200\">\n <input type=\"checkbox\" class=\"w-5 h-5 rounded border-stone-300 text-amber-600 focus:ring-amber-500 mr-4\">\n <span class=\"text-stone-700\">\uc544\uce68\uc5d0 \ub208\uc744 \ub5b4\uc744 \ub54c ‘\uac10\uc0ac\ud569\ub2c8\ub2e4’ \ub9d0\ud558\uae30<\/span>\n <\/label>\n <label class=\"flex items-center p-4 bg-white rounded-xl shadow-sm cursor-pointer hover:bg-stone-50 transition border border-transparent hover:border-amber-200\">\n <input type=\"checkbox\" class=\"w-5 h-5 rounded border-stone-300 text-amber-600 focus:ring-amber-500 mr-4\">\n <span class=\"text-stone-700\">\uc9c0\ub098\uac04 \uc77c\uc5d0 \ub300\ud55c \ud6c4\ud68c 1\ubd84\ub9cc \uba48\ucd94\uae30<\/span>\n <\/label>\n <label class=\"flex items-center p-4 bg-white rounded-xl shadow-sm cursor-pointer hover:bg-stone-50 transition border border-transparent hover:border-amber-200\">\n <input type=\"checkbox\" class=\"w-5 h-5 rounded border-stone-300 text-amber-600 focus:ring-amber-500 mr-4\">\n <span class=\"text-stone-700\">\ub0b4 \uc8fc\uc704\uc758 \uc0ac\ub791\ud558\ub294 \uc0ac\ub78c\uc5d0\uac8c \ub2e4\uc815\ud55c \ub9d0 \uac74\ub124\uae30<\/span>\n <\/label>\n <label class=\"flex items-center p-4 bg-white rounded-xl shadow-sm cursor-pointer hover:bg-stone-50 transition border border-transparent hover:border-amber-200\">\n <input type=\"checkbox\" class=\"w-5 h-5 rounded border-stone-300 text-amber-600 focus:ring-amber-500 mr-4\">\n <span class=\"text-stone-700\">\uc624\ub298 \ud560 \uc218 \uc788\ub294 \uac00\uc7a5 \uc758\ubbf8 \uc788\ub294 \uc77c \ud55c \uac00\uc9c0 \ud558\uae30<\/span>\n <\/label>\n <\/div>\n\n <button onclick=\"checkParticipation()\" class=\"bg-amber-900 text-white font-bold py-5 px-12 rounded-full hover:bg-amber-800 transition transform hover:scale-105 shadow-xl\">\n \uc624\ub298 \ud558\ub8e8, \uc120\ubb3c\ub85c \ubc1b\uaca0\uc2b5\ub2c8\ub2e4\n <\/button>\n <\/div>\n <\/div>\n<\/section>\n\n<footer class=\"py-16 bg-stone-900 text-stone-400 text-center px-6\">\n <div class=\"max-w-4xl mx-auto\">\n <p class=\"serif italic text-lg mb-6 text-stone-200\">\u201c\uc778\uc0dd\uc740 \uc218\ub9ce\uc740 \ub0a0\ub4e4 \uc911 \ud558\ub8e8\uac00 \uc544\ub2c8\ub77c, \ub2e8 \ud558\ub098\ubfd0\uc778 \uc624\ub298\uc785\ub2c8\ub2e4.\u201d<\/p>\n <div class=\"h-px bg-stone-800 w-24 mx-auto mb-8\"><\/div>\n <p class=\"text-sm font-light leading-relaxed\">\n Inspired by Charlotte Kitley & Spencer Johnson<br>\n Produced to cherish the value of “The Present”\n <\/p>\n <\/div>\n<\/footer>\n\n<script>\n \/\/ Initialize Value Chart\n const ctx = document.getElementById('valueChart').getContext('2d');\n new Chart(ctx, {\n type: 'doughnut',\n data: {\n labels: ['\uc9c0\ub098\uac04\/\ub2e4\uac00\uc62c \uc218\ub9ce\uc740 \ub0a0\ub4e4', '\ub2e8 \ud558\ub098\ubfd0\uc778 \uc624\ub298'],\n datasets: [{\n data: [99, 1],\n backgroundColor: ['#E7E5E4', '#D4A373'],\n borderWidth: 0,\n hoverOffset: 10\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n cutout: '75%',\n plugins: {\n legend: {\n position: 'bottom',\n labels: {\n padding: 20,\n usePointStyle: true,\n font: { size: 12, family: 'Noto Sans KR' }\n }\n },\n tooltip: {\n callbacks: {\n label: function(context) {\n if(context.label === '\ub2e8 \ud558\ub098\ubfd0\uc778 \uc624\ub298') return \"\uc624\ub298: \uc720\uc77c\ubb34\uc774\ud55c \uac00\uce58\";\n return \"\uc218\ub9ce\uc740 \ub0a0\ub4e4: \ub2f9\uc5f0\ud558\uac8c \uc5ec\uaca8\uc9c0\ub294 \uc2dc\uac04\ub4e4\";\n }\n }\n }\n }\n }\n });\n\n function checkParticipation() {\n const checkedBoxes = document.querySelectorAll('input[type=\"checkbox\"]:checked');\n if (checkedBoxes.length > 0) {\n alert(`\uc774\ubbf8 ${checkedBoxes.length}\uac00\uc9c0\uc758 \uc18c\uc911\ud55c \uc2e4\ucc9c\uc744 \uc57d\uc18d\ud558\uc168\ub124\uc694! \uc0ec\ub86f\uc774 \uac08\ub9dd\ud588\ub358 \ub208\ubd80\uc2e0 \uc624\ub298\uc744 \uae30\uc058\uac8c \ud5a5\uc720\ud558\uc2dc\uae38 \ubc14\ub78d\ub2c8\ub2e4.`);\n } else {\n alert(\"\uc791\uc740 \uc2e4\ucc9c \ud558\ub098\uac00 \uc624\ub298\uc744 \ud2b9\ubcc4\ud55c \uc120\ubb3c\ub85c \ub9cc\ub4ed\ub2c8\ub2e4. \ud55c \uac00\uc9c0\ub9cc\uc774\ub77c\ub3c4 \uc120\ud0dd\ud574\ubcf4\uc2dc\uaca0\uc5b4\uc694?\");\n }\n }\n\n \/\/ Scroll Animation Interaction\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><\uc0ec\ub86f \ud0a4\ud2c0\ub9ac> <\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uae30\ud0c4\uc5c6\ub294 \uadf8\ub140\uc758 \ud55c \ub9c8\ub514 \ud55c \ub9c8\ub514\uac00 \uac00\uc2b4 \uc18d \uae4a\uc219\ud55c \uacf3\uae4c\uc9c0 \ub2ff\ub294 \ub9d0\uc774 \uc544\ub2d0 \uc218 \uc5c6\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"> \uc6b0\ub9ac\ub294 \uc544\uce68\uc5d0 \uc7a0\uc774 \uae68\uba74 \ub9e4\uc77c \ubcc4 \uc0dd\uac01 \uc5c6\uc774 \ud558\ub8e8\ub97c \ub9de\uc774\ud560 \ub54c\uac00 \ub9ce\ub2e4. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc6b0\ub9ac\uc5d0\uac8c \uc8fc\uc5b4\uc9c4 \ud558\ub8e8\ub97c \ub2f9\uc5f0\ud558\uac8c \uc0dd\uac01\ud558\uba70 \uc5b4\uc81c\ub3c4 \uadf8\uc800\uaed8\ub3c4 \uadf8\ub7ec\ud588\ub4ef\uc774 \ud558\ub8e8\ub97c \ub300\ucda9\ub300\ucda9 \ubcf4\ub0bc \ub54c\uac00 \ub9ce\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub7ec\ub098 \ub9e4\uc77c \ub9e4\uc77c \ub9de\uc774\ud558\ub294 \uc624\ub298 \ud558\ub8e8 \uadf8 \ud558\ub8e8\uac00 \uc5b4\uc81c \uc8fd\uc5b4\uac04 \uc0ac\ub78c\ub4e4\uc5d0\uac90 \uadf8\ud1a0\ub85d \uadf8\ub9ac\uc6cc \ud588\ub358 \uadf8 \ub0b4\uc77c\uc774\uc5c8\uace0 \uadf8\ub4e4\uc774 \uace0\ub300\ud558\uace0 \ub204\ub9ac\uace0 \uc2f6\uc5c8\ub358 \ud558\ub8e8\uc600\uc74c\uc744 \uc720\ub150\ud558\uba70 \uc0b4\uc544\uac00\uc790.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"> \ub9cc\uc77c \ub9e4\uc77c\uc758 \ub0b4 \uc0b6\uc774 \ub9c8\uc9c0\ub9c9 \ub0a0\uc774\ub77c\uace0 \uc0dd\uac01\ud558\uba70 \uc0b4\uc544\uac04\ub2e4\uba74 \ub098\ub294 \ubd84\uba85 \ud6d7\ub0a0 \uba4b\uc9c4 \uc0b6\uc744 \uc0b4\uc558\ub2e4\ub294 \uac78 \uc54c\uac8c \ub420 \uac83\uc774\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc624\ub298\uc744 \uc778\uc0dd\uc758 \ub9c8\uc9c0\ub9c9 \ub0a0\uc774\ub77c\uace0 \uc0dd\uac01\ud558\uba70 \uc0b4\uc544\uac00\ub294 \uc0ac\ub78c\uc774\uc57c\ub9d0\ub85c \uc624\ub298\uc758 \ud558\ub8e8\ub97c \uce58\uc5f4\ud558\uac8c \uc0b4\uace0 \uac00\uce58\uc788\uac8c \uc0b4\uace0 \uc758\ubbf8\uc788\uac8c \ubcf4\ub0b4\uba70 \uac10\uc0ac\ud558\uba74\uc11c \uc0ac\ub294 \uc0ac\ub78c\uc774\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ub9ce\ub2e4\ub294 \uac83\uacfc \ud558\ub098\ub294 \uadf8 \uac00\uce58\uc640 \uc758\ubbf8\uac00 \ub2e4\ub974\uace0 \ud558\ub8e8\uc758 \uc18c\uc911\ud568\uc744 \uc54c\uac8c \ud574 \uc8fc\uae30 \ub54c\ubb38\uc774\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"> \uc2a4\ud39c\uc2a4 \uc874\uc2a8(Spencer Johson)\uc740 \uadf8\uc758 \uc800\uc11c ‘\uc120\ubb3c(Present)’ \uc774\ub780 \ucc45\uc5d0\uc11c \ub098\ub97c \ud589\ubcf5\ud558\uac8c \ud558\ub294 \uc120\ubb3c\uc744 \uc8fc\uaca0\ub2e4\uba70 \uc9c0\ud61c\ub97c \uc120\ubb3c\ud588\ub294\ub370 \uadf8 \uc9c0\ud61c \uc18d\uc5d0\ub294 \uc138\uc0c1\uc5d0\uc11c \uac00\uc7a5 \uc18c\uc911\ud55c \uc120\ubb3c\uc774 \ubc14\ub85c “\uc9c0\uae08”\uacfc “\uc624\ub298”\uc774\ub77c\uace0 \uc77c\ub7ec \uc8fc\uc5c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc9c0\ub098\uac04 \uc2dc\uac04\uc5d0 \ub300\ud55c \uc6d0\ub9dd\uc774\ub098 \uc2ac\ud514\uc744 \ub5a8\uccd0\ubc84\ub9ac\uace0 \uadf8 \uc18d\uc5d0\uc11c \ubc30\uc6c0\uc744 \uc54c\uac8c \ub418\uba74 \ub450\ub824\uc6c0\uc774 \uc5c6\ub2e4\ub294 \uc790\uac01\uc744 \uc5bb\uac8c \ub428\uc73c\ub85c\uc368 “\uc9c0\uae08” \ubc14\ub85c “\uc624\ub298”\uc744 \uc704\ud574 \ucd5c\uc120\uc744 \ub2e4 \ud574 \uc0b4\uc544 \uac08 \ub54c \ubbf8\ub798\uac00 \ubcf4\uc7a5\ub41c\ub2e4\uace0 \ud588\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub798\uc11c \uc2a4\ud39c\uc11c \uc874\uc2a8\uc740 \uc778\uc0dd\uc744 “\ub208\ubb3c \ub098\ub3c4\ub85d \uc0b4\uc544\ub77c”\uace0 \ud558\ub294 \uc8fc\ubb38 \uc18d\uc5d0\ub294 \uac00\uc7a5 \uc18c\uc911\ud55c \uc120\ubb3c “\uc624\ub298 \ud558\ub8e8”\uc640 “\ud604\uc7ac”\uac00 \uace0\uc801(\u5b64\u5bc2)\ud788 \ub179\uc544 \uc788\uc74c\uc744 \ub9d0\ud558\uace0 \uc788\uc5c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774 \ud558\ub8e8(\ud604\uc7ac)\uac00 \uc5bc\ub9c8\ub098 \uc18c\uc911\ud55c \uac83\uc778 \uac00\ub97c \uc544\ub294 \uc0ac\ub78c\uc740 \uc9c4\uc815\uc73c\ub85c \uac10\uc0ac\ud560 \uc904 \uc54c\uba70 \ub0b4 \uc8fc\uc704\uc758 \ubaa8\ub4e0 \uac83\uc744 \uc0ac\ub791\ud558\uba70 \ucd5c\uc120\uc744 \ub2e4\ud574 \uc0b4\uc544\uac00\ub294 \uc0ac\ub78c\uc774\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"> \uc6b0\ub9ac \ubaa8\ub450\uac00 \uadf8 \ub300\uc5f4\uc5d0 \ucc38\uc5ec\ud55c\ub2e4\uba74 \uc815\ub9d0 \ud589\ubcf5\ud558\uace0 \uc990\uac70\uc6b4 \uc0b6\uc744 \ud5a5\uc720\ud558\ub294 \uc778\uc0dd\uc774\ub2e4<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[\uadf8\ub798\ud53d \uadf8\ub9bc\uc744 \ud130\uce58 \ud574\ubcf4\uc138\uc694 !] \ub208\ubb3c \ub098\ub3c4\ub85d \uc0b4\uc544\ub77c – \uc0ec\ub86f \ud0a4\ud2c0\ub9ac\uc758 \uae30\ub85d Live to the point of tears \ubc30\uacbd \ud22c\ubcd1\uae30 \uae68\ub2ec\uc74c \uc624\ub298\uc758 \ubb35\uc0c1 \u201cLive to the point of tears\u201d \ub208\ubb3c \ub098\ub3c4\ub85d \uc0b4\uc544\ub77c \ud504\ub791\uc2a4\uc758 \uc791\uac00 \uc54c\ubca0\ub974 \uce74\ubb88\uac00 \ub0a8\uae34 \uc774 \ub9d0\uc740, \ub2e8\uc21c\ud788 \uc2ac\ud514\uc744 \ub73b\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. \ub9e4 \uc21c\uac04 \ubc85\ucc2c \uac10\ub3d9\uc744 \ub290\ub07c\uba70 \uc5f4\uc815\uc801\uc73c\ub85c \uc0b4\uc544\uac00\ub77c\ub294 \uc678\uce68\uc785\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \uc774 \ub9d0\uc744 \uac00\uc7a5 […]<\/p>\n","protected":false},"author":1,"featured_media":12038,"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":[47],"tags":[],"class_list":["post-12042","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-47"],"views":32,"uagb_featured_image_src":{"full":["https:\/\/h9988.cbox.kr\/wp-content\/uploads\/2026\/07\/\ub208\ubb3c\uc774-\ub098\ub3c4\ub85d-\uc0b4\uc544\ub77c.jpg",1536,1024,false],"thumbnail":["https:\/\/h9988.cbox.kr\/wp-content\/uploads\/2026\/07\/\ub208\ubb3c\uc774-\ub098\ub3c4\ub85d-\uc0b4\uc544\ub77c-150x150.jpg",150,150,true],"medium":["https:\/\/h9988.cbox.kr\/wp-content\/uploads\/2026\/07\/\ub208\ubb3c\uc774-\ub098\ub3c4\ub85d-\uc0b4\uc544\ub77c-300x200.jpg",300,200,true],"medium_large":["https:\/\/h9988.cbox.kr\/wp-content\/uploads\/2026\/07\/\ub208\ubb3c\uc774-\ub098\ub3c4\ub85d-\uc0b4\uc544\ub77c-768x512.jpg",768,512,true],"large":["https:\/\/h9988.cbox.kr\/wp-content\/uploads\/2026\/07\/\ub208\ubb3c\uc774-\ub098\ub3c4\ub85d-\uc0b4\uc544\ub77c-1024x683.jpg",1024,683,true],"1536x1536":["https:\/\/h9988.cbox.kr\/wp-content\/uploads\/2026\/07\/\ub208\ubb3c\uc774-\ub098\ub3c4\ub85d-\uc0b4\uc544\ub77c.jpg",1536,1024,false],"2048x2048":["https:\/\/h9988.cbox.kr\/wp-content\/uploads\/2026\/07\/\ub208\ubb3c\uc774-\ub098\ub3c4\ub85d-\uc0b4\uc544\ub77c.jpg",1536,1024,false]},"uagb_author_info":{"display_name":"ds1avz10","author_link":"https:\/\/h9988.cbox.kr\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"[\uadf8\ub798\ud53d \uadf8\ub9bc\uc744 \ud130\uce58 \ud574\ubcf4\uc138\uc694 !] \ub208\ubb3c \ub098\ub3c4\ub85d \uc0b4\uc544\ub77c – \uc0ec\ub86f \ud0a4\ud2c0\ub9ac\uc758 \uae30\ub85d Live to the point of tears \ubc30\uacbd \ud22c\ubcd1\uae30 \uae68\ub2ec\uc74c \uc624\ub298\uc758 \ubb35\uc0c1 \u201cLive to the point of tears\u201d \ub208\ubb3c \ub098\ub3c4\ub85d \uc0b4\uc544\ub77c \ud504\ub791\uc2a4\uc758 \uc791\uac00 \uc54c\ubca0\ub974 \uce74\ubb88\uac00 \ub0a8\uae34 \uc774 \ub9d0\uc740, \ub2e8\uc21c\ud788 \uc2ac\ud514\uc744 \ub73b\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. \ub9e4 \uc21c\uac04 \ubc85\ucc2c \uac10\ub3d9\uc744 \ub290\ub07c\uba70 \uc5f4\uc815\uc801\uc73c\ub85c \uc0b4\uc544\uac00\ub77c\ub294 \uc678\uce68\uc785\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \uc774 \ub9d0\uc744 \uac00\uc7a5…","_links":{"self":[{"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=\/wp\/v2\/posts\/12042","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=12042"}],"version-history":[{"count":8,"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=\/wp\/v2\/posts\/12042\/revisions"}],"predecessor-version":[{"id":12053,"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=\/wp\/v2\/posts\/12042\/revisions\/12053"}],"wp:attachment":[{"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12042"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=12042"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=12042"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}