* { box-sizing: border-box; }
body { font-family: sans-serif; margin: 0; color: #222; background: #f7f7f8; }
header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 12px 24px; background: #1f2937; color: white; }
header .brand { color: white; text-decoration: none; font-weight: bold; }
.header-nav { flex: 1 0 auto; display: flex; gap: 16px; }
.header-nav a { color: #cbd5e1; text-decoration: none; }
.header-nav a:hover { text-decoration: underline; }
.header-logout { margin: 0; }
main { max-width: 900px; margin: 24px auto; padding: 0 16px; }
/* 列数の多い表を持つページ(campaign_detail/bounces)は、ブラウザを広げた分だけ
   表も広く使えるようにする(表だけでなくmain自体を可変にしないと900pxで頭打ちになる)。
   上限を設けず、広げれば広げるだけ表がそのまま広がるようにする。 */
main.wide { max-width: 96vw; }
table { width: 100%; border-collapse: collapse; background: white; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid #e5e7eb; }
/* 列数の多い表は、狭い画面では列を無理に折り返して潰すのではなく
   ページ全体ではなくこの枠内だけを横スクロールさせる。
   セルはnowrapが既定(1行を保つ)。長い説明文の列だけ.wrapを付けて折り返す。 */
.table-scroll { width: 100%; overflow-x: auto; }
.table-scroll th, .table-scroll td { white-space: nowrap; }
.table-scroll th.wrap, .table-scroll td.wrap { white-space: normal; min-width: 220px; max-width: 360px; }
.button, button { background: #2563eb; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; }
.link-button { background: none; color: #cbd5e1; border: none; cursor: pointer; text-decoration: underline; }
form label { display: block; margin-bottom: 12px; }
input, textarea { width: 100%; padding: 6px; box-sizing: border-box; }
.error { color: #dc2626; }
.status { padding: 2px 8px; border-radius: 4px; background: #e5e7eb; font-size: 0.85em; }
.status-sent, .status-delivered { background: #d1fae5; }
.status-opened { background: #dbeafe; }
.status-failed { background: #fee2e2; }
.status-done { background: #d1fae5; }
.status-sending { background: #fef3c7; }
.login-box { max-width: 320px; margin: 80px auto; }
.preview { border: 1px solid #e5e7eb; padding: 12px; background: white; margin-top: 8px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.csv-help { margin-top: 24px; background: white; border: 1px solid #e5e7eb; border-radius: 4px; padding: 12px 16px; }
.csv-help summary { cursor: pointer; font-weight: bold; }
.csv-help table { margin-top: 12px; }
.csv-help code { background: #f1f3f6; padding: 1px 5px; border-radius: 3px; }
.csv-sample { background: #f1f3f6; padding: 10px 12px; border-radius: 4px; overflow-x: auto; }
.csv-help .hint { color: #6b7280; font-size: 0.85em; }

.body-format { border: 1px solid #e5e7eb; border-radius: 4px; padding: 8px 12px 4px; margin-bottom: 12px; background: white; }
.body-format legend { font-size: 0.9em; color: #374151; padding: 0 4px; }
.body-format label.radio { display: block; margin-bottom: 6px; font-weight: normal; }
.body-format input[type="radio"] { margin-right: 6px; }
form label .hint { display: block; margin-top: 4px; color: #6b7280; font-size: 0.85em; font-weight: normal; }

.participant-search { margin: 20px 0 8px; }
.participant-search input { max-width: 360px; }

.stats { margin-top: 24px; }
.stats h2 { font-size: 1.1em; margin-bottom: 8px; }
.stats-table { width: auto; }
.stats-table th { text-align: left; width: 12em; background: #f8f9fb; }
.stats .hint { color: #6b7280; font-size: 0.85em; margin-top: 8px; }

.checkin-box { max-width: 420px; margin: 40px auto; text-align: center; }
.checkin-box h1 { font-size: 1.3em; }
.checkin-name { font-size: 1.4em; margin: 16px 0; }
.checkin-button { font-size: 1.3em; padding: 20px 32px; width: 100%; }
.checkin-status { font-size: 1.2em; padding: 14px; border-radius: 6px; margin-bottom: 16px; }
.checkin-done { background: #d1fae5; color: #065f46; }
.checkin-warning { background: #fee2e2; color: #991b1b; font-weight: bold; }

/* スマホ幅向けの調整 */
@media (max-width: 640px) {
  header { padding: 10px 16px; }
  main { margin: 16px auto; padding: 0 12px; }
  .login-box { margin: 40px auto; }
  th, td { padding: 6px 8px; font-size: 0.92em; }
  .stats-table th { width: auto; white-space: nowrap; }
  .actions { flex-direction: column; align-items: stretch; }
  .actions .button, .actions button { width: 100%; text-align: center; }
}