/*
 * 婚活川柳のトップ `/senryu/` の境目の調整（Task #9910）。
 *
 * 写し `top.css`（移行元の 10/8 の版の `public/senryu/css/page_senryu.css`）は、移行元のサイト共通の CSS が
 * 先に敷いた土台の上で書かれている。移行元は端末で土台を読み分ける（`public/senryu/index.html` の `<head>`）.
 *
 * | 端末 | 土台 |
 * |---|---|
 * | パソコン | `/css/import.css`（`common.css`・`style.css`）と `/css/page_top.css` |
 * | 携帯 | `/sp/css/basic.css`・`common.css`・`style.css` |
 *
 * dev の本文の器にはテーマの土台（`main.css` の `.page-content__body p` など）が当たるので、写しを当てても
 * 移行元と同じ姿にならない（2026-10-09 の下見の走行 1 で、本文の段の行の高さ・題の字・携帯幅の器の字の大きさが違った）。
 * ここには、その土台の差だけを書く。写しの規則そのものは `top.css` にあり、手で書かない.
 *
 * 🚨 **バックナンバーの土台（`bridge.css`）とは別に持つ。**あちらは旧い本文（`#side_menu` や `.senryu_list`）のための
 * 調整で、トップには `inc/senryu.php` がこの 1 本だけを配る.
 */

/* 箱の数え方。移行元はどちらの端末でも content-box で数える（`bridge.css` の冒頭と同じ理由）. */
body .pa-page--senryu .page-content__body * {
	box-sizing: content-box;
}

/*
 * 行の高さ。移行元の `body` は行の高さを持たない（`normal`）。写しは `#senryu .block` や `.main_read` に `160%` を置き、
 * 中の `p` と `li` は**長さとして受け継ぐ**（字 16px の 160% = 25.6px）。テーマは `p` と `li` に自分の行の高さを置くので、
 * 受け継ぎへ戻す（走行 1: パソコン幅の本文の段 25.6 / 24・小さい字 25.6 / 19.5・順位の行 25.6 / 27）.
 */
body .pa-page--senryu .page-content__body {
	font-size: 13px; /* 移行元のパソコンの `style.css` の `#contents { font-size: 13px }`。携帯は `basic.css` が 13px（走行 2: 題の h3 が 13 / 16）. */
	line-height: normal;
}

body .pa-page--senryu .page-content__body p,
body .pa-page--senryu .page-content__body li {
	line-height: inherit;
}

/*
 * 外余白。移行元の `common.css` と携帯の `basic.css` は、段・見出し・一覧の外余白と内余白を 0 にする。
 * テーマの `p` は下の外余白 18px を持つ。
 *
 * 🚨 **当たり先は `:where(#senryu)` の中に限り、強さを上げない**（強さは「本文の器 ＋ 要素」）。写しの規則はどれも
 * これより強いので負け、テーマの `.page-content__body p` には勝つ。`#senryu` の外（本文の末尾の `.page-gotop`）は
 * テーマの押しボタンの規則が受け持つので触らない。補助の類名 `mb10`・`mb20`・`mb40` はテーマの規則（値は移行元と同じ）が
 * これより弱いので、下で付け直す.
 */
body .pa-page--senryu .page-content__body :where(#senryu) :where(div, p, ul, li, h3, h4, span) {
	margin: 0;
	padding: 0;
}

body .pa-page--senryu .page-content__body .mb10 {
	margin-bottom: 10px;
}

body .pa-page--senryu .page-content__body .mb20 {
	margin-bottom: 20px;
}

body .pa-page--senryu .page-content__body .mb40 {
	margin-bottom: 40px;
}

/*
 * 回り込みの解除。移行元のパソコンの `common.css`（329 行）と携帯の `basic.css` は、`.clearfix:after` に**中身のある箱**
 * （`content: "."`）を作る。そのため、本文の `.block`（`clearfix`）の中の最後の一覧の下の外余白（パソコン 40px・携帯 10px）が
 * `.block` の外へ抜けず、応募ボタンの上の外余白 30px と**足し算**になる。dev ではこの箱が無く、2 つが重なっていた
 * （走行 3: 注意の一覧から応募ボタン 2 までが、パソコン 30px・携帯 10px 短い）。値はパソコンの `common.css` のまま.
 */
body .pa-page--senryu .page-content__body .clearfix::after {
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
	line-height: 0;
	content: ".";
}

/*
 * 見出しの字。移行元の `common.css` は `h1`〜`h6` を `font-size: 100%` にし、色を持たない（本文の黒を受け継ぐ）。
 * テーマは本文の器の `h3` に 19〜22px と見出しの色を置く（走行 1: 題の `h3` が 13px・黒 / 22px・金色）.
 */
body .pa-page--senryu .page-content__body :where(#senryu) :where(h3, h4) {
	color: inherit;
	font-size: 100%;
	line-height: inherit; /* 移行元の見出しは行の高さを持たず受け継ぐ（パソコンは normal・携帯は #senryu の 160%）. */
}

/*
 * 携帯幅（749px 以下）の土台。移行元の携帯の `basic.css` は、`div`・`span`・`p`・見出しを**直接** 13px と細字にそろえる。
 * そのため移行元の携帯では、`.block`（16px）の中の `.gift_box` や `.voice-item` も 16px を受け継がず 13px になる
 * （走行 1: 賞品の箱・作品 13 / 16、見出し 1 の太さ 400 / 700）.
 *
 * 当たり先と強さの決め方は、上の外余白の規則と同じ（`:where(#senryu)` の中・写しの規則に負ける）.
 *
 * 器 `#senryu` は画面いっぱいに広げる。移行元の携帯は本文の器が画面の幅（375）で、dev は左右に 15px の余白を持つ
 * （走行 1・2: 375 / 345）。写しの `#senryu` は `width: 100%; box-sizing: border-box` なので、外余白だけでは広がらない
 * （走行 2）。幅を画面の幅にし、写しの左右の内余白 `6.25%`（移行元では画面の幅の 6.25%）を `6.25vw` で書く.
 */
@media (max-width: 749px) {
	body .pa-page--senryu .page-content__body :where(#senryu) :where(div, span, p, h1, h2, h3, h4, h5, h6) {
		font-size: 13px;
		font-style: normal;
		font-weight: normal;
		vertical-align: baseline;
	}

	/*
	 * 絵。移行元の携帯の `common.css` は `img { width: 100%; height: auto; display: block }`、`basic.css` は `max-width: 100%` を置く。
	 * 絵は箱として並ぶので、絵の下に字の下がりの分の隙間ができない。dev は行の中の絵のままで、題の下に 6.8px の隙間が
	 * あった（走行 3・4: 題の下から全体が dev だけ 6.8px 下）。幅は写しの `#senryu .title img { width: 140px }` が勝つ.
	 */
	body .pa-page--senryu .page-content__body :where(#senryu) :where(img) {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
	}

	/* 携帯の `basic.css` の `.clearfix { min-height: 1px }`. */
	body .pa-page--senryu .page-content__body .clearfix {
		min-height: 1px;
	}

	/* 移行元の携帯の `style.css` は `.fs13 { font-size: 100% }`（パソコンの 13px と違う）. */
	body .pa-page--senryu .page-content__body .fs13 {
		font-size: 100%;
	}

	body .pa-page--senryu .page-content__body .st {
		font-weight: bold;
	}

	body .pa-page--senryu .page-content__body #senryu {
		width: 100vw;
		margin-right: calc(50% - 50vw);
		margin-left: calc(50% - 50vw);
		padding-right: 6.25vw;
		padding-left: 6.25vw;
	}
}

/*
 * 写しの rem。移行元の携帯は `basic.css` が `html` を 13px にするので 1rem = 13px、dev は根の文字をページ全体で 16px に固定する。
 * **本文に効く rem の差は無い**（2026-10-09 に、写しで rem を使う規則 12 本を数えた）ので、ここには何も書かない.
 *
 * - `.author { margin-left: 1rem }` … 600px 以下では写しの次の規則が `margin-left: 58px` に替える。601px 以上は両側とも 16px
 * - `.rank-badge { width: 3rem }` … 600px 以下では写しが `width: auto` に替える
 * - `#container .path`・`.word-cta` … 本文に無い
 *
 * 🚨 **`.author` を 600px 以下で 13px にしてはいけない。**写しの 58px を潰す（走行 5 で、作者の左端が 81 / 36 になった）.
 */