/* =============================================
   Sc VeRA - Members / Fee Page CSS
   ============================================= */

/* ---- PAGE HERO ---- */
#members-hero,
#profile-hero {
  position: relative;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 72px;
}

.members-hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0a0a0a 0%, #1c1c1c 50%, #0a0a0a 100%);
}
.members-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 50px 50px;
}

.members-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.members-hero-title {
  font-family: var(--font-en);
  font-size: clamp(1.6rem, 5vw, 3rem);
  font-weight: 900;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  margin-top: 8px;
}

.profile-role-badge {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-en);
  font-size: 0.65rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gray-400);
  border: 1px solid var(--gray-600);
  padding: 4px 14px;
  border-radius: 100px;
}

/* ---- MAIN ---- */
#members-main {
  padding: 60px 0 100px;
  background: var(--black);
  min-height: 60vh;
}

/* ---- MONTH SELECTOR ---- */
.fee-summary-bar {
  margin-bottom: 60px;
}

.fee-month-selector {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
}

.fee-current-month {
  font-family: var(--font-en);
  font-size: 1.1rem;
  font-weight: 900;
  font-style: normal;
  letter-spacing: 0.1em;
  color: var(--white);
  min-width: 140px;
  text-align: center;
}

.month-nav-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--gray-600);
  border-radius: 50%;
  color: var(--gray-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  transition: all var(--transition);
  cursor: pointer;
  background: none;
}
.month-nav-btn:hover {
  border-color: var(--white);
  color: var(--white);
}

/* ---- SUMMARY CARDS ---- */
.fee-summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 2px;
}

.fee-summary-card {
  background: var(--gray-800);
  padding: 24px 28px;
  transition: background var(--transition);
}
.fee-summary-card:hover { background: var(--gray-700); }
.fee-summary-card.highlight {
  background: var(--white);
  color: var(--black);
}
.fee-summary-card.highlight .fee-summary-label { color: var(--gray-600); }

.fee-summary-label {
  font-family: var(--font-en);
  font-size: 0.6rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 8px;
}

.fee-summary-value {
  font-family: var(--font-en);
  font-size: 1.6rem;
  font-weight: 900;
  font-style: normal;
  color: inherit;
  letter-spacing: 0.02em;
}

.fee-summary-note {
  font-size: 0.82rem;
  color: var(--gray-300);
  line-height: 1.5;
}

/* ---- SECTION ---- */
.members-section {
  margin-bottom: 64px;
}

.members-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-700);
}

.members-section-title {
  font-family: var(--font-en);
  font-size: 0.95rem;
  font-weight: 900;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
}

.members-section-sub {
  font-size: 0.82rem;
  color: var(--gray-400);
  margin-top: 4px;
}

/* ---- PROGRESS BAR ---- */
.payment-progress-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.payment-progress-bar {
  width: 160px;
  height: 4px;
  background: var(--gray-700);
  border-radius: 2px;
  overflow: hidden;
}

.payment-progress-fill {
  height: 100%;
  background: var(--white);
  border-radius: 2px;
  transition: width 0.6s ease;
  width: 0%;
}

.payment-progress-label {
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.1em;
  color: var(--gray-400);
  white-space: nowrap;
}

/* ---- TABLE ---- */
.members-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--gray-700);
  border-radius: 4px;
}

.members-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.members-table thead tr {
  background: var(--gray-800);
  border-bottom: 1px solid var(--gray-700);
}

.members-table th {
  padding: 14px 20px;
  text-align: left;
  font-family: var(--font-en);
  font-size: 0.6rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray-400);
  white-space: nowrap;
}

.members-table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-800);
  color: var(--gray-200);
  vertical-align: middle;
}

.members-table tbody tr:last-child td { border-bottom: none; }

.members-table tbody tr:hover td {
  background: var(--gray-800);
}

.table-loading {
  text-align: center;
  padding: 48px;
  color: var(--gray-400);
  font-size: 0.9rem;
}

/* 支払いバッジ */
.paid-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-en);
  font-size: 0.62rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 100px;
}
.paid-badge.paid   { background: rgba(102,204,102,0.12); color: #66cc66; border: 1px solid rgba(102,204,102,0.3); }
.paid-badge.unpaid { background: rgba(204,102,102,0.12); color: #cc6666; border: 1px solid rgba(204,102,102,0.3); }

/* 名前リンク */
.member-name-link {
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  font-style: normal;
  font-family: var(--font-en);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: opacity var(--transition);
}
.member-name-link:hover { opacity: 0.7; }

.member-role-tag {
  font-family: var(--font-en);
  font-size: 0.6rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.12em;
  color: var(--gray-400);
  text-transform: uppercase;
}

.amount-cell {
  font-family: var(--font-en);
  font-size: 1rem;
  font-weight: 900;
  font-style: normal;
  color: var(--white);
}

/* ---- CHART ---- */
.chart-wrap {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
  border-radius: 4px;
  padding: 32px;
  height: 300px;
  position: relative;
}

/* ---- MEMBER SELECT GRID ---- */
.member-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.member-select-card {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
  border-radius: 4px;
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
}
.member-select-card:hover {
  border-color: var(--white);
  transform: translateY(-3px);
}

.member-select-initial {
  font-family: var(--font-en);
  font-size: 2rem;
  font-weight: 900;
  font-style: normal;
  color: var(--gray-600);
  line-height: 1;
  margin-bottom: 10px;
}

.member-select-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
}

.member-select-role {
  font-family: var(--font-en);
  font-size: 0.58rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gray-400);
}

/* ---- PIN MODAL ---- */
.pin-modal-box {
  max-width: 360px !important;
  text-align: center;
  padding: 48px 40px !important;
}

.pin-modal-name {
  font-family: var(--font-en);
  font-size: 0.65rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 8px;
}

.pin-modal-title {
  font-family: var(--font-en);
  font-size: 1rem;
  font-weight: 900;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.pin-input-wrap {
  display: flex;
  justify-content: center;
}

.pin-input {
  background: var(--gray-800) !important;
  border: 1px solid var(--gray-600) !important;
  border-radius: 4px !important;
  padding: 14px 20px !important;
  color: var(--white) !important;
  font-family: var(--font-en) !important;
  font-size: 1.4rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.3em !important;
  text-align: center !important;
  width: 160px !important;
  transition: border-color var(--transition) !important;
}
.pin-input:focus {
  outline: none !important;
  border-color: var(--white) !important;
}

.pin-error {
  font-size: 0.78rem;
  color: #cc6666;
  margin-top: 12px;
  min-height: 20px;
  font-style: normal;
}

.pin-submit {
  margin-top: 20px;
  width: 100%;
  justify-content: center;
}

/* ---- LOGIN SCREEN ---- */
#login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  padding: 24px;
}

.login-wrap {
  width: 100%;
  max-width: 400px;
  text-align: center;
  padding-top: 72px;
}

.login-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-en);
  font-size: 0.65rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 32px;
  transition: color var(--transition);
}
.login-back:hover { color: var(--white); }

.login-desc {
  font-size: 0.85rem;
  color: var(--gray-400);
  margin-bottom: 24px;
}

.login-select-wrap {
  display: flex;
  justify-content: center;
}

.login-select {
  background: var(--gray-800);
  border: 1px solid var(--gray-600);
  border-radius: 4px;
  padding: 12px 16px;
  color: var(--white);
  font-family: var(--font-en);
  font-size: 0.85rem;
  font-style: normal;
  width: 100%;
  max-width: 320px;
  cursor: pointer;
  transition: border-color var(--transition);
}
.login-select:focus {
  outline: none;
  border-color: var(--white);
}
.login-select option { background: var(--gray-800); }

/* ---- PROFILE THIS MONTH ---- */
.profile-this-month {
  margin-bottom: 48px;
}

.ptm-label {
  font-family: var(--font-en);
  font-size: 0.65rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 16px;
}

.ptm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 2px;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  .fee-summary-cards { grid-template-columns: 1fr 1fr; }
  .ptm-cards         { grid-template-columns: 1fr 1fr; }
  .payment-progress-bar { width: 100px; }
  .members-section-header { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .fee-summary-cards { grid-template-columns: 1fr; }
  .ptm-cards         { grid-template-columns: 1fr; }
  .member-select-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================
   PAY DATE POPOVER（ワンタップ支払い）
   ============================================= */

/* タップ可能なバッジボタン共通 */
.pay-tap-btn {
  cursor: pointer;
  border: none;
  font-size: inherit;
  font-family: inherit;
  transition: transform 0.12s, box-shadow 0.12s, opacity 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.pay-tap-btn:hover  { transform: scale(1.06); box-shadow: 0 2px 10px rgba(0,0,0,0.25); }
.pay-tap-btn:active { transform: scale(0.96); opacity: 0.8; }

/* 未払いバッジのタップヒント強調 */
.paid-badge.unpaid.pay-tap-btn {
  border-style: dashed;
  animation: pulse-unpaid 2.4s ease-in-out infinite;
}
@keyframes pulse-unpaid {
  0%,100% { box-shadow: 0 0 0 0 rgba(248,113,113,0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(248,113,113,0.18); }
}

/* 支払済み行内の日付テキスト */
.pay-date-inline {
  display: block;
  font-size: 0.62rem;
  color: var(--gray-500);
  margin-top: 3px;
}

/* 保存中スピナー */
.pay-saving {
  display: inline-flex;
  align-items: center;
  color: var(--gray-400);
  font-size: 0.85rem;
  gap: 5px;
}

/* ---- バックドロップ ---- */
.pay-date-backdrop {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: transparent;
}

/* ---- ポップオーバー本体 ---- */
.pay-date-pop {
  position: absolute;
  z-index: 3100;
  width: 260px;
  background: #13103a;
  border: 1px solid rgba(168,85,247,0.4);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(168,85,247,0.1);
  padding: 14px 14px 12px;
  animation: pop-in 0.15s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes pop-in {
  from { transform: scale(0.88) translateY(-6px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);    opacity: 1; }
}

.pay-date-pop-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}
.pay-date-pop-name {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--white);
}
.pay-date-pop-month {
  font-family: var(--font-en);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(168,85,247,0.8);
}
.pay-date-pop-hint {
  font-size: 0.62rem;
  color: var(--gray-500);
  margin-bottom: 10px;
}

/* ---- 日付グリッド ---- */
.pay-date-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 10px;
}
.pay-date-day-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  color: var(--gray-300);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 0;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, transform 0.1s;
  font-family: var(--font-en);
  text-align: center;
}
.pay-date-day-btn:hover {
  background: rgba(168,85,247,0.25);
  border-color: rgba(168,85,247,0.5);
  color: #e9d5ff;
  transform: scale(1.1);
}
.pay-date-day-btn:active {
  transform: scale(0.95);
  background: rgba(168,85,247,0.4);
}

/* ---- アクションボタン行 ---- */
.pay-date-pop-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 8px;
}
.pay-date-undo-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid rgba(239,68,68,0.35);
  color: rgba(248,113,113,0.8);
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 0.66rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s;
}
.pay-date-undo-btn:hover {
  background: rgba(239,68,68,0.1);
  border-color: #ef4444;
  color: #fca5a5;
}
.pay-date-cancel-btn {
  background: transparent;
  border: 1px solid var(--gray-700);
  color: var(--gray-500);
  border-radius: 7px;
  padding: 5px 12px;
  font-size: 0.66rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s;
  margin-left: auto;
}
.pay-date-cancel-btn:hover { border-color: var(--gray-500); color: var(--white); }

/* ---- 支払い状況セル ---- */
.pay-status-cell { min-width: 100px; }

/* =============================================
   DEPOSIT（預かり金）スタイル
   ============================================= */

/* ---- テーブル内・預かり金セル ---- */
.deposit-cell {
  white-space: nowrap;
  vertical-align: middle;
}
.deposit-none {
  color: var(--gray-600);
  font-size: 0.82rem;
}

/* 預かり金バッジ（全額自動精算） */
.deposit-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-en);
  white-space: nowrap;
}
.deposit-badge--full {
  background: rgba(52,211,153,0.15);
  border: 1px solid rgba(52,211,153,0.4);
  color: #6ee7b7;
}
.deposit-badge--full i { color: #34d399; }

/* 預かり金バッジ（一部充当） */
.deposit-badge--part {
  background: rgba(251,191,36,0.12);
  border: 1px solid rgba(251,191,36,0.3);
  color: #fde68a;
}
.deposit-badge--part i { color: #f59e0b; }

/* 精算後残高 / 不足額 */
.deposit-after,
.deposit-short {
  display: block;
  font-size: 0.62rem;
  margin-top: 2px;
}
.deposit-after { color: #34d399; }
.deposit-short { color: #f87171; }

/* 編集ボタン（小アイコン） */
.deposit-edit-btn {
  background: transparent;
  border: 1px solid rgba(168,85,247,0.25);
  color: rgba(168,85,247,0.6);
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 0.62rem;
  cursor: pointer;
  margin-left: 6px;
  transition: all 0.2s;
  vertical-align: middle;
}
.deposit-edit-btn:hover {
  border-color: #a855f7;
  color: #d8b4fe;
  background: rgba(168,85,247,0.1);
}

/* 自動精算ステータスバッジ */
.paid-badge.auto-cleared {
  background: rgba(52,211,153,0.15);
  border: 1px solid rgba(52,211,153,0.4);
  color: #6ee7b7;
}
.paid-badge.auto-cleared i { color: #34d399; }

/* 一部充当ステータスバッジ */
.paid-badge.partial-use {
  background: rgba(251,191,36,0.12);
  border: 1px solid rgba(251,191,36,0.3);
  color: #fde68a;
}
.paid-badge.partial-use i { color: #f59e0b; }

/* 自動精算行のハイライト */
.row-auto-cleared {
  background: rgba(52,211,153,0.04) !important;
}

/* 参加回数テキスト */
.sess-count {
  font-size: 0.6rem;
  color: var(--gray-400);
  display: block;
  font-style: normal;
}

/* ---- 預かり金編集モーダル ---- */
.deposit-modal-box {
  padding: 28px 24px 24px;
  max-width: 360px;
  width: 100%;
  text-align: center;
}
.deposit-modal-name {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--gray-400);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.deposit-modal-title {
  font-family: var(--font-en);
  font-size: 1rem;
  font-weight: 900;
  color: var(--white);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.deposit-modal-title i { color: #34d399; font-size: 0.9em; }

.deposit-current-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(52,211,153,0.08);
  border: 1px solid rgba(52,211,153,0.25);
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 18px;
}
.deposit-current-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gray-500);
  text-transform: uppercase;
}
.deposit-current-value {
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: 900;
  color: #6ee7b7;
}

.deposit-field {
  margin-bottom: 12px;
}
.deposit-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gray-500);
  text-transform: uppercase;
  margin-bottom: 8px;
  text-align: left;
}
.deposit-input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.deposit-op-btn {
  flex: 1;
  padding: 7px 0;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-en);
  cursor: pointer;
  transition: all 0.2s;
  border: 1.5px solid var(--gray-700);
  background: transparent;
  color: var(--gray-400);
}
.deposit-op-btn:first-child { border-color: rgba(52,211,153,0.3); color: #6ee7b7; }
.deposit-op-btn--sub         { border-color: rgba(239,68,68,0.3);  color: #fca5a5; }
.deposit-op-btn.active,
.deposit-op-btn:first-child.active {
  background: rgba(52,211,153,0.15);
  border-color: #34d399;
  color: #6ee7b7;
}
.deposit-op-btn--sub.active {
  background: rgba(239,68,68,0.12);
  border-color: #ef4444;
  color: #fca5a5;
}

.deposit-note {
  font-size: 0.62rem;
  color: var(--gray-600);
  margin: 6px 0 0;
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
}
.deposit-note i { color: #a855f7; }

.deposit-error {
  font-size: 0.7rem;
  color: #f87171;
  min-height: 1.2em;
  margin: 6px 0;
}
.deposit-submit {
  width: 100%;
  margin-top: 4px;
}


/* =============================================
   ARREARS SECTION（残金集計表）
   ============================================= */

/* ---- セクションヘッダー追加スタイル ---- */
.arrears-sub-label {
  font-family: var(--font-en);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--gray-500);
  margin-left: 10px;
  vertical-align: middle;
}

/* ---- 印刷ボタン ---- */
.arrears-print-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  background: linear-gradient(135deg, #d97706, #f59e0b);
  border: none;
  border-radius: 20px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-en);
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: opacity 0.2s;
  box-shadow: 0 3px 12px rgba(245,158,11,0.35);
  flex-shrink: 0;
}
.arrears-print-btn:hover { opacity: 0.85; }

/* ---- サマリーチップ ---- */
.arrears-summary-row {
  margin-bottom: 16px;
}
.arrears-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.arrears-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 18px;
  border-radius: 10px;
  min-width: 120px;
}
.arrears-chip--red {
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.3);
}
.arrears-chip--gray {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--gray-700);
}
.arrears-chip--purple {
  background: rgba(168,85,247,0.1);
  border: 1px solid rgba(168,85,247,0.3);
}
.ac-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gray-500);
  text-transform: uppercase;
}
.ac-value {
  font-family: var(--font-en);
  font-size: 1rem;
  font-weight: 900;
  color: var(--white);
}
.arrears-chip--red   .ac-value { color: #fca5a5; }
.arrears-chip--purple .ac-value { color: #d8b4fe; }

/* ---- テーブル ---- */
.arrears-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--gray-700);
  margin-bottom: 0;
}
.arrears-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
}
.arrears-table thead tr {
  background: rgba(245,158,11,0.08);
}
.arrears-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(245,158,11,0.75);
  border-bottom: 1px solid var(--gray-700);
  white-space: nowrap;
}
.arrears-table td {
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}
.arrears-table tbody tr:last-child td { border-bottom: none; }

/* 列幅 */
.col-check  { width: 52px; text-align: center; }
.col-name   { min-width: 100px; }
.col-month  { width: 90px; white-space: nowrap; color: var(--gray-400); font-size: 0.78rem; }
.col-amount { width: 90px; font-family: var(--font-en); font-weight: 700; color: #fde68a; }
.col-status { width: 90px; }
.col-memo   { min-width: 100px; }

/* 未払い行 */
.arrears-row--unpaid { background: rgba(239,68,68,0.04); }
.arrears-row--unpaid .col-amount { color: #fca5a5; }
/* 支払済み行 */
.arrears-row--paid { opacity: 0.45; }

/* 氏名・役割 */
.arrears-table .col-name strong { color: var(--white); display: block; font-size: 0.85rem; }
.arr-role {
  font-size: 0.62rem;
  color: var(--gray-500);
  display: block;
  margin-top: 1px;
}

/* メモ欄 */
.arr-memo-text {
  display: block;
  min-height: 1.4em;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--gray-400);
  font-size: 0.78rem;
  cursor: text;
  transition: background 0.15s;
}
.arr-memo-text:hover  { background: rgba(255,255,255,0.04); }
.arr-memo-text:focus  { background: rgba(255,255,255,0.07); outline: 1px solid rgba(168,85,247,0.4); color: var(--white); }

/* ---- チェックボックス ---- */
.arrears-check-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}
.arrears-check-wrap input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: #f59e0b;
  cursor: pointer;
}

/* ---- 合計行 ---- */
.arrears-total-row {
  border-top: 2px solid rgba(245,158,11,0.4);
  padding: 12px 14px;
  background: rgba(245,158,11,0.06);
  border-radius: 0 0 var(--radius) var(--radius);
}
.arrears-total-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}
.arrears-total-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gray-500);
  text-transform: uppercase;
}
.arrears-total-value {
  font-family: var(--font-en);
  font-size: 1.4rem;
  font-weight: 900;
  color: #fbbf24;
}

/* =============================================
   @media print（印刷 / PDF 用）
   ============================================= */
.print-only { display: none !important; }

@media print {
  /* 印刷時に非表示にする要素 */
  #site-header,
  #members-hero,
  .fee-summary-bar,
  .members-section-header .arrears-print-btn,
  #payment-progress-wrap,
  .chart-wrap,
  #member-select-grid,
  .members-section:not(#arrears-section),
  #site-footer,
  .back-to-top,
  .no-print,
  .arrears-summary-chips .arrears-chip--gray:nth-child(n+3),
  .arr-memo-text:empty {
    display: none !important;
  }

  /* ページ全体リセット */
  * { box-sizing: border-box; }
  html, body {
    background: #fff !important;
    color: #111 !important;
    font-size: 10pt;
    margin: 0; padding: 0;
  }

  /* 印刷エリアを最大幅に */
  .container { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
  #members-main { padding: 0 !important; }
  #arrears-section { border: none !important; padding: 0 !important; margin: 0 !important; }
  .members-section-header { padding: 0 0 8pt 0 !important; border-bottom: 1.5pt solid #222 !important; margin-bottom: 8pt !important; }
  .members-section-title  { color: #111 !important; font-size: 13pt !important; }
  .arrears-sub-label { color: #666 !important; }

  /* 印刷専用ヘッダー */
  .print-only { display: block !important; }
  .arrears-print-header {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 2pt solid #111;
    padding-bottom: 6pt;
    margin-bottom: 10pt;
  }
  .arrears-print-logo {
    font-size: 16pt;
    font-weight: 900;
    letter-spacing: 0.05em;
    color: #111;
  }
  .arrears-print-title {
    font-size: 14pt;
    font-weight: 700;
    color: #111;
  }
  .arrears-print-date {
    font-size: 8pt;
    color: #555;
  }

  /* サマリーチップ（印刷用） */
  .arrears-summary-chips {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6pt !important;
    margin-bottom: 8pt !important;
  }
  .arrears-chip {
    background: #f5f5f5 !important;
    border: 0.5pt solid #ccc !important;
    padding: 5pt 10pt !important;
    border-radius: 4pt !important;
    min-width: 0 !important;
  }
  .ac-label { color: #666 !important; font-size: 7pt !important; }
  .ac-value { color: #111 !important; font-size: 10pt !important; }
  .arrears-chip--red .ac-value { color: #c00 !important; }

  /* テーブル */
  .arrears-table-wrap {
    border: 0.5pt solid #bbb !important;
    border-radius: 0 !important;
  }
  .arrears-table { font-size: 9pt !important; }
  .arrears-table thead tr { background: #eee !important; }
  .arrears-table th {
    color: #333 !important;
    padding: 5pt 8pt !important;
    border-bottom: 0.5pt solid #bbb !important;
    font-size: 7pt !important;
  }
  .arrears-table td {
    padding: 5pt 8pt !important;
    border-bottom: 0.3pt solid #ddd !important;
    color: #111 !important;
  }
  .arrears-row--paid { opacity: 0.5 !important; }
  .arrears-row--unpaid { background: #fff8f8 !important; }
  .col-amount { color: #c00 !important; }
  .arrears-row--paid .col-amount { color: #555 !important; }
  .col-month { color: #555 !important; }
  .arrears-table .col-name strong { color: #111 !important; }
  .arr-role { color: #666 !important; }
  .arr-memo-text { color: #333 !important; border-bottom: 0.3pt solid #bbb !important; min-height: 16pt !important; }

  /* チェックボックス（印刷時は□として表示） */
  .arrears-check-wrap input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 14pt !important; height: 14pt !important;
    border: 1pt solid #555 !important;
    background: #fff !important;
    vertical-align: middle !important;
  }
  .arrears-check-wrap input[type="checkbox"]:checked {
    background: #111 !important;
    border-color: #111 !important;
  }

  /* 合計行 */
  .arrears-total-row {
    background: #f5f5f5 !important;
    border-top: 1.5pt solid #555 !important;
    padding: 6pt 8pt !important;
  }
  .arrears-total-label { color: #444 !important; }
  .arrears-total-value { color: #111 !important; font-size: 12pt !important; }

  /* 印刷フッター */
  .arrears-print-footer {
    display: flex !important;
    justify-content: space-between;
    font-size: 7pt;
    color: #888;
    margin-top: 8pt;
    border-top: 0.3pt solid #ccc;
    padding-top: 4pt;
  }

  /* 1ページに収める */
  @page {
    size: A4 portrait;
    margin: 15mm 12mm 15mm 12mm;
  }
  .arrears-table { page-break-inside: auto; }
  .arrears-row--unpaid, .arrears-row--paid { page-break-inside: avoid; }
}

/* =============================================
   メンバー登録セクション
   ============================================= */
.reg-badge {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  color: #f59e0b;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: 20px;
  padding: 3px 12px;
  letter-spacing: 0.06em;
}

.reg-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin: 20px 0;
  justify-items: center; /* カードをグリッドセル内でセンタリング */
}

.reg-admin-bar {
  margin-top: 16px;
}

.reg-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.4);
  border-radius: 6px;
  padding: 10px 22px;
  color: #f59e0b;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.reg-create-btn:hover {
  background: rgba(245,158,11,0.2);
  border-color: #f59e0b;
}

/* =============================================
   メンバーカード（共通）
   ============================================= */
.member-card-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.member-card-wrap.mc-wrap-disabled { opacity: 0.5; }

.member-card-item,
.member-card-preview {
  position: relative;
  border-radius: 14px;
  padding: 20px 18px 16px;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
.member-card-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(0,0,0,0.5);
}

.mc-bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
  border-radius: 14px;
}

.mc-icon {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 1.8rem;
  color: rgba(255,255,255,0.3);
}

.mc-body { position: relative; z-index: 1; }
.mc-title {
  font-size: 0.88rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.mc-sub {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.04em;
}
.mc-badge {
  position: absolute;
  top: 14px;
  left: 16px;
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.6);
}

.mc-taken-badge {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-size: 0.58rem;
  font-weight: 700;
  color: #34d399;
  background: rgba(0,0,0,0.4);
  border-radius: 10px;
  padding: 2px 8px;
}
.mc-disabled-badge {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-size: 0.58rem;
  font-weight: 700;
  color: #f87171;
  background: rgba(0,0,0,0.4);
  border-radius: 10px;
  padding: 2px 8px;
}

.mc-admin-btns {
  display: flex;
  gap: 6px;
}
.mc-assign-btn,
.mc-disable-btn,
.mc-delete-btn {
  flex: 1;
  padding: 6px 0;
  border-radius: 5px;
  font-size: 0.65rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}
.mc-assign-btn  { background: rgba(245,158,11,0.15); color: #f59e0b; border: 1px solid rgba(245,158,11,0.3); }
.mc-assign-btn:hover  { background: rgba(245,158,11,0.3); }
.mc-disable-btn { background: rgba(100,100,100,0.15); color: #aaa; border: 1px solid rgba(100,100,100,0.3); }
.mc-disable-btn:hover { background: rgba(100,100,100,0.3); }
.mc-delete-btn  { background: rgba(220,60,60,0.1); color: #f87171; border: 1px solid rgba(220,60,60,0.25); }
.mc-delete-btn:hover  { background: rgba(220,60,60,0.25); }

/* =============================================
   カード発行モーダル
   ============================================= */
.card-create-box,
.card-assign-box {
  max-width: 480px;
  width: 90%;
  padding: 28px 24px;
}

.card-create-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.card-create-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.card-create-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gray-400);
}

.card-color-picker {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.card-color-sw {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s, border-color 0.15s;
}
.card-color-sw:hover { transform: scale(1.1); }
.card-color-sw.active {
  border-color: #fff;
  transform: scale(1.15);
  box-shadow: 0 0 10px rgba(255,255,255,0.3);
}

.card-preview-wrap {
  margin-bottom: 20px;
}
.member-card-preview {
  max-width: 220px;
  margin: 0 auto;
}

/* =============================================
   登録ステップUI（login.html）
   ============================================= */
.reg-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 22px;
}
.reg-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #555;
  transition: color 0.3s;
}
.reg-step span {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #333;
  color: #666;
  font-size: 0.72rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, color 0.3s;
}
.reg-step.active { color: #f59e0b; }
.reg-step.active span { background: #f59e0b; color: #111; }
.reg-step-line {
  flex: 1;
  height: 1px;
  background: #333;
  min-width: 24px;
  margin-bottom: 16px;
}

.reg-step-panel { display: none; }
.reg-step-panel.active { display: block; }

.reg-card-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin: 12px 0 16px;
  max-height: 320px;
  overflow-y: auto;
}

.reg-card-item {
  border-radius: 12px;
  padding: 16px 14px 12px;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.reg-card-item:hover { transform: translateY(-2px); }
.reg-card-item.selected {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.35);
}
.reg-card-item .rci-badge {
  position: absolute; top: 10px; left: 12px;
  font-size: 0.42rem; font-weight: 900; letter-spacing: 0.2em;
  color: rgba(255,255,255,0.55);
}
.reg-card-item .rci-icon {
  position: absolute; top: 10px; right: 12px;
  font-size: 1.3rem; color: rgba(255,255,255,0.3);
}
.reg-card-item .rci-title {
  font-size: 0.78rem; font-weight: 900; color: #fff;
  position: relative; z-index: 1; margin-bottom: 2px;
}
.reg-card-item .rci-sub {
  font-size: 0.56rem; color: rgba(255,255,255,0.6);
  position: relative; z-index: 1;
}

.reg-card-item-preview {
  border-radius: 12px;
  padding: 16px 14px 12px;
  min-height: 110px;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}
.reg-card-item-preview .rci-badge {
  position: absolute; top: 10px; left: 12px;
  font-size: 0.42rem; font-weight: 900; letter-spacing: 0.2em;
  color: rgba(255,255,255,0.55);
}
.reg-card-item-preview .rci-icon {
  position: absolute; top: 10px; right: 12px;
  font-size: 1.3rem; color: rgba(255,255,255,0.3);
}
.reg-card-item-preview .rci-title {
  font-size: 0.78rem; font-weight: 900; color: #fff;
  position: relative; z-index: 1;
}
.reg-card-item-preview .rci-sub {
  font-size: 0.56rem; color: rgba(255,255,255,0.6);
  position: relative; z-index: 1;
}

.reg-complete-card {
  display: flex;
  justify-content: center;
}

@media (max-width: 480px) {
  .reg-card-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .reg-card-select-grid { grid-template-columns: 1fr 1fr; }
}

/* =============================================
   メンバーカード（リニューアル版）
   ─ クレジットカード比率・光沢ライン・CSS完全管理
   ============================================= */
.reg-member-card {
  position: relative;
  border-radius: 14px;
  aspect-ratio: 1.586 / 1;   /* クレジットカード比率 */
  width: 100%;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12);
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
  background: linear-gradient(135deg,#374151,#111827); /* デフォルト=mono */
  user-select: none;
  padding: 14px 16px 12px;
}
/* 光沢ライン（疑似要素・画像不要） */
.reg-member-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
  border-radius: 14px 14px 0 0;
  pointer-events: none;
}
.reg-member-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
}
.reg-member-card.card-disabled { opacity: 0.45; cursor: default; }
.reg-member-card.card-disabled:hover { transform: none; box-shadow: 0 4px 16px rgba(0,0,0,0.45); }

/* ── カラークラス（インラインstyle不要） ── */
.card-color-mono   { background: linear-gradient(135deg,#374151,#111827); }
.card-color-gold   { background: linear-gradient(135deg,#f59e0b,#78350f); }
.card-color-red    { background: linear-gradient(135deg,#ef4444,#7f1d1d); }
.card-color-blue   { background: linear-gradient(135deg,#3b82f6,#1e3a8a); }
.card-color-green  { background: linear-gradient(135deg,#22c55e,#14532d); }
.card-color-purple { background: linear-gradient(135deg,#a855f7,#4c1d95); }
.card-color-orange { background: linear-gradient(135deg,#f97316,#7c2d12); }
.card-color-pink   { background: linear-gradient(135deg,#ec4899,#831843); }
.card-color-cyan   { background: linear-gradient(135deg,#06b6d4,#164e63); }
.card-color-lime   { background: linear-gradient(135deg,#84cc16,#365314); }

/* カラースウォッチ用クラス（モーダルのstyle属性を排除） */
.swatch-black        { background: linear-gradient(135deg,#1a1a1a,#000000); }
.swatch-gray         { background: linear-gradient(135deg,#9ca3af,#4b5563); }
.swatch-gold         { background: linear-gradient(135deg,#f59e0b,#78350f); }
.swatch-olive        { background: linear-gradient(135deg,#84855a,#3d3d1f); }
.swatch-khaki        { background: linear-gradient(135deg,#c8b87a,#8a7a4a); }
.swatch-purple       { background: linear-gradient(135deg,#a855f7,#4c1d95); }
.swatch-blue         { background: linear-gradient(135deg,#3b82f6,#1e3a8a); }
.swatch-pink         { background: linear-gradient(135deg,#ff00cc,#ff69b4); }
.swatch-vivid_yellow { background: linear-gradient(135deg,#ffff00,#ffe000); }
.swatch-turquoise    { background: linear-gradient(135deg,#00ffe7,#00bcd4); }
.swatch-vivid_orange { background: linear-gradient(135deg,#ff6600,#ff2200); }
.swatch-lime         { background: linear-gradient(135deg,#ccff00,#39ff14); }
.swatch-twotone_bw   { background: linear-gradient(135deg,#111827 50%,#f3f4f6 50%); }
.swatch-twotone_rb   { background: linear-gradient(135deg,#ef4444 50%,#111827 50%); }
.swatch-twotone_bb   { background: linear-gradient(135deg,#3b82f6 50%,#111827 50%); }
.swatch-camo         { background: #5a6b3a; background-image: radial-gradient(ellipse 8px 6px at 20% 30%,#3b4a24 80%,transparent 80%), radial-gradient(ellipse 6px 5px at 60% 60%,#2e3a1a 80%,transparent 80%), radial-gradient(ellipse 9px 5px at 80% 20%,#6b7a3e 80%,transparent 80%), radial-gradient(ellipse 5px 7px at 40% 80%,#3b4a24 80%,transparent 80%); }
.swatch-amoeba       { background: #0d0d1a; background-image: radial-gradient(ellipse 10px 7px at 18% 28%,#d400ff 55%,transparent 55%), radial-gradient(ellipse 7px 10px at 52% 62%,#00e5ff 55%,transparent 55%), radial-gradient(ellipse 9px 6px at 78% 18%,#ff0099 55%,transparent 55%), radial-gradient(ellipse 6px 9px at 38% 78%,#ffcc00 55%,transparent 55%), radial-gradient(ellipse 7px 8px at 68% 82%,#00ff88 55%,transparent 55%); }
.swatch-dark_leopard { background: #111111; background-image: radial-gradient(ellipse 11px 8px at 15% 22%,#3a2800 90%,transparent 90%), radial-gradient(ellipse 8px 11px at 40% 58%,#3a2800 90%,transparent 90%), radial-gradient(ellipse 13px 7px at 68% 28%,#3a2800 90%,transparent 90%), radial-gradient(ellipse 7px 12px at 82% 72%,#3a2800 90%,transparent 90%), radial-gradient(ellipse 10px 7px at 52% 88%,#3a2800 90%,transparent 90%); }
.swatch-pale_pink    { background: linear-gradient(135deg,#ffe4f0,#ffc8e0); }
.swatch-pale_yellow  { background: linear-gradient(135deg,#fffde0,#fff5a0); }
.swatch-pale_orange  { background: linear-gradient(135deg,#ffe8cc,#ffd0a0); }
/* 旧互換 */
.swatch-mono         { background: linear-gradient(135deg,#374151,#111827); }

/* カード文字色クラス */
.ac-text-white .ac-card-name,
.ac-text-white .ac-card-org,
.ac-text-white .ac-card-role-badge,
.ac-text-white .ac-card-point-chip { color: #fff !important; }
.ac-text-white .ac-card-meta        { color: rgba(255,255,255,0.55) !important; }

.ac-text-black .ac-card-name        { color: #555 !important; }
.ac-text-black .ac-card-meta        { color: rgba(80,80,80,0.7) !important; }
.ac-text-black .ac-card-org         { color: rgba(80,80,80,0.55) !important; }
.ac-text-black .ac-card-role-badge  { color: #555 !important; background: rgba(0,0,0,0.10) !important; }
.ac-text-black .ac-card-point-chip  { color: #555 !important; }

/* カード内レイアウト */
.reg-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.reg-card-icon {
  font-size: 1.4rem;
  color: rgba(255,255,255,0.35);
  line-height: 1;
}
.reg-card-org {
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
}
.reg-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.reg-card-info {
  flex: 1;
  min-width: 0;
}
.reg-card-title {
  font-size: 0.92rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reg-card-subtitle {
  font-size: 0.52rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.08em;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reg-card-badge {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  margin-left: 6px;
}
.reg-card-badge.taken     { background: rgba(52,211,153,0.22); color: #34d399; border: 1px solid rgba(52,211,153,0.35); }
.reg-card-badge.available { background: rgba(255,255,255,0.1);  color: rgba(255,255,255,0.65); border: 1px solid rgba(255,255,255,0.18); }
.reg-card-badge.disabled  { background: rgba(248,113,113,0.12); color: #f87171; border: 1px solid rgba(248,113,113,0.25); }

/* 管理者ボタン群 */
.reg-card-admin-btns {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  margin-left: 6px;
  align-items: center;
}
.card-assign-btn,
.card-toggle-btn,
.card-delete-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.card-assign-btn { background: rgba(245,158,11,0.2); color: #f59e0b; border: 1px solid rgba(245,158,11,0.4); }
.card-assign-btn:hover { background: rgba(245,158,11,0.4); }
.card-toggle-btn { background: rgba(150,150,150,0.2); color: #aaa; border: 1px solid rgba(150,150,150,0.3); }
.card-toggle-btn:hover { background: rgba(150,150,150,0.4); }
.card-delete-btn { background: rgba(220,60,60,0.15); color: #f87171; border: 1px solid rgba(220,60,60,0.3); }
.card-delete-btn:hover { background: rgba(220,60,60,0.3); }

/* カラースウォッチ（card-color-swatch） */
.card-color-swatch {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s, border-color 0.15s;
  outline: none;
}
.card-color-swatch:hover { transform: scale(1.1); }
.card-color-swatch.active {
  border-color: #fff;
  transform: scale(1.18);
  box-shadow: 0 0 10px rgba(255,255,255,0.35);
}

/* モーダル共通スタイル（modal-label, modal-input, modal-subtitle） */
.modal-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gray-400);
  margin-bottom: 4px;
  margin-top: 12px;
  display: block;
}
.modal-input {
  width: 100%;
  padding: 9px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px;
  color: var(--white);
  font-size: 0.88rem;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.modal-input:focus { border-color: rgba(168,85,247,0.6); }
.modal-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-subtitle {
  font-size: 0.75rem;
  color: var(--gray-400);
  margin-bottom: 8px;
}
.modal-error {
  color: #f87171;
  font-size: 0.75rem;
  min-height: 16px;
  margin-top: 8px;
}

/* カード作成モーダル */
.card-create-box {
  max-width: 500px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
}
.card-preview-wrap {
  margin: 12px 0;
  display: flex;
  justify-content: center;
}
.preview-card {
  width: 220px;
  max-width: 100%;
  cursor: default;
  pointer-events: none;
  /* aspect-ratio は .reg-member-card から継承 */
}

/* メンバー登録セクション説明文 */
.reg-section-desc {
  font-size: 0.8rem;
  color: var(--gray-400);
  margin: -4px 0 16px;
}

/* 個人ページ カード表示 */
.profile-card-wrap {
  justify-content: center;
  padding: 24px 0 0;
  flex-direction: column;
  align-items: center;
}
.profile-member-card {
  width: 280px;
  max-width: 90vw;
}
.profile-member-card.reg-member-card {
  cursor: default;
  pointer-events: none;
}

/* カスタマイズボタン */
.cz-edit-btn {
  font-size: 0.78rem !important;
  padding: 8px 18px !important;
  gap: 6px;
  align-items: center;
}

/* ─── カード表面バッジ ─── */
.profile-card-badge {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(255,255,255,0.25);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.45);
  backdrop-filter: blur(4px);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}

/* ─── カスタマイズモーダル ─── */
.card-customize-box {
  max-width: 500px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
}

/* アイコンプリセット */
.cz-icon-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 4px;
}
.cz-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cz-icon-btn:hover {
  background: rgba(168,85,247,0.2);
  border-color: rgba(168,85,247,0.5);
  color: #fff;
}

@media (max-width: 480px) {
  .card-customize-box { padding: 20px 16px; }
}

/* =============================================
   カード表面バッジ行（複数チップ）
   ============================================= */
.card-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 5px 0 3px;
  position: relative;
  z-index: 2;
}
.card-badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 20px;
  line-height: 1.7;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.2);
}
/* ── バッジカラークラス（インラインstyle不要） ── */
.badge-admin          { background: rgba(245,158,11,0.88);  color: #fff; }
.badge-operations     { background: rgba(59,130,246,0.88);  color: #fff; }
.badge-accounting     { background: rgba(168,85,247,0.88);  color: #fff; }
.badge-support        { background: rgba(16,185,129,0.88);  color: #fff; }
.badge-member         { background: rgba(100,100,120,0.80); color: #fff; }
.badge-friend-company { background: rgba(251,191,36,0.92);  color: #1a1a1a; }
.badge-karaoke        { background: rgba(236,72,153,0.88);  color: #fff; }
.badge-running        { background: rgba(239,68,68,0.88);   color: #fff; }
.badge-mahjong        { background: rgba(6,182,212,0.88);   color: #fff; }
.card-badge-chip i { font-size: 0.52rem; }


/* =============================================
   バッジ管理モーダル
   ============================================= */
.badge-modal-box {
  max-width: 480px;
  width: 95%;
  max-height: 85vh;
  overflow-y: auto;
}
.badge-check-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}
/* ── バッジ選択アイテム全体 ── */
.badge-check-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  user-select: none;
}
.badge-check-item:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(168,85,247,0.35);
}
.badge-check-item.badge-check-locked {
  opacity: 0.65;
  cursor: default;
}
/* ── 上段：チェックボックス + バッジチップ + 鍵アイコン ── */
.badge-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.badge-check-item input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: #a855f7;
  cursor: pointer;
}
.badge-check-item.badge-check-locked input[type="checkbox"] {
  cursor: not-allowed;
}
.badge-check-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.18);
  white-space: nowrap;
}
.badge-check-chip i { font-size: 0.74rem; }
.badge-grant-icon {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.78rem;
}
/* ── 下段：編集できる機能タグ ── */
.badge-perm-area {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  padding-left: 26px;
}
.badge-perm-prefix {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.badge-perm-tag {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.75);
}
/* ── 紐付け済み注記 ── */
.badge-linked-warn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #f59e0b;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: 20px;
  padding: 2px 10px;
  margin-left: 8px;
  vertical-align: middle;
}
.badge-locked-note {
  font-size: 0.6rem;
  color: rgba(239,68,68,0.75);
  padding-left: 26px;
  display: flex;
  align-items: center;
  gap: 5px;
}
/* ── バッジエラー行（HTML混在対応） ── */
#badge-error {
  font-size: 0.75rem;
  min-height: 18px;
  color: #f87171;
  margin-top: 4px;
}

@media (max-width: 480px) {
  .badge-modal-box { padding: 18px 14px; }
  .badge-check-chip { font-size: 0.65rem; padding: 3px 10px; }
  .badge-perm-area { padding-left: 22px; }
}

/* =============================================
   個別アカウントカード一覧（account-cards セクション）
   ============================================= */
.ac-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 4px;
  padding: 14px 14px 4px; /* ボタンのはみ出し分を確保 */
}

/* アカウントカード本体 */
.ac-card {
  position: relative;
  border-radius: 14px;
  padding: 14px 16px 12px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: visible;
  cursor: default;
  transition: transform 0.18s, box-shadow 0.18s;
  box-shadow: 0 4px 18px rgba(0,0,0,0.4);
  border: 2px solid transparent;
}
.ac-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 100%);
  border-radius: 14px 14px 0 0;
  pointer-events: none;
}
.ac-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,0.5); }
.ac-card.ac-card--mine { border-color: rgba(255,255,255,0.5); }

/* カード色クラス */
.ac-color-black        { background: linear-gradient(135deg,#1a1a1a,#000000); }
.ac-color-gray         { background: linear-gradient(135deg,#9ca3af,#4b5563); }
.ac-color-gold         { background: linear-gradient(135deg,#f59e0b,#78350f); }
.ac-color-olive        { background: linear-gradient(135deg,#84855a,#3d3d1f); }
.ac-color-khaki        { background: linear-gradient(135deg,#c8b87a,#8a7a4a); }
.ac-color-purple       { background: linear-gradient(135deg,#a855f7,#4c1d95); }
.ac-color-blue         { background: linear-gradient(135deg,#3b82f6,#1e3a8a); }
.ac-color-pink         { background: linear-gradient(135deg,#ff00cc,#ff69b4); }
.ac-color-vivid_yellow { background: linear-gradient(135deg,#ffff00,#ffe000); }
.ac-color-turquoise    { background: linear-gradient(135deg,#00ffe7,#00bcd4); }
.ac-color-vivid_orange { background: linear-gradient(135deg,#ff6600,#ff2200); }
.ac-color-lime         { background: linear-gradient(135deg,#ccff00,#39ff14); }
.ac-color-twotone_bw   { background: linear-gradient(135deg,#111827 50%,#f3f4f6 50%); }
.ac-color-twotone_rb   { background: linear-gradient(135deg,#ef4444 50%,#111827 50%); }
.ac-color-twotone_bb   { background: linear-gradient(135deg,#3b82f6 50%,#111827 50%); }
.ac-color-camo         { background: #5a6b3a; background-image: radial-gradient(ellipse 18px 14px at 20% 30%,#3b4a24 80%,transparent 80%), radial-gradient(ellipse 14px 10px at 60% 60%,#2e3a1a 80%,transparent 80%), radial-gradient(ellipse 20px 12px at 80% 20%,#6b7a3e 80%,transparent 80%), radial-gradient(ellipse 10px 16px at 40% 80%,#3b4a24 80%,transparent 80%); }
.ac-color-amoeba       { background: #0d0d1a; background-image: radial-gradient(ellipse 36px 26px at 18% 28%,#d400ff 55%,transparent 55%), radial-gradient(ellipse 26px 38px at 52% 62%,#00e5ff 55%,transparent 55%), radial-gradient(ellipse 30px 20px at 78% 18%,#ff0099 55%,transparent 55%), radial-gradient(ellipse 22px 32px at 38% 78%,#ffcc00 55%,transparent 55%), radial-gradient(ellipse 24px 28px at 68% 82%,#00ff88 55%,transparent 55%); }
.ac-color-dark_leopard { background: #111111; background-image: radial-gradient(ellipse 22px 16px at 15% 22%,#3a2800 92%,transparent 92%), radial-gradient(ellipse 16px 22px at 40% 58%,#3a2800 92%,transparent 92%), radial-gradient(ellipse 26px 14px at 68% 28%,#3a2800 92%,transparent 92%), radial-gradient(ellipse 14px 24px at 82% 72%,#3a2800 92%,transparent 92%), radial-gradient(ellipse 20px 14px at 52% 88%,#3a2800 92%,transparent 92%); }
.ac-color-pale_pink    { background: linear-gradient(135deg,#ffe4f0,#ffc8e0); }
.ac-color-pale_yellow  { background: linear-gradient(135deg,#fffde0,#fff5a0); }
.ac-color-pale_orange  { background: linear-gradient(135deg,#ffe8cc,#ffd0a0); }
/* 旧カラー互換 */
.ac-color-mono         { background: linear-gradient(135deg,#374151,#111827); }

/* カード上部 */
.ac-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}
.ac-card-role-badge {
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.ac-card-org {
  font-size: 0.42rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
}

/* カード下部 */
.ac-card-bottom {
  position: relative;
  z-index: 1;
}
.ac-card-name {
  font-size: 0.88rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.ac-card-meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
}
.ac-card-deposit {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.8);
  font-weight: 700;
  white-space: nowrap;
}
.ac-card-deposit span {
  font-size: 0.56rem;
  color: rgba(255,255,255,0.5);
  display: block;
  margin-bottom: 1px;
}
.ac-card-unpaid {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  text-align: right;
  white-space: nowrap;
}
.ac-card-unpaid strong {
  display: block;
  font-size: 0.72rem;
  color: #fca5a5;
}
.ac-card-unpaid.is-zero strong {
  color: rgba(255,255,255,0.4);
}

/* ── カード上の編集ボタン（タッチ対応強化版） ── */
.ac-card-edit-btn {
  position: absolute;
  top: 6px; right: 8px;             /* カード内に収める（overflow:visibleでも安全） */
  width: 44px; height: 44px;        /* スマホ推奨タッチサイズ44px */
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  border: 1.5px solid rgba(255,255,255,0.4);
  color: rgba(255,255,255,0.95);
  font-size: 0.78rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.15s;
  z-index: 20;                      /* カードより常に上 */
  -webkit-tap-highlight-color: rgba(168,85,247,0.3);
  touch-action: manipulation;       /* ダブルタップズームを無効化 */
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto !important;  /* 強制的にタッチ/クリックを受け取る */
}
.ac-card-edit-btn:hover,
.ac-card-edit-btn:active {
  background: rgba(168,85,247,0.8);
  transform: scale(1.1);
}

/* ── 色変更パレット（モーダル内） ── */
.ac-color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 4px;
}
.ac-color-swatch {
  width: 30px; height: 30px;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.12s, border-color 0.12s;
  position: relative;
}
.ac-color-swatch:hover { transform: scale(1.12); }
.ac-color-swatch.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.4);
}
.ac-sw-mono         { background: linear-gradient(135deg,#374151,#111827); }
.ac-sw-gold         { background: linear-gradient(135deg,#f59e0b,#92400e); }
.ac-sw-red          { background: linear-gradient(135deg,#ef4444,#7f1d1d); }
.ac-sw-blue         { background: linear-gradient(135deg,#3b82f6,#1e3a8a); }
.ac-sw-green        { background: linear-gradient(135deg,#22c55e,#14532d); }
.ac-sw-purple       { background: linear-gradient(135deg,#a855f7,#4c1d95); }
.ac-sw-orange       { background: linear-gradient(135deg,#f97316,#7c2d12); }
.ac-sw-pink         { background: linear-gradient(135deg,#ec4899,#831843); }
.ac-sw-cyan         { background: linear-gradient(135deg,#06b6d4,#164e63); }
.ac-sw-lime         { background: linear-gradient(135deg,#84cc16,#365314); }
.ac-sw-black        { background: linear-gradient(135deg,#1a1a1a,#000000); }
.ac-sw-gray         { background: linear-gradient(135deg,#9ca3af,#4b5563); }
.ac-sw-gold         { background: linear-gradient(135deg,#f59e0b,#78350f); }
.ac-sw-olive        { background: linear-gradient(135deg,#84855a,#3d3d1f); }
.ac-sw-khaki        { background: linear-gradient(135deg,#c8b87a,#8a7a4a); }
.ac-sw-purple       { background: linear-gradient(135deg,#a855f7,#4c1d95); }
.ac-sw-blue         { background: linear-gradient(135deg,#3b82f6,#1e3a8a); }
.ac-sw-pink         { background: linear-gradient(135deg,#ff70c8,#ff1493); }
.ac-sw-vivid_yellow { background: linear-gradient(135deg,#fff200,#ffd700); }
.ac-sw-turquoise    { background: linear-gradient(135deg,#06d6c2,#0891b2); }
.ac-sw-vivid_orange { background: linear-gradient(135deg,#ff8c00,#ff4500); }
.ac-sw-lime         { background: linear-gradient(135deg,#ccff00,#7fff00); }
.ac-sw-twotone_bw   { background: linear-gradient(135deg,#111827 50%,#f3f4f6 50%); }
.ac-sw-twotone_rb   { background: linear-gradient(135deg,#ef4444 50%,#111827 50%); }
.ac-sw-twotone_bb   { background: linear-gradient(135deg,#3b82f6 50%,#111827 50%); }
.ac-sw-camo         { background: #5a6b3a; background-image: radial-gradient(ellipse 8px 6px at 20% 30%,#3b4a24 80%,transparent 80%), radial-gradient(ellipse 6px 5px at 60% 60%,#2e3a1a 80%,transparent 80%), radial-gradient(ellipse 9px 5px at 80% 20%,#6b7a3e 80%,transparent 80%), radial-gradient(ellipse 5px 7px at 40% 80%,#3b4a24 80%,transparent 80%); }
.ac-sw-amoeba       { background: #1a1a2e; background-image: radial-gradient(ellipse 10px 7px at 20% 30%,#a855f7 60%,transparent 60%), radial-gradient(ellipse 7px 10px at 55% 65%,#06b6d4 60%,transparent 60%), radial-gradient(ellipse 9px 6px at 80% 20%,#ec4899 60%,transparent 60%), radial-gradient(ellipse 6px 9px at 40% 80%,#f59e0b 60%,transparent 60%), radial-gradient(ellipse 7px 8px at 70% 85%,#22c55e 60%,transparent 60%); }

/* ── アカウントカード編集モーダル ── */
.ac-modal-box {
  max-width: 460px;
  width: 95%;
  max-height: 88vh;
  overflow-y: auto;
}
.ac-modal-preview {
  display: flex;
  justify-content: center;
  margin: 12px 0 4px;
}
.ac-preview-card {
  width: 220px;
  max-width: 100%;
  pointer-events: none;
}
.ac-card-preview-card {
  position: relative;
  border-radius: 14px;
  aspect-ratio: 1.586 / 1;
  width: 220px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,0.4);
  padding: 14px 16px 12px;
}
.ac-card-preview-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 100%);
  border-radius: 14px 14px 0 0;
  pointer-events: none;
}

/* ── モーダルフッター（追加・削除ボタン行） ── */
.ac-modal-footer {
  display: flex;
  gap: 10px;
  align-items: center;
  position: sticky;
  bottom: -24px;
  background: var(--card-bg, #13102a);
  padding: 14px 0 4px;
  margin-top: 8px;
}
.ac-modal-footer #ac-edit-save {
  flex: 1;
  width: auto;
}

/* ── 削除ボタン ── */
.ac-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.4);
  border-radius: var(--radius, 8px);
  color: #f87171;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
  white-space: nowrap;
  text-transform: none;
}
.ac-delete-btn:hover {
  background: rgba(239,68,68,0.22);
  border-color: rgba(239,68,68,0.7);
}

/* ── 決定ボタン（旧 ─ 互換性のため残す） ── */
.ac-save-btn-wrap {
  position: sticky;
  bottom: -24px;
  background: var(--card-bg, #13102a);
  padding: 12px 0 4px;
  margin-top: 4px;
}

/* ── ロールバッジ（カード上） ── */
.ac-role-label {
  font-size: 0.48rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 1px 6px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.75);
  background: rgba(0,0,0,0.25);
  white-space: nowrap;
}

/* ── ボタン（小）── */
.btn-sm {
  font-size: 0.72rem;
  padding: 6px 14px;
  border-radius: 8px;
}
.btn-outline {
  background: transparent;
  border: 1px solid rgba(168,85,247,0.4);
  color: rgba(168,85,247,0.9);
  cursor: pointer;
  transition: background 0.2s;
  font-family: inherit;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.btn-outline:hover { background: rgba(168,85,247,0.15); }

/* ── 未払いゼロ時テキスト ── */
.ac-no-unpaid { color: rgba(255,255,255,0.4); font-size: 0.6rem; }

@media (max-width: 600px) {
  .ac-card-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
}
@media (max-width: 380px) {
  .ac-card-grid { grid-template-columns: 1fr 1fr; }
}

/* =====================================================
   ImgUpload 共通UI（全編集ページ共通）
   ===================================================== */

/* ファイル選択ボタン */
.img-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: rgba(168,85,247,0.15);
  border: 1.5px solid rgba(168,85,247,0.5);
  border-radius: 8px;
  color: rgba(200,150,255,0.95);
  font-size: 0.78rem;
  font-weight: 700;
  font-family: var(--font-jp, 'Noto Sans JP', sans-serif);
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
  user-select: none;
  -webkit-user-select: none;
}
.img-upload-btn:hover {
  background: rgba(168,85,247,0.28);
  border-color: rgba(168,85,247,0.85);
}
.img-upload-btn i { font-size: 0.82rem; }

/* クリアボタン */
.img-upload-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid rgba(248,113,113,0.4);
  border-radius: 6px;
  color: rgba(248,113,113,0.85);
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 4px;
}
.img-upload-clear-btn:hover {
  background: rgba(248,113,113,0.12);
}

/* プレビューラップ */
.img-upload-preview-wrap {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* =============================================
   Account ページ ヒーローセクション
   ============================================= */
.usage-hero {
  position: relative;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  margin-top: 72px;
  background: linear-gradient(135deg, #0f0c29 0%, #1a1060 60%, #0f0c29 100%);
  border-bottom: 1px solid rgba(168,85,247,0.2);
  text-align: center;
}
.usage-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 50px 50px;
}
.usage-hero-label {
  position: relative;
  font-family: var(--font-en);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  color: var(--gray-500);
  margin-bottom: 10px;
}
.usage-hero-title {
  position: relative;
  font-family: var(--font-en);
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  font-weight: 900;
  font-style: normal;
  letter-spacing: 0.06em;
  color: var(--white);
  margin-bottom: 4px;
}
.usage-hero-sub {
  position: relative;
  font-size: 0.75rem;
  color: var(--gray-500);
}


/* ac-modal-overlay */
.ac-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}