/* =========================================================
   pickbox-member-card — member-card.css
   Responsive: mobile → sm(640px) → md(768px) → lg(1024px)
   ========================================================= */

:root {
    --pmc-card-w: 920px;
    --pmc-card-radius: 22px;
    --pmc-card-shadow: 0 20px 48px rgba(15, 23, 42, 0.28);
    --pmc-text: #1f2933;
    --pmc-muted: #6b7280;
    --pmc-bg: #f4f5f7;
    --pmc-accent: #05663f;
    --pmc-border: rgba(0, 0, 0, 0.18);

    --pmc-green:    #10b981;
    --pmc-blue:     #2563eb;
    --pmc-bronze:   #b45309;
    --pmc-silver:   #9ca3af;
    --pmc-gold:     #d97706;
    --pmc-platinum: #6b7280;
    --pmc-legend-1: #8b5cf6;
    --pmc-legend-2: #c084fc;

    --pmc-alert-unpaid:    #b91c1c;
    --pmc-alert-withdrawn: #4b5563;
    --pmc-alert-invalid:   #1f2937;
    --pmc-alert-pending:   #92400e;
}

* { box-sizing: border-box; }

.pmc-body {
    margin: 0;
    padding: 0;
    background: var(--pmc-bg);
    color: var(--pmc-text);
    font-family: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.55;
}

.pmc-mono {
    font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ── ツールバー ── */
.pmc-toolbar {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 16px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
}

.pmc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: 1px solid var(--pmc-accent);
    background: var(--pmc-accent);
    color: #fff;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.pmc-btn:hover { opacity: 0.9; }
.pmc-btn-secondary {
    background: #fff;
    color: var(--pmc-accent);
}

/* ── ステージ ── */
.pmc-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 16px 60px;
    gap: 24px;
}

/* ── カード共通 ── */
.pmc-card {
    width: var(--pmc-card-w);
    max-width: 100%;
    background: #ffffff;
    border-radius: var(--pmc-card-radius);
    box-shadow: var(--pmc-card-shadow);
    border: 1px solid rgba(255, 255, 255, 0.35);
    overflow: hidden;
    display: flex;
    flex-direction: column;

    /* mobile: 12px */
    padding: 12px;
}

/* ── グラデーション（デザイン色値に更新） ── */
.pmc-card.is-green    { background: linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%); }
.pmc-card.is-blue     { background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%); }
.pmc-card.is-bronze   { background: linear-gradient(135deg, #b45309 0%, #d97706 50%, #f59e0b 100%); }
.pmc-card.is-silver   { background: linear-gradient(135deg, #9ca3af 0%, #d1d5db 50%, #e5e7eb 100%); }
.pmc-card.is-gold     { background: linear-gradient(135deg, #fbbf24 0%, #fcd34d 50%, #fde68a 100%); }
.pmc-card.is-platinum { background: linear-gradient(135deg, #d1d5db 0%, #e5e7eb 50%, #f3f4f6 100%); }
.pmc-card.is-legend   { background: linear-gradient(135deg, #8b5cf6 0%, #c084fc 50%, #a78bfa 100%); }

/* =========================================================
   ヘッダー
   ========================================================= */
.pmc-card__header {
    display: flex;
    flex-direction: column;     /* mobile: 縦積み */
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.pmc-card__brand-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* ロゴ: mobile 80px */
.pmc-card__logo-wrap {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.pmc-card__logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pmc-card__logo-fallback {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #111111;
}

.pmc-card__brand-text {
    min-width: 0;
}

.pmc-card__association-prefix {
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
}

.pmc-card__association {
    margin: 0 0 2px;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0.03em;
    word-break: break-all;
}

.pmc-card__title {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.3;
}

/* ── ティアブロック（右） ── */
.pmc-card__tier-block {
    display: flex;
    flex-direction: column;
    align-items: center;    /* mobile: 中央 */
    gap: 4px;
}

/* ティア名: mobile 28px, opacity 0.5 */
.pmc-card__tier-name {
    display: block;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.1;
    opacity: 0.5;
}

/* ダークトーンのティア名アクセントカラー */
.pmc-card.is-green    .pmc-card__tier-name { color: #a7f3d0; }
.pmc-card.is-blue     .pmc-card__tier-name { color: #bfdbfe; }
.pmc-card.is-bronze   .pmc-card__tier-name { color: #fef3c7; }
.pmc-card.is-legend   .pmc-card__tier-name { color: #fef3c7; }
/* ライトトーン */
.pmc-card.is-silver   .pmc-card__tier-name { color: #4b5563; }
.pmc-card.is-gold     .pmc-card__tier-name { color: #92400e; }
.pmc-card.is-platinum .pmc-card__tier-name { color: #4b5563; }

/* 星 / 👑 — mobile:20px, sm:28px, md:38px, lg:46px */
.pmc-card__tier-stars {
    display: block;
    font-size: 20px;
    line-height: 1.2;
}


/* =========================================================
   本文: 情報グリッド + QR
   ========================================================= */
.pmc-card__body {
    margin-top: 20px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;   /* mobile: 縦 */
    gap: 16px;
    align-items: center;
}

/* 情報グリッド: mobile 1列 */
.pmc-info-grid {
    margin: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 12px;
    row-gap: 12px;
}

.pmc-info-item {
    margin: 0;
    padding: 0;
    line-height: 1.4;
    text-align: center;   /* mobile: 中央揃え */
}

.pmc-info-item dt {
    margin: 0 0 2px;
    font-size: 12px;
    letter-spacing: 0.04em;
    font-weight: 500;
    opacity: 0.5;
}

.pmc-info-item dd {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    word-break: break-word;
    display: block;
}

/* 氏名 */
.pmc-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}
.pmc-name.is-long  { font-size: 14px; }
.pmc-name.is-xlong { font-size: 12px; }

.pmc-name__kana {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.7;
    display: block;
    width: 100%;
    margin-top: 2px;
    letter-spacing: 0.04em;
}

.pmc-name.is-masked {
    letter-spacing: 0.12em;
}

.pmc-name__mask-note {
    display: block;
    width: 100%;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 400;
    opacity: 0.65;
    letter-spacing: 0;
    line-height: 1.4;
}

/* ── QRエリア ── */
.pmc-card__qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* QRフレーム: mobile 140px */
.pmc-card__qr-frame {
    width: 140px;
    height: 140px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--pmc-border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.pmc-card__qr-frame svg,
.pmc-card__qr-frame img.pickbox-member-card-qr-img {
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
}

.pmc-card__qr-frame img.pickbox-member-card-qr-img {
    image-rendering: auto;
}

.pmc-state-withdrawn .pmc-card__qr-frame { opacity: 0.45; }

/* QR下の警告テキスト（デザイン準拠: QRと同幅・中央揃え） */
.pmc-card__qr-alert {
    margin: 6px 0 0;
    width: 140px;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.05em;
    line-height: 1.3;
    word-break: break-all;
}
.pmc-card__qr-alert--unpaid    { color: #ff0303; }
.pmc-card__qr-alert--withdrawn { color: #4b5563; }
.pmc-card__qr-alert--invalid   { color: #1f2937; }
.pmc-card__qr-alert--pending   { color: #92400e; }

.pickbox-member-card-qr-fallback {
    font-size: 10px;
    text-align: center;
    word-break: break-all;
    padding: 4px;
}

/* =========================================================
   フッター
   ========================================================= */
.pmc-card__footer {
    margin-top: 12px;
    text-align: center;   /* mobile: 中央 */
}

.pmc-card__footer-label {
    font-size: 11px;
    letter-spacing: 0.04em;
    font-weight: 500;
    opacity: 0.5;
}

/* =========================================================
   トーンオーバーライド（ライト背景用）
   ========================================================= */
.pmc-tone-dark .pmc-card__association-prefix,
.pmc-tone-dark .pmc-card__association,
.pmc-tone-dark .pmc-card__title,
.pmc-tone-dark .pmc-info-item dt,
.pmc-tone-dark .pmc-info-item dd,
.pmc-tone-dark .pmc-name,
.pmc-tone-dark .pmc-name__kana,
.pmc-tone-dark .pmc-card__footer-label {
    color: #ffffff;
}

.pmc-tone-light .pmc-card__association-prefix,
.pmc-tone-light .pmc-card__association,
.pmc-tone-light .pmc-card__title,
.pmc-tone-light .pmc-info-item dt,
.pmc-tone-light .pmc-info-item dd,
.pmc-tone-light .pmc-name,
.pmc-tone-light .pmc-name__kana,
.pmc-tone-light .pmc-card__footer-label {
    color: #1f2933;
}

/* =========================================================
   sm: 640px
   ========================================================= */
@media (min-width: 640px) {
    .pmc-card {
        padding: 16px;
    }

    /* ヘッダー: 横並び */
    .pmc-card__header {
        flex-direction: row;
        align-items: flex-start;
    }

    .pmc-card__tier-block {
        align-items: flex-end;  /* 右寄せ */
    }

    .pmc-card__logo-wrap {
        width: 90px;
        height: 90px;
    }

    .pmc-card__association-prefix { font-size: 16px; }
    .pmc-card__association        { font-size: 19px; }
    .pmc-card__title              { font-size: 16px; }

    .pmc-card__tier-name  { font-size: 40px; }
    .pmc-card__tier-stars { font-size: 28px; }

    /* 本文: 横並び */
    .pmc-card__body {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        margin-top: 30px;
    }

    /* 情報グリッド: 2列 */
    .pmc-info-grid {
        grid-template-columns: 1fr 1fr;
        column-gap: 24px;
        row-gap: 14px;
    }

    .pmc-info-item {
        text-align: left;
    }

    .pmc-name {
        justify-content: flex-start;
        font-size: 18px;
    }
    .pmc-name.is-long  { font-size: 16px; }
    .pmc-name.is-xlong { font-size: 14px; }

    .pmc-info-item dt { font-size: 13px; }
    .pmc-info-item dd { font-size: 18px; }

    .pmc-card__qr-frame {
        width: 140px;
        height: 140px;
    }

    .pmc-card__qr-alert {
        width: 140px;
    }

    /* フッター: 右寄せ */
    .pmc-card__footer {
        text-align: right;
    }
}

/* =========================================================
   md: 768px
   ========================================================= */
@media (min-width: 768px) {
    .pmc-card {
        padding: 24px;
    }

    .pmc-card__logo-wrap {
        width: 110px;
        height: 110px;
    }

    .pmc-card__association-prefix { font-size: 18px; }
    .pmc-card__association        { font-size: 23px; }
    .pmc-card__title              { font-size: 16px; }

    .pmc-card__tier-name  { font-size: 52px; }
    .pmc-card__tier-stars { font-size: 38px; }

    .pmc-card__body {
        margin-top: 50px;
        gap: 24px;
    }

    .pmc-info-grid {
        column-gap: 40px;
        row-gap: 16px;
    }

    .pmc-info-item dt { font-size: 16px; }
    .pmc-info-item dd { font-size: 24px; }

    .pmc-name         { font-size: 24px; }
    .pmc-name.is-long  { font-size: 20px; }
    .pmc-name.is-xlong { font-size: 17px; }

    .pmc-card__qr-frame {
        width: 170px;
        height: 170px;
    }

    .pmc-card__qr-alert {
        width: 170px;
        font-size: 24px;
        margin-top: 12px;
    }

    .pmc-card__footer-label { font-size: 14px; }
}

/* =========================================================
   lg: 1024px
   ========================================================= */
@media (min-width: 1024px) {
    .pmc-card {
        padding: 36px;
    }

    .pmc-card__logo-wrap {
        width: 130px;
        height: 130px;
    }

    .pmc-card__brand-row { gap: 16px; }

    .pmc-card__association-prefix { font-size: 20px; }
    .pmc-card__association        { font-size: 26px; }
    .pmc-card__title              { font-size: 18px; }

    .pmc-card__tier-name  { font-size: 64px; letter-spacing: 0.04em; }
    .pmc-card__tier-stars { font-size: 46px; }

    .pmc-card__body {
        margin-top: 80px;
        gap: 32px;
    }

    .pmc-info-grid {
        column-gap: 60px;
        row-gap: 20px;
    }

    .pmc-info-item dt { font-size: 20px; }
    .pmc-info-item dd { font-size: 32px; }

    .pmc-name         { font-size: 32px; }
    .pmc-name.is-long  { font-size: 26px; }
    .pmc-name.is-xlong { font-size: 22px; }

    .pmc-card__qr-frame {
        width: 200px;
        height: 200px;
    }

    .pmc-card__qr-alert {
        width: 200px;
        font-size: 32px;
        margin-top: 16px;
    }

    .pmc-card__footer-label { font-size: 18px; }
}

/* =========================================================
   メタ情報ブロック（管理画面のみ）
   ========================================================= */
.pmc-meta {
    width: var(--pmc-card-w);
    max-width: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 12px;
    color: var(--pmc-muted);
}
.pmc-meta code {
    word-break: break-all;
    background: #f9fafb;
    padding: 2px 4px;
    border-radius: 3px;
}
.pmc-meta__note { margin-top: 6px; }

/* =========================================================
   印刷
   ========================================================= */
@media print {
    @page {
        size: A4 landscape;
        margin: 12mm;
    }
    .no-print { display: none !important; }
    body, .pmc-body { background: #fff; }
    .pmc-stage { padding: 0; }
    .pmc-card {
        box-shadow: none;
        border: 1.2pt solid #000;
        page-break-inside: avoid;
        width: 100%;
        background: #fff !important;
        padding: 16px;
    }
    .pmc-card__tier-name { opacity: 0.25; color: #000 !important; }
    .pmc-card__association-prefix,
    .pmc-card__association,
    .pmc-card__title,
    .pmc-info-item dt,
    .pmc-info-item dd,
    .pmc-name,
    .pmc-card__footer-label { color: #000 !important; }
    .pmc-card__qr-alert { color: #000 !important; font-size: 14px; }
    .pmc-card__qr-alert--unpaid { text-decoration: underline; }
}