.section-blog {
	padding-block: calc(var(--section-gap) * 2);
}
.board-blog-theme {
	--bg-color: #fff;
	--row-gap: 30rem;
	display: grid;
	row-gap: var(--row-gap);
	max-width: 1600rem;
	max-width: calc(100vw - 4rem);
	margin-inline: auto;
	margin-inline: auto;
	@media (width >= 1024px) {
		grid-template-columns: 65% 1fr;
		align-items: start;
		gap: 24rem 48rem;
	}
	@media (max-width: 768px) {
		grid-template-columns: 1fr;
		column-gap: 0;
	}
	& > * {
		min-width: 0;
	}
	.board-panel {
		.card-list {
			display: grid;
			gap: var(--row-gap);
			.card-item {
				padding: 20rem;
				background: var(--bg-color);
				border-left: 5rem solid var(--primary);
				border-radius: 12rem;
				box-shadow: 0 2px 20px #0e0e130d;
			}
			.detail-link {
				display: grid;
				@media (width >= 768px) {
					.thumb-block {
						max-width: 250rem;
					}
				}
				@media (width >= 1024px) {
					grid-template: "thumb title title" "thumb comment date" "thumb excerpt excerpt" 1fr / calc(max(250rem, 22.7%) + 25rem) auto 1fr;
					@media (width < 1280px) {
						.thumb-block {
							/* align-self: center; */
						}
					}
				}
				@media (width >= 1024px) {
					.thumb-block {
						margin-right: 25rem;
					}
				}
				@media (width < 1024px) {
					grid-template: "thumb thumb" "title title" "comment date" "excerpt excerpt" 1fr / auto 1fr;
					.thumb-block {
						margin: 0 auto 25rem;
					}
				}
			}
			.thumb-block {
				display: block;
				grid-area: thumb;
				width: 100%;
				aspect-ratio: 500 / 334;
				background: var(--primary);
				border-radius: 12rem;
			}
			.thumb {
				display: block;
				width: 100%;
				height: auto;
				object-fit: cover;
				text-indent: -1000vw;
				border-radius: inherit;
			}
			.title {
				grid-area: title;
				width: fit-content;
				margin-block: 0.2em 0.7em;
				font-size: 21rem;
				line-height: 1.4;
				-webkit-line-clamp: 3;
				.title-text {
					padding-block: 2px;
					background: linear-gradient(90deg, var(--primary), var(--primary)) no-repeat 0 100% / 0% 2px;
					@media (prefers-reduced-motion: no-preference) {
						transition: 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
					}
				}
				&:hover {
					.title-text {
						color: var(--primary);
						background-size: 100% 2px;
					}
				}
			}
			.comment {
				grid-area: comment;
				margin-right: 15rem;
				font-size: 14rem;
			}
			.date {
				grid-area: date;
				font-size: 14rem;
				color: #97a9bf;
			}
			.excerpt {
				grid-area: excerpt;
				margin-top: 30rem;
				font-size: 17rem;
				line-height: 1.6;
				color: #97a9bf;
				@media (width >= 1280px) {
					-webkit-line-clamp: 3;
				}
				@media (width < 1280px) {
					-webkit-line-clamp: 6;
				}
			}
			.category-block {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				gap: 10rem;
				margin-top: 35rem;
				padding-top: 15rem;
				font-size: 17rem;
				border-top: 1px dashed #79788b52;
			}
		}
		.board-blog-pagination {
			margin-top: var(--row-gap);
			.list {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				gap: 10rem;
				max-width: 720rem;
				margin-inline: auto;
				li:first-child {
					margin-right: auto;
				}
				li:last-child {
					margin-left: auto;
				}
				@media (width < 768px) {
					li:nth-child(3),
					li:nth-child(4),
					li:nth-last-child(3),
					li:nth-last-child(4) {
						display: none;
					}
				}
			}
			.link {
				position: relative;
				display: block;
				align-content: center;
				width: 40rem;
				aspect-ratio: 1;
				font-size: 13rem;
				text-align: center;
				background: #fff;
				border-radius: 50%;
				box-shadow:
					0 2px 4px hsla(0, 0%, 42.4%, 0.2),
					0 0 0 transparent;
				&.link--current,
				&:hover {
					color: #fff;
					background: var(--primary);
				}
				&.link--disabled {
					opacity: 0.4;
					cursor: default;
					pointer-events: none;
				}
				&.link--first {
					margin-right: 3ch;
				}
				&.link--last {
					margin-left: 3ch;
				}
				&.link--first::before,
				&.link--last::before {
					position: absolute;
					color: var(--black);
					content: "…";
					pointer-events: none;
				}
				&.link--first::before {
					right: -2ch;
					translate: 50%;
				}
				&.link--last::before {
					left: -2ch;
					translate: -50%;
				}
				&.link--prev .icon-arrow {
					rotate: 180deg;
				}
				@media (prefers-reduced-motion: no-preference) {
					transition: 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
				}
			}
			.icon-arrow {
				display: block;
				width: 14rem;
				aspect-ratio: 1;
				margin-inline: auto;
			}
		}
	}
	.detail-panel {
		width: 100%;
		min-width: 0;
		margin-inline: auto;
		@media (width >= 768px) {
			max-width: calc(100vw - 64rem);
		}
		.thumb-block {
			&:empty {
				display: none;
			}
			.thumb {
				display: block;
				width: 100%;
				height: auto;
			}
		}
		.content-block {
			padding: 27rem 36rem 20rem;
			background: #fff;
			border: 1px solid #2222;
		}
		.content-block .content iframe {
			width: 100%;
		}
		.content > img {
			width: 100% !important;
			height: auto !important;
		}
		.meta-list {
			display: flex;
			gap: 2ch;
			padding-inline: 0rem;
			font-weight: 700;
			font-size: 17rem;
		}
		.meta-item {
			display: inline-flex;
			align-items: center;
			gap: 1ch;
		}
		.meta-link:hover {
			color: var(--primary);
		}
		.meta-icon {
			display: inline-block;
			height: 19rem;
			aspect-ratio: 1;
			color: var(--primary);
		}
		.board-title {
			margin-block: 12rem 19rem;
			font-size: 22rem;
		}
	}
	.comment-panel {
		margin-top: 50rem;
		font-size: 17rem;
		color: #555;
		.comment-list {
			color: #232323;
			.title {
				margin-bottom: 1em;
				font-size: 25rem;
			}
			&:not(:has(li)) {
				display: none;
			}
			.comment-block {
				display: grid;
				grid-template-columns: auto auto auto 1fr;
				align-items: center;
				margin-bottom: 30rem;
				padding: 30rem;
				background: #fff;
				border: 1px solid #ddd;
			}
			.profile {
				width: 32rem;
				aspect-ratio: 1;
				margin-right: 30rem;
				background: url("/images/board/profile.jpg");
			}
			.name {
				margin-right: 6ch;
				font-size: 20rem;
				color: #000;
			}
			.btns {
				display: inline-flex;
				justify-self: end;
				gap: 1ch;
			}
			.btn {
				display: inline-block;
				/* padding: 3rem 20rem; */
				padding: 0.8em;
				font-weight: 600;
				font-size: 14rem;
				line-height: 1;
				color: #fff;
				/* background: #97aa85;
				border: 1px solid #97aa85; */
				background: var(--primary);
				border: 1px solid var(--primary);
				/* border: 1px solid var(--black); */
				/* border-radius: 2px; */
				border-radius: 5em;
				cursor: pointer;
				&:hover {
					color: var(--primary);
					background: #fff;
				}
				@media (prefers-reduced-motion: no-preference) {
					transition: 0.5s;
				}
			}
			.comment-text {
				grid-column: 1 / -1;
				margin-top: 13rem;
				font-size: 15rem;
			}
			.comment_password {
				margin-bottom: 30rem;
			}
		}
		.comment-write {
			margin-top: 50rem;
			&.write {
				margin-bottom: 30rem;
			}
			.heading {
				margin-bottom: 10rem;
				font-size: 28rem;
				color: #232323;
			}
			.note {
				margin-bottom: 30rem;
			}
			form {
				display: grid;
				gap: 20rem;
			}
			.item {
				display: block;
				width: 100%;
			}
			.label {
				display: block;
				margin-bottom: 5rem;
			}
			.field {
				width: 100%;
				height: 44rem;
				margin: 0;
				padding: 10rem;
				textarea& {
					height: 120rem;
				}
			}
			.submit-btn {
				/* width: 100%;
				height: 44rem;
				color: #fff;
				background: var(--black); */
				padding: 0.93614978em 2.49639942em;
				font: 600 var(--fs20) var(--font-goyo);
				color: var(--bg-3);
				background: var(--black);
				border-radius: 5em;
				&:hover {
					background: var(--primary);
				}
				@media (prefers-reduced-motion: no-preference) {
					transition: 0.5s;
				}
			}
		}
	}
	.side-panel {
		display: grid;
		gap: 30rem;
		.panel-base {
			padding: clamp(8rem, calc(30 / var(--inr) * 100vw), 30rem);
			background: var(--bg-color);
			border: 1px solid #ddd;
			.panel-heading {
				font-weight: 700;
				font-size: 20rem;
			}
			.panel-list {
				margin-top: 15rem;
				font-size: 17rem;
			}
			.panel-item {
				padding-block: 15rem;
				& + & {
					border-top: 1px solid #e2e9f3;
				}
			}
			.panel-title {
				@media (hover) {
					&:hover {
						color: var(--primary);
					}
					@media (prefers-reduced-motion: no-preference) {
						transition: 0.5s;
					}
				}
			}
		}
		.category-panel {
			.count {
				/* color: #97a9bf; */
				color: var(--primary);
			}
			.count::before {
				content: "(";
			}
			.count::after {
				content: ")";
			}
		}
		.search-panel {
			display: grid;
			grid-template-columns: 1fr min(30%, 180rem);
			gap: 1ch;
			.search-input {
				width: 100%;
				min-width: 0;
				height: 60rem;
				/* width: 100%;
				height: 100%;
				margin: 0;
				padding: 10rem 25rem;
				color: #333;
				border: 1px solid #01010110; */
				margin: 0;
				padding: 0 3ch 0 2ch;
				font-size: var(--fs20);
				border: 1px solid currentColor;
				border-radius: 5em;
			}
			.search-submit {
				/* padding: 10px 1ch;
				color: #fff;
				text-transform: uppercase;
				background: #333;
				border: 1px solid #01010110; */
				padding: 0.93614978em 2.49639942em;
				font: 600 var(--fs20) var(--font-goyo);
				color: var(--bg-3);
				background: var(--black);
				border-radius: 5em;
				@media (prefers-reduced-motion: no-preference) {
					transition: 0.5s;
				}
			}
		}
	}
}