/*
 * 알뜰폰나라 반응형 보정 CSS v2
 * PC 화면은 유지하고, 768px 이하에서 모바일 화면만 보정합니다.
 */

html { -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe { max-width: 100%; height: auto; }
input, select, textarea, button { max-width: 100%; }

@media (max-width: 1024px) {
    body { min-width: 0 !important; }
    #hd, #ft { min-width: 0 !important; width: 100% !important; }
    #hd_pop, #hd_wrapper, #gnb_1dul, #wrapper,
    #ft > div, #ft_catch, #ft_copy > div {
        width: 100% !important;
        max-width: 100% !important;
    }
    #wrapper { padding-left: 12px !important; padding-right: 12px !important; }
    #container { max-width: 100% !important; }
}

@media (max-width: 768px) {
    html, body {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

    body { font-size: 14px !important; }

    /* 공통 고정폭 해제 */
    #hd, #hd_wrapper, #gnb, #wrapper, #container, #ft,
    #sct, #sit, #sit_ov_wrap, #sit_inf, #sit_use, #sit_qa,
    #sit_dvr, #sit_ex, #sit_rel, #sct_location {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    #hd_wrapper {
        padding: 10px 12px !important;
    }

    #logo {
        float: none !important;
        width: auto !important;
        max-width: 58% !important;
        padding: 0 !important;
    }

    #logo img {
        width: auto !important;
        max-width: 170px !important;
        max-height: 46px !important;
    }

    #hd_sch, #text_size { display: none !important; }

    /* 상단 메뉴는 한 줄 스크롤 */
    #gnb { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    #gnb_1dul {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: max-content !important;
        min-width: 100% !important;
        padding: 0 !important;
    }
    #gnb_1dul > li, .gnb_1dli { float: none !important; flex: 0 0 auto !important; }
    .gnb_1da {
        display: block !important;
        white-space: nowrap !important;
        padding: 10px 16px !important;
        font-size: 14px !important;
    }
    .gnb_2dul { display: none !important; }

    /* 본문 */
    #wrapper {
        margin: 0 !important;
        padding: 10px !important;
        border: 0 !important;
    }
    #aside { display: none !important; }
    #container {
        float: none !important;
        padding: 0 !important;
        border: 0 !important;
        min-height: 0 !important;
        height: auto !important;
    }

    /* 모든 컨텐츠 이미지는 화면 안으로. 단, 작은 상품 이미지를 억지로 확대하지 않음 */
    #container img, #sit img, #sct img, .tbl_frm01 img {
        height: auto !important;
        max-width: 100% !important;
    }

    /* 메인/배너 계열은 화면 폭에 맞춤 */
    #container > a > img,
    #container > div > a > img,
    .banner img,
    .main_banner img,
    .mainimg img,
    #sidx_img img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    /* 상품목록: 모바일 2열 */
    .sct_50,
    ul.sct_50 {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px 10px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    .sct_50 > li,
    .sct_50 .sct_li {
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 0 10px !important;
    }
    .sct_50 .sct_img,
    .sct_50 .sct_img a {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
    .sct_50 .sct_img img {
        width: auto !important;
        max-width: 100% !important;
        max-height: 190px !important;
        object-fit: contain !important;
    }
    .sct_50 .sct_txt,
    .sct_50 .sct_basic,
    .sct_50 .sct_cost {
        width: 100% !important;
        font-size: 12px !important;
        line-height: 1.45 !important;
        word-break: keep-all !important;
        overflow-wrap: anywhere !important;
    }

    /* 상품 상세: 이미지 위 / 정보 아래 */
    #sit_pvi, #sit_ov {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 16px !important;
        padding: 0 !important;
    }
    #sit_pvi_big, #sit_pvi_big a {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
    #sit_pvi_big img {
        width: auto !important;
        max-width: min(82vw, 320px) !important;
        max-height: 360px !important;
        object-fit: contain !important;
    }
    #sit_pvi_thumb {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
    }
    #sit_pvi_thumb li { float: none !important; margin: 0 !important; }
    #sit_title {
        font-size: 21px !important;
        line-height: 1.35 !important;
        word-break: keep-all !important;
    }
    #sit_desc { line-height: 1.55 !important; }

    .sit_ov_tbl, #sit_inf_open {
        width: 100% !important;
        table-layout: fixed !important;
    }
    .sit_ov_tbl th, #sit_inf_open th {
        width: 34% !important;
        padding: 9px 7px !important;
        font-size: 12px !important;
    }
    .sit_ov_tbl td, #sit_inf_open td {
        width: auto !important;
        padding: 9px 7px !important;
        font-size: 13px !important;
    }

    #sit select,
    #sit input[type="text"],
    #sit input[type="number"] {
        width: 100% !important;
        min-height: 40px !important;
        font-size: 16px !important;
    }

    #sit_ov_btn, #sit_sel_option, #sit_tot_price { width: 100% !important; }
    #sit_btn_buy, #sit_btn_cart, #sit_btn_wish, #sit_btn_rec,
    #sit_ov_btn input, #sit_ov_btn a {
        width: 100% !important;
        min-height: 48px !important;
        margin: 5px 0 !important;
        font-size: 16px !important;
        text-align: center !important;
    }

    #sit_inf_explan img, #sit_inf_basic img {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* 상품 상세 탭 */
    .sanchor {
        display: flex !important;
        overflow-x: auto !important;
        width: 100% !important;
        padding: 0 !important;
        -webkit-overflow-scrolling: touch;
    }
    .sanchor li { float: none !important; flex: 0 0 auto !important; }

    /* 가입신청/게시판형 폼 */
    .tbl_frm01, .tbl_frm01 table,
    .tbl_head01, .tbl_head01 table {
        width: 100% !important;
        max-width: 100% !important;
    }
    .tbl_frm01 table { table-layout: fixed !important; min-width: 0 !important; }
    .tbl_frm01 th {
        width: 31% !important;
        padding: 9px 6px !important;
        font-size: 12px !important;
        vertical-align: middle !important;
    }
    .tbl_frm01 td {
        width: 69% !important;
        padding: 7px 6px !important;
        font-size: 13px !important;
    }
    .tbl_frm01 input[type="text"],
    .tbl_frm01 input[type="password"],
    .tbl_frm01 input[type="email"],
    .tbl_frm01 input[type="tel"],
    .tbl_frm01 select,
    .tbl_frm01 textarea,
    form[name="fwrite"] input[type="text"],
    form[name="fwrite"] input[type="password"],
    form[name="fwrite"] select,
    form[name="fwrite"] textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 40px !important;
        font-size: 16px !important;
    }
    .tbl_frm01 input[type="radio"],
    .tbl_frm01 input[type="checkbox"],
    form[name="fwrite"] input[type="radio"],
    form[name="fwrite"] input[type="checkbox"] {
        width: auto !important;
        min-height: 0 !important;
    }
    .tbl_frm01 textarea, form[name="fwrite"] textarea { min-height: 100px !important; }

    /* 인라인 width 값이 있는 가입폼 외곽을 모바일 폭으로 제한 */
    form[name="fwrite"], form[name="fwrite"] > div,
    #bo_w, #bo_w form {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 푸터 */
    #ft { min-width: 0 !important; }
    #ft > div, #ft_catch, #ft_copy > div {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

@media (max-width: 420px) {
    #wrapper { padding: 8px !important; }
    .sct_50 { gap: 12px 8px !important; }
    .sct_50 .sct_img img { max-height: 165px !important; }
    #sit_pvi_big img { max-width: min(86vw, 300px) !important; }
    #sit_title { font-size: 19px !important; }
}