@media (max-width: 1300px) {
    body.sub-body {
        margin-top: 0 !important;
        padding-top: 110px;
    }
}
@media (max-width: 768px) {
    body.sub-body {
        padding-top: 90px;
    }
}
  /* ==========================================================================
       [PC 기반 기본 스타일] - 원본 디자인 유지
       ========================================================================== */

     /* 크리에이터 배너 - 교사마켓 mediaBox 스타일 적용 */
    .create-banner-wrap.mediaBox { width: 100%; }
    .create-banner-bg.bannerContainer {
        width: 100%;
        min-height: 350px;
        max-height: 350px;
        box-sizing: border-box;
        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;
    }
    .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: 350px;
        max-height: 350px;
        box-sizing: border-box;
        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;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        margin-top: 20px;
    }
    .create-banner-wrap .bannerBtn {
        height: 40px;
        padding: 0 14px;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
        transition: opacity 0.2s;
        flex: 0 1 auto;
        min-width: 0;
        white-space: nowrap;
    }
    .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: 13px; height: 13px; flex-shrink: 0; }
    
    @media (max-width: 1300px) {
        .create-banner-bg.bannerContainer {
            min-height: 320px;
            max-height: 320px;
            background-size: cover;
            background-position: center;
        }
        .create-banner-wrap .bannerInner {
            min-height: 320px;
            max-height: 320px;
            padding: 36px 22px;
        }
        .create-banner-wrap .leftBanner > h1 { font-size: 32px; }
        .create-banner-wrap .leftBanner > p { font-size: 16px; }
        .create-banner-wrap .bannerTitle > p { font-size: 15px; }
        .create-banner-wrap .bannerBtn { font-size: 13px; height: 38px; padding: 0 12px; }
    }
    @media (max-width: 1024px) {
        .create-banner-bg.bannerContainer {
            min-height: 300px;
            max-height: 300px;
        }
        .create-banner-wrap .bannerInner {
            min-height: 300px;
            max-height: 300px;
            padding: 32px 20px;
        }
        .create-banner-wrap .leftBanner > h1 { font-size: 30px; }
        .create-banner-wrap .leftBanner > p { font-size: 15px; }
        .create-banner-wrap .bannerTitle { height: 40px; padding: 0 16px; }
        .create-banner-wrap .bannerTitle > p { font-size: 14px; }
        .create-banner-wrap .bannerBtn { font-size: 13px; height: 36px; padding: 0 10px; }
    }
    @media (max-width: 768px) {
        .create-banner-bg.bannerContainer {
            min-height: 260px;
            max-height: 260px;
            background-size: cover;
            background-position: center;
        }
        .create-banner-wrap .bannerInner {
            min-height: 260px;
            max-height: 260px;
            padding: 24px 18px;
            justify-content: center;
            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; margin-top: 16px; }
        .create-banner-wrap .leftBanner > p { font-size: 15px; text-align: center; }
        .create-banner-wrap .bannerButtons {
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: stretch;
            width: 100%;
            margin-top: 14px;
            gap: 8px;
            box-sizing: border-box;
        }
        .create-banner-wrap .bannerBtn {
            flex: 1 1 0;
            min-width: 0;
            width: auto;
            height: 36px;
            padding: 0 12px;
            font-size: 12px;
            gap: 5px;
            border-radius: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .create-banner-wrap .bannerBtn > img { width: 11px; height: 11px; }
    }
    @media (max-width: 480px) {
        .create-banner-bg.bannerContainer {
            min-height: 220px;
            max-height: 220px;
        }
        .create-banner-wrap .bannerInner {
            min-height: 220px;
            max-height: 220px;
            padding: 20px 14px;
        }
        .create-banner-wrap .leftBanner > h1 { font-size: 20px; }
        .create-banner-wrap .leftBanner > p { font-size: 14px; }
        .create-banner-wrap .bannerTitle { height: 36px; padding: 0 14px; }
        .create-banner-wrap .bannerTitle > p { font-size: 13px; }
        .create-banner-wrap .bannerButtons { margin-top: 12px; gap: 6px; }
        .create-banner-wrap .bannerBtn { font-size: 11px; height: 34px; padding: 0 12px; border-radius: 17px; }
        .create-banner-wrap .bannerBtn > img { width: 10px; height: 10px; }
    }
    @media (max-width: 345px) {
        .create-banner-bg.bannerContainer {
            min-height: 200px;
            max-height: 200px;
        }
        .create-banner-wrap .bannerInner {
            min-height: 200px;
            max-height: 200px;
            padding: 16px 12px;
        }
        .create-banner-wrap .leftBanner > h1 { font-size: 17px; }
        .create-banner-wrap .leftBanner > p { font-size: 13px; }
        .create-banner-wrap .bannerBtn { font-size: 10px; height: 32px; padding: 0 10px; border-radius: 16px; }
        .create-banner-wrap .bannerBtn > img { width: 9px; height: 9px; }
    }


    .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_h3-head,
    .create_area1_h3-tail {
        white-space: nowrap;
    }
    .create_area1_p {line-height:34px;font-size:22px;margin-bottom:60px;}
    /* 901px 초과·501px 이상: 예전 <br> 기준 2줄 / max-width 500px 이하에서만 세그먼트마다 줄바꿈 */
    .create_area1_p-line {
        display: block;
    }
    .create_area1_p-line + .create_area1_p-line {
        margin-top: 0.15em;
    }
    .create_area1_p-seg {
        display: inline;
        word-break: keep-all;
    }

    /* 사용자 유형 카드 (크리에이터/교사 등) */
    .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 제어를 위해 */
        justify-content: space-between;
        padding-bottom: 20px;
    }

    .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; justify-content: center;}
    .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-seg, 원래 <br> 구간은 .curriculum-banner-line */
    .curriculum-banner {background-color: #766de7; border-radius: 20px; padding: 40px 30px; margin: 60px 0; text-align: center;}
    .curriculum-banner .curriculum-banner-title {
        color: #fff;
        font-size: 28px;
        font-weight: 600;
        line-height: 1.55;
        margin: 0;
    }
    .curriculum-banner-line {
        display: block;
    }
    .curriculum-banner-line + .curriculum-banner-line {
        margin-top: 0.2em;
    }
    .curriculum-banner-seg {
        display: inline;
        word-break: keep-all;
    }

    /* 갤러리 그리드 */
    .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;
    }
    .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: 96px;
    }
    
    .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-title-line2 {
        white-space: nowrap;
    }
    .subscribe-banner-desc-sep {
        white-space: nowrap;
    }

    .subscribe-banner-desc {
        margin-top: 16px;
        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;
    }
    /* 스쿨 플랜 상단 리드: 631px 이상 예전 <br> 기준 2줄 / max-width 630px 이하 세그먼트 4줄 */
    .plan-subtitle--lead .plan-subtitle-line {
        display: block;
    }
    .plan-subtitle--lead .plan-subtitle-line + .plan-subtitle-line {
        margin-top: 0.15em;
    }
    .plan-subtitle--lead .plan-subtitle-seg {
        display: inline;
        word-break: keep-all;
    }
    @media (max-width: 630px) {
        .plan-subtitle--lead .plan-subtitle-line {
            display: contents;
        }
        .plan-subtitle--lead .plan-subtitle-seg {
            display: block;
        }
    }

    .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;
    }
    /* 앞/뒤 덩어리 내부 자동 줄바꿈 없음 — 폭이 부족할 때만 뒤 덩어리가 다음 줄로 */
    .title-type2-head,
    .title-type2-tail {
        white-space: nowrap;
    }


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

/* 1. 태블릿 및 소형 데스크탑 (1200px 이하) */
@media (max-width: 1200px) {
    .main_container, .plan-container, .roadmap_wrapper { 
        padding-left: 20px; 
        padding-right: 20px; 
        box-sizing: border-box; 
    }
    
    /* 1. 요금제 컨테이너: 세로 나열 -> 가로 스와이프(슬라이드)로 변경 */
    .plan-price-container { 
        flex-direction: row !important; /* 가로 배열 강제 */
        flex-wrap: nowrap !important; /* 줄바꿈 금지 */
        overflow-x: auto; /* 가로 스크롤 활성화 */
        scroll-snap-type: x mandatory; /* 스와이프 시 카드에 딱딱 달라붙게 */
        -webkit-overflow-scrolling: touch; /* 아이폰 부드러운 스크롤 */
        justify-content: flex-start !important; /* 왼쪽부터 시작 */
        padding: 30px 15px 40px 15px; /* 👈 맨 앞 숫자를 30px로 변경! */
        gap: 15px; /* 카드 사이 간격 */
        width: 100%;
        box-sizing: border-box;
    }

    /* 스크롤바 숨기기 (깔끔한 UI를 위해) */
    .plan-price-container::-webkit-scrollbar { display: none; }
    .plan-price-container { -ms-overflow-style: none; scrollbar-width: none; }

    /* 2. 요금제 개별 카드: 화면의 85%만 차지하여 옆 카드가 살짝 보이도록 유도 */
    .plan-box { 
        flex: 0 0 85% !important; /* 중요: 화면 너비의 85% 고정 */
        max-width: 340px; 
        min-height: auto;
        scroll-snap-align: center; /* 스와이프 시 화면 중앙에 위치 */
        padding: 30px 20px; 
        margin: 0;
        box-sizing: border-box; /* 패딩 때문에 너비가 커지는 것 방지 */
    }

    /* 3. [해결] 버튼 짤림 방지: PC 고정값 무시하고 카드 너비에 100% 맞춤 */
    .plan-button,
    .plan-box.featured .plan-button { 
        width: 100% !important; 
        max-width: 100%;
        height: 54px;
        margin-top: 30px;
        font-size: 18px;
        box-sizing: border-box;
    }

    /* 4. 혜택 리스트: 좌측 정렬하여 가독성 개선 */
    .plan-list { 
        width: 100%; 
        align-items: flex-start !important; /* 텍스트 시작점 통일 */
        padding-left: 5%; 
        gap: 12px;
        margin-top: 25px;
        box-sizing: border-box;
    }
    /* 1. 가격 부분이 세 줄로 쪼개지는 현상 방지 */
    .plan-heading-price { 
        display: flex; 
        align-items: baseline; 
        justify-content: center; 
        gap: 4px; /* 글자 사이 간격 살짝 */
        margin-top: 15px; 
        margin-bottom: 15px; 
    }
    .plan-heading-price span { 
        white-space: nowrap; /* '₩ 159,000'이 절대 쪼개지지 않도록 묶음 */
    }

    /* 2. 리스트 아이템 단어 끊김 및 아이콘 정렬 해결 */
    .plan-list-item { 
        display: flex;
        align-items: flex-start !important; /* 글이 길어져도 아이콘은 항상 첫 줄에 고정 */
        gap: 10px;
        font-size: 15px; 
        text-align: left; 
        line-height: 1.4; /* 줄간격 확보로 답답함 해소 */
        word-break: keep-all; /* 한글 단어가 중간에 쪼개지지 않도록 보호 (예: 템플릿 유지) */
    }

    /* 3. 공간이 좁아질 때 체크 아이콘이 찌그러지는 현상 방지 */
    .plan-list-item img { 
        flex-shrink: 0; /* 화면이 좁아져도 아이콘 크기 유지 */
        margin-top: 2px; /* 텍스트 첫 줄과 시각적 중심선 맞추기 */
        width: 18px;
        height: auto;
    }
    .plan-bottom {
        margin-top: 0px;
    }
}

/* 2. 모바일 (900px 이하) */
@media (max-width: 900px) {
    /* 텍스트 크기 일괄 조정 */
    .create_area1_h3, .create_area3_h3, .create_area5_h3, .create_area7_h3, 
    .create_area9_h3, .create_area11_h3, .feature-heading, .plan-heading, 
    .subscribe-banner-title, .title-type2 { 
        font-size: 26px !important; 
        line-height: 1.4; 
        word-break: keep-all; 
        padding: 0 10px;
    }
    
    .create_area1_p, .create_area3_p, .create_area5_p, .create_area7_p, 
    .create_area9_p, .create_area11_p, .feature-subtitle, .plan-subtitle, 
    .subscribe-banner-desc { 
        font-size: 16px !important; 
        line-height: 1.6; 
        padding: 0 10px; 
        word-break: keep-all; 
        margin-bottom: 40px;
    }

    /* 구독 배너: 말줄임 없음 — 첫 덩어리만 필요 시 줄바꿈, 쉼표 뒤·가운뎃점 뒤 문구는 nowrap */
    .subscribe-banner-inner .subscribe-banner-title {
        font-size: 21px !important;
        line-height: 1.4 !important;
        display: block;
        word-break: keep-all;
        overflow-wrap: normal;
        max-width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 0 6px;
    }
    .subscribe-banner-inner .subscribe-banner-desc {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-top: 10px !important;
        margin-bottom: 0 !important;
        word-break: keep-all;
        overflow-wrap: normal;
        padding: 0 6px;
    }
    .subscribe-banner-inner {
        padding: 0 8px;
        box-sizing: border-box;
    }

    /* Area 2: 교사/학생 크리에이터 카드 (모바일 2x2 배열) */
    .create_area2 { 
        flex-direction: row !important; /* 세로가 아닌 가로 나열로 변경 */
        flex-wrap: wrap;
        justify-content: center; 
        gap: 15px; 
        padding: 0 10px;
    }
    .create_area2_box { 
        width: calc(50% - 10px) !important; /* 2개씩 반반 차지 (여백 계산) */
        max-width: none !important; 
        height: auto !important; 
        padding-bottom: 20px; 
        box-sizing: border-box;
    }
    
    /* 좁아진 카드 안에 내용이 튀어나가지 않도록 내부 세로 정렬 및 크기 축소 */
    .create_area2_box2 { 
        flex-direction: column !important; /* 이미지와 태그를 좌우가 아닌 위아래 배치 */
        gap: 10px; 
        margin-top: 15px; 
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }
    .create_area2_box3 img {
        width: 65px; /* 캐릭터 이미지 크기 축소 */
        height: auto;
    }
    .create_area2_box3_p {
        font-size: 15px !important; /* '교사 크리에이터' 폰트 축소 */
        line-height: 1.4 !important;
        margin-top: 5px;
        word-break: keep-all;
    }
    
    /* 카드 내부 태그(흰색 둥근 버튼) 최적화 */
    .create_area2_box4 {
        width: 100%;
        gap: 8px !important;
    }
    .create_area2_box5 {
        width: 100% !important; 
        height: auto !important;
        padding: 6px 4px;
        font-size: 11px !important; /* 태그 글씨 축소 */
        line-height: 1.2 !important;
        box-sizing: border-box;
        word-break: keep-all;
    }
    
    /* 하단 보라색 강조 버튼 최적화 */
    .create_area2_box_bnt { 
        width: 90% !important; 
        height: auto !important;
        padding: 10px 5px;
        margin-top: 15px; 
        font-size: 12px !important; /* 하단 버튼 글씨 축소 */
        line-height: 1.3 !important;
        word-break: keep-all;
    }

    /* Area 4: 4가지 핵심 — 2×2 그리드 + 카드·이미지·타이포 전체 축소 */
    .create_area4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding: 0 10px;
        box-sizing: border-box;
    }
    .create_area4_box {
        border-radius: 14px;
        min-width: 0;
    }
    .img_box4 {
        height: 118px;
    }
    .img_box4 img {
        border-radius: 14px 14px 0 0;
    }
    .area4_center_box_p {
        font-size: 17px;
        margin-top: 12px;
        margin-bottom: 8px;
        line-height: 1.25;
        word-break: keep-all;
        padding: 0 6px;
    }
    .area4_center_box_span {
        font-size: 13px;
        line-height: 1.45;
        padding: 0 8px;
        word-break: keep-all;
    }
    .area4_check_box {
        font-size: 13px;
        display: flex;
        align-items: flex-start;
        word-break: keep-all;
    }
    .area4_check_box_img {
        width: 14px;
        height: auto;
        margin-right: 8px;
        flex-shrink: 0;
        margin-top: 2px;
    }
    .area4_check_box_span {
        font-size: inherit;
        line-height: 1.4;
    }
    .area4_center_box2 {
        padding: 12px 10px 14px;
    }
    .af {
        margin-top: 10px;
    }

    /* 스쿨 플랜 요금제 섹션 */
    .plan-container { 
        padding-top: 80px; 
    }
    .plan-price-container { 
        flex-direction: column; 
        align-items: center; 
        margin-top: 40px; 
    }
    .plan-box { 
        width: 100%; 
        max-width: 450px; 
        padding: 30px 20px; 
    }
    .plan-list-item {
        gap: 8px;
        font-size: 13px;
        font-weight: 500;
    }
    
    /* 요금제 상단 탭 뱃지 위치 수정 (잘림 방지) */
    .plan-tab { 
        margin-top: 60px; 
    }
    .plan-discount-badge { 
        right: 50%; 
        transform: translateX(50%); 
        top: -45px; 
        font-size: 14px;
        padding: 6px 14px;
    }

    /* 구독 배너 */
    .subscribe-banner { 
        height: auto; 
        padding: 40px 16px; 
        margin-top: 64px;
        box-sizing: border-box; 
    }

    /* 하단 커리큘럼 배너 */
    .curriculum-banner {
        padding: 30px 20px;
        margin: 40px 0;
    }
    .curriculum-banner .curriculum-banner-title {
        font-size: 20px;
        line-height: 1.45;
        padding: 0 8px;
        box-sizing: border-box;
    }

    /* 그리드 시스템 (4열/3열 -> 2열/1열) */
    .feature-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 20px; 
        margin-top: 40px;
    }
    .feature-box {
        min-width: 0;
    }
    /* 카드 제목·요약: 2줄 초과 시 말줄임(그리드 줄 높이 들쭉날쭉 완화) */
    .feature-box-title,
    .feature-box-desc {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }
    /* 커리큘럼: 2열 + 3번째 카드 전폭 가운데, 타이포·패딩 축소 */
    .curriculum-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        max-width: 100%;
        margin: 32px auto 0;
        padding: 0 10px;
        box-sizing: border-box;
    }
    .curriculum-box:nth-child(3) {
        grid-column: 1 / -1;
        max-width: min(100%, 420px);
        margin: 0 auto;
        justify-self: center;
        width: 100%;
    }
    .curriculum-box {
        min-width: 0;
        padding: 22px 14px 14px;
    }
    .curriculum-time {
        font-size: 13px;
        padding: 5px 12px;
        margin-bottom: 10px;
    }
    .curriculum-desc {
        font-size: 15px;
        line-height: 1.45;
        margin-bottom: 10px;
        flex-grow: 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        line-clamp: 5;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }
    .curriculum-duration {
        font-size: 14px;
        margin-bottom: 10px;
    }
    .curriculum-price {
        font-size: 20px;
    }
    .curriculum-etc {
        font-size: 11px;
    }

    /* 갤러리 섹션 모바일 최적화 (복잡한 그리드 해제) */
    .curriculum-gallery-top {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        height: auto;
        gap: 10px;
    }
    .gallery-item { 
        grid-column: span 1 !important; 
        grid-row: span 1 !important; 
        aspect-ratio: 1/1; 
    }
    .gallery-item-9x3 { 
        grid-column: span 2 !important; 
        display: flex; 
        gap: 10px; 
    }
    .gallery-item-9x3 .gallery-sub-item { 
        flex: 1; 
    }

    /* 하단 배너 */
    .bottomBanner { 
        height: auto; 
        padding: 60px 20px; 
        box-sizing: border-box; 
        margin-top: 80px;
    }
    .bottomBanner_h1 { 
        font-size: 24px; 
        word-break: keep-all; 
    }
    .bottomBtn { 
        flex-direction: column; 
        width: 100%; 
    }
    .bottomBtn_a, .createEdu, .pracBtn { 
        width: 100%; 
        max-width: 350px; 
        box-sizing: border-box; 
        margin: 0;
    }
}

/* 3. 모바일 세로화면 (500px 이하) — create_area4는 2×2 유지, 한 단계 더 축소 */
@media (max-width: 500px) {
    .create_area4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 0 8px;
    }
    .create_area4_box {
        border-radius: 12px;
    }
    .img_box4 {
        height: 96px;
    }
    .img_box4 img {
        border-radius: 12px 12px 0 0;
    }
    .area4_center_box_p {
        font-size: 15px;
        margin-top: 10px;
        margin-bottom: 6px;
        padding: 0 4px;
    }
    .area4_center_box_span {
        font-size: 12px;
        line-height: 1.4;
        padding: 0 6px;
    }
    .area4_check_box {
        font-size: 12px;
    }
    .area4_check_box_img {
        width: 12px;
        margin-right: 6px;
        margin-top: 1px;
    }
    .area4_center_box2 {
        padding: 10px 8px 12px;
    }
    .af {
        margin-top: 8px;
    }

    /* feature: 500 이하도 2열 + 타이포·썸네일 모서리 축소 */
    .feature-heading {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }
    .feature-subtitle {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-top: 12px !important;
    }
    .title-type2 {
        font-size: 22px !important;
        line-height: 1.35 !important;
    }
    .title-type2-tail {
        display: block;
    }
    .create_area1_h3 {
        font-size: 22px !important;
        line-height: 1.35 !important;
    }
    .create_area1_h3-tail {
        display: block;
    }
    .create_area1_p {
        font-size: 15px !important;
        line-height: 1.45 !important;
    }
    /* 500 이하: 세그먼트 줄바꿈(기본 display:inline보다 뒤에 두어 확실히 적용) */
    .create_area1_p-line {
        display: contents;
    }
    .create_area1_p-seg {
        display: block;
    }
    .curriculum-banner-line {
        display: contents;
    }
    .curriculum-banner-seg {
        display: block;
    }
    .curriculum-banner {
        padding: 24px 14px;
        margin: 32px 0;
    }
    .curriculum-banner .curriculum-banner-title {
        font-size: 17px;
        line-height: 1.4;
        padding: 0 6px;
    }
    .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 28px;
    }
    .feature-image {
        border-radius: 14px;
    }
    .feature-box-title {
        font-size: 14px;
        margin-top: 10px;
        margin-bottom: 6px;
        line-height: 1.25;
        word-break: keep-all;
    }
    .feature-box-desc {
        font-size: 12px;
        line-height: 1.35;
        word-break: keep-all;
    }
    .upWrap-a {
        width: 100%;
        max-width: 240px;
        height: 42px;
        font-size: 14px;
        margin-top: 18px;
    }

    .subscribe-banner {
        padding: 32px 12px;
        margin-top: 48px;
    }
    .subscribe-banner-inner .subscribe-banner-title {
        font-size: 19px !important;
        padding: 0 4px;
    }
    .subscribe-banner-inner .subscribe-banner-desc {
        font-size: 13px !important;
        margin-top: 8px !important;
    }

    /* 갤러리 가로로 긴 묶음 처리 */
    .gallery-item-9x3 { 
        flex-direction: column; 
    }
    .gallery-item-9x3 .gallery-sub-item { 
        aspect-ratio: 1/1; 
    }

    /* 상세 폰트 조정 */
    .plan-heading-price span { 
        font-size: 24px; 
    }
    .plan-bottom-text { 
        font-size: 14px; 
        line-height: 1.5; 
    }
}

/* 커리큘럼: 480 이하 — 2열이 너무 좁아지면 깨지므로 1열 + 설명 말줄임 해제 */
@media (max-width: 480px) {
    .curriculum-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 0 12px;
        margin-top: 28px;
    }
    .curriculum-box:nth-child(3) {
        grid-column: auto;
        max-width: 100%;
        margin: 0;
        justify-self: stretch;
        width: 100%;
    }
    .curriculum-box {
        padding: 20px 16px 14px;
    }
    .curriculum-desc {
        display: block;
        -webkit-box-orient: unset;
        -webkit-line-clamp: unset;
        line-clamp: unset;
        overflow: visible;
        text-overflow: unset;
        font-size: 15px;
        line-height: 1.55;
        flex-grow: 1;
        word-break: keep-all;
    }
    .curriculum-time {
        font-size: 13px;
        padding: 5px 12px;
    }
    .curriculum-duration {
        font-size: 14px;
    }
    .curriculum-price {
        font-size: 20px;
    }
}

/* create_area4: 410 이하 — 1열, 상단 이미지 가로 풀 + 크롭으로 납작한 배너 느낌 */
@media (max-width: 410px) {
    .create_area4 {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 0 10px;
    }
    .create_area4_box {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        border-radius: 12px;
        overflow: hidden;
        min-height: 0;
    }
    .area4_center_box {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        padding: 0;
        box-sizing: border-box;
    }
    .img_box4 {
        width: 100%;
        height: 78px;
        position: relative;
        overflow: hidden;
        flex-shrink: 0;
    }
    .img_box4 img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 12px 12px 0 0;
        aspect-ratio: unset;
    }
    .area4_center_box_p {
        font-size: 14px;
        margin-top: 10px;
        margin-bottom: 4px;
        line-height: 1.25;
        padding: 0 12px;
        text-align: center;
        word-break: keep-all;
    }
    .area4_center_box_span {
        font-size: 12px;
        line-height: 1.4;
        padding: 0 12px 4px;
        text-align: center;
        word-break: keep-all;
    }
    .area4_center_box2 {
        padding: 8px 12px 12px;
        box-sizing: border-box;
    }
    .area4_check_box {
        font-size: 11px;
    }
    .area4_check_box_span {
        line-height: 1.35;
    }
    .area4_check_box_img {
        width: 11px;
        margin-right: 5px;
        margin-top: 1px;
    }
    .af {
        margin-top: 6px;
    }

    /* create_area2: 410 이하 — 2열(50%)이 너무 납작하면 1열 전체폭 (900px 구간 2×2 유지 후 여기서만 1장씩) */
    .create_area2 {
        flex-direction: column !important;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 10px;
        padding: 0 10px;
        box-sizing: border-box;
    }
    .create_area2_box.create_area2_div {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* 초소형 기기 (380px 이하) — 배너·섹션 제목 한 단계 더 축소 */
@media (max-width: 380px) {
    .title-type2 {
        font-size: 19px !important;
        line-height: 1.3 !important;
    }
    .create_area1_h3 {
        font-size: 19px !important;
        line-height: 1.3 !important;
    }
    .create_area1_h3-head {
        white-space: normal;
        word-break: keep-all;
    }
    .create_area1_p {
        font-size: 14px !important;
        line-height: 1.42 !important;
    }
    .curriculum-banner {
        padding: 20px 12px;
        margin: 28px 0;
    }
    .curriculum-banner .curriculum-banner-title {
        font-size: 15px;
        line-height: 1.38;
        padding: 0 4px;
    }
}