/* 申し送りノート — 紙のノートを模した画面。
   トンマナ: web-tonmana 業務モード準拠（グラデーション・絵文字アイコン禁止、本文16px以上）。
   ただし紙のノートの見た目を優先する（CLAUDE.md）。

   「見た目の調整」で変わる値は CSS変数にしてある:
     --app-font / --app-size / --app-lh / --peach-opacity
   ボタンの大きさは body.btn-normal / btn-large / btn-xlarge で切り替える。
   ドラッグ調整は [data-adjust] 要素の --adj-x / --adj-y / --adj-scale に入る。 */

:root {
  /* 意味のある色だけ。主張する色は1つ（朱色=印鑑・注意の色） */
  --paper: #fdfcf7;          /* 紙の色（わずかに生成り） */
  --paper-line: #d8d4c8;     /* ノートの罫線 */
  --ink: #1a1a1a;            /* 本文 */
  --muted: #767676;          /* 補足（白地4.5:1の下限） */
  --border: #949494;         /* 入力欄・押せるものの枠 */
  --rule: #d9d9d9;           /* 区切り線 */
  --head-bg: #f2f2f2;        /* ヘッダー・見出し行 */
  --accent: #b7282e;         /* 朱肉色。押印と注意表示に使う */
  --link: #0017c1;           /* リンク・主ボタン（デジタル庁Blue） */
  --link-hover: #00118f;
  --link-bg: #e8f1fe;
  --ok: #007b43;
  --error: #ce0000;

  /* 見た目の調整で上書きされる値（既定値） */
  --app-font: 'BIZ UDPGothic', 'Meiryo', sans-serif;
  --app-size: 18px;
  --app-lh: 1.8;
  --peach-opacity: 0.08;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  display: flex;
  flex-direction: column;
  font-family: var(--app-font);
  font-size: var(--app-size);
  line-height: var(--app-lh);
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--paper);
}

/* 背景の桃（SVG）。本文の可読性を落とさないよう薄く敷く */
#background {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--peach-opacity);
  background-repeat: no-repeat;
  background-position: right -40px bottom -60px;
  background-size: 480px auto;
}

#app { position: relative; z-index: 1; flex: 1 0 0; min-height: 0; overflow-x: clip; }

/* 別画面へ移った時だけ、紙の端が右から左へ通る短いページめくりを出す。 */
#app.page-turn-enter > * {
  animation: page-content-reveal 340ms cubic-bezier(0.22, 0.75, 0.28, 1) both;
}
#app.page-turn-enter::after {
  content: '';
  position: fixed;
  top: 0;
  right: -10vw;
  bottom: 0;
  z-index: 100;
  width: 72vw;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(91, 82, 63, 0.2) 0, rgba(253, 252, 247, 0.96) 5%, #fdfcf7 100%);
  box-shadow: -14px 0 24px rgba(48, 43, 34, 0.16);
  transform-origin: left center;
  animation: page-sheet-turn 340ms cubic-bezier(0.3, 0.68, 0.26, 1) both;
}
@keyframes page-content-reveal {
  from { opacity: 0.78; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes page-sheet-turn {
  0% { opacity: 0; transform: translateX(105%) perspective(1200px) rotateY(-10deg); }
  18% { opacity: 0.9; }
  100% { opacity: 0; transform: translateX(-165%) perspective(1200px) rotateY(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
  #app.page-turn-enter > * { animation: none; }
  #app.page-turn-enter::after { content: none; animation: none; }
  .notebook.turning-forward::before,
  .notebook.turning-backward::before { content: none; animation: none; }
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

a { color: var(--link); text-decoration: underline; }
a:hover { color: var(--link-hover); }

/* ---- ボタン（大きさは body クラスで3段階） ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}
.btn:hover { background: var(--head-bg); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.primary { background: var(--link); border-color: var(--link); color: #fff; }
.btn.primary:hover { background: var(--link-hover); }
.btn.danger-line { color: var(--error); border-color: var(--error); background: #fff; }

body.btn-large .btn { min-height: 52px; padding: 10px 22px; }
body.btn-xlarge .btn { min-height: 64px; padding: 14px 28px; font-size: calc(var(--app-size) * 1.1); }

/* ---- NAS状態バナー ---- */
#storage-banner {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 16px;
  font-size: 14px;
  line-height: 1.3;
  border-bottom: 1px solid var(--rule);
  background: #eef6f0;
  color: #205b28;
}
#storage-banner.warn { background: #fff7e6; color: #6b4e00; }
#storage-banner.error { background: #fdeaea; color: #8c1d1d; }
#storage-banner .detail { flex: 1; }
#storage-banner .nas-path { font-family: Consolas, monospace; font-size: 12px; color: var(--muted); }
/* バナー内の再接続ボタンは、押せる大きさを保ちつつ高さだけ抑える */
body #storage-banner .btn { min-height: 32px; padding: 2px 12px; font-size: 14px; }

/* ---- ヘッダー ---- */
.note-header {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 3px 16px;
  background: var(--head-bg);
  border-bottom: 1px solid var(--rule);
}
.note-header .unit-name { font-size: 17px; font-weight: 700; line-height: 1.4; }
.note-header .spacer { flex: 1; }
/* ノートの面積を優先し、ヘッダーのボタンは高さを抑える（幅は押しやすさを保つ）。
   body.btn-large / btn-xlarge の指定より後に効かせるため body から書く。 */
body .note-header .btn {
  min-height: 34px;
  padding: 2px 14px;
  font-size: 15px;
}
.note-header input[type='search'] {
  min-height: 34px;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  width: 210px;
  background: #fff;
}
.staff-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 12px;
  min-height: 34px;
  border: 1px solid #d9a400;
  border-radius: 8px;
  background: #fff2a8;
  color: #b42318;
  font-weight: 700;
  font-size: 15px;
}
.staff-chip .muted { color: #b42318; font-size: 13px; }
.note-zoom-controls {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.note-zoom-button {
  width: 38px;
  min-height: 32px;
  border: 0;
  background: #fff;
  color: var(--link);
  font: inherit;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.note-zoom-button:hover { background: var(--link-bg); }
.note-zoom-button:disabled { color: var(--muted); background: #f7f7f7; }
.note-zoom-percent {
  min-width: 62px;
  padding: 0 8px;
  border-right: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

/* ---- ノート本体 ---- */
.notebook {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 12px 0 8px;
  padding: 40px 68px 58px;
  overflow: hidden;
  border: 1px solid #d8d1c2;
  border-radius: 14px;
  background-color: #fffef9;
  background-image: url('assets/momo-notebook-demo.jpg');
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto;
  box-shadow: 0 8px 24px rgba(64, 55, 42, 0.14);
}
.notebook.has-fixed-composer {
  height: var(--notebook-fit-height, 710px);
  margin-bottom: 0;
}
/* 中央の折り目は各ページの左右2欄の間に出す。 */
.notebook::after {
  content: none;
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: calc(50% - 24px);
  width: 48px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(80, 68, 49, 0),
    rgba(80, 68, 49, 0.08) 38%,
    rgba(255, 255, 255, 0.78) 50%,
    rgba(80, 68, 49, 0.07) 62%,
    rgba(80, 68, 49, 0)
  );
}
.notebook > * {
  position: relative;
  z-index: 1;
}

/* ページ自体は上から下へ並べ、ノートの中だけを縦スクロールする。 */
.notebook-viewport {
  height: 610px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  /* ページ位置への自動吸着は、ホイール移動とぶつかって境目でカクつくため使わない。
     上下ボタンだけがJSでページ先頭へ正確に移動する。 */
}
.notebook.has-fixed-composer .notebook-viewport { height: 100%; }
.notebook-flow {
  --notebook-page-height: 610px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  height: auto;
  overflow: visible;
}
.notebook-sheet {
  position: relative;
  flex: 0 0 var(--notebook-page-height);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  column-gap: 48px;
  width: 100%;
  height: var(--notebook-page-height);
  min-height: 0;
  padding: 8px 12px;
  overflow: hidden;
  border-bottom: 0;
}
.notebook-sheet.has-notice {
  grid-template-rows: auto minmax(0, 1fr);
  row-gap: 8px;
}
.notebook-sheet::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: calc(50% - 18px);
  width: 36px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(80, 68, 49, 0),
    rgba(80, 68, 49, 0.08) 38%,
    rgba(255, 255, 255, 0.76) 50%,
    rgba(80, 68, 49, 0.07) 62%,
    rgba(80, 68, 49, 0)
  );
}
/* 桃ラインは親コメントごとではなく、次のページへ切り替わる境目に1本だけ置く。 */
.notebook-sheet:not(:last-child)::before {
  content: '';
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 24px;
  pointer-events: none;
  background-repeat: repeat-x;
  background-position: left center;
  background-size: 22px 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='24' viewBox='2 0 22 24'%3E%3Cg stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M13 18.2 C10 16.8 5.4 17.4 2.8 19.4 C5.4 22.4 10.4 21.6 13 19.6 Z' fill='%233aa845' stroke='%23127a2c' stroke-width='1.2'/%3E%3Cpath d='M13 18.2 C16 16.8 20.6 17.4 23.2 19.4 C20.6 22.4 15.6 21.6 13 19.6 Z' fill='%233aa845' stroke='%23127a2c' stroke-width='1.2'/%3E%3Cpath d='M13 2.4 C9.4 5.4 3.2 6.9 3.2 12 C3.2 16.7 7.2 20.3 12.6 18.9 C18 20.3 22.8 16.7 22.8 12 C22.8 6.9 16.6 5.4 13 2.4 Z' fill='%23f48fb1' stroke='%23b5323f' stroke-width='1.4'/%3E%3Cpath d='M13 3.6 C11.6 8.4 11.2 13.4 12.2 18.6' fill='none' stroke='%23d9647f' stroke-width='1.2'/%3E%3Cpath d='M7.6 9.2 C8.6 7.2 10.2 5.9 11.8 5.4 C10.4 6.8 9 8.2 8.4 10.2 Z' fill='%23ffc7d8'/%3E%3C/g%3E%3C/svg%3E");
}
.notebook-sheet-notice {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  grid-row: 1;
}
.notebook-column {
  position: relative;
  z-index: 1;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  padding: 0 12px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.notebook-sheet.has-notice .notebook-column { grid-row: 2; }
.notebook-column.is-empty { overflow: hidden; }
.notebook-sheet-empty {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  align-self: center;
}
.notebook-sheet.has-notice .notebook-sheet-empty { grid-row: 2; }

.notebook-page-nav {
  position: absolute;
  z-index: 6;
  top: calc(50% - 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 96px;
  border: 1px solid #b8aa91;
  border-radius: 10px;
  color: #7f3150;
  background: rgba(255, 253, 247, 0.94);
  box-shadow: 0 2px 8px rgba(64, 55, 42, 0.16);
  font-size: 42px;
  line-height: 1;
}
.notebook-page-nav:hover { background: #fff4f7; }
.notebook-page-nav:disabled { opacity: 0.25; cursor: default; }
.notebook-page-prev { left: 8px; }
.notebook-page-next { right: 8px; }
.notebook-page-indicator {
  position: absolute;
  z-index: 5;
  right: 80px;
  bottom: 14px;
  left: 80px;
  color: var(--muted);
  font-size: 15px;
  text-align: center;
}

/* 上下ボタンで1ページ送った時だけ、レポート用紙を上へめくるような短い演出を出す。
   すすむ＝紙を上へめくり上げる／もどる＝紙が上から下りて戻ってくる。 */
.notebook.turning-forward::before,
.notebook.turning-backward::before {
  content: '';
  position: absolute;
  z-index: 4;
  top: 20px;
  bottom: 48px;
  left: 24px;
  right: 24px;
  pointer-events: none;
  background: rgba(255, 254, 249, 0.97);
  box-shadow: 0 0 18px rgba(64, 55, 42, 0.2);
}
.notebook.turning-forward::before {
  transform-origin: center top;
  animation: notebook-turn-forward 360ms ease-out both;
}
.notebook.turning-backward::before {
  transform-origin: center top;
  animation: notebook-turn-backward 360ms ease-out both;
}
@keyframes notebook-turn-forward {
  from { opacity: 0.9; transform: perspective(1200px) rotateX(0deg); }
  to { opacity: 0; transform: perspective(1200px) rotateX(66deg); }
}
@keyframes notebook-turn-backward {
  from { opacity: 0.85; transform: perspective(1200px) rotateX(62deg); }
  to { opacity: 0; transform: perspective(1200px) rotateX(0deg); }
}

.load-more { text-align: center; margin-bottom: 24px; }

/* エントリ = ノートの1記事。1ページの左右に1件ずつ入れる。 */
.entry {
  position: relative;
  margin: 0;
  padding: 16px 0;
  border-bottom: 0;
  break-inside: auto;
}
.entry-parent-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  align-items: start;
  gap: 14px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid-column;
}
.entry-parent-content {
  min-width: 0;
  max-height: 480px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.entry-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.4;
}
/* 誰が書いたかは一番大事なので、名札のように下地を敷いて大きく出す。
   日付・時刻は青、名前は黒に下地。色数を増やさずに見分けられるようにしている。 */
.entry-meta .writer {
  color: var(--ink);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.3;
  padding: 1px 10px;
  border: 1px solid #e0c3cc;
  border-radius: 6px;
  background: #fdeef2;
}
.reply .entry-meta .writer { font-size: 17px; }
.entry-meta .message-date,
.entry-meta .message-time { color: var(--link); font-weight: 800; }
.entry-text {
  margin-top: 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.entry-text ruby rt { font-size: 0.55em; color: var(--accent); }
.entry-text.is-cancelled,
.entry.is-cancelled .entry-parent-content > .entry-text {
  color: #7b5962;
  text-decoration-line: line-through;
  text-decoration-style: double;
  text-decoration-thickness: 4px;
  text-decoration-color: #bd174a;
}
.cancelled-note { margin-top: 6px; color: #a11c45; font-size: 14px; font-weight: 700; }

.corrected-note { font-size: 15px; color: var(--muted); margin-top: 4px; }
.tamper-warning {
  margin-top: 8px;
  padding: 8px 12px;
  font-size: 15px;
  color: #8c1d1d;
  background: #fdeaea;
  border: 1px solid var(--error);
  border-radius: 4px;
}

.entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.entry-actions .btn { min-height: 40px; padding: 4px 12px; font-size: 15px; }
body.btn-xlarge .entry-actions .btn { min-height: 52px; font-size: 17px; }
.entry-comment-actions { margin-top: 12px; }
.comment-toggle {
  min-height: 36px;
  padding: 4px 10px;
  border: 0;
  border-radius: 4px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 15px;
}
.comment-toggle:hover { color: var(--ink); background: var(--head-bg); }
.comment-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0 20px;
  padding: 10px 0 0 20px;
  border-left: 3px solid #d7b7c0;
}
/* 親コメントへの操作（返信ボタン・▼操作）は返信一覧より上、親のすぐ下に置く。
   返信の下にあると、枝コメントへの操作と取り違えて書いてしまうため（JS側の並び順で保証）。 */
.comment-menu .btn { min-height: 40px; padding: 4px 12px; font-size: 15px; }
.comment-menu .cancel-entry { color: #9f1744; border-color: #c45476; }
.comment-menu .cancel-entry:hover { background: #fff0f4; }

/* ---- 押印欄 ----
   押印は記入者名の隣の「印」ボタン（.stamp-chip）から画面中央のモーダルで開く。
   右側の箱は視野から外れて気づかれないため廃止した。 */
.stamp-people { display: inline-flex; flex-basis: 100%; align-items: center; flex-wrap: wrap; gap: 4px; }
.stamp-mini {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid #ce7d96;
  border-radius: 999px;
  color: #9b3156;
  background: #fff4f7;
  font-size: 13px;
  line-height: 1.5;
}
.stamp-none { color: var(--muted); font-size: 14px; }

.stamp-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  justify-content: center;
  padding: 10px 6px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
}
/* 押印一覧は画面中央のモーダルで開き、横に5人ずつ並べて折り返す。 */
.stamp-modal-body .stamp-grid {
  display: grid;
  grid-template-columns: repeat(5, 104px);
  justify-content: center;
  gap: 12px 8px;
  max-height: 56vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* 押印グループの見出しはJSへ見た目を混ぜず、ここでまとめて管理する。 */
.stamp-group-heading {
  width: 100%;
  margin-top: 8px;
  font-size: 15px;
  font-weight: 700;
}
/* グループ名と「退職・異動」の見出しは5列ぶんを占めて改行させる。 */
.stamp-modal-body .stamp-group-heading { grid-column: 1 / -1; }
.stamp-modal-count { font-weight: 700; margin-bottom: 8px; }
/* 記入者名の隣の小さな「印」ボタン。ここから押印モーダルを開く。 */
.stamp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 1px 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  line-height: 1.3;
}
.stamp-chip:hover { background: var(--head-bg); }
.stamp-chip .stamp-chip-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}
/* 自分が未押印のときは朱色で塗って白文字にする（枠だけより目に入る） */
.stamp-chip.need-mine {
  border: 2px solid var(--accent);
  background: var(--accent);
  color: #fff;
}
.stamp-chip.need-mine:hover { background: #9c1f26; }
.stamp-chip.need-mine .stamp-chip-mark { border-color: #fff; color: #fff; }
.stamp-chip.need-mine .stamp-chip-note { color: #fff; font-weight: 700; }
/* 書いた本人は押印の対象外。押せないことが見て分かるようグレーで出す。 */
.stamp-cell.is-author { opacity: 0.45; }
.stamp-cell.is-author .when { font-weight: 700; }
.author-circle {
  width: 56px;
  height: 56px;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: repeating-linear-gradient(
    -45deg,
    #eeeeee,
    #eeeeee 4px,
    #f7f7f7 4px,
    #f7f7f7 8px
  );
}
.notebook-flow .stamp-grid {
  position: static;
  width: 100%;
  max-height: 430px;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: inset 0 1px 4px rgba(64, 55, 42, 0.12);
}
.stamp-cell { width: 104px; text-align: center; }
.stamp-cell .who { font-size: 14px; line-height: 1.3; color: var(--muted); overflow-wrap: anywhere; }
.stamp-cell .slot { height: 68px; display: flex; align-items: center; justify-content: center; }
.stamp-cell .when { font-size: 12px; color: var(--muted); line-height: 1.3; }
.empty-circle {
  width: 56px;
  height: 56px;
  border: 2px dashed var(--border);
  border-radius: 50%;
}
.stamp-button {
  width: 56px;
  height: 56px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: #fff;
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
}
.stamp-button:hover { background: #fdf0f0; }
.unstamp-link { font-size: 13px; }

/* ---- 返信スレッド ---- */
/* 親の申し送りと返信を見分けやすくするため、縦ラインを本文より6文字分右へ置く。 */
.replies {
  margin: 12px 0 0 6em;
  padding-left: 20px;
  border-left: 3px solid #d7b7c0;
}
.reply {
  position: relative;
  padding: 10px 0 10px 16px;
  max-height: 480px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-bottom: 1px solid var(--paper-line);
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid-column;
}
.reply:last-child { border-bottom: 0; }
.reply::before {
  content: '';
  position: absolute;
  top: 24px;
  left: -20px;
  width: 18px;
  border-top: 2px solid #d7b7c0;
}
/* 返信への返事は、親への返信よりさらに6文字分右へ。自分の縦線を持つ。 */
.reply.is-reply-to-reply {
  margin-left: 6em;
  padding-left: 20px;
  border-left: 3px solid #d7b7c0;
}
.reply.is-reply-to-reply::before { content: none; }
.reply .entry-meta { font-size: 14px; }
.reply-kind { color: #9b3156; font-weight: 700; }
/* 誰への返事かを1行で示す（枝分かれさせない代わりの目印） */
.reply-target {
  display: inline-block;
  font-size: 14px;
  color: var(--muted);
  border-left: 3px solid #d7b7c0;
  padding-left: 8px;
  margin-bottom: 2px;
}
.reply-target-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
body .reply-target-row .btn { min-height: 32px; padding: 2px 12px; font-size: 14px; }
.reply-to-button {
  margin-top: 4px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  color: var(--link);
  font-size: 14px;
  min-height: 32px;
  padding: 2px 12px;
}
.reply-to-button:hover { background: var(--link-bg); }
/* 返信が増えたときに古い分を畳むボタン */
.replies-more {
  display: block;
  margin-bottom: 8px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  color: var(--link);
  font-size: 14px;
  min-height: 32px;
  padding: 2px 12px;
}
.replies-more:hover { background: var(--link-bg); }
/* 返信の記入欄も、返信の縦ラインと同じ位置から始める。 */
.reply-composer {
  margin: 12px 0 0 6em;
  padding: 12px 0 0 20px;
  border-left: 3px solid #d7b7c0;
}
/* 返信への返信のときは、どの返信にぶら下がる入力かが分かるようさらに6文字分右へ寄せる。 */
.reply-composer.is-reply-to-reply { margin-left: 12em; }
/* 返信の入力欄は、書く内容が見渡せるよう縦に広くとる。 */
.reply-composer textarea {
  width: 100%;
  min-height: 112px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.5;
  background: #fff;
  resize: vertical;
}
.reply-composer-actions { margin-top: 8px; }

/* ---- 記入欄 ---- */
.composer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 85;
  background: var(--head-bg);
  border-top: 1px solid var(--rule);
  padding: 6px 16px;
}
.composer.inline { position: static; border: 1px solid var(--rule); border-radius: 8px; margin-top: 24px; }
.composer-inner { max-width: 1160px; margin: 0 auto; display: flex; flex-direction: column; gap: 4px; }
/* 記入欄のボタンも高さだけ抑える（ノートの面積を優先） */
body .composer .btn { min-height: 36px; padding: 4px 16px; }
.composer-workspace {
  display: block;
}
.composer-editor { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.composer textarea {
  width: 100%;
  min-height: 56px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.5;
  background: #fff;
  resize: vertical;
}
.composer-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.composer-row label { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; }
.composer-row input[type='checkbox'] { width: 22px; height: 22px; accent-color: var(--accent); }
.composer .writer-note { color: var(--muted); font-size: 14px; }
.composer-save-status { min-height: 16px; color: var(--muted); font-size: 12px; line-height: 1.3; }
.composer-save-status.is-saving { color: #6b4e00; }
.composer-save-status.is-saved { color: var(--ok); font-weight: 700; }
.composer-save-status.is-error { color: var(--error); font-weight: 700; }
.draft-notice {
  max-width: 860px;
  margin: 0 auto 8px;
  padding: 8px 12px;
  font-size: 15px;
  color: #6b4e00;
  background: #fff7e6;
  border: 1px solid #b26a00;
  border-radius: 4px;
}

/* ---- 職員選択 ---- */
.select-screen { max-width: 720px; margin: 0 auto; padding: 48px 24px; }
.select-screen h1 { font-size: 24px; line-height: 1.5; margin-bottom: 8px; }
.select-screen .lead { color: var(--muted); margin-bottom: 24px; }
.nas-choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.nas-setup-info {
  padding: 12px 16px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--head-bg);
  font-size: 15px;
}
.nas-setup-info p + p { margin-top: 8px; }
.staff-buttons { display: flex; flex-wrap: wrap; gap: 16px; }
.staff-buttons .btn {
  min-width: 200px;
  min-height: 72px;
  font-size: 22px;
  font-weight: 700;
}

/* ---- 検索結果 ---- */
.search-panel {
  max-width: 860px;
  margin: 0 auto;
  padding: 16px 24px 240px;
}
.search-panel h2 { font-size: 20px; line-height: 1.5; margin-bottom: 16px; }
.search-hit { border-bottom: 1px solid var(--rule); padding: 12px 0; }
.search-hit .where { font-size: 14px; color: var(--muted); }
.search-hit .snippet { margin-top: 4px; }
.search-hit mark { background: #ffe9a8; color: inherit; padding: 0 2px; }
.search-progress { color: var(--muted); font-size: 15px; margin: 16px 0; }
.search-archive-option { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }
.search-archive-option input { width: 20px; height: 20px; }
.archived-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: #7f2525;
  background: #fff8f6;
  font-weight: 700;
}

/* ---- 設定 ---- */
.settings { max-width: 860px; margin: 0 auto; padding: 24px; }
.settings h1 { font-size: 24px; line-height: 1.5; margin-bottom: 24px; }
.settings h2 { font-size: 20px; line-height: 1.5; margin: 32px 0 8px; }
.settings-tabs { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--rule); padding-bottom: 8px; }
.settings-tabs .btn.active { background: var(--link); border-color: var(--link); color: #fff; }
.settings section { padding: 24px 0; }
.settings table { border-collapse: collapse; width: 100%; }
.settings th, .settings td { border: 1px solid var(--rule); padding: 8px; font-size: 16px; text-align: left; }
.settings th { background: var(--head-bg); font-weight: 700; }
.settings input[type='text'], .settings input[type='password'], .settings input[type='time'], .settings select {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 16px;
  background: #fff;
}
.settings .row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 8px 0; }
.settings .hint { font-size: 15px; color: var(--muted); }
.settings input[type='range'] { width: 240px; accent-color: var(--link); }
.settings .field { margin: 16px 0; }
.settings .field > label { display: block; font-weight: 700; margin-bottom: 4px; font-size: 16px; }
.translation-key-ready { color: var(--ok); font-weight: 700; }
.translation-language-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 16px;
}
.translation-language-grid label { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.settings-danger-zone {
  margin-top: 48px;
  padding: 20px;
  border: 2px solid #a13a3a;
  border-radius: 10px;
  background: #fff8f6;
}
.settings-danger-zone h2 { margin-top: 0; color: #7f2525; }
.settings-danger-zone input[type='text'] { width: min(100%, 560px); }
.settings-danger-zone h3 { font-size: 17px; line-height: 1.5; margin: 24px 0 8px; }

/* ---- モーダル・トースト ---- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(0, 0, 0, 0.4);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow: auto;
  padding: 24px;
}
.modal h2 { font-size: 20px; line-height: 1.5; margin-bottom: 16px; }
.modal .modal-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.modal textarea {
  width: 100%; min-height: 96px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  font-family: inherit; font-size: inherit; line-height: 1.5;
}
.modal input[type='text'] {
  width: 100%; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  font-family: inherit; font-size: 16px;
}
.modal .field { margin: 16px 0; }
.modal .field > label { display: block; font-weight: 700; margin-bottom: 4px; font-size: 16px; }

.history-item { border-left: 3px solid var(--rule); padding: 8px 0 8px 16px; margin: 8px 0; }
.history-item .who { font-size: 14px; color: var(--muted); }

#toast {
  position: fixed; left: 50%; bottom: 180px; transform: translateX(-50%);
  z-index: 200;
  background: var(--ink); color: #fff;
  padding: 12px 24px; border-radius: 8px;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* ---- ふりがなの浮きボタン ---- */
#furigana-pop {
  position: absolute; z-index: 95;
  display: flex; flex-wrap: wrap; gap: 4px;
  max-width: calc(100vw - 16px);
}
#furigana-pop .btn { min-height: 40px; font-size: 15px; background: #fff; }
#furigana-pop .btn.primary { background: var(--link); color: #fff; }
.translation-modal-body .hint { color: var(--muted); font-size: 15px; }
.translation-source, .translation-result {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  margin: 12px 0;
  max-height: 180px;
  overflow-y: auto;
}
.translation-source { background: var(--head-bg); }
.translation-result { background: #fff; min-height: 56px; }
.translation-language-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.translated-text { font-size: 18px; line-height: 1.7; }
.loading-translation { color: var(--muted); }

/* ---- ドラッグ調整モード ---- */
[data-adjust] {
  translate: var(--adj-x, 0px) var(--adj-y, 0px);
  scale: var(--adj-scale, 1);
}
body.adjusting [data-adjust] {
  outline: 2px dashed #b26a00;
  outline-offset: 2px;
  cursor: move;
}
body.adjusting [data-adjust].adj-selected { outline: 3px solid #b26a00; }
.adjust-panel {
  position: fixed; right: 16px; top: 80px; z-index: 110;
  width: 300px;
  background: #fff;
  border: 2px solid #b26a00;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  padding: 16px;
  font-size: 15px;
}
.adjust-panel h2 { font-size: 17px; line-height: 1.5; margin-bottom: 8px; }
.adjust-panel .row { display: flex; align-items: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.adjust-panel input[type='number'] {
  width: 80px; min-height: 40px; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: 8px; font-size: 15px;
}
.adjust-panel input[type='text'] {
  width: 100%; min-height: 40px; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: 8px; font-size: 15px;
}
.adjust-panel .btn { min-height: 40px; padding: 4px 12px; font-size: 15px; }
.adjust-panel .muted { color: var(--muted); }

/* ---- 汎用 ---- */
.muted { color: var(--muted); }
.error-text { color: var(--error); font-size: 15px; }
.center { text-align: center; }
.loading { color: var(--muted); padding: 48px; text-align: center; }
@media (max-width: 1050px) {
  .notebook {
    margin-right: 0;
    margin-left: 0;
    padding-right: 44px;
    padding-left: 44px;
  }
}

@media (max-width: 720px) {
  .notebook-page-nav { width: 40px; height: 76px; font-size: 34px; }
  .notebook-page-prev { left: 2px; }
  .notebook-page-next { right: 2px; }
}