@charset "utf-8";

/* Common */
.opt-tbl { width:100%; border-collapse:collapse; padding:0px; margin:0 0 15px; border:0px; border:1px solid #ddd; border-bottom:0px; background:#fff;} 
.opt-tbl th { width:120px; text-align:center; padding:8px 10px; border-bottom:1px solid #ddd; background:#fafafa; white-space:nowrap;}
.opt-tbl td { padding:8px 10px; border-bottom:1px solid #ddd;}
.bsk-tbl th { text-align:center; }
.bsk-tbl .well { margin:6px 0px !important; }
.bsk-tbl .well ul  { padding:0; padding-left:15px; margin:0; }
.bsk-tbl .well li  { font-size:12px; }
.item-img { display:inline-block; position:relative; overflow:hidden; text-align:center; }
.item-type { position:absolute; left:0; bottom:0; background: rgba(0, 0, 0, 0.7); width:100%; color: rgb(255,255,255); padding:3px; font-size:11px; letter-spacing:-1px; }
.addr-line { margin-bottom:7px; }
.radio-line label { margin-right:20px; line-height:24px; cursor:pointer; }
.radio-line label span { vertical-align:middle; }

#sod_frm_escrow { margin:0px; }
#sod_frm_escrow h2 { display:none; }
#sod_frm_escrow img { margin:0 auto 15px }

/* Personal List */
.ppay-container { overflow:hidden; margin-right:-15px; margin-bottom:15px; }
.ppay-box { background:#fff; text-align:center; margin-right:15px; margin-bottom:15px; border: 1px solid rgb(231, 231, 231); transition:0.3s linear; border-image: none; overflow: hidden; position: relative; cursor: default; }
.ppay-box h2 { margin: 0px; padding: 12px 15px 0px; color: rgb(51, 51, 51); font-size: 16px; font-weight: 500; text-align:center; }
.ppay-box p { margin:0px 0px 10px; padding:10px; }
.ppay-box .ppay-fa { padding: 20px 0px 10px; }
.ppay-box .ppay-fa i { color: rgb(97, 97, 97); font-size: 80px; }

/* 정원 추가 장바구니 */

/* 기본 테이블 설정 유지 */
.table-responsive {
    overflow-x: auto;
}

/* 데스크탑용 유지 */
@media (min-width: 768px) {
    .bsk-tbl {
        width: 100%;
        border-collapse: collapse;
    }

    .bsk-tbl th,
    .bsk-tbl td {
        padding: 10px;
        border: 1px solid #ddd;
        text-align: center;
        white-space: nowrap;
    }
}


/* 모바일에서 thead 전체 숨기기 */
@media (max-width: 767px) { 

    .bsk-tbl, .order-item, {
        border-collapse: collapse; 
        width: 100%;
        margin-bottom: 20px; 
    }

    .bsk-tbl, .order-item thead {       
        display: none;
    }

    .bsk-tbl, tr {
        display: block; 
        margin-bottom: 15px; 
        border: 1px solid #ddd; 
        border-radius: 8px; 
        padding: 10px;
        background-color: #fff; /
        box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
		display: table-row;

    }

    /* 'tr-line' 클래스가 있는 첫 번째 행에 대한 특정 스타일 */
    .bsk-tbl tr.tr-line {
        border-top: 1px solid #ddd; 
    }

    .bsk-tbl td {
        display: flex; 
        justify-content: space-between; 
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #eee; 
    }

    .bsk-tbl td:last-of-type { 
        border-bottom: none; 
    }

    .bsk-tbl td::before {        
        content: attr(data-label);
        font-weight: 500; 
        flex-basis: 40%;
        text-align: left;
        color: #555;
        font-size: 0.9em;
    }

    /* 체크박스 열에 대한 특정 조정 */
    .bsk-tbl td[data-label="상품전체"] {
        justify-content: flex-start; 
        border-bottom: none; 
        padding-bottom: 5px;
    }

    .bsk-tbl td[data-label="상품전체"]::before {
        display: none; 
    }
    .bsk-tbl td[data-label="상품전체"] input[type="checkbox"] {
        transform: scale(1.2); 
        margin-right: 10px;
    }

    /* 이미지 및 상품명 조정 */
    .bsk-tbl td[data-label="이미지"] {
        flex-direction: row; 
        align-items: flex-start; 
        border-bottom: none; 
        padding-bottom: 0;
        padding-top: 5px; 
    }

    .bsk-tbl td[data-label="이미지"]::before {
        content: none; 
    }

    .bsk-tbl td[data-label="이미지"] .item-img {
        min-width: 80px; 
        height: 80px;
        margin-right: 15px; 
        border: 1px solid #eee;
        border-radius: 4px;
        overflow: hidden; 
        flex-shrink: 0; 
    }

    .bsk-tbl td[data-label="이미지"] .item-img img {
        width: 100%;
        height: 100%;
        object-fit: cover; 
    }

    .bsk-tbl td[data-label="이미지"] .item-type {
        font-size: 0.8em;
        color: #888;
        margin-top: 5px;
    }


     /* '옵션변경' 항목에 대한 조정 */
    .bsk-tbl td[data-label="옵션변경"] {
        flex-direction: column; 
        align-items: flex-start;
        padding-top: 10px; 
        flex-grow: 1; 
    }

	 .bsk-tbl td button,input {
        flex-direction: column;      
	
    }

	.pd-t10 {padding-top:10px;}

    /* 가격 및 수량 값 오른쪽 정렬 */
    .bsk-tbl td[data-label="총수량"] span,
    .bsk-tbl td[data-label="판매가"] span,
    .bsk-tbl td[data-label="소계"] span,
    .bsk-tbl td[data-label="포인트"] span,
    .bsk-tbl td[data-label="배송비"] span {
        text-align: right; 
        flex-basis: 55%; 
        font-weight: bold; 
        color: #000;
    }
  
   
}


/* 모바일 카드형 스타일 */

@media (max-width: 767px) {
    .bsk-tbl,
    .bsk-tbl thead,
    .bsk-tbl tbody,
    .bsk-tbl th,
    .bsk-tbl td,
    .bsk-tbl tr {
        display: block;
        width: 100%;
    }

    .bsk-tbl thead {
        display: none;
    }

    .bsk-tbl tr {
        margin-bottom: 20px;
         background-color: #fff;
        border-radius: 8px;
        padding: 10px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    .bsk-tbl td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 5px;
        border: none;
        border-bottom: 1px solid #f2f2f2;
    }

    .bsk-tbl td:last-child {
        border-bottom: none;
    }

    .bsk-tbl td::before {
        content: attr(data-label);
        font-weight: bold;
        flex-basis: 40%;
        color: #555;
    }

    .bsk-tbl td input[type="checkbox"] {
        margin: 0;
    }
}