/* =========================================
   MYPAGE 공통: Gate 카드 (비밀번호 재확인)
   적용 범위: body.is-mypage 내부만
   ========================================= */

/*  래퍼: 가운데 정렬 + 여백 */
.is-mypage .mypage-gate-wrap{
    display:flex;
    justify-content:center;
    padding: 6px 0 18px;
}

/*  카드 */
.is-mypage .mypage-gate-card{
    width:100%;
    max-width: 680px;
    background:#fff;
    border:1px solid rgba(16,24,40,.08);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(16,24,40,.08);
    overflow:hidden;
    margin-top: 50px;
    margin-bottom: 50px;
}

/*  바디 */
.is-mypage .mypage-gate-body{
    padding: 28px;
}

/*  타이틀/설명 */
.is-mypage .mypage-gate-title{
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.2px;
    margin: 0 0 6px;
    color: #101828;
}
.is-mypage .mypage-gate-desc{
    margin: 0 0 14px;
    color:#667085;
    font-size: 14px;
    line-height: 1.45;
}

/*  안내 박스 */
.is-mypage .mypage-gate-note{
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid rgba(16,24,40,.06);
    color:#344054;
    font-size: 13px;
    line-height: 1.5;
}

/*  한 줄 입력 + 버튼 */
.is-mypage .mypage-gate-row{
    display:flex;
    gap: 10px;
    align-items:center;
}

.is-mypage .mypage-gate-input{
    flex: 1;
    height: 46px;
    border-radius: 12px;
    border: 1px solid #d0d5dd;
    padding: 0 14px;
}

.is-mypage .mypage-gate-input:focus{
    border-color: #ff7a00;
    box-shadow: 0 0 0 4px rgba(255,122,0,.14);
}

/*  버튼 */
.is-mypage .mypage-gate-btn{
    height: 46px;
    padding: 0 18px;
    border-radius: 12px;
    font-weight: 800;
    white-space: nowrap;
}

/* primary 버튼 */
.is-mypage .btn-mypage-primary{
    background: linear-gradient(135deg, #ff7a00, #ff3d00);
    border: none;
    color: #fff;
}
.is-mypage .btn-mypage-primary:hover{
    filter: brightness(.98);
    color:#fff;
}

.is-mypage .mypage-gate-card .mypage-gate-input,
.is-mypage .mypage-gate-card input.form-control {
    height: 52px;
    min-height: 52px;
    padding: 0 16px;
    font-size: 16px;          /*  모바일에서 얇아보이는/줌 이슈 방지 */
    line-height: 52px;        /*  세로 가운데 정렬 확실 */
    border-radius: 14px;
    border: 1px solid #d0d5dd;
    box-sizing: border-box;
}

.is-mypage .mypage-gate-card .mypage-gate-input:focus,
.is-mypage .mypage-gate-card input.form-control:focus {
    border-color: #ff7a00;
    box-shadow: 0 0 0 4px rgba(255,122,0,.15);
}

/* textarea 같은 멀티라인이 섞일 가능성 대비(선택) */
.is-mypage .mypage-gate-card textarea.form-control {
    line-height: 1.4;
    padding: 12px 16px;
    height: auto;
    min-height: 120px;
}

/*  모바일: 버튼 아래로 */
@media (max-width: 575.98px){
    .is-mypage .mypage-gate-card{
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .is-mypage .mypage-gate-body{
        padding: 20px;
    }
    .is-mypage .mypage-gate-row{
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .is-mypage .mypage-gate-btn{
        width: 100%;
    }
}

/* ================================
   MYPAGE Renew (Info hub)
   ================================ */

.is-mypage .mypage-hero{
    border: 1px solid #eef0f4;
    border-radius: 16px;
    background: linear-gradient(135deg, #ffffff, #fbfcff);
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.06);
}

.is-mypage .mypage-hero__inner{
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 18px;
    padding: 18px;
    align-items: stretch;
}

.is-mypage .mypage-hero__kicker{
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    color: #667085;
}

.is-mypage .mypage-hero__title{
    margin-top: 6px;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.2;
    color: #101828;
}

.is-mypage .mypage-hero__desc{
    margin-top: 8px;
    color: #667085;
    font-size: 13px;
    line-height: 1.55;
}

.is-mypage .mypage-hero__right{
    border-radius: 14px;
    border: 1px solid #eef0f4;
    background: #fff;
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: space-between;
}

/* 상태 chip */
.is-mypage .mypage-chip{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 12px;
    border: 1px solid #e4e7ec;
    background: #f9fafb;
    color: #344054;
    width: fit-content;
}
.is-mypage .mypage-chip.is-ok{
    border-color: rgba(16,185,129,.35);
    background: rgba(16,185,129,.10);
    color: #067647;
}
.is-mypage .mypage-chip.is-warn{
    border-color: rgba(245,158,11,.35);
    background: rgba(245,158,11,.10);
    color: #92400e;
}

/* 인증 상태 표 */
.is-mypage .mypage-reauth{
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #eef0f4;
    padding: 10px 12px;
}
.is-mypage .mypage-reauth__row{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    font-size: 12px;
}
.is-mypage .mypage-reauth__label{ color: #667085; font-weight: 700; }
.is-mypage .mypage-reauth__value{ color: #101828; font-weight: 800; }

/* 우측 버튼 */
.is-mypage .mypage-hero__actions .btn{
    width: 100%;
    height: 44px;
    border-radius: 12px;
    font-weight: 800;
}

/* 카드 그리드 */
.is-mypage .mypage-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.is-mypage .mypage-card{
    border: 1px solid #eef0f4;
    border-radius: 16px;
    background: #fff;
    padding: 14px;
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.05);
    display: grid;
    grid-template-columns: 42px 1fr 16px;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.is-mypage .mypage-card:hover{
    transform: translateY(-1px);
    border-color: rgba(255,122,0,.35);
    box-shadow: 0 14px 30px rgba(16, 24, 40, 0.08);
}

.is-mypage .mypage-card__icon{
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: radial-gradient(600px 180px at 30% 30%, rgba(255,140,0,.18), transparent 55%),
    radial-gradient(520px 160px at 70% 30%, rgba(94,92,230,.14), transparent 55%),
    #f8fafc;
    font-size: 18px;
}

.is-mypage .mypage-card__title{
    font-weight: 900;
    color: #101828;
    font-size: 14px;
    margin: 0;
}
.is-mypage .mypage-card__desc{
    margin-top: 4px;
    color: #667085;
    font-size: 12.5px;
    line-height: 1.45;
}
.is-mypage .mypage-card__meta{
    margin-top: 8px;
    font-size: 12px;
    font-weight: 800;
    color: #98a2b3;
}
.is-mypage .mypage-card__arrow{
    color: #98a2b3;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
}

/* 하단 안내 */
.is-mypage .mypage-note{
    border: 1px solid #eef0f4;
    border-radius: 16px;
    background: #fff;
    padding: 14px 16px;
}
.is-mypage .mypage-note__title{
    font-weight: 900;
    color: #101828;
    margin-bottom: 8px;
}
.is-mypage .mypage-note__list{
    margin: 0;
    padding-left: 18px;
    color: #475467;
    font-size: 13px;
    line-height: 1.55;
}

/* 반응형 */
@media (max-width: 991.98px){
    .is-mypage .mypage-hero__inner{
        grid-template-columns: 1fr;
    }
}
@media (max-width: 575.98px){
    .is-mypage .mypage-grid{
        grid-template-columns: 1fr;
    }
    .is-mypage .mypage-hero__inner{
        padding: 14px;
    }
}

/* 카드가 button일 때 기본 버튼 스타일 제거 */
.is-mypage .mypage-card--btn{
    width: 100%;
    text-align: left;
    border: 1px solid #eef0f4;
    background: #fff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.is-mypage .mypage-card--btn:focus{
    outline: none;
}
.is-mypage .mypage-card--btn:focus-visible{
    border-color: rgba(255,122,0,.55);
    box-shadow: 0 0 0 4px rgba(255,122,0,.14);
    transform: translateY(-1px);
}

/* =========================
   MYPAGE: info_renew 섹션 카드 UI
   ========================= */
.is-mypage .mypage-section { margin-bottom: 18px; }

.is-mypage .mypage-card{
    border: 1px solid #eef0f4;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(16,24,40,.06);
    overflow: hidden;
}

.is-mypage .mypage-card__head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: 12px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid #f2f4f7;
}

.is-mypage .mypage-card__title{
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 6px;
}

.is-mypage .mypage-card__desc{
    font-size: 13px;
    color: #667085;
    margin: 0;
}

.is-mypage .mypage-card__body{
    padding: 16px 18px 18px;
}

.is-mypage .mypage-btn{
    height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.is-mypage .mypage-kv{
    display:flex;
    gap: 14px;
    flex-wrap: wrap;
}

.is-mypage .mypage-kv__item{
    flex: 1 1 220px;
    border: 1px solid #f2f4f7;
    border-radius: 14px;
    padding: 12px 14px;
    background: #fcfcfd;
}

.is-mypage .mypage-kv__label{
    font-size: 12px;
    color: #667085;
    margin-bottom: 6px;
}

.is-mypage .mypage-kv__value{
    font-size: 14px;
    font-weight: 800;
    color: #101828;
}

.is-mypage .mypage-badge{
    display:inline-flex;
    align-items:center;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid #e4e7ec;
    background: #fff;
    font-size: 12px;
    font-weight: 800;
    color: #344054;
}

.is-mypage .mypage-badge--ok{
    border-color: rgba(255,122,0,.35);
    background: rgba(255,122,0,.10);
    color: #b54708;
}

.is-mypage .mypage-help{
    border: 1px solid #eef0f4;
    border-radius: 14px;
    background: #f8fafc;
    padding: 12px 14px;
    color: #344054;
    font-size: 13px;
}

.is-mypage .mypage-help ul{
    margin: 0;
    padding-left: 18px;
}

.is-mypage .mypage-help li{
    margin: 3px 0;
}

/* 모바일에서도 버튼/정렬 깔끔하게 */
@media (max-width: 575.98px){
    .is-mypage .mypage-card__head{
        flex-direction: column;
        align-items: stretch;
    }
    .is-mypage .mypage-btn{
        width: 100%;
    }
}