body { font-family: sans-serif; margin: 2em; }
input, button { margin: 0.2em; }
.section { margin-bottom: 2em; }
table { border-collapse: collapse; margin-top: 1em; }
th, td { border: 1px solid #ccc; padding: 0.5em; }

/* モーダル用スタイル */
#modal-bg {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: #000a;
  z-index: 1000;
}
#modal-content {
  background: #fff;
  padding: 2em;
  margin: 10vh auto;
  width: 300px;
  position: relative;
  border-radius: 8px;
  box-shadow: 0 2px 16px #0003;
}
#modal-close {
  position: absolute;
  top: 0.5em;
  right: 1em;
  cursor: pointer;
  font-size: 1.5em;
}
#modal-card-info {
  margin-bottom: 1em;
}
#modal-number, #modal-price {
  width: 90%;
  margin-bottom: 0.5em;
  padding: 0.3em;
}
#modal-register-btn {
  width: 100%;
  padding: 0.5em;
  background: #2b7;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
}
#modal-register-btn:hover {
  background: #24995e;
}

/* --- 購入リスト用レスポンシブデザイン --- */
@media (max-width: 600px) {
  #purchase-list-content {
    padding: 0 0.5em;
  }
  #purchase-add-form {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5em;
  }
  #purchase-add-form > * {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 1.1em;
  }
  #purchase-add-form button {
    font-size: 1.1em;
    padding: 0.7em 0;
  }
  #purchase-list-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    font-size: 0.98em;
  }
  #purchase-list-table thead, #purchase-list-table tbody, #purchase-list-table tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  #purchase-list-table th, #purchase-list-table td {
    word-break: break-all;
    padding: 0.5em 0.3em;
    font-size: 1em;
  }
  #purchase-list-table th, #purchase-list-table td {
    min-width: 80px;
  }
  #purchase-list-table td button {
    width: 48%;
    min-width: 70px;
    margin: 0.1em 1%;
    font-size: 1em;
    padding: 0.5em 0;
  }
  #purchase-list-table input,
  #purchase-list-table select {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    font-size: 1.1em;
    margin: 0;
  }
  #purchase-list-table td {
    vertical-align: middle;
    text-align: center;
  }
}

.purchase-list-cell {
  padding: 0.5em 0.3em;
  text-align: center;
  vertical-align: middle;
  word-break: break-all;
  font-size: 1em;
}
.minw-120 { min-width: 120px; }
.minw-110 { min-width: 110px; }
.minw-100 { min-width: 100px; }
.minw-70  { min-width: 70px; }

.purchase-list-cell input,
.purchase-list-cell select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-size: 1em;
}