:root {
  --bg: #fbfaf7;
  --text: #2a2926;
  --muted: #9a968d;
  --line: #e9e6df;
  --hover: #f0ede6;
  --accent: #6b6458;
  --find: rgba(255, 190, 0, 0.28);
  --find-current: rgba(255, 140, 0, 0.55);
  --scroll: rgba(0, 0, 0, 0.18);       /* スクロールバーのつまみ */
  --scroll-hover: rgba(0, 0, 0, 0.32);
  --desk: #f1efea;                       /* 紙の外（机） */
  --paper: #fdfcfa;                      /* 紙 */
  --paper-edge: #e3e0d8;                 /* 紙のふち */
  --paper-sub: #fbf5e4;                  /* 資料用の紙（少し黄みがかった、カードや付箋の色） */
  --paper-sub-edge: #e5d9b8;
  --done: #c8553d;                       /* 脱稿の印（紙の上端の帯・一覧の「脱稿」）。朱色 */
  --danger: #c0392b;                     /* 注意書きの赤字（このアプリについて の注意事項） */
  --link: #3f78b5;                       /* 資料の中の URL の下線 */
  --text-size: 17px;                     /* 本文の文字サイズ。JS が .app に設定で上書きする */
  /* 紙の幅と1行の幅。文字サイズを変えても紙は動かず、1行の字数が変わるだけにする
     （17px で全角38字。em で書くとタイトルでは1.4倍で計算されてずれるので px で固定） */
  --column: 646px;
  --page: calc(var(--column) + 96px);    /* 左右に 48px ずつ余白 */
  --panel-width: 260px;

  /* Windows の「Yu Gothic」は標準の太さだと細くかすれて見えるので、Medium を先に指定する（Mac には無いので無視される）。
     Mac はヒラギノ、Windows は游ゴシック Medium → メイリオ の順に使われる */
  --font-sans: "Hiragino Sans", "Noto Sans JP", "Yu Gothic Medium", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans CJK JP", sans-serif;
  --font-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
  --font-text: var(--font-sans); /* 本文とタイトルのフォント。切替でここだけ差し替える */
}

/* 暗い表示。設定（右下の ◐☀☾）が「自動」なら OS に合わせ、「ダーク」なら常にこれ、「ライト」なら使わない。
   同じ値を2か所に書いている（メディアクエリの中と外は1つのルールにまとめられないため）。色を変えるときは両方 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1c1a;
    --text: #dddad3;
    --muted: #77736b;
    --line: #2e2d2a;
    --hover: #282825;
    --accent: #b5ad9f;
    --find: rgba(255, 200, 60, 0.20);
    --find-current: rgba(255, 150, 40, 0.45);
    --scroll: rgba(255, 255, 255, 0.16);
    --scroll-hover: rgba(255, 255, 255, 0.30);
    --desk: #161614;
    --paper: #20201e;
    --paper-edge: #2d2c29;
    --paper-sub: #25231c;
    --paper-sub-edge: #3a362a;
    --done: #d9785f;
    --danger: #e8786a;
    --link: #7eaee0;
    color-scheme: dark; /* ブラウザの部品（ラジオボタン・スクロールバーなど）も暗い色で描かせる */
  }
}
:root[data-theme="dark"] {
  --bg: #1c1c1a;
  --text: #dddad3;
  --muted: #77736b;
  --line: #2e2d2a;
  --hover: #282825;
  --accent: #b5ad9f;
  --find: rgba(255, 200, 60, 0.20);
  --find-current: rgba(255, 150, 40, 0.45);
  --scroll: rgba(255, 255, 255, 0.16);
  --scroll-hover: rgba(255, 255, 255, 0.30);
  --desk: #161614;
  --paper: #20201e;
  --paper-edge: #2d2c29;
  --paper-sub: #25231c;
  --paper-sub-edge: #3a362a;
  --done: #d9785f;
  --danger: #e8786a;
  --link: #7eaee0;
  color-scheme: dark;
}
:root[data-theme="light"] {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
}

.app {
  display: grid;
  grid-template-columns: 1fr var(--panel-width);
  height: 100%;
}

/* 資料を開いているときは紙を資料用の色にする（紙の背景は --paper を参照しているので、差し替えるだけでいい） */
.app.is-sub {
  --paper: var(--paper-sub);
  --paper-edge: var(--paper-sub-edge);
}

/* 完成した作品：紙の上端に朱色の細い帯（判子の朱肉のイメージ）。紙と文字の色は変えない。
   紙の色を変える案は、ライトだと元の紙がほぼ白で違いが見えず、資料の生成りとも被るのでやめた（10/24）。
   帯は紙（背景のグラデーション）と同じ幅・同じ位置。背景と同じくスクロールしても動かない */
.app.is-done .sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--page-l);
  width: var(--page-w);
  height: 4px;
  background: var(--done);
  pointer-events: none; /* 本文のクリックを邪魔しない */
}

.app.font-serif {
  --font-text: var(--font-serif);
}

/* パネルを畳んだら実質1カラム */
.app.panel-hidden {
  grid-template-columns: 1fr 0;
}
.app.panel-hidden .panel {
  visibility: hidden;
}
/* 「パネルを開く」は畳んでいるときだけ */
.app:not(.panel-hidden) .panel-open-btn {
  display: none;
}

/* ---------- メイン（紙 / ステータス） ---------- */

.main {
  background: var(--desk);
  display: grid;
  grid-template-rows: auto 1fr auto auto; /* 検索バー / 紙 / 画像の帯（資料のときだけ） / ステータス */
  min-width: 0;
  min-height: 0;
}

/* ---------- 紙（タイトル＋本文） ---------- */

/* grid は hidden の要素を1マスとして数えない。段を明示しないと、検索バーが隠れているとき
   紙が1段目（auto）に、ステータスが2段目（1fr）に詰められて、ステータスが宙に浮く */
.findbar { grid-row: 1; }
.sheet   { grid-row: 2; }
.attach  { grid-row: 3; }
.status  { grid-row: 4; }

.sheet {
  position: relative; /* 自前のカーソルとミラーをこの中に重ねる */
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  overflow: hidden;            /* 何があっても下のステータス欄に覆いかぶさらない */
  container-type: size;        /* 中の要素が cqh（この紙の高さに対する%）を使えるようにする */
  padding-top: 8vh;
  font-size: var(--text-size);

  /* 紙：文字の列の範囲に、地より明るい帯と両端の細い線を描く。
     textarea は左右いっぱいの透明な箱なので、その後ろの .sheet の背景に描く。
     背景はスクロールしても動かないので、紙の上を文字が流れていく見た目になる。
     狭い画面では左右 16px を残して紙を縮める */
  --page-w: min(100% - 32px, var(--page));
  --page-l: calc(50% - var(--page-w) / 2);
  --page-r: calc(50% + var(--page-w) / 2);
  background: linear-gradient(to right,
    transparent var(--page-l),
    var(--paper-edge) var(--page-l), var(--paper-edge) calc(var(--page-l) + 1px),
    var(--paper) calc(var(--page-l) + 1px), var(--paper) calc(var(--page-r) - 1px),
    var(--paper-edge) calc(var(--page-r) - 1px), var(--paper-edge) var(--page-r),
    transparent var(--page-r));
}

/* 本文とタイトルは「左右いっぱいの箱」にして、文字の列だけを余白で中央に寄せる。
   こうするとスクロールバーが本文の真横ではなく、VS Code のように領域の右端に出る。
   % の余白は親（.sheet）の幅が基準。狭い画面でも最低 2em は空ける */
.title,
.editor {
  padding-left: max(34px, calc((100% - var(--column)) / 2));
  padding-right: max(34px, calc((100% - var(--column)) / 2));
}

.title,
.editor {
  border: none;
  outline: none;
  background: transparent;
  color: inherit;
  font-family: var(--font-text);
}

.title {
  width: 100%;
  margin-bottom: 1.2em;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 1.4em;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.editor {
  flex: 1;
  width: 100%;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 40vh; /* 下を広く空けて、最終行も画面中央付近で書ける */
  resize: none;
  font-size: 1em;
  line-height: 1.9;
  letter-spacing: 0.02em;
}

/* 標準のカーソルは透明にして、自前のカーソル（.caret）を重ねて描く。
   標準カーソル自体は残っているので、IME の変換候補ウィンドウは正しい位置に出る。
   検索のハイライト（.find-layer）は textarea の「裏」に敷くので、textarea は1つ上の層に置く */
.editor {
  caret-color: transparent;
  position: relative;
  z-index: 1;
  /* スクロールバーの幅を最初から確保しておく。これがないと、文章がはみ出してスクロールバーが出た瞬間に
     中身の幅が狭くなって全行の折り返しが変わり、カーソル計算用のミラーともずれる */
  scrollbar-gutter: stable;
}

.title::placeholder,
.editor::placeholder {
  color: var(--muted);
}

/* ---------- スクロールバー ---------- */
/* 細く、背景になじむ色に。本文はふだん隠しておき、ホバーしたときだけ出す（VS Code と同じ） */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}
.editor {
  scrollbar-color: transparent transparent;
}
.editor:hover,
.editor:focus-within:hover {
  scrollbar-color: var(--scroll) transparent;
}

/* Safari など、scrollbar-color に未対応のブラウザ用（対応しているブラウザではこちらは無視される） */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  border: 3px solid transparent;  /* つまみを細く見せつつ、つかめる幅は10pxのまま */
  border-radius: 10px;
  background: var(--scroll) padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-hover) padding-box;
}
.editor::-webkit-scrollbar-thumb {
  background: transparent;
}
.editor:hover::-webkit-scrollbar-thumb {
  background: var(--scroll) padding-box;
}

/* ---------- 資料の中の URL（links.js） ---------- */

/* 検索のハイライトと同じく、透明な textarea の裏に下線を敷く */
.link-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.link-mark {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--link);
}
/* カーソルが URL の中にあるときの「↗ 開く」の吹き出し（links.js） */
.link-tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 360px;
  padding: 3px 4px 3px 3px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  writing-mode: horizontal-tb; /* 縦書きのときも吹き出しの中は横書き */
}
.link-tip[hidden] {
  display: none;
}
.link-tip-open {
  flex: none;
  padding: 2px 8px;
  border: none;
  border-radius: 4px;
  background: var(--hover);
  color: var(--link);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.link-tip-open:hover {
  background: var(--line);
}
.link-tip-url {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}
/* ⌘/Ctrl を押しながら URL の上にいるときだけ、指のカーソル */
.editor.over-link {
  cursor: pointer;
}

/* ---------- 資料の目印 ---------- */

/* どの作品の資料か（タイトルの上）。紙の上の文字の列と左端をそろえる */
.crumb {
  position: absolute;
  z-index: 2;
  top: max(10px, calc(8vh - 30px));
  left: max(34px, calc((100% - var(--column)) / 2));
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.crumb[hidden] {
  display: none;
}
.crumb-parent {
  padding: 1px 4px;
  margin-left: -4px;
  border: none;
  border-radius: 3px;
  background: none;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.crumb-parent:hover,
.crumb-parent:focus-visible {
  background: var(--hover);
  outline: none;
}
.app.vertical .crumb {
  top: 24px;
  left: 28px;
}

/* 一覧の資料の行の頭に付ける「カード」のアイコン。色は文字色に合わせる（mask で形だけ借りる） */
.memo-icon {
  flex: none;
  width: 12px;
  height: 12px;
  margin-right: 5px;
  background: currentColor;
  opacity: 0.7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2.5' y='2.5' width='11' height='11' rx='1.5' fill='none' stroke='black' stroke-width='1.3'/%3E%3Cpath d='M5 6h6M5 8.5h6M5 11h3.5' stroke='black' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2.5' y='2.5' width='11' height='11' rx='1.5' fill='none' stroke='black' stroke-width='1.3'/%3E%3Cpath d='M5 6h6M5 8.5h6M5 11h3.5' stroke='black' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- 自前のカーソル（caret.js） ---------- */

/* カーソル位置を測るための見えない複製。textarea とまったく同じ場所・大きさに重ねる */
.caret-mirror {
  position: absolute;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

.caret {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 2px;
  background: var(--text);
  border-radius: 1px;
  pointer-events: none;
  /* 標準カーソルとほぼ同じ周期。steps(1) で、ふわっとではなくパチッと点滅させる */
  animation: caret-blink 1.06s steps(1, end) infinite;
}
.caret.vertical {
  width: auto;
  height: 2px;
}
/* 打っている間は点灯しっぱなし */
.caret.solid {
  animation: none;
}
.caret.hidden {
  display: none;
}

@keyframes caret-blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
}

/* ---------- 検索・置換（find.js） ---------- */

.findbar {
  width: 100%;
  max-width: 40em;
  margin: 10px auto 0;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  color: var(--muted);
}

.find-row {
  display: flex;
  align-items: center;
  gap: 2px;
}
.find-row[hidden] {
  display: none; /* display:flex が hidden 属性に勝ってしまうので明示（前にも踏んだやつ） */
}
.find-row + .find-row {
  margin-top: 4px;
}

.find-input {
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  outline: none;
  background: var(--hover);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.find-input:focus {
  border-color: var(--accent);
}
.findbar.no-match #findInput {
  border-color: #c96a5b;
}

.find-count {
  min-width: 4.5em;
  padding: 0 6px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.find-btn {
  padding: 3px 6px;
  border: none;
  border-radius: 3px;
  background: none;
  color: inherit;
  font: inherit;
  line-height: 1.2;
  cursor: pointer;
}
.find-btn:hover,
.find-btn:focus-visible {
  color: var(--text);
  background: var(--hover);
  outline: none;
}
/* オン・オフのあるボタン（Ａa あア 活用） */
.find-opt[aria-pressed="true"] {
  color: var(--bg);
  background: var(--accent);
}
.find-expand[aria-expanded="true"] {
  transform: rotate(90deg);
}
.find-text-btn {
  font-size: 12px;
}
.find-sep {
  width: 1px;
  height: 14px;
  margin: 0 4px;
  background: var(--line);
}
.find-indent {
  width: 26px;
  flex: none;
}

.find-note {
  margin: 4px 0 0 28px;
  font-size: 11px;
}
.find-note:empty {
  display: none;
}

/* ハイライト：textarea の裏に敷く色の矩形 */
.find-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.find-mark {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 2px;
  background: var(--find);
}
.find-mark.current {
  background: var(--find-current);
}

/* ---------- タイプライタースクロール ---------- */
/* 1行目や最終行でも中央に来られるよう上下（縦書きは左右）に大きな余白をとるが、
   その大きさは入力欄の実際の高さから caret.js が計算して入れる（applyTypewriterPadding） */

/* ---------- 縦書き ---------- */
/* 右上から書き始めて左へ進む。タイトルは一番右の列に立てる */

.app.vertical .sheet {
  /* 縦書きは文字の列が横に流れていくので、帯ではなく領域全体を1枚の紙にする */
  width: auto;
  margin: 16px 16px 0;
  border: 1px solid var(--paper-edge);
  border-radius: 4px;
  background: var(--paper);
  flex-direction: row-reverse;
  padding: 6vh 4vw 2vh;
}

.app.vertical .title {
  padding: 0;
  writing-mode: vertical-rl;
  width: 2em;
  height: 100%;
  margin: 0 0 0 1.5em;
}

.app.vertical .editor {
  writing-mode: vertical-rl;
  width: auto;
  min-width: 0; /* flex の子は既定で「中身より縮まない」。これがないと余白ぶんパネルの下まではみ出す */
  height: 100%;
  padding: 0 0 0 30vw; /* 縦書きでは「最終行の先」は左側 */
}

/* ---------- 資料の画像の帯（images.js） ---------- */

.attach[hidden] {
  display: none;
}
.attach {
  min-width: 0;
  padding: 8px 16px 0;
}
/* 紙と同じ幅にそろえる */
.attach-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(100%, var(--page));
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: thin;
}
.attach-list {
  display: flex;
  gap: 6px;
}
.attach-thumb {
  flex: none;
  width: 72px;
  height: 54px;
  padding: 0;
  border: 1px solid var(--paper-edge);
  border-radius: 4px;
  overflow: hidden;
  background: var(--paper);
  cursor: zoom-in;
}
.attach-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 縦長・横長の画像も枠いっぱいに（はみ出しは切る）。全体は拡大表示で見る */
  display: block;
}
.attach-thumb:hover,
.attach-thumb:focus-visible {
  border-color: var(--accent);
  outline: none;
}
.attach-add {
  flex: none;
  padding: 4px 10px;
  border: 1px dashed var(--paper-sub-edge);
  border-radius: 4px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.attach:not(.empty) .attach-add {
  height: 54px; /* サムネイルと同じ高さの「＋」の枠にする */
}
.attach-add:hover,
.attach-add:focus-visible {
  color: var(--text);
  border-color: var(--accent);
  outline: none;
}
/* 縦書きは紙が左右いっぱいに広がるので、帯も紙の左端にそろえる */
.app.vertical .attach-inner {
  width: 100%;
}
/* 説明は画像が0枚のときだけ。貼り方が分かったあとは邪魔なので消す */
.attach-hint {
  flex: none;
  font-size: 11px;
  color: var(--muted);
}
.attach:not(.empty) .attach-hint {
  display: none;
}

/* 拡大表示 */
.image-viewer {
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  padding: 0;
  border: none;
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.image-viewer::backdrop {
  background: rgba(0, 0, 0, 0.6);
}
.viewer-img {
  display: block;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px - 44px);
  margin: 0 auto;
  object-fit: contain;
}
.viewer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 44px;
  padding: 0 10px 0 14px;
  font-size: 12px;
}
.viewer-info {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}
.viewer-actions {
  display: flex;
  flex: none;
  gap: 4px;
}
.viewer-actions button {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: none;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.viewer-actions button:disabled {
  opacity: 0.35;
  cursor: default;
}
.viewer-actions button:not(:disabled):hover {
  background: var(--hover);
}

/* ---------- ステータス ---------- */

.status {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  padding: 8px 16px 10px;
  font-size: 12px;
  color: var(--muted);
}

.count {
  margin-right: 8px;
  font-variant-numeric: tabular-nums; /* 数字の幅を揃えて、打つたびにガタつかないように */
}

/* 書き出しボタン（右下の文字だけのボタン） */
.status-text-btn {
  margin-left: 6px;
  padding: 3px 8px;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
/* 表示の明るさの切り替え（◐ 自動 / ☀ ライト / ☾ ダーク）。記号1つだけ */
.theme-btn {
  min-width: 2em;
  font-size: 13px;
  line-height: 1;
}
.status-text-btn:hover,
.status-text-btn:focus-visible {
  color: var(--text);
  background: var(--hover);
  outline: none;
}

/* 2択の設定。両方並べて、今選ばれている方だけ濃く・背景つきにする。
   選ばれていない方は薄くして、右下が賑やかにならないようにする */
.seg {
  display: inline-flex;
  margin-left: 10px;
  padding: 2px;
  border-radius: 5px;
  background: var(--hover);
}
.seg-btn {
  padding: 2px 8px;
  border: none;
  border-radius: 3px;
  background: none;
  color: var(--muted);
  font: inherit;
  opacity: 0.7;
  cursor: pointer;
}
.seg-btn:hover {
  opacity: 1;
}
.seg-btn[aria-checked="true"] {
  color: var(--text);
  background: var(--bg);
  opacity: 1;
  cursor: default;
}
.seg-btn:focus-visible {
  outline: 1px solid var(--accent);
}

/* 文字サイズ： A−  17  A＋ */
.size .seg-btn {
  opacity: 1;
}
.size-sign {
  font-size: 0.85em;
  margin-left: 1px;
}
.size-value {
  min-width: 2.6em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.size-btn:disabled {
  opacity: 0.3;
  cursor: default;
}


/* ---------- パネル（上：類語 / 下：メモ一覧） ---------- */

.panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--line);
  font-size: 14px;
  overflow: hidden; /* スクロールは上段・下段それぞれの中でさせる */
}

/* 上段は中身に合わせて伸びるが、パネルの半分まで。あふれたら上段の中だけスクロール */
.panel-top {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 0 1 auto;
  max-height: 45%;
  min-height: 140px;
  padding: 6vh 20px 16px;
}

.search {
  width: 100%;
  padding: 6px 0;
  border: none;
  border-bottom: 1px solid var(--line);
  outline: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15px;
}
.search:focus {
  border-bottom-color: var(--accent);
}

.results {
  min-height: 0;
  overflow-y: auto;
}

.empty {
  color: var(--muted);
  margin: 0;
}

/* 見出しなし、区切り線だけ */
.group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 0;
}
.group + .group {
  border-top: 1px solid var(--line);
}

.candidate {
  padding: 3px 8px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.candidate:hover,
.candidate:focus-visible {
  background: var(--hover);
  outline: none;
}

/* 選んだときの語。押すと元に戻る。破線の枠で「ほかの候補とは役割が違う」ことを見せる */
/* 連想（類語の下）。類語より一段控えめに見せる。押すと本文は変えずにその語で引き直す */
.assoc {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.assoc-toggle {
  padding: 2px 0;
  border: none;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.assoc-toggle:hover {
  color: var(--text);
}
.assoc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 4px;
  padding: 6px 0 2px;
}
.assoc-label {
  flex: 0 0 100%;
  color: var(--muted);
  font-size: 11px;
}
.candidate.assoc-word {
  color: var(--muted);
  font-size: 0.92em;
}
.candidate.assoc-word:hover,
.candidate.assoc-word:focus-visible {
  color: var(--text);
}
.assoc-note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11px;
}
/* 連想をたどってきたとき：戻る と、今見ている語 */
.candidate.trail-back {
  color: var(--muted);
}
.candidate.trail-word {
  font-weight: 600;
}
.lookup-note {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}
.origin-row {
  padding-bottom: 6px;
}
.candidate.origin {
  border: 1px dashed var(--line);
  color: var(--muted);
}
.candidate.origin::before {
  content: '元 ';
  font-size: 10px;
  opacity: 0.8;
}

/* 今本文に入っている候補 */
.candidate.current {
  background: var(--text);
  color: var(--bg);
}
.candidate.current:hover,
.candidate.current:focus-visible {
  background: var(--accent);
  color: var(--bg);
}
.candidate.origin.current {
  border-color: transparent;
}

/* 下段は残りの高さを全部使う */
.panel-memos {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0; /* これがないと flex の子はスクロールせずに親を突き破る */
  border-top: 1px solid var(--line);
}

.memos-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 6px 20px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.icon-btn {
  padding: 2px 7px;
  border: none;
  border-radius: 3px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.icon-btn:hover,
.icon-btn:focus-visible {
  color: var(--text);
  background: var(--hover);
  outline: none;
}

.memo-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 8px 16px;
}

/* ---------- メモ一覧の1行 ---------- */

.memo-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 4px 5px 12px;
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
}
.memo-item:hover {
  color: var(--text);
  background: var(--hover);
}
.memo-item:focus-visible {
  outline: 1px solid var(--accent);
}

/* メインどうしの間に少し間をあけて、かたまりに見せる */
.memo-item.main:not(:first-child) {
  margin-top: 6px;
}

/* 資料：字下げして、左に細い線で「ぶら下がっている」ことを見せる */
.memo-item.sub {
  padding-left: 28px;
  font-size: 12px;
}
.memo-item.sub::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--line);
}

/* 今エディタで開いているメモ：背景＋左の太線＋濃い文字でハッキリ */
.memo-item.active {
  color: var(--text);
  background: var(--hover);
  font-weight: 600;
}
.memo-item.active::after {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  border-left: 3px solid var(--accent);
  border-radius: 2px;
}

/* 資料を開いているとき、その親のメイン：文字だけ濃く（どの作品の資料か分かるように） */
.memo-item.current-parent {
  color: var(--text);
}

/* その場で開いている資料 */
.memo-item.pinned {
  color: var(--text);
}

.memo-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 完成した作品の印 */
.memo-done {
  flex: none;
  margin-left: 6px;
  padding: 0 5px;
  border: 1px solid var(--done);
  border-radius: 3px;
  color: var(--done);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
}
/* 完成ボタン（✓）。ほかのボタンと同じく、行にマウスを乗せたときだけ出る */
.memo-item .memo-act.done-act {
  font-size: 11px;
}

/* 文字数。ラベルより目立たせない。桁がそろうように等幅数字 */
.memo-count {
  flex: none;
  margin-left: 6px;
  font-size: 11px;
  font-weight: normal;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  opacity: 0.8;
}

/* 行の右端の小さいボタン（開いて見る・削除）。普段は消しておき、ホバーで出す */
.memo-act {
  padding: 1px 5px;
  border: none;
  border-radius: 3px;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: normal;
  line-height: 1.2;
  cursor: pointer;
  opacity: 0;
  pointer-events: none; /* 見えないボタンを誤クリックさせない（前回自分で踏んだ罠） */
}
.memo-item:hover .memo-act,
.memo-item:focus-within .memo-act,
.memo-item.pinned .memo-act.toggle {
  opacity: 0.6;
  pointer-events: auto;
}
.memo-act:hover {
  opacity: 1 !important;
}

/* 「＋ 資料」の行 */
.memo-add-sub {
  display: block;
  width: 100%;
  padding: 4px 4px 4px 28px;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  opacity: 0.7;
}
.memo-add-sub:hover,
.memo-add-sub:focus-visible {
  opacity: 1;
  color: var(--text);
  background: var(--hover);
  outline: none;
}

/* その場で開いた資料の本文 */
.ref-body {
  background: var(--paper-sub) !important; /* 一覧の中で開いた資料も、資料用の紙の色 */
  display: block;
  width: calc(100% - 28px);
  height: 30vh;
  margin: 2px 0 6px 28px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  outline: none;
  resize: vertical; /* 高さは自分で引っぱって調整できる */
  background: transparent;
  color: var(--text);
  font-family: var(--font-text);
  font-size: 13px;
  line-height: 1.8;
}
.ref-body:focus {
  border-color: var(--accent);
}

.hint {
  margin: 0;
  padding: 8px 20px 12px;
  color: var(--muted);
  font-size: 11px;
  opacity: 0.7;
}

/* パネルの一番下：ヒントと「タコエディタについて」 */
.panel-foot {
  padding: 0 20px 12px;
}
.panel-foot .hint {
  padding: 8px 0 4px;
}
.about-link {
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  opacity: 0.7;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.about-link:hover,
.about-link:focus-visible {
  opacity: 1;
  color: var(--text);
  outline: none;
}

/* ---------- 完成（done.js） ---------- */
.done-dialog {
  width: min(400px, calc(100vw - 32px));
  text-align: center;
}
.done-tako {
  display: block;
  margin: 4px auto 6px;
}
/* 「脱稿！」の画面だけは、ライトでもダークでも白い紙にする（書き上げた原稿を清書した紙のイメージ）。
   色の変数をこの画面の中だけ明るい側の値に差し替えるので、中のボタンや文字もそのまま明るい配色になる。
   タコのアニメも紺1色のまま使える（暗い画面用の色違いが要らない） */
.done-dialog.is-celebrate {
  --bg: #ffffff;
  --text: #2a2926;
  --muted: #9a968d;
  --line: #e9e6df;
  --hover: #f0ede6;
  --accent: #6b6458;
  --link: #3f78b5;
  color-scheme: light;
}
.done-title {
  margin: 0 0 4px;
  font-size: 20px;
}
.done-title.small {
  font-size: 15px;
}
.done-work {
  margin: 0;
  font-size: 14px;
}
.done-stats {
  margin: 4px 0 14px;
  font-size: 13px;
  color: var(--muted);
}
.done-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.done-actions button {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.done-actions button:hover {
  background: var(--hover);
}
/* 確認の画面は最初「キャンセル」にフォーカスがある。キーボードで操作する人に見えるよう枠を出す */
.done-actions button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* 説明の文のあとにボタンが来るとき（確認の画面）は間をあける */
.done-note + .done-actions {
  margin-top: 16px;
}
.done-actions .done-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--bg);
}
/* 塗りつぶしのボタンのマウスオーバー。上の「button:hover」のほうが詳細度が高く（クラス2つ＋要素1つ）、
   放っておくと背景だけ暗い --hover に変わって、暗い文字（--bg）が背景に溶けて読めなくなっていた（10/24）。
   色は --accent を文字色側へ少し寄せる。ライトでは少し濃く、ダークでは少し明るくなる */
.done-actions .done-primary:hover {
  border-color: color-mix(in srgb, var(--accent) 80%, var(--text));
  background: color-mix(in srgb, var(--accent) 80%, var(--text));
}
.done-note {
  margin: 14px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
}
.done-cheer {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
}
.done-cheer a {
  margin-left: 6px;
  color: var(--link);
  white-space: nowrap; /* 「応援／する」と途中で折り返さない */
}
.done-cheer-off {
  margin-left: 10px;
  white-space: nowrap;
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- このアプリについて（about.js） ---------- */
.about-dialog {
  width: min(520px, calc(100vw - 32px));
}
.about-body {
  max-height: min(70vh, 640px);
  overflow-y: auto;
  margin: 0 -22px 14px;
  padding: 0 22px;
  font-size: 13px;
  line-height: 1.7;
}
.about-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.about-icon {
  flex: none;
  border-radius: 11px;
}
.about-name {
  font-size: 18px;
  font-weight: 600;
}
.about-version {
  font-size: 12px;
  color: var(--muted);
}
.about-lead {
  margin: 12px 0 0;
}
.about-section {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.about-h {
  margin: 0 0 4px;
  font-size: 13px;
}
.about-section p {
  margin: 4px 0;
}
.about-muted {
  color: var(--muted);
}
/* 注意事項（原稿が消える条件）は赤字 */
.about-warn {
  color: var(--danger);
}
.about-section a {
  color: var(--link);
}
.about-keys {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.about-keys th,
.about-keys td {
  padding: 3px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.about-keys th {
  width: 45%;
  padding-right: 12px;
  font-weight: normal;
  color: var(--muted);
}
.about-license {
  margin: 6px 0;
}
.about-license summary,
.about-full summary {
  cursor: pointer;
}
.about-license > *:not(summary) {
  margin-left: 1em;
}
.about-pre {
  max-height: 240px;
  overflow: auto;
  margin: 6px 0;
  padding: 8px 10px;
  border-radius: 4px;
  background: var(--hover);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- 書き出し（export.js） ---------- */

.export-dialog {
  width: min(420px, calc(100vw - 32px));
  padding: 20px 22px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.export-dialog::backdrop {
  background: rgba(0, 0, 0, 0.35);
}
.export-heading {
  margin: 0 0 14px;
  font-size: 15px;
}
.export-field {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0 0 14px;
  padding: 0;
  border: none;
}
.export-field legend {
  width: 100%;
  margin-bottom: 6px;
  padding: 0;
  font-size: 12px;
  color: var(--muted);
}
.export-field label {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.export-field input {
  accent-color: var(--accent);
  margin: 0;
}
.export-note {
  min-height: 2.6em;
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}
.export-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.export-actions button {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: none;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.export-actions .export-ok {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--bg);
}
/* 書き出しのボタンにはマウスオーバーの変化がなかったので、完成の画面と揃える */
.export-actions button:hover {
  background: var(--hover);
}
.export-actions .export-ok:hover {
  border-color: color-mix(in srgb, var(--accent) 80%, var(--text));
  background: color-mix(in srgb, var(--accent) 80%, var(--text));
}
.export-actions button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* バックアップ欄（書き出しダイアログの下） */
.backup-box {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.backup-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.backup-heading {
  margin: 0;
  font-size: 13px;
}
.backup-last {
  font-size: 12px;
  color: var(--muted);
}
/* しばらくバックアップしていないときだけ、少し目立たせる（赤にはしない。急かしすぎない） */
.backup-last.stale {
  color: var(--accent);
  font-weight: 600;
}
.backup-desc {
  margin: 6px 0 10px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}
.backup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.backup-actions button {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.backup-actions button:hover {
  background: var(--hover);
}
.backup-actions button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* 自動バックアップ（書き出しダイアログの中） */
.auto-box {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.auto-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.auto-label {
  font-size: 13px;
  font-weight: 600;
}
.auto-status {
  font-size: 12px;
  color: var(--muted);
}
.auto-status.on {
  color: var(--accent);
  font-weight: 600;
}
.auto-status.warn {
  color: #b5562b;
  font-weight: 600;
}
/* 右下の「自動バックアップ停止中」。目に入るが、赤で騒ぎすぎない */
.status-warn {
  color: #b5562b;
}
/* 原稿が空っぽのときの「戻し方」の案内（紙の下の方に薄く） */
.restore-hint[hidden] {
  display: none;
}
.restore-hint {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 2;
  width: min(100% - 64px, var(--column));
  transform: translateX(-50%);
  padding: 12px 14px;
  border: 1px dashed var(--paper-edge);
  border-radius: 6px;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.7;
  pointer-events: none; /* 案内の上でも、下の紙をクリックして書き始められるように。ボタンだけ押せる */
  writing-mode: horizontal-tb;
}
.restore-hint p {
  margin: 0 0 6px;
}
.restore-hint-btn {
  pointer-events: auto;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.restore-hint-btn:hover {
  background: var(--hover);
}
.backup-dest {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--muted);
}
.restore-summary {
  margin: 0 0 14px;
  font-size: 14px;
}

/* お知らせ */
.toast {
  position: fixed;
  left: 50%;
  bottom: 56px;
  z-index: 10;
  padding: 8px 14px;
  border-radius: 6px;
  background: var(--text);
  color: var(--bg);
  font-size: 13px;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* 普段はクリックを素通りさせる（透明なトーストが下の操作を邪魔しないように）。
   ボタン付きで出ているときだけ押せるようにする */
.toast.show.has-action {
  pointer-events: auto;
}
.toast.has-action {
  display: flex;
  align-items: center;
  gap: 12px;
}
.toast-action {
  padding: 2px 10px;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.toast-close {
  margin-left: -4px;
  padding: 0 4px;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  opacity: 0.7;
  cursor: pointer;
}
.toast-close:hover,
.toast-close:focus-visible {
  opacity: 1;
  outline: none;
}
.toast-action:hover,
.toast-action:focus-visible {
  background: rgba(127, 127, 127, 0.25);
  outline: none;
}

/* ---------- 印刷（PDF） ---------- */
/* 画面では隠しておき、印刷のときだけアプリを隠して印刷用の中身を出す */

.print-area {
  display: none;
}

@media print {
  @page {
    size: A4;
    margin: 20mm;
  }
  html,
  body {
    height: auto;
    background: #fff;
    color: #000;
  }
  .app,
  .toast,
  .export-dialog {
    display: none !important;
  }
  .print-area {
    display: block;
    font-family: var(--font-sans);
    font-size: 10.5pt;
    line-height: 1.8;
    color: #000;
  }
  .print-area.serif {
    font-family: var(--font-serif);
  }
  .print-area h1 {
    margin: 0 0 1.5em;
    font-size: 16pt;
  }
  .print-area h2 {
    margin: 0 0 1em;
    font-size: 13pt;
  }
  .print-body {
    white-space: pre-wrap;   /* 改行・行頭の字下げをそのまま出す */
    overflow-wrap: anywhere; /* 長い URL でページからはみ出さない */
  }
  /* 資料はそれぞれ新しいページから */
  .print-ref {
    break-before: page;
  }
  /* 資料の画像：本文の後ろに1枚ずつ。ページの途中で切れないように */
  .print-images img {
    display: block;
    max-width: 100%;
    max-height: 60vh;
    margin: 1em 0;
    break-inside: avoid;
  }
  /* 縦書きでは行が右から左へ進むので、画像は「縦はページいっぱいまで、横は6割まで」 */
  html.print-vertical .print-images img {
    max-width: 60vw;
    max-height: 100%;
    margin: 0 1em;
  }
  /* 縦書き：文書全体を縦書きにする（中の要素だけだと改ページが効かない）。
     右から左へ行が進み、ページの終わりまで来たら次のページの右端から続く */
  html.print-vertical {
    writing-mode: vertical-rl;
  }
}