/******************************************************************************/
/******************* 카트 페이지를 위한 커스텀 스타일 시작 ********************/
/******************************************************************************/

/* 전체 테이블의 설정 */
body.page-id-5557 .woocommerce-cart-form .shop_table {
    padding: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid black; /* 헤더 부분 아래 테두리 1px 블랙 */
    background-color: transparent;
    font-size: 16px; /* 폰트 크기를 16px로 설정 */
    font-weight: normal; /* 폰트 굵기를 노말로 설정 */
    line-height: 1.3em;
}

body.page-id-5557 .woocommerce-cart-form .shop_table * {
    padding: 0;
    margin: 0;
    border: 0;
    background-color: transparent;
    font-size: 16px; /* 폰트 크기를 16px로 설정 */
    font-weight: normal; /* 폰트 굵기를 노말로 설정 */
    line-height: 1.3em;
}

/* 테이블 간격 */
body.page-id-5557 .selected-items-section {
    margin-bottom: 50px; /* 두 섹션 사이의 간격을 50px로 설정 */
}


/* 테이블 헤더부분 지정 */
body.page-id-5557 .woocommerce-cart-form .shop_table thead th {
    border-bottom: 1px solid black; /* 헤더 부분 아래 테두리 1px 블랙 */
    padding-top: 15px; /* 위쪽 패딩 10px */
    padding-bottom: 15px; /* 아래쪽 패딩 10px */
}

/* 테이블 바디부분 지정 */
body.page-id-5557 .woocommerce-cart-form .shop_table tbody td {
    padding-top: 18px;  /* 셀 위쪽에 15px 패딩 */
    padding-bottom: 18px;  /* 셀 아래쪽에 15px 패딩 */
}

/* 상품명 셀 텍스트 정렬 */
/* 헤더의 아이템 텍스트 왼쪽 정렬 */
body.page-id-5557 .woocommerce-cart-form thead .product-name {
    text-align: left;
}

/* 바디의 제품명 텍스트 왼쪽 정렬 */
body.page-id-5557 .woocommerce-cart-form .product-name {
    text-align: left;
}

/* 썸네일 모양 */
body.page-id-5557 .woocommerce-cart-form .product-thumbnail img {
    border: 1px solid black;  /* 썸네일에 1px 블랙 테두리 추가 */
    border-radius: 60px 100px 70px 60px;
}

/* 쿠폰 등 버튼있는 부분 지정 */
body.page-id-5557 .woocommerce-cart-form .shop_table .actions {
    border-top: 1px solid black; /* 위 테두리 1px 블랙 */
    padding-top: 15px; /* 위쪽 패딩 10px */
    padding-bottom: 15px; /* 아래쪽 패딩 10px */
}

/* 버튼 스타일 설정 */
body.page-id-5557 .woocommerce-cart-form .actions .button {
    align-self: flex-end; /* 버튼을 오른쪽으로 정렬 */
    flex: 0 0 auto; /* 버튼의 크기를 고정 */
    height: 33px; /* 버튼 높이 설정 */
    border-radius: 15px 30px 20px 20px; /* 모서리를 둥글게 설정 */
    border: 1px solid black; /* 테두리 설정 */
    background-color: black; /* 배경색 설정 */
    color: white; /* 텍스트 색상 설정 */
    padding: 5px 7px 5px 7px; /* 내부 여백 설정 */
    font-size: 12px; /* 데스크탑에서 버튼 폰트 크기 */
    transition: background-color 0.3s, color 0.3s; /* 배경색과 텍스트 색상 전환 효과 */
}

body.page-id-5557 .woocommerce-cart-form .actions .button:hover {
    background-color: transparent; /* 마우스 오버 시 배경색 투명하게 설정 */
    color: #000; /* 마우스 오버 시 텍스트 색상 변경 */
}

/* 카트 토탈 요소 지우기 */
body.page-id-5557 .cart_totals h2 {
    display: none;
}

/* 카트 토탈 넓이 100% */
/* 상위 클래스를 이용한 높은 특이성으로 스타일 적용 */
body.page-id-5557 .woocommerce .cart-collaterals .cart_totals {
    width: 100%;
    float: none;
    margin: 0 auto;
    text-align: center; /* 중앙 정렬을 위해 추가 */
}

body.page-id-5557 .woocommerce-cart .cart-collaterals {
    display: block; /* 기본적으로 좌우 배치를 블록 레이아웃으로 변경 */
    width: 100%; /* 전체 너비를 사용하도록 설정 */
}


/* 카트 토탈 스타일 보는 중 */
body.page-id-5557 .cart-collaterals .cart_totals .shop_table,
body.page-id-5557 .cart-collaterals .cart_totals .shop_table * {
    margin: 0;
    width: 100%;
}

body.page-id-5557 .cart-collaterals .cart_totals .shop_table td,
body.page-id-5557 .cart-collaterals .cart_totals .shop_table th,
body.page-id-5557 .cart-collaterals,
body.page-id-5557 .cart-collaterals .cart_totals,
body.page-id-5557 .woocommerce-cart .cart-collaterals .cross-sells {
    border: 0;
    padding: 0;
    font-size: 16px; /* 폰트 크기를 16px로 설정 */
    font-weight: normal; /* 폰트 굵기를 노말로 설정 */
    line-height: 1.3em;
}

body.page-id-5557 .cart-collaterals .cart_totals .shop_table td,
body.page-id-5557 .cart-collaterals .cart_totals .shop_table th {
    padding-top: 15px; /* 위쪽 패딩 15px */
    padding-bottom: 15px; /* 아래쪽 패딩 15px */
}

body.page-id-5557 .cart-collaterals .cart_totals .shop_table tr {
    border-top: 1px solid black; /* 위쪽 테두리 1px 블랙 */
    border-bottom: 1px solid black; /* 아래쪽 테두리 1px 블랙 */
}

body.page-id-5557 .cart-collaterals .cart_totals .shop_table th {
    width: 35%;
    text-align: right;
    padding-right: 30px; /* 1열과 2열 사이에 30px 간격 */
    vertical-align: top;
}

body.page-id-5557 .cart-collaterals .cart_totals .shop_table td {
    width: 65%;
    text-align: left;
    vertical-align: top;
}

/* 테이블 전체의 위아래에만 1px 블랙 보더 설정 */
body.page-id-5557 .cart-collaterals .cart_totals .shop_table {
    border-top: 1px solid black; /* 테이블 맨 위에 1px 블랙 테두리 */
    border-bottom: 1px solid black; /* 테이블 맨 아래에 1px 블랙 테두리 */
    border-collapse: collapse; /* 테두리가 겹치지 않도록 설정 */
}

/* 각 열의 스타일 설정 */
body.page-id-5557 .cart-collaterals .cart_totals .shop_table th {
    width: 35%;
    text-align: right;
    padding-right: 30px; /* 1열과 2열 사이에 30px 간격 */
}

body.page-id-5557 .cart-collaterals .cart_totals .shop_table td {
    width: 65%;
    text-align: left;
}

/* 각 행의 테두리를 제거하여 각 줄마다 테두리가 생기지 않도록 설정 */
body.page-id-5557 .cart-collaterals .cart_totals .shop_table tr {
    border: none;
}


body.page-id-5557 .wc-proceed-to-checkout {
    text-align: right; /* 부모 요소에서 버튼을 오른쪽으로 정렬 */
}

body.page-id-5557 .wc-proceed-to-checkout .checkout-button.button.alt.wc-forward {
    display: inline-block; /* 텍스트 길이에 맞춰 버튼 크기를 설정 */
    height: 40px; /* 버튼 높이 설정 */
    border-radius: 15px 30px 20px 20px; /* 모서리를 둥글게 설정 */
    border: 1px solid black; /* 테두리 설정 */
    background-color: black; /* 배경색 설정 */
    color: white; /* 텍스트 색상 설정 */
    padding: 6px 14px 12px 12px; /* 내부 여백 설정 */
    font-size: inherit;       /* 부모 요소의 폰트 크기를 상속받음 */
    transition: background-color 0.3s, color 0.3s; /* 배경색과 텍스트 색상 전환 효과 */
}

body.page-id-5557 .wc-proceed-to-checkout .checkout-button.button.alt.wc-forward:hover {
    background-color: transparent; /* 마우스 오버 시 배경색 투명하게 설정 */
    color: #000; /* 마우스 오버 시 텍스트 색상 변경 */
}

body.page-id-5557 .woocommerce-shipping-totals .woocommerce-Price-currencySymbol,
body.page-id-5557 .woocommerce-shipping-totals bdi {
    font-size: inherit;       /* 부모 요소의 폰트 크기를 상속받음 */
    font-weight: normal;
}

body.page-id-5557 .order-total td bdi {
    font-weight: bold;
}

body.page-id-5557 label[for="shipping_method_0_free_shipping13"] {
    font-size: inherit;       /* 부모 요소의 폰트 크기를 상속받음 */
}



/* ************* 반응형!!!! ******************** */
@media (max-width: 920px) {
/* 쿠폰 코드 입력 및 버튼 부분을 테이블로 설정 */
    body.page-id-5557 .woocommerce-cart-form .shop_table.woocommerce-cart-form__actions {
        display: table; /* 테이블 레이아웃으로 변경 */
        width: 100%; /* 폭을 100%로 설정 */
        border-spacing: 0; /* 테이블 셀 간의 간격 제거 */
        border-collapse: collapse; /* 테두리가 겹치지 않도록 설정 */
    }

    body.page-id-5557 .woocommerce-cart-form .shop_table.woocommerce-cart-form__actions .actions {
        display: table-row; /* 테이블 행으로 설정 */
    }

    body.page-id-5557 .woocommerce-cart-form .shop_table .actions .coupon,
    body.page-id-5557 .woocommerce-cart-form .shop_table .actions button {
        display: table-cell; /* 테이블 셀로 설정 */
        padding: 10px; /* 셀 간의 여백 설정 */
        text-align: center; /* 텍스트 중앙 정렬 */
    }

/* 카트 토탈 테이블을 테이블 구조로 유지 */
    body.page-id-5557 .cart-collaterals .cart_totals {
        display: table; /* 테이블 레이아웃으로 설정 */
        width: 100%; /* 폭을 100%로 설정 */
    }

    body.page-id-5557 .cart-collaterals .cart_totals .shop_table tr {
        display: table-row; /* 테이블 행으로 설정 */
    }

    body.page-id-5557 .cart-collaterals .cart_totals .shop_table th,
    body.page-id-5557 .cart-collaterals .cart_totals .shop_table td {
        display: table-cell; /* 테이블 셀로 설정 */
        padding: 10px; /* 셀 간의 여백 설정 */
        text-align: left; /* 텍스트 왼쪽 정렬 */
    }

    body.page-id-5557 .woocommerce-cart-form .shop_table thead,
    body.page-id-5557 .woocommerce-cart-form .shop_table.cart td.product-thumbnail {
        display: none !important; /* 썸네일 숨기기 */
    }

    body.page-id-5557 .woocommerce-cart-form .shop_table {
        display: table;
        width: 100%;
        border-spacing: 0;
        border-collapse: collapse; /* 테이블 간격 없애기 */
    }

    body.page-id-5557 .woocommerce-cart-form .shop_table th,
    body.page-id-5557 .woocommerce-cart-form .shop_table td {
        display: table-cell;
        padding: 0px;
        width: auto;
        font-size: 14px; /* 전체 폰트 크기 14px로 설정 */
    }

    body.page-id-5557 .woocommerce-cart-form .shop_table td[data-title]::before,
    body.page-id-5557 .cart-collaterals .cart_totals .shop_table td::before {
        content: none; /* 데이터 제목 제거 */
    }

    body.page-id-5557 .woocommerce-cart-form .shop_table tbody td,
    body.page-id-5557 .woocommerce-cart-form .shop_table tbody td *:not(button) {
        font-size: 14px;
    }

    /* 각 열의 너비 명시적 설정 */
    body.page-id-5557 .woocommerce-cart-form .shop_table th.product-remove,
    body.page-id-5557 .woocommerce-cart-form .shop_table td.product-remove {
        width: 5%;
    }

    body.page-id-5557 .woocommerce-cart-form .shop_table th.product-name,
    body.page-id-5557 .woocommerce-cart-form .shop_table td.product-name {
        width: 70%;
        padding-left: 10px;
        padding-right: 10px;
        text-align: left !important;
    }

    body.page-id-5557 .woocommerce-cart-form .shop_table th.product-price,
    body.page-id-5557 .woocommerce-cart-form .shop_table td.product-price {
        width: 10%;
    }

    body.page-id-5557 .woocommerce-cart-form .shop_table th.product-subtotal,
    body.page-id-5557 .woocommerce-cart-form .shop_table td.product-subtotal {
        width: 10%;
    }

    body.page-id-5557 .woocommerce-cart-form .shop_table tbody td {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* 쿠폰 버튼 스타일 수정 */
    
    body.page-id-5557 .woocommerce-cart-form .coupon .button,
    body.page-id-5557 .woocommerce-cart-form .actions .button {
        flex: 0 0 auto !important; /* 버튼의 크기를 고정 */
        width: auto !important; /* 버튼 폭을 텍스트 및 패딩에 맞게 자동 설정 */
        display: inline-block !important; /* 버튼을 인라인 블록으로 설정하여 너비 최소화 */
        font-size: 10px !important; /* 모바일에서 버튼 폰트 크기 10px */
        padding: 4px 6px !important; /* 버튼 패딩 조정 */
    }    

    body.page-id-5557 .woocommerce-cart-form .shop_table {
        table-layout: fixed; /* 테이블의 레이아웃을 고정하여 셀의 너비가 일정하게 유지되도록 설정 */
        width: 100% !important;
    }

    body.page-id-5557 .woocommerce-cart-form .shop_table td.actions {
        width: 100% !important; /* td.actions의 폭을 100%로 설정 */
    }

    body.page-id-5557 .woocommerce-cart-form .shop_table td.product-quantity {
        width: 50px; /* 셀 너비를 60px로 설정 */
        max-width: 50px; /* 최대 너비를 60px로 설정 */
        padding: 0; /* 셀 내부 여백 제거 */
    }

    body.page-id-5557 .woocommerce-cart-form .shop_table td.product-quantity .quantity {
        width: 100%; /* 내부 div가 100% 너비를 갖도록 설정 */
        display: inline-block; /* div가 부모 셀의 너비를 따르도록 설정 */
        max-width: 50px; /* 최대 너비를 60px로 설정 */
    }

    body.page-id-5557 .woocommerce-cart-form .shop_table td.product-quantity .quantity input {
        width: 100%; /* input 필드의 너비를 100%로 설정 */
        height: 40px; /* 높이를 40px로 설정 */
        max-width: 50px; /* 최대 너비를 60px로 설정 */
    }

    body.page-id-5557 .cart-collaterals .shop_table {
        width: 100% !important; /* 테이블 폭을 100%로 설정 */
    }

    body.page-id-5557 .cart-collaterals .wc-proceed-to-checkout {
        width: 100% !important; /* 결제 진행 버튼 섹션 폭을 100%로 설정 */
    }

    body.page-id-5557 .woocommerce-cart-form .shop_table.woocommerce-cart-form__actions {
        width: 100% !important; /* 테이블의 폭을 100%로 설정 */
    }

    body.page-id-5557 .woocommerce-cart-form .shop_table .actions {
        width: 100% !important; /* td.actions의 폭을 100%로 설정 */
    }

    body.page-id-5557 .cart-collaterals .cart_totals .shop_table th {
        font-size: 14px; /* 선택한 제품 표의 텍스트 크기와 동일하게 설정 */
        width: 35%; /* 폭 30% 설정 */
        text-align: right; /* 내용 오른쪽 정렬 */
        padding: 7px 10px 7px 0; /* 위 5px, 오른쪽 10px, 아래 5px, 왼쪽 0 */
    }

    body.page-id-5557 .cart-collaterals .cart_totals .shop_table td {
        font-size: 14px; /* 선택한 제품 표의 텍스트 크기와 동일하게 설정 */
        width: 65%; /* 폭 70% 설정 */
        text-align: left !important; /* 내용 왼쪽 정렬 */
        padding: 7px 0px 7px 0; /* 위 5px, 오른쪽 0, 아래 5px, 왼쪽 0 */
    }
}