/* ブロック形式の記事の見た目
   =========================================================================
   ★ エディタと公開ページで同じ規則を使う。

   どちらも同じ class・同じ構造の HTML を出している:
     エディタ    client/editor/custom-blocks.jsx, columns.js
     公開ページ  services/blockRenderer.js

   なので、ここを1回書けば両方に効く。**片方だけ変えないこと。**

   読み込む条件:
     エディタ    views/partials/editor/assets.ejs（format が block のとき）
     公開ページ  views/article/*.ejs（同上）

   公開ページ側は .block-content の中だけに効く。
   包まずに書くと、Markdown の記事にも当たってしまう。
   ========================================================================= */

.block-content {
  --block-line: #ddd;
  --block-ink: #333;
  --block-muted: #666;
  --block-accent: #4a6fa5;
}
.bn-editor {
  --block-line: #ddd;
  --block-ink: #333;
  --block-muted: #666;
  --block-accent: #4a6fa5;
}

/* --- 仕様カード ---------------------------------------------------------
   色は data-kind から変数で決める。インラインの style を使わないのは、
   メディアクエリやテーマであとから上書きできるようにするため。 */

.spec-card {
  --kind-color: #4a6fa5;
  --kind-bg: #eef3fa;
  border-left: 4px solid var(--kind-color);
  background: var(--kind-bg);
  border-radius: 4px;
  padding: 8px 12px;
  margin: 4px 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.spec-card[data-kind="決定"] { --kind-color: #2a7d5f; --kind-bg: #eaf6f1; }
.spec-card[data-kind="課題"] { --kind-color: #b8532a; --kind-bg: #fdf0ea; }
.spec-card[data-kind="TODO"] { --kind-color: #8a6d1f; --kind-bg: #fdf8e6; }

.spec-card-kind {
  flex: 0 0 auto;
  min-width: 3.2em;
  font-size: 12px;
  font-weight: 700;
  color: var(--kind-color);
  padding: 2px 0;
}
.spec-card-body { flex: 1 1 auto; min-width: 0; }

/* エディタ側の本文は BlockNote が .bn-inline-content に
   white-space: pre-wrap を当てている。公開ページ側でも同じにしないと、
   打った空白や改行が詰まって「見た目が違う」ことになる。
   ＝ 見た目を合わせるには、構造と色だけでなく空白の扱いも合わせる。 */
.spec-card-body,
.block-content p,
.block-content li,
.block-content blockquote { white-space: pre-wrap; }

/* 種別を選ぶプルダウンは、触っているときだけ出る。
   出ていないときと幅が変わらないよう、見た目を寄せておく。 */
.spec-card-kind select {
  font: inherit;
  color: inherit;
  font-weight: 700;
  border: 1px solid var(--kind-color);
  border-radius: 3px;
  background: #fff;
  padding: 0 2px;
}

/* --- パラメータ ---------------------------------------------------------

   表示と編集で**同じ3つの枠**を使う。枠が同じなので、
   編集に入っても項目の位置がずれない。

     [ 項目 ] [ 値 + 単位 ] [ 備考 ]

   列の幅は固定にしてある。ブロックは1行ごとに別々の grid なので、
   1fr のような「余りを分ける」指定にすると行どうしが揃わない。 */

.game-param {
  display: grid;
  grid-template-columns: minmax(0, 11em) minmax(0, 9em) minmax(0, 1fr);
  gap: 2px 12px;
  align-items: baseline;
  padding: 5px 10px;
  margin: 2px 0;
  border-bottom: 1px solid var(--block-line, #ddd);
}
.game-param-name { font-weight: 600; }
.game-param-value-group { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.game-param-value { font-variant-numeric: tabular-nums; }
.game-param-unit { font-size: 0.85em; color: var(--block-muted, #666); }
.game-param-note { color: var(--block-muted, #666); font-size: 0.9em; }
.game-param-name.is-empty { color: #bbb; font-weight: 400; }

/* 編集中。枠は同じまま、中身が入力欄に変わる。 */
.game-param.is-editing {
  background: #f4f7fb;
  border-bottom-color: var(--block-accent, #4a6fa5);
}
.game-param.is-editing label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.game-param-label { font-size: 10px; color: var(--block-muted, #666); line-height: 1.2; }
.game-param.is-editing input {
  font: inherit;
  border: 1px solid var(--block-line, #ddd);
  border-radius: 3px;
  padding: 2px 6px;
  min-width: 0;
  width: 100%;
  background: #fff;
}
.game-param.is-editing input:focus {
  outline: 2px solid var(--block-accent, #4a6fa5);
  outline-offset: -1px;
}
/* 値と単位は横に並べる。単位のほうを狭く。 */
.game-param.is-editing .game-param-value { flex: 1 1 60%; }
.game-param.is-editing .game-param-unit { flex: 1 1 40%; font-size: inherit; color: inherit; }

/* スマホ: 3列だとはみ出すので2列にして、備考を次の行へ回す。
   編集中は入力欄のぶん幅が要るので、こちらも同じ形にする。 */
@media (max-width: 800px) {
  .game-param {
    grid-template-columns: minmax(0, 1fr) minmax(0, 9em);
    gap: 4px 10px;
  }
  .game-param-note { grid-column: 1 / -1; }
  .game-param.is-editing .game-param-value-group { flex-wrap: nowrap; }
}

/* エディタ側だけ、触れることが分かるようにしておく */
.bn-block-content .game-param:not(.is-editing):hover { background: #f7f9fc; cursor: text; }
.bn-block-content .spec-card-kind:hover { cursor: pointer; text-decoration: underline dotted; }

/* --- 2カラム（自前実装） ------------------------------------------------
   エディタ側（.bn-column-list）と公開ページ側（.column-list）の両方に当てる。

   幅の比率は --w という変数に入れている。
   data-width の指定は「変数を決めるだけ」で flex そのものは触らないので、
   スマホ用のメディアクエリが素直に上書きできる。
   （style="flex:2" のようにインラインで書くと上書きできない） */

.bn-column-list,
.column-list {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.bn-column,
.column-list .column {
  flex: var(--w, 1);
  min-width: 0;
}
.bn-column { border: 1px dashed #cfd8e6; border-radius: 4px; padding: 4px 8px; }

.bn-column[data-width="2"], .column-list .column[data-width="2"] { --w: 2; }
.bn-column[data-width="3"], .column-list .column[data-width="3"] { --w: 3; }
.bn-column[data-width="4"], .column-list .column[data-width="4"] { --w: 4; }

/* スマホでは縦に積む。
   サイトの3カラムが @media (max-width:800px) で同じことをしているので合わせた。 */
@media (max-width: 800px) {
  .bn-column-list,
  .column-list {
    flex-direction: column;
    gap: 8px;
  }
  .bn-column,
  .column-list .column {
    flex: none;
    width: 100%;
  }
}

.block-content .column { border: 1px solid #e4e9f0; border-radius: 4px; padding: 4px 10px; }

/* --- 文書の見た目（エディタと公開ページの共通規則） ---------------------

   ★ 公開ページ側を基準にする。
   公開ページは BlockNote の CSS を読まないので、そちらを正とし、
   エディタ側で BlockNote の既定を上書きして合わせる。

   BlockNote の既定は「エディタらしい見た目」で、サイトの記事の見た目とは違う:
     見出し   font-size: var(--level)   h1 は 3em、h2 は 2em
     余白     padding-inline: 54px
     フォント Inter
   これをそのまま公開ページに持ち込むと、サイトの他のページから浮く。 */

.bn-editor,
.block-content {
  font-family: system-ui, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 15px;
  line-height: 1.8;
  color: var(--block-ink, #333);
}

/* 見出し。BlockNote は font-size: var(--level) で決めているので、
   変数のほうを上書きすれば書き味を壊さずに合わせられる。 */
.bn-editor [data-content-type="heading"] { --level: 24px; padding-top: 20px; }
.bn-editor [data-content-type="heading"][data-level="2"] { --level: 19px; }
.bn-editor [data-content-type="heading"][data-level="3"] { --level: 16px; }

/* 種類を見出しに変えたときのアニメーション用の変数も揃える。
   揃えないと、切り替えの一瞬だけ元の大きさ（3em など）が見えてしまう。 */
.bn-editor [data-prev-level="1"] { --prev-level: 24px; }
.bn-editor [data-prev-level="2"] { --prev-level: 19px; }
.bn-editor [data-prev-level="3"] { --prev-level: 16px; }

.block-content h1 { font-size: 24px; margin: 20px 0 4px; }
.block-content h2 { font-size: 19px; margin: 20px 0 4px; }
.block-content h3 { font-size: 16px; margin: 16px 0 4px; }
.block-content h1:first-child { margin-top: 0; }

/* 段落の間隔。BlockNote は各ブロックに padding: 3px 0 を当てている。 */
.block-content p,
.block-content ul,
.block-content ol,
.block-content blockquote { margin: 3px 0; }
.block-content ul,
.block-content ol { padding-left: 1.5em; }
.block-content blockquote {
  border-left: 3px solid var(--block-line, #ddd);
  padding-left: 12px;
  color: var(--block-muted, #666);
}
.block-content img { max-width: 100%; }
.block-content pre {
  background: #2d2d2d;
  color: #eee;
  padding: 12px;
  border-radius: 4px;
  overflow-x: auto;
}

/* 自作ブロックが幅いっぱいに広がらない問題への対処。
   BlockNote の .bn-block-content は display:flex なので、
   中の要素は flex アイテムになり、既定では内容の幅までしか広がらない。 */
.bn-block-content > .spec-card,
.bn-block-content > .game-param,
.bn-block-content > .bn-column-list { flex: 1 1 auto; min-width: 0; }

/* --- 編集画面だけの調整 ------------------------------------------------- */

/* エディタの枠。フォームの他の入力欄と同じ見え方にする */
#block-editor-root .bn-container {
  border: 1px solid var(--block-line, #ddd);
  border-radius: 6px;
  min-height: 420px;
  padding: 8px 0;
  background: #fff;
}