/* 勉強会サイト_統合モックアップ.html の <style> をそのまま流用。
   実装が進む過程で必要なクラスを追記していく。 */

/* ===== 配色設定(ここだけ書き換えれば全体に反映される) =====
   ブランドの基本色。状態を表す色(成立/不成立=緑、管理者=金、アピール=ピンク、
   エラー=赤 など)はこの下の各パーツの中に直接書いてあり、ここには含めていない。 */
:root {
  --color-bg: #f2f7f5;           /* ページ全体の背景 */
  --color-card: #fffffe;         /* カード・吹き出しなど白背景の部分 */
  --color-headline: #00473e;     /* 見出し・強調文字・ヘッダーナビの背景 */
  --color-paragraph: #475d5b;    /* 本文の文字色 */
  --color-stroke: #00332c;       /* 枠線・区切り線 */
  --color-button: #faae2b;       /* ボタンの背景 */
  --color-button-text: #00473e;  /* ボタンの文字色 */
  --color-highlight: #faae2b;    /* タブの下線などのアクセント */
  --color-headline-soft: #e6edec; /* 見出し色を薄くした色。タグの背景など */
  --color-headline-muted: #a8c9c0; /* ヘッダーナビの非選択タブの文字色 */
}

* { box-sizing: border-box; }
body { font-family: "Hiragino Sans", "Meiryo", sans-serif; background: var(--color-bg); margin: 0; padding: 0; color: var(--color-paragraph); }
h1 { font-size: 17px; color: var(--color-headline); margin: 0 0 4px; }
h2 { font-size: 15px; color: var(--color-headline); margin: 0 0 10px; }

/* ヘッダーナビ(モックアップのタブバーをサイト共通ヘッダーとして流用) */
.tabbar { position: sticky; top: 0; z-index: 10; display:flex; overflow-x:auto; background: var(--color-headline); padding: 0 4px; align-items:center; }
.tabbar a, .tabbar button { flex: 0 0 auto; background: none; border: none; color: var(--color-headline-muted); font-size: 12px; padding: 12px 10px; cursor: pointer; border-bottom: 3px solid transparent; white-space:nowrap; text-decoration:none; }
.tabbar a.active, .tabbar button.active { color: var(--color-card); border-bottom-color: var(--color-highlight); font-weight: bold; }
.tabbar .spacer { flex: 1 1 auto; }
.screen { padding: 16px; max-width: 480px; margin: 0 auto; }
.screen-label { font-size: 11px; color:#a0aec0; margin-bottom: 8px; letter-spacing: 0.05em; }

/* 共通パーツ */
.card { background: var(--color-card); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.06); border-left: 5px solid var(--color-headline); }
.card.full { border-left-color: #a0aec0; opacity: 0.6; }
.card.progress { border-left-color: #38a169; }
.card.dummy { border-left-color: #d69e2e; border: 1px dashed #d69e2e; }
.card-top { display: flex; justify-content: space-between; align-items: center; }
.badge { font-size: 11px; padding: 3px 8px; border-radius: 12px; font-weight: bold; }
.badge.open { background: #c6f6d5; color: #22543d; }
.badge.almost { background: #feebc8; color: #7b341e; }
.badge.full { background: #e2e8f0; color: #4a5568; }
.badge.progress { background: #c6f6d5; color: #22543d; }
.badge.dummy { background: #fefcbf; color: #744210; }
.subj-tags { margin: 8px 0 4px; }
.tag { display: inline-block; background: var(--color-headline-soft); color: var(--color-headline); font-size: 12px; padding: 2px 8px; border-radius: 10px; margin: 2px 3px 0 0; }
.meta { font-size: 12px; color: #718096; margin-top: 6px; line-height: 1.6; }
.meta strong { color: var(--color-headline); }
.members { font-size: 13px; margin-top: 8px; color: var(--color-headline); font-weight: bold; }
.dummy-note { font-size: 11px; color:#975a16; margin-top:8px; background:#fffaf0; padding:6px 8px; border-radius:6px; }
.comment { font-size: 12px; color:#4a5568; margin-top:8px; background:#f7fafc; padding:7px 9px; border-radius:6px; border-left:3px solid #cbd5e0; }
.badge.consult { background:#e9d8fd; color:#553c9a; margin-left:6px; }
.appeal-card { background: var(--color-card); border-radius:10px; padding:14px 16px; margin-bottom:12px; box-shadow:0 2px 6px rgba(0,0,0,0.06); border-left:5px solid #d53f8c; }
.invite-box { background:#fdf2f8; border-radius:10px; padding:12px; margin-top:14px; text-align:center; }
.invite-box .desc { font-size:12px; color:#97266d; margin-bottom:8px; }
button.invite { margin-top: 0; width: 100%; background: #d53f8c; color: #fff; border: none; padding: 12px; border-radius: 8px; font-size: 14px; }
.card-wrap { position: relative; }
.stamp { position: absolute; top: 10px; right: 14px; border: 3px solid #c53030; color: #c53030; font-weight: bold; font-size: 13px; padding: 3px 10px; border-radius: 6px; transform: rotate(-12deg); opacity: 0.75; background: rgba(255,255,255,0.55); letter-spacing: 0.1em; pointer-events: none; }

fieldset { border: 1px solid var(--color-stroke); border-radius: 8px; margin: 14px 0; padding: 14px; background: var(--color-card); }
legend { font-weight: bold; color: var(--color-headline); padding: 0 8px; font-size: 14px; }
label { display:block; font-size: 13px; margin: 6px 0 4px; color: var(--color-paragraph); }
input[type=text], input[type=email], input[type=password], input[type=date], textarea, select { width: 100%; padding: 8px; border: 1px solid var(--color-stroke); border-radius: 6px; font-size: 14px; }
textarea { resize: vertical; min-height: 60px; }
.radio-row label { display:inline-block; font-weight: normal; margin-right: 14px; }
.note { font-size: 12px; color: #718096; margin-top: 4px; }
button.primary, input[type=submit].primary { margin-top: 10px; width: 100%; background: var(--color-button); color: var(--color-button-text); border: none; padding: 14px; border-radius: 8px; font-size: 15px; cursor:pointer; }
button.secondary { margin-top: 8px; width: 100%; background: var(--color-card); color: var(--color-headline); border: 1px solid var(--color-stroke); padding: 12px; border-radius: 8px; font-size: 14px; cursor:pointer; }
button:disabled { opacity:0.5; cursor:not-allowed; }

/* 掲示板 */
.board-meta { font-size:12px; color:#718096; margin-bottom:10px; }
.msg { background: var(--color-card); border-radius:10px; padding:10px 12px; margin-bottom:8px; box-shadow:0 1px 4px rgba(0,0,0,0.05); }
.msg .who { font-size:12px; font-weight:bold; color: var(--color-headline); }
.msg .status-tag { font-size:10px; font-weight:normal; color:#fff; background:#a0aec0; border-radius:8px; padding:1px 7px; margin-left:6px; }
.msg .status-tag.formal { background:#38a169; }
.msg .body { font-size:13px; margin-top:4px; line-height:1.6; white-space:pre-line; }
.msg .time { font-size:10px; color:#a0aec0; margin-top:4px; }
.msg.admin { background:#fffaf0; border: 2px solid #d69e2e; }
.msg.admin .who { color:#975a16; }
.msg.system { background:#f0f4f8; text-align:center; font-size:12px; color:#4a5568; padding:8px; box-shadow:none; }
.msg.reject { background:#fff5f5; border:1px solid #feb2b2; }
.msg.reject .who { color:#c53030; }
.msg-input { display:flex; gap:6px; margin-top:10px; }
.msg-input input { flex:1; }
.msg-input button { background: var(--color-button); color: var(--color-button-text); border:none; border-radius:6px; padding:0 14px; font-size:13px; cursor:pointer; }
.apply-box { background: var(--color-headline-soft); border-radius:10px; padding:12px; margin-top:14px; text-align:center; }
.apply-box .desc { font-size:12px; color: var(--color-headline); margin-bottom:8px; }

/* メール */
.mail { background: var(--color-card); border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.06); margin-bottom:16px; overflow:hidden; }
.mail-head { background: var(--color-headline-soft); padding:10px 14px; font-size:12px; color: var(--color-paragraph); }
.mail-head .subject { font-size:14px; font-weight:bold; color: var(--color-headline); margin-bottom:4px; }
.mail-body { padding:14px; font-size:13px; line-height:1.8; color: var(--color-paragraph); white-space:pre-line; }
.mail-label { font-size:12px; font-weight:bold; color: var(--color-headline); margin:18px 0 6px; }
.mail-label:first-child { margin-top:0; }

/* 管理者 */
.admin-toggle { position:fixed; bottom:14px; right:14px; background: var(--color-button); color: var(--color-button-text); border:none; border-radius:20px; padding:10px 16px; font-size:12px; box-shadow:0 2px 8px rgba(0,0,0,0.2); z-index:20; text-decoration:none; }

.slot-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:6px; margin-top:6px; }
.slot { border:1px solid var(--color-stroke); border-radius:6px; text-align:center; padding:8px 2px; font-size:12px; cursor:pointer; }
.slot.selected { background: var(--color-button); color: var(--color-button-text); border-color: var(--color-button); }
.applicant-list { margin-top: 6px; }
.applicant { border-bottom: 1px solid #edf2f7; padding: 8px 0; font-size: 13px; }
.applicant:last-child { border-bottom: none; }
.applicant .name { font-weight: bold; color: var(--color-headline); }
.applicant .sub { color:#718096; font-size:12px; margin-top:2px; }

/* 実装で追加したパーツ */
.flash { padding:10px 14px; border-radius:8px; font-size:13px; margin-bottom:12px; }
.flash.error { background:#fff5f5; color:#c53030; border:1px solid #feb2b2; }
.flash.success { background:#f0fff4; color:#22543d; border:1px solid #9ae6b4; }
.form-error { font-size:12px; color:#c53030; margin-top:2px; }
.avatar { width:28px; height:28px; border-radius:50%; vertical-align:middle; margin-right:6px; object-fit:cover; }