/* ==========================================================================
       [PC 기반 기본 스타일] - 원본 디자인 유지
       ========================================================================== */

     /* 크리에이터 배너 - 교사마켓 mediaBox 스타일 적용 */
    .create-banner-wrap.mediaBox { width: 100%; }
    .create-banner-bg.bannerContainer {
        width: 100%;
        min-height: 320px;
        position: relative;
        overflow: hidden;
        background-color: #E0EBF2;
        background-image: url(../img/create/top_banner.png);
        background-size: 110%;
        background-position: right 28%;
        background-repeat: no-repeat;
        max-height: 350px;
    }
    .create-banner-wrap .bannerInner {
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        min-height: 320px;
        padding: 40px 24px;
    }
    .create-banner-wrap .leftBanner { max-width: 560px; padding-right: 40px; text-align: left; }
    .create-banner-wrap .bannerTitle {
        width: auto;
        height: 44px;
        padding: 0 20px;
        border-radius: 22px;
        background: #fff;
        border: 1px solid #E5E5E5;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    .create-banner-wrap .bannerTitle > img { width: 22px; height: 22px; }
    .create-banner-wrap .bannerTitle > p { font-size: 16px; font-weight: 600; color: #333; margin: 0; }
    .create-banner-wrap .leftBanner > h1 {
        margin: 24px 0 0 0;
        font-size: 34px;
        font-weight: 700;
        color: #1a1a1a;
        line-height: 1.35;
        letter-spacing: -0.02em;
        text-align: left;
    }
    .create-banner-wrap .leftBanner > p {
        margin: 14px 0 0 0;
        font-size: 17px;
        font-weight: 400;
        color: #6b7280;
        line-height: 1.5;
        text-align: left;
    }
    .create-banner-wrap .bannerButtons {
        display: flex;
        gap: 14px;
        margin-top: 28px;
        flex-wrap: wrap;
    }
    .create-banner-wrap .bannerBtn {
        height: 48px;
        padding: 0 24px;
        border-radius: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
        transition: opacity 0.2s;
    }
    .create-banner-wrap .bannerBtn:hover { opacity: 0.9; }
    .create-banner-wrap .bannerBtn.start {
        background: transparent;
        color: #8352D7;
        border: 2px solid #8352D7;
    }
    .create-banner-wrap .bannerBtn.creator {
        background: #8352D7;
        color: #fff;
        border: none;
    }
    .create-banner-wrap .bannerBtn.creator:hover { background: #6b42b8; }
    .create-banner-wrap .bannerBtn > img { width: 15px; height: 15px; }
    @media (max-width: 768px) {
        .create-banner-bg.bannerContainer { min-height: 280px; }
        .create-banner-wrap .bannerInner {
            min-height: 280px;
            padding: 32px 20px;
            justify-content: flex-end;
            align-items: center;
        }
        .create-banner-wrap .leftBanner {
            max-width: 100%;
            padding-right: 0;
            text-align: center;
        }
        .create-banner-wrap .bannerTitle { margin: 0 auto; }
        .create-banner-wrap .leftBanner > h1 { font-size: 24px; text-align: center; }
        .create-banner-wrap .leftBanner > p { font-size: 15px; text-align: center; }
        .create-banner-wrap .bannerButtons {
            flex-direction: column;
            margin-top: 24px;
            align-items: center;
        }
        .create-banner-wrap .bannerBtn {
            width: 100%;
            max-width: 280px;
            justify-content: center;
        }
    }


    .main_img_box1 {position: relative;overflow: hidden;}
    .main_img_box1:hover .main_img1 {transform: scale(1.1);}
    .main_img1 {width: 100%;height: 400px;object-fit:cover;transition: transform 0.4s ease;will-change: transform;}
    
    /* PC: 절대 위치 중앙 정렬 */
    .main_img_text1 {position: absolute;color: #fff;top: 50%;left: 50%;transform: translate(-50%, -50%); width: 100%; max-width: 1300px; padding: 0 15px; box-sizing: border-box; z-index: 10;}
    
    .main_img_text1_h5 {font-size:40px;text-align: center;}
    .main_img_text1_h6 {font-size:22px;text-align: center;}
    .h4_box {line-height:60px;color: #fff;display: flex;align-items: center;justify-content: center;margin-bottom: 15px;}
    .h5_box {line-height:60px;color: #fff; font-size:40px;text-align: center;}
    .h6_box {line-height:60px;margin-bottom: 33px;color: #fff; text-align: center;}
    .h7_box {line-height:35px;color: #000;display: flex;align-items: center;justify-content: center;margin-bottom: 33px;gap: 30px;}
    
    .buttonBox {display: flex;justify-content: center;gap:19px;align-items: center;}
    .buttonBox a {font-size:18px;min-width: 214px;text-align: center;cursor: pointer;font-weight: 600;padding: 15px 10px; display: flex; justify-content: center; align-items: center;}
    .startBtn {color:#fff;border-radius: 8px;background:#7800FF;padding:10px 20px;display: flex;align-items: center;gap: 13px;justify-content: center;}
    .giudeBtn {color:#7800FF;border-radius: 8px;background:#fff;padding:10px 20px;border:1px solid #7800FF;display: flex;    align-items: center;gap: 13px;justify-content: center;}

    .create-plan-area {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 50px;
        width: 100%;
        max-width: 860px;
        margin: 0 auto;
        padding-bottom: 40px;
        display: none;
    }

    .create-plan-box {
        align-items: center;
        background-color: rgb(255, 255, 255);
        box-shadow: 0px 7px 13px 0px rgba(0, 0, 0, 0.19);
        border-radius: 15px;
        padding: 30px 20px;
        display: flex;
        flex-direction: column;
    }

    .create-plan-title {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 10px;
        color: #000;
    }

    .create-plan-subtitle {
        font-size: 14px;
        color: #000;
        margin-bottom: 20px;
    }

    .create-plan-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .create-plan-list-item {
        display: flex;
        align-items: center;
        gap: 10px;
        color : #000;
        font-size: 14px;
    }

    .create-plan-list-item img {
        width: 18px;
        height: 18px;
    }

    .create-plan-title-purple{
        color: #7800FF;
    }

    .main_container {margin: 0 auto;width: 100%;max-width: 1300px; padding: 0 15px; box-sizing: border-box;}

    /* 텍스트 영역 공통 */
    .create_area1 {text-align: center;}
    .create_area1_h3 {font-size:42px;margin-bottom:30px;font-weight: 700;}
    .create_area1_p {line-height:34px;font-size:22px;margin-bottom:60px;}
    
    /* 사용자 유형 카드 (크리에이터/교사 등) */
    .create_area2 {display:flex; justify-content: center; gap: 40px;} /* space-evenly 대신 center 보정 */
    
    .create_area2_box {text-align: center;
        background-color: rgb(255, 255, 255);
        box-shadow: 0px 7px 13px 0px rgba(0, 0, 0, 0.19);
        width: 513px;
        height: 282px;
        display: flex;
        flex-direction: column;
        border-radius: 15px;
        gap: 20px;
        align-items: center;
        position: relative; /* z-index 제어를 위해 */
    }

    .create_area3 {margin-top:120px;text-align: center;}
    .create_area3_h3 {font-size:42px;margin-bottom:30px;font-weight: 700;}
    .create_area3_p {line-height:34px;font-size:22px;margin-bottom:60px;}

    .create_area4 {display: grid;grid-template-columns: repeat(4, 1fr);gap: 30px;}
    .create_area4_box {
        border: 1px solid #7800FF;
        border-radius: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .img_box4 {
        width: 100%;
        height: 180px;
        position: relative;
        overflow: hidden;
    }
    .img_box4::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 80px;
        background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.25));
        pointer-events: none;
    }
    .img_box4 img{
        width: 100%; 
        aspect-ratio: 872 / 533;
        object-fit: cover;
        border-radius: 20px 20px 0 0 ;
    }
    .area4_center_box {display: flex;flex-direction: column;align-items: center;}
    .area4_center_box_p {font-size:24px;font-weight: 700;margin-top:26px;margin-bottom:16px;}
    .area4_center_box_span {line-height:26px;font-size:16px;text-align: center;}
    /* .fir {margin-top:38px;} */
    .af {margin-top:13px;}
    .area4_check_box {font-size:18px;font-weight: 400;}
    .area4_check_box_img {margin-right:13px;}
    .area4_center_box2{
        padding: 30px 30px 40px;
    }

    .create_area5 {margin-top:311px;text-align: center;}
    .create_area5_h3 {font-size:42px;margin-bottom:30px;font-weight: 700;}
    .create_area5_p {line-height:34px;font-size:22px;margin-bottom:90px;}

    .create_area6 {display:flex;justify-content: space-between;}
    .create_area6_div{width:23%;}
    .area5_img {width:100%;}

    .create_area7 {margin-top:355px;text-align: center;}
    .create_area7_h3 {font-size:42px;margin-bottom:30px;font-weight: 700;}
    .create_area7_p {line-height:34px;font-size:22px;margin-bottom:90px;}

    /* 단계별 프로세스 (Step 1~5) */
    .create_box8 {
        padding:34px 30px 34px 64px; box-shadow: 4px 5px 20px #00000029; border-radius: 20px;
        display:flex; justify-content: space-between; align-items: center; margin-top:80px; 
        opacity: 0; transform: translateX(80px);
        transition: transform .6s ease-out, opacity .6s ease-out;
        transition-delay: var(--d, 0s); 
        will-change: transform, opacity;
        box-sizing: border-box; /* 패딩 포함 */
    }
    
    .create_box8.is-inview {opacity: 1;transform: translateX(0);}
    @media (prefers-reduced-motion: reduce) {
        .create_box8 {transition: none !important;transform: none !important;opacity: 1 !important;}
    }
    .create_box_text_8 {position: relative; width: 50%;}
    .create_box_text_8_h3 {color:#C48FFF;font-size:60px;font-weight: 800;margin-bottom:22px;}
    .create_box_text_8_p {color:#000;font-size:34px;font-weight: 700;margin-bottom:22px;}
    .create_box_text_8_span {color:#000;font-size:20px;line-height:34px;}
    .img8_a {width: 100%; max-width: 738px; height: auto; object-fit: cover; border-radius: 15px;}
    .text_back {background:#EDD8FF;}
    .help_box {position: absolute;top: -20px;right: 20px;text-align: center;}
    .help_icon {position: absolute;left: 10px;top: 6px;}
    .help_text {font-weight: 700;font-size:16px;margin-top:10px;}

    .create_area9 {margin-top:207px;text-align: center;}
    .create_area9_h3 {font-size:42px;margin-bottom:30px;font-weight: 700;}
    .create_area9_p {line-height:34px;font-size:22px;margin-bottom:90px;}

    .create_area10 {margin-top:311px;text-align: center;display: flex;justify-content: center;}
    .create_area10_div{
        background-color: rgba(255, 255, 255, 0.102);
        width: 142px; height: 38px;
        border: 1px solid rgb(97, 97, 97);
        border-radius: 25px;
        font-size: 17px; font-weight: 700; line-height:34px;
    }
    .create_area11 {margin-top:40px;text-align: center;}
    .create_area11_h3 {font-size:42px;margin-bottom:30px;font-weight: 700;}
    .create_area11_p {line-height:34px;font-size:22px;margin-bottom:90px;}
    
    .create_area12 {margin-top:40px; text-align: center; display: flex; flex-direction: row; gap: 20px; justify-content: center; align-items: center;}
    .create_area12_2 {margin-top:30px; text-align: center; display: flex; flex-direction: row; gap: 20px; justify-content: center; align-items: center;}
    
    .create_area13 {
        border: 1px solid rgb(221, 221, 221);
        border-radius: 17px; background-color: rgb(255, 255, 255);
        width: 347px; height: 471px;
    }
    .area13_img {object-fit: contain; width: 100%; transition: transform 0.4s ease; will-change: transform;}
    .create_area13:hover .area13_img {transform: scale(1.1);}
    
    .create_area13_1{position: relative; overflow: hidden; border-top-left-radius: 17px; border-top-right-radius: 17px;}
    .create_area13_1_img2{position: absolute; top: 10px; right: 10px; z-index: 10;}
    .create_area13_2{padding: 20px 15px 15px 15px; text-align: left;}
    .create_area13_2_p1{font-size:18px;font-weight: 700;}
    .create_area13_2_p2{margin-top:7px; font-size:15px; font-weight: 500; color: #707070;}

    .create_area13_2_1 {margin-top:17px; display: flex; gap: 25px;}
    .create_area13_2_2 {display: flex;}
    .create_area13_2_2_span {font-size: 12px;margin-left:5px;}

    .Shape_10 {background-color: rgb(201, 201, 201); height: 1px; margin: 0px 15px;}

    .create_area13_3 {display: flex; padding: 15px; text-align: left; gap: 5px;}
    .create_area13_3_1 {border: 1px solid rgb(224, 218, 229); border-radius: 5px; background-color: rgb(243, 239, 247); width: 48px; height: 27px; display: flex; justify-content: center; align-items: center;}
    .create_area13_3_1_span {font-size: 12px; color: rgb(95, 55, 140);}
    .create_area13_4 {display: flex; flex-direction: column; text-align: left; padding: 3px 15px; gap: 8px;}
    .create_area13_4_1 {display: flex; flex-direction: row; gap: 5px; align-items: center;}
    .create_area13_4_1_span {font-size: 13px;}

    .create_area13_5 {
        border: 1px solid rgb(120, 0, 255); border-radius: 5px; background-color: rgb(120, 0, 255);
        width: 310px; height: 40px; margin-top: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; transform: translate(16px, 2px);
    }
    .create_area13_5_span {font-size: 16px; color: rgb(255, 255, 255); text-align: center;}
    
    /* 성공사례 */
    .create_area14 {display: flex; gap: 30px; align-items: center; justify-content: center; flex-direction: row;}
    .create_area14_1 {
        background-color: rgb(255, 255, 255); box-shadow: 0px 7px 13px 0px rgba(0, 0, 0, 0.19);
        width: 337px; height: 464px; border-radius: 20px;
        display: flex; flex-direction: column; align-items: center; gap: 15px;
    }
    .area14_img {margin-top: 50px;}
    .create_area14_1_2 {
        background-image: url("/theme/realworld/img/class_create/bak_3.png"); background-size: cover; background-position: center;
        width: 145px; height: 30px; display: flex; align-items: center; justify-content: center;
    }
    
    .create_area14_1_2_span {font-size: 16px; font-weight: bold;}
    .create_area14_1_3 {display: flex; flex-direction: column; align-items: center; gap: 5px;}
    .create_area14_1_3_span1 {font-size:22px; font-weight: bold;}
    .create_area14_1_3_span2 {font-size:14px; font-weight: 400;}
    .create_area14_1_4 {font-size:14px; font-weight: 400; padding: 0px 45px; text-align: center; line-height: 25px;}
    
    .Shape_11 {background-color: rgb(201, 201, 201); height: 1px; margin: 0px 15px; width: 90%;}
    .create_area14_1_5 {display: flex; flex-direction: row; align-items: center; width: 100%; justify-content: center; gap: 60px;}
    .create_area14_1_6 {display: flex; flex-direction: column; align-items: center;}
    .create_area14_1_6_span1 {font-size:24px; color: rgb(120, 0, 255); font-weight: bold;}
    .create_area14_1_6_span2 {font-size: 13px; color: rgb(118, 118, 118);}
    .create_area14_1_6_span sup {font-size: 1em; top: 0.26em; font-weight: 600; position: relative;}

    /* 특성 그리드 */
    .feature-grid {width: 100%; margin-top: 60px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 33px;}
    .feature-box {display: flex; flex-direction: column; cursor: pointer;}
    .feature-image {width: 100%; border-radius:30px; overflow: hidden;}
    .feature-image img {width: 100%; aspect-ratio: 1 / 1; object-fit: cover;}
    .feature-box-title {
        font-size: 20px;
        font-weight: 700;
        margin-top: 20px;
        margin-bottom: 12px;
        text-align: center;
    }

    .feature-box-desc {
        font-size: 16px;
        color: #707070;
        line-height: 1.4;
        text-align: center;
    }
    /* 프리미엄 그리드 */
    .thirdGrid {width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 40px;}
    .thirdBox {width: 100%; transition: all 0.3s ease-in-out; will-change: transform; display: block; cursor: pointer;}
    .thirdBox:hover {transform: translateY(-10px);}
    .thirdImage {width: 100%; height: 228px; border-radius: 8px; overflow: hidden; position: relative;}
    .thirdImage_a {width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; top: 16px; right: 16px; background: rgba(0, 0, 0, 0.4); position: absolute; z-index: 10;}
    .thirdImage_img {width: 100%; height: 100%; object-fit: cover;}
    .thirdEdu {margin-top: 14px; display: flex; align-items: center; gap: 6px;}
    .thirdEdu_a {padding: 0 10px; height: 26px; border-radius: 13px; background: #EEEEEE; color: #000000; display: flex; align-items: center; justify-content: center;}
    .thirdInfo {width: 100%; margin-top: 12px;}
    .thirdInfo_p {font-size: 22px; font-weight: 700; color: #000;}
    .thirdInfo_span {display: block; margin-top: 8px; font-size: 16px; font-weight: 500; color: #000;}
    .scoreBox {display: flex; align-items: center; gap: 30px; margin-top: 14px;}
    .scoreBox_p {font-size: 14px; font-weight: 400; color: #707070; display: flex; align-items: center; gap: 4px;}
    .eduPrice {margin-top: 10px; font-weight: 700; font-size: 20px; font-weight: 700; margin-bottom: 40px;}
    .premiumMenu {margin: 40px auto 0 auto; width: 262px; height: 48px; border-radius: 24px; background: #fff; border: 1px solid #000; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 18px; font-weight: 600; color: #000; cursor: pointer;}
    .premiumMenu_span {display: flex; align-items: center; justify-content: center; background: #000; width: 18.5px; height: 18.5px; border-radius: 50%;}

    /* 하단 배너 */
    .bottomBanner {width: 100%; height: 540px; background: #F4F2FF; margin-top: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
    .bottomBanner_img1 {margin-bottom: 20px;}
    .bottomBanner_h1 {font-size: 35px; font-weight: 700; color: #000; text-align: center; padding: 0 10px;}
    .bottomBanner_p {font-size: 17px; font-weight: 500; color: #000; margin-top: 20px;text-align: center;line-height: 32px;}
    .bottomBanner_div1 {margin-top: 20px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 20px;}
    .bottomBanner_div1_div:nth-of-type(1) {width: 220px;}
    .bottomBanner_div1_div:nth-of-type(2) {width: 175px;}
    .bottomBanner_div1_div:nth-of-type(3) {width: 190px;}
    .bottomBanner_div2 {
        border: 1px solid rgb(157, 157, 157); background-color: rgb(255, 255, 255); height: 35px; border-radius: 30px;
        display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px;
    }
    .bottomBanner_div2_span {font-size: 15px;}
    .bottomBanner_div3 {display: flex; flex-direction: row; align-items: center; justify-content: center; margin-top: 50px; gap: 40px;}
    .bottomBanner_div4 {display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 8px;}
    .bottomBanner_div4 img {width: 15px;}
    .bottomBanner_div4_span {font-size: 15px; font-weight: 500;}

    .bottomBtn {display: flex; align-items: center; gap: 20px; margin-top: 46px;}
    .bottomBtn_a {display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; border-radius: 11px;cursor: pointer; gap: 17px;}
    .pracBtn {width: 222px; height: 52px; background: #7800FF; color: #fff;}
    .createEdu {width: 222px; height: 52px; border: 2px solid #7800FF; color: #7800FF; background-color: rgb(255, 255, 255);}
    .info-icon-white {filter: invert(1) brightness(1.8);}

    /* 커리큘럼 그리드 */
    .curriculum-grid {width: 100%; margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;}
    .curriculum-box {background-color: rgb(255, 255, 255); box-shadow: 0px 7px 13px 0px rgba(0, 0, 0, 0.19); border-radius: 15px; padding: 30px 20px 15px 20px; display: flex; flex-direction: column; justify-content: space-between; text-align: center; align-items: center;}
    .curriculum-time {display: inline-block; background-color: #E8E8E8; color: #333; font-size: 15px; font-weight: 600; padding: 6px 18px; border-radius: 20px; width: fit-content; margin-bottom: 15px;}
    .curriculum-bg-1 {background-color: #BAB5FC; color: #fff; }
    .curriculum-bg-2 {background-color: #796BE9; color: #fff; }
    .curriculum-bg-3 {background-color: #7902FF; color: #fff; }
    .curriculum-desc {font-size: 18px; color: #000; line-height: 1.6; margin-bottom: 15px; flex-grow: 1;}
    .curriculum-duration {font-size: 16px; color: #000; display: block; margin-bottom: 15px;}
    .curriculum-price {font-size: 24px; font-weight: 700; color: #7800FF; margin-top: auto;}
    .curriculum-etc {font-size: 12px; font-weight: 500; color: #000;}
    .createEdu_span {display: flex; align-items: center; justify-content: center; border-radius: 50%;}

    /* 커리큘럼 배너 */
    .curriculum-banner {background-color: #766de7; border-radius: 20px; padding: 40px 30px; margin: 60px 0; text-align: center;}
    .curriculum-banner h1 {color: #fff; font-size:28px; font-weight: 600; line-height: 1.6; margin: 0;}

    /* 갤러리 그리드 */
    .curriculum-gallery {border-radius: 15px; overflow: hidden; gap: 16px; width: 100%; margin-top: 40px;}
    .curriculum-gallery-top {display: grid; grid-template-columns: repeat(24, 1fr); grid-template-rows: repeat(12, 1fr); height: 600px;}
    .curriculum-gallery-bottom {display: grid; grid-template-columns: repeat(24, 1fr); grid-template-rows: repeat(4, 1fr); height: 400px;}
    .gallery-item {border-radius: 15px; overflow: hidden; background-color: #f0f0f0;}
    .gallery-item img {width: 100%; height: 100%; object-fit: cover; display: block;}
    .gallery-item:nth-child(1) {grid-column: 1/10; grid-row: 1/6;}
    .gallery-item:nth-child(2) {grid-column: 10/17; grid-row: 1/9;}
    .gallery-item:nth-child(3) {grid-column: 17/21; grid-row: 1/5;}
    .gallery-item:nth-child(4) {grid-column: 21/25; grid-row: 1/5;}
    .gallery-item:nth-child(5) {grid-column: 1/10; grid-row: 6/9;}
    .gallery-item:nth-child(6) {grid-column: 17/21; grid-row: 5/9;}
    .gallery-item:nth-child(7) {grid-column: 21/25; grid-row: 5/9;}
    .gallery-item:nth-child(8) {grid-column: 1/7; grid-row: 9/13;}
    .gallery-item:nth-child(9) {grid-column: 7/13; grid-row: 9/13;}
    .gallery-item:nth-child(10) {grid-column: 13/19; grid-row: 9/13;}
    .gallery-item:nth-child(11) {grid-column: 19/25; grid-row: 9/13;}
    .gallery-item-normal {grid-column: span 1; grid-row: span 1;}
    .gallery-item-large-2x2 {grid-column: span 8; grid-row: span 2;}
    .gallery-item-large-2x3 {grid-column: span 8; grid-row: span 2;}
    .gallery-item-4x4 {grid-column: span 4; grid-row: span 4;}
    .gallery-item-9x5 {grid-column: span 9; grid-row: span 5;}
    .gallery-item-9x3 {grid-column: span 9; grid-row: span 3; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;}
    .gallery-item-9x3 .gallery-sub-item {border-radius: 15px; overflow: hidden;}
    .gallery-item-9x3 .gallery-sub-item img {width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: cover; display: block;}
    .gallery-item-7x8 {grid-column: span 7; grid-row: span 8;}
    .gallery-item-6x4 {grid-column: span 6; grid-row: span 4;}
    .gallery-item-hidden {display: none;}
    
    .h_box {
        border-radius: 20px; background-color: rgb(255, 255, 255); box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.26); width: 198px; height: 41px;
        font-size:15px; text-align: center; font-weight: 800; color:#7800FF; display: flex; align-items: center; justify-content: center; gap: 5px;
    }
    .h_box1 {
        border-radius: 10px; border: 2px solid rgba(94, 94, 94, 0.38); background-color: rgba(255, 255, 255, 0.6);
        box-shadow: 0px 5px 9px 0px rgba(0, 0, 0, 0.11);
        width: 207px; height: 160px;
        display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15px;
    }
    .h_box1 img {width: 50px; height: 60px; object-fit: contain;}
    .h_box1_span1 {font-size: 35px; font-weight: 600; height: 35px; line-height: 28px; margin: 10px 0 5px 0;}
    .h_box1_span2 {font-size: 15px; font-weight: 600; height: 35px; line-height: 45px;}
    .h_box1_span sup {font-size: 1em; top: 0.26em; font-weight: 600; position: relative;}
    
    .create_area2_box2 {display: flex; flex-direction: row; justify-content: space-around; align-items: center; margin-top: 25px; width: 90%;}
    .create_area2_box3 {display: flex; flex-direction: column; align-items: center;}
    .create_area2_box3_p {font-size: 22px; line-height:40px; font-weight: 700;}
    .create_area2_box3_span {font-size: 14px; line-height:15px; font-weight: 500;}
    .create_area2_box4 {display: flex; flex-direction: column; align-items: center; gap: 15px;}
    .create_area2_box5 {
        border-radius: 20px; border: 1px solid rgb(157, 157, 157); background-color: rgb(255, 255, 255);
        width: 205px; height: 34px; font-size: 15px; line-height:33px; font-weight: 600;
    }
    .create_area2_box_bnt {
        border-radius: 15px; background-color: rgb(120, 0, 255);
        width: 477px; height: 41px; color: #fff; font-size: 17px; line-height:38px; font-weight: 400;
    }


    
    /* ==========================================================================
       [반응형 미디어 쿼리] - 모바일/태블릿 대응
       ========================================================================== */

    /* 1. 태블릿 및 노트북 (1200px 이하) */
    @media (max-width: 1200px) {
        .main_container { margin-top: 100px !important; }
        .create_area3, .create_area5, .create_area7, .create_area9, .create_area10 { margin-top: 100px !important; }
        .bottomBanner { margin-top: 100px; }
    }

    /* 2. 모바일 (900px 이하) */
    @media (max-width: 1100px) {
        /* 히어로 섹션 - 배경 높이 확보 */
        .main_img1 { height: 1100px; } 
        
        /* 텍스트 오버레이 */
        .main_img_text1 { 
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 
            display: flex; flex-direction: column; align-items: center; justify-content: center;
        }
        
        .h5_box { font-size: 28px; line-height: 1.3; }
        .main_img_text1_h5 { font-size: 28px; }
        .main_img_text1_h6 { font-size: 16px; line-height: 1.5; margin-top: 10px; }
        
        /* 통계 박스 줄바꿈 */
        .h7_box { flex-wrap: wrap; gap: 10px; width: 100%; height: auto; justify-content: center; }
        .h_box1 { 
            width: 45%; height: auto; padding: 15px 10px; min-height: 120px; 
            margin-bottom: 5px; background-color: rgba(255, 255, 255, 0.95);
        }
        
        /* 버튼 정렬 */
        .buttonBox { flex-direction: column; gap: 10px; width: 100%; margin-top: 15px; }
        .buttonBox a { width: 100%; max-width: 300px; }

        /* 사용자 카드 (크리에이터/교사) */
        .create_area2 { flex-wrap: wrap; gap: 20px; }
        .create_area2_box { 
            width: 100% !important; max-width: 400px; height: auto !important; 
            padding-bottom: 20px; 
        }
        
        .create_area2_box2 { flex-direction: column; width: 100%; margin-top: 30px; gap: 20px; }
        .create_area2_box_bnt { width: 90%; max-width: 300px; margin-top: 20px; }

        /* 혁신 강점 (4열 -> 2열 -> 1열) */
        .create_area4 { flex-wrap: wrap; gap: 15px; justify-content: center; }
        .create_area4_box { width: 48%; min-width: 150px; margin-bottom: 10px; }
        @media (max-width: 600px) { .create_area4_box { width: 100%; max-width: 400px; } }

        /* 기능 구현 GIF */
        .create_area6 { flex-wrap: wrap; justify-content: center; gap: 15px; }
        .create_area6_div { width: 45%; }
        @media (max-width: 500px) { .create_area6_div { width: 90%; } }

        /* 템플릿 카드 */
        .create_area12, .create_area12_2 { flex-wrap: wrap; }
        
        /* [중요] 높이 자동화 및 하단 여백 추가 */
        .create_area13 { 
            width: 100% !important; max-width: 400px; 
            margin-bottom: 20px; 
            height: auto !important; /* 내용에 따라 늘어나도록 */
            padding-bottom: 25px;    /* 버튼 공간 확보 */
        }
        /* [중요] 버튼 위치 및 정렬 수정 */
        .create_area13_5 { 
            transform: none !important; /* PC용 이동 해제 */
            width: 90%; max-width: 310px; 
            margin: 20px auto 0 auto;   /* 중앙 정렬 */
        }

        /* 제작 과정 (Step) */
        .create_box8 { 
            flex-direction: column-reverse; 
            padding: 30px 20px; margin-top: 30px !important;
            gap: 20px;
        }
        .create_box_text_8 { width: 100%; text-align: center; }
        .img8_a { width: 100%; }
        .create_box_text_8_h3 { font-size: 40px; margin-bottom: 10px; }
        .create_box_text_8_p { font-size: 24px; margin-bottom: 10px; }
        .create_box_text_8_span { font-size: 16px; line-height: 1.5; }
        .help_box { position: relative; top: auto; right: auto; left: auto; margin-bottom: 15px; display: inline-block; }

        /* 프리미엄 그리드 */
        .thirdGrid { grid-template-columns: 1fr 1fr; }
        @media (max-width: 600px) { .thirdGrid { grid-template-columns: 1fr; } }

        /* 성공 사례 */
        .create_area14 { flex-wrap: wrap; }
        .create_area14_1 { width: 100%; max-width: 400px; height: auto; padding-bottom: 30px; }

        /* 하단 배너 */
        .bottomBanner { height: auto; padding: 60px 20px; }
        .bottomBanner_div1 { flex-wrap: wrap; }
        .bottomBanner_div1_div { width: 100% !important; max-width: 300px; }
        .bottomBanner_div3 { flex-direction: column; gap: 15px; }
        
        .bottomBtn { flex-wrap: wrap; justify-content: center; }
        .createEdu, .pracBtn { width: 100%; max-width: 300px; }

        /* 폰트 사이즈 조정 */
        .create_area1_h3, .create_area3_h3, .create_area5_h3, .create_area7_h3, .create_area9_h3, .create_area11_h3 { font-size: 26px; }
        .create_area1_p, .create_area3_p, .create_area5_p, .create_area7_p, .create_area9_p, .create_area11_p { padding: 0 10px; font-size: 16px; line-height: 1.6; }
    }


.subscribe-banner {
    width: 100%;
    background: linear-gradient(90deg, #6F52A2 0%, #7064BC 50%, #7172D0 100%);
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 120px;
}

.subscribe-banner-inner {
    width: 100%;
    max-width: 1300px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.subscribe-banner-title {
    font-size: 42px;
    font-weight: 700;
    color: #fff;
    line-height: 52px;
}

.subscribe-banner-desc {
    margin-top: 22px;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
}

.feature-heading {
    font-size: 42px;
    font-weight: 800;
    color: #000;
    text-align: center;
}

.feature-subtitle {
    margin-top: 22px;
    font-size: 22px;
    font-weight: 500;
    color: #000;
    line-height: 34px;
    text-align: center;
}
.upWrap-a{display: flex; align-items: center; justify-content: center; gap: 10px; width: 232px; height: 48px; border-radius: 24px; background: #fff; border: 1px solid #000; font-size: 18px; font-weight: 600; color: #000; cursor: pointer; margin: 0 auto; margin-top: 30px; z-index: 5; position: relative;}
.upWrap-a span{width: 18.5px; height: 18.5px; border-radius: 50%; background: #000; display: flex; align-items: center; justify-content: center;}

.plan-container {
    width: 100%;
    /* margin-top: 150px; */
    padding-top: 120px;
    background-color: rgb(248,245,254);
}

.plan-heading {
    font-size: 36px;
    font-weight: 800;
    color: #000;
    text-align: center;
}

.plan-subtitle {
    margin-top: 40px;
    font-size: 22px;
    font-weight: 500;
    color: #000;
    text-align: center;
}

.plan-tab {
    width: 214px;
    height: 62px;
    border-radius: 31px;
    border: 1px solid #8B8B8B;
    background: #fff;
    display: flex;
    position: relative;
    align-items: center;
    padding: 8px;
    margin: 0 auto;
    margin-top: 58px;
}

.plan-tab-item {
    width: 50%;
    height: 100%;
    background: none;
    color: #000;
    font-size: 18px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.plan-tab-item.on-tab {
    color: #fff;
    background: #643FCE;
    border-radius: 40px;
}

.plan-tab-image {
    position: absolute;
    right: -120px;
}

.plan-discount-badge {
    position: absolute;
    right: -120px;
    background: #F0D3D7;
    color: #643FCE;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
}

.plan-price-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin: 60px auto 0;
    max-width: 1270px;
}

.plan-box {
    width: 430px;
    min-height: 770px;
    border-radius: 40px;
    border: none;
    background: #fff;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    padding: 40px 30px;
    justify-content: space-between;
}

.plan-box-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.plan-box.featured {
    border: 2px solid #643FCE;
    box-shadow: 0 20px 60px rgba(100, 63, 206, 0.15);
}

.plan-badge {
    position: absolute;
    top: -20px;
    background: #643FCE;
    color: #fff;
    padding: 6px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.message-box {
    display: inline-block;
    background: transparent;
    font-weight: 600;
    font-size: 16px;
    padding: 6px 12px;
    border-radius: 15px;
    color: #404040;
    transition: all 0.3s ease;
}

.plan-title {
    font-size: 30px;
    font-weight: 800;
    color: #404040;
    margin-top: 10px;
    transition: all 0.3s ease;
}

.plan-featured-title {
    color: #643FCE;
}

.plan-subtitle {
    font-size: 20px;
    font-weight: 500;
    color: #000;
    margin-top: 18px;
}

.plan-heading-price {
    font-size: 20px;
    margin-top: 30px;
    font-weight: 500;
    color: #000;
}

.plan-heading-price span {
    font-size: 30px;
    font-weight: 700;
}

.plan-featured-price span {
    color: #643FCE;
}

.plan-button {
    width: 306px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 33px;
    background: #404040;
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 60px;
    align-self: center;
}

.plan-button:hover {
    background: #303030;
}

.plan-box.featured .plan-button {
    background: #643FCE;
    width: 340px;
}

.plan-box.featured .plan-button:hover {
    background: #762CC7;
}

.plan-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-top: 60px;
}

.plan-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 600;
    color: #3F3F3F;
}

.plan-list-item img {
    width: 24px;
    height: auto;
}

.plan-list-item:has(img[src*="check-black"]) {
    color: #3F3F3F;
}

.plan-list-item:has(img[src*="x-gray"]) {
    color: #B5B5B5;
}

.plan-list-item:has(img[src*="check-purple"]) {
    color: #000;
}

.plan-bottom {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 60px;
    padding-bottom: 60px;
}

.plan-bottom-text {
    font-size: 20px;
    font-weight: 400;
    color: #808080;
    line-height: 30px;
    text-align: center;
    margin-top: 16px;
}

.plan-box.featured .message-box {
    color: #643fce;
}

.title-type2{
    font-size: 32px;
    font-weight: 700;
    color: #000;
    text-align: center;
}