/* ============================================================
   会員証の券面 styles/member-card.css(T2-4・ADR-0011「案A(淡色・上品)」)

   ■ 名前空間
     クラス名はすべて mcard 接頭辞。app.css の汎用クラスと衝突させないため。

   ■ 寸法はADR-0011で確定した値(変更にはHITL承認が必要)
     - 券面はクレジットカード比率 1586:1000。実寸に近い見え方を保つ
     - 氏名20px・会員番号15.5px(券面の中で最大級)
     - 本文18px基準(SPEC §6.6)はページ本文の規約であり、券面には適用しない。
       券面は「一目で情報を探す道具ではなく携帯して提示する道具」であり(ADR-0011 §1)、
       実寸のカードを再現することが可読性より優先される

   ■ 配色は書かない
     地色・文字色・バッジ色は rank-config の theme からインラインstyleで注入する。
     ここに色を書くと「表示名・券面色はconfig一元管理」(D-17②)が壊れる。

   ■ ホスト非依存
     モック(docs/member-card-mock.html)とミニアプリ本体のどちらに置いても
     同じ見た目になるよう、フォントと行間は券面内で閉じて指定する。

   注意: このコメント内に「アスタリスク+スラッシュ」の並びを書かないこと
   ============================================================ */

.mcard {
  --mcard-sans: var(--font-sans, 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif);
  --mcard-serif: var(--font-serif, 'Hiragino Mincho ProN', 'Yu Mincho', serif);

  width: 100%;
  max-width: 360px;
  aspect-ratio: 1586 / 1000;
  border-radius: 14px;
  margin: 0 auto 14px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .18);
  position: relative;
  overflow: hidden;
}

.mcard *, .mcard *::before, .mcard *::after { box-sizing: border-box; }

.mcard__face {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 11px 13px 10px;
  font-family: var(--mcard-sans);
  line-height: 1.7;
}

/* --- 上段: ダブルロゴとランクバッジ --- */
.mcard__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.mcard__logo {
  background: #fff;
  border-radius: 8px;
  padding: 3px;
  display: inline-flex;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.mcard__logo img { height: 40px; display: block; }

/* 白地+ランク色の枠。地色に埋もれないための形(ADR-0011 §1) */
.mcard__rank {
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 12px;
  font-size: 14px;
  white-space: nowrap;
}

.mcard__club {
  font-family: var(--mcard-serif);
  font-weight: 700;
  letter-spacing: .06em;
  font-size: 17px;
  margin-top: 5px;
}
.mcard__club-en {
  font-family: var(--mcard-sans);
  font-weight: 500;
  letter-spacing: .17em;
  display: block;
  font-size: 8.5px;
  opacity: .65;
}

/* --- 下段: 左に氏名・番号 / 右にQR(正方形なので横並びが収まりが良い) --- */
.mcard__body {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.mcard__info { flex: 1; min-width: 0; }

.mcard__name-label { font-size: 10.5px; opacity: .75; }
.mcard__name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcard__no {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: .09em;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
.mcard__joined { font-size: 11px; opacity: .8; }

.mcard__qr {
  background: #fff;
  border-radius: 5px;
  padding: 4px;
  line-height: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.mcard__qr svg { display: block; width: 62px; height: 62px; }

/* 会員番号がまだ無い人への案内枠(枠色は theme の accent を注入) */
.mcard__notice {
  margin-top: 7px;
  border: 1px dashed rgba(0, 0, 0, .28);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 12.5px;
  line-height: 1.55;
}