/* =====================================================================
   0. 공통 리셋 - 어떤 페이지든 가로 스크롤부터 없앤다
   ===================================================================== */
   .mobile-sort-trigger { display: none; }
   @media screen and (max-width: 1024px) {
       html, body { max-width: 100%; overflow-x: hidden; }
       /* style.css */
       .wrap,
       .container,
       .S_container { min-width: 0 !important; width: 100% !important; }
       /* common.css / good.css / sub.css / layer.css (구형 카페24 구조) */
       #wrap { min-width: 0 !important; }
       .nd-container,
       .location_wrap .location_cont { width: 100% !important; box-sizing: border-box; padding: 0 15px; }
       img { max-width: 100%; height: auto; }
       .wrap {
        padding-top: 138px;
      }
      .mobile-search-toggle {
        display: block;
      }
      #header .mid-head .top-user .top-user-wrap .user-icon.tel {
        display: none;
      }
      .quick-bar .quick-menu {
        width: 50px;
        position: fixed;
        top: auto;
        left: auto;
        right: 10px;
        bottom: 10px;
        transform: translate(0);
        -webkit-transform: translate(0);
        -moz-transform: translate(0);
        -ms-transform: translate(0);
        -o-transform: translate(0);
}
      .quick-bar .quick-menu .quick-menu-box {
        display: none;
      }
      .quick-bar .quick-menu .top-btn {
        display: block;
      }
     }

     /* =====================================================================
        3. 메인 페이지 - main.css
        ===================================================================== */
     @media screen and (max-width: 1024px) {
       .main-visual-slide { padding-right: 0; margin-left: 0; }
       .main-visual .swiper-button { width: 2.5rem; height: 2.5rem; }
.main-visual .swiper-pagination { display: block; }
.main-visual .swiper-button-wrap { display: none; }
.main-visual-slide .swiper-slide a { border-radius: 0; }
       .maingoods .goods_list_cont ul li { width: 50%; }        /* 4열 → 2열 */
   /* 카테고리별 BEST(tab 형태, goods_content_7)는 4열 → 3열로 별도 지정 (일반 상품목록은 2열 유지) */
   .goods_content_7 ul li { width: 33.3334%; }
   .goods_content_7 ul li .item_cont { padding: 0 6px; }
       .main-banner-group01 ul li { width: 100%; }               /* 2열 배너 → 1열 */
       .main-banner-group01 ul li:first-child,
       .main-banner-group01 ul li:last-child { padding: 0 0 15px 0; }
       .maingoods.goods-tab .goods_tab_tit ul li { margin: 4px; padding: 8px 14px; }
       .sub_content > .inner > .left_grid {
         display: none;
       }
       .sub_content > .inner > .right_grid {
         width: 100%;
       }
     }
     @media screen and (max-width: 768px) {
       .main-visual { padding: 0px 0; }
       .main-visual .swiper-button-prev,
       .main-visual .swiper-button-next { display: none; } /* 좁은 화면에선 스와이프로 대체 */
       .maingoods .goods_list_tit h3 { font-size: 20px; }
     }
     /* 480px 이하에서도 2열 유지 (1열로 내려가지 않음) */

     /* =====================================================================
        4. 상품 리스트 그리드 - common.css item choice / goods 관련 공통 요소
        ===================================================================== */
     @media screen and (max-width: 768px) {
       .item_choice_list .cart_prdt_name { padding: 12px; }
       .item_choice_list table td { padding: 8px 4px; font-size: 12px; }
       .choice_num_view { float: none; padding: 10px 0; }
     }

     /* =====================================================================
        5. 상품 상세 페이지 - good.css / sub.css (이미지 + 정보 2단 → 1단)
        ===================================================================== */
     @media screen and (max-width: 1024px) {
       .item_photo_info_sec .item_photo_view_box,
       .item_photo_view_box { float: none; width: 100% !important; max-width: 600px; margin: 0 auto; }
       .item_photo_big,
       .item_photo_big span { width: 100% !important; height: auto !important; display: block;}
       .item_photo_big img { width: 100%; }
       .item_photo_slide .slider_goods_nav { width: 100% !important; text-align: center; }
       .item_info_box { float: none; width: 100% !important; margin-top: 24px; }
       .item_goods_tab { padding-top: 30px; }
       .item_goods_tab ul { display: flex; width: 100% !important; margin: 0; }
       .item_goods_tab li { flex: 1 1 0; width: auto !important; min-width: 0; }
       .item_goods_tab li a { margin-left: 0; padding-left: 4px; padding-right: 4px; font-size: 12px; }
       .item_goods_tab li.on a { padding-left: 4px; padding-right: 4px; }
       #contents .sub_content > .side_cont + .content { float: none; width: 100% !important; padding: 0; }
       .sub_content .side_cont { float: none; width: 100% !important; margin-bottom: 20px; }
     }
     @media screen and (max-width: 480px) {
       .item_detail_tit h3,
       .item_detail_list dd { width: 100% !important; }
     }

     /* =====================================================================
        6. 레이어(모달) 팝업 - layer.css
        ===================================================================== */
     @media screen and (max-width: 768px) {
       #wrap .ly_wrap,
       .layer_wrap,
       .layer_wrap.zoom_layer .layer_wrap_cont,
       .layer_wrap.coupon_down_layer .layer_wrap_cont,
       .layer_wrap.coupon_apply_layer .layer_wrap_cont,
       .layer_wrap.board_write_layer,
       .layer_wrap.add_goods_layer,
       .layer_wrap.password_layer,
       .layer_wrap.ghost_depositor_layer,
       #wrap .ly_wrap.pw_advice_layer,
       #wrap .ly_wrap.delivery_layer,
       #wrap .ly_wrap.delivery_zone_layer,
       #wrap .ly_wrap.qrcode_layer,
       #wrap .ly_wrap.sns_layer,
       #wrap .ly_wrap.grade_layer,
       #wrap .ly_wrap.use_case_layer,
       .goods_select_cont,
       .order_select_cont,
       .option_layer_cont,
       .add_wish_layer,
       .delivery_add_layer .layer_wrap_cont {
         width: 92vw !important;
         max-width: 92vw !important;
         left: 4vw !important;
         margin-left: 0 !important;
         box-sizing: border-box;
       }
       .layer_wrap .item_photo_big { width: 100% !important; }
       .select_search_box .search_keyword input,
       .order_select_box .search_ordernum input { width: 100% !important; box-sizing: border-box; }
     }

     /* =====================================================================
        7. 페이지네이션 / 폼 요소 공통 - common.css
        ===================================================================== */
     @media screen and (max-width: 480px) {
       .pagination li { min-width: 22px; }
       .pagination li a, .pagination li span { width: 24px; height: 26px; line-height: 26px; }
       .goods_qty .text { width: 34px; }
     }
     @media screen and (max-width: 768px) {
      .order_table {
        width: 100%;
      }
     }

     /* =====================================================================
        9. 상품 리스트 페이지 - prd_list.php / prd_category.inc
        이미지 기준: 서브카테고리 칩 2열, 정렬/보기옵션 줄 정리, 상품그리드 2열
        ===================================================================== */
     @media screen and (max-width: 1024px) {
       /* 서브카테고리 목록 (부직포가방(M형) (84) 등) - 5열 → 2열 */
       .list_item_category ul { padding: 0 10px; }
       .list_item_category li { width: 50%; box-sizing: border-box; }
       .list_item_category li a { padding: 10px; font-size: 13px; }
       /* 정렬 라디오 줄 - 한 줄에 다 안 들어가므로 가로 스크롤 */
       .goods_pick_list .pick_list_box {
         position: relative;
         height: auto;
         display: flex;
         flex-wrap: nowrap;
         align-items: center;
         justify-content: space-between;
         gap: 10px;
       }
       /* JS가 만들어 붙이는 트리거 버튼 - 실제 셀렉트박스처럼 보이는 부분 */
       .mobile-sort-trigger {
         display: flex; align-items: center; justify-content: space-between;
         flex: 0 0 38%; width: 38%; min-width: 0; box-sizing: border-box;
         height: 38px; padding: 0 10px;
         border: 1px solid #cccccc; border-radius: 0;
         background: #ffffff;
         font-size: 13px; color: #717171;
         cursor: pointer;
       }
       .mobile-sort-chevron {
         width: 8px; height: 8px;
         border-right: 2px solid #999999; border-bottom: 2px solid #999999;
         transform: rotate(45deg);
         transition: transform .2s ease;
         margin-left: 8px;
       }
       .mobile-sort-trigger.open .mobile-sort-chevron { transform: rotate(225deg); }
       /* 원래 라디오 목록은 트리거 아래에 숨겨진 드롭다운으로 */
       .goods_pick_list .pick_list_box .pick_list.mobile-sort-dropdown {
         display: none;
         position: absolute;
         top: 100%; left: 0;
         flex-direction: column;
         width: 38%; box-sizing: border-box;
         margin: -10px 0 0;
         padding: 0;
         list-style: none;
         background: #ffffff;
         border: 1px solid #dddddd; border-radius: 4px;
         box-shadow: 0 8px 16px rgba(0,0,0,.08);
         overflow: visible;
         white-space: normal;
         z-index: 50;
       }
       .goods_pick_list .pick_list_box .pick_list.mobile-sort-dropdown.open { display: flex; }
       .goods_pick_list .pick_list_box .pick_list.mobile-sort-dropdown li {
         float: none; margin: 0; padding: 0;
         border-bottom: 1px solid #f2f2f2;
       }
       .goods_pick_list .pick_list_box .pick_list.mobile-sort-dropdown li:last-child { border-bottom: none; }
       .goods_pick_list .pick_list_box .pick_list.mobile-sort-dropdown label {
         display: block; margin: 0; padding: 11px 14px; font-size: 13px; background: none;
       }
       .goods_pick_list .pick_list_box .pick_list.mobile-sort-dropdown label.on {
         color: var(--mainColor, #455273); font-weight: 700; background: none;
       }
       .goods_pick_list .pick_list_box .pick_list.mobile-sort-dropdown input { display: none; }
       .choice_num_view { float: none; flex: 0 0 auto; padding: 0; }
       .choice_num_view select {
         width: auto; min-width: 110px; height: 38px; box-sizing: border-box;
         border: 1px solid #cccccc; border-radius: 0;
         font-size: 13px; color: #717171; padding: 0 8px;
       }
       /* 상품 그리드 (관련상품에서도 재사용되는 공용 클래스) - 5열 → 2열 */
       .goods_list .item_gallery_type li,
       .goods_list .item_gallery_type.type5 li { width: 50%; margin: 16px 0; }
       .item_gallery_type .item_cont { padding: 0 8px; }
     }

     /* =====================================================================
        10. 상품 상세 페이지 - prd_view.php
        이미지 기준: 짜/문의 버튼 축소, 상품필수정보 라벨-값 스택, 탭 스크롤(기존 5번과 연계)
        ===================================================================== */
     @media screen and (max-width: 1024px) {
       /* 상단 제목 + 짜하기/상품문의 원형 버튼이 격치지 않도록 축소 */
       .item_info .prd_title { width: 60%; font-size: 20px; line-height: 1.4; padding: 4px 0 14px; }
       .item_info .favorite,
       .item_info .item_qna { width: 44px; height: 44px; padding-top: 7px; }
       .item_info .favorite { right: 50px; }
       .item_info .favorite span,
       .item_info .item_qna span { font-size: 9px; margin-top: 2px; }
       /* 상품필수 정보 - th/td 4열 표를 라벨-값 세로 스택으로 */
       .item_goods_sec .left_table_type,
       .item_goods_sec .left_table_type tbody,
       .item_goods_sec .left_table_type tr,
       .item_goods_sec .left_table_type th,
       .item_goods_sec .left_table_type td {
         display: block;
         width: 100% !important;
         height: auto;
         box-sizing: border-box;
       }
       .item_goods_sec .left_table_type th { border-bottom: none; font-size: 12px; }
       .item_goods_sec .left_table_type td { border-top: none; margin-bottom: 6px; }
       .item_goods_sec { margin-top: 50px; }
       .item_goods_sec h3 { padding: 30px 0 10px; font-size: 16px; }
     }

/* =====================================================================
   11. 회원가입 / 마이페이지 등 회원정보 입력 폼 공통 - join_form.php (AW_table 계열)
   이미지 기준: 라벨(th) + 입력값(td) 2단 표를 라벨 위 · 입력값 아래로 스택,
   입력창(join_input)이 화면보다 넓어지지 않도록 제한, 하단 확인/취소 버튼 전체폭 스택
   ===================================================================== */
@media screen and (max-width: 768px) {
  .AW_member_tit { font-size: 16px; }
  .AW_member_hr { padding: 30px 0 0; margin: 30px 0 0; }
  /* 표 자체가 뷰포트보다 넓어지지 않도록 */
  .AW_table { width: 100% !important; }
  /* th / td 2단 표 -> 세로 스택 구조 */
  .AW_table, .AW_table tbody, .AW_table tr,
  .AW_table th, .AW_table td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
    padding: 15px 0;
  }
  .AW_table th {
    height: auto;
    padding: 15px 0;
    border-left: 0 none;
    border-bottom: 0 none;
    background: none;
  }
  .AW_table tr:first-child th { padding-top: 20px; }
  .AW_table td {
    height: auto;
    padding: 0 0 15px;
    border-left: 0 none;
  }
  /* 섹션 제목(기본정보 입력 등)과 표 사이 여백 */
  .AW_member_tit + div { margin-top: 20px !important; }
  .AW_member_tit { margin-top: 40px; }
  .AW_member_tit:first-of-type { margin-top: 0; }
  .AW_table caption {
    display: block;
    width: 100%;
    position: static;
    text-align: left;
    padding: 0 0 16px;
    line-height: 1.5;
  }
  /* 입력창은 size 속성 대신 컨테이너 폭을 넘지 않도록 제한 */
  .join_input,
  .company_area input,
  .textarea { max-width: 100%; box-sizing: border-box; }
  /* td 내부(및 그 안의 div)를 한 줄짜리 flex 행으로 만들어서
     - 옆에 버튼/체크박스 없이 입력창 하나만 있으면 자동으로 폭 100%를 채우고
     - 주민번호/전화번호/팩스처럼 입력창이 여러 개면 남은 폭을 균등하게 나눠 가져 한 줄에 꽉 차게 함 */
  .AW_table td,
  .AW_table td > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  /* 우편번호+버튼 / 기본주소 / 상세주소처럼 줄바꿈 되어야 하는 div는 항상 한 줄 전체를 차지 */
  .AW_table td > div { flex: 1 1 100%; }
  .AW_table td .join_input,
  .AW_table td select {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  /* 생년월일 · 기일처럼 연/월/일 입력칸 + 라디오가 한 줄에 섞여 있는 경우 */
  .AW_table td input[name="birthday"],
  .AW_table td input[name="birthday2"],
  .AW_table td input[name="birthday3"],
  .AW_table td input[name="memorial"],
  .AW_table td input[name="memorial2"],
  .AW_table td input[name="memorial3"] {
    flex: 0 1 60px;
    min-width: 44px;
    text-align: center;
  }
  .AW_table td input[type="radio"] { margin-left: 6px; margin-right: 2px; }
  .AW_table td .btn,
  .AW_table td label { flex: 0 0 auto; }
  .AW_table td strong { flex: 1 0 100%; display: block; margin-top: 6px; }
  .AW_table td font { flex: 1 0 100%; display: block; margin-top: 6px; }
  /* 주소(우편번호/기본주소/상세주소), 전화번호처럼 줄이 여러 개로 나뉘는 영역 사이 여백 */
  .AW_table td > div + div { margin-top: 10px !important; }
  /* 회사(사업자) 정보 표 (company_area) */
  .company_area table,
  .company_area tbody,
  .company_area tr,
  .company_area th,
  .company_area td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }
  .company_area th { border-bottom: 0 none; }
  /* 하단 확인/취소 버튼 */
  .AW_member_btn { white-space: normal; text-align: center; }
  .AW_member_btn a,
  .AW_member_btn button {
    display: block;
    width: 100%;
    margin: 0 0 8px 0 !important;
  }
  .AW_member_btn a:last-child,
  .AW_member_btn button:last-child { margin-bottom: 0 !important; }
}
@media screen and (max-width: 480px) {
  .AW_table th,
  .AW_table td { font-size: 13px; }
  .AW_table font { font-size: 11px; }
}

/* =====================================================================
   12. 상품 확대보기 팝업 - .layer_wrap.zoom_layer (layer.css)
   이미지 기준: 850px 고정폭 팝업 + 오른쪽 세로 썸네일 목록 구조를
   모바일에서 폭 100% + 큰 이미지 아래 가로 스크롤 썸네일로 전환
   ===================================================================== */
@media screen and (max-width: 768px) {
  /* 이 팝업의 반투명 검은 배경(.layer_wrap.zoom_layer 자체)은 위의 92vw 규칙에 걸려
     화면 전체를 못 덮고 있었음 - 배경은 항상 화면 전체를 덮도록 다시 고정 */
  .layer_wrap.zoom_layer {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
  }
  /* left:4vw(섹션 6)로 좌우 위치를 바꿨는데 원본 transform(-50%,-50%)이
     그대로 남아있어 가로로 어긋나던 부분을 세로 중앙정렬만 남기고 수정,
     내용이 화면보다 길어질 경우 팝업 자체 스크롤 허용 */
  .layer_wrap.zoom_layer .layer_wrap_cont {
    position: fixed !important;
    top: 50% !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    max-height: 86vh;
    overflow-y: auto;
  }
  .layer_wrap.zoom_layer .item_photo_view_box { width: 100% !important; }
  /* 큰 이미지 영역 - 600x600 고정 -> 폭 100%, 높이는 화면에 맞춰 자동 */
  .layer_wrap.zoom_layer .item_photo_big {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-height: 60vh;
    border: none;
  }
  .layer_wrap.zoom_layer .item_photo_big img {
    display: inline-block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 60vh;
  }
  /* 오른쪽 세로 썸네일 목록(item_photo_slide, slick-vertical 세로 슬라이더) ->
     이미지 아래 3열 그리드로 전환. 실제 마크업 확인 결과 목록 클래스는 ly_slider_nav,
     slick.js가 li에 인라인 width/track에 transform을 직접 넣고 있어 !important로 덮어씀 */
  .layer_wrap.zoom_layer .item_photo_slide {
    position: static;
    top: auto;
    right: auto;
    width: 100% !important;
    height: auto;
    margin: 15px 0 0;
  }
  .layer_wrap.zoom_layer .item_photo_slide .ly_slider_nav,
  .layer_wrap.zoom_layer .item_photo_slide .slick-list {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    position: static !important;
  }
  .layer_wrap.zoom_layer .item_photo_slide .slick-track {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    position: static !important;
    gap: 8px;
  }
  .layer_wrap.zoom_layer .item_photo_slide .slick-track:before,
  .layer_wrap.zoom_layer .item_photo_slide .slick-track:after,
  #lyZoom .slick-track:before,
  #lyZoom .slick-track:after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  .layer_wrap.zoom_layer .item_photo_slide .ly_slider_nav li,
  .layer_wrap.zoom_layer .item_photo_slide .slick-slide {
    display: block !important;
    position: static !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    padding: 0 !important;
  }
  .layer_wrap.zoom_layer .item_photo_slide .ly_slider_nav li a {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .layer_wrap.zoom_layer .item_photo_slide .ly_slider_nav li img {
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    object-fit: cover;
  }
  /* 3열 그리드로 대체되므로 slick의 이전/다음 화살표 버튼은 숨김 */
  .layer_wrap.zoom_layer .item_photo_slide .slick-prev,
  .layer_wrap.zoom_layer .item_photo_slide .slick-next {
    display: none !important;
  }
}
@media screen and (max-width: 480px) {
  .layer_wrap.zoom_layer .item_photo_big,
  .layer_wrap.zoom_layer .item_photo_big img { max-height: 50vh; }
}

/* =====================================================================
   13. 수량별 구매가 표 - #prd_amt (상품 상세페이지)
   이미지 기준: 8개 열(수량/100개~5,000개)이 좁은 화면에 눌려 숫자가
   "1,000\n개"처럼 줄바꿈되던 문제.
   (가로 스크롤 방식이 환경에 따라 잘 안 먹혀서) 표는 그대로 두고
   table-layout:fixed로 각 열 폭을 균등 분배 + 폰트/여백을 확 줄여서
   스크롤 없이 화면 안에 다 들어오도록 전환
   ===================================================================== */
@media screen and (max-width: 768px) {
  #prd_amt {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }
  #prd_amt tbody { display: table-row-group; }
  #prd_amt tr { display: table-row; }
  #prd_amt th,
  #prd_amt td {
    display: table-cell !important;
    width: auto !important;
    white-space: normal !important;
    word-break: keep-all;
    overflow-wrap: break-word;
    font-size: 12px !important;
    line-height: 1.3;
    padding: 6px 2px !important;
  }
  /* 맨 왼쪽 라벨(수량/구매가) 칸은 다른 칸보다 좁게 */
  #prd_amt th:first-child,
  #prd_amt td:first-child {
    width: 15% !important;
  }
}
@media screen and (max-width: 480px) {
  #prd_amt th,
  #prd_amt td {
    font-size: 11px !important;
    padding: 5px 1px !important;
  }
}

/* =====================================================================
   14. 메인페이지 상품카드 이미지 위 아이콘 버튼 - .img-wrap .btn-wrap (main.css)
   이미지 기준: 공유/찜(.new/.wish)은 원래 PC에서 :hover 시에만 opacity:0 -> 1로
   나타나는 버튼인데, 터치기기엔 hover가 없어서 항상 안 보이거나 탭했을 때만
   잠깐 보이는 불안정한 상태였음 -> 모바일에서는 항상 보이게 하고,
   카드 폭이 좁아져(2열) 버튼 3개가 줄바꿈되던 것도 한 줄로 정리
   ===================================================================== */
@media screen and (max-width: 1024px) {
  .goods_list_cont ul li .item_cont .img-wrap .btn-wrap {
    flex-wrap: nowrap;
    right: 10px;
    bottom: 10px;
    gap: 6px;
  }
  .goods_list_cont ul li .item_cont .img-wrap .btn-wrap .btn {
    width: 1.875rem;
    height: 1.875rem;
    flex: 0 0 auto;
    background-size: contain !important;
  }
  /* hover로 나타나던 공유/찜 버튼을 터치기기에서는 항상 보이도록 */
  .goods_list_cont ul li .item_cont .img-wrap .btn-wrap .btn.new,
  .goods_list_cont ul li .item_cont .img-wrap .btn-wrap .btn.wish {
    position: static;
    right: auto;
    /*opacity: 1 !important;*/
  }
}
@media screen and (max-width: 768px) {
  .goods_list_cont ul li .item_cont {
    padding: 0 4px;
  }
  .maingoods .goods_list_cont ul li {
    margin: 15px 0;
  }
  .goods_list_cont ul li .item_cont .img-wrap {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
}
@media screen and (max-width: 480px) {
  .goods_list_cont ul li .item_cont .img-wrap .btn-wrap {
    right: 8px;
    bottom: 8px;
    gap: 5px;
  }
  .goods_list_cont ul li .item_cont .img-wrap .btn-wrap .btn {
    width: 1.75rem;
    height: 1.75rem;
    background-size: contain !important;
  }
}

/* =====================================================================
   15. 옵션선택 팝업 - #optionViewLayer .option_layer_cont (layer.css)
   이미지 기준: 623px 고정폭 팝업 안의 상품 썸네일/옵션선택/선택목록표/버튼을
   모바일에 맞게 세로 스택 + 폭 100%로 정리, 썸네일 아이콘 축소
   ===================================================================== */
@media screen and (max-width: 768px) {
  /* 이 팝업의 반투명 검은 배경(#optionViewLayer 자체)도 zoom_layer와 같은 이유로
     92vw 규칙에 걸려 화면 전체를 못 덮고 있었음 - 배경은 항상 전체화면으로 고정 */
  #optionViewLayer {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
  }
  /* left:4vw(섹션 6)로 좌우 위치를 바꿨는데 원본 transform(-50%,-50%)이
     그대로 남아있어 가로로 어긋나는 것을 세로 중앙정렬만 남기고 수정 */
  #optionViewLayer .option_layer_cont {
    transform: translateY(-50%) !important;
    padding: 16px !important;
    max-height: 86vh;
    overflow-y: auto;
    box-sizing: border-box;
  }
  .option_layer_cont h4 { font-size: 15px; padding-bottom: 12px; }
  .option_layer_cont .layer_close { top: 16px; right: 14px; }
  .option_layer_cont .layer_close img { width: 20px; height: auto; }
  /* 상품 썸네일(아이콘) 축소 + 세로 스택 */
  .option_tit_box dt {
    float: none !important;
    margin: 0 0 8px !important;
  }
  .option_tit_box dt img {
    width: 44px !important;
    height: 44px !important;
  }
  .option_tit_box dd {
    margin: 0 !important;
    padding: 0 0 12px !important;
  }
  .option_tit_box dl.item_delivery dt,
  .option_tit_box dl.item_delivery dd {
    float: none !important;
    margin-left: 0 !important;
  }
  /* 사이즈선택 / 컬러선택 등 옵션 선택 영역 - 라벨 위, 셀렉트 아래로 스택 */
  .option_select_box .option_chosen {
    margin: 20px 0 0 !important;
    padding: 16px 0 0 !important;
  }
  .option_chosen dt,
  .option_chosen dd {
    float: none !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  .option_chosen dt { margin: 0 0 6px !important; }
  .option_chosen dd input[type="text"],
  .option_chosen select {
    width: 100% !important;
    box-sizing: border-box;
  }
  /* 선택된 옵션 목록 표 - 380px 고정 첫 열 때문에 넘치던 것을 폭 100% 기준으로 */
  .option_display_area {
    width: 100% !important;
    table-layout: auto !important;
  }
  .option_display_area col { width: auto !important; }
  /* 하단 취소/확인 버튼 - 폭 100%로 나란히 */
  .option_layer_cont .btn_box {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .option_layer_cont .btn_cancel,
  .option_layer_cont .btn_confirm,
  .option_layer_cont .btn_disabled_order {
    flex: 1 1 auto;
    margin: 0 !important;
    padding: 12px 0 !important;
    box-sizing: border-box;
  }
}

/* =====================================================================
   15. 메인 "카테고리별 BEST" (goods_content_7, tab형 진열) 3열 세부 조정
   index.php 확인 결과 main_wrap_7/goods_content_7 섹션은 스크린샷상
   모바일에서도 3열로 노출됨 (다른 상품목록 섹션은 2열 유지).
   위 3번 섹션에서 폭은 33.3334%로 이미 지정, 여기서는 좁아진 카드 폭에
   맞춰 텍스트가 카드 밖으로 넘치지 않도록 폰트 크기만 축소.
   ===================================================================== */
@media screen and (max-width: 768px) {
  .goods_content_7 .item_info_cont .item_number_box .num_code { font-size: 11px; }
  .goods_content_7 .item_tit_box a .item_name { font-size: 13px; }
  .goods_content_7 .item_tit_box .item_name_explain { font-size: 11px; }
  .goods_content_7 .item_money_box .item_price { font-size: 13px; }
}
@media screen and (max-width: 480px) {
  .goods_content_7 ul li .item_cont { padding: 0 4px; }
  .goods_content_7 .item_tit_box a .item_name { font-size: 12px; }
}

/* =====================================================================
   16. 장바구니 페이지 - prd_basket.php / prd_basket_step.php / basket_list.inc
   PHP/inc 파일은 수정하지 않고 CSS만으로 대응했습니다.
   실제 파일 구조 확인 결과:
   - 안내 단계 아이콘(.AW-basket_step, prd_basket_step.php)은 원형 78px
     아이콘 + 좌측 여백(padding-left:100px, margin-left:50px) 고정폭 li 4개라
     768px 이하에서 넘침 -> 아이콘 축소 + 세로(아이콘 위/텍스트 아래) 배치,
     그래도 좁으면 가로 스크롤 허용
   - 상품 목록(basket_list.inc)은 별도 wrapper class 없이 .AW-basket_step
     바로 다음 <div> 안에 class="AW_table center noline" 테이블로 렌더링됨.
     이 클래스는 11번 섹션에서 회원정보 입력폼(join_form.php) 전용으로
     th/td를 세로로 쌓는 규칙이 이미 걸려 있는데, 그대로 적용되면
     이미지/상품명/가격/수량/포인트/기능 6개 열이 라벨 없이 세로로 흩어져
     오히려 못 알아보게 됨 -> 마크업을 건드리지 않고 구조적 선택자
     (.AW-basket_step + div)로 이 표만 콕 집어 표 레이아웃을 되살리고,
     대신 표 전체를 가로 스크롤 처리(칸이 눌려서 깨지는 것 방지)
   - 하단 버튼(.AW_member_btn)은 11번 섹션 규칙으로 이미 전체폭 스택 처리됨
     (별도 수정 불필요)
   ===================================================================== */
@media screen and (max-width: 768px) {
  /* 타이틀 + 브레드크럼 */
  .prd_list_info.sub_title,
  .sub_title.prd_list_info {
    padding-bottom: 12px;
  }
  .prd_list_info.sub_title h2,
  .sub_title.prd_list_info h2 {
    float: none;
    display: block;
    font-size: 20px;
    line-height: 1.4;
    margin: 0 0 8px 0;
  }
  .prd_list_info.sub_title .cate_depth,
  .sub_title.prd_list_info .cate_depth {
    float: none;
    display: block;
    line-height: 1.4;
  }
  .prd_list_info.sub_title .cate_depth li,
  .sub_title.prd_list_info .cate_depth li {
    font-size: 12px;
  }
  /* 주문 단계 아이콘 (prd_basket_step.php: ul.step_wrap > li > i, span.iconN, small, strong) */
  .AW-basket_step { padding: 16px 0; }
  .AW-basket_step .step_wrap {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 15px;
    white-space: nowrap;
  }
  .AW-basket_step .step_wrap li {
    flex: 0 0 auto;
    width: 60px;
    margin-left: 28px;
    padding: 0;
    text-align: center;
  }
  .AW-basket_step .step_wrap li:first-child { margin-left: 0; }
  .AW-basket_step .step_wrap li i {
    left: -18px;
    top: 24px;
    margin-top: 0;
  }
  .AW-basket_step .step_wrap li span {
    position: static;
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 8px;
    background-size: 20px auto !important;
  }
  .AW-basket_step .step_wrap li small { font-size: 11px; }
  .AW-basket_step .step_wrap li strong { font-size: 13px; }
  /* 장바구니 상품 목록 표 (basket_list.inc, table.AW_table.center.noline) */
  .AW-basket_step + div {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 15px;
  }
  .AW-basket_step + div .AW_table {
    display: table !important;
    width: 100% !important;
    min-width: 640px;
    border-top: 0 none !important;
  }
  .AW-basket_step + div .AW_table tbody {
    display: table-row-group !important;
  }
  .AW-basket_step + div .AW_table tr {
    display: table-row !important;
  }
  .AW-basket_step + div .AW_table th,
  .AW-basket_step + div .AW_table td {
    display: table-cell !important;
    width: auto !important;
    padding: 10px 6px !important;
    font-size: 12px;
    vertical-align: middle;
    border-bottom: 1px solid #eee;
  }
  /* 상품명(p style="font-size:16px") 인라인 스타일은 !important로만 덮어쓸 수 있음 */
  .AW-basket_step + div .AW_table td p {
    font-size: 14px !important;
  }
  .AW-basket_step + div .AW_table .price {
    font-size: 14px;
    font-weight: 600;
  }
  .AW-basket_step + div .AW_table img {
    max-width: 48px;
    height: auto;
  }
}
@media screen and (max-width: 480px) {
  .prd_list_info.sub_title h2,
  .sub_title.prd_list_info h2 { font-size: 18px; }
  .AW-basket_step .step_wrap li { width: 52px; margin-left: 20px; }
  .AW-basket_step .step_wrap li span { width: 40px; height: 40px; background-size: 18px auto !important; }
  .AW-basket_step .step_wrap li i { left: -14px; }
  .AW-basket_step + div .AW_table th,
  .AW-basket_step + div .AW_table td { font-size: 11px; padding: 8px 4px !important; }
}

/* =====================================================================
   17. 마이페이지 주문/배송조회 - my_order.php
   PHP 파일은 수정하지 않고 CSS만으로 대응했습니다.
   실제 파일 구조 확인 결과:
   - 표(class="AW_table center noline")가 감싸는 div 없이 .sub_title
     바로 다음에 곧바로 옴 (주문일자/주문번호/결재금액/결재방법/배송상태/
     운송장번호/상세보기/영수증 8열)
   - 감쌀 div가 없어서 16번 섹션처럼 ".AW-basket_step + div"에 overflow를
     주는 방식을 못 씀 -> <table> 자체를 display:block + overflow-x:auto로
     만들고, 그 안의 tbody만 다시 display:table로 되돌려서(표준 CSS 앤빵
     테이블 스크롤 기법) 감싸는 요소 없이도 표 레이아웃 그대로 가로 스크롤
   - 이 표도 class가 AW_table이라 11번 섹션의 회원폼용 세로 스택 규칙이
     걸려있는데, 구조적 선택자(.prd_list_info + table.AW_table)로 이
     표만 콕 집어 재정의해서 다른 페이지의 AW_table에는 영향 없음
   ===================================================================== */
@media screen and (max-width: 768px) {
  .prd_list_info + table.AW_table.center.noline {
    display: block !important;
    width: 100% !important;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 0 none !important;
  }
  .prd_list_info + table.AW_table.center.noline tbody {
    display: table !important;
    width: 100% !important;
    min-width: 720px;
  }
  .prd_list_info + table.AW_table.center.noline tr {
    display: table-row !important;
  }
  .prd_list_info + table.AW_table.center.noline th,
  .prd_list_info + table.AW_table.center.noline td {
    display: table-cell !important;
    width: auto !important;
    padding: 10px 6px !important;
    font-size: 12px;
    white-space: nowrap;
    vertical-align: middle;
    border-bottom: 1px solid #eee;
  }
  .prd_list_info + table.AW_table.center.noline td img {
    max-width: 60px;
    height: auto;
  }
}
@media screen and (max-width: 480px) {
  .prd_list_info + table.AW_table.center.noline th,
  .prd_list_info + table.AW_table.center.noline td {
    font-size: 11px;
    padding: 8px 4px !important;
  }
}

/* =====================================================================
   18. .AW_table 상단 보더 제거 (전 페이지 공통)
   style.css의 ".AW_table {border-top:1px solid #999;}"가 페이지 종류와
   상관없이 걸려있는데, 표를 가로 스크롤/카드형으로 바꾼 모바일에서는
   불필요한 두꺼운 윗줄로만 보여서 제거
   ===================================================================== */
@media screen and (max-width: 768px) {
  .AW_table { border-top: 0 none !important; }
}

/* =====================================================================
   19. 마이페이지 관심상품 - my_wish.php
   PHP 파일은 수정하지 않고 CSS만으로 대응했습니다.
   실제 파일 구조 확인 결과:
   - 타이틀+브레드크럼(.sub_title.prd_list_info)은 16번 섹션 규칙을 그대로
     재사용(페이지 무관 공통 규칙이라 별도 처리 불필요)
   - 그 다음 "총 N개 관심상품 / 정렬방식" 줄은 감싸는 div 없이 별도
     table(class="prd_list_info", sub_title에 쓰인 것과 동명이지만 다른
     엘리먼트)이 좌/우 2칸 구조 -> 좁은 화면에서 세로 스택
   - 상품 목록은 감싸는 div(<div style="margin:10px 0 0;">) 안에
     class="AW_table center noline" 표 (선택/이미지/상품명/판매가/저장일시
     5열) -> 16번 섹션과 같은 문제(회원폼용 세로스택 규칙이 걸림)라
     구조적 선택자로 이 표만 지정해 표 레이아웃 유지 + 가로 스크롤.
     단, 장바구니 페이지(.AW-basket_step 다음 div)와 구조가 비슷해
     혼동되지 않도록 :not(.AW-basket_step)으로 명확히 구분
   - 하단 버튼(.AW_member_btn: 선택삭제/장바구니 담기)은 11번 섹션으로
     이미 전체폭 스택 처리됨 (별도 수정 불필요)
   - 표 상단 보더는 18번 섹션 공통 규칙으로 이미 제거됨
   ===================================================================== */
@media screen and (max-width: 768px) {
  /* 총 N개 관심상품 / 정렬방식 줄 */
  table.prd_list_info {
    display: block;
    width: 100% !important;
  }
  table.prd_list_info tbody,
  table.prd_list_info tr {
    display: block;
    width: 100%;
  }
  table.prd_list_info td {
    display: block;
    width: 100% !important;
    text-align: left !important;
    padding: 4px 0 !important;
    box-sizing: border-box;
  }
  table.prd_list_info td:last-child {
    margin-top: 6px;
  }
  table.prd_list_info .viewCount {
    display: inline-block;
    margin-right: 8px;
    font-size: 13px;
  }
  table.prd_list_info select {
    width: calc(100% - 90px) !important;
    max-width: 220px;
  }
  /* 관심상품 목록 표 */
  .sub_title.prd_list_info + div:not(.AW-basket_step) + div .AW_table {
    display: table !important;
    width: 100% !important;
    min-width: 560px;
  }
  .sub_title.prd_list_info + div:not(.AW-basket_step) + div .AW_table tbody {
    display: table-row-group !important;
  }
  .sub_title.prd_list_info + div:not(.AW-basket_step) + div .AW_table tr {
    display: table-row !important;
  }
  .sub_title.prd_list_info + div:not(.AW-basket_step) + div .AW_table th,
  .sub_title.prd_list_info + div:not(.AW-basket_step) + div .AW_table td {
    display: table-cell !important;
    width: auto !important;
    padding: 10px 6px !important;
    font-size: 12px;
    vertical-align: middle;
    border-bottom: 1px solid #eee;
  }
  .sub_title.prd_list_info + div:not(.AW-basket_step) + div .AW_table td p {
    font-size: 14px !important;
  }
  .sub_title.prd_list_info + div:not(.AW-basket_step) + div .AW_table .price {
    font-size: 14px;
    font-weight: 600;
  }
  .sub_title.prd_list_info + div:not(.AW-basket_step) + div .AW_table img {
    max-width: 48px;
    height: auto;
  }
  .sub_title.prd_list_info + div:not(.AW-basket_step) + div {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media screen and (max-width: 480px) {
  table.prd_list_info select { width: 100% !important; max-width: none; margin-top: 4px; }
  table.prd_list_info .viewCount { display: block; margin: 0 0 4px; }
  .sub_title.prd_list_info + div:not(.AW-basket_step) + div .AW_table th,
  .sub_title.prd_list_info + div:not(.AW-basket_step) + div .AW_table td {
    font-size: 11px;
    padding: 8px 4px !important;
  }
}