{"id":962,"date":"2026-05-15T23:14:17","date_gmt":"2026-05-15T14:14:17","guid":{"rendered":"https:\/\/wizardofcode.kr\/?page_id=962"},"modified":"2026-05-16T18:06:41","modified_gmt":"2026-05-16T09:06:41","slug":"aboutus","status":"publish","type":"page","link":"https:\/\/wizardofcode.kr\/?page_id=962","title":{"rendered":"Our Story"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"962\" class=\"elementor elementor-962\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3837895 e-flex e-con-boxed e-con e-parent\" data-id=\"3837895\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b02c909 elementor-widget elementor-widget-heading\" data-id=\"b02c909\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Our Story<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4da1209 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"4da1209\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c12b3f5 e-flex e-con-boxed e-con e-parent\" data-id=\"c12b3f5\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9785d62 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"9785d62\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;900&display=swap\" rel=\"stylesheet\">\n<style>\n  :root {\n    --dark: #101820;\n    --dark-accent: #1a2332;\n    --light-bg: #F5F5F7;\n    --white: #ffffff;\n    --text-primary: #1d1d1f;\n    --text-secondary: #6e6e73;\n    --text-muted: #86868b;\n    --accent-blue: #0071E3;\n    --accent-blue-hover: #0077ED;\n    --kakao-yellow: #FEE500;\n    --kakao-text: #000000;\n    --card-shadow: 0 2px 12px rgba(0,0,0,0.06);\n    --card-shadow-hover: 0 8px 30px rgba(0,0,0,0.1);\n    --border-radius: 18px;\n    --section-padding: 100px 24px;\n    --max-width: 980px;\n  }\n\n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n\n  body {\n    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;\n    color: var(--text-primary);\n    background: var(--white);\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    overflow-x: hidden;\n  }\n\n  .section {\n    padding: var(--section-padding);\n  }\n\n  .container {\n    max-width: var(--max-width);\n    margin: 0 auto;\n  }\n\n  \/* ========== HERO ========== *\/\n  .hero {\n    background: var(--dark);\n    color: var(--white);\n    padding: 120px 24px 100px;\n    text-align: center;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .hero::before {\n    content: '';\n    position: absolute;\n    top: -50%;\n    left: -50%;\n    width: 200%;\n    height: 200%;\n    background: radial-gradient(ellipse at 30% 50%, rgba(0, 113, 227, 0.08) 0%, transparent 60%),\n                radial-gradient(ellipse at 70% 50%, rgba(0, 113, 227, 0.05) 0%, transparent 50%);\n    animation: heroGlow 8s ease-in-out infinite alternate;\n  }\n\n  @keyframes heroGlow {\n    0% { transform: translate(0, 0) scale(1); }\n    100% { transform: translate(-2%, 1%) scale(1.02); }\n  }\n\n  .hero .container {\n    position: relative;\n    z-index: 1;\n  }\n\n  .hero-eyebrow {\n    font-size: 14px;\n    font-weight: 500;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    color: var(--accent-blue);\n    margin-bottom: 28px;\n    opacity: 0;\n    animation: fadeUp 0.8s ease forwards 0.2s;\n  }\n\n  .hero h1 {\n    font-size: clamp(32px, 6vw, 56px);\n    font-weight: 700;\n    line-height: 1.25;\n    margin-bottom: 28px;\n    opacity: 0;\n    animation: fadeUp 0.8s ease forwards 0.4s;\n    color: white;\n  }\n\n  .hero h1 span {\n    display: block;\n  }\n\n  .hero-sub {\n    font-size: clamp(16px, 2.5vw, 20px);\n    font-weight: 300;\n    color: rgba(255,255,255,0.7);\n    line-height: 1.7;\n    max-width: 520px;\n    margin: 0 auto;\n    opacity: 0;\n    animation: fadeUp 0.8s ease forwards 0.6s;\n  }\n\n  @keyframes fadeUp {\n    from { opacity: 0; transform: translateY(24px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n\n  \/* ========== PAIN POINTS ========== *\/\n  .pain {\n    background: var(--white);\n    padding: 100px 24px;\n  }\n\n  .pain h2 {\n    font-size: clamp(26px, 4vw, 40px);\n    font-weight: 700;\n    text-align: center;\n    margin-bottom: 56px;\n    color: var(--text-primary);\n  }\n\n  .pain-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n    gap: 20px;\n    max-width: 860px;\n    margin: 0 auto 56px;\n  }\n\n  .pain-card {\n    background: var(--light-bg);\n    border-radius: 14px;\n    padding: 28px 24px;\n    position: relative;\n    transition: transform 0.25s ease, box-shadow 0.25s ease;\n  }\n\n  .pain-card:hover {\n    transform: translateY(-2px);\n    box-shadow: var(--card-shadow-hover);\n  }\n\n  .pain-card::before {\n    content: '\"';\n    position: absolute;\n    top: 12px;\n    left: 20px;\n    font-size: 48px;\n    font-weight: 900;\n    color: rgba(0,0,0,0.06);\n    line-height: 1;\n  }\n\n  .pain-card p {\n    font-size: 15px;\n    line-height: 1.6;\n    color: var(--text-secondary);\n    font-weight: 400;\n  }\n\n  .pain-bottom {\n    text-align: center;\n    max-width: 560px;\n    margin: 0 auto;\n  }\n\n  .pain-bottom p {\n    font-size: 18px;\n    line-height: 1.8;\n    color: var(--text-secondary);\n  }\n\n  .pain-bottom strong {\n    color: var(--text-primary);\n    font-weight: 600;\n  }\n\n  .highlight-text {\n    display: inline;\n    background: linear-gradient(transparent 60%, rgba(0,113,227,0.12) 60%);\n  }\n\n  \/* ========== SERVICES ========== *\/\n  .services {\n    background: var(--light-bg);\n    padding: 100px 24px;\n  }\n\n  .services h2 {\n    font-size: clamp(26px, 4vw, 40px);\n    font-weight: 700;\n    text-align: center;\n    margin-bottom: 16px;\n    color: var(--text-primary);\n  }\n\n  .services-subtitle {\n    text-align: center;\n    color: var(--text-secondary);\n    font-size: 17px;\n    margin-bottom: 64px;\n  }\n\n  .service-list {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 32px;\n    max-width: 860px;\n    margin: 0 auto;\n  }\n\n  .service-item {\n    display: grid;\n    grid-template-columns: 72px 1fr;\n    gap: 24px;\n    align-items: start;\n    background: var(--white);\n    border-radius: var(--border-radius);\n    padding: 40px 36px;\n    box-shadow: var(--card-shadow);\n    transition: transform 0.25s ease, box-shadow 0.25s ease;\n  }\n\n  .service-item:hover {\n    transform: translateY(-3px);\n    box-shadow: var(--card-shadow-hover);\n  }\n\n  .service-icon {\n    width: 72px;\n    height: 72px;\n    border-radius: 16px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 32px;\n    flex-shrink: 0;\n  }\n\n  .service-icon.order { background: #E8F5E9; }\n  .service-icon.notify { background: #FFF8E1; }\n  .service-icon.auto { background: #E3F2FD; }\n  .service-icon.seo { background: #F3E5F5; }\n\n  .service-content h3 {\n    font-size: 20px;\n    font-weight: 600;\n    margin-bottom: 10px;\n    color: var(--text-primary);\n  }\n\n  .service-content p {\n    font-size: 15px;\n    line-height: 1.75;\n    color: var(--text-secondary);\n  }\n\n  \/* ========== CARE SUBSCRIPTION ========== *\/\n  .care {\n    background: var(--white);\n    padding: 100px 24px;\n  }\n\n  .care h2 {\n    font-size: clamp(26px, 4vw, 40px);\n    font-weight: 700;\n    text-align: center;\n    margin-bottom: 16px;\n  }\n\n  .care-subtitle {\n    text-align: center;\n    color: var(--text-secondary);\n    font-size: 17px;\n    margin-bottom: 64px;\n    max-width: 480px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  .care-grid {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 20px;\n    max-width: 860px;\n    margin: 0 auto 56px;\n  }\n\n  @media (max-width: 860px) {\n    .care-grid {\n      grid-template-columns: repeat(2, 1fr);\n    }\n  }\n\n  .care-card {\n    background: var(--light-bg);\n    border-radius: 14px;\n    padding: 32px 24px;\n    text-align: center;\n    transition: transform 0.25s ease;\n  }\n\n  .care-card:hover {\n    transform: translateY(-2px);\n  }\n\n  .care-card-icon {\n    font-size: 36px;\n    margin-bottom: 16px;\n  }\n\n  .care-card h4 {\n    font-size: 16px;\n    font-weight: 600;\n    margin-bottom: 8px;\n    color: var(--text-primary);\n  }\n\n  .care-card p {\n    font-size: 14px;\n    color: var(--text-secondary);\n    line-height: 1.6;\n  }\n\n  .care-trust {\n    text-align: center;\n    max-width: 520px;\n    margin: 0 auto;\n    padding: 32px;\n    background: var(--dark);\n    color: var(--white);\n    border-radius: var(--border-radius);\n  }\n\n  .care-trust p {\n    font-size: 17px;\n    line-height: 1.8;\n    font-weight: 300;\n  }\n\n  .care-trust strong {\n    font-weight: 600;\n    color: var(--accent-blue);\n  }\n\n  \/* ========== STATS ========== *\/\n  .stats {\n    background: var(--light-bg);\n    padding: 100px 24px;\n  }\n\n  .stats h2 {\n    font-size: clamp(26px, 4vw, 40px);\n    font-weight: 700;\n    text-align: center;\n    margin-bottom: 12px;\n  }\n\n  .stats-subtitle {\n    text-align: center;\n    color: var(--text-secondary);\n    font-size: 17px;\n    margin-bottom: 56px;\n  }\n\n  .stats-hero {\n    background: var(--dark);\n    color: var(--white);\n    border-radius: var(--border-radius);\n    padding: 56px 32px;\n    text-align: center;\n    max-width: 720px;\n    margin: 0 auto 32px;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .stats-hero::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: radial-gradient(ellipse at 50% 0%, rgba(0,113,227,0.18) 0%, transparent 70%);\n  }\n\n  .stats-hero-number {\n    font-size: clamp(64px, 10vw, 96px);\n    font-weight: 800;\n    line-height: 1;\n    color: var(--white);\n    margin-bottom: 16px;\n    position: relative;\n    z-index: 1;\n    letter-spacing: -0.02em;\n  }\n\n  .stats-hero-label {\n    font-size: clamp(18px, 2.5vw, 22px);\n    font-weight: 500;\n    color: rgba(255,255,255,0.9);\n    margin-bottom: 8px;\n    position: relative;\n    z-index: 1;\n  }\n\n  .stats-hero-sub {\n    font-size: 14px;\n    color: var(--accent-blue);\n    font-weight: 500;\n    letter-spacing: 1px;\n    position: relative;\n    z-index: 1;\n  }\n\n  .stats-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 20px;\n    max-width: 720px;\n    margin: 0 auto;\n  }\n\n  .stats-card {\n    background: var(--white);\n    border-radius: 14px;\n    padding: 32px 20px;\n    text-align: center;\n    box-shadow: var(--card-shadow);\n    transition: transform 0.25s ease, box-shadow 0.25s ease;\n  }\n\n  .stats-card:hover {\n    transform: translateY(-2px);\n    box-shadow: var(--card-shadow-hover);\n  }\n\n  .stats-card-number {\n    font-size: clamp(32px, 5vw, 44px);\n    font-weight: 700;\n    color: var(--text-primary);\n    line-height: 1;\n    margin-bottom: 10px;\n    letter-spacing: -0.01em;\n  }\n\n  .stats-card-label {\n    font-size: 14px;\n    color: var(--text-secondary);\n    font-weight: 500;\n    line-height: 1.4;\n  }\n\n  \/* ========== SERIES ========== *\/\n  .series {\n    background: var(--white);\n    padding: 100px 24px;\n  }\n\n  .series h2 {\n    font-size: clamp(26px, 4vw, 40px);\n    font-weight: 700;\n    text-align: center;\n    margin-bottom: 12px;\n    line-height: 1.3;\n  }\n\n  .series-subtitle {\n    text-align: center;\n    color: var(--text-secondary);\n    font-size: 17px;\n    margin-bottom: 64px;\n    max-width: 520px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  .series-grid {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 24px;\n    max-width: 860px;\n    margin: 0 auto 48px;\n  }\n\n  .series-card {\n    background: var(--light-bg);\n    border-radius: var(--border-radius);\n    padding: 40px 32px;\n    transition: transform 0.25s ease, box-shadow 0.25s ease;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .series-card:hover {\n    transform: translateY(-3px);\n    box-shadow: var(--card-shadow-hover);\n    background: var(--white);\n  }\n\n  .series-card::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 4px;\n  }\n\n  .series-card.shop::after { background: #4CAF50; }\n  .series-card.ai::after { background: #9C27B0; }\n  .series-card.biz::after { background: #2196F3; }\n  .series-card.module::after { background: #FF9800; }\n\n  .series-card-icon {\n    font-size: 40px;\n    margin-bottom: 18px;\n    line-height: 1;\n  }\n\n  .series-card h3 {\n    font-size: 22px;\n    font-weight: 700;\n    color: var(--text-primary);\n    margin-bottom: 10px;\n  }\n\n  .series-card-count {\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--accent-blue);\n    margin-bottom: 14px;\n  }\n\n  .series-card p {\n    font-size: 14px;\n    line-height: 1.7;\n    color: var(--text-secondary);\n  }\n\n  .series-cta-wrap {\n    text-align: center;\n  }\n\n  .series-cta {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 14px 32px;\n    background: transparent;\n    color: var(--accent-blue);\n    border: 2px solid var(--accent-blue);\n    border-radius: 12px;\n    font-size: 16px;\n    font-weight: 600;\n    text-decoration: none;\n    transition: all 0.25s ease;\n  }\n\n  .series-cta:hover {\n    background: var(--accent-blue);\n    color: var(--white);\n    transform: translateY(-2px);\n    box-shadow: 0 6px 24px rgba(0, 113, 227, 0.25);\n  }\n\n  \/* ========== PORTFOLIO ========== *\/\n  .portfolio {\n    background: var(--light-bg);\n    padding: 100px 24px;\n  }\n\n  .portfolio h2 {\n    font-size: clamp(26px, 4vw, 40px);\n    font-weight: 700;\n    text-align: center;\n    margin-bottom: 64px;\n  }\n\n  .portfolio-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n    gap: 24px;\n    max-width: 860px;\n    margin: 0 auto;\n  }\n\n  .portfolio-card {\n    background: var(--white);\n    border-radius: var(--border-radius);\n    padding: 36px 28px;\n    box-shadow: var(--card-shadow);\n    transition: transform 0.25s ease, box-shadow 0.25s ease;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .portfolio-card:hover {\n    transform: translateY(-3px);\n    box-shadow: var(--card-shadow-hover);\n  }\n\n  .portfolio-card::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 4px;\n  }\n\n  .portfolio-card:nth-child(1)::after { background: #4CAF50; }\n  .portfolio-card:nth-child(2)::after { background: #FF9800; }\n  .portfolio-card:nth-child(3)::after { background: #2196F3; }\n  .portfolio-card:nth-child(4)::after { background: #9C27B0; }\n  .portfolio-card:nth-child(5)::after { background: #FF5722; }\n\n  .portfolio-tag {\n    display: inline-block;\n    font-size: 12px;\n    font-weight: 500;\n    padding: 4px 10px;\n    border-radius: 6px;\n    margin-bottom: 14px;\n  }\n\n  .portfolio-card:nth-child(1) .portfolio-tag { background: #E8F5E9; color: #2E7D32; }\n  .portfolio-card:nth-child(2) .portfolio-tag { background: #FFF3E0; color: #E65100; }\n  .portfolio-card:nth-child(3) .portfolio-tag { background: #E3F2FD; color: #1565C0; }\n  .portfolio-card:nth-child(4) .portfolio-tag { background: #F3E5F5; color: #7B1FA2; }\n  .portfolio-card:nth-child(5) .portfolio-tag { background: #FBE9E7; color: #BF360C; }\n\n  .portfolio-card h3 {\n    font-size: 20px;\n    font-weight: 600;\n    margin-bottom: 8px;\n  }\n\n  .portfolio-card .portfolio-desc {\n    font-size: 14px;\n    color: var(--text-muted);\n    margin-bottom: 16px;\n  }\n\n  .portfolio-card p:last-child {\n    font-size: 14px;\n    line-height: 1.7;\n    color: var(--text-secondary);\n  }\n\n  \/* ========== CTA ========== *\/\n  .cta {\n    background: var(--dark);\n    color: var(--white);\n    padding: 100px 24px;\n    text-align: center;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .cta::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: radial-gradient(ellipse at 50% 0%, rgba(0,113,227,0.1) 0%, transparent 70%);\n  }\n\n  .cta .container {\n    position: relative;\n    z-index: 1;\n  }\n\n  .cta h2 {\n    font-size: clamp(28px, 5vw, 44px);\n    font-weight: 700;\n    margin-bottom: 20px;\n  }\n\n  .cta-desc {\n    font-size: 17px;\n    color: rgba(255,255,255,0.6);\n    line-height: 1.8;\n    margin-bottom: 12px;\n    font-weight: 300;\n  }\n\n  .cta-note {\n    font-size: 14px;\n    color: rgba(255,255,255,0.4);\n    margin-bottom: 40px;\n  }\n\n  .cta-buttons {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 14px;\n    flex-wrap: wrap;\n  }\n\n  .btn-estimate,\n  .btn-kakao {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n    border: none;\n    padding: 16px 36px;\n    border-radius: 12px;\n    font-size: 17px;\n    font-weight: 600;\n    font-family: inherit;\n    cursor: pointer;\n    text-decoration: none;\n    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;\n  }\n\n  .btn-estimate {\n    background: var(--accent-blue);\n    color: var(--white);\n  }\n\n  .btn-estimate:hover {\n    background: var(--accent-blue-hover);\n    color: #fff;\n    transform: translateY(-2px);\n    box-shadow: 0 6px 24px rgba(0, 113, 227, 0.32);\n  }\n  .btn-estimate,\n  .btn-estimate:hover,\n  .btn-estimate:visited {\n    color:#fff;\n  }\n\n  .btn-kakao {\n    background: var(--kakao-yellow);\n    color: var(--kakao-text);\n  }\n\n  .btn-kakao:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 6px 24px rgba(254, 229, 0, 0.3);\n  }\n\n  .btn-estimate svg,\n  .btn-kakao svg {\n    width: 22px;\n    height: 22px;\n  }\n\n  .cta-contact {\n    margin-top: 36px;\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    align-items: center;\n  }\n\n  .cta-contact a,\n  .cta-contact span {\n    font-size: 15px;\n    color: rgba(255,255,255,0.45);\n    text-decoration: none;\n    transition: color 0.2s;\n  }\n\n  .cta-contact a:hover {\n    color: rgba(255,255,255,0.8);\n  }\n\n  \/* ========== SCROLL ANIMATIONS ========== *\/\n  .reveal {\n    opacity: 0;\n    transform: translateY(32px);\n    transition: opacity 0.7s ease, transform 0.7s ease;\n  }\n\n  .reveal.visible {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  .reveal.visible.clwhite {\n    color: white;\n  }\n\n\n  \/* Stagger children *\/\n  .stagger-children .reveal:nth-child(1) { transition-delay: 0.05s; }\n  .stagger-children .reveal:nth-child(2) { transition-delay: 0.1s; }\n  .stagger-children .reveal:nth-child(3) { transition-delay: 0.15s; }\n  .stagger-children .reveal:nth-child(4) { transition-delay: 0.2s; }\n  .stagger-children .reveal:nth-child(5) { transition-delay: 0.25s; }\n\n  \/* ========== BACK TO TOP \/ NAV ========== *\/\n  .back-link {\n    position: fixed;\n    bottom: 28px;\n    right: 28px;\n    width: 48px;\n    height: 48px;\n    background: var(--dark);\n    color: var(--white);\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    text-decoration: none;\n    font-size: 20px;\n    box-shadow: 0 4px 16px rgba(0,0,0,0.2);\n    opacity: 0;\n    transform: translateY(12px);\n    transition: opacity 0.3s, transform 0.3s;\n    z-index: 100;\n  }\n\n  .back-link.show {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  .back-link:hover {\n    background: var(--accent-blue);\n  }\n\n  \/* ========== RESPONSIVE ========== *\/\n  @media (max-width: 640px) {\n    :root {\n      --section-padding: 72px 20px;\n    }\n\n    .hero {\n      padding: 88px 20px 72px;\n    }\n\n    .service-item {\n      grid-template-columns: 1fr;\n      padding: 28px 24px;\n    }\n\n    .service-icon {\n      width: 56px;\n      height: 56px;\n      font-size: 26px;\n      border-radius: 12px;\n    }\n\n    .pain-grid,\n    .care-grid,\n    .portfolio-grid,\n    .series-grid {\n      grid-template-columns: 1fr;\n    }\n\n    .stats-grid {\n      grid-template-columns: repeat(3, 1fr);\n      gap: 12px;\n    }\n\n    .stats-card {\n      padding: 24px 12px;\n    }\n\n    .stats-hero {\n      padding: 40px 24px;\n    }\n\n    .series-card {\n      padding: 32px 24px;\n    }\n\n    .cta-buttons {\n      flex-direction: column;\n      align-items: stretch;\n    }\n\n    .btn-estimate,\n    .btn-kakao {\n      width: 100%;\n      justify-content: center;\n      padding: 16px 24px;\n    }\n\n    .cta-contact {\n      gap: 12px;\n    }\n  }\n<\/style>\n\n<!-- ===== HERO ===== -->\n<section class=\"hero\">\n  <div class=\"container\">\n    <div class=\"hero-eyebrow\">WizardOfCode<\/div>\n    <h1>\n      <span>\ub180\uace0 \uc788\ub294 \uc9c1\uc6d0\uc774<\/span>\n      <span>\ud55c \uba85 \uc788\uc2b5\ub2c8\ub2e4.<\/span>\n      <span style=\"margin-top:8px; font-weight:300; font-size:0.65em; color:rgba(255,255,255,0.65);\">\ud648\ud398\uc774\uc9c0\uc694.<\/span>\n    <\/h1>\n    <p class=\"hero-sub\">\n      \uc0ac\uc7a5\ub2d8\uc774 \uc26c\uc5b4\ub3c4, \uc5f4\uc2ec\ud788 \uc77c\ud558\ub294 \ud648\ud398\uc774\uc9c0.<br>\n      WizardOfCode\uac00 \ub9cc\ub4e4\uc5b4 \ub4dc\ub9bd\ub2c8\ub2e4.\n    <\/p>\n  <\/div>\n<\/section>\n\n<!-- ===== PAIN POINTS ===== -->\n<section class=\"pain section\">\n  <div class=\"container\">\n    <h2 class=\"reveal\">\uc774\ub7f0 \uacbd\ud5d8, \uc788\uc9c0 \uc54a\uc73c\uc168\ub098\uc694?<\/h2>\n    <div class=\"pain-grid stagger-children\">\n      <div class=\"pain-card reveal\">\n        <p>\ud648\ud398\uc774\uc9c0 \ub9cc\ub4e4\uc5c8\ub294\ub370<br><strong>\uc5c5\uccb4\uac00 \uc0ac\ub77c\uc84c\uc5b4\uc694.<\/strong><\/p>\n      <\/div>\n      <div class=\"pain-card reveal\">\n        <p>\uc218\uc815\ud558\uace0 \uc2f6\uc740\ub370<br><strong>\uc5f0\ub77d\uc774 \uc548 \ub3fc\uc694.<\/strong><\/p>\n      <\/div>\n      <div class=\"pain-card reveal\">\n        <p>\ub9cc\ub4e4\uace0 \ub098\uc11c<br><strong>\ud55c \ubc88\ub3c4 \uc5c5\ub370\uc774\ud2b8 \uc548 \ud588\uc5b4\uc694.<\/strong><\/p>\n      <\/div>\n      <div class=\"pain-card reveal\">\n        <p>\ub9e4\ub2ec \uc11c\ubc84\ube44\ub9cc \ub098\uac00\uace0<br><strong>\ubc29\uce58 \uc911\uc774\uc5d0\uc694.<\/strong><\/p>\n      <\/div>\n    <\/div>\n    <div class=\"pain-bottom reveal\">\n      <p>\n        \ud648\ud398\uc774\uc9c0\ub294 \ub9cc\ub4dc\ub294 \uac83\ubcf4\ub2e4<br>\n        <span class=\"highlight-text\"><strong>\uc720\uc9c0\ud558\ub294 \uac83<\/strong><\/span>\uc774 \ub354 \uc911\uc694\ud569\ub2c8\ub2e4.<br><br>\n        \uadf8\ub798\uc11c \uc800\ud76c\ub294 <strong>\ucf00\uc5b4\uad6c\ub3c5<\/strong>\uc744 \ud569\ub2c8\ub2e4.\n      <\/p>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ===== SERVICES ===== -->\n<section class=\"services section\">\n  <div class=\"container\">\n    <h2 class=\"reveal\">\uc8fc\ubb38. \uc54c\ub9bc. \uad00\ub9ac. \uc790\ub3d9\uc73c\ub85c.<\/h2>\n    <p class=\"services-subtitle reveal\">\ub2f9\uc2e0\uc774 \uc274 \ub54c, \ud648\ud398\uc774\uc9c0\uac00 \uc77c\ud569\ub2c8\ub2e4.<\/p>\n    <div class=\"service-list\">\n      <div class=\"service-item reveal\">\n        <div class=\"service-icon order\">\ud83d\udce6<\/div>\n        <div class=\"service-content\">\n          <h3>\uc628\ub77c\uc778 \uc8fc\ubb38 \u00b7 \uc608\uc57d \uc2dc\uc2a4\ud15c<\/h3>\n          <p>\uace0\uac1d\uc774 \uc9c1\uc811 \uc8fc\ubb38\ud558\uace0 \uc608\uc57d\ud569\ub2c8\ub2e4. \uc0c8\ubcbd 3\uc2dc\uc5d0\ub3c4 \uc811\uc218 \uc644\ub8cc.<br>\uc804\ud654 \uc8fc\ubb38\ub9cc \ubc1b\ub358 \uac00\uac8c\uc5d0 \uc628\ub77c\uc778 \uc8fc\ubb38\uc774 \ucd94\uac00\ub429\ub2c8\ub2e4.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"service-item reveal\">\n        <div class=\"service-icon notify\">\ud83d\udcac<\/div>\n        <div class=\"service-content\">\n          <h3>\uce74\uce74\uc624 \uc54c\ub9bc\ud1a1 \u00b7 \ubb38\uc790 \uc790\ub3d9 \ubc1c\uc1a1<\/h3>\n          <p>\uc8fc\ubb38 \ud655\uc778, \ubc30\uc1a1 \uc54c\ub9bc, \uc608\uc57d \ub9ac\ub9c8\uc778\ub4dc.<br>\uace0\uac1d\uc5d0\uac8c \uba3c\uc800 \uc5f0\ub77d\ud569\ub2c8\ub2e4. \uc0ac\uc7a5\ub2d8\uc774 \uc9c1\uc811 \ubcf4\ub0b4\uc9c0 \uc54a\uc544\ub3c4.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"service-item reveal\">\n        <div class=\"service-icon auto\">\u2699\ufe0f<\/div>\n        <div class=\"service-content\">\n          <h3>\ubc18\ubcf5 \uc5c5\ubb34 \uc790\ub3d9\ud654<\/h3>\n          <p>\ub9e4\ubc88 \uc218\uc791\uc5c5\uc73c\ub85c \ud558\ub358 \uc77c\uc744 \uc2dc\uc2a4\ud15c\uc774 \ub300\uc2e0\ud569\ub2c8\ub2e4.<br>\uace0\uac1d\ubcc4 \ub9de\ucda4 \uae30\ub2a5\uc744 \uac1c\ubc1c\ud574\ub4dc\ub9bd\ub2c8\ub2e4.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"service-item reveal\">\n        <div class=\"service-icon seo\">\ud83d\udd0d<\/div>\n        <div class=\"service-content\">\n          <h3>\ub124\uc774\ubc84 \u00b7 \uad6c\uae00 \uac80\uc0c9 \ub178\ucd9c<\/h3>\n          <p>\ud648\ud398\uc774\uc9c0\uac00 \uc788\uc5b4\ub3c4 \uac80\uc0c9\uc5d0 \uc548 \ub098\uc624\uba74 \uc5c6\ub294 \uac83\uacfc \uac19\uc2b5\ub2c8\ub2e4.<br>\uac80\uc0c9 \ucd5c\uc801\ud654\ub41c \uad6c\uc870\ub85c \uc81c\uc791\ud569\ub2c8\ub2e4.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ===== CARE SUBSCRIPTION ===== -->\n<section class=\"care section\">\n  <div class=\"container\">\n    <h2 class=\"reveal\">\ub9cc\ub4e4\uace0 \ub05d? \uacc4\uc18d \ub3cc\ubd05\ub2c8\ub2e4.<\/h2>\n    <p class=\"care-subtitle reveal\">\ud648\ud398\uc774\uc9c0\ub97c \ub9cc\ub4e0 \ud6c4\uac00 \ub354 \uc911\uc694\ud569\ub2c8\ub2e4.<\/p>\n    <div class=\"care-grid stagger-children\">\n      <div class=\"care-card reveal\">\n        <div class=\"care-card-icon\">\ud83d\udee1\ufe0f<\/div>\n        <h4>\ubcf4\uc548 \uc5c5\ub370\uc774\ud2b8<\/h4>\n        <p>\ud574\ud0b9, \ucde8\uc57d\uc810\uc73c\ub85c\ubd80\ud130<br>\uc0ac\uc774\ud2b8\ub97c \ubcf4\ud638\ud569\ub2c8\ub2e4.<\/p>\n      <\/div>\n      <div class=\"care-card reveal\">\n        <div class=\"care-card-icon\">\ud83d\udcbe<\/div>\n        <h4>\uc815\uae30 \ubc31\uc5c5<\/h4>\n        <p>\ub370\uc774\ud130 \uc720\uc2e4 \uac71\uc815 \uc5c6\uc774<br>\uc548\uc804\ud558\uac8c \ubcf4\uad00\ud569\ub2c8\ub2e4.<\/p>\n      <\/div>\n      <div class=\"care-card reveal\">\n        <div class=\"care-card-icon\">\ud83d\udee0\ufe0f<\/div>\n        <h4>\ubc84\uadf8\u00b7\uc624\ub958 \uc218\uc815<\/h4>\n        <p>\uc0ac\uc774\ud2b8 \uc624\ub958\uc640 \ubc84\uadf8\ub97c<br>\uc2e0\uc18d\ud558\uac8c \ud574\uacb0\ud569\ub2c8\ub2e4.<\/p>\n      <\/div>\n      <div class=\"care-card reveal\">\n        <div class=\"care-card-icon\">\u270f\ufe0f<\/div>\n        <h4>\ucf58\ud150\uce20 \uc218\uc815 \uc9c0\uc6d0<\/h4>\n        <p>\uba54\ub274, \uac00\uaca9, \uc0ac\uc9c4 \uad50\uccb4.<br>\uc5b8\uc81c\ub4e0 \uc694\uccad\ud558\uc138\uc694.<\/p>\n      <\/div>\n    <\/div>\n    <div class=\"care-trust reveal\">\n      <p>\n        \ud648\ud398\uc774\uc9c0\ub97c \ub9cc\ub4e0 \uc5c5\uccb4\uac00 \uc0ac\ub77c\uc9c8 \uac71\uc815.<br>\n        \uc800\ud76c\ub294 <strong>20\ub144\uc9f8<\/strong> \uac19\uc740 \uace0\uac1d\uacfc \ud568\uaed8\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.\n      <\/p>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ===== STATS ===== -->\n<section class=\"stats section\">\n  <div class=\"container\">\n    <h2 class=\"reveal\">20\ub144\uc758 \uacb0\uc2e4<\/h2>\n    <p class=\"stats-subtitle reveal\">WizardOfCode\uac00 \uac78\uc5b4\uc628 \uae38<\/p>\n\n    <div class=\"stats-hero reveal\">\n      <div class=\"stats-hero-number\">20\ub144<\/div>\n      <div class=\"stats-hero-label\">\ud55c \uace0\uac1d\uacfc\uc758 \ud30c\ud2b8\ub108\uc2ed<\/div>\n      <div class=\"stats-hero-sub\">\uc544\ud1a0\ud53c \uc804\ubb38 \uc1fc\ud551\ubab0<\/div>\n    <\/div>\n\n    <div class=\"stats-grid stagger-children\">\n      <div class=\"stats-card reveal\">\n        <div class=\"stats-card-number\">30+<\/div>\n        <div class=\"stats-card-label\">\uc791\uc5c5 \uc0ac\uc774\ud2b8<\/div>\n      <\/div>\n      <div class=\"stats-card reveal\">\n        <div class=\"stats-card-number\">2\uacf3<\/div>\n        <div class=\"stats-card-label\">10\ub144+ \uc7a5\uae30 \uace0\uac1d<\/div>\n      <\/div>\n      <div class=\"stats-card reveal\">\n        <div class=\"stats-card-number\">24\uc2dc\uac04<\/div>\n        <div class=\"stats-card-label\">\uc774\ub0b4 \ub2f5\ubcc0<\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ===== SERIES ===== -->\n<section class=\"series section\">\n  <div class=\"container\">\n    <h2 class=\"reveal\">\uc678\uc8fc\ub9cc \ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<br>\uc9c1\uc811 \ub9cc\ub4e0 \ub3c4\uad6c\ub4e4.<\/h2>\n    <p class=\"series-subtitle reveal\">20\ub144 \uadf8\ub204\ubcf4\ub4dc \uc6b4\uc601 \ub178\ud558\uc6b0\ub85c \ub9cc\ub4e0 \uc790\uccb4 \uc194\ub8e8\uc158<\/p>\n\n    <div class=\"series-grid stagger-children\">\n      <div class=\"series-card shop reveal\">\n        <div class=\"series-card-icon\">\ud83d\uded2<\/div>\n        <h3>\uc1fc\ud551\ubab0 \uc2dc\ub9ac\uc988<\/h3>\n        <div class=\"series-card-count\">27\uac74+ \uc791\uc5c5<\/div>\n        <p>\uc544\ud1a0\ud53c \uc804\ubb38 \uc1fc\ud551\ubab0, \uac74\uac15\uc999 \uc804\ubb38 \uc1fc\ud551\ubab0 8\uc885+ \ub4f1<br>(\uc601\uce74\ud2b8 \uae30\ubc18 \uc8fc\ubb38\u00b7\uacb0\uc81c\u00b7\ubc30\uc1a1 \uc2dc\uc2a4\ud15c)<\/p>\n      <\/div>\n      <div class=\"series-card ai reveal\">\n        <div class=\"series-card-icon\">\ud83e\udd16<\/div>\n        <h3>AI \uc790\ub3d9\ud654 \uc2dc\ub9ac\uc988<\/h3>\n        <div class=\"series-card-count\">\uc790\uccb4 AI \uc194\ub8e8\uc158 \uc6b4\uc601 \uc911<\/div>\n        <p>\ube14\ub85c\uadf8\ube44\uc11c AI, \ub313\uae00\ub3c4\uc6c0\uae30<br>(\ub124\uc774\ubc84\u00b7\ud2f0\uc2a4\ud1a0\ub9ac \ube14\ub85c\uadf8 \uc790\ub3d9\ud654)<\/p>\n      <\/div>\n      <div class=\"series-card biz reveal\">\n        <div class=\"series-card-icon\">\ud83d\udcbc<\/div>\n        <h3>\uae30\uc5c5\u00b7\uc790\ub3d9\ud654 \uc2dc\ub9ac\uc988<\/h3>\n        <div class=\"series-card-count\">\uc8fc\uc694 \ub9de\ucda4 \uac1c\ubc1c<\/div>\n        <p>\ub9c8\ucf00\ud305 \uc804\ubb38 \uae30\uc5c5 \uc5c5\ubb34 \uc790\ub3d9\ud654, \uadfc\ud1f4 \uad00\ub9ac \uc2dc\uc2a4\ud15c<br>(\uae30\uc5c5 \ub9de\ucda4 \uc790\ub3d9\ud654 \uc194\ub8e8\uc158)<\/p>\n      <\/div>\n      <div class=\"series-card module reveal\">\n        <div class=\"series-card-icon\">\ud83d\udee0\ufe0f<\/div>\n        <h3>\uadf8\ub204\ubcf4\ub4dc \uc6b4\uc601 \ub3c4\uad6c \uc2dc\ub9ac\uc988<\/h3>\n        <div class=\"series-card-count\">\ubb34\ub8cc\ubd80\ud130 \uc2dc\uc791<\/div>\n        <p>SMTP Manager V1\u00b7V2, \uc624\ub958 \uc54c\ub9bc \ubaa8\ub4c8 \ub4f1<br>(\uadf8\ub204\ubcf4\ub4dc \uc6b4\uc601\uc790\ub97c \uc704\ud55c \uc2e4\uc6a9 \ub3c4\uad6c)<\/p>\n      <\/div>\n    <\/div>\n\n    <div class=\"series-cta-wrap reveal\">\n      <a href=\"https:\/\/wizardofcode.notion.site\" class=\"series-cta\" target=\"_blank\">\n        \uc804\uccb4 \uc2dc\ub9ac\uc988 \ubcf4\uae30\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line>\n          <polyline points=\"12 5 19 12 12 19\"><\/polyline>\n        <\/svg>\n      <\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ===== PORTFOLIO ===== -->\n<section class=\"portfolio section\">\n  <div class=\"container\">\n    <h2 class=\"reveal\">\ub300\ud45c \uc791\uc5c5 \uc0ac\ub840<\/h2>\n    <div class=\"portfolio-grid stagger-children\">\n      <div class=\"portfolio-card reveal\">\n        <span class=\"portfolio-tag\">20\ub144 \ud30c\ud2b8\ub108\uc2ed<\/span>\n        <h3>\uc544\ud1a0\ud53c \uc804\ubb38 \uc1fc\ud551\ubab0<\/h3>\n        <p class=\"portfolio-desc\">\uc544\ud1a0\ud53c \ucf00\uc5b4 \uc81c\ud488 \uc804\ubb38<\/p>\n        <p>20\ub144 \uc7a5\uae30 \ud30c\ud2b8\ub108\uc2ed. \uadf8\ub204\ubcf4\ub4dc \uae30\ubc18 \uc8fc\ubb38\/\uacb0\uc81c \uc2dc\uc2a4\ud15c. \ucf00\uc5b4\uad6c\ub3c5 \uc9c4\ud589 \uc911.<\/p>\n      <\/div>\n      <div class=\"portfolio-card reveal\">\n        <span class=\"portfolio-tag\">\uac74\uac15\uc999 \uc1fc\ud551\ubab0 8\uc885+<\/span>\n        <h3>\uac74\uac15\uc999 \uc804\ubb38 \uc1fc\ud551\ubab0 \uc2dc\ub9ac\uc988<\/h3>\n        <p class=\"portfolio-desc\">\ud64d\uc0bc\u00b7\uc624\ubbf8\uc790\u00b7\uc591\ud30c\u00b7\uc591\ubc30\ucd94\u00b7\ud638\ubc15\u00b7\uc0ac\uacfc\uc999 \ub4f1<\/p>\n        <p>\ub2a5\ub3d9\uc801 \uace0\uac1d \uc790\ub3d9\uad00\ub9ac \uc2dc\uc2a4\ud15c(\uac00\uc785 \uc548\ub0b4, \ubbf8\uc8fc\ubb38 \uace0\uac1d \uc790\ub3d9 \uc54c\ub9bc), \uc608\uce58\uae08 \uc2dc\uc2a4\ud15c, \uc785\uc810 \uc2dc\uc2a4\ud15c \uad6c\ucd95.<\/p>\n      <\/div>\n      <div class=\"portfolio-card reveal\">\n        <span class=\"portfolio-tag\">\uae30\uc5c5 \uc790\ub3d9\ud654<\/span>\n        <h3>\ub9c8\ucf00\ud305 \uc804\ubb38 \uae30\uc5c5 \uc2dc\uc2a4\ud15c<\/h3>\n        <p class=\"portfolio-desc\">\uc5c5\ubb34 \uc790\ub3d9\ud654 \ub9de\ucda4 \uac1c\ubc1c<\/p>\n        <p>\ub9c8\ucf00\ud305 \ud68c\uc0ac\uc758 \ubc18\ubcf5 \uc5c5\ubb34 \uc790\ub3d9\ud654. \uace0\uac1d \uad00\ub9ac\u00b7\ubc1c\uc1a1 \uc790\ub3d9\ud654 \uc2dc\uc2a4\ud15c \uad6c\ucd95.<\/p>\n      <\/div>\n      <div class=\"portfolio-card reveal\">\n        <span class=\"portfolio-tag\">AI \uae30\uc220<\/span>\n        <h3>WizardOfCode AI<\/h3>\n        <p class=\"portfolio-desc\">\ube14\ub85c\uadf8 \uc790\ub3d9\ud654 \uc2dc\uc2a4\ud15c<\/p>\n        <p>\uc790\uccb4 AI \uae30\uc220\ub85c \ub124\uc774\ubc84 \ube14\ub85c\uadf8 \ub313\uae00\/\uc2a4\ud06c\ub7a9 \uc790\ub3d9\ud654. \ud06c\ub86c \ud655\uc7a5 + \ub370\uc2a4\ud06c\ud1b1 \uc571.<\/p>\n      <\/div>\n      <div class=\"portfolio-card reveal\">\n        <span class=\"portfolio-tag\">\ub9de\ucda4 \uac1c\ubc1c<\/span>\n        <h3>\uadfc\ud1f4 \uad00\ub9ac \uc2dc\uc2a4\ud15c<\/h3>\n        <p class=\"portfolio-desc\">\ub9de\ucda4 \uc5c5\ubb34 \uc790\ub3d9\ud654<\/p>\n        <p>\uae30\uc5c5 \ub9de\ucda4 \uac1c\ubc1c. \ubc18\ubcf5\ub418\ub294 \uc5c5\ubb34\ub97c \uc2dc\uc2a4\ud15c\uc73c\ub85c.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ===== CTA ===== -->\n<section class=\"cta\">\n  <div class=\"container\">\n    <h2 class=\"reveal clwhite\">\ubb34\ub8cc \uc0c1\ub2f4, \ubd80\ub2f4 \uc5c6\uc774.<\/h2>\n    <p class=\"cta-desc reveal\">\n      \ud648\ud398\uc774\uc9c0\uac00 \ud544\uc694\ud55c\uc9c0 \uc544\ub2cc\uc9c0\ubd80\ud130<br>\ud3b8\ud558\uac8c \ubb3c\uc5b4\ubcf4\uc138\uc694.\n    <\/p>\n    <p class=\"cta-note reveal\">\uc815\ud655\ud55c \uacac\uc801\uc740 \uc0c1\ub2f4 \ud6c4 \uc548\ub0b4\ub4dc\ub9bd\ub2c8\ub2e4.<\/p>\n    <div class=\"cta-buttons reveal\">\n      <a href=\"\/?page_id=941\" class=\"btn-estimate\">\n        <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6v-2h12v2zm0-4H6v-2h12v2zm0-4H6V9h12v2z\"\/><\/svg>\n        \uacac\uc801 \ubb34\ub8cc \uc0c1\ub2f4 \uc2e0\uccad\n      <\/a>\n      <a href=\"http:\/\/pf.kakao.com\/_mkUxdn\" class=\"btn-kakao\" target=\"_blank\">\n        <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 3C6.48 3 2 6.58 2 10.9c0 2.78 1.86 5.22 4.65 6.6l-.95 3.53c-.08.3.26.54.52.37l4.2-2.8c.51.07 1.04.1 1.58.1 5.52 0 10-3.58 10-7.9S17.52 3 12 3z\"\/><\/svg>\n        \uce74\uce74\uc624\ud1a1 \ubb34\ub8cc \uc0c1\ub2f4\n      <\/a>\n    <\/div>\n    <div class=\"cta-contact reveal\">\n      <a href=\"tel:050-5058-5058\">\u260e 050-5058-5058(\ubb38\uc790\uac00\ub2a5)<\/a>\n      <a href=\"mailto:k3soft@naver.com\">\u2709 k3soft@naver.com<\/a>\n      <span>\ud83c\udf10 wizardofcode.kr<\/span>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- Back to top -->\n<!-- a href=\"#\" class=\"back-link\" id=\"backTop\" title=\"\ub9e8 \uc704\ub85c\">\u2191<\/a -->\n\n<script>\n\/\/ Scroll reveal\nconst observer = new IntersectionObserver((entries) => {\n  entries.forEach(entry => {\n    if (entry.isIntersecting) {\n      entry.target.classList.add('visible');\n    }\n  });\n}, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });\n\ndocument.querySelectorAll('.reveal').forEach(el => observer.observe(el));\n\n\/\/ Back to top button\nconst backTop = document.getElementById('backTop');\nwindow.addEventListener('scroll', () => {\n  backTop.classList.toggle('show', window.scrollY > 600);\n});\n\nbackTop.addEventListener('click', (e) => {\n  e.preventDefault();\n  window.scrollTo({ top: 0, behavior: 'smooth' });\n});\n<\/script>\t\t\t\t<\/div>\n\t\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>Our Story WizardOfCode \ub180\uace0 \uc788\ub294 \uc9c1\uc6d0\uc774 \ud55c \uba85 \uc788\uc2b5\ub2c8\ub2e4. \ud648\ud398\uc774\uc9c0\uc694. \uc0ac\uc7a5\ub2d8\uc774 \uc26c\uc5b4\ub3c4, \uc5f4\uc2ec\ud788 \uc77c\ud558\ub294 \ud648\ud398\uc774\uc9c0. WizardOfCode\uac00 \ub9cc\ub4e4\uc5b4 \ub4dc\ub9bd\ub2c8\ub2e4. \uc774\ub7f0 \uacbd\ud5d8, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"class_list":["post-962","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=\/wp\/v2\/pages\/962","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=962"}],"version-history":[{"count":15,"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=\/wp\/v2\/pages\/962\/revisions"}],"predecessor-version":[{"id":1020,"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=\/wp\/v2\/pages\/962\/revisions\/1020"}],"wp:attachment":[{"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=962"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}