/* 화면 전체 말고 공통 폭을 묶어주는 컨테이너 */
.smb_container {
    max-width: 1200px;
    margin: 0 auto; /* 가운데 정렬 */
}
.smb_me {
  width: 100%;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-radius: 20px;
  border: 1px solid #e6e6e6;
  background-color: #fff;
  box-sizing: border-box; /* ✅ 패딩 포함 계산 */
}

.my_nm {
    font-size: 25px;
    font-weight: 500;
}

.my_sub_nm {
    font-size: 25px;
    font-weight: 400;
}

.text {
  flex: 1;
  display: flex;
}

.btns-code {
  width: 150px;
  height: 50px;
  padding: 12px 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  background: #121212;
  color: #fff;
  cursor: pointer;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.smb_points {
    width: 100%;
}

.smb_points .points-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* ✅ 각 항목을 가로로 고르게 정렬 */
  padding: 0 !important;
}
.smb_points .points-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px; /* ✅ li 사이 간격 */
}
.smb_points .points-list .points-item {
  flex: 1 1 calc(33.333% - 20px); /* ✅ 3등분 */
  padding: 50px 30px 32px 40px;
  border-radius: 20px;
  box-shadow: 0 3px 4px 0 rgb(138 138 138 / 15%);
  box-sizing: border-box;
}

.points-item .tit {
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 왼쪽 정렬 */
    gap: 12px; /* 이미지와 텍스트 간격 */
}

.tit img {
    margin-left: 3%;
    display: block; /* inline 공백 제거 */
    vertical-align: middle;
}

.tit-text {
    display: inline-block;
    font-weight: 500;
    line-height: 1;
    font-size: 20px;
}

.tit-first {
    margin-right:15%;
}

.tit-second {
    margin-right:9%;
}

.points-item .btns-withdraw {
    margin-top: 15px; /* 숫자 아래 간격 */
    display: block;   /* 버튼은 한 줄 차지 */
    width: 100%;      /* 원하면 li 너비에 맞게 */
    text-align: center;
    background: #121212;
    font-weight: 400;
    border-radius: 12px;
}

.btns-cd-withdraw {
    border-radius: 24px;
    background: #121212;
    font-weight: 400;
}

.smb_points .points-list .points-item .tit {
  display: flex;
  align-items: center;
  justify-content: space-between; /* ✅ 왼쪽 텍스트, 오른쪽 버튼 */
}

/** 모달 fancybox 영역 */
#point-request-form {
    padding: 20px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#point-request-form label {
    font-weight: 600;
}

#point-request-form input[type="text"],
#point-request-form input[type="number"],
#point-request-form input[type="file"] {
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    width: 100%;
    box-sizing: border-box;
    background: #FAFAFA;
}

#point-request-form button {
    padding: 12px;
    border-radius: 8px;
    border: none;
    background: #121212;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

.points-item .points__num {
    display: block;       /* block으로 변경 */
    width: 100%;          /* 부모 li 폭 전체 */
    text-align: center;   /* 가운데 정렬 */
    font-size: 35px;
    font-weight: 600;
    padding-bottom: 20px;
}

#point-request h2 {
    text-align: center;
    position: relative;
}

.points-divider {
    border: none;               /* 기본 hr 테두리 제거 */
    border-top: 1px solid #ccc; /* 원하는 색상으로 선 */
    margin: 15px 0;             /* 위아래 간격 */
    width: 100%;                /* 부모 li 너비 전체 */
}

.carousel__button.is-close {
    display: none !important;
}

/* 팝업 상단 영역 */
.popup-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}
/* 제목 */
.popup-header h2 {
    text-align: center;
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    grid-column: 2; /* 가운데 고정 */
}
/* 팝업 영역이 X버튼 위치 기준이 되도록 */
#point-request {
    position: relative;
}

.popup-close-x {
    position: absolute;    /* 제목 줄과 상관없이 정확한 좌표 */
    top: 12px;              /* ⬅ 원하는 만큼 위로(값만 조절하면 됨) */
    right: 20px;           /* ⬅ 오른쪽 여백 */
    font-size: 24px;       /* X 크기 */
    font-weight: 300;
    line-height: 1;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #121212 !important;
    padding: 0;
    cursor: pointer;
    z-index: 9999;         /* 팝업 요소 위로 확실히 */
}

/* hover / focus / active 까지 모두 보호 */
.popup-close-x:hover,
.popup-close-x:focus,
.popup-close-x:active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: inherit !important;
    outline: none !important;
}

/* 버튼 hover 스타일 */
#point-request-form button:hover,
.btns-cd-withdraw:hover,
.btns-withdraw:hover{
    background: #742CF5;
}


@media (max-width: 768px){
    .smb_me {
        width: 100%;
        padding: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        border-radius: 20px;
        border: 1px solid #e6e6e6;
        background-color: #fff;
        box-sizing: border-box;
        flex-direction: column;
    }

    .smb_points .points-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 20px;
        flex-direction: column;
    }
    
    .points-item .points__num{
        display: block;
        width: 100%;
        text-align: center;
        font-size: 30px;
        font-weight: 700;
        padding-bottom: 0px;
    }

    .smb_points .points-list .points-item {   
        padding: 20px 30px 25px 40px;
    }

    .tit img {
        width: 50px;
    }
    .tit-text {
        font-size: 18px;
    }

    .points-item .tit
    {
        height: 35px;
    }
    .tit-first {
        margin-right: 30%;
    }
    .tit-second {
        margin-right: 25%;
    }

}