/* ===== Working baseline (before last polish) ===== */
/* パステル基調 + 安全ガード + 期日ハイライト + DB隠し */

:root{
  --lm-bg:#fafbff;
  --lm-panel:#ffffff;
  --lm-border:#e5e7eb;
  --lm-text:#111827;
  --lm-muted:#6b7280;
  --lm-link:#2563eb;
  --lm-link-weak:#93c5fd;
  --lm-accent:#e0f2fe;
  --lm-shadow:0 8px 20px rgba(2,32,71,.06);
}

html,body{background:var(--lm-bg); color:var(--lm-text); margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP",sans-serif; line-height:1.6;}
main.container{max-width:1000px;margin:16px auto;padding:0 12px;}
h1{font-size:1.3rem;margin:.6rem 0 .8rem;}
h2{font-size:1.1rem;margin:.8rem 0 .6rem;}
.muted{color:var(--lm-muted);}

/* パネル/カード */
.card,.panel{
  background:var(--lm-panel);
  border:1px solid var(--lm-border);
  border-radius:12px;
  padding:12px;
  box-shadow:var(--lm-shadow);
}

/* リンク/ピル */
a{color:var(--lm-link);}
.pill{
  display:inline-block; padding:6px 12px; border:1px solid var(--lm-border);
  border-radius:999px; text-decoration:none; color:var(--lm-link);
}
.pill:hover{background:var(--lm-accent);}
.pill.active{background:var(--lm-accent); border-color:var(--lm-link-weak);}

/* フォーム */
input[type=text],input[type=email],input[type=password],input[type=date],select{
  background:#fff; border:1px solid var(--lm-border); border-radius:10px; padding:8px 10px; outline:none;
}
button,.btn{
  background:#fff; border:1px solid var(--lm-border); border-radius:10px; padding:8px 12px; cursor:pointer; text-decoration:none; color:#111;
}
button:hover,.btn:hover{background:#f9fbff}

/* テーブル */
table{border-collapse:collapse;width:100%;background:#fff;border-radius:12px;overflow:hidden;}
th,td{border:1px solid var(--lm-border);padding:8px;text-align:left;}
th{background:var(--lm-accent);}

/* 期日ハイライト */
tr.is-overdue td{background:#fff5f5;}  /* 期限切れ（未完） */
tr.is-today   td{background:#fffbea;}  /* 今日（未完） */

/* バッジ */
.badge{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid #e5e7eb;font-size:.85em;line-height:1.6;}
.badge-danger{background:#fee2e2;border-color:#fecaca;color:#7f1d1d;}
.badge-warn{background:#fef3c7;border-color:#fde68a;color:#7a5200;}
.badge-muted{background:#f1f5f9;border-color:#e2e8f0;color:#475569;}

/* ヘッダー */
header.site{border-bottom:1px solid #e5e7eb;background:#fff;position:sticky;top:0;z-index:50;}
header .wrap{max-width:1000px;margin:0 auto;padding:10px 12px;display:flex;gap:12px;align-items:center;justify-content:space-between;}
header .brand a{font-weight:700;text-decoration:none;color:#111}
header nav a{margin-right:10px;text-decoration:none;color:var(--lm-link);border:1px solid var(--lm-border);padding:4px 10px;border-radius:999px;}
header nav a:last-child{margin-right:0}

/* —— Safety guards（フォームが消える事故防止） —— */
input[type="hidden"]{display:none !important;}
form{display:block !important; visibility:visible !important; opacity:1 !important;}
form *{pointer-events:auto !important;}
button, input[type=submit], input[type=button]{display:inline-block !important;}

/* ヘッダーの DB リンクを非表示 */
header a[href*="?r=/db_check"]{display:none !important; visibility:hidden !important;}

/* モバイル微調整 */
@media(max-width:640px){
  main.container{padding:0 10px;}
  th,td{padding:7px;}
  button,.btn,.pill{padding:7px 10px;}
}
/* ===== Mobile optimization (additive) ===== */

/* 1) タップしやすい高さ・文字サイズ（モバイルのみ強化） */
@media (max-width: 640px){
  :root{ --tap:44px; }
  input[type=text], input[type=email], input[type=password], input[type=date], select{
    min-height: var(--tap);
    font-size: 16px; /* iOSズーム抑止 */
  }
  button, .btn, .pill{
    min-height: var(--tap);
    font-size: 16px;
  }
}

/* 2) フィルタバーとフォームを気持ちよく縦積み */
@media (max-width: 640px){
  .card form{ display:flex; flex-wrap:wrap; gap:10px; }
  .card form label{ flex: 1 1 100%; }
  .card form input[type=text],
  .card form select,
  .card form input[type=date]{ width:100%; }
  .card form button,
  .card form .pill{ flex: 0 0 auto; }
}

/* 3) テーブルは横スクロール許容で崩れ防止＋指で掴みやすく */
@media (max-width: 640px){
  table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  th,td{ padding:10px; }
}

/* 4) アクション密集対策（ボタン間に余白） */
@media (max-width: 640px){
  td > div[style*="display:flex"]{ gap:10px !important; }
}

/* 5) 追加ボタンの“簡易固定”（狭い画面で右下に浮かせる） */
@media (max-width: 640px){
  /* memos の追加フォームの送信ボタンを右下に固定（邪魔ならこのブロックを削除） */
  form[action*="?r=/memos"][method="post"] button[type=submit]{
    position: sticky; /* iOSでも自然に機能 */
    bottom: 10px;
    z-index: 20;
  }
}

/* 6) ヘッダー：狭い時は右上ユーザ文言を短縮/折返し */
@media (max-width: 380px){
  header .user{ display:none; }  /* 文字回り込み対策（必要時のみ非表示） */
}

/* 7) 期日バッジの押しやすさ＋改行耐性 */
@media (max-width: 640px){
  .badge{ padding:4px 10px; line-height:1.7; white-space:nowrap; }
}

/* 8) ナビの並びを詰めすぎない */
@media (max-width: 640px){
  .nav{ gap:10px; }
  .nav .pill{ flex: 0 0 auto; }
}

/* 9) 「DB」リンクは引き続き非表示（安全維持） */
header a[href*="?r=/db_check"]{ display:none !important; visibility:hidden !important; }
/* ===== hotfix: table rendering & light polish ===== */

/* 1) モバイルの table を標準レイアウトに戻す（前の display:block を打ち消す） */
@media (max-width: 640px){
  table{ display: table !important; overflow: visible !important; white-space: normal !important; }
}

/* 2) 見た目の軽い磨き（既存テーマを保持しつつ今っぽく） */
table tr:hover td { background: #f6faff; }                 /* 行ホバー */
th{ background: linear-gradient(180deg,#eaf6ff,#e1f0ff); } /* 見出しを淡いグラデに */
button,.btn,.pill{
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
button:hover,.btn:hover,.pill:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(2,32,71,.08);
}
.pill.active{
  box-shadow: inset 0 0 0 1px var(--lm-link-weak), 0 6px 14px rgba(2,32,71,.06);
}

/* 3) バッジの可読性を少しUP */
.badge{ font-weight: 600; letter-spacing: .01em; }

/* 4) 念押し：ヘッダーのDBリンクは非表示のまま */
header a[href*="?r=/db_check"]{ display:none !important; visibility:hidden !important; }
/* ===== Header visual enhancement ===== */
header.site{
  background: linear-gradient(90deg, #dbeafe 0%, #e0f2fe 100%);
  border-bottom: 1px solid #bfdbfe;
  box-shadow: 0 2px 6px rgba(2, 32, 71, 0.05);
}
header .brand a{
  color: #1e3a8a;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
header nav a{
  background: rgba(255,255,255,0.6);
  border: 1px solid #c7d2fe;
  color: #1e3a8a;
  transition: background 0.2s, transform 0.1s;
}
header nav a:hover{
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(2,32,71,0.1);
}

/* ログインユーザー表示 */
header .user{
  color:#1e3a8a;
  font-weight:600;
}
/* ===== Compact view for better overview ===== */

/* 1) ベースフォントを全体的に少し縮小 */
html, body {
  font-size: 14px;
  line-height: 1.5;
}

/* 2) 見出しも相対的に小さめに */
h1 { font-size: 1.15rem; margin: 0.6rem 0; }
h2 { font-size: 1.0rem; margin: 0.5rem 0; }

/* 3) テーブル行の高さとセル余白を詰める */
th, td {
  padding: 4px 6px;
  font-size: 0.9em;
  line-height: 1.4;
}

/* 4) 入力欄・ボタンもコンパクト化 */
input[type=text],
input[type=email],
input[type=password],
input[type=date],
select {
  font-size: 0.9em;
  padding: 4px 6px;
  border-radius: 6px;
}
button, .btn, .pill {
  font-size: 0.9em;
  padding: 5px 8px;
  border-radius: 6px;
  min-height: 30px;
}

/* 5) 見出し・ラベルなどの余白を軽めに */
label { font-size: 0.9em; }

/* 6) カードやパネルのパディングを減らす */
.card, .panel {
  padding: 10px;
  border-radius: 8px;
}

/* 7) モバイル画面ではさらに微調整 */
@media (max-width: 640px){
  html, body { font-size: 13px; }
  th, td { padding: 3px 5px; }
  button, .btn, .pill { padding: 4px 7px; }
}

/* 8) ヘッダー文字のサイズ調整 */
header .brand a {
  font-size: 1rem;
}
header nav a {
  font-size: 0.9rem;
  padding: 4px 8px;
}
header .user {
  font-size: 0.85rem;
}
/* ===== header & memo-add toggle enhancement ===== */

/* 1) ヘッダーを淡いブルー基調に */
header.site{
  background: linear-gradient(90deg,#dbeafe 0%,#e0f2fe 100%);
  border-bottom:1px solid #bfdbfe;
  box-shadow:0 2px 6px rgba(2,32,71,0.05);
}
header .wrap{
  max-width:1000px;
  margin:0 auto;
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
header .brand a{
  color:#1e3a8a;
  font-weight:800;
  font-size:1.4rem;
  letter-spacing:0.02em;
  text-decoration:none;
  text-shadow:0 1px 0 rgba(255,255,255,0.6);
  transition:transform 0.1s ease;
}
header .brand a:hover{
  transform:scale(1.05);
}
header .user{
  color:#1e3a8a;
  font-weight:600;
  font-size:0.9rem;
}

/* 2) メモ追加フォームをトグルで開く */
.memo-add-form{
  display:none;
  margin-top:8px;
  animation:fadeIn 0.3s ease forwards;
}
.memo-add-form.show{
  display:block;
}
@keyframes fadeIn{
  from{opacity:0;transform:translateY(-6px);}
  to{opacity:1;transform:translateY(0);}
}
.memo-add-toggle{
  display:inline-block;
  background:#1d4ed8;
  color:#fff;
  padding:8px 16px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  transition:background 0.2s,transform 0.1s;
}
.memo-add-toggle:hover{
  background:#2563eb;
  transform:translateY(-1px);
}
/* --- Header: 「タスクメモ」だけボタン風に --- */
header.site{ background:#ffffff; border-bottom:1px solid #e5e7eb; }
header .brand a{
  display:inline-block;
  background:#1d4ed8;     /* 紺寄りのブルー */
  color:#fff !important;
  padding:8px 14px;
  border-radius:999px;    /* 丸 pill */
  font-weight:800;
  letter-spacing:.02em;
  text-decoration:none;
  box-shadow:0 4px 12px rgba(29,78,216,.15);
  transition:transform .08s ease, box-shadow .15s ease, background .15s ease;
}
header .brand a:hover{ background:#2563eb; transform:translateY(-1px); box-shadow:0 6px 16px rgba(29,78,216,.22); }

/* --- メモ一覧を読みやすく --- */
.memo-view{ white-space:pre-wrap; line-height:1.5; }
td:nth-child(2){ max-width: 600px; }
@media (max-width:640px){ td:nth-child(2){ max-width: none; }}

/* --- 追加フォームはボタンで開く（最初は隠す） --- */
.memo-add-form{ display:none; margin-top:8px; }
.memo-add-form.show{ display:block; animation:fadeIn .18s ease-out both; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:translateY(0)} }
.memo-add-toggle{
  background:#1d4ed8; color:#fff; border:none; cursor:pointer;
  padding:8px 14px; border-radius:10px; font-weight:700;
}
.memo-add-toggle:hover{ background:#2563eb; }

/* 保守：DBリンクは引き続き非表示 */
header a[href*="?r=/db_check"]{ display:none !important; }
/* brand logo (header home button) */
header .brand .brand-logo{
  height: 36px; width: auto; display: block;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(2,32,71,.08);
  transition: transform .08s ease, box-shadow .15s ease;
}
header .brand a:hover .brand-logo{
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 4px 12px rgba(2,32,71,.15);
}
/* very small screens */
@media (max-width: 380px){
  header .brand .brand-logo{ height: 32px; }
}
/* visually hidden text for a11y */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* ===== Header fix & pills ===== */
header.site{
  background:#fff; border-bottom:1px solid #e5e7eb;
}
header .wrap{
  max-width:1000px; margin:0 auto;
  padding:10px 16px;
  display:flex; align-items:center; gap:14px; justify-content:space-between;
}
header .brand{ display:flex; align-items:center; gap:10px; }
header .brand .brand-logo{ height:36px; width:auto; border-radius:50%; display:block; }

/* ヘッダーナビ（家族 / 参加）を枠付き角丸に */
header nav{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
header nav a{
  display:inline-block; padding:6px 12px;
  background:#fff; border:1px solid #c7d2fe; color:#1e3a8a;
  border-radius:12px; text-decoration:none;
  transition:background .15s, box-shadow .15s, transform .08s;
}
header nav a:hover{ background:#eef2ff; transform:translateY(-1px); box-shadow:0 2px 8px rgba(2,32,71,.08); }

/* ユーザー部：ようこそを無くし、名前のみ＋下段にログアウト */
header .user{
  text-align:right; line-height:1.3;
}
header .user .user-name{
  font-weight:700; color:#1e3a8a;
}
header .user .logout{
  display:inline-block; margin-top:4px;
  color:#1d4ed8; text-decoration:underline;
  font-size:.92em;
}

/* 極小幅の崩れ防止 */
@media (max-width: 420px){
  header .wrap{ gap:10px; }
  header .brand .brand-logo{ height:32px; }
  header nav a{ padding:5px 10px; }
  header .user .logout{ font-size:.9em; }
}

/* 既存仕様：DBリンクは見せない */
header a[href*="?r=/db_check"]{ display:none !important; visibility:hidden !important; }
/* ===== ログアウトを下段に分けて中央寄せ ===== */
header .user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.4;
}

header .user .user-name {
  font-weight: 700;
  color: #1e3a8a;
  margin-bottom: 2px;
}

header .user .logout {
  display: block;
  color: #1d4ed8;
  text-decoration: underline;
  font-size: 0.9em;
  margin-top: 2px;
}
/* メモ追加ボタン */
.memo-add-toggle{
  background:#3b82f6; color:#fff; border:none;
  padding:10px 18px; border-radius:999px;
  font-size:1rem; font-weight:700;
  cursor:pointer; transition:all .15s;
}
.memo-add-toggle:hover{
  background:#2563eb; transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(37,99,235,.25);
}

/* フォーム開閉時のアニメ */
.memo-add-form{
  display:none; opacity:0; transform:translateY(-5px);
  transition:opacity .2s, transform .2s;
}
.memo-add-form.show{
  display:flex; opacity:1; transform:translateY(0);
}
/* === Hotfix: 追加フォームと行内編集は初期非表示にする === */
#memoAddForm{ display:none !important; }           /* 初期は隠す */
#memoAddForm.show{ display:flex !important; }      /* ボタンで開いた時に出す */

/* 行内編集（閲覧→編集トグル用） */
tr[data-id] .memo-edit{ display:none !important; }
tr[data-id].editing .memo-edit{ display:block !important; }
tr[data-id].editing .memo-view{ display:none !important; }
/* 追加フォームはデフォルト非表示、showで表示（!importantで確実に） */
#memoAddForm{ display:none !important; }
#memoAddForm.show{ display:flex !important; }
/* summary をボタン風に */
details > summary.memo-add-toggle {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-block;
  background:#3b82f6; color:#fff;
  padding:10px 18px; border-radius:999px; font-weight:700;
  box-shadow:0 3px 10px rgba(59,130,246,.2);
  transition: background .15s, transform .08s, box-shadow .15s;
}
details[open] > summary.memo-add-toggle {
  background:#2563eb;
}
details > summary.memo-add-toggle:hover {
  transform: translateY(-1px);
  box-shadow:0 6px 16px rgba(37,99,235,.25);
}
/* デフォルトの三角を消す（Safari等） */
details > summary::-webkit-details-marker { display:none; }
/* ===== 2行表示のメモ一覧 ===== */
.memo-list{ list-style:none; padding:0; margin:12px 0; }
.memo-item{ border:1px solid var(--lm-border); background:#fff; border-radius:10px; padding:10px 12px; box-shadow:var(--lm-shadow); margin:10px 0; }
.memo-item.is-overdue{ background:#fff5f5; }
.memo-item.is-today{ background:#fffbea; }
.memo-item .mi-line1{ font-weight:600; white-space:pre-wrap; }
.memo-item .mi-line2{ display:flex; justify-content:space-between; gap:10px; margin-top:6px; align-items:center; }
.memo-item .mi-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.memo-item .state{ margin-left:8px; color:#475569; font-size:.9em; }
.memo-item.none{ text-align:center; color:#94a3b8; }

/* 編集フォーム（初期非表示はインラインで制御） */
.memo-edit form input[type=text], .memo-edit form input[type=date], .memo-edit form select{
  font-size:.95em; padding:4px 6px; border-radius:6px;
}

/* details/summary でJS無し確実開閉 */
details > summary.memo-add-toggle {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-block;
  background:#3b82f6; color:#fff;
  padding:10px 18px; border-radius:999px; font-weight:700;
  box-shadow:0 3px 10px rgba(59,130,246,.2);
  transition: background .15s, transform .08s, box-shadow .15s;
}
details[open] > summary.memo-add-toggle { background:#2563eb; }
details > summary.memo-add-toggle:hover { transform: translateY(-1px); box-shadow:0 6px 16px rgba(37,99,235,.25); }
details > summary::-webkit-details-marker { display:none; }

/* “フォーム常時表示”の安全ガードを無効化（このフォームだけ確実に隠す/出す） */
#memoAddForm{ display:none !important; }
details[open] #memoAddForm{ display:flex !important; }

/* 既存テーブルが残っていても邪魔しないように（新UI優先） */
table{ width:100%; }
@media (max-width:640px){
  .memo-item .mi-line2{ flex-direction:column; align-items:flex-start; gap:8px; }
  .memo-item .mi-actions{ width:100%; }
}
/* 担当者プルダウンの幅と見やすさ改善 */
.memo-edit select[name="assignee_id"],
.memo-add-form select[name="assignee_id"] {
  min-width: 160px;        /* ← 以前の倍に拡大 */
  font-size: 1.1em;
  padding: 6px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  appearance: auto;         /* 標準の下矢印も戻す */
}
.memo-edit select[name="assignee_id"]:focus,
.memo-add-form select[name="assignee_id"]:focus {
  outline: 2px solid #60a5fa;
  outline-offset: 1px;
}
/* 担当者プルダウン：縮まない＆大きく表示（デスクトップ） */
.memo-edit select[name="assignee_id"],
.memo-add-form select[name="assignee_id"]{
  flex: 0 0 auto !important;   /* ← 親flexに縮めさせない */
  min-width: 280px !important;  /* ご希望サイズ */
  font-size: 1.1em !important;
  line-height: 1.3;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  white-space: nowrap;          /* 省略記号や崩れを防止 */
  appearance: menulist;
  -webkit-appearance: menulist;
}

/* 入力群の並びも詰められすぎないように */
.memo-edit form.row,
.memo-add-form{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

/* モバイルは横幅100%にして見やすく */
@media (max-width: 640px){
  .memo-edit select[name="assignee_id"],
  .memo-add-form select[name="assignee_id"]{
    width: 100% !important;
    min-width: 0 !important;   /* 100%を優先 */
    font-size: 1.05em !important;
  }
  .memo-edit form.row input[type="text"],
  .memo-edit form.row input[type="date"],
  .memo-add-form input[type="text"],
  .memo-add-form input[type="date"]{
    width: 100%;
  }
}
/* === 担当者プルダウンを“絶対に”広く見せる & ずれ対策 === */

/* 編集フォームの行をしっかり折り返す */
.memo-edit form.row,
.memo-add-form {
  display: flex;
  flex-wrap: wrap;       /* ← 折り返しを許可 */
  gap: 8px;
  align-items: center;
}

/* 担当者プルダウン（デスクトップ） */
.memo-edit select[name="assignee_id"],
.memo-add-form select[name="assignee_id"]{
  flex: 1 0 280px !important;   /* ← 280pxから縮まないで成長可 */
  max-width: 100%;
  min-width: 280px !important;  /* 念押し */
  font-size: 1.05rem !important;/* 視認性UP（約16.8px）*/
  line-height: 1.3;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  white-space: nowrap;          /* 省略記号回避 */
  appearance: menulist;
  -webkit-appearance: menulist;
}

/* 日付・テキストも横幅で潰れないように */
.memo-edit form.row input[type="text"],
.memo-edit form.row input[type="date"]{
  flex: 1 1 220px;
  min-width: 220px;
}

/* モバイル：セレクトは100%幅＋フォント16pxでズーム回避＆選択ポップ位置のずれ軽減 */
@media (max-width: 640px){
  .memo-edit select[name="assignee_id"],
  .memo-add-form select[name="assignee_id"]{
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
    font-size: 16px !important;   /* iOSズーム防止 */
  }
  .memo-edit form.row input[type="text"],
  .memo-edit form.row input[type="date"]{
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
  }
}

/* Safariで選択UIが遠くに出るのを抑えるための保険（祖先のtransform干渉回避） */
.memo-item, .card {
  transform: none !important;
}
/* --- 追加フォーム：初期は必ず隠す / show で必ず表示 --- */
#memoAddForm{ display:none !important; }
#memoAddForm.show{ display:flex !important; }

/* --- 追加ボタン（見た目そのまま） --- */
.memo-add-toggle{
  background:#3b82f6; color:#fff; border:none;
  padding:10px 18px; border-radius:999px; font-weight:700; cursor:pointer;
  box-shadow:0 3px 10px rgba(59,130,246,.2);
  transition: background .15s, transform .08s, box-shadow .15s;
}
.memo-add-toggle:hover{ background:#2563eb; transform: translateY(-1px); box-shadow:0 6px 16px rgba(37,99,235,.25); }

/* --- 編集/追加フォームのflex調整（潰れ防止） --- */
.memo-edit form.row,
.memo-add-form{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}

/* --- 担当者プルダウン：必ず広く表示（デスクトップ） --- */
.memo-edit select[name="assignee_id"],
.memo-add-form select[name="assignee_id"]{
  flex: 0 0 auto !important;      /* 縮ませない */
  min-width: 280px !important;     /* ガッツリ広く */
  font-size: 1.1em !important;     /* 見やすく */
  line-height: 1.3;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  white-space: nowrap;
  appearance: menulist; -webkit-appearance: menulist;
}

/* 入力も潰れないように */
.memo-edit form.row input[type="text"],
.memo-edit form.row input[type="date"],
.memo-add-form input[type="text"],
.memo-add-form input[type="date"]{
  flex: 1 1 220px; min-width: 220px;
}

/* モバイルは Select を全幅にして見やすく */
@media (max-width: 640px){
  .memo-edit select[name="assignee_id"],
  .memo-add-form select[name="assignee_id"]{
    width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important;
    font-size: 16px !important; /* iOSズーム防止 */
  }
  .memo-edit form.row input[type="text"],
  .memo-edit form.row input[type="date"],
  .memo-add-form input[type="text"],
  .memo-add-form input[type="date"]{
    width:100%; min-width:0; flex:1 1 100%;
  }
}

/* iOSで選択ポップが離れた場所に出る対策：transform干渉の無効化 */
.memo-item, .card{ transform:none !important; }

#memoAddForm { display: none !important; }
#memoAddForm.show { display: flex !important; position: relative; z-index: 1; }

/* ===== 担当者セレクト最終オーバーライド（勝ち確） ===== */
/* フォーム本体の文字サイズ・幅を強制UP（デスクトップ） */
.memo-item .memo-edit select[name="assignee_id"],
.memo-add-card select[name="assignee_id"],
.memo-add-form select[name="assignee_id"]{
  flex: 0 0 auto !important;   /* 縮ませない */
  min-width: 300px !important;  /* さらに広く */
  font-size: 16px !important;   /* 基準に依存しない絶対値 */
  line-height: 1.4 !important;
  padding: 10px 12px !important;
  white-space: nowrap;
}

/* ドロップダウン項目側（対応ブラウザのみ有効だが念のため） */
select[name="assignee_id"] option{
  font-size: 16px;
}

/* モバイル：全幅＆16px維持（iOSのズーム抑止） */
@media (max-width: 640px){
  .memo-item .memo-edit select[name="assignee_id"],
  .memo-add-card select[name="assignee_id"],
  .memo-add-form select[name="assignee_id"]{
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
    font-size: 20px !important;
  }
}
/* === モバイル用：担当者カスタムピッカー === */
.assignee-picker{ position: relative; }
.assignee-btn{
  display:inline-flex; align-items:center; justify-content:space-between;
  width:100%; min-width: 260px;
  font-size: 18px; line-height: 1.4;
  padding: 10px 14px; border:1px solid #cbd5e1; border-radius:10px; background:#fff;
}
.assignee-btn:after{
  content:"▾"; margin-left:8px; font-size: 16px; opacity:.7;
}
.assignee-menu{
  position:absolute; left:0; right:0; top: calc(100% + 6px);
  background:#fff; border:1px solid #cbd5e1; border-radius:10px;
  box-shadow:0 10px 24px rgba(2,32,71,.15);
  max-height: 50vh; overflow:auto; padding:6px; display:none; z-index: 50;
}
.assignee-menu.open{ display:block; }
.assignee-menu button{
  display:block; width:100%; text-align:left;
  font-size:18px; padding:10px 12px; border-radius:8px; border:0; background:#fff; cursor:pointer;
}
.assignee-menu button:hover{ background:#f1f5f9; }

/* モバイルではカスタムUIを表示、selectは隠す（送信用に保持） */
@media (max-width:640px){
  .memo-edit select[name="assignee_id"],
  .memo-add-form select[name="assignee_id"]{ 
    position:absolute !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important;
  }
  .assignee-picker{ display:block; width:100%; }
}

/* デスクトップは従来の select を使う（カスタムUIは非表示） */
@media (min-width:641px){
  .assignee-picker{ display:none; }
}
/* === フェイルセーフ：JSで data-enhanced="1" が付いた時だけ select を隠す === */
@media (max-width:640px){
  /* デフォルト：見える（JSが動かない時は select を表示） */
  .memo-edit select[name="assignee_id"],
  .memo-add-form select[name="assignee_id"]{
    position: static !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  /* JSが select に data-enhanced="1" を付けたら、その時だけ隠す */
  .memo-edit select[name="assignee_id"][data-enhanced="1"],
  .memo-add-form select[name="assignee_id"][data-enhanced="1"]{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}
/* 担当者：ラジオボタンを大きなピル型に */
.assignee-radio-group{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}
.assignee-radio{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border:1px solid #cbd5e1; border-radius:999px;
  background:#fff; cursor:pointer; user-select:none;
  font-size: 18px; line-height:1.4;   /* ← 読みやすい大きさ */
}
.assignee-radio input[type="radio"]{
  width:18px; height:18px; accent-color:#1d4ed8;
}
.assignee-radio input[type="radio"]:focus-visible{
  outline:2px solid #60a5fa; outline-offset:2px;
}
@media (max-width:640px){
  .assignee-radio{ font-size:18px; padding:10px 14px; }
  .assignee-radio-group{ gap:10px; }
}
/* --- 担当者ラジオボタンの微調整（小さめ＆見出しに調和） --- */
.assignee-radio-group {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.assignee-radio {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid #cbd5e1;
  border-radius:999px;
  background:#fff;
  cursor:pointer;
  user-select:none;
  font-size: 15px;       /* ← 小さめに変更 */
  line-height:1.2;
}
.assignee-radio input[type="radio"]{
  width:16px;
  height:16px;
  accent-color:#1d4ed8;
}
@media (max-width:640px){
  .assignee-radio { font-size:16px; padding:8px 12px; }
}
/* === 柔らかフォントトーン設定 === */

/* ベースフォントを丸ゴシック系に変更 */
body, button, input, select, textarea {
  font-family: 
    -apple-system, BlinkMacSystemFont, 
    "Hiragino Maru Gothic ProN", 
    "Hiragino Sans", 
    "Noto Sans JP", 
    "Segoe UI", "Roboto", "sans-serif";
  letter-spacing: 0.03em;
  font-weight: 400;
  color: #374151;
}

/* タイトルは少し太めで丸みを強調 */
h1, h2, h3 {
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #1e293b;
}

/* ボタンやラベルに柔らかい丸みと淡い影 */
button, .pill, .memo-add-toggle {
  border-radius: 999px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.05);
  font-weight: 500;
}

/* ラジオボタンラベルをより柔らかく */
.assignee-radio {
  border-color: #d1d5db;
  background: #fafafa;
  transition: background .2s, transform .1s;
}
.assignee-radio:hover {
  background: #f0f9ff;
  transform: translateY(-1px);
}
.assignee-radio input[type="radio"]:checked + label,
.assignee-radio input[type="radio"]:checked {
  accent-color: #60a5fa;
}

/* 全体の余白を少し広げてゆったり */
body {
  background: #f9fafb;
  line-height: 1.7;
}
.container, main {
  padding: 16px;
}
/* 🌸 全体をパステルピンク基調に変更 ====================== */

/* ベース：フォントを丸ゴシック＋柔らか色味に */
body, button, input, select, textarea {
  font-family:
    "Hiragino Maru Gothic ProN",
    "Noto Sans JP",
    "Zen Maru Gothic",
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
  letter-spacing: 0.03em;
  color: #444;
  background: #fff7f8; /* ほんのりピンクベージュ */
  font-weight: 400;
  line-height: 1.7;
}

/* タイトル・見出し */
h1, h2, h3 {
  color: #c45a7c; /* くすみピンク */
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* 🌷 ヘッダー ====================== */
header, .site-header {
  background: linear-gradient(90deg, #ffd5df 0%, #ffe6ec 100%);
  border-bottom: 1px solid #f9cad7;
  box-shadow: 0 2px 6px rgba(196,90,124,0.1);
}
.brand a {
  font-weight: 700;
  color: #c13b63;
  background: #fff;
  border-radius: 20px;
  padding: 6px 14px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(255,255,255,0.5);
}
.brand a:hover {
  background: #ffe9ef;
}

/* 「ようこそ」を非表示 */
header .welcome,
.site-header .welcome {
  display: none !important;
}

/* 🌼 ボタン ====================== */
button, .pill, .memo-add-toggle {
  background: linear-gradient(90deg, #f9a8c7 0%, #fcbcd9 100%);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(249,168,199,0.3);
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
}
button:hover, .pill:hover, .memo-add-toggle:hover {
  background: linear-gradient(90deg, #f490b5 0%, #fba8c5 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(249,168,199,0.4);
}

/* 🌸 担当者ラジオ ====================== */
.assignee-radio {
  border: 1px solid #f7cad4;
  background: #fff;
  color: #c13b63;
  border-radius: 999px;
  font-size: 15px;
  padding: 6px 12px;
  transition: all 0.2s;
}
.assignee-radio input[type="radio"] {
  accent-color: #f497b8;
  width: 16px;
  height: 16px;
}
.assignee-radio:hover {
  background: #ffeaf0;
  transform: translateY(-1px);
}

/* 🌼 メモ一覧 ====================== */
.memo-item {
  background: #fff;
  border: 1px solid #f7d7e1;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 10px;
  box-shadow: 0 2px 5px rgba(249,168,199,0.1);
}
.memo-item.is-overdue {
  background: #fff0f3;
  border-color: #f3b1c4;
}
.memo-item.is-today {
  background: #fff7f9;
  border-color: #f6c5d6;
}

/* 🌿 カード（追加フォームなど） */
.card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #f9cbd8;
  padding: 16px;
  box-shadow: 0 3px 10px rgba(249,168,199,0.15);
}

/* 🌷 入力エリア */
input[type="text"], input[type="date"], textarea {
  border: 1px solid #f3c2d1;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 15px;
  background: #fff;
  color: #444;
}
input:focus, textarea:focus {
  outline: none;
  border-color: #f69ab8;
  box-shadow: 0 0 4px rgba(246,154,184,0.4);
}

/* 🌸 フッター */
footer {
  text-align: center;
  color: #c13b63;
  font-size: 13px;
  opacity: 0.7;
  margin-top: 20px;
}
/* 💙 ボタン：パステルブルーグラデーション */
button, .pill, .memo-add-toggle {
  background: linear-gradient(90deg, #a3c8ff 0%, #c9e3ff 100%);
  color: #1e3a8a;
  border: none;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(163,200,255,0.3);
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
}
button:hover, .pill:hover, .memo-add-toggle:hover {
  background: linear-gradient(90deg, #90baff 0%, #b8dcff 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(163,200,255,0.4);
}

/* 💫 「ようこそ」を完全に非表示 */
header .welcome,
.site-header .welcome,
header p:has(span:contains("ようこそ")),
header p:has(span[class*="welcome"]) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden;
}
/* 追加フォーム：ふんわりフェード＆スライド（displayを使わない） */
#memoAddForm{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: max-height .35s ease, opacity .25s ease, visibility 0s linear .25s;
}
#memoAddForm.open{
  max-height: 600px;            /* フォームの想定高さより少し大きめでOK */
  opacity: 1;
  visibility: visible;
  transition: max-height .35s ease, opacity .25s ease, visibility 0s;
}

/* ボタンも少しだけふんわり */
.memo-add-toggle{
  transition: background .2s, transform .12s, box-shadow .2s;
}
.memo-add-toggle:active{ transform: translateY(0); }

/* アニメが苦手な方の設定尊重 */
@media (prefers-reduced-motion: reduce){
  #memoAddForm{ transition: none !important; }
  .memo-add-toggle{ transition: none !important; }
}
/* ===== ヘッダー：ガラス風 × パステルブルー ===== */
header.site{
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(135deg, rgba(173, 216, 255, .55), rgba(255,255,255,.55));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(163, 200, 255, .45);
  box-shadow: 0 6px 24px rgba(2,32,71,.06);
}
header.site .wrap{
  max-width: 1000px; margin: 0 auto;
  padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
header .brand{ display:flex; align-items:center; gap:10px; }
header .brand .brand-logo{ height: 36px; width:auto; border-radius:50%; box-shadow: 0 2px 8px rgba(2,32,71,.08); }

/* ナビ（家族 / 参加）を薄枠ピルに */
header nav{ display:flex; gap:8px; flex-wrap: wrap; }
header nav a{
  display:inline-block; padding:6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(120, 170, 255, .6);
  color: #1e3a8a; text-decoration: none;
  transition: background .15s, box-shadow .15s, transform .08s;
}
header nav a:hover{
  background: rgba(255,255,255,.95);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(2,32,71,.12);
}

/* ユーザー部（名前＋下段ログアウト） */
header .user{ text-align: right; line-height: 1.3; }
header .user .user-name{ font-weight: 700; color:#1e3a8a; }
header .user .logout{
  display:inline-block; margin-top: 4px;
  color:#1d4ed8; text-decoration: underline; font-size: .92em;
}

/* 極小幅での見栄え調整 */
@media (max-width: 480px){
  header .brand .brand-logo{ height: 32px; }
  header nav a{ padding:5px 10px; }
}
header .welcome, .site-header .welcome { display:none !important; }
/* 追加フォーム：ふんわりフェード&スライド */
#memoAddForm{
  overflow:hidden;
  max-height:0; opacity:0; visibility:hidden;
  transition:max-height .35s ease, opacity .25s ease, visibility 0s linear .25s;
}
#memoAddForm.open{
  max-height:600px; opacity:1; visibility:visible;
  transition:max-height .35s ease, opacity .25s ease, visibility 0s;
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
@media (prefers-reduced-motion: reduce){
  #memoAddForm{ transition:none !important; }
}
/* 参加ページのコード入力欄に余白 */
.join-form input[name="code"]{
  margin-top:12px;
  margin-bottom:18px;
}
/* === canonical toggle: memo add form === */
#memoAddForm, .memo-add-form{ display:none !important; }
#memoAddForm.show, .memo-add-form.show{
  display:flex !important; gap:8px; align-items:center; flex-wrap:wrap;
}

/* === invites: 1列目(ID) と 最終列(作成日) を隠す === */
table.invites th:first-child,
table.invites td:first-child,
table.invites th:last-child,
table.invites td:last-child{
  display:none;
}

/* invites: 「誰に送ったか」textarea の上下余白 */
.invites-form textarea{
  margin-top:12px; margin-bottom:20px;
}

/* join: コード入力欄の上下余白 */
.join-form input[name="code"]{
  margin-top:12px; margin-bottom:20px;
}
/* --- メモ追加フォームを常時表示に強制（どんな隠しルールにも勝つ） --- */
#memoAddForm,
.memo-add-form{
  display: flex !important;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  max-height: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 「＋ 追加」ボタンは一旦隠す（常時表示なので不要） */
#memoAddToggle,
.memo-add-toggle{
  display: none !important;
}
/* ヘッダー内ナビ（家族/参加）が空の場合は非表示に */
header nav.left:empty {
  display: none !important;
}
/* ===== ヘッダー中央ロゴ：Task Memo ===== */
.taskmemo-logo {
  display: inline-block;
  font-family: "Hiragino Maru Gothic ProN","Noto Sans JP","Zen Maru Gothic",sans-serif;
  font-weight: 800;
  font-size: 1.8rem;
  letter-spacing: 0.05em;
  background: linear-gradient(90deg, #7ec8ff 0%, #4c9cff 50%, #86c5ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 8px rgba(76,156,255,0.25);
  transition: transform 0.2s ease, text-shadow 0.3s ease;
}
.taskmemo-logo:hover {
  transform: scale(1.04);
  text-shadow: 0 3px 10px rgba(76,156,255,0.35);
}
header.site {
  background: linear-gradient(90deg, #ebf6ff 0%, #f8fbff 100%);
  border-bottom: 1px solid #cde4ff;
  box-shadow: 0 2px 6px rgba(76,156,255,0.08);
}
/* ===== ヘッダーを中央ロゴ化（HTMLはそのまま） ===== */

/* ヘッダーラップの整列：中央寄せ＋右端にユーザー */
header.site .wrap{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position: relative !important;
  padding: 14px 20px !important;
}

/* 左側ナビ（家族/参加）は非表示 */
header.site nav.left{ display:none !important; }

/* 既存の画像ロゴは消す */
header.site .brand img{ display:none !important; }
/* sr-only のテキストは隠したままでOK */
header.site .brand .sr-only{ display:none !important; }

/* 中央ロゴをテキストで描画（擬似要素） */
header.site .brand a{
  position: relative;
  display: inline-block;
  text-decoration: none !important;
  min-height: 36px;
}
header.site .brand a::after{
  content: "Task Memo"; /* ← ここが見えるロゴ文字 */
  display: inline-block;
  font-family: "Hiragino Maru Gothic ProN","Noto Sans JP","Zen Maru Gothic",sans-serif;
  font-weight: 800;
  font-size: 1.9rem;              /* 大きめ */
  letter-spacing: 0.05em;
  background: linear-gradient(90deg, #7ec8ff 0%, #4c9cff 50%, #86c5ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 8px rgba(76,156,255,0.25);
}

/* 右端のユーザー表示を固定（中央ロゴの邪魔をしない） */
header.site .user{
  position: absolute !important;
  right: 20px !important;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
  line-height: 1.3;
}
header.site .user .user-name{ font-weight:700; color:#1e3a8a; }
header.site .user .logout{ color:#1d4ed8; text-decoration: underline; font-size: .92em; }

/* ヘッダーの背景（淡いブルー） */
header.site{
  background: linear-gradient(90deg, #ebf6ff 0%, #f8fbff 100%) !important;
  border-bottom: 1px solid #cde4ff !important;
  box-shadow: 0 2px 6px rgba(76,156,255,0.08) !important;
}
/* === Task Memo ロゴをオレンジ→紫→ピンクのグラデーションに変更 === */
header.site .brand a::after{
  background: linear-gradient(90deg,
    #ffb347 0%,   /* 明るいオレンジ */
    #ff7e5f 20%,  /* サンセットオレンジ */
    #b96fff 60%,  /* ソフトパープル */
    #ff6fd8 100%  /* ピンク寄りバイオレット */
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 10px rgba(255, 126, 150, 0.3);
}

/* ヘッダー背景もわずかに暖色トーンへ */
header.site {
  background: linear-gradient(90deg, #fff2f5 0%, #fff7fd 100%) !important;
  border-bottom: 1px solid #ffe3f0 !important;
  box-shadow: 0 2px 6px rgba(255, 126, 150, 0.1) !important;
}
/* === Task Memo ロゴを太字にする === */
header.site .brand a::after {
  font-weight: 900 !important;     /* 極太に変更 */
  letter-spacing: 0.04em !important;
  text-shadow: 0 3px 10px rgba(255, 126, 150, 0.35);
}
/* === Task Memo ロゴを Zen Maru Gothic 太字に変更 === */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@700;900&display=swap');

header.site .brand a::after {
  font-family: 'Zen Maru Gothic', "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif !important;
  font-weight: 900 !important;    /* 丸くて太い字形 */
  letter-spacing: 0.04em !important;
  font-size: 2rem !important;
  background: linear-gradient(90deg,
    #ffb347 0%,   /* オレンジ */
    #ff7e5f 25%,  /* サンセット */
    #b96fff 60%,  /* 紫 */
    #ff6fd8 100%  /* ピンク */
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 3px 10px rgba(255, 126, 150, 0.35);
}

/* スマホで少し小さく（収まり改善） */
@media (max-width: 480px){
  header.site .brand a::after {
    font-size: 1.6rem !important;
  }
}
/* === Task Memo ロゴ：発光＋グラデーション流れアニメ === */
@keyframes taskmemoGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes taskmemoGlow {
  0%   { text-shadow: 0 2px 8px rgba(255,126,150,.25), 0 0 0 rgba(255,126,150,0); }
  50%  { text-shadow: 0 4px 14px rgba(255,126,150,.38), 0 0 18px rgba(255,126,150,.25); }
  100% { text-shadow: 0 2px 8px rgba(255,126,150,.25), 0 0 0 rgba(255,126,150,0); }
}
header.site .brand a::after{
  /* 既存のフォント/グラデはそのまま。アニメだけ追加 */
  background-size: 200% 100%;
  animation: taskmemoGradient 8s ease-in-out infinite,
             taskmemoGlow     3.6s ease-in-out infinite;
  will-change: background-position, text-shadow;
}
/* ホバーで少しだけ強めに */
header.site .brand a:hover::after{
  animation-duration: 6s, 3s;
}

/* モーション弱め・オフの配慮 */
@media (prefers-reduced-motion: reduce){
  header.site .brand a::after{
    animation: none !important;
    text-shadow: 0 2px 8px rgba(255,126,150,.25);
  }
}
/* === メモ追加フォームの間隔調整 === */

/* 担当者ラジオボタン群と追加ボタンの間に余白を追加 */
.memo-add-form .assignee-radio-group {
  margin-bottom: 16px !important;
}

/* 追加ボタンの上にも少し余裕を */
.memo-add-form button[type="submit"] {
  margin-top: 8px !important;
}

/* 編集フォーム側も同様に（見た目統一） */
.memo-edit .assignee-radio-group {
  margin-bottom: 14px !important;
}
.memo-edit button[type="submit"] {
  margin-top: 6px !important;
}
/* === 招待コードページのボタン間隔調整 === */

/* 「新しい招待コードを作成」ボタンの上下余白を広く */
.invites-form button[type="submit"],
.invites-form .pill {
  margin-top: 14px !important;
  margin-bottom: 18px !important;
}

/* さらに全体カードの下部も少し余白を確保 */
main.container {
  padding-bottom: 40px !important;
}
/* === 招待コードページ：ボタン上下マージンを確実に広げる === */

/* 「新しい招待コードを作成」ボタン */
main.container form[action*="invites"] button,
main.container form[action*="invites"] input[type="submit"],
main.container form[action*="invites"] .pill {
  display: inline-block !important;
  margin-top: 18px !important;
  margin-bottom: 22px !important;
}

/* 招待コードテーブルとの間にも余白を */
main.container table {
  margin-top: 20px !important;
}
/* === 参加ページ（/join）フォームの間隔を広く === */

/* コード入力欄とボタンの間 */
main.container form[action*="join"] input[name="code"] {
  display: block !important;
  width: 100% !important;
  margin-top: 14px !important;
  margin-bottom: 20px !important;
  padding: 10px 12px !important;
  font-size: 16px !important;
}

/* 「参加する」ボタンの上の余白も広げる */
main.container form[action*="join"] button,
main.container form[action*="join"] input[type="submit"] {
  margin-top: 10px !important;
  margin-bottom: 24px !important;
}

/* フォーム全体に少し余裕を */
main.container form[action*="join"] {
  padding-top: 10px !important;
  padding-bottom: 14px !important;
}
/* === 全ページ統一：フォームカードスタイル === */

/* カード共通 */
form, .card, .memo-add-form, .invites-form, .join-form {
  background: #ffffff !important;
  border: 1px solid rgba(240, 180, 200, 0.35);
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 4px 14px rgba(249, 168, 199, 0.12);
  margin-top: 18px;
  margin-bottom: 24px;
}

/* 入力欄は柔らかい印象で統一 */
input[type="text"], input[type="date"], input[type="email"], textarea {
  border: 1px solid #f3c2d1 !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  background: #fff !important;
  font-size: 15px;
  transition: box-shadow .2s, border-color .2s;
}
input:focus, textarea:focus {
  outline: none;
  border-color: #f69ab8 !important;
  box-shadow: 0 0 8px rgba(246, 154, 184, 0.35);
}

/* ボタンも柔らかく統一（既存カラーに合わせて） */
button, .pill, .memo-add-toggle {
  border-radius: 999px !important;
  box-shadow: 0 4px 10px rgba(76,156,255,0.1);
  transition: background .2s, transform .1s, box-shadow .2s;
}
button:hover, .pill:hover, .memo-add-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(76,156,255,0.15);
}

/* テーブルの上にも軽いカード感 */
table {
  background: #ffffff;
  border-radius: 12px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(0,0,0,0.05);
}

/* テーブルのセル */
table th, table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f0e4eb;
}

/* モバイルでの見た目調整 */
@media (max-width:640px){
  form, .card {
    padding: 14px 16px;
    border-radius: 14px;
  }
  input[type="text"], input[type="date"], textarea {
    font-size: 16px;
  }
}
/* === メモカードのボタン配置調整（編集削除後の整列） === */
.memo-item .mi-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
}
.memo-item .mi-actions form {
  display: inline-block;
}
/* === メモ項目をコンパクト化（高さ 約60%に調整） === */
.memo-item {
  padding: 10px 12px !important;       /* 内側余白を減らす */
  margin-bottom: 12px !important;      /* カード間の間隔も少し減らす */
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* メモ本文の行間を少し詰める */
.memo-item .mi-line1 {
  margin-bottom: 4px !important;
  line-height: 1.4 !important;
}

/* ボタンブロックをコンパクトに */
.memo-item .mi-actions {
  margin-top: 4px !important;
  gap: 10px !important;
}
.memo-item .mi-actions button,
.memo-item .mi-actions .pill {
  padding: 6px 14px !important;
  font-size: 14px !important;
  border-radius: 12px !important;
}

/* バッジや状態表示のサイズも調整 */
.memo-item .badge {
  font-size: 13px !important;
  padding: 4px 8px !important;
}
.memo-item .state {
  font-size: 13px !important;
}

/* モバイルでは少しだけ広めに戻す */
@media (max-width:640px){
  .memo-item { padding: 12px 14px !important; }
  .memo-item .mi-actions { gap: 12px !important; }
}
/* ===== メモをコンパクト表示（約 50〜60% 高さ） ===== */
.memo-list { margin: 0; padding: 0; }
.memo-item{
  background:#fff !important;
  border:1px solid #f0dbe6 !important;
  border-radius:10px !important;
  padding:8px 10px !important;          /* 内側をさらに圧縮 */
  margin-bottom:8px !important;          /* 間隔も圧縮 */
  box-shadow:none !important;            /* 影を弱くして軽く */
}
.memo-item:hover{ background:#fffafc; }

/* 1行目：本文を小さめ＆行間詰め */
.memo-item .mi-line1{
  font-size:14px !important;
  line-height:1.35 !important;
  margin:0 0 4px 0 !important;
  word-break: break-word;
}

/* 2行目：左(バッジ/状態)と右(操作)で詰める */
.memo-item .mi-line2{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  margin:0 !important;
}

/* 左側：期日バッジ＋状態をコンパクトに横並び */
.memo-item .mi-badges{ display:flex; gap:6px; align-items:center; }
.memo-item .badge{
  font-size:12px !important;
  padding:2px 8px !important;
  border-radius:999px !important;
}
.memo-item .state{ font-size:12px !important; opacity:.9; }

/* 右側：操作ボタンを小型化 */
.memo-item .mi-actions{
  display:flex !important;
  gap:6px !important;
  margin:0 !important;
}
.memo-item .mi-actions form{ display:inline-block !important; }
.memo-item .mi-actions button,
.memo-item .mi-actions .pill{
  padding:5px 10px !important;
  font-size:13px !important;
  border-radius:10px !important;
  box-shadow:none !important;
}

/* モバイルでの折返し最適化 */
@media (max-width:640px){
  .memo-item{ padding:10px 12px !important; }
  .memo-item .mi-line2{ flex-wrap:wrap; row-gap:6px; }
  .memo-item .mi-actions{ margin-left:auto; }
}
/* === メモリストの余白だけを減らして、6件前後見えるように === */
.memo-item {
  padding: 6px 10px !important;     /* 内側余白を軽く */
  margin-bottom: 6px !important;    /* カード間の余白を狭く */
  border-radius: 10px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

/* 行間を少しだけ詰める */
.memo-item .mi-line1,
.memo-item .mi-line2 {
  margin-bottom: 2px !important;
  line-height: 1.35 !important;
}

/* ボタンまわりも圧縮 */
.memo-item .mi-actions {
  gap: 6px !important;
  margin-top: 4px !important;
}
.memo-item .mi-actions button,
.memo-item .mi-actions .pill {
  padding: 5px 10px !important;
}

/* モバイルでの見やすさ維持 */
@media (max-width: 640px) {
  .memo-item {
    padding: 8px 10px !important;
    margin-bottom: 8px !important;
  }
}
/* === メモ項目内部の余白だけをさらにコンパクトに === */
.memo-item {
  padding: 4px 10px !important;    /* 内側の上下余白を最小限に */
  margin-bottom: 5px !important;   /* 各カードの間隔もさらに少しだけ */
}

/* メモ本文の下とボタンの上の間隔を詰める */
.memo-item .mi-line1 {
  margin-bottom: 2px !important;
}
.memo-item .mi-actions {
  margin-top: 2px !important;
  gap: 6px !important;
}

/* ボタン全体も少し詰める */
.memo-item .mi-actions button,
.memo-item .mi-actions .pill {
  padding: 4px 9px !important;
}

/* 期日バッジもコンパクトに */
.memo-item .badge {
  font-size: 12px !important;
  padding: 2px 6px !important;
}

/* スマホで詰めすぎないよう微調整 */
@media (max-width:640px){
  .memo-item { padding: 6px 10px !important; }
}
/* ===== 6件見えるまで余白だけ圧縮（フォントサイズはそのまま） ===== */

/* 各項目カードの上下/内側余白をさらに削減 */
.memo-item{
  padding: 4px 8px !important;     /* 内側上下を最小限に */
  margin: 4px 0 !important;        /* カード間をさらに圧縮 */
  border-radius: 8px !important;
  box-shadow: none !important;
  border: 1px solid #f1e3ea !important;
}

/* 本文と下段の間を最小限に */
.memo-item .mi-line1{ margin-bottom: 2px !important; line-height: 1.35 !important; }

/* 下段（期日/状態 ←→ 操作）もタイトに */
.memo-item .mi-line2{
  margin: 0 !important;
  gap: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* バッジ/状態を小さめ間隔で */
.memo-item .mi-badges{ gap: 4px !important; }
.memo-item .badge{
  font-size: 12px !important;      /* 文字サイズは近いまま */
  padding: 1px 6px !important;     /* 高さをさらに抑える */
  border-radius: 999px !important;
}
.memo-item .state{ font-size: 12px !important; }

/* ボタン行をコンパクト化（当たり判定は確保） */
.memo-item .mi-actions{ gap: 6px !important; margin-top: 2px !important; }
.memo-item .mi-actions button,
.memo-item .mi-actions .pill{
  padding: 4px 8px !important;     /* 高さを抑える */
  line-height: 1.2 !important;
  border-radius: 10px !important;
  min-height: 30px;                /* タップしやすさは維持 */
}

/* 追加フォームのカードも控えめに（リストが上に来るよう圧縮） */
.memo-add-card{ margin-top: 8px !important; }
.memo-add-form{ padding: 10px 12px !important; }

/* スマホでの見栄え微調整（詰めすぎ回避） */
@media (max-width:640px){
  .memo-item{ padding: 6px 8px !important; margin: 5px 0 !important; }
}
/* ===== メモ項目の最小コンパクト版（フォントサイズ維持） ===== */
.memo-item {
  padding: 2px 6px !important;       /* ほぼ最小限の内側余白 */
  margin: 3px 0 !important;          /* 各カードの隙間も最小限 */
  border: 1px solid #f3e6ec !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* 本文部分をギュッと */
.memo-item .mi-line1 {
  margin-bottom: 1px !important;
  line-height: 1.25 !important;
}

/* 状態行を詰める */
.memo-item .mi-line2 {
  margin: 0 !important;
  padding: 0 !important;
  gap: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* 期日バッジと状態をさらにコンパクト化 */
.memo-item .badge {
  font-size: 12px !important;
  padding: 1px 5px !important;
  border-radius: 999px !important;
}
.memo-item .state {
  font-size: 12px !important;
}

/* 操作ボタンを最小限サイズに */
.memo-item .mi-actions {
  gap: 4px !important;
  margin-top: 1px !important;
}
.memo-item .mi-actions button,
.memo-item .mi-actions .pill {
  padding: 3px 8px !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  border-radius: 8px !important;
  min-height: 26px !important;       /* 指タップに最低限の高さ */
}

/* スマホでは詰めすぎ防止 */
@media (max-width:640px){
  .memo-item {
    padding: 4px 8px !important;
    margin: 4px 0 !important;
  }
}
/* 未完タスク：薄いピンクでグルーピング */
.memo-item.is-todo{
  background:#fff4f8 !important;
  border-color:#f3d1dd !important;
}
/* 完了タスク：軽いブルーで退色 */
.memo-item.is-done{
  background:#f9fbff !important;
  border-color:#e3eaf7 !important;
  opacity: .98;
}
/* 期限切れ/今日の強調はそのまま上に乗る */
.memo-item.is-overdue{ background:#fff0f3 !important; border-color:#f3b1c4 !important; }
.memo-item.is-today  { background:#fff7f9 !important; border-color:#f6c5d6 !important; }