/* nc-jimu styles — 事務利用優先 (情報密度高め)
   配色: Material Blue 中心の明るい青 */
:root {
  --c-primary:        #1e88e5;  /* メイン青 (Blue 600) */
  --c-primary-dark:   #1565c0;  /* hover */
  --c-primary-darker: #0d47a1;
  --c-primary-light:  #e3f2fd;  /* tint */
  --c-accent:         #ffb300;  /* アクセント (Amber 600) */
  --c-border:         #b0b0b0;
  --c-border-soft:    #d0d7de;
  --c-bg:             #f4f7fb;
  --c-bg-row-alt:     #f6fafd;
  --c-row-hover:      #fff8e1;
  --c-text:           #1a2230;
  --c-text-muted:     #607080;
  color-scheme: light;
}

* { box-sizing: border-box; }
body {
  font-family: "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  margin: 0; background: var(--c-bg); color: var(--c-text); font-size: 14px;
}

header.topbar {
  background: linear-gradient(90deg, #2196f3 0%, var(--c-primary) 50%, var(--c-primary-dark) 100%);
  color: #fff; padding: 10px 18px;
  display: flex; align-items: center; gap: 16px;
  box-shadow: 0 1px 3px rgba(13,71,161,0.18);
}
header.topbar h1 { font-size: 16px; margin: 0; font-weight: 600; letter-spacing: 0.5px; }

nav.menu {
  background: var(--c-primary-dark); padding: 0 16px; display: flex; flex-wrap: wrap;
  box-shadow: 0 2px 4px rgba(13,71,161,0.12);
}
nav.menu a {
  color: #fff; text-decoration: none; padding: 9px 16px;
  font-size: 13px; border-bottom: 3px solid transparent;
  transition: background .15s, border-color .15s;
}
nav.menu a:hover { background: rgba(255,255,255,0.12); }
nav.menu a.active { border-bottom-color: var(--c-accent); background: rgba(255,255,255,0.10); }
nav.menu .sep { flex: 1; }

main { padding: 16px; max-width: 1400px; margin: 0 auto; }
h2 { font-size: 18px; margin: 0 0 12px; color: var(--c-primary-darker); }
h3 { font-size: 15px; margin: 16px 0 8px; color: var(--c-primary-darker); }

.card {
  background: #fff; border: 1px solid var(--c-border-soft); border-radius: 6px;
  padding: 16px; margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(30,80,150,0.04);
}
.card h2 { margin-top: 0; }

table { width: 100%; border-collapse: collapse; background: #fff; font-size: 13px; border: 1px solid #8b94a0; }
th, td { border: 1px solid var(--c-border); padding: 5px 7px; text-align: left; vertical-align: top; }
thead th {
  background: linear-gradient(180deg, #e7f1fb 0%, #d6e6f5 100%);
  color: var(--c-primary-darker);
  font-weight: 600; border-bottom: 2px solid var(--c-primary);
}
tbody tr:nth-child(even) td { background: var(--c-bg-row-alt); }
tbody tr:hover td { background: var(--c-row-hover); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* 日付セルは rowspan で 1 行目だけにあるため :first-child では特定できない。
   .date-cell クラスで明示的に指定する */
td.date-cell { text-align: center; vertical-align: middle; }
tr.weekend  td.date-cell { background: #fde7e7 !important; }
tr.saturday td.date-cell { background: #e3f2fd !important; }
tr.today    td { background: #fff8d6 !important; }
tr.today    td.date-cell {
  background: #ffd54f !important;
  box-shadow: inset 4px 0 0 #f57c00;
  font-weight: bold;
}
.today-badge {
  display: inline-block; background: #f57c00; color: #fff;
  border-radius: 3px; padding: 1px 6px; font-size: 11px; margin-left: 4px;
  vertical-align: middle;
}
tr.focus-day td { box-shadow: inset 0 0 0 2px var(--c-primary); animation: focus-pulse 1.2s ease-out 1; }
@keyframes focus-pulse { 0% { background: #ffe082; } 100% { } }

input[type=text], input[type=number], input[type=date], input[type=time],
input[type=email], select, textarea {
  font: inherit; padding: 4px 6px; border: 1px solid #b8c0cc; border-radius: 3px;
  background: #fff;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--c-primary-light); border-color: var(--c-primary);
}
input[type=number] { width: 64px; text-align: right; }
.form-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.form-row label { min-width: 80px; color: #344155; }

button, .btn {
  font: inherit; padding: 6px 14px; border: 1px solid var(--c-primary); background: var(--c-primary);
  color: #fff; border-radius: 4px; cursor: pointer; text-decoration: none;
  display: inline-block; transition: background .15s, box-shadow .15s;
}
button:hover, .btn:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); box-shadow: 0 2px 5px rgba(21,101,192,0.25); }
button.secondary, .btn.secondary { background: #fff; color: var(--c-primary); }
button.secondary:hover, .btn.secondary:hover { background: var(--c-primary-light); color: var(--c-primary-dark); }
button.danger, .btn.danger { background: #e53935; border-color: #e53935; }
button.danger:hover, .btn.danger:hover { background: #c62828; border-color: #c62828; }
button.small, .btn.small { padding: 2px 8px; font-size: 12px; }

.flash { padding: 8px 12px; border-radius: 4px; margin-bottom: 12px; }
.flash.ok { background: #e8f5e9; border: 1px solid #66bb6a; color: #1b5e20; }
.flash.err { background: #ffebee; border: 1px solid #ef5350; color: #b71c1c; }

.demo-banner {
  background: #c62828; color: #fff; font-weight: 700; text-align: center;
  padding: 10px 16px; border-radius: 4px; margin-bottom: 12px;
  letter-spacing: .02em; box-shadow: 0 2px 6px rgba(198,40,40,.25);
}

.month-nav { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.month-nav .ym { font-weight: 600; font-size: 16px; min-width: 100px; color: var(--c-primary-darker); }

/* ダッシュボード ショートカットタイル */
.dash-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.dash-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  padding: 16px 8px;
  min-height: 88px;
  background: #fff;
  border: 2px solid var(--c-border-soft);
  border-radius: 10px;
  text-decoration: none;
  color: var(--c-primary-darker);
  box-shadow: 0 2px 4px rgba(30,80,150,0.08);
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s, filter .15s;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.dash-tile::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--c-primary);
  transition: width .15s ease;
}
.dash-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(21,101,192,0.18);
  filter: brightness(1.04);
}
.dash-tile:hover::before { width: 6px; }
.dash-tile .dash-icon { font-size: 28px; line-height: 1; }
.dash-tile .dash-label { font-size: 13px; font-weight: 700; letter-spacing: .3px; }

.dash-tile.tile-input  { background: #e3f2fd; border-color: #64b5f6; color: #0d47a1; }
.dash-tile.tile-input::before  { background: var(--c-primary); }
.dash-tile.tile-list   { background: #e8f5e9; border-color: #81c784; color: #1b5e20; }
.dash-tile.tile-list::before   { background: #43a047; }
.dash-tile.tile-report { background: #fff3e0; border-color: #ffb74d; color: #bf360c; }
.dash-tile.tile-report::before { background: var(--c-accent); }
.dash-tile.tile-master { background: #f3e5f5; border-color: #ba68c8; color: #4a148c; }
.dash-tile.tile-master::before { background: #8e24aa; }
.dash-tile.tile-external { background: #eceff1; border-color: #90a4ae; color: #263238; }
.dash-tile.tile-external::before { background: #607d8b; }
.dash-tile:active { transform: scale(0.97); box-shadow: 0 2px 6px rgba(21,101,192,0.18); }

.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.kpi {
  background: #fff; border: 1px solid var(--c-border-soft); border-radius: 6px; padding: 12px;
  box-shadow: 0 1px 2px rgba(30,80,150,0.04);
  border-top: 3px solid var(--c-primary);
}
.kpi .label { font-size: 12px; color: var(--c-text-muted); }
.kpi .value { font-size: 22px; font-weight: 600; margin-top: 4px; color: var(--c-primary-darker); }
.kpi .sub { font-size: 11px; color: #889aa8; margin-top: 4px; }

.assign-row { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.status-badge { display: inline-block; padding: 1px 6px; border-radius: 10px; font-size: 11px; }
.kind-badge { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 11px; font-weight: 600; }
.kind-tour       { background: var(--c-primary-light); color: var(--c-primary-darker); border: 1px solid #90caf9; }
.kind-restaurant { background: #fff3e0; color: #bf360c; border: 1px solid #ffcc80; }

/* 月カレンダー (ダッシュボード) */
.cal { width: 100%; table-layout: fixed; border-collapse: collapse; }
.cal th {
  background: linear-gradient(180deg, #e7f1fb 0%, #d6e6f5 100%);
  color: var(--c-primary-darker);
  font-weight: 600; padding: 6px 4px; text-align: center; border: 1px solid var(--c-border);
}
.cal th.sun { color: #c0392b; }
.cal th.sat { color: #1565c0; }
.cal td {
  border: 1px solid var(--c-border); vertical-align: top; height: 96px; padding: 0;
  background: #fff; font-size: 11px; transition: background .12s, box-shadow .12s;
}
.cal td.empty { background: #eef2f6; }
.cal td .cal-link {
  display: block; height: 100%; width: 100%; padding: 4px 5px;
  text-decoration: none; color: inherit;
}
.cal td:not(.empty):hover {
  background: var(--c-primary-light);
  box-shadow: inset 0 0 0 2px var(--c-primary);
  cursor: pointer;
}
.cal td.sun .cal-day { color: #c0392b; }
.cal td.sat .cal-day { color: #1565c0; }
.cal td.today {
  background: #fff8d6; outline: 2px solid #f57c00; outline-offset: -2px;
}
.cal td.today:hover { background: #ffeeba; }
.cal td.today .cal-day { color: #e65100; font-weight: bold; }
.cal-day { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.cal-event {
  display: block; padding: 1px 4px; border-radius: 2px; margin-bottom: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-event.tour       { background: var(--c-primary-light); color: var(--c-primary-darker); border-left: 3px solid var(--c-primary); }
.cal-event.restaurant { background: #fff3e0; color: #bf360c; border-left: 3px solid #f57c00; }
.cal-event.more       { background: transparent; color: #889aa8; font-size: 10px; padding: 0; }

.status-planned   { background: #fff3cd; color: #856404; }
.status-confirmed { background: #d4edda; color: #155724; }
.status-cancelled { background: #f8d7da; color: #721c24; }
.status-done      { background: #d1ecf1; color: #0c5460; }

/* 2列レイアウト (レストラン売上 日次入力等) */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

/* 統合スケジュール / 本日のスケジュール 用: 長い日本語メニュー名等を強制折返し */
.schedule-table td, .schedule-table th { overflow-wrap: anywhere; word-break: break-word; }
.schedule-table { table-layout: fixed; }
.schedule-table .col-detail { width: auto; }

/* ===== モバイル対応 (≤ 700px) =====
   事務PC優先のため大きなレイアウト変更はせず、横スクロール許容 + 余白/文字サイズ縮小 */
.mobile-only  { display: none; }
@media (max-width: 700px) {
  body { font-size: 13px; }
  main { padding: 10px; }

  header.topbar { padding: 8px 12px; gap: 8px; }
  header.topbar h1 { font-size: 14px; }

  /* ナビ: 折返さず横スクロール (項目が多いので) */
  nav.menu {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 6px;
  }
  nav.menu a { padding: 8px 10px; font-size: 12px; white-space: nowrap; }
  nav.menu .sep { display: none; }

  .card { padding: 10px; }

  /* テーブルラッパー: 横スクロール領域。.card はラッパー兼用 */
  .table-wrap,
  .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* width:100% のままだと枠に縮められて日本語が縦に折返すので、自然な幅を確保 */
  .table-wrap > table { min-width: 960px; width: auto; }
  /* 短いセル(日付・時間・数値・状態)は折返さない */
  td.date-cell, th.num, td.num { white-space: nowrap; }

  h2 { font-size: 16px; }
  h3 { font-size: 14px; }

  /* タイル: モバイルはアイコン非表示 + コンパクトに */
  .dash-tiles { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
  .dash-tile { padding: 8px 4px; min-height: 36px; border-radius: 7px; gap: 0; border-width: 1px; }
  .dash-tile::before { width: 3px; }
  .dash-tile:hover::before { width: 4px; }
  .dash-tile .dash-icon { display: none; }
  .dash-tile .dash-label { font-size: 12px; }

  /* KPI: 2列に */
  .dashboard-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kpi { padding: 8px; }
  .kpi .value { font-size: 18px; }
  .kpi .label { font-size: 11px; }

  /* 月カレンダー: 高さとフォントを縮小 */
  .cal th { padding: 4px 2px; font-size: 11px; }
  .cal td { height: 64px; font-size: 10px; }
  .cal-day { font-size: 11px; }
  .cal-event { font-size: 9px; padding: 0 2px; }
  .cal td .cal-link { padding: 2px 3px; }

  /* テーブル: モバイルでは行高/余白を詰める */
  table { font-size: 12px; }
  th, td { padding: 4px 5px; }

  /* スケジュール表は固定列幅をやめて自然な幅 + 最低幅で横スクロール */
  .schedule-table { table-layout: auto; min-width: 560px; }
  .schedule-table colgroup col { width: auto !important; }

  /* フォーム: ラベルを上に */
  .form-row { gap: 4px; margin-bottom: 6px; }
  .form-row label { min-width: auto; flex-basis: 100%; }

  /* 月ナビ */
  .month-nav { gap: 4px; }
  .month-nav .ym { font-size: 14px; min-width: auto; }

  /* 表示切替ユーティリティ */
  .mobile-only  { display: block; }
  .desktop-only { display: none !important; }
}

/* ============================================================
 * 個人サマリ・Todo・カレンダー・使用量 (2026-05-07 追加)
 * ============================================================ */
.muted { color: var(--c-text-muted); }
.small { font-size: 12px; }
.inline { display: inline; margin: 0; padding: 0; }

/* index.php 上部の個人サマリ */
.personal-summary { background: linear-gradient(180deg, #f0f8ff 0%, #ffffff 100%); border-left: 4px solid var(--c-primary); }
.personal-summary-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.personal-stat {
  display: flex; flex-direction: column; align-items: center; min-width: 80px;
  padding: 6px 12px; background: #fff; border: 1px solid var(--c-border-soft);
  border-radius: 6px; text-decoration: none; color: var(--c-text);
}
.personal-stat .label { font-size: 11px; color: var(--c-text-muted); }
.personal-stat .value { font: 600 22px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--c-primary-darker); }
.personal-events { display: flex; flex-direction: column; gap: 2px; flex: 1 1 280px; min-width: 220px; }
.personal-event { display: flex; gap: 8px; font-size: 13px; }
.personal-event .t { color: var(--c-text-muted); font-family: ui-monospace, "SF Mono", Menlo, monospace; min-width: 64px; }
.personal-event .title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.personal-todos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px;
  flex: 1 1 280px; min-width: 240px;
}
.personal-todos-more { grid-column: 1 / -1; }
.personal-todo {
  display: flex; gap: 6px; align-items: baseline;
  font-size: 13px; padding: 1px 4px;
  border-left: 3px solid transparent;
  text-decoration: none; color: var(--c-text);
}
.personal-todo:hover { background: rgba(255,179,0,0.08); }
.personal-todo.p-high { border-left-color: #e53935; }
.personal-todo.p-mid  { border-left-color: var(--c-primary); }
.personal-todo.p-low  { border-left-color: var(--c-text-muted); }
.personal-todo .t { color: var(--c-text-muted); }
.personal-todo .title { font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.personal-todo .due { font-size: 11px; color: var(--c-text-muted); flex: 0 0 auto; }

/* Todo */
.todo-form .form-row { gap: 8px; }
.todo-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: start; }
.todo-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px; border: 1px solid var(--c-border-soft); border-radius: 6px; background: #fff;
}
.todo-item.p-high { border-left: 4px solid #e53935; }
.todo-item.p-mid  { border-left: 4px solid var(--c-primary); }
.todo-item.p-low  { border-left: 4px solid var(--c-text-muted); }
.todo-body { flex: 1; min-width: 0; }
.todo-body .title { font-weight: 500; }
.todo-body .note  { font-size: 13px; color: var(--c-text-muted); margin-top: 2px; }
.todo-body .meta  { font-size: 12px; color: var(--c-text-muted); margin-top: 4px; display: flex; gap: 12px; flex-wrap: wrap; }
.check, .del, .todo-edit-btn {
  border: 1px solid var(--c-border-soft); background: #fff; color: var(--c-text);
  border-radius: 4px; width: 32px; height: 32px; cursor: pointer; padding: 0; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.check:hover { background: var(--c-primary-light); }
.del { color: #e53935; }
.del:hover { background: #fdecee; }
.todo-edit-btn { color: var(--c-primary); font-size: 14px; }
.todo-edit-btn:hover { background: var(--c-primary-light); }
.todo-item.done { opacity: 0.6; }
.todo-item.editing { display: block; padding: 10px; background: #fffde7; border-color: #fbc02d; grid-column: 1 / -1; }
.todo-edit-form .form-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.todo-edit-form .form-row:last-child { margin-bottom: 0; }
@media (max-width: 720px) { .todo-list { grid-template-columns: 1fr; } }

/* メモ */
.memo-form .form-row { gap: 8px; }
.memo-form textarea { font-family: inherit; line-height: 1.5; padding: 6px 8px; border: 1px solid var(--c-border-soft); border-radius: 4px; resize: vertical; }
.memo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.memo-list-compact { margin-top: 8px; }
.memo-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px; border: 1px solid var(--c-border-soft); border-radius: 6px; background: #fff;
  border-left: 4px solid #ffb300;
}
.memo-item .memo-body { white-space: pre-wrap; word-wrap: break-word; line-height: 1.5; }
.memo-item .memo-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: var(--c-text-muted);
}
.memo-item .memo-meta .memo-time { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.memo-item .memo-meta .memo-edited { color: #ef6c00; }
.memo-item .memo-actions { display: flex; gap: 8px; margin-top: 6px; }
.memo-edit-form textarea { font-family: inherit; line-height: 1.5; padding: 6px 8px; border: 1px solid var(--c-border-soft); border-radius: 4px; resize: vertical; }

/* メモ一覧ヘッダ + 検索 */
.memo-list-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 4px;
}
.memo-search { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.memo-search input[type=search] {
  padding: 6px 10px; border: 1px solid var(--c-border-soft); border-radius: 4px;
  min-width: 220px; font-size: 14px;
}
.memo-search-result { font-size: 13px; color: var(--c-primary-darker); margin-left: 6px; }
.memo-tile mark, .memo-detail-body mark { background: #fff59d; color: inherit; padding: 0 1px; border-radius: 2px; }

/* メモタイル一覧 */
.memo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 8px; }
.memo-grid-compact { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.memo-tile-wrap { position: relative; display: flex; }
.memo-tile {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; background: #fff;
  border: 1px solid var(--c-border-soft); border-radius: 6px;
  border-left: 4px solid #1565c0;
  text-decoration: none; color: var(--c-text);
  min-height: 96px; flex: 1;
  transition: box-shadow 0.15s, transform 0.05s;
}
.memo-tile:hover { box-shadow: 0 3px 10px rgba(21,101,192,0.25); border-left-color: #0d47a1; }
.memo-tile:active { transform: scale(0.98); }
.memo-tile-body {
  font-size: 13px; line-height: 1.45; color: var(--c-text);
  flex: 1; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  word-break: break-word;
}
.memo-tile-meta {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 11px; color: var(--c-text-muted);
}
.memo-tile-meta .memo-time { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.memo-tile-meta .memo-edited { color: #ef6c00; }

/* ドラッグ並び替え */
.memo-reorder-hint { font-size: 12px; margin: 6px 0 0; }
.memo-reorder-status { margin-left: 8px; font-weight: 600; }
.memo-reorder-status[data-kind="ok"] { color: #2e7d32; }
.memo-reorder-status[data-kind="err"] { color: #c62828; }
.memo-reorder-status[data-kind="pending"] { color: var(--c-primary-darker); }
.memo-drag-handle {
  position: absolute; top: 4px; right: 4px; z-index: 2;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; color: #b0bec5;
  background: rgba(255,255,255,0.85); border: 1px solid var(--c-border-soft); border-radius: 4px;
  cursor: grab; user-select: none; touch-action: none;
}
.memo-drag-handle:hover { color: #0d47a1; border-color: #1565c0; background: #e3f2fd; }
.memo-drag-handle:active { cursor: grabbing; }
.memo-tile-ghost { opacity: 0.35; }
.memo-tile-ghost .memo-tile { border-style: dashed; }
.memo-tile-chosen .memo-tile { box-shadow: 0 4px 14px rgba(21,101,192,0.4); }
.memo-tile-dragging { transform: rotate(1deg); }

@media (max-width: 720px) {
  .memo-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .memo-tile { padding: 8px; min-height: 80px; }
  .memo-tile-body { -webkit-line-clamp: 4; font-size: 12px; }
  .memo-drag-handle { width: 28px; height: 28px; font-size: 18px; }
}

/* カレンダー */
.event-form .form-row label { display: inline-flex; align-items: center; gap: 6px; min-width: auto; }
.event-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.event-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px; border: 1px solid var(--c-border-soft); border-radius: 6px; background: #fff;
  border-left: 4px solid var(--c-primary);
}
.event-when { min-width: 96px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.event-when .event-date { font-weight: 600; color: var(--c-primary-darker); }
.event-when .event-time { color: var(--c-text-muted); font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.event-body { flex: 1; min-width: 0; }
.event-body .event-title { font-weight: 500; }
.event-body .event-meta { font-size: 12px; color: var(--c-text-muted); margin-top: 2px; }
.event-body .event-remind { color: #ef6c00; }

/* 進捗ページの stats ボックス */
.stat-grid { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.stat-card {
  flex: 1; min-width: 120px;
  background: var(--c-primary-light); border-radius: 6px;
  padding: 10px 12px; text-align: center;
}
.stat-card .label { font-size: 11px; color: var(--c-text-muted); }
.stat-card .value { font: 600 20px/1.2 ui-monospace, "SF Mono", Menlo, monospace; margin-top: 2px; color: var(--c-primary-darker); }

/* ============================================================
 * 月カレンダー (index.php compact / calendar.php full)
 * ============================================================ */
.mcal-nav {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.mcal-nav .mcal-title {
  font: 600 16px/1 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--c-primary-darker); padding: 0 8px;
}
.mcal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 1px; background: var(--c-border-soft);
  border: 1px solid var(--c-border-soft); border-radius: 4px; overflow: hidden;
}
.mcal-dow {
  background: linear-gradient(180deg, #e7f1fb 0%, #d6e6f5 100%);
  color: var(--c-primary-darker);
  text-align: center; padding: 4px; font-size: 12px; font-weight: 600;
}
.mcal-dow.sun { color: #c62828; }
.mcal-dow.sat { color: #1565c0; }
.mcal-cell {
  background: #fff; padding: 4px; min-height: 32px;
  position: relative; overflow: hidden;
}
.mcal-cell.empty { background: #fafbfc; }
.mcal-cell.today { background: #fff8d6; box-shadow: inset 0 0 0 2px #f57c00; }
.mcal-cell.sun .mcal-day { color: #c62828; }
.mcal-cell.sat .mcal-day { color: #1565c0; }
.mcal-day {
  font: 600 13px/1 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--c-text);
}
.mcal-weather {
  position: absolute; top: 2px; right: 4px;
  font-size: 14px; line-height: 1;
  pointer-events: none; user-select: none;
}
@media (max-width: 720px) { .mcal-weather { font-size: 12px; top: 1px; right: 2px; } }

/* compact (index 用): バッジで件数だけ表示 */
.mcal-compact .mcal-cell { min-height: 44px; }
.mcal-compact .mcal-badge {
  display: inline-block; margin-top: 2px; margin-right: 2px;
  padding: 0 4px; min-width: 16px; height: 14px;
  border-radius: 7px; font-size: 10px; line-height: 14px; text-align: center;
}
.mcal-compact .mcal-badge.ev { background: var(--c-primary); color: #fff; }
.mcal-compact .mcal-badge.td { background: #fff; color: var(--c-text-muted); border: 1px solid var(--c-border-soft); }

/* full (calendar 用): タイトル付き */
.mcal-full .mcal-cell { min-height: 80px; }
.mcal-full .mcal-event {
  font-size: 11px; margin-top: 2px; padding: 1px 3px;
  background: var(--c-primary-light); color: var(--c-primary-darker);
  border-radius: 3px;
  /* セル幅で自然にクリップ (ellipsis ... は出さない、文字をできるだけ多く見せる) */
  white-space: nowrap; overflow: hidden;
}
/* filled=0 の予定は塗り潰しを抜く (繰り返しや控えめ表示したい予定向け) */
.mcal-full .mcal-event.unfilled {
  background: transparent;
  padding-left: 0;
}
.mcal-full .mcal-event .t {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; margin-right: 3px;
}
.mcal-full .mcal-todo {
  font-size: 11px; margin-top: 2px; padding: 1px 3px;
  color: var(--c-text-muted);
  white-space: nowrap; overflow: hidden;
}
.mcal-full .mcal-more {
  font-size: 10px; color: var(--c-text-muted); margin-top: 2px;
}

/* タップ可能セル + 選択中ハイライト */
.mcal-cell[data-date] { cursor: pointer; }
.mcal-cell.selected { outline: 2px solid var(--c-accent); outline-offset: -2px; z-index: 1; }

/* 選択日の予定パネル */
.mcal-selected-panel {
  margin-top: 12px; padding: 10px 12px;
  background: var(--c-primary-light); border-radius: 6px; border: 1px solid #90caf9;
}
.mcal-selected-panel h3 { margin: 0 0 8px; font-size: 14px; color: var(--c-primary-darker); }
.mcal-selected-panel h4 { margin: 12px 0 4px; font-size: 13px; color: var(--c-primary-darker); }
.mcal-selected-panel p.muted { margin: 0; }
.mcal-sel-list { list-style: none; margin: 0; padding: 0; }
.mcal-sel-row {
  display: flex; gap: 8px; align-items: baseline;
  padding: 5px 0; font-size: 13px;
  border-bottom: 1px solid #bbdefb;
}
.mcal-sel-row:last-child { border-bottom: 0; }
.mcal-sel-row .t {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--c-primary-darker); min-width: 56px; font-weight: 600;
}
.mcal-sel-row .title { flex: 1; word-break: break-word; }
.mcal-sel-row .loc { font-size: 11px; color: var(--c-text-muted); white-space: nowrap; }
.mcal-sel-row .rec { font-size: 11px; }
.mcal-sel-row.mcal-sel-event { cursor: pointer; transition: background .12s; }
.mcal-sel-row.mcal-sel-event:hover { background: rgba(255,255,255,0.6); }
.mcal-sel-row.mcal-sel-event .edit-hint { color: var(--c-text-muted); opacity: 0.55; font-size: 12px; }
.mcal-sel-row.mcal-sel-event:hover .edit-hint { opacity: 1; color: var(--c-primary-dark); }
.mcal-sel-note {
  margin-left: 64px; font-size: 12px; color: var(--c-text-muted);
  padding: 2px 0;
}

@media (max-width: 720px) {
  .mcal-full .mcal-cell { min-height: 56px; padding: 2px; }
  .mcal-full .mcal-event,
  .mcal-full .mcal-todo { font-size: 10px; padding: 0 2px; }
  .mcal-full .mcal-event .t { display: none; } /* スマホでは時刻省略してタイトルに字数を回す */
  /* セル自体は overflow:hidden なので、入りきらない予定は自然にクリップされる。
     全件はタップ→下のパネルで見られる */
  .mcal-selected-panel { padding: 8px 10px; }
  .mcal-sel-row { font-size: 13px; gap: 6px; }
  .mcal-sel-row .t { min-width: 48px; }
}

/* topbar 天気 */
.topbar-weather {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; padding: 4px 12px;
  background: rgba(255,255,255,0.18); border-radius: 16px;
  margin-left: 8px;
}
.topbar-weather .ic { font-size: 16px; }
.topbar-weather .t { font-weight: 600; font-variant-numeric: tabular-nums; }
.topbar-weather .r { font-size: 12px; opacity: 0.92; color: #fff8e1; }
.topbar-weather .a { font-size: 11px; opacity: 0.78; }

@media (max-width: 720px) {
  .topbar-weather { padding: 3px 8px; gap: 5px; }
  .topbar-weather .a, .topbar-weather .r { display: none; }
}

/* 表示テーマ切替ボタン (topbar) — ライト/ダーク共通でトップバー上に置くため白系で固定 */
.theme-toggle {
  font-size: 15px; line-height: 1; cursor: pointer; padding: 5px 9px;
  background: rgba(255,255,255,0.16); color: #fff;
  border: 1px solid rgba(255,255,255,0.3); border-radius: 8px;
  -webkit-tap-highlight-color: transparent; transition: background .15s;
}
.theme-toggle:hover { background: rgba(255,255,255,0.3); box-shadow: none; }

/* クイック予定 / Todo 入力カードの色違い */
.quick-form-card.calendar-card { background: linear-gradient(180deg, #fff3e0 0%, #ffffff 100%); border-left-color: #ff9800; }
.quick-form-card.todo-card     { background: linear-gradient(180deg, #f3e5f5 0%, #ffffff 100%); border-left-color: #ab47bc; }

/* 予定アイテムの繰り返しチップ + 削除ボタン群 */
.event-recurrence {
  display: inline-block; font-size: 11px; padding: 1px 6px; margin-left: 6px;
  background: #fff3e0; color: #ef6c00; border-radius: 10px; vertical-align: middle;
}
.event-recurrence.muted { background: #f0f0f0; color: var(--c-text-muted); }

/* 繰り返し予定の編集スコープ選択 (この予定だけ / 繰り返しすべて) */
.event-scope {
  margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--c-border-soft);
  border-radius: 6px; background: #fff8e1;
}
.event-scope legend { font-size: 12px; font-weight: 600; color: #ef6c00; padding: 0 4px; }
.event-scope label { margin-right: 18px; font-size: 14px; cursor: pointer; }

.event-actions { display: flex; flex-direction: column; gap: 4px; }
.event-actions .del.danger { color: #b71c1c; }
.event-actions .del.danger:hover { background: #ffebee; }

/* === claude-air8 プロジェクト進捗 (progress.php) === */
.proj-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 12px 0 0; }
.proj-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.proj-cards.proj-cards-compact { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.proj-cards.proj-cards-compact .proj-card { padding: 8px 10px; }
.proj-cards.proj-cards-compact .proj-card h3 { font-size: 13px; margin: 0 0 4px; }
.proj-cards.proj-cards-compact .proj-card .proj-title { font-size: 12px; }
.proj-cards.proj-cards-compact .proj-card .proj-commits { font-size: 11px; }

/* 週間天気 */
.week-weather-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
}
.ww-day {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px; background: #f7fafd;
  border: 1px solid var(--c-border-soft); border-radius: 6px;
  text-align: center; font-size: 12px;
}
.ww-day.is-now { background: linear-gradient(180deg, #fff8e1 0%, #ffffff 100%); border-color: #ffd54f; }
.ww-date { display: flex; align-items: baseline; gap: 4px; }
.ww-weekday { font-weight: 600; }
.ww-weekday.wd-土 { color: #1565c0; }
.ww-weekday.wd-日 { color: #c62828; }
.ww-day-num { font-size: 11px; color: var(--c-text-muted); font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.ww-icon { font-size: 22px; line-height: 1; }
.ww-temp { display: flex; gap: 4px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; }
.ww-temp .th { color: #c62828; font-weight: 600; }
.ww-temp .tl { color: #1565c0; }
.ww-pop { font-size: 11px; color: var(--c-text-muted); }
.ww-weather { font-size: 10px; color: var(--c-text-muted); line-height: 1.2; word-break: break-all; }
@media (max-width: 720px) {
  .week-weather-grid { grid-template-columns: repeat(7, 1fr); gap: 3px; }
  .ww-day { padding: 5px 2px; font-size: 10px; }
  .ww-icon { font-size: 18px; }
  .ww-weather { display: none; }
}
.proj-card {
  background: #fff; border: 1px solid var(--c-border-soft); border-radius: 6px;
  padding: 12px 14px; box-shadow: 0 1px 2px rgba(30,80,150,0.04);
  display: flex; flex-direction: column;
}
.proj-card.is-dirty { border-left: 4px solid var(--c-accent); padding-left: 10px; }
.proj-card h3 {
  margin: 0 0 6px; font-size: 14px; color: var(--c-primary-darker);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.proj-card h3 code { background: var(--c-primary-light); color: var(--c-primary-darker); padding: 1px 6px; }
.proj-card .dirty-tag { color: #b54708; font-size: 12px; font-weight: 600; }
.proj-card .proj-title { font-weight: 600; font-size: 13px; color: var(--c-text); margin-bottom: 6px; }
.proj-card .proj-overview { font-size: 12.5px; color: #455060; margin: 0 0 8px; line-height: 1.5; }
.proj-card .proj-overview.empty { color: var(--c-text-muted); font-style: italic; }
.proj-card .proj-commits {
  list-style: none; padding: 6px 0 0; margin: auto 0 0;
  border-top: 1px dashed var(--c-border-soft); font-size: 11.5px;
}
.proj-card .proj-commits li { display: flex; gap: 8px; align-items: baseline; margin: 2px 0; }
.proj-card .proj-commits .ago { color: var(--c-text-muted); flex-shrink: 0; min-width: 6.5em; }
.proj-card .proj-commits .subj { flex: 1; word-break: break-word; color: #344155; }

@media (max-width: 720px) {
  .proj-cards { grid-template-columns: 1fr; }
}

/* ============================================================
 * progress.php — リッチ表示 (オシャレ版 2026-05-11)
 * ============================================================ */

/* ヒーロー(統計)カード */
.proj-hero {
  background:
    radial-gradient(1200px 200px at 0% 0%, rgba(33,150,243,0.10), transparent 60%),
    radial-gradient(800px 220px at 100% 0%, rgba(255,152,0,0.10), transparent 60%),
    linear-gradient(135deg, #f8fbff 0%, #eef5fc 100%);
  border: 1px solid #cfe1f5;
}
.proj-hero-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.proj-hero-title h2 {
  margin: 0 0 2px; font-size: 18px; color: var(--c-primary-darker);
  display: flex; align-items: center; gap: 6px;
}
.proj-hero-sub {
  margin: 2px 0 0; font-size: 12px;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.proj-hero-link { white-space: nowrap; }
.proj-hero-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.proj-refresh-btn { white-space: nowrap; }
.proj-refresh-btn:disabled { opacity: 0.65; cursor: progress; }

.proj-hero-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.proj-stat {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 12px;
  background: #fff; border: 1px solid transparent;
  box-shadow: 0 2px 6px rgba(30,80,150,0.06);
  transition: transform .15s, box-shadow .15s;
  overflow: hidden;
}
.proj-stat::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--tone-a, #e3f2fd) 0%, transparent 70%);
  opacity: 0.55; pointer-events: none;
}
.proj-stat > * { position: relative; }
.proj-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(30,80,150,0.14);
}
.proj-stat-icon {
  font-size: 22px; line-height: 1; flex-shrink: 0;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--tone-a, #2196f3), var(--tone-b, #1565c0));
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.10);
}
.proj-stat-body { min-width: 0; }
.proj-stat-value {
  font: 800 28px/1 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--tone-text, #0d47a1); letter-spacing: -0.5px;
}
.proj-stat-label {
  font-size: 11px; color: var(--c-text-muted); margin-top: 4px;
  letter-spacing: 0.3px; font-weight: 600;
}

.proj-stat[data-tone="primary"] {
  --tone-a: #42a5f5; --tone-b: #1565c0; --tone-text: #0d47a1;
}
.proj-stat[data-tone="warn"] {
  --tone-a: #ffb74d; --tone-b: #f57c00; --tone-text: #e65100;
}
.proj-stat[data-tone="accent"] {
  --tone-a: #ffd54f; --tone-b: #ffa000; --tone-text: #b54708;
}
.proj-stat[data-tone="ok"] {
  --tone-a: #81c784; --tone-b: #388e3c; --tone-text: #1b5e20;
}
.proj-stat[data-tone="info"] {
  --tone-a: #f06292; --tone-b: #c2185b; --tone-text: #ad1457;
}

/* ツールバー(検索 + フィルタタブ) */
.proj-toolbar-card { padding: 10px 12px; }
.proj-toolbar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.proj-filter-input-wrap {
  position: relative; flex: 1; min-width: 220px;
}
.proj-filter-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-size: 14px; opacity: 0.6; pointer-events: none;
}
.proj-filter-input {
  width: 100%; padding: 8px 10px 8px 32px;
  border: 1px solid var(--c-border-soft); border-radius: 20px;
  font-size: 13px; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.proj-filter-input:focus {
  outline: none; border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(30,136,229,0.15);
}
.proj-filter-tabs {
  display: flex; gap: 4px; background: #f0f4f9; padding: 3px;
  border-radius: 20px;
}
.proj-filter-tab {
  border: none; background: transparent; cursor: pointer;
  padding: 6px 12px; border-radius: 16px;
  font-size: 12px; color: var(--c-text-muted);
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .12s, color .12s;
}
.proj-filter-tab:hover { color: var(--c-primary-dark); }
.proj-filter-tab.is-active {
  background: #fff; color: var(--c-primary-darker); font-weight: 600;
  box-shadow: 0 1px 3px rgba(13,71,161,0.10);
}
.proj-filter-count {
  display: inline-block; min-width: 18px; padding: 0 6px;
  background: rgba(13,71,161,0.10); color: var(--c-primary-darker);
  border-radius: 10px; font-size: 11px; font-weight: 600;
  text-align: center; line-height: 16px;
}
.proj-filter-tab.is-active .proj-filter-count {
  background: var(--c-primary); color: #fff;
}

/* プロジェクト進捗 — グループ別セクション (claude-air8 / Mac サーバー) */
.proj-section + .proj-section { margin-top: 22px; }
.proj-section-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 10px; font-size: 14px; font-weight: 700;
  color: var(--c-primary-darker);
}
.proj-section-icon { font-size: 16px; }
.proj-section-count {
  display: inline-block; min-width: 18px; padding: 0 6px;
  background: rgba(13,71,161,0.10); color: var(--c-primary-darker);
  border-radius: 10px; font-size: 11px; font-weight: 600;
  text-align: center; line-height: 18px;
}
.proj-section-note {
  font-size: 11px; font-weight: 400; color: var(--c-text-muted);
}

/* リッチ版 プロジェクトカード */
.proj-cards-rich { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.proj-cards-rich .proj-card {
  --accent: #1e88e5;
  --accent-soft: #e3f2fd;
  --accent-deep: #0d47a1;
  position: relative;
  padding: 14px 16px 14px 18px;
  border: 1px solid #e2eaf2;
  border-radius: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 35%, #fff) 0%, #fff 60px),
    #fff;
  box-shadow: 0 2px 6px rgba(30,80,150,0.06);
  transition: transform .15s, box-shadow .15s, border-color .15s;
  overflow: hidden;
}
.proj-cards-rich .proj-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 70%, #fff) 0%,
    var(--accent) 100%);
}
.proj-cards-rich .proj-card.is-dirty::before {
  background: linear-gradient(180deg, #ffb74d 0%, #fb8c00 60%, #e65100 100%);
  width: 5px;
  box-shadow: 0 0 8px rgba(251,140,0,0.45);
}
.proj-cards-rich .proj-card.is-dirty {
  background:
    linear-gradient(180deg, #fff8e1 0%, #fff 60px),
    #fff;
}
.proj-cards-rich .proj-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(30,80,150,0.14),
              0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, #b0c8e0);
}

.proj-cards-rich .proj-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px; flex-wrap: wrap;
}
.proj-cards-rich .proj-card-path-row {
  display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1;
}
.proj-cards-rich .proj-card-path-icon { font-size: 14px; opacity: 0.7; }
.proj-cards-rich .proj-card-path {
  font: 600 13px/1.2 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--accent-deep, var(--c-primary-darker));
  background: var(--accent-soft, var(--c-primary-light));
  border: 1px solid color-mix(in srgb, var(--accent, #1e88e5) 22%, transparent);
  padding: 3px 8px; border-radius: 6px;
  word-break: break-all;
}
.proj-cards-rich .proj-card-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600;
  white-space: nowrap;
}
.proj-cards-rich .proj-card-badge.dirty {
  background: #fff3e0; color: #e65100; border: 1px solid #ffcc80;
}
.proj-cards-rich .proj-card-badge.clean {
  background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7;
}

.proj-cards-rich .proj-card-age {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--c-text-muted);
  white-space: nowrap;
}
.proj-cards-rich .proj-card-age-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #cfd8dc;
}
.proj-cards-rich .proj-card-age.age-hot {
  color: #c62828; font-weight: 600;
}
.proj-cards-rich .proj-card-age.age-hot .proj-card-age-dot {
  background: #ef5350; box-shadow: 0 0 0 3px rgba(239,83,80,0.18);
}
.proj-cards-rich .proj-card-age.age-warm .proj-card-age-dot { background: #ffa726; }
.proj-cards-rich .proj-card-age.age-cold .proj-card-age-dot { background: #b0bec5; }

.proj-cards-rich .proj-card-title {
  font-weight: 700; font-size: 14px;
  color: var(--accent-deep, var(--c-text));
  margin: 0 0 6px;
}
.proj-cards-rich .proj-card-overview {
  font-size: 12.5px; color: #455060; margin: 0 0 10px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.proj-cards-rich .proj-card-overview.empty {
  color: var(--c-text-muted); font-style: italic;
}

/* タイムライン風コミット履歴 */
.proj-cards-rich .proj-card-timeline {
  list-style: none; padding: 10px 0 0; margin: auto 0 0;
  border-top: 1px dashed #e0e8f0;
  font-size: 11.5px;
  position: relative;
}
.proj-cards-rich .proj-card-tl-item {
  display: grid; grid-template-columns: 10px 5.5em 1fr; gap: 6px;
  align-items: baseline; padding: 3px 0;
  position: relative;
}
.proj-cards-rich .proj-card-tl-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #cfd8dc; align-self: center;
  margin-top: 1px;
}
.proj-cards-rich .proj-card-tl-item:first-child .proj-card-tl-dot {
  background: var(--accent, var(--c-primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #1e88e5) 22%, transparent);
}
.proj-cards-rich .proj-card-tl-item:nth-child(2) .proj-card-tl-dot {
  background: color-mix(in srgb, var(--accent, #1e88e5) 60%, #cfd8dc);
}
.proj-cards-rich .proj-card-tl-when {
  color: var(--c-text-muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
}
.proj-cards-rich .proj-card-tl-msg {
  color: #344155; word-break: break-word; line-height: 1.45;
}
.proj-cards-rich .proj-card-no-commits {
  margin: 10px 0 0; padding-top: 10px;
  border-top: 1px dashed #e0e8f0;
  font-size: 11.5px; font-style: italic;
}

.proj-empty-msg {
  text-align: center; padding: 24px; font-size: 13px;
}

@media (max-width: 720px) {
  .proj-cards-rich { grid-template-columns: 1fr; gap: 10px; }
  .proj-cards-rich .proj-card { padding: 12px 14px; }
  .proj-toolbar { flex-direction: column; align-items: stretch; }
  .proj-filter-tabs { justify-content: center; flex-wrap: wrap; }
  .proj-hero-stats { grid-template-columns: repeat(2, 1fr); }
  .proj-stat { padding: 10px 12px; gap: 10px; }
  .proj-stat-icon { width: 36px; height: 36px; font-size: 20px; }
  .proj-stat-value { font-size: 22px; }
}

/* links.php — リンク集 */
.link-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 600px) { .link-groups { grid-template-columns: 1fr; } }
.link-group { }
.link-group-title {
  margin: 0 0 8px; padding: 4px 10px;
  font-size: 14px; font-weight: 700; color: var(--c-primary-darker);
  border-left: 4px solid var(--c-primary); background: var(--c-primary-light);
  border-radius: 3px;
}
.link-list { list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.link-item { margin: 0; position: relative; }
.link-edit-icon {
  display: inline-block; text-decoration: none;
  color: var(--c-text-muted); font-size: 13px; line-height: 1;
  padding: 2px 4px; border-radius: 3px; opacity: .35;
  transition: opacity .15s, color .15s, background .15s;
}
.link-edit-icon:hover { opacity: 1; color: var(--c-primary); background: var(--c-primary-light); }
.link-edit-icon-corner { position: absolute; top: 4px; right: 4px; z-index: 2; }
.link-drag-handle {
  position: absolute; top: 4px; left: 8px; z-index: 2;
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  cursor: grab; color: #90a4ae; font-size: 14px; font-weight: bold; user-select: none;
  border-radius: 4px; background: rgba(255,255,255,.7); opacity: .35;
  transition: opacity .15s, color .15s, background .15s;
}
.link-item:hover .link-drag-handle { opacity: 1; }
.link-drag-handle:hover { color: var(--c-primary); background: var(--c-primary-light); }
.link-drag-handle:active { cursor: grabbing; }
/* 空グループも drop target に: min-height + dashed border (canReorder のときだけ) */
.link-list-sortable:empty {
  min-height: 50px; border: 1px dashed #cfd8dc; border-radius: 6px;
  background: #fafbfc; margin-bottom: 4px;
}
.link-tile-ghost { opacity: .4; }
.link-tile-chosen { background: #e3f2fd !important; }
.link-tile-dragging { box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.link-anchor {
  display: block; padding: 12px 14px;
  background: #fff; border: 1px solid var(--c-border-soft); border-left: 4px solid var(--c-primary);
  border-radius: 6px; text-decoration: none; color: var(--c-text);
  box-shadow: 0 1px 2px rgba(30,80,150,0.04);
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s;
}
.link-anchor:hover {
  transform: translateY(-1px); box-shadow: 0 4px 10px rgba(21,101,192,0.15);
  border-left-color: var(--c-primary-darker);
}
.link-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.link-title { font-weight: 700; color: var(--c-primary-darker); flex: 1; }
.link-url   { font-size: 12px; color: var(--c-text-muted); word-break: break-all; }
.link-note  { font-size: 12px; color: var(--c-text-muted); margin-top: 4px; }
.link-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 1px 8px; border-radius: 10px; letter-spacing: .5px; flex-shrink: 0;
}
.link-badge.badge-prod  { background: #e8f5e9; color: #1b5e20; border: 1px solid #66bb6a; }
.link-badge.badge-demo  { background: #fff3e0; color: #bf360c; border: 1px solid #ffb74d; }
.link-badge.badge-other { background: #eceff1; color: #37474f; border: 1px solid #90a4ae; }

/* ============================================================
 * ダークテーマ — <html data-theme="dark"> のとき適用
 *   layout.php の inline script が cookie (itaku_theme) / OS 設定から
 *   data-theme を付与する。ライト配色 (:root) には触れず、ここで上書き。
 *   ページ固有の inline <style> のクラスも、[data-theme] のぶん詳細度が
 *   1 段上がるため、このブロックから一括上書きできる。
 * ============================================================ */
[data-theme="dark"] {
  --c-primary:        #1e88e5;
  --c-primary-dark:   #1565c0;
  --c-primary-darker: #9ec9f5;
  --c-primary-light:  #16314c;
  --c-accent:         #ffb300;
  --c-border:         #3a4655;
  --c-border-soft:    #2f3a48;
  --c-bg:             #0f141b;
  --c-bg-row-alt:     #1f2935;
  --c-row-hover:      #2a3340;
  --c-text:           #dde3ea;
  --c-text-muted:     #93a1b2;
  --c-surface:        #1b222d;
  --c-surface-2:      #232d3a;
  --c-surface-sunk:   #141a22;
  color-scheme: dark;
}

/* シェル (topbar / nav) */
[data-theme="dark"] header.topbar {
  background: linear-gradient(90deg, #1a4067 0%, #153a5e 50%, #102c49 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,0.55);
}
[data-theme="dark"] nav.menu {
  background: #102c49;
  box-shadow: 0 2px 4px rgba(0,0,0,0.45);
}

/* 白サーフェス → ダークサーフェス */
[data-theme="dark"] .card,
[data-theme="dark"] table,
[data-theme="dark"] .kpi,
[data-theme="dark"] .todo-item,
[data-theme="dark"] .memo-item,
[data-theme="dark"] .memo-tile,
[data-theme="dark"] .event-item,
[data-theme="dark"] .link-anchor,
[data-theme="dark"] .proj-card,
[data-theme="dark"] .proj-stat,
[data-theme="dark"] .cal td,
[data-theme="dark"] .mcal-cell,
[data-theme="dark"] .news-digest-group,
[data-theme="dark"] .news-item,
[data-theme="dark"] .ads-detail-row,
[data-theme="dark"] .note-category-block,
[data-theme="dark"] .note-file-block {
  background: var(--c-surface);
}
[data-theme="dark"] table { border-color: var(--c-border); }
[data-theme="dark"] .proj-cards-rich .proj-card,
[data-theme="dark"] .proj-cards-rich .proj-card.is-dirty {
  background: var(--c-surface);
  border-color: var(--c-border-soft);
}

/* テーブルヘッダ系グラデ */
[data-theme="dark"] thead th,
[data-theme="dark"] .cal th,
[data-theme="dark"] .mcal-dow {
  background: linear-gradient(180deg, #25384a 0%, #1d2c3a 100%);
}

/* フォーム部品 */
[data-theme="dark"] input[type=text],
[data-theme="dark"] input[type=number],
[data-theme="dark"] input[type=date],
[data-theme="dark"] input[type=time],
[data-theme="dark"] input[type=email],
[data-theme="dark"] input[type=search],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--c-surface-2);
  border-color: var(--c-border);
  color: var(--c-text);
}
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus { outline-color: var(--c-primary); }
[data-theme="dark"] button.secondary,
[data-theme="dark"] .btn.secondary,
[data-theme="dark"] .check,
[data-theme="dark"] .del,
[data-theme="dark"] .todo-edit-btn { background: var(--c-surface-2); }
[data-theme="dark"] .del:hover { background: #3a1f22; }
[data-theme="dark"] .form-row label { color: var(--c-text); }

/* フラッシュ */
[data-theme="dark"] .flash.ok  { background: #16301c; border-color: #3c7a44; color: #a8d8ad; }
[data-theme="dark"] .flash.err { background: #3a1d1f; border-color: #a14a48; color: #efb0ad; }

/* ショートカットタイル */
[data-theme="dark"] .dash-tile {
  background: var(--c-surface); color: var(--c-primary-darker);
  border-color: var(--c-border-soft);
}
[data-theme="dark"] .dash-tile.tile-input    { background: #152d44; border-color: #2f5d86; color: #bcd6f0; }
[data-theme="dark"] .dash-tile.tile-list     { background: #16301f; border-color: #3a6b46; color: #b3d6b8; }
[data-theme="dark"] .dash-tile.tile-report   { background: #352716; border-color: #8a6a35; color: #e9c393; }
[data-theme="dark"] .dash-tile.tile-master   { background: #2b1f36; border-color: #6e4f86; color: #d2b6e0; }
[data-theme="dark"] .dash-tile.tile-external { background: #222a30; border-color: #4f5b65; color: #c0cad1; }

/* クイック入力カード (グラデ → フラット) */
[data-theme="dark"] .quick-form-card,
[data-theme="dark"] .quick-form-card.calendar-card,
[data-theme="dark"] .quick-form-card.todo-card,
[data-theme="dark"] .quick-form-card.daily-card,
[data-theme="dark"] .quick-form-card.memo-card,
[data-theme="dark"] .quick-form-card.mail-digest,
[data-theme="dark"] .quick-form-card.news-digest,
[data-theme="dark"] .personal-summary { background: var(--c-surface); }
[data-theme="dark"] .personal-stat { background: var(--c-surface-2); }

/* カレンダー */
[data-theme="dark"] .cal td.empty,
[data-theme="dark"] .mcal-cell.empty { background: var(--c-surface-sunk); }
[data-theme="dark"] .cal td.today,
[data-theme="dark"] .mcal-cell.today { background: #33301a; }
[data-theme="dark"] .cal td.today:hover { background: #3f3b22; }
[data-theme="dark"] .mcal-compact .mcal-badge.td { background: var(--c-surface-2); }
[data-theme="dark"] .mcal-selected-panel { border-color: var(--c-border); }
[data-theme="dark"] .mcal-sel-row { border-bottom-color: var(--c-border); }
[data-theme="dark"] .mcal-sel-row.mcal-sel-event:hover { background: rgba(255,255,255,0.07); }
[data-theme="dark"] tr.weekend td.date-cell  { background: #3a2222 !important; }
[data-theme="dark"] tr.saturday td.date-cell { background: #16314c !important; }
[data-theme="dark"] tr.today td               { background: #33301a !important; }
[data-theme="dark"] tr.today td.date-cell      { background: #5a4a1c !important; }
[data-theme="dark"] tr.review-row td          { background: #33301a !important; }
[data-theme="dark"] tr.review-row:hover td    { background: #403a1f !important; }
[data-theme="dark"] .cal th.sat,
[data-theme="dark"] .cal td.sat .cal-day,
[data-theme="dark"] .mcal-dow.sat,
[data-theme="dark"] .mcal-cell.sat .mcal-day,
[data-theme="dark"] .ww-weekday.wd-土,
[data-theme="dark"] .ww-temp .tl { color: #6db0ec; }
[data-theme="dark"] .kind-restaurant,
[data-theme="dark"] .cal-event.restaurant { background: #332714; color: #e0a86a; }

/* todo / event */
[data-theme="dark"] .todo-item.editing { background: #312c14; border-color: #7a6420; }
[data-theme="dark"] .event-scope { background: #2e2a16; }
[data-theme="dark"] .event-recurrence { background: #332714; color: #e0a86a; }
[data-theme="dark"] .event-recurrence.muted { background: #2a2f36; color: var(--c-text-muted); }
[data-theme="dark"] .event-actions .del.danger:hover { background: #3a1f22; }

/* progress.php */
[data-theme="dark"] .proj-hero {
  background: linear-gradient(135deg, #18222e 0%, #141c27 100%);
  border-color: var(--c-border-soft);
}
[data-theme="dark"] .proj-stat::before { opacity: 0.16; }
[data-theme="dark"] .proj-stat[data-tone="primary"] { --tone-text: #9ec9f5; }
[data-theme="dark"] .proj-stat[data-tone="warn"]    { --tone-text: #ffc08a; }
[data-theme="dark"] .proj-stat[data-tone="accent"]  { --tone-text: #ffd089; }
[data-theme="dark"] .proj-stat[data-tone="ok"]      { --tone-text: #a8d8ad; }
[data-theme="dark"] .proj-stat[data-tone="info"]    { --tone-text: #f3a0c0; }
[data-theme="dark"] .proj-filter-input { background: var(--c-surface-2); }
[data-theme="dark"] .proj-filter-tabs { background: var(--c-surface-sunk); }
[data-theme="dark"] .proj-filter-tab.is-active { background: var(--c-surface-2); }
[data-theme="dark"] .proj-cards-rich .proj-card-path {
  background: #1f2c3a; color: #bcd3ee; border-color: var(--c-border);
}
[data-theme="dark"] .proj-card .proj-overview,
[data-theme="dark"] .proj-cards-rich .proj-card-overview,
[data-theme="dark"] .proj-cards-rich .proj-card-tl-msg,
[data-theme="dark"] .proj-card .proj-commits .subj { color: #aeb9c6; }
[data-theme="dark"] .proj-cards-rich .proj-card-title { color: var(--c-primary-darker); }
[data-theme="dark"] .proj-cards-rich .proj-card-timeline,
[data-theme="dark"] .proj-cards-rich .proj-card-no-commits { border-top-color: var(--c-border-soft); }

/* 週間天気 */
[data-theme="dark"] .ww-day { background: var(--c-surface-2); }
[data-theme="dark"] .ww-day.is-now { background: #2e2a16; border-color: #7a6420; }

/* links */
[data-theme="dark"] .link-list-sortable:empty { background: var(--c-surface-sunk); border-color: var(--c-border); }
[data-theme="dark"] .link-tile-chosen { background: #1c3450 !important; }
[data-theme="dark"] .link-drag-handle { background: rgba(255,255,255,0.08); }

/* memo */
[data-theme="dark"] .memo-drag-handle { background: var(--c-surface-2); }
[data-theme="dark"] .memo-tile mark,
[data-theme="dark"] .memo-detail-body mark { background: #5c4e15; }
[data-theme="dark"] .memo-body a,
[data-theme="dark"] .memo-detail-body a,
[data-theme="dark"] .memo-tile-body a,
[data-theme="dark"] .note-body a,
[data-theme="dark"] .note-toggle-body a { color: #5fa8e8; }

/* メールダイジェスト (index.php) */
[data-theme="dark"] .mail-digest .mail-inbox { background: var(--c-surface-2); border-color: var(--c-border-soft); }
[data-theme="dark"] .mail-digest .mail-unread { background: var(--c-surface); color: var(--c-text-muted); }
[data-theme="dark"] .mail-digest .mail-unread.has-unread { background: #16314c; color: #7fb8ee; }
[data-theme="dark"] .mail-digest .mail-latest li { border-top-color: var(--c-border-soft); }
[data-theme="dark"] .mail-digest .mail-latest-link:hover,
[data-theme="dark"] .mail-digest .mail-inbox-label:hover { background: var(--c-surface); }
[data-theme="dark"] .mail-digest .mail-latest li.unread .subject { color: #b3bdf0; }
[data-theme="dark"] .mail-digest .mail-latest .subject { color: var(--c-text); }

/* ニュースダイジェスト (index.php) */
[data-theme="dark"] .news-digest-group { border-color: var(--c-border-soft); }
[data-theme="dark"] .news-digest-list li { border-top-color: var(--c-border-soft); }
[data-theme="dark"] .news-digest-link:hover { background: var(--c-surface-2); }
[data-theme="dark"] .news-digest-title { color: var(--c-text); }

/* ダッシュボード並び替えハンドル (index.php) */
[data-theme="dark"] .ds-drag-handle { background: #2e2a16; border-color: #7a6420; }

/* news.php */
[data-theme="dark"] .news-lang-tabs { border-bottom-color: var(--c-border); }
[data-theme="dark"] .news-source-tab { background: var(--c-surface-2); color: var(--c-text); border-color: var(--c-border); }
[data-theme="dark"] .news-source-tab:hover { background: var(--c-surface); }
[data-theme="dark"] .news-item-title a { color: var(--c-primary-darker); }
[data-theme="dark"] .news-item-summary { color: #aeb9c6; }
[data-theme="dark"] .news-del-btn { border-color: var(--c-border); }
[data-theme="dark"] .news-link { color: #5fa8e8; }
[data-theme="dark"] .news-link-trans { color: #e986b3; }

/* ads.php */
[data-theme="dark"] .ads-empty { background: #2e2a16; }
[data-theme="dark"] .ads-kpi,
[data-theme="dark"] .ads-ovk { background: var(--c-surface-2); }
[data-theme="dark"] .ads-kpi-spend,
[data-theme="dark"] .ads-ovk-spend { background: #2e2716; }
[data-theme="dark"] .ads-kpi-value,
[data-theme="dark"] .ads-ovk .val { color: var(--c-primary-darker); }
[data-theme="dark"] .ads-kpi-spend .ads-kpi-value,
[data-theme="dark"] .ads-ovk-spend .val,
[data-theme="dark"] .ads-ovl-spend { color: #ff9d57; }
[data-theme="dark"] .ads-overview-top { border-top-color: var(--c-border-soft); }
[data-theme="dark"] .ads-overview-list li { border-bottom-color: var(--c-border-soft); }
[data-theme="dark"] .ads-filter-tab { background: var(--c-surface-2); color: var(--c-text); }
[data-theme="dark"] .ads-table th,
[data-theme="dark"] .ads-table td,
[data-theme="dark"] .ads-daily-table th,
[data-theme="dark"] .ads-daily-table td { border-bottom-color: var(--c-border-soft); }
[data-theme="dark"] .ads-daily-table th { background: var(--c-surface-2); }
[data-theme="dark"] .ads-thumb { border-color: var(--c-border); }
[data-theme="dark"] .ads-thumb-empty { background: var(--c-surface-sunk); }
[data-theme="dark"] .ads-name a { color: #5fa8e8; }
[data-theme="dark"] .ads-tag-boost { background: #3a1f2b; color: #e986b3; }
[data-theme="dark"] .ads-status { background: var(--c-surface-2); color: var(--c-text); }
[data-theme="dark"] .ads-status-active { background: #16301c; color: #8bc790; }
[data-theme="dark"] .ads-status-paused { background: #332714; color: #ff9d57; }
[data-theme="dark"] .ads-status-review { background: #2e2a16; color: #e0b54a; }

/* ノート一覧 (notes.php) */
[data-theme="dark"] .note-cat-name { color: var(--c-text); }
[data-theme="dark"] .note-list-item { border-color: var(--c-border-soft); }
[data-theme="dark"] .note-list-item:nth-child(odd)  { background: var(--c-surface); }
[data-theme="dark"] .note-list-item:nth-child(even) { background: var(--c-surface-2); }
[data-theme="dark"] .note-list-item:hover { background: #1f3327; border-color: #3a6b46; }
[data-theme="dark"] .note-list-link { color: var(--c-text); }
[data-theme="dark"] .note-drag-handle { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .note-tile-chosen { background: #1c3450 !important; }

/* ノート編集・閲覧 (note_edit.php / note_view.php) */
[data-theme="dark"] .note-editor { background: var(--c-surface); }
[data-theme="dark"] .note-toolbar { background: var(--c-surface-2); border-bottom-color: var(--c-border-soft); }
[data-theme="dark"] .note-tool-btn { background: var(--c-surface-2); border-color: var(--c-border); color: #5fa8e8; }
[data-theme="dark"] .note-tool-btn:hover { background: #16314c; }
[data-theme="dark"] .note-tool-btn:active { background: #1c3a55; }
[data-theme="dark"] .note-help > summary { color: #5fa8e8; }
[data-theme="dark"] .note-help-body { background: var(--c-surface-2); border-bottom-color: var(--c-border-soft); }
[data-theme="dark"] .note-toggle > summary,
[data-theme="dark"] #note-editor-body .note-toggle > summary { color: #5fa8e8; }
[data-theme="dark"] .note-toggle > summary:hover,
[data-theme="dark"] #note-editor-body .note-toggle > summary:hover { background: var(--c-surface-2); }
[data-theme="dark"] .note-toggle-body,
[data-theme="dark"] #note-editor-body .note-toggle-body { border-left-color: var(--c-border); }
[data-theme="dark"] .note-sync-status.is-syncing { color: #5fa8e8; }
[data-theme="dark"] .note-file-block { border-color: var(--c-border-soft); }
[data-theme="dark"] .note-pdf { background: var(--c-surface); border-color: var(--c-border); }
[data-theme="dark"] .note-file-link { background: var(--c-surface-2); border-color: var(--c-border); color: #5fa8e8; }
[data-theme="dark"] .note-file-link:hover { background: #16314c; }
[data-theme="dark"] .note-file-del { background: var(--c-surface-2); border-color: var(--c-border); }
[data-theme="dark"] .note-file-del:hover { background: #3a1f22; }

/* ノートカテゴリ (note_categories.php) */
[data-theme="dark"] .ncat-drag-handle:hover { background: #2e2a16; border-color: #7a6420; }
[data-theme="dark"] .ncat-sortable .ncat-chosen { background: #2e2a16; }

/* mail.php (iframe ラッパーのみ。SnappyMail 本体は別アプリ) */
[data-theme="dark"] .mail-iframe-wrap { background: var(--c-surface); border-color: var(--c-border); }