/* =========================================================
   fc.css — ファーザーズクラブ会員サイト固有の追加スタイル
   styles.css（連絡網と共通のトークン・部品）の後に読み込む。
========================================================= */

/* セクション見出し */
.section { margin-top: var(--space-xl); }
.section:first-child { margin-top: 0; }
.section-title {
  font-family: var(--font-serif);
  font-size: var(--font-size-h2);
  font-weight: 700;
  color: var(--color-text);
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--color-primary);
}
.section-title .badge { font-family: var(--font-sans); }
.section-title .spacer { flex: 1; }
.section-title .btn-link { font-family: var(--font-sans); font-weight: 400; font-size: var(--font-size-sm); }

/* ヒーロー（トップ） */
.hero-lead {
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--color-primary);
  text-align: center;
  margin-bottom: var(--space-xs);
}
.feature-list {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.feature-list li { padding: var(--space-xs) 0 var(--space-xs) 1.4em; position: relative; }
.feature-list li::before {
  content: '';
  position: absolute; left: 0.3em; top: 0.95em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-primary-soft);
}
.hero .card.wide { max-width: 560px; }

/* トップの切替（ログイン / 新規登録） */
.mode-switch {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-lg);
}
.mode-switch button {
  flex: 1;
  border: 0;
  background: var(--color-card);
  padding: var(--space-sm);
  min-height: var(--tap-target);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.mode-switch button.is-active {
  background: var(--color-primary);
  color: var(--color-primary-fg);
  font-weight: 700;
}

/* 子ども入力行 */
.child-row {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  margin-bottom: var(--space-sm);
}
.child-row .form-control { margin: 0; }
.child-row select { flex: 0 0 120px; }
.child-row input { flex: 1; }
.child-row .btn-link { flex: 0 0 auto; color: var(--color-text-muted); }

/* イベントカード */
.event-card { margin-bottom: var(--space-md); }
.event-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}
.event-title { font-size: var(--font-size-lg); font-weight: 700; }
.event-kind { font-size: 12px; color: var(--color-primary); letter-spacing: 0.05em; }
.event-meta { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-xs); }
.event-meta strong { color: var(--color-text); font-weight: 700; }
.event-desc { margin-top: var(--space-md); white-space: pre-wrap; font-size: var(--font-size-sm); }
.event-rsvp { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px dashed var(--color-border); }
.event-rsvp .segment label { min-width: 90px; }
.event-rsvp .segment label.is-yes:has(input:checked) { background: var(--color-accent); border-color: var(--color-accent); }
.event-rsvp .segment label.is-no:has(input:checked) { background: var(--color-text-muted); border-color: var(--color-text-muted); }
.event-rsvp .segment label.is-maybe:has(input:checked) { background: var(--color-warning); border-color: var(--color-warning); }
.event-answered { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-sm); }
.event-counts { font-size: 12px; color: var(--color-text-muted); }
.event-card.is-highlight { border: 2px solid var(--color-primary); }

/* 会員区分バッジ */
.badge-active { background: #ebf6f0; color: var(--color-accent); }
.badge-alumni { background: #eef2f7; color: var(--color-info); }
.badge-withdrawn { background: #f2f2f2; color: var(--color-text-mask); }
.badge-yes { background: #ebf6f0; color: var(--color-accent); }
.badge-maybe { background: #fff5e0; color: var(--color-warning); }
.badge-no { background: #f2f2f2; color: var(--color-text-muted); }
.badge-none { background: #fdecec; color: var(--color-error); }

/* 定義リスト（会員情報） */
.dl { display: grid; grid-template-columns: 7em 1fr; gap: var(--space-xs) var(--space-md); font-size: var(--font-size-sm); }
.dl dt { color: var(--color-text-muted); }
.dl dd { margin: 0; }

/* テーブル */
.table { width: 100%; border-collapse: collapse; margin-top: var(--space-md); font-size: var(--font-size-sm); }
.table th, .table td {
  padding: var(--space-sm) var(--space-xs);
  border-bottom: 1px solid var(--color-divider);
  text-align: left;
  vertical-align: top;
}
.table th { font-weight: 700; color: var(--color-text-muted); background: var(--color-bg); white-space: nowrap; }
.table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table .nowrap { white-space: nowrap; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table tr.is-click { cursor: pointer; }
.table tr.is-click:hover td { background: var(--color-bg); }
.table tr.is-warn td { background: #fff5e0; }
.table tr.is-muted td { color: var(--color-text-mask); }

/* 集計チップ */
.stats { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-md); }
.stat {
  flex: 1 1 120px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
}
.stat-label { font-size: 12px; color: var(--color-text-muted); }
.stat-value { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* タブ（運営画面） */
.tabs { display: flex; gap: var(--space-xs); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-lg); overflow-x: auto; }
.tab {
  background: none; border: 0; border-bottom: 3px solid transparent;
  padding: var(--space-sm) var(--space-md);
  font: inherit; font-size: var(--font-size-sm); color: var(--color-text-muted);
  cursor: pointer; white-space: nowrap; min-height: var(--tap-target);
}
.tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 700; }

/* ツールバー */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; margin-bottom: var(--space-md); }
.toolbar .form-control { flex: 1 1 200px; margin: 0; }
.toolbar select.form-control { flex: 0 0 auto; }
.toolbar .btn, .toolbar .btn-secondary { flex: 0 0 auto; }

/* 準備中・空状態 */
.placeholder {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  color: var(--color-text-muted);
  text-align: center;
  font-size: var(--font-size-sm);
  background: rgba(255, 255, 255, 0.5);
}

/* モーダル（大きめ） */
.modal.modal-lg { max-width: 720px; }
.modal-title { font-family: var(--font-serif); font-size: var(--font-size-h2); font-weight: 700; margin-bottom: var(--space-md); }
.form-row { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.form-row .form-group { flex: 1 1 200px; }
textarea.form-control { min-height: 120px; resize: vertical; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.result-box { background: var(--color-bg); border-radius: var(--radius-md); padding: var(--space-md); font-size: var(--font-size-sm); white-space: pre-wrap; }
.mt-sm { margin-top: var(--space-sm); }
.text-danger { color: var(--color-error); }