/******************************************************************************/
/***************** 내 계정 초기화면을 위한 커스텀 스타일 시작 *****************/
/******************************************************************************/

/* 기본 스타일 설정 */
body.woocommerce-account .woocommerce-MyAccount,
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
    color: black;
    font-size: 18px;
    line-height: 1.3em;
}

/* 표 형태 제거하기 */
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-navigation ul,
body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    display: block; /* 강제로 블록 요소로 변경 */
    border: none; /* 표 스타일 제거 */
    padding: 0;
    margin: 0 0 10px 0;
    list-style: none; /* 목록 스타일 제거 */
}

/* 링크 부분의 스타일 조정 */
body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    text-align: right; /* 텍스트를 오른쪽 정렬 */
    margin-bottom: 15px; /* 각 메뉴 항목 사이에 간격 추가 */
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    padding: 0;
    text-decoration: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
body.woocommerce-account .woocommerce-MyAccount-navigation ul li.current a {
    background-color: transparent; /* 활성 링크의 배경색을 투명하게 설정 */
}

/* 계정 페이지에서만 두 영역을 flex로 설정 */
body.woocommerce-account .woocommerce {
    display: flex;
    gap: 40px;
    justify-content: center; /* 두 영역을 가로 중앙 정렬 */
}

body.woocommerce-account .woocommerce > * {
    padding: 0; /* 모든 자식 요소의 padding을 0으로 설정 */
    margin: 0; /* 모든 자식 요소의 margin을 0으로 설정 */
}

/* 왼쪽 메뉴 스타일 설정 */
body.woocommerce-account .woocommerce-MyAccount-navigation {
    flex: 0 0 calc((100% - 40px) * 0.3); /* 전체 너비에서 간격을 제외한 30% 설정 */
}

/* 오른쪽 콘텐츠 영역 스타일 설정 */
body.woocommerce-account .woocommerce-MyAccount-content {
    flex: 0 0 calc((100% - 40px) * 0.7); /* 전체 너비에서 간격을 제외한 70% 설정 */
}

/* 반응형 스타일 - 1024px 이하 */
@media (max-width: 1024px) {
    body.woocommerce-account .woocommerce-MyAccount,
    body.woocommerce-account .woocommerce-MyAccount-navigation,
    body.woocommerce-account .woocommerce-MyAccount-content {
        font-size: 16px; /* 텍스트 크기를 16px로 줄임 */
    }

        body.woocommerce-account .woocommerce {
        flex-direction: column; /* 모바일에서는 위아래로 정렬 */
        gap: 30px; /* 위아래 간격 설정 */
        align-items: flex-start; /* 수직 정렬을 부모의 위쪽에서 시작하도록 설정 */
    }

    body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
        text-align: left; /* 모바일 화면에서 텍스트를 왼쪽 정렬 */
    }

    body.woocommerce-account .woocommerce-MyAccount-navigation,
    body.woocommerce-account .woocommerce-MyAccount-navigation ul,
    body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
        margin: 0; /* 모바일 화면에서 텍스트 간격 없애기 */
    }
/* 커스텀 조정자 스타일 */
    .my-account-custom-adjuster {
        display: block !important; /* 요소를 블록으로 표시 */
        width: 100% !important; /* 너비 100% */
        height: 15px !important; /* 전체 높이 15px */
        background-color: transparent; /* 배경색 투명 (필요에 따라 설정 가능) */
        border-bottom: 1px solid black !important; /* 아래쪽에만 1px 검정색 보더 */
        margin: 15px 0 0 0 !important; /* 위쪽 여백 15px */
    }
    
}

/* 반응형 스타일 설정 */
@media (max-width: 768px) {
    body.woocommerce-account .woocommerce-MyAccount,
    body.woocommerce-account .woocommerce-MyAccount-navigation,
    body.woocommerce-account .woocommerce-MyAccount-content {
        font-size: 14px;
    }


}

/******************************************************************************/
/***************** 내 계정 초기화면을 위한 커스텀 스타일 끝 *******************/
/******************************************************************************/




/******************************************************************************/
/************** 내 계정 주문내역화면을 위한 커스텀 스타일 시작 ****************/
/******************************************************************************/

/* 주문 없을 때 메시지를 감싸고 있는 .woocommerce-info 클래스의 스타일을 규정 */
.woocommerce-MyAccount-content .woocommerce-info {
    display: flex;
    flex-direction: column; /* 요소를 세로로 쌓음 */
    align-items: flex-start; /* 요소들을 왼쪽으로 정렬 */
    background-color: transparent;
    border: none;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-radius: 0px;
    font-size: 16px; /* 데스크탑에서 폰트 크기 */
    color: black;
    margin: 0;
    padding: 15px 0px;
}

.woocommerce-MyAccount-content .woocommerce-info::before {
    content: none;
}

.woocommerce-MyAccount-content {
    margin: 0;
    padding: 0;
}

/* 주문 없을 때 메시지 래퍼를 감싸고 있는 .woocommerce-notices-wrapper 클래스의 스타일 규정 */
.woocommerce-MyAccount-content .woocommerce-notices-wrapper {
    margin: 0;
    padding: 0;
}

.woocommerce-MyAccount-content .woocommerce-Message {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ccc;
}

.woocommerce-Message td {
    padding: 0px; /* 셀 패딩 */
    text-align: left; /* 텍스트 정렬 */
}

/* .woocommerce-Button 클래스에 스타일 적용 */
.woocommerce-MyAccount-content .woocommerce-info .woocommerce-Button {
    align-self: flex-end; /* 버튼을 오른쪽으로 정렬 */
    flex: 0 0 auto; /* 버튼의 크기를 고정 */
    height: 40px; /* 버튼 높이 설정 */
    border-radius: 15px 30px 20px 20px; /* 모서리를 둥글게 설정 */
    border: 1px solid black; /* 테두리 설정 */
    background-color: black; /* 배경색 설정 */
    color: white; /* 텍스트 색상 설정 */
    padding: 10px 10px 10px 10px; /* 내부 여백 설정 */
    font-size: 16px; /* 데스크탑에서 버튼 폰트 크기 */
    transition: background-color 0.3s, color 0.3s; /* 배경색과 텍스트 색상 전환 효과 */
}

.woocommerce-MyAccount-content .woocommerce-info .woocommerce-Button:hover {
    background-color: transparent; /* 마우스 오버 시 배경색 투명하게 설정 */
    color: #000; /* 마우스 오버 시 텍스트 색상 변경 */
}

/* 미디어 쿼리: 768px 이하의 화면에서 폰트 크기 조정 및 간격 설정 */
@media (max-width: 768px) {
    .woocommerce-MyAccount-content .woocommerce-info {
        border-top: none; /* 위쪽 보더 제거 */
        border-bottom: none; /* 아래쪽 보더 제거 */
        font-size: 14px; /* 모바일에서 폰트 크기 */
        gap: 5px; /* 두 요소 사이의 간격 설정 */
    }

    .woocommerce-MyAccount-content .woocommerce-info .woocommerce-Button {
        font-size: 14px; /* 모바일에서 버튼 폰트 크기 */
    }
}

/* WooCommerce 주문 테이블의 기본 스타일 덮어쓰기 */
.woocommerce-js table.woocommerce-orders-table,
.woocommerce-js table.shop_table,
.woocommerce-orders-table {
    border: none;
    margin: 0;
    border-collapse: collapse;
    border-radius: 0;
    text-align: center !important;
}

.woocommerce-orders-table__header,
.woocommerce-orders-table__header-order-number,
.woocommerce-orders-table__header-order-date,
.woocommerce-orders-table__header-order-status,
.woocommerce-orders-table__header-order-total {
    border: none;
    border-top: 1px solid black !important;
    margin: 0;
    border-collapse: collapse;
    border-radius: 0;
    text-align: center !important;
}

.woocommerce-orders-table__cell,
.woocommerce-orders-table__cell-order-number,
.woocommerce-orders-table__cell-order-date,
.woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__cell-order-total {
    border: none;
    border-bottom: 1px solid black !important;
    margin: 0;
    border-collapse: collapse;
    border-radius: 0;
    text-align: center !important;
}

/* 기본적으로 숨기기 */
.my-account-custom-adjuster {
    display: none; /* 기본적으로 요소를 숨기기 */
}

/* 반응형 스타일 */
/* 1024px 이상: 기본 스타일 유지 */
@media (min-width: 1024px) {
    .woocommerce-js table.woocommerce-orders-table {
        font-size: 16px;
    }
}

/* 769px 이상 1023px 이하: 1024px 이상과 동일하게 설정 */
@media (min-width: 769px) and (max-width: 1023px) {
    .woocommerce-js table.woocommerce-orders-table {
        font-size: 16px;
        line-height: 1.3;
        border-collapse: collapse;
        border-radius: 0;
        border: none;
        padding: 0;
        text-align: center !important;
    }

    .woocommerce-orders-table__row {
        display: table-row !important;
        border-top: 1px solid black !important;
        border-bottom: none !important;
    }

    .woocommerce-orders-table__cell {
        display: table-cell !important;
        padding: 10px !important;
        text-align: center !important;
        border: none !important;
    }

    .woocommerce-orders-table__cell-order-number,
    .woocommerce-orders-table__cell-order-date,
    .woocommerce-orders-table__cell-order-status,
    .woocommerce-orders-table__cell-order-total {
        width: auto !important;
    }

    .woocommerce-orders-table__cell::before {
        content: none !important;
    }
}

/* 768px 이하: 기존 스타일 유지 */
@media (max-width: 768px) {
    .woocommerce-js table.woocommerce-orders-table {
        width: 100%;
        font-size: 12px;
        line-height: 1.3;
        border-collapse: collapse;
        border-radius: 0;
        border: none;
        padding: 0;
        border-bottom: 1px solid black !important;
        text-align: left !important;
    }

    .woocommerce-orders-table__row {
        display: flex !important;
        justify-content: space-between !important;
        border-top: 1px solid black !important;
        border-bottom: 0px solid black !important;
        border: none;
    }

    .woocommerce-orders-table__cell-order-number,
    .woocommerce-orders-table__cell-order-date,
    .woocommerce-orders-table__cell-order-status,
    .woocommerce-orders-table__cell-order-total {
        display: table-cell !important;
        padding: 5px 0px 5px 0px !important;
        border: none !important;
    }

    .woocommerce-orders-table__cell::before {
        content: none !important;
    }
}

.woocommerce-orders-table td,
.woocommerce-orders-table th {
    background-color: white;
}

.woocommerce-orders-table__header,
.woocommerce-orders-table__cell-order-number,
.woocommerce-orders-table__cell-order-date,
.woocommerce-orders-table__cell-order-status {
    text-align: center;
}

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

.woocommerce-orders-table__header,
.woocommerce-orders-table__cell {
    padding: 10px;
    text-align: left;
}

/******************************************************************************/
/************** 내 계정 주문내역화면을 위한 커스텀 스타일 끝 ******************/
/******************************************************************************/



/******************************************************************************/
/************** 내 계정 주문세부화면을 위한 커스텀 스타일 시작 ****************/
/******************************************************************************/

.woocommerce-order-details__title {
    text-align: left; /* 왼쪽 정렬 */
    margin-top: 50px !important; /* 아래 여백 추가 */
    margin-bottom: 5px !important; /* 아래 여백 추가 */
}

.woocommerce-order-details tbody {
    border-top: 1px solid black; /* 테이블 바디의 위쪽에 1px 블랙 테두리 추가 */
}

.woocommerce-order-details .woocommerce-table tbody,
.woocommerce-order-details .woocommerce-table tfoot {
    border-bottom: 1px solid black; /* 테이블 본문과 푸터에 아래쪽 테두리 추가 */
}

.woocommerce-order-details thead {
    display: none; /* 테이블 헤더 전체 숨기기 */
}

.woocommerce-order-details .woocommerce-table__product-name {
    display: flex;
    justify-content: space-between;
}

/* order-details-item.php에서 생성된 표의 모든 테두리 제거 */
.woocommerce-order-details .woocommerce-table__line-item,
.woocommerce-order-details .woocommerce-table__line-item td,
.woocommerce-order-details .woocommerce-table__line-item th {
    border: none !important; /* 모든 테두리 제거 */
    text-align: left; /* 텍스트를 왼쪽으로 정렬 */
    vertical-align: middle !important; /* 텍스트를 상하 가운데 정렬 */
    padding: 10px 15px 10px 15px !important; /* 모바일 기본 패딩 */
}

/* tfoot 스타일 */
.woocommerce-order-details tfoot th,
.woocommerce-order-details tfoot td {
    text-align: right; /* 텍스트를 오른쪽으로 정렬 */
    border: none; /* 모든 테두리 제거 */
    border-bottom: 1px solid black; /* 아래쪽 테두리만 1px 블랙으로 설정 */
    padding: 10px 15px 10px 15px !important; /* 데스크탑 기본 패딩 */
}


/* 모바일용 미디어 쿼리 */
@media (max-width: 768px) {
    .woocommerce-order-details .woocommerce-table__line-item,
    .woocommerce-order-details .woocommerce-table__line-item td,
    .woocommerce-order-details .woocommerce-table__line-item th {
        padding: 10px 8px 10px 8px !important; /* 모바일 패딩 */
    }

    .woocommerce-order-details {
        font-size: 14px; /* 768px 이하일 때 폰트 크기 14px */
        line-height: 1.3em;
    }

    .woocommerce-order-details tfoot th,
    .woocommerce-order-details tfoot td {
        padding: 10px 8px 10px 8px !important; /* 모바일 패딩 */
    }
}

.woocommerce-order-details tfoot tr th:contains("Total 총계"),
.woocommerce-order-details tfoot tr td:contains("Total 총계") {
    font-weight: bold; /* "Total" 행을 볼드 처리 */
}

.woocommerce-order-details tfoot th {
    text-align: right; /* 항목 이름을 오른쪽 정렬 */
}

.woocommerce-order-details tfoot td {
    text-align: left; /* 항목 내용을 왼쪽 정렬 */
}

.woocommerce-order-details tfoot th.note-label {
    text-align: left; /* "Note 추가정보" 항목 이름만 왼쪽 정렬 */
}


/* ************************결제 정보 민감한 부분****************************** */

/* 결제 상세 정보 텍스트 스타일 */
.woocommerce-order-details .pafw-payment-details-section h2 {
    font-size: 20px !important;
    margin: 50px 0 5px 0; /* 여백 조정 */
}

@media (max-width: 768px) {
    .woocommerce-order-details .pafw-payment-details-section h2 {
        font-size: 18px !important;
    }
}

/* 결제 상세 정보 테이블을 가로로 표시 */
.woocommerce-order-details .pafw-payment-details.woocommerce-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    border: none; /* 테이블 전체 보더 제거 */
}

.woocommerce-order-details .pafw-payment-details.woocommerce-table thead {
    display: none; /* 테이블 헤더 숨기기 */
}

.woocommerce-order-details .pafw-payment-details.woocommerce-table tr {
    display: table-row; /* 기본 테이블 행 스타일로 변경 */
    margin-bottom: 0; /* 행 사이의 간격 제거 */
    border: none;
    padding: 0;
}

.woocommerce-order-details .pafw-payment-details.woocommerce-table td {
    display: table-cell; /* 기본 테이블 셀 스타일로 변경 */
    padding: 10px; /* 필요에 따라 패딩 조절 */
    border: none; /* 보더 제거 */
    text-align: center; /* 각 행의 요소들을 가로 정렬 */
    font-size: 16px; /* 기본 텍스트 크기 */
}

@media (max-width: 768px) {
    .woocommerce-order-details .pafw-payment-details.woocommerce-table td {
        font-size: 12px; /* 작은 화면에서 텍스트 크기 조정 */
    }
    .woocommerce-order-details .pafw-payment-details.woocommerce-table .button {
        font-size: 12px; /* 작은 화면에서 버튼 텍스트 크기 조정 */
    }
}

.woocommerce-order-details .pafw-payment-details.woocommerce-table tr:last-child td {
    border: none; /* 마지막 행의 구분선 제거 */
}

/* 버튼 스타일 조정 */
.woocommerce-order-details .pafw-payment-details.woocommerce-table .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 15px 30px 20px 20px;
    border: 1px black;
    background-color: black;
    color: white;
    transition: background-color 0.3s, color 0.3s;
    text-decoration: none;
    cursor: pointer;
    margin-top: 0px;
    align-self: flex-start; /* 버튼을 각 열의 시작 부분에 배치 */
}

/* 버튼 마우스 오버 효과 */
.woocommerce-order-details .pafw-payment-details.woocommerce-table .button:hover {
    background-color: transparent;
    color: black;
}

/* ************************결제 정보 민감한 부분 끝************************* */

/* ************************주소 관련 민감한 부분 시작********************** */

/* 주문 세부 정보 페이지에서 고객 세부 정보의 윗 여백을 50px로 설정 */
.woocommerce-order-details .woocommerce-customer-details {
    margin-top: 50px;
    padding: 0px !important; /* 데스크탑 기본 패딩 */
}

/* 청구 및 배송 주소 제목 관련 */
.woocommerce-order-details .woocommerce-column__title {
    background-color: transparent !important;
    border: none !important;
    margin-bottom: 5px; /* 제목 아래 여백 */
    padding: 10px 0px 10px 0px !important; /* 데스크탑 기본 패딩 */
    border-bottom: 1px solid black !important; /* 아래쪽 테두리만 1px 블랙으로 설정 */
}

/* 청구 및 배송 주소의 테두리 제거 */
.woocommerce-order-details .woocommerce-column--billing-address address,
.woocommerce-order-details .woocommerce-column--shipping-address address {
    border: none;
    padding: 10px 15px 10px 15px !important; /* 데스크탑 기본 패딩 */
    border-bottom: 1px solid black; /* 아래쪽 테두리만 1px 블랙으로 설정 */
}

@media (max-width: 768px) {
    .woocommerce-columns .woocommerce-column {
        margin-bottom: 50px; /* 청구 주소와 배송 주소 사이에 50px 간격 추가 */
    }

    .woocommerce-order-details .woocommerce-column--billing-address address,
    .woocommerce-order-details .woocommerce-column--shipping-address address {
        border: none;
        padding: 10px 8px 10px 8px !important; /* 데스크탑 기본 패딩 */
    }
}



/******************************************************************************/
/************** 내 계정 주문세부화면을 위한 커스텀 스타일 끝 ******************/
/******************************************************************************/



/******************************************************************************/
/************ 내 계정 주소 수정 화면을 위한 커스텀 스타일 시작 ****************/
/******************************************************************************/


.woocommerce-account .u-columns.woocommerce-Addresses {
    margin-top: 50px;
}

.woocommerce-account .woocommerce-Address-title {
    display: block !important; /* Flexbox 레이아웃 적용 */
    justify-content: space-between !important; /* 요소를 왼쪽 정렬 (중간에 빈 공간 없음) */
    align-items: flex-end !important; /* 세로 방향 아래쪽 정렬 */
    border: none !important; /* 보더 없음 */
    background-color: transparent !important; /* 배경색 투명 */
    padding: 0px 0px 0px 0px !important; /* 패딩: 상, 우, 하, 좌 */
    margin: 0px 0px 0px 0px !important;
}

.woocommerce-account .woocommerce-Address-title title,
.woocommerce-account .woocommerce-Address-title h4 {
    padding: 0px 0px 0px 0px !important; /* 패딩: 상, 우, 하, 좌 */
    margin: 0px 0px 0px 0px !important;
}

.woocommerce-account .woocommerce-Address-title a,
.woocommerce-account .woocommerce-Address-title a.edit {
    padding: 0px 0px 0px 0px !important; /* 패딩: 상, 우, 하, 좌 */
    margin: 0px 0px 0px 0px !important;
    font-size: 0.7em; /* 텍스트 크기를 보통의 70%로 설정 */
}

.woocommerce-account .woocommerce-Address address {
    font-style: normal; /* 이탤릭체를 일반 글꼴로 변경 */
    border: none; /* 보더 없음 */
    background-color: transparent; /* 배경색 투명 */
    padding: 10px 15px 10px 15px; /* 패딩: 상, 우, 하, 좌 */
    border-top: 1px solid black !important; /* 위쪽 테두리만 1px 블랙으로 설정 */
    border-bottom: 1px solid black !important; /* 아래쪽 테두리만 1px 블랙으로 설정 */
}

@media (max-width: 768px) {
    .woocommerce-account .woocommerce-Addresses .u-column1 {
        margin-bottom: 50px; /* 청구 주소와 배송 주소 사이에 50px 간격 추가 */
    }

    .woocommerce-account .woocommerce-Address address {
        border: none;
        padding: 10px 8px 10px 8px !important; /* 데스크탑 기본 패딩 */
    }
}


/************************ 내 계정 주소 수정 필드 수정 시작 ********************/
body.woocommerce-account.woocommerce-edit-address .woocommerce-address-fields .button {
    margin-left: auto; /* 버튼만 오른쪽으로 밀어냄 */
    flex: 0 0 20%; /* 버튼의 폭을 20%로 설정 */
    display: block; /* 버튼이 블록 요소로 작동하게 설정 */
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 15px 30px 20px 20px; /* 모서리를 원하는 형태로 설정 */
    border: 1px solid black;
    background-color: black;
    color: white;
    padding: 7px 13px 5px 10px; /* 위 5px, 오른쪽 7px, 아래 8px, 왼쪽 6px */
    transition: background-color 0.3s, color 0.3s;
}

body.woocommerce-account.woocommerce-edit-address .woocommerce-address-fields .button:hover {
    background-color: transparent;
    color: #000;
}



/******************************************************************************/
/*************** 내 계정 주소 수정 화면을 위한 커스텀 스타일 끝 ***************/
/******************************************************************************/



/******************************************************************************/
/************ 내 계정 개인정보 수정을 위한 커스텀 스타일 시작 ****************/
/******************************************************************************/

/* 상위 소개글 기본 스타일 */
.info-form-intro p {
    font-size: 18px !important; /* 데스크탑 폰트 크기 */
    line-height: 1.3em; /* 줄 간격 */
}

/* 미디어 쿼리: 768px 이하 */
@media (max-width: 768px) {
    .info-form-intro p {
        font-size: 14px !important; /* 모바일 폰트 크기 */
    }
}

/* 미디어 쿼리: 769px ~ 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
    .info-form-intro p {
        font-size: 16px !important; /* 태블릿 폰트 크기 */
    }
}

/* Edit Account 페이지의 Save Changes 버튼에 스타일 적용 */
body.woocommerce-account .woocommerce-EditAccountForm .woocommerce-Button.button {
    margin-left: auto; /* 버튼을 오른쪽으로 밀어냄 */
    flex: 0 0 20%; /* 버튼의 폭을 20%로 설정 */
    display: block; /* 버튼이 블록 요소로 작동하게 설정 */
    align-items: center;
    justify-content: center;
    height: 40px; /* 버튼 높이 설정 */
    border-radius: 15px 30px 20px 20px; /* 모서리를 원하는 형태로 설정 */
    border: 1px solid black; /* 테두리 설정 */
    background-color: black; /* 배경색 설정 */
    color: white; /* 텍스트 색상 설정 */
    padding: 7px 13px 5px 10px; /* 내부 여백 설정 */
    transition: background-color 0.3s, color 0.3s; /* 전환 효과 */
}

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


/******************************************************************************/
/************ 내 계정 개인정보 수정을 위한 커스텀 스타일 끝 ***************/
/******************************************************************************/



/******************************************************************************/
/************ 내 계정 회원탈퇴를 위한 커스텀 스타일 시작 ****************/
/******************************************************************************/

.woocommerce-MyAccount-content .delete-account-message {
    width: 100%;
    margin: 0;
    text-align: left;
}

.woocommerce-MyAccount-content .delete-account-message__text {
    font-size: 18px;
    color: #000;
    text-align: left;
    line-height: 1.3em;
    text-indent: 30px;
    margin-bottom: 0.8em; /* 문단 간격 추가 */
}

/* 특정 텍스트 요소의 간격 제거 */
.woocommerce-MyAccount-content .delete-account-message__text.no-margin {
    margin-bottom: 0;
}

/* 모바일 화면용 스타일 */
@media (max-width: 768px) {
    .woocommerce-MyAccount-content .delete-account-message {
        width: 100%; /* 문단 폭 */
        margin: 0 auto;
    }

    .woocommerce-MyAccount-content .delete-account-message__text {
        font-size: 14px; /* 폰트 크기 14px */
    }
}

/* 769px ~ 1024px 태블릿 화면용 스타일 */
@media (min-width: 769px) and (max-width: 1024px) {
    .woocommerce-MyAccount-content .delete-account-message {
        width: 100%; /* 문단 폭 모바일과 동일 */
        margin: 0 auto;
    }

    .woocommerce-MyAccount-content .delete-account-message__text {
        font-size: 16px; /* 폰트 크기 16px */
    }
}