/**
 * 相談スレカード（バッジ・ラベル行）
 */

.thread-card__labels {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-2);
}

.thread-card__badges {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	align-items: center;
}

.thread-card__badge {
	display: inline-block;
	padding: 0.125rem var(--space-2);
	font-size: var(--font-size-xs);
	font-weight: 600;
	line-height: 1.25;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	background: var(--color-base-1);
	color: var(--color-text-secondary);
}

.thread-card__badge--hot {
	border-color: var(--color-accent-1);
	color: var(--color-accent-1);
	background: var(--color-base-2);
}

.thread-card__badge--popular {
	border-color: var(--color-main);
	color: var(--color-accent-2);
	background: var(--color-base-2);
}

/*
 * 投稿7日以内のカードに表示する赤文字「New」ラベル（thread-card / article-card 共通）。
 * 旧 .thread-card__badge--new バッジは廃止し、こちらの軽量ラベルに置き換え。
 */
.card-new {
	margin-left: 4px;
	color: var(--color-error);
	font-weight: var(--font-weight-bold);
	font-size: 0.85em;
	letter-spacing: 0.02em;
}

.thread-actions__note {
	margin: var(--space-4) 0 0;
	font-size: var(--font-size-xs);
	line-height: 1.5;
	color: var(--color-text-secondary);
}

/* -----------------------------------------------------------------
   相談スレカード本体・フッター（html-chech .mock-thread-card 準拠）
   ----------------------------------------------------------------- */

.thread-card {
	position: relative;
	display: flex;
	flex-direction: column;
	/* カード内寸法は変数化し、注目体験談ポップアップ（.thread-card__featured）の
	   負マージン bleed がどの文脈でも実 padding に追従できるようにする（共通コンポーネント化）。 */
	--thread-card-pad-x: 1.125rem;
	--thread-card-pad-bottom: var(--space-3);
	--thread-card-gap: var(--space-3);
	gap: var(--thread-card-gap);
	box-sizing: border-box;
	background: var(--color-base-1);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-card);
	padding: var(--space-4) var(--thread-card-pad-x) var(--thread-card-pad-bottom);
	transition:
		transform var(--transition-base),
		box-shadow var(--transition-base);
}

.thread-card::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
	background: color-mix(in srgb, var(--color-base-1) 25%, transparent);
	opacity: 0.2;
	pointer-events: none;
	transition: opacity var(--transition-base);
}

.thread-card:hover {
	transform: translateY(-4px);
	box-shadow:
		var(--shadow-md),
		0 0 0 1px color-mix(in srgb, var(--color-main) 30%, transparent),
		0 8px 24px color-mix(in srgb, var(--color-main) 10%, transparent);
}

.thread-card:hover::after {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.thread-card {
		transition: box-shadow var(--transition-fast);
	}

	.thread-card::after {
		transition: none;
	}

	.thread-card:hover {
		transform: none;
	}
}

.thread-card:has(.cat-career) {
	background: color-mix(in srgb, var(--cat-career-bg) 14%, var(--color-base-1));
}

.thread-card:has(.cat-ningen-kankei) {
	background: color-mix(in srgb, var(--cat-ningen-bg) 14%, var(--color-base-1));
}

.thread-card:has(.cat-skill) {
	background: color-mix(in srgb, var(--cat-skill-bg) 14%, var(--color-base-1));
}

.thread-card:has(.cat-hataraki-kata) {
	background: color-mix(in srgb, var(--cat-hataraki-bg) 14%, var(--color-base-1));
}

.thread-card:has(.cat-kachi-kan) {
	background: color-mix(in srgb, var(--cat-kachi-bg) 14%, var(--color-base-1));
}

.thread-card__title {
	margin: 0;
	font-size: var(--font-size-base);
	font-weight: 900;
	line-height: 1.27;
	color: var(--color-text-title-card);
}

.thread-card__title a {
	color: inherit;
	text-decoration: none;
}

.thread-card__title a:hover {
	text-decoration: underline;
	text-underline-offset: 0.12em;
}

.thread-card__excerpt {
	margin: 0;
	font-size: var(--font-size-base);
	line-height: 1.5;
	color: var(--color-thread-card-excerpt);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.thread-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
}

.thread-card__author {
	font-size: var(--font-size-base);
	color: var(--color-text-secondary);
	line-height: 1.4;
}

/* フッター: 体験談メタ ＋ リアクション（モック .mock-thread-card__footer） */
.thread-card__footer {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	width: 100%;
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	padding-bottom: var(--space-3);
	border-top: 1px solid var(--color-border-light);
	box-sizing: border-box;
	color: var(--color-text-secondary);
}

.thread-card__footer-bar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	width: 100%;
}

.thread-card__footer-meta {
	display: inline-flex;
	flex: 0 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
}

.thread-card__answer-meta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-secondary);
	flex-shrink: 0;
}

.thread-card__answer-meta-icon {
	display: block;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.thread-card__reactions {
	display: flex;
	flex: 1;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-2);
	min-width: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.thread-card__reaction {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--space-1);
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-secondary);
	white-space: nowrap;
}

.thread-card__reaction-icon {
	display: block;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	object-fit: contain;
	opacity: 0.88;
	filter: grayscale(1);
}

.thread-card__reaction-label {
	white-space: nowrap;
}

.thread-card__reaction-count {
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-secondary);
}

.thread-card__footer-tags-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	width: 100%;
}

.thread-card__footer-tags-row .thread-card__tag-link {
	display: inline-flex;
	align-items: center;
	padding: 0;
	border: none;
	border-radius: 0;
	background: none;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	color: var(--color-main);
	text-decoration: none;
	transition:
		color var(--transition-fast),
		opacity var(--transition-fast);
}

.thread-card__footer-tags-row .thread-card__tag-link:hover {
	color: var(--color-accent-2);
	opacity: 0.92;
}

.thread-card--similar {
	position: relative;
}

.thread-card--similar .thread-card__panel-hit {
	position: absolute;
	inset: 0;
	z-index: 4;
	border-radius: inherit;
}

.thread-card--similar .thread-card__panel-hit:focus-visible {
	outline: 2px solid var(--color-main);
	outline-offset: 2px;
}

.thread-card--similar > *:not(.thread-card__panel-hit) {
	position: relative;
	z-index: 1;
}

/*
 * ブックマークボタン等の操作系が含まれる行は panel-hit (z-index:4) より上に出す。
 * そうしないと panel-hit がクリックを奪い、ブックマークボタンが押せない。
 */
.thread-card--similar .thread-card__header--home-rail,
.thread-card--similar .thread-card__top-meta--desktop-home-rail,
.thread-card--similar:not(.thread-card--home-rail) .thread-card__top-meta {
	z-index: 5;
}

.thread-card--similar .thread-card__top-meta {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--space-2);
	width: 100%;
	margin: 0;
}

/* PC desktop-home-rail / standalone similar: cat | date | popular | bookmark の4列構成 */
.thread-card--similar .thread-card__top-meta--desktop-home-rail,
.thread-card--similar:not(.thread-card--home-rail) .thread-card__top-meta {
	grid-template-columns: auto 1fr auto auto;
}

/* SP mobile-home-rail: cat | popular | bookmark の3列（date は footer に表示） */
.thread-card--similar .thread-card__top-meta--mobile-home-rail {
	grid-template-columns: auto 1fr auto;
}

/* カード上のブックマークボタンの基本配置（クリック可能領域を panel-hit より上に） */
.thread-card__bookmark.bookmark-btn--card {
	position: relative;
	z-index: 6;
	justify-self: end;
	background: var(--color-base-1);
}

.thread-card--similar .thread-card__top-meta-start {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
	justify-self: start;
}

.thread-card--similar .thread-card__date--top-meta {
	margin: 0;
	justify-self: center;
	text-align: center;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-normal);
	color: var(--color-text-primary);
	white-space: nowrap;
}

.thread-card--similar .thread-card__popular {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-1);
	justify-self: end;
	min-width: 0;
}

.thread-card--similar .thread-card__popular-group {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 2rem;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	color: var(--cat-hataraki-text);
	white-space: nowrap;
	flex-shrink: 0;
}

.thread-card--similar .thread-card__popular-group--hot {
	color: var(--color-accent-1);
}

.thread-card--similar .thread-card__popular-group--popular {
	color: var(--cat-hataraki-text);
}

.thread-card--similar .thread-card__popular-icon {
	display: block;
	flex-shrink: 0;
	width: 1.125rem;
	height: 1.125rem;
}

.thread-card--similar .cat-badge {
	padding: var(--space-2) 0.625rem;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
}

.thread-card--similar .thread-card__meta--similar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.625rem;
	width: 100%;
	margin: 0;
}

.thread-card--similar .thread-card__anon-avatar {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 3.125rem;
	height: 3.125rem;
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-full);
	background: var(--color-base-2);
}

.thread-card--similar .thread-card__anon-avatar-char {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-secondary);
	line-height: 1;
}

.thread-card--similar .avatar {
	flex-shrink: 0;
	width: 3.125rem;
	height: 3.125rem;
}

.thread-card--similar .avatar__img {
	width: 100%;
	height: 100%;
	border-radius: var(--radius-full);
	object-fit: cover;
	object-position: center top;
}

.thread-card--similar .thread-card__author-info {
	margin: 0;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-normal);
	line-height: 1.4;
	color: var(--color-text-secondary);
}

.thread-card--similar .thread-card__title {
	margin: 0;
	font-size: var(--font-size-sm);
	font-weight: 900;
	line-height: 1.27;
	color: var(--color-text-title-card);
}

.thread-card--similar .thread-card__excerpt {
	margin: 0;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-normal);
	line-height: 1.5;
	color: var(--color-thread-card-excerpt);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.thread-card--similar .thread-card__footer {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.thread-card--similar .thread-card__top-meta {
	order: 1;
}

.thread-card--similar .thread-card__meta--similar {
	order: 2;
}

.thread-card--similar .thread-card__title {
	order: 3;
}

.thread-card--similar .thread-card__excerpt {
	order: 4;
}

.thread-card--similar .thread-card__footer {
	order: 5;
}

.home-feed-rail .thread-card--home-rail .thread-card__header {
	display: none;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-2);
	align-items: center;
	order: 1;
}

.home-feed-rail .thread-card--home-rail .thread-card__header-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
}

.home-feed-rail .thread-card--home-rail .thread-card__header-main {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
}

.home-feed-rail .thread-card--home-rail .thread-card__author-info--home-rail {
	margin: 0;
	color: var(--color-text-secondary);
}

.home-feed-rail .thread-card--home-rail .thread-card__date--footer-similar {
	display: none;
}

.home-feed-rail .thread-card--home-rail .thread-card__top-meta--desktop-home-rail {
	display: none;
	order: 1;
}

.home-feed-rail .thread-card--home-rail .thread-card__top-meta--mobile-home-rail {
	display: none;
}

@media (min-width: 769px) {
	.home-feed-rail .thread-card--home-rail .thread-card__title {
		font-size: var(--font-size-lg);
	}

	.home-feed-rail .thread-card--home-rail .thread-card__header--home-rail {
		display: none;
	}

	.home-feed-rail .thread-card--home-rail .thread-card__top-meta--desktop-home-rail {
		display: grid;
	}

	.home-feed-rail .thread-card--home-rail .thread-card__meta--similar {
		display: flex;
	}

	.home-feed-rail .thread-card--home-rail .thread-card__footer-bar {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}

	.home-feed-rail .thread-card--home-rail .thread-card__reactions {
		flex-wrap: nowrap;
		justify-content: flex-end;
	}
}

@media (max-width: 768px) {
	.thread-card--similar .thread-card__excerpt {
		-webkit-line-clamp: 2;
	}

	.thread-card--similar .thread-card__footer {
		margin-top: var(--space-3);
		padding-top: var(--space-3);
		padding-bottom: var(--space-2);
		gap: var(--space-2);
	}

	.thread-card--similar .thread-card__footer-bar {
		flex-wrap: nowrap;
		align-items: center;
	}

	.thread-card--similar .thread-card__answer-meta {
		font-size: var(--font-size-xs);
		gap: var(--space-1);
	}

	.thread-card--similar .thread-card__reactions {
		flex: 1;
		flex-wrap: nowrap;
		justify-content: flex-end;
		gap: var(--space-1);
	}

	.thread-card--similar .thread-card__reaction {
		font-size: var(--font-size-xs);
		gap: var(--space-1);
	}

	.thread-card--similar .thread-card__reaction-label {
		display: none;
	}

	.home-feed-rail .thread-card--home-rail .thread-card__top-meta--desktop-home-rail {
		display: none;
	}

	.home-feed-rail .thread-card--home-rail .thread-card__meta--similar {
		display: none;
	}

	.home-feed-rail .thread-card--home-rail .thread-card__header--home-rail {
		display: grid;
	}

	.home-feed-rail .thread-card--home-rail {
		--thread-card-pad-x: var(--space-3);
		--thread-card-pad-bottom: var(--space-2);
		--thread-card-gap: var(--space-2);
		gap: var(--thread-card-gap);
		padding: var(--space-3) var(--thread-card-pad-x) var(--thread-card-pad-bottom);
	}

	.home-feed-rail .thread-card--home-rail .thread-card__header {
		align-items: flex-start;
	}

	.home-feed-rail .thread-card--home-rail .thread-card__header-main {
		gap: var(--space-1);
	}

	/* SP: cat-badge | (auto fill) | popular | bookmark を flex で 1 行に強制。
	   元は grid (minmax(0,1fr) auto auto) だったが、実機 iOS/Android で grid の auto 列が
	   想定より広く計算され bookmark が次行に追い出されるケースが出たため、
	   flex-wrap: nowrap で「絶対に 1 行」に保つ実装に切り替えた。 */
	.home-feed-rail .thread-card--home-rail .thread-card__top-meta--mobile-home-rail {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: var(--space-1);
		margin-bottom: 0;
		min-width: 0;
	}

	.home-feed-rail .thread-card--home-rail .thread-card__top-meta--mobile-home-rail .thread-card__top-meta-start {
		flex: 0 1 auto;
		min-width: 0;
		overflow: hidden;
	}

	.home-feed-rail .thread-card--home-rail .thread-card__top-meta--mobile-home-rail .thread-card__popular {
		flex: 0 0 auto;
		margin-left: auto;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 0.375rem;
		min-width: 0;
	}

	.home-feed-rail .thread-card--home-rail .thread-card__top-meta--mobile-home-rail .thread-card__bookmark {
		flex: 0 0 32px;
		width: 32px;
		height: 32px;
	}

	.home-feed-rail .thread-card--home-rail .thread-card__top-meta--mobile-home-rail .cat-badge,
	.home-feed-rail .thread-card--home-rail .thread-card__popular-group {
		font-size: var(--font-size-xs);
	}

	.home-feed-rail .thread-card--home-rail .thread-card__top-meta--mobile-home-rail .cat-badge {
		padding: var(--space-1) 0.375rem;
		max-width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.home-feed-rail .thread-card--home-rail .thread-card__title {
		font-size: var(--font-size-sm);
		line-height: 1.35;
	}

	.home-feed-rail .thread-card--home-rail .thread-card__excerpt--similar,
	.list-grid .thread-card--home-rail .thread-card__excerpt--similar,
	.category-ranking-grid .thread-card--home-rail .thread-card__excerpt--similar {
		display: none;
	}

	.home-feed-rail .thread-card--home-rail .thread-card__author-info {
		font-size: var(--font-size-sm);
	}

	.home-feed-rail .thread-card--home-rail .thread-card__author-info--home-rail {
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.home-feed-rail .thread-card--home-rail .thread-card__footer {
		gap: var(--space-2);
		margin-top: var(--space-2);
		padding-top: var(--space-2);
		padding-bottom: var(--space-2);
	}

	.home-feed-rail .thread-card--home-rail .thread-card__footer-bar {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
	}

	.home-feed-rail .thread-card--home-rail .thread-card__date--footer-similar {
		display: inline-block;
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-semibold);
		color: var(--color-text-secondary);
		white-space: nowrap;
	}

	.home-feed-rail .thread-card--home-rail .thread-card__footer-meta {
		flex: 1 1 auto;
		gap: var(--space-1);
		flex-wrap: nowrap;
	}

	.home-feed-rail .thread-card--home-rail .thread-card__answer-meta {
		font-size: var(--font-size-xs);
		white-space: nowrap;
	}

	.home-feed-rail .thread-card--home-rail .thread-card__reactions {
		flex: 0 0 auto;
		gap: var(--space-1);
		justify-content: flex-end;
		flex-wrap: nowrap;
		margin-left: auto;
	}

	.home-feed-rail .thread-card--home-rail .thread-card__reaction {
		font-size: var(--font-size-xs);
	}
}

@media (max-width: 480px) {
	.home-feed-rail .thread-card--home-rail .thread-card__reactions {
		justify-content: flex-end;
	}
}

/* ==============================================================
   ランキングバッジ（王冠＋順位）
   元々 front-page.css にあったが /ranking でも同じ見た目を共通化するため
   thread-card.css に移設。スコープは従来どおり .home-feed-rail.home-section--ranked。
   ============================================================== */

.home-feed-rail.home-section--ranked .thread-card--ranked {
	position: relative;
}

.home-feed-rail.home-section--ranked .thread-card__rank-badge {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	width: 44px;
	height: 52px;
	overflow: hidden;
	z-index: 3;
	pointer-events: none;
}

@keyframes top-rank-shine {
	0% {
		left: -100%;
	}
	100% {
		left: 200%;
	}
}

.home-feed-rail.home-section--ranked .thread-card__rank-face {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 44px;
	height: 52px;
	clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
	color: var(--color-base-1);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

.home-feed-rail.home-section--ranked .thread-card__rank-badge--sub .thread-card__rank-face {
	background: linear-gradient(
		160deg,
		var(--color-rank-sub-light) 0%,
		var(--color-rank-sub-mid) 50%,
		var(--color-rank-sub-dark) 100%
	);
	color: var(--color-text-primary);
}

.home-feed-rail.home-section--ranked .thread-card__rank-badge--1 .thread-card__rank-face {
	background: linear-gradient(
		160deg,
		var(--color-rank-gold-light) 0%,
		var(--color-rank-gold-mid) 40%,
		var(--color-rank-gold-dark) 100%
	);
}

.home-feed-rail.home-section--ranked .thread-card__rank-badge--2 .thread-card__rank-face {
	background: linear-gradient(
		160deg,
		var(--color-rank-silver-light) 0%,
		var(--color-rank-silver-mid) 50%,
		var(--color-rank-silver-dark) 100%
	);
}

.home-feed-rail.home-section--ranked .thread-card__rank-badge--3 .thread-card__rank-face {
	background: linear-gradient(
		160deg,
		var(--color-rank-bronze-light) 0%,
		var(--color-rank-bronze-mid) 50%,
		var(--color-rank-bronze-dark) 100%
	);
}

.home-feed-rail.home-section--ranked .thread-card__rank-crown {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

.home-feed-rail.home-section--ranked .thread-card__rank-digit {
	font-size: 15px;
	font-weight: 900;
	line-height: 1;
	text-shadow: 0 1px 2px color-mix(in srgb, var(--color-text-primary) 20%, transparent 80%);
}

.home-feed-rail.home-section--ranked .thread-card__rank-badge--sub .thread-card__rank-digit {
	text-shadow: none;
}

.home-feed-rail.home-section--ranked .thread-card__rank-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(
		105deg,
		transparent 0%,
		color-mix(in srgb, var(--color-base-1) 45%, transparent 55%) 45%,
		color-mix(in srgb, var(--color-base-1) 10%, transparent 90%) 55%,
		transparent 100%
	);
	animation: top-rank-shine 3.8s ease-in-out infinite;
	animation-delay: 0.6s;
}

.home-feed-rail.home-section--ranked .thread-card__rank-badge--sub .thread-card__rank-shine {
	display: none;
}

.home-feed-rail.home-section--ranked .thread-card--ranked .thread-card__top-meta {
	padding-left: calc(44px + var(--space-3));
}

@media (min-width: 769px) {
	.home-feed-rail.home-section--ranked .thread-card__rank-badge {
		left: -6px;
		right: auto;
	}
}

@media (max-width: 768px) {
	.home-feed-rail.home-section--ranked .thread-card__rank-badge {
		left: auto;
		right: var(--space-2);
		height: 42px;
	}

	.home-feed-rail.home-section--ranked .thread-card--ranked .thread-card__top-meta {
		padding-left: 0;
		padding-right: calc(44px + var(--space-3));
	}

	.home-feed-rail.home-section--ranked .thread-card__rank-face {
		height: 42px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-feed-rail.home-section--ranked .thread-card__rank-shine {
		animation: none;
		display: none;
	}
}

/* ============================================================
   注目体験談ポップアップ（スレカード）
   - マークアップ上はカード（article）の子。
   - PC: 既定は非表示。JS がホバー時に <body> 直下へ移動し .is-floating を付与、
        position:fixed で「必ず下方向」に浮遊表示（hover transform 包含ブロック回避）。
   - SP(<=768px): カード下部に入れ子で密着表示（余白なし・セット感）。
   ============================================================ */
.thread-card__featured {
	display: none;
	/* similar/home-rail レイアウトは子要素に order:1〜5 を振っているため、
	   ポップアップは必ず最後（相談の下）に来るよう大きい order を付ける。 */
	order: 10;
	box-sizing: border-box;
	padding: var(--space-3) var(--space-4);
	background: var(--color-featured-bg);
	border: 1px solid var(--color-featured-border);
	border-radius: var(--radius-md);
	text-align: center;
}

/* カテゴリ別カラー（罫線・見出し＝カテゴリ色／背景＝カテゴリの淡い色）。
   PC ではポップアップが <body> 直下へ移動するため、要素自身の属性で色を決める。 */
.thread-card__featured[data-cat-theme="ningen"] {
	background: var(--cat-ningen-bg);
	border-color: var(--cat-ningen-text);
}
.thread-card__featured[data-cat-theme="ningen"] .thread-card__featured-head {
	color: var(--cat-ningen-text);
}

.thread-card__featured[data-cat-theme="career"] {
	background: var(--cat-career-bg);
	border-color: var(--cat-career-text);
}
.thread-card__featured[data-cat-theme="career"] .thread-card__featured-head {
	color: var(--cat-career-text);
}

.thread-card__featured[data-cat-theme="skill"] {
	background: var(--cat-skill-bg);
	border-color: var(--cat-skill-text);
}
.thread-card__featured[data-cat-theme="skill"] .thread-card__featured-head {
	color: var(--cat-skill-text);
}

.thread-card__featured[data-cat-theme="hataraki"] {
	background: var(--cat-hataraki-bg);
	border-color: var(--cat-hataraki-text);
}
.thread-card__featured[data-cat-theme="hataraki"] .thread-card__featured-head {
	color: var(--cat-hataraki-text);
}

.thread-card__featured[data-cat-theme="kachi"] {
	background: var(--cat-kachi-bg);
	border-color: var(--cat-kachi-text);
}
.thread-card__featured[data-cat-theme="kachi"] .thread-card__featured-head {
	color: var(--cat-kachi-text);
}

/* スマホ表示時のみ、注目体験談ポップアップの背景を白寄りに淡く（濃さを軽減） */
@media (max-width: 768px) {
	.thread-card__featured {
		background: color-mix(in srgb, var(--color-featured-bg) 45%, var(--color-base-1));
	}
	.thread-card__featured[data-cat-theme="ningen"]   { background: color-mix(in srgb, var(--cat-ningen-bg)   45%, var(--color-base-1)); }
	.thread-card__featured[data-cat-theme="career"]   { background: color-mix(in srgb, var(--cat-career-bg)   45%, var(--color-base-1)); }
	.thread-card__featured[data-cat-theme="skill"]    { background: color-mix(in srgb, var(--cat-skill-bg)    45%, var(--color-base-1)); }
	.thread-card__featured[data-cat-theme="hataraki"] { background: color-mix(in srgb, var(--cat-hataraki-bg) 45%, var(--color-base-1)); }
	.thread-card__featured[data-cat-theme="kachi"]    { background: color-mix(in srgb, var(--cat-kachi-bg)    45%, var(--color-base-1)); }
}

/* PC: ホバー時に JS が付与する浮遊状態（<body> 直下・fixed） */
.thread-card__featured.is-floating {
	display: block;
	z-index: 60;
	box-shadow: var(--shadow-lg);
}

.thread-card__featured-head {
	margin: 0 0 var(--space-2);
	color: var(--color-featured-accent);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
}

.thread-card__featured-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.thread-card__featured-title {
	display: block;
	margin-bottom: var(--space-3);
	color: var(--color-text-title-card);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	line-height: 1.4;
}

.thread-card__featured-author {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
}

/* 匿名・実名いずれもアバターは小さめ固定（匿名 img が巨大化するのを防ぐ） */
.thread-card__featured-avatar {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
}

.thread-card__featured-avatar .avatar,
.thread-card__featured-avatar .avatar__img,
.thread-card__featured-avatar img {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-full);
	object-fit: cover;
	display: block;
}

.thread-card__featured-author-text {
	text-align: left;
}

.thread-card__featured-author-name {
	color: var(--color-text-primary);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
}

.thread-card__featured-author-region {
	margin-left: var(--space-2);
	color: var(--color-text-secondary);
	font-size: var(--font-size-xs);
}

.thread-card__featured-author-meta {
	display: block;
	margin-top: var(--space-1);
	color: var(--color-text-secondary);
	font-size: var(--font-size-xs);
}

@media (max-width: 768px) {
	/* SP: カード（article）下部に入れ子で密着。フレックスの gap・カード余白を
	   負マージンで打ち消し、左右・下端いっぱいに広げてセット感を出す。 */
	.thread-card__featured {
		display: block;
		/* カード実寸（変数）に追従して bleed。横と下は枠線 1px ぶんも食い込ませ、
		   カード外縁まで隙間なく到達させる（TOP/一覧/関連すべてで同一の見え方）。 */
		margin:
			calc(-1 * var(--thread-card-gap, var(--space-3)))
			calc(-1 * var(--thread-card-pad-x, 1.125rem) - 1px)
			calc(-1 * var(--thread-card-pad-bottom, var(--space-3)) - 1px);
		border-width: 1px 0 0;
		border-radius: 0 0 var(--radius-xl) var(--radius-xl);
	}

	/* SP では JS の浮遊配置は使わない（保険として in-flow に固定） */
	.thread-card__featured.is-floating {
		position: static;
		width: auto;
		box-shadow: none;
		z-index: auto;
	}

	/* SP: ポップアップを panel-hit（カード全体リンク・z-index:4）より前面に出し、
	   体験談リンクのタップがカード遷移に奪われないようにする。
	   （.thread-card--similar > *:not(.panel-hit) の z-index:1 を上書きするため
	     同等の詳細度＝後勝ちで効かせる） */
	.thread-card .thread-card__featured {
		position: relative;
		z-index: 5;
	}

	/* SP: 相談スレより目立たないよう全体的に一回り小さく。 */
	.thread-card__featured-head {
		font-size: var(--font-size-xs);
	}

	.thread-card__featured-title {
		font-size: var(--font-size-sm);
	}

	.thread-card__featured-author-name {
		font-size: var(--font-size-xs);
	}

	/* サムネは相談スレ（3.125rem ≒ 50px）より一回り小さく */
	.thread-card__featured-avatar,
	.thread-card__featured-avatar .avatar,
	.thread-card__featured-avatar .avatar__img,
	.thread-card__featured-avatar img {
		width: 40px;
		height: 40px;
	}
}