/* satome — 明るくスッキリ、モバイルファースト。書くことに集中できるUI。 */
:root {
  color-scheme: light;
  --bg: #f6f8fb;
  --card: #ffffff;
  --ink: #1c2530;
  --muted: #6b7785;
  --line: #e5ebf1;
  --accent: #2f7de1;
  --accent-ink: #ffffff;
  --danger: #d9534f;
  --ok: #1f9d63;
  --soon: #e08a00;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(20, 40, 70, 0.06), 0 8px 24px rgba(20, 40, 70, 0.06);
  /* 本文カラムの左右余白。スマホでは @media で詰める（下部参照） */
  --gutter: 1rem;
}

* {
  box-sizing: border-box;
}
/* hidden 属性は要素側の display 指定（.menu-item の flex 等）に勝てないので明示的に優先させる */
[hidden] {
  display: none !important;
}
html,
body {
  margin: 0;
}
body {
  font-family: system-ui, -apple-system, 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

/* フォーム要素は明示的に白地・濃文字にする。color-scheme だけだと OS のダークモードで
   背景が黒く出る環境があるため、background/color を必ず指定する。 */
input,
textarea,
select {
  color-scheme: light;
  background: var(--card);
  color: var(--ink);
}

button {
  font: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0.55rem 0.9rem;
  background: #eef2f7;
  color: var(--ink);
  transition: filter 0.15s ease, background 0.15s ease;
}
button:hover {
  filter: brightness(0.97);
}
button:active {
  transform: translateY(1px);
}
button.primary {
  background: var(--accent);
  color: var(--accent-ink);
}
button.ghost {
  background: transparent;
  border-color: var(--line);
}
button.danger {
  color: var(--danger);
}
button.ghost.danger {
  border-color: #f0d2d1;
}
button.block {
  display: block;
  width: 100%;
  min-height: 46px;
}

/* AIクレジットのパック購入ボタン（/billing・加入者のみ）。縦積みで間隔だけ確保する。 */
.ai-pack-grid {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

/* アイコンボタン（ヘッダ・ブロックバー共通） */
.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink);
  border-radius: 10px;
}
.iconbtn:hover {
  filter: none;
  background: #eef2f7;
}
.iconbtn svg {
  display: block;
}
.iconbtn .glyph {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
}

/* ---------- アプリバー（ヘッダ + ブロックバー、上部固定） ---------- */
.appbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  padding-top: max(0.55rem, env(safe-area-inset-top));
}
.brand {
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 1.1rem;
  color: inherit;
  text-decoration: none;
  /* ロゴは折り返さない。右側（残り時間＋アイコン）が増えると flex がロゴを縮めて
     「✎ / satome」の2行になり、ヘッダの高さごと崩れる（狭い画面で実測）。 */
  white-space: nowrap;
}
/* ロゴはどのページでもトップ（/）へ戻る共通リンク。クリック可能と分かるよう軽いホバー。 */
a.brand {
  cursor: pointer;
}
a.brand:hover {
  opacity: 0.72;
}
.brand::before {
  content: '✎ ';
  color: var(--accent);
}
.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.topbar .remaining {
  font-size: 0.8rem;
  color: var(--muted);
  background: #f5f8fc;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}
.topbar .remaining.soon {
  color: var(--soon);
  background: #fff3df;
}
#btn-share.active {
  color: var(--accent);
}
/* 自動保存の状態ドット（保存中: 黄・点滅 / 保存済み: 緑） */
.savestate {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
  flex: 0 0 auto;
  margin-right: 0.15rem;
  transition: background 0.2s ease;
}
/* 保存中は「進行中」＝アクセント色の点滅。**オフライン（下）と同じ色にしてはいけない**:
   どちらも警告色だったため「保存中なのかオフラインなのか」が見分けられず、実際に不具合の
   切り分けを誤らせた（点滅とリングの差だけでは、動いている画面で判別できない）。 */
.savestate[data-state='saving'] {
  background: var(--accent);
  animation: pulse 1s ease-in-out infinite;
}
.savestate[data-state='saved'] {
  background: var(--ok);
}
/* オフライン＝未送信の変更が端末に控えてある状態。赤（失敗）ではなく警告色にするのは、
   「まだ保存できていない」が「失われてはいない」＝接続が戻れば自動で送られるため。 */
.savestate[data-state='offline'] {
  background: var(--soon);
  box-shadow: 0 0 0 2px #fff3d6;
}

/* 競合の解決: 2つの内容を並べて見せる。狭い画面では縦に積む（比較は上下でも成立する）。 */
.conflict-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin: 0.6rem 0;
}
@media (max-width: 640px) {
  .conflict-cols {
    grid-template-columns: 1fr;
  }
}
.conflict-title {
  margin: 0 0 0.2rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}
/* どちらが新しいかの手がかり。判定には使わない（端末とサーバーで時計がずれうる）ので、
   見出しより控えめにして「参考情報」であることを見た目でも示す。 */
.conflict-time {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  color: var(--muted);
}
.conflict-preview {
  margin: 0;
  max-height: 30vh;
  overflow: auto;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit; /* pre だが本文の比較なので等幅にしない（読みやすさ優先） */
}
/* 操作は縦積み。既定の逃げ道（両方残す）を上に、破壊的な選択ほど下に置く。 */
.conflict-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.8rem;
}
/* AI画像生成ダイアログ（かたち選択・切り出しプレビュー）。 */
.aiimg-shapes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  border: 0;
  padding: 0;
  margin: 0.6rem 0 0;
}
.aiimg-shapes legend {
  margin-bottom: 0.3rem;
}
.aiimg-shape {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  /* タッチでも押しやすい高さを確保する（スマホの誤タップ対策）。 */
  min-height: 44px;
}
.aiimg-shape:has(input:checked) {
  border-color: var(--accent);
  background: rgba(47, 125, 225, 0.08);
}
.aiimg-shape small {
  color: var(--muted);
  margin-left: 0.25rem;
}
.aiimg-shape-text {
  display: flex;
  align-items: baseline;
}
/* かたちの見本。寸法は 28px 角に収まる実寸をマークアップ側で指定する（比がそのまま見える）。 */
.aiimg-swatch {
  background: var(--muted);
  opacity: 0.45;
  border-radius: 2px;
  flex: none;
}
.aiimg-shape:has(input:checked) .aiimg-swatch {
  background: var(--accent);
  opacity: 1;
}
.aiimg-note {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}
/* 生成後の「かたち」。プレビューのすぐ下に置くので、余白は詰めて絵と1組に見せる。
   この1組が増えた分、下の「作り直す」がスクロールの下へ隠れやすい＝見出しの行も詰める。 */
.aiimg-shapes-crop {
  margin-top: 0;
}
.aiimg-shapes-crop legend {
  font-size: 0.85rem;
  margin-bottom: 0.15rem;
}
/* プレビューは生成物（正方形）の全体。捨てる部分は canvas 側で暗く塗る。 */
.aiimg-preview {
  display: flex;
  justify-content: center;
  margin: 0.6rem 0;
}
.aiimg-preview canvas {
  max-width: 100%;
  height: auto;
  /* 操作ボタンを画面内に収めるため、プレビューの高さを画面に対して抑える。
     canvas は置換要素なので max-width/max-height の両方を守りつつ比を保つ。
     ボタンが折りたたみの下に隠れると、有料の「作り直す」に気づけない。
     ※ 生成後に「かたち」の選択が増えた分だけ、44vh から下げてある。 */
  max-height: 32vh;
  border-radius: 8px;
  border: 1px solid var(--line);
  /* ドラッグで位置を動かすため、ブラウザ既定のスクロール/ズームに取られないようにする。 */
  touch-action: none;
  cursor: grab;
}
.aiimg-preview canvas:active {
  cursor: grabbing;
}
.aiimg-anchor {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
}
.aiimg-anchor input[type='range'] {
  flex: 1;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* 初回訪問の説明メモに重ねる案内バー（ヘッダー直下・appbar と一緒に固定） */
.welcome-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.9rem;
  border-top: 1px solid var(--line);
  background: #eaf2ff;
}
.welcome-bar-text {
  flex: 1;
  min-width: 0;
  font-size: 0.84rem;
  color: var(--ink);
}
.welcome-bar .primary {
  flex: 0 0 auto;
  padding: 0.45rem 0.75rem;
  font-size: 0.85rem;
  white-space: nowrap;
}
/* 複数行を選んでいる間だけ出る操作バー（タッチ端末のみ）。
   **付与元: web/main.tsx の SelectionActionBar（.appbar へ portal で挿す）。**
   このクラス群は CSS 側でしか見えないため、消す前に必ず web/main.tsx を grep すること。
   iOS は複数行を選ぶと OS 標準の選択メニューが選択のすぐ近くを覆い、⠿ハンドルに届かない。
   消そうとして本文をタップすると選択ごと解ける、という詰みの逃げ道。
   `.appbar` は sticky なので、長いメモを下までスクロールしても常に画面の上に出ている。 */
.selbar {
  border-top: 1px solid var(--line);
  background: #fff;
}
.selbar-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.6rem;
  /* 狭い画面では入り切らないぶんを横スクロールに逃がす（項目を消して迷わせない）。
     大事な字下げ/字上げが左端に来る順で並べてある。 */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.selbar-row::-webkit-scrollbar {
  display: none;
}
.selbar-count {
  flex: 0 0 auto;
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
  padding-right: 0.15rem;
}
.selbar-sep {
  flex: 0 0 auto;
  width: 1px;
  height: 20px;
  background: var(--line);
  margin: 0 0.15rem;
}
.selbar-btn {
  flex: 0 0 auto;
  /* タップ目標は 44px 相当を確保する（スマホの主操作導線なので小さくしない）。 */
  min-width: 40px;
  height: 40px;
  padding: 0 0.5rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}
.selbar-btn.is-on {
  border-color: var(--accent);
  color: var(--accent);
  background: #eef5ff;
}
.selbar-pop {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0 0.6rem 0.5rem;
  border-top: 1px dashed var(--line);
  padding-top: 0.5rem;
}
.selbar-pop-item {
  min-height: 40px;
  padding: 0 0.7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
.selbar-pop-item.is-on {
  border-color: var(--accent);
  color: var(--accent);
  background: #eef5ff;
}
.selbar-colors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
}
.selbar-pop-label {
  flex: 0 0 auto;
  width: 3.6rem;
  font-size: 0.75rem;
  color: var(--muted);
}
.selbar-swatch {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

/* メモ内検索バー（≡メニューから開く。welcome-bar と同じ形＝appbar の下にぶら下がる1行） */
.findbar {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.9rem;
  border-top: 1px solid var(--line);
  background: #fff;
}
.find-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px; /* iOS でフォーカス時に画面がズームされるのを防ぐ（16px 未満だと拡大される） */
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}
.find-count {
  flex: 0 0 auto;
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  min-width: 3.2em;
  text-align: right;
}
/* 検索のヒット。当たった行は薄く、いま見ている行ははっきり光らせる（見失わないよう出したまま）。
   付与は ProseMirror のデコレーション（web/main.tsx）＝再描画されても消えない。 */
.find-hit {
  background: rgba(47, 125, 225, 0.1);
  border-radius: 8px;
}
.find-hit-current {
  background: rgba(47, 125, 225, 0.24);
}
/* 選択バーの対象ブロック。タッチ端末ではバーに触れた時点でブラウザが選択の色を消すため、
   「N行を選択中」だけでは どの行が対象か分からない。その代わりに出す帯。
   検索ヒット（青）とは別物なので色を変え、左に線を足して「範囲」だと分かるようにする。
   **付与元: web/main.tsx の registerSelTargetHighlight（デコレーション）。**
   このクラスは CSS 側でしか見えないため、消す前に必ず web/main.tsx を grep すること
   （テストプールは .css を読めない＝typecheck も test も緑のまま視覚回帰する）。 */
.sel-target {
  background: rgba(47, 125, 225, 0.08);
  /* 角丸を付けない: 連続する行どうしの継ぎ目に切れ込みが入り、ひと続きの「範囲」ではなく
     バラバラの帯に見える（375px で実測）。左の線もこれで縦につながる。 */
  box-shadow: inset 3px 0 0 var(--accent);
}
/* 別端末更新の通知バー（welcome-bar と同じ形。色だけ変えて区別する） */
.sync-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.9rem;
  border-top: 1px solid var(--line);
  background: #fff3d6;
}
.sync-bar-text {
  flex: 1;
  min-width: 0;
  font-size: 0.84rem;
  color: var(--ink);
}
.sync-bar .primary,
.sync-bar .ghost {
  flex: 0 0 auto;
  padding: 0.45rem 0.75rem;
  font-size: 0.85rem;
  white-space: nowrap;
}
/* アーカイブ中の帯。黄色（＝この画面の状態）の仲間だが、「一時的な通知」ではなく
   **いま編集できない理由**なので、押し出しの弱い落ち着いた地色にして出しっぱなしでも疲れないようにする。 */
.archive-bar {
  background: #eef2f7;
}

/* 通知の帯（お知らせ・別端末更新・アーカイブ中・未送信の控え）は **sticky なヘッダの外**に置く。
   理由は src/views/editor.ts のコメント参照（ヘッダの中に入れると帯の高さぶんメモの末尾に
   届かなくなる／画面を食い続ける）。ここでは見た目の後始末だけを行う:
   ヘッダの border-bottom と先頭の帯の border-top が重なって2本線に見えるので1本落とす。 */
.notice-bars > :first-child {
  border-top: 0;
}

/* 「別のメモ」に未送信の変更が引っかかっているときの帯。
   スマホ（375px）で説明文・リンク・閉じるを1行に押し込むと、説明文が2〜3文字幅の細い柱になって
   読めなくなる。行そのものを折り返し、幅が足りなければ説明文が1行を占めてリンクは下の行へ回す。 */
.stuck-bar {
  flex-wrap: wrap;
}
.stuck-bar .sync-bar-text {
  flex: 1 1 18rem; /* これだけの幅が取れないときは折り返す（＝スマホでは必ず自分の行になる） */
}
/* 行き先リンク。件数が増えても折り返して収める（横スクロールは作らない）。 */
.stuck-bar-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.5rem;
  min-width: 0;
}
.stuck-bar-links a {
  font-size: 0.84rem;
  font-weight: 600;
  /* タップ目標を確保する（44px の行に収まる範囲で、指で押せる高さにする）。 */
  padding: 0.2rem 0;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 運営からのお知らせ ---------- */
/* 重要なお知らせのバナー。編集画面（/）とマイメモ（/notes）で共有する。
   .sync-bar（別端末で更新されました）と同じ行の形にそろえ、色だけ変えて役割を分ける
   ＝「黄色＝この画面の状態」「青＝運営からの連絡」。 */
.news-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.9rem;
  border-top: 1px solid var(--line);
  background: #e7f0fd;
}
.news-bar-tag {
  flex: 0 0 auto;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: #2f7de1;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}
.news-bar-text {
  flex: 1;
  min-width: 0;
  font-size: 0.84rem;
  color: var(--ink);
}
.news-bar-link {
  flex: 0 0 auto;
  font-size: 0.85rem;
  white-space: nowrap;
}
.news-bar-close {
  flex: 0 0 auto;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0.2rem 0.35rem;
  font-size: 0.9rem;
  line-height: 1;
}

/* ≡メニューの未読●。件数ではなく「ある/ない」だけを出す（1件ごとの既読を持たないため、
   数えても正確にならない。バッジの意味を「未読がある」に限定して誤解を避ける）。 */
.menu-badge.news-dot {
  background: #d64545;
  color: #fff;
  font-size: 0.6rem;
  line-height: 1;
  padding: 0.2rem 0.3rem;
}

/* 確認が要るお知らせのモーダル。他のモーダルより少し広く、本文を読ませる想定。
   背景クリック・Esc では閉じない（誤タップで「確認しなかった」ことにしないため。news-ack.js）。 */
.ack-modal {
  width: min(520px, calc(100vw - 1.6rem));
}
.ack-subject {
  margin: 0 0 0.5rem;
  font-size: 1.02rem;
  line-height: 1.4;
}
.ack-body {
  max-height: 46vh;
  overflow: auto;
  font-size: 0.9rem;
  line-height: 1.7;
}
.ack-body p {
  margin: 0 0 0.6rem;
}
.ack-more {
  margin: 0.2rem 0 0;
  font-size: 0.88rem;
}
.ack-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.9rem;
}
.ack-actions .primary {
  flex: 1;
}
.ack-note {
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

/* お知らせ一覧（/news）。ドキュメント系（.doc）の中に置く。 */
.news-list {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
}
.news-item {
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}
.news-item:last-child {
  border-bottom: 1px solid var(--line);
}
.news-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.82rem;
}
.news-tag {
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: #2f7de1;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}
.doc .news-title {
  margin: 0.3rem 0 0;
  font-size: 1.05rem;
}
.news-body {
  margin-top: 0.4rem;
}
.doc .news-body p {
  margin: 0.4rem 0 0;
}
.news-more {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}
.news-empty {
  margin-top: 1.2rem;
  color: var(--muted);
}

/* ---------- ページ / エディタ ---------- */
.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem var(--gutter) 6rem;
}
.editor {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.9rem 1rem 0.9rem 2.9rem; /* 左にブロックハンドルの余白 */
  min-height: 60vh;
}
.block {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.12rem 0;
}
.block .content {
  flex: 1;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 1.6em;
}
.block[data-type='heading'] .content {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.35;
}
.block[data-type='bullet'] {
  padding-left: 0.2rem;
}
.block[data-type='bullet']::before {
  content: '•';
  color: var(--accent);
  margin-top: 0.05rem;
}
.block[data-type='check'] .content {
  align-self: center;
}
.block[data-type='check'].checked .content {
  color: var(--muted);
  text-decoration: line-through;
}
.block[data-type='divider'] {
  padding: 0.4rem 0;
}
.block[data-type='divider'] hr {
  flex: 1;
  border: none;
  border-top: 1px solid var(--line);
  margin: 0;
}
.block[data-type='image'] {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}
.image-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.block[data-type='image'] img {
  display: block;
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid var(--line);
}
/* 画像削除は常時のフル幅ボタンをやめ、角に控えめな丸い×を重ねる */
.img-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  min-width: 0;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: rgba(20, 30, 45, 0.5);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  opacity: 0.9;
}
.img-remove:hover {
  opacity: 1;
  filter: none;
  background: rgba(20, 30, 45, 0.72);
}
.check-box {
  width: 22px;
  height: 22px;
  min-width: 22px;
  padding: 0;
  border: 1.6px solid #c4cfdb;
  border-radius: 6px;
  background: #fff;
  margin-top: 0.1rem;
}
.block.checked .check-box {
  background: var(--ok);
  border-color: var(--ok);
}
.block.checked .check-box::after {
  content: '✓';
  color: #fff;
  font-size: 0.85rem;
  line-height: 1;
  display: block;
  margin-top: -1px;
}
.editor .block:first-child .content:empty::before {
  content: 'ここに書く…';
  color: #aab4c0;
}

/* ---------- オーバーレイ（共有ダイアログ / メニュー） ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
}
.overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 30, 45, 0.4);
  backdrop-filter: blur(2px);
}
.modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 1.6rem));
  max-height: calc(100vh - 2rem);
  overflow: auto;
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 1.1rem;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.7rem;
}
.modal-head strong {
  font-size: 1.05rem;
}

.menu {
  position: fixed;
  top: 56px;
  right: 10px;
  width: min(284px, calc(100vw - 20px));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 0.4rem;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0.55rem 0.6rem;
  border-radius: 10px;
  min-height: 44px;
  /* <button> だけでなく <a>（マイメモの≡メニュー＝素の遷移リンク）でも同じ見た目にする */
  color: inherit;
  text-decoration: none;
}
.menu-item svg {
  flex: 0 0 auto;
}
.menu-item > span:first-of-type {
  flex: 1;
  min-width: 0;
}
.menu-item:hover {
  filter: none;
  background: #eef2f7;
}
.menu-item.danger {
  color: var(--danger);
}
.menu-item.soon {
  color: var(--muted);
}
.menu-sep {
  height: 1px;
  background: var(--line);
  margin: 0.3rem 0.2rem;
}
.menu-label {
  font-size: 0.74rem;
  color: var(--muted);
  padding: 0.35rem 0.6rem 0.15rem;
}
.soon-tag {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.68rem;
  color: var(--muted);
  background: #eef2f7;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
}

/* 共有ダイアログの中身 */
.share-label {
  font-weight: 600;
}
.share-hint {
  font-size: 0.84rem;
  color: var(--muted);
  margin: 0.2rem 0 0.6rem;
}
.share-url {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
}
.share-url input {
  flex: 1;
  min-width: 0;
  font: inherit;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
  color: var(--ink);
}
.share-expiry {
  margin: 0.2rem 0 0.7rem;
}
.share-expiry-select {
  width: 100%;
  font: inherit;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}
.share-upsell {
  display: inline-block;
  font-size: 0.84rem;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
}
.share-stats {
  font-size: 0.84rem;
  color: var(--muted);
  margin: 0.2rem 0 0.7rem;
}
/* 線画の目アイコン（閲覧数）。文字サイズに追従し、ベースラインに合わせる。 */
.eye {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
}
/* 線画操作アイコン（固定/アーカイブ/削除）。ラベル文字と並ぶときは文字サイズに追従。 */
.ico {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.18em;
  flex: 0 0 auto;
}
.qr {
  display: flex;
  justify-content: center;
  padding: 0.7rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 0.7rem;
}
.qr img {
  width: 188px;
  height: 188px;
  image-rendering: pixelated;
}

/* ---------- ステータスバー（トースト） ---------- */
/* 画面下中央のトースト。
   以前は left:50% + translateX(-50%) で中央に寄せていたが、この書き方だと**使える幅が
   画面の半分しか無く**（左端が中央にあるため）、少し長い文言でも右へはみ出して両端が切れていた。
   left/right を 0 にして auto マージンで中央寄せすると、画面幅いっぱいまで使えるうえ
   はみ出さない。内容に合わせて縮み、長い文言だけ折り返す。 */
.statusbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  margin: 0 auto;
  width: fit-content;
  max-width: min(92vw, 30rem);
  z-index: 60;
  font-size: 0.85rem;
  color: #fff;
  background: #2b3542;
  border-radius: 999px;
  transition: padding 0.15s ease;
  pointer-events: none;
  text-align: center;
  line-height: 1.45;
}
.statusbar:not(:empty) {
  padding: 0.45rem 1rem;
  box-shadow: var(--shadow);
}
.statusbar.ok {
  background: var(--ok);
}
.statusbar.err {
  background: var(--danger);
}

/* 削除直後の「元に戻す」トースト（無料/匿名）。ステータスバーと同じ位置に、ボタン付きで表示。 */
.undo-toast {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 61;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0.6rem 0.45rem 1rem;
  font-size: 0.85rem;
  color: #fff;
  background: #2b3542;
  border-radius: 999px;
  box-shadow: var(--shadow);
  /* 短い通知（「先頭に固定しました」）は1行に収まるが、**理由の説明は長くなる**
     （確認ダイアログが抑止されたときの案内など）。nowrap のままだと画面幅からはみ出して
     文末が読めなくなるので、画面内に収めて折り返す。折り返すときは角丸を丸ごと 999px に
     しておくと形が崩れるため、複数行になったら控えめな角丸にする。 */
  /* width:max-content が要る: flex の中身は「1文字ぶん」まで縮められるため、max-width だけだと
     縦長の細い箱になる（実測）。「必要なぶんだけ広げ、画面幅で止める」を両方書く。 */
  width: max-content;
  max-width: min(34rem, calc(100vw - 2rem));
  white-space: normal;
  overflow-wrap: anywhere;
}
.undo-toast[hidden] {
  display: none;
}
/* 「元に戻す」を持つトーストは丸いピル（押せるものが1つ載った短い通知）。
   ボタンの無い**お知らせだけのトースト**は、折り返して数行になることがある（失敗の理由など）ので
   角丸を控えめにする: 999px のままだと左右が大きな半円になり、文字が縁に寄って読みにくい。 */
.undo-toast:not(:has(.undo-toast-btn)) {
  border-radius: 12px;
  padding: 0.55rem 0.9rem;
  line-height: 1.5;
}
.undo-toast-btn {
  border: none;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font: inherit;
  font-weight: 600;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
}
.undo-toast-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* ---------- 閲覧画面 ---------- */
.viewer {
  /* 閲覧（共有メモ）は読み物。1200px だと PC で行長が伸びて読みにくいため、
     ドキュメント系と同じ読みやすい列幅に揃える。 */
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gutter) 4rem;
}
.viewer .topbar {
  margin: 0 calc(-1 * var(--gutter)) 0.6rem;
}
.viewer .meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.82rem;
  margin-bottom: 0.6rem;
}
.badge {
  background: #eef3f9;
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
}
.badge.view-only {
  color: var(--accent);
  background: #e9f1fc;
}
.badge.soon {
  color: var(--soon);
  background: #fff3df;
}
.viewer .remaining {
  white-space: nowrap;
}
.viewer .remaining.soon {
  color: var(--soon);
}
.typing {
  color: var(--accent);
  font-size: 0.82rem;
  animation: fade 2.2s ease forwards;
}
@keyframes fade {
  0%,
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.note-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.1rem;
}
.note-card .b-paragraph {
  margin: 0.2rem 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.note-card .b-heading {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0.6rem 0 0.2rem;
}
.note-card ul.b-list {
  margin: 0.2rem 0;
  padding-left: 1.2rem;
}
.note-card .b-check {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  margin: 0.1rem 0;
}
.note-card .b-check.done {
  color: var(--muted);
  text-decoration: line-through;
}
.note-card .b-check .mark {
  color: var(--ok);
}
.note-card hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 0.7rem 0;
}
.note-card img {
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid var(--line);
}
.note-card a {
  color: var(--accent);
  word-break: break-all;
}
.viewer .actions {
  margin-top: 1rem;
}
.viewer .actions .primary {
  width: 100%;
}
.expired {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted);
}
.expired h1 {
  font-size: 1.3rem;
  color: var(--ink);
}

/* ---------- ブロックの + / ドラッグハンドル（BlockNote風） ---------- */
.block-gutter {
  position: fixed;
  z-index: 30;
  display: flex;
  align-items: center;
  height: 28px;
}
.gutter-btn {
  width: 21px;
  height: 26px;
  min-width: 21px;
  padding: 0;
  border: none;
  background: transparent;
  color: #9aa6b2;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gutter-btn:hover {
  filter: none;
  background: #eef2f7;
  color: var(--ink);
}
.gutter-drag {
  cursor: grab;
  touch-action: none;
}
.gutter-drag:active {
  cursor: grabbing;
}
.drop-line {
  position: fixed;
  z-index: 31;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  pointer-events: none;
  transform: translateY(-1px);
}
.block.dragging {
  opacity: 0.4;
}
body.reordering {
  cursor: grabbing;
  user-select: none;
}

/* 共有ダイアログのコピー（アイコンボタン） */
.copy-btn {
  flex: 0 0 auto;
  width: 46px;
  min-width: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 10px;
}
.copy-btn.copied {
  color: var(--ok);
  border-color: var(--ok);
}
.copy-btn svg {
  display: block;
}

/* PDF等のファイルブロックはタップで別タブ表示するので、押せると分かるように */
.bn-block-content[data-content-type='file'] {
  cursor: pointer;
}

/* ---------- 埋め込み（YouTube/Vimeo）ブロック ---------- */
.embed-wrap {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
}
.embed-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.embed-empty {
  padding: 0.4rem 0;
}
.embed-setbtn {
  border: 1px dashed var(--line);
  background: #f1f4f8;
  color: var(--muted);
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  width: 100%;
  min-height: 46px;
}
.embed-link a {
  color: var(--accent);
  word-break: break-all;
}
/* 直リンクの動画・音声 */
.embed-media video {
  display: block;
  width: 100%;
  max-width: 720px;
  border-radius: 10px;
  background: #000;
}
.embed-media.embed-audio audio {
  width: 100%;
}

/* ---------- 期限切れ（マスク表示） ---------- */
.viewer.masked .expired-note {
  background: #fff3df;
  border: 1px solid #f0e0c0;
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin-bottom: 0.9rem;
}
.viewer.masked .expired-note strong {
  display: block;
  margin-bottom: 0.15rem;
}
.viewer.masked .expired-note span {
  color: var(--muted);
  font-size: 0.86rem;
}
/* 本文は「あった形」だけぼんやり見せる。原本は復元不可（cronで伏字化済み）。 */
.masked-wrap {
  position: relative;
  max-height: 46vh;
  overflow: hidden;
  border-radius: var(--radius);
}
.masked-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(246, 248, 251, 0) 35%, var(--bg) 100%);
  pointer-events: none;
}
.masked-content {
  filter: blur(6px);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}
/* 広告枠（自社ハウス広告）。無料プランのみ表示。ad が無ければ枠ごと描画されない。 */
.ad-slot {
  position: relative;
  margin: 0.9rem 0;
  background: #f1f4f8;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.ad-slot .ad-label {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  padding: 0 4px;
  pointer-events: none;
}
.ad-slot .ad-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 0.7rem 0.85rem;
  color: inherit;
  text-decoration: none;
}
.ad-slot .ad-img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  flex: 0 0 auto;
}
.ad-slot .ad-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ad-slot .ad-title {
  font-size: 0.95rem;
  line-height: 1.3;
}
.ad-slot .ad-desc {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.35;
}
.ad-slot .ad-cta {
  font-size: 0.82rem;
  color: var(--accent, #2563eb);
  margin-top: 2px;
}
.ad-slot .ad-card:hover .ad-title {
  text-decoration: underline;
}
.expired-cta {
  text-align: center;
  margin-top: 0.4rem;
}
/* 行き止まりページ（期限切れ/無効）だけに出す、活用例への控えめな副次リンク。
   本文が見えているアクティブ閲覧の主CTAには足さない（作成への一直線を濁さない）。 */
.expired-cta-sub {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.82rem;
}
.expired-cta-sub a {
  color: var(--muted);
  text-decoration: none;
}
.expired-cta-sub a:hover {
  color: var(--accent);
}

/* 共有ビューアの下部にある satome 利用への控えめな導線（Pro のロゴ非表示では出さない） */
.viewer-cta {
  text-align: center;
  margin: 1.2rem 0 0.4rem;
  font-size: 0.82rem;
  color: var(--muted, #667);
}
.viewer-cta .viewer-cta-text {
  display: block;
  margin-bottom: 0.2rem;
}
.viewer-cta .viewer-cta-link {
  color: var(--accent, #2563eb);
  text-decoration: none;
}
.viewer-cta .viewer-cta-link:hover {
  text-decoration: underline;
}
/* 受け取った人向けの規約リンク。CTA より一段控えめにして、読み終わりの邪魔をしない。 */
.viewer-cta .viewer-cta-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem 0.8rem;
  margin-top: 0.35rem;
  font-size: 0.76rem;
}
.viewer-cta .viewer-cta-legal a {
  color: var(--muted, #667);
  text-decoration: none;
}
.viewer-cta .viewer-cta-legal a:hover {
  text-decoration: underline;
}

/* ---------- ログイン画面 ---------- */
.auth {
  max-width: 420px;
  margin: 0 auto;
  padding: 1rem 1rem 4rem;
}
/* PCでは横幅の要る画面（マイメモ一覧・プラン選択）を広げる。モバイルは従来の余白を維持。 */
@media (min-width: 640px) {
  .auth-wide {
    max-width: 760px;
  }
  /* フォーム中心の画面（ログイン・お問い合わせ）は 420px だと PC で狭いので少し広げる。
     760px だと間延びするためフォーム向けの中間幅。 */
  .auth-form {
    max-width: 520px;
  }
  /* プラン選択カードは PC で横並びにする（モバイルは縦積みのまま） */
  .auth-wide .plan-cards {
    flex-direction: row;
    align-items: stretch;
  }
  .auth-wide .plan-cards > .plan-card {
    flex: 1 1 0;
  }
}
.auth-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.4rem 1.2rem;
  margin-top: 8vh;
}
/* **自分が使う画面（書く・並べる）は白地、人に見せる画面と手続きの画面はグレー地に紙。**
   もともと全画面が「グレーの机に置いた白い紙」だったが、一覧では紙の縁と余白が
   ただ場所を食っていた（375px で本文まで左右35px＝画面の19%、上に 8vh＝約65px）。
   白地にする: マイメモ・アーカイブ・ゴミ箱・コメントしたメモ・設定・プラン・同意（.auth-wide）と編集画面。
   グレー地のまま: ログイン・お問い合わせ（.auth-form）／共有ビューア／使い方などの文書。
   ＝「作業する画面か、読む・手続きする画面か」で地の色が分かれる。 */
body.is-auth:has(.auth-wide) {
  background: var(--card);
}
/* 編集画面は本文（BlockNote の .bn-editor）自体が白なので、地を白にすれば紙の縁は自然に消える
   ＝ここで枠や影を消す指定は要らない（.bn-editor は角丸だけ持つ）。 */
body.is-editor {
  background: var(--card);
}
/* PC でも一覧・設定系はカードをやめる（白地に浮いた白い紙は意味が無い）。
   ただし**幅の制限（760px）と中央寄せは残す**: 全幅にすると行が長くなりすぎて読みにくい。 */
@media (min-width: 640px) {
  .auth-wide > .auth-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    /* カードが無くなると 8vh の空きは「ただの隙間」に見えるので詰める。 */
    margin-top: 2rem;
    padding-left: 0;
    padding-right: 0;
  }
}
/* スマホでは**一覧・設定系だけ**カードをやめて画面いっぱいに使う。
   **フォーム中心の画面（ログイン・お問い合わせ＝.auth-form）はカードのまま**にする:
   入力が数個しかない画面を全幅にすると、入力欄だけが横に伸びて間延びするため。
   「一覧＝幅を使う／手続き＝カード」と説明の付く分け方にしておく。 */
@media (max-width: 639px) {
  .auth-wide {
    /* 420px の中央寄せ（.auth の既定）も外す。外さないと 420〜639px の幅で
       「角丸の無い白い帯が中央に立つ」＝カードにも全幅にも見えない中途半端な形になる（実測）。 */
    max-width: none;
    padding: 0;
  }
  .auth-wide > .auth-card {
    margin-top: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    /* 内容が短くても下まで白にする（背景のグレーが半端に覗かない）。
       dvh があればそちらを使う: iOS のアドレスバー込みの 100vh だと数十px ぶん余計に伸び、
       スクロールする必要のない画面がわずかにスクロールしてしまう。 */
    min-height: 100vh;
    min-height: 100dvh;
    /* 横向きのノッチ側に文字が潜らないようセーフエリアを足す（縦向きでは 0 になる）。 */
    padding: calc(0.9rem + env(safe-area-inset-top)) calc(0.9rem + env(safe-area-inset-right)) 4rem
      calc(0.9rem + env(safe-area-inset-left));
  }
}
.auth-title {
  font-size: 1.2rem;
  margin: 0.6rem 0 0.2rem;
}
.auth-lead {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0 0 1.1rem;
}
.auth-step {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.auth-label {
  font-size: 0.8rem;
  color: var(--muted);
}
.auth-input {
  font: inherit;
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
  color: var(--ink);
}
.auth-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  background: #fff;
}
.auth-input.code {
  letter-spacing: 0.3em;
  font-size: 1.3rem;
  text-align: center;
}
.auth-select {
  cursor: pointer;
}
.auth-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}
/* ハニーポット（人には見せない。bot 対策の隠しフィールド） */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* 補助リンク（ログイン画面の 使い方 / お問い合わせ） */
.auth-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.9rem;
}
.auth-links a {
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: none;
}
.auth-links a:hover {
  color: var(--ink);
}
.auth-sent {
  font-size: 0.86rem;
  color: var(--muted);
  margin: 0 0 0.2rem;
}
.auth-hint {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 0.8rem;
  opacity: 0.85;
}
.auth-msg {
  min-height: 1.2rem;
  font-size: 0.85rem;
  margin-top: 0.7rem;
}
.auth-msg.err {
  color: var(--danger);
}
.auth-msg.ok {
  color: var(--ok);
}
.auth-foot {
  display: inline-block;
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: none;
}
.auth-foot:hover {
  color: var(--ink);
}

/* メニューのログイン中表示 */
.menu-email {
  font-size: 0.82rem;
  color: var(--ink);
  padding: 0.3rem 0.6rem;
  word-break: break-all;
}

/* ---------- マイメモ一覧 ---------- */
/* auth-card 系ページ共通のヘッダ行（ブランド左・任意の操作を右）。 */
.auth-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}
.ghost-link {
  font-size: 0.85rem;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
/* auth-head の右側に複数の操作（リンク＋≡メニュー）を並べる。 */
.auth-head-right {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* ---------- 設定トップ（/settings） ---------- */
/* 設定トップのプランカード。プランは「お金の話」なので一覧に混ぜず先頭に出す
   （≡メニューから集約したときに埋没させないため）。 */
.settings-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin-top: 0.8rem;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f5f8fc;
  text-decoration: none;
  color: inherit;
}
.settings-plan:hover {
  background: #eef2f7;
}
.settings-plan-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.settings-plan-label {
  font-size: 0.74rem;
  color: var(--muted);
}
.settings-plan-name {
  font-size: 1.05rem;
}
.settings-plan-go {
  flex: 0 0 auto;
  font-size: 0.85rem;
  color: var(--accent);
}
.settings-list {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.settings-link {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
}
.settings-link:hover {
  background: #eef2f7;
}
.settings-link > svg {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  color: var(--accent);
}
.settings-link-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.settings-link-body .auth-lead {
  margin: 0;
}
/* 未読コメントの絞り込みチップ（マイメモ見出し行の下）。見出し行は 375px で既に一杯なので、
   行内に足さず独立した行に置く。未読が無いときはサーバー側で描かれない。 */
.notes-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  margin: 0.5rem 0 0;
}
.notes-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 0.82rem;
  text-decoration: none;
}
.notes-chip:hover {
  background: #eef2f7;
}
.notes-chip svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}
.notes-chip-n {
  min-width: 1.2em;
  text-align: center;
  padding: 0 0.35em;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.72rem;
  font-weight: 600;
}
/* 絞り込み中。押すと解除できることが分かるよう、選択中の見た目にする。 */
.notes-chip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.notes-chip.is-on .notes-chip-n {
  background: var(--accent-ink);
  color: var(--accent);
}
.notes-filters-note {
  font-size: 0.78rem;
  color: var(--muted);
}
.note-list {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.note-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  /* 地はほぼ白（#fbfcfe）。ページ自体が白地なので、行の塊感は枠線 --line が担い、
     地色は「塊であること」をわずかに補うだけでよい。#f8fafc はグレーの帯として
     読めてしまい、白地の一覧では地の色が主張しすぎていた。
     薄くしたぶんホバー #eef2f7・固定 #fff7e6・選択中 #eaf2ff との差は広がる＝状態は読みやすくなる。 */
  background: #fbfcfe;
  color: var(--ink);
  text-decoration: none;
}
.note-link:hover {
  background: #eef2f7;
}
.note-preview {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.note-time {
  flex: 0 0 auto;
  font-size: 0.76rem;
  color: var(--muted);
}
.note-views {
  flex: 0 0 auto;
  font-size: 0.76rem;
  color: var(--muted);
  white-space: nowrap;
}
/* マイメモ一覧の未読コメントバッジ（未読があるときだけ表示） */
.note-cmt {
  flex: 0 0 auto;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--accent, #2563eb);
  white-space: nowrap;
}
.notes-search {
  width: 100%;
  font: inherit;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  margin: 0.4rem 0 0.2rem;
}
.notes-empty {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0.6rem 0 0;
}
/* 引っ張って更新の目印（pull-refresh.js が body に足す）。画面の上に浮かせる＝本文を押し下げないので、
   引いている最中にレイアウトが動かない（動くと「掴んでいる位置」がずれて気持ち悪い）。 */
.pull-refresh {
  position: fixed;
  top: calc(0.5rem + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 62; /* トースト(61)より上。更新中は最前面で伝える */
  display: flex;
  align-items: center;
  gap: 0.45rem;
  max-width: calc(100vw - 2rem);
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  color: #fff;
  background: #2b3542;
  border-radius: 999px;
  box-shadow: var(--shadow);
  white-space: nowrap;
}
.pull-refresh[hidden] {
  display: none;
}
/* 更新中だけ回る印を付ける。文字（更新しています…）だけだと止まって見えるため。 */
.pull-refresh.is-loading::before {
  content: '';
  width: 0.85em;
  height: 0.85em;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pull-refresh-spin 0.7s linear infinite;
}
@keyframes pull-refresh-spin {
  to {
    transform: rotate(360deg);
  }
}
/* 動きを抑えたい設定のときは回さない（点滅・回転で気分が悪くなる人がいる）。 */
@media (prefers-reduced-motion: reduce) {
  .pull-refresh.is-loading::before {
    animation: none;
  }
}
/* 「この画面に出ていない該当メモが N 件あります」＋全件表示への導線。
   入力中の絞り込みは描かれている行にしか効かないので、**出きっていないことを必ず言う**
   （黙って一部だけ見せると「無い」と読まれる）。 */
.notes-search-more {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.notes-search-more-link {
  color: var(--accent);
  font-weight: 600;
  /* 指で押せる高さを確保する（文字だけのリンクは行高が低く外しやすい）。 */
  padding: 0.25rem 0;
}
.notes-hint {
  color: var(--muted);
  font-size: 0.78rem;
  margin: 0.5rem 0 0;
}
/* キーボード前提のヒントはタッチ端末では出さない（数字キーが無い）。
   画面幅ではなく pointer: coarse で判定する: 狭い PC ウィンドウにもキーボードはあるため。
   ※手動並び替えのドラッグヒントは⠿の指ドラッグ対応（mynotes.js）に伴いタッチでも表示する。 */
@media (pointer: coarse) {
  .notes-hint-kbd {
    display: none;
  }
}
/* ---------- マイメモ: 手動並び替え（ドラッグ&ドロップ） ---------- */
.note-drag {
  flex: 0 0 auto;
  cursor: grab;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.1rem;
  user-select: none;
  -webkit-user-select: none;
  /* 指ドラッグの起点。ここだけスクロールに渡さず Pointer Events で並べ替える
     （行の他の部分は従来どおり縦スクロール・タップで開く）。 */
  touch-action: none;
  -webkit-touch-callout: none; /* iOS の長押しメニューを出さない */
}
/* タッチでは押しやすいよう当たり判定を広げる（見た目の行高は変えない） */
@media (pointer: coarse) {
  .note-drag {
    font-size: 1.15rem;
    padding: 0.5rem 0.45rem;
    margin: -0.5rem 0;
  }
}
.note-list.is-manual > li {
  cursor: grab;
}
.note-list.is-manual > li.dragging {
  opacity: 0.5;
  cursor: grabbing;
}
.note-list.is-manual > li.drop-before {
  box-shadow: 0 -2px 0 0 var(--accent);
}
.note-list.is-manual > li.drop-after {
  box-shadow: 0 2px 0 0 var(--accent);
}

/* ---------- マイメモ: スワイプ操作（固定・アーカイブ・削除） ----------
   構造: li > .note-swipe > (.note-actions-left, .note-link, .note-actions-right)。
   actions は position:absolute で note-link の裏に隠れており、note-link を
   transform: translateX() で動かすことで露出させる（タッチはJS、マウスはCSS :hover）。 */
.note-swipe {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
.note-swipe > .note-link {
  position: relative;
  z-index: 1;
  width: 100%;
  transition:
    transform 0.18s ease,
    width 0.15s ease;
  /* 横スワイプは JS が扱い、縦はネイティブスクロールに残す。これが無いと、指がわずかに
     縦へぶれた時点でブラウザがジェスチャを横取り（pointercancel）してしまい、スワイプが
     開きにくい／半端な位置で止まる原因になる。pinch-zoom は許可（未対応ブラウザは前行が有効）。 */
  touch-action: pan-y;
  touch-action: pan-y pinch-zoom;
}
li.is-dragging .note-swipe > .note-link {
  transition: none;
}
.note-actions {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: stretch;
  pointer-events: none;
}
.note-actions-left {
  left: 0;
}
.note-actions-right {
  right: 0;
}
li.swipe-open-left .note-actions-left,
li.swipe-open-right .note-actions-right {
  pointer-events: auto;
}
.note-act {
  flex: 0 0 auto;
  width: 48px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
}
.note-act .ico {
  width: 22px;
  height: 22px;
  vertical-align: 0;
}
.note-act[data-action='pin'] {
  background: #e0a100;
}
.note-act[data-action='archive'] {
  background: #4b7bd1;
}
.note-act[data-action='delete'] {
  background: var(--danger);
}
/* 色ラベルの入口。タップで色ポップアップ（.note-color-pop）を開く。
   6色のグラデ背景で「色を選ぶ」ことを一目で示す。 */
.note-act[data-action='color'] {
  background: linear-gradient(135deg, #e5534b, #e8893a, #e0b400, #2fa15a, #2f7de1, #8a96a3);
}
/* PC(マウス)用の操作メニュー入口「▾」。
   タッチはスワイプ、PCは行の右端に ▾ を置く。以前は行の外に浮かせて出していたが、
   カードの外で分かりにくかったため、色選択(スワイプ)と同じ発想でカード内の右端に寄せた。
   ・note-swipe の中に絶対配置し、note-link(z:1) の裏に隠す（overflow:hidden で角丸に馴染む）。
   ・既定は note-link が覆って見えないが、右端に「うっすら色の気配」（note-link の ::after）を出す。
   ・行ホバー/フォーカスで note-link を少し左へずらし、▾ を露出（展開）する。
   ・タッチ/狭幅では非表示（スワイプが操作手段）。 */
.note-menu-btn {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: #eef3fc;
  color: var(--accent);
  cursor: pointer;
}
.note-menu-btn .ico {
  width: 18px;
  height: 18px;
}
@media (hover: hover) and (pointer: fine) {
  .note-list:not(.selecting):not(.is-manual) .note-swipe > .note-menu-btn {
    display: flex;
  }
  /* PC はスワイプを使わないので、右アクション（アーカイブ/削除）は隠す。
     ▾ を露出したとき、その裏の赤い削除ボタン等が端から覗くのを防ぐ。 */
  .note-list:not(.selecting):not(.is-manual) .note-swipe > .note-actions-right {
    display: none;
  }
  /* 右端に常時「うっすら色の気配」を出すフェード（展開したら消す）。 */
  .note-list:not(.selecting):not(.is-manual) .note-swipe > .note-link::after {
    content: '';
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 22px;
    border-radius: 0 9px 9px 0;
    background: linear-gradient(to right, rgba(238, 243, 252, 0), #eef3fc);
    pointer-events: none;
    transition: opacity 0.15s ease;
  }
  /* ホバー/フォーカス/メニュー展開中: 本文カードの右端を少し縮めて ▾ を露出する。
     translateX で全体を左へずらすとタイトルの先頭（識別に重要）が切れるため、
     幅を縮めて右から展開する。先頭は動かず、時刻だけ左へ寄る。 */
  .note-list:not(.selecting):not(.is-manual) > li:hover .note-swipe > .note-link,
  .note-list:not(.selecting):not(.is-manual) > li:focus-within .note-swipe > .note-link,
  .note-list:not(.selecting):not(.is-manual) > li:has(.note-menu-btn[aria-expanded='true']) .note-swipe > .note-link {
    width: calc(100% - 40px);
  }
  .note-list:not(.selecting):not(.is-manual) > li:hover .note-swipe > .note-link::after,
  .note-list:not(.selecting):not(.is-manual) > li:focus-within .note-swipe > .note-link::after {
    opacity: 0;
  }
  /* ホバー/展開時は ▾ を少し濃く。 */
  .note-list:not(.selecting):not(.is-manual) > li:hover .note-swipe > .note-menu-btn,
  .note-list:not(.selecting):not(.is-manual) .note-swipe > .note-menu-btn[aria-expanded='true'] {
    background: #dbe7fb;
  }
}

/* 行の操作ドロップダウン（body直下に生成。note-swipe の overflow に切られない）。 */
.note-row-menu {
  position: absolute;
  z-index: 60;
  min-width: 168px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}
.note-row-menu button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--fg, #1a1a1a);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}
.note-row-menu button .ico {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--muted);
}
.note-row-menu button:hover {
  background: #f1f5f9;
}
.note-row-menu button.danger {
  color: var(--danger);
}
.note-row-menu button.danger .ico {
  color: var(--danger);
}

/* 色ラベルのポップアップ（body直下。PCの▾メニュー・スマホのスワイプ色ボタンの両方から開く）。
   既存の .swatch / .note-c-* / .swatch-clear をそのまま流用し、選択モードのパレットと見た目を揃える。 */
.note-color-pop {
  position: absolute;
  z-index: 61;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-width: 220px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}
.note-color-pop .swatch {
  width: 26px;
  height: 26px;
  min-width: 26px;
}

/* ---------- マイメモ: 色ラベル・固定・選択モード ---------- */
.note-list > li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.note-list > li .note-swipe {
  flex: 1;
  min-width: 0;
}
/* 固定（ピン留め）: 背景色＋ピンバッジで示す（色ラベルの左帯とは併存）。背景色だけだと淡すぎて
   「固定できたのか」が読み取れないため、行のメタ欄（閲覧数/更新時刻の並び）にピンも出す。 */
.note-list > li.is-pinned .note-link {
  background: #fff7e6;
}
/* 固定バッジ: マークアップは常にあり、固定中の行だけ表示する（JS はクラス付け替えのみで済む）。 */
.note-pin {
  display: none;
  flex: 0 0 auto;
  color: #b26b00; /* 固定の背景色 #fff7e6 と同系。muted より濃くして「印」として読ませる */
}
.note-list > li.is-pinned .note-pin {
  display: inline-flex;
}
.note-pin .ico {
  width: 0.9em;
  height: 0.9em;
}
/* 固定/色付けで並べ替えたあと、移動先の行を一瞬だけ縁取って「どこへ行ったか」を示す。
   背景色（固定=アンバー/選択=青）に依存しないよう内側の縁取りで出す。 */
@keyframes note-moved {
  0% {
    box-shadow: inset 0 0 0 2px var(--accent);
  }
  100% {
    box-shadow: inset 0 0 0 2px transparent;
  }
}
.note-list > li.just-moved .note-link {
  animation: note-moved 1.1s ease;
}
/* 選択用チェックボックス: 選択モード時だけ表示 */
.note-check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: none;
}
.note-list.selecting .note-check {
  display: block;
}
.note-list.selecting .note-link {
  cursor: pointer;
}
.note-list > li.checked .note-link {
  border-color: var(--accent);
  background: #eaf2ff;
}
/* 色ラベル（左の帯）。キーは notes NOTE_COLORS / mynotes PALETTE と一致。
   .trash-list > li.note-c-* はアーカイブ一覧の行（.note-link を持たない）用＝色は保持されたままを見せる。 */
.note-c-red .note-link,
.trash-list > li.note-c-red {
  border-left: 4px solid #e5534b;
}
.note-c-orange .note-link,
.trash-list > li.note-c-orange {
  border-left: 4px solid #e8893a;
}
.note-c-yellow .note-link,
.trash-list > li.note-c-yellow {
  border-left: 4px solid #e0b400;
}
.note-c-green .note-link,
.trash-list > li.note-c-green {
  border-left: 4px solid #2fa15a;
}
.note-c-blue .note-link,
.trash-list > li.note-c-blue {
  border-left: 4px solid #2f7de1;
}
.note-c-gray .note-link,
.trash-list > li.note-c-gray {
  border-left: 4px solid #8a96a3;
}

/* マイメモ見出し行: 「マイメモ + 件数」を左、一覧操作（検索/並び替え/選択）を右に置いて1行に集約する。
   検索を開くと .is-searching で左右を差し替える（同じ行が入力欄になる＝行数が増減しない）。 */
.notes-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.2rem 0 0.6rem;
  min-height: 40px;
  /* 安全弁: 「見出し＋件数＋操作」は 375px の有料プランでは 1 行に収まりきらない
     （実測 329px > 実効 303px・Pro の 300/300 はさらに +17px）。収まらないときだけ
     操作が 2 行目に落ちる。項目自体は消さない（消えると迷うため）。 */
  flex-wrap: wrap;
}
.notes-head .notes-title {
  margin: 0;
  flex: 0 0 auto;
}
.notes-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 押し間違い防止。40px のボタン＋8px で中心間 48px を確保する */
  margin-left: auto;
}
.notes-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 40px;
  padding: 0 0.6rem;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 0.85rem;
}
.notes-tool-btn:hover {
  filter: none;
  background: #eef2f7;
  color: var(--ink);
}
.notes-head.is-searching .notes-title,
.notes-head.is-searching .notes-count,
.notes-head.is-searching .notes-tools {
  display: none;
}
.notes-search-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
  color: var(--muted);
}
.notes-search-row .notes-search {
  margin: 0;
  flex: 1;
  min-width: 0;
}
/* 狭い画面ではラベルと「件」を落として1行に収める。
   Pro の「300 / 300 件」＋「更新順」が 375px では溢れるため（実測 358px > 303px）。
   並び替えのラベルだけは残す（現在の並び順が読めなくなるため）。 */
@media (max-width: 480px) {
  .notes-tool-label,
  .notes-count-unit,
  .notes-sort > .ico {
    /* select 自体が「更新順 ▾」と出しているので ⇅ アイコンは冗長。幅を稼ぐため落とす */
    display: none;
  }
  .notes-tool-btn {
    width: 40px;
    padding: 0;
    justify-content: center;
  }
  .notes-head,
  .notes-tools {
    gap: 0.375rem;
  }
}
/* 一括操作バー（選択モード時）。スマホでは折り返す */
.select-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem;
  margin: 0.2rem 0 0.4rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
}
.select-bar .ghost {
  padding: 0.4rem 0.6rem;
}
/* 対象（マスターチェックボックス＋件数）。操作より前に置き、押す前に「何件に効くか」を読ませる。 */
.sel-master {
  display: flex;
  flex: 0 0 auto;
  gap: 0.35rem;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.sel-master input {
  width: 18px;
  height: 18px;
  margin: 0;
}
.sel-count {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}
/* 固定トグルのオン状態（＝選択が全部固定済み・押すと解除）。行の固定色 #fff7e6 と同系にして
   「この色＝固定」を一覧とバーで同じ語彙にする。 */
.sel-pin[aria-pressed='true'] {
  border-color: #e6c88a;
  background: #fff7e6;
  color: #8a5200;
}
/* 完了は右端へ寄せる（左＝対象／中＝操作／右＝終了）。 */
.sel-done {
  margin-left: auto;
}
/* 0 件選択のときの操作は無効化する（押しても何も起きない状態を見た目で伝える）。 */
.select-bar button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.palette {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}
.swatch {
  width: 22px;
  height: 22px;
  min-width: 22px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.swatch.note-c-red {
  background: #e5534b;
}
.swatch.note-c-orange {
  background: #e8893a;
}
.swatch.note-c-yellow {
  background: #e0b400;
}
.swatch.note-c-green {
  background: #2fa15a;
}
.swatch.note-c-blue {
  background: #2f7de1;
}
.swatch.note-c-gray {
  background: #8a96a3;
}
.swatch-clear {
  background: #fff;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1;
}
/* 並び替えセレクト（見出し行）。ネイティブ select のままなので現在の並び順が常に見えて、
   タップすれば OS 標準のピッカーが開く（自前ポップアップを持たない）。 */
.notes-sort {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 0 0 auto;
  height: 40px;
  padding: 0 0.4rem;
  border-radius: 10px;
  color: var(--muted);
}
.notes-sort:hover {
  background: #eef2f7;
  color: var(--ink);
}
.notes-sort select {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.2rem 0.1rem;
  border: none;
  background: transparent;
  color: inherit;
}

/* ---------- マイメモ: 件数表示 ---------- */
.notes-count {
  font-size: 0.85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  white-space: nowrap;
}
.notes-count.is-full {
  color: var(--soon);
  font-weight: 600;
}
/* メニュー項目の件数バッジ（アーカイブ/ゴミ箱）。旧 .trash-badge を改名して流用。 */
.menu-badge {
  margin-left: auto;
  min-width: 1.2em;
  text-align: center;
  padding: 0 0.35em;
  border-radius: 999px;
  background: var(--line);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
}
/* 「設定」項目に添えるプラン名。件数バッジ（数字）と区別が付くよう控えめな色にする。 */
.menu-badge.plan {
  background: transparent;
  color: var(--muted);
  font-weight: 500;
}
/* 値が入る前（未ログイン・取得前）は場所を取らない。 */
.menu-badge.plan:empty {
  display: none;
}

/* ---------- ページャ（マイメモ / ゴミ箱） ---------- */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1rem 0 0.4rem;
}
.pager-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
}
.pager-link:hover {
  background: var(--bg);
}
.pager-link.is-disabled {
  color: var(--muted);
  opacity: 0.5;
  pointer-events: none;
}
.pager-info {
  font-size: 0.85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- ゴミ箱一覧 ---------- */
/* 見出し（h1）＋任意のアクションボタンを1行に並べるヘッダ行（ゴミ箱・アーカイブ等）。
   ボタンは見出しの右端に寄せ、狭い画面では折り返す。 */
.head-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.6rem 0 0.2rem;
}
.head-row .auth-title {
  margin: 0;
  flex: 1 1 auto;
}
.trash-list > li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.2rem;
  border-bottom: 1px solid var(--line);
  /* 色ラベルの帯（アーカイブ一覧）用に全行ぶん透明で確保しておく＝色付き行だけ左へずれない */
  border-left: 4px solid transparent;
}
/* **基準幅は 0**（`flex: 1` 相当）。`1 1 auto` だと基準がタイトルの文字数ぶんになり、
   `flex-wrap: wrap` の行では**縮んで「…」になる前に折り返してしまう**
   ＝タイトルが長い行だけ「タイトル1段目／メタとボタンが2段目」に化けて、
   行ごとに配置が変わっていた（実際の報告: アーカイブ・ゴミ箱がタイトルの長さで崩れる）。
   マイメモの `.note-preview` は元から `flex: 1`（基準0）なので崩れていない。 */
.trash-list > li .note-preview {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trash-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  font-size: 0.75rem;
  color: var(--muted);
}
.trash-countdown {
  color: var(--soon);
}
.trash-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}
/* 狭い画面では操作ボタンを**必ず2段目**に置く。基準0にしたことで1行に詰め込めるようになったが、
   375px では「タイトル…＋メタ＋復元＋完全に削除」でタイトルに 40px しか残らず読めない。
   常に同じ形（1段目=タイトルとメタ／2段目=ボタン）にすることが、行ごとに配置が変わらない条件。 */
@media (max-width: 639px) {
  .trash-list > li .trash-actions {
    flex-basis: 100%;
  }
}
/* アーカイブの「開く」はアンカーだが ghost ボタンと同じ見た目にそろえる。 */
.trash-actions a {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.85rem;
  line-height: 1.2;
}
.trash-actions a:hover {
  background: var(--bg);
}
/* ---------- コメントしたメモ: 自分のコメントの読み返し ----------
   行（.trash-list > li は flex-wrap）に details を足し、flex-basis:100% で常に2段目へ折り返す。
   自分の言葉だけを出す領域（作成者の返信・相手の本文は入らない＝サーバー側でそう組み立てている）。 */
.cmt-mine {
  flex-basis: 100%;
}
.cmt-mine > summary {
  cursor: pointer;
  width: fit-content;
  font-size: 0.78rem;
  color: var(--muted);
}
.cmt-mine > summary:hover {
  color: var(--ink);
}
.cmt-mine-list {
  list-style: none;
  margin: 0.35rem 0 0.15rem;
  padding: 0.1rem 0 0.1rem 0.7rem;
  border-left: 3px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.cmt-mine-list li {
  font-size: 0.85rem;
}
/* 自分の返信はひと目で分かる程度に字下げ（会話の相手側は表示しないので、深い入れ子は要らない）。 */
.cmt-mine-list li.is-reply {
  padding-left: 1em;
}
.cmt-mine-head {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: var(--muted);
}
.cmt-mine-tag {
  padding: 0 0.4em;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.cmt-mine-list p {
  margin: 0.1rem 0 0;
  white-space: pre-wrap; /* コメントは改行をそのまま書ける＝潰さない */
  overflow-wrap: anywhere; /* 長いURL等で横スクロールを出さない */
}

/* 選択モード（ゴミ箱/アーカイブ）: 行の個別ボタンを隠し、行のどこをクリックしても選択トグルにする
   （mynotes の選択モードと同じ作法。チェックボックスの表示は既存の .note-list.selecting .note-check）。 */
.trash-list.selecting > li {
  cursor: pointer;
}
.trash-list.selecting .trash-actions {
  display: none;
}
.trash-list > li.checked {
  background: #eaf2ff;
}

/* ---------- プラン / 課金 ---------- */
.plan-badge {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  margin: 0.2rem 0 0.9rem;
}
.plan-badge.is-free {
  color: var(--muted);
  background: #eef3f9;
}
.plan-badge.is-paid {
  color: #8a5a00;
  background: #fff3d6;
}
.plan-perks {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.plan-perks li {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
}
/* カード内の縦積みボタンに間隔を与える */
#billing-root .block + .block {
  margin-top: 0.6rem;
}
.plan-fineprint {
  color: var(--muted);
  font-size: 0.78rem;
  margin: 0.7rem 0 0;
  line-height: 1.5;
}
/* 解約時のメモ失効についての注意（管理カード）。淡い警告色で本文と区別する。 */
.plan-warn {
  color: var(--ink);
  background: #fff7e6;
  border: 1px solid #f0d9a8;
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
}
/* 使用状況（加入者の課金カード内）— メモ数・画像の合計容量のメーター */
.plan-usage {
  margin: 0.2rem 0 1rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
}
.plan-usage-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 0.7rem;
  color: var(--ink);
}
.usage-row + .usage-row {
  margin-top: 0.7rem;
}
.usage-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
}
.usage-val {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.usage-bar {
  height: 8px;
  border-radius: 999px;
  background: #e5ebf1;
  overflow: hidden;
}
.usage-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.3s ease;
}
.usage-fill.is-warn {
  background: #e0803a;
}
.plan-usage .plan-fineprint {
  margin-top: 0.7rem;
}
/* 支払い周期トグル（月/年）— セグメント型で「切り替え」だと一目でわかる形に */
.plan-toggle {
  display: flex;
  gap: 0.3rem;
  margin: 0 0 0.9rem;
  padding: 0.3rem;
  background: #eef2f7;
  border-radius: 12px;
}
.plan-toggle-btn {
  flex: 1;
  font: inherit;
  font-weight: 600;
  padding: 0.55rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.plan-toggle-btn.is-active {
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(20, 40, 70, 0.1);
}
/* 年額の「お得」バッジ（緑で常時目立たせ、年額へ誘導する） */
.plan-save {
  font-size: 0.68rem;
  font-weight: 800;
  color: #fff;
  background: #16a34a;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

/* プラン選択カード（Plus / Pro の2枚） */
.plan-cards {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 0 0 0.6rem;
}
.plan-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.9rem;
  background: #fff;
  display: flex;
  flex-direction: column;
}
/* 特典数が違っても登録ボタンの縦位置を揃える（ボタンを常にカード最下部へ） */
.plan-card .btn-upgrade {
  margin-top: auto;
}
.plan-card.is-featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px #eaf2ff inset;
}
.plan-card-title {
  margin: 0 0 0.2rem;
  font-size: 1.1rem;
}
.plan-price {
  margin: 0 0 0.2rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
}
/* 年払いの割安メッセージ（価格の直下・常時表示。緑で「お得」を訴求） */
.plan-price-note {
  margin: 0 0 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #15803d;
}

/* 閲覧パスワード入力（Pro） */
.pw-gate {
  max-width: 420px;
  margin: 2.5rem auto;
  text-align: center;
  padding: 0 1rem;
}
.pw-gate form {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}
.pw-gate input {
  flex: 1;
  font: inherit;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
}
/* ロゴ非表示時のヘッダ余白（左寄せ要素の代替） */
.brand-spacer {
  flex: 1;
}

/* ---------- スマホ最適化（狭い画面で本文の折り返しを減らす） ---------- */
@media (max-width: 640px) {
  /* 画面端の余白を詰めて本文の横幅を稼ぐ（.page / .viewer 共通の余白変数） */
  :root {
    --gutter: 0.5rem;
  }
  /* 本文(BlockNote)の左右余白を「対称」にしてバランスよく配置する。
     既定の左ハンドル領域(54px)は [＋追加][⠿メニュー] の2ボタン(各24px)ぶんで、
     これが左だけ広く空く＝左右非対称の原因だった。
     対策: スマホでは [＋追加] を隠し（ブロック追加は Enter / スラッシュで代替可能）、
     残る [⠿メニュー]（タッチ時の書式入口）を本文側へ右寄せする。これで左右の余白を
     24px ずつに揃えても、ハンドルはページ余白(8px)の位置にちょうど収まる。
     → 左右対称 かつ 本文幅も確保（実測 約311px / 375px幅）。
     後読みの bn/app.css(.bn-editor)に勝つよう #bn-root を前置して詳細度を上げる。 */
  #bn-root .bn-editor {
    padding-inline-start: 24px;
    padding-inline-end: 24px;
  }
  /* ハンドル群を本文側（右）へ寄せる。1ボタンだけ残るので本文左端に密着する。 */
  #bn-root .bn-side-menu {
    justify-content: flex-end;
  }
  /* SideMenu の並びは [＋追加]→[⠿メニュー]。先頭の [＋追加] を隠す。 */
  #bn-root .bn-side-menu > button:first-child {
    display: none;
  }
  /* ⠿ハンドルが見出しで1行下へずれる問題の修正。
     BlockNote 純正(bn/app.css)は SideMenu の高さをブロック種別で固定している:
       .bn-side-menu[data-block-type=heading][data-level="1"]{height:108px}  (h2=84 / h3=67)
     これは既定の大きな見出し(h1=48px)に合わせた値。SideMenu は align-items:center で
     ハンドルをこの高さの中心に置くため、下で見出しを縮小(h1=1.6rem 等)している当環境では
     高さだけ大きいまま残り、ハンドルが見出しテキストより約1行ぶん下（次の段落の位置）へ落ちる。
     対策: 縮小後の見出しに合わせて高さを付け直す。値 = 見出しの上パディング18px×2 + 行高。
     段落(既定30px)がぴったり揃うのと同じ理屈で、中央のハンドルが見出しの行に乗る（実測 offset≈0）。
     詳細度は #bn-root(id) 前置で純正(0,3,0)に勝つため !important 不要。 */
  #bn-root .bn-side-menu[data-block-type='heading'][data-level='1'] {
    height: 70px;
  }
  #bn-root .bn-side-menu[data-block-type='heading'][data-level='2'] {
    height: 63px;
  }
  #bn-root .bn-side-menu[data-block-type='heading'][data-level='3'] {
    height: 61px;
  }
  /* 見出しフォントを縮める。既定は h1=48px / h2=32px と大きく、狭い画面では
     短い見出し（例「satome へようこそ」）でも折り返してしまうため。
     BlockNote は実体の h1/h2/h3 を描画するので、タグへ直接指定して確実に上書きする。 */
  #bn-root h1 {
    font-size: 1.6rem;
    line-height: 1.3;
  }
  #bn-root h2 {
    font-size: 1.3rem;
    line-height: 1.3;
  }
  #bn-root h3 {
    font-size: 1.15rem;
    line-height: 1.35;
  }
}

/* ⠿ブロックメニューの中に出す「説明だけの行」（押せない案内文）。
   例: 表の「列の幅」で、どの列を変えるか決まっていないときの案内。
   項目（.mantine-Menu-item）ではないので、幅と字体だけ周りに揃える。 */
.bn-side-menu .bn-menu-dropdown .bn-menu-note {
  max-width: 15rem;
  padding: 0.5rem 0.8rem;
  color: #667;
  font-size: 0.8rem;
  line-height: 1.4;
  white-space: normal;
}
@media (pointer: coarse), (max-width: 640px) {
  .bn-side-menu .bn-menu-dropdown .bn-menu-note {
    font-size: 0.9rem;
  }
}

/* ⠿ブロックメニューの文字サイズ（タッチ端末/狭い画面）。BlockNote 本体が
   `.bn-side-menu .mantine-Menu-item { height: 30px; font-size: 12px }`（bn/app.css、後読み）で
   小さく固定しており、スマホでは読みづらくタップもしづらい。文字を 1rem に拡大し、
   高さ固定を解いて 44px（タップ目安）を確保する。
   拡大してもはみ出さないよう、メニュー本体はカテゴリのサブメニュー化（web/main.tsx）で
   項目数を抑えている。項目数が多いサブメニュー（ブロックの種類）用に最大高さ＋スクロールも
   保険で入れる（.bn-menu-dropdown は overflow:auto 既定）。
   本体ルール（詳細度 0,2,0）に勝つよう3クラスで指定する。
   セレクタは .bn-menu-item ではなく .mantine-Menu-item を使う: 色サブメニューの各色項目は
   BlockNote 既定の ColorPicker が生成し bn-menu-item クラスが付かないため。 */
@media (pointer: coarse), (max-width: 640px) {
  .bn-side-menu .bn-menu-dropdown .mantine-Menu-item {
    font-size: 1rem;
    height: auto;
    min-height: 44px;
    padding: 0.55rem 0.8rem;
  }
  /* セクション見出し（色サブメニューの「文字の色/背景色」等）も合わせて拡大 */
  .bn-side-menu .bn-menu-dropdown .mantine-Menu-label {
    font-size: 0.85rem;
  }
  /* 項目が多いサブメニュー（色=20項目）は画面丈いっぱいに伸びて端が欠けるため上限を設ける。
     Mantine(floating-ui)がインラインで max-height を書くので !important が必要。中身はスクロール。 */
  .bn-side-menu .bn-menu-dropdown {
    max-height: 70vh !important;
  }
}

/* ---------- ドキュメントページ（使い方 / 利用規約 / プライバシー / 特商法） ---------- */
.doc {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.2rem 1rem 5rem;
}
.doc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.doc-head .brand {
  text-decoration: none;
}
/* 閲覧/長文ページのヘッダー自動非表示（autohide.js が .autohide を付与）。
   下スクロールで隠し、上スクロール/最上部で出す。背景はページ色で下の本文を隠す。 */
.doc-head.autohide,
.viewer .topbar.autohide {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  transition: transform 0.25s ease;
}
.doc-head.autohide {
  padding-block: 0.4rem;
}
.doc-head.autohide.head-hidden,
.viewer .topbar.autohide.head-hidden {
  transform: translateY(-100%);
}
.doc h1 {
  font-size: 1.6rem;
  margin: 0.4rem 0 1.2rem;
}
.doc h2 {
  font-size: 1.18rem;
  margin: 2rem 0 0.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.doc p,
.doc li {
  line-height: 1.85;
}
.doc ul,
.doc ol {
  padding-left: 1.4rem;
}
.doc li {
  margin: 0.3rem 0;
}
.doc .lead {
  color: var(--muted);
}
.doc a {
  color: var(--accent);
}
.doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.8rem 0;
  font-size: 0.92rem;
}
.doc th,
.doc td {
  border: 1px solid var(--line);
  padding: 0.55rem 0.7rem;
  text-align: left;
  vertical-align: top;
}
.doc th {
  background: #f1f4f8;
}
/* 定義リスト型テーブル（特商法）はラベル列をやや広げ、見出しを1行に収めやすくする */
.doc table.kv th {
  width: 9.5rem;
}
.doc .doc-meta {
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 1.6rem;
}
.doc-foot {
  margin-top: 2.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.doc-foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
}
.doc-foot a {
  color: var(--accent);
  text-decoration: none;
}
.doc-foot a:hover {
  text-decoration: underline;
}

/* メニュー下部の規約リンク */
/* ≡メニュー最下部のリンク列。
   PR#234 で法務リンク7本をメニューから外したが、その移設先が /settings（ログイン必須）だったため、
   **未ログインの利用者は規約・プライバシーにたどり着けなくなっていた**。規約は「あらかじめ表示」して
   おく必要があるので、この2本だけ戻している（特商法は有料の話なので /billing 側のまま）。
   縦積み（column）のままだと戻したぶん行が増えてメニューが伸びるので、**横に折り返す並び**にした
   ＝4本入っても実測の高さは従来の2行ぶんとほぼ変わらない。 */
.menu-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.85rem;
  padding: 0.5rem 0.7rem 0.3rem;
}
.menu-links a {
  color: var(--muted);
  font-size: 0.8rem;
  text-decoration: none;
}
.menu-links a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ログイン / 課金カード下部の規約リンク */
.legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 0.9rem;
  margin-top: 1rem;
}
.legal-links a {
  color: var(--muted);
  font-size: 0.8rem;
  text-decoration: none;
}
.legal-links a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.auth-fineprint {
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
  margin: 0.8rem 0 0;
  line-height: 1.6;
}
.auth-fineprint a {
  color: var(--accent);
}

@media (max-width: 640px) {
  .doc table {
    font-size: 0.78rem;
  }
  .doc th,
  .doc td {
    padding: 0.4rem 0.45rem;
    overflow-wrap: anywhere;
  }
}

/* ---------- プラン比較表（/compare） ---------- */
/* .doc 配下のため、.doc table/th/td に勝てるよう .doc を前置して特定度を上げる。 */
.compare-wrap {
  /* 極端に狭い端末向けの保険。通常（360px〜）は横スクロールなしで収まる。 */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.2rem 0 0.4rem;
}
.doc .compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 320px;
  margin: 0;
}
.doc .compare-table th,
.doc .compare-table td {
  border: 1px solid var(--line);
  padding: 0.5rem 0.55rem;
  text-align: center;
  vertical-align: middle;
  line-height: 1.5;
}
.doc .compare-table thead th {
  background: #f1f4f8;
  vertical-align: bottom;
}
.doc .compare-table .c-feat {
  text-align: left;
}
.doc .compare-table tbody th[scope='row'] {
  text-align: left;
  font-weight: 500;
  background: #fafbfd;
}
.compare-table .c-tier {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
}
.compare-table .c-sub {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--muted);
}
/* 有料列（4列目）をうっすら強調 */
.doc .compare-table thead th:nth-child(4) {
  background: #eaf2fd;
}
.compare-table thead th:nth-child(4) .c-sub {
  color: var(--accent);
  font-weight: 700;
}
.doc .compare-table td:nth-child(4) {
  background: #f5f9fe;
}
/* グループ見出し行 */
.doc .compare-table .c-grp th {
  text-align: left;
  background: var(--ink);
  color: #fff;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  padding: 0.4rem 0.55rem;
}
.compare-table small {
  display: inline-block;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.45;
}
.compare-table td:nth-child(4) small {
  color: #4a7ec0;
}
.c-yes {
  color: var(--ok);
  font-weight: 700;
}
.c-no {
  color: var(--muted);
}
.doc .c-legend {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.8;
  margin-top: 0.6rem;
}

/* CTA（編集 / ログイン / 課金への導線）。.block は本文ブロック用のため使わない。 */
.compare-cta {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1.6rem 0 0.4rem;
}
.doc .compare-cta .c-btn {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 0.7rem 1rem;
  min-height: 46px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #eef2f7;
  color: var(--ink);
  font-weight: 600;
}
.doc .compare-cta .c-btn.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
}
.compare-cta .c-btn:hover {
  filter: brightness(0.98);
}

/* 課金画面（/billing）から比較ページへの導線リンク */
.plan-compare {
  text-align: center;
  margin: 1rem 0 0;
  font-size: 0.85rem;
}
.plan-compare a {
  color: var(--accent);
  text-decoration: none;
}
.plan-compare a:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .doc .compare-table {
    font-size: 0.8rem;
  }
  .doc .compare-table th,
  .doc .compare-table td {
    padding: 0.4rem 0.32rem;
    overflow-wrap: anywhere;
  }
  .compare-table .c-tier {
    font-size: 0.82rem;
  }
  .compare-table .c-sub {
    font-size: 0.66rem;
  }
  .compare-table small {
    font-size: 0.68rem;
  }
}

/* ---------- コメント（ブロック単位 / Phase 2） ---------- */

/* 閲覧者: 各ブロック右肩のコメントボタン（読み取り専用DOMに後付け） */
.bn-view .bn-block-outer {
  position: relative;
}
/* ブロック右肩のコメントボタン。BlockNote の + / ドラッグハンドルに合わせた控えめなテイスト
   （枠・下地なしのアイコンのみ）。普段は隠し、コメント済みと「コメントを書く」モード中だけ出す。 */
.cmt-tab {
  position: absolute;
  top: 2px;
  right: 0.15rem;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  height: 22px;
  padding: 0 4px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
  z-index: 5;
}
.cmt-tab svg {
  display: block;
  width: 15px;
  height: 15px;
}
.cmt-tab-n {
  font-weight: 600;
}
/* コメント済みブロックは常時うっすら表示（アクセント色で「ここに意見あり」を示す） */
.cmt-tab.has {
  opacity: 1;
  color: var(--accent);
}
/* 「コメントを書く」モード中は全ブロックにアフォーダンスを出す */
body.cmt-mode .cmt-tab {
  opacity: 1;
}
/* ホバー/フォーカスはハンドルと同様、うっすら下地＋濃色 */
.cmt-tab:hover,
.cmt-tab:focus-visible {
  opacity: 1;
  color: var(--ink);
  background: #eef2f7;
}

/* 閲覧アクションの「コメントを書く」トグル（オン時はアクセント） */
.cmt-mode-toggle.active {
  background: var(--accent);
  color: var(--accent-ink);
}

/* コメントのモーダル（共通 .overlay / .modal を流用） */
.cmt-modal .cmt-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 42vh;
  overflow: auto;
  margin-bottom: 0.7rem;
}
.cmt-bubble {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.5rem 0.6rem;
  background: var(--bg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cmt-bubble .cmt-meta {
  color: var(--muted);
  font-size: 0.72rem;
  margin-top: 0.25rem;
}
.cmt-snippet {
  color: var(--muted);
  font-size: 0.8rem;
  border-left: 3px solid var(--line);
  padding-left: 0.5rem;
  margin-bottom: 0.6rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmt-compose {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.cmt-compose textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.55rem;
  font: inherit;
  color: var(--ink);
}
.cmt-count {
  color: var(--muted);
  font-size: 0.72rem;
  text-align: right;
}
.cmt-login-hint {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 0.7rem;
}

/* 作成者: コメントパネル（ブロック別 + 孤立別枠） */
.cmt-group {
  margin-bottom: 0.9rem;
}
.cmt-group .cmt-snippet[role='button'] {
  cursor: pointer;
}
.cmt-orphan-head {
  margin: 0.6rem 0 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--line);
  color: var(--soon);
  font-size: 0.82rem;
  font-weight: 600;
}
.cmt-empty {
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
  padding: 1.2rem 0;
}

/* 変更履歴パネル */
.hist-note {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
  margin-bottom: 0.8rem;
}
.hist-row {
  padding: 0.7rem 0;
  border-top: 1px solid var(--line);
}
.hist-row:first-of-type {
  border-top: none;
}
.hist-row.pinned {
  background: var(--surface-2, rgba(127, 127, 127, 0.06));
  border-radius: 8px;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}
.hist-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.15rem 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.hist-caret {
  color: var(--muted);
  font-size: 0.7rem;
  flex: 0 0 auto;
}
.hist-time {
  font-weight: 600;
  font-size: 0.86rem;
  flex: 0 0 auto;
}
.hist-count {
  color: var(--muted);
  font-size: 0.78rem;
  flex: 0 0 auto;
}
.hist-pin-badge {
  font-size: 0.76rem;
  color: var(--accent);
  flex: 0 0 auto;
}
/* 折りたたみ時のさわり（1行省略）。 */
.hist-snippet {
  color: var(--muted);
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
/* 展開した版の中身（読み取り専用）。長い版はスクロール。 */
.hist-body {
  padding: 0.4rem 0 0.2rem;
}
.hist-full {
  max-height: 40vh;
  overflow-y: auto;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2, rgba(127, 127, 127, 0.04));
  font-size: 0.9rem;
  line-height: 1.55;
  word-break: break-word;
}
.hist-full h1,
.hist-full h2,
.hist-full h3 {
  margin: 0.4rem 0 0.2rem;
  line-height: 1.3;
}
.hist-full h1 {
  font-size: 1.15rem;
}
.hist-full h2 {
  font-size: 1.05rem;
}
.hist-full h3 {
  font-size: 0.98rem;
}
.hist-full p {
  margin: 0.2rem 0;
}
.hist-li {
  margin: 0.1rem 0 0.1rem 0.4rem;
}
.hist-li::before {
  content: '・';
  color: var(--muted);
}
.hist-check {
  margin: 0.1rem 0 0.1rem 0.4rem;
}
.hist-children {
  margin-left: 0.9rem;
}
.hist-img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 0.3rem 0;
}
.hist-preview-loading {
  color: var(--muted);
  font-size: 0.85rem;
  padding: 0.6rem 0;
}
.hist-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.hist-btn {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
}
.hist-btn.ghost {
  background: transparent;
  color: var(--accent);
}

/* 作成者トップバーのコメント数バッジ付きボタン */
.iconbtn.cmt-btn {
  position: relative;
}
.cmt-btn .cmt-badge {
  position: absolute;
  top: -2px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.64rem;
  line-height: 16px;
  text-align: center;
}

/* パネルから対象ブロックへジャンプしたときの一瞬のハイライト */
.cmt-target {
  animation: cmt-flash 1.5s ease;
  border-radius: 8px;
}
@keyframes cmt-flash {
  0%,
  100% {
    background: transparent;
  }
  25% {
    background: rgba(47, 125, 225, 0.16);
  }
}

/* 未読バッジ: 未読0のときは隠す（属性 hidden を効かせる） */
.cmt-btn .cmt-badge[hidden] {
  display: none;
}
/* 未読コメントの強調（既読位置より新しいバブル） */
.cmt-bubble.new {
  border-color: var(--accent);
  background: rgba(47, 125, 225, 0.06);
}
/* バブル右上の操作（非表示/取り消し/元に戻す）。控えめに置き、ホバー/フォーカスで強調。 */
.cmt-bubble {
  position: relative;
}
.cmt-bubble .cmt-text {
  padding-right: 3.2rem;
}
/* コメント本文の最小マークダウン描画（md.js）。安全な限定タグのみが入る */
.cmt-text code {
  background: rgba(0, 0, 0, 0.06);
  padding: 0 0.25em;
  border-radius: 4px;
  font-size: 0.92em;
}
.cmt-text a {
  color: var(--accent, #2563eb);
  word-break: break-all;
}
.cmt-mdhint {
  font-size: 0.72rem;
  color: var(--muted);
  margin: 0.1rem 0 0.3rem;
}
.cmt-hide,
.cmt-retract,
.cmt-edit,
.cmt-restore {
  position: absolute;
  top: 6px;
  right: 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.68rem;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.cmt-hide:hover,
.cmt-hide:focus-visible,
.cmt-retract:hover,
.cmt-retract:focus-visible,
.cmt-edit:hover,
.cmt-edit:focus-visible,
.cmt-restore:hover,
.cmt-restore:focus-visible {
  opacity: 1;
  color: var(--ink);
  background: #eef2f7;
}
/* 編集/取り消しを1メッセージに複数出すときは絶対配置をやめて右下に並べる。 */
.cmt-actions {
  display: flex;
  gap: 0.15rem;
  justify-content: flex-end;
  margin-top: 0.3rem;
}
.cmt-actions .cmt-edit,
.cmt-actions .cmt-retract {
  position: static;
  top: auto;
  right: auto;
}
/* 「もっと読み込む」 */
.cmt-more {
  display: block;
  width: 100%;
  margin: 0.2rem 0 0.6rem;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--accent);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.cmt-more:hover {
  background: #eef2f7;
}
.cmt-more:disabled {
  color: var(--muted);
  cursor: default;
}
/* 「非表示にしたコメント」折りたたみ */
.cmt-hidden-wrap {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--line);
}
.cmt-hidden-toggle {
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  padding: 0.2rem 0;
  cursor: pointer;
}
.cmt-hidden-toggle:hover {
  color: var(--ink);
}
.cmt-hidden-toggle::before {
  content: '▸ ';
}
.cmt-hidden-toggle.open::before {
  content: '▾ ';
}
.cmt-hidden-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.4rem;
}
.cmt-bubble.hidden-row {
  opacity: 0.8;
}

/* ---------- 返信（会話化：作成者 → 閲覧者） ---------- */
/* 返信バブルは字下げ＋別色で「作成者の返信」だと分かるように。 */
.cmt-bubble.reply {
  margin-left: 1.1rem;
  background: #f5f8fc;
}
.cmt-bubble.reply .cmt-text {
  padding-right: 0.4rem;
}
/* 作成者パネル: 返信導線とフォーム */
.cmt-reply-affordance {
  margin: 0.1rem 0 0.5rem 1.1rem;
}
.cmt-reply-btn {
  border: none;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 0.78rem;
  padding: 2px 4px;
  border-radius: 6px;
  cursor: pointer;
}
.cmt-reply-btn:hover {
  background: #eef2f7;
}
.cmt-reply-form {
  margin: 0.2rem 0 0.6rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.cmt-reply-form textarea {
  width: 100%;
  min-height: 48px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.45rem;
  font: inherit;
  color: var(--ink);
}
.cmt-reply-actions {
  display: flex;
  gap: 0.4rem;
}
.cmt-reply-actions button {
  font-size: 0.8rem;
  padding: 0.3rem 0.7rem;
}
/* 閲覧者のブロックタブ: 作成者の返信ありを示す小ドット */
.cmt-tab.has-reply {
  opacity: 1;
  color: var(--accent);
}
.cmt-reply-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  display: inline-block;
}

/* ---------- 文字数バー（編集画面・下部に常設） ---------- */
/* 一時トースト(#status, 中央下)とぶつからないよう左下に固定。残り文字数を常時表示。 */
/* 外側枠なし。薄いテキストだけを左下に控えめに置く（クリックは透過）。 */
.charbar {
  position: fixed;
  left: max(0.75rem, env(safe-area-inset-left));
  bottom: calc(0.5rem + env(safe-area-inset-bottom));
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: #aab3bd;
  white-space: nowrap;
  pointer-events: none;
}
.charbar.near {
  color: #e0803a;
  font-weight: 600;
}
.charbar.over {
  color: var(--danger);
  font-weight: 600;
}
.charbar .cc-upgrade {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  pointer-events: auto;
}
.charbar .cc-upgrade:hover {
  text-decoration: underline;
}

/* ---------- 管理コンソール（/admin） ---------- */
.admin {
  max-width: 960px;
  margin: 0 auto;
  padding: 1rem 1rem 4rem;
}
.admin-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
}
.admin-top h1 {
  font-size: 1.1rem;
  margin: 0;
  flex: 1 1 auto;
}
.admin-auth {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.admin-auth input {
  min-width: 220px;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.admin-conn {
  font-size: 0.82rem;
  color: var(--muted);
}
.admin-conn.is-ok {
  color: #1a7f3c;
  font-weight: 600;
}
.admin-msg {
  margin: 0.8rem 0;
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  font-size: 0.9rem;
  background: #eef2f7;
  border: 1px solid var(--line);
}
.admin-msg.is-ok {
  background: #e8f6ee;
  border-color: #bfe6cd;
}
.admin-msg.is-error {
  background: #fdecec;
  border-color: #f4c9c7;
}
.admin-card {
  margin: 1.2rem 0;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.admin-card h2 {
  font-size: 1rem;
  margin: 0 0 0.4rem;
}
.admin-card h3 {
  font-size: 0.9rem;
  margin: 1rem 0 0.5rem;
}
.admin-note {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 0 0 0.6rem;
}
.admin-adimg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.2rem 0;
}
.admin-adimg-status {
  font-size: 0.8rem;
  color: var(--muted);
}
.admin-adimg-preview img {
  max-width: 220px;
  max-height: 120px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: block;
  margin-top: 0.3rem;
}
.admin-help {
  margin: -0.2rem 0 0.6rem;
  font-size: 0.82rem;
}
.admin-help summary {
  cursor: pointer;
  color: var(--accent, #2563eb);
}
.admin-help-list {
  margin: 0.4rem 0;
  padding-left: 1.1rem;
  color: var(--ink);
  line-height: 1.6;
}
.admin-help-list code {
  background: rgba(0, 0, 0, 0.06);
  padding: 0 0.25em;
  border-radius: 4px;
}
.admin-tablewrap {
  overflow-x: auto;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.admin-table th,
.admin-table td {
  text-align: left;
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.admin-table th {
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
.admin-empty {
  color: var(--muted);
  text-align: center;
  padding: 1rem;
}
.admin-badge {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
}
.admin-badge.is-on {
  background: #e8f6ee;
  color: #1a7f3c;
}
.admin-badge.is-off {
  background: #f0f2f5;
  color: var(--muted);
}
.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.admin button.sm {
  padding: 0.25rem 0.55rem;
  font-size: 0.8rem;
  border-radius: 8px;
}
.admin button.danger.sm {
  border: 1px solid #f0d2d1;
}
.admin-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 1rem;
}
.admin-form label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.admin-form input,
.admin-form select {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.9rem;
  color: var(--ink);
}
.admin-form .req {
  color: var(--danger);
}
.admin-form label.admin-check {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
}
.admin-formbtns {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.5rem;
}
.admin-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0;
}
.admin-inline input {
  flex: 1 1 240px;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.admin-out {
  margin-top: 0.6rem;
}
.admin-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 0.8rem;
  font-size: 0.85rem;
  margin: 0.4rem 0;
}
.admin-dl dt {
  color: var(--muted);
}
.admin-dl dd {
  margin: 0;
  word-break: break-word;
}
.admin-pre {
  margin: 0.5rem 0 0;
  padding: 0.7rem 0.8rem;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 10px;
  font-size: 0.8rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.admin-err {
  color: var(--danger);
  font-size: 0.85rem;
}
.admin-muted {
  color: var(--muted);
  font-size: 0.85rem;
}
/* プランバッジ（一覧・詳細で共用） */
.admin-badge.is-free {
  background: #f0f2f5;
  color: var(--muted);
}
.admin-badge.is-plus {
  background: #e8f0ff;
  color: #2456c8;
}
.admin-badge.is-pro {
  background: #efe8ff;
  color: #6b32c8;
}
/* 並び替えセレクト（インライン操作列） */
.admin-sort {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.admin-sort select {
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.85rem;
  color: var(--ink);
}
/* ユーザー行（クリックで展開） */
.admin-userrow {
  cursor: pointer;
}
.admin-userrow:hover {
  background: var(--surface-2, #f7f8fa);
}
.admin-email {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  word-break: break-all;
}
.admin-caret {
  color: var(--muted);
  font-size: 0.75rem;
  transition: transform 0.12s ease;
}
.admin-userrow.is-open .admin-caret {
  transform: rotate(90deg);
}
.admin-userdetail > td {
  background: var(--surface-2, #f7f8fa);
}
/* ページャ */
.admin-pager {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
}
.admin-range {
  color: var(--muted);
  font-size: 0.82rem;
}
@media (max-width: 640px) {
  .admin-form {
    grid-template-columns: 1fr;
  }
}


/* ---------- 活用例（/usecases）---------- */
/* 絞り込み UI。検索・チップともクライアントサイドで完結（usecases.js） */
.uc-filters {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 1rem 0 1.2rem;
}
.uc-search {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 1rem;
  background: var(--card);
}
.uc-search:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}
.uc-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.uc-chip-label {
  color: var(--muted);
  font-size: 0.82rem;
  margin-right: 0.2rem;
}
.uc-chip {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.32rem 0.8rem;
  font-size: 0.88rem;
  cursor: pointer;
  /* スマホでも押しやすい高さを確保 */
  min-height: 32px;
}
.uc-chip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* 一覧カード */
.uc-list {
  list-style: none;
  padding: 0 !important;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.7rem;
}
.uc-card a {
  display: block;
  height: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow);
}
.uc-card a:hover {
  border-color: var(--accent);
}
.uc-card h2 {
  border-top: none;
  padding-top: 0;
  margin: 0.45rem 0 0.35rem;
  font-size: 1.02rem;
  line-height: 1.5;
}
.uc-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.7;
}

/* プラン/カテゴリバッジ（一覧・個別で共用） */
.uc-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.uc-badge {
  display: inline-block;
  border-radius: 999px;
  padding: 0.12rem 0.6rem;
  font-size: 0.76rem;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--bg);
}
.uc-badge.uc-plan-free {
  background: #e8f6ee;
  border-color: #bfe5cf;
  color: var(--ok);
}
.uc-badge.uc-plan-plus {
  background: #e9f1fc;
  border-color: #c5daf5;
  color: var(--accent);
}
.uc-badge.uc-plan-pro {
  background: #fdf3e4;
  border-color: #f3ddb6;
  color: var(--soon);
}

/* テンプレの1ブロック（入力例 / テンプレート）: 見出し行＋整形プレビュー＋原文の折りたたみ */
.uc-block {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
  margin: 0.6rem 0 0.4rem;
}
.uc-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  font-size: 0.82rem;
  color: var(--muted);
}
.uc-copy {
  border: 1px solid var(--accent);
  background: var(--card);
  color: var(--accent);
  border-radius: 8px;
  padding: 0.3rem 0.8rem;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}
.uc-copy:disabled {
  opacity: 0.7;
  cursor: default;
}

/* 整形プレビュー（貼り付け後の見た目） */
.uc-preview {
  padding: 1rem 1.1rem;
}
.uc-preview > *:first-child {
  margin-top: 0;
}
.uc-preview .pv-h1 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0.9rem 0 0.4rem;
}
.uc-preview .pv-h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0.8rem 0 0.3rem;
}
.uc-preview p {
  margin: 0.35rem 0;
  line-height: 1.75;
}
.uc-preview ul,
.uc-preview ol {
  margin: 0.35rem 0;
  padding-left: 1.4rem;
}
.uc-preview .pv-check {
  list-style: none;
  padding-left: 0;
}
.uc-preview .pv-check li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.28rem 0;
  line-height: 1.6;
}
.uc-preview .pv-box {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1.5px solid #cbd5df;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  color: transparent;
}
.uc-preview .pv-box.on {
  background: #eaf6ee;
  border-color: #bfe5cf;
  color: var(--ok);
}
.uc-preview .pv-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0;
  font-size: 0.9rem;
}
.uc-preview .pv-table th,
.uc-preview .pv-table td {
  border: 1px solid var(--line);
  padding: 0.4rem 0.6rem;
  text-align: left;
  vertical-align: top;
}
.uc-preview .pv-table th {
  background: #f1f4f8;
}

/* 原文（Markdown）の折りたたみ */
.uc-raw {
  border-top: 1px solid var(--line);
}
.uc-raw > summary {
  cursor: pointer;
  padding: 0.5rem 0.9rem;
  font-size: 0.8rem;
  color: var(--muted);
  list-style-position: inside;
}
.uc-raw > summary:hover {
  color: var(--accent);
}
.uc-raw pre {
  margin: 0;
  padding: 0.3rem 1rem 0.9rem;
  font-size: 0.86rem;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  color: var(--muted);
}

/* CTA */
.uc-cta {
  margin-top: 2rem;
  text-align: center;
}
.uc-cta-btn {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink) !important;
  border-radius: 999px;
  padding: 0.7rem 1.6rem;
  text-decoration: none;
  font-weight: 600;
  box-shadow: var(--shadow);
}

/* --- AI連携（MCP）設定画面 --- */
.mcp-endpoint,
.mcp-token {
  display: block;
  padding: 0.55rem 0.7rem;
  background: #f2f5f9;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  word-break: break-all;
}
.mcp-create {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mcp-create .auth-input {
  flex: 1 1 220px;
}
.mcp-reveal {
  margin: 8px 0 4px;
  padding: 12px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: #f0f6ff;
}
.mcp-token-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.mcp-token-row .mcp-token {
  flex: 1;
}
.mcp-snippet {
  margin-top: 10px;
}
.mcp-snippet summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
}
.mcp-snippet pre {
  overflow-x: auto;
  padding: 0.7rem;
  background: #1c2530;
  color: #e7edf5;
  border-radius: 8px;
  font-size: 0.8rem;
}
.mcp-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mcp-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.mcp-item.is-revoked {
  opacity: 0.55;
}
.mcp-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mcp-item-name {
  font-weight: 600;
}
.mcp-item-meta {
  font-size: 0.8rem;
  color: var(--muted);
}
.mcp-revoke {
  flex: 0 0 auto;
}

/* --- マニュアルの MCP クライアント別リファレンス --- */
.mcp-doc {
  margin: 8px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
}
.mcp-doc > summary {
  cursor: pointer;
  font-size: 0.95rem;
}
.mcp-doc[open] > summary {
  margin-bottom: 6px;
}
.mcp-code {
  overflow-x: auto;
  padding: 0.7rem 0.8rem;
  background: #1c2530;
  color: #e7edf5;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  line-height: 1.5;
  white-space: pre;
}

/* ============================================================
   印刷 / PDF保存
   編集画面（≡メニュー「印刷 / PDF保存」）と共有ビューア（「印刷 / PDF保存」）の
   両方で window.print() を呼ぶ。ダイアログの「PDFで保存」を選べば PDF 出力にもなるので、
   追加ライブラリ無し・サーバー非経由（コスト0）で印刷とPDFの両方をまかなう。
   方針: 画面のクロム（ヘッダ/広告/操作ボタン/オーバーレイ/BlockNoteの浮遊UI等）を隠し、
   本文（#bn-root）だけを紙幅いっぱいに流す。
   注意: CSS は typecheck/テスト対象外。触ったら /（編集）と /v/:id（共有ビューア）の両方を
   preview で必ず目視する（クロムが残っていないか・本文が切れていないか）。
   ============================================================ */
@media print {
  @page {
    margin: 16mm;
  }

  /* 色ラベル/文字色/ハイライト/画像を画面どおりに印刷する（既定だと背景色が飛ぶ）。 */
  #bn-root,
  #bn-root * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* --- 編集画面（body.is-editor）: 本文以外を隠す --- */
  body.is-editor .appbar,
  body.is-editor .overlay,
  body.is-editor .charbar,
  body.is-editor .statusbar,
  body.is-editor .undo-toast {
    display: none !important;
  }
  body.is-editor .page {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  /* --- 共有ビューア（body.is-viewer）: 本文以外を隠す --- */
  body.is-viewer .topbar,
  body.is-viewer .meta,
  body.is-viewer .actions,
  body.is-viewer .ad-slot,
  body.is-viewer .viewer-cta,
  body.is-viewer .statusbar,
  body.is-viewer .cmt-tab {
    display: none !important;
  }
  body.is-viewer .viewer {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  /* BlockNote の浮遊UI（⠿ドラッグハンドル/サイドメニュー/ツールバー等）はホバー時のみだが念のため隠す。 */
  #bn-root .bn-side-menu,
  .bn-formatting-toolbar,
  .mantine-Menu-dropdown,
  .bn-drag-handle-menu {
    display: none !important;
  }

  /* 本文は編集枠の左余白（⠿ハンドル用）と最小高さを外し、紙面に素直に流す。 */
  #bn-root .bn-editor {
    padding: 0 !important;
    min-height: 0 !important;
  }
}

/* --- OAuth 同意画面（/oauth/authorize） ---
   「知らないアプリに自分のメモを触らせてよいか」を判断する画面なので、アプリ名と警告文を
   本文より強く見せ、許可する操作は1項目ずつ独立した行として読ませる。 */
.oauth-client {
  font-size: 1.05rem;
}
.oauth-client-uri {
  color: var(--muted);
  font-size: 0.85rem;
  word-break: break-all;
}
.oauth-warn {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-left: 3px solid #d9822b;
  border-radius: 6px;
  background: #fff8ef;
}
.oauth-consent {
  margin-top: 16px;
}
.oauth-scopes {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0;
}
.oauth-scopes legend {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0 4px;
}
.oauth-scope {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
  cursor: pointer;
}
.oauth-scope + .oauth-scope {
  border-top: 1px solid var(--line);
}
.oauth-scope input {
  margin-top: 3px;
  flex: 0 0 auto;
}
.oauth-scope-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.oauth-scope-body .auth-lead {
  margin: 0;
  font-size: 0.82rem;
}
.oauth-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.oauth-actions button {
  flex: 1;
}

/* --- AI連携の操作履歴（/settings/mcp） ---
   .mcp-item は「アプリ1件」を横並びで見せる箱だが、履歴は行数が多く1件あたりの情報も縦積みなので
   別クラスにする（区切り線だけの軽い行にして、50件並んでも圧迫しないようにする）。 */
.mcp-log {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 12px;
  max-height: 420px;
  overflow-y: auto;
}
.mcp-log:empty {
  display: none;
}
.mcp-log-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
}
.mcp-log-item + .mcp-log-item {
  border-top: 1px solid var(--line);
}
.mcp-log-head {
  font-weight: 600;
  font-size: 0.9rem;
}
/* 失敗した操作は淡く。「試したが通らなかった」ことが分かればよく、成功と同じ強さで並べない。 */
.mcp-log-item.is-failed .mcp-log-head {
  font-weight: 500;
  color: var(--muted);
}
.mcp-log-note {
  font-size: 0.8rem;
  align-self: flex-start;
}