/*
 * legacy.css — 旧 STORK19 マークアップの互換表示（Phase 3 / Worker D）。
 *
 * ============================================================
 * これは「旧テーマの CSS の移植」ではない。
 * ============================================================
 * 本番 963 記事に保存済みのクラス名は **文字列** として受け取り、
 * PICICO の色・角丸・余白（tokens.css の --picico-*）で描き直している。
 * jstork19/ の CSS/SCSS は「そのクラスが何を意味するか」を読むためだけに参照した。
 * 値・セレクタ・宣言はコピーしていない。見た目を旧テーマと同一にもしていない。
 * 目標は「同じ情報が、同じくらい読みやすいこと」（docs/PHASE3-互換一覧.md §D）。
 *
 * ルール（CLAUDE.md）:
 *   - 優先度の力技（important 指定）で解決しない
 *   - 色・余白は tokens.css から取る。legacy 専用の淡色だけ、ここで
 *     --picico-legacy-* として定義する（tokens.css は触らない）
 *   - specificity は低く保つ。本文側は :where(.entry-content) で受ける
 *   - 不具合を display:none で隠さない（アコーディオンの開閉など、
 *     もともと開閉が目的のものだけ非表示を使う）
 *
 * 目次:
 *   0. legacy 専用トークン
 *   1. 吹き出し .voice
 *   2. ボックス .cbox / is-style-*_box
 *   3. 補足 .supplement / is-style-supplement-*
 *   4. マーカー
 *   5. ラベル
 *   6. 文字サイズ
 *   7. リストアイコン
 *   8. ボタン
 *   9. 見出し背景・旧パレット色
 *  10. 画像装飾
 *  11. 段落装飾（microcopy / balloon / sticky-note）
 *  12. アコーディオン / FAQ / ステップ
 *  13. 表示制御（stk-hidden_* / stk-wow-*）
 *  14. 関連記事 .related_article / 記事リスト .cat_postlist
 *  15. 旧「追加CSS」からの移植（appreach / picico-balloon / #picico-wrap）
 */

/* ==========================================================================
 * 0. legacy 専用トークン
 *
 * 旧記事だけで使う淡色。新しい UI では使わないので tokens.css には置かない。
 * （--picico-legacy-stork-cyan / -orange は tokens.css 側にある。D-004）
 * ========================================================================== */

:root {
	/* マーカー（下半分の帯） */
	--picico-legacy-marker-yellow: #fff1a8;
	--picico-legacy-marker-pink: #ffd5e2;
	--picico-legacy-marker-blue: #cbe7f8;
	--picico-legacy-marker-green: #cfeedc;

	/* 吹き出し・ボックス・ラベルで使う色（PICICO 寄りに彩度を落としてある） */
	--picico-legacy-pink: #d95b8c;
	--picico-legacy-pink-pale: #fdeef4;
	--picico-legacy-yellow: #b8860b;
	--picico-legacy-yellow-pale: #fff7e0;
	--picico-legacy-blue: #3a7fc1;
	--picico-legacy-blue-pale: #eaf2fa;
	--picico-legacy-red: #c0392b;
	--picico-legacy-red-pale: #fdeceb;
	--picico-legacy-gray: #6d7a77;
	--picico-legacy-gray-pale: #f1f4f3;
	--picico-legacy-black: #22282a;
	--picico-legacy-black-pale: #eceeee;
	--picico-legacy-green: #3f9e6c;
	--picico-legacy-green-pale: #eaf5ef;

	/* 旧 STORK 既定パレットのうち、本番で実際に使われている 2 色だけ */
	--picico-legacy-palette-three: #cf2e2e;
	--picico-legacy-palette-nine: #0693e3;
}

/*
 * アイコンの共通の描き方。
 * assets/svg/ の自作 SVG を mask で抜いて currentColor で塗る。
 * （img で置くと色を変えられないため）
 */
:where(.entry-content) .supplement::before,
:where(.entry-content) [class*="is-style-supplement-"]::before,
:where(.entry-content) [class*="stk-list-icon--"] > li::before {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: var(--picico-legacy-icon-size, 1.15em);
	height: var(--picico-legacy-icon-size, 1.15em);
	background-color: currentColor;
	-webkit-mask: var(--picico-legacy-icon, none) center / contain no-repeat;
	mask: var(--picico-legacy-icon, none) center / contain no-repeat;
}

/* ==========================================================================
 * 1. 吹き出し .voice
 *
 * [voice] ショートコードと静的ブロック wp-block-stk-plugin-voicecomment が
 * 同じ構造を出す（behavior-spec §1）。
 *   .voice{.l|.r}{.big}{.comment_* | .fb | .line}{.icon_*}
 *     > figure.icon > img.voice_icon__img + figcaption.name
 *     > div.voicecomment
 * ========================================================================== */

:where(.entry-content) .voice {
	/* 既定はピンク（[voice] の既定 = comment_pink） */
	--picico-legacy-voice-bg: var(--picico-legacy-pink-pale);
	--picico-legacy-voice-border: #f0c2d3;
	--picico-legacy-voice-icon-border: var(--picico-color-border);
	--picico-legacy-voice-icon-size: 52px;

	display: flex;
	align-items: flex-start;
	gap: var(--picico-space-sm);
}

@media (min-width: 600px) {
	:where(.entry-content) .voice {
		--picico-legacy-voice-icon-size: 64px;
	}
}

/* 左右。クラスが無いときは左（旧 [voice] の既定）。 */
.voice.r {
	flex-direction: row-reverse;
}

/* --- アイコン --- */

:where(.entry-content) .voice > .icon {
	display: flex;
	/* 本文が長いと flex で潰れるので、縮まないことを明示する。 */
	flex: 0 0 var(--picico-legacy-voice-icon-size);
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: var(--picico-legacy-voice-icon-size);
	margin: 0;
	padding: 0;
}

.voice .voice_icon__img {
	display: block;
	width: var(--picico-legacy-voice-icon-size);
	height: var(--picico-legacy-voice-icon-size);
	border: 2px solid var(--picico-legacy-voice-icon-border);
	border-radius: 50%;
	object-fit: cover;
	background-color: var(--picico-color-surface-alt);
}

:where(.entry-content) .voice .name {
	margin: 0;
	color: var(--picico-color-text-muted);
	font-size: var(--picico-font-size-xs);
	line-height: 1.3;
	text-align: center;
	word-break: break-word;
}

/* アイコンの枠色 */
.voice.icon_blue {
	--picico-legacy-voice-icon-border: var(--picico-legacy-blue);
}

.voice.icon_red {
	--picico-legacy-voice-icon-border: var(--picico-legacy-red);
}

.voice.icon_yellow {
	--picico-legacy-voice-icon-border: #e3b430;
}

.voice.icon_black {
	--picico-legacy-voice-icon-border: var(--picico-legacy-black);
}

/* --- 吹き出し本体 --- */

:where(.entry-content) .voice .voicecomment {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--picico-space-sm) var(--picico-space-md);
	border: 1px solid var(--picico-legacy-voice-border);
	border-radius: var(--picico-radius-md);
	background-color: var(--picico-legacy-voice-bg);
	font-size: var(--picico-font-size-sm);
}

/* 本文中の段落が離れすぎないように、吹き出しの中だけ間隔を詰める。 */
:where(.entry-content) .voice .voicecomment > * + * {
	margin-block-start: 0.8em;
}

/*
 * 三角。外側（枠色）を ::before、内側（背景色）を ::after で重ねる。
 * 1px の枠を残したまま尖らせるにはこの 2 枚重ねが一番素直。
 */
:where(.entry-content) .voice .voicecomment::before,
:where(.entry-content) .voice .voicecomment::after {
	content: "";
	position: absolute;
	top: 18px;
	width: 0;
	height: 0;
	border: 8px solid transparent;
}

:where(.entry-content) .voice .voicecomment::before {
	left: -16px;
	border-right-color: var(--picico-legacy-voice-border);
}

:where(.entry-content) .voice .voicecomment::after {
	left: -14px;
	border-right-color: var(--picico-legacy-voice-bg);
}

.voice.r .voicecomment::before {
	left: auto;
	right: -16px;
	border-right-color: transparent;
	border-left-color: var(--picico-legacy-voice-border);
}

.voice.r .voicecomment::after {
	left: auto;
	right: -14px;
	border-right-color: transparent;
	border-left-color: var(--picico-legacy-voice-bg);
}

/* --- 色のバリエーション --- */

.voice.comment_yellow {
	--picico-legacy-voice-bg: var(--picico-legacy-yellow-pale);
	--picico-legacy-voice-border: #ecd9a4;
}

.voice.comment_gray {
	--picico-legacy-voice-bg: var(--picico-legacy-gray-pale);
	--picico-legacy-voice-border: var(--picico-color-border);
}

.voice.comment_white {
	--picico-legacy-voice-bg: var(--picico-color-surface);
	--picico-legacy-voice-border: var(--picico-color-border);
}

.voice.fb {
	--picico-legacy-voice-bg: var(--picico-legacy-blue-pale);
	--picico-legacy-voice-border: #bcd5ef;
}

.voice.line {
	--picico-legacy-voice-bg: #eaf7ec;
	--picico-legacy-voice-border: #bfe3c6;
}

/* 幅広（[voice type="big"]）。文字を 1 段大きく、余白を広く。 */
:where(.entry-content) .voice.big .voicecomment {
	padding: var(--picico-space-md) var(--picico-space-lg);
	font-size: var(--picico-font-size-md);
}

/* ==========================================================================
 * 2. ボックス .cbox / is-style-*_box
 *
 *   .cbox{.intitle}{.is-style-*}{.type_normal|.type_simple}
 *     > .box_title > span.span__box_title
 *     > .cboxcomment
 *
 * is-style-*_box は wp-block-group にも付くので、両方で受ける。
 * ========================================================================== */

/* 色だけを先に決める。:where() を使うので specificity はクラス 1 個分。 */
:where(.cbox, .wp-block-group, .wp-block-column).is-style-pink_box {
	--picico-legacy-box-color: var(--picico-legacy-pink);
	--picico-legacy-box-bg: var(--picico-legacy-pink-pale);
}

:where(.cbox, .wp-block-group, .wp-block-column).is-style-green_box {
	--picico-legacy-box-color: var(--picico-legacy-green);
	--picico-legacy-box-bg: var(--picico-legacy-green-pale);
}

:where(.cbox, .wp-block-group, .wp-block-column).is-style-blue_box {
	--picico-legacy-box-color: var(--picico-legacy-blue);
	--picico-legacy-box-bg: var(--picico-legacy-blue-pale);
}

:where(.cbox, .wp-block-group, .wp-block-column).is-style-yellow_box {
	--picico-legacy-box-color: var(--picico-legacy-yellow);
	--picico-legacy-box-bg: var(--picico-legacy-yellow-pale);
}

:where(.cbox, .wp-block-group, .wp-block-column).is-style-red_box {
	--picico-legacy-box-color: var(--picico-legacy-red);
	--picico-legacy-box-bg: var(--picico-legacy-red-pale);
}

:where(.cbox, .wp-block-group, .wp-block-column).is-style-glay_box {
	--picico-legacy-box-color: var(--picico-legacy-gray);
	--picico-legacy-box-bg: var(--picico-legacy-gray-pale);
}

:where(.cbox, .wp-block-group, .wp-block-column).is-style-black_box {
	--picico-legacy-box-color: var(--picico-legacy-black);
	--picico-legacy-box-bg: var(--picico-legacy-black-pale);
}

:where(.cbox, .wp-block-group, .wp-block-column).is-style-site_color {
	--picico-legacy-box-color: var(--picico-color-primary);
	--picico-legacy-box-bg: var(--picico-color-primary-pale);
}

/* 枠そのもの。色は上で決まった変数から。既定はサイトカラー。 */
:where(.entry-content) .cbox,
:where(.entry-content) .wp-block-group.is-style-pink_box,
:where(.entry-content) .wp-block-group.is-style-green_box,
:where(.entry-content) .wp-block-group.is-style-blue_box,
:where(.entry-content) .wp-block-group.is-style-yellow_box,
:where(.entry-content) .wp-block-group.is-style-red_box,
:where(.entry-content) .wp-block-group.is-style-glay_box,
:where(.entry-content) .wp-block-group.is-style-black_box,
:where(.entry-content) .wp-block-group.is-style-site_color {
	padding: var(--picico-space-md);
	border: 2px solid var(--picico-legacy-box-color, var(--picico-color-primary));
	border-radius: var(--picico-radius-md);
	background-color: var(--picico-color-surface);
}

/* タイトル付き（.intitle）はタイトル帯のぶん上の余白を詰める。 */
:where(.entry-content) .cbox.intitle {
	padding-block-start: 0;
}

:where(.entry-content) .cbox .box_title {
	margin-inline: calc(var(--picico-space-md) * -1);
	margin-block-end: var(--picico-space-md);
	padding: 0.5em var(--picico-space-md);
	border-radius: calc(var(--picico-radius-md) - 2px) calc(var(--picico-radius-md) - 2px) 0 0;
	background-color: var(--picico-legacy-box-color, var(--picico-color-primary));
	color: var(--picico-color-surface);
	font-size: var(--picico-font-size-md);
	font-weight: var(--picico-font-weight-bold);
	line-height: 1.5;
}

/* type_simple: 帯を塗らず、色文字 + 下線だけにする。 */
:where(.entry-content) .cbox.type_simple {
	border-width: 1px;
	background-color: var(--picico-legacy-box-bg, var(--picico-color-primary-pale));
}

:where(.entry-content) .cbox.type_simple .box_title {
	margin-inline: 0;
	padding-inline: 0;
	padding-block-start: var(--picico-space-md);
	border-radius: 0;
	border-bottom: 1px solid var(--picico-legacy-box-color, var(--picico-color-primary));
	background-color: transparent;
	color: var(--picico-legacy-box-color, var(--picico-color-primary));
}

/* 中身の間隔。 */
:where(.entry-content) .cboxcomment > * + * {
	margin-block-start: 1em;
}

/* ==========================================================================
 * 3. 補足 .supplement / is-style-supplement-*
 *
 *   [aside type="warning|boader"] → <div class="supplement warning">
 *   ブロック版 → <p class="is-style-supplement-hint">
 * ========================================================================== */

:where(.entry-content) .supplement,
:where(.entry-content) [class*="is-style-supplement-"] {
	--picico-legacy-note-color: var(--picico-color-text-muted);
	--picico-legacy-note-bg: var(--picico-color-surface-alt);
	--picico-legacy-icon: url("../svg/info.svg");

	position: relative;
	padding: var(--picico-space-sm) var(--picico-space-sm) var(--picico-space-sm) 2.9em;
	border: 1px solid var(--picico-legacy-note-color);
	border-radius: var(--picico-radius-sm);
	background-color: var(--picico-legacy-note-bg);
	font-size: var(--picico-font-size-sm);
}

:where(.entry-content) .supplement::before,
:where(.entry-content) [class*="is-style-supplement-"]::before {
	position: absolute;
	left: 0.9em;
	top: 1.05em;
	color: var(--picico-legacy-note-color);
}

:where(.entry-content) .supplement > * + *,
:where(.entry-content) .cboxcomment .supplement > * + * {
	margin-block-start: 0.8em;
}

/* --- 種別 --- */

.is-style-supplement-normal {
	--picico-legacy-note-color: var(--picico-color-primary);
	--picico-legacy-note-bg: var(--picico-color-primary-pale);
	--picico-legacy-icon: url("../svg/info.svg");
}

.is-style-supplement-memo {
	--picico-legacy-note-color: var(--picico-legacy-gray);
	--picico-legacy-note-bg: var(--picico-legacy-gray-pale);
	--picico-legacy-icon: url("../svg/pencil.svg");
}

.is-style-supplement-hint {
	--picico-legacy-note-color: var(--picico-legacy-yellow);
	--picico-legacy-note-bg: var(--picico-legacy-yellow-pale);
	--picico-legacy-icon: url("../svg/lightbulb.svg");
}

.is-style-supplement-succes {
	--picico-legacy-note-color: var(--picico-legacy-green);
	--picico-legacy-note-bg: var(--picico-legacy-green-pale);
	--picico-legacy-icon: url("../svg/check-circle.svg");
}

.supplement.warning,
.is-style-supplement-warning {
	--picico-legacy-note-color: var(--picico-legacy-red);
	--picico-legacy-note-bg: var(--picico-legacy-red-pale);
	--picico-legacy-icon: url("../svg/alert-triangle.svg");
}

/* 枠だけ（[aside type="boader"] は STORK の綴りのまま）。アイコンは出さない。 */
.supplement.boader,
.is-style-supplement-border {
	--picico-legacy-note-color: var(--picico-color-border);
	--picico-legacy-note-bg: transparent;
	--picico-legacy-icon: none;
}

:where(.entry-content) .supplement.boader,
:where(.entry-content) .is-style-supplement-border {
	padding-inline-start: var(--picico-space-sm);
	color: inherit;
}

/* 枠だけの種別はアイコンの箱ごと消す（mask が none だと四角が残るため）。 */
:where(.entry-content) .supplement.boader::before,
:where(.entry-content) .is-style-supplement-border::before {
	content: none;
}

/* ==========================================================================
 * 4. マーカー
 *
 * 旧: .marker_yellow_hoso / .marker_pink_hoso（クラシック）
 * 新: .pre--maker.span-stk-maker-yellow など
 * ========================================================================== */

.span-stk-maker-yellow,
.span-stk-maker-pink,
.span-stk-maker-blue,
.span-stk-maker-green,
.span__stk_maker_yellow,
.span__stk_maker_pink,
.span__stk_maker_blue,
.marker_yellow_hoso,
.marker_pink_hoso {
	/* 下半分だけを塗る。行間 1.9 でも文字に食い込まない位置にしてある。 */
	background-image: linear-gradient(transparent 58%, var(--picico-legacy-marker, var(--picico-legacy-marker-yellow)) 58%);
	background-repeat: repeat-x;
	padding-block-end: 0.05em;
}

.span-stk-maker-yellow,
.span__stk_maker_yellow {
	--picico-legacy-marker: var(--picico-legacy-marker-yellow);
}

.span-stk-maker-pink,
.span__stk_maker_pink {
	--picico-legacy-marker: var(--picico-legacy-marker-pink);
}

.span-stk-maker-blue,
.span__stk_maker_blue {
	--picico-legacy-marker: var(--picico-legacy-marker-blue);
}

.span-stk-maker-green {
	--picico-legacy-marker: var(--picico-legacy-marker-green);
}

/* 旧クラシックの「細」マーカーは帯を薄くする。 */
.marker_yellow_hoso,
.marker_pink_hoso {
	background-image: linear-gradient(transparent 68%, var(--picico-legacy-marker) 68%);
}

.marker_yellow_hoso {
	--picico-legacy-marker: var(--picico-legacy-marker-yellow);
}

.marker_pink_hoso {
	--picico-legacy-marker: var(--picico-legacy-marker-pink);
}

/* ==========================================================================
 * 5. ラベル span-stk-label-*
 * ========================================================================== */

[class*="span-stk-label-"] {
	display: inline-block;
	padding: 0.15em 0.6em;
	border: 1px solid var(--picico-legacy-label-bg, var(--picico-color-primary));
	border-radius: var(--picico-radius-sm);
	background-color: var(--picico-legacy-label-bg, var(--picico-color-primary));
	color: var(--picico-legacy-label-text, var(--picico-color-surface));
	font-size: var(--picico-font-size-xs);
	font-weight: var(--picico-font-weight-bold);
	line-height: 1.5;
}

.span-stk-label-sitecolor {
	--picico-legacy-label-bg: var(--picico-color-primary);
}

.span-stk-label-yellow {
	--picico-legacy-label-bg: #f0b429;
	--picico-legacy-label-text: var(--picico-color-ink);
}

.span-stk-label-red {
	--picico-legacy-label-bg: var(--picico-legacy-red);
}

.span-stk-label-pink {
	--picico-legacy-label-bg: var(--picico-legacy-pink);
}

.span-stk-label-green {
	--picico-legacy-label-bg: var(--picico-legacy-green);
}

.span-stk-label-blue {
	--picico-legacy-label-bg: var(--picico-legacy-blue);
}

.span-stk-label-gray {
	--picico-legacy-label-bg: var(--picico-legacy-gray);
}

.span-stk-label-black {
	--picico-legacy-label-bg: var(--picico-legacy-black);
}

/* 枠だけ。 */
.span-stk-label-border {
	border-color: var(--picico-color-border);
	background-color: transparent;
	color: var(--picico-color-text-muted);
}

/* ==========================================================================
 * 6. 文字サイズ span-stk-fs-*
 * ========================================================================== */

.span-stk-fs-sub,
.span-stk-fs-ss {
	font-size: var(--picico-font-size-xs);
}

.span-stk-fs-s {
	font-size: var(--picico-font-size-sm);
}

.span-stk-fs-m {
	font-size: var(--picico-font-size-md);
}

.span-stk-fs-l {
	font-size: var(--picico-font-size-lg);
}

.span-stk-fs-ll {
	font-size: var(--picico-font-size-xl);
}

.span-stk-fs-large {
	font-size: var(--picico-font-size-xxl);
}

/* sub は「補足の小さい文字」なので色も落とす。 */
.span-stk-fs-sub {
	color: var(--picico-color-text-muted);
}

/* ==========================================================================
 * 7. リストアイコン stk-list-icon--*
 *
 * 既定は check01。未知の値でもチェックにフォールバックする。
 * ========================================================================== */

:where(.entry-content) [class*="stk-list-icon--"] {
	--picico-legacy-icon: url("../svg/check.svg");
	--picico-legacy-list-icon-color: var(--picico-color-primary);

	padding-left: 0;
	list-style: none;
}

:where(.entry-content) [class*="stk-list-icon--"] > li {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
}

:where(.entry-content) [class*="stk-list-icon--"] > li::before {
	margin-block-start: 0.35em;
	color: var(--picico-legacy-list-icon-color);
}

.stk-list-icon--check01 {
	--picico-legacy-icon: url("../svg/check.svg");
}

.stk-list-icon--check02 {
	--picico-legacy-icon: url("../svg/check-circle.svg");
}

.stk-list-icon--arrow01 {
	--picico-legacy-icon: url("../svg/chevron-right.svg");
}

.stk-list-icon--arrow02 {
	--picico-legacy-icon: url("../svg/arrow-right.svg");
}

.stk-list-icon--star {
	--picico-legacy-icon: url("../svg/star.svg");
	--picico-legacy-list-icon-color: #e3b430;
}

.stk-list-icon--bell {
	--picico-legacy-icon: url("../svg/bell.svg");
	--picico-legacy-list-icon-color: var(--picico-color-accent);
}

.stk-list-icon--comment {
	--picico-legacy-icon: url("../svg/message.svg");
}

.stk-list-icon--lightbulb {
	--picico-legacy-icon: url("../svg/lightbulb.svg");
	--picico-legacy-list-icon-color: var(--picico-legacy-yellow);
}

.stk-list-icon--good {
	--picico-legacy-icon: url("../svg/thumb-up.svg");
	--picico-legacy-list-icon-color: var(--picico-legacy-green);
}

.stk-list-icon--bad {
	--picico-legacy-icon: url("../svg/thumb-down.svg");
	--picico-legacy-list-icon-color: var(--picico-legacy-red);
}

.stk-list-icon--exclamation1 {
	--picico-legacy-icon: url("../svg/alert-triangle.svg");
	--picico-legacy-list-icon-color: var(--picico-legacy-red);
}

.stk-list-icon--exclamation2 {
	--picico-legacy-icon: url("../svg/alert-circle.svg");
	--picico-legacy-list-icon-color: var(--picico-legacy-red);
}

/* ==========================================================================
 * 8. ボタン
 *
 * 素の .wp-block-button__link は blocks.css が塗る（primary）。
 * ここは [btn] の .btn-wrap と、旧 is-style-* の色違いだけ足す。
 * ========================================================================== */

/* [btn] の出力。中央寄せ + subtext。 */
.btn-wrap {
	display: block;
	text-align: center;
}

.btn-wrap[data-subtext]:not([data-subtext=""])::after {
	content: attr(data-subtext);
	display: block;
	margin-block-start: var(--picico-space-xs);
	color: var(--picico-color-text-muted);
	font-size: var(--picico-font-size-xs);
}

/* 塗りボタン 5 色。色は変数で受けて 1 か所で塗る。 */
.wp-block-button.is-style-rich_yellow,
.wp-block-button.is-style-rich_pink,
.wp-block-button.is-style-rich_orange,
.wp-block-button.is-style-rich_green,
.wp-block-button.is-style-rich_blue,
.wp-block-button.is-style-fill {
	--picico-legacy-btn-bg: var(--picico-color-primary);
	--picico-legacy-btn-bg-hover: var(--picico-color-primary-dark);
	--picico-legacy-btn-text: var(--picico-color-surface);
}

.wp-block-button.is-style-rich_yellow {
	--picico-legacy-btn-bg: #f0b429;
	--picico-legacy-btn-bg-hover: #d29a13;
	--picico-legacy-btn-text: var(--picico-color-ink);
}

.wp-block-button.is-style-rich_pink {
	--picico-legacy-btn-bg: var(--picico-legacy-pink);
	--picico-legacy-btn-bg-hover: #bc4272;
}

.wp-block-button.is-style-rich_orange {
	--picico-legacy-btn-bg: var(--picico-color-accent-fill);
	--picico-legacy-btn-bg-hover: var(--picico-color-accent-dark);
}

.wp-block-button.is-style-rich_green {
	--picico-legacy-btn-bg: var(--picico-color-primary);
	--picico-legacy-btn-bg-hover: var(--picico-color-primary-dark);
}

.wp-block-button.is-style-rich_blue {
	--picico-legacy-btn-bg: var(--picico-legacy-blue);
	--picico-legacy-btn-bg-hover: #2f6ba5;
}

.wp-block-button.is-style-rich_yellow .wp-block-button__link,
.wp-block-button.is-style-rich_pink .wp-block-button__link,
.wp-block-button.is-style-rich_orange .wp-block-button__link,
.wp-block-button.is-style-rich_green .wp-block-button__link,
.wp-block-button.is-style-rich_blue .wp-block-button__link,
.wp-block-button.is-style-fill .wp-block-button__link {
	background-color: var(--picico-legacy-btn-bg);
	color: var(--picico-legacy-btn-text);
	box-shadow: var(--picico-shadow-sm);
}

.wp-block-button.is-style-rich_yellow .wp-block-button__link:hover,
.wp-block-button.is-style-rich_pink .wp-block-button__link:hover,
.wp-block-button.is-style-rich_orange .wp-block-button__link:hover,
.wp-block-button.is-style-rich_green .wp-block-button__link:hover,
.wp-block-button.is-style-rich_blue .wp-block-button__link:hover,
.wp-block-button.is-style-fill .wp-block-button__link:hover {
	background-color: var(--picico-legacy-btn-bg-hover);
	color: var(--picico-legacy-btn-text);
}

/* ストライプ。塗りの上に薄い斜線を重ねる。 */
.wp-block-button.is-style-stripe .wp-block-button__link {
	background-color: var(--picico-legacy-btn-bg, var(--picico-color-primary));
	background-image: repeating-linear-gradient(
		-45deg,
		rgb(255 255 255 / 16%) 0,
		rgb(255 255 255 / 16%) 5px,
		transparent 5px,
		transparent 10px
	);
	color: var(--picico-color-surface);
}

/* 大きいボタン。.wp-block-buttons / .wp-block-button のどちらに付いても効かせる。 */
.wp-block-buttons.is-style-big .wp-block-button__link,
.wp-block-button.is-style-big .wp-block-button__link,
.btn-wrap.big .wp-block-button__link {
	padding: 1em 2em;
	font-size: var(--picico-font-size-lg);
}

/*
 * .stk-shiny-button / .stk-bound-button は STORK の光る・跳ねるアニメーション。
 * PICICO では **アニメーションを付けない**（D-013 / ブリーフ）。
 * クラスが残っていても通常のボタンとして読めるので、ここには何も書かない。
 */

/* ==========================================================================
 * 9. 見出し背景・旧パレット色
 * ========================================================================== */

/* is-style-simple_bg-*。article.css の h2 の帯より強くするためタグ + クラスで受ける。 */
:where(.entry-content) :is(h1, h2, h3, h4, h5, h6).is-style-simple_bg-gray,
:where(.entry-content) :is(h1, h2, h3, h4, h5, h6).is-style-simple_bg-sitecolor,
:where(.entry-content) :is(h1, h2, h3, h4, h5, h6).is-style-simple_bg-sitecolor_rgba,
:where(.entry-content) :is(h1, h2, h3, h4, h5, h6).is-style-simple_bg-stripe {
	padding: 0.6em 0.8em;
	border: 0;
	border-radius: var(--picico-radius-sm);
}

:where(.entry-content) :is(h1, h2, h3, h4, h5, h6).is-style-simple_bg-gray {
	background-color: var(--picico-color-surface-alt);
	color: var(--picico-color-ink);
}

:where(.entry-content) :is(h1, h2, h3, h4, h5, h6).is-style-simple_bg-sitecolor {
	background-color: var(--picico-color-primary);
	color: var(--picico-color-surface);
}

:where(.entry-content) :is(h1, h2, h3, h4, h5, h6).is-style-simple_bg-sitecolor_rgba {
	background-color: var(--picico-color-primary-pale);
	color: var(--picico-color-primary-dark);
}

:where(.entry-content) :is(h1, h2, h3, h4, h5, h6).is-style-simple_bg-stripe {
	background-color: var(--picico-color-surface-alt);
	background-image: repeating-linear-gradient(
		-45deg,
		var(--picico-color-surface) 0,
		var(--picico-color-surface) 4px,
		transparent 4px,
		transparent 8px
	);
	color: var(--picico-color-ink);
}

/* 見出しの装飾を消す指定（STORK の「スタイルなし」）。 */
:where(.entry-content) :is(h1, h2, h3, h4, h5, h6).is-style-stylenone {
	padding: 0;
	border: 0;
	background: none;
}

/* 下線だけの見出し。 */
:where(.entry-content) :is(h2, h3, h4).is-style-style__section_ttl__border_under {
	padding: 0 0 0.3em;
	border: 0;
	border-bottom: 2px solid var(--picico-color-primary);
	border-radius: 0;
	background: none;
}

/* --- 旧パレット（D-004 の Legacy Color） --- */

.has-mainttlbg-color {
	color: var(--picico-legacy-stork-cyan);
}

.has-mainttlbg-background-color {
	background-color: var(--picico-legacy-stork-cyan);
}

.has-stk-palette-three-color {
	color: var(--picico-legacy-palette-three);
}

.has-stk-palette-three-background-color {
	background-color: var(--picico-legacy-palette-three);
}

.has-stk-palette-nine-color {
	color: var(--picico-legacy-palette-nine);
}

.has-stk-palette-nine-background-color {
	background-color: var(--picico-legacy-palette-nine);
}

/* ==========================================================================
 * 10. 画像装飾
 * ========================================================================== */

.wp-block-image.is-style-stk_shadow_s img,
.is-style-stk_shadow_s > img {
	box-shadow: var(--picico-shadow-md);
}

.wp-block-image.is-style-stk_shadow_l img,
.is-style-stk_shadow_l > img {
	box-shadow: var(--picico-shadow-lg);
}

/* ブラウザ枠。上にバーを足して、3 つの点を描く。 */
.wp-block-image.is-style-stk_frame_browser,
.is-style-stk_frame_browser {
	position: relative;
	padding-block-start: 1.75rem;
	border: 1px solid var(--picico-color-border);
	border-radius: var(--picico-radius-sm);
	background-color: var(--picico-color-surface-alt);
	overflow: hidden;
}

.wp-block-image.is-style-stk_frame_browser::before,
.is-style-stk_frame_browser::before {
	content: "";
	position: absolute;
	left: 0.75rem;
	top: 0.6rem;
	width: 2.6rem;
	height: 0.5rem;
	background-image: radial-gradient(circle 0.25rem at 0.25rem 50%, var(--picico-color-border) 98%, transparent 100%),
		radial-gradient(circle 0.25rem at 1.3rem 50%, var(--picico-color-border) 98%, transparent 100%),
		radial-gradient(circle 0.25rem at 2.35rem 50%, var(--picico-color-border) 98%, transparent 100%);
}

.wp-block-image.is-style-stk_frame_browser img,
.is-style-stk_frame_browser img {
	display: block;
	width: 100%;
	border-radius: 0;
}

/*
 * is-style-stk_instant / is-style-stk_clip_* は装飾が無くても読めるので素通し。
 * 何も書かない（クラスが残っていても既定の画像として表示される）。
 */

/* ==========================================================================
 * 11. 段落装飾
 * ========================================================================== */

/* マイクロコピー: ボタンの上に置く小さな煽り文。両側に「\ /」を描く。 */
:where(.entry-content) .is-style-p_microcopy {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	color: var(--picico-color-text-muted);
	font-size: var(--picico-font-size-sm);
	font-weight: var(--picico-font-weight-bold);
	text-align: center;
}

:where(.entry-content) .is-style-p_microcopy::before,
:where(.entry-content) .is-style-p_microcopy::after {
	content: "";
	width: 1px;
	height: 1.2em;
	background-color: currentColor;
}

:where(.entry-content) .is-style-p_microcopy::before {
	transform: rotate(-20deg);
}

:where(.entry-content) .is-style-p_microcopy::after {
	transform: rotate(20deg);
}

/* 吹き出し風の段落。しっぽは下辺の左寄り。 */
:where(.entry-content) .is-style-balloon-border,
:where(.entry-content) .is-style-balloon-sitecolor,
:where(.entry-content) .is-style-p_balloon_bottom {
	--picico-legacy-balloon-bg: var(--picico-color-surface);
	--picico-legacy-balloon-border: var(--picico-color-border);

	position: relative;
	margin-block-end: calc(var(--picico-space-sm) + 10px);
	padding: var(--picico-space-sm) var(--picico-space-md);
	border: 1px solid var(--picico-legacy-balloon-border);
	border-radius: var(--picico-radius-md);
	background-color: var(--picico-legacy-balloon-bg);
}

:where(.entry-content) .is-style-balloon-sitecolor {
	--picico-legacy-balloon-bg: var(--picico-color-primary-pale);
	--picico-legacy-balloon-border: var(--picico-color-primary-light);
}

:where(.entry-content) .is-style-balloon-border::before,
:where(.entry-content) .is-style-balloon-sitecolor::before,
:where(.entry-content) .is-style-p_balloon_bottom::before,
:where(.entry-content) .is-style-balloon-border::after,
:where(.entry-content) .is-style-balloon-sitecolor::after,
:where(.entry-content) .is-style-p_balloon_bottom::after {
	content: "";
	position: absolute;
	left: 2em;
	width: 0;
	height: 0;
	border: 9px solid transparent;
}

:where(.entry-content) .is-style-balloon-border::before,
:where(.entry-content) .is-style-balloon-sitecolor::before,
:where(.entry-content) .is-style-p_balloon_bottom::before {
	bottom: -18px;
	border-top-color: var(--picico-legacy-balloon-border);
}

:where(.entry-content) .is-style-balloon-border::after,
:where(.entry-content) .is-style-balloon-sitecolor::after,
:where(.entry-content) .is-style-p_balloon_bottom::after {
	bottom: -16px;
	border-top-color: var(--picico-legacy-balloon-bg);
}

/* 付箋。紙をめくったような右下の影と、左上のテープ。 */
:where(.entry-content) .is-style-sticky-note {
	position: relative;
	padding: var(--picico-space-md);
	border: 1px solid var(--picico-color-border);
	border-radius: 2px;
	background-color: var(--picico-color-surface-warm);
	box-shadow: var(--picico-shadow-md);
	font-size: var(--picico-font-size-sm);
}

:where(.entry-content) .is-style-sticky-note::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -0.5rem;
	width: 4.5rem;
	height: 1rem;
	transform: translateX(-50%) rotate(-2deg);
	background-color: rgb(34 40 42 / 8%);
	border-radius: 2px;
}

/* 縫い目風・左線。 */
:where(.entry-content) .is-style-stitch-sitecolor {
	padding: var(--picico-space-sm) var(--picico-space-md);
	border: 2px dashed var(--picico-color-primary-light);
	border-radius: var(--picico-radius-sm);
	background-color: var(--picico-color-primary-pale);
}

:where(.entry-content) .is-style-border-sitecolor,
:where(.entry-content) .is-style-stk_border {
	padding-inline-start: var(--picico-space-sm);
	border-left: var(--picico-border-width-accent) solid var(--picico-color-primary);
}

/* 引用のサイトカラー。 */
:where(.entry-content) blockquote.is-style-sitecolor {
	border-left-color: var(--picico-color-primary);
	background-color: var(--picico-color-primary-pale);
	color: inherit;
}

/* ==========================================================================
 * 12. アコーディオン / FAQ / ステップ
 * ========================================================================== */

/* --- アコーディオン（checkbox + label。JS なしで開閉する） --- */

:where(.entry-content) .accordion {
	border: 1px solid var(--picico-color-border);
	border-radius: var(--picico-radius-sm);
	overflow: hidden;
}

.accordion .accordion_check {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
}

:where(.entry-content) .accordion .accordion_label {
	display: flex;
	align-items: center;
	gap: 0.6em;
	min-height: var(--picico-tap-size);
	padding: var(--picico-space-xs) var(--picico-space-sm);
	background-color: var(--picico-color-primary-pale);
	color: var(--picico-color-primary-dark);
	font-weight: var(--picico-font-weight-bold);
	cursor: pointer;
}

.accordion .accordion_label::before {
	content: "▶";
	flex: 0 0 auto;
	font-size: 0.75em;
	transition: transform var(--picico-duration-base) var(--picico-easing);
}

.accordion .accordion_check:checked + .accordion_label::before {
	transform: rotate(90deg);
}

/* キーボード操作でどこを触っているか分かるようにする。 */
.accordion .accordion_check:focus-visible + .accordion_label {
	outline: 2px solid var(--picico-color-focus);
	outline-offset: -2px;
}

/*
 * 閉じている状態。高さ 0 + overflow:hidden。
 * 「不具合を display:none で隠す」のとは別で、開閉そのものが目的。
 */
:where(.entry-content) .accordion .accordion_content {
	max-height: 0;
	padding-inline: var(--picico-space-sm);
	overflow: hidden;
	transition: max-height var(--picico-duration-base) var(--picico-easing);
}

:where(.entry-content) .accordion .accordion_check:checked ~ .accordion_content {
	max-height: 200em;
	padding-block: var(--picico-space-sm);
}

@media (prefers-reduced-motion: reduce) {
	.accordion .accordion_content,
	.accordion .accordion_label::before {
		transition: none;
	}
}

/* --- FAQ（dl.oc-faq > dt.oc-faq__title + dd.oc-faq__comment） --- */

:where(.entry-content) .oc-faq {
	margin-block: var(--picico-space-md);
	padding: var(--picico-space-sm) var(--picico-space-md);
	border: 1px solid var(--picico-color-border);
	border-radius: var(--picico-radius-md);
	background-color: var(--picico-color-surface);
}

:where(.entry-content) .oc-faq__title,
:where(.entry-content) .oc-faq__comment {
	position: relative;
	margin: 0;
	padding-inline-start: 2.4em;
}

:where(.entry-content) .oc-faq__title {
	font-weight: var(--picico-font-weight-bold);
}

:where(.entry-content) .oc-faq__comment {
	margin-block-start: var(--picico-space-sm);
	padding-block-start: var(--picico-space-sm);
	border-top: 1px solid var(--picico-color-border);
	font-size: var(--picico-font-size-sm);
}

:where(.entry-content) .oc-faq__comment > * + * {
	margin-block-start: 0.8em;
}

.oc-faq__title::before,
.oc-faq__comment::before {
	position: absolute;
	left: 0;
	top: 0.15em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.8em;
	height: 1.8em;
	border-radius: var(--picico-radius-sm);
	font-size: 0.85em;
	font-weight: var(--picico-font-weight-bold);
	line-height: 1;
}

.oc-faq__title::before {
	content: "Q";
	background-color: var(--picico-color-primary);
	color: var(--picico-color-surface);
}

.oc-faq__comment::before {
	content: "A";
	top: calc(var(--picico-space-sm) + 0.15em);
	background-color: var(--picico-color-accent-fill);
	color: var(--picico-color-surface);
}

/* バッジの形。faq-icon--maru は丸、kadomaru（既定）は角丸。 */
.oc-faq.faq-icon--maru .oc-faq__title::before,
.oc-faq.faq-icon--maru .oc-faq__comment::before {
	border-radius: 50%;
}

/* 点線枠のバリエーション。 */
:where(.entry-content) .oc-faq.is-style-faq_type_border__dot {
	border-style: dashed;
}

/* --- ステップ --- */

:where(.entry-content) .stk_step {
	counter-reset: picico-legacy-step var(--first_num, 0);
	display: grid;
	gap: var(--picico-space-md);
}

:where(.entry-content) .stk_step__child {
	counter-increment: picico-legacy-step;
	position: relative;
	padding-inline-start: var(--picico-space-md);
	border-left: 2px solid var(--picico-color-primary-light);
}

:where(.entry-content) .stk_step__label {
	display: flex;
	align-items: baseline;
	gap: 0.4em;
	margin-block-end: var(--picico-space-xs);
	color: var(--picico-color-primary-dark);
	font-weight: var(--picico-font-weight-bold);
	line-height: 1.2;
}

.stk_step__label .__labeltext {
	font-size: var(--picico-font-size-xs);
	letter-spacing: 0.08em;
}

/* 番号は CSS カウンタ。--first_num が開始値（旧ブロックが style 属性で持つ）。 */
.stk_step__label::after {
	content: counter(picico-legacy-step);
	font-size: var(--picico-font-size-lg);
}

:where(.entry-content) .stk_step__content > * + * {
	margin-block-start: 0.8em;
}

/* ==========================================================================
 * 13. 表示制御
 * ========================================================================== */

/*
 * stk-wow-* は STORK が初期 opacity:0 にして JS でフェードインさせていた。
 * PICICO では JS を入れないので **何も書かない**。常に見えているのが正しい。
 * （ここに opacity の指定を足すと、旧記事が真っ白になる）
 */

/* 書き手が意図して出し分けているもの。SP / PC の切り替え。 */
@media (max-width: 767px) {
	.stk-hidden_sp {
		display: none;
	}
}

@media (min-width: 768px) {
	.stk-hidden_pc {
		display: none;
	}
}

.stk-hidden_all {
	display: none;
}

/* ==========================================================================
 * 14. 関連記事 .related_article / 記事リスト .cat_postlist
 *
 * picico-core の legacy-compat（Worker C、commit 7d1578a〜c82d9b4）が出す構造。
 * C は旧クラスと PICICO のカードクラスを **併記** する:
 *
 *   <div class="related_article typecard pc-card pc-card--row">
 *     <a class="related_article__link no-icon pc-card__area" href>
 *       <figure class="eyecatch of-cover thum pc-thumb">…</figure>
 *       <div class="related_article__meta archives_post__meta inbox pc-card__body">
 *         <div class="related_article__ttl ttl pc-card__title">
 *           <span class="labeltext">関連記事</span>タイトル</div>
 *         <time class="time__date gf pc-card__meta">…</time>
 *       </div>
 *     </a>
 *   </div>
 *
 * 枠・余白・文字色は archive.css の .pc-card / .pc-thumb / .pc-card__title …
 * がすでに持っている。**ここでは足りない分だけを書く**。足りないのは 2 つ:
 *   1. カード全体を <a> が包むので、archive.css の .pc-card--row の
 *      grid-template-columns が当たらない（grid の親がカードではなく a）
 *   2. 旧クラスにしか無い部品（labeltext / blog_card__* / post__views / type*）
 * ========================================================================== */

/* --- 1. grid を <a class="pc-card__area"> に移す --- */

.related_article.pc-card,
.cat_postlist__li.pc-card {
	display: block;
}

.pc-card__area {
	display: grid;
	gap: var(--picico-space-sm);
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.pc-card--row > .pc-card__area {
	grid-template-columns: 35% minmax(0, 1fr);
	align-items: start;
}

@media (min-width: 26.25rem) {
	.pc-card--row > .pc-card__area {
		grid-template-columns: 40% minmax(0, 1fr);
	}
}

.pc-card--stack > .pc-card__area {
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
}

/* .pc-card__link と違い a が全面なので、擬似要素の当たり判定は要らない。 */
.pc-card__area:hover .pc-card__title,
.pc-card__area:hover .ttl {
	color: var(--picico-color-primary);
	text-decoration: underline;
}

/* --- 2. type によるレイアウトの差 --- */

/*
 * C は related を常に pc-card--row、postlist を常に pc-card--stack で出す。
 * 旧属性 type= の指定はここで上書きする（連結形: typecard / typesimple / typetext）。
 */
.related_article.typecard > .pc-card__area,
.related_article.typetext > .pc-card__area {
	grid-template-columns: minmax(0, 1fr);
}

.cat_postlist.typesimple .cat_postlist__li > .pc-card__area {
	grid-template-columns: 35% minmax(0, 1fr);
	align-items: start;
}

/* 広い画面で写真ばかりにならないよう、simple のサムネイルは頭打ちにする。 */
@media (min-width: 48rem) {
	.cat_postlist.typesimple .cat_postlist__li > .pc-card__area {
		grid-template-columns: 9rem minmax(0, 1fr);
	}
}

/* text 型はサムネイルを使わない。 */
.related_article.typetext .pc-thumb,
.cat_postlist.typetext .pc-thumb {
	display: none;
}

.cat_postlist.typetext .cat_postlist__li > .pc-card__area {
	grid-template-columns: minmax(0, 1fr);
}

/* --- 3. 旧クラスにしか無い部品 --- */

/* 「関連記事」「あわせて読みたい」ラベル。タイトルの上に小さく出す。 */
.related_article .labeltext,
.related_article .blog_card__caption,
.related_article .blog_card__sitename {
	display: block;
	margin-block-end: 0.25em;
	color: var(--picico-color-primary-dark);
	font-size: var(--picico-font-size-xs);
	font-weight: var(--picico-font-weight-bold);
}

.related_article.labelnone .labeltext {
	display: none;
}

/* ブログカードの抜粋。archive.css の .pc-card__excerpt と同じ詰め方にする。 */
.related_article .blog_card__excerpt {
	margin-block-start: var(--picico-space-xs);
	color: var(--picico-color-text-muted);
	font-size: var(--picico-font-size-sm);
}

/* 外部 URL の OGP 取得に失敗したときのリンクだけの表示。 */
.blog_card--fallback {
	padding: var(--picico-space-sm);
	border: 1px dashed var(--picico-color-border);
	border-radius: var(--picico-radius-sm);
	background-color: var(--picico-color-surface-alt);
	font-size: var(--picico-font-size-sm);
	word-break: break-all;
}

/* 記事 ID が間違っているときのメッセージ。目立たせすぎない。 */
.related_article__error {
	padding: var(--picico-space-xs) var(--picico-space-sm);
	border-left: var(--picico-border-width-accent) solid var(--picico-color-attention);
	background-color: var(--picico-color-surface-alt);
	color: var(--picico-color-text-muted);
	font-size: var(--picico-font-size-sm);
}

/* 閲覧数。日付（.pc-card__meta）と同じ見た目にそろえる。 */
.cat_postlist .post__views,
.related_article .post__views {
	color: var(--picico-color-text-muted);
	font-size: var(--picico-font-size-xs);
}

/* カテゴリラベル（figure の中に重ねる）。 */
.cat_postlist .pc-thumb {
	position: relative;
}

.cat_postlist .pc-thumb .cat-name {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 0.15em 0.6em;
	background-color: var(--picico-color-primary);
	color: var(--picico-color-surface);
	font-size: var(--picico-font-size-xs);
}

/* 新着マーク。 */
.cat_postlist .ttl.newmark::before,
.related_article .ttl.newmark::before {
	content: "NEW";
	display: inline-block;
	margin-inline-end: 0.5em;
	padding: 0.1em 0.4em;
	border-radius: var(--picico-radius-sm);
	background-color: var(--picico-color-accent-fill);
	color: var(--picico-color-surface);
	font-size: var(--picico-font-size-xs);
}

/* --- 4. .cat_postlist の列組み --- */

/*
 * C は wrapper に pc-card-list（display:grid）を付けるが、wrapper の直下は
 * <ul> と「もっと見る」ボタンなので、grid は <ul> 側に要る。
 * wrapper は素直にブロックに戻す。
 */
.cat_postlist.pc-card-list {
	display: block;
}

.cat_postlist .cat_postlist__ul {
	display: grid;
	gap: var(--picico-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * card 型だけ複数列。列幅は旧ブロックがインライン変数で持っている
 * （--stk-postlist_column_sp / _tb / _pc、"50%" のような % 値）。
 * gap のぶんを引いてから auto-fill に渡すと、その % どおりの列数になる。
 * 狭い端末で潰れないよう 9rem を下限にしてある。
 */
.cat_postlist.typecard .cat_postlist__ul {
	grid-template-columns: repeat(
		auto-fill,
		minmax(max(9rem, calc(var(--stk-postlist_column_sp, 100%) - var(--picico-space-sm))), 1fr)
	);
}

@media (min-width: 48rem) {
	.cat_postlist.typecard .cat_postlist__ul {
		grid-template-columns: repeat(
			auto-fill,
			minmax(max(9rem, calc(var(--stk-postlist_column_tb, 50%) - var(--picico-space-sm))), 1fr)
		);
	}
}

@media (min-width: 64rem) {
	.cat_postlist.typecard .cat_postlist__ul {
		grid-template-columns: repeat(
			auto-fill,
			minmax(max(9rem, calc(var(--stk-postlist_column_pc, 25%) - var(--picico-space-sm))), 1fr)
		);
	}
}

.cat_postlist .cat_postlist__li {
	margin: 0;
}

/* 「もっと見る」ボタン。components.css の .pc-btn--outline に見た目をそろえる。 */
.cat_postlist__btn {
	margin-block-start: var(--picico-space-sm);
	text-align: center;
}

.cat_postlist__btn .pc-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--picico-tap-size);
	padding: 0.7em 1.5em;
	border: var(--picico-border-width) solid var(--picico-color-primary);
	border-radius: var(--picico-radius-sm);
	color: var(--picico-color-primary);
	font-weight: var(--picico-font-weight-bold);
	text-decoration: none;
}

.cat_postlist__btn .pc-button:hover {
	background-color: var(--picico-color-primary-pale);
	color: var(--picico-color-primary-dark);
}

/* サイドバーの人気記事ウィジェット（class="mode_widget"）は 1 列で詰める。 */
.cat_postlist.mode_widget .cat_postlist__ul {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--picico-space-xs);
}

/* --- 5. [open] のアコーディオン（details）と改行ショートコード --- */

/*
 * 旧ブロックの .accordion（checkbox 版）と同じ見た目にそろえる。
 * こちらは <details> なので開閉は CSS 不要。
 */
:where(.entry-content) .accordion--legacy {
	padding: 0;
	border: 1px solid var(--picico-color-border);
	border-radius: var(--picico-radius-sm);
	overflow: hidden;
}

:where(.entry-content) .accordion--legacy > .accordion__title {
	display: flex;
	align-items: center;
	gap: 0.6em;
	min-height: var(--picico-tap-size);
	padding: var(--picico-space-xs) var(--picico-space-sm);
	background-color: var(--picico-color-primary-pale);
	color: var(--picico-color-primary-dark);
	font-weight: var(--picico-font-weight-bold);
	cursor: pointer;
	list-style: none;
}

/* Safari の既定の三角を消して、自前の ▶ にそろえる。 */
.accordion--legacy > .accordion__title::-webkit-details-marker {
	display: none;
}

.accordion--legacy > .accordion__title::before {
	content: "▶";
	flex: 0 0 auto;
	font-size: 0.75em;
	transition: transform var(--picico-duration-base) var(--picico-easing);
}

.accordion--legacy[open] > .accordion__title::before {
	transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
	.accordion--legacy > .accordion__title::before {
		transition: none;
	}
}

:where(.entry-content) .accordion--legacy > .accordion__body {
	padding: var(--picico-space-sm);
}

:where(.entry-content) .accordion--legacy > .accordion__body > * + * {
	margin-block-start: 0.8em;
}

/* [pcbr] / [spbr]。書き手が意図した改行なので、幅で出し分ける。 */
@media (max-width: 767px) {
	br.pcbr {
		display: none;
	}
}

@media (min-width: 768px) {
	br.spbr {
		display: none;
	}
}

/* ==========================================================================
 * 15. 旧「追加CSS」からの移植（custom_css 22650）
 *
 * これは STORK のコードではなく picico 自身が書いた資産（docs/PHASE3-互換一覧.md §F）。
 * 元の CSS にあった優先度の力技（important 指定）を外し、
 * 色は tokens.css に寄せて書き直してある。
 * ========================================================================== */

/* --- AppReach（アプリ紹介カード。28 記事） --- */

:where(.entry-content) .appreach {
	display: flow-root;
	padding: var(--picico-space-sm);
	border: 1px solid var(--picico-color-border);
	border-radius: var(--picico-radius-md);
	text-align: left;
}

:where(.entry-content) .appreach p {
	margin: 0;
}

/* AppReach 内のリンクは本文リンクの下線・外部アイコンを付けない。 */
:where(.entry-content) .appreach a::after {
	content: none;
}

:where(.entry-content) .appreach__icon {
	float: left;
	width: 25%;
	max-width: 120px;
	height: auto;
	margin: 0 3% 0 0;
	border-radius: 10%;
}

:where(.entry-content) .appreach__detail {
	display: flow-root;
	max-width: 72%;
	font-size: var(--picico-font-size-md);
	line-height: 1.5;
}

:where(.entry-content) .appreach__name {
	max-height: 3em;
	overflow: hidden;
	font-size: var(--picico-font-size-md);
	font-weight: var(--picico-font-weight-bold);
	line-height: 1.5;
}

:where(.entry-content) .appreach__info {
	color: var(--picico-color-text-muted);
	font-size: var(--picico-font-size-xs);
}

.appreach__developper,
.appreach__price {
	margin-inline-end: 0.5em;
}

.appreach__posted a {
	margin-inline-start: 0.5em;
}

:where(.entry-content) .appreach__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--picico-space-xs);
	clear: both;
	margin-block-start: var(--picico-space-xs);
}

:where(.entry-content) .appreach__aslink img,
:where(.entry-content) .appreach__gplink img {
	width: auto;
	height: 40px;
	border-radius: 0;
}

.appreach__star {
	position: relative;
	display: inline-block;
	width: 5em;
	height: 1.5em;
	font-size: var(--picico-font-size-sm);
}

.appreach__star__base {
	position: absolute;
	color: var(--picico-color-text-muted);
}

.appreach__star__evaluate {
	position: absolute;
	overflow: hidden;
	white-space: nowrap;
	color: #e3b430;
}

/* 旧「追加CSS」の汎用ラッパー。 */
.steamwrap {
	text-align: center;
}

/* --- 店長吹き出し .picico-balloon（72 記事） --- */

:where(.entry-content) .picico-balloon {
	--picico-legacy-bl-border: #b5d9cc;
	--picico-legacy-bl-bg: var(--picico-color-surface);
	--picico-legacy-bl-strong: var(--picico-color-primary);
	--picico-legacy-bl-icon-size: 52px;

	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 0;
	border: 0;
	background: none;
}

@media (min-width: 600px) {
	:where(.entry-content) .picico-balloon {
		--picico-legacy-bl-icon-size: 64px;
	}
}

:where(.entry-content) .picico-balloon .bl-icon {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 0;
}

:where(.entry-content) .picico-balloon .bl-icon img {
	display: block;
	width: var(--picico-legacy-bl-icon-size);
	height: var(--picico-legacy-bl-icon-size);
	border: 2.5px solid var(--picico-legacy-bl-border);
	border-radius: 50%;
	object-fit: cover;
}

.picico-balloon .bl-icon span {
	color: var(--picico-color-primary);
	font-size: var(--picico-font-size-xs);
	font-weight: var(--picico-font-weight-bold);
	line-height: 1.2;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

:where(.entry-content) .picico-balloon .bl-body {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	padding: 14px 18px;
	border: 1.5px solid var(--picico-legacy-bl-border);
	border-radius: 4px var(--picico-radius-md) var(--picico-radius-md) var(--picico-radius-md);
	background-color: var(--picico-legacy-bl-bg);
	box-shadow: var(--picico-shadow-sm);
}

:where(.entry-content) .picico-balloon .bl-body::before,
:where(.entry-content) .picico-balloon .bl-body::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
}

:where(.entry-content) .picico-balloon .bl-body::before {
	top: 16px;
	left: -10px;
	border-width: 7px 10px 7px 0;
	border-color: transparent var(--picico-legacy-bl-border) transparent transparent;
}

:where(.entry-content) .picico-balloon .bl-body::after {
	top: 17px;
	left: -8px;
	border-width: 6px 9px 6px 0;
	border-color: transparent var(--picico-legacy-bl-bg) transparent transparent;
}

:where(.entry-content) .picico-balloon .bl-body p {
	margin: 0;
	padding: 0;
	font-size: var(--picico-font-size-sm);
	line-height: 1.85;
}

:where(.entry-content) .picico-balloon .bl-body p + p {
	margin-block-start: 8px;
}

.picico-balloon .bl-body strong {
	color: var(--picico-legacy-bl-strong);
}

.picico-balloon.green {
	--picico-legacy-bl-border: #b5d9cc;
	--picico-legacy-bl-bg: #e8f5f0;
	--picico-legacy-bl-strong: var(--picico-color-primary-dark);
}

.picico-balloon.orange {
	--picico-legacy-bl-border: #f5c4a8;
	--picico-legacy-bl-bg: var(--picico-color-accent-pale);
	--picico-legacy-bl-strong: var(--picico-color-accent-dark);
}

/*
 * --- #picico-wrap の見出しリセット ---
 * 自作 HTML パーツの中では、テーマの h2/h3 の帯や下線を出さない。
 * ID セレクタの specificity を持ち込まないよう :where() で包む。
 * legacy.css は article.css より後に読むので、これで上書きできる。
 */
:where(#picico-wrap) :is(h1, h2, h3, h4) {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

:where(#picico-wrap) :is(h1, h2, h3, h4)::before {
	content: none;
}