@charset "utf-8"; 

/* 
@latest 2025.11.28 OSY
*/


.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.padlet_wrap { display: flex !important; flex-direction: column; gap: 10px; width: 100%; font-size: 10px; }
.padlet_wrap * { overflow-wrap: anywhere; word-break: keep-all; box-sizing: border-box; }



/***** 검색 영역 *****/
.padlet_wrap .searchWrap { display: inline-flex; justify-content: space-between; row-gap: 5px; column-gap: 10px; flex-wrap: wrap; padding: 5px 5px 5px 15px; margin-left: auto; margin-right: auto; border-style: solid; border-width: 2px; border-radius: 15px; }
.padlet_wrap .searchWrap :is(.searchOpt, .searchBox) { display: flex; align-items: center; gap: 5px; }
.padlet_wrap .searchWrap :is(select, .searchInput) { flex-shrink: 0; padding-left: 10px !important; margin: 0 !important; border: none; }
.padlet_wrap .searchWrap .searchBox { flex-grow: 1; }
.padlet_wrap .searchWrap .searchBox .searchInput { flex-grow: 1; width: 250px; padding-right: 10px; } 
.padlet_wrap .searchWrap .searchBox .searchInput:focus { border-bottom-color: transparent; }
.padlet_wrap .searchWrap .searchBox .searchInput:focus-visible { outline: 1px solid #000; }
.padlet_wrap .searchWrap .searchBox .btn-srch { flex-shrink: 0; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 48px; aspect-ratio: 1 / 1; font-size: 12px; background-color: #338cf2; border-radius: 10px; }
.padlet_wrap .searchWrap .searchBox .btn-srch::before,
.padlet_wrap .searchWrap .searchBox .btn-srch::after { content: ''; float: none; margin: 0 !important; position: absolute; }
.padlet_wrap .searchWrap .searchBox .btn-srch::before { top: .78em; left: .82em; width: 1.2em; aspect-ratio: 1 / 1; border: .2em solid #fff; border-radius: 50%; }
.padlet_wrap .searchWrap .searchBox .btn-srch::after { top: 2.5em; left: 2.2em; width: .78em; height: .18em; background-color: #fff; transform: rotate(48deg); }
.padlet_wrap .searchWrap, 
.padlet_wrap .searchWrap .searchBox .btn-srch { border-color: #338cf2; }
/* 삭제, 글쓰기 */
.padlet_wrap .searchWrap .btns { display: inline-flex; gap: 5px; width: auto; margin-left: auto; }
.padlet_wrap .searchWrap .btns .wzbtn { display:inline-flex; justify-content:center; align-items:center; font-size: 1.7em; border-radius: 5px; }


/***** 게시판 상단 (검색결과 안내, 노출 개시글 수 선택) *****/
.padlet_wrap .board_top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; }
.padlet_wrap .board_top .search_result .search_info { display: inline-flex; align-items: center; gap: 5px; font-size: 2em; }
.padlet_wrap .board_top .search_result .search_info :is(.result, .total_cnt) { flex-shrink: 0; }
.padlet_wrap .board_top .search_result .search_info .result::after { content: '-'; margin-left: 5px; }
.padlet_wrap .board_top .search_result .search_info .total_cnt { align-self: flex-end; margin-bottom: 3px; font-size: 0.7em; }
.padlet_wrap .board_top .search_result .search_info .total_cnt::before { content:'('; }
.padlet_wrap .board_top .search_result .search_info .total_cnt::after { content:'건)'; }
.padlet_wrap .board_top .search_result .search_info .total_cnt:only-child { font-size: 1em; }
.padlet_wrap .board_top .search_result .search_info .total_cnt:only-child::before { display: none; }
.padlet_wrap .board_top .search_result .search_info .total_cnt:only-child::after { content:'건'; }
.padlet_wrap .board_top .search_result .search_info.none .keyword { color: #e60023; }
.padlet_wrap .board_top .list_count select { margin: 0 !important; border-radius: 7px; }


/***** 게시판 목록 *****/
.padlet_wrap .padlet_list { gap: 30px; width: 100%; max-width: 1300px; margin: 0 auto; }

/* 행 높이 동일하게 */
.padlet_wrap .padlet_list.grid { display: grid; grid-template-columns: repeat(3, 1fr); }

/* 행 높이 다르게 */
.padlet_wrap .padlet_list.flex { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; }
.padlet_wrap .padlet_list.flex .card { width: calc((100% - 60px) / 3); } /* 부모 gap 변경 시 -값 동일하게 수정 필요 */


.padlet_wrap .padlet_list .card { position: relative; display: flex; flex-wrap: wrap; flex-direction: column; gap: 5px; background: #fafafa; border: 1px solid rgba(0, 0, 0, .18); border-radius: 12px; overflow: hidden; 
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
    opacity: 0; 
    transform: translateY(20px); 
    display: none !important;
}
.padlet_wrap .padlet_list .card.is-visible { display: flex !important; opacity: 1; transform: translateY(0) }
.padlet_wrap .padlet_list .card:hover { transform: translateY(-3px); background-color: #fff; border-color: rgba(0,0,0, .35); box-shadow: 0 6px 16px rgba(0, 0, 0, .15); }
.padlet_wrap .padlet_list .card:hover .card_cate { background-color: rgba(0, 0, 0, .8); }
.padlet_wrap .padlet_list .card > :last-child { padding: 0 20px 20px; }
.padlet_wrap .padlet_list .card > :last-child.card_btns { padding: 0 20px 15px; }

/* 구분, 말머리, 카테고리 */
.padlet_wrap .padlet_list .card .card_cate { display: inline-flex; align-self: flex-start; font-weight: bold; padding: 6px 15px; margin-top: 10px; margin-left: 10px; font-size: 1.2em; font-weight: 500; color: #fff; background-color: rgba(0, 0, 0, .65); border-radius: 12px 12px 12px 0; transition: background-color 0.3s ease; }
.padlet_wrap .padlet_list .card:has(img) .card_cate { position: absolute; top: 10px; left: 10px; z-index: 1; margin-top: 0; margin-left: 0; text-shadow: 0 0 8px rgba(0,0,0,0.5); }

/* 각 card 선택 - 체크박스 */
.padlet_wrap .padlet_list .card .card_chk { cursor: pointer; position: absolute; top: 10px; right: 10px; z-index: 1; display: inline-block; appearance: none; width: 20px; height: 20px !important; margin: 0 !important; background-color: #fff !important; border: 2px solid #c2d4df; border-radius: 7px; transition: border-color 0.2s, background-color 0.2s; }
.padlet_wrap .padlet_list .card .card_chk:hover { border-color: #666; }
.padlet_wrap .padlet_list .card .card_chk:focus:not(:focus-visible) { outline: none !important; }
.padlet_wrap .padlet_list .card .card_chk:focus-visible { outline-color: #000; }
.padlet_wrap .padlet_list .card .card_chk:checked { background-color: #0379bf !important; border-color: #0379bf; }
.padlet_wrap .padlet_list .card .card_chk:checked::after { position: absolute; top: 1px; left: 5px; content: ""; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* 이미지 등록 시 - 썸네일 영역 */
.padlet_wrap .padlet_list .card .card_thumb { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; overflow: hidden; transition: height 0.3s ease; }
/* .padlet_wrap .padlet_list .card .card_thumb::before { position: absolute; z-index: -1; content: 'NO IMAGE'; } */
.padlet_wrap .padlet_list .card .card_thumb img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: center; flex-shrink: 0; transition: transform 0.3s ease; }

/* 내용 */
.padlet_wrap .padlet_list .card .card_text { padding: 15px 20px; flex-grow: 1; font-size: 1.5em; line-height: 1.5; color: #333; }
.padlet_wrap .padlet_list .card .card_text textarea:focus::placeholder { color: transparent; }

/* 내용 아래 공통 */
.padlet_wrap .padlet_list .card :is(.card_attach, .card_writer, .card_date) { display: flex; justify-content: flex-start; align-items: start; gap: 10px; padding-left: 20px; padding-right: 20px; }
.padlet_wrap .padlet_list .card .label { flex-shrink: 0; position: relative; display: inline-flex; min-width: 60px; padding-left: .6em; font-size: 1.2em; color: #999; }
.padlet_wrap .padlet_list .card .label::before { position: absolute; top: .7em; left: 0; content: ''; width: 2px; height: 2px; background-color: currentColor; border-radius: 50%; opacity: .7; }
.padlet_wrap .padlet_list .card .label + * { font-size: 1.3em; color: #454545; }

/* 첨부파일 */
.padlet_wrap .padlet_list .card .card_attach { position: relative; padding-top: 15px; }
.padlet_wrap .padlet_list .card .card_attach::before { position: absolute; content: ''; width: calc(100% - 40px); height: 1px; }
.padlet_wrap .padlet_list .card .card_attach::before { top: 0; left: 20px; background-color: rgba(0,0,0, .08); }
.padlet_wrap .padlet_list .card .card_attach .file_list { display: flex; flex-direction: column; gap: 2px; padding-left: 0; font-size: 1.2em; }
.padlet_wrap .padlet_list .card .card_attach .file a { position: relative; display: inline-blcok; color: #454545; word-break: break-all; }
.padlet_wrap .padlet_list .card .card_attach .file a:hover { text-decoration: underline; text-decoration-color: #45454566; text-underline-offset: 4px; }
.padlet_wrap .padlet_list .card .card_attach + * { margin-top: 5px; }
/* 파일 위에 마우스 hover 시 aria-label 문구 말풍선으로 노출 */
/* 
.padlet_wrap .padlet_list .card .card_attach .file a::after { position: absolute; top: calc(100% + 5px); left: 90%; z-index: 10; content: attr(aria-label); display: none; padding: 4px 8px; font-size: 0.769em; color: #fff; white-space: nowrap; background-color: rgba(0, 0, 0, .45); border-radius: 4px; visibility: hidden; opacity: 0; transition: opacity 0.3s, visibility 0.3s; }
.padlet_wrap .padlet_list .card .card_attach .file:hover a::after, 
.padlet_wrap .padlet_list .card .card_attach .file:focus a::after { display: inline-block; visibility: visible; opacity: 1; } 
*/

/* 작성자 */
.padlet_wrap .padlet_list .card .card_writer {  }

/* 작성일 */
.padlet_wrap .padlet_list .card .card_date {  }

/* 하단 버튼 */
.padlet_wrap .padlet_list .card .card_btns { display: flex; justify-content: flex-end; gap: 5px; }
.padlet_wrap .padlet_list .card .card_btns button { display: inline-flex; line-height: normal; padding: 4px 10px; font-size: 1.1em; border-radius: 12px; }


/***** 더보기 /*****/
.padlet_wrap .list_more_wrap { display: flex; align-items: center; justify-content: center; margin-top: 20px; }
.padlet_wrap .list_more_wrap .btn_more { display: inline-flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; padding: 12px 15px 14px 15px; font-size: 1.2em; border-radius: 12px;
    animation-name: bouncing-arrow;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    transform-origin: center bottom;
}
.padlet_wrap .list_more_wrap .btn_more::after { content: ''; display: inline-flex; width: 8px; height: 8px; border-style: solid; border-width: 0 2px 2px 0; border-color: inherit; transform: rotate(45deg); }
@keyframes bouncing-arrow {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}


    @media (min-width: 991px) { 
        .padlet_wrap .searchWrap { align-self: center; }
    }
    @media (max-width: 990px) { 
        .padlet_wrap .searchWrap { width: 100%; }
        .padlet_wrap .searchWrap .searchInput { width: auto; }
        .padlet_wrap .padlet_list { gap: 20px; }
        .padlet_wrap .padlet_list.grid { grid-template-columns: repeat(2, 1fr); } 
        .padlet_wrap .padlet_list.flex .card { width: calc((100% - 20px) / 2); }
    }
    @media (max-width: 799px) { 
        .padlet_wrap { font-size: 9px; }
        .padlet_wrap .padlet_list { gap: 15px; }
        .padlet_wrap .padlet_list.grid { grid-template-columns: 1fr; } 
        .padlet_wrap .padlet_list.flex .card { width: 100%; }
    }