@charset "utf-8";

.login-form #captcha #captcha_info {
    font-size: 14px;
    color: #999;
    text-align: center;
    margin-bottom: 20px;
}
@media all and (max-width:460px) {
	.login-form #captcha #captcha_info { font-size: 11px; }
}


/* Sub Title */
.sub-title { padding:10px 12px; border-top:4px solid #444; }
.sub-title h4 { padding:0; margin:0; line-height:50px; font-size:18px; }
.sub-title i { background: rgb(245, 245, 245); padding-top: 12px; border-radius: 50%; width: 50px; height: 50px; text-align: center; color: rgb(143, 143, 143); font-size: 25px; display: inline-block; }
.sub-title img { border-radius: 50%; width: 50px !important; height: 50px !important; display:inline-block; }

/* Follow */
.follow-skin .bg-heading { background:#fafafa; }
.follow-skin .col-follow .myinfo a { margin-right:15px; color:#888; font-size:11px; }
.follow-skin .sp-follow { margin-bottom:0px; border-top:3px solid #444; }
.follow-skin .img-photo i { background: rgb(245, 245, 245); padding: 16px; border-radius: 50%; width: 80px; height: 80px; text-align: center; color: rgb(143, 143, 143); font-size: 40px; display: inline-block; }
.follow-skin .img-photo img { border-radius: 50%; width: 80px !important; height: 80px !important; display:inline-block; }
@media all and (max-width:460px) {
	.responsive .follow-skin .col-follow { display:block !important; width:100% !important;}
}

/* Formmail */
.formmail-form { padding:20px; }
.formmail-type label { margin-right:10px; }

/* Memo */
.memo-send-info { padding:8px 20px;background:#fafafa;border-bottom:1px solid #eee; }
.memo-content { padding:20px; line-height:22px;border-bottom:1px solid #eee; margin-bottom:15px; }
.memo-send-form { padding:20px; }

/* Mypage */
.mypage-skin .img-photo i { background: rgb(245, 245, 245); padding: 16px; border-radius: 50%; width: 80px; height: 80px; text-align: center; color: rgb(143, 143, 143); font-size: 40px; display: inline-block; }
.mypage-skin .img-photo img { border-radius: 50%; width: 80px !important; height: 80px !important; display:inline-block; }
.mypage-skin .img-resize img { max-width:100%; height:auto; }
.mypage-skin .view-author .auth-photo { width:160px; padding-right:15px; }
@media all and (max-width:460px) {
	.responsive .mypage-skin .view-author .auth-photo { float:none; width:100%; padding-right:0px; }
}

/* MyPhoto */
.myphoto { margin-bottom:15px; }
.myphoto img { border-radius: 50%; display:inline-block; }
.myphoto i { background: rgb(245, 245, 245); padding: 18px; border-radius: 50%; text-align: center; color: rgb(143, 143, 143); font-size: 40px; display: inline-block; }

/* MyPost */
.mypost-skin i.img-fa { width:40px; height:40px; padding:10px 0px 0px; font-size:20px; text-align:center; color:#aaa; }
.mypost-skin .list-details { padding-top:4px; }
.mypost-skin .list-none { padding:50px 0px; }

.mypost-media { padding-bottom:10px; }
.mypost-media .photo i { border-radius:50%; background: rgb(245, 245, 245); padding: 15px; width: 64px; height: 64px; text-align: center; color: rgb(143, 143, 143); font-size: 30px; display: inline-block; }
.mypost-media .photo img { border-radius:50%; width: 64px !important; height: 64px !important; display:inline-block; }
.mypost-media .media { border-bottom:1px solid #eee; margin:7px 0px; padding:0px 12px 7px; }
.mypost-media :first-child.media { border-top:0px; margin-top:0px; padding-top:0px; }
.mypost-media .media-heading { padding:0; margin:0px; line-height: 20px; }
.mypost-media .media .media-body { padding-left:0px; }
.mypost-media .media .media-content {  }
.mypost-media .media .media-content p { margin:0px; padding:0px; }
.mypost-media .media .media-resize { margin-top:10px; }
.mypost-media .media .media-resize img { max-width:100%; height:auto; }
.mypost-media .media.media-reply { border:0px; border-top:1px solid #eee; margin:10px 0px 0px; padding:10px 0px 0px; }

/* Point */
.point-skin th, .point-skin td { white-space:nowrap; }
.point-skin td.po-content { white-space:normal; }

/* Profile */
.profile-skin .img-photo i { border-radius: 50%; background: rgb(245, 245, 245); padding: 16px; width: 80px; height: 80px; text-align: center; color: rgb(143, 143, 143); font-size: 40px; display: inline-block; }
.profile-skin .img-photo img { border-radius: 50%; width: 80px !important; height: 80px !important; display:inline-block; }
.profile-skin .img-resize img { max-width:100%; height:auto; }

/* Register */
.register-term { position: relative; height: 200px; margin:0px; overflow: auto; }
#agree11, #agree21 { margin:0px; }

/* Register Form */
.register-form .text-gap { margin-bottom:4px; }
.register-form .addr-line { margin-bottom:7px; }
@media all and (max-width:767px) {
	.responsive .register-form .cert-btn { margin-top:10px }
}

/* Response */
.myresponse-skin .res-info { margin:0; padding:7px 12px; }
.myresponse-skin .media { border-top:1px solid #eee; margin:6px 0px; padding:8px 12px 0px; }
.myresponse-skin .myresponse-list .media:first-child { border-top:0px; margin-top:0px; padding-top:8px; }
.myresponse-skin .media-heading { padding:0; margin:0; }
.myresponse-skin .photo i { border-radius: 50%; background: rgb(238, 238, 238); padding: 8px; width: 40px; height: 40px; text-align: center; color: rgb(255, 255, 255); font-size: 25px; display: inline-block; }
.myresponse-skin .photo img { border-radius: 50%; width: 40px !important; height: 40px !important; display:inline-block; }
.myresponse-skin .media-info i { margin-left:10px; }
.myresponse-skin .media-info i:first-child { margin-left:0px; }

/* Scrap */
.scrap-skin i.scrap-icon { background:#333; color:#fff; }
.scrap-skin .scrap-head { margin:0px; padding: 10px 20px; line-height:22px; background:#333; color:#fff; font-size:16px; text-align:center; }
.scrap-skin .scrap-form { padding: 10px 20px 20px; }

/* Shopping */
.shopping-skin i.img-fa { width:40px; height:40px; padding:10px 0px 0px; font-size:20px; text-align:center; color:#aaa; }
.shopping-skin .list-none { padding:50px 0px; }

/* Wishlist */
.wishlist-skin i.img-fa { width:40px; height:40px; padding:10px 0px 0px; font-size:20px; text-align:center; color:#aaa; }

/* Mypage */
.mypage-tbl th { background:#333 !important; color:#fff !important; text-align:center !important; white-space:nowrap;  }
.mypage-tbl td { text-align:center; white-space:nowrap; }

/* ===== 2026-08 (주)파이브센스_FIVESENSES.Corp. 마이페이지 디자인 통일(주문내역 톤: 카드 배경 #fff + radius 17px) ===== */

/* 쿠폰 내역 — 항상 wing 노출 페이지, 무조건 적용.
   2026-08 [CouponListCardRestore] point.php(.point-skin.point_skin)/orderinquiry.php(.od_wrap)와
   동일하게 컨텐츠 섹션 바깥 컨테이너를 흰 카드(bg+radius)로 처리 — 리스트 행(.coupon_cont li)은
   카드가 아니라 border-bottom 구분선만 갖도록 css/rest.css에서 되돌려 "카드 안에 카드" 중첩 방지. */
.coupon_wrap .coupon_content .coupon-skin.coupon_skin {
    background-color: #fff;
    border-radius: 17px;
    padding: 6px 30px;
    border-top: none; /* 카드 전환 전 레거시 테이블 상단 구분선(#444) 잔재 제거 */
}

/* 적립금 — 항상 wing 노출 페이지, 무조건 적용 */
.point_wrap .point_content .point-skin.point_skin {
    background-color: #fff;
    border-radius: 17px;
    padding: 6px 30px;
    border-top: none; /* 카드 전환 전 레거시 테이블 상단 구분선(#444) 잔재 제거 */
}

/* 찜한상품 — 마이페이지 경유(mypage=1) 시에만 적용. 직접 진입 시엔 기존 그대로. */
.mypage_entry_content .wishlist-skin.wishlist_style {
    background-color: #fff;
    border-radius: 17px;
    padding: 6px 30px;
}

/* 찜한상품 빈 상태 — shop/recentitems.php(.ri_empty/.ri_btn) 패턴 재사용(승민 지시, 마이페이지
   빈 상태 통일). recentitems.php는 skin/apms/order/basic/style.css를 로드하지만 이 페이지는
   이 파일(skin/member/basic/style.css)이 로드되므로 같은 클래스명·수치를 그대로 옮겨온다
   (.wishlist-skin으로 스코프해 이 스타일시트를 공유하는 다른 마이페이지 하위 화면 오염 방지). */
.wishlist-skin .ri_empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--fp-empty-gap, 14px);
    padding: var(--fp-empty-pad-desktop, 192px) 0; /* [EmptyStateTokens] 마이페이지 빈상태 전역 통일 — point.php 2배 확대 기준값(기존 80px에서 재확정) */
    text-align: center;
    background: var(--fp-empty-bg, #fff); /* recentitems/orderaddress와 달리 .ri_list_wrap 카드 래퍼가 없어 배경이 비어 있던 부분 보강 */
    border-radius: var(--fp-empty-radius, 17px);
}
.wishlist-skin .ri_empty img { width: var(--fp-empty-icon-size, 41px); }
.wishlist-skin .ri_empty p { font-size: var(--fp-empty-text-size, 14px); color: var(--fp-muted, #999999); }
@media (max-width: 991px) {
    .wishlist-skin .ri_empty { padding: var(--fp-empty-pad-mobile, 96px) 0; }
}
.wishlist-skin .ri_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 150ms ease, background 150ms ease, filter 150ms ease;
}
.wishlist-skin .ri_empty_go_shopping { color: var(--fp-on-primary, #fff); background: var(--fp-primary, var(--main-btn-point-color, #1a6dff)); }
.wishlist-skin .ri_empty_go_shopping:hover { filter: brightness(0.92); }

@media (max-width: 991px) {
    .point_wrap .point_content .point-skin.point_skin,
    .mypage_entry_content .wishlist-skin.wishlist_style {
        padding: 4px 16px;
        border-radius: 13px;
    }
    .coupon_wrap .coupon_content .coupon-skin.coupon_skin {
        padding: 4px 16px;
        border-radius: 13px;
    }
}

/* 개인정보수정(register_form.php, w=u) — 항상 wing 노출되는 편집모드 전용 클래스라 별도 마커 불필요 */
.register-wrap .register_sheet.mypage_register {
    background-color: #fff;
    border-radius: 17px;
    padding: 30px;
}
@media (max-width: 991px) {
    .register-wrap .register_sheet.mypage_register {
        padding: 16px;
        border-radius: 13px;
    }
}

/* 비밀번호 확인(member_confirm.php, 개인정보수정·회원탈퇴 공통 게이트) — 항상 wing 노출, 무조건 적용 */
.mypage_confirm_wrap {
    display: flex;
    gap: 50px;
}
.mypage_confirm_wrap .confirm_content {
    width: calc(100% - 200px);
}
.mypage_confirm_wrap .confirm_content .password_confirm {
    margin: 0;
    max-width: 100%;
    background-color: #fff;
    border-radius: 17px;
}
@media (max-width: 991px) {
    .mypage_confirm_wrap {
        display: block;
        gap: 0;
    }
    .mypage_confirm_wrap .confirm_content {
        width: 100%;
    }
    .mypage_confirm_wrap .confirm_content .password_confirm {
        border-radius: 13px;
    }
}
/* 쪽지함 삭제 텍스트 → X아이콘 전환(승민 지시, del_address 패턴 재사용).
   bbs/memo.php는 경량 팝업 헤더(_head.php)만 include해 thema.php를 안 거치므로 css/rest.css가 로드되지 않음(④검수 반려 사유) —
   memo.skin.php 자체가 add_stylesheet()로 직접 불러오는 이 파일에 둬야 실제로 로드됨 */
.div-table.table .memo_del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: transparent;
    transition: background-color 150ms ease;
}
.div-table.table .memo_del:hover {
    background-color: #f7f7f7; /* 디자인시스템 --fp-surface-soft 미러링 */
}
.div-table.table .memo_del .ico_x {
    position: relative;
    width: 16px;
    height: 16px;
}
.div-table.table .memo_del .ico_x::before,
.div-table.table .memo_del .ico_x::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 1px;
    width: 14px;
    height: 2px;
    border-radius: 1px;
    background-color: #999999;
    transition: background-color 150ms ease;
}
.div-table.table .memo_del .ico_x::before {
    transform: rotate(45deg);
}
.div-table.table .memo_del .ico_x::after {
    transform: rotate(-45deg);
}
.div-table.table .memo_del:hover .ico_x::before,
.div-table.table .memo_del:hover .ico_x::after {
    background-color: #cf202f; /* 디자인시스템 --fp-error 미러링 */
}

/* 프론트(mypage)는 ds.css 미탑재라 필요한 토큰만 로컬 재선언(bbs/alert_custom.php와 동일 방식).
   쿠폰 상세 모달 + 회원가입 완료 축하화면(register_result.skin.php, css/rest.css .register_celebrate*)이 공유 */
:root {
    --fp-canvas: #ffffff;
    --fp-surface-soft: #f7f7f7;
    --fp-surface-strong: #eef0f3;
    --fp-hairline: #dee1e6;
    --fp-ink: #0a0b0d;
    --fp-body: #5b616e;
    --fp-muted: #7c828a;
    --fp-primary: #1a6dff;
    --fp-primary-active: #0054e6;
    --fp-on-primary: #ffffff;
    --fp-success: #05b169;
    --fp-success-bg: #f0fdf4;
    --fp-error: #cf202f;
    --fp-error-bg: #fff2f2;
    --fp-warning: #d97706;
}
.coupon_detail_modal_overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    /* 디자인시스템 문서값(300)이 아니라 1000 사용 — 실측 결과 프론트 고정헤더(header.at-header.fixed)가
       z-index:999로 이미 문서 스펙(sticky header:100)보다 높게 박혀 있어(기존 레거시, 이 작업 범위 밖),
       300으로는 헤더 스트립이 오버레이 위로 뚫려 보임. 헤더보다 한 단계 위로만 올려 실제로 전체를 덮게 함. */
    z-index: 1000;
}
.coupon_detail_modal_overlay.active {
    display: block;
}
.coupon_detail_modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 32px);
    max-width: 440px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    box-sizing: border-box;
    background: var(--fp-canvas);
    border-radius: 24px;
    padding: 32px;
    z-index: 1000;
}
.coupon_detail_modal.active {
    display: block;
}
.coupon_detail_modal_head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.coupon_detail_modal_title {
    font-size: 19px;
    font-weight: 600;
    color: var(--fp-ink);
    word-break: keep-all;
}
.coupon_detail_modal_close {
    width: 24px;
    height: 24px;
    background: none;
    border: 0;
    font-size: 19px;
    line-height: 1;
    color: var(--fp-muted);
    cursor: pointer;
    padding: 0;
}
.coupon_detail_modal_close:hover {
    color: var(--fp-ink);
}
.coupon_detail_modal_close:focus-visible,
.coupon_detail_modal_btn:focus-visible {
    outline: 2px solid var(--fp-primary);
    outline-offset: 2px;
}
.coupon_detail_modal_body {
    display: flex;
    flex-direction: column;
}
.coupon_detail_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 12px 0;
    border-bottom: 1px solid var(--fp-hairline);
}
.coupon_detail_row:last-child {
    border-bottom: 0;
}
.coupon_detail_label {
    flex: none;
    font-size: 14px;
    color: var(--fp-muted);
    font-weight: 600;
}
.coupon_detail_value {
    text-align: right;
    font-size: 15px;
    color: var(--fp-ink);
    word-break: keep-all;
}
.coupon_detail_status_badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--fp-success-bg);
    color: var(--fp-success);
    font-size: 13px;
    font-weight: 600;
}
.coupon_detail_modal_foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}
.coupon_detail_modal_btn {
    padding: 12px 24px;
    border: 0;
    border-radius: 13px;
    background: var(--fp-primary);
    color: var(--fp-on-primary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
    transition: background-color 150ms ease;
}
.coupon_detail_modal_btn:hover {
    background: var(--fp-primary-active);
}
.coupon_cont .coupon_item {
    cursor: pointer;
    transition: background-color 150ms ease, border-radius 150ms ease;
}
.coupon_cont .coupon_item:hover {
    background-color: #fafafa;
    border-radius: 12px;
}
@media (max-width: 480px) {
    .coupon_detail_modal {
        padding: 24px;
    }
}

/* 주문 취소 모달 — 기존 하단 펼침(collapse .mypage_cancle)을 coupon_detail_modal과 동일한
   오버레이+중앙정렬 카드 패턴으로 전환. 주문 행마다 인스턴스가 있어(#sod_fin_cancelfrm_N) 오버레이만
   공유하고 모달 본체는 행별로 유지(다중 주문 동시 노출 시 충돌 방지) */
.cancel_order_modal_overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000; /* coupon_detail_modal_overlay와 동일 사유 — 프론트 고정헤더(999)보다 위 */
}
.cancel_order_modal_overlay.active {
    display: block;
}
.cancel_order_modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 32px);
    max-width: 440px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    box-sizing: border-box;
    background: var(--fp-canvas);
    border-radius: 24px;
    padding: 32px;
    z-index: 1000;
}
.cancel_order_modal.active {
    display: block;
}
.cancel_order_modal_head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.cancel_order_modal_title {
    font-size: 19px;
    font-weight: 600;
    color: var(--fp-ink);
    word-break: keep-all;
}
/* .cancel_order_modal_close는 헤더 아이콘 버튼(24x24) 전용 스타일 — 푸터의 "취소" 버튼도
   모달 닫기 동작을 위해 같은 클래스를 공유하므로(JS 위임 셀렉터), 여기서 헤더로 스코프하지 않으면
   width:24px가 .cancel_order_modal_btn의 padding(12px 24px)과 충돌해 텍스트가 찌그러진다(버튼 깨짐 버그). */
.cancel_order_modal_head .cancel_order_modal_close {
    width: 24px;
    height: 24px;
    background: none;
    border: 0;
    font-size: 19px;
    line-height: 1;
    color: var(--fp-muted);
    cursor: pointer;
    padding: 0;
}
.cancel_order_modal_head .cancel_order_modal_close:hover {
    color: var(--fp-ink);
}
.cancel_order_modal_head .cancel_order_modal_close:focus-visible {
    outline: 2px solid var(--fp-primary);
    outline-offset: 2px;
}
.cancel_order_field {
    margin-bottom: 16px;
}
.cancel_order_field:last-of-type {
    margin-bottom: 24px;
}
.cancel_order_label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--fp-muted);
    margin-bottom: 8px;
}
.cancel_order_input,
.cancel_order_select {
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--fp-hairline);
    border-radius: 13px;
    font-size: 15px;
    color: var(--fp-ink);
    background: var(--fp-canvas);
}
.cancel_order_input:focus,
.cancel_order_select:focus {
    outline: none;
    border-color: var(--fp-primary);
}
.cancel_order_input::placeholder {
    color: var(--fp-muted-soft, #a8acb3);
}
.cancel_order_modal_foot {
    display: flex;
    justify-content: flex-end;
    gap: 11px;
}
.cancel_order_modal_btn {
    min-height: 44px;
    padding: 12px 24px;
    border: 0;
    border-radius: 13px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 150ms ease;
}
.cancel_order_modal_btn--secondary {
    color: var(--fp-ink);
    background-color: var(--fp-surface-strong);
}
.cancel_order_modal_btn--secondary:hover {
    background-color: #e3e6ea;
}
.cancel_order_modal_btn--primary {
    color: var(--fp-on-primary);
    background-color: var(--fp-primary);
}
.cancel_order_modal_btn--primary:hover {
    background-color: var(--fp-primary-active);
}
.cancel_order_modal_btn:focus-visible {
    outline: 2px solid var(--fp-primary);
    outline-offset: 2px;
}
@media (max-width: 480px) {
    .cancel_order_modal {
        padding: 24px;
    }
}

/* 회원탈퇴 본인확인(member_leave_verify.php) — 인증벽(auth wall) 레이아웃.
   config.skin.php에서 이 화면만 헤더/푸터를 제거하고(is_confirm_sub) 로고+카드만 노출한다.
   기존 .lost-modal은 오버레이 모달 좌표계(position:fixed + top/left 50% 트릭)라 페이지 중앙 배치로
   재정의한다 — 내부 마크업·JS는 그대로 두고 위치값만 무효화(모바일 하단시트 좌표도 동일 처리해
   데스크톱과 같은 중앙 카드로 통일). */
.leave_auth_wall {
	min-height: 100vh;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 48px 20px;
	background: var(--fp-surface-soft, #f7f7f7);
}
.leave_auth_wall .leave_auth_brand {
	display: inline-block;
	margin-bottom: 32px;
	line-height: 0;
}
.leave_auth_wall .leave_auth_brand img {
	height: 32px;
	width: auto;
}
.leave_auth_wall .lost-modal {
	position: static;
	width: 100%;
	max-width: 640px;
	height: auto;
	z-index: auto;
}
.leave_auth_wall .lost-modal .back {
	display: none;
}
.leave_auth_wall .lost-modal form {
	position: relative;
	top: auto;
	left: auto;
	transform: none;
	width: 100%;
	margin: 0;
	box-sizing: border-box;
	box-shadow: 0 2px 24px rgba(10, 11, 13, 0.08);
}
@media (max-width: 991px) {
	.leave_auth_wall .lost-modal form {
		position: relative;
		width: 100%;
		min-height: auto;
		padding: 40px 20px 24px;
		border-radius: 20px;
		top: auto;
		left: 0;
		bottom: auto;
		transform: none;
	}
}
@media (max-width: 480px) {
	.leave_auth_wall { padding: 32px 16px; }
	.leave_auth_wall .leave_auth_brand { margin-bottom: 24px; }
	.leave_auth_wall .leave_auth_brand img { height: 26px; }
}

/* 회원탈퇴 본인확인 모달 — 상단 안내문구를 탭버튼과 시각적으로 분리하는 가이드 카드(lost-modal 공용 CSS는 건드리지 않고 #leave_verify_modal 범위로 한정) */
#leave_verify_modal .bot .leave_verify_guide {
    margin: 0 0 24px;
    padding: 16px 20px;
    background: var(--fp-surface-soft);
    border: 1px solid var(--fp-hairline);
    border-radius: 12px;
}
#leave_verify_modal .bot .leave_verify_guide p {
    margin: 0;
}

/* 회원탈퇴 본인확인 — 재전송 버튼을 인증번호 입력폼(.timer_box) 우측으로 배치(이메일/휴대폰 탭 공용,
   같은 DOM을 채널만 바꿔 재사용하므로 마크업 1곳 수정으로 양쪽 다 적용됨). 기존 .timer_box는
   modal.css 공용 규칙(display:flex, position:relative)을 그대로 쓰되, absolute로 입력창 우측에 얹히는
   #leave_timer 카운트다운은 .timer_box 전체가 아니라 새로 감싼 .cn_input_wrap 기준으로 앵커를 옮겨야
   재전송 버튼과 겹치지 않는다(lost-modal 공용 CSS는 건드리지 않고 #leave_verify_modal 범위로 한정). */
#leave_verify_modal .timer_box {
    align-items: center;
    gap: 10px;
}
#leave_verify_modal .timer_box .cn_input_wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}
/* modal.css 공용 규칙(.lost-modal form .bot .cer_num .input_box input)이 width:calc(100% - 124px)로
   고정돼 있음 — 원래는 같은 행의 label(124px폭)과 나란한 input 몫을 뺀 값인데, 이 화면은 label이
   .input_box 상단에 오고 input은 한 단계 더 내려간 .cn_input_wrap 안에 있어 124px를 뺄 근거가 없다.
   그 결과 input이 필요 이상 좁아져 .cn_input_wrap 안에 여백이 남았다 — .cn_input_wrap 폭을 그대로
   채우도록 재정의(#leave_verify_modal 범위 한정, 다른 화면 영향 없음). */
#leave_verify_modal .timer_box .cn_input_wrap input {
    width: 100%;
}
#leave_verify_modal .timer_box #leave_resend_btn {
    flex: none;
    width: auto;
    min-height: 48px;
    padding: 5px 14px;
    margin: 0;
}
@media (max-width: 480px) {
    #leave_verify_modal .timer_box {
        flex-wrap: wrap;
    }
    #leave_verify_modal .timer_box .cn_input_wrap {
        flex: 1 1 100%;
    }
    #leave_verify_modal .timer_box #leave_resend_btn {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* 인증번호 발송 로딩오버레이(#leave_loading) 가로중앙+세로하단 배치 — css/common.css 공용
   .order_loading_wrap의 align-items:flex-end(세로 하단고정, 주문서 등 기존 사용처와 동일한 원래
   설계값, 승민 의도)는 그대로 상속받고(이 id에서 오버라이드하지 않음), justify-content:center만
   있고 내부 .container_fix/.order_loading 자체는 중앙정렬 flex가 아니라서(SNS 팝업 로딩 수정 전과
   동일 계열 버그, 실측 getBoundingClientRect로 좌측 치우침 확인) .donut+.text가 가로로 왼쪽에 붙어
   보였던 부분만 #sns_popup_loading과 동일한 패턴(가로 중앙정렬 flex + 문구 줄바꿈 안전장치)으로
   보정한다. [2026-08-14 정정] 세로를 align-items:center로 오버라이드했던 이전 수정은 뷰포트
   정중앙으로 밀어 넣어 원래 의도(세로 하단)와 달라져 되돌림 — 세로 오버라이드 자체를 없앰. */
#leave_loading .container_fix {
    display: flex;
    justify-content: center;
}
#leave_loading .order_loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
#leave_loading .text {
    max-width: 280px;
    white-space: normal;
    word-break: keep-all;
    text-align: center;
}