/**
 * 作品カード: パターン③（GameWith風・1列リスト想定）
 * 画像: 楽天「第1商品画像」は 400×400 / 700×700 など画素上は正方形（1:1）であることが多い。
 *       正方形でもキャンパス内の書影・アート自体の縦横比は様々なため、枠は1:1のまま
 *       object-fit:contain でトリミングせず収め、余白は背景色で埋める。
 */
.nonalabo-work-cardList{
	display:grid;
	gap:24px;
	margin:24px 0;
	width:100%;
	max-width:100%;
}

.nonalabo-work-cardList--grid{
	grid-template-columns:repeat(2, minmax(0, 1fr));
}

.nonalabo-work-cardList--scroll{
	display:flex;
	overflow-x:auto;
	gap:20px;
	padding:4px 2px 10px;
	scroll-snap-type:x mandatory;
	scroll-snap-stop:always;
	scroll-padding-inline:12px;
	-webkit-overflow-scrolling:touch;
	scrollbar-gutter:stable both-edges;
}

.nonalabo-work-cardList--scroll .nonalabo-work-card{
	flex:0 0 460px;
	scroll-snap-align:start;
}

/* 横スクロールのバーを“邪魔しない”見た目に */
.nonalabo-work-cardList--scroll{
	scrollbar-width:thin;
	scrollbar-color:rgba(0,0,0,.22) transparent;
}
.nonalabo-work-cardList--scroll::-webkit-scrollbar{
	height:10px;
}
.nonalabo-work-cardList--scroll::-webkit-scrollbar-track{
	background:transparent;
}
.nonalabo-work-cardList--scroll::-webkit-scrollbar-thumb{
	background:rgba(0,0,0,.18);
	border-radius:999px;
	border:2px solid transparent;
	background-clip:padding-box;
}
.nonalabo-work-cardList--scroll::-webkit-scrollbar-thumb:hover{
	background:rgba(0,0,0,.26);
	background-clip:padding-box;
}

.nonalabo-empty-message{
	padding:16px;
	background:#f7f7f8;
	border-radius:10px;
	color:#666;
	margin:16px 0;
}

.nonalabo-debug-dump{
	white-space:pre-wrap;
	word-break:break-word;
	font-size:12px;
	line-height:1.55;
	padding:14px 16px;
	background:rgba(0,0,0,.045);
	border:1px solid rgba(0,0,0,.06);
	border-radius:10px;
	margin:16px 0;
}

.nonalabo-work-cardList--simple{
	/* simple はカード自体がリンクなので、リストのgapを少し詰める */
	gap:20px;
}

.nonalabo-work-cardList--grid.nonalabo-work-cardList--simple{
	grid-template-columns:repeat(3, minmax(0, 1fr));
}

.nonalabo-work-cardList--scroll.nonalabo-work-cardList--simple{
	gap:16px;
}

.nonalabo-work-cardList--scroll.nonalabo-work-cardList--simple .nonalabo-work-simpleCard{
	flex:0 0 220px;
	scroll-snap-align:start;
}

.nonalabo-work-simpleCard{
	display:flex;
	flex-direction:column;
	gap:10px;
	text-decoration:none;
	color:inherit;
	padding:10px;
	border-radius:12px;
	background:#fff;
	box-shadow:0 3px 12px rgba(0,0,0,.07);
	transition:transform .15s ease, box-shadow .15s ease;
}
.nonalabo-work-simpleCard:hover{
	transform:translateY(-2px);
	box-shadow:0 8px 22px rgba(0,0,0,.12);
}
.nonalabo-work-simpleCard:focus-visible{
	outline:2px solid rgba(37,99,235,.45);
	outline-offset:3px;
}
.nonalabo-work-simpleCard__media{
	width:100%;
	aspect-ratio:1 / 1;
	border-radius:12px;
	overflow:hidden;
	position:relative;
	background:#f3f5f9;
	border:1px solid rgba(0,0,0,.1);
	box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.nonalabo-work-simpleCard__badge{
	position:absolute;
	top:10px;
	left:10px;
	z-index:2;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	max-width:calc(100% - 20px);
	padding:6px 10px;
	border-radius:999px;
	font-size:12px;
	font-weight:800;
	line-height:1;
	letter-spacing:.02em;
	color:#fff;
	background:#2563eb;
	box-shadow:0 6px 18px rgba(0,0,0,.18);
	text-shadow:0 1px 0 rgba(0,0,0,.12);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.nonalabo-work-simpleCard__badge--anime{
	background:#7c3aed;
}
.nonalabo-work-simpleCard__badge--new{
	background:#ea580c;
}
.nonalabo-work-simpleCard__badge--comic{
	background:#0f766e;
}
.nonalabo-work-simpleCard__badge--pick{
	background:#1d4ed8;
}
.nonalabo-work-simpleCard__cover{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center center;
	display:block;
}
.nonalabo-work-simpleCard__coverPlaceholder{
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:11px;
	letter-spacing:.06em;
	color:rgba(0,0,0,.45);
	background:linear-gradient(145deg, rgba(0,0,0,.07), rgba(0,0,0,.02));
}
.nonalabo-work-simpleCard__title{
	font-size:13px;
	font-weight:800;
	line-height:1.35;
	letter-spacing:-0.01em;
	color:rgba(0,0,0,.9);
	text-align:center;
	display:-webkit-box;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
	overflow:hidden;
	min-height:calc(1.35em * 3);
}

@media (max-width: 768px){
	.nonalabo-work-cardList--grid{
		grid-template-columns:1fr;
	}
	.nonalabo-work-cardList--scroll .nonalabo-work-card{
		flex-basis:82vw;
	}

	.nonalabo-work-cardList--grid.nonalabo-work-cardList--simple{
		grid-template-columns:repeat(2, minmax(0, 1fr));
	}
	.nonalabo-work-cardList--scroll.nonalabo-work-cardList--simple .nonalabo-work-simpleCard{
		flex-basis:64vw;
	}
}

/* トップページの「2列/スクロール」では少しだけコンパクトに見せる */
.nonalabo-work-cardList--grid .nonalabo-work-card{
	padding:14px;
}
.nonalabo-work-cardList--grid .nonalabo-work-card__lead{
	gap:16px;
}
.nonalabo-work-cardList--grid .nonalabo-work-card__media{
	width:clamp(112px, 20vw, 156px);
}
@media (min-width: 980px){
	.nonalabo-work-cardList--grid .nonalabo-work-card__media{
		width:168px;
	}
}

/* scroll はカード幅が固定なので、画像枠も少し控えめに */
.nonalabo-work-cardList--scroll .nonalabo-work-card__media{
	width:clamp(120px, 22vw, 156px);
}

.nonalabo-work-card{
	display:flex;
	flex-direction:column;
	align-items:stretch;
	gap:10px;
	width:100%;
	max-width:100%;
	padding:16px;
	border-radius:12px;
	background:#fff;
	box-shadow:0 4px 14px rgba(0,0,0,.08);
	color:inherit;
	transition:transform .15s ease, box-shadow .15s ease;
	box-sizing:border-box;
}
.nonalabo-work-card:hover{
	transform:translateY(-2px);
	box-shadow:0 8px 22px rgba(0,0,0,.12);
}
.nonalabo-work-card:focus-within{
	box-shadow:0 8px 22px rgba(0,0,0,.12);
}

.nonalabo-work-card__heroLink{
	color:inherit;
	text-decoration:none;
	outline:none;
	border-radius:8px;
}
.nonalabo-work-card__heroLink--thumb{
	display:block;
	flex-shrink:0;
	align-self:flex-start;
}
.nonalabo-work-card__heroLink--head{
	display:block;
	min-width:0;
	padding:0;
	margin:0;
}
.nonalabo-work-card__heroLink:focus-visible{
	outline:2px solid rgba(37,99,235,.45);
	outline-offset:2px;
}

/* --- 先頭行: スクロールなし・タイトル3行＋判定・ストアを縦密度で収める --- */
.nonalabo-work-card__lead{
	display:flex;
	flex-direction:row;
	align-items:flex-start;
	gap:18px;
	width:100%;
	min-width:0;
}

.nonalabo-work-card__leadMain{
	flex:1 1 auto;
	min-width:0;
	display:flex;
	flex-direction:column;
	align-items:stretch;
	justify-content:flex-start;
	gap:8px;
	padding:0;
	margin:0;
}

/* 正方形 1:1 の表示枠。実ファイルも表示も 1:1 だが、書影のアスペクト比は contain で尊重 */
.nonalabo-work-card__media{
	flex:0 0 auto;
	width:clamp(124px, 34vw, 168px);
	aspect-ratio:1 / 1;
	border-radius:10px;
	overflow:hidden;
	background:#f3f5f9;
	border:1px solid rgba(0,0,0,.1);
	box-shadow:0 1px 3px rgba(0,0,0,.06);
	box-sizing:border-box;
}
.nonalabo-work-card__cover{
	width:100%;
	height:100%;
	object-fit:contain;
	object-position:center center;
	display:block;
}
.nonalabo-work-card__coverPlaceholder{
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:11px;
	letter-spacing:.06em;
	color:rgba(0,0,0,.45);
	background:linear-gradient(145deg, rgba(0,0,0,.07), rgba(0,0,0,.02));
}

.nonalabo-work-card__rest{
	display:flex;
	flex-direction:column;
	gap:14px;
	min-width:0;
	width:100%;
}

/* 属性・特徴カラム内: タグ + あらすじ（あらすじはこの幅に収める） */
.nonalabo-work-card__tagsColStack{
	display:flex;
	flex-direction:column;
	gap:12px;
	min-width:0;
	width:100%;
	padding:2px 0 0 4px;
	box-sizing:border-box;
}
@media (min-width: 520px){
	.nonalabo-work-card__tagsColStack{
		padding-inline-start:6px;
	}
}

/* ヘッダー: SWELL等他要素由来の線を打ち消す */
.nonalabo-work-card__header{
	display:flex;
	flex-direction:column;
	gap:5px;
	margin:0;
	padding:0;
	border:none;
	box-shadow:none;
	background:transparent;
}
.nonalabo-work-card__title{
	margin:0!important;
	padding:0;
	border:none!important;
	box-shadow:none!important;
	outline:none;
	font-size:clamp(13px, 3.4vw, 16px);
	line-height:1.24;
	font-weight:800;
	letter-spacing:-0.02em;
	color:rgba(0,0,0,.92);
	text-decoration:none!important;
	display:-webkit-box;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
	overflow:hidden;
	background:none!important;
}
.post_content .nonalabo-work-card .nonalabo-work-card__title,
#main_content .post_content .nonalabo-work-card .nonalabo-work-card__title{
	margin-block-start:0!important;
	margin-block-end:0!important;
}

/*
 * SWELL 等の記事見出し用 ::before / ::after（メインカラーの短線・ベタ線など）が
 * 本文内カードに入った h3 にも効くことがあるので、カード内では明示的にオフ。
 */
.post_content .nonalabo-work-card .nonalabo-work-card__title::before,
.post_content .nonalabo-work-card .nonalabo-work-card__title::after,
#main_content .post_content .nonalabo-work-card .nonalabo-work-card__title::before,
#main_content .post_content .nonalabo-work-card .nonalabo-work-card__title::after,
.nonalabo-work-card .nonalabo-work-card__title::before,
.nonalabo-work-card .nonalabo-work-card__title::after{
	content:none!important;
	display:none!important;
	width:0!important;
	height:0!important;
	margin:0!important;
	padding:0!important;
	border:none!important;
	box-shadow:none!important;
	background:none!important;
}

.nonalabo-work-card__statusRow{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	align-content:center;
	gap:8px 10px;
	margin:0;
	padding:7px 2px 8px;
	min-height:42px;
	box-sizing:border-box;
	border:none;
	box-shadow:none;
	background:rgba(0,0,0,.025);
	border-radius:8px;
}

/* 判定バッジ: 青地・白文字（パターン③） */
.nonalabo-work-card__verdict{
	display:inline-flex;
	align-items:center;
	font-size:12px;
	font-weight:700;
	line-height:1;
	padding:6px 12px;
	border-radius:5px;
	background:#2563eb;
	color:#fff;
	white-space:nowrap;
	box-shadow:none;
	border:none;
	text-decoration:none;
}
.nonalabo-work-card__verdict--good{
	background:#1d4ed8;
}
.nonalabo-work-card__verdict--ok{
	background:#3b82f6;
}
.nonalabo-work-card__verdict--bad{
	background:#64748b;
}
.nonalabo-work-card__verdict--unknown{
	background:#2563eb;
}

.nonalabo-work-card__ratingLine{
	display:inline-flex;
	flex-wrap:wrap;
	align-items:center;
	gap:4px 8px;
	font-size:15px;
	line-height:1.35;
	color:rgba(0,0,0,.78);
	margin:0;
	padding:0;
	border:none;
	box-shadow:none;
	background:transparent;
	text-decoration:none;
}
.nonalabo-work-card__ratingScore{
	color:#ea580c;
	font-size:1.15em;
	line-height:1;
	vertical-align:middle;
}
.nonalabo-work-card__ratingScoreNum{
	font-weight:800;
	font-size:1.12em;
	color:rgba(0,0,0,.9);
	letter-spacing:-0.02em;
	font-variant-numeric:tabular-nums;
}
.nonalabo-work-card__ratingMax{
	color:rgba(0,0,0,.55);
	font-size:.95em;
	font-weight:600;
}
.nonalabo-work-card__ratingCount{
	color:rgba(0,0,0,.52);
	font-size:.95em;
	font-weight:500;
	font-variant-numeric:tabular-nums;
}

/* ヘッダー内ジャンル（最大3・判定・星と同一行で詰める） */
.nonalabo-work-card__genres{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:6px;
	flex:1 1 auto;
	min-width:0;
}
.nonalabo-work-card__genre{
	display:inline-flex;
	align-items:center;
	font-size:11px;
	font-weight:600;
	line-height:1.2;
	padding:4px 9px;
	border-radius:999px;
	background:rgba(100,116,139,.1);
	color:rgba(51,65,85,.95);
	border:1px solid rgba(100,116,139,.22);
	white-space:nowrap;
	max-width:100%;
	overflow:hidden;
	text-overflow:ellipsis;
}

/* 中央: 表 + 属性・特徴（スマホは縦積み、PCは横並び） */
.nonalabo-work-card__mid{
	display:grid;
	grid-template-columns:1fr;
	gap:12px;
	align-items:start;
}
@media (min-width: 520px){
	.nonalabo-work-card__mid{
		/* 左: 基本情報 / 右: 属性〜あらすじ（やや広め） */
		grid-template-columns:minmax(0, 0.88fr) minmax(0, 1.12fr);
		gap:20px;
		align-items:start;
	}
}

/*
 * 基本情報: 表ではなくニュートラルなカード列（ストアの彩り・属性の青タグと差別化）
 */
.nonalabo-work-card__metaDeckWrap{
	min-width:0;
}
.nonalabo-work-card__metaDeckHeading{
	font-size:11px;
	font-weight:700;
	color:rgba(71,85,105,.75);
	text-transform:none;
	letter-spacing:.06em;
	margin:0 0 8px;
	padding:0;
	border:none;
	background:none;
}
.post_content .nonalabo-work-card .nonalabo-work-card__metaDeckHeading::before,
.post_content .nonalabo-work-card .nonalabo-work-card__metaDeckHeading::after,
.nonalabo-work-card .nonalabo-work-card__metaDeckHeading::before,
.nonalabo-work-card .nonalabo-work-card__metaDeckHeading::after{
	content:none!important;
}

.nonalabo-work-card__metaDeck{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:8px;
	margin:0;
	padding:10px 11px;
	border-radius:11px;
	background:linear-gradient(165deg, rgba(248,250,252,.95) 0%, rgba(241,245,249,.98) 100%);
	border:1px solid rgba(226,232,240,.92);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 1px 2px rgba(15,23,42,.035);
	box-sizing:border-box;
}
@media (max-width: 479px){
	.nonalabo-work-card__metaDeck{
		grid-template-columns:1fr;
	}
}

.nonalabo-work-card__metaCard{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:4px;
	margin:0;
	padding:8px 10px;
	border-radius:8px;
	background:rgba(255,255,255,.78);
	border:1px solid rgba(236,239,246,.92);
	box-sizing:border-box;
}

.nonalabo-work-card__metaCardLabel{
	font-size:10px;
	font-weight:700;
	line-height:1.25;
	color:rgba(100,116,139,.92);
	letter-spacing:.05em;
}
.nonalabo-work-card__metaCardValue{
	width:100%;
	font-size:12px;
	font-weight:600;
	line-height:1.45;
	color:rgba(30,41,59,.95);
	word-break:break-word;
}

.nonalabo-work-card__tagsCol{
	min-width:0;
}
.nonalabo-work-card__tagsHeading{
	font-size:12px;
	font-weight:700;
	color:rgba(0,0,0,.72);
	margin:0 0 8px;
}
.nonalabo-work-card__tagsEmpty{
	margin:0;
	font-size:13px;
	color:rgba(0,0,0,.42);
	line-height:1.5;
}

.nonalabo-work-card__attributes{
	list-style:none;
	padding:0;
	margin:0;
	display:flex;
	flex-wrap:wrap;
	gap:8px 10px;
}
.nonalabo-work-card__attribute{
	font-size:11px;
	line-height:1.35;
	padding:7px 12px;
	border-radius:6px;
	border:1px solid rgba(37,99,235,.35);
	background:rgba(37,99,235,.06);
	color:rgba(29,78,216,.95);
}

/* 購入リンク（タイトル横・星評価行に近い視覚重量で並べる） */
.nonalabo-work-card__stores{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	align-items:center;
	align-content:center;
	min-height:40px;
	margin:0;
	padding:6px 2px 2px;
	box-sizing:border-box;
	flex-shrink:0;
	border-radius:8px;
	background:rgba(0,0,0,.02);
}
.nonalabo-work-card__storeBtn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:34px;
	padding:0 13px;
	font-size:12px;
	font-weight:700;
	border-radius:9px;
	text-decoration:none;
	border:1px solid rgba(0,0,0,.12);
	background:rgba(0,0,0,.03);
	color:rgba(0,0,0,.82);
	transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
.nonalabo-work-card__storeBtn:hover{
	background:rgba(0,0,0,.06);
	border-color:rgba(0,0,0,.18);
	transform:translateY(-1px);
}
.nonalabo-work-card__storeBtn:focus-visible{
	outline:2px solid rgba(37,99,235,.45);
	outline-offset:2px;
}
.nonalabo-work-card__storeBtn--amazon{
	border-color:rgba(255,153,0,.35);
	background:rgba(255,153,0,.08);
}
.nonalabo-work-card__storeBtn--rakuten{
	border-color:rgba(191,0,0,.25);
	background:rgba(191,0,0,.06);
}
.nonalabo-work-card__storeBtn--bookwalker{
	border-color:rgba(0,102,204,.28);
	background:rgba(0,102,204,.07);
}

/* あらすじ（属性・特徴カラム内＝右カラム幅のみ） */
.nonalabo-work-card__synopsis{
	margin:0;
	width:100%;
	max-width:100%;
	box-sizing:border-box;
	padding:6px 9px 8px;
	border-radius:6px;
	border:1px solid rgba(0,0,0,.08);
	background:rgba(255,255,255,.96);
}
.nonalabo-work-card__synopsisText{
	margin:0;
	font-size:13px;
	line-height:1.7;
	color:rgba(0,0,0,.78);
	display:-webkit-box;
	-webkit-line-clamp:5;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.nonalabo-work-card__synopsisLinks{
	display:flex;
	flex-wrap:wrap;
	gap:8px 12px;
	margin-top:6px;
	align-items:center;
}
.nonalabo-work-card__synopsisLink{
	font-size:12px;
	font-weight:700;
	color:rgba(29,78,216,.95);
	text-decoration:underline;
	text-underline-offset:2px;
}
.nonalabo-work-card__synopsisLink:hover{
	color:rgba(30,64,175,1);
}
.nonalabo-work-card__synopsisLink--detail{
	font-weight:600;
	color:rgba(0,0,0,.58);
	text-decoration:none;
	border-bottom:1px solid rgba(0,0,0,.2);
}
.nonalabo-work-card__synopsisLink--detail:hover{
	color:rgba(0,0,0,.78);
	border-bottom-color:rgba(0,0,0,.35);
}

/* 編集部短評 */
.nonalabo-work-card__review{
	background:rgba(0,0,0,.055);
	border:1px solid rgba(0,0,0,.06);
	border-radius:8px;
	padding:10px 12px;
}
.nonalabo-work-card__reviewLabel{
	font-size:11px;
	font-weight:700;
	color:rgba(0,0,0,.62);
	margin:0 0 6px;
	letter-spacing:.02em;
}
.nonalabo-work-card__reviewText{
	margin:0;
	font-size:13px;
	line-height:1.65;
	color:rgba(0,0,0,.78);
	display:-webkit-box;
	-webkit-line-clamp:4;
	-webkit-box-orient:vertical;
	overflow:hidden;
}

@media (min-width: 768px){
	.nonalabo-work-card{
		padding:18px 20px;
		gap:12px;
	}
	.nonalabo-work-card__lead{
		gap:22px;
	}
	.nonalabo-work-card__media{
		width:clamp(160px, 22vw, 200px);
		border-radius:12px;
	}
	.nonalabo-work-card__title{
		font-size:clamp(14px, 1.85vw, 17px);
		line-height:1.26;
	}
	.nonalabo-work-card__statusRow{
		min-height:46px;
		padding:8px 4px 9px;
	}
	.nonalabo-work-card__ratingLine{
		font-size:16px;
		gap:5px 9px;
	}
	.nonalabo-work-card__stores{
		min-height:44px;
		padding:8px 2px 3px;
	}
	.nonalabo-work-card__storeBtn{
		min-height:36px;
		padding:0 15px;
		font-size:12px;
	}
}

@media (min-width: 980px){
	.nonalabo-work-card__media{
		width:216px;
	}
	.nonalabo-work-card__title{
		font-size:clamp(14px, 1.5vw, 17px);
		line-height:1.26;
	}
}