@charset "utf-8";



/* ============================================
   쇼핑 페이지 전용 반응형 CSS
   - 브랜드 컬러: #b08968 (브라운)
   - 폰트: Pretendard
   - 컨테이너: max-width 1400px
   ============================================ */

/* ============================================
   CSS 변수 정의 (커스텀 브랜드 컬러 적용)
   ============================================ */
:root {

--gold: #a87b4f;
    --gold-dark: #7c5a38;
    --gold-light: #c9a07a;
    --gold-xlight: #f0e6d8;
    --cream: #faf7f4;
    --sand: #f0e8dc;
    --noir: #1a1a1a;
    --noir-2: #2c2c2c;
    --text-body: #3a3a3a;
    --text-muted: #888888;
    --text-light: #bbbbbb;
    --border: #e0d8cf;
    --border-dark: #c4b8ab;
	
    --shop-max-width: 1400px;
    --shop-padding: 20px;
    --shop-gap: 24px;
    
    /* 브랜드 컬러 */
    --primary-color: #b08968;
    --primary-hover: #9a7558;
    --primary-dark: #8a6a4f;
    --primary-light: rgba(176,137,104,0.1);
    --primary-border: rgba(176,137,104,0.3);
    
    /* 강조 색상 */
    --accent-color: #111;
    --accent-price: #111;
    
    /* 텍스트 */
    --text-primary: #222;
    --text-secondary: #666;
    --text-muted: #999;
    
    /* 배경/보더 */
    --border-color: #e3e5e8;
    --border-light: #f0f2f5;
    --bg-white: #fff;
    --bg-light: #f8f9fa;
    --bg-dark: #434a54;
    
    /* 헤더 다크 테마 */
    --header-bg: #1e1810;
    --header-menu: #1a1208;
    --header-border: #2e2318;
    
    /* 그림자 */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    
    /* 둥근 모서리 */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
}

/* ============================================
   쇼핑 페이지 컨테이너
   ============================================ */
.shop-container,
#container.shop-page #container_wr,
.shop-page #container_wr {
    max-width: var(--shop-max-width) !important;
    width: 92% !important;
    margin: 0 auto;
    padding: var(--shop-padding) 0;
}

/* 쇼핑 페이지 영역에서 기본 min-width 제거 */
.shop-page #hd,
.shop-page #wrapper,
.shop-page #ft,
.shop-page #container_wr {
    min-width: auto !important;
}

/* ============================================
   주문서 폼 전체 레이아웃
   ============================================ */
#sod_frm.sod_frm_pc {
    max-width: 100%;
}

/* 2컬럼 레이아웃 (PC) */
.sod_left {
    float: left;
    width: calc(100% - 360px);
    margin-right: var(--shop-gap);
}

.sod_right {
    float: right;
    width: 456px;
}

/* ============================================
   공통 테이블/카드 스타일
   ============================================ */
.tbl_wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tbl_head03 table {
    width: 100%;
    border-collapse: collapse;
}

/* ============================================
   주문 상품 리스트 테이블
   ============================================ */
.od_prd_list {
    margin-bottom: var(--shop-gap);
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

#sod_list {
    width: 100%;
    border-collapse: collapse;
    min-width: 650px;
}

#sod_list thead tr {
    background: var(--bg-light);
}

#sod_list thead th {
    padding: 14px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

#sod_list tbody td {
    padding: 16px 12px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

#sod_list tbody tr:last-child td {
    border-bottom: none;
}

#sod_list tbody tr:hover {
    background: rgba(176,137,104,0.03);
}

/* 상품 이미지 + 이름 */
#sod_list .td_prd {
    text-align: left;
}

#sod_list .td_prd > div {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

#sod_list .sod_img {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-light);
}

#sod_list .sod_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#sod_list .sod_name {
    flex: 1;
    min-width: 0;
}

#sod_list .sod_name b {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: 6px;
}

#sod_list .sod_opt {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* 수량, 가격 셀 */
#sod_list .td_num,
#sod_list .td_numbig {
    text-align: center;
    font-size: 14px;
    color: var(--text-primary);
}

#sod_list .td_numbig {
    font-weight: 500;
}

#sod_list .td_numbig.text_right {
    text-align: right;
    padding-right: 16px;
}

/* 소계 가격 강조 */
#sod_list .total_prc,
.total_prc {
    font-size: 15px;
    font-weight: 600;
    color: var(--accent-price) !important;
}

/* 쿠폰 버튼 */
.cp_btn, .cp_btn1 {
    display: inline-block;
    padding: 4px 10px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--primary-color);
    background: var(--bg-white);
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.cp_btn:hover, .cp_btn1:hover {
    background: var(--primary-color);
    color: #fff;
}

/* ============================================
   주문자/받는분 정보 섹션
   ============================================ */
#sod_frm_orderer,
#sod_frm_taker {
    margin-bottom: var(--shop-gap);
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

#sod_frm section h2,
#sod_frm_orderer h2,
#sod_frm_taker h2 {
    padding: 18px 20px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
}

/* 폼 테이블 스타일 */
#sod_frm .tbl_frm01 {
    padding: 20px;
}

#sod_frm .tbl_frm01 th {
    width: 100px;
    padding: 12px 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: left;
    vertical-align: middle;
}

#sod_frm .tbl_frm01 td {
    padding: 8px 0;
}

/* 입력 필드 스타일 */
#sod_frm .tbl_frm01 td input[type="text"],
#sod_frm .tbl_frm01 td input[type="password"],
#sod_frm .tbl_frm01 td input[type="tel"],
#sod_frm .tbl_frm01 td input[type="email"],
#sod_frm .tbl_frm01 td select,
#sod_frm .tbl_frm01 td textarea {
    width: 100%;
    max-width: 400px;
    height: 44px;
    padding: 0 14px;
    font-size: 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-white);
    transition: border-color 0.2s, box-shadow 0.2s;
}

#sod_frm .tbl_frm01 td input:focus,
#sod_frm .tbl_frm01 td select:focus,
#sod_frm .tbl_frm01 td textarea:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(176,137,104,0.15);
    outline: none;
}

#sod_frm .tbl_frm01 td textarea {
    height: auto;
    min-height: 100px;
    padding: 12px 14px;
    resize: vertical;
}

/* 우편번호 검색 버튼 */
#sod_frm .btn_address {
    height: 44px;
    padding: 0 20px;
    margin-left: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background: var(--bg-dark);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s;
}

#sod_frm .btn_address:hover {
    background: #333;
}

/* 배송지 선택 */
#sod_frm_taker .order_choice_place,
#sod_frm_taker .choice_place {
    margin: 0 20px 15px;
    padding: 14px 16px;
    background: rgba(176,137,104,0.08);
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-sm);
}

/* ============================================
   결제 금액 요약 (사이드바)
   ============================================ */
#sod_bsk_tot {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

#sod_frm #sod_bsk_tot {
    margin-bottom: 16px;
}

#sod_frm #sod_bsk_tot:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: "";
}

#sod_frm #sod_bsk_tot li {
    position: relative;
    float: left;
    background: var(--bg-white);
    width: 33.333%;
    height: 70px;
    text-align: center;
    border-bottom: 1px solid var(--border-light);
    padding: 15px 0;
}

#sod_frm #sod_bsk_tot li span {
    display: block;
    color: var(--text-muted);
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 16px;
}

#sod_frm #sod_bsk_tot li strong {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

#sod_frm #sod_bsk_tot .sod_bsk_sell,
#sod_frm #sod_bsk_tot .sod_bsk_coupon {
    border-right: 1px solid var(--border-light);
}

#sod_frm #sod_bsk_tot .sod_bsk_point,
#sod_frm #sod_bsk_tot .sod_bsk_cnt {
    width: 100%;
    clear: both;
    height: 50px;
    padding: 0 15px;
    line-height: 50px;
    text-align: right;
}

#sod_frm #sod_bsk_tot .sod_bsk_point span,
#sod_frm #sod_bsk_tot .sod_bsk_cnt span {
    float: left;
    margin: 0;
    line-height: 50px;
}

#sod_frm #sod_bsk_tot .sod_bsk_cnt strong {
    color: var(--accent-price);
    font-size: 1.25em;
}

/* 최종 결제 금액 */
#od_tot_price {
    margin: 16px 0;
    padding: 18px;
    background: var(--bg-light);
    border-radius: var(--radius-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#od_tot_price span {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

#od_tot_price strong {
    font-size: 22px;
    font-weight: 700;
    color: var(--accent-price);
}

/* ============================================
   결제 수단 선택
   ============================================ */
#od_pay_sl h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 24px 0 12px;
}

#od_pay_sl .lb_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    width: calc(50% - 4px);
    height: 52px;
    margin: 2px;
    padding: 0 12px;
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}

#od_pay_sl .lb_icon:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

#od_pay_sl input[type="radio"]:checked + .lb_icon {
    border-color: var(--primary-color);
    background: var(--primary-light);
    color: var(--primary-color);
    font-weight: 500;
}

/* ============================================
   포인트 사용 영역
   ============================================ */
.sod_frm_point {
    margin: 16px 0;
    padding: 16px;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.sod_frm_point label {
    font-size: 13px;
    color: var(--text-secondary);
}

.sod_frm_point input[type="text"] {
    width: 120px;
    height: 36px;
    padding: 0 12px;
    font-size: 14px;
    text-align: right;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

/* ============================================
   주문 버튼
   ============================================ */
.btn_confirm {
    margin-top: var(--shop-gap);
    text-align: center;
}

/*
.btn_submit {
    display: inline-block;
    width: 100%;
    max-width: 400px;
    height: 54px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: var(--primary-color);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.btn_submit:hover {
    background: var(--primary-hover);
}

.btn_submit:active {
    transform: scale(0.98);
}
*/
/* 취소 버튼 */
.btn_cancel,
.btn01 {
    display: inline-block;
    height: 48px;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    line-height: 46px;
}

.btn_cancel:hover,
.btn01:hover {
    background: var(--bg-light);
    border-color: #ccc;
}

/* ============================================
   장바구니 페이지
   ============================================ */
#sod_bsk {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--shop-gap);
}

#sod_bsk.od_prd_list {
    margin-bottom: var(--shop-gap);
}

/* 장바구니 테이블 */
#sod_bsk .tbl_wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#sod_bsk table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}

#sod_bsk thead tr {
    background: var(--bg-light);
}

#sod_bsk thead th {
    padding: 14px 12px;
	background-color:var(--cream); 
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    text-align: center;
}

#sod_bsk tbody td {
    padding: 16px 12px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
    text-align: center;
}

#sod_bsk tbody tr:last-child td {
    border-bottom: none;
}

#sod_bsk tbody tr:hover {
    background: rgba(176,137,104,0.03);
}

/* 체크박스 열 */
#sod_bsk .td_chk {
    width: 50px;
    text-align: center;
}

/* 상품 정보 열 */
#sod_bsk .td_prd {
    text-align: left;
    min-width: 280px;
}

#sod_bsk .td_prd > div {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

#sod_bsk .sod_img {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-light);
}

#sod_bsk .sod_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#sod_bsk .sod_name {
    flex: 1;
    min-width: 0;
}

#sod_bsk .sod_name .prd_name {
    display: block;
    margin-bottom: 6px;
}

#sod_bsk .sod_name .prd_name b {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.5;
}

#sod_bsk .sod_name .prd_name:hover b {
    color: var(--primary-color);
}

#sod_bsk .sod_opt {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 8px;
}

/* 옵션 수정 버튼 */
#sod_bsk .sod_option_btn {
    margin-top: 8px;
}

#sod_bsk .mod_options {
    padding: 4px 10px;
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}

#sod_bsk .mod_options:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* 숫자 열 */
#sod_bsk .td_num,
#sod_bsk .td_numbig {
    font-size: 14px;
    color: var(--text-primary);
    white-space: nowrap;
}

#sod_bsk .td_numbig {
    font-weight: 500;
}

#sod_bsk .td_numbig.text_right {
    text-align: right;
    padding-right: 16px;
}

/* 배송비 열 */
#sod_bsk .td_dvr {
    font-size: 13px;
    color: var(--text-secondary);
}

/* 빈 장바구니 */
#sod_bsk .empty_table {
    padding: 60px 20px;
    text-align: center;
    font-size: 14px;
    color: var(--text-muted);
}

/* 삭제 버튼 영역 */
.btn_cart_del {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-light);
    background: var(--cream);
}

.btn_cart_del button {
    padding: 8px 16px;
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.btn_cart_del button:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* 장바구니 합계 영역 */
#sod_bsk + #sod_bsk_tot,
#sod_bsk_list + #sod_bsk_tot,
form + #sod_bsk_tot {
    margin-bottom: var(--shop-gap);
}

#sod_bsk_tot ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

#sod_bsk_tot > ul > li {
    flex: 1;
    min-width: 180px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-right: 1px solid var(--border-light);
}

#sod_bsk_tot > ul > li:last-child {
    border-right: none;
}

#sod_bsk_tot > ul > li > span {
    font-size: 13px;
    color: var(--text-secondary);
}

#sod_bsk_tot > ul > li > strong {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-right: 4px;
}

/* 총계 강조 */
#sod_bsk_tot .sod_bsk_cnt {
    background: var(--bg-light);
    flex: 2;
}

#sod_bsk_tot .sod_bsk_cnt strong {
    font-size: 22px;
    color: var(--accent-price);
}

/* 장바구니 버튼 영역 */
#sod_bsk_act {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 20px 0;
}

#sod_bsk_act .btn01 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    height: 50px;
    padding: 0 24px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all 0.2s;
}

#sod_bsk_act .btn01:hover {
    border-color: var(--text-secondary);
    background: var(--bg-light);
}

#sod_bsk_act .btn_submit {
    min-width: 200px;
    height: 50px;
    padding: 0 32px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: var(--primary-color);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
}

#sod_bsk_act .btn_submit:hover {
    background: var(--primary-hover);
}

#sod_bsk_act .btn_submit:active {
    transform: scale(0.98);
}

/* 네이버페이 버튼 */
.cart-naverpay {
    margin-top: 16px;
}

/* 옵션 수정 팝업 */
#mod_option_frm {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.mod_option_bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: rgba(0,0,0,0.5);
}

/* ============================================
   반응형 - 태블릿 (1024px 이하)
   ============================================ */
@media screen and (max-width: 1024px) {
    :root {
        --shop-gap: 20px;
    }
    
    /* 1컬럼 레이아웃으로 변경 */
    .sod_left {
        float: none;
        width: 100%;
        margin-right: 0;
        margin-bottom: var(--shop-gap);
    }
    
    .sod_right {
        float: none;
        width: 100%;
    }
    
    /* 테이블 가로 스크롤 */
    .tbl_wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    #sod_list {
        min-width: 600px;
    }
    
    /* 폼 입력 필드 너비 조정 */
    #sod_frm .tbl_frm01 td input[type="text"],
    #sod_frm .tbl_frm01 td input[type="password"],
    #sod_frm .tbl_frm01 td select {
        max-width: 100%;
    }
    
    /* 장바구니 합계 */
    #sod_bsk_tot ul {
        flex-direction: column;
    }
    
    #sod_bsk_tot > ul > li {
        border-right: none;
        border-bottom: 1px solid var(--border-light);
    }
    
    #sod_bsk_tot > ul > li:last-child {
        border-bottom: none;
    }
    
    /* 주문서 합계 */
    #sod_frm #sod_bsk_tot li {
        width: 50%;
    }
    
    #sod_frm #sod_bsk_tot .sod_bsk_dvr {
        border-right: none;
    }
}

/* ============================================
   반응형 - 모바일 (768px 이하)
   ============================================ */
@media screen and (max-width: 768px) {
    :root {
        --shop-padding: 16px;
        --shop-gap: 16px;
    }
    
    .shop-container,
    #container.shop-page #container_wr,
    .shop-page #container_wr {
        width: 100% !important;
        padding: var(--shop-padding);
    }
    
    /* 섹션 타이틀 */
    #sod_frm section h2,
    #sod_frm_orderer h2,
    #sod_frm_taker h2 {
        padding: 14px 16px;
        font-size: 15px;
    }
    
    /* 폼 레이아웃 수직 정렬 */
    #sod_frm .tbl_frm01 {
        padding: 16px;
    }
    
    #sod_frm .tbl_frm01 table,
    #sod_frm .tbl_frm01 tbody,
    #sod_frm .tbl_frm01 tr,
    #sod_frm .tbl_frm01 th,
    #sod_frm .tbl_frm01 td {
        display: block;
        width: 100%;
    }
    
    #sod_frm .tbl_frm01 th {
        padding: 0 0 6px;
        margin-top: 12px;
    }
    
    #sod_frm .tbl_frm01 tr:first-child th {
        margin-top: 0;
    }
    
    #sod_frm .tbl_frm01 td {
        padding: 0;
    }
    
    #sod_frm .tbl_frm01 td input[type="text"],
    #sod_frm .tbl_frm01 td input[type="password"],
    #sod_frm .tbl_frm01 td input[type="tel"],
    #sod_frm .tbl_frm01 td input[type="email"],
    #sod_frm .tbl_frm01 td select {
        height: 48px;
        font-size: 16px; /* iOS 줌 방지 */
    }
    
    /* 주소 입력 */
    #sod_frm .btn_address {
        width: 100%;
        margin-left: 0;
        margin-top: 8px;
    }
    
    /* 결제 수단 */
    #od_pay_sl .lb_icon {
        width: 100%;
        margin: 4px 0;
    }
    
    /* 최종 금액 */
    #od_tot_price strong {
        font-size: 20px;
    }
    
    /* 주문 버튼 */
    .btn_submit {
        height: 50px;
        font-size: 15px;
    }
    
    /* 주문서 합계 */
    #sod_frm #sod_bsk_tot li {
        width: 100%;
        border-right: none !important;
    }
    
    /* 장바구니 테이블 → 카드 형태 */
    #sod_bsk table,
    #sod_bsk thead,
    #sod_bsk tbody,
    #sod_bsk tr,
    #sod_bsk td {
        display: block;
        width: 100%;
    }
    
    #sod_bsk table {
        min-width: auto;
    }
    
    #sod_bsk thead {
        display: none;
    }
    
    #sod_bsk tbody tr {
        padding: 16px;
        border-bottom: 1px solid var(--border-light);
        position: relative;
    }
    
    #sod_bsk tbody td {
        padding: 4px 0;
        border: none;
        text-align: left;
    }
    
    /* 체크박스 위치 */
    #sod_bsk .td_chk {
        position: absolute;
        top: 16px;
        right: 16px;
        width: auto;
    }
    
    /* 상품 정보 */
    #sod_bsk .td_prd {
        margin-bottom: 12px;
        padding-right: 40px;
    }
    
    /* 레이블 추가 */
    #sod_bsk .td_num::before {
        content: "수량: ";
        color: var(--text-muted);
        font-weight: 400;
    }
    
    #sod_bsk .td_numbig:not(.text_right)::before {
        content: "판매가: ";
        color: var(--text-muted);
        font-weight: 400;
    }
    
    #sod_bsk .td_dvr::before {
        content: "배송비: ";
        color: var(--text-muted);
    }
    
    #sod_bsk .td_numbig.text_right {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px dashed var(--border-light);
        text-align: left;
    }
    
    #sod_bsk .td_numbig.text_right::before {
        content: "소계: ";
        color: var(--text-muted);
        font-weight: 400;
    }
    
    /* 버튼 영역 */
    #sod_bsk_act {
        flex-direction: column;
        padding: 16px;
    }
    
    #sod_bsk_act .btn01,
    #sod_bsk_act .btn_submit {
        width: 100%;
        min-width: auto;
    }
    
    .btn_cart_del {
        justify-content: center;
    }
}

/* ============================================
   반응형 - 소형 모바일 (480px 이하)
   ============================================ */
@media screen and (max-width: 480px) {
    :root {
        --shop-padding: 12px;
        --shop-gap: 12px;
    }
    
/* 취소 버튼 */
.btn_cancel,
.btn01 {
    display: inline-block;
    height: 40px;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    line-height: 46px;
}

.btn_cancel:hover,
.btn01:hover {
    background: var(--bg-light);
    border-color: #ccc;
}


    /* 상품 이미지 크기 축소 */
    #sod_list .sod_img,
    #sod_bsk .sod_img {
        width: 64px;
        height: 64px;
    }
    
    #sod_list .sod_name b,
    #sod_bsk .sod_name .prd_name b {
        font-size: 13px;
    }
    
    /* 섹션 스타일 */
    #sod_frm_orderer,
    #sod_frm_taker,
    .od_prd_list,
    #sod_bsk {
        border-radius: var(--radius-sm);
    }
    
    /* 금액 표시 */
    #od_tot_price {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    #od_tot_price strong {
        font-size: 24px;
    }
}

/* ============================================
   인쇄 스타일
   ============================================ */
@media print {
    .sod_right,
    .btn_confirm,
    .cp_btn,
    #sod_bsk_act,
    .btn_cart_del {
        display: none !important;
    }
    
    .sod_left {
        width: 100% !important;
        float: none !important;
    }
}