/* public/css/member-credits.css — 会員向け 取得資格・取得単位ページ */

.mcx-wrap {
    font-size: 13px;
    color: #2c3e50;
}

.mcx-h {
    font-size: 15px;
    font-weight: 700;
    margin: 14px 0 8px;
    padding-left: 8px;
    border-left: 4px solid #2c7a7b;
}

.mcx-empty {
    padding: 14px;
    color: #888;
    background: #f7f9fb;
    border-radius: 6px;
    text-align: center;
}

/* ---- 取得資格カード ---- */
.mcx-cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));   /* ★ 230px → 260px (mcxa-grid と統一) */
    gap: 10px;
}

.mcx-cert-card {
    border: 1px solid #d8e2e6;
    border-radius: 8px;
    padding: 10px 12px;
    background: #fff;
}

.mcx-cert-revoked { opacity: 0.55; }

.mcx-cert-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.mcx-cert-name {
    font-weight: 700;
    font-size: 13.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcx-cert-meta {
    font-size: 12px;
    color: #5d6d7e;
    line-height: 1.6;
}

/* ---- サマリーチップ ---- */
.mcx-summary {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.mcx-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 86px;
    padding: 8px 12px;
    border: 1px solid #d8e2e6;
    border-radius: 8px;
    background: #fff;
}

.mcx-chip-primary {
    background: #e6f4f4;
    border-color: #9fcfcf;
}

.mcx-chip-num {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
}

.mcx-chip-label {
    font-size: 11px;
    color: #5d6d7e;
}

/* ---- 単位一覧(コンパクト行) ---- */
.mcx-tx-list {
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

/* ★ 単位数(amount)列は固定幅をやめ、内容ぶんだけの幅(max-content)に。
   空いた分は 1fr の項目名(mcx-tx-name)列が受け取る。 */
.mcx-tx-row {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) max-content 110px 56px;
    gap: 8px;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid #f0f3f5;
    font-size: 12px;
}

.mcx-tx-row:last-child { border-bottom: none; }
.mcx-tx-row:nth-child(even) { background: #fafcfd; }
.mcx-tx-revoked { opacity: 0.5; text-decoration: line-through; }

.mcx-tx-date { color: #7f8c8d; white-space: nowrap; }

.mcx-tx-name {
    min-width: 0;               /* grid 内で ellipsis を効かせる */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcx-tx-amount {
    font-weight: 700;
    text-align: right;
    white-space: nowrap;        /* ★ 「+20」等を1行維持しつつ最小幅に */
}
.mcx-pos { color: #2e7d32; }
.mcx-neg { color: #c0392b; }

.mcx-tx-exp { color: #7f8c8d; white-space: nowrap; }

/* ---- バッジ ---- */
.mcx-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
    text-align: center;
}

.mcx-badge-valid   { background: #e6f4ea; color: #2e7d32; }
.mcx-badge-expired { background: #fbeaea; color: #c0392b; }
.mcx-badge-revoked { background: #eceff1; color: #78909c; }
.mcx-badge-used    { background: #fff4e0; color: #b8860b; }

/* ---- モバイル ---- */
@media (max-width: 560px) {
    /* ★ amount列: 46px固定 → max-content(内容ぶんの最小幅) */
    .mcx-tx-row {
        grid-template-columns: 76px minmax(0, 1fr) max-content 52px;
    }
    .mcx-tx-exp { display: none; }
    .mcx-cert-grid { grid-template-columns: 1fr; }
}

/* 生涯学習単位から除外されている取得単位 */
.mcx-tx-row.mcx-tx-lt-excluded {
    background: #f3f4f6;
    border-radius: 6px;
}