@charset "UTF-8";

.board-wrap > .board-buttons{text-align: right; margin-bottom: 20px;}
.board-wrap > .board-buttons button{font-size: 16px; padding: 0.5em 1em;}
.board-wrap > .board .row{display: flex; flex-direction: row; align-items: center; gap: 10px;}
.board-wrap > .board .row > div{padding: 20px 0;}
.board-wrap > .board .row > div a{text-decoration: none; color: var(--color3);}
.board-wrap > .board .row > div a:not([href=""]):hover{font-weight: bold;}
.board-wrap > .board > .body > .row{border-bottom: 2px solid var(--color6);}
.board-wrap > .pages{margin-top: 50px; text-align: center;}
.board-wrap > .pages > .page-list{display: flex; flex-direction: row; align-items: center; display: inline-flex; flex-direction: row; gap: 0 20px;}
.board-wrap > .pages > .page-list > li > a{display: flex; flex-direction: row; align-items: center; justify-content: center; min-width: 30px; padding: 10px; height: 30px; font-size: 18px; border-radius: 30px; text-decoration: none; color: var(--color3); font-size: 16px;}
.board-wrap > .pages > .page-list > li > a.arrow > .mask{display: block; width: 1em; height: 1em; background-color: black;}
.board-wrap > .pages > .page-list > li > a.arrow.prev{transform: rotate(180deg);}
.board-wrap > .pages > .page-list > li > a.arrow.tp1 > .mask{mask-image: url('/resources/images/icons/arrow1.png'); -webkit-mask-image: url('/resources/images/icons/arrow1.png');}
.board-wrap > .pages > .page-list > li > a.arrow.tp2 > .mask{mask-image: url('/resources/images/icons/arrow2.png'); -webkit-mask-image: url('/resources/images/icons/arrow2.png');}
.board-wrap > .pages > .page-list > li > a.arrow:hover > .mask{background-color: var(--color1);}
.board-wrap > .pages > .page-list > li > a.page:hover{background-color: var(--color1); color: var(--color7);}
.board-wrap > .pages > .page-list > li > a.page.active{background-color: var(--color1); color: var(--color7);}

.image-board-wrap > .board-buttons{text-align: right; margin-bottom: 20px;}
.image-board-wrap > .board-buttons button{font-size: 16px; padding: 0.5em 1em;}
.image-board-wrap > .board{display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.image-board-wrap > .board > a{position: relative; display: block; text-decoration: none;}
.image-board-wrap > .board > a > .thumbnail{position: relative; display: block; width: 100%; padding-top: 56.65%; border-radius: 10px; overflow: hidden;}
.image-board-wrap > .board > a > .thumbnail > img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;}
.image-board-wrap > .board > a > .title{display: block; margin-top: 20px; color: black; width: 100%; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.image-board-wrap > .board > a > .write-date{display: block; margin-top: 10px; text-align: right; font-size: 14px; color: var(--color6);}
.image-board-wrap > .board > a > .show-control{position: relative; border: none; background-color: transparent; width: 30px; height: 30px;}
.image-board-wrap > .board > a > .show-control > span{position: absolute; width: 5px; height: 5px; border-radius: 50%; background-color: black;}
.image-board-wrap > .board > a > .show-control > span:nth-child(1){left: 50%; top: 0; transform: translateX(-50%);}
.image-board-wrap > .board > a > .show-control > span:nth-child(2){left: 50%; top: 50%; transform: translate(-50%,-50%);}
.image-board-wrap > .board > a > .show-control > span:nth-child(3){left: 50%; bottom: 0; transform: translateX(-50%);}
.image-board-wrap > .board > a > .control-wrap{position: absolute; display: none; left: 30px; top: calc(100% - 30px); border: 2px solid var(--color6); width: calc(100% - 30px); z-index: 100; background-color: white; border-radius: 10px;}
.image-board-wrap > .board > a > .control-wrap > a{display: block; padding: 0.5em; color: black;}
.image-board-wrap > .board > a > .control-wrap > a:hover{background-color: rgba(0,0,0,0.1);}
.image-board-wrap > .board > a > .control-wrap.active{display: block;}
.image-board-wrap > .pages{margin-top: 20px; text-align: center;}
.image-board-wrap > .pages > button{font-size: 16px; width: 100%; max-width: 150px;}

.view-wrap{padding-top: 50px;}
.view-wrap > .button-wrap{display: flex; flex-direction: row; justify-content: flex-end; gap: 20px; flex-wrap: wrap;}
.view-wrap > .button-wrap > button{width: 150px;}
.view-wrap > .title{font-size: 30px; margin-bottom: 30px;}
.view-wrap > .info{border-bottom: 2px solid var(--color6); padding: 20px 0; display: flex; flex-direction: row; justify-content: space-between;}
.view-wrap > .content{padding: 30px 0; border-bottom: 2px solid var(--color6); word-break: break-all; line-height: 1.5;}
.view-wrap > .content ul{list-style: disc; margin-block-start: 1em;margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 40px;}
.view-wrap > .nav{padding: 30px 0; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 20px;}
.view-wrap > .nav > .prev-wrap{width: calc((100% - 20px * 2 - 150px) / 2);}
.view-wrap > .nav > .prev-wrap > a{display: flex; flex-direction: row; align-items: center; gap: 20px; text-decoration: none; color: var(--color6);}
.view-wrap > .nav > .prev-wrap > a > .circle{display: block; width: 50px; height: 50px; border: 2px solid var(--color6); border-radius: 50%; padding: 10px;}
.view-wrap > .nav > .prev-wrap > a > .circle > .arrow{display: block; width: 100%; padding-top: 100%; background-color: var(--color6); mask-image: url('/resources/images/icons/arrow1.png'); -webkit-mask-image: url('/resources/images/icons/arrow1.png'); transform: rotate(180deg);}
.view-wrap > .nav > .prev-wrap > a > .title{width: calc(100% - 50px - 20px); word-break: break-all; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.view-wrap > .nav > .go-list-wrap{width: 150px;}
.view-wrap > .nav > .go-list-wrap button{width: 100%; font-size: 16px; padding: 1em;}
.view-wrap > .nav > .next-wrap{width: calc((100% - 20px * 2 - 150px) / 2); overflow: hidden;}
.view-wrap > .nav > .next-wrap > a{display: flex; flex-direction: row-reverse; align-items: center; gap: 20px; text-decoration: none; color: var(--color6);}
.view-wrap > .nav > .next-wrap > a > .circle{display: block; width: 50px; height: 50px; border: 2px solid var(--color6); border-radius: 50%; padding: 10px;}
.view-wrap > .nav > .next-wrap > a > .circle > .arrow{display: block; width: 100%; padding-top: 100%; background-color: var(--color6); mask-image: url('/resources/images/icons/arrow1.png'); -webkit-mask-image: url('/resources/images/icons/arrow1.png');}
.view-wrap > .nav > .next-wrap > a > .title{width: calc(100% - 50px - 20px); word-break: break-all; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-align: right;}

.edit-wrap{padding-top: 50px;}

@media (max-width: 1200px){
	
}

@media (max-width: 700px){
	.board-wrap > .pages > .page-list{gap: 0 10px;}
	.board-wrap > .pages > .page-list > li > a{min-width: 25px; height: 25px; padding: 5px;}
	
	.image-board-wrap > .board{grid-template-columns: 1fr;}
	.view-wrap > .nav{gap: 10px;}
	.view-wrap > .nav > .prev-wrap{width: calc((100% - 10px * 2 - 120px) / 2);}
	.view-wrap > .nav > .prev-wrap > a > .title{display: none;}
	.view-wrap > .nav > .go-list-wrap{width: 120px;}
	.view-wrap > .nav > .next-wrap{width: calc((100% - 10px * 2 - 120px) / 2);}
	.view-wrap > .nav > .next-wrap > a > .title{display: none;}
}