@media (max-width: 1300px) {
    body.sub-body {
        margin-top: 0 !important;
    }
}
@media (max-width: 768px) {
    body.sub-body {
        padding-top: 90px;
    }
}
/* ==========================================================================
    [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%);
        max-width: min(100vw - 24px, 1300px);
        width: 100%;
        padding: 0 12px;
        box-sizing: border-box;
        text-align: center;
        overflow: visible;
    }
    /* <br>만 줄바꿈, 일반 자동 줄바꿈 없음 */
    .main_img_text1 h5,
    .main_img_text1 h6,
    .main_img_text1 span {
        white-space: nowrap;
    }
    .main_img_text1 h5 { font-size: 38px; text-align: center; margin-bottom: 18px; line-height: 1.2; }
    .main_img_text1 h6 { font-size: 21px; text-align: center; line-height: 1.2; }
    .main_img_text1 span { font-size: 17px; text-align: center; display: block; line-height: 1.45; }
    .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;}
    /* 쉼표+br 구간만 줄바꿈, 그 외 자동 줄바꿈 없음 */
    .create_area3 h3.create_area3_h3_linecomma {
        white-space: nowrap;
        line-height: 1.25;
    }
    /* 넓은 화면: 쉼표 뒤 br 무시 → 제목 한 줄 */
    @media (min-width: 901px) {
        .create_area3 h3.create_area3_h3_linecomma br {
            display: none;
        }
        /* create_area7_p: PC는 '저작도구로' 뒤 한 번만 줄바꿈(모바일 전용 br 숨김) */
        .create_area7_p .create_area7_br_m {
            display: none;
        }
    }
    .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) — PC 기본 4열 (반응형은 @media 1200/900에서만 조정) */
    .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;
        transition: box-shadow 0.25s ease;
    }
    .create_area2_box:has(.create_area2_icon):hover {
        box-shadow: 0 12px 32px rgba(100, 63, 206, 0.18);
    }
    .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;
        cursor: pointer;
        transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
    }
    .create_area2_icon i {
        transition: transform 0.25s ease;
    }
    .create_area2_box:has(.create_area2_icon):hover .create_area2_icon {
        transform: scale(1.1);
        background-color: #7b56e8;
        box-shadow:
            0 10px 24px rgba(100, 63, 206, 0.45),
            0 0 0 4px rgba(255, 140, 0, 0.35);
    }
    .create_area2_box:has(.create_area2_icon):hover .create_area2_icon i {
        transform: scale(1.08);
    }
    .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; align-items: stretch;}
    .cate_list_box p.empty {grid-column: 1 / -1;}
    /* 카드: 그리드 행 높이에 맞춰 늘어나고, 본문·버튼 정렬 유지 */
    .cate_card {
        width: 337px;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        height: 100%;
        box-sizing: border-box;
    }
    .card_image {position: relative; overflow: hidden; flex-shrink: 0;}
    .badge {position: absolute; top: 10%; right: 10px; font-size: 14px;}
    .card_content {
        background:#F3F3F3;
        padding: 28px 15px 26px 15px;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        box-sizing: border-box;
    }
    .card_content_main h3 {font-size:22px; font-weight: 600;}
    .card_content_main {display: flex; justify-content: space-between; position: relative; flex-shrink: 0;}
    .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;}
    /* 설명 2줄 고정 영역 + 말줄임 (카드 높이·그리드 정렬 유지) */
    .card_sub_text {
        font-size: 15px;
        margin-top: 13px;
        line-height: 1.45;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        word-break: break-word;
        overflow-wrap: break-word;
        min-height: calc(1.45em * 2);
        flex-shrink: 0;
    }
    .tags {margin-top: auto; padding-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0;}
    .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: 12px; background:#303030; color:#fff; border-radius: 10px; width: 100%; font-size:16px; padding: 9px 0px; border:1px solid #303030; flex-shrink: 0;}
    .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: grid; gap: 20px; width: 1055px; max-width: 100%;margin: 0 auto;}
    .video_list_box p.empty {grid-column: 1 / -1; text-align: center; padding: 40px; color: #999; font-size: 16px; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0;}
    .video_card {
        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; z-index: 2;}
    .live_badge--live {width:90px; justify-content: center; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: #db1c18; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0.5px; border-radius: 20px;}
    .live_badge_dot {display: inline-block; width: 10px; height: 10px; background: #fff; border-radius: 50%; animation: live_badge_pulse 1.5s ease-in-out infinite;}
    /* @keyframes live_badge_pulse {0%, 100% { opacity: 1; } 50% { opacity: 0.5; }} */
    .live_badge--scheduled {width:90px; text-align: center; display: inline-block; padding: 6px 12px; background: #9e9e9e; color: #fff; font-size: 14px; font-weight: 600; border-radius: 20px;}
    .live_badge--ended {width:90px; text-align: center; display: inline-block; padding: 6px 12px; background: #757575; color: #fff; font-size: 14px; font-weight: 600; border-radius: 20px;}
    #video_content_wrapper.has-items { min-height: 390px; }
    #reallog .video_list_box {grid-template-columns: repeat(3, 1fr);}
    /* #reallog .video_card {height: 295px;} */
    #reallog .video_card_image {height: 180px;}
    
    #shorts .video_list_box {grid-template-columns: repeat(4, 1fr);}
    #shorts .video_card {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;}
    
    #live .video_list_box {grid-template-columns: repeat(2, 1fr);}
    /* #live .video_card {height: 404px;} */
    #live .video_card_image {height: 280px;}
    #live .video_card_img {height: 280px;}
    #live .video_card_content {height: fit-content; padding: 10px 12px 15px;}

    .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,
    .create_area5_h3 {font-size:42px; margin-bottom:30px; font-weight: 700;}
    .create_area7 p,
    .create_area5_p {line-height:34px; font-size:22px; margin-bottom:61px;}
    .create_area7_p .create_area7_seg {
        white-space: nowrap;
    }
    .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;
        container-type: inline-size;
        container-name: roadmap-card;
    }
    .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; flex-wrap: wrap;}
    .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;}

    /* 카드 폭이 매우 좁을 때 키워드 칩 숨김 (컨테이너 쿼리; 미지원 브라우저는 아래 미디어 쿼리) */
    @container roadmap-card (max-width: 300px) {
        .roadmap_card_tag {
            display: none !important;
        }
    }

    /* 학습 지원 섹션 */
    .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_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;
        align-items: stretch;
    }
    .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;
        min-height: 0;
        height: 100%;
    }
    .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;}
    /* 버튼을 카드 하단에 고정(설명 줄 수와 무관) — margin-top:auto는 플렉 직계 자식에만 적용 */
    .create_area13_5_wrapper {
        margin-top: auto;
        width: 100%;
        box-sizing: border-box;
    }
    .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: 0; 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: 60px !important; }
    .create_area10, .create_area10_1 { margin-top: 80px; }
    .bottomBanner { margin-top: 80px; }
    
    /* 하단 헤더 위치 조정 */
    .head_div1 { transform: translate(0, 0); margin: 30px auto 0 auto; }
    .roadmap_h_div { margin-left: 0; text-align: center; }

    /* 전체 그리드 너비 유연하게 */
    .create_area2, .cate_list_box, .video_list_box, .roadmap_card_container, .create_area12 {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .cate_card {
        width: 100%;
        max-width: 420px;
    }

    /* 카테고리·비디오 카드 본문 살짝 축소 (1200px 이하) */
    .card_content { padding: 20px 12px 18px; }
    .card_content_main h3 { font-size: 19px; line-height: 1.3; }
    .card_sub_text { font-size: 14px; margin-top: 10px; }
    .tags { padding-top: 12px; gap: 8px; }
    .card_tag, .card_tag2 { font-size: 13px; padding: 2px 11px; }
    .start_btn { font-size: 15px; padding: 8px 0; }
    .video_card_content_main h3 { font-size: 17px; }
    .video_card_sub_text { font-size: 13px; margin-top: 8px; }
    .roadmap_card_content { padding: 10px 14px 14px; }

    /* Step: 2열 + 아이콘·카드 비율 축소 (1200px 이하) — 같은 행 카드 높이 동일(stretch) */
    .create_area2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 16px;
        max-width: 100%;
        align-items: stretch;
        justify-items: stretch;
    }
    .create_area2_box {
        min-height: 0;
        height: 100%;
        gap: 10px;
        padding: 14px 10px 16px;
        box-sizing: border-box;
        align-self: stretch;
        display: flex;
        flex-direction: column;
    }
    .create_area2_box2 { margin-top: 0; justify-content: flex-start; flex: 1 1 auto; width: 100%; gap: 6px; min-height: 0; }
    .create_area2_box3 {
        margin-top: 0;
        gap: 10px;
        padding: 6px 8px 10px;
        box-sizing: border-box;
    }
    .create_area2_box3 p { font-size: 16px; padding: 0 8px 2px; line-height: 1.35; word-break: keep-all; }
    .create_area2_box3 span { margin-top: 0; font-size: 14px; }
    .create_area2_icon {
        width: 54px;
        height: 54px;
        font-size: 22px;
    }
    .create_area2_box4 { gap: 6px; }
    .create_area2_box5 { font-size: 13px; line-height: 1.45; }
    .cate_list_box, .create_area12 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cate_list_box { justify-items: center; }
    /* 콘텐츠 제작 카드(#content_creation_list): 열 너비 꽉 채우기 */
    .create_area12 {
        justify-items: stretch;
        align-items: stretch;
        gap: 16px;
    }
    #content_creation_list .create_area13 {
        max-width: 100%;
        min-width: 0;
        height: 100%;
    }
    #content_creation_list .create_area13_2 { padding: 16px 12px 12px; }
    #content_creation_list .create_area13_2_p1 { font-size: 16px; line-height: 1.3; word-break: keep-all; }
    #content_creation_list .create_area13_2_p2 { font-size: 14px; margin-top: 5px; }
    #content_creation_list .create_area13_3 { padding: 12px; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
    #content_creation_list .create_area13_3_1 {
        height: auto;
        min-height: 24px;
        padding: 3px 6px;
    }
    #content_creation_list .create_area13_3_1_span { font-size: 11px; line-height: 1.25; word-break: keep-all; }
    #content_creation_list .create_area13_4 { padding: 2px 12px 8px; gap: 6px; }
    #content_creation_list .create_area13_4_1_span { font-size: 12px; }
    #content_creation_list .Shape_10 { margin: 0 12px; }
    #content_creation_list .create_area13_5_wrapper { margin-top: auto; }
    #content_creation_list .create_area13_5 {
        width: 100%;
        max-width: 100%;
        transform: none;
        height: 38px;
        margin-top: 0;
        margin-bottom: 14px;
    }
    #content_creation_list .create_area13_5_span { font-size: 15px; }
    #content_creation_list .create_area13_1_img2 { width: 36px; height: auto; top: 8px; right: 8px; }
    .roadmap_card_container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        justify-items: stretch;
    }
    #reallog .video_list_box { grid-template-columns: repeat(2, 1fr); }
    #shorts .video_list_box { grid-template-columns: repeat(3, 1fr); }

    /* 대형 비디오 플레이어 사이즈 유연하게 */
    .video-player-wrapper { 
        width: 100%; 
        height: auto; 
        aspect-ratio: 16/9; 
        max-width: 900px;
        border-radius: 20px;
    }

    /* 로드맵 3열: 카드가 좁아지므로 글자·말줄임 유지 */
    .roadmap_card {
        width: 100%;
        max-width: 100%;
    }
    .roadmap_card_content_main h3 {
        font-size: clamp(12px, 2.4vw, 17px);
        line-height: 1.25;
        margin-top: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: keep-all;
    }
    .roadmap_card_sub_text {
        font-size: clamp(11px, 1.9vw, 13px);
        line-height: 1.3;
        margin-top: 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .roadmap_tags {
        gap: 6px;
        flex-wrap: nowrap;
        min-width: 0;
    }
    .roadmap_card_tag {
        font-size: clamp(10px, 1.5vw, 12px);
        height: auto;
        min-height: 22px;
        padding: 2px 5px;
        flex: 0 1 auto;
        min-width: 0;
        max-width: calc(50% - 3px);
    }
    .roadmap_card_tag span {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
}

/* 2. 모바일 (900px 이하) */
@media (max-width: 900px) {
    /* 메인 히어로 배너: 높이·글자 크기는 하단 '상단 배너 통일' 미디어쿼리에서 처리 */
    .main_img_text1 {
        width: 100%;
        max-width: min(100vw - 8px, 1300px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .main_img_text1 h5,
    .main_img_text1 span {
        white-space: nowrap;
    }

    /* 섹션 타이틀 및 설명 공통 조정 */
    .create_area1 h3, .create_area3 h3, .create_area7 h3, .create_area9 h3, .create_area5_h3, .create_area11_h3 { 
        font-size: 26px; 
        margin-bottom: 15px; 
        word-break: keep-all; 
        padding: 0 10px;
    }
    .create_area1 p, .create_area3 p, .create_area7 p, .create_area9 p, .create_area5_p, .create_area11_p { 
        font-size: 16px; 
        line-height: 1.6; 
        margin-bottom: 40px; 
        word-break: keep-all; 
        padding: 0 10px;
    }
    /* 480 이하: .create_area7 p(공통)보다 특이도 높여 덮어씀 + 소스 순서 보장을 위해 900 블록 안에 중첩 */
    @media (max-width: 480px) {
        .create_area7 p.create_area7_p,
        .create_area5 p.create_area5_p {
            font-size: 14px;
            line-height: 1.55;
        }
        .create_area7 h3.create_area7_h3,
        .create_area5 h3.create_area5_h3 {
            font-size: 24px;
        }
    }
    .create_area3 h3.create_area3_h3_linecomma {
        word-break: normal;
        white-space: nowrap;
    }

    /* create_area7_p: 모바일은 4줄(의도한 위치의 br_m만), PC용 br_pc는 숨김 */
    .create_area7_p .create_area7_br_pc {
        display: none;
    }

    /* 상하 여백 조정 */
    .container-gap { margin-top: 80px; }

    /* 그리드 -> 2열 (로드맵은 아래에서 동일 2열 유지) */
    .create_area2, .cate_list_box, .create_area12,
    #reallog .video_list_box, #shorts .video_list_box, #live .video_list_box {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 14px;
        padding: 0;
    }
    .create_area2 { align-items: stretch; justify-items: stretch; }
    .create_area12 { justify-items: stretch; align-items: stretch; }
    .create_area2_icon {
        width: 48px;
        height: 48px;
        font-size: 19px;
    }
    .create_area2_box3 {
        gap: 9px;
        padding: 5px 8px 10px;
        box-sizing: border-box;
    }
    .create_area2_box3 span { margin-top: 0; font-size: 13px; }
    .create_area2_box3 p { font-size: 15px; padding: 0 6px 2px; line-height: 1.35; word-break: keep-all; }
    .create_area2_box5 { font-size: 12px; line-height: 1.45; }
    .create_area2_box { padding: 12px 8px 14px; gap: 8px; }
    .roadmap_card_container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
        padding: 0;
    }

    /* 카드류 너비 화면 꽉 차게 변경 (#content_creation_list 카드는 행 높이 100% + 하단 버튼 정렬용) */
    .cate_card, .roadmap_card, .video_card, .create_area14_1 {
        width: 100% !important; 
        max-width: 100%; 
        height: auto !important; 
        margin-bottom: 0;
        box-sizing: border-box;
    }
    .create_area2_box {
        width: 100% !important;
        max-width: 100%;
        height: 100%;
        min-height: 0;
        margin-bottom: 0;
        box-sizing: border-box;
        align-self: stretch;
        display: flex;
        flex-direction: column;
    }
    /* 카테고리 카드: 모바일에서도 플렉스·2줄 설명 유지 */
    .cate_card {
        min-height: 0;
    }
    .card_content {
        flex: 1 1 auto;
        padding: 14px 10px 14px;
    }
    .card_content_main h3 {
        font-size: 16px;
        line-height: 1.3;
    }
    .card_sub_text {
        min-height: calc(1.45em * 2);
        font-size: 12px;
        margin-top: 6px;
    }
    .tags { padding-top: 10px; gap: 6px; }
    .card_tag, .card_tag2 { font-size: 11px; padding: 2px 8px; }
    .start_btn { font-size: 13px; padding: 7px 0; margin-top: 8px; }
    .video_card_content_main h3 { font-size: 15px; line-height: 1.25; }
    .video_card_sub_text { font-size: 12px; margin-top: 6px; }
    .roadmap_card_content { padding: 8px 10px 12px; }
    .roadmap_card_content_main h3 { margin-top: 8px; }
    .roadmap_card_sub_text { margin-top: 6px; line-height: 1.35; }
    .roadmap_card_tag, .roadmap_card_tag2 { font-size: 11px; height: auto; min-height: 24px; padding: 2px 6px; }
    .roadmap_card_bnt { height: 28px; font-size: 12px; }

    /* 탭 메뉴: 카테고리/콘텐츠제작만 넓은 최소폭(2열 래핑). 비디오(리얼로그·쇼츠·라이브)는 3개 한 줄·작게 유지 */
    .cateMenu, .contentCreationMenu {
        flex-wrap: wrap;
        gap: 8px;
        margin: 20px 0 30px 0;
    }
    .cateMenu > a, .contentCreationMenu > a {
        min-width: calc(50% - 4px);
        padding: 0 10px;
        font-size: 14px;
        box-sizing: border-box;
        text-align: center;
    }

    .VideoMenu {
        flex-wrap: nowrap;
        justify-content: center;
        gap: 8px;
        margin: 20px 0 30px 0;
    }
    .VideoMenu > a {
        min-width: 0;
        flex: 0 1 auto;
        padding: 0 12px;
        height: 42px;
        font-size: 13px;
        font-weight: 600;
        box-sizing: border-box;
        text-align: center;
        white-space: nowrap;
    }

    /* AR, GPS, NFC, QR 아이콘 4개 영역 (2x2 그리드로 변경) */
    .create_area6 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    .create_area6_div { width: 100%; }

    /* 대형 비디오 래퍼 모바일 최적화 */
    .interactive-video-section { padding: 0 15px; box-sizing: border-box; }
    .video-player-wrapper { border-radius: 12px; aspect-ratio: 16/9; height: auto; }

    /* 카드 내 이미지 비율 고정 (비율 깨짐 방지) */
    .video_card_image, #shorts .video_card_image, #live .video_card_image, .roadmap_card_image, .card_image, .create_area13_1 { 
        height: auto !important; 
        aspect-ratio: 16/9; 
        width: 100%;
    }
    #shorts .video_card_image { aspect-ratio: 9/16; } /* 숏츠는 세로 비율 유지 */
    
    .video_card_img, #live .video_card_img, .roadmap_card_img, .card_img, .area13_img { 
        height: 100%; 
        width: 100%;
        object-fit: cover; 
    }
    
    /* 텍스트 영역 높이 해제 (카드별 패딩 — 위쪽 card_content 규칙과 맞춤) */
    .video_card_content, #live .video_card_content {
        height: auto;
        padding: 12px 10px 14px;
    }
    .card_content {
        height: auto;
        padding: 14px 10px 14px;
    }
    .roadmap_card_content {
        height: auto;
        padding: 8px 10px 12px;
    }

    /* 콘텐츠 제작 목록(#content_creation_list) — 900px 이하 추가 축소 */
    #content_creation_list.create_area12 { gap: 10px 12px; }
    #content_creation_list .create_area13_2 { padding: 12px 10px 10px; }
    #content_creation_list .create_area13_2_p1 { font-size: 15px; line-height: 1.28; }
    #content_creation_list .create_area13_2_p2 { font-size: 13px; margin-top: 4px; }
    #content_creation_list .create_area13_3 { padding: 8px 8px 10px; gap: 5px; }
    #content_creation_list .create_area13_3_1 { min-height: 22px; padding: 2px 5px; }
    #content_creation_list .create_area13_3_1_span { font-size: 10px; line-height: 1.2; }
    #content_creation_list .create_area13_4 { padding: 2px 10px 6px; gap: 5px; }
    #content_creation_list .create_area13_4_1_span { font-size: 11px; line-height: 1.35; }
    #content_creation_list .Shape_10 { margin: 0 10px; }

    /* 콘텐츠 제작(create_area13) 하단 버튼 꽉 차게 */
    .create_area13_5_wrapper { padding: 0 15px 15px 15px; }
    #content_creation_list .create_area13_5_wrapper {
        padding: 0 10px 10px;
        margin-top: auto;
    }
    .create_area13_5 {
        width: 100%; 
        transform: none; 
        margin: 10px 0 0 0; 
        box-sizing: border-box;
    }
    #content_creation_list .create_area13_5 {
        height: 36px;
        margin: 0 0 10px 0;
    }
    #content_creation_list .create_area13_5_span { font-size: 14px; }

    /* 단계(Step) 박스 간격 조정 */
    .create_area2_box2 { margin-top: 0; padding: 0 8px 0; box-sizing: border-box; }

    /* 하단 배너 */
    .bottomBanner { height: auto; padding: 60px 20px; }
    .bottomBanner h1 { font-size: 24px; line-height: 1.4; word-break: keep-all;}
    .bottomBtn { flex-direction: column; align-items: center; width: 100%; gap: 10px; }
    .bottomBtn > a { width: 100%; max-width: 350px; justify-content: center; margin: 0; box-sizing: border-box; }
}

/* 상단 메인 배너(.main_img1) — 뷰포트별 높이·타이포 통일 (아래쪽 규칙이 좁은 화면에서 우선) */
@media (max-width: 1300px) {
    .main_img_box1 { overflow: visible; }
    .main_img1 {
        height: 320px;
    }
    .main_img_text1 h5 {
        font-size: 34px;
        line-height: 1.22;
        margin-bottom: 14px;
    }
    .main_img_text1 h6 {
        font-size: 19px;
    }
    .main_img_text1 span {
        font-size: 16px;
        line-height: 1.4;
    }
}

@media (max-width: 1024px) {
    .main_img1 {
        height: 300px;
    }
    .main_img_text1 h5 {
        font-size: 30px;
        margin-bottom: 12px;
    }
    .main_img_text1 h6 {
        font-size: 18px;
    }
    .main_img_text1 span {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .main_img1 {
        height: 260px;
    }
    .main_img_text1 {
        max-width: min(100vw - 8px, 1300px);
        padding: 0 6px;
    }
    .main_img_text1 h5 {
        font-size: 26px;
        margin-bottom: 10px;
    }
    .main_img_text1 h6 {
        font-size: 17px;
    }
    .main_img_text1 span {
        font-size: 14px;
        line-height: 1.4;
        margin-top: 6px;
    }

    /* 비디오 카드 duration·조회수 아이콘: 768 이하에서만 축소(넓은 화면은 원본 비중 유지) */
    .video_tags {
        align-items: center;
        flex-wrap: wrap;
    }
    .video_card_tag {
        align-items: center;
        gap: 6px;
    }
    .video_card_tag .area13_img1 {
        width: clamp(12px, 5vw, 15px);
        height: clamp(12px, 5vw, 15px);
        object-fit: contain;
        flex-shrink: 0;
    }
}

@media (max-width: 480px) {
    .main_img1 {
        height: 220px;
    }
    .main_img_text1 h5 {
        font-size: 20px;
        margin-bottom: 8px;
    }
    .main_img_text1 h6 {
        font-size: 15px;
    }
    .main_img_text1 span {
        font-size: 13px;
        margin-top: 4px;
    }
}

@media (max-width: 345px) {
    .main_img1 {
        height: 200px;
    }
    .main_img_text1 h5 {
        font-size: 17px;
        margin-bottom: 6px;
    }
    .main_img_text1 h6 {
        font-size: 14px;
    }
    .main_img_text1 span {
        font-size: 11px;
        margin-top: 3px;
        line-height: 1.35;
    }
}

/* 컨테이너 쿼리 미지원: 좁은 뷰포트에서만 키워드 칩 숨김 */
@supports not (container-type: inline-size) {
    @media (max-width: 520px) {
        .roadmap_card .roadmap_card_tag {
            display: none !important;
        }
    }
}