/* =========================================================
   MYEONGRIGYEOL PAYAPP CHARGE BUTTON V1
   충전 모달 전용
   ========================================================= */

.mg-charge-option button {
    min-width: 104px;
    padding: 12px 16px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 15px;
    transition:
        transform .15s ease,
        filter .15s ease,
        box-shadow .15s ease,
        opacity .15s ease;
}

/* 실제 활성 버튼 */
.mg-charge-option button:not(:disabled) {
    color: #17120a;
    background:
        linear-gradient(
            135deg,
            #f3d99b 0%,
            #d4ad63 48%,
            #b98b43 100%
        );
    border: 1px solid rgba(255, 225, 161, .85);
    box-shadow:
        0 5px 18px rgba(187, 139, 67, .20),
        inset 0 1px 0 rgba(255, 255, 255, .32);
    cursor: pointer;
}

/* PC 마우스 */
.mg-charge-option button:not(:disabled):hover {
    filter: brightness(1.07);
    box-shadow:
        0 7px 22px rgba(187, 139, 67, .30),
        inset 0 1px 0 rgba(255, 255, 255, .38);
}

/* 휴대폰 터치 */
.mg-charge-option button:not(:disabled):active {
    transform: scale(.97);
    filter: brightness(.94);
}

/* 진짜 비활성 상태만 회색 */
.mg-charge-option button:disabled {
    color: rgba(190, 197, 199, .40);
    background: rgba(110, 122, 126, .08);
    border: 1px solid rgba(160, 170, 173, .14);
    box-shadow: none;
    opacity: .65;
    cursor: not-allowed;
}

/* =========================================================
   MYEONGRIGYEOL PAYMENT HISTORY V1
   ========================================================= */

.mg-payment-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:10px;
}

.mg-payment-card{
    padding:14px;
    border:1px solid rgba(212,173,99,.17);
    border-radius:16px;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.012)
        );
}

.mg-payment-card-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.mg-payment-card-head > div{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.mg-payment-card-head strong{
    font-size:16px;
    color:#f1ddb2;
}

.mg-payment-card-head span{
    font-size:12px;
    color:rgba(220,226,226,.57);
}

.mg-payment-card-head b{
    flex:none;
    font-size:12px;
    font-weight:800;
    color:#dfbf7d;
}

.mg-payment-meta{
    display:flex;
    flex-wrap:wrap;
    gap:6px 12px;
    margin-top:10px;
    font-size:12px;
    color:rgba(220,226,226,.53);
}

.mg-payment-refunded{
    margin-top:10px;
    padding:8px 10px;
    border-radius:10px;
    background:rgba(214,156,95,.07);
    font-size:12px;
    color:rgba(230,221,204,.65);
}

.mg-payment-refunded strong{
    margin-left:4px;
    color:#e0bd7e;
}

.mg-payment-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin-top:12px;
}

.mg-payment-receipt,
.mg-payment-refund{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:0 13px;
    border-radius:10px;
    font-size:12px;
    font-weight:800;
    text-decoration:none;
}

.mg-payment-receipt{
    color:#e5d0a1;
    border:1px solid rgba(212,173,99,.27);
    background:rgba(212,173,99,.07);
}

.mg-payment-refund{
    color:#d6dfe0;
    border:1px solid rgba(192,202,204,.20);
    background:rgba(192,202,204,.06);
    cursor:pointer;
}

.mg-payment-refund:not(:disabled):active{
    transform:scale(.97);
}

.mg-payment-refund:disabled{
    opacity:.55;
    cursor:wait;
}

.mg-payment-state{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:0 10px;
    border-radius:10px;
    font-size:11px;
    font-weight:800;
}

.mg-payment-state.pending{
    color:#e5c783;
    background:rgba(212,173,99,.08);
}

.mg-payment-state.done{
    color:#a9d9be;
    background:rgba(91,170,126,.08);
}

.mg-payment-state.blocked{
    color:rgba(215,221,222,.48);
    background:rgba(160,170,173,.055);
}

.mg-payment-warning{
    margin-top:9px;
    font-size:11px;
    line-height:1.45;
    color:#d9a988;
}

.mg-payment-policy-note{
    margin-top:11px;
    font-size:11px;
    line-height:1.55;
    color:rgba(210,218,219,.45);
}

@media(max-width:560px){
    .mg-payment-card{
        padding:12px;
    }

    .mg-payment-card-head{
        gap:8px;
    }

    .mg-payment-actions{
        width:100%;
    }

    .mg-payment-receipt,
    .mg-payment-refund{
        flex:1;
    }
}