/* ============================================================
   作問(pub) デザイン調整 CSS
   common.css / question.css は design/cbt/pub の無改変コピー。
   本ファイルは「デザインCSSだけでは足りない作問エディタ固有の調整」を集約する
   （受講側 assets/st/css/adjustments.css と対称）。layout.tsx が question.css の後に link。

   【このファイルの方針（2026-07-16 久野さん判断）】
   「明確に入れてほしいと指示したもの」だけを残す。それ以外は legacy-unreviewed.css へ
   隔離し、link も外してある（＝現在は読み込まれていない）。
   崩れた箇所が出たらその時点で判断し、隔離ぶんを戻すか、新しく作り直す。
   過去の実装都合・古い判断は引き継がない。

   ここに残しているのは以下の指示ぶんのみ（括弧内は対応コミット）：
     1. 選択式の画像が列幅いっぱいに伸びる崩れ → 実寸に制限   (589ee32 / 07-13)
     2. ドラッグ並べ替え（@dnd-kit）の視覚フィードバック      (6ca1cb0 / 07-16)

   【2026-07-16 撤去】layout2/layout3 の2列と大問固定はデザインCSSが元から持っている：
     question.css: .question-block-col2{display:flex;justify-content:space-between}
                   .question-block-col2 .question-wrap{width:527px}
                   .question-block-col2 .question-wrap:last-of-type::before → 区切り線
                   .question-sticky .question-block.large-question{position:sticky;top:120px}
     common.css:   .question-main-contents.question-editing-content{width:1152px}
   我々はこれを独自CSSで上書き（flex:1/gap/border-left/align-items:flex-start）しており、
   その align-items:flex-start のせいで大問列が伸びず sticky が効かなくなっていた。
   さらにそれを打ち消す上書き(col2-flow / question-sticky{align-items:stretch})を重ねていた。
   → 上書きを全部やめてデザイン素に戻した（DOMもモックの構造に合わせた）。

   【デザインとDOM構造が違う箇所について（2026-07-17 久野さん判断）】
   原則はデザイン準拠。ただし「デザイン側に準備が無い」「実装の都合上あえてそうしている」
   場合は違えてよい。ただし後から見て "あえてなのか事故なのか" が分からなくなるため、
   意図的に違う構造にしている箇所は必ずその旨をコメントに書くこと
   （デザインのどの構造に対して、実装がどうなっていて、なぜそうしたか）。
   現在この扱いなのは「穴埋め：問題文の中に置く空欄」のみ（下部の該当セクション参照）。
   ============================================================ */

/* ===== ルビの読み(rt)を編集・選択の対象にしない =====
   指示：項6 を adjustments へ移設（2026-07-16）。

   見た目ではなく「編集時の挙動」の指定。ルビの読み(rt)は contenteditable=false なので、
   読みを本文の選択やクリックの対象から外し、親文字と一体で扱えるようにする。
   デザインは静的モックなので編集挙動の定義を持たず（rt の user-select 指定は無い）、
   競合しない。デザインの rt の見た目（font-size:0.8rem / position:relative; top:-1.5px）は
   そのまま活かす。
   ※ 以前ここに font-size:0.5em があったが、モック実物では本文24pxに対し rt は 8px で
     出るのに対し 12px＝1.5倍にする上書きだったため撤去済み（4d63582）。
   実測: 読みの上をクリックしたときのヒット要素が RT → DIV.question-note に変わる。
   【外すとどうなるか】本文編集でルビの読みが選択・クリックの対象になる。 */
.question-editing-canvas ruby rt {
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

/* ===== 本文パーツ(img)のインライン化 ＝ Tailwind preflight の打ち消し =====
   指示：「デザインにあるものはデザインを正とする」（2026-07-17）。

   デザイン正本は本文パーツを素の img として文中に流し、寄せだけを指定している
   （question.css:822 `.question-block .question-notes .question-note img`
    → margin-right:4px / vertical-align:middle / top:-3px。display は書いていない
      ＝ img 既定の inline が前提）。
   ところが作問側だけ Tailwind を読み込んでおり、その preflight（@layer base の
   `img { display:block }`）が既定の inline を潰す。結果、下線や矢印が単独で改行される
   （実測: 問題番号 top=289 に対し 下線 top=358 と別行に落ちる）。
   受講側は Tailwind を読まないため素の inline のままで、そちらは崩れていない。
   ＝ デザインとのズレではなく実装側の事情なので、ここで戻す。
   対象は本文パーツ(.text-part)のみ。本文に貼る参照画像はブロック表示のままでよい。
   【外すとどうなるか】作問の本文でパーツだけが改行され、受講側と見た目が食い違う。 */
.question-editing-canvas .question-note img.text-part {
  display: inline;
}

/* ===== 選択肢(選択式)に埋め込んだ画像の拡大防止 =====
   指示：「選択式のデザインと実装で崩れがないか確認して」→ 画像が列幅いっぱいに拡大される
   崩れを修正（589ee32 / 2026-07-13）。
   answer-column の .txt は縦フレックス(align-items:stretch)なので、ラベルの
   リッチテキストに埋め込んだ画像がそのままだと列幅いっぱいに拡大される
   （縦長画像だと巨大化・ぼやける）。align-self:center + max-width で実寸(〜150px)に
   留める。構造化した choice.image(.answer-txt 直下の <picture>) は対象外。 */
.question-editing-canvas .answer-block .answer-column .answer-txt .txt img {
  align-self: center;
  max-width: 150px;
  width: auto;
  height: auto;
}

/* ===== 解答オブジェクトの画像プレースホルダー（画像レイアウトで画像が未設定のとき） =====
   指示：「画像があるパターンを選択した際の、画像のプレースホルダーがなくなっている」→ 復旧。

   デザインは「画像レイアウトを選んだが画像が未設定」の状態を描いていない
   （edit_answer_select.html 等の画像つき選択肢は常に実画像がある。モック内に
    placeholder / ファイルを挿入 / select-file の語は 0 件）。デザインが答えを持たない
   状態なので、ここで灰色の枠だけ補う。

   「ファイルを挿入/変更」ボタンはデザインが持っているので定義しない：
     common.css .question-editing-content .answer-grid-area .answer-block .select-file
       { position:absolute; top:0; margin:auto; width:118px; height:32px; … }
       ＋ .left-img .select-file{left:10px} / .top-img .select-file{top:14px} のレイアウト別調整
   ボタンには select-file クラスを付けてあるのでそれがそのまま効く
   （以前はこの値を .answer-obj-file として二重に持っていたが、レイアウト別調整が
     抜けていて劣化コピーだったため撤去した）。
   プレースホルダーは実画像と同じく <picture> の中に置いてあるので、幅・余白・最大幅は
   デザインの picture 規則（.left-img picture{padding:14px 0 14px 14px} /
   .flex-img.per-rowN picture{max-width:var(--img-width)} など）がそのまま効く。
   ここでは「実画像なら img が持っている固有サイズ」の代わりに、picture の内側を埋める
   大きさと灰色の見た目だけを与える。
   （以前は picture の外に span で置き、width:var(--img-width)/min-width:118px といった
     独自値を持たせていた。そのせいで左端にくっつき、幅計算もデザインとズレていた。）
   実測: flex-img → picture 103・中身 89・セル左端から16px・txt 155（すべてデザインと一致）。
         top-img → picture 257（実画像のときと同じ）。 */
/* 実画像は img の固有サイズで picture の幅が決まるが、プレースホルダーには固有幅が無く
   picture が padding ぶん(14px)に潰れてしまう。実画像のときと同じ幅を picture に与える
   （flex-img は デザインの --img-width、文字上/下は未定義なので 100%）。 */
.question-editing-canvas
  .answer-obj-image
  picture:has(.answer-obj-image-placeholder) {
  width: var(--img-width, 100%);
}
.question-editing-canvas .answer-obj-image-placeholder {
  display: block;
  width: 100%;
  height: 64px;
  border-radius: 6px;
  background: #e9e9e9;
}
/* 「ファイル変更」（画像が設定済みのセル）は既定で隠し、そのセルまたはそれを含むエリアが
   アクティブなときだけ出す（「ファイルを挿入」＝未設定は常時表示）。
   デザインは本文画像では選択時にボタンを差し込む方式だが、解答セルは常に描画しているので
   ここで出し分ける。これが無いと全ての画像セルにボタンが載りっぱなしになる。
   なお .answer-obj-image を挟んでいるのは詳細度あわせ：デザインの
   `.question-editing-content .answer-grid-area .answer-block .select-file{display:flex}`
   がクラス4つなので、こちらも4つにして（同点＋後勝ちで）打ち消す必要がある。 */
.question-editing-canvas .answer-obj-image .answer-obj-file.is-change {
  display: none;
}
.question-editing-canvas
  [data-item-id].is-edit
  .answer-obj-image
  .answer-obj-file.is-change,
.question-editing-canvas
  .answer-select-edit
  .answer-obj-image
  .answer-obj-file.is-change {
  display: flex;
}

/* ===== ドラッグ並べ替え（CanvasDnd / @dnd-kit） =====
   指示：「中問・小問・解答エリアをドラッグで並べ替えできるように」「dnd-kit へ全面移行して」
   → 実装（6ca1cb0 / 2026-07-16）。
   中問・小問・解答エリア・本文メディアをハンドルで並べ替える際の視覚フィードバック。
   デザインCSS(common.css)は無改変のため、状態表現のみここで補う。 */

/* ドラッグ中の原要素は減光して「持ち上がった」ことを示す（浮遊ゴーストは DragOverlay）。 */
.question-editing-content .question-block.is-dragging,
.question-editing-content .answer-grid-area.is-dragging,
.question-editing-content .image-item.is-dragging,
.question-editing-content .audio-item.is-dragging {
  opacity: 0.35;
}

/* ドロップ位置インジケータ（緑線）。挿入される側の前/後ろに出す。 */
.question-editing-content .is-drop-before,
.question-editing-content .is-drop-after {
  position: relative;
}
.question-editing-content .is-drop-before::before,
.question-editing-content .is-drop-after::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 2px;
  background: #2f9f2f;
  box-shadow: 0 0 8px 0 #2f9f2f;
  z-index: 5;
  pointer-events: none;
}
.question-editing-content .is-drop-before::before { top: -3px; }
.question-editing-content .is-drop-after::after { bottom: -3px; }

/* 浮遊ゴースト（元要素の複製）。掴んでいる感じを出す。 */
.canvas-drag-ghost {
  pointer-events: none;
  opacity: 0.95;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25));
  cursor: grabbing;
}

/* ============================================================
   穴埋め：問題文の中に置く空欄

   ⚠️ ここは【意図的にデザインと違うDOM構造】にしている（原則はデザイン準拠だが、
      デザイン側に準備が無いため実装が担う領域）。迷ったらこのコメントを先に読むこと。

   ■ デザイン(edit_answer_fill.html / st_layout_fill-in-the-blank_*.html)の構造
       section.grid-drop-wrap
         div.grid-drop-item            ← display:flex
           p.drop-text                 ← テキストの「塊」。flex-shrink:0
           div.grid-drop-box[data-drop-id] > span   ← 空欄(238x72)
           p.drop-text
           div.grid-drop-box > span
     ＝「テキスト塊 ⇄ 箱」を交互に並べる flex。

   ■ 実装の構造（この CSS が前提にしているもの）
       section.grid-drop-wrap[data-marker-type]
         div.grid-drop-item            ← display:block（通常の文章として流す）
           …テキストノード… <span class="fill-blank" data-blank-id> …テキスト…
     ＝本文(question-note)と同じリッチテキストの行内フロー。空欄はインライン要素。
     受講側は span.fill-blank の中へ div.fill-blank-slot を portal で差し込む。
     ※ デザインの p.drop-text / div.grid-drop-box は実装では一切使っていない。

   ■ なぜ変えたか（久野さん要望 2026-07-17）
     「穴埋めのオブジェクトを問題文みたいにして、その中に解答欄を増やせるようにしたい」。
     デザインの p.drop-text は flex アイテムの塊（flex-shrink:0）なので、
     文章の途中の任意位置に穴を開けられず、文として折り返すこともできない＝要望を満たせない。
     またデザインは「前後テキストをどう入力するか」を持っていない
     （p.drop-text に contenteditable が無く、モーダルにも文言の入力欄が無く、
      どのテキストがどの空欄に紐づくかを示す属性も無い）＝デザインに答えが無い領域。
     → モックの追加はデザイナーに相談する前提の暫定。デザインが用意されたら見直すこと。

   ■ 見た目はデザインに合わせている（構造だけが違う）
     空欄の意匠は .grid-drop-box 準拠（青枠3px #66afff / 背景 #f9f9eb / 角丸16px）。
     記号は中央・2.4rem(=24px) #007bff（st_layout_fill-in-the-blank_1col_horizontal の実測）。
     大きさだけは選択肢カードに合わせて 248x76（久野さん指示。デザインの箱は 238x72）。

   ■ マーカー（ア/イ/ウ 等）はCSSカウンタで採番する
     文字として焼き込まないので、文中に空欄を挿す・消す・並べ替えても、その場で振り直る
     （古い番号が残らない）。種別は data-marker-type で切り替える。
   ============================================================ */
.grid-drop-wrap .grid-drop-item {
  counter-reset: fillblank;
}
/* 問題文（本文と同じ見た目・行内フロー）。flex ではなく通常の文章として流す。
   空欄は選択肢カードと同じ 76px の背丈があるので、行の高さをそれ以上に取って
   折り返したときに空欄どうしが重ならないようにする（× も枠外に出るぶん余白を見る）。 */
.grid-drop-wrap .grid-drop-item {
  display: block;
  line-height: 92px;
}
/* 大きさは選択肢カード(.answer-column)と同じにする＝札がそのまま収まる見た目にする。
   デザインの .grid-drop-box(238x72) ではなく、この画面の選択肢カードの実寸に合わせる
   （デザインの穴埋めは per-row4 のカードが 248x76 で、空欄と札の大きさが揃う）。 */
.fill-blank {
  counter-increment: fillblank;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 248px;
  height: 76px;
  margin: 0 4px;
  padding: 0 8px;
  border: 3px solid #66afff;
  border-radius: 16px;
  background: #f9f9eb;
  font-size: 2rem;
  color: #007bff;
  user-select: none;
}
/* 2段組(question-block-col2)では列が狭いので空欄も縮める。
   デザインも同じことをしている（question.css:1663 で .grid-drop-box を 238px→206px）。
   値はこの画面の選択肢カード per-row2 の実寸 212px に合わせる＝1col で 248px を
   per-row4 のカードに合わせているのと同じ考え方（久野さん指示「サイズを選択肢に合わせたい」）。
   これが無いと 248px の空欄が 439px の列に2つ入らず、
   「あの答え[1]あの答え / [2]」と不格好に折り返す。 */
.question-block-col2 .fill-blank {
  width: 212px;
}
/* 記号は content で出す＝DOMに文字を持たないので採番がズレない。
   既定はカナ（ア/イ/ウ）。種別は data-marker-type で切り替える。
   絶対配置で箱の中央に置く：受講側は空欄の中にドロップ先(.fill-blank-slot)が入り、
   flex で並べると記号がその幅に押されて左端に寄ってしまうため（デザインの
   .grid-drop-box は span を中央に置く。question.css の実測で 24px / #007bff）。 */
.fill-blank::before {
  content: counter(fillblank, katakana);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  line-height: 1;
  pointer-events: none;
}
[data-marker-type="num"] .fill-blank::before {
  content: counter(fillblank, decimal);
}
[data-marker-type="upper"] .fill-blank::before {
  content: counter(fillblank, upper-alpha);
}
[data-marker-type="lower"] .fill-blank::before {
  content: counter(fillblank, lower-alpha);
}
/* 丸数字は標準の counter-style に無いので実体で定義（①〜⑳、超過は数字）。 */
@counter-style fill-circled {
  system: fixed;
  symbols: "①" "②" "③" "④" "⑤" "⑥" "⑦" "⑧" "⑨" "⑩" "⑪" "⑫" "⑬" "⑭" "⑮" "⑯" "⑰" "⑱" "⑲" "⑳";
  suffix: "";
  fallback: decimal;
}
[data-marker-type="circle"] .fill-blank::before {
  content: counter(fillblank, fill-circled);
}

/* 作問の問題文オブジェクト。本文と同じく「外枠＝選択対象／中身＝編集領域」。
   外枠にオブジェクトツールバー（ルビ/パーツ/＋解答欄）が portal される。 */
.question-editing-canvas .fill-template-object {
  position: relative;
}
.question-editing-canvas .fill-template-edit {
  min-height: 72px;
  padding: 8px 4px;
}
/* 作問中は空欄が「掴めない置物」だと分かるように（クリックで選択・Backspaceで削除）。 */
.question-editing-canvas .fill-blank {
  cursor: default;
}
/* 問題文オブジェクトの「＋ 解答欄」。デザインの parts-style は 48px 固定
   （common.css:4390。parts-btn 等の一部だけ 70px の例外を持つ）で、
   デザインに無いこのボタンは文字が折り返してしまうため幅を確保する。 */
.question-editing-content .object-toolbar .parts-style li button.blank-add-btn {
  width: auto;
  padding: 0 12px;
  white-space: nowrap;
}

/* 変更履歴サイドパネルを右からスライドイン/アウトさせる（独自演出。common.css は無改変）。
   .history-side-block は position:fixed; right:0。閉時は translateX(100%) で画面外(右)へ退避、
   .is-open で translateX(0)。transition で開閉どちらもスライドする。
   動きを抑える設定の環境では transition を無効化する（アクセシビリティ）。 */
.history-side-block {
  transform: translateX(100%);
  transition: transform 0.24s cubic-bezier(0.2, 0, 0, 1);
}
.history-side-block.is-open {
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .history-side-block {
    transition: none;
  }
}

/* 共通モーダルの表示/非表示アニメーション（共通 Modal のみ＝.modal-anim を付けたもの。
   common.css は無改変）。手書きの .modal-window（素材管理の追加/削除/フォルダ選択等）には
   eff:掛けない（.modal-anim が付かない＝ base のまま表示される）。
   .modal-block は中央寄せの transform: translate(-50%,-50%) を持つので scale を必ず合成する。 */
.modal-window.modal-anim {
  opacity: 0;
  transition: opacity 0.18s ease;
}
.modal-window.modal-anim.is-open {
  opacity: 1;
}
.modal-window.modal-anim .modal-block {
  transform: translate(-50%, -50%) scale(0.96);
  transition: transform 0.18s cubic-bezier(0.2, 0, 0, 1);
}
.modal-window.modal-anim.is-open .modal-block {
  transform: translate(-50%, -50%) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .modal-window.modal-anim,
  .modal-window.modal-anim .modal-block {
    transition: none;
  }
}