1  .credit-purchase {
  2    max-width: 600px;
  3    width: 100%;
  4  }
  5  
  6  .credit-purchase h2 {
  7    text-align: center;
  8    margin-bottom: 2rem;
  9    font-size: 2rem;
 10  }
 11  
 12  .credit-info {
 13    display: grid;
 14    grid-template-columns: 1fr 1fr;
 15    gap: 1.5rem;
 16    margin-bottom: 2rem;
 17  }
 18  
 19  .credit-card {
 20    background-color: #1f2937;
 21    padding: 1.5rem;
 22    border-radius: 12px;
 23    text-align: center;
 24    border: 1px solid #374151;
 25  }
 26  
 27  .credit-card h3 {
 28    font-size: 1.125rem;
 29    margin-bottom: 0.5rem;
 30  }
 31  
 32  .credit-amount {
 33    font-size: 3rem;
 34    font-weight: bold;
 35    color: #6366f1;
 36    margin: 0.5rem 0;
 37  }
 38  
 39  .credit-desc {
 40    color: #9ca3af;
 41    font-size: 0.875rem;
 42  }
 43  
 44  .purchase-section {
 45    background-color: #1f2937;
 46    padding: 2rem;
 47    border-radius: 12px;
 48    border: 1px solid #374151;
 49  }
 50  
 51  .combo-offer {
 52    text-align: center;
 53    margin-bottom: 1.5rem;
 54  }
 55  
 56  .combo-offer h3 {
 57    font-size: 1.5rem;
 58    margin-bottom: 0.5rem;
 59  }
 60  
 61  .combo-price {
 62    font-size: 2.5rem;
 63    font-weight: bold;
 64    color: #10b981;
 65    margin: 0.5rem 0;
 66  }
 67  
 68  .combo-contents {
 69    list-style: none;
 70    margin: 1rem 0;
 71    padding: 0;
 72    color: #d1d5db;
 73  }
 74  
 75  .combo-contents li {
 76    padding: 0.25rem 0;
 77  }
 78  
 79  .combo-contents li::before {
 80    content: '✓ ';
 81    color: #10b981;
 82    font-weight: bold;
 83  }
 84  
 85  .balance-info {
 86    text-align: center;
 87    margin-bottom: 1.5rem;
 88    color: #9ca3af;
 89  }
 90  
 91  .balance-info strong {
 92    color: #ffffff;
 93  }
 94  
 95  .warning {
 96    color: #f59e0b;
 97    font-size: 0.875rem;
 98    margin-top: 0.5rem;
 99  }
100  
101  .purchase-section button {
102    width: 100%;
103    font-size: 1.125rem;
104  }