/* ============================================================
   注目シーン

   【作品ページと一覧で、別の形にする】
   作品ページは「この作品のどこが良いか」を順に読ませたい。
   どの作品かは分かりきっているので、時刻を主役にして縦に並べる。

   一覧とトップは「どの作品の、どの瞬間か」が要る。
   絵を大きく出して、作品名と時刻を添える。
   ============================================================ */

.avc-spotwrap {
	--avc-spot-line: #f0c9da;
	--avc-spot-dot: #d6336c;

	/*
	 * 【線と点は、同じ数から置く】
	 * 線を left: 44px、点を「時刻の列（82px）の右端」と、
	 * **別々の数で置いていたので40px以上ずれていた。**
	 * 列の幅と間を変数にして、どちらもここから計算する。
	 */
	/*
	 * 【いちばん長い札が入る幅にする】
	 * 札は折り返さない（nowrap）ので、列より広いと**溢れて点に乗る。**
	 * 出しうるいちばん長い形は「10時間59分頃」＝実測95.9px
	 * （avc_spot_label の上限は10時間 = AVC_SPOT_SEC_MAX）。
	 * 82px のころは「2時間04分頃」でもう溢れていた。
	 * 書体が変わると幅も変わるので、少し余らせておく。
	 */
	--avc-spot-col: 104px;  /* 時刻の列 */
	--avc-spot-gap: 20px;   /* 列と本文のあいだ */
	--avc-spot-dotsize: 9px;
}

/* ------------------------------------------------------------
   作品ページ：時系列
   ------------------------------------------------------------ */
.avc-spots {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * 【縦の線は1本だけ引く】
 * 行ごとに引くと、行間で切れて点線に見える。
 * 親に1本通して、最後の行だけ下を隠す。
 */
.avc-spots::before {
	content: "";
	position: absolute;
	top: 10px;
	bottom: 10px;
	/* 列と本文の、あいだの真ん中（線の太さぶん戻す） */
	left: calc(var(--avc-spot-col) + var(--avc-spot-gap) / 2 - 1px);
	width: 2px;
	border-radius: 2px;
	background: var(--avc-spot-line);
}

.avc-spot {
	position: relative;
	display: flex;
	gap: var(--avc-spot-gap);
	padding: 0 0 20px;
}
.avc-spot:last-child {
	padding-bottom: 0;
}

/* --- 左：時刻 --- */
.avc-spot__time {
	position: relative;
	flex: none;
	width: var(--avc-spot-col);
	padding-top: 1px;
	text-align: right;
}
.avc-spot__clock {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	background: #fff;
	border: 1.5px solid var(--avc-spot-line);
	font-size: 12.5px;
	font-weight: 800;
	line-height: 1.5;
	color: var(--avc-spot-dot);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/*
 * 線の上に乗る点
 *
 * 点の真ん中が、線の真ん中（列の右端から gap/2）に来るように置く。
 * right は「右端から外へ何px」なので、点の半分ぶん余計に外へ出す。
 */
.avc-spot__time::after {
	content: "";
	position: absolute;
	top: 7px;
	right: calc(var(--avc-spot-gap) / -2 - var(--avc-spot-dotsize) / 2);
	width: var(--avc-spot-dotsize);
	height: var(--avc-spot-dotsize);
	border-radius: 50%;
	background: var(--avc-spot-dot);
	box-shadow: 0 0 0 3px #fff;
}

/* --- 右：絵と文 --- */
.avc-spot__body {
	flex: 1;
	min-width: 0;
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.avc-spot__shot {
	flex: none;
	width: 180px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 10px;
	background: var(--avc-soft);
	border: 1px solid var(--avc-line);
}
.avc-spot__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.avc-spot__text {
	flex: 1;
	min-width: 0;
}
.avc-spot__title {
	display: block;
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.5;
	color: var(--avc-ink);
}
.avc-spot__note {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.85;
	color: #3f4650;
}

/*
 * いいね
 *
 * 【小さくして、文の邪魔をしない】
 * 読ませたいのはシーンの説明。ボタンが目立つと、そちらが主役に見える。
 * 押していないときは灰色の輪郭だけにして、押したら色が入る。
 */
.avc-spot__act {
	margin: 6px 0 0;
}
.avc-spotlike {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 30px;
	padding: 4px 11px;
	border: 1px solid var(--avc-line);
	border-radius: 999px;
	background: #fff;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	color: #8d949e;
	cursor: pointer;
	transition: border-color .15s, color .15s, background .15s;
}
.avc-spotlike:hover {
	border-color: #f0b6cd;
	color: var(--avc-accent);
}
.avc-spotlike:disabled {
	opacity: .55;
	cursor: default;
}
.avc-spotlike__icon {
	display: flex;
	flex: none;
}
.avc-spotlike__icon svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	transition: transform .2s;
}
.avc-spotlike__n {
	font-variant-numeric: tabular-nums;
	font-size: 11.5px;
}
/*
 * 【0のときは数を出さない】
 * 「0」は、まだ誰も押していないのか、数えられていないのかが分からない。
 * 中身が空なら、枠ごと消す。
 */
.avc-spotlike__n:empty {
	display: none;
}

.avc-spotlike.is-on {
	border-color: var(--avc-accent);
	background: var(--avc-accent-soft);
	color: var(--avc-accent);
}
.avc-spotlike.is-on .avc-spotlike__icon svg {
	fill: currentColor;
}
.avc-spotlike.is-pop .avc-spotlike__icon svg {
	transform: scale(1.32);
}

/* ------------------------------------------------------------
   本文の飾り

   書けるのは太字とマーカーだけ。
   色を増やすほど、どれが大事なのか分からなくなる。
   ------------------------------------------------------------ */
.avc-spot__note strong,
.avc-spotcard__note strong {
	font-weight: 800;
	color: var(--avc-ink);
}

.avc-hl {
	padding: 0 2px;
	border-radius: 2px;
	background: none;
	color: inherit;
	/*
	 * 【下半分だけ塗る】
	 * 全部塗ると字が沈む。蛍光ペンで引いたように見せる。
	 */
	background-image: linear-gradient(transparent 58%, var(--avc-hl) 58%);
}
.avc-hl--y { --avc-hl: rgba(255, 221, 87, .72); }
.avc-hl--p { --avc-hl: rgba(255, 150, 190, .62); }
.avc-hl--b { --avc-hl: rgba(130, 196, 255, .62); }
.avc-hl--g { --avc-hl: rgba(142, 226, 170, .66); }

/* --- 畳む --- */
.avc-spots.is-fold .avc-spot.is-rest {
	display: none;
}
.avc-spots__more {
	padding: 9px 20px;
	border: 1px solid var(--avc-line);
	border-radius: 999px;
	background: #fff;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 700;
	color: #5c636d;
	cursor: pointer;
	transition: border-color .15s, color .15s;
}
.avc-spots__more:hover {
	border-color: var(--avc-accent);
	color: var(--avc-accent);
}

/* ------------------------------------------------------------
   一覧・トップ：カード
   ------------------------------------------------------------ */
.avc-spotgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 18px 16px;
}

.avc-spotcard {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--avc-line);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: border-color .15s, transform .12s, box-shadow .15s;
}
.avc-spotcard:hover {
	border-color: var(--avc-accent);
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(214, 51, 108, .1);
}

/*
 * 絵は 16:9。作品のパッケージ（縦長）で代えることがあるので、
 * object-fit で枠に合わせて切る。比率が混ざると並びが崩れる。
 */
.avc-spotcard__shot {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--avc-soft);
}
.avc-spotcard__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.avc-spotcard__noimg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 12px;
	font-weight: 700;
	color: var(--avc-dim);
}

/* 時刻は絵の上に。これが「注目シーン」の目印になる */
.avc-spotcard__clock {
	position: absolute;
	left: 8px;
	bottom: 8px;
	padding: 2px 9px;
	border-radius: 999px;
	background: rgba(17, 20, 24, .82);
	font-size: 11.5px;
	font-weight: 800;
	line-height: 1.6;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

/*
 * いいねの数
 *
 * 【絵の上に置く】
 * 本文の側に置くと、数のある札だけ文の高さが変わって、並びが崩れる
 * （札の高さを決め打ちにしてある理由と同じ）。
 * 時刻が左下なので、こちらは右下。ぶつからない。
 *
 * 0 のときは、そもそも書き出されない（avc_spot_like_badge が空を返す）。
 */
.avc-spotcard__like {
	position: absolute;
	right: 8px;
	bottom: 8px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(17, 20, 24, .82);
	font-size: 11px;
	font-weight: 800;
	line-height: 1.6;
	color: #ffd0e0;
	font-variant-numeric: tabular-nums;
}
.avc-spotcard__likeicon {
	display: flex;
	flex: none;
}
.avc-spotcard__likeicon svg {
	width: 11px;
	height: 11px;
	fill: currentColor;
}

.avc-spotcard__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	padding: 11px 12px 12px;
}

/*
 * 【2行ぶんの高さで固定する】
 * 切るだけでは足りない。文が短いシーンはそこだけ低くなり、
 * 並べたときに**下が空いて歯抜けに見える。**
 * 行数ぶんの高さを決め打ちにして、長短に関わらず同じ形にする。
 * 全文は作品ページで読める。
 *
 * 【⚠ -webkit-line-clamp は使えない】
 * あれは display: -webkit-box（古い箱モデル）とセットで、
 * **中のインライン要素が箱の部品に化けて1つずつ縦に積まれる。**
 * マーカーや太字を入れた瞬間に、文がバラバラになる。
 * 素の文しか入らない所でしか使ってはいけない。
 *
 * 高さで切って、下を白くぼかして「続きがある」と分からせる。
 * 三点リーダは出ないが、飾りが入っても壊れない。
 */
.avc-spotcard__note {
	display: block;
	position: relative;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.75;
	/*
	 * 【どの幅でも2行】
	 * 流し見る所なので、1枚で3行読ませると目が止まる。
	 * 幅ごとに変えると、同じ一覧なのに読める量が変わる。
	 */
	height: calc(1.75em * 2);
	color: #3f4650;
}
.avc-spotcard__note::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1.75em;
	/*
	 * 【最後の行の、右端だけ消す】
	 * 上から下へぼかすと、2行のうち**1行ぶんが薄くなって読めない**
	 * （3行のころは3分の1で済んでいた）。
	 * 役目は「まだ続きがある」と知らせることなので、
	 * 字の濃さはそのままに、行の終わりだけを溶かす。
	 */
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 70%, #fff 97%);
	pointer-events: none;
}

.avc-spotcard__work {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-top: auto;
	padding-top: 8px;
	border-top: 1px solid var(--avc-line);
	min-width: 0;
}
.avc-spotcard__hinban {
	flex: none;
	font-size: 10.5px;
	font-weight: 800;
	color: var(--avc-accent);
	letter-spacing: .02em;
}
.avc-spotcard__name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 11.5px;
	color: var(--avc-dim);
}

/* ------------------------------------------------------------
   スマホ
   ------------------------------------------------------------ */
@media (max-width: 700px) {
	/*
	 * 【絵を下に回す】
	 * 180px の絵を横に置くと、文が1行あたり10字ほどになって読めない。
	 * 時刻の列も詰めて、文に幅を渡す。
	 */
	/*
	 * 【狭い画面では、時刻の列をやめる】
	 * 列は幅の決め打ち（60px）。札は折り返さないので、
	 * 「1時間14分頃」のような長い書き方になると**枠から溢れる。**
	 * text-align: right にしてあっても、中身が枠より広ければ**右へ溢れる。**
	 * 右には点と縦線があるので、札が点の上に乗り、線をまたいでいた。
	 *
	 * 列をやめて、時刻を本文の上に置く。
	 * 線と点は左端のレールへ移す。
	 * こうすれば札が何文字でも重ならないし、本文に幅が戻る。
	 */
	.avc-spotwrap {
		--avc-spot-rail: 20px;   /* 左に通す線のぶん */
		--avc-spot-railx: 5px;   /* 線の中心（レールの中） */
		--avc-spot-dotsize: 8px;
	}
	/* 線はレールの中。desktop の「列の右」から置き直す */
	.avc-spots::before {
		left: calc(var(--avc-spot-railx) - 1px);
	}
	.avc-spot {
		display: block;
		padding: 0 0 18px var(--avc-spot-rail);
	}
	.avc-spot__time {
		width: auto;
		margin: 0 0 6px;
		padding-top: 0;
		text-align: left;
	}
	.avc-spot__clock {
		padding: 2px 8px;
		font-size: 11.5px;
	}
	/*
	 * 点は、時刻の札と同じ高さでレールの線の上に置く。
	 * 時刻の箱はレールのぶん右から始まっているので、そのぶん左へ戻す。
	 */
	.avc-spot__time::after {
		top: 6px;
		right: auto;
		left: calc(var(--avc-spot-railx) - var(--avc-spot-rail) - var(--avc-spot-dotsize) / 2);
	}
	.avc-spot__body {
		flex-direction: column;
		gap: 8px;
	}
	.avc-spot__shot {
		width: 100%;
	}
	.avc-spot__note {
		font-size: 13px;
		line-height: 1.8;
	}
	/*
	 * 指で押す所なので、狭い画面でも小さくしない。
	 * 幅だけ詰める。
	 */
	.avc-spotlike {
		padding: 4px 10px;
	}

	.avc-spotgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 10px;
	}
	.avc-spotcard__body {
		padding: 9px 10px 10px;
		gap: 6px;
	}
	.avc-spotcard__note {
		font-size: 12px;
	}
}

@media (max-width: 430px) {
	.avc-spotgrid {
		grid-template-columns: 1fr;
	}
}