/* =========================================================
   mypage_renew.css
   - 마이페이지 내정보(renew) 상단 히어로(좌/우) + 카드 UI
   - 범위: .mypage-info-page 내부만 적용
========================================================= */

/* countdown row */
.mypage-info-page .mypage-reauth__one{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.mypage-info-page #reauthCountdown{
    font-size:14px;
    letter-spacing:0.5px;
}

/* ---------------------------
   레이아웃: 타이틀 100% + 아래 좌/우
--------------------------- */

/* 기존 테마가 flex를 써도 강제로 stack 구조로 */
.mypage-info-page .mypage-hero .mypage-hero__inner.mypage-hero__inner--stack{
    display:block;
}

/* 헤더(ACCOUNT SETTINGS / 내 정보 관리) */
.mypage-info-page .mypage-hero .mypage-hero__head{
    width:100%;
    margin-bottom:12px;
}

/* 본문(좌/우 2컬럼) */
.mypage-info-page .mypage-hero .mypage-hero__body{
    display:grid;
    grid-template-columns: 1fr 360px; /* 오른쪽 카드 폭 */
    gap:24px;
    align-items:start;
}

/* 반응형: 모바일은 1컬럼 */
@media (max-width: 980px){
    .mypage-info-page .mypage-hero .mypage-hero__body{
        grid-template-columns: 1fr;
    }
}

/* ---------------------------
   왼쪽 정보 카드(성명/이메일/휴대폰/출금계좌 등)
--------------------------- */

.mypage-info-page .mypage-hero .mypage-hero__me{
    margin-top:0px;
    padding:14px;
    border-radius:14px;
    background:#f7f8fb;
    border:1px solid #e5e7eb;
    box-shadow: 0 10px 24px rgba(16,24,40,.08);
}

.mypage-info-page .mypage-hero .mypage-hero__me-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 12px;
    border-radius:12px;
    background:#ffffff;
    border:1px solid rgba(0,0,0,.04);
}

.mypage-info-page .mypage-hero .mypage-hero__me-row + .mypage-hero__me-row{
    margin-top:8px;
}

.mypage-info-page .mypage-hero .mypage-hero__me-row:hover{
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(16,24,40,.06);
}

.mypage-info-page .mypage-hero .mypage-hero__me-row .k{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:800;
    color:#667085;
    white-space:nowrap;
}

.mypage-info-page .mypage-hero .mypage-hero__me-row .k::before{
    content:'';
    width:8px;
    height:8px;
    border-radius:999px;
    background:#2563eb;
    box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

.mypage-info-page .mypage-hero .mypage-hero__me-row .v{
    font-size:14px;
    font-weight:900;
    color:#101828;
    letter-spacing:.2px;
    text-align:right;
    word-break:break-all;
}

/* ---------------------------
   오른쪽 카드(설명 + 잔여시간 + 버튼)
--------------------------- */

.mypage-info-page .mypage-hero .mypage-hero__right{
    height:auto;
    min-height:0;
    align-self:flex-start;

    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:18px;
    box-shadow: 0 10px 24px rgba(16,24,40,.08);

    display:flex;
    flex-direction:column;
    gap:14px;
}

.mypage-info-page .mypage-hero .mypage-hero__desc{
    margin:0;
    color:#475467;
    font-size:13px;
    line-height:1.55;
}

.mypage-info-page .mypage-hero .mypage-reauth{
    background:#f7f8fb;
    border:1px solid rgba(0,0,0,.06);
    border-radius:14px;
    padding:14px;
}

.mypage-info-page .mypage-hero .mypage-hero__actions .btn{
    width:100%;
    border-radius:14px;
    padding:12px 14px;
}

/* 모바일 미세 조정 */
@media (max-width: 480px){
    .mypage-info-page .mypage-hero .mypage-hero__me{
        padding:12px;
        border-radius:12px;
    }
    .mypage-info-page .mypage-hero .mypage-hero__me-row{
        padding:10px 10px;
    }
    .mypage-info-page .mypage-hero .mypage-hero__me-row .v{
        font-size:13px;
    }
}

/* =========================================
   Withdraw Dialog (mypage style)
========================================= */

/* dim */
.ui-dialog.ui-dialog--mypage .ui-dialog__backdrop{
    background: rgba(16,24,40,.45);
    backdrop-filter: blur(2px);
}

/* panel */
.ui-dialog__panel--mypage{
    width: min(640px, calc(100vw - 32px));
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 18px 50px rgba(16,24,40,.18);
    overflow: hidden;
}

/* head */
.ui-dialog__head--mypage{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 16px 18px;
    background: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,.06);
}

.ui-dialog__title--mypage{
    font-size: 15px;
    font-weight: 900;
    color: #101828;
    letter-spacing: .2px;
}

.ui-dialog__close--mypage{
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.06);
    background: #f7f8fb;
    color: #101828;
    font-weight: 900;
    cursor: pointer;
}

/* body */
.ui-dialog__body--mypage{
    padding: 16px 18px 18px;
    background: #ffffff;
}

/* card blocks */
.wd-card{
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.06);
    background: #f7f8fb;
    padding: 14px;
}

.wd-card + .wd-card{ margin-top: 12px; }

.wd-card--form{
    background: #ffffff;
}

/* guide list */
.wd-guide{
    margin: 0;
    padding-left: 18px;
    color: #475467;
    font-size: 13px;
    line-height: 1.65;
}

.wd-guide li + li{ margin-top: 6px; }

/* agree */
.wd-agree{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top: 12px;
    font-weight: 800;
    color: #101828;
}
.wd-agree input{
    width: 16px;
    height: 16px;
    accent-color: #2563eb;
}

/* fields */
.wd-field + .wd-field{ margin-top: 12px; }

.wd-label{
    display:block;
    font-size: 12px;
    font-weight: 800;
    color: #667085;
    margin-bottom: 6px;
}
.wd-label small{
    font-weight: 800;
    color: #98a2b3;
}

.wd-input{
    width: 100%;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.10);
    background: #ffffff;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 800;
    color: #101828;
    outline: none;
}

.wd-input:focus{
    border-color: rgba(37,99,235,.55);
    box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

/* error msg */
.wd-msg{
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #fff1f2;
    border: 1px solid rgba(225,29,72,.18);
    color: #9f1239;
    font-weight: 900;
    font-size: 13px;
}

/* footer buttons */
.ui-dialog__foot--mypage{
    display:flex;
    gap:10px;
    padding: 14px 18px 18px;
    background: #ffffff;
    border-top: 1px solid rgba(0,0,0,.06);
}

.wd-btn{
    flex: 1;
    height: 44px;
    border-radius: 14px;
    font-weight: 900;
    font-size: 14px;
    cursor: pointer;
}

.wd-btn--ghost{
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.10);
    color: #101828;
}

.wd-btn--danger{
    background: #f97316; /* 사이트 메인 오렌지 쓰면 여기 바꿔도 됨 */
    border: 1px solid rgba(0,0,0,.06);
    color: #ffffff;
}

.wd-btn:disabled{
    opacity: .6;
    cursor: not-allowed;
}

/* mobile */
@media (max-width: 480px){
    .ui-dialog__panel--mypage{ border-radius: 16px; }
    .ui-dialog__body--mypage{ padding: 14px; }
    .ui-dialog__foot--mypage{ padding: 12px 14px 14px; }
}