/* ==================================================
   Piece List Page
   Classical Dark Theme
================================================== */

.piece-list-page {
	--piece-black: #0d0c0b;
	--piece-dark: #171411;
	--piece-dark-soft: #211c18;
	--piece-bordeaux: #4b1019;
	--piece-bordeaux-light: #6a202a;
	--piece-gold: #b9985a;
	--piece-gold-light: #ddc99b;
	--piece-ivory: #f3ede1;
	--piece-paper: #f8f3e9;
	--piece-paper-alt: #f1e9dc;
	--piece-text: #2e2722;
	--piece-text-soft: #6e6258;
	--piece-muted: #958678;
	--piece-border-dark: #514333;
	--piece-border-paper: #ddd1bf;
	--piece-shadow-dark: 0 18px 45px rgba(0, 0, 0, 0.3);

	overflow: hidden;
	padding: 2.8rem 0 4.5rem;

	background:
		radial-gradient(
			circle at 12% 0%,
			rgba(82, 20, 29, 0.4),
			transparent 34rem
		),
		radial-gradient(
			circle at 90% 35%,
			rgba(137, 103, 58, 0.08),
			transparent 28rem
		),
		linear-gradient(
			180deg,
			#090807 0%,
			#16120f 42%,
			#0d0c0b 100%
		);

	color: var(--piece-ivory);

	/* SWELLの全体設定（0.25em）を、この一覧ページ内では読みやすい値に調整 */
	letter-spacing: 0.04em;
}

.piece-list-page__inner {
	/* 横長画面では最大1440pxまで使用。左右余白は20〜48pxで可変 */
	width: min(1440px, calc(100% - clamp(40px, 6vw, 96px)));
	margin-inline: auto;
}


/* ==================================================
   Hero
================================================== */

.piece-list-hero {
	position: relative;
	margin-bottom: 1.6rem;
}

.piece-list-hero__mark {
	display: none;
	position: absolute;
	left: 0;
	top: 0.2rem;

	color: var(--piece-gold);
	font-size: 2rem;

	transform: rotate(-16deg);
}

.piece-list-hero__title {
	margin: 0;

	color: var(--piece-gold-light);

	font-family:
		Georgia,
		"Times New Roman",
		"Yu Mincho",
		"Hiragino Mincho ProN",
		serif;

	font-size: clamp(2rem, 5vw, 3.25rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.04em;

	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}

.piece-list-hero__lead {
	margin: 0.45rem 0 0;

	color: #b9aa96;

	font-size: 1rem;
	line-height: 1.7;
	letter-spacing: 0.015em;
}

.piece-list-hero__total {
	position: absolute;
	right: 0;
	bottom: 0;

	margin: 0;

	color: var(--piece-gold);

	font-size: 0.95rem;
	font-weight: 600;
}


/* ==================================================
   Filter
================================================== */

.piece-filter {
	margin: 1.7rem 0 1.8rem;
}

.piece-filter__primary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;

	gap: 1rem;
	align-items: center;
}

.piece-filter__search {
	position: relative;
	display: block;
}

.piece-filter__search input {
	width: 100%;
	height: 58px;

	padding: 0 1.1rem 0 3.5rem;

	border: 1px solid var(--piece-border-dark);
	border-radius: 10px;

	background:
		linear-gradient(
			180deg,
			rgba(35, 30, 26, 0.96),
			rgba(24, 21, 18, 0.96)
		);

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.025),
		0 10px 28px rgba(0, 0, 0, 0.2);

	color: var(--piece-ivory);

	font: inherit;
	font-size: 1rem;
}

.piece-filter__search input::placeholder {
	color: #887b6f;
}

.piece-filter__search input:focus {
	border-color: var(--piece-gold);

	outline: 3px solid rgba(185, 152, 90, 0.13);
}

.piece-filter__search-icon {
	position: absolute;

	left: 1.1rem;
	top: 50%;

	width: 1.35rem;
	height: 1.35rem;

	transform: translateY(-50%);

	color: var(--piece-gold);

	pointer-events: none;
}

.piece-filter__search-icon svg,
.piece-filter__toggle-icon svg {
	display: block;

	width: 100%;
	height: 100%;

	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.piece-filter__toggle {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap: 0.55rem;

	height: 58px;

	padding: 0 1.35rem;

	border: 1px solid var(--piece-border-dark);
	border-radius: 10px;

	background:
		linear-gradient(
			180deg,
			#27211c 0%,
			#1b1714 100%
		);

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.03),
		0 10px 28px rgba(0, 0, 0, 0.2);

	color: var(--piece-gold-light);

	font: inherit;
	font-weight: 600;

	cursor: pointer;

	transition:
		background 0.18s ease,
		border-color 0.18s ease,
		color 0.18s ease;
}

.piece-filter__toggle:hover {
	border-color: #756146;

	background:
		linear-gradient(
			180deg,
			#302720 0%,
			#211b17 100%
		);

	color: #f1dfb9;
}

.piece-filter__toggle-icon {
	width: 1.3rem;
	height: 1.3rem;
}

.piece-filter__panel {
	margin-top: 1rem;

	padding: 1.2rem;

	border: 1px solid var(--piece-border-dark);
	border-radius: 10px;

	background:
		linear-gradient(
			180deg,
			rgba(31, 26, 22, 0.98),
			rgba(20, 17, 15, 0.98)
		);

	box-shadow: 0 14px 35px rgba(0, 0, 0, 0.28);
}

.piece-filter__grid {
	display: grid;

	grid-template-columns: repeat(4, minmax(0, 1fr));

	gap: 1rem;
	align-items: end;
}

.piece-filter__field {
	display: block;
	min-width: 0;
}

.piece-filter__field > span {
	display: block;

	margin-bottom: 0.4rem;

	color: var(--piece-gold);

	font-size: 0.84rem;
	font-weight: 700;
}

.piece-filter__field select,
.piece-filter__field input[type="search"] {
	width: 100%;
	height: 44px;

	padding: 0 0.7rem;

	border: 1px solid var(--piece-border-dark);
	border-radius: 7px;

	background: #211c18;

	color: var(--piece-ivory);

	font: inherit;
}

.piece-filter__field input[type="search"]::placeholder {
	color: #887b6f;
}

.piece-filter__field select:focus,
.piece-filter__field input[type="search"]:focus {
	border-color: var(--piece-gold);

	outline: 2px solid rgba(185, 152, 90, 0.12);
}


.piece-filter__actions {
	display: flex;
	align-items: end;
}

.piece-filter__reset {
	width: 100%;
	height: 44px;

	border: 1px solid #684149;
	border-radius: 7px;

	background:
		linear-gradient(
			180deg,
			#581722,
			#3f1018
		);

	color: #ead9b8;

	font: inherit;
	font-weight: 700;

	cursor: pointer;

	transition:
		background 0.18s ease,
		border-color 0.18s ease;
}

.piece-filter__reset:hover {
	border-color: #8a5961;

	background:
		linear-gradient(
			180deg,
			#6b202b,
			#4d131d
		);
}
/* ==================================================
   Content Filter
================================================== */

.piece-filter__content-row {
	display: grid;

	grid-template-columns: minmax(0, 1fr) minmax(140px, 180px);

	gap: 1rem;
	align-items: end;

	margin-top: 1.1rem;
	padding-top: 1.1rem;

	border-top: 1px solid var(--piece-border-dark);
}

.piece-filter__content {
	min-width: 0;

	margin: 0;
	padding: 0;

	border: 0;
}

.piece-filter__content legend {
	display: block;

	margin-bottom: 0.55rem;
	padding: 0;

	color: var(--piece-gold);

	font-size: 0.84rem;
	font-weight: 700;
}

.piece-filter__checkboxes {
	display: flex;

	flex-wrap: wrap;

	gap: 0.55rem;
}

.piece-filter__checkbox {
	display: inline-flex;

	align-items: center;

	gap: 0.45rem;

	min-height: 40px;

	padding: 0.45rem 0.8rem;

	border: 1px solid var(--piece-border-dark);
	border-radius: 7px;

	background:
		linear-gradient(
			180deg,
			#29231e,
			#1e1a17
		);

	color: #d7cab5;

	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.35;

	cursor: pointer;

	transition:
		background 0.18s ease,
		border-color 0.18s ease,
		color 0.18s ease;
}

.piece-filter__checkbox:hover {
	border-color: #756146;

	color: var(--piece-gold-light);
}

.piece-filter__checkbox:has(input:checked) {
	border-color: var(--piece-gold);

	background:
		linear-gradient(
			180deg,
			#5b1a25,
			#401018
		);

	color: #f0ddba;
}

.piece-filter__checkbox input {
	width: 1rem;
	height: 1rem;

	margin: 0;

	accent-color: var(--piece-bordeaux-light);
}

.piece-filter__content-row .piece-filter__actions {
	width: 100%;
}

.piece-quick-filters {
	display: flex;

	flex-wrap: wrap;

	gap: 0.5rem;

	margin-top: 1rem;
	padding-top: 1rem;

	border-top: 1px solid var(--piece-border-dark);
}


/* ==================================================
   Desktop Table
================================================== */

.piece-table {
	overflow: hidden;

	border: 1px solid #65503a;
	border-radius: 8px;

	background: var(--piece-paper);

	box-shadow:
		0 20px 50px rgba(0, 0, 0, 0.38),
		0 0 0 1px rgba(185, 152, 90, 0.05);
}

.piece-table__head,
.piece-row {
	display: grid;

	grid-template-columns:
		minmax(380px, 2.8fr)  /* Piece / Composer */
		minmax(140px, 0.7fr)  /* Level */
		minmax(200px, 1fr)    /* Category */
		72px                  /* Video */
		88px                  /* Free PDF */
		104px                 /* Sheet Music */
		72px;                 /* Book */

	align-items: center;
}

.piece-table__head {
	min-height: 50px;

	background:
		linear-gradient(
			180deg,
			#571823 0%,
			#421018 48%,
			#351015 100%
		);

	border-bottom: 1px solid #7a5d3c;

	color: #e5d1a5;

	font-family:
		Georgia,
		"Times New Roman",
		"Yu Mincho",
		"Hiragino Mincho ProN",
		serif;

	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.025em;

	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.piece-table__head > div {
	padding: 0.75rem 1rem;

	border-right: 1px solid rgba(221, 201, 155, 0.18);
}

.piece-table__head > div:last-child {
	border-right: 0;
}

.piece-table__body {
	display: flex;
	flex-direction: column;
}

.piece-row {
	min-height: 66px;

	border-bottom: 1px solid var(--piece-border-paper);

	background: var(--piece-paper);

	color: var(--piece-text);

	transition:
		background-color 0.18s ease,
		box-shadow 0.18s ease;
}

.piece-row:nth-child(even) {
	background: var(--piece-paper-alt);
}

.piece-row:last-child {
	border-bottom: 0;
}

.piece-row:hover {
	position: relative;

	background: #fffaf1;

	box-shadow:
		inset 4px 0 0 var(--piece-bordeaux),
		inset 0 0 25px rgba(139, 102, 51, 0.06);
}

.piece-row[hidden] {
	display: none;
}

.piece-row__main,
.piece-row__level,
.piece-row__category,
.piece-row__icon-cell {
	padding: 0.7rem 1rem;
}

.piece-row__title-link {
	display: inline-flex;

	flex-wrap: wrap;

	gap: 0.35em;

	align-items: baseline;

	color: inherit;

	text-decoration: none;
}

.piece-row__title-link:hover .piece-row__title {
	color: var(--piece-bordeaux);

	text-decoration: underline;
	text-decoration-color: rgba(75, 16, 25, 0.55);
	text-underline-offset: 0.18em;
}

.piece-row__title {
	color: #332821;

	font-family:
		Georgia,
		"Times New Roman",
		"Yu Mincho",
		"Hiragino Mincho ProN",
		serif;

	font-size: 1.18rem;
	font-weight: 700;
	line-height: 1.35;
}

.piece-row__slash,
.piece-row__composer {
	color: #716255;

	font-size: 0.95rem;
	line-height: 1.4;
}

.piece-row__level {
	display: flex;

	align-items: center;

	gap: 0.75rem;
}

.piece-level {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-width: 72px;
	min-height: 28px;

	padding: 0.2rem 0.55rem;

	border: 1px solid rgba(80, 62, 43, 0.12);
	border-radius: 5px;

	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.2;

	white-space: nowrap;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.25),
		0 1px 2px rgba(0, 0, 0, 0.06);
}


/* ==================================================
   Difficulty
================================================== */

.piece-level--level-1 {
	background: #e4ded2;
	color: #4c443d;
}

.piece-level--level-2 {
	background: #d9ccb2;
	color: #463b2d;
}

.piece-level--level-3 {
	background: #c8aa72;
	color: #382a18;
}

.piece-level--level-4 {
	background: #aa7658;
	color: #fff4e4;
}

.piece-level--level-5 {
	background: #70353e;
	color: #fff3e7;
}

.piece-stars {
	font-size: 1.05rem;

	letter-spacing: 0.05em;

	white-space: nowrap;
}


/* ==================================================
   Category
================================================== */

.piece-row__category {
	color: #58493e;

	font-size: 0.94rem;
	font-weight: 500;
}


/* ==================================================
   Action Icons
================================================== */

.piece-row__icons {
	display: contents;
}

.piece-row__icon-cell {
	display: flex;

	justify-content: center;
	align-items: center;

	min-height: 64px;
}

.piece-action {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	color: inherit;

	text-decoration: none;

	transition:
		transform 0.18s ease,
		opacity 0.18s ease;
}

.piece-action svg {
	display: block;

	width: 32px;
	height: 32px;
}


/* PCではテキストを非表示 */

.piece-action span {
	display: none;
}


/* Video */

.piece-action--video svg circle {
	fill: var(--piece-bordeaux);

	stroke: #8a5660;
	stroke-width: 0.7;
}

.piece-action--video svg path {
	fill: #f4e7d2;
	stroke: none;
}


/* PDF */

.piece-action--pdf svg {
	fill: none;

	stroke: #8c6937;
	stroke-width: 1.7;
	stroke-linejoin: round;
}

.piece-action--pdf svg text {
	fill: #8c6937;

	stroke: none;

	font-size: 4.5px;
	font-weight: 800;
}


/* Cart */

.piece-action--cart svg {
	fill: none;

	stroke: #9b7440;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* Book */

.piece-action--book svg {
	fill: none;

	stroke: #795443;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.piece-action:hover {
	transform: translateY(-2px);

	opacity: 0.75;
}

.piece-empty {
	color: #a59a8e;

	font-weight: 600;
}

.piece-list-no-results {
	margin: 0;

	padding: 2rem 1rem;

	background: var(--piece-paper);

	text-align: center;

	color: var(--piece-text-soft);
}


/* ==================================================
   Legend
================================================== */

.piece-legend {
	display: flex;

	flex-wrap: wrap;

	justify-content: center;

	gap: 1.7rem;

	width: fit-content;
	max-width: 100%;

	margin: 1.3rem auto 0;

	padding: 0.85rem 1.8rem;

	border: 1px solid #41362c;
	border-radius: 6px;

	background:
		linear-gradient(
			180deg,
			rgba(31, 27, 23, 0.94),
			rgba(20, 17, 15, 0.94)
		);

	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.piece-legend__item {
	display: inline-flex;

	align-items: center;

	gap: 0.55rem;

	color: #cfc0a9;

	font-size: 0.9rem;

	white-space: nowrap;
}

.piece-legend__item svg {
	width: 26px;
	height: 26px;
}


/* Legend - Video */

.piece-legend__item--video svg circle {
	fill: var(--piece-bordeaux);

	stroke: #8a5660;
	stroke-width: 0.7;
}

.piece-legend__item--video svg path {
	fill: #f4e7d2;

	stroke: none;
}


/* Legend - PDF */

.piece-legend__item--pdf svg {
	fill: none;

	stroke: var(--piece-gold);
	stroke-width: 1.7;
}

.piece-legend__item--pdf svg text {
	fill: var(--piece-gold);

	stroke: none;

	font-size: 4.5px;
	font-weight: 800;
}


/* Legend - Cart */

.piece-legend__item--cart svg {
	fill: none;

	stroke: var(--piece-gold);
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* Legend - Book */

.piece-legend__item--book svg {
	fill: none;

	stroke: #b38b72;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}



/* ==================================================
   Wide Desktop
================================================== */

@media screen and (min-width: 1280px) {

	.piece-table__head,
	.piece-row {
		grid-template-columns:
			minmax(460px, 3.2fr)  /* Piece / Composer */
			minmax(140px, 0.65fr) /* Level */
			minmax(210px, 1fr)    /* Category */
			72px                  /* Video */
			88px                  /* Free PDF */
			104px                 /* Sheet Music */
			72px;                 /* Book */
	}
}


/* ==================================================
   タブレット用のレスポンシブデザイン
================================================== */

@media screen and (max-width: 1040px) {

	.piece-table__head,
	.piece-row {
		grid-template-columns:
			minmax(240px, 2fr)
			minmax(155px, 1fr)
			minmax(180px, 1.1fr)
			72px
			92px
			100px
			72px;
	}

	.piece-row__main,
	.piece-row__level,
	.piece-row__category,
	.piece-row__icon-cell {
		padding-inline: 0.75rem;
	}
	
		.piece-filter__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.piece-filter__content-row {
		grid-template-columns: 1fr;
	}

	.piece-filter__content-row .piece-filter__actions {
		max-width: 220px;
	}
}


/* ==================================================
   スマホ用レスポンシブデザイン
================================================== */

@media screen and (max-width: 767px) {

	.piece-list-page {
		padding: 2.4rem 0 2.5rem;

		background:
			radial-gradient(
				circle at 50% 0%,
				rgba(82, 20, 29, 0.42),
				transparent 27rem
			),
			linear-gradient(
				180deg,
				#090807 0%,
				#15110f 50%,
				#0d0c0b 100%
			);
	}

	.piece-list-page__inner {
		width: min(100% - 32px, 620px);
	}


	/* Hero */

	.piece-list-hero {
		padding-top: 0.8rem;

		text-align: center;
	}

	.piece-list-hero__mark {
		display: block;

		color: var(--piece-gold);
	}

	.piece-list-hero__title {
		font-size: 2.4rem;
	}

	.piece-list-hero__lead {
		font-size: 1.05rem;
	}

	.piece-list-hero__total {
		position: static;

		margin-top: 0.6rem;

		font-size: 0.88rem;
	}


	/* Filter */

	.piece-filter {
		margin-top: 1.8rem;
	}

	.piece-filter__primary {
		grid-template-columns: minmax(0, 1fr) auto;

		gap: 0.8rem;
	}

	.piece-filter__search input {
		height: 56px;

		border-radius: 9px;

		font-size: 1rem;
	}

	.piece-filter__toggle {
		height: 56px;

		padding: 0 1rem;

		border-radius: 9px;

		font-size: 0.96rem;
	}

	.piece-filter__grid {
		grid-template-columns: 1fr;
	}
	
		.piece-filter__content-row {
		grid-template-columns: 1fr;
	}

	.piece-filter__checkboxes {
		display: grid;

		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.piece-filter__checkbox {
		width: 100%;

		padding-inline: 0.65rem;
	}

	.piece-filter__content-row .piece-filter__actions {
		max-width: none;
	}


	/* Table */

	.piece-table {
		border: 0;
		border-radius: 0;

		background: transparent;

		box-shadow: none;
	}

	.piece-table__head {
		display: none;
	}

	.piece-table__body {
		/* カード間隔を詰め、1画面に表示できる曲数を増やす */
		gap: 0.7rem;
	}


	/* Card */

	.piece-row {
		display: grid;

		/* モバイルは「曲名」「難易度＋カテゴリ」「アイコン」の3段構成 */
		grid-template-columns: auto minmax(0, 1fr);

		grid-template-areas:
			"main main"
			"level category"
			"icons icons";

		gap: 0.55rem 0.7rem;

		min-height: 0;

		padding: 0.9rem 0.9rem;

		border: 1px solid #cdbfa9;
		border-radius: 10px;

		background:
			linear-gradient(
				145deg,
				#faf6ed 0%,
				#f2e9dc 100%
			);

		color: var(--piece-text);

		box-shadow:
			0 14px 32px rgba(0, 0, 0, 0.32),
			inset 0 1px 0 rgba(255, 255, 255, 0.7);
	}

	.piece-row:nth-child(even) {
		background:
			linear-gradient(
				145deg,
				#f6efe4 0%,
				#eee3d5 100%
			);
	}

	.piece-row:hover {
		box-shadow:
			0 14px 32px rgba(0, 0, 0, 0.32),
			inset 0 1px 0 rgba(255, 255, 255, 0.7);
	}


	/* Main */

	.piece-row__main {
		grid-area: main;

		padding: 0;
	}

	.piece-row__title-link {
		display: inline-flex;
	}

	.piece-row__title {
		font-size: 1.25rem;
		line-height: 1.3;
	}

	.piece-row__slash,
	.piece-row__composer {
		font-size: 0.88rem;
		line-height: 1.35;
	}


	/* Level */

	.piece-row__level {
		grid-area: level;

		align-self: center;

		padding: 0;

		gap: 0.5rem;
	}

	.piece-level {
		min-width: 58px;
		min-height: 26px;

		padding: 0.08rem 0.34rem;

		border-radius: 5px;

		font-size: 0.74rem;
	}

	.piece-stars {
		font-size: 0.92rem;
		letter-spacing: 0.01em;
	}


	/* Category */

	.piece-row__category {
		grid-area: category;

		align-self: center;
		min-width: 0;

		padding: 0;

		color: #65564a;

		font-size: 0.82rem;
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: 0.01em;
		text-align: right;

		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}


	/* Icons */

	.piece-row__icons {
		grid-area: icons;

		display: flex;

		flex-wrap: nowrap;
		justify-content: flex-end;
		align-items: center;

		gap: 0.35rem;
		min-width: 0;
		padding-top: 0.05rem;
	}

	.piece-row__icon-cell {
		display: flex;

		justify-content: center;

		min-height: 0;
		flex: 0 0 auto;

		padding: 0;
	}

	.piece-row__icon-cell:has(.piece-empty) {
		display: none;
	}

	.piece-action {
		width: 36px;
		height: 36px;
		min-width: 36px;
		min-height: 36px;

		padding: 0;

		border: 1px solid #cfbfa7;
		border-radius: 6px;

		background:
			linear-gradient(
				180deg,
				#fffaf1,
				#f5ecdf
			);

		box-shadow:
			0 4px 12px rgba(65, 45, 28, 0.08),
			inset 0 1px 0 rgba(255, 255, 255, 0.7);

		font-weight: 700;
	}

	.piece-action:hover {
		transform: none;

		background: #fffdf8;

		opacity: 1;
	}

	/* テキストは非表示。aria-labelはPHP側に残るためアクセシビリティは維持 */
	.piece-action span {
		display: none;
	}

	.piece-action svg {
		width: 22px;
		height: 22px;

		flex: 0 0 auto;
	}


	/* Legend */

	.piece-legend {
		display: none;
	}
}


/* ==================================================
   より小さなスマホ用のレスポンシブデザイン
================================================== */

@media screen and (max-width: 480px) {

	.piece-list-page__inner {
		width: min(100% - 24px, 620px);
	}

	.piece-filter__primary {
		grid-template-columns: 1fr;
	}

	.piece-filter__toggle {
		width: 100%;
	}
	.piece-filter__checkboxes {
		grid-template-columns: 1fr;
	}

	/* 小さい端末でもカテゴリを難易度と同じ行に維持 */
	.piece-row {
		grid-template-columns: auto minmax(0, 1fr);

		grid-template-areas:
			"main main"
			"level category"
			"icons icons";

		padding-inline: 0.8rem;
	}

	.piece-row__icons {
		gap: 0.3rem;
	}

	.piece-action {
		width: 34px;
		height: 34px;
		min-width: 34px;
		min-height: 34px;
	}

	.piece-action svg {
		width: 21px;
		height: 21px;
	}
}