/* ==========================================================================
       [PC 기반 기본 스타일]
       ========================================================================== */
    
    .main_img_box1 {position: relative; overflow: hidden;}
    .main_img_box1:hover .main_img1 {transform: scale(1.05);} /* 확대 효과 살짝 줄임 */
    .main_img1 {    
        width: 100%;
        height: 350px;
        filter: brightness(60%);
        object-fit: cover;
        object-position: center 40%;
        transition: transform 0.4s ease;
        will-change: transform;
    }
    
    /* [핵심] PC/모바일 공통: 텍스트 컨테이너는 항상 이미지 위에 absolute로 뜹니다 */
    .main_img_text1 {
        position: absolute;
        color: #fff;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .main_img_text1 h5 {font-size:40px; text-align: center;margin-bottom:20px;}
    .main_img_text1 h6 {font-size:22px; text-align: center;}
    .main_img_text1 span {font-size:18px;text-align: center;display:block;line-height:1.5}
    .h5_box {line-height:60px; color: #000; text-align: center;}
    .h6_box {line-height:60px; margin-bottom: 33px; color: #000; text-align: center;}
    
    /* 통계 박스 컨테이너 */
    .h7_box {
        line-height:35px; color: #000;
        display: flex; align-items: center; justify-content: center;
        margin-bottom: 33px; gap: 30px;
    }
    
    /* 개별 통계 박스 */
    .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;
        box-sizing: border-box;
    }
    .h_box1 img {width: 35px; height: 30px; object-fit: contain;}
    .h_box1 span:first-of-type {font-size: 35px; font-weight: 600; height: 35px; line-height: 28px; margin: 10px 0 5px 0;}
    .h_box1 span:nth-of-type(2) {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;}

    /* 버튼 영역 */
    .buttonBox {display: flex; justify-content: center; gap: 19px;}
    .buttonBox a {font-size:18px; width: 214px; text-align: center; cursor: pointer; font-weight: 600; display: flex; justify-content: center; align-items: center;}
    .startBtn {color:#fff; border-radius: 8px; background:#7800FF; padding:15px 10px; display: flex; align-items: center; gap: 13px;}
    .giudeBtn {color:#7800FF; border-radius: 8px; background:#fff; padding:15px 10px; border:1px solid #7800FF; display: flex; align-items: center; gap: 13px;}

    /* 하단 배너 박스 (PC 위치) */
    .head_div1 {
        border: 1px solid rgb(120, 0, 255);
        border-radius: 10px;
        background-color: rgb(255, 255, 255);
        width: 465px; height: 94px;
        display: flex; flex-direction: row; align-items: center; justify-content: center;
        color: #000; gap: 30px;
        transform: translate(85%, 35%); /* PC 우측 하단 배치 */
        padding: 0px 35px 0px 55px;
        box-sizing: border-box;
    }
    .head_div2 {display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 7px;}
    .head_div2 span:nth-of-type(1) {font-size: 18px; font-weight: 600;}
    .head_div2 span:nth-of-type(2) {font-size: 14px; color: rgb(130, 130, 130); font-weight: 600;}
    .head_div2_img2 {margin-left: auto; width: 15px;}

    /* 메인 컨테이너 */
    .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_area3 { 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_area10 {margin-top:311px; text-align: center; display: flex; justify-content: center;}
    .create_area10 div, .create_area10_1 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_area10_1 {margin-top:171px; text-align: center; display: flex; justify-content: center;}

    /* 단계별 안내 (Step) */
    .create_area2 {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1055px; margin-left: auto; margin-right: auto;}
    .create_area2_box {
        border-radius: 16px;
        background-color: rgb(255, 255, 255);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        height: 335px;
        display: flex; flex-direction: column; gap: 20px; align-items: center;
    }
    .create_area2_box2 {display: flex; flex-direction: column; justify-content: space-around; align-items: center; margin-top: 38px;}
    .create_area2_box3 {margin-top: 10px; display: flex; flex-direction: column; align-items: center; position: relative;}
    .create_area2_box3 p {
        font-size: 19px;
        font-weight: 700;
        padding: 15px 15px;
    word-break: break-all;
        text-align: center;
    }
    .create_area2_icon {width: 70px; height: 70px; border-radius: 50%; background-color: #643FCE; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #ffffff;}
    .create_area2_box3 span {margin-top: 20px; font-size: 15px; color: rgb(101, 63, 208); font-weight: bold;}
    .create_area2_box4 {display: flex; flex-direction: column; align-items: center; gap: 15px;}
    .create_area2_box5 {font-size: 14px; line-height: 18px; font-weight: 400; text-align: center;}
    .create_area2_box5 img {margin-right: 9px;}

    .area5_text_wrap{
        display:flex;
        justify-content: center;
    }
    /* area5_text 스타일 */
    .area5_text {
        display: inline-block;
        border: 1px solid #bbbbbb;
        padding: 6px 16px;
        border-radius: 20px;
        min-width:100px;
        font-size: 16px;
        font-weight: 700;
        text-align: center;
        margin: 0 auto 20px auto;
    }

    /* 카테고리 탭 및 리스트 */
    .cateMenu {margin: 40px 0px 54px 0px; display: flex; align-items: center; justify-content: center; gap: 10px;}
    .cateMenu>a {padding: 0 21px; min-width: 90px; display: flex; align-items: center; justify-content: center; cursor: pointer; height: 46px; border-radius: 24px; background-color: rgb(244, 242, 255); border: 1px solid #C8C8C8; font-size: 16px; font-weight: 600; color: #505050;}
    .cateMenu>a.onTab {background: #7800ff; color: #fff; font-weight: 700; border: none;}

    /* 콘텐츠 제작 탭 */
    .contentCreationMenu {margin: 40px 0px 54px 0px; display: flex; align-items: center; justify-content: center; gap: 10px;}
    .contentCreationMenu>a {padding: 0 21px; min-width: 90px; display: flex; align-items: center; justify-content: center; cursor: pointer; height: 46px; border-radius: 24px; background-color: rgb(244, 242, 255); border: 1px solid #C8C8C8; font-size: 16px; font-weight: 600; color: #505050;}
    .contentCreationMenu>a.onTab {background: #7800ff; color: #fff; font-weight: 700; border: none;}

    .cate_list_box {width: 1055px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-left: auto; margin-right: auto;}
    .cate_list_box p.empty {grid-column: 1 / -1;}
    .cate_card {width: 337px; height: 414px;}
    .card_image {position: relative; overflow: hidden;}
    .badge {position: absolute; top: 10%; right: 10px; font-size: 14px;}
    .card_content {background:#F3F3F3; padding: 28px 15px 26px 15px; height: 234px;}
    .card_content_main h3 {font-size:22px; font-weight: 600;}
    .card_content_main {display: flex; justify-content: space-between; position: relative;}
    .card_img {width:100%; height: 180px; object-fit: cover; transition: transform 0.4s ease; will-change: transform;}
    .card_image:hover .card_img {transform: scale(1.1);}
    
    .wish_box {background: #959595; border-radius: 50px; width: 25px; height: 25px;}
    .wish_btn {position: absolute; top: 17%; right: 3px; width: 19px; opacity: 0.8;}
    .card_sub_text {font-size: 15px; margin-top: 13px;}
    .tags {margin-top: 25px; display: flex; gap: 10px;}
    .card_tag {background: #000; color: #fff; border-radius: 20px; padding: 3px 13px; font-size:14px;}
    .card_tag2 {background-color: rgb(226, 226, 226); color: #000; border-radius: 20px; padding: 3px 13px; font-size:14px;}
    .start_btn {margin-top: 25px; background:#303030; color:#fff; border-radius: 10px; width: 100%; font-size:16px; padding: 9px 0px; border:1px solid #303030;}
    .start_btn:hover {background:#7800FF; border:1px solid #7800FF;}

    /* 비디오 섹션 */
    .VideoMenu {margin: 40px 0px 45px 0px; display: flex; align-items: center; justify-content: center; gap: 10px;}
    .VideoMenu>a {padding: 0 21px; min-width: 90px; display: flex; align-items: center; justify-content: center; cursor: pointer; height: 46px; border-radius: 24px; background-color: rgb(244, 242, 255); border: 1px solid #C8C8C8; font-size: 16px; font-weight: 600; color: #505050;}
    .VideoMenu>a.onTab {background: #7800ff; color: #fff; font-weight: 700; border: none;}
    .video_img {margin-right: 8px;}
    
    .video_list_box {display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;}
    .video_card {
        width: 347px; height: 295px; border: 1px solid rgb(221, 221, 221);
        border-radius: 17px; background-color: rgb(255, 255, 255);
    }
    .video_card_image {position: relative; overflow: hidden; border-radius: 17px 17px 0 0;}
    .video_card_img {width:100%; height: 180px; object-fit: cover; transition: transform 0.4s ease; will-change: transform;}
    .video_card_image:hover .video_card_img {transform: scale(1.1);}
    
    .video_card_content {padding: 10px 12px 25px 12px; height: 100px;}
    .video_card_content_main {display: flex; justify-content: space-between; position: relative;}
    .video_card_content_main h3 {font-size:18px; font-weight: 600; margin-top:5px;}
    .video_card_sub_text {font-size: 14px; color: #616161; margin-top:12px;}
    
    .video_tags {margin-top:14px; display: flex; gap: 10px;}
    .video_card_tag {display: flex; gap: 10px; margin-right: 6px;}
    .video_card_tag span{
        white-space: nowrap;
    }
    .play-btn {position:absolute; margin:auto; top:50%; left:50%; transform:translate(-50%, -50%); width:60px; height:60px; border-radius:50%; background:rgba(0,0,0,.5); display:grid; place-items:center; cursor:pointer; transition: transform .15s ease; border: none;}
    .play-btn:hover {transform: translate(-50%, -50%) scale(1.05);}
    .play-btn:after {content:""; display:block; width:0; height:0; border-left:20px solid #fff; border-top:12px solid transparent; border-bottom:12px solid transparent; margin-left:4px;}
    .video_card_image iframe {width: 100%; height: 100%; border: 0;}

    .video_card_bnt_div {width: 100%; margin-top:52px;}
    .video_card_bnt {width: 230px; height: 55px; border: 1px solid rgb(120, 0, 255); border-radius: 9px; background-color: rgb(255, 255, 255); font-size: 17px; font-weight: 600; color: #7800ff; cursor: pointer; margin: 0 auto; display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom:99px;}
    .video_card_bnt img {width: 25px;}

    /* 탭별 특수 카드 사이즈 */
    .live_badge {position: absolute; top: 10px; right: 10px;}
    
    #shorts .video_card {width: 258px; height: 387px;}
    #shorts .video_card_image {width: 100%; height: 291px; border-radius: 9px 9px 0 0;}
    #shorts .video_card_img {height: 100%; width: 100%; border-radius: 9px 9px 0 0;}
    #shorts .video_card_content {text-align: center;}
    #shorts .video_tags {justify-content: center;}

    #tutorial .video_card {width: 321px;}
    #tutorial .video_card_image {height: 180px;}
    
    #live .video_card {width: 500px; height: 404px;}
    #live .video_card_image {height: 280px;}
    #live .video_card_img {height: 280px;}
    #live .video_card_content {height: 124px;}

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

    /* 로드맵 섹션 */
    .roadmap_wrapper { width: 100%;}
    .roadmap_container { max-width: 1300px; margin: 0 auto; padding: 0 15px; box-sizing: border-box;}
    .roadmap_container > .create_area10 {margin-top:0;}
    .create_area7 {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:61px;}
    .roadmap_h_div {font-size: 35px; font-weight: bold; margin-bottom: 18px; margin-left: 105px;}
    
    .roadmap_card_container {width: 1055px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin-left: auto; margin-right: auto;}
    .roadmap_card {
        border: 1px solid rgb(221, 221, 221);
        border-radius: 17px; background-color: rgb(255, 255, 255); width: 347px;
        display: flex;
    flex-direction: column;
    }
    .roadmap_card_image {position: relative; overflow: hidden; border-radius: 17px 17px 0 0;}
    .roadmap_card_img {width:100%; height: 180px; object-fit: cover; transition: transform 0.4s ease; will-change: transform;}
    .roadmap_card_image:hover .roadmap_card_img {transform: scale(1.1);}
    
    .roadmap_card_content {
        padding: 12px 20px 16px 20px;
        /* height: 200px; */
        flex: 1;
            display: flex;
    flex-direction: column;
    justify-content: space-between;
    }
    .roadmap_tags {display: flex; gap: 11px;}
    .roadmap_card_tag {border: 1px solid rgb(224, 218, 229); border-radius: 5px; background-color: rgb(243, 239, 247); padding:0 4px; height: 27px; font-size: 13px; color: #5f378c; display: flex; justify-content: center; align-items: center;}
    .roadmap_card_tag2 {border: 1px solid rgb(220, 220, 220); border-radius: 5px; background-color: rgb(242, 242, 242); width: 98px; height: 27px; font-size: 13px; color: #626262; display: flex; justify-content: center; align-items: center;}
    
    .roadmap_card_content_main h3 {font-size:18px; font-weight: 600; margin-top:16px;}
    .roadmap_card_sub_text {font-size: 14px; color: #616161; margin-top:12px; line-height: 19px;}
    
    .Shape_11 {background-color: rgb(210, 210, 210); height: 1px; margin: 17px 0px 13px 0px;}
  
    .roadmap_tags2 {display: flex; flex-direction: row; align-items: center; justify-content: space-between; height: 30px;}
    .roadmap_card_tag3 {display: flex; flex-direction: row; align-items: center; gap:6px;}
    .roadmap_card_bnt {border: 1px solid rgb(120, 0, 255); border-radius: 5px; width: 100%; height: 30px; background-color: rgb(120, 0, 255); font-size: 14px; font-weight: 400; color: #fff; cursor: pointer; display: flex; justify-content: center; align-items: center;}

    /* 학습 지원 섹션 */
    .create_area9 {margin-top:43px; 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_area14 {display: flex; gap: 30px; align-items: center; justify-content: center; flex-direction: row;}
    .create_area14_1 {
        border-radius: 16px; background-color: rgb(255, 255, 255);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        width: 341px; height: 313px;
        display: flex; flex-direction: column; align-items: center; gap: 15px;
    }
    .create_area14_1_2 {border-radius: 50%; background-color: rgb(239, 239, 239); width: 84px; height: 83px; display: flex; justify-content: center; align-items: center; margin-top: 35px;}
    .create_area14_1_3 {display: flex; flex-direction: column; align-items: center; gap: 5px;}
    .create_area14_1_3 > span:nth-of-type(1) {font-size:22px; font-weight: bold;}
    .create_area14_1_3 > span:nth-of-type(2) {font-size:14px; font-weight: 600;}
    .create_area14_1_4 {font-size: 15px; font-weight: 400; padding: 0px 45px; text-align: center; line-height: 20px;}
    .create_area14_1_5 {display: flex; flex-direction: row; align-items: center; width: 100%; justify-content: center; gap: 60px;}
    
    .create_card_bnt {
        border: 1px solid rgb(120, 0, 255); border-radius: 9px; background-color: rgb(255, 255, 255);
        width: 154px; height: 44px; color:#7800ff; font-size: 17px; font-weight: 600;
        display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.3s, color 0.3s;
    }
    .create_card_bnt:hover {background-color: #7800ff; color: #fff;}

    /* 하단 배너 */
    .bottomBanner {width: 100%; height: 540px; background: #F4F2FF; display: flex; flex-direction: column; align-items: center; justify-content: center;}
    .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;}
    .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: 230px; height: 60px; background: #7800FF; color: #fff; }
    .createEdu {width: 230px; height: 60px; border: 2px solid #7800FF; color: #7800FF; background-color: rgb(255, 255, 255);}
    .createEdu span {display: flex; align-items: center; justify-content: center; background: #7800FF; border-radius: 50%;}

    .interactive-video-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .video-player-wrapper {
        width: 1020px;
        height: 766px;
        border-radius: 30px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }


    .video-player-wrapper video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .create_area5 {
        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_area11 {
        text-align: center;
    }
    .create_area11_h3 {
        font-size: 42px;
        margin-bottom: 30px;
        font-weight: 700;
    }
    .create_area11_p {line-height:34px;font-size:22px;}
   
    .create_area12 {margin-top:40px; text-align: center; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1055px; margin-left: auto; margin-right: auto;}
    .create_area13 {
        border: 1px solid rgb(221, 221, 221);
        border-radius: 17px; background-color: rgb(255, 255, 255);
        /* width: 347px;  */
        /* height: 451px; */
        display: flex; flex-direction: column;
    }
    .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); padding: 0 4px; 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_wrapper{
        margin-top: 10px;
    }
    .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: auto; display: flex; align-items: center; justify-content: center; cursor: pointer; transform: translate(16px, 2px);
        margin-bottom: 20px;
    }
    .create_area13_5_span {font-size: 16px; color: rgb(255, 255, 255); text-align: center;}

    .staccato {
         position: relative;
         display: inline-block;
     }

    .staccato::before {
        content: '·';
        position: absolute;
        top: -35px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 1em;
        font-weight: bold;
        color: #7900ff;
    }

    .container-gap{
        margin-top:120px; 
    }
    /* ==========================================================================
       [반응형 미디어 쿼리] - 모바일/태블릿 대응
       ========================================================================== */

    /* 1. 태블릿 및 노트북 (1200px 이하) */
    @media (max-width: 1200px) {
        .main_container { margin-top: 100px !important; }
        .create_area10, .create_area10_1 { margin-top: 100px; }
        .bottomBanner { margin-top: 100px; }
        
        /* 헤더 아래 배너박스 가운데 정렬 */
        .head_div1 { transform: translate(0, 0); margin: 30px auto 0 auto; }
        .roadmap_h_div { margin-left: 0; text-align: center; }
    }

    /* 2. 모바일 (900px 이하) */
    @media (max-width: 900px) {
        /* 히어로 섹션 */
        /* [수정] 높이를 충분히 주어 절대위치 요소들이 배경 안에 들어오게 함 */
        .main_img1 { height: 1050px; } 

        /* [수정] absolute 유지하여 이미지 위에 오버레이 */
        .main_img_text1 { 
            position: absolute;
            top: 50%; left: 50%; 
            transform: translate(-50%, -50%); /* 정확한 중앙 정렬 */
            height: auto; 
            display: flex; flex-direction: column; align-items: center; justify-content: center;
        }
        
        .main_img_text1 h5 { font-size: 28px; line-height: 1.3; }
        .main_img_text1 h6 { font-size: 16px; line-height: 1.5; margin-top: 10px; }
        
        /* 통계 박스(500+, 200+) 줄바꿈 및 간격 */
        .h7_box { flex-wrap: wrap; gap: 10px; height: auto; justify-content: center; width: 100%; }
        .h_box1 { 
            width: 45%; /* 한 줄에 2개씩 */
            height: auto; padding: 15px 10px; min-height: 110px; 
            margin-bottom: 5px;
            background-color: rgba(255, 255, 255, 0.95); /* 흰색 배경 진하게 */
        }
        
        /* 버튼 세로 정렬 */
        .buttonBox { flex-direction: column; align-items: center; gap: 10px; width: 100%; margin-top: 10px; }
        .buttonBox a { width: 100%; max-width: 300px; }

        /* 하단 배너박스 (교사 크리에이터) */
        .head_div1 { 
            width: 100%; max-width: 400px; height: auto; padding: 20px; gap: 15px; text-align: center;
            /* static으로 변경하여 flex 흐름에 따르게 함 (transform 제거) */
            position: relative; transform: none; margin-top: 20px;
        }
        .head_div2 { align-items: center; }
        .head_div2_img2 { margin: 0; }

        /* 단계(Step) 박스 - 세로 나열 */
        .create_area2 { 
            flex-wrap: wrap; gap: 20px;
        }
        .create_area2_box { 
            width: 100% !important; max-width: 400px; height: auto !important; padding-bottom: 30px; 
        }
        .create_area2_box2 { margin-top: 30px; width: 100%; padding: 0 15px; box-sizing: border-box;} 

        /* 카드 공통 반응형 */
        .cate_list_box, .video_list_box, .roadmap_card_container, .create_area14 { 
            flex-wrap: wrap; 
        }
        .create_area14 { gap: 20px; }

        .cate_card, .video_card, .roadmap_card, .create_area14_1 {
            width: 100% !important; max-width: 450px; height: auto !important; margin-bottom: 20px;
        }
        
        .create_area14_1 { padding-bottom: 30px; }

        /* 비디오 카드 반응형 처리 */
        #shorts .video_card, #live .video_card, #tutorial .video_card { 
            width: 100% !important; height: auto !important; max-width: 450px; 
        }
        .video_card_image, #shorts .video_card_image, #live .video_card_image { 
            height: auto !important; aspect-ratio: 16/9; 
        }
        #shorts .video_card_image { aspect-ratio: 9/16; }
        
        .video_card_img, #live .video_card_img { height: 100%; }
        .video_card_content, #live .video_card_content { height: auto; min-height: 120px; }

        /* 폰트 사이즈 조정 */
        .create_area1 p, .create_area3 p, .create_area7 p, .create_area9 p { padding: 0 10px; font-size: 16px; line-height: 1.6; }
        .create_area1 h3, .create_area3 h3, .create_area7 h3, .create_area9 h3 { font-size: 26px; }

        /* 탭 메뉴 */
        .cateMenu, .contentCreationMenu, .VideoMenu { flex-wrap: wrap; }
        .cateMenu a, .contentCreationMenu a, .VideoMenu a { margin-bottom: 5px; }

        /* 하단 배너 */
        .bottomBanner { height: auto; padding: 60px 20px; }
        .bottomBanner h1 { font-size: 24px; line-height: 1.4; }
        .bottomBtn { flex-wrap: wrap; justify-content: center; }
    }