@charset "utf-8";
/* ─────────────────────────────────────────────────────────────
   골든솔트 쇼핑몰 반응형 보정 — 1차: 공통 레이아웃 뼈대 (2026-09-16)

   영카트 기본 스킨에서 가져온 default_shop.css 는 1200px 고정폭 PC 전용
   레이아웃이라 좁은 화면에서 그대로 깨집니다. 이 파일은 그 뒤에 실려서
   "고정폭을 풀고 흐름을 다시 잡는" 역할만 합니다.

   원본(default_shop.css)은 한 줄도 건드리지 않았습니다. 그래서 문제가 생기면
   shop.head.php 에서 이 파일 한 줄만 빼면 예전 상태로 완전히 돌아갑니다.

   작업 범위(1차): 화면 폭 고정 해제 / 사이드바 배치 / 우측 퀵메뉴 / 넘침 가드.
   상품목록·상세·장바구니·주문서의 내부 디자인은 다음 회차에서 다룹니다.
   ───────────────────────────────────────────────────────────── */


/* ── 어느 폭에서나: 넘침 방지 기본 가드 ─────────────────────── */

/* 상세페이지 본문에 폭이 큰 이미지가 들어와도 화면 밖으로 나가지 않게 */
#wrapper img,
.shop-content img { max-width: 100%; height: auto; }

/* 가로로 긴 표는 화면을 밀지 말고 표 안에서만 좌우로 스크롤되게 */
.tbl_wrap,
.tbl_head01,
.tbl_head02,
.tbl_head03 { max-width: 100%; }


/* ── 1280px 미만: 1200px 고정폭 해제 ───────────────────────── */
@media (max-width: 1279px) {

    /* default_shop.css 44행의 min-width:1200px 이 가로 스크롤의 주범입니다 */
    #hd,
    #wrapper,
    #ft { min-width: 0; }

    #hd_pop,
    #hd_wrapper,
    #tnb .inner,
    #gnb .gnb_wrap,
    #container_wr,
    #ft_wr { width: auto; max-width: 100%; }

    #container {
        width: auto;
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
}


/* ── 1024px 미만: 좌측 사이드바를 본문 아래로 ───────────────── */
@media (max-width: 1023px) {

    /* #aside 가 position:absolute 로 본문 위에 겹쳐 있어서, 흐름 안으로
       되돌린 뒤 순서를 바꿔 본문이 먼저 오도록 합니다. DOM 상으로는
       #aside 가 앞에 있지만 손님에게는 상품이 먼저 보여야 하니까요. */
    #container {
        display: flex;
        flex-direction: column;
    }
    #container:after { display: none; }   /* flex 컨테이너에서 clearfix 무력화 */

    #aside {
        position: static;
        width: auto;
        margin: 32px 0 0;
        order: 2;
    }
    #container .shop-content {
        order: 1;
        margin-left: 0;
    }
    #container .is_index { margin-left: 0; }

    /* (오른쪽 고정 퀵메뉴는 2026-09-16 에 shop.head.php 에서 아예 제거했습니다.
       혹시 되살릴 경우를 대비해 좁은 화면에서 숨기는 규칙만 남겨둡니다) */
    #side_menu { display: none; }
}


/* ── 767px 이하: 모바일 ───────────────────────────────────── */
@media (max-width: 767px) {

    #container {
        padding-left: 16px;
        padding-right: 16px;
        min-height: 0;
    }

    #wrapper_title {
        padding: 16px 0;
        font-size: 1.4em;
        line-height: 1.35;
    }

    /* 표는 잘라내지 않고 표 안에서만 좌우 스크롤 (금액·수량을 끝까지 볼 수 있게) */
    .tbl_wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tbl_wrap > table { min-width: 560px; }

    /* 손가락으로 누르는 요소는 최소 44px 확보 */
    .btn_submit,
    .btn01,
    .btn02,
    .btn_cancel,
    .btn_frmline { min-height: 44px; }

    /* 입력칸이 좁아 글자가 잘리거나, iOS에서 자동 확대되지 않도록 */
    .frm_input,
    input[type="text"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="email"],
    select,
    textarea { max-width: 100%; font-size: 16px; }
}


/* ═════════════════════════════════════════════════════════════
   2차: 상품상세 (skin/shop/basic/style.css 의 고정폭 해제)

   상품상세는 바깥 #container 와 별개로 자기만의 1200px 래퍼(#sit_ov_wrap)를
   갖고 있어서 1차 작업만으로는 풀리지 않았습니다. 큰 이미지가 화면 밖으로
   삐져나가던 원인입니다 - 이미지에 max-width:100% 를 줘도 부모가 1200px 이라
   소용이 없었습니다.

   ★ 선택자에 #sit 를 덧붙인 이유 (2026-09-16 수정)
     상품상세 스킨은 자기 style.css 를 <head> 가 아니라 화면 중간
     (item.form.skin.php 5행의 add_stylesheet)에서 불러옵니다. 그래서 이 파일보다
     "나중에" 실려, 같은 강도의 규칙이면 스킨 쪽이 이겨버립니다. 실제로 처음엔
     이 블록이 통째로 무시됐습니다. #sit 를 앞에 붙여 강도를 한 단계 올리면
     로드 순서와 상관없이 이깁니다. (!important 를 쓰지 않은 이유이기도 합니다)
   ═════════════════════════════════════════════════════════════ */

/* ── 1280px 미만: 상세 영역 고정폭 해제 ────────────────────── */
@media (max-width: 1279px) {
    #sit #sit_ov_wrap {
        width: auto;
        max-width: 100%;
        padding: 24px 20px;
    }
}

/* ── 1024px 미만: 이미지 + 구매정보 2단 → 세로 1단 ─────────── */
@media (max-width: 1023px) {

    /* 왼쪽 이미지(#sit_pvi) / 오른쪽 구매정보(#sit_ov) 좌우 배치를 풉니다 */
    #sit #sit_pvi,
    #sit #sit_pvi_big,
    #sit #sit_pvi_thumb,
    #sit #sit_ov { float: none; width: auto; }

    /* 500px 로 박혀 있던 큰 이미지를 화면 폭에 맞춥니다 */
    #sit #sit_pvi_big img { width: 100%; max-width: 500px; height: auto; }

    /* (모바일 썸네일은 3차에서 숨김 처리 - 아래 참고) */

    /* 448px 고정폭 + 355px 최소높이 해제 */
    #sit #sit_ov {
        min-height: 0;
        height: auto;
        margin-top: 24px;
    }

    #sit #sit_info { min-height: 0; }
}

/* ── 767px 이하: 모바일 세부 조정 ──────────────────────────── */
@media (max-width: 767px) {

    #sit #sit_ov_wrap { padding: 20px 16px; }

    #sit #sit_title { font-size: 1.6em; line-height: 1.3; }
    #sit #sit_desc { font-size: 1em; }

    /* (구매 버튼 폭 규칙은 PC에도 똑같이 필요해져서 3차의 전역 규칙으로 옮겼습니다) */

    /* 합계금액: 한 줄 45px 고정이라 금액이 길어지면 잘립니다 */
    #sit #sit_tot_price { line-height: 1.6; padding: 8px 0; }
    #sit #sit_tot_price strong { margin-left: 8px; }

    /* 상품정보·사용후기·상품문의 탭은 넘치면 좌우로 밀어서 보게 */
    #sit .sanchor {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    #sit .sanchor li { flex: 0 0 auto; }

    /* 상품정보 고시 표는 라벨을 위로 쌓습니다 */
    #sit #sit_inf_open th,
    #sit #sit_inf_open td { display: block; width: auto; }
}

/* ═════════════════════════════════════════════════════════════
   3차: 상품상세 이미지 갤러리 + 하단 중복 구매박스 정리 (2026-09-16)
   ═════════════════════════════════════════════════════════════ */

/* ── 하단 상세설명 옆 구매박스 ────────────────────────────────
   처음엔 여기서 CSS 로 숨겼지만, 확인해보니 그 박스는 스스로 주문하지 않고
   위쪽 진짜 버튼을 대신 눌러주는 껍데기였습니다(폼 밖에 있어 전송도 안 됨).
   그래서 CSS 로 가리는 대신 skin/shop/basic/item.info.skin.php 에서 아예
   출력하지 않도록 바꿨습니다($gs_use_bottom_buybox = false).
   되살리고 싶으면 그 값을 true 로. */

/* 구매박스가 빠졌으니 탭 본문이 남은 폭을 다 쓰게 합니다.
   #sit_tab 은 원래 #sit_buy(270px)와 나란히 있으려고 display:table-cell 로
   되어 있는데, 짝인 #sit_buy 가 사라지면 table-cell 은 부모 폭을 다 채우지
   않고 "내용만큼만" 차지합니다(상품정보·후기·문의·배송 탭 오른쪽이 비던 이유).
   display 자체를 block 으로 바꿔야 100% 폭을 씁니다. */
#sit #sit_info { display: block; }
#sit #sit_tab {
    display: block;
    width: auto;
}

/* ── 구매 버튼(장바구니/바로구매): 찜하기가 빠졌으니 남은 버튼이 폭을
   나눠 갖게 합니다. 기존엔 186px 고정 + float 라 찜버튼이 있을 때만
   폭이 딱 맞았는데, 찜버튼이 사라지며 오른쪽에 빈 공간이 생겼습니다.
   모바일에서만 쓰던 규칙을 PC를 포함한 전 구간으로 넓혔습니다. */
#sit #sit_ov_btn {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
#sit #sit_ov_btn:after { display: none; }
#sit #sit_ov_btn button,
#sit #sit_btn_alm {
    float: none;
    width: auto;
    min-width: 0;
    flex: 1 1 0;
    margin: 0;
}
/* 찜하기 버튼은 2026-09-16에 제거했습니다(item.form.skin.php 의
   $gs_use_wishlist). 되살리면 위 flex 규칙이 그 버튼도 받아주고,
   아래 규칙으로 다른 버튼보다 살짝 좁게 표시됩니다. */
#sit .sit_btn_wish {
    float: none;
    width: 56px;
    flex: 0 0 56px;
    margin: 0;
}


/* ═════════════════════════════════════════════════════════════
   4차: 메인화면 상품 진열 — 모바일 2열 (2026-09-16)

   추천상품(main.20) · 할인상품·신상품(main.30, main.40)이 전부 같은
   215px 고정폭 카드(.smt_10 / .smt_20 의 .sct_li)를 씁니다. 좁은 화면에선
   카드 하나가 거의 폭을 다 차지해서 한 줄에 1개만 보였습니다.

   PHP가 매겨주는 sct_last/sct_clear 클래스는 PC 기준 줄바꿈 개수(보통 4개)에
   맞춰 계산돼 있어서 모바일에서 2개씩 끊는 데는 못 씁니다. 대신 nth-child 로
   "홀수번째마다 새 줄" 규칙을 새로 만들었습니다.

   #wrapper 를 앞에 붙인 이유는 2차와 같습니다 — 이 카드들의 style.css 도
   화면 중간(각 skin 파일의 add_stylesheet)에서 실려서 이 파일보다 나중에
   출력될 수 있어, 같은 강도의 규칙이면 질 수 있기 때문입니다. */
@media (max-width: 767px) {
    #wrapper .smt_10 .sct_li,
    #wrapper .smt_20 .sct_li {
        float: left;
        width: calc(50% - 8px);
        margin-right: 16px;
    }
    #wrapper .smt_10 .sct_li:nth-child(2n),
    #wrapper .smt_20 .sct_li:nth-child(2n) {
        margin-right: 0;
    }
    #wrapper .smt_10 .sct_li:nth-child(2n+1),
    #wrapper .smt_20 .sct_li:nth-child(2n+1) {
        clear: left;
    }
}


/* ── PC(1024px 이상): 썸네일을 큰 이미지 위에 가로 한 줄로 ──────
   원래는 썸네일이 왼쪽에 세로로 쌓이고 큰 이미지가 오른쪽에 붙어 있었습니다. */
@media (min-width: 1024px) {
    #sit #sit_pvi {
        display: flex;
        flex-direction: column;
    }
    #sit #sit_pvi:after { display: none; }

    #sit #sit_pvi_thumb {
        order: 1;
        float: none;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0 0 14px;
        padding: 0;
    }
    #sit #sit_pvi_thumb li { margin: 0; }
    #sit #sit_pvi_thumb img { display: block; width: 64px; height: 64px; object-fit: cover; }

    #sit #sit_pvi_big { order: 2; float: none; }
}


/* ── 모바일·태블릿(1023px 이하): 썸네일 숨기고 좌우 스와이프 ────
   이미지가 여러 장이면 옆으로 밀어서 보고, 한 장이면 그냥 한 장만 보입니다.
   확대 버튼(#popup_item_image)은 이미지와 형제라 슬라이드에서 제외합니다. */
@media (max-width: 1023px) {
    #sit #sit_pvi_thumb { display: none; }

    #sit #sit_pvi_big {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #sit #sit_pvi_big::-webkit-scrollbar { display: none; }

    /* 스킨이 첫 장만 .visible 로 보여주던 것을 전부 펼칩니다 */
    #sit #sit_pvi_big > a:not(#popup_item_image) {
        display: block;
        flex: 0 0 100%;
        scroll-snap-align: center;
    }
    #sit #sit_pvi_big > a:not(#popup_item_image) img {
        width: 100%;
        max-width: none;
        height: auto;
    }
}


/* ═════════════════════════════════════════════════════════════
   5차: 메인화면 좌측 사이드바 제거 + 전체메뉴(#category) 위치 버그 수정
   (2026-09-16)
   ═════════════════════════════════════════════════════════════ */

/* #container .is_index 은 원래 좌측 사이드바(265px) 만큼 본문에 오른쪽
   여백을 주던 규칙입니다(default_shop.css). 사이드바를 shop.head.php 에서
   아예 뺐으니 이제 화면 폭과 상관없이 항상 꺼야 본문이 전체 폭을 씁니다
   (예전엔 1024px 미만에서만 껐었습니다 - 위 1차 참고). default_shop.css 가
   <head>에서 이 파일보다 먼저 실리기 때문에 특별히 강도를 높일 필요 없이
   그냥 다시 선언하면 이깁니다. */
#container .is_index { margin-left: 0; }

/* 헤더의 "카테고리" 버튼을 누르면 뜨는 전체메뉴(#category) 패널.

   1차 수정(잘림 방지): #category 는 position:absolute 인데 원래 left 값이
   없어서, 자기가 있던 자리(가운데 정렬+좌우 여백이 있는 좁은 컨테이너) 기준
   으로 거기서부터 폭 100%를 잡다 보니 그 왼쪽 여백만큼 화면 밖으로 밀려났
   었습니다. 이걸 고치면서 가장 가까운 positioned 조상인 header(전체 폭)를
   기준으로 잡았더니, 이번엔 반대로 패널이 화면 전체 폭으로 꽉 차서(로고·
   검색창이 있는 실제 쇼핑몰 레이아웃 폭보다 넓게) 어색해 보였습니다.

   2차 수정(레이아웃 폭 맞추기): header 대신, category.php 를 감싸고 있는
   바로 그 컨테이너(.pl_shop_navbar > .max-w-7xl - 상단 히트상품 등 링크와
   같은 최대폭 1280px + 중앙정렬 + 좌우 여백을 가진 div)를 positioned 조상
   으로 만들어서, #category 의 left:0/right:0 이 "화면 전체"가 아니라
   "쇼핑몰 헤더와 같은 폭"을 기준으로 잡히게 했습니다. */
.pl_shop_navbar > .max-w-7xl { position: relative; }

#category {
    left: 0;
    right: 0;
    box-sizing: border-box;
}

/* 전체메뉴 안의 두 묶음(상품분류 / 상품유형별 보기) - 둘 다 같은 알약
   버튼 스타일로 통일했습니다(2026-09-16). 원래 상품분류는 20%씩 5열
   그리드(칸마다 하위분류를 박스로 펼치는 표)였는데, 좁은 화면에서 칸
   폭이 부족해 이름이 "건강식/품"처럼 중간에서 줄바꿈되는 문제가 있었고,
   상품유형 5개 버튼과 스타일도 따로 놀았습니다. 알약 버튼은 flex-wrap 이라
   화면이 좁아지면 자동으로 다음 줄로 넘어가서 같은 CSS로 PC·모바일 다
   해결됩니다 - 화면 폭별 예외 규칙이 따로 필요 없습니다. */
#category .cate_types {
    padding: 18px 20px 15px;
    border-bottom: 1px solid #e7eeef;
}
#category .cate_types:last-of-type { border-bottom: 0; }
#category .cate_types_tit {
    margin: 0 0 10px;
    font-size: 0.95em;
    font-weight: bold;
    color: #999;
}
#category .cate_types_list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
#category .cate_types_list li { margin: 0; }
#category .cate_types_list a {
    display: inline-block;
    padding: 7px 16px;
    border: 1px solid #dee3eb;
    border-radius: 999px;
    color: #474747;
    font-size: 0.95em;
    font-weight: 500;
    white-space: nowrap;
}
#category .cate_types_list a:hover {
    background: #0B6E90;
    border-color: #0B6E90;
    color: #fff;
}
/* 하위분류 알약: 부모(상위분류) 바로 뒤에 이어 붙되, 옅은 색으로 구분만 */
#category .cate_types_sub a {
    border-style: dashed;
    color: #8c9195;
    font-weight: 400;
}


/* ═════════════════════════════════════════════════════════════
   6차: 상품 카드 폭을 관리자 이미지 크기에 맞추기 (2026-09-16)

   관리자 > 쇼핑몰설정 > 쇼핑몰 초기화면에서 "이미지 폭"을 바꿔도 화면이
   그대로였던 이유: 썸네일 자체는 제대로 새 크기로 만들어지는데(확인함 -
   thumb-..._300x300.png), 카드(.sct_li)가 스킨 CSS 에 215px 로 박혀 있고
   이 파일의 "이미지는 부모를 넘지 않는다(max-width:100%)" 규칙이 겹쳐서,
   300px 이미지가 다시 215px 로 줄어 그려졌습니다.

   그래서 각 스킨(main.20/30/40)이 관리자 값을 --gs-card-w 변수로 넘기고,
   여기서 카드 폭을 그 값으로 잡습니다. 값이 없으면 예전처럼 215px.

   모바일(767px 이하) 2열 규칙은 위 4차에 그대로 두려고 여기는 768px
   이상에서만 적용합니다. 인라인 style 이 아니라 CSS 변수로 넘기는 것도
   같은 이유입니다 - 인라인 폭이었다면 모바일 규칙이 이기지 못합니다. */
@media (min-width: 768px) {
    #wrapper .smt_10 .sct_li,
    #wrapper .smt_20 .sct_li { width: var(--gs-card-w, 215px); }

    /* PHP 가 "몇 번째가 줄 끝인지"를 관리자의 '1줄당 이미지 수'로 미리
       계산해 sct_last/sct_clear 클래스를 붙여둡니다. 이미지 폭을 키우면
       실제로 한 줄에 들어가는 개수가 그보다 적어질 수 있어서, 그 표시가
       엉뚱한 자리에 붙어 여백이 벌어지거나 줄이 끊깁니다. 카드 폭을 우리가
       직접 잡는 이상 이 표시는 필요 없으니 무력화합니다.
       (.smt_20 쪽 원본이 !important 라 여기서도 !important 를 씁니다) */
    #wrapper .smt_10 .sct_li.sct_clear { clear: none; }
    #wrapper .smt_10 .sct_li.sct_last { margin-right: 15px; }
    #wrapper .smt_20 .sct_li.sct_clear { clear: none; }
    #wrapper .smt_20 .sct_li.sct_last { margin: 0 15px 15px 0 !important; }
}


/* ═════════════════════════════════════════════════════════════
   7차: 분류 줄 아래 여백 (2026-09-16)

   헤더의 분류(건강식품·생활용품) 줄 바로 아래에 15px 를 더 줍니다.
   원래는 본문 첫 섹션 제목의 자기 여백 10px 뿐이라 줄에 바짝 붙어
   보였습니다(실측 10px + .shop-content 의 1px). 여기에 15px 를 더해
   약 25px 가 됩니다.

   여백을 분류 줄(.pl_shop_navbar)의 margin-bottom 으로 주지 않은 이유:
   그 줄은 화면 상단에 고정되는(sticky) 헤더 안에 있어서, 아래쪽 마진이
   헤더 바깥으로 빠져나가며(마진 상쇄) 스크롤할 때 헤더에 빈 틈처럼
   따라다닐 수 있습니다. 헤더 바깥인 #wrapper 에 주는 편이 안전합니다.
   (이 파일은 쇼핑몰 화면에서만 실리므로 커뮤니티 쪽에는 영향 없습니다) */
#wrapper { padding-top: 15px; }


/* ═════════════════════════════════════════════════════════════
   8차: 마이페이지(주문내역) 모바일 (2026-09-16)

   증상: 폰에서 마이페이지의 "주문내역조회" 표가 화면 밖으로 잘려 나갔습니다.
   원인: 마이페이지가 좌우 2단 고정폭이었습니다 - 왼쪽 회원정보 265px,
   오른쪽 본문 #smb_my_list 가 915px 고정(default_shop.css 604행). 화면이
   375px 여도 오른쪽 칸이 계속 915px 라, 그 안의 주문내역 표가 화면을 뚫고
   나갔습니다(표 자체 문제가 아니라 표를 담은 칸이 문제였습니다).
   ═════════════════════════════════════════════════════════════ */

/* 1024px 미만: 2단 → 세로 1단 */
@media (max-width: 1023px) {
    #smb_my_ov {
        float: none;
        width: auto;
        margin: 0 0 20px;
    }
    #smb_my_list {
        float: none;
        width: auto;
    }
}

@media (max-width: 767px) {
    /* 칸 폭이 풀렸으니 표는 화면 폭에 맞추고, 칸이 많아 넘칠 때만
       표 안에서 좌우로 밀어 봅니다(금액·상태까지 끝까지 볼 수 있게). */
    #smb_my .tbl_wrap,
    #smb_my .tbl_head01,
    #smb_my .tbl_head02 { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    #smb_my .tbl_wrap > table,
    #smb_my .tbl_head01 > table,
    #smb_my .tbl_head02 > table { min-width: 560px; }

    /* .tbl_wrap 으로 안 감싸인 표가 있어도 화면을 밀지 않도록 하는 안전장치 */
    #smb_my table { max-width: 100%; }

    /* 목록형 주문내역(주문번호/상품명/금액이 가로로 나뉜 형태)은 세로로 쌓습니다 */
    #smb_my .smb_my_od .smb_my_od_li,
    #smb_my .smb_my_od .smb_my_od_li1,
    #smb_my .smb_my_od .smb_my_od_li2,
    #smb_my .smb_my_od .smb_my_od_li3 {
        float: none;
        width: auto;
        padding: 0;
        text-align: left;
    }
    #smb_my .smb_my_od .smb_my_od_li2 { margin: 6px 0; }
}


/* ═════════════════════════════════════════════════════════════
   9차: 장바구니·주문내역 표를 모바일에서 카드로 (2026-09-16)

   장바구니와 주문내역조회는 칸이 6~7개라 폰 화면에 절대 다 안 들어갑니다.
   지금까지는 표 안에서 좌우로 밀어 보게 해뒀는데, 주문 직전 화면에서
   금액을 보려고 옆으로 밀어야 하는 건 좋지 않습니다.

   그래서 767px 이하에서는 행 하나를 카드 하나로 세로로 펼칩니다.
   머리글(상품명·수량·판매가…)은 js/shop.responsive.js 가 각 칸에
   data-gs-label 로 붙여주고, 여기서 "라벨 ---- 값" 모양으로 보여줍니다.
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* 카드형이 된 표는 좌우 스크롤이 필요 없습니다(1차·8차에서 걸어둔
       min-width 560px 를 여기서 풉니다 - 그 규칙들이 나중에 실릴 수도
       있어 !important 를 씁니다) */
    .shop-content .gs-stack-wrap { overflow-x: visible; }
    .shop-content table.gs-stack {
        display: block;
        width: 100%;
        min-width: 0 !important;
        border-top: 0;
    }
    .shop-content table.gs-stack thead { display: none; }
    .shop-content table.gs-stack tbody { display: block; }

    .shop-content table.gs-stack tr {
        display: block;
        margin: 0 0 10px;
        padding: 12px 14px;
        border: 1px solid #e8e8e8;
        border-radius: 8px;
        background: #fff;
    }

    /* 기본은 "라벨 ---- 값" 한 줄 */
    .shop-content table.gs-stack td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        width: auto !important;
        height: auto;
        padding: 5px 0;
        border: 0;
        text-align: right;
    }
    .shop-content table.gs-stack td::before {
        content: attr(data-gs-label);
        flex: 0 0 auto;
        color: #8a8a8a;
        font-weight: 600;
        text-align: left;
        white-space: nowrap;
    }

    /* 라벨이 없는 칸(체크박스·합계행 등)은 그냥 한 줄로 */
    .shop-content table.gs-stack td:not([data-gs-label]) {
        display: block;
        text-align: left;
    }
    .shop-content table.gs-stack td[colspan] { text-align: center; }

    /* 상품 칸은 이미지·상품명·옵션이 들어가므로 라벨 없이 넓게 씁니다 */
    .shop-content table.gs-stack td.td_prd,
    .shop-content table.gs-stack td.td_chk {
        display: block;
        text-align: left;
    }
    .shop-content table.gs-stack td.td_prd::before,
    .shop-content table.gs-stack td.td_chk::before { display: none; }
    /* .od_prd_list .td_prd .sod_img 이 원래 position:absolute(+ 부모 padding-left:120px)로
       썸네일 자리를 잡는데, 바로 위에서 이 칸(td.td_prd)의 padding 을 5px 0 로 다시
       정의해 그 120px 여백이 없어졌습니다. absolute 는 float 보다 항상 우선이라
       float:left 만으로는 안 먹혀 이미지가 옵션글씨/버튼과 겹쳤습니다(position도 같이
       바꿔야 float가 실제로 적용됨). */
    .shop-content table.gs-stack td.td_prd .sod_img { position: static; float: left; margin-right: 12px; }
    .shop-content table.gs-stack td.td_prd:after {
        display: block;
        clear: both;
        content: "";
    }

    /* 수량 조절·옵션수정 같은 버튼이 눌리는 크기가 되도록 */
    .shop-content table.gs-stack td button,
    .shop-content table.gs-stack td .btn_frmline { min-height: 36px; }
}

/* ─────────────────────────────────────────────────────────────
   10차 (2026-09-17) — 분류/검색 등 "상품 목록" 화면(list.10.skin.php,
   .sct_10 / .lists-row / col-row-N) 모바일 2열 고정.

   분류관리에서 "1줄당 이미지 수"를 PC 기준으로 5개, 4개 등으로 설정해
   두면, 그 값이 그대로 폰 화면에도 적용돼(col-row-5 = 폭 20%) 카드 5개가
   좁은 화면 한 줄에 구겨져 들어가 글자가 다 줄바꿈되는 문제가 있었습니다
   (메인화면 히트/추천 섹션에서 이미 겪었던 것과 같은 종류의 문제).

   메인화면 때와 같은 방식으로, 모바일에서는 관리자의 PC용 진열개수와
   무관하게 2열로 고정합니다. base.css의 .row-clear{clear:both!important}
   가 PC 열 수 기준 위치(예: 5번째마다)에서 줄을 바꾸므로, 2열 기준으로는
   위치가 안 맞아 꺼야 하고, 대신 홀수번째 카드마다 새 줄을 시작하도록
   clear:left 를 줍니다. (!important 는 원본 규칙 자체가 !important라
   맞대응한 것입니다.)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .lists-row .col-row-0,
    .lists-row .col-row-1,
    .lists-row .col-row-2,
    .lists-row .col-row-3,
    .lists-row .col-row-4,
    .lists-row .col-row-5,
    .lists-row .col-row-6,
    .lists-row .col-row-7,
    .lists-row .col-row-8,
    .lists-row .col-row-9,
    .lists-row .col-row-10 {
        width: 50%;
        margin-bottom: 20px;
    }
    .lists-row .row-clear { clear: none !important; }
    .lists-row > li:nth-child(2n+1) { clear: left !important; }
}

/* ─────────────────────────────────────────────────────────────
   10차 (이어서) — list.20/30/40.skin.php(다른 "상품 목록" 스킨 - 리스트형/
   갤러리형)도 분류관리에서 스킨을 바꾸면 쓰일 수 있어 같이 대비해둡니다.
   이 스킨들은 col-row 대신 PHP가 계산한 고정 px 폭(style="width:...px")과
   sct_last/sct_clear 클래스를 씁니다 - 메인화면 main.20/30/40 에서 이미
   같은 문제를 겪어 고친 방식(모바일 2열 고정)을 그대로 적용합니다.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .sct_20 .sct_li,
    .sct_30 .sct_li,
    .sct_40 .sct_li {
        float: left;
        width: calc(50% - 8px);
        margin-right: 16px;
        box-sizing: border-box;
    }
    .sct_20 .sct_li:nth-child(2n),
    .sct_30 .sct_li:nth-child(2n),
    .sct_40 .sct_li:nth-child(2n) { margin-right: 0; }
    .sct_20 .sct_li:nth-child(2n+1),
    .sct_30 .sct_li:nth-child(2n+1),
    .sct_40 .sct_li:nth-child(2n+1) { clear: left; }
    .sct_20 .sct_li.sct_last,
    .sct_30 .sct_li.sct_last,
    .sct_40 .sct_li.sct_last { margin-right: 0; }
    .sct_20 .sct_li.sct_clear,
    .sct_30 .sct_li.sct_clear,
    .sct_40 .sct_li.sct_clear { clear: none; }
}

/* ─────────────────────────────────────────────────────────────
   11차 (2026-09-17) — 장바구니(PC) 표 칸 폭 조정.

   상품명 칸이 지정폭이 없어(table-layout:auto) 나머지 폭을 전부 가져가
   669px까지 늘어나고, 그 결과 소계 칸은 기본값 100px 그대로 남아
   "500,000" 같은 금액이 한 줄에 못 들어가고 줄바꿈됐습니다.
   #sod_bsk 는 장바구니 화면에만 있는 id라 다른 표(주문내역 등, 같은
   tbl_head03 스타일을 씀)에는 영향 없습니다. table-layout:fixed 로
   바꾸고 각 칸 폭을 직접 정해 합이 항상 1200px(원래 표 폭)이 되게
   맞췄습니다 — 상품명은 조금 줄이고(670→590) 소계는 조금 늘렸습니다
   (100→180).
   ───────────────────────────────────────────────────────────── */
#sod_bsk table {
    table-layout: fixed;
}
#sod_bsk thead th:nth-child(2),
#sod_bsk td.td_prd {
    width: 590px;
}
#sod_bsk thead th:last-child,
#sod_bsk td.td_numbig.text_right {
    width: 180px;
}

/* ─────────────────────────────────────────────────────────────
   12차 (2026-09-17) — 쿠폰 기능을 쓰지 않기로 해서, 주문서(orderform.php,
   PC/모바일 공용 코어 파일이라 테마에서 직접 못 고쳐 CSS로 숨김) 화면에
   항상 나오던 "쿠폰할인 0원" 줄과, 쿠폰이 있을 때만 나오는 쿠폰적용
   버튼들을 전부 화면에서 숨겼습니다. 실제 계산 로직은 그대로 남아있지만
   버튼이 없어 쿠폰을 적용할 방법이 없으므로 항상 0원으로 계산됩니다.
   ───────────────────────────────────────────────────────────── */
.sod_bsk_coupon,      /* 주문상품 합계의 "쿠폰할인" 줄 (PC: li, 모바일: dt/dd) */
.cp_btn,              /* 상품별 "쿠폰적용" 버튼 */
.li_cp,               /* 위 버튼을 감싸는 모바일판 래퍼 */
#od_coupon_btn, #od_coupon_cancel,   /* 주문할인쿠폰 적용/취소 버튼 */
#sc_coupon_btn, #sc_coupon_cancel {  /* 배송비할인쿠폰 적용/취소 버튼 */
    display: none !important;
}

/* (2026-09-17) 주문서(PC, shop/orderform.sub.php - 코어 폴더에 직접 덮어쓴 버전)에서
   "쿠폰할인" <li> 를 아예 지웠더니, 원래 CSS(default_shop.css)가 주문/쿠폰할인/배송비
   3칸을 33.333%씩 나눠 갖게 짜여 있어서 가운데 칸이 빈 공간으로 남고 "주문"과
   "배송비"가 한쪽으로 쏠려 보였습니다("주문 + 배송비" 사이만 붙고 나머지가 빔).
   쿠폰할인 칸이 영구히 없어졌으니, 남은 두 칸(주문/배송비)이 절반씩 채우도록
   폭을 다시 나눴습니다. */
#sod_frm #sod_bsk_tot .sod_bsk_sell,
#sod_frm #sod_bsk_tot .sod_bsk_dvr {
    width: 50% !important;
}

/* ─────────────────────────────────────────────────────────────
   13차 (2026-09-17) — 주문내역조회(shop/orderinquiry.sub.php, 주문내역조회
   페이지·마이페이지 최근 주문내역 위젯 둘 다 이 표 하나를 같이 씀) 칸 폭 조정.
   주문서번호/주문일시는 좁게, 금액 세 칸(주문금액/입금액/미입금액)은 넓게
   해서 "1,000,000" 같은 금액이 칸 안에서 줄바꿈되지 않게 했습니다.
   .pl_orderinquiry_tbl 클래스는 이 표에만 붙어 있어 다른 tbl_head03 표
   (게시판 목록 등)에는 영향 없습니다.

   ※ 칸 폭 지정은 "표 모양"일 때만 의미가 있어서 768px 이상(PC)에서만 겁니다.
     좁은 화면에서는 9차의 카드형 변환이 표를 세로 카드로 펼치기 때문에
     (그때 td 는 width:auto !important 가 됩니다) 폭 지정이 끼어들면 안 됩니다.
   ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .pl_orderinquiry_tbl table {
        table-layout: fixed;
    }
    /* (2026-09-17 조정) 주문서번호(16자리)가 두 줄로 잘리고 있어 넓혔고,
       주문일시는 요일 "(수)" 표기를 빼면서 좁혀도 되어 줄였습니다.
       상품수는 한두 자리 숫자뿐이라 더 좁혔고, 그렇게 남은 폭을 금액 세 칸이
       가져갑니다. 합계가 100% 가 되도록 맞춰뒀습니다
       (18 + 15 + 7 + 16*3 + 나머지 12 = 100). */
    .pl_orderinquiry_tbl .col-od_id {
        width: 18%;
    }
    .pl_orderinquiry_tbl .col-od_time {
        width: 15%;
    }
    .pl_orderinquiry_tbl .col-od_cnt {
        width: 7%;
    }
    .pl_orderinquiry_tbl .col-od_money {
        width: 16%;
    }
}
/* 금액이 "1,000,000" 처럼 중간에서 줄바꿈되지 않게 하는 건 카드형(모바일)에서도
   그대로 도움이 되므로 화면 폭과 상관없이 적용합니다. */
.pl_orderinquiry_tbl .col-od_money {
    white-space: nowrap;
}


/* ============================================================
   14차 (2026-09-17) 상품검색 결과 / 상품상세 탭 - 모바일 줄바꿈 정리

   세 가지 모두 "좁은 화면에서 한 줄에 들어가야 할 것이 아래줄로 내려가던" 문제입니다.
   PC 화면은 지금 모습 그대로 두려고 전부 767px 이하 조건 안에만 넣었습니다.

   ※ 이 내용은 원래 css/default_shop.css 에 넣었는데, 그 파일은 주소 뒤 ?ver 값이
     고정이라 브라우저가 한 번 받아둔 옛날 CSS 를 계속 써서 휴대폰에서만 계속
     반영이 안 됐습니다. 이 파일(shop_responsive.css)은 파일 수정시각을 버전으로
     쓰기 때문에 고칠 때마다 최신이 내려갑니다. 그래서 이리로 옮겼습니다.
     (shop.head.php 의 default_shop.css 도 같은 방식으로 고쳐뒀습니다.)
   ============================================================ */
@media (max-width: 767px) {

    /* (1) 검색어 입력창 + 검색 버튼이 위아래로 나뉘던 것 -> 한 줄로.
           입력창이 남는 폭을 모두 차지하고 버튼은 제 크기를 지킵니다. */
    #ssch_frm .ssch_scharea {
        display: -webkit-box; display: -ms-flexbox; display: flex;
        -webkit-box-align: center; -ms-flex-align: center; align-items: center;
        -ms-flex-wrap: nowrap; flex-wrap: nowrap;
    }
    #ssch_frm .ssch_scharea #ssch_q {
        -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto;
        width: auto; min-width: 0;
    }
    #ssch_frm .ssch_scharea .btn_submit {
        -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto;
        white-space: nowrap;
    }
    #ssch_frm .ssch_scharea .tooltip_icon {
        -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto;
    }

    /* (2) "전체분류 (7)" 의 숫자가 아랫줄로 내려가던 것 -> 분류명 옆 같은 줄로.
           한 칸이 20%(모바일에서 약 70px)라 너무 좁아서, 줄바꿈만 막으면 숫자가
           옆 칸 글자와 겹칩니다. 그래서 모바일에서는 한 줄에 2개(50%)로 넓힙니다. */
    #ssch_cate li {
        width: 50%;
        -webkit-box-sizing: border-box; box-sizing: border-box;
    }
    #ssch_cate li:nth-child(5n) { border-right: 1px solid #f6f6f6; }
    #ssch_cate li:nth-child(2n) { border-right: 0; }
    #ssch_cate a {
        white-space: nowrap;
        padding: 0 8px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* (3) 상품상세 탭 - 상품정보 / 사용후기 / 상품문의 / 배송·교환 중
           "배송/교환"이 아랫줄로 내려가던 것 -> 네 개가 폭을 1/4씩 나눠 갖고 한 줄로.
           375px 화면에서 한 칸 85px, 글자 잘림 없이 들어가는 것을 확인했습니다. */
    #sit_tab .tab_tit {
        display: -webkit-box; display: -ms-flexbox; display: flex;
        -ms-flex-wrap: nowrap; flex-wrap: nowrap;
        padding: 0;
    }
    #sit_tab .tab_tit li {
        float: none;
        display: block;
        -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0;
        min-width: 0;
    }
    #sit_tab .tab_tit li button {
        width: 100%;
        padding: 10px 2px;
        font-size: 0.9em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #sit_tab .item_use_count,
    #sit_tab .item_qa_count {
        min-width: 0;
        padding: 0 3px;
        font-size: 0.7em;
    }
}


/* ============================================================
   15차 (2026-09-17) 모바일 화면 마무리 4가지
   (회원버튼 닉네임 표시·배경색은 shop/shop.head.php 에서 처리했습니다.)
   ============================================================ */

/* (1) 상품상세 "판매가격" 이 라벨보다 위로 떠 보이던 문제.
   원인은 skin/shop/basic/style.css 의
   .sit_ov_tbl td strong {line-height:5px; vertical-align:top}
   입니다. 줄높이가 5px 이라 글자가 칸 위쪽으로 딸려 올라갑니다.
   줄높이를 정상으로 돌리고 세로 가운데로 맞춥니다. (PC 에서도 같은 증상이라
   화면 폭과 상관없이 적용합니다.) */
.sit_ov_tbl td strong {
    line-height: inherit;
    vertical-align: middle;
}

@media (max-width: 767px) {

    /* (2) 주문서 작성 - 어두운 합계 상자 안의 "총계" 금액이 브랜드색(#0B6E90)이라
       어두운 배경(#212a37)에서 잘 안 보였습니다. 흰색으로 바꿉니다. */
    .sod_frm_mobile #m_sod_bsk_tot .sod_bsk_cnt strong {
        color: #fff;
    }

    /* (3) 주문내역 상세에서 주소·배송정보가 오른쪽으로 잘리던 문제.
       원인은 .sod_left {width:840px} 라는 PC 고정폭입니다. 840px 짜리 상자가
       375px 화면 밖으로 465px 삐져나가 그만큼이 안 보였습니다.
       모바일에서는 폭을 100% 로 풀고, 긴 주소는 줄바꿈되게 합니다. */
    .sod_left,
    .sod_right {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
    }
    #sod_fin .sod_left th {
        width: 78px;
        padding: 10px 8px;
        word-break: keep-all;
    }
    #sod_fin .sod_left td {
        padding: 10px 8px;
        word-break: break-word;
        overflow-wrap: break-word;
    }
    #sod_fin_receiver .tbl_wrap,
    #sod_fin_orderer .tbl_wrap,
    #sod_fin_dvr .tbl_wrap {
        padding: 10px;
    }

    /* 위 폭 해제만으로는 부족했습니다. 1차에서 넓은 표를 좌우로 밀어 보게 하려고
       걸어둔 .tbl_wrap > table {min-width:560px} 때문에, 표가 여전히 화면보다
       185px 넓게 버티고 있었습니다. 주문상세의 이 네 표는 "항목 - 값" 형태라
       좌우 스크롤이 필요 없고 줄바꿈이 맞으므로, 여기서만 min-width 를 풀고
       table-layout:fixed 로 화면 폭을 지키게 합니다.
       (상품목록 표는 건드리지 않아 기존 카드형/스크롤 동작 그대로입니다.) */
    #sod_fin_view .tbl_wrap,
    #sod_fin_orderer .tbl_wrap,
    #sod_fin_receiver .tbl_wrap,
    #sod_fin_dvr .tbl_wrap {
        overflow-x: visible;
    }
    #sod_fin_view .tbl_wrap > table,
    #sod_fin_orderer .tbl_wrap > table,
    #sod_fin_receiver .tbl_wrap > table,
    #sod_fin_dvr .tbl_wrap > table {
        min-width: 0;
        width: 100%;
        table-layout: fixed;
    }

    /* (4) "주문 취소" 버튼 - 가로 꽉 찬 50px 짜리 큰 버튼이라 눌러야 할 것처럼
       보였습니다. 작은 버튼형으로 줄이고 오른쪽에 두고, 아래쪽(푸터)과
       간격을 띄웁니다. */
    #sod_fin_cancel {
        text-align: right;
        margin: 0 0 30px;
    }
    #sod_fin_cancel .sod_fin_c_btn {
        display: inline-block;
        width: auto;
        height: auto;
        padding: 8px 16px;
        font-size: 0.95em;
        font-weight: normal;
        border-radius: 4px;
    }
}

/* ============================================================
   16차 (2026-09-21) 장바구니(shop/cart.php) 합계 상자 - 모바일에서
   "배송비/포인트/총계 가격" 라벨과 금액이 한 줄에 붙어 있다 보니, 칸이
   좁아 금액이 길면(총계 가격의 "50,000 원") 줄바꿈되며 숫자만 잘려
   보였습니다("50,\n000 원"). 라벨은 위 줄, 값은 아래 줄로 내려서
   폭에 상관없이 안 잘리게 합니다.
   (라벨 텍스트 "총계 가격" → "합계 금액" 변경은 CSS로는 불가능한, cart.php
   안에 박힌 문구라 코어 파일을 직접 고쳐야 합니다 - 파일 요청 필요.)
   ============================================================ */
@media (max-width: 767px) {
    #sod_bsk #sod_bsk_tot li {
        text-align: center;
        padding: 14px 8px;
        font-size: 1em;
    }
    #sod_bsk #sod_bsk_tot li span {
        display: block;
        float: none;
        margin: 0 0 6px;
    }
}

/* ═════════════════════════════════════════════════════════════
   7차: 히트상품 슬라이드 카드 잘림 수정 (2026-09-27)
   카드(.sct_li)는 스킨에서 style="width:관리자 이미지폭px" + 좌우 8px 여백으로
   고정되어 있는데, 슬라이드(owl)는 화면 폭을 나눠 칸 폭을 따로 계산합니다.
   카드가 칸보다 커서 넘치고, 상품이 적을 때 반복용 복사본과 겹쳐 제목·가격
   왼쪽이 잘렸습니다. 슬라이드 안에서는 카드를 칸 폭에 딱 맞춥니다.
   (개수·반복 여부는 shop/index.php 스크립트에서 상품 수에 맞춰 정합니다)
   ───────────────────────────────────────────────────────────── */
#idx_hit .smt_40 { padding: 16px; }
#idx_hit .smt_40 .owl-item .sct_li {
    width: 100% !important;
    margin: 0 !important;
    float: none;
}
#idx_hit .smt_40 .owl-item .sct_img img { width: 100%; height: auto; }
#idx_hit .smt_40 .sct_txt,
#idx_hit .smt_40 .sct_cost { word-break: keep-all; overflow-wrap: anywhere; }

/* 8차 (2026-09-27): 히트상품 등 "상품진열 20"(롤링) 스킨의 왼쪽 잘림.
   스킨 CSS 의 .smt_20 { margin:0 -5px } 때문에 목록 전체가 왼쪽으로 5px
   밀려 있는데, 바깥 섹션(.sct_wrap)이 overflow:hidden 이라 첫 카드의
   이미지·제목·가격 왼쪽 5px 이 잘려 보였습니다. 음수 여백을 없앱니다. */
#wrapper .smt_20 { margin-left: 0; margin-right: 0; }