#board_header {
    display: block;
    width: 100%;
    height: auto;
    background-color: var(--bg-01);
    padding: min(20px, max(15px, 4vw)) min(20px, max(10px, 4vw));
}

#board_body {
    display: block;
    width: 100%;
    height: auto;
    min-height: 70vh;
    background-color: var(--bg-01);
    padding: min(20px, max(15px, 4vw)) min(20px, max(10px, 4vw));
}

.board_action_list {
    display: flex;
    width: 100%;
    height: auto;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
}
.board_action_list > .left, .board_action_list > .right {
    display: flex;
    width: fit-content;
    height: auto;
    align-items: center;
    flex-wrap: nowrap;
    gap: .2em;
}
.board_action_list > .left {
    justify-content: left;
}
.board_action_list > .right {
    justify-content: right;
}

.board_help {
    display: block;
    width: 100%;
    padding: 0 min(20px, max(10px, 4vw)) .5em;
    color: var(--text-desc);
    text-align: center;
    margin-bottom: min(40px, max(30px, 8vw)) ;
}

.board_attr_desc_box {
    display: grid;
    width: 100%;
    height: auto;
    grid-template-columns: 1fr;
    line-height: 1em;
    margin-top: min(20px, max(15px, 4vw));
}
.board_attr_desc_box > .attr {
    display: block;
    width: 100%;
    height: auto;
    font-size: 1.125em;
    font-weight: 600;
    color: var(--text-09);
    padding-bottom: .5rem;
}
.board_attr_desc_box > .desc {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 2.5em;
}
.board_cancel_ok_box {
    display: grid;
    width: 100%;
    height: auto;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
    padding: 0 min(20px, max(10px, 4vw));
    margin-top: 2em;
}
.board_cancel_ok_box > * {
    font-size: 1.125em;
    border-radius: min(20px, max(7px, 4vw));
    padding: .5rem 0;
    text-align: center;
}
textarea[name="body"], textarea[name="reply_body"] {
    width: 100%;
    height: auto;
    aspect-ratio: 3/1;
    min-height: 4em;
    line-height: 1.5em;
}

/* 파일 추가 */
.file_add_box {
    display: flex;
    justify-content: stretch;
    flex-wrap: nowrap;
    width: 100%;
    height: 2.5em;
    gap: .2em;
    border: 1px solid var(--border-input) ;
    padding: 0 .5em;
}

.file_add_box > .file_msg {
    display: flex;
    width: 100px;
    height: 100%;
    justify-content: left;
    align-items: center;
    flex-grow: 1;
    padding: 0 .5em;
}

.file_add_box > .file_msg:hover {
    cursor: pointer;
    border: 2px solid var(--focused);
}

.file_add_box > .file_msg > p {
    display: inline-block;
    width: 100%;
    color: var(--text-desc);
}
.file_add_box > .btn {
    display: flex;
    width: 1.25em;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.file_add_box > .btn > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
main .file_help {
    display: block;
    width: 100%;
    height: auto;
    padding: .5em;
    font-size: .875em;
    color: var(--text-08);
    text-align: justify;

}

/* 파일 목록 */
.file_list_box {
    display: flex;
    width: 100%;
    height: auto;
    gap: 0 min(10px, max(5px, 1.56vw));
    flex-wrap: wrap;
}
.file_box {
    display: flex;
    flex: 1;
    min-width: 280px;
    padding: .5em;
    justify-content: stretch;
    border: 1px solid var(--border-01);
    flex-wrap: nowrap;
    height: auto;
    position: relative;
    margin-bottom: min(10px, max(5px, 1.56vw));;
}
.file_box > .preview {
    display: block;
    border: 1px solid var(--border-01);
    padding: 2px;
    width: min(70px, max(46px, 10.5vw));
    height: min(70px, max(46px, 10.5vw));
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
.file_box > .preview > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.file_box > .file_desc {
    display: block;
    flex-grow: 1;
    width: 100px;
    height: auto;
    text-align: left;
    padding: 0 .5em;
}
.file_box > .file_desc > p {
    display: block;
    color: var(--text-01);
}
.file_box > .file_desc span {
    color: var(--text-08);
    font-weight: 200;
}
.file_box > .file_desc a:hover {
    text-decoration: underline;
    color: #000;
}
.file_box > .file_btn_box {
    display: flex;
    width: fit-content;
    height: auto;
    justify-content: right;
    gap: .1em;
    position: absolute;
    right: .5em;
    bottom: .5em;
    line-height: 1em;
}
.file_box > .file_btn_box > a {
    display: block;
    width: 1.5em;
    height: auto;
}
.file_box > .file_btn_box > a > img {
    display: block;
    width: 100%;
    height: auto;
}

/* URL 리스트 */
main .url_list_box {
    display: block;
    width: 100%;
    height: auto;
    line-height: 1em;
}

main .url_list_box > li > .url {
    display: block;
    position: relative;
    width: 100px;
    flex-grow: 1;
    padding-left: 1.75em;
    line-height: 1em;
}

main .url_list_box > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
    height: auto;
    padding: .25em 0;
}

main .url_list_box > li > .del_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1em;
    width: 1.5em;
    height: auto;
}
main .url_list_box > li > .del_btn > img {
    display: block;
    width: 100%;
    height: auto;
}
main .url_list_box > li > .url > a {
    display: block;
    color: var(--text-08);
}

main .url_list_box > li > .url > a:hover {
    color: var(--text-01);
    font-weight: 500;
    text-decoration: underline;
}

main .url_list_box > li > .url::before {
    position: absolute;
    left: .25em;
    top: .5em;
    content: "🔗";
    z-index: 1;
    transform: translateY(-50%);
}


/* URL 입력 상자 */
main .url_add_box {
    display: flex;
    justify-content: stretch;
    flex-wrap: nowrap;
    width: 100%;
    height: auto;
    gap: .2em;
}

main .url_list_box > li {
    margin-bottom: .25em;
}

main .url_add_box > input[type="url"] {
    flex-grow: 1;
}

main .url_add_box > a {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1em;
    width: 1.5em;
    height: auto;
}
main .url_add_box > a > img {
    display: block;
    width: 100%;
    height: auto;
}

/* 작성자 */
main .writer_name_box {
    display: flex;
    width: 100%;
    height: auto;
    align-items: center;
    justify-content: left;
    gap: .25em;
    padding-left: .5em ;
}
main .writer_name_box > .user_level {
    display: block;
    width: auto;
    height: 1.1em;
}
main .writer_name_box > p {
    color: #000;
    font-weight: 500;
}
main .writer_name_box > p > span {
    font-weight: 200;
    font-size: .875em;
    color: var(--text-03);
    vertical-align: middle;
}
main .writer_name_box > p strong {
    color: #000;
    font-weight: 300;
}

/*URL, FILE LIST */
main .url_list, main .file_list {
    display: flex;
    width: 100%;
    height: auto;
    justify-content: flex-start;
    list-style: none;
    flex-wrap: wrap;
    gap: 0 .5em;
    font-weight: 400;
    overflow: hidden;
    line-height: 1.5em;
}
main .body_box > .file_list, main .body_box > .url_list {
    margin-bottom: 1em;
}

main .url_list > .url {
    display: inline-block;
    width: fit-content;
    padding-left: 1.2em;
    position: relative;
    color: var(--text-08);
    white-space: nowrap;
}
main .url_list > .url:hover {
    color: var(--text-01);
    text-decoration: underline;
}
main .url_list > .url::before {
    position: absolute;
    left: .25em;
    top: 50%;
    content: "🔗";
    font-size: .7em;
    z-index: 1;
    transform: translateY(-50%);
}

main .file_list > .file {
    display: inline-block;
    width: fit-content;
    padding-left: 1.2em;
    position: relative;
    color: var(--text-08);
    white-space: nowrap;
}
main .file_list > .file:hover {
    color: var(--text-01);
    text-decoration: underline;
}
main .file_list > .file::before {
    position: absolute;
    left: .25em;
    top: 50%;
    content: "⬇️";
    font-size: .7em;
    z-index: 1;
    transform: translateY(-50%);
}
main .link, main .link:visited {
    color: var(--text-desc);
}
main .link:hover {
    color: var(--text-01);
    text-decoration: underline;
}

.qna_action_list {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: .875em;
    display: flex;
    width: fit-content;
    height: auto;
    align-items: center;
    justify-content: right;
    gap: .2em;
}

/* 라이크 & 댓글 수 */
.board_meta_box {
    display: flex;
    width: 100%;
    height: auto;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 1em;
}
.board_meta_box img {
    display: block;
    width: auto;
    height: 1.1em;
}
.board_meta_box > a {
    display: flex;
    width: fit-content;
    height: auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: left;
    line-height: 1em;
    font-size: 1em;
    color: var(--text-desc);
    gap: .15em;
}
.board_meta_box > a:hover {
    transform: scale(1.15);
    color: #000;
    transition: all .3s;
}

/* 댓글 쓰기 */
.comment_write_box {
    display: flex;
    width: 100%;
    height: auto;
    border: 1px solid var(--bg-08);
    padding: min(10px, max(7px, 2vw));
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: min(10px, max(7px, 2vw));
    margin: min(20px, max(15px, 4vw)) 0;
}
.comment_write_box > textarea {
    height: auto;
    aspect-ratio: 5/1;
    min-height: 3em;
    line-height: 1.5em;
}

/* 게시판 서브 메뉴 */
/* 분류 탭 버튼 리스트 */
#event_scroll {
  position: relative;
  overflow-y: visible;
}
#event_scroll > .bottom_line {
    position: relative;
    left: 0;
    bottom: 1px;
    width: 100%;
    height: 1px;
    background-color: var(--text-07);
    z-index: 3;
}
#event_scroll > .categories {
  display: flex;
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  gap: .25em;
  padding: 0 .5em;
  scrollbar-width: none;
  scroll-behavior: smooth;
  z-index: 1;
}
#event_scroll > .categories * {
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
}
#event_scroll > .categories::-webkit-scrollbar {
  display: none;
}
#event_scroll > .categories > a {
  background: none;
  border: none;
  font-size: 1em;
  line-height: 1em;
  padding: .7em 1em;
  color: var(--text-desc);
  white-space: nowrap;
  transition: color 0.3s ease;
  overflow-y: visible;
  display: inline-block;
  background-color: var(--bg-01);
  border-radius: 1.35em;
  border: 1px solid var(--border-input);
}

#event_scroll > .categories > a:hover {
  color: #000;
  scale: 1.01;
}

#event_scroll > .categories > a.active {
  color: #000;
  background-color: var(--bg-05);
  border: 1px solid var(--bg-13-hover);
  scale: 1.01;
}
#event_scroll > .arrow {
  position: absolute;
  top: 1%;
  width: 1.6em;
  height: 98%;
  border: none;
  background-color: var(--bg-01);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.3s ease;
}
#event_scroll > .arrow img {
    width: 100%;
    height: auto;
    background-color: rgba(0,0,0,0.1);
    border-radius: 50%;
}
#event_scroll > .arrow:hover > img {
  background-color: rgba(0,0,0,0.3);
}
#event_scroll > .arrow.left {
  left: 0;
  padding-right: .25em;
}
#event_scroll > .arrow.right {
  right: 0;
  padding-left: .25em;
}