.mypage-w-style {
    font-family: 'Poppins';
    color: #555;
    background-color: #fff;
}
.mypage-w-style .container {
    max-width: 1200px; /* 기존 컨테이너 최대 너비 유지 */
    margin: 0 auto;
    padding: 0 20px;
}
.mypage-w-style a { text-decoration: none; color: inherit; }
.mypage-w-style ul { list-style: none; padding: 0; margin: 0; }

/* 1. 페이지 상단 타이틀 */
.mypage-w-style .page-title-area {
    padding: 0; /* page-title-area 자체의 상하 패딩 제거. user-summary-box가 자체 패딩을 가짐 */
    margin-top: 20px;
    margin-bottom: 20px; /* user-summary-box와 네비게이션 사이 간격 */
}
/* .page-title-area 안에 user-summary-box가 있다면, 그 box가 컨텐츠를 감쌈 */
.mypage-w-style .page-title-area .user-summary-box {
    margin-top: 0; /* 이전에 .user-summary-box에 적용된 상단 마진 제거 */
}

/* 2. 마이페이지 네비게이션 메뉴 (기존 유지) */
.mypage-w-style .mypage-nav-container {
    border-top: 2px solid #333;
    border-bottom: 1px solid #e9e9e9;
    margin-bottom: 50px;
}
.mypage-w-style .main-nav {
    display: flex;
    background-color: #f7f7f7;
}
.mypage-w-style .main-nav li {
    flex: 1;
    text-align: center;
}
.mypage-w-style .main-nav li a {
    display: block;
    padding: 15px 0;
    font-size: 14px;
    font-weight: bold;
    color: #333;
}
.mypage-w-style .mypage-nav-details {
    display: flex;
    padding: 25px 0;
}
.mypage-w-style .nav-column {
    flex: 1;
    padding: 0 20px;
    border-right: 1px solid #e9e9e9;
}
.mypage-w-style .nav-column:last-child {
    border-right: none;
}
.mypage-w-style .nav-column ul li a {
    display: block;
    FONT-WEIGHT: 400;
    font-size: 13px;
    padding: 5px 0;
}
.mypage-w-style .nav-column ul li a:hover {
    text-decoration: underline;
}

/* 3. 회원 정보 요약 박스 (프로필 영역) */
.mypage-w-style .user-summary-box {
    display: flex;
    align-items: center;
    background-color: #f7f7f7;
    padding: 30px; /* 상하좌우 패딩으로 여백 확보 */
    border-radius: 8px; /* 모서리 둥글게 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* 은은한 그림자 */
    margin-bottom: 30px; /* 네비게이션과의 간격 */
}
.mypage-w-style .user-greeting {
    flex: 3;
    display: flex;
    align-items: center;
}
/* .w-people-logo 스타일은 더 이상 사용되지 않으므로 제거 또는 주석 처리 유지 */

/* .my-feed-container는 .profile-section을 감싸는 불필요한 레이어일 수 있습니다. */
/* HTML 구조상 .user-greeting > .my-feed-container > .profile-section 이므로 my-feed-container의 영향을 제거합니다. */
.mypage-w-style .my-feed-container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* 프로필 섹션 전체 레이아웃 (스크린샷에 맞춰 조정) */
.mypage-w-style .profile-section {
    display: flex;
    align-items: center; /* 프로필 이미지와 옆 정보 섹션을 세로 중앙에 정렬 */
    gap: 20px; /* 이미지와 텍스트 사이 간격 줄임 */
    padding: 0; /* user-summary-box의 padding이 있으므로 여기서는 패딩을 0으로 */
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none; /* border-bottom 제거 (user-summary-box에 포함됨) */
    background-color: transparent; /* 배경색 투명으로 */
    box-shadow: none; /* 그림자 효과 제거 */
    border-radius: 0; /* 모서리 둥글게 제거 (user-summary-box에 의해 이미 처리될 수 있음) */
}

/* 프로필 이미지 컨테이너 (원형, 크기 조절의 핵심) */
.mypage-w-style .profile-image {
    width: 80px; /* 스크린샷에 보이는 크기에 맞춰 80px */
    height: 80px; /* 스크린샷에 보이는 크기에 맞춰 80px */
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 프로필 이미지 태그 자체 */
.mypage-w-style .profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 프로필 정보 텍스트 부분 감싸는 div (닉네임, 자기소개, 통계) */
.mypage-w-style .profile-info-wrapper {
    flex-grow: 1; /* 남은 공간 모두 차지 */
    display: flex; /* 내부 요소들을 flex로 관리 */
    flex-direction: column; /* 세로 방향으로 나열 */
    justify-content: center; /* 세로 중앙 정렬 */
}

/* 닉네임, 자기소개, 통계 스타일 재정의 (세부 조절) */
.mypage-w-style .profile-nickname {
    font-size: 1.5em; /* 닉네임 글자 크기 (예: 24px) */
    font-weight: bold;
    margin: 0 0 5px; /* 하단 마진 조절 */
    color: #333;
}
.mypage-w-style .profile-bio {
    color: #888;
    margin-bottom: 5px; /* 통계와의 간격 줄임 */
    font-size: 0.9em; /* 자기소개 글자 크기 */
    line-height: 1.4;
    font-weight: 400;
}
.mypage-w-style .profile-stats ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 15px; /* 각 통계 항목 간 간격 더 줄임 */
}
.mypage-w-style .profile-stats li {
    text-align: left; /* 스크린샷에서 숫자가 왼쪽 정렬됨 */
}
.mypage-w-style .profile-stats .stat-count {
    display: block;
    font-size: 1.0em; /* 숫자 크기 */
    font-weight: bold;
    color: #333;
    margin-bottom: 2px; /* 숫자 아래 간격 */
}
.mypage-w-style .profile-stats .stat-label {
    display: block;
    color: #666;
}

.mypage-w-style .my-feed-link-section {
    flex: 1; /* user-summary-box 내에서 남은 공간을 차지 (flex:1) */
    display: flex;
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: space-around; /* 링크 항목들 사이 공간 균등 배분 */
    /* background-color: lightblue; /* 디버깅용 */
}

.mypage-w-style .my-feed-link-item {
    flex: 1; /* 각 링크 항목이 공간 균등하게 차지 */
    text-align: center;
    position: relative; /* 세로 구분선을 위한 relative */
}

/* 첫 번째 항목 앞에만 세로 구분선 추가 */
.mypage-w-style .my-feed-link-item.first::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60px; /* 세로 구분선 높이 조절 */
    border-left: 1px dotted #ccc; /* 점선 스타일 */
}

.mypage-w-style .my-feed-link-item a {
    display: block; /* 링크 영역 확장 */
    padding: 10px 0; /* 링크 내부 패딩 */
}

.mypage-w-style .my-feed-link-item .link-label {
    display: block;
    font-size: 13px; /* "쿠폰" 라벨과 유사한 크기 */
    margin-bottom: 5px; /* 라벨과 GO 사이 간격 */
    font-weight: 400;
    color: #666;
}

.mypage-w-style .my-feed-link-item .link-text {
    display: block;
    font-size: 32px; /* "쿠폰 개수"와 유사한 크기 */
    font-weight: 400;
    color: #000;
}

.mypage-w-style .my-feed-link-item .link-small-text {
    font-size: 16px; /* "개" "P"와 유사한 크기 */
    font-weight: normal;
}

/* ========================================================= */
/* 4. 최근 주문내역 스타일 (원래 customerMyPage.css에 있던 내용 복원) */
/* ========================================================= */
.mypage-w-style .recent-orders-section {
    margin-bottom: 100px;
    padding: 20px; /* 추가: 섹션 자체의 내부 패딩 */
    background-color: #ffffff; /* 추가: 섹션 배경색 */
    border-radius: 8px; /* 추가: 모서리 둥글게 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* 추가: 그림자 */
}
.mypage-w-style .section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
    margin-bottom: 20px; /* 추가: 헤더와 테이블 사이 간격 */
}
.mypage-w-style .section-header h3 {
    font-size: 20px;
    margin: 0;
    color: #000;
}
.mypage-w-style .more-link {
    font-size: 12px;
    color: #666; /* 추가: 링크 색상 */
    font-weight: bold; /* 추가: 글꼴 두께 */
}
.mypage-w-style .order-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.mypage-w-style .order-table th, .mypage-w-style .order-table td {
    padding: 15px 10px;
    text-align: center;
    border-bottom: 1px solid #e9e9e9;
}
.mypage-w-style .order-table th {
    background-color: #f7f7f7;
    font-weight: normal;
    color: #333; /* 추가: 헤더 텍스트 색상 */
}
.mypage-w-style .order-table td[colspan="7"] {
    padding: 50px 0;
    color: #999;
    text-align: center; /* 추가: 중앙 정렬 */
}
/* 테이블 헤더 글꼴 크기 등 조절 (선택 사항) */
.mypage-w-style .order-table thead th {
    font-size: 13px; /* 헤더 글자 크기 조금 크게 */
}

/* ===================================================
    회원 탈퇴 페이지 전용 스타일 (Withdrawal Page)
   =================================================== */

/* 1. 페이지 배경 스타일 */
.withdrawal-page-background {
    
    /* 콘텐츠를 수직 중앙에 배치하기 위한 Flexbox 설정 */
    display: flex;
    align-items: center;
    
    /* 최소 높이를 지정하여 콘텐츠가 적어도 화면의 일정 부분을 차지하도록 함 */
    min-height: 80vh;
    
    /* 레이아웃의 다른 부분과 겹치지 않도록 위아래 패딩 */
    padding: 5rem 0;
}

/* 2. 중앙의 하얀색 콘텐츠 박스 스타일 */
.withdrawal-content-box {
    max-width: 550px; /* 박스의 최대 너비 제한 */
    margin: 0 auto; /* 수평 중앙 정렬 */
    background-color: #ffffff;
    border-radius: 12px; /* 둥근 모서리 */
    padding: 2.5rem 3rem; /* 내부 여백 (상하, 좌우) */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* 입체감을 위한 그림자 */
    text-align: left; /* 내부 텍스트 왼쪽 정렬 */
}

/* 3. 폼 내부 요소들 스타일 */
.withdrawal-content-box h2 {
    font-weight: 700;
    margin-bottom: 2rem;
    color: #333;
}

.withdrawal-content-box .form-group {
    margin-bottom: 1.5rem;
}

.withdrawal-content-box .form-group label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
}

.withdrawal-content-box .form-control {
    border-radius: 8px;
    padding: 12px 15px;
    border: 1px solid #ddd;
}

.withdrawal-content-box .withdrawal-info-text {
    font-size: 0.9rem;
    color: #666;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.withdrawal-content-box .form-check {
    margin-bottom: 2rem;
}

/* 4. 최종 탈퇴 버튼 스타일 */
.withdrawal-content-box .btn-withdrawal {
    background-color: #343a40; /* 어두운 회색 계열 */
    color: #ffffff;
    font-weight: bold;
    padding: 12px 20px;
    border-radius: 8px;
    border: none;
    transition: background-color 0.3s ease;
}
/* 페이지네이션 컨테이너 스타일 */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}

/* 페이지 번호 링크 스타일 */
.pagination-container a {
    color: #555;
    padding: 8px 16px;
    text-decoration: none;
    border: 1px solid #ddd;
    margin: 0 4px;
    border-radius: 4px;
    transition: background-color .3s;
}

/* 현재 활성화된 페이지 번호 스타일 */
.pagination-container a.active {
    color: #c96;
    border: 1px solid #c96;
}

/* 마우스를 올렸을 때 스타일 */
.pagination-container a:hover:not(.active) {
    background-color: #f4f4f4;
}
.withdrawal-content-box .btn-withdrawal:hover {
    background-color: #495057; /* 마우스 올렸을 때 약간 밝게 */
}