@charset "utf-8";
/* ==========================================================================
    board.css — 게시판 (목록/갤러리/FAQ/상세/댓글/검색/페이징)
    boardId>0 인 페이지 + search/myboard 등에서 로드
    브레이크포인트: 1280 / 1024 / 768 / 560 (common.css 표준)
   ========================================================================== */

/* ==========================================================================
    목록 상단 — Total + 검색폼 + 카테고리 탭 (_board_search.php)
   ========================================================================== */
.bo_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.bo_top .total {
    font-size: .9375rem;
    color: var(--ink-3);
}
.bo_top .total > span {
    color: var(--point, #4F46E5);
    font-weight: 600;
}
/* 태그 필터 칩 */
.bo_top .tag_chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 10px;
    padding: 3px 12px;
    border: 1px solid var(--point-border);
    border-radius: 100px;
    background: var(--point-faint);
    color: var(--point, #4F46E5);
    font-size: .875rem;
}
.bo_top .tag_chip a {
    color: var(--ink-4);
    transition: color .15s;
}
.bo_top .tag_chip a:hover { color: var(--danger); }

/* 검색폼은 flex 아이템 — min-width:auto 기본값을 풀어야 좁은 화면에서 축소된다 */
.bo_top form { min-width: 0; }
.bo_top .search {
    display: flex;
    gap: 6px;
    min-width: 0;
}
.bo_top .search select.bo_field { width: 110px; flex: none; }
.bo_top .search input[type="text"] { width: min(260px, 100%); }
.bo_top .search input[type="submit"] {
    flex: none;
    width: auto;
    padding: 0 20px;
    height: var(--input-height);
    font-weight: 500;
    color: #fff;
    background: var(--ink);
    border-radius: var(--radius-sm);
    cursor: pointer;
    appearance: none; -webkit-appearance: none;
    border: 0;
    transition: background .2s;
}
.bo_top .search input[type="submit"]:hover { background: var(--point, #4F46E5); }
.bo_top .blind {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/* 카테고리 탭 */
.bo_cate_tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
}
.bo_cate_tabs li a {
    display: block;
    padding: 8px 18px;
    font-size: .9375rem;
    color: var(--ink-3);
    background: var(--bg-soft);
    border-radius: 100px;
    transition: background .15s, color .15s;
}
.bo_cate_tabs li a:hover { color: var(--ink); }
.bo_cate_tabs li a.on {
    color: #fff;
    font-weight: 600;
    background: var(--point, #4F46E5);
}

/* 최근 본 글 (board.js 가 채움) */
#recent_viewed {
    margin: 0 0 14px;
    font-size: .875rem;
    color: var(--ink-3);
}
#recent_viewed a { color: var(--ink-2); }
#recent_viewed a:hover { color: var(--point, #4F46E5); }

@media (width <= 768px) {
    .bo_top { flex-direction: column; align-items: stretch; }
    .bo_top form { width: 100%; }
    .bo_top .search { flex-wrap: wrap; }
    .bo_top .search input[type="text"] { flex: 1; width: auto; min-width: 0; }
}
@media (width <= 560px) {
    /* 좁은 화면 — 검색 조건 선택은 한 줄 전체 사용 */
    .bo_top .search select.bo_field { flex: 1 0 100%; width: auto; }
}

/* ==========================================================================
    기본 목록 (테이블 → 768 이하 카드 변환)
   ========================================================================== */
.bo_basic_list table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-top: 2px solid var(--ink);
}
.bo_basic_list thead th {
    padding: 13px 8px;
    font-size: .9375rem; font-weight: 600;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    background: var(--bg-soft);
}
.bo_basic_list thead th.a { width: 70px; }
.bo_basic_list thead th.w { width: 110px; }
.bo_basic_list thead th.c { width: 110px; }
.bo_basic_list thead th.d { width: 80px; }
.bo_basic_list tbody td {
    padding: 14px 8px;
    text-align: center;
    font-size: .9375rem;
    color: var(--ink-2);
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
}
.bo_basic_list tbody tr { transition: background .15s; }
.bo_basic_list tbody tr:hover { background: var(--bg-soft); }
.bo_basic_list .tda { color: var(--ink-4); }
/* 공지 표시 — 번호 자리 */
.bo_basic_list .tda .notice::before {
    content: '공지';
    display: inline-block;
    padding: 2px 10px;
    font-size: .8125rem; font-weight: 600;
    color: var(--point, #4F46E5);
    background: var(--point-soft);
    border-radius: 100px;
}
html:lang(en) .bo_basic_list .tda .notice::before { content: 'Notice'; }
.bo_basic_list .tdb {
    text-align: left;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bo_basic_list .tdb a {
    color: var(--ink);
    transition: color .15s;
}
.bo_basic_list .tdb a:hover { color: var(--point, #4F46E5); }
/* 목록 내 날짜(모바일 카드용) — PC에서는 숨김 */
.bo_basic_list .tdb a .date { display: none; }
/* 답글 들여쓰기: style="--indent:n" 데이터 구동 */
.bo_basic_list .reply-mark {
    display: inline-block;
    margin-left: calc(var(--indent, 0) * 12px);
    margin-right: 6px;
    padding: 1px 8px;
    font-size: .75rem;
    color: var(--ink-3);
    border: 1px solid var(--line);
    border-radius: 100px;
    vertical-align: middle;
}
.bo_basic_list .tdb .lock img,
.bo_basic_list .tdb .file img { vertical-align: -2px; margin: 0 3px; }
.bo_basic_list .tdb .new {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 16px; height: 16px;
    margin-left: 5px;
    border-radius: 50%;
    background: var(--point, #4F46E5);
    color: #fff;
    font-size: 10px; font-weight: 700;
    vertical-align: 2px;
}
/* Q&A 답변완료 표시 (마크업 텍스트 "1" 은 숨기고 라벨로 대체) */
.bo_basic_list .tdb .qna {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    font-size: 0;
    color: var(--success);
    background: color-mix(in srgb, var(--success) 10%, #fff);
    border-radius: 100px;
    vertical-align: middle;
}
.bo_basic_list .tdb .qna::after {
    content: '답변완료';
    font-size: .75rem; font-weight: 600;
}
html:lang(en) .bo_basic_list .tdb .qna::after { content: 'Answered'; }
.bo_basic_list .tdc,
.bo_basic_list .tdd { color: var(--ink-4); font-size: .875rem; }
.bo_basic_list .tde.no_reulst {
    text-align: center;
    padding: 60px 0;
    color: var(--ink-4);
}

/* 768 이하 — 카드 변환 (마크업 무수정: thead 숨김 + tr 그리드) */
@media (width <= 768px) {
    .bo_basic_list thead { display: none; }
    .bo_basic_list table,
    .bo_basic_list tbody { display: block; }
    .bo_basic_list tbody tr {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "num   title title"
            "meta  meta  meta";
        gap: 4px 8px;
        align-items: center;
        padding: 13px 4px;
        border-bottom: 1px solid var(--line-soft);
    }
    .bo_basic_list tbody td {
        display: block;
        padding: 0;
        border: 0;
        text-align: left;
    }
    .bo_basic_list .tda { grid-area: num; }
    /* 일반글 번호는 카드에서 숨김 (공지 칩만 유지) */
    .bo_basic_list .tda:not(:has(.notice)) { display: none; }
    .bo_basic_list .tdb { grid-area: title; white-space: normal; }
    .bo_basic_list .tdw { grid-area: meta; font-size: .8125rem; color: var(--ink-4); }
    /* 작성자 · 작성일 · 조회수 를 meta 줄에 인라인 배치 */
    .bo_basic_list .tdw,
    .bo_basic_list .tdc,
    .bo_basic_list .tdd {
        display: inline;
        grid-area: meta;
        font-size: .8125rem;
        color: var(--ink-4);
    }
    .bo_basic_list .tdc::before,
    .bo_basic_list .tdd::before { content: ' · '; }
    .bo_basic_list .tdd::after { content: ''; }
    .bo_basic_list .tde.no_reulst { display: block; grid-column: 1 / -1; text-align: center; }
}

/* ==========================================================================
    갤러리 목록
   ========================================================================== */
.board_photo_wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 2vw, 24px);
}
.board_photo_wrap li a { display: block; }
.board_photo_wrap .image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--bg-soft);
}
.board_photo_wrap .image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.board_photo_wrap li a:hover .image img { transform: scale(1.05); }
.board_photo_wrap .tit {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 12px;
}
.board_photo_wrap .tit .txt {
    font-size: 1rem; font-weight: 600;
    color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: color .15s;
}
.board_photo_wrap li a:hover .tit .txt { color: var(--point, #4F46E5); }
.board_photo_wrap .tit .new {
    flex: none;
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--point, #4F46E5);
    color: #fff;
    font-size: 10px; font-weight: 700;
}
.board_photo_wrap .contents {
    margin-top: 4px;
    font-size: .875rem;
    color: var(--ink-3);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.board_photo_wrap .date {
    display: block;
    margin-top: 6px;
    font-size: .8125rem;
    color: var(--ink-4);
}
.board_photo_wrap .no_result {
    grid-column: 1 / -1;
    padding: 60px 0;
    text-align: center;
    color: var(--ink-4);
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--line-soft);
}

@media (width <= 1024px) { .board_photo_wrap { grid-template-columns: repeat(3, 1fr); } }
@media (width <= 768px)  { .board_photo_wrap { grid-template-columns: repeat(2, 1fr); } }
@media (width <= 560px)  { .board_photo_wrap { grid-template-columns: 1fr; } }

/* ==========================================================================
    상세 보기
   ========================================================================== */
.bo_basic_view table {
    width: 100%;
    border-collapse: collapse;
    border-top: 2px solid var(--ink);
}
.bo_basic_view thead th {
    padding: 22px 8px;
    text-align: left;
    border-bottom: 1px solid var(--line);
}
.bo_basic_view thead th .tit {
    display: block;
    font-size: 1.375rem; font-weight: 700;
    color: var(--ink);
    line-height: 1.4;
}
.bo_basic_view thead th .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 10px;
    font-size: .875rem; font-weight: 400;
    color: var(--ink-4);
}
.bo_basic_view thead th .meta .writer { color: var(--ink-2); font-weight: 500; }
.bo_basic_view tbody td.con {
    padding: clamp(24px, 3vw, 40px) 8px;
    border-bottom: 1px solid var(--line-soft);
}
.bo_basic_view .edit { line-height: 1.75; overflow-x: auto; }
.bo_basic_view .edit img { max-width: 100%; height: auto; }

/* 첨부파일 */
.bbs_file_t {
    margin-top: 28px;
    padding: 14px 16px;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
}
.bbs_file_t .acc {
    display: block;
    margin-bottom: 6px;
    font-size: .8125rem; font-weight: 600;
    color: var(--ink-3);
}
.bbs_file_wrap span { display: block; }
.bbs_file_wrap .bbs_file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-size: .9375rem;
    color: var(--ink-2);
    transition: color .15s;
}
.bbs_file_wrap .bbs_file:hover { color: var(--point, #4F46E5); text-decoration: underline; }

/* Q&A 답변 / 댓글형 피드 */
.comment-wrap {
    display: flex;
    gap: 12px;
    padding: 18px 8px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--point-faint);
    border-radius: var(--radius-sm);
}
.comment-wrap .avatar {
    flex: none;
    display: flex;
    align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--point, #4F46E5);
    color: #fff;
    font-weight: 600;
}
.comment-wrap .feed { min-width: 0; }
.comment-wrap .feed .write {
    font-weight: 600; font-size: .9375rem;
    color: var(--ink);
}
.comment-wrap .feed .write .date {
    margin-left: 8px;
    font-weight: 400; font-size: .8125rem;
    color: var(--ink-4);
}
.comment-wrap .feed .comment {
    margin-top: 6px;
    color: var(--ink-2);
    line-height: 1.65;
}

/* 태그 */
.post_tags { margin: 16px 0 0; }
.post_tags a {
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 3px 12px;
    border: 1px solid var(--line);
    border-radius: 100px;
    color: var(--point, #4F46E5);
    font-size: .875rem;
    transition: border-color .15s, background .15s;
}
.post_tags a:hover {
    border-color: var(--point-border);
    background: var(--point-faint);
}

/* 이전글/다음글 */
.bo_pn {
    margin-top: 20px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.bo_pn li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 8px;
    min-width: 0;
}
.bo_pn li + li { border-top: 1px solid var(--line-soft); }
.bo_pn .lb {
    flex: none;
    font-size: .8125rem; font-weight: 600;
    color: var(--ink-3);
}
.bo_pn a {
    color: var(--ink-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: color .15s;
}
.bo_pn a:hover { color: var(--point, #4F46E5); }

/* 액션 버튼 (공유/추천/스크랩/신고 — _board_actions.php) */
.bo_footer .btn_wrap { display: flow-root; text-align: right; }
.bo_footer .btn_wrap .btn_left { float: left; margin-bottom: 8px; }
.bo_footer .btn_wrap .btn_left .btn {
    color: var(--ink-2);
    background: var(--bg);
    border: 1px solid var(--line);
}
.bo_footer .btn_wrap .btn_left .btn:hover {
    color: var(--point, #4F46E5);
    border-color: var(--point-border);
    background: var(--point-faint);
}
.bo_footer .btn_wrap .btn_left .btn.kakao {
    color: #3C1E1E;
    background: #FEE500;
    border-color: #FEE500;
}
.bo_footer .btn_wrap .btn_left #btn_like.on { color: var(--danger); }
.bo_footer .btn_wrap .btn_left #btn_scrap.on { color: var(--point, #4F46E5); }

/* 신고 모달 (_board_actions.php) */
#report_modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / .45);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
#report_modal .report_modal_box {
    max-width: 420px;
    width: 92%;
    padding: 22px;
    background: var(--bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-2);
}
#report_modal .report_modal_box > strong { font-size: 1.05em; }
#report_modal .report_reasons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 14px 0 8px;
    font-size: .95em;
}
#report_modal #report_detail {
    width: 100%; height: 70px;
    resize: vertical;
}
#report_modal .report_modal_btns { text-align: right; margin-top: 12px; }

/* ==========================================================================
    댓글
   ========================================================================== */
.comment_area .amount {
    padding-bottom: 12px;
    font-size: 1.0625rem;
    border-bottom: 2px solid var(--ink);
}
.comment_area .amount strong { color: var(--point, #4F46E5); }
.comment_area .write_wrap { margin-top: 16px; }
.comment_area .write {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.comment_area .write textarea {
    flex: 1;
    height: 76px;
}
.comment_area .write .submit {
    flex: none;
    width: 90px;
    color: #fff; font-weight: 500;
    text-align: center;
    background: var(--ink);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: background .2s;
}
.comment_area .write .submit:hover { background: var(--point, #4F46E5); }

.comment_list { margin-top: 8px; }
.comment_list .comment_item {
    padding: 16px 4px;
    border-bottom: 1px solid var(--line-soft);
}
/* 답글 들여쓰기 (ml-N: sc_depth) */
.comment_list .comment_item.ml-1 { margin-left: 28px; }
.comment_list .comment_item.ml-2 { margin-left: 56px; }
.comment_list .comment_item .info {
    display: flex;
    align-items: center;
    gap: 6px;
}
.comment_list .reply-arrow {
    width: 12px; height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 1v6a2 2 0 0 0 2 2h6M7 6l3 3-3 3' fill='none' stroke='%239ca3af' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}
/* 댓글 아바타 (사진/이니셜) */
.comment_list .cmt_avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
}
.comment_list .cmt_avatar_initial {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--point-soft);
    color: var(--point-strong);
    font-size: .8em; font-weight: 600;
}
.comment_list .info .name { font-size: .9375rem; color: var(--ink); }
.comment_list .info .date { font-size: .8125rem; color: var(--ink-4); }
.comment_list .content {
    margin-top: 8px;
    color: var(--ink-2);
    line-height: 1.65;
    word-break: break-word;
}
.comment_list .btn_area {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}
/* 댓글 액션 버튼 — 소형 텍스트 버튼으로 재정의 */
.comment_list .btn_area .btn {
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 3px 10px;
    font-size: .8125rem;
    color: var(--ink-3);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 100px;
}
.comment_list .btn_area .btn:hover {
    color: var(--point, #4F46E5);
    background: var(--point-faint);
    border-color: var(--point-border);
}
.comment_list .btn_area .btn.delete:hover,
.comment_list .btn_area .btn.report:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, #fff); background: color-mix(in srgb, var(--danger) 6%, #fff); }
/* 댓글 전체 보기 */
.comment_more { text-align: center; margin-top: 14px; }

/* ==========================================================================
    페이지네이션 (Board.php buildPaging)
   ========================================================================== */
.bo_pagenate {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}
.bo_pagenate .paging {
    display: flex;
    align-items: center;
    gap: 4px;
}
.bo_pagenate .paging ol {
    display: flex;
    gap: 4px;
}
.bo_pagenate .paging a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px; height: 36px;
    padding: 0 6px;
    font-size: .9375rem;
    color: var(--ink-3);
    border-radius: var(--radius-sm);
    transition: background .15s, color .15s;
}
.bo_pagenate .paging a:hover { background: var(--bg-soft); color: var(--ink); }
.bo_pagenate .paging li.current a.on {
    color: #fff; font-weight: 600;
    background: var(--point, #4F46E5);
}
.bo_pagenate .paging a.first,
.bo_pagenate .paging a.prev,
.bo_pagenate .paging a.next,
.bo_pagenate .paging a.end { font-size: .8125rem; }
.bo_pagenate .paging a.lock {
    opacity: .35;
    pointer-events: none;
}

/* ==========================================================================
    비밀번호 확인 레이어 팝업
   ========================================================================== */
.pw_layer_popup { display: none; }
.pw_layer_popup .dimBg {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / .45);
    z-index: 998;
}
.pw_layer_popup .pwd_popup_wrap {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(360px, 90vw);
    padding: 28px 24px;
    background: var(--bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-2);
    z-index: 999;
}
.pw_layer_popup .pwd_popup_wrap h4 {
    margin-bottom: 14px;
    font-size: 1.125rem; font-weight: 700;
}
.pw_layer_popup .btn_wrap { margin-top: 16px; text-align: right; }
.pw_layer_popup .btn_submit,
.pw_layer_popup .btn_cancel {
    display: inline-block;
    margin-left: 6px;
    padding: 9px 20px;
    font-size: .9375rem; font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background .2s;
}
.pw_layer_popup .btn_submit { color: #fff; background: var(--point, #4F46E5); }
.pw_layer_popup .btn_submit:hover { background: var(--point-strong); }
.pw_layer_popup .btn_cancel { color: var(--ink-2); background: var(--bg-soft); }
.pw_layer_popup .btn_cancel:hover { background: var(--line-soft); }

/* ==========================================================================
    임시저장 박스 (_board_drafts.php)
   ========================================================================== */
.draft_box {
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px dashed var(--point-border);
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
}
.draft_box > strong { color: var(--point, #4F46E5); }
.draft_box ul { margin-top: 8px; }
.draft_box li {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 3px 0;
    font-size: .95em;
}
.draft_box li a { color: var(--ink-2); text-decoration: underline; }
.draft_box li .draft_date { color: var(--ink-4); font-size: .85em; }
.draft_box li .btn_draft_del { color: var(--danger); font-size: .85em; }

/* ==========================================================================
    글쓰기 — 카테고리 선택 영역
   ========================================================================== */
.cate_section, .cate1_section, .cate2_section { margin: 4px 0; }

/* ==========================================================================
    통합검색 (sub/search.php)
   ========================================================================== */
.search_empty {
    padding: 5rem 0;
    text-align: center;
    color: var(--ink-4);
}
.search_group { margin-bottom: 40px; }
.search_group h3 {
    padding-bottom: 10px;
    border-bottom: 2px solid var(--ink);
    font-size: 1.125rem; font-weight: 700;
}
.search_group h3 small { color: var(--ink-4); font-weight: 400; }
.search_group li { border-bottom: 1px solid var(--line-soft); }
.search_group li a {
    display: block;
    padding: 16px 4px;
    transition: background .15s;
}
.search_group li a:hover { background: var(--bg-soft); }
.search_group li a strong {
    font-size: 1.05em;
    color: var(--ink);
}
.search_group li a p {
    margin: 6px 0 4px;
    color: var(--ink-3);
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.search_group li a .meta { color: var(--ink-4); font-size: .875em; }
.search_group mark {
    background: var(--point-soft);
    color: inherit;
    padding: 0 1px;
}
.search_more { text-align: right; margin: 10px 0 0; }
.search_more a { color: var(--point, #4F46E5); }
.search_more a:hover { text-decoration: underline; }


/* 신규 추가 */
.bo_basic_title {text-align: center; margin: 0 0 36px;
    & h2 {font-size: 3rem; font-weight: 700; margin: 0;}
    @media (width <= 1280px) {
        & h2 {font-size: 2rem;}
    }
    @media (width <= 768px) {margin: 0 0 24px;
        & h2 {font-size: 1.6rem;}
    }
}

.board-view {
    & .view-box {border-top: 2px solid var(--ink);
        & .view-subject {padding: 16px 0; border-bottom: 1px solid var(--line);
            & p {font-size: 24px; font-weight: 500;}
            & span {font-size: 14px; color: var(--ink-4);}
        }
        & .view-con {padding: 16px;}
        & .view-copy {padding: 16px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; text-align: center; color: var(--ink-3);
            & i {font-size: 36px;}
            & p {font-size: 14px; line-height: 1.4;}
        }
    }
    & .view-nav {margin: 16px 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
        > ul {display: flex; flex-direction: column;}
        > ul > li {display: flex; align-items: center; border-bottom: 1px solid var(--line); padding: 8px 16px;
            &:last-child {border-bottom: 0;}
            & p {width: 100px; font-size: 14px; font-weight: 500;}
            & a {flex: 1; display: block; font-size: 15px; color: var(--ink-3); text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
        }
    }
    @media (width <= 768px) {
        & .view-box {
            & .view-subject {padding: 12px 0;
                & p {font-size: 17px;}
                & span {font-size: 13px;}
            }
            & .view-con {padding: 12px;}
        }
        & .view-nav {margin: 12px 0 0;
            > ul > li {padding: 8px 12px;
                & p {width: 60px;}
            }
        }
    }
}

.pg-gallery {
    & .gallery-list {
        > ul {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;}
        > ul:has(.no_result) {grid-template-columns: repeat(1, 1fr);}
        > ul > li {}
        > ul > li a {display: flex; flex-direction: column; gap: 16px; background: var(--bg-soft); padding: 16px; border: 3px solid var(--bg-soft); border-radius: 8px; transition: all 0.3s ease;
            & .txt {position: relative;
                &::before {content: ''; position: absolute; top: 0; left: 0; width: 10px; height: 10px; background: var(--point); border-radius: 50%;}
                & p {font-size: 18px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin: 36px 0 4px;}
                & span {display: block; font-size: 14px; line-height: 1; color: var(--ink-4);}
            }
            & .thumbs {aspect-ratio: 55 / 31; border-radius: 8px; overflow: hidden;
                & img {}
            }
            &:hover {border: 3px solid var(--point); background: var(--white); box-shadow: var(--shadow-2);}
        }
        & .empty {font-size: 15px; border: 1px solid var(--point-border); background: var(--point-faint); border-radius: 4px; padding: 40px; text-align: center;}
        & .no_result {font-size: 15px; border: 1px solid var(--point-border); background: var(--point-faint); border-radius: 4px; padding: 40px; text-align: center;}
    }
    @media (width <= 768px) {
        & .gallery-list {
            > ul {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
                > li a {
                    & .txt::before {content: none;}
                    & .txt p {font-size: 16px; margin: 0 0 4px;}
                    & .txt span {font-size: 12px;}
                }
            }
        }
    }
    @media (width <= 560px) {
        & .gallery-list {
            > ul {grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 12px;}
        }
    }
}