\ub098\ub97c \ud45c\ud604\ud558\ub294 \ud55c \ub2e8\uc5b4<\/title>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n body {\n font-family: 'Noto Sans KR', sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 20px;\n overflow-x: hidden;\n }\n \n .container {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(20px);\n border-radius: 24px;\n padding: 40px;\n max-width: 600px;\n width: 100%;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);\n text-align: center;\n position: relative;\n overflow: hidden;\n }\n \n .container::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 4px;\n background: linear-gradient(90deg, #ff9a9e, #fecfef, #fecfef, #ff9a9e);\n background-size: 400% 100%;\n animation: gradientShift 3s ease-in-out infinite;\n }\n \n @keyframes gradientShift {\n 0%, 100% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n }\n \n .title {\n font-size: 2.2rem;\n font-weight: 600;\n color: #2d3748;\n margin-bottom: 12px;\n opacity: 0;\n animation: fadeInUp 0.8s ease-out 0.2s forwards;\n }\n \n .subtitle {\n font-size: 1.1rem;\n color: #718096;\n margin-bottom: 40px;\n opacity: 0;\n animation: fadeInUp 0.8s ease-out 0.4s forwards;\n }\n \n .progress-bar {\n width: 100%;\n height: 6px;\n background: #e2e8f0;\n border-radius: 3px;\n margin-bottom: 30px;\n overflow: hidden;\n opacity: 0;\n animation: fadeInUp 0.8s ease-out 0.6s forwards;\n }\n \n .progress-fill {\n height: 100%;\n background: linear-gradient(90deg, #667eea, #764ba2);\n border-radius: 3px;\n transition: width 0.6s ease-in-out;\n width: 33.33%;\n }\n \n .step {\n display: none;\n opacity: 0;\n }\n \n .step.active {\n display: block;\n animation: fadeInScale 0.6s ease-out forwards;\n }\n \n .categories {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n gap: 20px;\n margin-bottom: 30px;\n }\n \n .category-card {\n background: white;\n border-radius: 16px;\n padding: 24px 16px;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n border: 2px solid transparent;\n position: relative;\n overflow: hidden;\n }\n \n .category-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);\n transition: left 0.5s;\n }\n \n .category-card:hover::before {\n left: 100%;\n }\n \n .category-card:hover {\n transform: translateY(-8px) scale(1.02);\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);\n border-color: currentColor;\n }\n \n .category-card.thinking { color: #3182ce; }\n .category-card.emotion { color: #e53e3e; }\n .category-card.social { color: #38a169; }\n .category-card.energy { color: #d69e2e; }\n .category-card.action { color: #805ad5; }\n \n .category-icon {\n font-size: 2.5rem;\n margin-bottom: 12px;\n display: block;\n }\n \n .category-name {\n font-size: 1rem;\n font-weight: 500;\n color: #2d3748;\n }\n \n .traits {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n gap: 16px;\n margin-bottom: 30px;\n max-height: 400px;\n overflow-y: auto;\n padding: 10px;\n }\n \n .trait-card {\n background: white;\n border-radius: 12px;\n padding: 20px 16px;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n border: 2px solid #e2e8f0;\n position: relative;\n transform-style: preserve-3d;\n height: 120px;\n }\n \n .trait-card:hover {\n transform: translateY(-4px) rotateY(5deg);\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);\n border-color: currentColor;\n }\n \n .trait-card.flipped {\n transform: rotateY(180deg);\n }\n \n .card-face {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n padding: 20px 16px;\n border-radius: 12px;\n backface-visibility: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n }\n \n .card-back {\n transform: rotateY(180deg);\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 16px 12px;\n }\n \n .trait-name {\n font-size: 1rem;\n font-weight: 500;\n color: #2d3748;\n }\n \n .trait-description {\n font-size: 0.9rem;\n line-height: 1.4;\n font-weight: 400;\n }\n \n .back-button {\n background: #e2e8f0;\n color: #4a5568;\n border: none;\n padding: 12px 24px;\n border-radius: 8px;\n cursor: pointer;\n font-size: 0.9rem;\n font-weight: 500;\n transition: all 0.2s;\n margin-right: 12px;\n }\n \n .back-button:hover {\n background: #cbd5e0;\n transform: translateY(-1px);\n }\n \n .breadcrumb {\n color: #718096;\n font-size: 0.9rem;\n margin-bottom: 24px;\n opacity: 0;\n animation: fadeInUp 0.6s ease-out 0.2s forwards;\n }\n \n .result-card {\n background: white;\n border-radius: 20px;\n padding: 40px;\n margin: 20px 0;\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);\n border: 3px solid;\n position: relative;\n overflow: hidden;\n }\n \n .result-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(45deg, transparent 48%, rgba(255, 255, 255, 0.1) 50%, transparent 52%);\n animation: shine 2s infinite;\n }\n \n @keyframes shine {\n 0% { transform: translateX(-100%); }\n 100% { transform: translateX(100%); }\n }\n \n .result-category {\n font-size: 1.1rem;\n font-weight: 600;\n margin-bottom: 8px;\n opacity: 0.8;\n }\n \n .result-trait {\n font-size: 1.4rem;\n font-weight: 700;\n margin-bottom: 20px;\n }\n \n .result-description {\n font-size: 1.2rem;\n line-height: 1.6;\n font-weight: 400;\n font-style: italic;\n color: #2d3748;\n margin-bottom: 20px;\n }\n \n .share-button {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n border: none;\n padding: 14px 28px;\n border-radius: 12px;\n cursor: pointer;\n font-size: 1rem;\n font-weight: 600;\n transition: all 0.3s;\n box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);\n }\n \n .share-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);\n }\n \n .retry-button {\n background: transparent;\n color: #718096;\n border: 2px solid #e2e8f0;\n padding: 12px 24px;\n border-radius: 12px;\n cursor: pointer;\n font-size: 0.9rem;\n font-weight: 500;\n transition: all 0.2s;\n margin-left: 12px;\n }\n \n .retry-button:hover {\n border-color: #cbd5e0;\n color: #4a5568;\n }\n \n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \n @keyframes fadeInScale {\n from {\n opacity: 0;\n transform: scale(0.9);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n \n @media (max-width: 768px) {\n .container {\n padding: 24px;\n margin: 10px;\n }\n \n .title {\n font-size: 1.8rem;\n }\n \n .categories {\n grid-template-columns: repeat(2, 1fr);\n gap: 16px;\n }\n \n .traits {\n grid-template-columns: repeat(2, 1fr);\n gap: 12px;\n max-height: 350px;\n }\n \n .trait-card {\n height: 100px;\n padding: 16px 12px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"progress-bar\">\n <div class=\"progress-fill\" id=\"progressFill\"><\/div>\n <\/div>\n \n \n <div class=\"step active\" id=\"step0\">\n <h1 class=\"title\">\uc548\ub155\ud558\uc138\uc694! \ud83d\udc4b<\/h1>\n <p class=\"subtitle\">\uba3c\uc800 \uc774\ub984\uc744 \uc54c\ub824\uc8fc\uc2dc\uaca0\uc5b4\uc694?<\/p>\n \n <div style=\"margin: 40px 0;\">\n <input type=\"text\" id=\"nameInput\" placeholder=\"\uc774\ub984\uc744 \uc785\ub825\ud574\uc8fc\uc138\uc694\" \n style=\"width: 100%; max-width: 300px; padding: 16px 20px; font-size: 1.1rem; border: 2px solid #e2e8f0; border-radius: 12px; text-align: center; transition: all 0.3s; outline: none; font-family: 'Noto Sans KR', sans-serif;\">\n <br><br>\n <button id=\"nameSubmitBtn\" onclick=\"submitName()\" disabled\n style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 14px 28px; border-radius: 12px; cursor: pointer; font-size: 1rem; font-weight: 600; transition: all 0.3s; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); opacity: 0.5;\">\n \uc2dc\uc791\ud558\uae30 \u2728\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"step\" id=\"step1\">\n <h1 class=\"title\">\ub098\ub97c \uac00\uc7a5 \uc798 \ud45c\ud604\ud558\ub294 \uac83\uc740?<\/h1>\n <p class=\"subtitle\">\uba3c\uc800 \uc5b4\ub5a4 \uc601\uc5ed\uc5d0\uc11c \ub098\ub97c \uc54c\uc544\ubcf4\uace0 \uc2f6\uc740\uc9c0 \uc120\ud0dd\ud574\uc8fc\uc138\uc694<\/p>\n \n <div class=\"categories\">\n <div class=\"category-card thinking\" onclick=\"selectCategory('thinking', '\ud83e\udde0 \uc0ac\uace0\ubc29\uc2dd')\">\n <span class=\"category-icon\">\ud83e\udde0<\/span>\n <div class=\"category-name\">\uc0ac\uace0\ubc29\uc2dd<\/div>\n <\/div>\n <div class=\"category-card emotion\" onclick=\"selectCategory('emotion', '\u2764\ufe0f \uac10\uc815\ud45c\ud604')\">\n <span class=\"category-icon\">\u2764\ufe0f<\/span>\n <div class=\"category-name\">\uac10\uc815\ud45c\ud604<\/div>\n <\/div>\n <div class=\"category-card social\" onclick=\"selectCategory('social', '\ud83d\udc65 \uc778\uac04\uad00\uacc4')\">\n <span class=\"category-icon\">\ud83d\udc65<\/span>\n <div class=\"category-name\">\uc778\uac04\uad00\uacc4<\/div>\n <\/div>\n <div class=\"category-card energy\" onclick=\"selectCategory('energy', '\u26a1 \uc5d0\ub108\uc9c0\uc6d0')\">\n <span class=\"category-icon\">\u26a1<\/span>\n <div class=\"category-name\">\uc5d0\ub108\uc9c0\uc6d0<\/div>\n <\/div>\n <div class=\"category-card action\" onclick=\"selectCategory('action', '\ud83c\udfaf \uc2e4\ud589\ubc29\uc2dd')\">\n <span class=\"category-icon\">\ud83c\udfaf<\/span>\n <div class=\"category-name\">\uc2e4\ud589\ubc29\uc2dd<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"step\" id=\"step2\">\n <div class=\"breadcrumb\" id=\"breadcrumb\">\uc0ac\uace0\ubc29\uc2dd > ?<\/div>\n <h2 class=\"title\">\uc5b4\ub5a4 \uc131\ud5a5\uc774 \uac00\uc7a5 \ub098\uc640 \ube44\uc2b7\ud55c\uac00\uc694?<\/h2>\n <p class=\"subtitle\">\uce74\ub4dc\ub97c \uc120\ud0dd\ud558\uba74 \ud2b9\ubcc4\ud55c \ud45c\ud604\uc744 \ud655\uc778\ud560 \uc218 \uc788\uc5b4\uc694<\/p>\n \n <div class=\"traits\" id=\"traitsContainer\">\n \n <\/div>\n \n <button class=\"back-button\" onclick=\"goBack()\">\u2190 \uc774\uc804 \ub2e8\uacc4<\/button>\n <\/div>\n \n \n <div class=\"step\" id=\"step3\">\n <h2 class=\"title\" id=\"resultTitle\">\ub2f9\uc2e0\uc740 \uc774\ub7f0 \uc0ac\ub78c\uc774\uc5d0\uc694!<\/h2>\n <p class=\"subtitle\">\uc544\ub984\ub2e4\uc6b4 \ub2f9\uc2e0\uc758 \ubaa8\uc2b5\uc744 \ud655\uc778\ud574\ubcf4\uc138\uc694<\/p>\n \n <div class=\"result-card\" id=\"resultCard\">\n <div class=\"result-intro\" id=\"resultIntro\" style=\"font-size: 1.3rem; font-weight: 600; margin-bottom: 24px; color: #2d3748;\"><\/div>\n <div class=\"result-description\" id=\"resultDescription\"><\/div>\n <\/div>\n \n <button class=\"share-button\" onclick=\"shareResult()\">\u2728 \uacb0\uacfc \uacf5\uc720\ud558\uae30<\/button>\n <button class=\"retry-button\" onclick=\"restart()\">\ub2e4\uc2dc \ud574\ubcf4\uae30<\/button>\n <\/div>\n <\/div>\n\n <script>\n const categories = {\n thinking: {\n name: '\ud83e\udde0 \uc0ac\uace0\ubc29\uc2dd',\n color: '#3182ce',\n traits: {\n logical: {\n name: '\ub17c\ub9ac\uc801',\n description: '\uc601\uc218\uc99d\uc744 \ubcf4\uba70 \uacc4\uc0b0 \uc2e4\uc218\ub97c \ucc3e\uc544\ub0b4\ub294 \uc0ac\ub78c'\n },\n creative: {\n name: '\ucc3d\uc758\uc801',\n description: '\ub77c\uba74\uc5d0 \uce58\uc988\uc640 \uacc4\ub780 \ub9d0\uace0\ub3c4 \ubb54\uac00 \ub354 \ub123\uc5b4\ubcf4\ub294 \uc0ac\ub78c'\n },\n intuitive: {\n name: '\uc9c1\uad00\uc801',\n description: '\uccab \ub9cc\ub0a8\uc5d0\uc11c \"\uc774 \uc0ac\ub78c \uc88b\uc740 \uc0ac\ub78c\uc774\ub2e4\" \ubc14\ub85c \ub290\ub07c\ub294 \uc0ac\ub78c'\n },\n analytical: {\n name: '\ubd84\uc11d\uc801',\n description: '\ub137\ud50c\ub9ad\uc2a4\uc5d0\uc11c \uc601\ud654 \ub9ac\ubdf0\ub97c \ub2e4 \uc77d\uace0 \uace0\ub974\ub294 \uc0ac\ub78c'\n },\n innovative: {\n name: '\ud601\uc2e0\uc801',\n description: '\ubaa8\ub4e0 \uc0ac\ub78c\uc774 \uc624\ub978\ucabd\uc73c\ub85c \uac08 \ub54c \uc67c\ucabd \uae38\uc774 \ub354 \uc88b\uc744 \uac83 \uac19\ub2e4\uace0 \uc0dd\uac01\ud558\ub294 \uc0ac\ub78c'\n },\n methodical: {\n name: '\uccb4\uacc4\uc801',\n description: '\uc11c\ub78d \uc548 \ubb3c\uac74\ub4e4\uc744 \uc885\ub958\ubcc4\ub85c \uc815\ub9ac\ud574\uc11c \ub77c\ubca8\uae4c\uc9c0 \ubd99\uc774\ub294 \uc0ac\ub78c'\n },\n philosophical: {\n name: '\ucca0\ud559\uc801',\n description: '\uc0e4\uc6cc\ud558\uba74\uc11c \"\uc778\uc0dd\uc774\ub780 \ubb34\uc5c7\uc778\uac00?\" \uac19\uc740 \uc9c8\ubb38\uc744 \uc9c4\uc9c0\ud558\uac8c \uace0\ubbfc\ud558\ub294 \uc0ac\ub78c'\n },\n practical: {\n name: '\ud604\uc2e4\uc801',\n description: '\uafc8\ubcf4\ub2e4\ub294 \"\uc774\uac8c \uc815\ub9d0 \ub3c4\uc6c0\uc774 \ub420\uae4c?\"\ub97c \uba3c\uc800 \uc0dd\uac01\ud558\ub294 \uc0ac\ub78c'\n }\n }\n },\n emotion: {\n name: '\u2764\ufe0f \uac10\uc815\ud45c\ud604',\n color: '#e53e3e',\n traits: {\n warm: {\n name: '\ub530\ub73b\ud55c',\n description: '\uce5c\uad6c\uac00 \uac10\uae30 \uac78\ub838\ub2e4\uace0 \ud558\uba74 \uc8fd \ub053\uc5ec\uc8fc\uace0 \uc2f6\uc5b4\uc9c0\ub294 \uc0ac\ub78c'\n },\n calm: {\n name: '\ucc28\ubd84\ud55c',\n description: '\ube44 \uc624\ub294 \ub0a0 \ucc3d\uac00\uc5d0\uc11c \ucc28 \ub9c8\uc2dc\uba70 \ube57\uc18c\ub9ac \ub4e3\ub294 \uac78 \uc88b\uc544\ud558\ub294 \uc0ac\ub78c'\n },\n passionate: {\n name: '\uc5f4\uc815\uc801',\n description: '\uc88b\uc544\ud558\ub294 \ub4dc\ub77c\ub9c8 \uc598\uae30\ud558\uba74 \ub208\ube5b\uc774 \ubc18\uc9dd\uc774\ub294 \uc0ac\ub78c'\n },\n sensitive: {\n name: '\uc12c\uc138\ud55c',\n description: '\uce5c\uad6c\uc758 \ud45c\uc815\ub9cc \ubd10\ub3c4 \uae30\ubd84\uc774 \uc548 \uc88b\uc740 \uac78 \uc54c\uc544\ucc44\ub294 \uc0ac\ub78c'\n },\n cheerful: {\n name: '\ubc1d\uc740',\n description: '\uc6d4\uc694\uc77c \uc544\uce68\uc5d0\ub3c4 \"\uc624\ub298\ub3c4 \uc88b\uc740 \ud558\ub8e8!\"\ub77c\uace0 \ub9d0\ud560 \uc218 \uc788\ub294 \uc0ac\ub78c'\n },\n romantic: {\n name: '\ub0ad\ub9cc\uc801',\n description: '\uae38\uc5d0\uc11c \uc608\uc05c \uaf43\uc744 \ubcf4\uba74 \uaf2d \uc0ac\uc9c4\uc744 \ucc0d\uc5b4\uc11c \uac04\uc9c1\ud558\uace0 \uc2f6\uc5b4\uc9c0\ub294 \uc0ac\ub78c'\n },\n empathetic: {\n name: '\uacf5\uac10\uc801',\n description: '\uc601\ud654 \ubcf4\ub2e4\uac00 \uc8fc\uc778\uacf5\uacfc \ud568\uaed8 \uc6b8\uace0 \uc6c3\ub294 \uc790\uc2e0\uc744 \ubc1c\uacac\ud558\ub294 \uc0ac\ub78c'\n },\n gentle: {\n name: '\uc628\ud654\ud55c',\n description: '\ud654\uac00 \ub098\ub3c4 \ubaa9\uc18c\ub9ac \ub192\uc774\ub294 \ub300\uc2e0 \ub354 \uc870\uc6a9\ud788 \ub9d0\ud558\ub294 \uc0ac\ub78c'\n }\n }\n },\n social: {\n name: '\ud83d\udc65 \uc778\uac04\uad00\uacc4',\n color: '#38a169',\n traits: {\n sociable: {\n name: '\uc0ac\uad50\uc801',\n description: '\ud63c\uc790 \ud654\uc7a5\uc2e4 \uac00\ub294 \uac83\ubcf4\ub2e4 \ub204\uad70\uac00\uc640 \ud568\uaed8 \uac00\ub294 \uac8c \ub354 \uc88b\uc740 \uc0ac\ub78c'\n },\n caring: {\n name: '\ubc30\ub824\uc2ec \ub9ce\uc740',\n description: '\ub2e8\uccb4 \uc8fc\ubb38\ud560 \ub54c \ubaa8\ub4e0 \uc0ac\ub78c \ucde8\ud5a5\uc744 \ub2e4 \uae30\uc5b5\ud558\ub824\uace0 \ud558\ub294 \uc0ac\ub78c'\n },\n independent: {\n name: '\ub3c5\ub9bd\uc801',\n description: '\ud63c\uc790 \uc601\ud654\uad00 \uac00\ub294 \uac83\uc744 \uc804\ud600 \uc5b4\uc0c9\ud574\ud558\uc9c0 \uc54a\ub294 \uc0ac\ub78c'\n },\n leadership: {\n name: '\ub9ac\ub354\uc2ed \uc788\ub294',\n description: '\uce5c\uad6c\ub4e4\uacfc \uc5b4\ub514 \uac08\uc9c0 \uc815\ud558\uc9c0 \ubabb\ud560 \ub54c \"\uc5ec\uae30 \uc5b4\ub54c?\" \uba3c\uc800 \uc81c\uc548\ud558\ub294 \uc0ac\ub78c'\n },\n loyal: {\n name: '\ucda9\uc131\uc2a4\ub7ec\uc6b4',\n description: '\uce5c\uad6c\uac00 \ud798\ub4e4 \ub54c \uc0c8\ubcbd 3\uc2dc\uc5d0\ub3c4 \uc804\ud654\ub97c \ubc1b\uc544\uc8fc\ub294 \uc0ac\ub78c'\n },\n diplomatic: {\n name: '\uc678\uad50\uc801',\n description: '\uc2f8\uc6b0\ub294 \uce5c\uad6c\ub4e4 \uc0ac\uc774\uc5d0\uc11c \"\ub458 \ub2e4 \ub9de\ub294 \ub9d0\uc774\uc57c\"\ub77c\uace0 \ub9d0\ud558\ub294 \uc0ac\ub78c'\n },\n inspiring: {\n name: '\uc601\uac10\uc744 \uc8fc\ub294',\n description: '\uc8fc\ubcc0 \uc0ac\ub78c\ub4e4\uc774 \"\ub108 \ub355\ubd84\uc5d0 \uc6a9\uae30\uac00 \ub0ac\uc5b4\"\ub77c\uace0 \ub9d0\ud558\uac8c \ub9cc\ub4dc\ub294 \uc0ac\ub78c'\n },\n supportive: {\n name: '\uc9c0\uc9c0\uc801',\n description: '\uce5c\uad6c\uc758 \uc0c8\ub85c\uc6b4 \ub3c4\uc804\uc744 \ub4e4\uc73c\uba74 \uc81c\uc77c \uba3c\uc800 \"\ud560 \uc218 \uc788\uc744 \uac70\uc57c!\"\ub77c\uace0 \uc751\uc6d0\ud558\ub294 \uc0ac\ub78c'\n }\n }\n },\n energy: {\n name: '\u26a1 \uc5d0\ub108\uc9c0\uc6d0',\n color: '#d69e2e',\n traits: {\n active: {\n name: '\ud65c\ub3d9\uc801',\n description: '\uc5d8\ub9ac\ubca0\uc774\ud130 \uae30\ub2e4\ub9ac\ub294 \uc2dc\uac04\uc5d0\ub3c4 \uc81c\uc790\ub9ac\uac78\uc74c\uc744 \ud558\ub294 \uc0ac\ub78c'\n },\n peaceful: {\n name: '\ud3c9\ud654\ub85c\uc6b4',\n description: '\uce74\ud398\uc5d0\uc11c \ucc45 \uc77d\uc73c\uba70 \ud558\ub8e8 \uc885\uc77c \uc788\uc5b4\ub3c4 \uc9c0\ub8e8\ud558\uc9c0 \uc54a\uc740 \uc0ac\ub78c'\n },\n challenging: {\n name: '\ub3c4\uc804\uc801',\n description: '\uc0c8\ub85c\uc6b4 \uc2dd\ub2f9\uc5d0\uc11c \uc0c8\ub85c\uc6b4 \uba54\ub274\ub97c \uc8fc\uc800\ud568 \uc5c6\uc774 \uace0\ub974\ub294 \uc0ac\ub78c'\n },\n stable: {\n name: '\uc548\uc815\uc801',\n description: '\uac19\uc740 \uce74\ud398\uc5d0\uc11c \uac19\uc740 \uba54\ub274\ub97c \uc8fc\ubb38\ud558\ub294 \uac78 \uc88b\uc544\ud558\ub294 \uc0ac\ub78c'\n },\n energetic: {\n name: '\uc5d0\ub108\uc81c\ud2f1',\n description: '\ub2a6\uc7a0 \uc790\uace0 \uc77c\uc5b4\ub098\ub3c4 10\ubd84 \ub9cc\uc5d0 \uc53b\uace0 \ub098\uac08 \uc218 \uc788\ub294 \uc0ac\ub78c'\n },\n resilient: {\n name: '\ud68c\ubcf5\ub825 \uc788\ub294',\n description: '\ud798\ub4e0 \uc77c\uc774 \uc788\uc5b4\ub3c4 \ud558\ub8fb\ubc24 \uc790\uace0 \ub098\uba74 \"\uad1c\ucc2e\uc544 \uc9c8 \uac70\uc57c\" \uc0dd\uac01\ud558\ub294 \uc0ac\ub78c'\n },\n adventurous: {\n name: '\ubaa8\ud5d8\uc801',\n description: '\uc5ec\ud589\uc9c0\uc5d0\uc11c \uc9c0\ub3c4\uc5d0 \uc5c6\ub294 \uace8\ubaa9\uae38\ub85c \ub4e4\uc5b4\uac00\ubcf4\uace0 \uc2f6\uc5b4\uc9c0\ub294 \uc0ac\ub78c'\n },\n zen: {\n name: '\uc120(\u79aa)\uc801',\n description: '\ubcf5\uc7a1\ud55c \ud558\ub8e8 \ub05d\uc5d0 \uc870\uc6a9\ud788 \uc549\uc544 \ud638\ud761\uc5d0 \uc9d1\uc911\ud560 \uc218 \uc788\ub294 \uc0ac\ub78c'\n }\n }\n },\n action: {\n name: '\ud83c\udfaf \uc2e4\ud589\ubc29\uc2dd',\n color: '#805ad5',\n traits: {\n planned: {\n name: '\uacc4\ud68d\uc801',\n description: '\uc5ec\ud589 \uac00\uae30 \uc77c\uc8fc\uc77c \uc804\ubd80\ud130 \uc9d0\uc744 \uc870\uae08\uc529 \ucc59\uae30\uae30 \uc2dc\uc791\ud558\ub294 \uc0ac\ub78c'\n },\n spontaneous: {\n name: '\uc989\ud765\uc801',\n description: '\uac11\uc790\uae30 \"\uc624\ub298 \ubc14\ub2e4 \ubcf4\ub7ec \uac08\uae4c?\" \ud558\uace0 \ucc28 \ud0a4\ub97c \uc9d1\ub294 \uc0ac\ub78c'\n },\n careful: {\n name: '\uc2e0\uc911\ud55c',\n description: '\uc628\ub77c\uc778 \uc1fc\ud551 \uc7a5\ubc14\uad6c\ub2c8\uc5d0 \uba70\uce60 \ub2f4\uc544\ub450\uace0 \uace0\ubbfc\ud558\ub294 \uc0ac\ub78c'\n },\n proactive: {\n name: '\uc801\uadf9\uc801',\n description: '\uad81\uae08\ud55c \uac8c \uc788\uc73c\uba74 \ubc14\ub85c \uac80\uc0c9\ud558\uac70\ub098 \ubb3c\uc5b4\ubcf4\ub294 \uc0ac\ub78c'\n },\n perfectionist: {\n name: '\uc644\ubcbd\uc8fc\uc758\uc801',\n description: '\ubcf4\uace0\uc11c\ub97c \uc81c\ucd9c\ud558\uae30 \uc804\uc5d0 \uc138 \ubc88 \uc774\uc0c1 \uac80\ud1a0\ud558\uace0 \ub9de\ucda4\ubc95\uae4c\uc9c0 \ud655\uc778\ud558\ub294 \uc0ac\ub78c'\n },\n flexible: {\n name: '\uc720\uc5f0\ud55c',\n description: '\uacc4\ud68d\uc774 \ud2c0\uc5b4\uc838\ub3c4 \"\ubb50 \uc5b4\ub54c, \uc774\uac83\ub3c4 \uc7ac\ubbf8\uc788\uaca0\ub124!\" \ud558\uace0 \uc6c3\ub294 \uc0ac\ub78c'\n },\n decisive: {\n name: '\uacb0\ub2e8\ub825 \uc788\ub294',\n description: '\uba54\ub274\ud310\uc744 5\ucd08 \ubcf4\uace0 \"\uc774\uac78\ub85c \uc8fc\uc138\uc694\" \ubc14\ub85c \uacb0\uc815\ud558\ub294 \uc0ac\ub78c'\n },\n patient: {\n name: '\uc778\ub0b4\uc2ec \uc788\ub294',\n description: '1000\ud53c\uc2a4 \ud37c\uc990\uc744 \ud55c \ub2ec\uc5d0 \uac78\uccd0\uc11c\ub3c4 \ub05d\uae4c\uc9c0 \uc644\uc131\ud558\ub294 \uc0ac\ub78c'\n }\n }\n }\n };\n\n let currentStep = 0;\n let selectedCategory = null;\n let selectedTrait = null;\n let userName = '';\n\n function updateProgress() {\n const progress = ((currentStep) \/ 3) * 100;\n document.getElementById('progressFill').style.width = progress + '%';\n }\n\n \/\/ Name input functionality\n document.getElementById('nameInput').addEventListener('input', function(e) {\n const nameBtn = document.getElementById('nameSubmitBtn');\n if (e.target.value.trim().length > 0) {\n nameBtn.disabled = false;\n nameBtn.style.opacity = '1';\n nameBtn.style.cursor = 'pointer';\n } else {\n nameBtn.disabled = true;\n nameBtn.style.opacity = '0.5';\n nameBtn.style.cursor = 'not-allowed';\n }\n });\n\n document.getElementById('nameInput').addEventListener('keypress', function(e) {\n if (e.key === 'Enter' && e.target.value.trim().length > 0) {\n submitName();\n }\n });\n\n document.getElementById('nameInput').addEventListener('focus', function(e) {\n e.target.style.borderColor = '#667eea';\n e.target.style.boxShadow = '0 0 0 3px rgba(102, 126, 234, 0.1)';\n });\n\n document.getElementById('nameInput').addEventListener('blur', function(e) {\n e.target.style.borderColor = '#e2e8f0';\n e.target.style.boxShadow = 'none';\n });\n\n function submitName() {\n const nameInput = document.getElementById('nameInput');\n userName = nameInput.value.trim();\n if (userName) {\n nextStep();\n }\n }\n\n function selectCategory(categoryKey, categoryName) {\n selectedCategory = categoryKey;\n \n \/\/ Update breadcrumb\n document.getElementById('breadcrumb').textContent = categoryName + ' > ?';\n \n \/\/ Generate trait cards\n const traitsContainer = document.getElementById('traitsContainer');\n traitsContainer.innerHTML = '';\n \n const category = categories[categoryKey];\n Object.keys(category.traits).forEach(traitKey => {\n const trait = category.traits[traitKey];\n const traitCard = document.createElement('div');\n traitCard.className = `trait-card ${categoryKey}`;\n traitCard.style.color = category.color;\n traitCard.onclick = () => selectTrait(traitKey, trait, category);\n \n traitCard.innerHTML = `\n <div class=\"card-face\">\n <div class=\"trait-name\">${trait.name}<\/div>\n <\/div>\n <div class=\"card-face card-back\">\n <div class=\"trait-description\">\"${trait.description}\"<\/div>\n <\/div>\n `;\n \n traitsContainer.appendChild(traitCard);\n });\n \n \/\/ Move to step 2\n nextStep();\n }\n\n function selectTrait(traitKey, trait, category) {\n selectedTrait = { key: traitKey, ...trait };\n \n \/\/ Flip the card\n event.currentTarget.classList.add('flipped');\n \n \/\/ Wait for animation, then show result\n setTimeout(() => {\n showResult(category, trait);\n }, 1500);\n }\n\n function showResult(category, trait) {\n \/\/ Update result content with personalized format\n document.getElementById('resultTitle').textContent = `\uacb0\uacfc\uac00 \ub098\uc654\uc5b4\uc694! \ud83c\udf89`;\n document.getElementById('resultIntro').textContent = `${userName}, \ub2f9\uc2e0\uc740 ${trait.description}\uc778 \uac83 \uac19\uad70\uc694!`;\n document.getElementById('resultIntro').style.color = category.color;\n document.getElementById('resultDescription').textContent = `\ub3d9\uc758\ud558\uc2dc\ub098\uc694? \ud83d\ude0a`;\n document.getElementById('resultDescription').style.fontSize = '1.1rem';\n document.getElementById('resultDescription').style.fontWeight = '500';\n document.getElementById('resultDescription').style.fontStyle = 'normal';\n document.getElementById('resultCard').style.borderColor = category.color;\n \n \/\/ Move to step 3\n nextStep();\n }\n\n function nextStep() {\n document.getElementById(`step${currentStep}`).classList.remove('active');\n currentStep++;\n document.getElementById(`step${currentStep}`).classList.add('active');\n updateProgress();\n }\n\n function goBack() {\n document.getElementById(`step${currentStep}`).classList.remove('active');\n currentStep--;\n document.getElementById(`step${currentStep}`).classList.add('active');\n updateProgress();\n }\n\n function restart() {\n document.getElementById(`step${currentStep}`).classList.remove('active');\n currentStep = 0;\n document.getElementById(`step${currentStep}`).classList.add('active');\n selectedCategory = null;\n selectedTrait = null;\n userName = '';\n document.getElementById('nameInput').value = '';\n document.getElementById('nameSubmitBtn').disabled = true;\n document.getElementById('nameSubmitBtn').style.opacity = '0.5';\n updateProgress();\n }\n\n function shareResult() {\n const resultText = `${userName}, \ub2f9\uc2e0\uc740 ${selectedTrait.description}\uc778 \uac83 \uac19\uad70\uc694!`;\n \n if (navigator.share) {\n navigator.share({\n title: '\ub098\ub97c \ud45c\ud604\ud558\ub294 \ud55c \ub2e8\uc5b4',\n text: resultText,\n url: window.location.href\n });\n } else {\n \/\/ Fallback for browsers that don't support Web Share API\n const shareText = `${resultText} \ub2f9\uc2e0\uc740 \uc5b4\ub5a4 \uc0ac\ub78c\uc778\uac00\uc694?`;\n navigator.clipboard.writeText(shareText).then(() => {\n alert('\uacb0\uacfc\uac00 \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ub418\uc5c8\uc2b5\ub2c8\ub2e4!');\n });\n }\n }\n\n \/\/ Initialize\n updateProgress();\n <\/script>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>\ub098\ub97c \ud45c\ud604\ud558\ub294 \ud55c \ub2e8\uc5b4 \uc548\ub155\ud558\uc138\uc694! \ud83d\udc4b \uba3c\uc800 \uc774\ub984\uc744 \uc54c\ub824\uc8fc\uc2dc\uaca0\uc5b4\uc694? \uc2dc\uc791\ud558\uae30 \u2728 \ub098\ub97c \uac00\uc7a5 \uc798 \ud45c\ud604\ud558\ub294 \uac83\uc740? \uba3c\uc800 \uc5b4\ub5a4 \uc601\uc5ed\uc5d0\uc11c \ub098\ub97c \uc54c\uc544\ubcf4\uace0 \uc2f6\uc740\uc9c0 \uc120\ud0dd\ud574\uc8fc\uc138\uc694 \ud83e\udde0 \uc0ac\uace0\ubc29\uc2dd \u2764\ufe0f \uac10\uc815\ud45c\ud604 \ud83d\udc65 \uc778\uac04\uad00\uacc4 \u26a1…<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_tribe_ticket_capacity":"0","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":"","_tec_slr_enabled":"","_tec_slr_layout":""},"class_list":["post-2044","page","type-page","status-publish","hentry"],"ticketed":false,"_links":{"self":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages\/2044","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/comments?post=2044"}],"version-history":[{"count":0,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages\/2044\/revisions"}],"wp:attachment":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/media?parent=2044"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2044,"date":"2025-08-10T20:29:03","date_gmt":"2025-08-10T20:29:03","guid":{"rendered":"https:\/\/visionnetworkcamp.org\/?page_id=2044"},"modified":"2025-08-10T20:55:14","modified_gmt":"2025-08-10T20:55:14","slug":"survey-board","status":"publish","type":"page","link":"https:\/\/visionnetworkcamp.org\/ko\/survey-board\/","title":{"rendered":"Survey Board"},"content":{"rendered":"\n\n\n \n \n \ub098\ub97c \ud45c\ud604\ud558\ub294 \ud55c \ub2e8\uc5b4<\/title>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n body {\n font-family: 'Noto Sans KR', sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 20px;\n overflow-x: hidden;\n }\n \n .container {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(20px);\n border-radius: 24px;\n padding: 40px;\n max-width: 600px;\n width: 100%;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);\n text-align: center;\n position: relative;\n overflow: hidden;\n }\n \n .container::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 4px;\n background: linear-gradient(90deg, #ff9a9e, #fecfef, #fecfef, #ff9a9e);\n background-size: 400% 100%;\n animation: gradientShift 3s ease-in-out infinite;\n }\n \n @keyframes gradientShift {\n 0%, 100% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n }\n \n .title {\n font-size: 2.2rem;\n font-weight: 600;\n color: #2d3748;\n margin-bottom: 12px;\n opacity: 0;\n animation: fadeInUp 0.8s ease-out 0.2s forwards;\n }\n \n .subtitle {\n font-size: 1.1rem;\n color: #718096;\n margin-bottom: 40px;\n opacity: 0;\n animation: fadeInUp 0.8s ease-out 0.4s forwards;\n }\n \n .progress-bar {\n width: 100%;\n height: 6px;\n background: #e2e8f0;\n border-radius: 3px;\n margin-bottom: 30px;\n overflow: hidden;\n opacity: 0;\n animation: fadeInUp 0.8s ease-out 0.6s forwards;\n }\n \n .progress-fill {\n height: 100%;\n background: linear-gradient(90deg, #667eea, #764ba2);\n border-radius: 3px;\n transition: width 0.6s ease-in-out;\n width: 33.33%;\n }\n \n .step {\n display: none;\n opacity: 0;\n }\n \n .step.active {\n display: block;\n animation: fadeInScale 0.6s ease-out forwards;\n }\n \n .categories {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n gap: 20px;\n margin-bottom: 30px;\n }\n \n .category-card {\n background: white;\n border-radius: 16px;\n padding: 24px 16px;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n border: 2px solid transparent;\n position: relative;\n overflow: hidden;\n }\n \n .category-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);\n transition: left 0.5s;\n }\n \n .category-card:hover::before {\n left: 100%;\n }\n \n .category-card:hover {\n transform: translateY(-8px) scale(1.02);\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);\n border-color: currentColor;\n }\n \n .category-card.thinking { color: #3182ce; }\n .category-card.emotion { color: #e53e3e; }\n .category-card.social { color: #38a169; }\n .category-card.energy { color: #d69e2e; }\n .category-card.action { color: #805ad5; }\n \n .category-icon {\n font-size: 2.5rem;\n margin-bottom: 12px;\n display: block;\n }\n \n .category-name {\n font-size: 1rem;\n font-weight: 500;\n color: #2d3748;\n }\n \n .traits {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n gap: 16px;\n margin-bottom: 30px;\n max-height: 400px;\n overflow-y: auto;\n padding: 10px;\n }\n \n .trait-card {\n background: white;\n border-radius: 12px;\n padding: 20px 16px;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n border: 2px solid #e2e8f0;\n position: relative;\n transform-style: preserve-3d;\n height: 120px;\n }\n \n .trait-card:hover {\n transform: translateY(-4px) rotateY(5deg);\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);\n border-color: currentColor;\n }\n \n .trait-card.flipped {\n transform: rotateY(180deg);\n }\n \n .card-face {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n padding: 20px 16px;\n border-radius: 12px;\n backface-visibility: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n }\n \n .card-back {\n transform: rotateY(180deg);\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 16px 12px;\n }\n \n .trait-name {\n font-size: 1rem;\n font-weight: 500;\n color: #2d3748;\n }\n \n .trait-description {\n font-size: 0.9rem;\n line-height: 1.4;\n font-weight: 400;\n }\n \n .back-button {\n background: #e2e8f0;\n color: #4a5568;\n border: none;\n padding: 12px 24px;\n border-radius: 8px;\n cursor: pointer;\n font-size: 0.9rem;\n font-weight: 500;\n transition: all 0.2s;\n margin-right: 12px;\n }\n \n .back-button:hover {\n background: #cbd5e0;\n transform: translateY(-1px);\n }\n \n .breadcrumb {\n color: #718096;\n font-size: 0.9rem;\n margin-bottom: 24px;\n opacity: 0;\n animation: fadeInUp 0.6s ease-out 0.2s forwards;\n }\n \n .result-card {\n background: white;\n border-radius: 20px;\n padding: 40px;\n margin: 20px 0;\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);\n border: 3px solid;\n position: relative;\n overflow: hidden;\n }\n \n .result-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(45deg, transparent 48%, rgba(255, 255, 255, 0.1) 50%, transparent 52%);\n animation: shine 2s infinite;\n }\n \n @keyframes shine {\n 0% { transform: translateX(-100%); }\n 100% { transform: translateX(100%); }\n }\n \n .result-category {\n font-size: 1.1rem;\n font-weight: 600;\n margin-bottom: 8px;\n opacity: 0.8;\n }\n \n .result-trait {\n font-size: 1.4rem;\n font-weight: 700;\n margin-bottom: 20px;\n }\n \n .result-description {\n font-size: 1.2rem;\n line-height: 1.6;\n font-weight: 400;\n font-style: italic;\n color: #2d3748;\n margin-bottom: 20px;\n }\n \n .share-button {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n border: none;\n padding: 14px 28px;\n border-radius: 12px;\n cursor: pointer;\n font-size: 1rem;\n font-weight: 600;\n transition: all 0.3s;\n box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);\n }\n \n .share-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);\n }\n \n .retry-button {\n background: transparent;\n color: #718096;\n border: 2px solid #e2e8f0;\n padding: 12px 24px;\n border-radius: 12px;\n cursor: pointer;\n font-size: 0.9rem;\n font-weight: 500;\n transition: all 0.2s;\n margin-left: 12px;\n }\n \n .retry-button:hover {\n border-color: #cbd5e0;\n color: #4a5568;\n }\n \n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \n @keyframes fadeInScale {\n from {\n opacity: 0;\n transform: scale(0.9);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n \n @media (max-width: 768px) {\n .container {\n padding: 24px;\n margin: 10px;\n }\n \n .title {\n font-size: 1.8rem;\n }\n \n .categories {\n grid-template-columns: repeat(2, 1fr);\n gap: 16px;\n }\n \n .traits {\n grid-template-columns: repeat(2, 1fr);\n gap: 12px;\n max-height: 350px;\n }\n \n .trait-card {\n height: 100px;\n padding: 16px 12px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"progress-bar\">\n <div class=\"progress-fill\" id=\"progressFill\"><\/div>\n <\/div>\n \n \n <div class=\"step active\" id=\"step0\">\n <h1 class=\"title\">\uc548\ub155\ud558\uc138\uc694! \ud83d\udc4b<\/h1>\n <p class=\"subtitle\">\uba3c\uc800 \uc774\ub984\uc744 \uc54c\ub824\uc8fc\uc2dc\uaca0\uc5b4\uc694?<\/p>\n \n <div style=\"margin: 40px 0;\">\n <input type=\"text\" id=\"nameInput\" placeholder=\"\uc774\ub984\uc744 \uc785\ub825\ud574\uc8fc\uc138\uc694\" \n style=\"width: 100%; max-width: 300px; padding: 16px 20px; font-size: 1.1rem; border: 2px solid #e2e8f0; border-radius: 12px; text-align: center; transition: all 0.3s; outline: none; font-family: 'Noto Sans KR', sans-serif;\">\n <br><br>\n <button id=\"nameSubmitBtn\" onclick=\"submitName()\" disabled\n style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 14px 28px; border-radius: 12px; cursor: pointer; font-size: 1rem; font-weight: 600; transition: all 0.3s; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); opacity: 0.5;\">\n \uc2dc\uc791\ud558\uae30 \u2728\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"step\" id=\"step1\">\n <h1 class=\"title\">\ub098\ub97c \uac00\uc7a5 \uc798 \ud45c\ud604\ud558\ub294 \uac83\uc740?<\/h1>\n <p class=\"subtitle\">\uba3c\uc800 \uc5b4\ub5a4 \uc601\uc5ed\uc5d0\uc11c \ub098\ub97c \uc54c\uc544\ubcf4\uace0 \uc2f6\uc740\uc9c0 \uc120\ud0dd\ud574\uc8fc\uc138\uc694<\/p>\n \n <div class=\"categories\">\n <div class=\"category-card thinking\" onclick=\"selectCategory('thinking', '\ud83e\udde0 \uc0ac\uace0\ubc29\uc2dd')\">\n <span class=\"category-icon\">\ud83e\udde0<\/span>\n <div class=\"category-name\">\uc0ac\uace0\ubc29\uc2dd<\/div>\n <\/div>\n <div class=\"category-card emotion\" onclick=\"selectCategory('emotion', '\u2764\ufe0f \uac10\uc815\ud45c\ud604')\">\n <span class=\"category-icon\">\u2764\ufe0f<\/span>\n <div class=\"category-name\">\uac10\uc815\ud45c\ud604<\/div>\n <\/div>\n <div class=\"category-card social\" onclick=\"selectCategory('social', '\ud83d\udc65 \uc778\uac04\uad00\uacc4')\">\n <span class=\"category-icon\">\ud83d\udc65<\/span>\n <div class=\"category-name\">\uc778\uac04\uad00\uacc4<\/div>\n <\/div>\n <div class=\"category-card energy\" onclick=\"selectCategory('energy', '\u26a1 \uc5d0\ub108\uc9c0\uc6d0')\">\n <span class=\"category-icon\">\u26a1<\/span>\n <div class=\"category-name\">\uc5d0\ub108\uc9c0\uc6d0<\/div>\n <\/div>\n <div class=\"category-card action\" onclick=\"selectCategory('action', '\ud83c\udfaf \uc2e4\ud589\ubc29\uc2dd')\">\n <span class=\"category-icon\">\ud83c\udfaf<\/span>\n <div class=\"category-name\">\uc2e4\ud589\ubc29\uc2dd<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"step\" id=\"step2\">\n <div class=\"breadcrumb\" id=\"breadcrumb\">\uc0ac\uace0\ubc29\uc2dd > ?<\/div>\n <h2 class=\"title\">\uc5b4\ub5a4 \uc131\ud5a5\uc774 \uac00\uc7a5 \ub098\uc640 \ube44\uc2b7\ud55c\uac00\uc694?<\/h2>\n <p class=\"subtitle\">\uce74\ub4dc\ub97c \uc120\ud0dd\ud558\uba74 \ud2b9\ubcc4\ud55c \ud45c\ud604\uc744 \ud655\uc778\ud560 \uc218 \uc788\uc5b4\uc694<\/p>\n \n <div class=\"traits\" id=\"traitsContainer\">\n \n <\/div>\n \n <button class=\"back-button\" onclick=\"goBack()\">\u2190 \uc774\uc804 \ub2e8\uacc4<\/button>\n <\/div>\n \n \n <div class=\"step\" id=\"step3\">\n <h2 class=\"title\" id=\"resultTitle\">\ub2f9\uc2e0\uc740 \uc774\ub7f0 \uc0ac\ub78c\uc774\uc5d0\uc694!<\/h2>\n <p class=\"subtitle\">\uc544\ub984\ub2e4\uc6b4 \ub2f9\uc2e0\uc758 \ubaa8\uc2b5\uc744 \ud655\uc778\ud574\ubcf4\uc138\uc694<\/p>\n \n <div class=\"result-card\" id=\"resultCard\">\n <div class=\"result-intro\" id=\"resultIntro\" style=\"font-size: 1.3rem; font-weight: 600; margin-bottom: 24px; color: #2d3748;\"><\/div>\n <div class=\"result-description\" id=\"resultDescription\"><\/div>\n <\/div>\n \n <button class=\"share-button\" onclick=\"shareResult()\">\u2728 \uacb0\uacfc \uacf5\uc720\ud558\uae30<\/button>\n <button class=\"retry-button\" onclick=\"restart()\">\ub2e4\uc2dc \ud574\ubcf4\uae30<\/button>\n <\/div>\n <\/div>\n\n <script>\n const categories = {\n thinking: {\n name: '\ud83e\udde0 \uc0ac\uace0\ubc29\uc2dd',\n color: '#3182ce',\n traits: {\n logical: {\n name: '\ub17c\ub9ac\uc801',\n description: '\uc601\uc218\uc99d\uc744 \ubcf4\uba70 \uacc4\uc0b0 \uc2e4\uc218\ub97c \ucc3e\uc544\ub0b4\ub294 \uc0ac\ub78c'\n },\n creative: {\n name: '\ucc3d\uc758\uc801',\n description: '\ub77c\uba74\uc5d0 \uce58\uc988\uc640 \uacc4\ub780 \ub9d0\uace0\ub3c4 \ubb54\uac00 \ub354 \ub123\uc5b4\ubcf4\ub294 \uc0ac\ub78c'\n },\n intuitive: {\n name: '\uc9c1\uad00\uc801',\n description: '\uccab \ub9cc\ub0a8\uc5d0\uc11c \"\uc774 \uc0ac\ub78c \uc88b\uc740 \uc0ac\ub78c\uc774\ub2e4\" \ubc14\ub85c \ub290\ub07c\ub294 \uc0ac\ub78c'\n },\n analytical: {\n name: '\ubd84\uc11d\uc801',\n description: '\ub137\ud50c\ub9ad\uc2a4\uc5d0\uc11c \uc601\ud654 \ub9ac\ubdf0\ub97c \ub2e4 \uc77d\uace0 \uace0\ub974\ub294 \uc0ac\ub78c'\n },\n innovative: {\n name: '\ud601\uc2e0\uc801',\n description: '\ubaa8\ub4e0 \uc0ac\ub78c\uc774 \uc624\ub978\ucabd\uc73c\ub85c \uac08 \ub54c \uc67c\ucabd \uae38\uc774 \ub354 \uc88b\uc744 \uac83 \uac19\ub2e4\uace0 \uc0dd\uac01\ud558\ub294 \uc0ac\ub78c'\n },\n methodical: {\n name: '\uccb4\uacc4\uc801',\n description: '\uc11c\ub78d \uc548 \ubb3c\uac74\ub4e4\uc744 \uc885\ub958\ubcc4\ub85c \uc815\ub9ac\ud574\uc11c \ub77c\ubca8\uae4c\uc9c0 \ubd99\uc774\ub294 \uc0ac\ub78c'\n },\n philosophical: {\n name: '\ucca0\ud559\uc801',\n description: '\uc0e4\uc6cc\ud558\uba74\uc11c \"\uc778\uc0dd\uc774\ub780 \ubb34\uc5c7\uc778\uac00?\" \uac19\uc740 \uc9c8\ubb38\uc744 \uc9c4\uc9c0\ud558\uac8c \uace0\ubbfc\ud558\ub294 \uc0ac\ub78c'\n },\n practical: {\n name: '\ud604\uc2e4\uc801',\n description: '\uafc8\ubcf4\ub2e4\ub294 \"\uc774\uac8c \uc815\ub9d0 \ub3c4\uc6c0\uc774 \ub420\uae4c?\"\ub97c \uba3c\uc800 \uc0dd\uac01\ud558\ub294 \uc0ac\ub78c'\n }\n }\n },\n emotion: {\n name: '\u2764\ufe0f \uac10\uc815\ud45c\ud604',\n color: '#e53e3e',\n traits: {\n warm: {\n name: '\ub530\ub73b\ud55c',\n description: '\uce5c\uad6c\uac00 \uac10\uae30 \uac78\ub838\ub2e4\uace0 \ud558\uba74 \uc8fd \ub053\uc5ec\uc8fc\uace0 \uc2f6\uc5b4\uc9c0\ub294 \uc0ac\ub78c'\n },\n calm: {\n name: '\ucc28\ubd84\ud55c',\n description: '\ube44 \uc624\ub294 \ub0a0 \ucc3d\uac00\uc5d0\uc11c \ucc28 \ub9c8\uc2dc\uba70 \ube57\uc18c\ub9ac \ub4e3\ub294 \uac78 \uc88b\uc544\ud558\ub294 \uc0ac\ub78c'\n },\n passionate: {\n name: '\uc5f4\uc815\uc801',\n description: '\uc88b\uc544\ud558\ub294 \ub4dc\ub77c\ub9c8 \uc598\uae30\ud558\uba74 \ub208\ube5b\uc774 \ubc18\uc9dd\uc774\ub294 \uc0ac\ub78c'\n },\n sensitive: {\n name: '\uc12c\uc138\ud55c',\n description: '\uce5c\uad6c\uc758 \ud45c\uc815\ub9cc \ubd10\ub3c4 \uae30\ubd84\uc774 \uc548 \uc88b\uc740 \uac78 \uc54c\uc544\ucc44\ub294 \uc0ac\ub78c'\n },\n cheerful: {\n name: '\ubc1d\uc740',\n description: '\uc6d4\uc694\uc77c \uc544\uce68\uc5d0\ub3c4 \"\uc624\ub298\ub3c4 \uc88b\uc740 \ud558\ub8e8!\"\ub77c\uace0 \ub9d0\ud560 \uc218 \uc788\ub294 \uc0ac\ub78c'\n },\n romantic: {\n name: '\ub0ad\ub9cc\uc801',\n description: '\uae38\uc5d0\uc11c \uc608\uc05c \uaf43\uc744 \ubcf4\uba74 \uaf2d \uc0ac\uc9c4\uc744 \ucc0d\uc5b4\uc11c \uac04\uc9c1\ud558\uace0 \uc2f6\uc5b4\uc9c0\ub294 \uc0ac\ub78c'\n },\n empathetic: {\n name: '\uacf5\uac10\uc801',\n description: '\uc601\ud654 \ubcf4\ub2e4\uac00 \uc8fc\uc778\uacf5\uacfc \ud568\uaed8 \uc6b8\uace0 \uc6c3\ub294 \uc790\uc2e0\uc744 \ubc1c\uacac\ud558\ub294 \uc0ac\ub78c'\n },\n gentle: {\n name: '\uc628\ud654\ud55c',\n description: '\ud654\uac00 \ub098\ub3c4 \ubaa9\uc18c\ub9ac \ub192\uc774\ub294 \ub300\uc2e0 \ub354 \uc870\uc6a9\ud788 \ub9d0\ud558\ub294 \uc0ac\ub78c'\n }\n }\n },\n social: {\n name: '\ud83d\udc65 \uc778\uac04\uad00\uacc4',\n color: '#38a169',\n traits: {\n sociable: {\n name: '\uc0ac\uad50\uc801',\n description: '\ud63c\uc790 \ud654\uc7a5\uc2e4 \uac00\ub294 \uac83\ubcf4\ub2e4 \ub204\uad70\uac00\uc640 \ud568\uaed8 \uac00\ub294 \uac8c \ub354 \uc88b\uc740 \uc0ac\ub78c'\n },\n caring: {\n name: '\ubc30\ub824\uc2ec \ub9ce\uc740',\n description: '\ub2e8\uccb4 \uc8fc\ubb38\ud560 \ub54c \ubaa8\ub4e0 \uc0ac\ub78c \ucde8\ud5a5\uc744 \ub2e4 \uae30\uc5b5\ud558\ub824\uace0 \ud558\ub294 \uc0ac\ub78c'\n },\n independent: {\n name: '\ub3c5\ub9bd\uc801',\n description: '\ud63c\uc790 \uc601\ud654\uad00 \uac00\ub294 \uac83\uc744 \uc804\ud600 \uc5b4\uc0c9\ud574\ud558\uc9c0 \uc54a\ub294 \uc0ac\ub78c'\n },\n leadership: {\n name: '\ub9ac\ub354\uc2ed \uc788\ub294',\n description: '\uce5c\uad6c\ub4e4\uacfc \uc5b4\ub514 \uac08\uc9c0 \uc815\ud558\uc9c0 \ubabb\ud560 \ub54c \"\uc5ec\uae30 \uc5b4\ub54c?\" \uba3c\uc800 \uc81c\uc548\ud558\ub294 \uc0ac\ub78c'\n },\n loyal: {\n name: '\ucda9\uc131\uc2a4\ub7ec\uc6b4',\n description: '\uce5c\uad6c\uac00 \ud798\ub4e4 \ub54c \uc0c8\ubcbd 3\uc2dc\uc5d0\ub3c4 \uc804\ud654\ub97c \ubc1b\uc544\uc8fc\ub294 \uc0ac\ub78c'\n },\n diplomatic: {\n name: '\uc678\uad50\uc801',\n description: '\uc2f8\uc6b0\ub294 \uce5c\uad6c\ub4e4 \uc0ac\uc774\uc5d0\uc11c \"\ub458 \ub2e4 \ub9de\ub294 \ub9d0\uc774\uc57c\"\ub77c\uace0 \ub9d0\ud558\ub294 \uc0ac\ub78c'\n },\n inspiring: {\n name: '\uc601\uac10\uc744 \uc8fc\ub294',\n description: '\uc8fc\ubcc0 \uc0ac\ub78c\ub4e4\uc774 \"\ub108 \ub355\ubd84\uc5d0 \uc6a9\uae30\uac00 \ub0ac\uc5b4\"\ub77c\uace0 \ub9d0\ud558\uac8c \ub9cc\ub4dc\ub294 \uc0ac\ub78c'\n },\n supportive: {\n name: '\uc9c0\uc9c0\uc801',\n description: '\uce5c\uad6c\uc758 \uc0c8\ub85c\uc6b4 \ub3c4\uc804\uc744 \ub4e4\uc73c\uba74 \uc81c\uc77c \uba3c\uc800 \"\ud560 \uc218 \uc788\uc744 \uac70\uc57c!\"\ub77c\uace0 \uc751\uc6d0\ud558\ub294 \uc0ac\ub78c'\n }\n }\n },\n energy: {\n name: '\u26a1 \uc5d0\ub108\uc9c0\uc6d0',\n color: '#d69e2e',\n traits: {\n active: {\n name: '\ud65c\ub3d9\uc801',\n description: '\uc5d8\ub9ac\ubca0\uc774\ud130 \uae30\ub2e4\ub9ac\ub294 \uc2dc\uac04\uc5d0\ub3c4 \uc81c\uc790\ub9ac\uac78\uc74c\uc744 \ud558\ub294 \uc0ac\ub78c'\n },\n peaceful: {\n name: '\ud3c9\ud654\ub85c\uc6b4',\n description: '\uce74\ud398\uc5d0\uc11c \ucc45 \uc77d\uc73c\uba70 \ud558\ub8e8 \uc885\uc77c \uc788\uc5b4\ub3c4 \uc9c0\ub8e8\ud558\uc9c0 \uc54a\uc740 \uc0ac\ub78c'\n },\n challenging: {\n name: '\ub3c4\uc804\uc801',\n description: '\uc0c8\ub85c\uc6b4 \uc2dd\ub2f9\uc5d0\uc11c \uc0c8\ub85c\uc6b4 \uba54\ub274\ub97c \uc8fc\uc800\ud568 \uc5c6\uc774 \uace0\ub974\ub294 \uc0ac\ub78c'\n },\n stable: {\n name: '\uc548\uc815\uc801',\n description: '\uac19\uc740 \uce74\ud398\uc5d0\uc11c \uac19\uc740 \uba54\ub274\ub97c \uc8fc\ubb38\ud558\ub294 \uac78 \uc88b\uc544\ud558\ub294 \uc0ac\ub78c'\n },\n energetic: {\n name: '\uc5d0\ub108\uc81c\ud2f1',\n description: '\ub2a6\uc7a0 \uc790\uace0 \uc77c\uc5b4\ub098\ub3c4 10\ubd84 \ub9cc\uc5d0 \uc53b\uace0 \ub098\uac08 \uc218 \uc788\ub294 \uc0ac\ub78c'\n },\n resilient: {\n name: '\ud68c\ubcf5\ub825 \uc788\ub294',\n description: '\ud798\ub4e0 \uc77c\uc774 \uc788\uc5b4\ub3c4 \ud558\ub8fb\ubc24 \uc790\uace0 \ub098\uba74 \"\uad1c\ucc2e\uc544 \uc9c8 \uac70\uc57c\" \uc0dd\uac01\ud558\ub294 \uc0ac\ub78c'\n },\n adventurous: {\n name: '\ubaa8\ud5d8\uc801',\n description: '\uc5ec\ud589\uc9c0\uc5d0\uc11c \uc9c0\ub3c4\uc5d0 \uc5c6\ub294 \uace8\ubaa9\uae38\ub85c \ub4e4\uc5b4\uac00\ubcf4\uace0 \uc2f6\uc5b4\uc9c0\ub294 \uc0ac\ub78c'\n },\n zen: {\n name: '\uc120(\u79aa)\uc801',\n description: '\ubcf5\uc7a1\ud55c \ud558\ub8e8 \ub05d\uc5d0 \uc870\uc6a9\ud788 \uc549\uc544 \ud638\ud761\uc5d0 \uc9d1\uc911\ud560 \uc218 \uc788\ub294 \uc0ac\ub78c'\n }\n }\n },\n action: {\n name: '\ud83c\udfaf \uc2e4\ud589\ubc29\uc2dd',\n color: '#805ad5',\n traits: {\n planned: {\n name: '\uacc4\ud68d\uc801',\n description: '\uc5ec\ud589 \uac00\uae30 \uc77c\uc8fc\uc77c \uc804\ubd80\ud130 \uc9d0\uc744 \uc870\uae08\uc529 \ucc59\uae30\uae30 \uc2dc\uc791\ud558\ub294 \uc0ac\ub78c'\n },\n spontaneous: {\n name: '\uc989\ud765\uc801',\n description: '\uac11\uc790\uae30 \"\uc624\ub298 \ubc14\ub2e4 \ubcf4\ub7ec \uac08\uae4c?\" \ud558\uace0 \ucc28 \ud0a4\ub97c \uc9d1\ub294 \uc0ac\ub78c'\n },\n careful: {\n name: '\uc2e0\uc911\ud55c',\n description: '\uc628\ub77c\uc778 \uc1fc\ud551 \uc7a5\ubc14\uad6c\ub2c8\uc5d0 \uba70\uce60 \ub2f4\uc544\ub450\uace0 \uace0\ubbfc\ud558\ub294 \uc0ac\ub78c'\n },\n proactive: {\n name: '\uc801\uadf9\uc801',\n description: '\uad81\uae08\ud55c \uac8c \uc788\uc73c\uba74 \ubc14\ub85c \uac80\uc0c9\ud558\uac70\ub098 \ubb3c\uc5b4\ubcf4\ub294 \uc0ac\ub78c'\n },\n perfectionist: {\n name: '\uc644\ubcbd\uc8fc\uc758\uc801',\n description: '\ubcf4\uace0\uc11c\ub97c \uc81c\ucd9c\ud558\uae30 \uc804\uc5d0 \uc138 \ubc88 \uc774\uc0c1 \uac80\ud1a0\ud558\uace0 \ub9de\ucda4\ubc95\uae4c\uc9c0 \ud655\uc778\ud558\ub294 \uc0ac\ub78c'\n },\n flexible: {\n name: '\uc720\uc5f0\ud55c',\n description: '\uacc4\ud68d\uc774 \ud2c0\uc5b4\uc838\ub3c4 \"\ubb50 \uc5b4\ub54c, \uc774\uac83\ub3c4 \uc7ac\ubbf8\uc788\uaca0\ub124!\" \ud558\uace0 \uc6c3\ub294 \uc0ac\ub78c'\n },\n decisive: {\n name: '\uacb0\ub2e8\ub825 \uc788\ub294',\n description: '\uba54\ub274\ud310\uc744 5\ucd08 \ubcf4\uace0 \"\uc774\uac78\ub85c \uc8fc\uc138\uc694\" \ubc14\ub85c \uacb0\uc815\ud558\ub294 \uc0ac\ub78c'\n },\n patient: {\n name: '\uc778\ub0b4\uc2ec \uc788\ub294',\n description: '1000\ud53c\uc2a4 \ud37c\uc990\uc744 \ud55c \ub2ec\uc5d0 \uac78\uccd0\uc11c\ub3c4 \ub05d\uae4c\uc9c0 \uc644\uc131\ud558\ub294 \uc0ac\ub78c'\n }\n }\n }\n };\n\n let currentStep = 0;\n let selectedCategory = null;\n let selectedTrait = null;\n let userName = '';\n\n function updateProgress() {\n const progress = ((currentStep) \/ 3) * 100;\n document.getElementById('progressFill').style.width = progress + '%';\n }\n\n \/\/ Name input functionality\n document.getElementById('nameInput').addEventListener('input', function(e) {\n const nameBtn = document.getElementById('nameSubmitBtn');\n if (e.target.value.trim().length > 0) {\n nameBtn.disabled = false;\n nameBtn.style.opacity = '1';\n nameBtn.style.cursor = 'pointer';\n } else {\n nameBtn.disabled = true;\n nameBtn.style.opacity = '0.5';\n nameBtn.style.cursor = 'not-allowed';\n }\n });\n\n document.getElementById('nameInput').addEventListener('keypress', function(e) {\n if (e.key === 'Enter' && e.target.value.trim().length > 0) {\n submitName();\n }\n });\n\n document.getElementById('nameInput').addEventListener('focus', function(e) {\n e.target.style.borderColor = '#667eea';\n e.target.style.boxShadow = '0 0 0 3px rgba(102, 126, 234, 0.1)';\n });\n\n document.getElementById('nameInput').addEventListener('blur', function(e) {\n e.target.style.borderColor = '#e2e8f0';\n e.target.style.boxShadow = 'none';\n });\n\n function submitName() {\n const nameInput = document.getElementById('nameInput');\n userName = nameInput.value.trim();\n if (userName) {\n nextStep();\n }\n }\n\n function selectCategory(categoryKey, categoryName) {\n selectedCategory = categoryKey;\n \n \/\/ Update breadcrumb\n document.getElementById('breadcrumb').textContent = categoryName + ' > ?';\n \n \/\/ Generate trait cards\n const traitsContainer = document.getElementById('traitsContainer');\n traitsContainer.innerHTML = '';\n \n const category = categories[categoryKey];\n Object.keys(category.traits).forEach(traitKey => {\n const trait = category.traits[traitKey];\n const traitCard = document.createElement('div');\n traitCard.className = `trait-card ${categoryKey}`;\n traitCard.style.color = category.color;\n traitCard.onclick = () => selectTrait(traitKey, trait, category);\n \n traitCard.innerHTML = `\n <div class=\"card-face\">\n <div class=\"trait-name\">${trait.name}<\/div>\n <\/div>\n <div class=\"card-face card-back\">\n <div class=\"trait-description\">\"${trait.description}\"<\/div>\n <\/div>\n `;\n \n traitsContainer.appendChild(traitCard);\n });\n \n \/\/ Move to step 2\n nextStep();\n }\n\n function selectTrait(traitKey, trait, category) {\n selectedTrait = { key: traitKey, ...trait };\n \n \/\/ Flip the card\n event.currentTarget.classList.add('flipped');\n \n \/\/ Wait for animation, then show result\n setTimeout(() => {\n showResult(category, trait);\n }, 1500);\n }\n\n function showResult(category, trait) {\n \/\/ Update result content with personalized format\n document.getElementById('resultTitle').textContent = `\uacb0\uacfc\uac00 \ub098\uc654\uc5b4\uc694! \ud83c\udf89`;\n document.getElementById('resultIntro').textContent = `${userName}, \ub2f9\uc2e0\uc740 ${trait.description}\uc778 \uac83 \uac19\uad70\uc694!`;\n document.getElementById('resultIntro').style.color = category.color;\n document.getElementById('resultDescription').textContent = `\ub3d9\uc758\ud558\uc2dc\ub098\uc694? \ud83d\ude0a`;\n document.getElementById('resultDescription').style.fontSize = '1.1rem';\n document.getElementById('resultDescription').style.fontWeight = '500';\n document.getElementById('resultDescription').style.fontStyle = 'normal';\n document.getElementById('resultCard').style.borderColor = category.color;\n \n \/\/ Move to step 3\n nextStep();\n }\n\n function nextStep() {\n document.getElementById(`step${currentStep}`).classList.remove('active');\n currentStep++;\n document.getElementById(`step${currentStep}`).classList.add('active');\n updateProgress();\n }\n\n function goBack() {\n document.getElementById(`step${currentStep}`).classList.remove('active');\n currentStep--;\n document.getElementById(`step${currentStep}`).classList.add('active');\n updateProgress();\n }\n\n function restart() {\n document.getElementById(`step${currentStep}`).classList.remove('active');\n currentStep = 0;\n document.getElementById(`step${currentStep}`).classList.add('active');\n selectedCategory = null;\n selectedTrait = null;\n userName = '';\n document.getElementById('nameInput').value = '';\n document.getElementById('nameSubmitBtn').disabled = true;\n document.getElementById('nameSubmitBtn').style.opacity = '0.5';\n updateProgress();\n }\n\n function shareResult() {\n const resultText = `${userName}, \ub2f9\uc2e0\uc740 ${selectedTrait.description}\uc778 \uac83 \uac19\uad70\uc694!`;\n \n if (navigator.share) {\n navigator.share({\n title: '\ub098\ub97c \ud45c\ud604\ud558\ub294 \ud55c \ub2e8\uc5b4',\n text: resultText,\n url: window.location.href\n });\n } else {\n \/\/ Fallback for browsers that don't support Web Share API\n const shareText = `${resultText} \ub2f9\uc2e0\uc740 \uc5b4\ub5a4 \uc0ac\ub78c\uc778\uac00\uc694?`;\n navigator.clipboard.writeText(shareText).then(() => {\n alert('\uacb0\uacfc\uac00 \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ub418\uc5c8\uc2b5\ub2c8\ub2e4!');\n });\n }\n }\n\n \/\/ Initialize\n updateProgress();\n <\/script>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>\ub098\ub97c \ud45c\ud604\ud558\ub294 \ud55c \ub2e8\uc5b4 \uc548\ub155\ud558\uc138\uc694! \ud83d\udc4b \uba3c\uc800 \uc774\ub984\uc744 \uc54c\ub824\uc8fc\uc2dc\uaca0\uc5b4\uc694? \uc2dc\uc791\ud558\uae30 \u2728 \ub098\ub97c \uac00\uc7a5 \uc798 \ud45c\ud604\ud558\ub294 \uac83\uc740? \uba3c\uc800 \uc5b4\ub5a4 \uc601\uc5ed\uc5d0\uc11c \ub098\ub97c \uc54c\uc544\ubcf4\uace0 \uc2f6\uc740\uc9c0 \uc120\ud0dd\ud574\uc8fc\uc138\uc694 \ud83e\udde0 \uc0ac\uace0\ubc29\uc2dd \u2764\ufe0f \uac10\uc815\ud45c\ud604 \ud83d\udc65 \uc778\uac04\uad00\uacc4 \u26a1…<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_tribe_ticket_capacity":"0","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":"","_tec_slr_enabled":"","_tec_slr_layout":""},"class_list":["post-2044","page","type-page","status-publish","hentry"],"ticketed":false,"_links":{"self":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages\/2044","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/comments?post=2044"}],"version-history":[{"count":0,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages\/2044\/revisions"}],"wp:attachment":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/media?parent=2044"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}