@charset "utf-8";

/*
	Theme Name: 物見雄山 CSS 2027-
	Author: QU
	Copyright (c) 2027 QU
	License: MIT License
 */

/*
	目次

	1. カスタムプロパティ
	2. レイアウト
	3. ヘッダー
	4. コントロール部分
	5. リスト表示
	6. フッター
*/

/* ------------------------------------
1. カスタムプロパティ
------------------------------------ */
:root {
	--tc-main   : oklch(.26 0 0);
	--tc-muted  : oklch(from var(--tc-main) l c h / 0.7);

	--bgc-body   : oklch(.8 .1 326);
	--bgc-search : oklch(.7 .1 326);
	--bgc-input  : oklch(.85 .1 326);
	--bgc-focus  : oklch(.98 .1 326);
	--bgc-card   : oklch(.95 .1 326);
	--bgc-yzn    : oklch(.98 0 326);

	--bdc        : oklch(from var(--bgc-body) calc(l - 0.2) c h);
	--bdc-accent : oklch(.5 0.2 326);

	interpolate-size : allow-keywords;

}
@media (prefers-color-scheme: dark) {
	:root {
		--tc-main   : oklch(.86 0.015 95);
		--tc-muted  : oklch(from var(--tc-main) l c h/0.65);
		
		--bgc-body   : oklch(.2 .1 326);
		--bgc-search : oklch(.4 .1 326);
		--bgc-input  : oklch(.7 .1 326);
		--bgc-focus  : oklch(.85 .1 326);
		--bgc-card   : oklch(.3 .1 326);
		--bgc-yzn    : oklch(.45 .1 326);
	
		--bdc        : oklch(from var(--bgc-body) calc(l - .1) c h);
		--bdc-accent : oklch(.3 0.2 326);
	}
	img {
		filter : saturate(80%) brightness(80%);
	}
}


/* ------------------------------------
2. レイアウト
------------------------------------ */
body {
	max-width         : 700px;
	padding-inline    : 15px;
	text-autospace    : normal;
	text-rendering    : optimizeSpeed;
	scroll-behavior   : smooth;
}


/* ------------------------------------
3. ヘッダー
------------------------------------ */
header {

	div {
		display             : flex;
		justify-content     : center;
		align-items         : center;
		width               : 100%;
		height              : 14rem;
		margin-block        : 2.5rem;
		background-image    : url(../images/index-logo-light.png);
		background-repeat   : no-repeat;
		background-position : center;
		background-size     : 140px 140px;

		h1 {
			writing-mode   : vertical-rl;
			font-family    : serif;
			font-size      : 2.5rem;
			font-weight    : var(--fw-bold);
			line-height    : 1;
			letter-spacing : .3rem;
		}
	}
	p {
		text-align : center;
	}
	@media (prefers-color-scheme: dark) {
		div {
			background-image    : url(../images/index-logo-dark.png);
		}
	}
}
#fixed-header {
	position    : fixed;
	z-index     : 999;
	top         : 0;
	width       : 100%;
	padding     : 1rem .5rem;
	background  : var(--bgc-body);
	font-size   : var(--fs-base);
	font-family : serif;
	font-weight : var(--fw-bold);
	transition  : transform 0.3s ease;
	box-shadow  : 0 4px 40px 30px var(--bgc-body);

	a {
		cursor          : pointer;
		text-decoration : none;
	}
}
#fixed-header.is-hidden {
	transform : translateY(-200%);
}


/* ------------------------------------
4. コントロール部分
------------------------------------ */
.search-area {
	width         : 100%;
	margin-block  : 1rem 4rem;
	padding       : 20px 25px;
	border-radius : 10px;
	background    : var(--bgc-search); 

	.filter-group {
		margin-bottom: 12px;

		.checkbox-label {
			cursor      : pointer;
			display     : inline-flex;
			align-items : center;
			gap         : 8px;
			font-weight : bold;

			input[type="checkbox"] {
				appearance          : none;
				-webkit-appearance  : none;
				cursor              : pointer;
				vertical-align      : middle;
				width               : 1.5rem;
				height              : 1.5rem;
				border              : 2px solid var(--bdc);
				background-color    : var(--bgc-input);
				background-position : center;
				background-repeat   : no-repeat;
			}
			input[type="checkbox"]:checked {
				border-color     : var(--bdc-accent);
				background-color : var(--bgc-focus);
				background-image : url("../images/check.png");
				background-size  : 110%;
			}
		}
		
	}
	.input-group input {
		outline          : none;
		width            : 100%;
		padding          : 12px;
		border           : 2px solid var(--bdc);
		background-color : var(--bgc-input);
	}
	.input-group input:focus {
		border-color : var(--bdc-accent);
		background   : var(--bgc-focus);
	}
}
.count-display {
	font-size  : var(--fs-sm);
	text-align : right;
}
#note {
	margin-block-start : 1.3rem;
}
#note::details-content {
	height     : 0;
	overflow   : hidden;
	transition : content-visibility 0.3s allow-discrete, height 0.3s;
}
#note[open]::details-content {
	height : auto;
}
.details-content {
	margin : 1rem;
	ul {
		margin: 1rem 3rem;
	}
}


/* ------------------------------------
5. リスト表示
------------------------------------ */
.episode-list {
	display        : flex;
	flex-direction : column;
	gap            : 10px;
	width          : 100%;
	min-height     : 200px;
}
.episode-card {
	width         : 100%;
	padding       : 7px 16px;
	border-left   : 5px solid transparent;
	border-radius : 3px;
	background    : var(--bgc-card);
}
.episode-card.is-yuzan {
	border-left : 5px solid var(--bdc-accent);
	background  : var(--bgc-yzn);
}
.card-header {
	display     : flex;
	align-items : center;
	gap         : 1rem;
}
.volume {
	width       : 2.5rem;
	color       : var(--tc-muted);
	font-weight : bold;
	white-space : nowrap;
}
.title {
	font-weight : var(--fw-bold);
}
.badge-yuzan {
	margin-left   : auto;
	font-size     : var(--fs-xs);
	white-space   : nowrap;
}
.hint-text {
	margin      : .3rem 0 0 3.5rem;
	color       : var(--tc-muted);
	font-size   : var(--fs-xs);
	line-height : 1.5;
}
.no-result {
	width      : 100%;
	padding    : 40px 0;
	color      : var(--tc-muted);
	text-align : center;
}


/* ------------------------------------
6. フッター
------------------------------------ */
footer {
	padding        : 10px 0;
	text-align     : right;
	letter-spacing : .06rem;

	small {
		font-size  : var(--fs-base);
		font-style : normal
	}
	a {
		color           : var(--tc-main);
		text-decoration : none;
	}
}