:root {
  --nmb48-color: #F2AE42;
  --nmb48-dark: #D4930B;
  --nmb48-light: #FFF3E0;
  --ngt48-color: #E60021;
  --ngt48-dark: #B8001A;
  --ngt48-light: #FFEBEE;
  --hkt48-color: #000000;
  --hkt48-dark: #333333;
  --hkt48-light: #EEEEEE;
  --akb48-color: #FF69B4;
  --akb48-dark: #C71585;
  --akb48-light: #FCE4EC;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
  background: #f5f5f5; color: #333; line-height: 1.6;
}
.container { max-width: 720px; margin: 0 auto; padding: 16px; }
header { margin-bottom: 20px; }
h1 { font-size: 22px; color: var(--nmb48-color); }
.subtitle { font-size: 13px; color: #888; margin-top: 2px; }
.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; gap: 8px;
}
.toolbar label { font-size: 14px; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.toolbar input[type="checkbox"] { accent-color: var(--nmb48-color); width: 16px; height: 16px; }
#groupFilter { display: flex; flex-wrap: wrap; gap: 10px; }
#refreshBtn {
  background: var(--nmb48-color); color: #fff; border: none; border-radius: 6px;
  padding: 6px 14px; font-size: 13px; cursor: pointer;
}
#refreshBtn:hover { background: var(--nmb48-dark); }
.last-update { font-size: 12px; color: #999; margin-top: 6px; }
#loading { text-align: center; color: #999; padding: 40px 0; }
.error { background: #ffebee; color: #c62828; padding: 12px; border-radius: 6px; margin-bottom: 16px; }
.hidden { display: none; }

/* --- Calendar --- */
.cal-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-bottom: 10px;
}
.cal-nav-title { font-size: 16px; font-weight: bold; min-width: 100px; text-align: center; }
.cal-nav-btn {
  background: var(--nmb48-color); color: #fff; border: none; border-radius: 6px;
  width: 32px; height: 32px; font-size: 16px; cursor: pointer;
}
.cal-nav-btn:hover { background: var(--nmb48-dark); }
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px; background: #e0e0e0; border-radius: 8px; overflow: hidden;
}
.cal-header {
  background: var(--nmb48-color); color: #fff; text-align: center;
  padding: 6px 0; font-size: 13px; font-weight: bold;
}
.cal-cell {
  background: #fff; text-align: center; padding: 6px 2px;
  cursor: pointer; transition: background 0.15s; min-height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
}
.cal-cell:hover { background: var(--nmb48-light); }
.cal-empty { background: #fafafa; cursor: default; }
.cal-empty:hover { background: #fafafa; }
.cal-sun .cal-day-num { color: #e53935; }
.cal-sat .cal-day-num { color: #1e88e5; }
.cal-today .cal-day-num {
  background: var(--nmb48-color); color: #fff; border-radius: 50%;
  width: 24px; height: 24px; line-height: 24px; display: inline-block;
}
.cal-selected { background: #f8bbd0 !important; }
.cal-day-num { font-size: 14px; font-weight: bold; }
.cal-dots { display: flex; gap: 3px; margin-top: 3px; }
.cal-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
}
.cal-dot-perf { background: var(--nmb48-color); }
.cal-dot-sale { background: #42a5f5; }
.cal-legend {
  display: flex; align-items: center; gap: 16px; margin-top: 8px;
  font-size: 12px; color: #666; flex-wrap: wrap;
}
.cal-legend .cal-dot { vertical-align: middle; margin-right: 2px; }
.cal-clear-btn {
  margin-left: auto; background: none; border: 1px solid #ccc;
  border-radius: 4px; padding: 2px 8px; font-size: 12px; cursor: pointer; color: #666;
}
.cal-clear-btn:hover { background: #eee; }

/* --- Ticket Cards --- */
.card {
  border: 2px solid var(--nmb48-color); border-radius: 8px; margin-bottom: 16px;
  overflow: hidden;
}
.card-header {
  background: var(--nmb48-color); color: #fff; padding: 10px 14px;
  font-weight: bold; font-size: 15px;
}
.card-body { padding: 14px; background: #fff; }
.card-body p { margin-bottom: 8px; font-size: 14px; }
.card-body p:last-child { margin-bottom: 0; }
.label { color: #888; font-size: 12px; }
.sales-box {
  background: #f5f5f5; border: 1px solid #ccc; padding: 10px;
  border-radius: 4px; margin-top: 10px;
}
.sales-status { color: #555; font-weight: bold; font-size: 14px; }
.sales-phase {
  font-size: 13px; color: #555; font-weight: bold;
  margin: 4px 0 2px;
}
.sales-period { font-size: 12px; margin-top: 4px; color: #555; }
.sales-note { font-size: 12px; margin-top: 4px; font-weight: bold; color: #c2185b; }

/* --- Zaiko: 申込枠ごとの受付（枠により締切が異なる） --- */
.slot-list {
  margin-top: 10px; border: 1px solid #e0e0e0; border-radius: 4px;
  overflow: hidden; font-size: 12px;
}
.slot-heading {
  background: #f5f5f5; padding: 5px 8px; font-weight: bold;
  color: #555; border-bottom: 1px solid #e0e0e0;
}
.slot-row {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  padding: 5px 8px; border-top: 1px solid #f0f0f0;
}
.slot-row:first-of-type { border-top: none; }
.slot-name { flex: 1 1 40%; min-width: 0; word-break: break-word; }
.slot-status { color: #888; }
.slot-status-open { color: #2e7d32; font-weight: bold; }
.slot-period { color: #555; }
.slot-price { margin-left: auto; color: #555; white-space: nowrap; }
.btn-link {
  display: block; background: var(--nmb48-color); color: #fff; text-align: center;
  padding: 10px; border-radius: 5px; text-decoration: none;
  font-weight: bold; font-size: 14px; margin-top: 12px;
}
.btn-link:hover { background: var(--nmb48-dark); }

.card.no-mobile { border-color: #ccc; opacity: 0.7; }
.card.no-mobile .card-header { background: #999; }

.filter-hint {
  background: #f3e5f5; color: #7b1fa2; padding: 10px 14px;
  border-radius: 6px; margin-bottom: 16px; font-size: 13px;
}

@media (max-width: 480px) {
  .container { padding: 10px; }
  h1 { font-size: 18px; }
  .toolbar { flex-wrap: wrap; }
  .cal-cell { min-height: 44px; padding: 4px 1px; }
  .cal-day-num { font-size: 12px; }
  .cal-today .cal-day-num { width: 20px; height: 20px; line-height: 20px; }
  .cal-dot { width: 6px; height: 6px; }
}

/* --- NGT48 Red Variant --- */
.card.ngt48 { border-color: var(--ngt48-color); }
.card.ngt48 .card-header { background: var(--ngt48-color); }
.card.ngt48 .sales-box { background: var(--ngt48-light); border-color: var(--ngt48-color); }
.card.ngt48 .sales-status { color: var(--ngt48-dark); }
.card.ngt48 .btn-link { background: var(--ngt48-color); }
.card.ngt48 .btn-link:hover { background: var(--ngt48-dark); }
.cal-dot-ngt48 { background: var(--ngt48-color); }

/* --- HKT48 Black Variant --- */
.card.hkt48 { border-color: var(--hkt48-color); }
.card.hkt48 .card-header { background: var(--hkt48-color); }
.card.hkt48 .sales-box { background: var(--hkt48-light); border-color: var(--hkt48-color); }
.card.hkt48 .sales-status { color: var(--hkt48-dark); }
.card.hkt48 .btn-link { background: var(--hkt48-color); }
.card.hkt48 .btn-link:hover { background: var(--hkt48-dark); }
.cal-dot-hkt48 { background: var(--hkt48-color); }

/* --- AKB48 Pink Variant --- */
.card.akb48 { border-color: var(--akb48-color); }
.card.akb48 .card-header { background: var(--akb48-color); }
.card.akb48 .sales-box { background: var(--akb48-light); border-color: var(--akb48-color); }
.card.akb48 .sales-status { color: var(--akb48-dark); }
.card.akb48 .btn-link { background: var(--akb48-color); }
.card.akb48 .btn-link:hover { background: var(--akb48-dark); }
.cal-dot-akb48 { background: var(--akb48-color); }

/* NMB48 brand colors for sales-box (exclude NGT48, HKT48, AKB48) */
.card:not(.ngt48):not(.hkt48):not(.akb48) .sales-box { background: var(--nmb48-light); border-color: var(--nmb48-color); }
.card:not(.ngt48):not(.hkt48):not(.akb48) .sales-status { color: var(--nmb48-dark); }