.board {
	margin: 50px auto 30px;
}

.board h1 {
	padding: 0 0 10px 50px;
	font-family: var(--html-font-som);
	font-weight: 400;
	font-size: 1.8rem;
	letter-spacing: 0.2rem;
	text-align: left;
	border-bottom: 3px solid #606060;
}

.board h1 + table {
	margin-top: 40px;
}

.board a {
	color: #303030;
}
.board a:hover {
	text-decoration: underline;
}



.board > small {
	position: relative;
	display: block;
	left: 15px;
	font-size: 1rem;
	line-height: 1.5;
}
.board > small::before {
	content: '※';
	position: absolute;
	left: -15px;
}


.board > .prefix {
	display: flex;
	flex-direction: row;
	justify-content: start;
	gap: 10px;
	margin: 30px 0 16px;
}

.board > .prefix > a {
	min-width: 120px;
	padding: 7px 20px;
	border: 1px solid #AAA;
	text-align: center;
	font-size: 1.2rem;
	font-weight: 400;
}

.board > .prefix > a.active {
	color: white;
	background-color: #3A3C55;
}



.board > table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	margin-bottom: 26px;
}

.board > table > thead > tr > th,
.board > table > tbody > tr > td {
	padding: 10px 5px;
	text-align: center;
/*	white-space: nowrap;*/
	font-size: 1.15rem;
}
.board > table > thead > tr > th {
	padding: 12px 20px;
	font-size: 1.25rem;
	font-weight: 700;
	border-bottom: 1px solid #AAA;
}

.board > table > thead.gradient > tr > th {
	color: white;
	background-color: rgba(58,60,86,1);
	background-image: linear-gradient(rgba(77,107,153,1) 5%, rgba(58,60,86,1) 12%, rgba(58,60,86,1) 92%, rgba(77,107,153,1) 95%);
}

.board > table > tbody > tr > td {
	border-bottom: 1px dotted #6F6F6F;
}
.board > table > tbody.hover > tr:hover {
	background-color: rgba(77,107,153,0.2);
}
.board > table > tbody > tr:last-child > td {
	border-bottom: 1px solid #6F6F6F;
}

.board > table .left {
	text-align: left !important;
}

.board > table .right {
	text-align: right !important;
}

.board > table td span.view { color: #FF4040; font-weight: 700; margin-left: 7px; }
.board > table td span.view:before { content: '['; }
.board > table td span.view:after  { content: ']'; }





.board .nav {
	display: grid;
	grid-template-areas: 'left paging paging paging right';
	grid-template-columns: repeat(5, 1fr);
}

.board .nav > .paging {
	grid-area: paging;
}

.board .nav > .paging ul {
	display: flex;
	margin: 3px auto 0;
	justify-content: center;
	align-items: center;
	list-style: none;

	font-size: 1.2rem;
	font-weight: 400;
}

.board .nav > .paging ul li b {
	font-size: 1.2rem;
	padding: 5px 10px;
}
.board .nav > .paging ul li a {
	padding: 5px 10px;
}

.board .nav > .paging ul li a:hover {
	font-size: 1.2rem ;
}

.board .nav > .paging ul li.first a:before { content: '《'; }
.board .nav > .paging ul li.end   a:before { content: '》'; }
.board .nav > .paging ul li.prev  a:before { content: '〈'; }
.board .nav > .paging ul li.next  a:before { content: '〉'; }


.board .nav > .left {
	grid-area: left;
	display: flex;
	justify-content: start;
	align-items: center;
}


.board .nav > .right {
	grid-area: right;
	display: flex;
	justify-content: end;
	align-items: center;
}


.board .search {
	margin-top: 20px;
	display: flex;
	justify-content: center;
	gap: 2px;
}

.board .search input,
.board .search select {
	max-height: unset;
	line-height: 2.2;
	padding-left: 15px;
	padding-right: 20px;
	border: 1px solid #838383;
	box-sizing: border-box;
}

.board .search input {
	min-width: 200px;
	max-width: 300px;
	width: 50%;
}

.board .search button {
	position: relative;
	top: 2px;
	left: -32px;
}

.board .search button img {
	width: 19px;
	height: 20px;
}







.board .posts {

}

.board .posts > thead > tr > th,
.board .posts > tbody > tr > td {
	text-align: left;
	font-size: 1.1rem;
	font-weight: 400;
	clear:both;
}
.board .posts > thead > tr > th {
	padding: 10px 30px;
	border-bottom: 0;
}
.board .posts > thead > tr:last-child {
	border-bottom: 1px solid #6f6f6f;
}

.board .posts .subject {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 2;
	white-space: pre-wrap;
	word-break: break-word;
}
.board .posts .subject b {
	padding-right: 30px;
	font-size: 1.3rem;
	color: #606060;
}
.board .posts .created {
	text-align: left;
}
.board .posts .view {
	text-align: right;
}
.board .posts .contents {
	padding: 30px 30px 100px;
	line-height: 1.8;
	white-space: pre-wrap;
	word-break: break-word;
}


.posts .table {
	width: 100%;
	margin-bottom: 1rem;
	color: #212529;
	border-collapse: collapse;
}
.posts .table.table-bordered {
	border: 1px solid #dee2e6;
}
.board .posts .table.table-bordered td,
.board .posts .table.table-bordered th {
	border: 1px solid #dee2e6;
}





.board .writer {
	margin: 0;
	padding: 0;
}

.board .writer > * {
	margin-bottom: 10px;
}

.board .writer > ul {
	padding: 10px 26px;
	background-color: #E6E6E6;
	border-radius: 5px;
	margin-bottom: 10px;
}

.board .writer > ul li {
	padding: 5px 0;
	display: flex;
	justify-content: start;
}

.board .writer > ul li > label {
	flex-basis: 140px;
	min-width: 140px;
	box-sizing: border-box;
}
.board .writer > ul li > input,
.board .writer > ul li > select,
.board .writer > ul li > textarea {
	flex-grow: 0;
}

.board .writer > textarea {
	margin-bottom: 10px;
}



.board .reply {
}

.board > .reply form {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
	box-sizing: border-box;
	padding: 20px;
	background-color: #E6E6E6;
}

.board > .reply form textarea {
	flex-grow: 1;
}

.board > .reply form button {
	flex-grow: 0;
	flex-basis: 150px;
}

.board > .reply form small {
	flex-grow: 1;
	flex-basis: 100%;
}


.board > .reply > ul {
	margin: 20px 0 30px;
	border-top: 2px solid #999999;
	border-bottom: 2px solid #999999;
	background-color: #FAFAFA;
}

.board > .reply > ul > div {
	line-height: 2;
	border-bottom: 2px solid #999999;
	padding: 0 24px;
	font-size: 1.2rem;
	font-weight: 700;
}

.board > .reply > ul > li {
	padding: 20px 24px 10px;
	border-bottom: 1px solid #AAA;
}
.board > .reply > ul > li::last-child {
	border-bottom: 0;
}

.board > .reply > ul > li > ul {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: start;
}

.board > .reply > ul > li > ul > li {
	flex-grow: 0;
	flex-basis: 150px;
}

.board > .reply > ul > li > ul > li:nth-child(2) {
	flex-grow: 1;
	width: auto;
}

.board > .reply > ul > li textarea {
	width: 100%;
	height: 70px;
	resize: none;
}

.prewrap {
	white-space: pre-wrap;
	word-break: break-word;
}











.gallery-item {
	position: relative;
	display: grid;
	width: 100%;
	grid-template-areas:
		'thumbnail thumbnail thumbnail thumbnail thumbnail thumbnail thumbnail thumbnail thumbnail thumbnail thumbnail thumbnail'
		'subject subject subject subject subject subject subject subject created created created created';
	grid-template-columns: repeat(12, 1fr);

}
.gallery-item > .image {
	grid-area: thumbnail;
	width: 100%;
	height: 195px;
	margin-bottom: 15px;

	border-radius: 10px;
	overflow: hidden;
}
.gallery-item > .image img {
	position: absolute;
	width: 100%;
	top: 50%;
	transform: translateY(-50%);
}
.gallery-item > .subject {
	grid-area: subject;
	padding: 5px 2px;
	text-align: left;
}
.gallery-item > .created {
	grid-area: created;
	padding: 5px 2px;
	text-align: right;
}





.books {
	white-space: wrap !important;
}

.books-hero {
	display: flex;
	gap: 30px;
	padding: 30px;
}

.books-hero > div {
	flex-grow: 1;
}

.books-hero .picture img {
	border-radius: 7px;
	box-shadow: 0 0 3px 1px black;
}

.books-hero .stats {
	display: grid;
	grid-template-areas:
		'hero hero'
		'ability units'
		'summary summary';
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 80px 180px auto;
	align-items: center;
}

.books-hero .hero {
	display: flex;
	flex-direction: row;
	grid-area: hero;
	gap: 10px;
	justify-content: start;
	border-bottom: 1px solid #AAA;
	margin-bottom: 20px;
	padding-bottom: 5px;
	line-height: 1;
}

.books-hero .hero .name {
	font-size: 1.5rem;
	font-weight: 400;
	font-family: var(--html-font-som);
	font-size: 4.2rem;
}
.books-hero .hero .group {
	position: relative;
	font-family: var(--html-font-hah);
	font-size: 2rem;
	font-weight: 400;
}
.books-hero .hero .grade {
	font-size:  1.6rem;
	font-family: var(--html-font-god);
}


.books-hero .ability {
	grid-area: ability;

	font-family: var(--html-font-hah);
	font-size: 1.4rem;

	padding-left: 30px;
}

.books-hero .ability li::before {
	margin-right: 15px;
	font-weight: 700;
}
.books-hero .ability li:nth-child(1)::before { content: 'Leadership'; }
.books-hero .ability li:nth-child(2)::before { content: 'Military'; }
.books-hero .ability li:nth-child(3)::before { content: 'Intelligence'; }
.books-hero .ability li:nth-child(4)::before { content: 'Politics'; }
.books-hero .ability li:nth-child(5)::before { content: 'Charm'; }


.books-hero .units {
	grid-area: units;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	font-family: var(--html-font-hah);
	font-size: 0.9rem;
	font-weight: 700;
}

.books-hero .units li {
	width: 33.33333%;
	flex-basis: 33.33333%;
	text-align: center;
	padding: 10px 0;
}

.books-hero .units li::before {
	display: block;
}
.books-hero .units li:nth-child(1)::before { content: 'Infantry'; }
.books-hero .units li:nth-child(2)::before { content: 'Spearmen'; }
.books-hero .units li:nth-child(3)::before { content: 'Pikemen'; }
.books-hero .units li:nth-child(4)::before { content: 'Archers'; }
.books-hero .units li:nth-child(5)::before { content: 'Cavalry'; }
.books-hero .units li:nth-child(6)::before { content: 'Siege'; }

.books-hero .units li::after {
	font-size: 2rem;
}
.books-hero .units li.unit-S::after { content: 'S'; color: rgba(255,162,0,1); }
.books-hero .units li.unit-A::after { content: 'A'; color: rgba(204,41,41,1); }
.books-hero .units li.unit-B::after { content: 'B'; color: rgba(26,37,180,1); }
.books-hero .units li.unit-C::after { content: 'C'; color: rgba(30,141,24,1); }
.books-hero .units li.unit-D::after { content: 'D'; color: rgba(33,33,33,1); }


.books-hero .summary {
	border-top: 1px solid #AAA;
	margin-top: 10px;
	padding-top: 15px;
	grid-area: summary;
	font-family: var(--html-font-nts);
	font-size: 1.2rem;
	line-height: 1.6;
}

.books-hero .summary::before {
	content: 'The Chronicles of Heroes';
	display: block;
	font-weight: bold;
	font-family: var(--html-font-hah);
	font-size: 1.3rem;
	line-height: 2.2;
}





.books-item table {
	width: 100%;
	border-collapse: collapse;
	border-top: 2px solid #909090;
	text-align: center;
}

.books-item table b {
	white-space: nowrap !important;
}

.books-item table img {
	width: 80px;
	height: 80px;
}

.books-item table th {
	padding: 10px 20px;
	border-bottom: 1px solid #A0A0A0;
}
.books-item table td {
	padding: 12px 10px 6px;
}

.books-item table tbody tr {
	border-bottom: 1px dotted #A0A0A0;
}





.guides {
	padding-top: 60px !important;
	padding-bottom: 120px !important;
	user-select: none;
}


.guides h6 {
	width: 100%;
	padding: 10px 20px;
	background-color: #888 !important;
	border-radius: 5px;
	color: white;
	font-weight: bold;
	font-size: 1.3rem;
	margin-bottom: 20px;
}

.guides b {
	font-size: 15px !important;
}

.guides > ul {
	font-size: 14px !important;
}

.guides > img {
	max-width: 100%;
}

.guides > ul > li {
	position: relative;
	margin: 7px 20px 20px 50px;
	word-break: break-word;
}


.guides > ul > li:before {
	content: '●';
	position: absolute;
	font-size: 10px;
	margin-top: 2px;
	margin-left: -26px;
}

.guides > ul > li > p {
	margin: 3px 0 0 5px;
	color: #ff0000;
}

.guides .summary {
	text-align: left !important;
}

.guides .guide-items {
	margin-bottom: 30px;
}

.guides .guide-items p {
	font-weight: 700;
	font-size: 15px;
}

.guides .guide-items li {
	margin: 10px 20px 2px 50px !important;
}

.guides .guide-items li:before {
	font-size: 7px;
	margin-top: 5px;
	margin-left: -15px;
}

.guides .guide-items img {
	position: relative;
	margin: 20px auto 30px;
}

.guides img.ml {
	position: relative;
	margin: 20px auto 30px 45px !important;
	max-width: 92.5%;
}









/** editor style override **/

.note-modal {
	width: 100%;
	height: 100%;
	z-index: 100;
}

.note-modal-content {
	position: absolute !important;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.note-modal-content .note-modal-header button {
	position: relative;
	z-index: 1;
}
.note-modal-content .note-input {
	position: relative;
	border-radius: 3px !important;
}

.note-modal-content .note-image-input::before {
	content: '파일 선택';
	position: absolute;
	top: 1px;
	left: 1px;
	padding: 7px 9px;
	border-radius: 3px;
	background-color: #4F506F;
	color: white;
	border: 1px solid #4F506F;
	cursor: pointer;
}
.note-modal-content .note-group-image-url,
.note-modal-content .note-modal-footer {
	display: none !important;
}