/* =============================================
   NOTICE.HTML - 선오픈 페이지 스타일
   ============================================= */

/* HEADER */
#header {z-index: 9997; transition: 0.2s;}
#header .inner {padding: 2.4rem 0; position: relative;}
#header .logo {flex-shrink: 0;}
#header .logo a {display: block; text-decoration: none;}
#header .logo img {display: block;}
#header .festivalLogo {margin-left: 2rem; flex-shrink: 0;}
#header .festivalLogo img {height: 5.5rem; width: auto; display: block;}
#header .langBtn {margin-left: auto;}
#header .langBtn button {display: flex; align-items: center; gap: 0.8rem; border: 2px solid #5c2e15; border-radius: 0.4rem; padding: 0.8rem 1.2rem; background: #fff; cursor: pointer;}
#header .langBtn button img {width: 1.4rem; display: block;}
#header .langBtn button span {font-size: 1.4rem; color: #5c2e15; letter-spacing: -0.028rem;}

@media all and (max-width: 880px) {
    #header {}
    #header .inner {max-width: 100%; padding: 2.4rem 2rem 1.6rem; gap: 0;}
    #header .logo img {width: 11.94rem;}
    #header .festivalLogo {margin-left: 1.6rem;}
    #header .festivalLogo img {height: 4rem;}
    #header .langBtn button {padding: 0.6rem 1.2rem;}
    #header .langBtn button span {font-size: 1.4rem;}
}

/* FOOTER */
#footer {background: #121212; position: relative; overflow: hidden;}
#footer .footerInner {gap: 8rem; padding: 6rem 0 8rem; position: relative; z-index: 1;}
#footer .ftLogo {flex-shrink: 0;}
#footer .ftLogo img {width: 100%; display: block;}
#footer .ftInfo {flex: 1; gap: 2.4rem; align-items: center; justify-content: space-between;}
#footer .ftAddr {display: flex; flex-direction: column; gap: 0.8rem; font-size: 1.6rem; color: rgba(255,255,255,0.8); letter-spacing: -0.032rem; line-height: 1.4;}
#footer .ftAddr strong {font-weight: 800;}
#footer .ftSns {gap: 0.8rem; flex-shrink: 0;}
#footer .snsBtn {width: 4rem; height: 4rem;}
#footer .snsBtn img {display: block;}

@media all and (max-width: 880px) {
    #footer .footerInner {max-width: 100%; padding: 4rem 2rem 6rem; flex-direction: column; align-items: center; gap: 2.4rem;}
    #footer .ftLogo {width: 18.975rem;}
    #footer .ftInfo {flex-direction: column; align-items: center; gap: 2rem; width: 100%;}
    #footer .ftAddr {font-size: 1.4rem; align-items: center; text-align: center;}
    #footer .ftAddr strong {color: rgba(255,255,255,0.8); font-weight: 400;}
    #footer .ftSns {justify-content: center;}
}


/* WRAP */
#wrap {overflow: hidden; background: #fbfaf3}
#wrap .illust {}
#wrap .illust .illust_1 {}
#wrap .illust .illust_2 {left: 40rem; bottom: -1rem;}
#wrap .illust .illust_3 {right: 31rem; bottom: -1.5rem;}
#wrap .illust .illust_4 {right: 0;}

@media all and (max-width: 880px) {
    #wrap .illust {}
    #wrap .illust .illust_1 {width: 18rem;}
    #wrap .illust .illust_2 {width: 6.5rem; left: auto; right: 11.5rem;}
    #wrap .illust .illust_3 {width: 7.6rem; right: 2rem;}
    #wrap .illust .illust_4 {display: none;}
}

/* TOP SECTION */
#top {background: url('../img/top_bg.png') right center / auto 100% no-repeat; padding: 20rem 0 12rem;}
#top .inner {gap: 12rem; justify-content: center;}
#top .topTxt {flex-shrink: 0;}
#top .topTxt .titArea {display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 2.4rem;}
#top .topTxt .mainTit {display: block; font-size: 6rem; line-height: 1.36; letter-spacing: -0.12rem; background: linear-gradient(180deg, #2d493d 6.288%, #587965 131.75%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}
#top .topTxt .subTit {font-size: 6rem; line-height: 1.36; letter-spacing: -0.12rem; color: #59270f;}
#top .topTxt .desc {line-height: 1.4; color: #121212; letter-spacing: -0.04rem;}
#top .topTxt .desc strong {font-weight: 700;}
#top .topChar {flex-shrink: 0; width: 17.2rem;}
#top .topChar img {width: 100%; display: block;}

@media all and (max-width: 880px) {
    #top {padding: 10.4rem 0 6rem; background-size: auto 60%; background-position: right -22rem bottom;}
    #top .inner {max-width: 100%; padding: 0 2rem; flex-direction: column; gap: 2.4rem; align-items: center; justify-content: flex-start;}
    #top .topTxt {width: 100%;}
    #top .topTxt .titArea {gap: 0.4rem; margin-bottom: 2rem;}
    #top .topTxt .mainTit {font-size: 4rem; letter-spacing: -0.08rem;}
    #top .topTxt .subTit {font-size: 4rem; line-height: 1.2; letter-spacing: -0.08rem;}
    #top .topTxt .desc {font-size: 1.6rem; line-height: 1.5;}
    #top .topChar {width: 11.4rem; flex-shrink: 0; align-self: center;}
    #top .topChar img {width: 100%; height: 16rem; object-fit: contain;}
}

/* BOARD LIST SECTION */
#boardList {padding: 0 0 20rem;}

/* 검색 */
#boardList .boardSearch {justify-content: space-between; margin-bottom: 2.4rem; align-items: flex-end;}
#boardList .totalTxt {color: #121212; letter-spacing: -0.032rem; line-height: 1.4;}
#boardList .searchBox {border: 1px solid #ccc; border-radius: 0.4rem; overflow: hidden; width: 40.2rem; height: 5.2rem; padding: 0 1.2rem; gap: 0.8rem; background-color: #fff;}
#boardList .searchBox input {flex: 1; border: 0; outline: none; font-size: 1.6rem; color: #121212; background: transparent; font-family: inherit;}
#boardList .searchBox input::placeholder {color: #999;}
#boardList .searchBox button {width: 2.4rem; height: 2.4rem; flex-shrink: 0; background: none; border: none; cursor: pointer; padding: 0;}
#boardList .searchBox button img {width: 100%; display: block;}

/* 테이블 */
#boardList .boardTable {background-color: #fff;}

/* 테이블 컬럼 너비 */
#boardList .tbNo {width: 14.2rem; flex-shrink: 0;}
#boardList .tbTit {flex: 1; padding: 0 2.4rem;}
#boardList .tbFile {width: 14.2rem; flex-shrink: 0;}
#boardList .tbDate {width: 14.2rem; flex-shrink: 0;}
#boardList .tbView {width: 14.2rem; flex-shrink: 0;}
#boardList .tbMetaRow {display: contents;} /* PC: 각 셀이 독립 flex item으로 동작 */
#boardList .tbTitleRow {display: contents;} /* PC: 제목+첨부 각각 독립 flex item */

/* 테이블 헤더 */
#boardList .tbHead {background: #4a3e39; height: 5.2rem; letter-spacing: -0.036rem; line-height: 1.4; color: #fff;}
#boardList .tbHead .tbTit {padding: 0;}

/* 테이블 행 */
#boardList .tbRow {height: 8rem; border-bottom: 1px solid #ccc; color: #121212; letter-spacing: -0.036rem; line-height: 1.4; cursor: pointer; transition: background 0.15s;}
#boardList .tbRow:hover {background: #f0f0f0;}
#boardList .tbRow .tbTit a {color: #121212; text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#boardList .tbRow .tbTit a:visited {color: #121212;}
#boardList .tbRow:hover .tbTit a {font-weight: 700;}
#boardList .tbRow .tbDate {color: #363636;}
#boardList .tbRow .tbView {color: #363636;}
#boardList .tbRow .tbFile img {width: 2.4rem; display: block; margin: 0 auto;}

/* 공지 배지 */
#boardList .noticeBadge {display: inline-flex; align-items: center; justify-content: center; padding: 0.6rem 1.2rem; background: #2d493d; border-radius: 10rem; color: #fff;}

/* 페이징 */
#boardList .paging {margin-top: 8rem; gap: 2rem;}
#boardList .pageNums {gap: 0.8rem;}
#boardList .pageBtn {width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #ccc; border-radius: 0.4rem; cursor: pointer; padding: 0;}
#boardList .pageBtn img {width: 2rem; display: block;}
#boardList .pageNum {width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; border: 1px solid #ccc; border-radius: 0.4rem; background: #fff; font-size: 1.6rem; color: #212121; cursor: pointer; font-family: inherit; letter-spacing: -0.032rem;}
#boardList .pageNum.on {background: #2d493d; border-color: #2d493d; color: #fff; font-weight: 600;}

@media all and (max-width: 880px) {
    #boardList {padding: 0 0 20rem;}
    #boardList .inner {max-width: 100%; padding: 0 2rem;}
    #boardList .boardSearch {flex-direction: column; align-items: flex-start; gap: 1.2rem; margin-bottom: 2.4rem;}
    #boardList .searchBox input {width: 100%;}
    #boardList .searchBox button {flex-shrink: 0}
    #boardList .totalTxt {font-size: 1.4rem;}
    #boardList .searchWrap {width: 100%; height: 5.2rem;}
    #boardList .searchBox {width: 100%; height: 5.2rem;}

    #boardList .tbHead {display: none;}

    #boardList .boardTable {border-top: 1px solid #4a3e39; border-bottom: 1px solid #ccc; padding: 0 2rem;}
    #boardList .tbRow {height: auto; flex-direction: column; align-items: flex-start; padding: 2rem 0 2rem; gap: 0; border-top: 1px solid #ccc; border-bottom: none;}
    #boardList .tbRow:first-child {border-top: none;}

    #boardList .tbNo {width: auto; margin-bottom: 1.2rem; font-size: 1.6rem;}
    #boardList .tbNo .noticeBadge {font-size: 1.4rem; padding: 0.4rem 1rem;}

    #boardList .tbTit {width: auto; flex: 1; padding: 0; margin-bottom: 1.2rem; min-width: 0;}
    #boardList .tbRow .tbTit a {font-size: 1.6rem; white-space: normal; overflow: visible; text-overflow: unset; display: block; line-height: 1.5;}
    #boardList .tbFile {width: auto; flex-shrink: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 0.4rem; margin-bottom: 1.2rem;}
    #boardList .tbFile img {width: 2rem; margin: 0;}

    #boardList .tbTitleRow {display: flex; width: 100%; gap: 0.8rem; align-items: flex-start; margin-bottom: 1.2rem;}
    #boardList .tbTitleRow .tbTit {margin-bottom: 0;}
    #boardList .tbTitleRow .tbFile {margin-bottom: 0;}

    #boardList .tbMetaRow {display: flex; gap: 2.4rem; align-items: center;}
    #boardList .tbDate {width: auto; flex-shrink: 0; font-size: 1.4rem; color: #666;}
    #boardList .tbView {width: auto; flex-shrink: 0; font-size: 1.4rem; color: #666;}
    #boardList .tbDate::before {content: '작성일. '; color: #666;}
    #boardList .tbView::before {content: '조회수. '; color: #666;}

    #boardList .paging {margin-top: 4rem; gap: 1.8rem;}
    #boardList .pageBtn {width: 3.2rem; height: 3.2rem;}
    #boardList .pageBtn img {width: 1.6rem;}
    #boardList .pageNums {gap: 0.4rem;}
    #boardList .pageNum {width: 3.2rem; height: 3.2rem; font-size: 1.4rem;}
}

/* BOARD SECTION */
#board {padding-bottom: 38.5rem;}

/* 본문 */
#board .viewArea {padding-bottom: 6rem;}
#board .viewTitle {background: #fbfaf3;}
#board .viewTitle .line {width: 100%; height: 1px; background: #ccc;}
#board .viewTitle .titleTxt {padding: 7.2rem 0; display: flex; flex-direction: column; gap: 2.4rem; align-items: center;}
#board .viewTitle .tit {line-height: 1.4; letter-spacing: -0.072rem; color: #121212; text-align: center;}
#board .viewTitle .meta {gap: 1.2rem; color: #121212; letter-spacing: -0.032rem; line-height: 1.4; align-items: center;}
#board .viewTitle .meta > div {gap: 1.2rem; align-items: center;}
#board .viewTitle .divider {width: 1px; height: 1.6rem; background: #ccc;}
#board .viewCon {display: flex; flex-direction: column; gap: 5.2rem; padding-top: 4rem;}
#board .viewCon .conImg {width: 107.9rem;}
#board .viewCon .conImg img {width: 100%; display: block;}
#board .viewCon .conTxt {line-height: 1.4; color: #121212; letter-spacing: -0.04rem;}

/* 첨부파일 + 목록버튼 */
#board .viewBot {display: flex; flex-direction: column;}
#board .viewBot .fileArea {gap: 6rem; padding: 2.4rem; background: #f0f0f0; border-radius: 0.4rem; line-height: 1.4; letter-spacing: -0.032rem; color: #121212;}
#board .viewBot .fileArea + .fileArea {margin-top: 0.8rem}
#board .viewBot .fileArea .fileLabel {font-weight: 700;}
#board .viewBot .listBtn {display: flex; align-items: center; justify-content: center; width: fit-content; height: 5.2rem; padding: 0 2.4rem; background: #4a3e39; border: 1px solid #4a3e39; border-radius: 0.4rem; color: #fff; letter-spacing: -0.036rem; line-height: 1.4; cursor: pointer; font-family: inherit; transition: 0.2s; margin-top: 4rem}
#board .viewBot .listBtn:hover {background: #2D493D;}

/* 이전/다음글 */
#board .viewNavi {border-top: 1px solid #59270f; border-bottom: 1px solid #59270f; padding: 0 2.4rem; margin-top: 6rem;}
#board .viewNavi .naviRow {justify-content: space-between; padding: 2.4rem 0; line-height: 1.4; letter-spacing: -0.032rem; color: #121212; border-bottom: 1px solid #ccc;}
#board .viewNavi .naviRow:last-child {border-bottom: none;}
#board .viewNavi .naviInfo {gap: 6rem; flex: 1; align-items: center;}
#board .viewNavi .naviLabel {flex-shrink: 0; font-weight: 700; min-width: 6rem; display: inline-block;}
#board .viewNavi .naviDate {flex-shrink: 0;}

@media all and (max-width: 880px) {
    #board {padding-bottom: 18rem;}
    #board .inner {max-width: 100%; padding: 0 2rem;}
    #board .viewTitle .titleTxt {padding: 4rem 0; gap: 1.6rem;}
    #board .viewTitle .tit {font-size: 2.2rem; letter-spacing: -0.044rem;}
    #board .viewTitle .meta {font-size: 1.4rem; flex-wrap: wrap; gap: 0.8rem;}
    #board .viewCon {gap: 3.2rem; padding-top: 2.4rem;}
    #board .viewCon .conImg {width: 100%;}
    #board .viewCon .conTxt {font-size: 1.6rem;}
    #board .viewBot .fileArea {gap: 0.4rem; font-size: 1.4rem; flex-direction: column; padding: 1.6rem; align-items: baseline;}
    #board .viewBot .listBtn {font-size: 1.5rem;}
    #board .viewNavi .naviRow {padding: 1.6rem 0;}
    #board .viewNavi .naviInfo {gap: 2rem;}
    #board .viewNavi .naviLabel {font-size: 1.4rem; min-width: 5.3rem}
    #board .viewNavi .naviTxt {font-size: 1.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;}
    #board .viewNavi .naviDate {font-size: 1.4rem;}
}