/* =============================================================================
   layers.css — レイヤーブロック（.sdx-layers）
   -----------------------------------------------------------------------------
   ページヘッダー／ヒーローを1つの汎用パーツで賄うための「重ねブロック」。
   アプリ専用の文書CSS（StyleDoc 同期対象外）。使っている文書だけ出力に同梱する。

   構造（DOM順＝重ね順。内容レイヤーの位置は自由だが **1枚まで**）。
   ★この CSS は文書の中へ丸ごと埋め込まれることがあるので、コメントに HTML のタグを
     そのまま書かない（生成HTMLをタグで検索するスクリプトが、ここに誤ヒットする）。
     入れ子はインデント、要素はセレクタ記法で表す:
     div.sdx-layers.h-m
       div.lay.bg      … style="--lay-bg:var(--accent)"
       div.lay.img     … style="--lay-op:.6" ／ 中に img 要素
       div.lay.ptn     … style="--lay-ptn:…"
       div.lay.wave.at-bottom … 中に svg（path）
       div.lay.body.pos-c-c   … 中にふつうのパーツ

   ★内容レイヤー(.lay.body)は**必須ではない**。背景画像を2枚重ねるだけ、といった飾りだけの
     ブロックが作れる。ただし背景系レイヤーはすべて position:absolute なので、**内容レイヤーが
     無いブロックの高さは min-height だけで決まる**（h-auto＝0 だと消える）。高さのクラスか
     --lay-h（自由入力）で必ず高さを与えること（エディタ側でも h-auto を選べなくしている）。
     内容レイヤーが2枚以上あると、前面のものがクリックを奪って背面の内容を選べなくなるため
     1枚までに制限している（エディタが担保）。

   設計の要点:
   ・**背景系レイヤーは `pointer-events:none`**。重ねると最前面がクリックを奪い、
     メイン画面で下のパーツが選べなくなる（実測確認済み）。背景系は専用エディタで
     編集し、メイン画面では内容レイヤーだけを触らせる。
   ・**背景画像は CSS の background-image ではなく `img` 要素**。画像パスの解決
     （imgHydrateRefs）と保存時の相対化（cleanPageHtml）は `img[src]` しか見ないため、
     CSS 背景にすると実機で表示されず保存でも壊れる。
   ・色・グラデ・模様は**インライン style のカスタムプロパティ**で持つ。インライン
     style の中でも `var(--accent)` は解決されるので、「テーマ色に追従」と「任意の色」を
     同じ仕組みで両立できる（実測確認済み）。
   ・配置は自由座標ではなく **9分割（上中下×左中右）＋オフセット数値**。ドラッグ移動の
     機構を新設せずに済み、A4印刷でも崩れない。
   ============================================================================= */

.sdx-layers{
  position:relative; display:flex; overflow:hidden;
  margin:0 0 var(--block-gap); border-radius:var(--radius);
  background:transparent;   /* レイヤーブロック自身は透明（背景はレイヤーで付ける） */
  color:var(--ink);
  min-height:var(--lay-h, 0);
}
/* 高さ（内容が超えれば伸びる＝min-height）。
   自由入力の --lay-h（インライン）があればクラスの既定より優先する。var() のフォールバックに
   プリセット値を置く形にしているので、クラスと自由入力を「二段構え」にできる
   （deflist の --dl-k と同じ流儀。インラインなので詳細度でも必ず勝つ）。 */
.sdx-layers.h-auto{ min-height:var(--lay-h, 0); }
.sdx-layers.h-s{ min-height:var(--lay-h, 200px); }
.sdx-layers.h-m{ min-height:var(--lay-h, 320px); }
.sdx-layers.h-l{ min-height:var(--lay-h, 460px); }
/* 角の3状態: 既定＝デザインテーマ追従(var(--radius))／sq＝角なし(0)／rnd＝丸める(テーマ非依存の固定丸み)。 */
.sdx-layers.sq{ border-radius:0; }
.sdx-layers.rnd{ border-radius:16px; }

/* --- レイヤー共通 --- */
.sdx-layers > .lay{ position:absolute; inset:0; opacity:var(--lay-op,1); }
/* 背景系はクリックを通す（内容レイヤーだけがメイン画面の操作対象）。
   位置(--lay-tx/--lay-ty px)と拡大縮小(--lay-sc 倍率)で個別に動かせる。既定 0/0/1 で従来と同一。
   はみ出した分は .sdx-layers の overflow:hidden でクリップされる（背景として自然）。
   内容レイヤー(.body)は独自の transform（内容のオフセット）を持つので除外する。 */
.sdx-layers > .lay:not(.body){ pointer-events:none; }
/* bg/ptn/wave は従来どおり transform で移動/拡縮（全面塗り・模様・波は位置の厳密さが要らない）。
   基点は左上(0 0)＝幅非依存（center だと基点が幅の半分になり横幅で位置がずれる＝㉑と同種）。
   画像レイヤー(.img)は object-fit/transform の二重かけをやめ、下の「配置モデル」で位置決めする。 */
.sdx-layers > .lay:is(.bg,.ptn,.wave){
  transform:translate(var(--lay-tx, 0px), var(--lay-ty, 0px)) scale(var(--lay-sc, 1));
  transform-origin:0 0; }
/* レイヤーの表示/非表示（一覧の目アイコンで切替。クラスで保存＝出力にも残る） */
.sdx-layers > .lay.hidden{ display:none; }

/* --- 背景色 / グラデーション --- */
.sdx-layers > .lay.bg{ background:var(--lay-bg, var(--accent)); }

/* ===== 画像レイヤー（画像 img / イラスト .illustArea）の配置モデル =====
   2つの軸で決める（メイン画面で横幅が変わっても破綻しないよう設計）:
   ・サイズ挙動 fit-cover / fit-fixed
       cover ＝ ブロックを覆う（幅に追従して拡縮・常に中央）。画像は object-fit:cover、
               横の焦点は --lay-objx(%)。イラストは高さいっぱい・中央。
       fixed ＝ 固定サイズ（高さ基準＝ブロック高さは固定なので幅非依存）＋下の横アンカーで配置。
   ・横アンカー（fixed 時）xref-left / xref-center / xref-right / xref-pct
       left  ＝ 左から --lay-x(px)（縮めると右が切れる）
       right ＝ 右から --lay-x(px)（広げると右へ・縮めると左へ）
       center＝ 中央＋--lay-x(px) オフセット（0で中央・幅が変わっても中央基準）
       pct   ＝ 中心を横幅の --lay-x(%) 位置へ（縮小で左へ相対移動・サイズ固定）
   縦は中央＋--lay-y(px)。--lay-size は固定時の高さ（%）。 */
.sdx-layers > .lay.img > img,
.sdx-layers > .lay.img > .illustArea > svg{ display:block; }

/* --- cover（幅に合わせて拡縮） --- */
.sdx-layers > .lay.img.fit-cover > img{
  width:100%; height:100%; object-fit:cover;
  /* 焦点は横 --lay-objx / 縦 --lay-objy（どちらも % ・50 で中央）。縦は「上に寄せる／下に寄せる」の
     指定に使う（人物の顔を切らない等）。旧カバー/ヒーローの pos-top|center|bottom の代替。 */
  object-position:var(--lay-objx, 50%) var(--lay-objy, 50%);
}
.sdx-layers > .lay.img.fit-cover.is-illust{ display:flex; align-items:center; justify-content:center; }
.sdx-layers > .lay.img.fit-cover.is-illust > .illustArea{ height:100%; width:auto; aspect-ratio:1/1; }
.sdx-layers > .lay.img.fit-cover.is-illust > .illustArea > svg{ width:100%; height:100%; }
/* イラストの色。ピクトアイコンは fill="currentColor" なので、この層に color を置けば追従する。
   色を自前で持つイラスト（塗り指定済みのもの）や写真には影響しない。 */
.sdx-layers > .lay.img.ink-light{ color:#fff; }
.sdx-layers > .lay.img.ink-dark{ color:#000; }

/* --- fixed（固定サイズ）＋横アンカー。サイズは「基準(幅/高さ)×単位(px/%)」を --lay-size に単位込みで持つ。
   既定＝高さ基準（--lay-size は 70% 等）。szw＝幅基準（width を --lay-size に、height:auto）。
   px 指定なら幅非依存の絶対サイズ、% なら（高さ基準＝ブロック高さ／幅基準＝ブロック幅）に対する割合。 --- */
.sdx-layers > .lay.img.fit-fixed > img,
.sdx-layers > .lay.img.fit-fixed > .illustArea{
  position:absolute; top:50%; height:var(--lay-size, 70%); width:auto;
}
.sdx-layers > .lay.img.fit-fixed.szw > img,
.sdx-layers > .lay.img.fit-fixed.szw > .illustArea{ width:var(--lay-size, 50%); height:auto; }
.sdx-layers > .lay.img.fit-fixed > .illustArea{ aspect-ratio:1/1; }
.sdx-layers > .lay.img.fit-fixed > .illustArea > svg{ width:100%; height:100%; }
/* 横アンカー別（縦は translateY で中央＋yオフセット） */
.sdx-layers > .lay.img.fit-fixed.xref-left  > :is(img,.illustArea){ left:var(--lay-x, 0px); transform:translate(0, calc(-50% + var(--lay-y, 0px))); }
.sdx-layers > .lay.img.fit-fixed.xref-right > :is(img,.illustArea){ right:var(--lay-x, 0px); transform:translate(0, calc(-50% + var(--lay-y, 0px))); }
.sdx-layers > .lay.img.fit-fixed.xref-center> :is(img,.illustArea){ left:50%; transform:translate(calc(-50% + var(--lay-x, 0px)), calc(-50% + var(--lay-y, 0px))); }
.sdx-layers > .lay.img.fit-fixed.xref-pct   > :is(img,.illustArea){ left:var(--lay-x, 50%); transform:translate(-50%, calc(-50% + var(--lay-y, 0px))); }

/* --- 模様（CSS グラデーションで表現。値は --lay-ptn にインラインで入る） --- */
.sdx-layers > .lay.ptn{ background:var(--lay-ptn, none); }

/* --- 波（SVG。上下どちらにも置ける） --- */
.sdx-layers > .lay.wave > svg{
  position:absolute; left:0; width:100%; height:var(--lay-wh, 70px); display:block;
  fill:var(--lay-wave, var(--surface));
}
.sdx-layers > .lay.wave.at-bottom > svg{ bottom:0; }
.sdx-layers > .lay.wave.at-top > svg{ top:0; transform:scaleY(-1); }
/* 線モード＝塗りつぶさず「波の線」で描く（波カットと同じ形をラインで見せる）。
   path 側の vector-effect="non-scaling-stroke" と併せて、横に引き伸ばしても線の太さが均一に見える
   （preserveAspectRatio:none で縦横の倍率が違うため、指定しないと線が場所によって太さを変える）。 */
.sdx-layers > .lay.wave.line > svg{ fill:none; stroke:var(--lay-wave, var(--surface));
  stroke-width:var(--lay-ws, 3); stroke-linecap:round; }

/* --- 内容レイヤー（ふつうのパーツを入れる。DOM順で最後＝最前面） --- */
/* 内側の余白は --lay-pv（上下）/ --lay-ph（左右）で上書きできる。**未指定なら既定＝テーマ追従**
   （--pad-panel 基準）。エディタは値を入れたときだけインライン style を書く。 */
.sdx-layers > .lay.body{
  position:relative; flex:1; min-width:0;
  display:flex; flex-direction:column; gap:var(--gap-text);
  padding:var(--lay-pv, calc(var(--pad-panel) * 1.6)) var(--lay-ph, var(--pad-panel));
  transform:translate(var(--lay-ox, 0px), var(--lay-oy, 0px));
}
/* 中身の下マージンは gap に任せる（段別マージンと二重に空けない） */
.sdx-layers > .lay.body > *{ margin-bottom:0; max-width:100%; }
/* 横位置の寄せ（align-items）を使うため、子は既定で「内容の幅」に縮む。そのため
   **中身を持たない要素は幅0になり、見えず選択もできなくなる**（スペーサー・区切り線・
   空のパーツ）。それらだけは寄せに関わらず横いっぱいに伸ばす。 */
.sdx-layers > .lay.body > :is(.spacer,.divider,hr,:empty){ align-self:stretch; }
/* 内容の横幅上限（読みやすさ。.mw が無ければ無制限） */
.sdx-layers > .lay.body.mw > *{ max-width:var(--lay-maxw, 34em); }

/* 9分割の配置。justify-content＝縦位置 / align-items＝横位置。
   ※ [class$="-c"] のような属性末尾一致は使わない（クラスの並び順に依存し、
      後ろに .mw が付くと一致しなくなる）。9通りを明示する。 */
.sdx-layers > .lay.body:is(.pos-t-l,.pos-t-c,.pos-t-r){ justify-content:flex-start; }
.sdx-layers > .lay.body:is(.pos-c-l,.pos-c-c,.pos-c-r){ justify-content:center; }
.sdx-layers > .lay.body:is(.pos-b-l,.pos-b-c,.pos-b-r){ justify-content:flex-end; }
.sdx-layers > .lay.body:is(.pos-t-l,.pos-c-l,.pos-b-l){ align-items:flex-start; text-align:left; }
.sdx-layers > .lay.body:is(.pos-t-c,.pos-c-c,.pos-b-c){ align-items:center; text-align:center; }
.sdx-layers > .lay.body:is(.pos-t-r,.pos-c-r,.pos-b-r){ align-items:flex-end; text-align:right; }
/* 全域（分割なし）＝内容を枠いっぱいに広げる。子は横幅いっぱい（align stretch）、
   縦は上から詰める。max-width の制限（.mw）も外して全域に使う。 */
.sdx-layers > .lay.body.pos-full{ justify-content:flex-start; align-items:stretch; text-align:left; }
.sdx-layers > .lay.body.pos-full > *{ max-width:none; }

/* 濃い背景の上に置くとき＝内容を白文字で読ませる。
   ★**色の決め方そのものは parts.css の L 節（濃い面と文字色）に一本化した。**
     ここでは「この層は濃い面である」ことだけを伝える（--oc-ink の宣言は L 節側）。
     以前はこのファイルにも「明るい面を塗るパーツだけ元の色に戻す」一覧の写しがあり、
     core.css・parts.css の写しと合わせて3か所に分かれていたため、
     パーツを足すたびにどれかが漏れて同じ不具合が再発していた。
   ★ボタンだけは**見た目の設計**として濃色レイヤー上で反転させる（コントラストの手当てではない）。 */
.sdx-layers.ink-light > .lay.body .btn{ background:var(--surface); color:var(--accent-ink); border-color:var(--surface); }
.sdx-layers.ink-light > .lay.body .btn.ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }

/* --- ページヘッダーとして使うとき（header.page-header.sdx-layers） ---
   core.css の .page-header は自前で帯色と余白を持つ。レイヤー側が背景と余白を受け持つので
   それらを無効化し、左右だけは本文（.page-body）と同じ --pg-mx に合わせて文字位置を揃える。 */
.page-header.sdx-layers{ background:none; color:var(--ink); padding:0; }
.page-header.sdx-layers > .lay.body{
  padding-left:var(--lay-ph, var(--pg-mx, calc(var(--space) * 2.6)));
  padding-right:var(--lay-ph, var(--pg-mx, calc(var(--space) * 2.6)));
}

@media (max-width:640px){
  .sdx-layers.h-l{ min-height:var(--lay-h, 360px); }
  /* 狭い画面では既定の余白だけ詰める（明示指定 --lay-p* があればそちらを尊重する） */
  .sdx-layers > .lay.body{ padding:var(--lay-pv, var(--pad-panel)) var(--lay-ph, var(--pad-panel)); }
}

@media print{
  /* 面ものなので途中で切らない。背景は .page の print-color-adjust:exact で出る */
  .sdx-layers{ break-inside:avoid; }
}