@charset "UTF-8";
:root {
  --bg: #eef2f7;        /* 背景 */
  --panel: #ffffff;     /* パネル(白) */
  --border: #d4dde8;    /* 罫線 */
  --text: #253243;      /* 文字 */
  --muted: #5f6b7a;     /* 補助文字・アイコン(ラベル/日付/件数/ヘルプ文言など、灰色系の役割はすべてこれに統一) */
  --accent: #4a7fc1;    /* ボタンなど(サイトのブルー) */
  --accent-dark: #2f5d96; /* ヘッダーなど濃いブルー */
  --accent-soft: #eaf1fb; /* アクセントの淡色背景(タグバッジ・棚カードなど) */
  --danger: #a83a2f;    /* 削除ボタン(背景色との対比比率4.5:1以上を確保) */
  --danger-soft: #fbeae7;
  --success: #1f7a4a;   /* 成功メッセージ(アクセントの青とは別の意味を持たせる。背景色との対比比率4.5:1以上を確保) */
  --success-soft: #e7f3ec;
  --warm: #d9a441;      /* 空表示イラストのアクセント */
  --warm-soft: #fbf1de;

  /* 文字サイズの基準スケール(この6段階に統一) */
  --fs-xs: .75em;
  --fs-sm: .85em;
  --fs-md: .92em;
  --fs-lg: 1.15em;
  --fs-xl: 1.4em;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Hiragino Sans","Yu Gothic",sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar { display:flex; align-items:center; gap:24px; padding:12px 24px; background:var(--accent-dark); color:#fff; }
.topbar .brand { font-weight:bold; font-size:1.1em; }
.topbar .brand a { color:#fff; }

/* ロゴマーク(販売サイトのアイコンと共通のもの)。ヘッダーの「BGnote」文字だけでは
   ロゴらしさが弱く、購入直後に開く初回セットアップ画面(install.php)も含めて
   全ページのヘッダー・ログイン画面で共通して使うマークが無かったため、CSSの
   疑似要素として一箇所に追加する(各PHPファイルを個別に直さずに全画面へ反映するため) */
.topbar .brand::before,
.login-box h1::before {
  content: "";
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  margin-right: 0.4em;
  vertical-align: -0.3em;
  /* 2026-09-26 アプリのアイコン(青いノート帳)に統一。以前は青い四角に線3本の絵 */
  background-image: url("../icons/icon-192.png?v=20260924b");
  background-size: contain;
  background-repeat: no-repeat;
}
/* ログイン画面の見出しは文字が大きく箱が狭いので、マークを大きくすると「(ビィジィノート)」が
   2行に折れてしまう。ここだけ以前と同じ大きさにする */
.login-box h1::before { width: 0.85em; height: 0.85em; margin-right: 0.3em; vertical-align: -0.1em; }
.login-box h1 { font-size: 1.35em; white-space: nowrap; }  /* アイコン+BGnote(ビィジィノート)を必ず1行に(スマホ幅でも収まる大きさ) */
.sub-reading { font-weight:normal; font-size:.7em; opacity:.75; margin-left:2px; }
.topbar .search { flex:1; display:flex; gap:8px; max-width:480px; }
.topbar .search input { flex:1; padding:6px 10px; border-radius:6px; border:none; }
.topbar .search button { padding:6px 14px; border:none; border-radius:6px; background:var(--accent); color:#fff; cursor:pointer; }
.user-area { margin-left:auto; display:flex; gap:12px; align-items:center; }
.user-area a { color:#fff; opacity:.85; }

.layout { display:flex; min-height:calc(100vh - 56px); }

.sidebar { width:240px; background:var(--panel); border-right:1px solid var(--border); padding:16px; }
.sidebar-head { margin-bottom:16px; display:flex; flex-direction:column; gap:8px; }
.inline-form { display:flex; gap:4px; flex-wrap:wrap; }
.inline-form input { flex:1; min-width:0; padding:4px 6px; font-size:var(--fs-sm); border:1px solid var(--border); border-radius:4px; }
.inline-form button { border:none; background:var(--accent); color:#fff; border-radius:6px; cursor:pointer; padding:0 8px; }
.mini-select { width:100%; padding:4px; font-size:var(--fs-sm); border:1px solid var(--border); border-radius:4px; }

/* 設定画面などで使う、通常の入力欄の共通スタイル(枠線・角丸・フォーカス色を他画面と揃える) */
.field-input { width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:4px; font-size:1em; margin-top:6px; }
.field-input:focus { outline:none; border-color:var(--accent); }
.field-input.field-narrow { width:100%; max-width:300px; }
.field-label { display:block; }
.field-label strong { font-size:var(--fs-md); }

/* 通知メッセージ(成功・エラー)。サイトの配色に合わせた共通クラス */
.msg-success, .msg-error {
  border-radius:6px; padding:10px 14px; margin-bottom:16px; font-size:var(--fs-sm);
}
.msg-success { background:var(--success-soft); color:var(--success); border:1px solid var(--success); }
.msg-error { background:var(--danger-soft); color:var(--danger); border:1px solid var(--danger); }

/* サイドバーの外側、画面上部に出す全幅バナー(モバイルでサイドバーが閉じていても必ず見える) */
.page-banner { padding:10px 24px; font-size:var(--fs-sm); overflow-wrap:anywhere; }   /* 長い名前でも横にはみ出さない */
.page-banner.msg-error, .page-banner.msg-success { border-radius:0; margin-bottom:0; border-width:0 0 1px; }
.page-banner.setup-warning { background:var(--warm-soft); color:#7a5a12; border-bottom:1px solid var(--warm); }
.notice-banner { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.notice-banner > span { flex:1; min-width:220px; }
.notice-banner form { margin:0; }

/* ログイン前後のシンプルなフォーム画面(初回セットアップ・アカウント作成) */
.form-page { max-width: 420px; margin: 60px auto; padding: 0 20px; }
.form-page label { display: block; margin-bottom: 12px; }
.show-pw { font-size: var(--fs-sm); color: var(--muted); }
.show-pw input { width: auto; margin-top: 0; vertical-align: middle; }

/* 入力欄の下に添える小さな補足説明 */
.hint { display:block; color:var(--muted); font-size:var(--fs-xs); margin:4px 0 0; }

/* セクション間の区切り線(設定画面などで使う) */
.divider { margin:32px 0; border:none; border-top:1px solid var(--border); }

/* 一覧表示用のシンプルなテーブル(表示崩れ修正など) */
.table-scroll { overflow-x:auto; margin:20px 0; }
.data-table { width:100%; border-collapse:collapse; }
.data-table th, .data-table td { padding:6px; text-align:left; }
.data-table th { border-bottom:2px solid var(--border); }
.data-table td { border-bottom:1px solid var(--border); }
/* ユーティリティクラスのため、後から定義される他クラス(.meta等)のmargin-topに
   打ち消されないよう明示的に優先させる(cleanup_notes.php/import_templates.phpの
   「class="meta mt-lg"」で、.metaのmargin-top:16pxに上書きされて無効化していた) */
.mt-lg { margin-top:32px !important; }

/* スタック(階層) */
.stack { margin-bottom:4px; }
.stack > summary {
  cursor:pointer; padding:8px; border-radius:6px; font-weight:bold;
  display:flex; align-items:center; justify-content:space-between;
  list-style:none; user-select:none;
}
.stack > summary::-webkit-details-marker { display:none; }
.stack > summary::before {
  content:"";
  display:inline-block;
  width:8px; height:8px; margin-right:6px;
  background-color: var(--muted);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 2l8 6-8 6z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 2l8 6-8 6z'/></svg>");
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
  transition:transform .15s;
}
.stack[open] > summary::before { transform:rotate(90deg); }
.stack > summary:hover { background:var(--bg); }
.stack-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stack-count { color:var(--muted); font-size:var(--fs-xs); font-weight:normal; }
.stack .notebook-list { margin-left:14px; border-left:1px solid var(--border); padding-left:6px; }
.empty-sub { color:var(--muted); font-size:var(--fs-sm); padding:4px 8px; }

.stack-free { margin-top:12px; }
.stack-free-head { font-weight:bold; padding:8px; color:var(--muted); font-size:var(--fs-sm); }

.notebook-list { list-style:none; margin:2px 0 0; padding:0; }
.notebook-list li { display:flex; justify-content:space-between; align-items:center; padding:6px 8px; border-radius:6px; font-size:var(--fs-md); }
.notebook-list li:hover { background:var(--bg); }
.notebook-list li.active { background:var(--bg); font-weight:bold; }
/* サイドバーの項目(ノートブック名・タグ名・管理メニュー)は、本文中の
   本物のハイパーリンクと違って「今どこにいるか」を示すナビゲーションなので、
   全部を青リンク色にはせず、通常の文字色を基本にする(ホバー時のみ強調) */
.notebook-list li a { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; color:var(--text); }
.notebook-list li a:hover { color:var(--accent-dark); }
.nb-icon { color:var(--muted); margin-right:5px; flex-shrink:0; }
.edit-link { flex:0 0 auto !important; color:var(--muted); font-size:var(--fs-md); text-decoration:none; padding-left:4px; display:inline-flex; align-items:center; }
.edit-link:hover { color:var(--accent); text-decoration:none; }
.link-btn-danger { background:none; border:none; color:var(--danger); cursor:pointer; font-size:var(--fs-sm); padding:0; }

.content { flex:1; padding:24px 32px; }
.content-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.content-head-title h2 { margin:0; }
.content-type-badge { display:flex; align-items:center; gap:5px; color:var(--muted); font-size:var(--fs-xs); font-weight:bold; letter-spacing:.02em; margin-bottom:4px; }
/* 見出しの「スタック › ノートブック」と、スタックを変えるボタン */
.nb-path-stack { color:var(--muted); font-weight:normal; font-size:.8em; margin-right:6px; }
.nb-path-sep { margin-left:6px; }
.nb-path-link { display:inline-block; margin-top:8px; padding:5px 14px; border:1px solid var(--accent); border-radius:6px; background:var(--panel); color:var(--accent-dark); font-size:var(--fs-sm); }
.nb-path-link:hover { background:var(--accent-soft); text-decoration:none; }
/* 「スタックを変える」から来た時に、所属スタックの欄を目立たせる(薄い色の光りだけでは背景とほぼ同じ色で見えなかった) */
.field-focus { border:2px solid var(--accent); background:var(--warm-soft); }
.focus-lead { color:var(--accent-dark); font-weight:bold; font-size:var(--fs-md); line-height:1.6; }
.btn { background:var(--accent); color:#fff; padding:8px 16px; border-radius:6px; border:none; cursor:pointer; }
.form-page button.btn { font:inherit; }   /* 「保存」の文字が、隣の「一覧に戻る」より小さくならないように */
.content-head .btn { white-space:nowrap; flex-shrink:0; }   /* 見出しが長くても「＋ 新規ノート」が2行に折れないように */
.btn-secondary { padding:8px 16px; border-radius:6px; border:1px solid var(--border); }

/* ノート一覧のタグバッジ(以前はindex.php内に直書きされていた) */
.note-tags { margin-left: 6px; }
.tag-badge {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: var(--fs-xs);
  margin-left: 4px;
}

.note-list { list-style:none; margin:0; padding:0; background:var(--panel); border-radius:8px; overflow:hidden; }
.note-list li { border-bottom:1px solid var(--border); }
.note-list li:last-child { border-bottom:none; }
.note-list a { display:flex; gap:12px; padding:14px 16px; align-items:baseline; }
/* ノートのタイトルも同様に、リンクの青色ではなく通常の文字色で見せる
   (一覧全体が青いリンクの塊に見えてしまい、何が重要な情報か分かりにくかったため) */
.note-title { font-weight:500; flex:1; color:var(--text); }
.note-list a:hover .note-title { color:var(--accent-dark); }
.note-notebook { color:var(--muted); font-size:var(--fs-sm); }
.note-date { color:var(--muted); font-size:var(--fs-sm); }
.note-list .empty { padding:24px; color:var(--muted); text-align:center; }
/* 検索結果で本文がヒットした場合の抜粋(なぜヒットしたか分かるように) */
.note-snippet { margin:-6px 16px 12px; padding-left:0; color:var(--muted); font-size:var(--fs-sm); line-height:1.5; }

/* 空表示イラスト(初回起動・ノート0件のノートブック) */
.empty-hero {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:14px; padding:56px 24px; background:var(--panel); border-radius:8px;
}
.empty-hero > svg { width:110px; height:92px; }   /* 文の中のメニューの絵まで大きくならないよう、直下の絵だけ */
.empty-hero p svg { width:1.15em; height:1.15em; vertical-align:-.2em; }
.empty-hero .rec-big { margin:4px 0 0; width:100%; max-width:420px; }
.empty-hero h3 { margin:0; font-size:var(--fs-lg); color:var(--text); }
.empty-hero p { margin:0; color:var(--muted); font-size:var(--fs-md); max-width:320px; line-height:1.7; }

/* ホーム画面の「よく使うノートブック」棚 */
.home-shelf-head { margin:0 0 8px; font-size:var(--fs-sm); font-weight:bold; color:var(--muted); }
.home-shelf { display:flex; gap:12px; margin-bottom:24px; flex-wrap:wrap; }
/* カード自体は他の白パネル(.note-list等)と揃えて中立色にし、数字の部分だけに
   アクセントカラーを残すことで、画面全体が青一色に埋まるのを避ける */
.shelf-card {
  flex:1; min-width:140px; background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:14px 16px;
  display:flex; flex-direction:column; gap:2px;
}
.shelf-card:hover { background:var(--bg); text-decoration:none; }

/* ホームのいちばん上の記録帳(2026-10-03)。札の左の色の帯と絵は、記録帳の型ごとの色(--tc) */
.today-rec { margin:0 0 18px; }
.today-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:0 0 8px; }
.today-head h3 { margin:0; font-size:var(--fs-sm); font-weight:bold; color:var(--muted); }
.today-head a { font-size:var(--fs-sm); white-space:nowrap; }
.today-row { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
/* 札:1 段目に型の絵と「書いた/書く」、2 段目に名前を札いっぱいに(スマホでも名前が読めるように) */
.today-chip {
  display:grid; grid-template-columns:auto 1fr; grid-template-areas:"i s" "n n"; align-items:center; column-gap:8px; row-gap:6px;
  background:var(--panel); border:1px solid var(--border); border-left:6px solid var(--tc); border-radius:8px;
  padding:12px 12px; color:var(--text); font-weight:bold; min-width:0;
}
.today-chip:hover { background:var(--bg); text-decoration:none; }
.today-chip svg { grid-area:i; width:22px; height:22px; color:var(--tc); flex-shrink:0; }
/* 長い名前は 2 行まで(それ以上は「…」) */
.today-chip .nm { grid-area:n; min-width:0; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; line-height:1.35; }
.today-chip .st { grid-area:s; justify-self:end; font-size:.8em; font-weight:bold; border-radius:10px; padding:1px 8px; white-space:nowrap; }
@media (max-width: 420px) {
  .today-row { gap:8px; }
  .today-chip { padding:10px 8px 10px 10px; }
  .today-chip .st-t { display:none; }   /* 狭い画面では「✓」「＋」だけ(言葉は title と読み上げで伝える) */
  .today-chip .st { padding:1px 7px; font-size:.85em; }
}
.today-chip .st.ok { background:var(--success-soft); color:var(--success); }
.today-chip .st.add { background:var(--accent-soft); color:var(--accent-dark); }
.rec-big {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; column-gap:10px; row-gap:2px; margin:0 0 14px; padding:14px;
  background:var(--accent-soft); color:var(--accent-dark); border:2px solid var(--accent); border-radius:10px;
  font-size:1.15em; font-weight:bold; text-align:center;
}
.rec-big:hover { text-decoration:none; background:#dde8f7; }
.rec-big svg { width:26px; height:26px; flex-shrink:0; }
.rec-big small { display:inline-block; font-weight:normal; font-size:.72em; }
@media (max-width: 420px) { .rec-big small { flex-basis:100%; text-align:center; } }   /* 狭い画面では、絵と「記録帳」の下に説明 */
/* ホームの上の、近い通院の予約(今日〜3 日後) */
.appt-box { display:flex; flex-direction:column; gap:6px; margin:0 0 16px; }
/* 予定は青(注意書きやお休みの黄色と分ける)。絵の右に、日時と場所を 1〜2 段で */
.appt-row { display:grid; grid-template-columns:20px 1fr; align-items:center; column-gap:10px; row-gap:0; background:var(--accent-soft); border:1px solid #c5d6ee; border-radius:8px; padding:8px 12px; color:var(--accent-dark); }
.appt-where { grid-column:2; }
@media (min-width: 769px) { .appt-row { grid-template-columns:20px auto 1fr; } .appt-where { grid-column:auto; } }
.appt-row:hover { text-decoration:none; filter:brightness(.98); }
.appt-row svg { width:20px; height:20px; flex-shrink:0; }
.appt-row.is-today { border-color:var(--accent); border-width:2px; }
.appt-when { font-weight:bold; }
.appt-where { min-width:0; overflow-wrap:anywhere; }
/* 左のメニューのいちばん上の「記録帳」 */
.side-rec {
  display:flex; align-items:center; gap:10px; margin:0 0 14px; padding:10px 12px;
  background:var(--accent-soft); color:var(--accent-dark); border-radius:8px; font-weight:bold;
}
.side-rec:hover { text-decoration:none; background:#dde8f7; }
.side-rec svg { width:20px; height:20px; flex-shrink:0; }
.side-rec small { display:block; font-weight:normal; font-size:.8em; }
/* 「最近使ったノートブック」の札: ノートブック名を大きく、ノートの件数と最後に使った日を小さく */
.shelf-card .nm { font-size:var(--fs-md); font-weight:bold; color:var(--accent-dark); line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.shelf-card .sub { font-size:var(--fs-xs); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.note-page { max-width:860px; margin:24px auto; background:var(--panel); padding:32px; border-radius:10px; }
.note-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:16px; position: sticky; top: 0; z-index: 11; background: var(--bg); padding: 10px 0; }
.toolbar-select-label { font-size:var(--fs-sm); color:var(--muted); white-space:nowrap; }
/* スタックとノートブックの欄は同じ幅にそろえる(長い名前が1つあるだけで欄が伸び、「◀一覧」が押しやられていた) */
.note-toolbar .mini-select, .note-stack-row .mini-select { width:18em; max-width:100%; min-width:0; }
.note-toolbar .btn-secondary { flex:0 0 auto; white-space:nowrap; }   /* 「◀一覧」を押し縮めない */
/* ノートブックの上の「スタック」の段。スクロールすると消える(ノートブックの段とアイコンの段は今までどおり上に残る)。
   下のノートブックの段と同じ色にして、ひとかたまりに見せる */
.note-stack-row { background:var(--bg); padding:10px 0 0; }
.note-stack-line { display:flex; align-items:center; gap:10px; }
.note-stack-row .toolbar-select-label, .note-toolbar .toolbar-select-label { min-width:6em; }
/* スタックを変えた直後、ノートブックを選ぶまでの案内 */
.stack-choose-hint { margin:6px 0 0; font-size:var(--fs-sm); font-weight:bold; color:#7a5a12; line-height:1.5; }
/* スタックを変えた直後の「↓ ノートブックを選ぶ」の状態。選ぶまでノートは移らないので、目立たせて知らせる */
#note-notebook-select.is-choosing { border-color:var(--warm); background:var(--warm-soft); font-weight:bold; }
/* ノートの画面の「◀一覧」の三角(字の「◀」はスマホで絵文字になることがあるため図形で描いている) */
.back-tri { width:.75em; height:.75em; margin-right:3px; vertical-align:-.02em; }
/* 「ノート」「ブック」の間の改行は、狭い画面でのみ効かせる(広い画面では1行の「ノートブック」) */
.tb-break { display:none; }
.note-title-input { width:100%; font-size:var(--fs-xl); font-weight:bold; padding:10px 0; border:none; border-bottom:2px solid var(--border); margin-bottom:12px; }
.note-title-input:focus { outline:none; border-color:var(--accent); }
.note-tags-input { width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:4px; font-size:var(--fs-sm); margin-bottom:16px; }
.note-tags-input:focus { outline:none; border-color:var(--accent); }
.save-toast { background:var(--success-soft); color:var(--success); border:1px solid var(--success); border-radius:6px; padding:6px 12px; font-size:var(--fs-sm); white-space:nowrap; transition:opacity .4s; }
.autosave-status { color:var(--muted); font-size:var(--fs-sm); white-space:nowrap; }

/* 文字の飾りのボタンの段(Quill)に出る英語を、日本語に置き換える。
   quill.snow.css はこのファイルより後に読み込まれるため、.note-page を付けて優先させる */
.note-page .ql-snow .ql-picker.ql-header { width: 104px; }
.note-page .ql-snow .ql-picker.ql-header .ql-picker-label::before,
.note-page .ql-snow .ql-picker.ql-header .ql-picker-item::before { content: '本文'; }
.note-page .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.note-page .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { content: '見出し大'; }
.note-page .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.note-page .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { content: '見出し中'; }
.note-page .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.note-page .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { content: '見出し小'; }
/* リンクを入れる・押した時の小窓 */
.note-page .ql-snow .ql-tooltip::before { content: 'リンク先:'; }
.note-page .ql-snow .ql-tooltip[data-mode="link"]::before { content: 'リンク先(URL):'; }
.note-page .ql-snow .ql-tooltip a.ql-action::after { content: '直す'; }
.note-page .ql-snow .ql-tooltip.ql-editing a.ql-action::after { content: '保存'; }
.note-page .ql-snow .ql-tooltip a.ql-remove::before { content: 'リンクを外す'; }
/* 「？」のボタンと、ボタンの説明の板 */
.ql-snow.ql-toolbar button.bg-help-btn { width: auto; min-width: 28px; font-weight: bold; color: var(--accent-dark); border: 1px solid var(--border); border-radius: 50%; line-height: 1; padding: 3px 6px; }
.ql-snow.ql-toolbar button.bg-help-btn[aria-expanded="true"] { background: var(--accent-soft); }
.bg-toolbar-help { flex-basis: 100%; width: 100%; margin-top: 6px; padding: 8px 10px; background: #fff; border: 1px solid var(--border); border-radius: 6px; font-size: var(--fs-sm); color: var(--text); }
.bg-toolbar-help ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; }
.bg-toolbar-help li { display: flex; align-items: center; gap: 8px; line-height: 1.4; }
.bg-toolbar-help .ic { flex: 0 0 26px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
.bg-toolbar-help .ic svg { width: 18px; height: 18px; }
.bg-toolbar-help .ic .t { font-size: .8em; font-weight: bold; white-space: nowrap; }
.bg-toolbar-help p { margin: 6px 0 0; color: var(--muted); }

/* リッチテキストエディタ */
#editor { min-height: 400px; font-size: 1em; line-height: 1.7; background: #fff; }
/* メモ欄の白い部分全体を入力できる場所にする(以前は文字のある行の高さしか無く、その下の空白を
   クリックしてもカーソルが入らず、Ctrl+Aが画面全体に効いてしまっていた)。高さは#editorと同じ */
#editor .ql-editor { min-height: inherit; }
/* 文字の大きさの ▲▼ ボタン(note.phpのsetupHeaderStepperが「本文」の右に置く)。
   プルダウン側の三角の絵は、この ▲▼ と紛らわしいので消して、幅を詰める */
.ql-snow .ql-picker.ql-header { width: 80px; }
.ql-snow .ql-picker.ql-header .ql-picker-label svg { display: none; }
.ql-snow .ql-picker.ql-header .ql-picker-label { padding-right: 4px; }
.bg-size-stepper { display: inline-flex; flex-direction: column; vertical-align: middle; margin: -2px 6px 0 0; }
.ql-snow.ql-toolbar .bg-size-stepper button { float: none; width: 22px; height: 14px; padding: 0; font-size: 10px; line-height: 14px; color: #555; border-radius: 3px; }
.ql-snow.ql-toolbar .bg-size-stepper button:hover { color: var(--accent); background: var(--accent-soft); }
/* スクロールしても常に手が届く位置に留まるようにする(下の方を編集中でも
   都度先頭まで戻らず太字などの操作ができるように) */
.ql-toolbar.ql-snow { border-color: var(--border); border-radius: 8px 8px 0 0; background: #f5f8fc; position: sticky; top: 63px; z-index: 10; box-shadow: 0 2px 4px rgba(0,0,0,.06); }
.ql-container.ql-snow { border-color: var(--border); border-radius: 0 0 8px 8px; font-family: inherit; }
#editor img { max-width: 100%; height: auto; }
/* Quillのチェックリストはチェック時に取り消し線を引かないため、独自に追加する */
.ql-editor li[data-list="checked"] { text-decoration: line-through; color: var(--muted); }
.ql-editor li[data-list="checked"]::before { text-decoration: none; }

/* 表機能(quill-better-table)をBGnoteの配色に合わせる。スマホ幅でも横スクロールできるようにする */
.ql-editor .quill-better-table-wrapper { overflow-x: auto; margin: 28px 0 12px; }
.ql-editor table.quill-better-table { border-collapse: collapse; table-layout: fixed; }
.ql-editor table.quill-better-table td { border: 1px solid var(--border); padding: 6px 10px; }
.ql-editor table.quill-better-table tr:first-child td { background: var(--accent-soft); font-weight: bold; }
/* 表の上に出る列選択バー(列幅ドラッグ用)。普段は表の一部のように見えて邪魔なので、
   ふだんは目立たせず、マウスを近づけた列だけ分かるようにする。
   このバーはQuillの描画上「.ql-editor」の兄弟要素(同じ#editorの直下)にあり、
   .ql-editorの子孫ではないため、セレクタは #editor を起点にする必要がある */
#editor .qlbt-col-tool-cell { border-color: transparent !important; background: transparent !important; transition: background-color .15s, border-color .15s; }
#editor .qlbt-col-tool-cell:hover { border-color: var(--border) !important; background: var(--accent-soft) !important; }
/* 列幅をドラッグで変える「つかみしろ」が既定で幅1pxしかなく、ほぼ操作できないため、
   見た目(線の位置)は変えずに実際につかめる範囲だけ広げる */
#editor .qlbt-col-tool-cell-holder { width: 9px !important; right: -5px !important; }

.image-section { margin-top:24px; }
.upload-label { display:inline-block; padding:8px 14px; border:1px dashed var(--accent); border-radius:6px; cursor:pointer; color:var(--accent-dark); }
.upload-label input { display:block; margin-top:6px; }
.image-grid { display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; }
.image-item { position:relative; width:140px; height:140px; border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.image-item img { width:100%; height:100%; object-fit:cover; }
/* 表示崩れ修正の画面の「重なって保存された画像」: 残す1枚と片付ける分を札で見分ける */
.dup-group { margin:16px 0; padding-bottom:12px; border-bottom:1px solid var(--border); }
.dup-title { margin:0; font-size:var(--fs-sm); overflow-wrap:anywhere; }
.dup-tag { position:absolute; left:0; right:0; bottom:0; padding:2px 0; text-align:center; font-size:var(--fs-xs); font-weight:bold; color:#fff; }
.dup-keep .dup-tag { background:var(--success); }
.dup-extra .dup-tag { background:var(--danger); }
.dup-extra img { opacity:.6; }
.img-del-btn { position:absolute; top:4px; right:4px; background:rgba(0,0,0,.55); color:#fff; border:none; border-radius:50%; width:22px; height:22px; cursor:pointer; }

.meta { color:var(--muted); font-size:var(--fs-sm); margin-top:16px; }
.delete-note-form { max-width:860px; margin:0 auto 40px; text-align:right; }

.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px 0; }
.login-box { background:var(--panel); padding:40px; border-radius:10px; width:320px; text-align:center; }
.login-box h1 { margin:0 0 4px; color:var(--accent-dark); }
.login-box .sub { color:var(--muted); margin-bottom:24px; font-size:var(--fs-sm); }
.login-box label { display:block; text-align:left; margin-bottom:14px; font-size:var(--fs-sm); }
.login-box input { width:100%; padding:8px; margin-top:4px; border:1px solid var(--border); border-radius:4px; }
.login-box .btn { width:100%; padding:10px; margin-top:8px; }
.login-box .msg-error { text-align:left; }
.login-box .show-pw { font-size:var(--fs-sm); color:var(--muted); }
.login-box .show-pw input { width:auto; margin-top:0; vertical-align:middle; }

/* =========================================================
   スマートフォン対応
   PCでの見た目は変わりません。画面幅が768px以下のときだけ
   以下のスタイルが適用されます。
   ========================================================= */

/* PCではメニューボタンとオーバーレイは隠しておく */
.menu-btn { display: none; }
.nav-overlay { display: none; }

@media (max-width: 768px) {

  /* --- ヘッダー --- */
  /* 検索欄が2段目に回って topbar の高さが伸びるため、固定値の引き算をやめる */
  .layout { min-height: auto; }
  .topbar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
  }
  .menu-btn {
    display: block;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5em;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
  }
  .topbar .brand { font-size: 1em; }
  .user-area { font-size: var(--fs-sm); gap: 8px; }
  /* 検索欄はヘッダーの2行目に回して横幅いっぱいに */
  .topbar .search {
    order: 3;
    flex-basis: 100%;
    max-width: 100%;
  }
  .topbar .search input { font-size: 16px; } /* 16px未満だとiPhoneで拡大されてしまう */

  /* --- サイドバー: 画面外に隠し、メニューボタンで引き出す --- */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 82%;
    max-width: 300px;
    z-index: 100;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 2px 0 12px rgba(0,0,0,.15);
    padding-top: 20px;
  }
  body.nav-open .sidebar { transform: translateX(0); }

  /* サイドバーを開いている間、背景を暗くする(タップで閉じる) */
  body.nav-open .nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 99;
  }

  /* --- 本文エリア --- */
  .content { padding: 16px 14px; }
  .content-head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .content-head h2 { font-size: var(--fs-lg); margin: 0; }
  .content-head .btn { text-align: center; }

  /* --- ノート一覧: 指で押しやすくする --- */
  .note-list a {
    flex-wrap: wrap;
    gap: 4px;
    padding: 16px;
  }
  .note-title { flex-basis: 100%; }

  /* --- ノート編集画面 --- */
  .note-page {
    margin: 12px 8px;
    padding: 16px;
    border-radius: 8px;
  }
  /* --- ログイン前後の簡易フォーム画面(初回セットアップ・アカウント作成等) --- */
  .form-page {
    margin: 24px 12px;
    padding: 0;
  }
  /* 「ノートブック」欄+「◀一覧」を、縦に何段も積まず1行に収める。
     ラベルは狭い専用の幅の中で2行に折り返す(「ノート/ブック」)。
     ボタンの「◀一覧」はパソコンと同じ(2026-09-29 に「一覧に戻る」「TOP」から1つにそろえた)。 */
  .note-toolbar { flex-wrap: nowrap; top: 0; gap: 8px; }
  /* 「ノート」「ブック」で3文字ずつのキリのいい2行にする(コロンは付けない)。
     tb-breakの改行だけで段を分け、各行の内側では折り返させない(white-space:nowrap)。 */
  .toolbar-select-label { flex: 0 0 auto; white-space: nowrap; line-height: 1.25; }
  .tb-break { display: block; }
  .note-toolbar .mini-select, .note-stack-row .mini-select { flex: 1 1 0; width: auto; min-width: 0; }
  .note-stack-line { gap: 8px; }
  .nb-path-link { padding: 9px 16px; }   /* 指で押しやすい高さに */
  .note-stack-row .toolbar-select-label, .note-toolbar .toolbar-select-label { min-width: 4em; }
  .note-toolbar .btn-secondary { flex: 0 0 auto; padding: 8px 10px; }
  .autosave-status { display: none; }  /* 幅が足りないため、保存中/保存済みの文字表示は非表示(自動保存自体は動く) */
  #editor { min-height: 300px; }
  /* ノートブックツールバーを1行(64px)にした分、この直下にぴったりくっつくよう詰める。
     パソコン版(上の63px)と同じ考え方で、隙間なく貼り付けて編集領域を広く保つ。 */
  .ql-toolbar.ql-snow { padding: 6px 4px; top: 64px; }
  /* スマホでは「本文」の欄を狭め、ボタンのまとまりの間の余白を詰める。幅 360 前後の端末で「？」だけが4段目に
     落ちていたのを、3段に収めるため(「見出し中」の4文字まで欠けずに入る幅) */
  .note-page .ql-snow .ql-picker.ql-header { width: 84px; }
  .note-page .ql-toolbar.ql-snow .ql-formats { margin-right: 8px; }   /* quill.snow.css が後から読まれるので .note-page を付けて優先させる */
  /* 編集画面の文字が拡大されないように */
  .ql-editor, .note-title-input, .note-tags-input { font-size: 16px; }

  /* --- 画像: 表示は小さくしつつ、削除ボタンはタップしやすい大きさを保つ --- */
  .image-item { width: 100px; height: 100px; }
  .img-del-btn { width: 32px; height: 32px; font-size: 1.1em; }

  /* --- ボタン全般を押しやすい高さに --- */
  .btn, .btn-secondary { padding: 12px 16px; display: inline-block; }

  .delete-note-form { margin: 0 8px 32px; }
  .login-box { width: 88%; padding: 28px 22px; }

  /* --- 入力欄でiPhoneが自動拡大しないように --- */
  .login-box input,
  .inline-form input,
  .mini-select,
  .field-input {
    font-size: 16px;
  }

  /* --- 空表示イラスト・ホーム画面の棚 --- */
  .empty-hero { padding: 40px 16px; }
  .empty-hero svg { width: 88px; height: 74px; }
  .home-shelf { gap: 8px; }
  .shelf-card { min-width: 90px; padding: 10px 12px; }
}

/* 長いURL・英数字がはみ出して画面が横に広がるのを防ぐ */
/* ノートの抜粋やタイトルに、途中で改行できない長いURLなどがあると、そこに合わせて
   ページ全体が横に広がってしまう(スマホでは画面が引き伸ばされて、左端が切れて見える)。
   どこでも折り返せるようにし、本文エリアが中身に押し広げられないようにする。 */
.content { min-width: 0; }
.note-list, .note-title, .note-snippet, .content-head { overflow-wrap: anywhere; }
.note-list a > * { min-width: 0; }

/* PCでアプリとしてインストールして開いたとき(2026-09-26)。ウィンドウ上端のタイトルバーに
   Windowsが自動で「アイコン+BGnote(ビィジィノート)」を出すため、すぐ下のヘッダーと同じものが
   2つ並んで見える。アプリのウィンドウでだけ、ヘッダー側のアイコンと読みがなを消して「BGnote」の
   文字(トップへ戻るリンクを兼ねる)だけにする。ブラウザのタブで開いたときと、タイトルバーの無い
   スマホのアプリ(幅768px以下)は今まで通り */
@media (display-mode: standalone) and (min-width: 769px) {
  .topbar .brand::before,
  .topbar .brand .sub-reading { display: none; }
}

/* オフライン対応(js/bg_offline.js・offline_settings.php、2026-09-27) */
/* 電波が戻って、書きためたメモを送った時のお知らせ(画面の下に出る) */
.bg-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 1000;
  max-width: calc(100% - 32px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 12px 16px; border-radius: 10px; background: #253243; color: #fff; font-size: var(--fs-sm);
  box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.bg-toast button { font-size: var(--fs-sm); padding: 4px 12px; border: 1px solid rgba(255,255,255,.5); border-radius: 6px;
  background: transparent; color: #fff; cursor: pointer; font-family: inherit; }
.offline-status { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; margin: 16px 0 12px; }
.offline-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
/* 保存できていない書きかけのお知らせ(note.php) */
.draft-banner { background: #fff8e6; border: 1px solid #f0d58a; border-radius: 8px; padding: 12px 14px; margin: 0 0 12px;
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.draft-banner p { margin: 0; flex-basis: 100%; }
.bg-toast .bg-toast-link { color: #fff; text-decoration: underline; }
/* 保存できなかった時の表示は、スマホ(普段は隠している)でも画面の下に出す */
/* 保存できない時の案内は、パソコンでもスマホでも画面の下の赤い帯に出す。
   (パソコンで、ノートブックの段の中に長い案内を1行で出していた時は、文が右へはみ出して読めず、
   「◀一覧」が押し縮められ、段が高くなってアイコンの段が隠れていた) */
.autosave-status.is-error { display: block; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 900;
  max-width: 900px; margin: 0 auto;
  background: #b3261e; color: #fff; padding: 8px 12px; border-radius: 8px; text-align: center; white-space: normal; }
/* 「隠す」印(hidden)を付けた部品は、ほかの見た目の指定(display:flex等)より優先して必ず隠す。
   以前、書きかけのお知らせ欄(.draft-banner)が、隠しているはずなのに空の黄色いバーとして見えていた(2026-09-27) */
[hidden] { display: none !important; }
/* 監査後の修正(2026-09-27) */
/* お知らせは、画面の下に縦に並べる(以前は同じ位置に重なって読めなかった) */
.bg-toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 1000;
  display: flex; flex-direction: column; gap: 8px; width: max-content; max-width: calc(100% - 32px); }
.bg-toasts .bg-toast { position: static; transform: none; max-width: none; }
.autosave-status.is-busy { color: var(--accent-dark); }
.autosave-status.is-ok { color: #2e7d32; }
@media (max-width: 768px) {
  /* 「◀一覧」を押した後の保存中と、保存できなかった後に保存できた時も、スマホの画面の下に出す */
  .autosave-status.is-busy, .autosave-status.is-ok { display: block; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 900;
    color: #fff; padding: 8px 12px; border-radius: 8px; text-align: center; white-space: normal; }
  .autosave-status.is-busy { background: var(--accent-dark); }
  .autosave-status.is-ok { background: #2e7d32; }
  .bg-toasts { bottom: 64px; }   /* 保存の帯と重ならないよう少し上に */
  /* 「本文」右の▲▼は、指で押しやすい大きさに */
  .ql-snow.ql-toolbar .bg-size-stepper button { width: 30px; height: 18px; font-size: 12px; line-height: 18px; }
}
/* ログアウトは合言葉付きの送信(POST)にしたため、ボタンをこれまでの「ログアウト」の文字と同じ見た目にする */
.logout-form { display: inline; margin: 0; }
.link-button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.user-area .link-button { color: #fff; opacity: .85; }
.user-area .link-button:hover { text-decoration: underline; }
/* 「最新版か確かめる」ページ(update_check.php、2026-10-04) */
.uc-ver { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:8px 0 16px; padding:12px 16px; border:1px solid var(--border); border-radius:8px; background:var(--accent-soft); }
.uc-ver-label { color:var(--muted); font-size:var(--fs-sm); }
.uc-ver-num { font-size:var(--fs-xl); font-weight:700; color:var(--accent-dark); }
.uc-box { border-radius:8px; padding:12px 16px; margin:0 0 16px; }
.uc-box p { margin:6px 0; }
.uc-ok { background:var(--success-soft); border:1px solid #b9dcc7; }
.uc-ok strong { color:var(--success); }
.uc-warn { background:var(--warm-soft); border:1px solid #ecd3a1; }
.uc-list { list-style:none; padding:0; margin:8px 0; }
.uc-list li { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; padding:6px 0; border-bottom:1px solid #ecd3a1; }
.uc-list code { word-break:break-all; }
.uc-tag { font-size:var(--fs-xs); background:#fff; border:1px solid #ecd3a1; border-radius:10px; padding:1px 8px; white-space:nowrap; }
.uc-h { margin:24px 0 6px; font-size:var(--fs-lg); }
.uc-link { display:inline-block; text-decoration:none; color:var(--accent-dark); background:var(--panel); }
.uc-page h2 { margin-top:0; }
@media (max-width: 768px) { .uc-page { padding:20px 16px; margin:12px; } }

/* ── スタッフの画面:ログインの記録・スタッフの操作の記録・削除(2026-10-09 安全性の総点検) ── */
.btn-danger { background:var(--danger); }
.staff-tool { margin:10px 0; border:1px solid var(--border); border-radius:8px; background:var(--panel); }
.staff-tool summary { cursor:pointer; padding:12px 14px; font-weight:bold; color:var(--accent-dark); list-style-position:inside; }
.staff-tool-danger summary { color:var(--danger); }
.staff-tool[open] summary { border-bottom:1px solid var(--border); }
.staff-tool > p, .staff-tool form { margin:10px 14px 14px; }
.sec-log { width:100%; border-collapse:collapse; font-size:var(--fs-sm); margin:6px 0 18px; }
.sec-log th, .sec-log td { border-bottom:1px solid var(--border); padding:6px 4px; text-align:left; vertical-align:top; }
.sec-log th { color:var(--muted); font-weight:normal; }
.sec-log td:first-child, .sec-log td:last-child, .sec-log th { white-space:nowrap; }
.sec-ip { display:block; color:var(--muted); font-size:var(--fs-xs); word-break:break-all; }
.sec-ng { color:var(--danger); }
.sec-events { list-style:none; padding:0; margin:6px 0 18px; font-size:var(--fs-sm); }
.sec-events li { border-bottom:1px solid var(--border); padding:7px 0; line-height:1.6; }
.sec-when { display:block; color:var(--muted); font-size:var(--fs-xs); }

/* =========================================================
   ノートの見た目 案B「記録帳とそろえる」(2026-10-11)
   ・ノートブックに色(includes/auth.php の bg_nb_color。スタックごとに色の系統をそろえる。2026-10-12〜)
   ・ノートの画面の上は、そのノートブックの色の帯
   ・文字の飾りのボタンは、絵の下に短い名前。表の行・列のボタンは表の中にいる時だけ
   ・スマホのボタンの段は 1 段で、横にすべらせる(左右の「‹」「›」でも動かせる)
   ========================================================= */
/* 左のメニュー・一覧の見出しの、色の四角に白いノートの絵 */
.nb-sq { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:6px; background:var(--nbc); flex-shrink:0; margin-right:8px; }
.nb-sq svg { width:12px; height:12px; }
.content-type-badge .nb-sq { width:18px; height:18px; margin-right:2px; }
/* ホームの「最近使ったノートブック」:今の大きさ・文字のまま、縁を 1 周ノートブックの色で(記録帳の札の左の線と見分ける) */
.shelf-card[style*="--nbc"] { border:2px solid var(--nbc); }
.shelf-card[style*="--nbc"]:hover { background:var(--panel); box-shadow:0 2px 8px rgba(22,41,61,.12); }

/* ノートの画面の上の色の帯(スタック・ノートブック・◀一覧) */
.note-page { --nbc: var(--accent-dark); }
.note-stack-row, .note-toolbar { background:var(--nbc); color:#fff; padding-left:14px; padding-right:14px; transition:background-color .2s; }
.note-stack-row { border-radius:10px 10px 0 0; }
.note-toolbar { border-radius:10px; }
.note-stack-row ~ .note-toolbar { border-radius:0 0 10px 10px; }
.note-stack-row .toolbar-select-label, .note-toolbar .toolbar-select-label { color:#fff; font-weight:bold; opacity:.95; }
.note-stack-row .mini-select, .note-toolbar .mini-select { background:#fff; border-color:rgba(255,255,255,.6); padding:5px 6px; border-radius:6px; }
/* 「◀一覧」:白地に帯の色の字(白い字を半透明の上に乗せると、薄くて読みにくかった) */
.note-toolbar #back-to-list-link { background:#fff; color:var(--nbc); border-color:#fff; border-radius:999px; font-weight:bold; }
.note-toolbar #back-to-list-link:hover { background:#f1f4f8; text-decoration:none; }
.note-stack-row .stack-choose-hint { background:#fff8e6; color:#6b4c0c; border-radius:6px; padding:6px 10px; }
.note-toolbar .autosave-status { color:#fff; opacity:.9; }
@media (min-width: 769px) {
  .note-toolbar #back-to-list-link { padding:5px 14px; }   /* ノートブックの欄と高さをそろえる */
  .note-toolbar .autosave-status.is-busy, .note-toolbar .autosave-status.is-ok { color:#fff; opacity:1; font-weight:bold; }
}

/* 文字の飾りのボタンの段:止まる枠(.bg-tb-wrap)の中に置く。止まる高さは、note.php が帯の高さを測って決める */
/* パソコン:ボタンの段を 1 段に収めるため、ノートの白い枠を少し広げる(860→940px) */
@media (min-width: 769px) { .note-page { max-width:940px; } .delete-note-form { max-width:940px; } }
.bg-tb-wrap { position:sticky; top:63px; z-index:10; }
.bg-tb-wrap + .ql-container.ql-snow { border-top:0; }   /* 段の下の線が 2 本重ならないように */
.note-page .ql-toolbar.ql-snow, .note-page .ql-container.ql-snow { border-color:var(--border); }   /* quill.snow.css の灰色の線より後に効かせる */
.note-page .bg-tb-wrap .ql-toolbar.ql-snow { position:relative; top:auto; display:flex; flex-wrap:wrap; align-items:center; row-gap:2px; padding:4px 6px; }
.note-page .ql-toolbar.ql-snow .ql-formats { display:inline-flex; align-items:center; margin-right:3px; padding-right:3px; border-right:1px solid var(--border); }
.note-page .ql-toolbar.ql-snow .ql-formats:last-child { border-right:0; margin-right:0; padding-right:0; }
.note-page .ql-toolbar.ql-snow .ql-formats::after { display:none; }
/* ボタン:絵の下に短い名前(年配の方にも読める 12px) */
.note-page .ql-toolbar.ql-snow button { float:none; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; width:auto; min-width:34px; height:48px; padding:4px 3px 3px; border-radius:6px; }
.note-page .ql-toolbar.ql-snow button svg { float:none; width:18px; height:18px; flex:none; }
.note-page .ql-toolbar.ql-snow button:hover { background:#fff; }
.note-page .ql-toolbar.ql-snow button.ql-active { background:var(--accent-soft); }
.note-page .ql-toolbar.ql-snow .ql-picker { float:none; height:48px; }
.note-page .ql-toolbar.ql-snow .ql-picker-label { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; height:48px; padding:4px 3px 3px; border-radius:6px; border-color:transparent; }
.note-page .ql-toolbar.ql-snow .ql-picker-label:hover { background:#fff; }
.note-page .ql-snow .ql-picker.ql-expanded .ql-picker-label { color:var(--accent-dark); border-color:transparent; background:#fff; }   /* 開いている間も、絵が薄くならないように */
.note-page .ql-toolbar.ql-snow .ql-color-picker { width:auto; }
.note-page .ql-toolbar.ql-snow .ql-color-picker .ql-picker-label { min-width:40px; }
.note-page .ql-toolbar.ql-snow .ql-color-picker .ql-picker-label svg { position:static; margin:0; width:18px; height:18px; flex:none; }
.note-page .ql-toolbar.ql-snow .ql-picker-options { top:100%; }
.bg-lbl { display:block; font-size:12px; line-height:1.15; color:#3f4b5b; font-weight:normal; white-space:nowrap; letter-spacing:0; }
/* 文字の大きさ:「本文」「見出し中」などの下に「大きさ」 */
.note-page .ql-snow .ql-picker.ql-header { width:78px; }
.note-page .ql-toolbar.ql-snow .ql-picker.ql-header .ql-picker-label { padding-left:4px; }
.note-page .ql-toolbar.ql-snow .ql-picker.ql-header .ql-picker-label::before { line-height:18px; font-weight:bold; color:var(--accent-dark); }
.note-page .ql-toolbar.ql-snow .bg-size-stepper button { display:block; min-width:0; width:26px; height:22px; line-height:22px; padding:0; }
/* 「？」:丸の中の？と、下に「説明」 */
.note-page .ql-toolbar.ql-snow button.bg-help-btn { border:0; border-radius:6px; padding:4px 3px 3px; color:var(--accent-dark); }
.bg-help-btn .q { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border:1px solid var(--border); border-radius:50%; font-weight:bold; font-size:12px; line-height:1; background:#fff; }
.ql-snow.ql-toolbar button.bg-help-btn[aria-expanded="true"] .q { background:var(--accent-soft); }
/* 表の行・列のボタン:表の中にいる時だけ、淡い青の囲みで出す。パソコンでは段の最後に出す(前のボタンの並びが動かないように) */
.note-page .ql-toolbar.ql-snow .ql-formats.bg-tbl-group { display:none; background:var(--accent-soft); border-radius:8px; border-right:0; padding:0 4px; order:99; }
.bg-tb-wrap.in-table .ql-toolbar.ql-snow .ql-formats.bg-tbl-group { display:inline-flex; }
.bg-tbl-group .bg-lbl { color:var(--accent-dark); font-weight:bold; }
.bg-tb-wrap .bg-toolbar-help { margin-top:0; border-radius:0; box-shadow:0 4px 10px rgba(0,0,0,.08); max-height:40vh; overflow-y:auto; }
/* スマホの「‹」「›」(note.php の setupToolbarScroll が作る。パソコンでは出さない) */
.bg-tb-arrow { display:none; }

@media (max-width: 768px) {
  /* スマホ:色の帯は、ノートの白い枠いっぱいに */
  .note-stack-row, .note-toolbar { margin-left:-16px; margin-right:-16px; padding-left:12px; padding-right:12px; }
  .note-stack-row { border-radius:0; padding-top:12px; }
  .note-toolbar { border-radius:0; }
  .note-toolbar .toolbar-select-label, .note-stack-row .toolbar-select-label { font-size:.82em; }
  /* ボタンの段は 1 段。横にすべらせる(段が 3 段になって、書く所が狭くなっていた) */
  .bg-tb-wrap { top:64px; }
  .note-page .bg-tb-wrap .ql-toolbar.ql-snow { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:3px 4px; }
  .note-page .bg-tb-wrap .ql-toolbar.ql-snow::-webkit-scrollbar { display:none; }
  .note-page .ql-toolbar.ql-snow .ql-formats { flex:none; margin-right:4px; padding-right:4px; }
  .note-page .ql-toolbar.ql-snow .ql-formats.bg-help-group { order:-2; }                     /* 「説明」は左端に(すべらせなくても見えるように) */
  .note-page .ql-toolbar.ql-snow .ql-formats.bg-tbl-group { order:-1; margin-right:6px; }   /* 表の中では、表のボタンを左端に */
  .note-page .ql-toolbar.ql-snow button { min-width:44px; }
  .bg-lbl { font-size:11.5px; }
  .note-page .ql-snow .ql-picker.ql-header { width:74px; }
  .note-page .ql-toolbar.ql-snow .bg-size-stepper button { width:34px; height:22px; font-size:12px; }   /* 指で押し分けやすい大きさ */
  /* 文字色・蛍光ペンの色の四角を、指で選べる大きさに */
  .note-page .ql-snow .ql-color-picker .ql-picker-options { width:236px; }
  .note-page .ql-snow .ql-color-picker .ql-picker-item { width:28px; height:28px; margin:2px; }
  /* 続き・戻りがある時の、端の「›」「‹」のボタン */
  .bg-tb-arrow { position:absolute; top:1px; height:54px; width:34px; border:0; padding:0; font:inherit; font-size:26px; font-weight:bold; line-height:1; color:var(--accent-dark); cursor:pointer; z-index:12; }   /* ボタンの段(z-index:10)より上に */
  .bg-tb-arrow.r { right:1px; justify-content:flex-end; padding-right:6px; background:linear-gradient(to right, rgba(245,248,252,0), #f5f8fc 55%); border-radius:0 8px 0 0; }
  .bg-tb-arrow.l { left:1px; justify-content:flex-start; padding-left:6px; background:linear-gradient(to left, rgba(245,248,252,0), #f5f8fc 55%); border-radius:8px 0 0 0; }
  .bg-tb-wrap.more-right .bg-tb-arrow.r, .bg-tb-wrap.more-left .bg-tb-arrow.l { display:flex; align-items:center; }
  .bg-tb-wrap .bg-toolbar-help { max-height:50vh; }
}

/* ノートの「AI に相談」(2026-10-11)。タイトルの右のボタンと、押すと開く窓 */
.note-title-row { display:flex; align-items:center; gap:12px; margin-bottom:12px; border-bottom:2px solid var(--border); }
.note-title-row:focus-within { border-color:var(--accent); }
.note-title-row .note-title-input { flex:1; min-width:0; margin-bottom:0; border-bottom:0; text-overflow:ellipsis; }
.ai-open-btn { flex:none; display:inline-flex; align-items:center; gap:6px; border:0; border-radius:999px; padding:8px 14px; min-height:40px; font:inherit; font-size:var(--fs-sm); font-weight:bold; color:#fff; cursor:pointer;
  background:linear-gradient(135deg, #3d6fb0, #5b4fb5); box-shadow:0 1px 3px rgba(0,0,0,.15); white-space:nowrap; }
.ai-open-btn:hover { filter:brightness(1.08); }
.ai-open-btn svg { width:15px; height:15px; }
.ai-back { position:fixed; inset:0; z-index:200; background:rgba(20,30,45,.45); display:flex; align-items:flex-start; justify-content:center; padding:24px 12px; overflow-y:auto; }
.ai-box { background:var(--panel); border-radius:12px; width:100%; max-width:680px; padding:18px 20px 20px; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.ai-top { display:flex; align-items:center; gap:10px; }
.ai-top h2 { flex:1; margin:0; font-size:1.1em; color:var(--text); }
.ai-x { background:none; border:0; font:inherit; font-size:1.5em; line-height:1; color:var(--muted); cursor:pointer; min-width:40px; min-height:40px; padding:0; }
.ai-notice { background:var(--warm-soft); color:#5c3d00; border-radius:8px; padding:10px 12px; font-size:var(--fs-sm); line-height:1.7; margin:12px 0 4px; }
.ai-lbl { font-size:var(--fs-sm); font-weight:bold; color:var(--text); margin:14px 0 6px; }
.ai-seg { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.ai-seg label { display:block; border:1px solid var(--border); border-radius:10px; padding:8px 12px; cursor:pointer; line-height:1.45; font-size:var(--fs-md); background:#fff; }
.ai-seg label.on { border:2px solid var(--accent-dark); background:var(--accent-soft); padding:7px 11px; }   /* 選んだ札(印は note.php が付ける) */
.ai-seg label.is-off { opacity:.55; cursor:default; }
.ai-seg input { margin:0 6px 0 0; vertical-align:-2px; }
.ai-seg small { display:block; color:var(--muted); font-size:.85em; margin-left:20px; }
.ai-ta { width:100%; border:1px solid var(--border); border-radius:8px; padding:10px 12px; font:inherit; font-size:var(--fs-md); line-height:1.7; resize:vertical; }
.ai-ta:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.ai-warn { margin:6px 0 0; color:#7a5a12; font-size:var(--fs-sm); }
.ai-go { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.ai-go button { display:flex; flex-direction:column; align-items:center; gap:1px; padding:9px 4px; border:1px solid var(--accent-dark); border-radius:10px; background:var(--accent-dark); color:#fff; font:inherit; cursor:pointer; min-width:0; }
.ai-go button:hover { background:#244b7a; }
.ai-go b { font-size:1.02em; }
.ai-go span { font-size:.8em; white-space:nowrap; }
.ai-hint { margin:6px 0 0; color:var(--muted); font-size:var(--fs-xs); line-height:1.6; }
.ai-done { margin:8px 0 0; padding:8px 12px; border-radius:8px; background:var(--success-soft); color:var(--success); font-size:var(--fs-sm); line-height:1.6; }
.ai-done a { color:var(--success); font-weight:bold; text-decoration:underline; }
.ai-foot { margin:12px 0 0; color:var(--muted); font-size:var(--fs-xs); line-height:1.6; }
.ai-acts { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.ai-acts .btn, .ai-acts .btn-secondary { font:inherit; font-size:var(--fs-md); cursor:pointer; }
.ai-acts .btn-secondary { background:var(--panel); color:var(--accent-dark); }
.ai-acts button:disabled { opacity:.5; cursor:default; }
.ai-safety { margin:14px 0 0; padding:8px 12px; border-radius:8px; background:var(--accent-soft); color:var(--accent-dark); font-size:var(--fs-xs); line-height:1.6; }
@media (max-width: 768px) {
  .note-title-row { gap:8px; }
  .ai-open-btn { padding:7px 12px; }
  .ai-back { padding:10px 8px; }
  .ai-box { padding:14px; }
  .ai-seg label { padding:7px 9px; font-size:.88em; }
  .ai-seg label.on { padding:6px 8px; }
  .ai-seg small { margin-left:0; }
  .ai-ta { font-size:16px; }
  .ai-acts .btn, .ai-acts .btn-secondary { flex:1 1 auto; text-align:center; }
  .ai-acts .ai-close { flex:0 0 100%; border:0; background:none; text-decoration:underline; }   /* 「閉じる」は控えめに */
}
@media (max-width: 480px) {
  /* スマホ:「AI に相談」は「AI」だけにして、題を広く見せる */
  .ai-open-btn .ai-txt { display:none; }
  .note-title-row .note-title-input { font-size:18px; }
}
@media (max-width: 380px) { .ai-go span { white-space:normal; } }

/* 印刷の時は、ノートの中身だけを出す(色の帯・ボタン・画像の追加・削除のリンクは出さない) */
@media print {
  .topbar, .note-stack-row, .note-toolbar, .bg-tb-wrap, .ai-open-btn, .image-section, .delete-note-form, .ai-back, .draft-banner, .note-tags-input { display:none !important; }
  .note-page { margin:0; padding:0; box-shadow:none; }
  .note-title-row { border-bottom:1px solid #999; }
  .ql-container.ql-snow { border:0; }
  #editor { min-height:0; }
}

/* ノートの印刷のボタン(2026-10-12)。色の帯の「◀一覧」の右。スマホは絵だけ */
.note-print-btn { flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; background:#fff; color:var(--nbc); border:1px solid #fff; border-radius:999px; padding:5px 12px; font:inherit; font-size:var(--fs-sm); font-weight:bold; cursor:pointer; white-space:nowrap; }
.note-print-btn:hover { background:#f1f4f8; }
.note-print-btn svg { width:16px; height:16px; }
@media (max-width: 768px) {
  .note-print-btn { padding:0; width:40px; height:40px; justify-content:center; }
  .note-print-btn .np-txt { display:none; }
  .note-print-btn svg { width:20px; height:20px; }
}
@media print {
  .note-print-btn { display:none !important; }
  .note-title-row .note-title-input { font-size:1.4em; }
  .msg-error, .autosave-status, .stack-choose-hint { display:none !important; }
  .ql-editor { padding:0; }
}
@media print {
  body { background:#fff !important; }
  .note-page .ql-container.ql-snow { border:0 !important; }   /* quill.snow.css が後から読まれるため、ここで強く消す */
  .note-page .meta { display:none; }
}
/* 「AI に相談」の送り方の手順(2026-10-12。自動で貼り付けると思われないよう、押す前に見せる) */
.ai-steps { margin:0 0 8px; padding:8px 12px 8px 30px; background:var(--accent-soft); border-radius:8px; font-size:var(--fs-sm); line-height:1.7; color:var(--accent-dark); }
.ai-steps li { margin:2px 0; }

/* ===== アーカイブとごみ箱(2026-10-13) ===== */
/* ノートの画面・ノートブックの設定のいちばん下:「アーカイブに保管」「ごみ箱に入れる」(上の色の帯にはボタンを増やさない) */
.delete-note-form { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px 20px; }
.arch-btn { background:none; border:none; padding:4px 2px; min-height:40px; cursor:pointer; font:inherit; font-size:var(--fs-sm); color:var(--muted); display:inline-flex; align-items:center; gap:5px; }
.arch-btn svg { width:15px; height:15px; flex-shrink:0; }
.arch-btn.danger { color:var(--danger); }
.arch-btn:hover { text-decoration:underline; }
.arch-btn:disabled { opacity:.5; cursor:default; }
.nb-arch-form { max-width:none; margin:0; }
.nb-arch-hint { text-align:right; }
/* 押したあとの「元に戻す」付きのお知らせ(一覧の上) */
.page-banner.arch-notice { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; }
.page-banner.arch-notice form { margin-left:auto; }
.arch-ok { background:var(--success-soft); color:var(--success); border-bottom:1px solid #b9dcc7; }
.arch-trash { background:var(--warm-soft); color:#7a5a12; border-bottom:1px solid #ecd3a1; }
.arch-undo { background:#fff; color:inherit; border:1px solid currentColor; border-radius:999px; padding:3px 16px; min-height:34px; font:inherit; font-size:var(--fs-sm); font-weight:bold; cursor:pointer; white-space:nowrap; }
/* 保管した・ごみ箱の中のノートを開いた時(色の帯のすぐ下) */
.note-arch-state { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; padding:9px 14px; font-size:var(--fs-sm); background:var(--accent-soft); color:var(--accent-dark); }
.note-arch-state form { margin:0 0 0 auto; }
.note-arch-state .arch-undo { margin-left:auto; }
.note-arch-state.is-trash { background:var(--warm-soft); color:#7a5a12; }
.note-trash-page .note-toolbar { display:flex; align-items:center; gap:10px; padding-top:8px; padding-bottom:8px; }
.note-trash-page .nt-where { flex:1; min-width:0; font-size:var(--fs-sm); font-weight:bold; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.note-trash-title { font-size:var(--fs-xl); margin:18px 14px 6px; overflow-wrap:anywhere; }
.note-trash-page .meta { margin-left:14px; margin-right:14px; }
.note-trash-body { padding:12px 14px; min-height:0; }
.note-trash-page .image-grid { margin:0 14px; }
/* 左メニューの「アーカイブとごみ箱」(中にある数を右に) */
.arch-link { display:flex !important; align-items:center; gap:6px; }
.arch-cnt { margin-left:auto; font-size:var(--fs-xs); color:#7a5a12; background:var(--warm-soft); border-radius:999px; padding:0 7px; white-space:nowrap; }
/* 「アーカイブとごみ箱」の画面 */
.ab-page { background:var(--panel); border-radius:10px; padding:20px 24px 28px; margin-top:20px; margin-bottom:40px; }
.ab-page h2 { margin:4px 0 12px; }
.ab-back { margin:0; font-size:var(--fs-sm); }
.ab-tabs { display:flex; gap:6px; margin:0 0 16px; padding:0 4px; border-bottom:2px solid var(--accent-dark); }
/* タブ:上の角が丸い見出し。今いる方は濃い青で塗り、下の線とつなげる。もう一方は薄い灰色(2026-10-13 オーナー「タブメニューで見やすく」) */
.ab-tab { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:11px 10px; border:1px solid var(--border); border-bottom:none; border-radius:10px 10px 0 0; background:var(--bg); color:var(--muted); font-weight:bold; font-size:1.02em; white-space:nowrap; }
.ab-tab svg { width:20px; height:20px; flex-shrink:0; }
.ab-pane[hidden] { display:none; }
.ab-tab:hover { background:var(--accent-soft); color:var(--accent-dark); }
.ab-tab[aria-current="page"] { background:var(--accent-dark); border-color:var(--accent-dark); color:#fff; }
.ab-n { display:inline-block; min-width:22px; text-align:center; padding:0 7px; border-radius:999px; background:var(--warm-soft); color:#7a5a12; font-size:var(--fs-sm); }
.ab-lead { margin:0 0 10px; font-size:var(--fs-sm); color:var(--muted); }
.ab-find { display:flex; gap:8px; margin:0 0 10px; }
.ab-find input { flex:1; min-width:0; padding:8px 12px; border:1px solid var(--border); border-radius:8px; font:inherit; }
.ab-empty { text-align:center; color:var(--muted); padding:28px 0 12px; }
.ab-rows { list-style:none; margin:0; padding:0; border-top:1px solid var(--border); }
.ab-row { display:flex; align-items:center; gap:10px; padding:10px 2px; border-bottom:1px solid var(--border); }
.ab-ic { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; font-size:var(--fs-xs); font-weight:bold; }
.ab-main { flex:1; min-width:0; }
.ab-ttl { display:block; font-weight:bold; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ab-sub { display:block; font-size:var(--fs-sm); color:var(--muted); }
.ab-days { display:inline-block; padding:0 7px; border-radius:999px; background:var(--warm-soft); color:#7a5a12; }
.ab-acts { display:flex; gap:6px; flex-shrink:0; align-items:center; }
.ab-acts form { margin:0; }
.ab-pill { display:inline-flex; align-items:center; min-height:34px; border-radius:999px; padding:4px 14px; font:inherit; font-size:var(--fs-sm); font-weight:bold; cursor:pointer; white-space:nowrap; border:1px solid var(--accent-dark); background:#fff; color:var(--accent-dark); }
.ab-pill.solid { background:var(--accent-dark); color:#fff; }
.ab-pill.red { border-color:var(--danger); color:var(--danger); }
.ab-foot { display:flex; justify-content:flex-end; margin-top:14px; }
.ab-empty-btn { border-width:2px; }
@media (max-width: 768px) {
  .ab-page { margin:12px; padding:16px; }
  .ab-row { flex-wrap:wrap; }
  .ab-acts { width:100%; justify-content:flex-end; padding-left:40px; }
}
@media print {
  .note-arch-state, .arch-notice { display:none !important; }
}