/*	bbs-header */
	.bbs-header {
		margin: 1rem 0;
	}

	.bbs-header form[name="bbs-search"] {
		margin-bottom: 1rem;
	}

	@media (min-width: 768px) {
		.bbs-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.bbs-header form[name="bbs-search"] {
			margin-bottom: 0;
		}
	}

/*	category-tabs */
	ul.category-tabs {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.category-tabs li {
		padding: 0;
		flex: 1 1 auto;
		text-align: center;
	}

	.category-tabs li a {
		display: block;
        background-color: var(--gray-200);
        color: var(--black);
        font-size: 1rem;
        font-family: var(--font-condensed);
        font-weight: 300;
        padding: .5rem 1rem;
        margin: 0;
        box-shadow: inset 0 0 4px var(--gray-300);
    }

    .category-tabs li a:hover {
        background-color: var(--gray-300);
        transition: all .3s ease;
    }

    .category-tabs li a.active {
        color: var(--black);
        background-color: #fff;
    }

    .category-tabs li a span {
        font-size: small;
        font-weight: 700;
        color: var(--red-dark);
    }

    @media (min-width: 768px) {
    	ul.category-tabs {
    		justify-content: flex-end;
    		padding-right: 0;
    	}

    	.category-tabs li {
    		flex: 0 1 auto;
    	}

		.category-tabs li a {
	        padding: .25rem 1rem;
	    }
    }

/*	index, notice */
	ul.index {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	ul.index li {
		border-bottom: dotted 1px var(--gray-300);
		padding: 1rem 0;
	}

	ul.index li.active {
		background-color: var(--green-light);
	}

	ul.notice li {
		background-color: var(--gray-100);
		border-bottom: solid 1px var(--gray-500);
	}

	ul.notice h6 {
		margin: 0;
	}

	ul.index img.thumb {
		width: 120px;
		height: 80px;
		object-fit: cover;
		float: right;
		margin-left: 1rem;
	}

	ul.index a:hover {
		color: var(--red-dark);
	}

	ul.index .preview {
		font-size: .8em;
	}

	ul.index .preview a {
		font-family: var(--font-serif);
		color: var(--gray-500);
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
	}

	ul.index dl {
		margin: 0;
		padding: 0;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	ul.index dl dt {
		font-weight: 300;
		line-height: 1;
		margin-top: .5rem;
		display: inline-flex;
		align-items: center;
	}

	ul.index dl dt:not(:first-child):before {
		content: '|';
		color: var(--orange);
		margin: 0 .5rem;
		font-size: 0.7em;
	}

	ul.index .category {
        background-color: var(--orange);
        color: #fff;
        padding: 1px 5px;
        line-height: 1;
        margin-right: 0.3rem;
        font-size: 0.65em;
        font-family: var(--font-monospace);
        font-weight: 500;
        text-transform: uppercase;
	}

	ul.index dt.date, ul.index dt.cmt-count, ul.index dt.read-count {
		font-family: var(--font-monospace);
		font-size: 0.9em;
	}

	@media (min-width: 768px) {
		ul.index {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-column-gap: 1rem;
		}

		ul.notice {
			grid-gap: 1rem;
			grid-template-columns: repeat(4, 1fr);
		}

		ul.notice li {
			padding: 1rem;
			border: none;
		}
	}

/*	pagination */
	.page-links {
		margin-top: 1rem;
		display: flex;
		justify-content: flex-end;
	}

	ul.pagination {
		margin-left: 1rem;
	}