/* ============================================================
 * Sound Collective — Catalog ページ ( /catalog ) 専用CSS
 * Figma "/catalog"  PC 1690:27302 (in-person) / 1696:16125 (online)
 *                   SP 1186:17508 / 1186:17511
 * デザイントークンは sc-design-tokens.css の :root を利用。
 * クラスは sc-cat-* で衝突回避。ブランドアクセントは各カードの
 * sc-cat-b-<discipline> が --sc-cat-brand を供給する。
 * ============================================================ */

.sc-catpg {
	--sc-cat-margin: 80px;              /* PC ページ左右マージン */
	--sc-cat-ink: var(--sc-btn-filled-text); /* アクセント上の濃色文字 (#0b0d27) */
	--sc-cat-card-border: #6a6a6a;
	--sc-cat-brand: var(--sc-brand-dj);
	background: var(--sc-bg);
	color: var(--sc-fg);
	font-family: var(--sc-font);
	font-weight: var(--sc-fw-medium);
	line-height: var(--sc-lh);
}
.sc-catpg *, .sc-catpg *::before, .sc-catpg *::after { box-sizing: border-box; }
.sc-catpg h1, .sc-catpg h2, .sc-catpg h3, .sc-catpg p, .sc-catpg dl, .sc-catpg dd { margin: 0; }
.sc-catpg img { max-width: 100%; display: block; }
.sc-catpg a { color: inherit; }

/* ブランドアクセント供給(カテゴリタグ / Program タイトルバー) */
.sc-cat-b-dj          { --sc-cat-brand: var(--sc-brand-dj); }
.sc-cat-b-production  { --sc-cat-brand: var(--sc-brand-production); }
.sc-cat-b-studio      { --sc-cat-brand: var(--sc-brand-studio); }
.sc-cat-b-vocal       { --sc-cat-brand: var(--sc-brand-vocal); }
.sc-cat-b-business    { --sc-cat-brand: var(--sc-brand-business); }
.sc-cat-b-instruments { --sc-cat-brand: var(--sc-white); }
.sc-cat-b-default     { --sc-cat-brand: var(--sc-white); }

/* ============================== Title Area ============================== */
.sc-cat-hero {
	position: relative; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	min-height: 320px; padding: 64px 16px;
}
.sc-cat-hero__bg {
	position: absolute; inset: -40px 0; z-index: 0;
	background: center/cover no-repeat;
	filter: blur(3px); mix-blend-mode: lighten; opacity: .35; pointer-events: none;
}
.sc-cat-hero__inner { position: relative; z-index: 1; text-align: center; }
.sc-cat-hero__title { font-size: 40px; font-weight: var(--sc-fw-bold); line-height: 1.2; color: var(--sc-white); }

/* ============================== TabGroup ============================== */
.sc-cat-tabs {
	display: flex; gap: 4px;
	max-width: 1440px; margin-inline: auto;
	padding: 12px var(--sc-cat-margin) 0;
	border-bottom: 1px solid var(--sc-border-dim);
}
.sc-catpg .sc-cat-tab {
	flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center;
	padding: 12px 8px; margin-bottom: -1px;
	font-size: 16px; font-weight: var(--sc-fw-bold); line-height: 1.4;
	color: var(--sc-fg-secondary); text-decoration: none;
	border-bottom: 2px solid transparent;
}
.sc-catpg .sc-cat-tab:hover { color: var(--sc-fg); }
.sc-catpg .sc-cat-tab.is-active { color: var(--sc-primary); border-bottom-color: var(--sc-primary); }

/* ============================== Description + CardProductType ============================== */
.sc-cat-desc {
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	max-width: 1440px; margin-inline: auto;
	padding: 16px var(--sc-cat-margin);
}
.sc-cat-desc__text {
	max-width: 847px; flex: 1 1 auto;
	font-size: 16px; font-weight: var(--sc-fw-medium); line-height: 1.4; color: var(--sc-fg-secondary);
}

.sc-cat-ptype {
	flex: 0 0 auto; display: flex; align-items: center;
	height: 96px; padding: 16px 0; background: rgba(39,39,39,.2); border-radius: 8px; overflow: hidden;
}
.sc-cat-ptype__item {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
	width: 118px; text-align: center;
}
.sc-cat-ptype__item i { font-size: 22px; color: var(--sc-fg); }
.sc-cat-ptype__item b { font-size: 14px; font-weight: var(--sc-fw-bold); line-height: 1.1; color: var(--sc-fg); }
.sc-cat-ptype__sep { width: 1px; align-self: stretch; background: var(--sc-border-dim); }

/* ============================== Body : sidebar + main ============================== */
.sc-cat-body { display: flex; align-items: flex-start; max-width: 1440px; margin-inline: auto; }

/* ---------- Filter sidebar (PC) / drawer (SP) ---------- */
.sc-cat-filter {
	flex: 0 0 320px; width: 320px;
	padding: 32px 0 32px var(--sc-cat-margin);
	display: flex; flex-direction: column; gap: 20px;
}
.sc-cat-filter__head { display: flex; align-items: center; gap: 12px; }
.sc-cat-count { font-size: 14px; font-weight: var(--sc-fw-bold); color: var(--sc-fg); }
.sc-cat-clear {
	margin-left: auto;
	display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
	background: transparent; border: 1px solid var(--sc-primary); border-radius: var(--sc-radius-pill);
	color: var(--sc-primary); font-family: var(--sc-font); font-size: 12px; font-weight: var(--sc-fw-bold); cursor: pointer;
}
.sc-cat-clear:hover { background: rgba(240,75,80,.12); }
.sc-cat-filter__close {
	display: none; margin-left: 4px;
	width: 28px; height: 28px; border: none; border-radius: 50%;
	background: var(--sc-bg-hover-strong); color: var(--sc-fg); cursor: pointer; font-size: 14px;
}

/* search */
.sc-cat-search {
	display: flex; align-items: center; gap: 8px;
	height: 36px; padding: 0 12px;
	background: var(--sc-bg-bright); border: 1px solid var(--sc-border); border-radius: 8px;
}
.sc-cat-search i { font-size: 14px; color: var(--sc-fg-secondary); }
.sc-cat-search input {
	flex: 1 1 auto; min-width: 0; border: none; background: transparent; outline: none;
	color: var(--sc-fg); font-family: var(--sc-font); font-size: 14px;
}
.sc-cat-search input::placeholder { color: var(--sc-fg-secondary); }

/* filter group */
.sc-cat-group { display: flex; flex-direction: column; gap: 12px; }
.sc-cat-group__head { display: flex; align-items: center; justify-content: space-between; cursor: default; }
.sc-cat-group__title { font-size: 12px; font-weight: var(--sc-fw-bold); color: var(--sc-fg); text-transform: none; }
.sc-cat-group__icon { font-size: 14px; color: var(--sc-fg); cursor: pointer; }
.sc-cat-group.is-collapsed .sc-cat-checks { display: none; }
/* #135 / #136: 閉じているときは **プラス** / 開いているときは **マイナス**。
 * Font Awesome の `.fa-minus::before`(0,1,1) に勝つ specificity(0,3,1)で content を上書きする
 * (JS でアイコンの class を差し替えない。開閉状態の単一ソースは `is-collapsed` のみ)。 */
.sc-cat-group.is-collapsed .sc-cat-group__icon::before { content: "\f067"; } /* fa-plus */

/* checkboxes */
.sc-cat-checks { display: flex; flex-direction: column; }
.sc-cat-check {
	display: flex; align-items: center; gap: 8px;
	min-height: 30px; padding: 4px 0; cursor: pointer;
}

/* #259: Catalog の Category ファセットに子カテゴリ(Music Production by DAW / Instruments by
 * disciplines 等)を復活させたためのインデント。クライアント報告「We lost all of our sub
 * categories (children)」への対応。子は `sc_cat_cat_options()` が depth=1 で返す。 */
.sc-cat-check--child { padding-left: 22px; }
.sc-cat-check--child .sc-cat-check__label { font-size: 14px; opacity: .88; }

/* #260-1: サブカテゴリを持つ親は「親行 + 子グループ」で描画し、**初期は閉じて親行の `+` で開閉**
 * (クライアント指定 2026-07-29 / 参考 = 本番 `/all-online/`)。開閉状態の単一ソースは
 * `.sc-cat-checkgrp.is-collapsed` のみで、**アイコンの ± は下の ::before で切り替える**
 * (JS は class と aria-expanded しか触らない。上の .sc-cat-group と同方針)。 */
.sc-cat-checkgrp,
.sc-cat-subs { display: flex; flex-direction: column; }
.sc-cat-checkrow { display: flex; align-items: center; gap: 4px; }
.sc-cat-checkrow .sc-cat-check { flex: 1 1 auto; min-width: 0; }
.sc-cat-subtoggle {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; padding: 0; border: 0; background: none;
	color: var(--sc-fg); font-size: 12px; cursor: pointer;
}
.sc-cat-subtoggle:hover { color: var(--sc-primary); }
.sc-cat-subtoggle:focus-visible { outline: 2px solid var(--sc-primary); outline-offset: 2px; }
.sc-cat-checkgrp.is-collapsed .sc-cat-subs { display: none; }
/* Font Awesome の `.fa-minus::before`(0,1,1)に勝つ specificity(0,3,1)で content を上書き。 */
.sc-cat-checkgrp.is-collapsed .sc-cat-subtoggle i::before { content: "\f067"; } /* fa-plus */
.sc-cat-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.sc-cat-check__box {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
	width: 20px; height: 20px; border: 1px solid var(--sc-border); border-radius: 4px;
	background: transparent; color: transparent; font-size: 11px;
}
.sc-cat-check input:checked + .sc-cat-check__box { background: var(--sc-primary); border-color: var(--sc-primary); color: var(--sc-white); }
.sc-cat-check input:focus-visible + .sc-cat-check__box { outline: 2px solid var(--sc-primary); outline-offset: 2px; }
.sc-cat-check__label { font-size: 14px; font-weight: var(--sc-fw-medium); color: var(--sc-fg); }

.sc-cat-overlay {
	position: fixed; inset: 0; z-index: 998;
	background: rgba(0,0,0,.6); display: none;
}

/* ---------- Main content ---------- */
.sc-cat-main {
	flex: 1 1 auto; min-width: 0;
	padding: 32px var(--sc-cat-margin) 40px 64px;
	display: flex; flex-direction: column; gap: 16px;
}

/* toolbar */
.sc-cat-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sc-cat-sort, .sc-cat-filterbtn {
	position: relative; display: inline-flex; align-items: center; gap: 6px;
	height: 36px; padding: 0 14px; border-radius: var(--sc-radius-pill); cursor: pointer;
	font-family: var(--sc-font); font-size: 14px; font-weight: var(--sc-fw-bold); line-height: 1.2;
}
.sc-cat-sort { background: var(--sc-bg-hover-strong); border: none; color: var(--sc-fg); }
.sc-cat-sort:hover { background: rgba(255,255,255,.16); }
.sc-cat-sort__select {
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	border: none; background: transparent; outline: none; cursor: pointer;
	color: var(--sc-fg); font-family: var(--sc-font); font-size: 14px; font-weight: var(--sc-fw-bold);
	padding-right: 2px;
}
.sc-cat-sort__select option { color: #0b0d27; }
.sc-cat-filterbtn { background: transparent; border: 1px solid var(--sc-border-invert); color: var(--sc-fg); }
.sc-cat-filterbtn:hover { background: var(--sc-bg-hover-strong); }
.sc-cat-filterbtn__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sc-primary); }

/* PC (issue #32): サイドバーが常時表示のため、SP専用の Filter ドロワーボタンは冗長 → 非表示。
   SP/タブレット(<=1024px)側は下の @media で再表示する。 */
@media (min-width: 1025px) {
	.sc-cat-filterbtn { display: none; }
}

/* active chips */
.sc-cat-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sc-cat-chip {
	display: inline-flex; align-items: center; gap: 4px;
	height: 24px; padding: 0 4px 0 10px; border-radius: var(--sc-radius-pill);
	background: var(--sc-bg-hover-strong); color: var(--sc-fg);
	font-size: 12px; font-weight: var(--sc-fw-bold);
}
.sc-cat-chip button {
	display: inline-flex; align-items: center; justify-content: center;
	width: 16px; height: 16px; border: none; border-radius: 50%;
	background: transparent; color: var(--sc-fg-secondary); cursor: pointer; font-size: 10px;
}
.sc-cat-chip button:hover { color: var(--sc-fg); }

/* card grid — #42/#60 統合(旧 sc-global-overrides.css からここへ一本化)。
 * カード幅を絞り込み件数から独立させるため grid + auto-fill を採用する。列数はビュー
 * ポート基準で決まり、フィルタ件数(=行あたり枚数)が変わってもカード幅は変わらない(#60)。
 * width:100% は Elementor の flex ラッパー内でグリッドコンテナ幅が不定になりトラック数が
 * max 基準に崩れるのを防ぐ(#42 で auto-fill が効かなかった原因の解消。#60)。
 * auto-fill のレンジは minmax(300px, 1fr) 固定。max 側を 400px にしてはいけない
 * (auto-fill のトラック数算出が 400px 基準になり #42 と同じ列数崩れが再発する)。
 * カード最大幅 400px(#42 要件)は下の .sc-cat-card 側 max-width で担保する。
 * auto-fill が幅に応じて 3→2→1 列へ自動的に折り返すため、以前あったブレークポイント別の
 * grid-template-columns 上書きは不要(#60 時点で既に auto-fill が全幅で有効だった)。 */
.sc-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; width: 100%; }

/* ============================== CardClass ============================== */
/* max-width:400px / min-width:0 は #42 のカード最大幅要件と grid アイテムのはみ出し防止。 */
.sc-cat-grid > .sc-cat-card { max-width: 400px; min-width: 0; }
.sc-cat-card {
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--sc-bg-bright); border: 1px solid var(--sc-cat-card-border); border-radius: var(--sc-radius-card);
}
/* #61 クライアントフィルタ: 非該当カードは hidden 属性で除外する。
 * .sc-cat-card{display:flex} が UA の [hidden]{display:none} を上書きしてしまうため、
 * より詳細度の高いこのルールで確実に display:none にする(サムネの先読みも防ぐ)。 */
.sc-cat-card[hidden] { display: none; }
.sc-cat-card__thumb { width: 100%; aspect-ratio: 1920 / 1080; background: #4d4d4d center/cover no-repeat; }
.sc-cat-card__body { display: flex; flex-direction: column; gap: 16px; padding: 16px; flex: 1 1 auto; }
.sc-cat-card__info { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }

/* tags */
.sc-cat-card__tags { display: flex; gap: 4px; }
.sc-cat-tag {
	display: inline-flex; align-items: center; padding: 2px 8px;
	font-size: 12px; font-weight: var(--sc-fw-bold); line-height: 1.2;
}
.sc-cat-tag--cat { background: var(--sc-cat-brand); color: var(--sc-cat-ink); }
.sc-cat-tag--level { background: var(--sc-bg-hover-strong); color: var(--sc-fg); }

/* title */
/* #165: タイトルを2行クランプ。行数差でメタ行(Duration/Schedule/Hours)位置がズレるのを防ぐ。 */
.sc-cat-card__title {
	font-size: 20px; font-weight: var(--sc-fw-bold); line-height: 1.2; color: var(--sc-fg);
	display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sc-cat-card--program .sc-cat-card__title {
	font-size: 24px; padding: 4px 8px;
	background: var(--sc-cat-brand); color: var(--sc-cat-ink);
}

/* stats (In-Person) */
.sc-cat-card__stats {
	display: flex; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--sc-border);
}
.sc-cat-card__stat { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sc-cat-card__stat:nth-child(2) { text-align: center; }
.sc-cat-card__stat:nth-child(3) { text-align: right; }
.sc-cat-card__stat dt { font-size: 12px; font-weight: var(--sc-fw-medium); color: var(--sc-fg-secondary); }
.sc-cat-card__stat dd { font-size: 16px; font-weight: var(--sc-fw-bold); color: var(--sc-fg); white-space: nowrap; }

/* meta (Online) */
.sc-cat-card__meta {
	display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
	padding-bottom: 8px; border-bottom: 1px solid var(--sc-border);
}
.sc-cat-card__author { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sc-cat-card__avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.sc-cat-card__aname { display: flex; flex-direction: column; min-width: 0; font-size: 14px; font-weight: var(--sc-fw-bold); color: var(--sc-fg); }
.sc-cat-card__aname small { font-size: 12px; font-weight: var(--sc-fw-medium); color: var(--sc-fg-secondary); }
.sc-cat-card__hours { display: flex; flex-direction: column; text-align: right; flex: 0 0 auto; font-size: 14px; font-weight: var(--sc-fw-bold); color: var(--sc-fg); }
.sc-cat-card__hours small { font-size: 12px; font-weight: var(--sc-fw-medium); color: var(--sc-fg-secondary); }

/* desc (2-line clamp) */
.sc-cat-card__desc {
	font-size: 12px; font-weight: var(--sc-fw-medium); line-height: 1.4; color: var(--sc-fg-secondary);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* price */
.sc-cat-card__price { display: flex; flex-direction: column; gap: 4px; }
.sc-cat-card__price b { font-size: 20px; font-weight: var(--sc-fw-bold); line-height: 1.2; color: var(--sc-fg); }
.sc-cat-card__price span { font-size: 12px; font-weight: var(--sc-fw-medium); line-height: 1.4; color: var(--sc-fg-secondary); }
.sc-cat-card__price span.sc-cat-card__note--check { display: inline-flex; align-items: center; gap: 4px; color: var(--sc-primary); }
.sc-cat-card__price span.sc-cat-card__note--check::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; }

/* CTA */
.sc-catpg .sc-cat-card__cta {
	align-self: center; display: inline-flex; align-items: center; justify-content: center;
	min-height: 36px; padding: 7px 24px; margin-top: auto;
	background: var(--sc-white); color: var(--sc-btn-filled-text);
	border-radius: var(--sc-radius-pill); text-decoration: none;
	font-size: 14px; font-weight: var(--sc-fw-bold); line-height: 1.2;
}
.sc-catpg .sc-cat-card__cta:hover { background: #fff; color: var(--sc-btn-filled-text); }

/* ============================== Full Program (FP) card — GitHub #46 ==============================
 * Mirrors the /disciplines/ index FP card (sc-disciplines.css .sc-disc-card--bordered):
 * border #9a9a9a, accent-COLORED title text, inset+rounded+shadowed thumb, accent glow
 * top+bottom (lighten, .55), white CTA (already white). Level already "All Levels" and note
 * already "financing available" from sc-catalog.php. Accent = the card's own --sc-cat-brand
 * (set by .sc-cat-b-<brand>). Solo full-width layout is intentionally skipped (catalog is a grid). */
.sc-cat-card--program { --sc-cat-fp-acc: var(--sc-cat-brand); position: relative; border-color: #9a9a9a; }
.sc-cat-card--program .sc-cat-card__thumb {
	position: relative; z-index: 1;
	margin: 8px; width: auto; border-radius: 8px;
	filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.sc-cat-card--program .sc-cat-card__body { position: relative; z-index: 1; }
/* accent-COLORED title text (override the filled bar) */
.sc-cat-card--program .sc-cat-card__title {
	background: none; padding: 0;
	color: var(--sc-cat-fp-acc, var(--sc-primary));
}
/* accent glow, top + bottom */
.sc-cat-card--program::before,
.sc-cat-card--program::after {
	content: ""; position: absolute; left: 50%; right: auto; transform: translateX(-50%);
	width: 150%; height: 200px; z-index: 0; pointer-events: none;
	mix-blend-mode: lighten; opacity: .55;
}
.sc-cat-card--program::before { top: -90px; background: radial-gradient(50% 100% at 50% 0%, var(--sc-cat-fp-acc, transparent) 0%, transparent 72%); }
.sc-cat-card--program::after  { bottom: -90px; background: radial-gradient(50% 100% at 50% 100%, var(--sc-cat-fp-acc, transparent) 0%, transparent 72%); }

/* ============================== Online Subscription banner (#70-1 / #95) ==============================
 * online タブのカード一覧の上に出す導線バナー。単一ソース = #65 保存テンプレ「SC Subscription Banner」
 * (disciplines と同一の見た目)を再利用し、ここでは catalog の main カラム幅に合わせて外形を上書き、
 * disciplines と一貫した glow を付与する。テンプレ未検出時のフォールバック(.sc-cat-sub)も同系で styling。 */
.sc-cat-subwrap { width: 100%; }
/* 共通テンプレ(.sc-sub-banner)の外形上書き: catalog では main カラム幅いっぱい・上下マージンは
 * .sc-cat-main の gap(16px)に委ねる。!important は sc-design-tokens.css の同ルールに勝つため。 */
.sc-cat-subwrap .sc-sub-banner { max-width: none !important; margin: 0 !important; position: relative; overflow: hidden; }
.sc-cat-subwrap .sc-sub-banner > * { position: relative; z-index: 1; }
/* Figma 3918:63700(Subscription Info 列は items-start)。共通テンプレの inner flex 列は既定 align-items:stretch
 * で「Subscription Plans」chip(width-inline heading・container に bg rgba(255,255,255,.1)/radius54px/padding2-8 済)
 * がカード幅いっぱいに伸び、pill が全幅バンド化していた。列を flex-start にして chip を content 幅の pill に戻す。 */
.sc-cat-subwrap .sc-sub-banner .e-con.e-child { align-items: flex-start; }
/* glow: Figma 3918:63700 は下辺中央から立ち上がる暖色(primary #f04b50)の広いグロー。
 * 左下ローカルの旧値から、中央寄せ・広幅・やや強めに更新して Figma に一致させる。 */
.sc-cat-subwrap .sc-sub-banner::after {
	content: ""; position: absolute; left: 50%; transform: translateX(-52%); bottom: -90px; width: 150%; height: 190px; z-index: 0;
	background: radial-gradient(ellipse at center, rgba(240,75,80,.34), transparent 68%);
	filter: blur(26px); mix-blend-mode: lighten; pointer-events: none;
}

/* フォールバックバナー(保存テンプレ未検出時のみ描画)。disciplines の .sc-{p}-sub と同型。 */
.sc-catpg .sc-cat-sub {
	position: relative; overflow: hidden; z-index: 1;
	display: flex; align-items: center; gap: 16px; padding: 12px;
	background: var(--sc-bg-bright); border: 1px solid var(--sc-cat-card-border); border-radius: var(--sc-radius-card);
	text-decoration: none;
}
.sc-cat-sub::after {
	content: ""; position: absolute; left: 50%; transform: translateX(-52%); bottom: -90px; width: 150%; height: 190px; z-index: 0;
	background: radial-gradient(ellipse at center, rgba(240,75,80,.34), transparent 68%);
	filter: blur(26px); mix-blend-mode: lighten; pointer-events: none;
}
.sc-cat-sub__main { position: relative; z-index: 1; flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sc-cat-sub__chip { align-self: flex-start; background: var(--sc-bg-hover-strong); border-radius: 54px; padding: 2px 8px; font-size: 12px; font-weight: var(--sc-fw-medium); color: var(--sc-fg); }
.sc-cat-sub__title { font-size: 20px; font-weight: var(--sc-fw-bold); line-height: 1.4; color: var(--sc-fg); }
.sc-cat-sub__meta { font-size: 12px; font-weight: var(--sc-fw-medium); color: var(--sc-fg-secondary); }
.sc-cat-sub__meta b { color: var(--sc-fg); font-weight: var(--sc-fw-bold); }
.sc-cat-sub__arrow { position: relative; z-index: 1; color: var(--sc-fg); }
.sc-cat-sub__arrow i { font-size: 24px; }

/* ============================== Pagination ============================== */
.sc-cat-pager {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	padding: 40px 0 8px;
}
.sc-catpg .sc-cat-pager__num {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 32px; height: 32px; padding: 0 8px; border-radius: 50%;
	font-size: 14px; font-weight: var(--sc-fw-bold); color: var(--sc-fg); text-decoration: none;
}
.sc-catpg .sc-cat-pager__num:hover { background: var(--sc-bg-hover-strong); }
.sc-catpg .sc-cat-pager__num.is-active { background: var(--sc-primary); color: var(--sc-white); }
.sc-catpg .sc-cat-pager__nav {
	display: inline-flex; align-items: center; gap: 6px; padding: 0 8px;
	font-size: 14px; font-weight: var(--sc-fw-bold); color: var(--sc-fg-secondary); text-decoration: none;
}
.sc-catpg .sc-cat-pager__nav:hover { color: var(--sc-fg); }

/* ============================== Empty state ============================== */
.sc-cat-empty {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	min-height: 320px; padding: 40px; text-align: center; color: var(--sc-fg-secondary);
}
/* 🔴 #260-2: 上の `display: flex`(author)が UA の `[hidden] { display: none }` に**勝ってしまう**ため、
 * PHP / JS が `hidden` を付けても効かず「**結果が出ているのに No classes found も一緒に出る**」状態だった
 * (クライアント指摘 2026-07-29。#61 のカードで踏んだ罠と同型で、上の .sc-cat-card[hidden] と同じ対処)。
 * .sc-cat-chips も同じ理由で空のときに潰れないので、まとめて明示的に打ち消す。 */
.sc-cat-empty[hidden],
.sc-cat-chips[hidden] { display: none; }
.sc-cat-empty i { font-size: 40px; opacity: .5; margin-bottom: 8px; }
.sc-cat-empty__title { font-size: 20px; font-weight: var(--sc-fw-bold); color: var(--sc-fg); }
.sc-cat-empty__text { font-size: 14px; font-weight: var(--sc-fw-medium); }

/* ============================== Tablet (<=1024) : サイドバーをドロワー化 ============================== */
@media (max-width: 1024px) {
	.sc-catpg { --sc-cat-margin: 24px; }

	.sc-cat-filter {
		position: fixed; top: 0; left: 0; z-index: 999;
		width: 320px; max-width: 88vw; height: 100%;
		padding: 24px; background: var(--sc-bg); border-right: 1px solid var(--sc-border-dim);
		overflow-y: auto; transform: translateX(-100%); transition: transform .25s ease;
	}
	.sc-catpg.is-filter-open .sc-cat-filter { transform: translateX(0); }
	.sc-catpg.is-filter-open .sc-cat-overlay { display: block; }
	.sc-cat-filter__close { display: inline-flex; align-items: center; justify-content: center; }

	.sc-cat-main { padding: 24px var(--sc-cat-margin) 40px; }
	/* グリッドの列数は .sc-cat-grid の auto-fill(minmax 300px)が幅に応じて自動調整するため
	 * ブレークポイント別の grid-template-columns 上書きは不要(#134 で削除)。 */
}

/* ============================== Mobile (<=560) ============================== */
@media (max-width: 560px) {
	.sc-cat-hero { min-height: 240px; padding: 48px 16px; }
	.sc-cat-hero__title { font-size: 32px; }

	.sc-cat-tabs { padding: 8px 16px 0; gap: 0; }
	.sc-cat-tab { font-size: 15px; padding: 12px 4px; }

	.sc-cat-desc { flex-direction: column; align-items: stretch; gap: 16px; padding: 16px; }
	.sc-cat-desc__text { text-align: center; max-width: none; }
	.sc-cat-ptype { justify-content: space-between; }
	.sc-cat-ptype__item { width: auto; flex: 1 1 0; }
	/* SP でも auto-fill(minmax 300px)が 1 列に折り返すため grid-template-columns 上書きは不要(#134)。 */
}