@charset "UTF-8";
/*검색창*/
.srh {width: 100%; margin: 30px 0 20px 0; display: inline-block;}
.srh > div {display: flex; align-items: center; justify-content: flex-end;}
.srh input {padding-left: 10px; height: 37px; width: 300px; border: 1px solid #bbb; border-right: none;}
.srh button {cursor: pointer; background: #f6f8fd; height: 37px; border: 1px solid #bbb; padding: 0 10px; border-radius: 0;}
/* 공지글 행 스타일 */
.notice-row {background-color: #f6f8fd; font-weight: bold;}
table.list_table {border-collapse: collapse; font-size: 16px; border-spacing: 0 10px; width: 100%;}
table.list_table td {border-bottom: 1px solid #dfdfdf}
.list_table a {padding: 20px 0; display: block;}
.list_table thead th {padding: 20px 0; background: #000; color: #fff;}
/*페이징*/
#page ul li {display: inline;}
#pagination {margin-top: 20px;}
.paginationjs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 0;
}
.paginationjs ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.paginationjs-page a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid #ecf0f1;
    background: #ffffff;
    color: #333;
    cursor: pointer;
    text-align: center;
    border-radius: 15px;
    font-size: 16px;
    font-weight: 400;
    transition: all 0.3s ease;
    padding: 0 5px;
}
.paginationjs-page a:hover {
    border-color: var(--color);
    color: var(--color);
}
.paginationjs-pages .active a,
.paginationjs .paginationjs-pages li.active > a {
    background-color: var(--color);
    color: #ffffff;
    border-color: var(--color);
}
.paginationjs-next, 
.paginationjs-prev {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid #ecf0f1;
    background: #ffffff;
    color: #333;
    cursor: pointer;
    border-radius: 15px;
    font-size: 16px;
    font-weight: 400;
    transition: all 0.3s ease;
    padding: 0 3px 0 0;
}
.paginationjs-next:hover,
.paginationjs-prev:hover {
    border-color: var(--color);
    color: var(--color);
}
.paginationjs .paginationjs-pages li.disabled > a,
.paginationjs-next.disabled,
.paginationjs-prev.disabled {
    color: #ccc;
    cursor: not-allowed;
    opacity: 0.5;
}
/*글쓰기 버튼*/
#addBtn button {border: 1px solid #bbb; background: #fff; padding: 10px 15px; cursor: pointer; transition: 0.3s;}
#addBtn button:hover, .writing_bt:hover {border: 1px solid var(--color); background: var(--color); color: #fff;}

/*페이지 평가*/
.satisfaction-survey {padding: 20px; background-color: #f9f9f9; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin: 50px auto 0px auto;}
.satisfaction-survey label {font-size: 16px; font-weight: bold; color: #333;}
.rating-options {display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px;}
.rating-options label {display: flex; font-size: 14px; color: #555; margin-right: 10px; align-items: center;}
.rating-options input[type="radio"] {all: revert; margin: 0 5px 0 0;}
.satisf_btn {all: revert; padding: 5px 10px; background-color: #555555; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; transition: background-color 0.3s ease; width: auto; display: inline-block;}
.satisf_btn:hover {background-color: #0056b3;}
.rating-options i {color: #ffca00;}
.rating-options i.color_g {color: #e3e3e3;}
.satisf_btn {width: 60px; height: 100%; border-radius: 0;}
#message {font-family: sans-serif; background: #fff; width: 100%; padding: 10px; border: 1px solid #ccc; border-right: 0; border-radius: 0; font-size: 14px; height: 100%; box-sizing: border-box; resize: none;}
/*갤러리*/
#gallery {display: flex; flex-direction: column; align-items: flex-start; width: 100%;}
#gallery .gallery-row {display: flex; gap: 15px; flex-wrap: nowrap; justify-content: flex-start; width: 100%; margin-bottom: 20px;}
#gallery .frame_txt {padding: 15px;}
#gallery .frame {background: #fff; flex: 0 0 calc((100% / var(--columns)) - 15px); max-width: calc((100% / var(--columns))); aspect-ratio: 1 / 1; cursor: pointer; box-sizing: border-box; transition: 0.3s; overflow: hidden; display: flex; flex-direction: column; border: 1px solid #ccc;}
#gallery .frame:last-child {margin-right: 0;}
#gallery .frame:hover {box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); border: 1px solid #324b95; transform: scale(1.03);}
#gallery .frame img {width: 100%; height: 70%; object-fit: cover; background: #ccc;}
#gallery .title {font-size: 16px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#gallery .writer {font-size: 12px; color: #939393; margin-top: 15px;}
.detail_title {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; border-bottom: 1px solid #ccc;}
.detail_top .detail_top_info {font-size: 15px;}
.detail_top .detail_top_info ul {font-size: 13px; display: flex; gap: 15px; justify-content: flex-end; flex-wrap: wrap;}
.detail_top h2 {font-size: 25px; margin-bottom: 10px;}
#reply_yn_div textarea {font-family: sans-serif; width: 100%; resize: none; border: 1px solid #ccc; border-right: none; padding: 10px; height: 100px;}
.comments {position: relative; display: flex;    gap: 5px;}
#comment_size {position: absolute; top: 78px; right: 56px; font-size: 12px; color: #ccc; font-weight: 300;}
#reply_yn_div h4 {font-size: 18px; margin-bottom: 5px;}
.comments button {cursor: pointer; transition: 0.3s; border-radius: 0 5px 5px 0; color: #ffffff; height: 100%; min-height: 60px; width: 50px; background: var(--color); border: 1px solid #ccc; font-size: 14px;}
.comments button:hover {background: var(--color); color: #fff; border: 1px solid var(--color); opacity: 0.8;}
/*첨부파일*/
#all_file a {display: flex; gap: 5px; color: #636363; font-size: 12px; display: flex; align-items: center; margin-top: 10px; color: #4d4d4d; padding: 10px;}
#atc_file {display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-right: 10px;}
/*게시판 하단 버튼*/
.list_btn button {transition: 0.3s; background: #fff; color: #656565; border: 1px solid #cbcbcb; font-size: 16px; cursor: pointer; border-radius: 100%; height: 50px; width: 50px;}
.list_btn button:hover {background: #324b95; border: 1px solid #324b95; color: #fff;}
.tooltip {position: relative; display: inline-block;}
.tooltip-text {visibility: hidden; width: 50px; background-color: #333; color: #fff; text-align: center; border-radius: 5px; padding: 5px; position: absolute; bottom: 115%; left: 50%; transform: translateX(-50%); z-index: 1; opacity: 0; transition: opacity 0.3s; font-size: 12px;}
.tooltip:hover .tooltip-text {visibility: visible; opacity: 1;}
.toastui-editor-contents p {margin: 30px 0; font-size: 18px; font-family: sans-serif;}
/*댓글*/
#reply_div .add-btn {font-size: 12px; background: #fff; border: 1px solid #ccc; padding: 5px 10px; border-radius: 5px; display: inline-block; margin-top: 10px;}
/*게시판*/
.list_top {display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px;}
.newsList {margin-bottom: 100px; border-top: 3px solid #000;}
.newsList li {position: relative; border-bottom: 1px solid rgba(0, 0, 0, 0.2);}
.newsList li dl dd {font-weight: 600;}
.newsList li dl dt i {color: #ff5722;}
.newsList li dl dt {margin-bottom: 12px; font-size: 20px; font-weight: 600; line-height: 140%;}
.newsList li dl dd.date {font-size: 18px; font-weight: 400;}
.newsList li a {transition: 0.1s; color: #222; padding: 25px 0px; display: block;}
.newsList li a:hover {color: var(--primary-color);}
.newsListetc {display: flex; position: absolute; top: 20px; right: 20px;}
.newsListetc a {top: 0; right: 0; padding: 10px !important;}
/* 글쓰기 버튼 */
.btm_item {position: relative; display: flex; justify-content: center; align-items: center; padding-bottom: 20px;}
.writing_bt {background: #fff;white-space: nowrap; transition: 0.5s; position: absolute; right: 0; top: 0; letter-spacing: 2px; border: 1px solid #939393; width: 50px; height: 50px; border-radius: 30px; display: flex; align-items: center; justify-content: center;}
.writing_bt:hover {width: 100px; font-weight: 300;}
.writing_bt:after {content: '\f044'; font-family: "Font Awesome 6 Free"; transform: translateX(2px); font-size: 20px; color: #444;}
.writing_bt:hover:after {content: '글쓰기'; transform: translateX(0px); font-size: 20px; color: #fff; font-weight: 400;}
/*write*/
.write_section {width: 100%; display: flex; align-items: center; border-bottom: 1px solid #ccc;}
.write_section:first-child {border-top: 3px solid #000;}
.write_th {
    min-width: 200px; 
    text-align: left; 
    font-size: 22px; 
    font-weight: 500; 
    padding: 20px; 
    align-self: flex-start !important;
    padding-top: 20px !important;
    /*background: #eee;*/
}
.write_section input[type="text"] {height: auto; border: none; width: calc(100% - 230px); padding: 20px; font-size: 20px; font-weight: 300; overflow-x: visible; text-overflow: clip; white-space: normal; word-wrap: break-word;}
.write_section textarea {height: auto; border: none; width: calc(100% - 230px); padding: 20px; font-size: 20px; font-weight: 300; overflow-x: visible; overflow-y: auto; text-overflow: clip; white-space: normal; word-wrap: break-word; resize: vertical; min-height: 80px;}
.title-input-wrapper textarea,
textarea[id^="brd_ttl"] {
    width: 100% !important;
    flex: 1;
    min-width: 0;
    resize: none !important;
}
#brd_ttl {/*overflow-x: visible !important; overflow-y: auto !important;*/ text-overflow: clip !important; white-space: normal !important; word-wrap: break-word !important; resize: vertical !important; /*min-height: 80px !important;*/}
.write_section .cke_chrome {border: none; width: calc(100% - 200px);}
/*#festivalSelectForEdit {margin-bottom: 50px;}*/
.title-input-wrapper {
    display: flex;
    align-items: center !important;
    flex: 1;
    position: relative;
    gap: 10px;
    align-self: flex-start;
}

.title-input-wrapper #brd_ttl {
    flex: 1;
    min-width: 0;
}

.title-input-wrapper .notice_box {
    flex-shrink: 0;
    margin-left: auto;
}

.title-input-wrapper #title_size {
    flex-shrink: 0;
    font-size: 14px;
    color: #666;
    white-space: nowrap;
}

.notice_box {cursor: pointer; display: flex; align-items: center; width: 30px; justify-content: center;}
.notice_box .icon {color: #dfdfdf; transition: color 0.3s; font-size: 25px;}
.notice_box input[type="checkbox"]:checked + .icon {color: #ff5722;}
.file-upload {
    position: relative; 
    overflow: hidden; 
    display: block; 
    max-width: 600px;
    padding: 20px;
    box-sizing: border-box;
}
.file-upload label {
    display: block;
    width: 100%;
    background-color: #000000; 
    color: #fff; 
    padding: 12px 20px; 
    border-radius: 8px; 
    cursor: pointer; 
    font-weight: 500;
    text-align: center;
    transition: all 0.3s ease;
}
.file-upload label:hover {
    background-color: #333;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.file-upload input[type="file"] {position: absolute; opacity: 0; right: 0; top: 0; cursor: pointer;}
.file-upload .file-name {margin-left: 10px; font-weight: 500; color: #595959; font-size: 14px;}
#fileList {line-height: 27px;}
#fileList li {display: flex; gap: 5px; align-items: center;}
/*.write_bt {display: flex; justify-content: flex-end; margin-top: 30px; margin-bottom: 100px; gap: 10px;}*/
/*.write_bt a {white-space: nowrap; transition: 0.5s; letter-spacing: 2px; border: 1px solid #939393; width: 50px; height: 50px; border-radius: 30px; display: flex; align-items: center; justify-content: center;}*/
/*.write_bt a:hover {width: 100px; background: #ff5722; border: 1px solid #ff5722;color: #fff;}*/
/*.write_bt a:after {font-family: "Font Awesome 6 Free"; font-weight: 600; transform: translateX(1px); font-size: 20px; color: #444;}*/
/*.write_bt a:hover:after {transform: translateY(0) translateX(0); font-size: 20px; color: #fff; font-weight: 400;}*/
/*.write_bt1::after {content: '\f00c';}*/
/*.write_bt1:hover::after {content: '작성';}*/
/*.write_bt2::after {content: '\f00d';}*/
/*.write_bt2:hover::after {content: '취소';}*/
.write_bt {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 30px !important;
    margin-bottom: 100px !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    text-align: center !important;
}

.write_bt a {
    white-space: nowrap !important;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
    padding: 12px 28px !important;
    border-radius: 8px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid;
    gap: 8px;
    margin-right: 0 !important;
    flex-shrink: 0;
}

/* 등록 버튼 스타일 */
.write_bt a:first-child,
.write_bt a[id*="addBtn"] {
    background: #000;
    border-color: #000;
    color: #fff;
}

.write_bt a:first-child:hover,
.write_bt a[id*="addBtn"]:hover {
    background: #333;
    border-color: #333;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 취소 버튼 스타일 */
.write_bt a:last-child:not([id*="addBtn"]),
.write_bt a[onclick*="cancel"] {
    background: #fff;
    border-color: #ddd;
    color: #666;
}

.write_bt a:last-child:not([id*="addBtn"]):hover,
.write_bt a[onclick*="cancel"]:hover {
    background: #f8f9fa;
    border-color: #999;
    color: #333;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.write_bt a:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 600;
    font-size: 16px;
}

.write_bt1::before {
    content: '\f00c';
}

.write_bt1::after {
    content: '작성';
}

.write_bt2::before {
    content: '\f00d';
}

.write_bt2::after {
    content: '취소';
}

/* 기존 클래스 스타일도 새로운 디자인 적용 */
.write_bt1 {
    background: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
}

.write_bt1:hover {
    background: #333 !important;
    border-color: #333 !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.write_bt2 {
    background: #fff !important;
    border-color: #ddd !important;
    color: #666 !important;
}

.write_bt2:hover {
    background: #f8f9fa !important;
    border-color: #999 !important;
    color: #333 !important;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/*detail*/
.list_container {position: relative;}
.list_title {width: 500px; height: auto; margin-bottom: 40px;}
.list_title p {font-size: 35px; font-weight: 500; margin-bottom: 20px; line-height: 45px; color: #000;}
.list_title span {display: flex; gap: 10px; color: #6f6f6f; font-size: 20px; font-weight: 300;}
.list_title {display: flex; flex-direction: column; justify-content: space-between; word-break: break-all; overflow-wrap: break-word; margin-bottom: 100px;}
.list_title .list_downloat {display: inline-block; font-size: 14px; font-weight: 500; color: #000; border: 1px solid #ccc; padding: 10px 20px;}
.list_title .list_view_pdf {display: inline-block; color: #000; border: 1px solid #ccc; padding: 5px 10px; margin-left: 10px; text-decoration: none; font-size: 0.8em; font-weight: 500; border-radius: 15px;}
.list_title ul {display: flex; gap: 10px; margin-top: 50px;}
.list_title ul.list_title_actions {justify-content: space-between; align-items: center;}
.list_title ul li a {cursor: pointer; white-space: nowrap; transition: 0.5s; letter-spacing: 2px; border: 1px solid #939393; width: 50px; height: 50px; border-radius: 30px; display: flex; align-items: center; justify-content: center;}
.list_title ul li a:hover {width: 100px; background: var(--primary-color); border: 1px solid var(--primary-color); font-weight: 300;}
.list_title ul li a::after {font-family: "Font Awesome 6 Free"; font-weight: 600; transform: translateX(2px); font-size: 20px; color: #444;}
.list_title ul li a:hover:after {transform: translateY(0) translateX(0); font-size: 20px; color: #fff; font-weight: 400;}
.list_title ul li a.list_btn::after {content: '\f03a';}
.list_title ul li a.re_btn::after {content: '\f12d';}
.list_title ul li a.del_btn::after {content: '\f2ed';}
.list_title ul li a.list_btn:hover::after {content: '목록';}
.list_title ul li a.re_btn:hover::after {content: '수정';}
.list_title ul li a.del_btn:hover::after {content: '삭제';}
.list_title ul li.action-buttons-group {display: flex; gap: 10px; margin: 0; padding: 0; list-style: none;}
.list_title ul li.action-buttons-group a {cursor: pointer; white-space: nowrap; transition: 0.5s; letter-spacing: 2px; border: 1px solid #939393; width: 50px; height: 50px; border-radius: 30px; display: flex; align-items: center; justify-content: center;}
.list_title ul li.action-buttons-group a:hover {width: 100px; background: var(--primary-color); border: 1px solid var(--primary-color); font-weight: 300;}
.list_title ul li.action-buttons-group a::after {font-family: "Font Awesome 6 Free"; font-weight: 600; transform: translateX(2px); font-size: 20px; color: #444;}
.list_title ul li.action-buttons-group a:hover:after {transform: translateY(0) translateX(0); font-size: 20px; color: #fff; font-weight: 400;}
.list_title ul li.action-buttons-group a.list_btn::after {content: '\f03a';}
.list_title ul li.action-buttons-group a.re_btn::after {content: '\f12d';}
.list_title ul li.action-buttons-group a.del_btn::after {content: '\f2ed';}
.list_title ul li.action-buttons-group a.list_btn:hover::after {content: '목록';}
.list_title ul li.action-buttons-group a.re_btn:hover::after {content: '수정';}
.list_title ul li.action-buttons-group a.del_btn:hover::after {content: '삭제';}
.list_title ul li.share-buttons-group {display: flex; gap: 10px; align-items: center; margin: 0; padding: 0; list-style: none;}

/* 데스크톱에서 하단 버튼 숨김 */
.list_title_mobile {
    display: none;
}
.list_title ul li.share-buttons-group span,
.list_title ul li.share-buttons-group a {cursor: pointer; border: none !important; border-radius: 0 !important; width: auto !important; height: auto !important; background: transparent !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative;}
.list_title ul li.share-buttons-group span:hover,
.list_title ul li.share-buttons-group a:hover {width: auto !important; background: transparent !important; border: none !important;}
.list_title ul li.share-buttons-group img {width: 30px; height: auto;}
.list_title ul li.share-buttons-group span:first-child img {width: 30px;}
.list_title ul li.share-buttons-group .share-tooltip {position: relative;}
.list_title ul li.share-buttons-group .share-tooltip::before {content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 8px; padding: 6px 12px; background: #333; color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; border-radius: 4px; opacity: 0; visibility: hidden; transition: all 0.3s ease; pointer-events: none; z-index: 1000; box-shadow: 0 2px 8px rgba(0,0,0,0.15);}
.list_title ul li.share-buttons-group .share-tooltip::after {content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 2px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #333; opacity: 0; visibility: hidden; transition: all 0.3s ease; pointer-events: none; z-index: 1000;}
.list_title ul li.share-buttons-group .share-tooltip:hover::before,
.list_title ul li.share-buttons-group .share-tooltip:hover::after {opacity: 1; visibility: visible;}
.list_con img, .list_con iframe, .list_con video, .list_con table {max-width: 890px !important;}
.list_con {width: 100%;}
.brd_info {margin-bottom: 30px;}
@media screen and (max-width: 1000px) {
    .subsection {flex-direction: column; margin-top: 0px !important;} 
    .list_con img, .list_con iframe, .list_con video, .list_con table {max-width: 100% !important;} 
    .list_title {width: 100%; margin-bottom: 50px;} 
    .list_title span {margin-bottom: 10px; font-size: 13px;} 
    .list_title p {font-size: 23px; line-height: 35px;} 
    .newsList li a {padding: 15px 0px;} 
    .newsList li dl dt {font-size: 16px;} 
    .newsList li dl dd.date {font-size: 14px;} 
    .paging_number {font-size: 16px;} 
    #atc_file a {padding: 10px; font-size: 12px;}
}
/*갤러리*/
.gallery_list {display: flex; flex-wrap: wrap; gap: 2.4%;}
.gallery_list li {flex: 0 31.7%; margin-bottom: 2.5%;}
.gallery_img {position: absolute; top: 0; transition: 0.3s; display: block; width: 100%; height: 17vw; border: 1px solid #ccc; overflow: hidden;}
.gallery_img img {width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.gallery_title {margin: 0 0 20px 0; margin-top: 18vw; font-size: 20px; display: block;}
.gallery_data span:nth-child(1) {background: url('/resources/view/phcf/imagesuser_id_icon.png') no-repeat center left; padding-left: 20px; background-size: 15px;}
.gallery_data span:nth-child(2) {background: url('/resources/view/phcf/imagesuser_date_icon.png') no-repeat center left; padding-left: 20px; background-size: 15px;}
.gallery_list a {position: relative;}
.gallery_list a:hover .gallery_img {box-shadow: 5px 5px 0 #ccc; margin-left: -5px; margin-top: -5px;}
.gallery_img_on {opacity: 0; transition: 0.3s; background: #0000008a; width: 100%; display: flex; height: 100%; position: absolute; top: 0; z-index: 1; color: #fff; justify-content: center; align-items: center;}
.gallery_list a:hover .gallery_img_on {opacity: 1;}
.gallery_img_on > span {display: flex; margin: 0 15px; gap: 5px; flex-direction: column; align-items: center;}
.delete-btn {transition: 0.3s; position: absolute; top: 10px; right: 10px; border-radius: 30px; cursor: pointer; font-size: 15px; padding: 5px 10px; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(1px); border: none;}
.delete-btn:hover {color: #fff; background: #000;}
.grid {margin: 0 auto; min-height: 500px; margin-bottom: 100px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.grid-sizer, .grid-item {width: 23.5%;}
.grid-item a {position: relative; transition: 0.3s; display: block; box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.2); border-radius: 5px; overflow: hidden; margin-bottom: 15px;}
.grid-item a:hover img {filter: brightness(0.5);}
.grid-item a p {position: absolute; top: 0; padding: 10%; font-size: 22px; height: 100%; width: 100%; color: #fff; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0;}
.grid-item a p span {font-size: 13px; font-weight: 300; margin-top: 10px;}
.grid-item a:hover p {opacity: 1;}
.grid-item img {transition: 0.3s; display: block; min-width: 100%; max-width: 100%; height: 100%;}
@media (max-width: 1700px) {.grid-sizer, .grid-item {width: 23%;}}
@media (max-width: 900px) {
	.grid-sizer, .grid-item {width: 48%;} .grid-item a p {font-size: 16px;} .toastui-editor-contents table, .toastui-editor-contents img {max-width: 100% !important;} .toastui-editor-contents p {font-size: 12px !important;}
    .gallery-grid {
        gap: 5px;
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
/* 작성/수정 페이지 반응형 스타일 */
@media (max-width: 768px) {
    .file-upload{
        padding: 0 !important;
        width: 100% !important;
        max-width: 600px !important;
        margin: 0 auto !important;
        display: block !important;
    }
    .file-upload label {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
    }
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .write_section {
        flex-direction: row !important;
        align-items: flex-start !important;
        padding: 0 !important;
        margin-bottom: 20px !important;
        gap: 10px;
    }
    
    /* 인라인 스타일 덮어쓰기 */
    .write_section[style*="align-items"] {
        align-items: flex-start !important;
        flex-direction: row !important;
    }
    
    /* 제목 섹션 세로 정렬 강제 */
    .write_section[style*="align-items: center"] {
        align-items: flex-start !important;
    }
    
    .write_th {
        min-width: 60px !important;
        width: auto !important;
        text-align: left !important;
        padding: 8px 10px !important;
        font-size: 14px !important;
        margin-bottom: 0 !important;
        background-color: transparent !important;
        flex-shrink: 0;
        align-self: flex-start !important;
    }
    
    .write_section input[type="text"] {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 8px 12px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        border: 1px solid #ddd !important;
        border-radius: 4px;
    }
    
    /* .write_section 내부의 notice_box와 title_size 한 줄 배치 */
    .write_section .notice_box {
        flex-shrink: 0 !important;
        margin-left: 0 !important;
        width: auto !important;
    }
    
    .write_section #title_size,
    .write_section [id^="title_size"] {
        flex-shrink: 0 !important;
        font-size: 12px !important;
        color: #666 !important;
        white-space: nowrap !important;
        margin-left: 0 !important;
    }
    
    .write_section textarea {
        width: 100% !important;
        padding: 12px 15px !important;
        font-size: 15px !important;
        box-sizing: border-box !important;
        overflow-x: visible !important;
        overflow-y: auto !important;
        text-overflow: clip !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        resize: vertical !important;
        min-height: 80px !important;
        border: 1px solid #ddd !important;
        border-radius: 4px;
    }
    #brd_ttl {
        text-overflow: clip !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        resize: vertical !important;
        min-width: 0 !important;
        width: 100% !important;
        padding: 12px 15px !important;
        border-radius: 4px;
        box-sizing: border-box !important;
        text-align: center;
    }
    
    .write_section select {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 10px 15px !important;
        font-size: 15px !important;
        box-sizing: border-box !important;
        border: 1px solid #ddd !important;
        border-radius: 4px;
    }
    
    #festivalSelectForWrite {
        min-width: 0 !important;
        width: 100% !important;
        display: block !important;
    }
    
    /* 축제 선택 드롭다운 인라인 스타일 덮어쓰기 */
    select#festivalSelectForWrite[style*="min-width"] {
        min-width: 0 !important;
        width: 100% !important;
        display: block !important;
    }
    
    .write_section .cke_chrome {
        width: 100% !important;
        box-sizing: border-box !important;
        border: 1px solid #ddd !important;
        border-radius: 4px;
    }
    
    .write_section .cke_contents {
        min-height: 250px !important;
    }
    
    iframe.cke_wysiwyg_frame {
        min-height: 250px !important;
    }
    
    .title-input-wrapper {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        gap: 8px !important;
        align-self: flex-start !important;
    }
    
    .title-input-wrapper #brd_ttl,
    .title-input-wrapper textarea,
    textarea[id^="brd_ttl"] {
        width: 100% !important;
        flex: 1 !important;
        min-width: 0 !important;
        padding: 12px 15px !important;
        border: none !important;
        border-radius: 0 !important;
        resize: none !important;
        box-sizing: border-box;
    }
    
    .title-input-wrapper .notice_box {
        flex-shrink: 0 !important;
        margin-left: 0 !important;
        position: static !important;
        width: auto !important;
    }
    
    .title-input-wrapper #title_size {
        flex-shrink: 0 !important;
        position: static !important;
        font-size: 12px !important;
        color: #666 !important;
        background-color: transparent !important;
        padding: 0 !important;
        float: none !important;
        text-align: right !important;
        white-space: nowrap !important;
    }
    
    .write_section:first-child {
        position: relative;
        padding-bottom: 0 !important;
    }
    
    #editor_text_size {
        font-size: 12px !important;
        margin-top: 8px !important;
        margin-bottom: 8px !important;
        color: #666 !important;
        text-align: right !important;
        padding-right: 5px !important;
        float: none !important;
        display: block !important;
    }
    
    /* 첨부파일 영역 모바일 스타일 */
    #attach_yn_div,
    [id^="attach_yn_div_"] {
        margin-top: 20px !important;
    }
    
    #attach_yn_div .write_section,
    [id^="attach_yn_div_"] .write_section {
        flex-direction: column !important;
        padding: 15px !important;
        border: 1px solid #ddd !important;
        border-radius: 4px;
        background-color: #f8f9fa;
    }
    
    #attach_yn_div .write_th,
    [id^="attach_yn_div_"] .write_th {
        margin-bottom: 12px !important;
        padding: 10px 0 !important;
        background-color: transparent !important;
    }
    
    #attach_yn_div .file-upload,
    [id^="attach_yn_div_"] .file-upload {
        width: 100% !important;
        margin-bottom: 10px;
    }
    
    #attach_yn_div .file-upload label,
    [id^="attach_yn_div_"] .file-upload label {
        width: 100% !important;
        text-align: center;
        padding: 12px !important;
        display: block;
    }
    
    #attach_yn_div b,
    [id^="attach_yn_div_"] b {
        font-size: 12px !important;
        margin-top: 8px !important;
        display: block !important;
        color: #dc3545;
    }
    
    #attach_yn_div ul,
    [id^="attach_yn_div_"] ul {
        padding: 10px !important;
        margin: 0 !important;
    }
    
    #attach_yn_div #fileList,
    #attach_yn_div [id^="fileList_"],
    [id^="attach_yn_div_"] #fileList,
    [id^="attach_yn_div_"] [id^="fileList_"] {
        padding: 0 !important;
    }
    
    #attach_yn_div #fileList li,
    #attach_yn_div [id^="fileList_"] li,
    [id^="attach_yn_div_"] #fileList li,
    [id^="attach_yn_div_"] [id^="fileList_"] li {
        padding: 8px 0 !important;
        word-break: break-all;
        font-size: 14px;
    }
    
    .write_bt {
        flex-direction: row !important;
        justify-content: center !important;
        gap: 10px !important;
        margin-top: 30px !important;
        margin-bottom: 50px !important;
        padding: 0 10px;
    }
    
    .write_bt a {
        width: auto !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        height: 48px;
        border-radius: 8px;
        justify-content: center;
        padding: 12px 24px !important;
    }
    
    .write_bt a:hover {
        width: auto !important;
    }
    .list_title ul{margin-top: 0px;}
    .list_title span{justify-content: center;}
    .list_title p{margin-bottom: 5px;}
}

@media (max-width: 768px) {
    /* 공지사항 게시판 글쓰기 버튼 모바일 스타일 (intro_detail과 동일) */
    .btm_item #add_btn,
    .btm_item .writing_bt {
        display: block !important;
        position: relative !important;
        right: auto !important;
        top: auto !important;
        margin-top: 15px;
    }
    
    .btm_item {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    .gallery-grid {
        gap: 5px;
        grid-template-columns: repeat(2, 1fr) !important;
        margin-bottom: 20px;
    }
}

@media (max-width: 550px) {
    .grid-sizer, .grid-item {width: 45%;}
    .newsList {margin-bottom: 80px;}
    .writing_bt {top: -65px;}
    
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    .write_section {
        flex-direction: row !important;
        align-items: flex-start !important;
        padding: 0 !important;
        margin-bottom: 15px !important;
        gap: 8px;
    }
    
    .write_th {
        min-width: 50px !important;
        width: auto !important;
        padding: 8px 10px !important;
        font-size: 13px !important;
        margin-bottom: 0 !important;
        flex-shrink: 0;
        align-self: flex-start !important;
    }
    
    .write_section input[type="text"] {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 8px 10px !important;
        font-size: 13px !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }
    
    /* .write_section 내부의 notice_box와 title_size 한 줄 배치 */
    .write_section .notice_box {
        flex-shrink: 0 !important;
        margin-left: 0 !important;
        width: auto !important;
    }
    
    .write_section #title_size,
    .write_section [id^="title_size"] {
        flex-shrink: 0 !important;
        font-size: 11px !important;
        color: #666 !important;
        white-space: nowrap !important;
        margin-left: 0 !important;
    }
    
    .write_section textarea {
        width: 100% !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
        overflow-x: visible !important;
        overflow-y: auto !important;
        text-overflow: clip !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        resize: vertical !important;
        min-height: 45px !important;
    }
    
    #brd_ttl {
        text-overflow: clip !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        resize: vertical !important;
        min-width: 0 !important;
        width: 100% !important;
        padding: 10px 12px !important;
    }
    
    .write_section select {
        padding: 8px 12px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
    }
    
    .title-input-wrapper {
        gap: 6px !important;
    }
    
    .title-input-wrapper #brd_ttl,
    .title-input-wrapper textarea,
    textarea[id^="brd_ttl"] {
        width: 100% !important;
        flex: 1 !important;
        min-width: 0 !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
        border: none !important;
        border-radius: 0 !important;
        resize: none !important;
        box-sizing: border-box;
    }
    
    .title-input-wrapper .notice_box {
        position: static !important;
    }
    
    .title-input-wrapper #title_size {
        font-size: 11px !important;
        padding: 0 !important;
    }
    
    .write_section:first-child {
        padding-bottom: 0 !important;
    }
    
    .write_section .cke_chrome {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .write_section .cke_contents {
        min-height: 200px !important;
    }
    
    iframe.cke_wysiwyg_frame {
        min-height: 200px !important;
    }
    
    #editor_text_size {
        font-size: 11px !important;
        margin-top: 6px !important;
        margin-bottom: 6px !important;
        padding-right: 5px !important;
        float: none !important;
        display: block !important;
        text-align: right !important;
    }
    
    /* 첨부파일 영역 작은 화면 스타일 */
    #attach_yn_div .write_section {
        padding: 12px !important;
    }
    
    #attach_yn_div .write_th {
        font-size: 14px !important;
        padding: 8px 0 !important;
    }
    
    #attach_yn_div .file-upload label {
        padding: 10px !important;
        font-size: 13px !important;
    }
    
    #attach_yn_div b {
        font-size: 11px !important;
    }
    
    #attach_yn_div #fileList li {
        font-size: 13px !important;
        padding: 6px 0 !important;
    }
    
    .write_bt {
        flex-direction: row !important;
        justify-content: center !important;
        gap: 10px !important;
        margin-top: 20px !important;
        margin-bottom: 40px !important;
        padding: 0 5px;
    }
    
    .write_bt a {
        width: auto !important;
        flex: 0 0 auto !important;
        height: 44px;
        font-size: 14px;
        padding: 10px 20px !important;
    }
}
.paging_number {display: flex; font-size: 18px; align-items: center; gap: 3px;}
.paging_number span {font-size: 12px;}
.search {position: relative;display: flex;  flex-wrap: wrap; align-items: center; gap: 10px;}
.search input {
    padding: 12px 60px 11px 18px; 
    background-color: #fff; 
    border: 1px solid #ccc; 
    line-height: 24px; 
    height: 51px; 
    min-width: 250px; 
    box-shadow: none !important;
    text-shadow: none !important;
}
.search .search_btn {position: absolute; cursor: pointer; border: none; background: none; font-size: 20px; right: 5px; top: 0; width: 46px; height: 50px; padding: 0; display: flex; align-items: center; justify-content: center;}
.search select {height: 51px;}
.view-content * {font-size: 18px;}

/* festivalSelectorContainer 반응형 */
#festivalSelectorContainer {
    display: inline-block;
}

#festivalSelect {
    min-width: 200px;
    max-width: 250px;
}

@media (max-width: 1023px) {
    .list_top {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    
    .paging_number {
        width: 100%;
    }
    
    .search {
        position: relative;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 10px;
    }
    
    /* notice-board-section 내부의 search는 row 방향 유지 */
    .notice-board-section .search,
    .notice-board-section .list_top .search {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }
    
    #festivalSelectorContainer {
        width: 100%;
        max-width: 100%;
        margin-right: 0;
    }
    
    #festivalSelect {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        font-size: 0.9rem;
        padding: 10px 15px;
        height: 51px;
    }
    
    .search > label {
        position: relative;
        width: 100%;
        display: flex;
        margin-right: 0;
    }
    
    .search input {
        width: 100%;
        min-width: 0;
        font-size: 14px;
        padding: 12px 50px 12px 18px;
        height: 51px;
        flex: 1;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    .search .search_btn {
        position: absolute;
        right: 0;
        top: 0;
        width: 46px;
        height: 51px;
        font-size: 20px;
        z-index: 10;
        pointer-events: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    
    /* 검색 아이콘 위치 조정 */
    .search .search_btn .fa-magnifying-glass:before,
    .search .search_btn .fa-search:before,
    .search .search_btn i.fa-magnifying-glass:before,
    .search .search_btn i.fa-search:before {
        position: relative;
        right: 0;
    }
    
    /* notice-board-section 내부의 search는 row 방향 유지 (9:1 비율) */
    .notice-board-section .search,
    .notice-board-section .list_top .search {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }
    .notice-board-section .search > label,
    .notice-board-section .list_top .search > label {
        width: auto !important;
        flex: 9 !important;
        margin-right: 0 !important;
    }
    .notice-board-section .search input,
    .notice-board-section .list_top .search input {
        flex: 1 !important;
        width: 100% !important;
    }
    .notice-board-section .search .search_btn,
    .notice-board-section .list_top .search .search_btn {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        width: auto !important;
        height: auto !important;
        flex: 1 !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 768px) {
    .search {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    #festivalSelect {
        font-size: 0.9rem;
        padding: 8px 12px;
        height: 45px;
    }
    
    .search input {
        font-size: 14px;
        padding: 10px 50px 10px 15px;
        height: 45px;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    .search .search_btn {
        font-size: 18px;
        width: 40px;
        height: 45px;
    }
    
    /* 페이징 버튼 모바일 스타일 */
    .paginationjs {
        gap: 0.3rem;
    }
    
    .paginationjs-page a {
        width: 35px;
        height: 35px;
        font-size: 0.85rem;
    }
    
    .paginationjs-next,
    .paginationjs-prev {
        width: 35px;
        height: 35px;
        font-size: 0.85rem;
    }
    
    .paginationjs-next i,
    .paginationjs-prev i {
        font-size: 0.75rem;
    }
    
    /* 모바일에서 상단의 action-buttons-group만 숨김 (공유 버튼은 유지) */
    .subsection > .mb50 > .list_title ul.list_title_actions .action-buttons-group {
        display: none !important;
    }
    
    /* 모바일에서 상단의 list_title_actions 중앙 정렬 */
    .subsection > .mb50 > .list_title ul.list_title_actions {
        justify-content: center !important;
    }
    
    /* 모바일에서 첨부파일 영역 중앙 정렬 */
    #attach_yn_div {
        text-align: center !important;
    }
    
    #attach_yn_div #atc_file,
    #attach_yn_div #all_file {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    
    /* 모바일에서 상단 목록 버튼 숨김 (.notice-detail-section 내부) */
    .notice-detail-section > div:first-child .down_btn {
        display: none !important;
    }
    
    /* 모바일에서 게시글 하단의 list_title_actions 표시 및 중앙 정렬 */
    .list_title_mobile {
        display: block !important;
    }
    
    .list_title_mobile ul.list_title_actions {
        display: flex !important;
        justify-content: center !important;
        margin-top: 30px;
        padding-top: 20px;
        border-top: 1px solid #e5e7eb;
    }
}

@media (max-width: 480px) {
    .search {
        gap: 6px;
    }
    
    #festivalSelect {
        font-size: 0.85rem;
        padding: 8px 10px;
        height: 45px;
    }
    
    .search input {
        height: 45px;
        font-size: 13px;
        padding: 8px 45px 8px 12px;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    .search .search_btn {
        font-size: 16px;
        width: 38px;
        height: 43px;
    }
    
    /* 페이징 버튼 작은 모바일 스타일 */
    .paginationjs {
        gap: 0.25rem;
    }
    
    .paginationjs-page a {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
    
    .paginationjs-next,
    .paginationjs-prev {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
    
    .paginationjs-next i,
    .paginationjs-prev i {
        font-size: 0.7rem;
    }
}

@media (max-width: 450px) {
    .list_top {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .search {
        width: 100%;
        margin-top: 10px;
        align-items: stretch;
    }
    
    .search input {
        height: 40px;
        font-size: 14px;
        width: 100%;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    #festivalSelect {
        height: 40px;
        font-size: 0.85rem;
    }
    
    .search .search_btn {
        height: 40px;
    }
}
/* 게시판 테이블 */
.boardTbl {clear: both; width: 100%; border-top: 2px solid #333; table-layout: fixed; margin: 0 0 0.5rem 0; border-collapse: collapse;}
.boardTbl th, .boardTbl td {padding: 8px; text-align: center; box-sizing: border-box;}
.boardTbl th {font-weight: 400; letter-spacing: -0.08em; border-bottom: 1px solid #ccc; color: #000; background: #fafafa;}
.boardTbl td {border-bottom: 1px solid #ccc;}
.boardTbl td a.past {color: #bbb;}
.boardTbl td a.past:hover, .boardTbl td a.past:focus {color: #333;}
.boardTbl img {vertical-align: middle; cursor: pointer;}
.boardTbl td.b_file i {color: #929292;}
.boardTbl .list_file {text-align: left;}
.boardTbl .list_file th, .boardTbl .list_file td {text-align: left;}
.boardTbl .list_file li a:hover {text-decoration: underline; font-weight: inherit}
.boardTbl .list_file strong {float: left; width: 90px; margin: 5px 10px;}
.boardTbl .list_file button.btn {height: 28px;}
.boardTbl .list_file button.btn i {margin-right: 0;}
.boardTbl .list_file .update_file {float: left; margin-left: 5px;}
.boardTbl .list_file .update_file ul {margin: 0;}
.boardTbl .list_file .update_file li {line-height: 20px}
.boardTbl .list_file .update_file li:first-child {margin-top: 5px;}
.boardTbl .list_file .update_file li:last-child {margin-bottom: 5px;}
.boardTbl .list_file .update_file .file_dle {margin: 0 0 0 5px;}
.boardTbl .list_file .file_txt {color: #676767; margin: 0 0 0 5px; display: inline-block;}
.boardTbl .list_file .update_file > a {padding: 5px 18px 5px 13px !important;}
.boardTbl.slim th, .boardTbl.slim td {padding: 5px 3px}
.boardTbl .bold td {font-weight: bold;}