@charset "UTF-8";

/* ============================================================
   niconowa-child / content.css
   投稿本文（記事エリア）のスタイル

   ■ 出典と優先順位（重要）
     文字サイズ・コンテンツ幅は theme.json を正とする。
     カンプ（モジュール.pdf / モジュール｜スマホ.pdf）からは
     装飾（罫線・背景帯・点線・構造・画像比率）だけを取っている。
     カンプの実測値と、そこから外した判断は docs/module-page.md にすべて記録した。

     → このファイルには font-size をほとんど書かない。
        theme.json のプリセット変数を参照するだけにしてあるので、
        767px 以下のサイズ切替は main.css の :root 上書きに自動で追従する。
        サイズを変えたいときは theme.json（と main.css の SP 上書き）だけを見ればよい。

   ■ このファイルが main.css と別になっている理由
     本文のスタイルは「フロント」と「ブロックエディタの編集画面」の
     両方に同じものを届ける必要がある。
     main.css をそのまま編集画面に読ませると、ヘッダー・フッター・
     トップページのレイアウト CSS まで流れ込んで編集画面の表示が壊れるため、
     本文パーツだけをこのファイルに切り出している。
     読み込みは includes/enqueue.php の enqueue_block_assets（フロント＋エディタ）。

   ■ @layer に入れていない理由
     ここにある宣言は theme.json の global styles と
     コア／親テーマ Twenty Twenty-Five の既定値を上書きするためのもの。
     CLAUDE.md にあるとおり、レイヤー内の宣言はレイヤー外の宣言に
     詳細度に関係なく負けるため、この用途の宣言は @layer に入れない。

   ■ セレクタが :is(.entry-content, .editor-styles-wrapper) な理由
     .entry-content         … フロント。core/post-content が出力するクラス
     .editor-styles-wrapper … 編集画面。エディタの canvas（iframe の body）
     どちらか一方しか存在しないため、1 本の宣言で両対応できる。
     詳細度は (0,1,1)。theme.json が出力する :root :where(h1,…,h6) の (0,1,0)
     より強いので、サイズは theme.json 側を活かしつつ装飾だけを足せる。
   ============================================================ */

:is(.entry-content, .editor-styles-wrapper) {
  /* カンプに出てくる装飾用の色。
     オレンジ罫線はカンプでは #D06610 と #C16B25 の 2 色が
     PC・SP で入り混じっていた（同じ用途で不統一）。
     既存パレットに近似色を増やさないため accent-text（#CC4C12）に寄せている。
     詳細は docs/module-page.md 6 章。 */
  --nico-ec-rule: var(--wp--preset--color--accent-text);

  /* 見出しの背景帯。ヘッダーの閉じるアイコンと同じ値 */
  --nico-ec-band: #eceae0;

  /* テーブルの罫線。カンプのテーブルは水色系（#EDF7FA / #CADEE5）だったが、
     暖色のパレットから浮くため、同じカンプ内にある暖色の罫線色を採用した */
  --nico-ec-line: #e0cbb6;

  /* 補足ボックスの背景。トップページのお知らせ／イベント背景と同じ値 */
  --nico-ec-surface: #f8f8f5;

  /* 画像の縦横比。カンプの画像枠は PC 892×532・436×260、SP 339×202 で
     いずれも 1.677 に揃っている */
  --nico-ec-ratio: 892 / 532;
}

/* ============================================================
   1. 見出し

   サイズは theme.json（h2=32/20px, h3=24/18px, h4・h5=18/16px, h6=16/14px）。
   ここで足すのは装飾と上下の余白だけ。

   カンプでは h2〜h6 のサイズが 26/24/22/18/18 だったが、
   サイズは theme.json を正とする方針のため採用していない。
   装飾（帯・罫線・点線）はカンプどおり。
   ============================================================ */

/* --- h2：上下 3px のオレンジ罫線＋背景帯 --------------------- */

:is(.entry-content, .editor-styles-wrapper) h2 {
  margin-block-start: 64px;
  margin-block-end: 24px;
  padding: 16px 14px;
  background-color: var(--nico-ec-band);
  border-block: 3px solid var(--nico-ec-rule);
}

/* --- h3：下 3px の罫線。左端だけオレンジ --------------------- */

:is(.entry-content, .editor-styles-wrapper) h3 {
  position: relative;
  margin-block-start: 48px;
  margin-block-end: 16px;
  padding-block-end: 16px;
  border-block-end: 3px solid var(--nico-ec-band);
}

/* 左端のオレンジ部分。カンプでは 89.2〜120px と項目ごとにまちまちだったため
   最頻値の 90px で固定している（docs/module-page.md 8 章 #2） */
:is(.entry-content, .editor-styles-wrapper) h3::after {
  content: '';
  position: absolute;
  inset-block-end: -3px;
  inset-inline-start: 0;
  width: 90px;
  height: 3px;
  background-color: var(--nico-ec-rule);
}

/* --- h4：装飾なし ------------------------------------------- */

:is(.entry-content, .editor-styles-wrapper) h4 {
  margin-block-start: 32px;
  margin-block-end: 8px;
}

/* --- h5：背景帯のみ ----------------------------------------- */

:is(.entry-content, .editor-styles-wrapper) h5 {
  margin-block-start: 32px;
  margin-block-end: 8px;
  padding: 10px 12px;
  background-color: var(--nico-ec-band);
}

/* --- h6：オレンジの点線 -------------------------------------- */

/* カンプは 2×1px の粒を 4px 間隔で並べていた。
   border-style: dotted はブラウザが粒の形と間隔を決めてしまい再現できないため、
   グラデーションで 2px 塗り＋2px 透明を繰り返して同じ見た目にしている。 */
:is(.entry-content, .editor-styles-wrapper) h6 {
  margin-block-start: 32px;
  margin-block-end: 8px;
  padding-block-end: 12px;
  background-image: repeating-linear-gradient(
    to right,
    var(--nico-ec-rule) 0 2px,
    transparent 2px 4px
  );
  background-size: 100% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
}

/* 本文の先頭が見出しのとき、上に余分な空きを作らない */
:is(.entry-content, .editor-styles-wrapper) > :is(h2, h3, h4, h5, h6):first-child {
  margin-block-start: 0;
}

/* ============================================================
   2. 段落・強調・注釈
   ============================================================ */

/* 行間 2（theme.json）に対して段落間を 1.5em にして、行送りとの差を付ける */
:is(.entry-content, .editor-styles-wrapper) p {
  margin-block-start: 1.5em;
  margin-block-end: 0;
}

:is(.entry-content, .editor-styles-wrapper) > p:first-child {
  margin-block-start: 0;
}

/* theme.json では指定していないため、ブラウザ既定の bold（700）を明示する。
   Adobe Fonts の kit に りょうゴシック PlusN の 700 が含まれていないと
   合成ボールドになる（docs/design-tokens.md 3-3）。 */
:is(.entry-content, .editor-styles-wrapper) :is(strong, b) {
  font-weight: 700;
}

/* 注釈。カンプでは本文より 1 段小さい文字だったので small プリセットを当てる */
:is(.entry-content, .editor-styles-wrapper) .nico-note {
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.75;
}

/* リンクの色・下線は theme.json の elements.link（accent-text ＋ underline）。
   カンプのリンク色は水色（PC #07BFCE / SP #0D95E6）だったが、
   白背景で 2.2〜2.9:1 しかなく WCAG AA（4.5:1）に届かないため採用していない。
   ここで再定義すると二重管理になるので触らない。 */

/* ============================================================
   3. リスト
   ============================================================ */

/* カンプではマーカーがコンテンツ左端（0px）、本文が 22px の位置。
   ::marker は既定で内容ボックスの左に右揃えで描かれるため、
   padding だけ指定すれば「1.」より「10.」が左に伸びるカンプの挙動も再現される。 */
:is(.entry-content, .editor-styles-wrapper) :is(ul, ol) {
  margin-block-start: 1.5em;
  margin-block-end: 0;
  padding-inline-start: 1.375em;
}

:is(.entry-content, .editor-styles-wrapper) ul {
  list-style: disc;
}

:is(.entry-content, .editor-styles-wrapper) ol {
  list-style: decimal;
}

/* カンプにはマーカーがオレンジの四角になる箇条書きもある。
   パターン「箇条書き（四角）」で使う */
:is(.entry-content, .editor-styles-wrapper) .nico-list--square {
  list-style: square;
}

:is(.entry-content, .editor-styles-wrapper) .nico-list--square > li::marker {
  color: var(--wp--preset--color--accent-text);
}

/* カンプの行送りは順序なし 25px／順序付き 29px（本文 16px 時）。
   行間そのものは theme.json の 2 を使い、差分を項目間マージンで作る。 */
:is(.entry-content, .editor-styles-wrapper) li {
  line-height: 1.5;
  margin-block-start: 0.5em;
}

:is(.entry-content, .editor-styles-wrapper) ol > li {
  margin-block-start: 0.8em;
}

:is(.entry-content, .editor-styles-wrapper) li:first-child {
  margin-block-start: 0;
}

/* マーカーの色はカンプでは本文と同じ（#63594C）。
   色を変えているのは .nico-list--square だけ。 */

:is(.entry-content, .editor-styles-wrapper) li > :is(ul, ol) {
  margin-block-start: 0.5em;
}

:is(.entry-content, .editor-styles-wrapper) li > ul {
  list-style: circle;
}

/* ============================================================
   4. 引用・区切り線

   この 2 つはカンプに指定が無い。運用担当が使う可能性があるため、
   カンプに実在する色だけを使って暫定で組んである（docs/module-page.md 8 章 #4）。
   ============================================================ */

:is(.entry-content, .editor-styles-wrapper) blockquote {
  margin-block-start: 2em;
  margin-block-end: 0;
  margin-inline: 0;
  padding-inline-start: 24px;
  border-inline-start: 4px solid var(--wp--preset--color--accent);
}

:is(.entry-content, .editor-styles-wrapper) blockquote > :first-child {
  margin-block-start: 0;
}

:is(.entry-content, .editor-styles-wrapper) blockquote cite {
  display: block;
  margin-block-start: 1em;
  font-size: var(--wp--preset--font-size--small);
  font-style: normal;
}

:is(.entry-content, .editor-styles-wrapper) hr {
  margin-block: 3em;
  border: 0;
  border-block-start: 1px solid var(--nico-ec-line);
}

/* core/separator は currentColor を使うため、色と不透明度を明示で打ち消す */
:is(.entry-content, .editor-styles-wrapper) hr.wp-block-separator {
  opacity: 1;
  color: var(--nico-ec-line);
  background-color: transparent;
}

/* ============================================================
   5. カラム（画像＋説明文）

   カンプは 3 種類。
     1 列   … 画像 1 枚を幅いっぱい、その下にタイトルと説明文
     横並び … 画像とテキストを左右に
     2 列   … 画像＋テキストの組を 2 つ横に

   いずれも 767px 以下では 1 列に積む（カンプの SP も全て 1 列）。
   カンプでは画像枠がコンテンツ幅より内側（1200 の中に 892）に置かれていたが、
   幅は theme.json を正とする方針のためコンテンツ幅いっぱいにしている。
   ============================================================ */

:is(.entry-content, .editor-styles-wrapper) .nico-cols {
  margin-block-start: 2em;
  gap: 20px;
}

/* 画像。カンプの枠は 3 サイズとも 1.677 に揃っていたので比率で持つ。
   object-fit で、縦横比の違う写真を入れても枠が崩れないようにする。 */
:is(.entry-content, .editor-styles-wrapper) .nico-cols img,
:is(.entry-content, .editor-styles-wrapper) .nico-figure img {
  width: 100%;
  aspect-ratio: var(--nico-ec-ratio);
  object-fit: cover;
}

/* 画像の下のタイトル。カンプでは本文より 1 段大きい */
:is(.entry-content, .editor-styles-wrapper) .nico-figure__title {
  margin-block-start: 16px;
  margin-block-end: 0;
  font-weight: 700;
}

:is(.entry-content, .editor-styles-wrapper) .nico-figure__title + p {
  margin-block-start: 8px;
}

/* 横並び（画像左・テキスト右）。テキスト側を画像の上端に揃える */
:is(.entry-content, .editor-styles-wrapper) .nico-cols--side {
  align-items: flex-start;
}

/* 各カラムの 1 つ目は上マージンを消して、列同士の頭を揃える */
:is(.entry-content, .editor-styles-wrapper) .nico-cols > .wp-block-column > :first-child {
  margin-block-start: 0;
}

/* ============================================================
   6. テーブル

   カンプは 2 パターン。どちらも「左が見出し・右が内容」の行見出し表。
     パターン1 … 見出しセルに背景帯、内容セルは白地＋罫線
     パターン2 … 罫線が点線、背景なし

   セル幅はカンプの 297 : 902（＝約 25 : 75）を比率で持たせている。
   px で持つとコンテンツ幅を変えたときに崩れるため。
   767px 以下では見出しセルと内容セルを縦に積む（カンプの SP も縦積み）。
   ============================================================ */

:is(.entry-content, .editor-styles-wrapper) .wp-block-table {
  margin-block-start: 2em;
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-table :is(th, td) {
  padding: 20px 24px;
  text-align: start;
  vertical-align: top;
  line-height: 1.75;
}

/* 行見出し（左列）。太字にして、色だけに頼らず役割が分かるようにする */
:is(.entry-content, .editor-styles-wrapper) .wp-block-table th {
  width: 25%;
  font-weight: 700;
}

/* --- パターン1：見出しセルに背景帯 --------------------------- */

:is(.entry-content, .editor-styles-wrapper) .nico-table--band :is(th, td) {
  border: 1px solid var(--nico-ec-line);
}

:is(.entry-content, .editor-styles-wrapper) .nico-table--band th {
  background-color: var(--nico-ec-band);
}

/* --- パターン2：点線区切り ----------------------------------- */

/* h6 と同じ理由で、点線は border ではなくグラデーションで描く */
:is(.entry-content, .editor-styles-wrapper) .nico-table--dotted :is(th, td) {
  border: 0;
  padding-inline: 0;
  background-image: repeating-linear-gradient(
    to right,
    var(--nico-ec-line) 0 2px,
    transparent 2px 4px
  );
  background-size: 100% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
}

:is(.entry-content, .editor-styles-wrapper) .nico-table--dotted td {
  padding-inline-start: 24px;
}

/* 1 本目だけ濃くして表の始まりを示す（カンプどおり） */
:is(.entry-content, .editor-styles-wrapper) .nico-table--dotted {
  background-image: repeating-linear-gradient(
    to right,
    var(--wp--preset--color--contrast) 0 2px,
    transparent 2px 4px
  );
  background-size: 100% 1px;
  background-position: left top;
  background-repeat: no-repeat;
}

/* ============================================================
   7. PDF リンク

   カンプは「アイコン＋ファイル名＋（容量）」と、その下に
   Adobe Reader の案内ボックス（ボタン付き）。
   アイコンの図柄はカンプの PDF から取得できなかったため暫定
   （docs/module-page.md 8 章 #5）。
   ============================================================ */

:is(.entry-content, .editor-styles-wrapper) .nico-pdf {
  margin-block-start: 2em;
}

:is(.entry-content, .editor-styles-wrapper) .nico-pdf a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* 書類アイコン。currentColor で塗るのでリンク色に追従する */
:is(.entry-content, .editor-styles-wrapper) .nico-pdf a::before {
  content: '';
  flex: none;
  width: 1em;
  height: 1.2em;
  background-color: currentColor;
  /* 角を折った書類の形 */
  clip-path: polygon(0 0, 65% 0, 100% 30%, 100% 100%, 0 100%);
}

/* 容量。リンクの一部ではないので下線を付けない */
:is(.entry-content, .editor-styles-wrapper) .nico-pdf__size {
  font-size: var(--wp--preset--font-size--small);
  margin-inline-start: 4px;
}

:is(.entry-content, .editor-styles-wrapper) .nico-pdf__notice {
  margin-block-start: 24px;
  padding: 24px;
  background-color: var(--nico-ec-surface);
}

:is(.entry-content, .editor-styles-wrapper) .nico-pdf__notice > :first-child {
  margin-block-start: 0;
}

/* ============================================================
   8. アイコン付きテキストリンク

   カンプは 16px のリンクを 42px 間隔で縦に並べたもの。
   アイコンの図柄は取得できなかったため、ヘッダー・フッターで使っている
   シェブロン（>）に揃えている（docs/module-page.md 8 章 #5）。
   ============================================================ */

:is(.entry-content, .editor-styles-wrapper) .nico-linklist {
  list-style: none;
  margin-block-start: 2em;
  padding-inline-start: 0;
}

:is(.entry-content, .editor-styles-wrapper) .nico-linklist li {
  margin-block-start: 20px;
  line-height: 1.5;
}

:is(.entry-content, .editor-styles-wrapper) .nico-linklist a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* シェブロン。丸はフッターと同じ accent、中の > は白 */
:is(.entry-content, .editor-styles-wrapper) .nico-linklist a::before {
  content: '';
  flex: none;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  background-color: var(--wp--preset--color--accent);
  /* 白い「>」を中央に置く */
  background-image: linear-gradient(currentColor, currentColor);
  color: var(--wp--preset--color--base);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.42em 0.14em;
  clip-path: circle(50%);
}

/* ============================================================
   9. SP（767px 以下）

   文字サイズは main.css の :root で
   --wp--preset--font-size--* を切り替えているため、ここでは扱わない。
   装飾の寸法だけをカンプの SP 実測に合わせる。
   ============================================================ */

@media (max-width: 767px) {
  :is(.entry-content, .editor-styles-wrapper) h2 {
    margin-block-start: 40px;
    margin-block-end: 16px;
    padding: 14px 12px;
  }

  :is(.entry-content, .editor-styles-wrapper) h3 {
    margin-block-start: 32px;
    margin-block-end: 12px;
    padding-block-end: 12px;
  }

  :is(.entry-content, .editor-styles-wrapper) :is(h4, h5, h6) {
    margin-block-start: 24px;
  }

  :is(.entry-content, .editor-styles-wrapper) h5 {
    padding: 10px 12px;
  }

  :is(.entry-content, .editor-styles-wrapper) blockquote {
    padding-inline-start: 16px;
  }

  :is(.entry-content, .editor-styles-wrapper) hr {
    margin-block: 2em;
  }

  /* カラムは全て 1 列に積む。
     core/columns は既定で 781px 以下に折り返すが、
     CLAUDE.md の切替点は 767px なので、パターン側で
     isStackedOnMobile: false にしてコアの折返しを止め、ここで積んでいる。
     コアの既定は !important 付きで上書きできないため、この方法をとっている。 */
  :is(.entry-content, .editor-styles-wrapper) .nico-cols {
    flex-wrap: wrap;
    gap: 24px;
  }

  :is(.entry-content, .editor-styles-wrapper) .nico-cols > .wp-block-column {
    flex-basis: 100%;
  }

  /* テーブルは見出しセルと内容セルを縦に積む。
     横スクロールを出さずに済み、カンプの SP とも一致する。 */
  :is(.entry-content, .editor-styles-wrapper) .wp-block-table :is(table, tbody, tr, th, td) {
    display: block;
    width: auto;
  }

  :is(.entry-content, .editor-styles-wrapper) .wp-block-table :is(th, td) {
    padding: 12px 14px;
  }

  :is(.entry-content, .editor-styles-wrapper) .nico-table--band tr + tr {
    margin-block-start: -1px;
  }

  :is(.entry-content, .editor-styles-wrapper) .nico-table--dotted :is(th, td) {
    padding-inline: 0;
  }

  :is(.entry-content, .editor-styles-wrapper) .nico-table--dotted th {
    padding-block-end: 0;
    background-image: none;
  }
}