{"id":1775,"date":"2026-02-14T08:03:56","date_gmt":"2026-02-14T08:03:56","guid":{"rendered":"https:\/\/www.megablade.net\/?page_id=1775"},"modified":"2026-02-15T12:41:42","modified_gmt":"2026-02-15T12:41:42","slug":"elementor-1775","status":"publish","type":"page","link":"https:\/\/bodm.megablade.net\/?page_id=1775","title":{"rendered":"\ud559\uc0dd \uc720\ud615\ubcc4 \ub9de\ucda4 \uc124\uacc4"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1775\" class=\"elementor elementor-1775\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9777273 e-con-full e-flex e-con e-parent\" data-id=\"9777273\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5884528 elementor-widget elementor-widget-html\" data-id=\"5884528\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"ko\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>\ud559\uc0dd \uc720\ud615\ubcc4 \ub9de\ucda4 \uc124\uacc4 \uac00\uc774\ub4dc<\/title>\r\n    <!-- Google Fonts & Icons -->\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap\" rel=\"stylesheet\">\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n    <style>\r\n        :root {\r\n            --bg-color: #f0f2f5;\r\n            --text-color: #202124;\r\n            --card-bg: #ffffff;\r\n            \r\n            \/* 4\ub300 \uc131\uc7a5 \uc720\ud615 \uceec\ub7ec *\/\r\n            --color-basic: #EA4335;   \/* \uae30\ucd08\uc9c0\uc6d0\ud615 (Red) *\/\r\n            --color-value: #FBBC04;   \/* \uac00\uce58\uc911\uc2ec\ud615 (Yellow) *\/\r\n            --color-tech: #34A853;    \/* \uae30\uc220\uc911\uc2ec\ud615 (Green) *\/\r\n            --color-leader: #4285F4;  \/* \ud3ec\uc6a9\uc801\ub9ac\ub354\ud615 (Blue) *\/\r\n        }\r\n\r\n        * {\r\n            box-sizing: border-box;\r\n            margin: 0;\r\n            padding: 0;\r\n            font-family: 'Noto Sans KR', sans-serif;\r\n        }\r\n\r\n        body {\r\n            color: var(--text-color);\r\n            padding: 20px;\r\n        }\r\n\r\n        .container {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        \/* Header *\/\r\n        header {\r\n            text-align: center;\r\n            margin-bottom: 30px;\r\n        }\r\n\r\n        header h1 {\r\n            font-size: 2rem;\r\n            margin-bottom: 10px;\r\n            color: #333;\r\n        }\r\n\r\n        header p {\r\n            color: #666;\r\n            font-size: 1rem;\r\n        }\r\n\r\n        \/* Filter Navigation *\/\r\n        .filter-nav {\r\n            display: flex;\r\n            justify-content: center;\r\n            flex-wrap: wrap;\r\n            gap: 15px;\r\n            margin-bottom: 30px;\r\n        }\r\n\r\n        .filter-btn {\r\n            background: white;\r\n            border: 2px solid transparent;\r\n            padding: 10px 20px;\r\n            border-radius: 30px;\r\n            cursor: pointer;\r\n            font-weight: 700;\r\n            font-size: 0.95rem;\r\n            transition: all 0.3s ease;\r\n            box-shadow: 0 2px 5px rgba(0,0,0,0.05);\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            color: #555;\r\n        }\r\n\r\n        .filter-btn:hover {\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 4px 10px rgba(0,0,0,0.1);\r\n        }\r\n\r\n        .filter-btn.active {\r\n            color: white;\r\n            border-color: transparent;\r\n        }\r\n\r\n        \/* Specific Button Colors *\/\r\n        .btn-all.active { background-color: #555; }\r\n        .btn-basic.active { background-color: var(--color-basic); }\r\n        .btn-value.active { background-color: var(--color-value); color: #333; }\r\n        .btn-tech.active { background-color: var(--color-tech); }\r\n        .btn-leader.active { background-color: var(--color-leader); }\r\n\r\n        \/* Grid System *\/\r\n        .card-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(4, 1fr); \/* 4x4 Layout *\/\r\n            gap: 15px;\r\n        }\r\n\r\n        \/* Card Style *\/\r\n        .type-card {\r\n            background: var(--card-bg);\r\n            border-radius: 12px;\r\n            padding: 15px;\r\n            cursor: pointer;\r\n            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n            border: 1px solid #eee;\r\n            position: relative;\r\n            overflow: hidden;\r\n            height: 140px; \/* Fixed height for neat 4x4 *\/\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: center;\r\n            align-items: center;\r\n            text-align: center;\r\n        }\r\n\r\n        .type-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 6px;\r\n            background-color: #ccc; \/* Default *\/\r\n        }\r\n\r\n        .type-card:hover {\r\n            transform: translateY(-5px);\r\n            box-shadow: 0 10px 20px rgba(0,0,0,0.1);\r\n        }\r\n\r\n        .card-code {\r\n            font-size: 0.8rem;\r\n            color: #888;\r\n            margin-bottom: 5px;\r\n            font-family: monospace;\r\n            letter-spacing: 1px;\r\n        }\r\n\r\n        .card-name {\r\n            font-size: 1.1rem;\r\n            font-weight: 700;\r\n            color: #333;\r\n            line-height: 1.3;\r\n        }\r\n\r\n        .card-icon {\r\n            font-size: 1.5rem;\r\n            margin-bottom: 10px;\r\n            color: #ccc;\r\n        }\r\n\r\n        \/* Modal Styles *\/\r\n        .modal-overlay {\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: rgba(0,0,0,0.5);\r\n            display: none;\r\n            justify-content: center;\r\n            align-items: center;\r\n            z-index: 1000;\r\n            backdrop-filter: blur(5px);\r\n            opacity: 0;\r\n            transition: opacity 0.3s ease;\r\n        }\r\n\r\n        .modal-overlay.open {\r\n            display: flex;\r\n            opacity: 1;\r\n        }\r\n\r\n        .modal-content {\r\n            background: white;\r\n            width: 90%;\r\n            max-width: 600px;\r\n            border-radius: 20px;\r\n            padding: 0;\r\n            box-shadow: 0 10px 30px rgba(0,0,0,0.2);\r\n            transform: translateY(20px);\r\n            transition: transform 0.3s ease;\r\n            overflow: hidden;\r\n            max-height: 90vh;\r\n            overflow-y: auto;\r\n        }\r\n\r\n        .modal-overlay.open .modal-content {\r\n            transform: translateY(0);\r\n        }\r\n\r\n        .modal-header {\r\n            padding: 25px;\r\n            color: white;\r\n            position: relative;\r\n        }\r\n\r\n        .modal-close {\r\n            position: absolute;\r\n            top: 20px;\r\n            right: 20px;\r\n            background: rgba(255,255,255,0.2);\r\n            border: none;\r\n            color: white;\r\n            width: 30px;\r\n            height: 30px;\r\n            border-radius: 50%;\r\n            cursor: pointer;\r\n            font-size: 1.2rem;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            transition: background 0.2s;\r\n        }\r\n\r\n        .modal-close:hover { background: rgba(255,255,255,0.4); }\r\n\r\n        .modal-type-badge {\r\n            display: inline-block;\r\n            background: rgba(0,0,0,0.2);\r\n            padding: 5px 12px;\r\n            border-radius: 15px;\r\n            font-size: 0.85rem;\r\n            margin-bottom: 10px;\r\n            font-weight: bold;\r\n        }\r\n\r\n        .modal-title {\r\n            font-size: 1.8rem;\r\n            font-weight: 700;\r\n            margin-bottom: 5px;\r\n        }\r\n\r\n        .modal-code {\r\n            font-family: monospace;\r\n            opacity: 0.9;\r\n        }\r\n\r\n        .modal-body {\r\n            padding: 25px;\r\n        }\r\n\r\n        .info-section {\r\n            margin-bottom: 25px;\r\n        }\r\n\r\n        .info-title {\r\n            font-size: 1.1rem;\r\n            font-weight: 700;\r\n            margin-bottom: 12px;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            color: #333;\r\n        }\r\n\r\n        .info-box {\r\n            background: #f8f9fa;\r\n            padding: 15px;\r\n            border-radius: 12px;\r\n            font-size: 0.95rem;\r\n            line-height: 1.6;\r\n            color: #555;\r\n            border-left: 4px solid #ddd;\r\n        }\r\n\r\n        .strategy-list li {\r\n            margin-bottom: 10px;\r\n            padding-left: 15px;\r\n            position: relative;\r\n        }\r\n        \r\n        .strategy-list li::before {\r\n            content: \"\u2022\";\r\n            position: absolute;\r\n            left: 0;\r\n            font-weight: bold;\r\n        }\r\n\r\n        \/* Responsive *\/\r\n        @media (max-width: 900px) {\r\n            .card-grid { grid-template-columns: repeat(2, 1fr); }\r\n        }\r\n        @media (max-width: 480px) {\r\n            .card-grid { grid-template-columns: 1fr; }\r\n            .type-card { flex-direction: row; justify-content: flex-start; padding: 20px; text-align: left; gap: 15px; }\r\n            .type-card::before { width: 6px; height: 100%; }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"container\">\r\n    <header>\r\n        <h1><i class=\"fas fa-graduation-cap\"><\/i> \ud559\uc0dd \uc720\ud615\ubcc4 \ub9de\ucda4 \uc124\uacc4<\/h1>\r\n        <p>16\uac00\uc9c0 \uc720\ud615 \uc911 \ud558\ub098\ub97c \uc120\ud0dd\ud558\uc5ec \uc0c1\uc138 \uc804\ub7b5\uc744 \ud655\uc778\ud558\uc138\uc694.<\/p>\r\n    <\/header>\r\n\r\n    <!-- Filter Buttons -->\r\n    <div class=\"filter-nav\">\r\n        <button class=\"filter-btn btn-all active\" onclick=\"filterCards('all')\">\uc804\uccb4 \ubcf4\uae30<\/button>\r\n        <button class=\"filter-btn btn-basic\" onclick=\"filterCards('basic')\"><i class=\"fas fa-seedling\"><\/i> \uae30\ucd08\uc9c0\uc6d0\ud615<\/button>\r\n        <button class=\"filter-btn btn-value\" onclick=\"filterCards('value')\"><i class=\"fas fa-heart\"><\/i> \uac00\uce58\uc911\uc2ec\ud615<\/button>\r\n        <button class=\"filter-btn btn-tech\" onclick=\"filterCards('tech')\"><i class=\"fas fa-laptop-code\"><\/i> \uae30\uc220\uc911\uc2ec\ud615<\/button>\r\n        <button class=\"filter-btn btn-leader\" onclick=\"filterCards('leader')\"><i class=\"fas fa-users\"><\/i> \ud3ec\uc6a9\uc801 \ub9ac\ub354\ud615<\/button>\r\n    <\/div>\r\n\r\n    <!-- 4x4 Grid -->\r\n    <div class=\"card-grid\" id=\"cardGrid\">\r\n        <!-- Cards injected by JS -->\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- Detailed Modal -->\r\n<div class=\"modal-overlay\" id=\"modalOverlay\">\r\n    <div class=\"modal-content\">\r\n        <div class=\"modal-header\" id=\"modalHeader\">\r\n            <button class=\"modal-close\" onclick=\"closeModal()\">&times;<\/button>\r\n            <div class=\"modal-type-badge\" id=\"modalGroup\">\uc131\uc7a5 \uc720\ud615<\/div>\r\n            <h2 class=\"modal-title\" id=\"modalTitle\">\uc720\ud615 \uc774\ub984<\/h2>\r\n            <div class=\"modal-code\" id=\"modalCode\">CODE<\/div>\r\n        <\/div>\r\n        <div class=\"modal-body\">\r\n            <div class=\"info-section\">\r\n                <div class=\"info-title\"><i class=\"fas fa-user-tag\"><\/i> \ud559\uc0dd \ud2b9\uc131<\/div>\r\n                <div class=\"info-box\" id=\"modalDesc\">\ud2b9\uc131 \uc124\uba85\uc774 \ub4e4\uc5b4\uac11\ub2c8\ub2e4.<\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"info-section\">\r\n                <div class=\"info-title\" id=\"strategyTitleColor\"><i class=\"fas fa-lightbulb\"><\/i> \ub9de\ucda4 \uc124\uacc4 \uc804\ub7b5<\/div>\r\n                <div class=\"info-box\" style=\"background: white; border: 1px solid #eee;\">\r\n                    <ul class=\"strategy-list\" id=\"modalStrategy\">\r\n                        <!-- Strategy items injected -->\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"info-section\">\r\n                <div class=\"info-title\"><i class=\"fas fa-tools\"><\/i> \ucd94\ucc9c \ub3c4\uad6c \ubc0f \ud65c\ub3d9<\/div>\r\n                <div class=\"info-box\" id=\"modalTools\">\r\n                    \ub3c4\uad6c \uc124\uba85\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    \/\/ Data: 16 Types + Strategies\r\n    const typesData = [\r\n        \/* \uae30\ucd08\uc9c0\uc6d0\ud615 (Red) *\/\r\n        { code: \"L-L-L-L\", name: \"\ub514\uc9c0\ud138 \uc18c\uc678\ud615\", group: \"basic\", icon: \"fa-ban\" },\r\n        { code: \"H-L-L-L\", name: \"\ub2e8\uc21c \ub3c4\uad6c \uc0ac\uc6a9\uc790\ud615\", group: \"basic\", icon: \"fa-mouse\" },\r\n        { code: \"L-H-L-L\", name: \"\ube44\ud310\uc801 \ubc29\uad00\uc790\ud615\", group: \"basic\", icon: \"fa-eye\" },\r\n        { code: \"H-H-L-L\", name: \"\ub0c9\uc18c\uc801 \ube44\ud3c9\uac00\ud615\", group: \"basic\", icon: \"fa-comment-slash\" },\r\n\r\n        \/* \uac00\uce58\uc911\uc2ec\ud615 (Yellow) *\/\r\n        { code: \"L-L-L-H\", name: \"\ub9c9\uc5f0\ud55c \ucc3d\uc791\uc790\ud615\", group: \"value\", icon: \"fa-paint-brush\" },\r\n        { code: \"H-L-L-H\", name: \"\uae30\uc220\uc801 \ucc3d\uc791\uc790\ud615\", group: \"value\", icon: \"fa-pen-nib\" },\r\n        { code: \"L-H-L-H\", name: \"\ube44\ud310\uc801 \ucc3d\uc791\uc790\ud615\", group: \"value\", icon: \"fa-pencil-ruler\" },\r\n        { code: \"H-H-L-H\", name: \"\uc720\ub2a5\ud55c \ubb34\uc784\uc2b9\ucc28\ud615\", group: \"value\", icon: \"fa-user-clock\" },\r\n\r\n        \/* \uae30\uc220\uc911\uc2ec\ud615 (Green) *\/\r\n        { code: \"L-L-H-L\", name: \"\ubaa8\ubc94\uc801 \ud559\uc2b5\uc790\ud615\", group: \"tech\", icon: \"fa-book-reader\" },\r\n        { code: \"H-L-H-L\", name: \"\uc548\uc804\ud55c \uc0ac\uc6a9\uc790\ud615\", group: \"tech\", icon: \"fa-shield-alt\" },\r\n        { code: \"L-H-H-L\", name: \"\uc120\ud55c \uc774\ub860\uac00\ud615\", group: \"tech\", icon: \"fa-chalkboard-teacher\" },\r\n        { code: \"H-H-H-L\", name: \"\uc720\ub2a5\ud55c \uac1c\uc778\uc8fc\uc758\ud615\", group: \"tech\", icon: \"fa-user-astronaut\" },\r\n\r\n        \/* \ud3ec\uc6a9\uc801 \ub9ac\ub354\ud615 (Blue) *\/\r\n        { code: \"L-L-H-H\", name: \"\uc131\uc2e4\ud55c \ud611\ub825\uc790\ud615\", group: \"leader\", icon: \"fa-hands-helping\" },\r\n        { code: \"H-L-H-H\", name: \"\uc724\ub9ac\uc801 \uc2e4\ud589\uac00\ud615\", group: \"leader\", icon: \"fa-balance-scale\" },\r\n        { code: \"L-H-H-H\", name: \"\uc7a0\uc7ac\uc801 \ub9ac\ub354\ud615\", group: \"leader\", icon: \"fa-user-graduate\" },\r\n        { code: \"H-H-H-H\", name: \"\ud3ec\uc6a9\uc801 \ub9ac\ub354\ud615\", group: \"leader\", icon: \"fa-globe\" }\r\n    ];\r\n\r\n    \/\/ Detailed Content Mapping\r\n    const groupDetails = {\r\n        \"basic\": {\r\n            name: \"\uae30\ucd08\uc9c0\uc6d0\ud615\",\r\n            color: \"#EA4335\",\r\n            desc: \"\ub514\uc9c0\ud138 \uae30\uc220 \ud65c\uc6a9 \ub2a5\ub825\uacfc \ud0dc\ub3c4\uac00 \ubaa8\ub450 \uc131\uc7a5 \ub2e8\uacc4\uc5d0 \uc788\uc2b5\ub2c8\ub2e4. \ud559\uc2b5 \uc774\uc804\uc5d0 '\ud765\ubbf8'\uc640 '\ud544\uc694\uc131'\uc744 \uba3c\uc800 \ub290\ub07c\uac8c \ud574\uc8fc\ub294 \uac83\uc774 \ud575\uc2ec\uc785\ub2c8\ub2e4.\",\r\n            strategies: [\r\n                \"<strong>[\ud765\ubbf8 \uc720\ubc1c]<\/strong> \uc624\ud1a0\ub4dc\ub85c\uc6b0(AutoDraw), \ud035\ub4dc\ub85c\uc6b0\ucc98\ub7fc \uc870\uc791\uc774 \uc27d\uace0 \uacb0\uacfc\ubb3c\uc774 \uc989\uac01\uc801\uc778 \ub3c4\uad6c \ud65c\uc6a9\",\r\n                \"<strong>[\uc131\uacf5 \uacbd\ud5d8]<\/strong> \uc544\uc8fc \uc791\uc740 \uacfc\uc81c\ubd80\ud130 \uc2dc\uc791\ud558\uc5ec '\ub098\ub3c4 \ud560 \uc218 \uc788\ub2e4'\ub294 \ud6a8\ub2a5\uac10 \uc2ec\uc5b4\uc8fc\uae30\",\r\n                \"<strong>[\ud544\uc694\uc131 \uc778\uc2dd]<\/strong> \uc2e4\uc0dd\ud65c\uacfc \uc5f0\uacc4\ub41c \uc26c\uc6b4 \uc608\uc2dc\ub85c \ub514\uc9c0\ud138\uc758 \uc720\uc6a9\uc131 \uccb4\ud5d8\"\r\n            ],\r\n            tools: \"AutoDraw, QuickDraw, \ud22c\ub2dd(Tooning) \ub4f1 \uc9c1\uad00\uc801\uc778 \ucc3d\uc791 \ub3c4\uad6c\"\r\n        },\r\n        \"value\": {\r\n            name: \"\uac00\uce58\uc911\uc2ec\ud615\",\r\n            color: \"#FBBC04\",\r\n            textColor: \"#333\", \/\/ Yellow needs dark text\r\n            desc: \"\ub514\uc9c0\ud138 \uc724\ub9ac\uc640 \ud0dc\ub3c4\ub294 \ud6cc\ub96d\ud558\uc9c0\ub9cc \uae30\uc220\uc801 \ud65c\uc6a9\uc5d0 \uc5b4\ub824\uc6c0\uc744 \uacaa\uc2b5\ub2c8\ub2e4. \uae30\uc220\uc801 \uc131\uacf5 \uacbd\ud5d8\uc744 \uc313\ub3c4\ub85d \uaca9\ub824\uac00 \ud544\uc694\ud569\ub2c8\ub2e4.\",\r\n            strategies: [\r\n                \"<strong>[\ucc44\uc6c0\uc9dd\uafcd \ud29c\ud130\ub9c1]<\/strong> '\ub514\uc9c0\ud138 \ubcf4\uc548\uad00' \uc5ed\ud560\uc744 \ub9e1\uaca8 \uc62c\ubc14\ub978 \uc0ac\uc6a9\ubc95\uc744 \uc810\uac80\ud558\uba70 \uc790\uc874\uac10 \ud5a5\uc0c1\",\r\n                \"<strong>[\uae30\ub2a5 \ubcf4\uc644]<\/strong> \uce94\ubc14(Canva) \ub4f1\uc758 \ud15c\ud50c\ub9bf \ub3c4\uad6c\ub97c \ud65c\uc6a9\ud558\uc5ec \uae30\uc220\uc801 \ubd80\uc871\ud568\uc744 \ubcf4\uc644\ud558\uace0 \uacb0\uacfc\ubb3c\uc758 \uc9c8 \ud5a5\uc0c1\",\r\n                \"<strong>[\uaca9\ub824\uc640 \uc9c0\uc9c0]<\/strong> \uae30\uc220\uc801 \uc2e4\uc218\ubcf4\ub2e4 \uc62c\ubc14\ub978 \ud0dc\ub3c4\ub97c \uce6d\ucc2c\ud558\uc5ec \ud559\uc2b5 \ub3d9\uae30 \ubd80\uc5ec\"\r\n            ],\r\n            tools: \"Canva(\ud15c\ud50c\ub9bf \ud65c\uc6a9), \ubbf8\ub9ac\uce94\ubc84\uc2a4, \ud328\ub4e4\ub81b(\uc758\uacac \uacf5\uc720)\"\r\n        },\r\n        \"tech\": {\r\n            name: \"\uae30\uc220\uc911\uc2ec\ud615\",\r\n            color: \"#34A853\",\r\n            desc: \"\uae30\uc220 \uc2b5\ub4dd\ub825\uacfc \ud638\uae30\uc2ec\uc740 \ub6f0\uc5b4\ub098\uc9c0\ub9cc \uc724\ub9ac\uc801 \uc758\uc2dd\uc774 \ubd80\uc871\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uae30\uc220\uc758 \uc704\ud5d8\uc131\uc744 \uc778\uc9c0\ud558\uace0 \uc62c\ubc14\ub974\uac8c \uc0ac\uc6a9\ud558\ub294 \ubc95\uc744 \ubc30\uc6cc\uc57c \ud569\ub2c8\ub2e4.\",\r\n            strategies: [\r\n                \"<strong>[\uc9d1\uc911 \uc724\ub9ac \uad50\uc721]<\/strong> \uc800\uc791\uad8c, \uac1c\uc778\uc815\ubcf4, \uc815\ubcf4 \ud3b8\ud5a5\uc131 \ub4f1 '\ub514\uc9c0\ud138 \uc2dc\ubbfc\uc131' \uad50\uc721 \uac15\ud654\",\r\n                \"<strong>[\uacfc\uc81c \ub09c\uc774\ub3c4 \uc870\uc808]<\/strong> \ub108\ubb34 \uc26c\uc6b4 \uacfc\uc81c\ub294 \uc9c0\uc591\ud558\uace0, \ub3c4\uc804\uc801\uc778 \uacfc\uc81c\ub97c \uc81c\uc2dc\ud558\uc5ec \ubab0\uc785 \uc720\ub3c4\",\r\n                \"<strong>[\uc0ac\ud68c\uc801 \ucc45\uc784]<\/strong> \uc790\uc2e0\uc758 \uae30\uc220\uc744 \uce5c\uad6c\ub97c \ub3d5\uac70\ub098 \ud559\uae09\uc5d0 \uae30\uc5ec\ud558\ub294 \ub370 \uc0ac\uc6a9\ud558\ub3c4\ub85d \uc720\ub3c4\"\r\n            ],\r\n            tools: \"\uc5d4\ud2b8\ub9ac(\ubcf5\uc7a1\ud55c \ucf54\ub529), AI \uc724\ub9ac \ub51c\ub808\ub9c8 \ud1a0\ub860, \ub370\uc774\ud130 \ud3b8\ud5a5\uc131 \ubd84\uc11d \ub3c4\uad6c\"\r\n        },\r\n        \"leader\": {\r\n            name: \"\ud3ec\uc6a9\uc801 \ub9ac\ub354\ud615\",\r\n            color: \"#4285F4\",\r\n            desc: \"\uae30\uc220\uc801 \uc5ed\ub7c9\uacfc \uc724\ub9ac\uc801 \ud0dc\ub3c4\ub97c \ubaa8\ub450 \uac16\ucd98 \uc720\ud615\uc785\ub2c8\ub2e4. \uc790\uc2e0\uc758 \uc5ed\ub7c9\uc744 \uc2ec\ud654\ud558\uace0 \uc0ac\ud68c\uc5d0 \uae30\uc5ec\ud560 \uc218 \uc788\ub294 \uae30\ud68c\ub97c \uc81c\uacf5\ud574\uc57c \ud569\ub2c8\ub2e4.\",\r\n            strategies: [\r\n                \"<strong>[\uc790\uc728\uc131 \ubcf4\uc7a5]<\/strong> \ud504\ub85c\uc81d\ud2b8\uc758 \uc8fc\uc81c\ubd80\ud130 \ub3c4\uad6c \uc120\ud0dd\uae4c\uc9c0 \ud559\uc0dd\uc5d0\uac8c \uc8fc\ub3c4\uad8c(Choice) \ubd80\uc5ec\",\r\n                \"<strong>[\uc0ac\ud68c \uae30\uc5ec \ud504\ub85c\uc81d\ud2b8]<\/strong> \ud559\uad50\ub098 \uc9c0\uc5ed\uc0ac\ud68c\uc758 \ubb38\uc81c\ub97c \ud574\uacb0\ud558\ub294 PBL(\ud504\ub85c\uc81d\ud2b8 \uc218\uc5c5) \ub9ac\ub529\",\r\n                \"<strong>[\uba58\ud1a0\ub9c1 \ub9ac\ub354\uc2ed]<\/strong> \ub2e4\ub978 \uce5c\uad6c\ub4e4\uc744 \ub3d5\ub294 \uba58\ud1a0 \uc5ed\ud560\uc744 \uc218\ud589\ud558\uba70 \ud3ec\uc6a9\uc801 \ub9ac\ub354\uc2ed \ud568\uc591\"\r\n            ],\r\n            tools: \"\ub178\uc158(Notion, \ud3ec\ud2b8\ud3f4\ub9ac\uc624), \uace0\uae09 \uc601\uc0c1 \ud3b8\uc9d1, \uc0dd\uc131\ud615 AI(\uc2ec\ud654 \ud65c\uc6a9)\"\r\n        }\r\n    };\r\n\r\n    \/\/ Render Grid\r\n    const grid = document.getElementById('cardGrid');\r\n\r\n    function renderGrid(filterGroup) {\r\n        grid.innerHTML = '';\r\n        const filteredData = filterGroup === 'all' \r\n            ? typesData \r\n            : typesData.filter(d => d.group === filterGroup);\r\n\r\n        filteredData.forEach(item => {\r\n            const groupInfo = groupDetails[item.group];\r\n            const card = document.createElement('div');\r\n            card.className = 'type-card';\r\n            \/\/ Set styles dynamically\r\n            card.style.setProperty('--hover-color', groupInfo.color); \/\/ For JS hover effect logic if needed\r\n            \r\n            \/\/ Inline style for top border color\r\n            const borderStyle = document.createElement('style');\r\n            borderStyle.innerHTML = `#card-${item.code}::before { background-color: ${groupInfo.color}; }`;\r\n            card.id = `card-${item.code}`;\r\n            card.appendChild(borderStyle);\r\n\r\n            card.innerHTML += `\r\n                <i class=\"fas ${item.icon} card-icon\"><\/i>\r\n                <div class=\"card-code\">${item.code}<\/div>\r\n                <div class=\"card-name\">${item.name}<\/div>\r\n            `;\r\n            \r\n            card.onclick = () => openModal(item);\r\n            grid.appendChild(card);\r\n        });\r\n    }\r\n\r\n    \/\/ Filter Logic\r\n    function filterCards(group) {\r\n        \/\/ Update Buttons\r\n        document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));\r\n        document.querySelector(`.filter-btn.btn-${group}`).classList.add('active');\r\n        \r\n        \/\/ Render\r\n        renderGrid(group);\r\n    }\r\n\r\n    \/\/ Modal Logic\r\n    const modal = document.getElementById('modalOverlay');\r\n    \r\n    function openModal(item) {\r\n        const info = groupDetails[item.group];\r\n        \r\n        \/\/ Header Style\r\n        const header = document.getElementById('modalHeader');\r\n        header.style.backgroundColor = info.color;\r\n        if(item.group === 'value') header.style.color = '#333'; \/\/ Adjust text color for yellow bg\r\n        else header.style.color = 'white';\r\n\r\n        document.querySelector('.modal-close').style.color = (item.group === 'value') ? '#333' : 'white';\r\n\r\n        \/\/ Content Population\r\n        document.getElementById('modalGroup').innerText = info.name;\r\n        document.getElementById('modalTitle').innerText = item.name;\r\n        document.getElementById('modalCode').innerText = `\uc720\ud615\ucf54\ub4dc: ${item.code}`;\r\n        \r\n        document.getElementById('modalDesc').innerText = info.desc;\r\n        document.getElementById('modalTools').innerText = info.tools;\r\n\r\n        \/\/ Strategy List\r\n        const strategyList = document.getElementById('modalStrategy');\r\n        strategyList.innerHTML = info.strategies.map(s => `<li>${s}<\/li>`).join('');\r\n        \r\n        \/\/ Strategy Title Color\r\n        document.getElementById('strategyTitleColor').style.color = info.color;\r\n\r\n        \/\/ Open\r\n        modal.classList.add('open');\r\n        document.body.style.overflow = 'hidden'; \/\/ Prevent background scrolling\r\n    }\r\n\r\n    function closeModal() {\r\n        modal.classList.remove('open');\r\n        document.body.style.overflow = 'auto';\r\n    }\r\n\r\n    \/\/ Close on outside click\r\n    modal.addEventListener('click', (e) => {\r\n        if (e.target === modal) closeModal();\r\n    });\r\n\r\n    \/\/ Initial Render\r\n    renderGrid('all');\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\ud559\uc0dd \uc720\ud615\ubcc4 \ub9de\ucda4 \uc124\uacc4 \uac00\uc774\ub4dc \ud559\uc0dd \uc720\ud615\ubcc4 \ub9de\ucda4 \uc124\uacc4 16\uac00\uc9c0 \uc720\ud615 \uc911 \ud558\ub098\ub97c \uc120\ud0dd\ud558\uc5ec \uc0c1\uc138 \uc804\ub7b5\uc744 \ud655\uc778\ud558\uc138\uc694. \uc804\uccb4 \ubcf4\uae30 \uae30\ucd08\uc9c0\uc6d0\ud615 \uac00\uce58\uc911\uc2ec\ud615 \uae30\uc220\uc911\uc2ec\ud615 \ud3ec\uc6a9\uc801 \ub9ac\ub354\ud615 &times; \uc131\uc7a5 \uc720\ud615 \uc720\ud615 \uc774\ub984 CODE \ud559\uc0dd \ud2b9\uc131 \ud2b9\uc131 \uc124\uba85\uc774 \ub4e4\uc5b4\uac11\ub2c8\ub2e4. \ub9de\ucda4 \uc124\uacc4 \uc804\ub7b5 \ucd94\ucc9c \ub3c4\uad6c \ubc0f \ud65c\ub3d9 \ub3c4\uad6c \uc124\uba85<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1775","page","type-page","status-publish","hentry"],"blocksy_meta":[],"acf":[],"_links":{"self":[{"href":"https:\/\/bodm.megablade.net\/index.php?rest_route=\/wp\/v2\/pages\/1775","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bodm.megablade.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bodm.megablade.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bodm.megablade.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bodm.megablade.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1775"}],"version-history":[{"count":0,"href":"https:\/\/bodm.megablade.net\/index.php?rest_route=\/wp\/v2\/pages\/1775\/revisions"}],"wp:attachment":[{"href":"https:\/\/bodm.megablade.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}