.fieldfile { display:grid; gap:10px; grid-template-columns:1fr 120px ; }
.fieldfile .buttonwrap { display:flex; justify-content:center; align-items:flex-end; padding-bottom:5px; }

.fieldfile .jw-button { min-width:100px; height:48px; }
#inputFile-wrap { display:flex; flex-direction:column; gap:5px; }

#board_list .subject { display:flex; align-items:center; gap:6px; }
#board_list .secret-lock { position: relative; width: 14px; height: 10px; border: 2px solid rgba(0,0,0,.45); border-radius: 3px; box-sizing: border-box; flex: 0 0 auto; }
#board_list .secret-lock::before { content:""; position:absolute; left:50%; top:-7px; transform:translateX(-50%); width:10px; height:8px; border:2px solid rgba(0,0,0,.45); border-bottom:0; border-radius:10px 10px 0 0; box-sizing:border-box; background:transparent; }


.jw-board-gallery { margin-top:30px; width:100%; max-width:1100px; padding:10px 0; place-self:center; }
.jw-board-gallery .list-wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:20px; }
.jw-board-gallery .card { background: #f1f1f1; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; overflow: hidden; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.jw-board-gallery .card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.10); border-color: rgba(0,0,0,.14); }
.jw-board-gallery .image { width: 100%; aspect-ratio: 4 / 3; background-position: center; background-repeat: no-repeat; background-size: cover; background-color: #f2f3f5; }
.jw-board-gallery .card-stats { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 0 12px; color: rgba(0,0,0,.55); font-size: 12px; }
.jw-board-gallery .subject { padding: 8px 12px 0 12px; font-size: 16px; font-weight: 700; color: #111; }
.jw-board-gallery .subject span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.jw-board-gallery .summary { padding: 8px 12px 12px 12px;  }
.jw-board-gallery .summary span { font-size: 13px;  color: rgba(0,0,0,.70); }
.jw-board-gallery .summary span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.jw-board-gallery .controller { display: flex; justify-content: flex-end; padding: 14px 0 0 0; }

@media (max-width: 1200px) {
	.jw-board-gallery .list-wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.jw-board-gallery .list-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 520px) {
	.jw-board-gallery .list-wrap { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.jw-board-gallery .card-stats { padding-top: 8px; }
}


/* ################################################# read #############################################*/
#board_read { max-width: 900px; margin: 20px auto 0 auto; padding: 18px 0 60px 0; width: 100%; }
#board_read > h1 { margin: 0; padding: 10px 0 12px 0; font-size: 24px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.25; color: #111; display: block; }
#board_read > h2 { margin: 20px 0 0 0; font-size: 20px; font-weight: 500; display: flex; justify-content: center; align-items: center; }

#board_read .board-info { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 20px; padding: 10px 0 16px 0; border-bottom: 1px solid rgba(0,0,0,.12); color: rgba(0,0,0,.55); font-size: 12px; }
#board_read .board-info span { display: inline-flex; align-items: center; }
#board_read .board-info span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: rgba(0,0,0,.25); margin: 0 10px; }

#board_read .board-attachments { margin: 18px 0 0 0; padding: 16px 16px; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; background: rgba(0,0,0,.02); }
#board_read .board-attachments h3 { margin: 0 0 10px 0; font-size: 14px; font-weight: 800; color: #111; }
#board_read .board-attachments ul { margin: 0; padding: 0 0 0 16px; }
#board_read .board-attachments li { margin: 6px 0; padding: 0; }
#board_read .board-attachments a { color: #2b6cff; text-decoration: none; word-break: break-all; }
#board_read .board-attachments a:hover { text-decoration: underline; }

#board_read .board-content { margin: 18px 0 0 0; padding: 18px 18px; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; background: #fff; line-height: 2; color: rgba(0,0,0,.86); font-size: 14px; }
#board_read .board-content h1 { border-left: 5px solid #999; padding-left: 20px; display: block; font-size: 20px; font-weight: 700; margin: 20px 0; color: #222; }
#board_read .board-content h2 { margin: 24px 0 10px 0; font-size: 18px; font-weight: 600; color: #444; }
#board_read .board-content p { margin: 20px 0; font-size: 14px; }
#board_read .board-content .summery { background-color: #f0f4f8; font-style: italic; color: #2a2a2a; padding: 20px; border-radius: 12px; }
#board_read .board-content .summary { background-color: #f0f4f8; font-style: italic; color: #2a2a2a; padding: 20px; border-radius: 12px; }
#board_read .board-content .conclusion { font-weight: 500; background-color: #f9f9f9; padding: 16px; border-top: 1px solid rgba(0,0,0,.18); border-bottom: 1px solid rgba(0,0,0,.18); color: #1e1e1e; border-radius: 12px; }
#board_read .board-content img { max-width: 100%; height: auto; display: block; border-radius: 10px; margin: 10px auto; }
#board_read .board-content pre { margin: 16px 0; padding: 14px 14px; border: 1px solid rgba(0,0,0,.10); border-radius: 12px; background: rgba(0,0,0,.03); overflow: auto; }
#board_read .board-content code { padding: 2px 6px; border-radius: 8px; background: rgba(0,0,0,.05); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 13px; }
#board_read .board-content pre code { padding: 0; background: transparent; border-radius: 0; display: block; white-space: pre; }

#board_read .board-controller { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 18px 0 0 0; }
#board_read .board-controller button { width: 90px; height: 35px; }

form[name='comment-form'] .actions { margin-top:10px; display:flex; justify-content:flex-end; align-items:center; gap:10px; }
form[name='comment-form'] .actions button { height:30px; padding:0 10px; font-size:12px; }
form[name='comment-form-sub'] .actions { margin-top:10px; display:flex; justify-content:flex-end; align-items:center; gap:10px; }
form[name='comment-form-sub'] .actions button { height:30px; padding:0 10px; font-size:12px; }

.board-comment-list { display:flex; flex-direction:column; gap:20px; }
.board-comment-list .comment { display:flex; flex-direction:column; gap:5px; }
.board-comment-list .user-info { font-size:11px; color:#999; }
.board-comment-list .actions { display:flex; align-items:center; gap:10px; }
.board-comment-list .actions button { height:25px; padding:0 10px; font-size:12px; }

#board_password { max-width: 520px; margin: 80px auto; padding: 30px; border: 1px solid rgba(0,0,0,.10); border-radius: 16px; background: #fff; }
#board_password .title { font-size: 22px; font-weight: 700; color: #222; margin: 0 0 10px 0; }
#board_password .desc { font-size: 14px; color: #666; margin: 0 0 20px 0; }
#board_password .field { margin: 0 0 20px 0; }
#board_password input[type="password"] { width: 100%; height: 44px; padding: 0 14px; border: 1px solid rgba(0,0,0,.18); border-radius: 10px; font-size: 14px; outline: 0; box-sizing: border-box; }
#board_password input[type="password"]:focus { border-color: rgba(0,0,0,.45); }
#board_password .controller { display:flex; gap:10px; justify-content:flex-end; }



#board_update { width:100%; max-width:900px; place-self:center; }

.jw-tableB td { }
.jw-tableB td input { height:100%; }
.jw-tableB td input:focus { box-shadow:none; border:0; outline:none;  }
.jw-tableB .field { display:flex; align-items:center; gap:10px; }

.inputFile .value { width:320px; overflow: hidden; white-space: nowrap;  text-overflow: ellipsis;  word-break: break-all; }

@media (max-width: 700px) {
	#board_read { padding: 12px 0 50px 0; }
	#board_read > h1 { font-size: 22px; }
	#board_read .board-content { padding: 14px 14px; }
	#board_read .board-attachments { padding: 14px 14px; }
	#board_read .board-comment-list { padding: 12px 12px; }
	form[name='comment-form'] { flex-direction: column; align-items: stretch; }
	form[name='comment-form'] button { width: 100%; height: 46px; }
	form[name='comment-form-sub'] { flex-direction: column; align-items: stretch; }
	form[name='comment-form-sub'] button { width: 100%; height: 46px; }
}
/* ################################################# update #############################################*/