/* グローバルスタイル */

/* ===== レイアウト ===== */
#app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 430px;
  margin: 0 auto;
  background-color: var(--color-bg);
}

.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* コンテンツ領域（ヘッダー分を上に、BottomNav と少しの余裕を下に確保）
   変更: BottomNav 高さ（56px）+ 余白（24px）= 80px を padding-bottom に */
.page--body {
  flex: 1;
  overflow-y: auto;
  padding-top: var(--header-height);
  padding-bottom: 80px;
  -webkit-overflow-scrolling: touch;
}

/* ===== アプリヘッダー ===== */
.app-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  height: var(--header-height);
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 var(--space-sm);
  z-index: 100;
}

/* ホームヘッダー */
.app-header-home {
  gap: 8px;
}

.app-header-home .header--logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.app-header-home .header--appname {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  flex: 1;
}

.app-header-home .header--person {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--color-primary-on);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.app-header-home .header--person .material-icons {
  font-size: 20px;
  color: var(--color-primary);
}

/* 標準ヘッダー（ページタイトル） */
.app-header-standard .header--title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  flex: 1;
}

.app-header-standard .header--action-text {
  font-size: 14px;
  color: var(--color-primary);
  cursor: pointer;
}

.app-header-standard .header--action-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.app-header-standard .header--action-btn .material-icons {
  font-size: 22px;
  color: var(--color-white);
}

/* 変更: Q2 メンバー画面「招待」ボタン（薄ピンクピル + person_add アイコン） */
.app-header-standard .header--invite-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  background: var(--color-primary-on);
  color: var(--color-primary);
  border-radius: 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.app-header-standard .header--invite-btn .material-icons {
  font-size: 16px;
  color: var(--color-primary);
}

/* 詳細ヘッダー（< タイトル 編集） */
.app-header-detail .header--back {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text);
  margin-right: 4px;
}

.app-header-detail .header--back .material-icons {
  font-size: 24px;
}

.app-header-detail .header--title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  flex: 1;
}

.app-header-detail .header--action-text {
  font-size: 14px;
  color: var(--color-primary);
  cursor: pointer;
}

/* 変更（E. シェアボタン）: detail ヘッダーのシェアアイコン
   - 色は --color-sub（控えめなサブ色）
   - 編集ボタンが隣にある時は 12px 離す */
.app-header-detail .header--share-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-sub);
}
.app-header-detail .header--share-btn .material-icons {
  font-size: 22px;
}
.app-header-detail .header--share-btn:active {
  opacity: 0.6;
}
.app-header-detail .header--share-btn + .header--action-text {
  margin-left: 12px;
}

/* フォームヘッダー（× タイトル ボタン） */
.app-header-form {
  justify-content: space-between;
}

.app-header-form .header--close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text);
}

.app-header-form .header--close .material-icons {
  font-size: 22px;
}

.app-header-form .header--title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  flex: 1;
  text-align: center;
}

.app-header-form .header--save-btn {
  padding: 6px 14px;
  border-radius: 20px;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* ===== ボトムナビゲーション ===== */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  height: var(--bottomnav-height);
  background-color: var(--color-white);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: flex-start;
  padding-top: 6px;
  z-index: 100;
}

.bottom-nav--tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  position: relative;
  color: var(--color-sub);
  padding: 2px 0;
}

.bottom-nav--tab.is-active {
  color: var(--color-primary);
}

.bottom-nav--tab .material-icons {
  font-size: 22px; /* 変更: Figma仕様（10.3 BottomNav 22px）に合わせて 24px → 22px */
}

.bottom-nav--label {
  font-size: 10px;
  font-weight: 500;
}

.bottom-nav--indicator {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 47px; /* 変更: Figma仕様（10.7 BottomNav 47×2px）に合わせて 36px → 47px */
  height: 2px;
  background-color: var(--color-primary);
  border-radius: 3px; /* 変更: Figma仕様（10.7 cornerRadius 3px）に合わせて統一 */
}

/* ===== カレンダー ===== */
/* 変更: Q1-B Figma仕様に合わせて白背景 → ベース色 #FBF7F9 */
.calendar {
  background: var(--color-bg);
}

.calendar--month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--space-sm);
}

.calendar--month-nav .material-icons {
  font-size: 22px;
  color: var(--color-sub);
  cursor: pointer;
}

.calendar--month-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}

.calendar--weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--color-border);
}

.calendar--weekday {
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-sub);
  padding: 5px 0;
}

.calendar--grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar--cell {
  border-bottom: 1px solid var(--color-border);
  height: 90px;
  padding: 8px 0 4px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}

.calendar--day-num {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  color: var(--color-text);
}

.calendar--cell.is-other-month .calendar--day-num {
  color: var(--color-border);
}

.calendar--cell.is-saturday .calendar--day-num {
  color: #6699cc;
}

.calendar--cell.is-sunday .calendar--day-num,
.calendar--cell.is-holiday .calendar--day-num {
  color: #cc6666;
}

/* 変更: 土日・祝日と is-today が重なった時に白文字を優先する（後置でCSS優先度を上げる） */
.calendar--cell.is-today .calendar--day-num {
  background-color: var(--color-primary);
  color: var(--color-white);
  font-weight: 700;
}

/* 変更: 祝日名表示（イベントテキストと同じスタイルだが、色は読みやすい紫系に） */
.calendar--holiday-text {
  font-size: 9px;
  color: var(--color-sub);
  line-height: 1.2;
  padding: 0 2px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}

.calendar--event-text {
  font-size: 10px;
  color: var(--color-primary);
  line-height: 1.2;
  padding: 0 2px;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 100%;
}

/* ===== ページタブ（アンダーライン） ===== */
.page-tabs {
  display: flex;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.page-tab {
  flex: 1;
  text-align: center;
  height: 44px; /* 変更: Figma仕様（10.7 FilterTabs 高さ44px）に合わせて固定高を明示 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--color-sub);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-weight: 400;
}

.page-tab.is-active {
  color: var(--color-primary);
  font-weight: 700;
  border-bottom-color: var(--color-primary);
}

/* ===== スケジュールリストカード ===== */
.schedule-list-card {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding: 14px var(--space-sm) 14px 20px;
  position: relative;
  cursor: pointer;
}

/* 変更: 左端アクセントラインの高さを「カード高さ - 24px」に変更（カード内容に追従） */
.schedule-list-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: calc(100% - 24px);
  border-radius: 2px;
}

.schedule-list-card.status-upcoming::before { background: var(--color-success); }
.schedule-list-card.status-done::before     { background: var(--color-sub); }
.schedule-list-card.status-draft::before    { background: var(--color-warning); }

.schedule-list-card--header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.schedule-list-card--title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}

.schedule-list-card--meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.schedule-list-card--meta-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--color-sub);
}

.schedule-list-card--meta-row .material-icons {
  font-size: 13px; /* 変更: Figma仕様（10.3 カード内情報アイコン 13px）に合わせて 14px → 13px */
}

.schedule-list-card--counts {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  font-size: 12px;
}

.schedule-list-card--count-attend  { color: var(--color-success); }
.schedule-list-card--count-absent  { color: var(--color-danger); }
.schedule-list-card--count-pending { color: var(--color-warning); }

/* ===== バッジ ===== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
}

.badge-upcoming { background: rgba(51,178,126,0.15);  color: var(--color-success); }
.badge-done     { background: rgba(154,141,163,0.15); color: var(--color-sub); }
.badge-draft    { background: rgba(216,153,65,0.15);  color: var(--color-warning); }
.badge-success  { background: rgba(51,178,126,0.15);  color: var(--color-success); }
.badge-danger   { background: rgba(214,80,80,0.15);   color: var(--color-danger); }
.badge-sub      { background: rgba(154,141,163,0.15); color: var(--color-sub); }
.badge-primary  { background: var(--color-primary-on); color: var(--color-primary); }
/* 変更: 未回答バッジ用（テキスト #D89941 / 背景 #D89941 15%） */
.badge-warning  { background: rgba(216,153,65,0.15);  color: var(--color-warning); }

/* ===== セクションヘッダー ===== */
/* 変更: Figma仕様に合わせて背景・罫線を除去。状態別の色は Modifier クラスで指定。
   変更（インラインスタイル整理）: 各 view で `style="margin-top:var(--space-xs)"` を直書きしていた
   セクション間隔を、padding-top を増やしてデフォルトで持たせる */
.section-header {
  padding: 16px var(--space-sm) 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-sub);
}

/* 変更: 出欠状況の状態別カラー（Q3 回答に基づく） */
.section-header.is-attend  { color: var(--color-success); } /* 参加中: #33B27E */
.section-header.is-absent  { color: var(--color-danger); }  /* 不参加: #D65050 */
.section-header.is-pending { color: var(--color-warning); } /* 未回答: #D89941 */

/* ===== メンバー行 ===== */
.member-row {
  display: flex;
  align-items: center;
  padding: 12px var(--space-sm);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  gap: 12px;
  cursor: pointer;
}

.member-row--avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary-on);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary);
  flex-shrink: 0;
}

.member-row--name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}

.member-row--right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.member-row--chevron {
  font-size: 18px;
  color: var(--color-border);
}

/* 変更（A. note UI）: メンバー行に note を表示する場合のレイアウト
   - 行の縦方向を上揃えにし、名前の下に note を表示する */
.member-row.has-note {
  align-items: flex-start;
  padding-top: 12px;
  padding-bottom: 12px;
}
.member-row--main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.member-row--note {
  font-size: 12px;
  color: var(--color-sub);
  line-height: 1.4;
  word-break: break-word;
}

/* ===== 検索バー ===== */
/* 変更: Q1-B ベース背景 #FBF7F9 になじませるため、白背景 → 透過に変更 */
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: var(--space-xs) var(--space-sm);
  padding: 10px var(--space-sm);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
}

.search-bar .material-icons {
  font-size: 18px;
  color: var(--color-sub);
}

.search-bar input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  color: var(--color-text);
  background: transparent;
  font-family: var(--font-base);
}

.search-bar input::placeholder {
  color: var(--color-sub);
}

/* ===== メンバー統計行 ===== */
.member-stats {
  display: flex;
  align-items: center;
  padding: 8px var(--space-sm);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  font-size: 12px;
  color: var(--color-sub);
  gap: 4px;
}

.member-stats span + span::before {
  content: ' | ';
  margin: 0 4px;
}

.member-stats .count-active   { color: var(--color-success); font-weight: 700; }
.member-stats .count-inactive { color: var(--color-danger);  font-weight: 700; }

/* ===== メンバー招待リンク ===== */
.invite-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px var(--space-sm);
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.invite-link .material-icons {
  font-size: 20px;
}

/* 変更（B. 受取済みチェック UI 修正2）: 表示専用バッジ（クリックは親 .member-row が受ける）
   - 未受取: グレー背景 + 「未受取」テキスト
   - 受取済み: 緑背景 + チェックアイコン + 「受取済」テキスト */
.payment-status {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  background: rgba(154, 141, 163, 0.15);
  color: var(--color-sub);
  user-select: none;
  pointer-events: none; /* クリックは親行で受けるため無効化 */
}
.payment-status.is-received {
  background: rgba(51, 178, 126, 0.15);
  color: var(--color-success);
}
.payment-status .material-icons {
  font-size: 13px;
}

/* 変更（B. 修正2）: 模合金画面のメンバー行
   次回親の行はクリック無効 */
.payment-member-row.is-disabled {
  cursor: default;
}
.payment-member-row:not(.is-disabled):active {
  background: rgba(0, 0, 0, 0.03);
}

/* ===== 模合金サマリーバー ===== */
.payment-stats-bar {
  background: var(--color-primary);
  display: flex;
}

.payment-stats-bar--item {
  flex: 1;
  padding: 12px 8px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.2);
}

.payment-stats-bar--item:last-child {
  border-right: none;
}

.payment-stats-bar--label {
  font-size: 10px;
  color: var(--color-primary-on);
  margin-bottom: 3px;
}

.payment-stats-bar--value {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-white);
}

/* ===== フォーム（リストスタイル） ===== */
.form-page {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background: var(--color-bg);
}

.form-page--body {
  flex: 1;
  overflow-y: auto;
  padding-top: var(--header-height);
  -webkit-overflow-scrolling: touch;
}

.form-section {
  background: var(--color-white);
  margin-top: var(--space-xs);
}

.form-list-item {
  display: flex;
  align-items: center;
  padding: 14px var(--space-sm);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  gap: 14px;
  cursor: pointer;
  min-height: 64px;
}

.form-list-item--icon {
  color: var(--color-primary);
  font-size: 22px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

/* 変更（インラインスタイル整理）: ゲストメンバー等のサブ色アイコン */
.form-list-item--icon.is-sub {
  color: var(--color-sub);
}

/* 変更（インラインスタイル整理）: メモ等の複数行入力用（縦方向の上揃え＋上余白） */
.form-list-item.is-multiline {
  align-items: flex-start;
  padding-top: 16px;
}

/* 変更（インラインスタイル整理）: textarea 用の追加スタイル
   変更: 入力量に応じて高さが自動的に伸びるよう field-sizing: content を追加
         （Chrome 123+ / Safari 17.4+ / Firefox 122+ で対応） */
.form-list-item--textarea {
  resize: none;
  line-height: 1.5;
  field-sizing: content;
  min-height: calc(1.5em * 3); /* rows="3" 相当の初期高さを保証 */
}

.form-list-item--body {
  flex: 1;
}

.form-list-item--label {
  font-size: 11px;
  color: var(--color-sub);
  margin-bottom: 3px;
}

.form-list-item--input {
  font-size: 14px;
  color: var(--color-text);
  border: none;
  outline: none;
  width: 100%;
  font-family: var(--font-base);
  background: transparent;
  padding: 0;
}

.form-list-item--input::placeholder {
  color: var(--color-border);
}

.form-list-item--chevron {
  font-size: 18px;
  color: var(--color-border);
}

/* 変更（Phase 3 修正）: ゲスト入力欄の削除アイコン */
.form-list-item--delete {
  font-size: 20px;
  color: var(--color-sub);
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}
.form-list-item--delete:active {
  opacity: 0.6;
}

.form-section-label {
  padding: 12px var(--space-sm) 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-sub);
  background: var(--color-bg);
}

.form-add-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px var(--space-sm);
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: var(--color-white);
}

.form-add-link .material-icons {
  font-size: 20px;
}

/* 変更（インラインスタイル整理）: フォーム下部の登録ボタンエリア */
.form-page--actions {
  padding: var(--space-sm);
}

/* 変更（インラインスタイル整理）: フォーム最下部の余白（スクロール終端の確保） */
.form-page--bottom-spacer {
  height: 32px;
}

.form-delete-row {
  /* 変更: Figma仕様（10.7 削除・離脱ボタン 高さ56px）に合わせて固定高を明示 */
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  color: var(--color-danger);
  font-size: 14px;
  cursor: pointer;
}

/* ===== 共通: 空状態メッセージ ===== */
/* 変更（インラインスタイル整理）: SchedulesView / ScheduleDetailView の
   「○○がありません」用に直書きされていたスタイルを共通クラス化 */
.empty-state {
  text-align: center;
  padding: 48px var(--space-sm);
  color: var(--color-sub);
  font-size: 14px;
}

/* ===== スケジュール詳細 ===== */
/* 変更（インラインスタイル整理）: 詳細画面の日時情報ブロック用ラッパー */
.detail-info-block {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding: 12px 0;
}

.detail-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px var(--space-sm);
  font-size: 13px;
  color: var(--color-sub);
}

.detail-info-row .material-icons {
  font-size: 16px;
  color: var(--color-sub);
}

.detail-info-row span {
  color: var(--color-text);
}

/* 変更（Phase 3 修正）: 「Google マップで開く」テキストリンク
   保存ボタンと同じトーン（map アイコン + ピンク文字 14px Bold、右寄せ） */
.detail-map-link-row {
  display: flex;
  justify-content: flex-end;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding: 4px var(--space-sm) 8px;
}
.detail-map-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 4px 8px;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-base);
  cursor: pointer;
}
.detail-map-link .material-icons {
  font-size: 18px;
}
.detail-map-link:active {
  opacity: 0.7;
}

/* 変更: Q1-B Figma仕様に合わせて白背景・罫線除去 */
.detail-summary {
  display: flex;
  background: transparent;
}

.detail-summary--item {
  flex: 1;
  padding: 16px 8px;
  text-align: center;
}

.detail-summary--num {
  font-size: 22px; /* 変更: Figma仕様（10.2 出欠サマリー数値 22px Bold）に合わせて 24px → 22px */
  font-weight: 700;
  margin-bottom: 4px;
}

.detail-summary--label {
  font-size: 12px;
  color: var(--color-sub);
}

.detail-summary--attend  .detail-summary--num { color: var(--color-success); }
.detail-summary--absent  .detail-summary--num { color: var(--color-danger); }
.detail-summary--pending .detail-summary--num { color: var(--color-sub); }

/* 変更（A. note UI）: 自分の出欠回答セクション全体をラップ */
.attend-form {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* 変更（A. note UI）: 出欠コメント textarea（自動拡張） */
.attend-form--note {
  width: 100%;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-white);
  outline: none;
  resize: none;
  line-height: 1.5;
  field-sizing: content;
  min-height: calc(1.5em * 2 + 20px);
}
.attend-form--note::placeholder {
  color: var(--color-sub);
}
.attend-form--note:focus {
  border-color: var(--color-primary);
}

/* 変更（A. note UI）: 保存ボタンの右寄せコンテナ */
.attend-form--actions {
  display: flex;
  justify-content: flex-end;
}

/* 変更（A. note UI 修正）: 保存ボタンをテキストリンク風に
   ヘッダー右上の「編集」と同じトーンで、save アイコン + ピンク文字 */
.attend-form--save-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 4px 8px;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-base);
  cursor: pointer;
}
.attend-form--save-btn .material-icons {
  font-size: 18px;
}
.attend-form--save-btn:active {
  opacity: 0.7;
}

/* 出欠ボタン（詳細画面） */
.attend-btn-row {
  display: flex;
  gap: var(--space-xs);
  /* 変更（A. note UI）: .attend-form でまとめてラップするので個別の padding/border を解除 */
  padding: 0;
}

.attend-pill {
  flex: 1;
  padding: 10px;
  border-radius: 6px; /* 変更: Figma仕様に合わせて 14px → 6px（角丸を控えめに） */
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  border: 1.5px solid var(--color-border);
  color: var(--color-sub);
  cursor: pointer;
  transition: all 0.15s;
}

.attend-pill.is-attend {
  background: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-white);
}

.attend-pill.is-absent {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-white);
}

/* 模合金行（詳細） */
/* 変更: Q1-B Figma仕様に合わせて白背景・罫線除去 */
.detail-payment-row {
  display: flex;
  background: transparent;
}

.detail-payment-row--item {
  flex: 1;
  padding: 14px var(--space-sm);
}

.detail-payment-row--label {
  font-size: 11px;
  color: var(--color-sub);
  margin-bottom: 4px;
}

.detail-payment-row--value {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}

/* メモ行 */
.detail-memo-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px var(--space-sm);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.detail-memo-row .material-icons {
  font-size: 20px;
  color: var(--color-sub);
  margin-top: 2px;
}

.detail-memo-row--text {
  flex: 1;
  font-size: 13px;
  color: var(--color-sub);
}

/* ===== マイページ ===== */
.mypage-profile-block {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px var(--space-sm);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.mypage-profile-block--avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-primary-on);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
  flex-shrink: 0;
}

.mypage-profile-block--name {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}

.mypage-profile-block--status {
  font-size: 12px;
  color: var(--color-success);
  margin-top: 2px;
}

.mypage-profile-block--status.is-inactive {
  color: var(--color-sub);
}

/* 参加ステータストグル行 */
.mypage-toggle-row {
  display: flex;
  align-items: center;
  padding: 16px var(--space-sm);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  gap: 12px;
}

.mypage-toggle-row--body {
  flex: 1;
}

.mypage-toggle-row--title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 3px;
}

.mypage-toggle-row--desc {
  font-size: 12px;
  color: var(--color-sub);
}

/* トグルスイッチ */
.toggle {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle--slider {
  position: absolute;
  inset: 0;
  background-color: var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color 0.2s;
}

.toggle--slider::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  left: 3px;
  top: 3px;
  background-color: var(--color-white);
  border-radius: 50%;
  transition: transform 0.2s;
}

.toggle input:checked + .toggle--slider {
  background-color: var(--color-success);
}

.toggle input:checked + .toggle--slider::before {
  transform: translateX(20px);
}

/* 出欠の回答カード（マイページ） */
/* 変更（Phase 3 修正）: カード全体をクリック可能にした（cursor pointer） */
.attend-answer-card {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding: 14px var(--space-sm) 14px 20px;
  position: relative;
  cursor: pointer;
}

/* 変更: 左端アクセントラインを schedule-list-card と同じ仕様に統一
   （中央寄せ・高さ calc(100% - 24px)・角丸 2px） */
.attend-answer-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: calc(100% - 24px);
  border-radius: 2px;
  background: var(--color-success);
}

.attend-answer-card--header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.attend-answer-card--title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}

.attend-answer-card--meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 10px;
}

.attend-answer-card--meta-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--color-sub);
}

.attend-answer-card--meta-row .material-icons {
  font-size: 13px; /* 変更: Figma仕様（10.3 カード内情報アイコン 13px）に合わせて 14px → 13px */
}

.attend-answer-card--btns {
  display: flex;
  gap: 8px;
}

.attend-answer-card--btns .attend-pill {
  font-size: 13px;
  padding: 8px;
}

/* 模合から抜けるボタン */
.leave-row {
  /* 変更: Figma仕様（10.7 削除・離脱ボタン 高さ56px）に合わせて固定高を明示 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 56px;
  background: var(--color-white);
  color: var(--color-danger);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.leave-row .material-icons {
  font-size: 18px;
}

/* ===== ログイン画面 ===== */
.login-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg) var(--space-md);
  gap: var(--space-md);
}

.login-page--logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.login-page--logomark {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.login-page--app-name {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-primary);
}

.login-page--sub {
  font-size: 13px;
  color: var(--color-sub);
  text-align: center;
}

.login-page--actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* 変更（インラインスタイル整理）: ログイン画面下部の注釈テキスト */
.login-page--note {
  font-size: 11px;
  color: var(--color-sub);
  text-align: center;
}

/* ===== ボタン ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 14px var(--space-sm);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
  width: 100%;
  font-family: var(--font-base);
}

.btn:active { opacity: 0.8; }

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
}

.btn-secondary {
  background-color: var(--color-white);
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}

.btn-danger {
  background-color: transparent;
  color: var(--color-danger);
  border: none;
}

.btn .material-icons { font-size: 18px; }

/* 変更（インラインスタイル整理）: ログイン画面の不参加メンバーボタン用（控えめ表示） */
.btn.is-faded {
  opacity: 0.7;
}

/* 変更（A. note UI）: 小サイズボタン用モディファイア（出欠コメント保存ボタン等） */
.btn.is-sm {
  width: auto;
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 6px;
}

/* FAB */
.fab {
  position: fixed;
  bottom: calc(var(--bottomnav-height) + 16px);
  right: calc((100vw - min(100vw, 430px)) / 2 + 16px);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 90;
  /* 変更: 規約 10.6（シャドウ不使用）・5.5（禁止事項）に合わせて box-shadow を削除 */
}

.fab .material-icons { font-size: 26px; }

/* ===== モーダル（共通） ===== */
/* 変更（C. 模合金額編集モーダル）: 中央モーダル用の共通クラス
   将来的に他画面でも流用できるよう汎用名で定義 */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: var(--space-md);
}
.modal-dialog {
  background: var(--color-white);
  border-radius: 12px;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-dialog--header {
  padding: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}
.modal-dialog--title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}
.modal-dialog--body {
  padding: var(--space-md) var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.modal-dialog--label {
  font-size: 11px;
  color: var(--color-sub);
}
.modal-dialog--input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  font-size: 16px;
  font-family: var(--font-base);
  color: var(--color-text);
  outline: none;
  background: var(--color-white);
}
.modal-dialog--input:focus {
  border-color: var(--color-primary);
}
.modal-dialog--note {
  font-size: 12px;
  color: var(--color-sub);
  margin-top: 2px;
}
.modal-dialog--footer {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-sm);
  border-top: 1px solid var(--color-border);
}
.modal-dialog--footer .btn {
  flex: 1;
  padding: 10px var(--space-sm);
}

/* ===== ユーティリティ ===== */
.u-none { display: none; }

@media (min-width: 768px) {
  .u-md-none  { display: none; }
  .u-md-block { display: block; }
}