@charset "utf-8";

/* ============================================================
   공통 유틸
   ============================================================ */
.d-f { display: flex; }
.j-sp-bt { justify-content: space-between; }
.a-e { align-items: flex-end; }
.a-c { align-items: center; }
.mb7 { margin-bottom: 7px; }

/* ============================================================
   게시판 헤더
   ============================================================ */
.mo_title {
    position: relative;
    border-bottom: 1px solid #ccc;
    padding: 10px 0 5px 0;
}
.mo_title p {
    font-size: 1.2em;
    font-weight: 500;
    background: url(../image/title_ico.png) no-repeat left top;
    background-size: 10px 12px;
    padding: 3px 0 0 8px;
}
.mo_title .total { font-size: 0.8em; letter-spacing: 0.01em; color: #666; }
.mo_title .total span { color: #0157e8; font-weight: 500; }

/* ============================================================
   버튼 영역
   ============================================================ */
.board_btn { padding: 7px 0; position: relative; min-height: 25px; }
.board_btn .gall_list { position: absolute; top: 0; left: 85px; }
.board_btn .gall_list select { min-height: 29px; vertical-align: top; }

/* ============================================================
   일반 리스트 (board_list1)
   ============================================================ */
.board_list1 { margin-bottom: 10px; border-top: 1px solid #dedede; }
.board_list1 li {
    border-bottom: 1px solid #dedede;
    background: url(../image/board/list_ico.png) no-repeat right 20px;
    background-size: 8px 16px;
}
.board_list1 li a { padding: 12px 0; display: block; }
.board_list1 li:nth-child(2n) a { background: #f9f9f9; }
.board_list1 li a .fl { width: 25px; }
.board_list1 li a .fr  { width: calc(100% - 25px); }
.board_list1 li a .fr2 { width: 100%; }
.board_list1 li a .fr p,
.board_list1 li a .fr2 p {
    font-size: 1.2em;
    color: #000;
    padding-bottom: 3px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 15px;
}
.board_list1 li a .fr div,
.board_list1 li a .fr2 div { font-size: 0.8em; color: #666; letter-spacing: 0.01em; }
.board_list1 li a .fr div span,
.board_list1 li a .fr2 div span { color: #dedede; }

/* ============================================================
   페이지네이션
   ============================================================ */
.page { text-align: center; }
.page a { display: inline-block; padding: 5px; border-radius: 3px; background-size: 100%; vertical-align: middle; }
.page .first, .page .end { background: url(../image/board/page_btn_bg1.jpg) repeat left top; }
.page .prev,  .page .next { background: url(../image/board/page_btn_bg2.jpg) repeat left top; }
.page a img { width: 20px; }
.page ul, .page ul li { display: inline-block; }
.page ul li:last-child { margin-right: 0; }
.page ul li a {
    background: #dfe1e3;
    display: inline-block;
    padding: 6px 12px;
    border-radius: 0;
    font-family: 'Open Sans', sans-serif;
}
.page ul li strong {
    background: #213046;
    display: inline-block;
    padding: 6px 12px;
    color: #ffea00;
    vertical-align: middle;
    font-family: 'Open Sans', sans-serif;
}

/* ============================================================
   갤러리 리스트 공통
   ============================================================ */
.gall_list2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 12px;
    margin: auto;
    max-width: 640px;
    text-align: center;
}
.gall_list2 dl { padding: 0 10px; }
.gall_list2 dl dt {
    text-align: left;
    font-size: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 500;
    color: #000;
}
.gall_list2 dl dd { text-align: left; }

/* ============================================================
   리스트 아이템 (board_list_item)
   ============================================================ */
.board_list_item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    height: 164px;          /* thumb 140px + 상하패딩 12px×2 */
    padding: 12px 0;
    box-sizing: border-box;
    overflow: hidden;       /* 내용이 넘쳐도 li 높이 유지 */
    border: none;
    border-bottom: 1px solid #e0e0e0;
    cursor: pointer;
    transition: background-color 0.18s ease;
    position: relative;
    text-decoration: none;
    color: inherit;
}
.board_list_item:hover  { background-color: #f7f9fb; }
.board_list_item:active { background-color: #eef1f4; }

.board_list_item_gongji { background: #FAFA33; }
.board_list_item_gongji:hover { background-color: #f5f530; }

/* 썸네일 140×140 정방형 고정 */
.board_list_thumb {
    flex: 0 0 140px;
    width: 140px;
    height: 140px;
    border-radius: 8px;
    border: 1px solid #ebebeb;
    overflow: hidden;
    background: #f1f1f1;
    pointer-events: none;
}
.board_list_thumb_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    transition: transform 0.3s ease;
    pointer-events: none;
}
.board_list_item:hover .board_list_thumb_img { transform: scale(1.05); }

/* 텍스트 영역 - thumb와 동일한 140px 높이로 고정 */
.board_list_body {
    flex: 1 1 0;
    min-width: 0;
    height: 140px;
    padding: 2px 14px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 카테고리 뱃지 */
.board_category {
    display: none;
    flex-shrink: 0;
    background: #EAEDEF;
    color: #828C94;
    font-size: 12px;
    padding: 2px 6px;
    margin: 0 0 5px;
    border-radius: 2px;
}
.board_category.has-value { display: inline-block; }

/* 제목 - 1줄 고정 */
.board_list_title {
    display: block;
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    max-height: 1.4em;
    margin-top: 2px;
    margin-bottom: 4px;
    color: #222;
    word-break: break-all;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.board_list_body dt {
    flex-shrink: 0;
}

/* 본문 미리보기 - 2줄 고정 */
.s_txt {
    flex-shrink: 0;
    font-size: 13px;
    color: #888;
    line-height: 1.4;
    height: calc(13px * 1.4 * 2); /* 정확히 2줄 높이 */
    margin: 4px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}

/* 날짜·조회 - 하단 고정 */
.board_list_body dd.info {
    flex-shrink: 0;
    margin-top: auto;   /* 남은 공간 모두 위로 밀어 하단 고정 */
    padding-bottom: 6px;
    font-size: 13px !important;
    color: #aaa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 내부 a 태그 초기화 */
.board_list_item a { color: inherit; text-decoration: none; }

/* 관리자 체크박스 - li 우상단 고정 */
.board_list_item input[type="checkbox"] {
    position: absolute;
    top: 12px;
    right: 8px;
    z-index: 2;
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

/* ============================================================
   갤러리 리스트 2단 (gall_list1)
   ============================================================ */
.gall_list1 { overflow: hidden; }
.gall_list1 li { float: left; width: 47%; padding-bottom: 10px; }
.gall_list1 li:nth-child(2n) { float: right; width: 47%; }
.gall_list1 li a dl dt {
    border-bottom: 1px solid #dfe0e3;
    font-size: 1.1em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-top: 5px;
}
.gall_list1 li a dl dd { border-bottom: 1px solid #dfe0e3; font-size: 0.8em; color: #666; padding: 2px 0; }

/* ============================================================
   갤러리 리스트 3단 (gall_list3)
   ============================================================ */
.gall_list3 { overflow: hidden; }
.gall_list3 li { float: left; width: 33%; margin-right: 0.5%; }
.gall_list3 li:nth-child(3n) { margin-right: 0; }
.gall_list3 li p {
    padding: 4px 0 7px 0;
    font-size: 0.8em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
}

/* ============================================================
   글보기
   ============================================================ */
.board_st {
    position: relative;
    border-top: 2px solid #1f5fca;
    border-bottom: 1px solid #ccc;
    padding: 7px 4px;
    color: #000;
}
.board_st .scrap_btn {
    color: #777;
    border: 1px solid #777;
    font-size: 11px;
    padding: 4px 10px;
    background: none;
}
.board_title_wrap { padding: 4px 0 8px 0; }
.board_title { font-size: 16px; color: #000; font-weight: 500; }

.board_day {font-size: 12px; border-top:1px solid #ffff;background:#f0f1f2;border-bottom:1px solid #c8c8c8;color:#666;padding:4px 7px;}
.board_day span { color: #ccc; }

.board_con_txt { padding: 10px 0; }


/* ============================================================
   댓글
   ============================================================ */
.comment { width: 100%; }
.comment textarea { width: 98%; word-break: break-all; }
.comment .btn_box { position: relative; min-height: 40px; }
.comment .btn_box .btn { position: absolute; top: 0; right: 0; }
.comment .btn_box .btn input { font-size: 0.8em; padding: 2px 8px 4px 8px; background: #495e7d; }

/* ============================================================
   글쓰기 폼
   ============================================================ */
.sst { font-size: 18px; border: 1px solid #ddd; padding: 10px; font-weight: 500; }
.write_f dt {
    font-weight: bold;
    padding: 5px 0 4px 12px;
    background: url(../image/board/ico_star2.png) no-repeat left 9px;
    background-size: 10px 10px;
}
.write_f dt span { color: red; font-size: 0.8em; font-weight: normal; }
.write_f dt.ps { background: url(../image/board/ico_star.png) no-repeat left 9px; background-size: 10px 10px; }
.write_f dd { border-bottom: 1px dotted #ccc; padding: 0 0 5px 12px; line-height: 160%; }
.write_f dd.d_full { padding: 0 0 5px 0; }
.write_f dd ul li {
    background: url(../image/list_ico.jpg) no-repeat 5px 16px;
    background-size: 3px 3px;
    padding: 3px 0 3px 12px;
}
.write_f dd ul li span { width: 60px; }
.write_f dd ul li select { padding: 5px 5px; }

/* ============================================================
   폼 공통
   ============================================================ */
.mob_pro hr { border: 0; height: 0; }
.mob_pro label { vertical-align: middle; }
.stxt { color: #cc0000; font-size: 0.9em; }
.mob_pro input[type="checkbox"],
.mob_pro input[type="radio"] { vertical-align: middle; }

input[type="checkbox"] {
    vertical-align: middle;
    -ms-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -webkit-transform: scale(1.4);
    -o-transform: scale(1.4);
}

/* ============================================================
   검색폼
   ============================================================ */
.board_search_wrap { margin: 24px 0 8px; }
.board_search_inner {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f4f6f8;
    border: 1px solid #e2e6ea;
    border-radius: 10px;
    padding: 8px 10px;
}
.board_search_select {
    flex: 0 0 auto;
    height: 36px;
    padding: 0 8px;
    font-size: 13px;
    color: #555;
    background: #fff;
    border: 1px solid #dde1e7;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    appearance: auto;
}
.board_search_select:focus { border-color: #5b8ef0; }
.board_search_input_wrap {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #dde1e7;
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.18s;
}
.board_search_input_wrap:focus-within { border-color: #5b8ef0; }
.board_search_input {
    flex: 1 1 0;
    height: 36px;
    padding: 0 10px;
    font-size: 14px;
    color: #222;
    background: transparent;
    border: none;
    outline: none;
}
.board_search_input::placeholder { color: #b0b8c1; font-size: 13px; }
.board_search_btn {
    flex: 0 0 auto;
    width: 38px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #4a7ef5;
    border: none;
    color: #fff;
    cursor: pointer;
    transition: background 0.18s;
}
.board_search_btn:hover { background: #3567e0; }
.board_search_btn svg { display: block; }