/* ===== マイページ共通レイアウト ===== */

.white-container-inner{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.white-container-l,
.white-container-r{
    width:100%;
}

/* ===== マイページメニュー ===== */

.mypage-menu{
    border:1px solid #e5e5e5;
    background-color:#fafafa;
    border-radius:4px;
    font-size:14px;
}

.mypage-menu-trigger{
    display:none;
    width:100%;
    padding:10px 12px;
    border:none;
    background-color:#f3f3f3;
    text-align:left;
    font-size:14px;
    cursor:pointer;
}

.mypage-menu-trigger i{
    float:right;
}

.mypage-menu-list{
    list-style:none;
    margin:0;
    padding:0;
}

.mypage-menu-item + .mypage-menu-item{
    border-top:1px solid #e5e5e5;
}

.mypage-menu-link{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:10px 12px;
    text-decoration:none;
    color:#333;
    line-height:1.4;
}

.mypage-menu-link:hover{
    background-color:#eee;
    text-decoration:none;
}

.mypage-menu-item.is-current .mypage-menu-link{
    background-color:#000;
    color:#fff;
    font-weight:600;
}

@media (max-width: 767.98px){
    .mypage-menu-trigger{
        display:block;
    }

    .mypage-menu-list{
        max-height:0;
        overflow:hidden;
        transition:max-height .25s ease;
    }

    .mypage-menu.is-open .mypage-menu-list{
        max-height:600px;
    }
}

@media (min-width: 768px){
    .mypage-menu{
        font-size:16px;
    }

    .mypage-menu-trigger{
        font-size:16px;
        padding:14px 18px;
    }

    .mypage-menu-list{
        max-height:none;
    }

    .mypage-menu-link{
        padding:14px 18px;
        line-height:1.5;
    }
}


/* =========================================================
 * マイページ共通カラー
 * ========================================================= */

:root{
    --ink:#111827;
    --muted:#6b7280;
    --border:#e5e7eb;
    --bg:#fafafa;
    --card:#ffffff;

    --chip:#eef2ff;
    --chip-text:#3730a3;

    --pay:#ecfeff;
    --pay-text:#155e75;

    --ok:#ecfdf5;
    --ok-text:#065f46;

    --wait:#fff7ed;
    --wait-text:#9a3412;

    --ng:#fef2f2;
    --ng-text:#991b1b;
}

/* =========================================================
 * マイページ共通レイアウト
 * ========================================================= */

.wc-container{
    width:100% !important;
    max-width:none !important;
    padding:0 !important;
    margin:0 !important;
}

.white-container{
    width:100% !important;
    max-width:1520px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:32px !important;
    padding-right:32px !important;
}

.white-container-inner{
    width:100% !important;
    padding-top:16px !important;
    padding-bottom:24px !important;
    padding-left:24px !important;
    padding-right:24px !important;
}

.wc-container .container,
.wc-container .container-sm,
.wc-container .container-md,
.wc-container .container-lg,
.wc-container .container-xl,
.wc-container .container-xxl{
    max-width:none !important;
    width:100% !important;
    padding:0 !important;
}

/* =========================================================
 * ページヘッダ
 * ========================================================= */

.page-header{
    display:flex;
    align-items:flex-end;
    gap:.75rem;
    margin:.25rem 0 1rem;
}

.page-header h1{
    margin:0;
    line-height:1.1;
}

.meta{
    color:var(--muted);
    font-size:.9rem;
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
    align-items:center;
}

.meta .dot{
    width:4px;
    height:4px;
    background:#cfd4da;
    border-radius:50%;
    display:inline-block;
}

/* =========================================================
 * テーブル共通
 * ========================================================= */

.table-wrap{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:.9rem;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

/* =========================================================
 * 金額・番号
 * ========================================================= */

.cell-amount{
    font-weight:700;
    letter-spacing:.02em;
}

.mono{
    font-variant-numeric:tabular-nums;
    font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* =========================================================
 * チップ
 * ========================================================= */

.chip{
    display:inline-flex;
    align-items:center;
    gap:.25rem;
    padding:.16rem .52rem;
    border-radius:999px;
    font-size:.78rem;
    line-height:1.2;
    white-space:nowrap;
    border:1px solid transparent;
}

.chip-pay{
    background:var(--pay);
    color:var(--pay-text);
    border-color:#bae6fd;
}

.chip-ok{
    background:var(--ok);
    color:var(--ok-text);
    border-color:#a7f3d0;
}

.chip-wait{
    background:var(--wait);
    color:var(--wait-text);
    border-color:#fed7aa;
}

.chip-ng{
    background:var(--ng);
    color:var(--ng-text);
    border-color:#fecaca;
}

/* =========================================================
 * コピー
 * ========================================================= */

.copy-btn{
    border:none;
    background:transparent;
    padding:.15rem .35rem;
    border-radius:.4rem;
    cursor:pointer;
    line-height:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    vertical-align:middle;
}

.copy-btn:hover{
    background:#f3f4f6;
}

.copy-btn svg{
    width:16px;
    height:16px;
    display:block;
}

/* =========================================================
 * アイコン
 * ========================================================= */

.icon{
    width:16px;
    height:16px;
    vertical-align:-2px;
    flex:0 0 auto;
}

.icon-muted{
    fill:#9ca3af;
}

/* =========================================================
 * ボタン
 * ========================================================= */

.btn-w-sm-auto{
    width:100%;
}

@media (min-width:576px){
    .btn-w-sm-auto{
        width:auto !important;
    }
}

/* =========================================================
 * SP共通
 * ========================================================= */

@media (max-width:768px){

    .white-container{
        max-width:none !important;
        padding-left:12px !important;
        padding-right:12px !important;
    }

    .white-container-inner{
        padding-left:12px !important;
        padding-right:12px !important;
    }

    .table-wrap{
        border:none;
        background:transparent;
    }
}

    /* 本文エリア */
    .white-container-r{
        padding:12px 4px 24px;
    }

    /* 警告・ボタンまわりの見た目を少し整理 */
    .white-container-r h3{
        margin-bottom:1.5rem !important;
    }

    .white-container-r .alert{
        border-radius:6px;
        margin-bottom:1rem;
    }

    .white-container-r .text-center.mb-3{
        display:flex;
        justify-content:center;
        align-items:center;
        gap:12px;
        flex-wrap:wrap;
    }

    .white-container-r .text-center.mb-3 .btn{
        min-width:150px;
    }
    
        .white-container-r h1.h3{
        font-size:2.3rem;
        font-weight:700;
        line-height:1.35;
        margin-bottom:1.5rem !important;
    }