/* =========================================================
   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;
    }
}