\u751f\uc758 \ubaa9\ud45c – \uc774\ud574\uc778 | \ubaa8\ubc14\uc77c & \ub370\uc2a4\ud06c\ud1b1 \uc778\ud130\ub799\ud2f0\ube0c \uc2dc\uc9d1<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n \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 \/* Custom Font Definitions *\/\n .font-batang {\n font-family: 'Gowun Batang', 'Noto Serif KR', serif;\n }\n .font-serif-kr {\n font-family: 'Noto Serif KR', serif;\n }\n\n \/* Theme Styles *\/\n .theme-cream {\n background-color: #FAF7F2;\n color: #2C2A29;\n }\n .theme-hanji {\n background-color: #F3ECE1;\n background-image: radial-gradient(#e2d7c5 1px, transparent 1px);\n background-size: 16px 16px;\n color: #24211D;\n }\n .theme-night {\n background-color: #1A1918;\n color: #E6E1DA;\n }\n\n \/* Responsive Chart Container Rules *\/\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 520px;\n margin-left: auto;\n margin-right: auto;\n height: 320px;\n max-height: 380px;\n }\n @media (min-width: 768px) {\n .chart-container {\n height: 350px;\n }\n }\n\n \/* Custom Scrollbar & Glow Transitions *\/\n ::-webkit-scrollbar {\n width: 6px;\n }\n ::-webkit-scrollbar-track {\n background: rgba(0,0,0,0.05);\n }\n ::-webkit-scrollbar-thumb {\n background: rgba(180, 140, 90, 0.4);\n border-radius: 3px;\n }\n ::-webkit-scrollbar-thumb:hover {\n background: rgba(180, 140, 90, 0.7);\n }\n\n .highlight-line {\n transition: all 0.3s ease;\n border-left: 3px solid transparent;\n }\n .highlight-line:hover, .highlight-line.active {\n border-left-color: #D97706;\n background-color: rgba(217, 119, 6, 0.06);\n padding-left: 1.25rem;\n }\n\n .drop-cap::first-letter {\n font-size: 2.25rem;\n font-weight: 700;\n float: left;\n margin-right: 0.5rem;\n line-height: 1;\n color: #B45309;\n }\n <\/style>\n<\/head>\n<body class=\"theme-cream font-batang min-h-screen transition-colors duration-500 selection:bg-amber-200 selection:text-amber-900\">\n\n \n\n \n\n \n\n \n\n \n <header class=\"sticky top-0 z-50 backdrop-blur-md bg-opacity-90 border-b border-amber-900\/10 px-4 py-3 shadow-sm transition-colors duration-300\" id=\"topNav\">\n <div class=\"max-w-5xl mx-auto flex flex-wrap justify-between items-center gap-3\">\n <div class=\"flex items-center space-x-2\">\n <span class=\"text-2xl\">\ud83c\udf52<\/span>\n <h1 class=\"text-xl md:text-2xl font-bold tracking-tight text-amber-900 dark:text-amber-200\">\n \u751f\uc758 \ubaa9\ud45c <span class=\"text-sm font-normal opacity-80\">| \uc774\ud574\uc778<\/span>\n <\/h1>\n <\/div>\n\n \n <div class=\"flex items-center gap-2 flex-wrap text-sm\">\n \n <div class=\"inline-flex rounded-lg border border-amber-900\/20 p-0.5 bg-amber-50\/50\">\n <button onclick=\"setTheme('cream')\" id=\"btn-theme-cream\" class=\"px-2.5 py-1 rounded-md text-xs font-semibold transition-all bg-amber-800 text-white shadow-sm\">\n \u2600\ufe0f \ub2e8\uc544\n <\/button>\n <button onclick=\"setTheme('hanji')\" id=\"btn-theme-hanji\" class=\"px-2.5 py-1 rounded-md text-xs font-semibold transition-all text-amber-950 hover:bg-amber-200\/50\">\n \ud83d\udcdc \ud55c\uc9c0\n <\/button>\n <button onclick=\"setTheme('night')\" id=\"btn-theme-night\" class=\"px-2.5 py-1 rounded-md text-xs font-semibold transition-all text-amber-950 hover:bg-amber-200\/50\">\n \ud83c\udf19 \ubc24\n <\/button>\n <\/div>\n\n \n <div class=\"inline-flex rounded-lg border border-amber-900\/20 p-0.5 bg-amber-50\/50 items-center space-x-1\">\n <span class=\"text-xs px-1 text-amber-800\">\uae00\uaf34<\/span>\n <button onclick=\"changeFontSize(-1)\" class=\"px-2 py-0.5 rounded text-xs font-bold hover:bg-amber-200\/50\">\uac00-<\/button>\n <button onclick=\"changeFontSize(1)\" class=\"px-2 py-0.5 rounded text-xs font-bold hover:bg-amber-200\/50\">\uac00+<\/button>\n <\/div>\n\n \n <button onclick=\"toggleAudioSim()\" id=\"btn-audio\" class=\"px-3 py-1 rounded-lg bg-amber-700 text-white text-xs hover:bg-amber-800 transition flex items-center gap-1 shadow-sm\">\n <span id=\"audio-icon\">\u25b6<\/span> <span id=\"audio-text\">\ub0ad\ub3c5 \ubaa8\ub4dc<\/span>\n <\/button>\n <\/div>\n <\/div>\n <\/header>\n\n \n <main class=\"max-w-4xl mx-auto px-4 py-8 space-y-12\">\n\n \n <section class=\"text-center space-y-4 py-6 border-b border-amber-900\/10\">\n <span class=\"inline-block px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-xs tracking-widest uppercase font-sans\">Poem & Wisdom Showcase<\/span>\n <h2 class=\"text-3xl md:text-4xl font-bold tracking-tight text-amber-900 dark:text-amber-300\">\n \uac74\uac15\ud55c \ub178\ub144\uc758 \uc131\ucc30\uacfc \uc544\ub984\ub2e4\uc6b4 \uc0b6\uc758 \ubaa9\ud45c\n <\/h2>\n <p class=\"text-base md:text-lg text-amber-800\/80 max-w-2xl mx-auto leading-relaxed font-sans font-light\">\n \uc774\ud574\uc778 \uc218\ub140\uc758 \uc2dc \u300e\u751f\uc758 \ubaa9\ud45c\u300f \uc6d0\ubb38\uc744 \ub2e8 \ud55c \uae00\uc790\uc758 \ubcc0\ud615 \uc5c6\uc774, \ucd5c\uace0\uc758 \uac00\ub3c5\uc131\uacfc \uc778\ud130\ub799\ud2f0\ube0c \uc2dc\uac01\ud654\ub85c \uac10\uc0c1\ud558\uc2e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n <\/p>\n <\/section>\n\n \n <div class=\"flex justify-center border-b border-amber-900\/10 font-sans text-sm md:text-base\">\n <button onclick=\"switchTab('text-view')\" id=\"tab-text-view\" class=\"px-6 py-3 border-b-2 border-amber-700 font-bold text-amber-900 transition-all\">\n \ud83d\udcd6 \uc2dc \uc804\ubb38 \uc815\ub3c5\n <\/button>\n <button onclick=\"switchTab('cards-view')\" id=\"tab-cards-view\" class=\"px-6 py-3 border-b-2 border-transparent text-gray-500 hover:text-amber-800 transition-all\">\n \ud83c\udf3f \uc2e0\uccb4\uc640 \ub9c8\uc74c\uc758 \ubcc0\ud654\n <\/button>\n <button onclick=\"switchTab('chart-view')\" id=\"tab-chart-view\" class=\"px-6 py-3 border-b-2 border-transparent text-gray-500 hover:text-amber-800 transition-all\">\n \ud83d\udcca \uc0b6\uc758 \ube44\uc728 & \uc2dc\uac01\ud654\n <\/button>\n <\/div>\n\n \n <section id=\"sec-text-view\" class=\"space-y-8 transition-opacity duration-300\">\n <div class=\"bg-amber-50\/40 dark:bg-neutral-900\/40 p-6 md:p-10 rounded-2xl border border-amber-900\/10 shadow-sm space-y-8\" id=\"poem-content-wrapper\">\n\n <div class=\"text-center pb-4 border-b border-amber-900\/10\">\n <div class=\"text-3xl mb-2\">\ud83c\udf52<\/div>\n <h3 class=\"text-2xl md:text-3xl font-bold text-amber-950 dark:text-amber-100 font-batang\">\n \u751f\uc758 \ubaa9\ud45c\n <\/h3>\n <p class=\"text-sm text-amber-800\/70 mt-1 font-sans\"><\uc774\ud574\uc778><\/p>\n <\/div>\n\n \n <div id=\"poem-text-container\" class=\"space-y-6 text-lg md:text-xl leading-loose font-batang tracking-wide\">\n\n <p class=\"highlight-line p-3 rounded-lg cursor-pointer transition\" onclick=\"highlightStanza(this, 1)\">\n \uc778\uc0dd\uc758 8\ud560\uc744 \ub118\uac8c \uac78\uc5b4\uc654\uace0 \uc55e\uc73c\ub85c\uc758 \uc0b6\uc774 2\ud560\ub3c4 \ucc44 \uc548 \ub0a8\uc740 \uc9c0\uae08 \ub0b4 \ub0a8\uc740 \uc0dd\uc758 \ubaa9\ud45c\uac00 \uc788\ub2e4\uba74 \uadf8\uac83\uc740 \uac74\uac15\ud55c \ub178\uc778\uc774 \ub418\ub294 \uac83\uc774\ub2e4.\n <\/p>\n\n <p class=\"highlight-line p-3 rounded-lg cursor-pointer transition\" onclick=\"highlightStanza(this, 2)\">\n \ub098\uc774\uac00 \ub4e4\uc5b4 \ub298\uc5b4\ub098\ub294 \uac80\ubc84\uc12f\uc774\uc57c \uc5b4\uca54 \uc218 \uc5c6\uaca0\uc9c0\ub9cc \uc637\uc744 \uae54\ub054\ud558\uac8c \uc785\uace0 \ub0a8\uc758 \uc190 \ube4c\ub9ac\uc9c0 \uc54a\uace0 \ub0b4 \uc190\uc73c\ub85c \uac80\uc57d\ud55c \ubc25\uc0c1\uc744 \ucc28\ub824\uba39\uaca0\ub2e4.\n <\/p>\n\n <p class=\"highlight-line p-3 rounded-lg cursor-pointer transition\" onclick=\"highlightStanza(this, 3)\">\n \ub208\uc740 \uc5b4\ub450\uc6cc\uc838 \uc798 \uc548 \ubcf4\uc774\uaca0\uc9c0\ub9cc \ubcf4\uace0 \uc2f6\uc740 \uac83\ub9cc \ubcf4\ub294 \ud3b8\ud611\ud55c \uc0b6\uc744 \uc0b4\uc9c0\ub294 \uc54a\uaca0\ub2e4.\n <\/p>\n\n <p class=\"highlight-line p-3 rounded-lg cursor-pointer transition\" onclick=\"highlightStanza(this, 4)\">\n \uc57d\ud574\uc9c4 \uccad\ub825\uc73c\ub85c \uc798 \ub4e3\uc9c4 \ubabb\ud558\uaca0\uc9c0\ub9cc \ud56d\uc0c1 \uadc0\ub97c \uc5f4\uc5b4 \uc0ac\ub78c\ub4e4\uc758 \uc774\uc57c\uae30\ub97c \ub4e3\ub294 \ub530\ub73b\ud55c \uc0ac\ub78c\uc774 \ub418\uaca0\ub2e4.\n <\/p>\n\n <p class=\"highlight-line p-3 rounded-lg cursor-pointer transition\" onclick=\"highlightStanza(this, 5)\">\n \uc131\ud55c \uc774\uac00 \uc5c6\uc5b4 \uc798 \uc539\uc9c0 \ubabb\ud558\uaca0\uc9c0\ub9cc \uaf2d \ud544\uc694\ud55c \ub54c\ub9cc \uc785\uc744 \uc5f4\uba70 \uc0c1\ucc98 \uc8fc\ub294 \ub9d0\uc744 \ud558\uc9c0 \uc54a\ub294 \uc0ac\ub78c\uc73c\ub85c \uc0b4\uaca0\ub2e4.\n <\/p>\n\n <p class=\"highlight-line p-3 rounded-lg cursor-pointer transition\" onclick=\"highlightStanza(this, 6)\">\n \ub2e4\ub9ac\uac00 \uc544\ud30c \uc798 \ubabb \uac78\uc5b4\ub3c4 \ub290\ub9b0 \uac78\uc74c\uc73c\ub85c \ub9ce\uc740 \uacf3\uc744 \uc5ec\ud589\ud558\uba70 \uc5ec\ud589\uc9c0\uc5d0\uc11c \ub9cc\ub098 \ub290\ub07c\uace0 \uacbd\ud5d8\ud588\ub358 \uc88b\uc740 \uac83\ub4e4\uacfc \uc88b\uc740 \uc0ac\ub78c\ub4e4\uc5d0\uac8c \ubc30\uc6b4 \uac83\uc744 \uc2e4\ucc9c\ud558\ub294 \uc5ec\uc720\uc788\ub294 \uc0b6\uc744 \uc0b4\uc544\uac00\uaca0\ub2e4.\n <\/p>\n\n <p class=\"highlight-line p-3 rounded-lg cursor-pointer transition\" onclick=\"highlightStanza(this, 7)\">\n \uc5b4\ub9b0 \uc2dc\uc808 \ubd80\ud130 \uc904\uace7 \ub4e4\uc5b4\uc628 \ubb34\uc5c7\uc774 \ub418\uace0 \uc2f6\ub0d0\ub294 \uc9c8\ubb38\uc5d0 \uc774\uc81c \uac74\uac15\ud55c \ub178\uc778\uc774\ub77c\uace0 \ub2f5\ud55c\ub2e4.\n <\/p>\n\n <div class=\"pt-4 border-t border-amber-900\/10 space-y-2 text-amber-950 dark:text-amber-100 font-bold\">\n <p class=\"highlight-line p-3 rounded-lg cursor-pointer transition\" onclick=\"highlightStanza(this, 8)\">\n \ub098\uc774\uac00 \ub4e4\uba74 \uac74\uac15\ud55c \uc0ac\ub78c\uc774 \uac00\uc7a5 \ubd80\uc790\uc694\n <\/p>\n <p class=\"highlight-line p-3 rounded-lg cursor-pointer transition\" onclick=\"highlightStanza(this, 8)\">\n \uac74\uac15\ud55c \uc0ac\ub78c\uc774 \uac00\uc7a5 \ud589\ubcf5\ud55c \uc0ac\ub78c\uc774\uc694\n <\/p>\n <p class=\"highlight-line p-3 rounded-lg cursor-pointer transition\" onclick=\"highlightStanza(this, 8)\">\n \uac74\uac15\ud55c \uc0ac\ub78c\uc774 \uac00\uc7a5 \uc131\uacf5\ud55c \uc0ac\ub78c\uc774\uba70 \uac74\uac15\ud55c \uc0ac\ub78c\uc774 \uac00\uc7a5 \uc798 \uc0b4\uc544\uc628 \uc0ac\ub78c\uc774\ub2e4.\n <\/p>\n <\/div>\n\n <\/div>\n\n <div class=\"text-xs text-center text-amber-800\/60 font-sans pt-4 border-t border-amber-900\/10\">\n \ud83d\udca1 \uac01 \uad6c\uc808\uc744 \ud074\ub9ad\ud558\uc2dc\uba74 \uc5f0\uad00\ub41c \uc0b6\uc758 \uc758\ubbf8\uc640 \ubb35\uc0c1 \ud78c\ud2b8\uac00 \uc544\ub798\uc5d0 \uc548\ub0b4\ub429\ub2c8\ub2e4.\n <\/div>\n <\/div>\n\n \n <div id=\"reflection-box\" class=\"bg-amber-100\/50 dark:bg-neutral-800\/50 p-5 rounded-xl border border-amber-800\/20 font-sans hidden\">\n <div class=\"flex items-start gap-3\">\n <span class=\"text-xl\" id=\"reflection-icon\">\ud83d\udca1<\/span>\n <div>\n <h4 class=\"font-bold text-amber-900 dark:text-amber-200 text-sm\" id=\"reflection-title\">\uad6c\uc808 \ubb35\uc0c1<\/h4>\n <p class=\"text-sm text-amber-800\/90 dark:text-amber-300\/90 mt-1 leading-relaxed\" id=\"reflection-text\">\n \uc2dc \uad6c\uc808\uc744 \ud074\ub9ad\ud558\uba74 \uc790\uc138\ud55c \ubb35\uc0c1 \uac00\uc774\ub4dc\uac00 \ub098\ud0c0\ub0a9\ub2c8\ub2e4.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"sec-cards-view\" class=\"space-y-6 hidden transition-opacity duration-300\">\n <div class=\"text-center max-w-xl mx-auto mb-4 font-sans\">\n <h3 class=\"text-xl font-bold text-amber-950 dark:text-amber-100\">\uc2e0\uccb4\uc758 \uc57d\ud654 vs \uc815\uc2e0\uc758 \uc2b9\ud654<\/h3>\n <p class=\"text-xs text-amber-800\/80 mt-1\">\uc2dc\uc18d\uc5d0 \ub2f4\uae34 5\uac00\uc9c0 \uc2e0\uccb4\uc801 \ubcc0\ud654\uc640 \uc774\ub97c \ub300\ud558\ub294 \uc131\uc219\ud55c \uc0b6\uc758 \ud0dc\ub3c4\uc785\ub2c8\ub2e4.<\/p>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n \n <div class=\"bg-amber-50\/60 dark:bg-neutral-900\/60 p-5 rounded-xl border border-amber-900\/10 shadow-sm space-y-3 hover:border-amber-600 transition\">\n <div class=\"flex items-center justify-between\">\n <span class=\"text-xs font-bold px-2.5 py-0.5 bg-amber-200\/60 text-amber-900 rounded-full font-sans\">\uc678\ubaa8 & \uc2dd\uc0dd\ud65c<\/span>\n <span class=\"text-xl\">\ud83c\udf5a<\/span>\n <\/div>\n <div class=\"text-xs text-amber-800\/70 font-sans\">\uc2e0\uccb4\uc801 \uc870\uac74: \uac80\ubc84\uc12f\uc758 \uc99d\uac00<\/div>\n <blockquote class=\"text-sm font-batang font-semibold text-amber-950 dark:text-amber-100 leading-snug\">\n “\uc637\uc744 \uae54\ub054\ud558\uac8c \uc785\uace0 \ub0a8\uc758 \uc190 \ube4c\ub9ac\uc9c0 \uc54a\uace0 \ub0b4 \uc190\uc73c\ub85c \uac80\uc57d\ud55c \ubc25\uc0c1\uc744 \ucc28\ub824\uba39\uaca0\ub2e4.”\n <\/blockquote>\n <div class=\"text-xs text-amber-900\/90 dark:text-amber-300 font-sans pt-2 border-t border-amber-900\/10\">\n \u2728 <strong>\uc9c0\ud5a5\uc810:<\/strong> \ud488\uc704 \uc788\ub294 \uc815\uac08\ud568\uacfc \uc790\ub9bd\uc801\uc778 \uac80\uc57d\uc758 \uc0b6\n <\/div>\n <\/div>\n\n \n <div class=\"bg-amber-50\/60 dark:bg-neutral-900\/60 p-5 rounded-xl border border-amber-900\/10 shadow-sm space-y-3 hover:border-amber-600 transition\">\n <div class=\"flex items-center justify-between\">\n <span class=\"text-xs font-bold px-2.5 py-0.5 bg-amber-200\/60 text-amber-900 rounded-full font-sans\">\uc2dc\ub825 & \ud3ec\uc6a9\ub825<\/span>\n <span class=\"text-xl\">\ud83d\udc41\ufe0f<\/span>\n <\/div>\n <div class=\"text-xs text-amber-800\/70 font-sans\">\uc2e0\uccb4\uc801 \uc870\uac74: \ub208\uc774 \uc5b4\ub450\uc6cc\uc9d0<\/div>\n <blockquote class=\"text-sm font-batang font-semibold text-amber-950 dark:text-amber-100 leading-snug\">\n “\ubcf4\uace0 \uc2f6\uc740 \uac83\ub9cc \ubcf4\ub294 \ud3b8\ud611\ud55c \uc0b6\uc744 \uc0b4\uc9c0\ub294 \uc54a\uaca0\ub2e4.”\n <\/blockquote>\n <div class=\"text-xs text-amber-900\/90 dark:text-amber-300 font-sans pt-2 border-t border-amber-900\/10\">\n \u2728 <strong>\uc9c0\ud5a5\uc810:<\/strong> \ud3b8\uacac \uc5c6\uc774 \uc138\uc0c1\uc744 \ud488\ub294 \ub113\uc740 \uc548\ubaa9\uacfc \uc5f4\ub9b0 \ub9c8\uc74c\n <\/div>\n <\/div>\n\n \n <div class=\"bg-amber-50\/60 dark:bg-neutral-900\/60 p-5 rounded-xl border border-amber-900\/10 shadow-sm space-y-3 hover:border-amber-600 transition\">\n <div class=\"flex items-center justify-between\">\n <span class=\"text-xs font-bold px-2.5 py-0.5 bg-amber-200\/60 text-amber-900 rounded-full font-sans\">\uccad\ub825 & \uacf5\uac10<\/span>\n <span class=\"text-xl\">\ud83d\udc42<\/span>\n <\/div>\n <div class=\"text-xs text-amber-800\/70 font-sans\">\uc2e0\uccb4\uc801 \uc870\uac74: \uc57d\ud574\uc9c4 \uccad\ub825<\/div>\n <blockquote class=\"text-sm font-batang font-semibold text-amber-950 dark:text-amber-100 leading-snug\">\n “\ud56d\uc0c1 \uadc0\ub97c \uc5f4\uc5b4 \uc0ac\ub78c\ub4e4\uc758 \uc774\uc57c\uae30\ub97c \ub4e3\ub294 \ub530\ub73b\ud55c \uc0ac\ub78c\uc774 \ub418\uaca0\ub2e4.”\n <\/blockquote>\n <div class=\"text-xs text-amber-900\/90 dark:text-amber-300 font-sans pt-2 border-t border-amber-900\/10\">\n \u2728 <strong>\uc9c0\ud5a5\uc810:<\/strong> \ud0c0\uc778\uc758 \uc18c\ub9ac\uc5d0 \uadc0 \uae30\uc6b8\uc774\ub294 \ub530\ub73b\ud55c \uacbd\uccad\n <\/div>\n <\/div>\n\n \n <div class=\"bg-amber-50\/60 dark:bg-neutral-900\/60 p-5 rounded-xl border border-amber-900\/10 shadow-sm space-y-3 hover:border-amber-600 transition\">\n <div class=\"flex items-center justify-between\">\n <span class=\"text-xs font-bold px-2.5 py-0.5 bg-amber-200\/60 text-amber-900 rounded-full font-sans\">\uad6c\uac15 & \uc5b8\ud488<\/span>\n <span class=\"text-xl\">\ud83d\udcac<\/span>\n <\/div>\n <div class=\"text-xs text-amber-800\/70 font-sans\">\uc2e0\uccb4\uc801 \uc870\uac74: \uc131\ud55c \uc774\uac00 \uc5c6\uc74c<\/div>\n <blockquote class=\"text-sm font-batang font-semibold text-amber-950 dark:text-amber-100 leading-snug\">\n “\uaf2d \ud544\uc694\ud55c \ub54c\ub9cc \uc785\uc744 \uc5f4\uba70 \uc0c1\ucc98 \uc8fc\ub294 \ub9d0\uc744 \ud558\uc9c0 \uc54a\ub294 \uc0ac\ub78c\uc73c\ub85c \uc0b4\uaca0\ub2e4.”\n <\/blockquote>\n <div class=\"text-xs text-amber-900\/90 dark:text-amber-300 font-sans pt-2 border-t border-amber-900\/10\">\n \u2728 <strong>\uc9c0\ud5a5\uc810:<\/strong> \ub9d0\uc744 \uc544\ub07c\uace0 \uc0c1\ucc98 \uc8fc\uc9c0 \uc54a\ub294 \uc2e0\uc911\ud568\n <\/div>\n <\/div>\n\n \n <div class=\"bg-amber-50\/60 dark:bg-neutral-900\/60 p-5 rounded-xl border border-amber-900\/10 shadow-sm space-y-3 md:col-span-2 hover:border-amber-600 transition\">\n <div class=\"flex items-center justify-between\">\n <span class=\"text-xs font-bold px-2.5 py-0.5 bg-amber-200\/60 text-amber-900 rounded-full font-sans\">\uac78\uc74c & \uc131\ucc30<\/span>\n <span class=\"text-xl\">\ud83d\udc63<\/span>\n <\/div>\n <div class=\"text-xs text-amber-800\/70 font-sans\">\uc2e0\uccb4\uc801 \uc870\uac74: \ub2e4\ub9ac\uac00 \uc544\ud30c \uc798 \ubabb \uac78\uc74c<\/div>\n <blockquote class=\"text-sm font-batang font-semibold text-amber-950 dark:text-amber-100 leading-snug\">\n “\ub290\ub9b0 \uac78\uc74c\uc73c\ub85c \ub9ce\uc740 \uacf3\uc744 \uc5ec\ud589\ud558\uba70 \uc5ec\ud589\uc9c0\uc5d0\uc11c \ub9cc\ub098 \ub290\ub07c\uace0 \uacbd\ud5d8\ud588\ub358 \uc88b\uc740 \uac83\ub4e4\uacfc \uc88b\uc740 \uc0ac\ub78c\ub4e4\uc5d0\uac8c \ubc30\uc6b4 \uac83\uc744 \uc2e4\ucc9c\ud558\ub294 \uc5ec\uc720\uc788\ub294 \uc0b6\uc744 \uc0b4\uc544\uac00\uaca0\ub2e4.”\n <\/blockquote>\n <div class=\"text-xs text-amber-900\/90 dark:text-amber-300 font-sans pt-2 border-t border-amber-900\/10\">\n \u2728 <strong>\uc9c0\ud5a5\uc810:<\/strong> \uc18d\ub3c4\uc5d0 \uc5f0\uc5f0\ud558\uc9c0 \uc54a\ub294 \uc5ec\uc720, \ubc30\uc6c0\uacfc \uc2e4\ucc9c\uc758 \uc5f0\uc18d\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"sec-chart-view\" class=\"space-y-10 hidden transition-opacity duration-300\">\n <div class=\"text-center max-w-xl mx-auto font-sans\">\n <h3 class=\"text-xl font-bold text-amber-950 dark:text-amber-100\">\uc2dc\uc801 \uc740\uc720\uc758 \ub370\uc774\ud130 \uc2dc\uac01\ud654<\/h3>\n <p class=\"text-xs text-amber-800\/80 mt-1\">\uc2dc\uc758 \uccab \uad6c\uc808\uacfc \uc804\ubc18\uc801\uc778 \uac00\uce58 \uc9c0\ud5a5\uc744 \uadf8\ub798\ud53d\uc73c\ub85c \ubd84\uc11d\ud588\uc2b5\ub2c8\ub2e4.<\/p>\n <\/div>\n\n \n <div class=\"bg-amber-50\/50 dark:bg-neutral-900\/50 p-6 rounded-2xl border border-amber-900\/10 shadow-sm grid grid-cols-1 md:grid-cols-2 gap-6 items-center\">\n <div class=\"space-y-3 font-sans\">\n <span class=\"text-xs font-bold px-2.5 py-1 bg-amber-200\/70 text-amber-900 rounded-full\">\uc778\uc0dd\uc758 \uc5ec\uc815<\/span>\n <h4 class=\"text-lg font-bold text-amber-950 dark:text-amber-100\">8\ud560\uc758 \uc9c0\ub098\uc628 \uc0b6\uacfc 2\ud560\uc758 \ub0a8\uc740 \uc0b6<\/h4>\n <p class=\"text-xs text-amber-800\/90 leading-relaxed\">\n “\uc778\uc0dd\uc758 8\ud560\uc744 \ub118\uac8c \uac78\uc5b4\uc654\uace0 \uc55e\uc73c\ub85c\uc758 \uc0b6\uc774 2\ud560\ub3c4 \ucc44 \uc548 \ub0a8\uc740 \uc9c0\uae08”\n <\/p>\n <p class=\"text-xs text-gray-600 dark:text-gray-400 leading-relaxed\">\n \ub0a8\uc740 \uc591\ubcf4\ub2e4 \uac78\uc5b4\uc628 \uae38\uc758 \ubb34\uac8c\ub97c \ub290\ub07c\uba70, \ub0a8\uc740 2\ud560\uc758 \uc2dc\uac04\uc744 ‘\uac74\uac15\ud55c \ub178\uc778’\uc73c\ub85c\uc11c \ub0b4\uc2e4 \uc788\uac8c \ucc44\uc6b0\uace0\uc790 \ud558\ub294 \uc2dc\uc778\uc758 \uc758\uc9c0\ub97c \ub098\ud0c0\ub0c5\ub2c8\ub2e4.\n <\/p>\n <\/div>\n <div>\n <div class=\"chart-container\">\n <canvas id=\"lifeRatioChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-amber-50\/50 dark:bg-neutral-900\/50 p-6 rounded-2xl border border-amber-900\/10 shadow-sm grid grid-cols-1 md:grid-cols-2 gap-6 items-center\">\n <div class=\"order-2 md:order-1\">\n <div class=\"chart-container\">\n <canvas id=\"virtueRadarChart\"><\/canvas>\n <\/div>\n <\/div>\n <div class=\"space-y-3 font-sans order-1 md:order-2\">\n <span class=\"text-xs font-bold px-2.5 py-1 bg-amber-200\/70 text-amber-900 rounded-full\">\uc815\uc2e0\uc801 \uc9c0\ud5a5\uc810<\/span>\n <h4 class=\"text-lg font-bold text-amber-950 dark:text-amber-100\">\ub178\ub144\uc758 5\ub300 \ud575\uc2ec \ub355\ubaa9<\/h4>\n <ul class=\"text-xs text-amber-900\/90 dark:text-amber-200 space-y-1.5 list-disc list-inside\">\n <li><strong>\ub3c5\ub9bd\uc131:<\/strong> \uac80\uc57d\ud55c \ubc25\uc0c1\uacfc \uc790\uae30 \uad00\ub9ac<\/li>\n <li><strong>\ud3ec\uc6a9\ub825:<\/strong> \ud3b8\ud611\ud558\uc9c0 \uc54a\uc740 \uac1c\ubc29\uc801 \uc548\ubaa9<\/li>\n <li><strong>\uacf5\uac10\ub825:<\/strong> \uc18c\ud1b5\uc744 \uc704\ud55c \uadc0 \uae30\uc6b8\uc784<\/li>\n <li><strong>\uc5b8\ud488(\u8a00\u54c1):<\/strong> \uc0c1\ucc98 \uc8fc\uc9c0 \uc54a\ub294 \uc2e0\uc911\ud55c \uc5b8\uc5b4<\/li>\n <li><strong>\uc5ec\uc720:<\/strong> \ub290\ub9b0 \uac78\uc74c \uc18d \uc2e4\ucc9c\ud558\ub294 \ubc30\uc6c0<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"bg-gradient-to-br from-amber-100\/80 to-amber-50\/80 dark:from-neutral-800 dark:to-neutral-900 p-8 rounded-2xl border border-amber-900\/20 shadow-md text-center space-y-6\">\n <span class=\"text-3xl\">\u2728<\/span>\n <h3 class=\"text-2xl font-bold text-amber-950 dark:text-amber-100 font-batang\">\n \ub178\ub144\uc774 \ub418\uc5c8\uc744 \ub54c \uc9c4\uc9dc \ubd80\uc790\ub294 \ub204\uad6c\uc778\uac00?\n <\/h3>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 font-sans text-xs md:text-sm\">\n <div class=\"p-4 bg-white\/70 dark:bg-neutral-800\/70 rounded-xl border border-amber-900\/10 shadow-sm\">\n <div class=\"text-amber-800 font-bold mb-1\">\ud83d\udc8e \uac00\uc7a5 \ubd80\uc790<\/div>\n <div class=\"text-amber-950 dark:text-amber-100 font-semibold\">\uac74\uac15\ud55c \uc0ac\ub78c<\/div>\n <\/div>\n <div class=\"p-4 bg-white\/70 dark:bg-neutral-800\/70 rounded-xl border border-amber-900\/10 shadow-sm\">\n <div class=\"text-amber-800 font-bold mb-1\">\ud83d\ude0a \uac00\uc7a5 \ud589\ubcf5\ud55c \uc0ac\ub78c<\/div>\n <div class=\"text-amber-950 dark:text-amber-100 font-semibold\">\uac74\uac15\ud55c \uc0ac\ub78c<\/div>\n <\/div>\n <div class=\"p-4 bg-white\/70 dark:bg-neutral-800\/70 rounded-xl border border-amber-900\/10 shadow-sm\">\n <div class=\"text-amber-800 font-bold mb-1\">\ud83c\udfc6 \uac00\uc7a5 \uc131\uacf5\ud55c \uc0ac\ub78c<\/div>\n <div class=\"text-amber-950 dark:text-amber-100 font-semibold\">\uac74\uac15\ud55c \uc0ac\ub78c<\/div>\n <\/div>\n <div class=\"p-4 bg-white\/70 dark:bg-neutral-800\/70 rounded-xl border border-amber-900\/10 shadow-sm\">\n <div class=\"text-amber-800 font-bold mb-1\">\ud83c\udf31 \uac00\uc7a5 \uc798 \uc0b4\uc544\uc628 \uc0ac\ub78c<\/div>\n <div class=\"text-amber-950 dark:text-amber-100 font-semibold\">\uac74\uac15\ud55c \uc0ac\ub78c<\/div>\n <\/div>\n <\/div>\n <p class=\"text-xs text-amber-800\/70 dark:text-amber-300\/70 font-sans\">\n \uac74\uac15\ud568\uc740 \ub2e8\uc9c0 \uc2e0\uccb4\uc801 \uc0c1\ud0dc\ub9cc\uc744 \uc758\ubbf8\ud558\uc9c0 \uc54a\uc73c\uba70, \ub9c8\uc74c\uc758 \ub113\uc774, \uc5b8\uc5b4\uc758 \ud488\uaca9, \ud0c0\uc778\uc744 \ud5a5\ud55c \ub530\ub73b\ud568\uc774 \uacb0\ud569\ub41c \uc885\ud569\uc801 \uac74\uac15\uc744 \ub73b\ud569\ub2c8\ub2e4.\n <\/p>\n <\/section>\n\n <\/main>\n\n \n <footer class=\"border-t border-amber-900\/10 py-8 px-4 text-center text-xs text-amber-800\/60 dark:text-amber-400\/60 font-sans\">\n <p>\ud83c\udf52 \uc774\ud574\uc778 \uc218\ub140\ub2d8\uc758 \uc2dc \u300e\u751f\uc758 \ubaa9\ud45c\u300f \uc778\ud130\ub799\ud2f0\ube0c \ub3c5\uc11c \uacbd\ud5d8 \ud504\ub85c\uc81d\ud2b8<\/p>\n <p class=\"mt-1\">\uc6d0\ubb38 \ubcc0\uacbd \uc5c6\uc74c | \ub192\uc740 \uac00\ub3c5\uc131\uacfc \uac00\uce58 \uc2dc\uac01\ud654\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n <\/footer>\n\n \n <script>\n \/\/ State Management\n let currentFontSize = 18; \/\/ base text size px\n let audioActive = false;\n let audioInterval = null;\n let activeLineIndex = 0;\n\n \/\/ Interactive Stanza Guidance Data\n const reflections = {\n 1: {\n title: \"\uc778\uc0dd\uc758 \ube44\uc728\uacfc \ucd5c\uc885 \ubaa9\uc801\uc9c0\",\n icon: \"\u23f3\",\n text: \"\uc9c0\ub098\uc628 80%\uc758 \uc2dc\uac04\ubcf4\ub2e4 \ub0a8\uc740 20%\uc758 \uc2dc\uac04\uc774 \ub354 \uc18c\uc911\ud569\ub2c8\ub2e4. \uc2dc\uc778\uc740 \uac70\ucc3d\ud55c \uce6d\ud638 \ub300\uc2e0 '\uac74\uac15\ud55c \ub178\uc778'\uc774\ub77c\ub294 \uc18c\ubc15\ud558\uba74\uc11c\ub3c4 \uae4a\uc740 \uc18c\uba85\uc744 \ud0dd\ud569\ub2c8\ub2e4.\"\n },\n 2: {\n title: \"\ud488\uc704 \uc788\ub294 \ub3c5\ub9bd\uacfc \uc790\ub9bd\",\n icon: \"\ud83c\udf5a\",\n text: \"\uc2e0\uccb4\uc758 \ub178\ud654(\uac80\ubc84\uc12f)\ub294 \uacb8\ud5c8\ud788 \uc218\uc6a9\ud558\ub418, \uc790\uc2e0\uc758 \uc0b6\uc744 \uc2a4\uc2a4\ub85c \uc815\uac08\ud558\uac8c \ucc28\ub824\ub0bc \uc218 \uc788\ub294 \uc790\ub9bd \uc815\uc2e0\uc744 \ub2e4\uc9d0\ud569\ub2c8\ub2e4.\"\n },\n 3: {\n title: \"\ud3b8\ud611\ud568\uc5d0\uc11c \ubc97\uc5b4\ub098\ub294 \uc548\ubaa9\",\n icon: \"\ud83d\udc41\ufe0f\",\n text: \"\uc2dc\ub825\uc774 \uc5b4\ub450\uc6cc\uc9c0\ub294 \uc2e0\uccb4\uc801 \uc81c\uc57d \uc18d\uc5d0\uc11c\ub3c4 \ub9c8\uc74c\uc758 \ub208\uc740 \uc624\ud788\ub824 \ub354 \ud06c\uac8c \uc5f4\uc5b4 \ud3b8\uacac \uc5c6\ub294 \uc138\uc0c1\uacfc \ub9cc\ub0a9\ub2c8\ub2e4.\"\n },\n 4: {\n title: \"\ub530\ub73b\ud55c \uacbd\uccad\uc758 \ud0dc\ub3c4\",\n icon: \"\ud83d\udc42\",\n text: \"\uc798 \ub4e4\ub9ac\uc9c0 \uc54a\ub294 \uadc0\ub97c \uac00\uc84c\uc744\uc9c0\ub77c\ub3c4 \ud0c0\uc778\uc758 \uc2ac\ud514\uacfc \uc774\uc57c\uae30\uc5d0 \ub2a5\ub3d9\uc801\uc73c\ub85c \uadc0 \uae30\uc6b8\uc774\ub294 \uc5f0\ubbfc\uc758 \ub9c8\uc74c\uc785\ub2c8\ub2e4.\"\n },\n 5: {\n title: \"\ub9d0\uc758 \uc808\uc81c\uc640 \uc5b8\ud488\",\n icon: \"\ud83d\udcac\",\n text: \"\uc131\uce58 \uc54a\uc740 \uc774\ube68\uc740 \uce68\ubb35\uc758 \uc9c0\ud61c\ub85c \uc774\uc5b4\uc9d1\ub2c8\ub2e4. \uaf2d \ud544\uc694\ud55c \uc21c\uac04\uc5d0\ub9cc \uc628\ud654\ud558\uac8c \ub9d0\ud558\uc5ec \ud0c0\uc778\uc5d0\uac8c \uc0c1\ucc98\ub97c \uc8fc\uc9c0 \uc54a\uaca0\ub2e4\ub294 \uacb0\uc758\uc785\ub2c8\ub2e4.\"\n },\n 6: {\n title: \"\ub290\ub9bc\uc758 \ubbf8\ud559\uacfc \uc2e4\ucc9c\ud558\ub294 \uc0b6\",\n icon: \"\ud83d\udc63\",\n text: \"\ub2e4\ub9ac\uac00 \ubd88\ud3b8\ud558\ub354\ub77c\ub3c4 \ub290\ub9b0 \uac78\uc74c\uc73c\ub85c \uc138\uc0c1\uc744 \ud488\uc73c\uba70, \ub9cc\ub09c \ubaa8\ub4e0 \uc120\ud55c \uc774\ub4e4\uc5d0\uac8c\uc11c \ubc30\uc6b4 \ubc14\ub97c \uc0b6\uc5d0\uc11c \uc2e4\ucc9c\ud569\ub2c8\ub2e4.\"\n },\n 7: {\n title: \"\uc5b4\ub9b0 \uc2dc\uc808\uc758 \uc9c8\ubb38\uc5d0 \ub300\ud55c \ub2f5\",\n icon: \"\ud83c\udf31\",\n text: \"\uc5b4\ub9b4 \uc801 \uafc8\uafb8\ub358 \uac70\ucc3d\ud55c \ubaa9\ud45c\ub97c \uc9c0\ub098, \uc0b6\uc758 \ud669\ud63c\uc5d0\uc11c \ub0b4\ub9ac\ub294 \uac00\uc7a5 \uc9c4\uc2e4\ud55c \ub300\ub2f5\uc740 '\uac74\uac15\ud55c \ub178\uc778'\uc785\ub2c8\ub2e4.\"\n },\n 8: {\n title: \"\uc9c4\uc815\ud55c \uc0b6\uc758 \uc131\uacf5 \uc815\uc758\",\n icon: \"\ud83d\udc51\",\n text: \"\ubd80, \ud589\ubcf5, \uc131\uacf5, \uc798 \uc0b4\uc544\uc628 \uc0b6\uc758 \ucd5c\uc885 \ud45c\uc900\uc740 \uacb0\uad6d '\uac74\uac15\ud55c \uac00\uce58\uad00\uc744 \uac00\uc9c4 \uc0ac\ub78c'\uc785\ub2c8\ub2e4.\"\n }\n };\n\n \/\/ Theme Switcher\n function setTheme(theme) {\n const body = document.body;\n body.classList.remove('theme-cream', 'theme-hanji', 'theme-night');\n \n \/\/ Reset buttons\n document.getElementById('btn-theme-cream').className = \"px-2.5 py-1 rounded-md text-xs font-semibold transition-all text-amber-950 hover:bg-amber-200\/50\";\n document.getElementById('btn-theme-hanji').className = \"px-2.5 py-1 rounded-md text-xs font-semibold transition-all text-amber-950 hover:bg-amber-200\/50\";\n document.getElementById('btn-theme-night').className = \"px-2.5 py-1 rounded-md text-xs font-semibold transition-all text-amber-950 hover:bg-amber-200\/50\";\n\n if (theme === 'cream') {\n body.classList.add('theme-cream');\n document.getElementById('btn-theme-cream').className = \"px-2.5 py-1 rounded-md text-xs font-semibold transition-all bg-amber-800 text-white shadow-sm\";\n } else if (theme === 'hanji') {\n body.classList.add('theme-hanji');\n document.getElementById('btn-theme-hanji').className = \"px-2.5 py-1 rounded-md text-xs font-semibold transition-all bg-amber-800 text-white shadow-sm\";\n } else if (theme === 'night') {\n body.classList.add('theme-night');\n document.getElementById('btn-theme-night').className = \"px-2.5 py-1 rounded-md text-xs font-semibold transition-all bg-amber-600 text-white shadow-sm\";\n }\n }\n\n \/\/ Dynamic Font Sizing\n function changeFontSize(delta) {\n currentFontSize = Math.max(14, Math.min(28, currentFontSize + delta));\n const container = document.getElementById('poem-text-container');\n container.style.fontSize = currentFontSize + 'px';\n }\n\n \/\/ Tab Switching\n function switchTab(tabId) {\n document.getElementById('sec-text-view').classList.add('hidden');\n document.getElementById('sec-cards-view').classList.add('hidden');\n document.getElementById('sec-chart-view').classList.add('hidden');\n\n document.getElementById('tab-text-view').className = \"px-6 py-3 border-b-2 border-transparent text-gray-500 hover:text-amber-800 transition-all\";\n document.getElementById('tab-cards-view').className = \"px-6 py-3 border-b-2 border-transparent text-gray-500 hover:text-amber-800 transition-all\";\n document.getElementById('tab-chart-view').className = \"px-6 py-3 border-b-2 border-transparent text-gray-500 hover:text-amber-800 transition-all\";\n\n document.getElementById('sec-' + tabId).classList.remove('hidden');\n document.getElementById('tab-' + tabId).className = \"px-6 py-3 border-b-2 border-amber-700 font-bold text-amber-900 dark:text-amber-200 transition-all\";\n }\n\n \/\/ Stanza Highlight & Reflection Box Logic\n function highlightStanza(element, key) {\n document.querySelectorAll('.highlight-line').forEach(el => el.classList.remove('active'));\n element.classList.add('active');\n\n const refBox = document.getElementById('reflection-box');\n const data = reflections[key];\n if (data) {\n document.getElementById('reflection-icon').innerText = data.icon;\n document.getElementById('reflection-title').innerText = data.title;\n document.getElementById('reflection-text').innerText = data.text;\n refBox.classList.remove('hidden');\n }\n }\n\n \/\/ Audio Reading Simulator\n function toggleAudioSim() {\n const lines = document.querySelectorAll('.highlight-line');\n const btnText = document.getElementById('audio-text');\n const btnIcon = document.getElementById('audio-icon');\n\n if (audioActive) {\n clearInterval(audioInterval);\n audioActive = false;\n btnText.innerText = \"\ub0ad\ub3c5 \ubaa8\ub4dc\";\n btnIcon.innerText = \"\u25b6\";\n } else {\n audioActive = true;\n btnText.innerText = \"\uc77c\uc2dc\uc815\uc9c0\";\n btnIcon.innerText = \"\u23f8\";\n \n audioInterval = setInterval(() => {\n if (activeLineIndex >= lines.length) {\n activeLineIndex = 0;\n }\n lines[activeLineIndex].click();\n lines[activeLineIndex].scrollIntoView({ behavior: 'smooth', block: 'center' });\n activeLineIndex++;\n }, 4000);\n }\n }\n\n \/\/ Chart.js Visualizations Setup\n window.addEventListener('DOMContentLoaded', () => {\n \/\/ Chart 1: Life Doughnut\n const ctxLife = document.getElementById('lifeRatioChart').getContext('2d');\n new Chart(ctxLife, {\n type: 'doughnut',\n data: {\n labels: ['\uc9c0\ub098\uc628 \uc0b6 (8\ud560 \uc774\uc0c1)', '\ub0a8\uc740 \uc0b6 (2\ud560 \ubbf8\ub9cc)'],\n datasets: [{\n data: [82, 18],\n backgroundColor: [\n 'rgba(180, 140, 90, 0.75)',\n 'rgba(217, 119, 6, 0.85)'\n ],\n borderColor: [\n 'rgba(180, 140, 90, 1)',\n 'rgba(217, 119, 6, 1)'\n ],\n borderWidth: 1.5\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n position: 'bottom',\n labels: {\n font: { family: 'Gowun Batang', size: 12 },\n color: '#4B5563'\n }\n },\n tooltip: {\n callbacks: {\n label: function(context) {\n return context.label + ': \uc57d ' + context.raw + '%';\n }\n }\n }\n },\n cutout: '65%'\n }\n });\n\n \/\/ Chart 2: Virtues Radar\n const ctxVirtue = document.getElementById('virtueRadarChart').getContext('2d');\n new Chart(ctxVirtue, {\n type: 'radar',\n data: {\n labels: ['\uc790\ub9bd\/\uac80\uc57d', '\ud3ec\uc6a9\/\uc548\ubaa9', '\uacbd\uccad\/\uacf5\uac10', '\uc5b8\ud488\/\uc808\uc81c', '\uc5ec\uc720\/\uc2e4\ucc9c'],\n datasets: [{\n label: '\uac74\uac15\ud55c \ub178\uc778\uc758 5\ub300 \uc9c0\ud5a5\uc810',\n data: [95, 90, 95, 100, 90],\n backgroundColor: 'rgba(217, 119, 6, 0.25)',\n borderColor: 'rgba(217, 119, 6, 0.9)',\n pointBackgroundColor: 'rgba(180, 83, 9, 1)',\n pointBorderColor: '#fff',\n pointHoverBackgroundColor: '#fff',\n pointHoverBorderColor: 'rgba(180, 83, 9, 1)'\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n r: {\n angleLines: { color: 'rgba(0,0,0,0.1)' },\n grid: { color: 'rgba(0,0,0,0.08)' },\n pointLabels: {\n font: { family: 'Gowun Batang', size: 12, weight: 'bold' },\n color: '#2C2A29'\n },\n ticks: { display: false, beginAtZero: true, max: 100 }\n }\n },\n plugins: {\n legend: {\n position: 'bottom',\n labels: {\n font: { family: 'Gowun Batang', size: 12 }\n }\n }\n }\n }\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>[\uac80\uc0c9\ud558\uace0 \uc2f6\uc740 \uae00\uc790\ub97c \ub204\ub974\uace0 ‘\ud0ed’\ud574\uc11c \uc6f9\uac80\uc0c9\uc744 \ud574\ubcf4\uc138\uc694 !] \u751f\uc758 \ubaa9\ud45c – \uc774\ud574\uc778 | \ubaa8\ubc14\uc77c & \ub370\uc2a4\ud06c\ud1b1 \uc778\ud130\ub799\ud2f0\ube0c \uc2dc\uc9d1 \ud83c\udf52 \u751f\uc758 \ubaa9\ud45c | \uc774\ud574\uc778 \u2600\ufe0f \ub2e8\uc544 \ud83d\udcdc \ud55c\uc9c0 \ud83c\udf19 \ubc24 \uae00\uaf34 \uac00- \uac00+ \u25b6 \ub0ad\ub3c5 \ubaa8\ub4dc Poem & Wisdom Showcase \uac74\uac15\ud55c \ub178\ub144\uc758 \uc131\ucc30\uacfc \uc544\ub984\ub2e4\uc6b4 \uc0b6\uc758 \ubaa9\ud45c \uc774\ud574\uc778 \uc218\ub140\uc758 \uc2dc \u300e\u751f\uc758 \ubaa9\ud45c\u300f \uc6d0\ubb38\uc744 \ub2e8 \ud55c \uae00\uc790\uc758 \ubcc0\ud615 […]<\/p>\n","protected":false},"author":1,"featured_media":12126,"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":[15],"tags":[],"class_list":["post-12124","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-15"],"views":15,"uagb_featured_image_src":{"full":["https:\/\/h9988.cbox.kr\/wp-content\/uploads\/2026\/08\/\uc0dd\uc758-\ubaa9\ud45c\uc774\ud574\uc778-1.png",1546,1048,false],"thumbnail":["https:\/\/h9988.cbox.kr\/wp-content\/uploads\/2026\/08\/\uc0dd\uc758-\ubaa9\ud45c\uc774\ud574\uc778-1-150x150.png",150,150,true],"medium":["https:\/\/h9988.cbox.kr\/wp-content\/uploads\/2026\/08\/\uc0dd\uc758-\ubaa9\ud45c\uc774\ud574\uc778-1-300x203.png",300,203,true],"medium_large":["https:\/\/h9988.cbox.kr\/wp-content\/uploads\/2026\/08\/\uc0dd\uc758-\ubaa9\ud45c\uc774\ud574\uc778-1-768x521.png",768,521,true],"large":["https:\/\/h9988.cbox.kr\/wp-content\/uploads\/2026\/08\/\uc0dd\uc758-\ubaa9\ud45c\uc774\ud574\uc778-1-1024x694.png",1024,694,true],"1536x1536":["https:\/\/h9988.cbox.kr\/wp-content\/uploads\/2026\/08\/\uc0dd\uc758-\ubaa9\ud45c\uc774\ud574\uc778-1-1536x1041.png",1536,1041,true],"2048x2048":["https:\/\/h9988.cbox.kr\/wp-content\/uploads\/2026\/08\/\uc0dd\uc758-\ubaa9\ud45c\uc774\ud574\uc778-1.png",1546,1048,false]},"uagb_author_info":{"display_name":"ds1avz10","author_link":"https:\/\/h9988.cbox.kr\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"[\uac80\uc0c9\ud558\uace0 \uc2f6\uc740 \uae00\uc790\ub97c \ub204\ub974\uace0 ‘\ud0ed’\ud574\uc11c \uc6f9\uac80\uc0c9\uc744 \ud574\ubcf4\uc138\uc694 !] \u751f\uc758 \ubaa9\ud45c – \uc774\ud574\uc778 | \ubaa8\ubc14\uc77c & \ub370\uc2a4\ud06c\ud1b1 \uc778\ud130\ub799\ud2f0\ube0c \uc2dc\uc9d1 \ud83c\udf52 \u751f\uc758 \ubaa9\ud45c | \uc774\ud574\uc778 \u2600\ufe0f \ub2e8\uc544 \ud83d\udcdc \ud55c\uc9c0 \ud83c\udf19 \ubc24 \uae00\uaf34 \uac00- \uac00+ \u25b6 \ub0ad\ub3c5 \ubaa8\ub4dc Poem & Wisdom Showcase \uac74\uac15\ud55c \ub178\ub144\uc758 \uc131\ucc30\uacfc \uc544\ub984\ub2e4\uc6b4 \uc0b6\uc758 \ubaa9\ud45c \uc774\ud574\uc778 \uc218\ub140\uc758 \uc2dc \u300e\u751f\uc758 \ubaa9\ud45c\u300f \uc6d0\ubb38\uc744 \ub2e8 \ud55c \uae00\uc790\uc758 \ubcc0\ud615…","_links":{"self":[{"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=\/wp\/v2\/posts\/12124","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=12124"}],"version-history":[{"count":2,"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=\/wp\/v2\/posts\/12124\/revisions"}],"predecessor-version":[{"id":12128,"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=\/wp\/v2\/posts\/12124\/revisions\/12128"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=\/wp\/v2\/media\/12126"}],"wp:attachment":[{"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12124"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=12124"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=12124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":12124,"date":"2026-08-19T20:58:46","date_gmt":"2026-08-19T20:58:46","guid":{"rendered":"https:\/\/h9988.cbox.kr\/?p=12124"},"modified":"2026-08-19T20:59:22","modified_gmt":"2026-08-19T20:59:22","slug":"%f0%9f%8d%92%e7%94%9f%ec%9d%98-%eb%aa%a9%ed%91%9c","status":"publish","type":"post","link":"https:\/\/h9988.cbox.kr\/?p=12124","title":{"rendered":"\ud83c\udf52\u751f\uc758 \ubaa9\ud45c"},"content":{"rendered":"\n