body {
    text-align: center;
  }
  
  /* カード内レイアウト */
  .card-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1.1rem;
    padding: 1.25rem 1.25rem 1.5rem;
  }
  
  /* タイトル */
  .card-body h1,
  .card-body .h4 {
    font-size: 3.6rem;
    margin-bottom: 0.25rem;
  }
  
  /* メッセージ */
  #result {
    font-size: 2.0rem;
    margin-bottom: 0.25rem;
  }
  
  /* バーまわり */
  .capacity-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
  }
  
  .capacity-icon {
    font-size: 3rem; /* アイコンも大きめにしとく */
  }
  
  .capacity-bar {
    position: relative;
    width: 80%;
    height: 48px; 
    background: #e5e7eb;
    border-radius: 9999px;
    overflow: hidden;
    border: 1px solid #d1d5db;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
  }
  
  .capacity-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
    transition: width 0.3s ease, background 0.3s ease;
  }
  
  .capacity-percent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem; 
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    pointer-events: none;
  }
  
  /* 混雑度テキスト */
  .checkin-box .capacity-text {
    font-size: 3rem;
    color: #555;
    text-align: center;
    margin-top: 0.1rem;
  }
  
  /* ボタンを2つで80%に収める */
  .actions {
    margin-top: auto;
    display: flex;
    justify-content: center;
    gap: 1rem;
  }
  
  .actions .btn {
    max-width: 80%;
    font-size: 3.75rem;
    padding: 3rem 0;
    margin-bottom: 0.5rem;
  }

  .checkin-box p {
    font-size: 2.25rem;
    margin-bottom: 1rem;
  }
  
  /* スマホのときは縦並び＆100% */
  @media (max-width: 576px) {
    .card-body {
      padding: 1rem 1rem 1.25rem;
      gap: 0.9rem;
    }
    .capacity-wrapper {
      flex-direction: column;
      align-items: stretch;
    }
    .actions {
      flex-direction: column;
    }
    .actions .btn {
      max-width: 100%;
      flex: 1 0 auto;
      width: 100%;
    }
  }

  /* ボタンの「処理中」見た目 */
.btn-loading {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  position: relative;
}

/* ちっちゃい丸を右側に出す (簡易スピナーっぽく) */
.btn-loading::after {
  content: "";
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.8);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: translateY(-50%) rotate(360deg); }
}