#board_list { place-self:center; width:100%; max-width:1100px; margin-top:20px; }
#board_list > h2 { font-size:16px; display:flex; justify-content:center; align-items:center; }

#board_list > .list-wrap { margin-top:60px; display:grid; grid-template-columns:repeat(3, 1fr); gap:30px; }

#board_list .card { display:flex; flex-direction:column; gap:10px; min-width:0; }
#board_list .card > .image { position:relative; width:100%; height:200px; overflow:hidden; cursor:pointer; }
#board_list .card > .subject { width: 100%; display: block; }
#board_list .card > .subject  span { display: block; width: 100%; font-size:16px; font-weight:bold; overflow: hidden; white-space: nowrap;  text-overflow: ellipsis;  word-break: break-all; }
#board_list .card > .summery { color:#888; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: break-word; }
#board_list .card > .summary { color:#888; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: break-word; }
#board_list .card > .card-stats { display:flex; align-items:center; justify-content:space-between; color:#666; }
  

#board_list .controller { margin-top:20px; display:flex; justify-content:flex-end; }


@media screen  and  (max-width : 600px) {
	#board_list > .list-wrap { grid-template-columns:repeat(2, 1fr); gap:10px; }
}

@media screen  and  (max-width : 400px) {
	#board_list > .list-wrap { grid-template-columns:1fr; gap:30px; }
}


/* ################################################# read #############################################*/
#board_read { place-self:center; width:100%; max-width:900px; margin-top:20px; }
#board_read > h1 { font-size:24px; font-weight:bold; justify-content:flex-start; }
#board_read > h2 { margin-top:20px; font-size:20px; font-weight:500; display:flex; justify-content:center; align-items:center; }
#board_read .board-info { margin-top:20px; color:#999; border-bottom: 1px solid #999; padding-bottom:10px; }

#board_read .board-content { line-height:200%; }
#board_read .board-content h1 { border-left:5px solid #999; padding-left:20px; display:block; font-size:20px; font-weight:bold; margin-bottom:20px; color: #222; }
#board_read .board-content h2 { margin-top:20px; font-size: 18px; font-weight: 600; color: #444; }
#board_read .board-content .summery { background-color: #f0f4f8; font-style: italic; color: #2a2a2a; padding:20px; }
#board_read .board-content .summary { background-color: #f0f4f8; font-style: italic; color: #2a2a2a; padding:20px; }
#board_read .board-content p { font-size: 14px; margin:20px 0;}
#board_read .board-content  .conclusion {
  font-weight: 500;
  background-color: #f9f9f9;
  padding: 1rem;
  border-top:1px solid #ccc;
  border-bottom:1px solid #ccc;
  color: #1e1e1e;
}
#board_read .board-content img { width:100%; }

form[name='comment-form'] { display:flex; justify-content:center; align-items:center; gap:10px; }
form[name='comment-form'] textarea { padding:10px; border-radius:5px; border: 1px solid #ccc; }
form[name='comment-form'] button { width:150px; height:50px;  display:flex; justify-content:center; align-items:center; }
.button-type-A { --bgcolor:#666; }
.button-type-B { --bgcolor:#444; }
.board-controller { display:flex; justify-content:flex-end; gap:10px; }
.board-controller button { width:90px; height:35px; }
/* ################################################# update #############################################*/
#board_update { place-self:center; width:100%; max-width:900px; margin-top:20px; }
#board_update input { height:100%; }
#inputFilebox { height:100%;}
#inputFilebox button { height:40px; }
.addbutton { height:40px; }
#inputFilebox .value { height:100%; }
.inputFile { height:40px;}