@charset "utf-8";

/* 공통 */ 
.board-notice	{ max-width: 100%; padding: 20px; margin: 0 auto; text-align: center;}

#bo_frame .pg_wrap {padding:2px;margin-bottom:15px;display:grid; gap:10px; grid-template-columns: 65px auto 65px; }
#bo_frame .pg {border:0 none;}
#bo_frame .pg.control .pg_page{padding:0 2px;}
#bo_frame .pg_wrap .pg_page {border:0 none;background:none;}
#bo_frame .pg_wrap .year {font-size:16px;font-weight:bold;display:inline-block;padding-right:10px;vertical-align: middle;}
#bo_frame .pg_wrap .year::after{display:inline-block;padding-left:15px;content:"||";font-weight:normal;opacity:0.8;}
#bo_frame .pg_wrap .month {padding:0 3px;}
#bo_frame .pg_wrap .month:last-child::after{content:"";}
#bo_frame .pg_wrap .ico{position:relative;display:inline-block;width:20px;height:30px;overflow:hidden;text-indent:100%;white-space:nowrap;}
#bo_frame .pg_wrap .ico:before{position:absolute;left:0;top:0;display:block;width:20px;height:30px;line-height:30px;text-indent:0;text-align:center;}
#bo_frame .pg_wrap .ico.prevyr:before{content:"◀◀";letter-spacing:-5px;text-indent:-2px;}
#bo_frame .pg_wrap .ico.prevmth:before{content:"◀";}
#bo_frame .pg_wrap .ico.nextyr:before{content:"▶▶";letter-spacing:-5px;text-indent:-2px;}
#bo_frame .pg_wrap .ico.nextmth:before{content:"▶";}
/*
#bo_frame .pg_wrap .ico:before{position:absolute;left:0;top:0;display:inline-block;width:24px;height:30px;line-height:30px;text-indent:0;font-family:'icon';}
#bo_frame .pg_wrap .ico.prevyr:before{content:"\ea21";}
#bo_frame .pg_wrap .ico.prevmth:before{content:"\ea23";}
#bo_frame .pg_wrap .ico.nextyr:before{content:"\ea22";}
#bo_frame .pg_wrap .ico.nextmth:before{content:"\ea24";}
*/

#bo_list {display:grid; grid-template-columns: 40% auto; gap:15px;}

/* 캘린더 */ 
#diary_calendar {max-height:calc(100vh - 200px); position:sticky;overflow:auto;top:70px;} /* 캘린더 고정 */
.diary-calendar {height:fit-content;}
.diary-calendar h2{ padding:5px; font-size:18px;font-weight:normal;} 
.diary-calendar .controls {position: absolute;right:10px;top:10px;}

.calendar-list.theme-list {border-collapse:separate;border-spacing: 1px;padding:5px 0 0;}
.calendar-list.theme-list th{ height:26px;padding:0;border:0 none;font-size:11px;border-top:1px solid #aaaaaa22;border-bottom:1px solid #aaaaaa22;background:none;} /* 요일 표시 칸 */
.calendar-list.theme-list th.sun{color:#c70039;} /* 일요일 */
.calendar-list.theme-list th.sat{color:#345ad6;} /* 토요일 */

.calendar-list.theme-list td {text-align:center; padding:5px; font-size:11px;height:25px;border:0 none;} /* 날짜 표시 칸 */
.calendar-list.theme-list td.noday {background:#aaaaaa11;} /* 날짜없는 칸 */

.calendar-list.theme-list td i {position:relative;display:block; font-style:normal;}/* 날짜(숫자) */
.calendar-list.theme-list td.today i {font-weight:bold;}

/* 날짜 */
.calendar-list.theme-list td .wr-date {position:relative;display:inline-block;padding:0;width:25px;height:25px;line-height:25px;border-radius:100%;overflow:hidden;border:0 none;}
.calendar-list.theme-list td .wr-date.etc {background:none;color:inherit;}
.calendar-list.theme-list td .wr-date.default {cursor:default;}

/* 게시판 쓰기 */
#diary_write {text-align:left;z-index:1;} 
#diary_write p.ui-btn.point{margin-bottom:10px;line-height:26px;cursor:default;}

#write_open {display:block;}

#bo_w {display:none;}
#bo_w.on {display:block;}
#bo_w .wr_content textarea {display:block;height:120px !important;}
#wr_info {position:relative;}
.options {position:relative;}
.options input {width:50%;}
.options .btn_confirm {position:absolute;right:5px;top:0; }
#btn_submit:disabled {filter:saturate(0);cursor:default;}
#file_del {float:left;} 


/* 게시판 읽기 */
#bo_v {margin-bottom:20px;padding-bottom:20px}

#bo_v_table {position:absolute;top:0;right:16px;margin:0;padding:0 5px;height:25px;background:#ff3061;color:#fff;font-weight:bold;line-height:2.2em}
#bo_v_link h2, #bo_v_bot h2, #bo_v_atc_title{position:absolute;font-size:0;line-height:0;overflow:hidden}

#bo_v_title {padding:10px 0;font-size:1.4em}

#bo_v_bot {zoom:1}
#bo_v_bot:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_bot ul {margin:0;padding:0;list-style:none}

.bo_v_nb {float:left}
.bo_v_nb li {float:left;margin-right:5px}
.bo_v_com {float:right}
.bo_v_com li {float:left;margin-left:5px}

#bo_v_link {margin:20px 10px ;}

#bo_v_img {margin:20px 0;}
#bo_v_img:after {display:block;visibility:hidden;clear:both;content:""}

#bo_v_con {margin-bottom:5px;width:100%;line-height:1.7em;word-break:break-all;overflow:hidden} 

#diary_list .misc {padding-bottom:4px; opacity:0.65;font-size:11px;}
#diary_list .misc span,#diary_list .misc em {display:inline-block; }
#diary_list .misc span {padding-right:10px;}
#diary_list h3 {line-height:25px;padding:0 5px;}
#diary_list hr.line {margin:2px auto 8px;}
#diary_list .diary-text {padding:0 5px;}
#diary_list .btn_confirm a {display: inline-block;padding:0 8px;line-height:25px;font-size:10px;}

.with-image {position:relative;padding-left:35%;min-height:80px;}/* 사진이 있을 경우 설정 */ 
.with-image .ui-thumb {
    position:absolute;top:0;left:0;bottom:0;width:35%;padding:5px;
    display:flex;justify-content: center;align-items: center;
    overflow:hidden;
    box-sizing:border-box;
}

/* 이미지뷰어 */
#view_img {display:none;position:fixed;top:0;right:0;left:0;bottom:0;background:rgba(0,0,0,0.8);overflow:auto;z-index:9999;}
#view_img.on {display:block;text-align: center;}
#img_close {display:block;position:fixed;right: 0;top: 0;bottom: 0;left: 0;overflow:hidden;} 
#img_cont p {display:inline-block;vertical-align: middle;font-size:0;height:100vh;}
#img_cont p::before {content:"";display:inline-block;width:0;height:100vh;vertical-align:middle;font-size:0;line-height:0;}
#img_cont p img {max-height:100%;}

@media all and (min-width:721px){
    #diary_write.scroll-fix {transform: translateY(0) !important;}
}

@media all and (max-width:720px){
    #bo_list {display:block;}
    #file_del {float:none;}
    #diary_calendar {max-height:none;position:static;top:auto;overflow:hidden;}
    #diary_write.scroll-fix{position:absolute;width:calc(100% - 20px);top:0;}
}

@media all and (max-width:480px) {
    #bo_frame .pg_wrap {grid-template-columns: 30px auto 30px;}
    #bo_frame .pg.control .pg_page {padding:0;}
    #bo_frame .pg.control {display:flex;justify-content: space-between;flex-direction: column;}
    #bo_frame .pg.control:last-of-type {flex-direction: column-reverse;}
    #bo_frame .pg_wrap .year {display:block; padding:10px;}
    #bo_frame .pg_wrap .year::after {display:none;}
}