@charset "utf-8";
/*
Skin Name: Komiflo Dark
Description: 黒基調＋マゼンタアクセントのダークスキン。一覧をカバー画像前面のカードグリッドに。トップ最上部の FANZA Sale Banner をヒーロー帯化。FANZA Post Tools のダーク記事と対で使う想定。エディタ非侵食版。
Skin URI: https://kurokollc.com/
Author: KUROKO LLC
Author URI: https://kurokollc.com/
Version: 1.8.0
Priority: 10
*/

/* Komiflo Dark — フロント専用の枠にだけ効くよう限定（button/input/a の全体指定は
   ブロックエディタへ漏れて編集画面を壊すため使わない）。 */

:root {
	--kf-bg: #191a1e;
	--kf-surface: #212228;
	--kf-surface2: #2a2c34;
	--kf-border: #34363f;
	--kf-text: #e8e8ee;
	--kf-muted: #9a9aa6;
	--kf-accent: #ff2f78;
	--kf-accent-ink: #ff7aa8;
}

/* ---------- 地（フロントの body クラス＆ラッパーに限定：wp-admin には無い） ---------- */
body.home,
body.blog,
body.archive,
body.single,
body.page,
body.search,
body.error404,
#wrap,
#content,
.content {
	background-color: var(--kf-bg) !important;
	color: var(--kf-text);
}

/* ---------- 本文・見出し・リンク（#content 配下に限定） ---------- */
#content,
#content p,
#content li,
#content dd,
#content dt,
#content td,
#content th,
#content figcaption,
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
	color: var(--kf-text) !important;
}
#content a {
	color: var(--kf-accent-ink);
}
#content a:hover {
	color: var(--kf-accent);
}
#content hr {
	border-color: var(--kf-border) !important;
}

/* 記事の内側ラッパーの白背景を除去（タイトル帯が白く残り、明色タイトルが消えるのを防ぐ）。
   #main はID、他は #content 配下に限定＝ブロックエディタには効かない。 */
#main,
#main-column,
.main-column,
#content .article,
#content article,
#content .post,
#content .entry-content {
	background-color: transparent !important;
}

/* プラグインのボタン文字は白を維持（#content a のリンク色に負けさせない）。 */
#content a.fpt-btn,
#content a.fpt-coupon-banner {
	color: #ffffff !important;
}

/* ---------- ヘッダー ---------- */
#header,
.header-container,
#header-container,
#navi,
.navi-in {
	background-color: #16171b !important;
	color: var(--kf-text) !important;
	border-color: var(--kf-border) !important;
}
#navi ul li a,
#site-title a,
.site-name-text,
.tagline {
	color: var(--kf-text) !important;
}
#navi ul li a:hover {
	background-color: #26282f !important;
	color: var(--kf-accent-ink) !important;
}

/* ---------- フッター ---------- */
#footer,
.footer-in {
	background-color: #141519 !important;
	color: var(--kf-muted) !important;
	border-color: var(--kf-border) !important;
}
#footer a {
	color: var(--kf-muted) !important;
}

/* ---------- サイドバー・ウィジェット（#sidebar 配下に限定） ---------- */
/* ウィジェットの白背景・枠・影を消してダークに（PC版で白箱が残るのを防ぐ）。 */
#sidebar,
#sidebar .widget,
#sidebar .sidebar-scroll {
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--kf-text) !important;
}
#sidebar .widget li,
#sidebar .widget p,
#sidebar .widget dd,
#sidebar .widget dt,
#sidebar .widget span {
	color: var(--kf-text) !important;
}
#sidebar a {
	color: var(--kf-accent-ink) !important;
}
/* 見出しバーは面色で残す */
#sidebar .widget-sidebar-title,
#sidebar h3 {
	background-color: var(--kf-surface) !important;
	color: var(--kf-text) !important;
	border-color: var(--kf-border) !important;
}
/* 検索窓 */
#sidebar input[type="text"],
#sidebar input[type="search"] {
	background-color: var(--kf-surface2) !important;
	color: var(--kf-text) !important;
	border-color: var(--kf-border) !important;
}

/* ---------- 一覧をカードグリッドに（フロント専用クラス） ---------- */
#content .list {
	display: grid !important;
	grid-template-columns: repeat( auto-fill, minmax( 180px, 1fr ) );
	gap: 16px;
	background: transparent !important;
}
.entry-card,
.entry-card-wrap,
.a-wrap {
	background-color: var(--kf-surface) !important;
	border: 1px solid var(--kf-border) !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	box-shadow: none !important;
	margin: 0 !important;
	transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.entry-card:hover,
.entry-card-wrap:hover,
.a-wrap:hover {
	transform: translateY( -3px );
	border-color: var(--kf-accent) !important;
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.6 );
}
.entry-card-thumb,
.card-thumb {
	margin: 0 !important;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}
.entry-card-thumb img,
.card-thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 0 !important;
}
.entry-card-content,
.card-content {
	padding: 10px 12px !important;
}
.entry-card-title,
.card-title {
	color: var(--kf-text) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}
.entry-card-snippet,
.card-snippet {
	display: none !important;
}
.entry-card .cat-label,
.entry-card .new-mark {
	background-color: var(--kf-accent) !important;
	color: #ffffff !important;
	border: 0 !important;
}

/* ---------- 本文内のボタン（#content 配下のみ） ---------- */
#content .wp-block-button__link,
#content .btn {
	background-color: var(--kf-accent) !important;
	color: #ffffff !important;
	border: 0 !important;
}

/* ---------- ページネーション・パンくず（フロント限定） ---------- */
#content .pagination a,
#content .page-numbers,
#content .breadcrumb,
#content .breadcrumb a {
	background-color: var(--kf-surface) !important;
	color: var(--kf-text) !important;
	border-color: var(--kf-border) !important;
}
#content .page-numbers.current {
	background-color: var(--kf-accent) !important;
	color: #ffffff !important;
}

/* ---------- 夏の同人祭り ヒーロー帯（FANZA Sale Banner の [fanza_sale_banner] 出力） ----------
   出力構造： <div class="fsb-banner-wrap" style="text-align:center;margin:1em 0;"> …DMMバナー… </div>
   .fsb-banner-wrap はショートコードのフロント出力にしか付かない＝エディタに漏れない。 */
/* 全ページ共通：はみ出しを止めて中央寄せするだけ（枠は付けない）。
   記事ページ等でウィジェットに置いても余計な線が出ないようにする。 */
#content .fsb-banner-wrap {
	margin: 1em 0;
	overflow: hidden !important;              /* 640px バナーの横あふれを止める（横スクロール防止） */
	text-align: center;
}
/* トップ（body.home）だけヒーロー帯として枠を付ける。 */
body.home #content .fsb-banner-wrap {
	background-color: var(--kf-surface) !important;
	border: 1px solid var(--kf-accent) !important;
	border-radius: 14px !important;
	padding: 14px !important;
	margin: 0 0 20px !important;
	box-shadow: 0 0 0 1px rgba( 255, 47, 120, 0.15 ), 0 8px 24px rgba( 0, 0, 0, 0.5 );
}
/* DMM ウィジェットが最終的に img / a / iframe のどれで描かれても枠内に収める。 */
#content .fsb-banner-wrap ins.widget-banner,
#content .fsb-banner-wrap iframe,
#content .fsb-banner-wrap a,
#content .fsb-banner-wrap img {
	max-width: 100% !important;
	height: auto !important;
	display: inline-block;
	vertical-align: top;
	border-radius: 8px;
}
@media ( max-width: 600px ) {
	body.home #content .fsb-banner-wrap {
		padding: 10px !important;
		margin: 0 0 14px !important;
		border-radius: 12px !important;
	}
}

/* ---------- ジャンル別 横スクロール棚（[fanza_genre_shelf] の出力） ----------
   出力： section.fpt-shelf > .fpt-shelf-head(h2.fpt-shelf-title + a.fpt-shelf-more)
          + .fpt-shelf-track > a.fpt-shelf-card( .fpt-shelf-thumb>img + .fpt-shelf-name )
   .fpt-shelf 系はショートコードのフロント出力にしか付かない＝エディタに漏れない。 */
#content .fpt-shelf {
	margin: 0 0 26px;
}
#content .fpt-shelf-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 12px;
}
#content .fpt-shelf-title {
	margin: 0 !important;
	padding: 0 0 0 12px !important;
	font-size: 17px !important;
	line-height: 1.3 !important;
	color: var(--kf-text) !important;
	border-left: 4px solid var(--kf-accent) !important;
	background: transparent !important;
}
#content a.fpt-shelf-more {
	flex: 0 0 auto;
	font-size: 12px;
	color: var(--kf-accent-ink) !important;
	white-space: nowrap;
}
#content a.fpt-shelf-more:hover {
	color: var(--kf-accent) !important;
}
/* 横スクロールのトラック。スナップ付き。 */
#content .fpt-shelf-track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 2px 2px 10px;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--kf-surface2) transparent;
}
#content .fpt-shelf-track::-webkit-scrollbar {
	height: 8px;
}
#content .fpt-shelf-track::-webkit-scrollbar-thumb {
	background: var(--kf-surface2);
	border-radius: 8px;
}
#content .fpt-shelf-track::-webkit-scrollbar-track {
	background: transparent;
}
/* カード（グリッドの .entry-card と同じ質感で揃える）。 */
#content a.fpt-shelf-card {
	flex: 0 0 auto;
	width: 148px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	background-color: var(--kf-surface) !important;
	border: 1px solid var(--kf-border) !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	color: var(--kf-text) !important;
	text-decoration: none !important;
	transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#content a.fpt-shelf-card:hover {
	transform: translateY( -3px );
	border-color: var(--kf-accent) !important;
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.6 );
}
#content .fpt-shelf-thumb {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background-color: var(--kf-surface2);
}
#content .fpt-shelf-thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 0 !important;
	display: block;
}
#content .fpt-shelf-name {
	padding: 8px 10px 10px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--kf-text) !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media ( max-width: 600px ) {
	#content a.fpt-shelf-card {
		width: 128px;
	}
	#content .fpt-shelf-title {
		font-size: 15px !important;
	}
}

/* ---------- 記事末尾の関連棚（[the_content 自動注入] .fpt-related） ---------- */
#content .fpt-related {
	margin-top: 30px;
	padding-top: 22px;
	border-top: 1px solid var(--kf-border);
}
#content .fpt-related .fpt-shelf:last-child {
	margin-bottom: 0;
}

/* ---------- 一覧カードの崩れ修正＋表紙表示（Cocoon thumb-wide 打ち消し・実機検証済み） ----------
   thumb-wide が .entry-card-thumb を float:left/width:320px、.entry-card-content に margin-left:330px を当て、
   グリッドのカード内で本文が幅0に潰れてタイトルが消えていた。全部リセットして縦積みカードに戻す。
   アイキャッチは fpt_card（3:4上寄せ）で来る想定。imgは上寄せcoverで表紙上部（タイトル/顔）を優先。 */
#content #list,
#content .list {
	display: grid !important;
	grid-template-columns: repeat( auto-fill, minmax( 170px, 1fr ) );
	gap: 16px;
}
#content #list .entry-card-wrap {
	margin: 0 !important;
}
#content #list .entry-card-thumb,
#content #list .card-thumb {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}
#content #list .entry-card-thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: top center !important;
	border-radius: 0 !important;
}
#content #list .entry-card-content {
	float: none !important;
	clear: both !important;
	width: auto !important;
	margin: 0 !important;
	padding: 8px 10px 10px !important;
}
#content #list .entry-card-title {
	margin: 0 !important;
	font-size: 13px !important;
	line-height: 1.45 !important;
	color: var(--kf-text) !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* タイトルのみ：スニペット・下部メタ・管理者専用PV（.admin-pv）は非表示。表紙上の .cat-label は残す。 */
#content #list .entry-card-snippet,
#content #list .entry-card-meta,
#content .admin-pv {
	display: none !important;
}
@media ( max-width: 600px ) {
	#content #list,
	#content .list {
		grid-template-columns: 1fr 1fr !important;
		gap: 10px;
	}
}