/* Card billing ("결제 관리" tab and the card dialog). Prototype PAYMENT MANAGEMENT block: 34×23 card chip, method rows split
   by dividers, compact actions. Colors and radii come from the shared tokens only; sizes keep the 13 px floor. */
.method-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--color-divider); }
.method-chip { display: block; flex: none; width: 34px; height: 23px; border-radius: 5px; background: var(--color-neutral-200); }
.method-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
.method-copy strong { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.method-copy small { color: var(--color-neutral-600); font-size: 13px; }
.method-actions { display: flex; flex: none; gap: 6px; }
.method-card-head .tag { flex: none; }
.btn-compact { padding: 6px 12px; font-size: 13px; }

.invoice-table .cell-amount { font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--color-text); }
.invoice-table .cell-amount small { display: block; font-size: 13px; font-weight: 500; }
.invoice-table .invoice-item { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--color-text); }
.invoice-table .invoice-item small, .invoice-table td > small { display: block; color: var(--color-neutral-600); font-size: 13px; }
.invoice-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 12px; white-space: nowrap; }
.invoice-table .invoice-state { font-size: 13px; font-weight: 600; white-space: nowrap; }
.invoice-table tr.is-upcoming td { color: var(--color-neutral-600); }
.invoice-table a { font-size: 13px; font-weight: 600; }

.billing-card-form { display: flex; flex-direction: column; gap: 14px; }
.billing-card-form[hidden], .billing-confirm[hidden] { display: none; }
.billing-card-form .note-accent { margin-top: 0; }
.billing-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.billing-consent { display: flex; align-items: flex-start; gap: 10px; color: var(--color-neutral-700); font-size: 13px; line-height: 1.55; cursor: pointer; }
.billing-consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--color-accent); }
.billing-confirm { display: flex; flex-direction: column; gap: 14px; }

@supports (corner-shape: superellipse(2)) { .method-chip { corner-shape: superellipse(4); } }

@media (max-width: 640px) {
  .method-row { flex-wrap: wrap; }
  .method-actions { width: 100%; justify-content: flex-end; }
  .billing-field-row { grid-template-columns: 1fr; }
  /* Phones: the invoice table fits the card instead of scrolling sideways. Date and type columns are dropped (the item names the period). */
  .table-scroll .invoice-table { min-width: 0; }
  .invoice-table th:nth-child(1), .invoice-table td:nth-child(1), .invoice-table th:nth-child(3), .invoice-table td:nth-child(3) { display: none; }
  .invoice-table th, .invoice-table td { padding-right: 6px; padding-left: 6px; }
  .invoice-table .cell-amount, .invoice-table .invoice-state { white-space: normal; }
  .invoice-table td.is-right .btn-compact { padding: 6px 10px; white-space: nowrap; }
}