/* Responsive override layer; loads after mobile.css and leaves desktop widths of 1320px and above unchanged. */

@media (max-width: 1319px) {
    body { overflow-x: hidden; }

    :root *,
    :root .mobile-menu * { box-sizing: border-box; }

    :root .flex > *,
    :root [class*="_group"] > *,
    :root [class*="_box"] > *,
    :root [class*="_wrap"] > *,
    :root .mobile-menu .h_left,
    :root .mobile-menu .h_right,
    :root .mobile-menu .txt { min-width: 0; }

    :root img,
    :root video,
    :root canvas,
    :root svg,
    :root .mobile-menu img { max-width: 100%; height: auto; }

    :root h1,
    :root h2,
    :root h3,
    :root h4,
    :root p,
    :root dd,
    :root td,
    :root .tit,
    :root .title,
    :root .txt,
    :root .name {
        overflow-wrap: anywhere;
        word-break: keep-all;
    }

    :root input,
    :root select,
    :root textarea,
    :root button { max-width: 100%; }

    :root .cm_table_wrap,
    :root .table_wrap {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    :root .layer_pop_common,
    :root .layer-pop,
    :root .modal_box,
    :root .cont_modal_main {
        max-width: calc(100vw - 2rem);
        max-height: calc(100vh - 2rem);
        max-height: calc(100dvh - 2rem);
        overflow-y: auto;
    }

    :root .ml_wrap {
        min-width: 0;
        max-width: 100%;
    }

    :root .ml_wrap .container,
    :root .ml_wrap .inner,
    :root .loading-bar {
        min-width: 0;
        max-width: 100%;
    }
}

@media (max-width: 1023px) {
    :root .ly_inner,
    :root .inner,
    :root .container {
        width: 100%;
        max-width: 100%;
        padding-inline: 1.5rem;
    }

    :root .ml_wrap .container {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin-inline: auto;
        padding-top: 54px;
        padding-inline: 1.5rem;
    }

    :root .ml_wrap .inner {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding-inline: 1.5rem;
    }

    :root .btnbox,
    :root .button_group,
    :root .filter_box,
    :root .tab_navbox { flex-wrap: wrap; }

    :root input:not([type="checkbox"]):not([type="radio"]),
    :root select,
    :root textarea,
    :root button,
    :root .btn { min-height: 44px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    :root .service_card_list,
    :root .best_content_group,
    :root .cm_card_list,
    :root .joblist,
    :root .cm_card_wrap .cm_card_list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    :root .service_card_list > *,
    :root .best_content_group > *,
    :root .cm_card_list > *,
    :root .joblist > *,
    :root .cm_card_wrap .cm_card_list > li,
    :root .cm_card_wrap .cm_card_list > .cm_card {
        width: 100%;
        min-width: 0;
        margin: 0;
    }
}

@media (max-width: 767px) {
    :root .hd_modal {
        font-size: 18px;
        line-height: 1.4;
    }

    :root .ly_inner,
    :root .inner,
    :root .container { padding-inline: 1rem; }

    :root .ml_wrap .container,
    :root .ml_wrap .inner { padding-inline: 1rem; }

    :root .form_box,
    :root .form_item,
    :root .input_box.row_ver,
    :root .ask_row_flex_main {
        grid-template-columns: minmax(0, 1fr);
        flex-direction: column;
        align-items: stretch;
    }

    :root .modal_box,
    :root .cont_modal_main,
    :root .layer_pop_common {
        width: calc(100vw - 2rem);
        margin-inline: auto;
    }

    :root .service_card_list,
    :root .best_content_group,
    :root .cm_card_list,
    :root .joblist,
    :root .cm_card_wrap .cm_card_list {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    :root .service_card_list .card,
    :root .best_content_group .card,
    :root .cm_card,
    :root .joblist .item,
    :root .cm_card_wrap .cm_card_list li {
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    :root .mypage_wrap,
    :root .mypage_wrap .filter_box,
    :root .mypage_wrap .leftbox,
    :root .mypage_wrap .rightbox,
    :root .mypage_wrap .support_section .filter_box,
    :root .mypage_wrap .support_section .filter_box .leftbox,
    :root .mypage_wrap .support_section .filter_box .rightbox {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    :root .tab_navbox,
    :root .cm_tab_wrap,
    :root .ml_wrap .tab_navbox {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    :root .ml_wrap .tab_navbox { flex-wrap: nowrap; }

    :root .tab_navbox .tab_nav,
    :root .cm_tab_wrap .cm_tab,
    :root .ml_wrap .tab_navbox .tab_nav,
    :root .ml_wrap .section.mypage_section .tab_navbox .tab_nav {
        width: max-content;
        min-width: 100%;
        flex: none;
        flex-wrap: nowrap;
    }

    :root .cm_table_wrap > table,
    :root .table_wrap > table {
        width: max-content;
        min-width: 640px;
    }
}

@media (max-width: 479px) {
    :root .hd_modal { font-size: 16px; }

    :root .ly_inner,
    :root .inner,
    :root .container { padding-inline: 0.875rem; }

    :root .ml_wrap .container,
    :root .ml_wrap .inner { padding-inline: 0.875rem; }

    :root h1,
    :root .page_title,
    :root .main_title {
        font-size: clamp(1.375rem, 7vw, 1.75rem);
        line-height: 1.3;
    }

    :root h2,
    :root .section_title,
    :root .m_titbox,
    :root .sub_contents .sub_title h2,
    :root #loading_icon_correct1 h2 {
        font-size: clamp(1.125rem, 5.5vw, 1.375rem);
        line-height: 1.4;
    }

    :root .btnbox > a,
    :root .btnbox > button,
    :root .btnbox > .btn,
    :root .button_group > a,
    :root .button_group > button,
    :root .button_group > .btn,
    :root .btn_modal_row_main > a,
    :root .btn_modal_row_main > button,
    :root .btn_modal_row_main > .btn {
        width: 100%;
        justify-content: center;
    }


    :root .modal_box,
    :root .cont_modal_main,
    :root .layer_pop_common {
        width: calc(100vw - 1.5rem);
        max-width: calc(100vw - 1.5rem);
        max-height: calc(100vh - 1.5rem);
        max-height: calc(100dvh - 1.5rem);
        overflow-y: auto;
    }

    :root .ly_inner { padding-inline: 0.875rem; }

    :root .sub.auland .fl_layout .ly_inner { padding-inline: 0.875rem; }

    :root .wrap_modal_main .cont_modal_main {
        width: calc(100vw - 1.5rem);
        max-height: calc(100vh - 1.5rem);
        max-height: calc(100dvh - 1.5rem);
        overflow-y: auto;
    }

    :root .layer_pop_common.gpt {
        width: calc(100vw - 1.5rem);
        max-width: calc(100vw - 1.5rem);
        max-height: calc(100vh - 1.5rem);
        max-height: calc(100dvh - 1.5rem);
        overflow-y: auto;
    }
}