/* ===========================================================
  공통 = css
=========================================================== */
/* 왼쪽 사이드바(wrap-sidebar-account) */
.wrap-sidebar-account{
    border: 1px solid #e5e5e5; border-radius: 8px;     
    overflow: hidden; background-color: #fff;
}
.mypage-side-menu li:not(:last-child){border-bottom: 1px solid #f2f2f2;}

.mypage-nav-item{
    display: block; padding: 1.125rem 1.25rem;
    font-size: 1.125rem; font-weight: 700;        
    text-decoration: none !important;
    transition: background-color 0.2s ease;
}
.mypage-nav-item:hover{background-color: #FDF2F7;}
.mypage-nav-item.active{color: #D41367 !important; /* background-color: #FDF2F7; */}

/* 모바일 아코디언 스타일 */
.wrap-sidebar-account .btn{background: #fff; font-size: 1rem; border: none;}
.wrap-sidebar-account .btn i{
    display: inline-block; 
    transition: transform 0.3s ease-in-out !important;
    transform: rotate(0deg);
}
.wrap-sidebar-account .btn[aria-expanded="true"] i{transform: rotate(-180deg);}

.mypage-toggle-btn{background: #fff;border: none !important; border-radius: 8px; }
.mypage-toggle-btn[aria-expanded="true"] {
    border-bottom: 1px solid #f2f2f2 !important;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.mypage-toggle-btn, .mypage-toggle-btn:focus, .mypage-toggle-btn:active, .mypage-toggle-btn:focus-visible{
    outline: 0 !important;
    box-shadow: none !important;
    background-color: #fff !important;
    -webkit-tap-highlight-color: transparent !important;
}
.btn:focus{box-shadow: none !important;}
.mypage-toggle-btn[aria-expanded="false"]{border-bottom: none !important;}
.mypage-toggle-btn[aria-expanded="true"] {
    border-bottom: none !important; 
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* ===========================================================
  콘텐츠 영역 style css = my-account-content
=========================================================== */
/* ===== 주문/배송 내역 ===== */
.order-step-container{
    display: flex; justify-content: space-around; align-items: center;
    padding: 1.875rem 0; background-color: #fff;
}
.step-item{text-align: center; flex: 1;}
.step-item .count{
    display: block;
    font-size: 2rem; font-weight: 800; margin-bottom: 8px;
    transition: transform 0.2s ease;
}
.step-item:hover .count{color: #D41367; transform: translateY(-3px);}
.step-item .count.highlight{color: #D41367;}
.step-item .step-name{font-size: 0.875rem; color: #666; font-weight: normal;}
.step-arrow{color: #b4b4b4; font-size: 0.875rem;}

/* ===== 찜리스트  ===== */
.my-title{font-size: 1.5rem !important; line-height: 1 !important;}

/* 이미지 비율 */
.dashboard-section.py-30-50{padding: 1.875rem 0 3.125rem 0 !important;}
.card-product .wish-list-item{position: relative !important; border-radius: 6px !important; aspect-ratio: 1 / 1 !important;}

.dashboard-section .card-product-info>.title{font-size: 0.875rem !important; line-height: 1.37 !important;}
.dashboard-section .card-product-info{padding: 0.5625rem 0.25rem 0 !important; gap: 0.3125rem !important;}
.dashboard-section .card-product-info .original-price{font-size: 0.75rem !important;}
.dashboard-section .card-product-info .discount-rate{font-size: 0.875rem;}
.dashboard-section .card-product-info .final-price{font-size: 0.9375rem;}

/* ===== 공지사항 ===== */
.empty-content-box .no-notice{
    background-color: #f9f9f9;
    border: 1px solid #eee;
    padding: 3rem 0; border-radius: 6px;
}
.text_secondary{ color: #999 !important; }

.custom-notice-table{table-layout: fixed; width: 100%; border-collapse: collapse;}
.custom-notice-table thead th{
    background-color: #f8f9fa; text-align: center !important;
    font-weight: 700; font-size: 0.875rem; padding: 0.75rem 0.625rem;
    border-bottom: 1px solid #eee; border-top: none;
}
.custom-notice-table tbody td.text-start{overflow: hidden; min-width: 0;}
.thead-category{width: 10%;}
.thead-title{width: 75%;}
.thead-date{width: 15%;}

.text-truncate-custom{
    display: block; width: 100%;            
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
    text-decoration: none;
}
.custom-notice-table thead th{
    background-color: #f8f9fa;
    padding: 0.75rem 0.625rem; border-bottom: 1px solid #eee;
    font-size: 0.875rem;
}
.custom-notice-table tbody td{
    padding: 0.9375rem 0.625rem;
    vertical-align: middle;
    border-bottom: 1px solid #eee;
    font-size: 0.875rem;
    background-color: #fff;
}
.notice-title-link:hover{color: #D41367;}
.badge-notice{font-size: 0.8125rem; font-weight: 500; color: #555;}



/* ===========================================================
   추가 반응형
=========================================================== */
@media (max-width: 61.99875rem){ /* (max-width: 991.98px) */
    .flat-spacing-11{padding-top: 6.25rem !important; padding-bottom: 3.75rem !important;}

    /* ===========================================================
        공통 = css
    =========================================================== */
    /* 왼쪽 사이드바(wrap-sidebar-account) */
    .wrap-sidebar-account{display: block !important;}
    .mypage-nav-item{padding: 0.875rem 0.9375rem; font-size: 1rem;}
    .dashboard-section.mb_50{margin-bottom: 2.5rem !important;}
    .dashboard-s-t.mb_30{margin-bottom: 1.25rem !important;}

    /* ===========================================================
        콘텐츠 영역 style css = my-account-content
    =========================================================== */
    /* ===== 주문/배송 내역 ===== */
    .order-step-container{padding: 0.9375rem 0; width: 95%; margin: 0 auto;}
    .step-item .count{font-size: 1.75rem; margin-bottom: 0.375rem;}
    .step-item .step-name{font-size: 0.8125rem;}
    .step-arrow{font-size: 0.875rem;}

    /* ===== 찜리스트  ===== */
    .my-title{font-size: 1.375rem !important; line-height: 1 !important;}

    /* 이미지 비율 */
    .dashboard-section.py-30-50{padding: 1.875rem 0 3.125rem 0 !important;}
    .card-product .wish-list-item{aspect-ratio: 1 / 1 !important;}

    /* ===== 공지사항 ===== */
    .empty-content-box .no-notice{padding: 3rem 0;}

    .custom-notice-table thead th{font-size: 0.875; padding: 0.75rem 0.625rem;}

    .thead-category{width: 70px;}
    .thead-title{width: auto;}
    .thead-date{width: 85px;}

    .custom-notice-table thead th{padding: 0.75rem 0.625rem; font-size: 0.875rem;}
    .custom-notice-table tbody td{padding: 0.875rem 0.625rem; font-size: 0.875rem;}
}

@media (max-width: 47.99875rem){ /* (max-width: 767.98px) */
    .flat-spacing-11{padding-top: 5.3125rem !important; padding-bottom: 3.75 !important;}
    .flat-spacing-11 .col-sm-3, .flat-spacing-11 .col-sm-9{width: 100% !important;}
    .flat-spacing-11 .col-sm-3{margin-bottom: 1.875;}

    /* ===========================================================
        공통 = css
    =========================================================== */
    /* 왼쪽 사이드바(wrap-sidebar-account) */
    .wrap-sidebar-account{display: block !important; margin-bottom: 1.75rem;}
    .mypage-nav-item{padding: 0.875rem 0.9375rem; font-size: 1rem;}
    .dashboard-section.mb_50{margin-bottom: 2.5rem !important;}
    .dashboard-s-t.mb_30{margin-bottom: 1.25rem !important;}

    .mypage-nav-item{
        padding: 0.9375rem 1.25rem !important;
        font-size: 1rem !important;
        background-color: #fafafa; /* 펼쳐졌을 때 배경색 차이 주기 */
    }
    .mypage-side-menu li:first-child{border-top: 1px solid #f2f2f2 !important;}
}

/* ==== special section ==== */
@media (min-width: 48rem){ /* (min-width: 768px) */
    #mypageMenuCollapse.collapse:not(.show){display: block !important;}
}

@media (max-width: 35.99875rem){ /* (max-width: 575.98px) */
    .flat-spacing-11{padding-top: 5rem !important; padding-bottom: 2.1875rem !important;}
    .flat-spacing-11 .col-sm-3{margin-bottom: 1.5625rem;}

    /* ===========================================================
        공통 = css
    =========================================================== */
    /* 왼쪽 사이드바(wrap-sidebar-account) */
    .wrap-sidebar-account{display: block !important; margin-bottom: 0;}
    .my-title{font-size: 18px !important;}
    .dashboard-section.mb_50{margin-bottom: 2.1875rem !important;}
    .dashboard-s-t.mb_30{margin-bottom: 0.9375rem !important;}

    /* ===========================================================
        콘텐츠 영역 style css = my-account-content
    =========================================================== */
    /* ===== 주문/배송 내역 ===== */
    /* .step-item .count{font-size: 24px; margin-bottom: 2px;}
    .step-item .step-name{font-size: 12.5px;}
    .step-arrow{font-size: 13px;} */

    .order-step-container{
        display: flex; flex-direction: column; gap: 0;
        border: 1px solid #f2f2f2; border-radius: 8px;
        width: 100%; margin: 0 auto; padding: 0.3125rem 0; 
    }
    .order-step-container .step-item{
        display: flex !important;
        flex-direction: row-reverse !important;
        justify-content: space-between; align-items: center;
        width: 100% !important; padding: 0.625rem 0.9375rem; text-align: left;
    }
    .order-step-container .step-item:not(:last-child){border-bottom: 1px solid #f9f9f9;}
    .order-step-container .step-item .count{margin-bottom: 0 !important; font-size: 1rem;}
    .order-step-container .step-item .step-name{font-size: 0.875rem;}
    .order-step-container .step-arrow{display: none !important;}
}