/* ==============================================================
   skin/board/notice/style.css
   공지사항 게시판 전용 스타일 - 공개 게시판입니다. (관리자만 글쓰기)
   list.skin.php / view.skin.php 에서 공통으로 사용합니다.
   ============================================================== */
.notice_page, .notice_page *{box-sizing:border-box}
.notice_page{max-width:1160px;margin:60px auto 120px;padding:0 20px;font-family:'Noto Sans KR',Arial,sans-serif;color:#333}
@media (max-width:600px){
/* 좌우 여백을 없애서 내용이 화면 폭에 꽉 차게 나오도록 합니다.
   (표/버튼 등 내부 요소들은 각자 자체 padding을 갖고 있어 글자가
   화면 끝에 바로 붙지는 않습니다) */
.notice_page{padding-left:0;padding-right:0}
}

/* ---------- 상단 타이틀 ---------- */
.notice_page .page_title{font-size:32px;font-weight:800;color:#1a2a4a;margin:0 0 60px;padding-bottom:45px;border-bottom:2px solid #0072BC;text-align:center}
@media (max-width:600px){
.notice_page .page_title{font-size:24px;margin:0 0 20px;padding-bottom:14px}
}

/* ---------- 목록 ---------- */
.notice_page .notice_top_btn_wrap{text-align:right;margin:0 0 16px}
.notice_page .notice_top_btn_wrap .notice_btn{min-width:0;height:40px;line-height:40px;padding:0 20px;font-size:14px}

.notice_page table.notice_list_table{width:100%;border-collapse:collapse;font-size:15px}
.notice_page table.notice_list_table th{background:#f4f8fb;padding:14px 10px;border-bottom:2px solid #dfe6ec;color:#1a2a4a;font-weight:700}
.notice_page table.notice_list_table td{padding:14px 10px;border-bottom:1px solid #eef1f4;text-align:center}
.notice_page table.notice_list_table td.subject{text-align:left}
.notice_page table.notice_list_table td.subject a{color:#1a2a4a;font-weight:600;text-decoration:none}
.notice_page table.notice_list_table td.subject a:hover{color:#0072BC;text-decoration:underline}
.notice_page table.notice_list_table td.subject .notice_mark{display:inline-block;color:#0072BC;font-weight:700;font-size:12px;border:1px solid #0072BC;border-radius:4px;padding:1px 6px;margin-right:6px;vertical-align:1px}
.notice_page table.notice_list_table td.empty{padding:60px 10px;color:#8a93a0}
/* 좁은 화면에서는 표 형태를 버리고, 글 하나가 카드 한 장이 되도록
   세로로 쌓아서 보여줍니다. (제목이 여러 줄이어도 다른 열과 겹치지 않음) */
@media (max-width:600px){
.notice_page table.notice_list_table, .notice_page table.notice_list_table tbody, .notice_page table.notice_list_table tr{display:block;width:100%}
.notice_page table.notice_list_table thead{display:none}
.notice_page table.notice_list_table tr{padding:16px 6px;border-bottom:1px solid #eef1f4}
.notice_page table.notice_list_table td{display:block;border:0;padding:2px 0;text-align:left}
.notice_page table.notice_list_table td:first-child{display:none}
.notice_page table.notice_list_table td.subject{font-size:15px;font-weight:600;line-height:1.5;padding-bottom:6px}
.notice_page table.notice_list_table td:nth-child(3),
.notice_page table.notice_list_table td:nth-child(4){display:inline-block;font-size:12px;color:#8a93a0}
.notice_page table.notice_list_table td:nth-child(4)::before{content:'·';margin:0 6px;color:#c9d0d6}
}

/* ---------- 검색 ---------- */
.notice_page .notice_search{margin-top:26px;text-align:center}
.notice_page .notice_search select{height:42px;border:1px solid #dedede;border-radius:4px 0 0 4px;padding:0 10px;font-size:14px;vertical-align:middle;border-right:0}
.notice_page .notice_search input[type=text]{height:42px;border:1px solid #dedede;padding:0 14px;font-size:14px;width:240px;vertical-align:middle}
.notice_page .notice_search button{height:42px;padding:0 20px;border:0;border-radius:0 4px 4px 0;background:linear-gradient(135deg,#0072BC,#00AEEF);color:#fff;font-weight:700;font-size:14px;cursor:pointer;vertical-align:middle}
@media (max-width:500px){
.notice_page .notice_search select, .notice_page .notice_search input[type=text]{display:block;width:100%;border-radius:4px;margin-bottom:8px;border-right:1px solid #dedede}
.notice_page .notice_search button{width:100%;border-radius:4px}
}

/* ---------- 상세 ---------- */
.notice_page table.notice_view_table{width:100%;border-collapse:collapse;margin:0 0 30px}
.notice_page table.notice_view_table th{background:#f4f8fb;border-bottom:2px solid #0072BC;padding:20px 24px;text-align:left}
.notice_page table.notice_view_table th.title{font-size:19px;font-weight:700;color:#1a2a4a;word-break:break-word}
.notice_page table.notice_view_table th.meta{font-size:13px;font-weight:400;color:#8a93a0;text-align:right;white-space:nowrap}
.notice_page table.notice_view_table td{padding:34px 24px;font-size:15px;line-height:1.9;color:#333;word-break:break-word;border-bottom:1px solid #eef1f4}
.notice_page table.notice_view_table td img{width:100% !important;max-width:100%;height:auto}
/* 옛 홈페이지에서 옮겨온 공지글 중에는 워드/한글 문서를 그대로 붙여넣어
   폭이 고정된 표(table)나 큰 이미지가 섞여 있는 경우가 있습니다. 그런
   요소가 있어도 화면 전체가 옆으로 밀리지 않도록, 내용 영역 안에서만
   가로 스크롤이 생기게 하고 표/이미지/영상 크기를 강제로 제한합니다.

   워드/한글에서 내보낸 HTML은 문단이나 표를 감싼 div/p 태그에 원본
   문서 폭(예: width:624px, width:50% 등)이 인라인 스타일로 박혀 있는
   경우가 많습니다. 이 값은 외부 CSS보다 우선순위가 높아서, 단순히
   max-width만 걸어서는 이 감싸는 태그가 원래 폭(반쪽 등)으로 계속
   좁게 나올 수 있습니다. 그래서 !important 로 강제로 100% 폭을
   채우도록 덮어씁니다. */
.notice_page table.notice_view_table td div,
.notice_page table.notice_view_table td p{width:100% !important;max-width:100% !important;box-sizing:border-box}
.notice_page table.notice_view_table td table{width:100% !important;max-width:100%}
.notice_page table.notice_view_table td iframe,
.notice_page table.notice_view_table td video{max-width:100%}
.notice_page table.notice_view_table td pre{white-space:pre-wrap;word-break:break-word}
/* 모바일: 제목/작성일/조회가 한 줄에 붙어있으면 제목 칸이 극도로 좁아져
   글자가 세로로 한 자씩 쌓이는 문제가 있어, 좁은 화면에서는 각 항목을
   세로로 쌓아 보여줍니다. */
@media (max-width:600px){
/* th/td 몇 개만 display:block으로 바꾸면 table/thead/tbody 는 여전히
   표 레이아웃(table-layout) 계산에 참여해서, colgroup에 지정된 150px/
   130px 같은 값 때문에 제목 칸이 100%를 못 채우고 좁게 나오는 문제가
   있었습니다. table부터 td까지 전부 예외 없이 block으로 바꿔야
   표 레이아웃 계산에서 완전히 빠져나와 진짜 100% 폭이 적용됩니다. */
.notice_page table.notice_view_table,
.notice_page table.notice_view_table thead,
.notice_page table.notice_view_table tbody,
.notice_page table.notice_view_table tr,
.notice_page table.notice_view_table th,
.notice_page table.notice_view_table td{display:block;width:100%;box-sizing:border-box}
.notice_page table.notice_view_table th{white-space:normal;border-bottom:1px solid #eef1f4}
.notice_page table.notice_view_table th.title{padding:18px 16px 14px;border-bottom:0}
.notice_page table.notice_view_table th.meta{text-align:left;padding:0 16px 14px;font-size:12px}
.notice_page table.notice_view_table th.meta:last-of-type{border-bottom:2px solid #0072BC;padding-bottom:16px}
/* 내용 칸도 표(table) 레이아웃에서 완전히 빼내서 일반 블록으로 만들어야
   overflow-x:auto 가 실제로 동작합니다 (표 안에 있으면 셀이 내용에 맞춰
   억지로 넓어지면서 화면 전체가 옆으로 밀릴 수 있습니다). */
.notice_page table.notice_view_table td{padding:22px 16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ---------- 작성/수정 (관리자 전용) ---------- */
.notice_page table.notice_write_table{width:100%;border-collapse:collapse;margin:0 0 30px;font-size:16px}
.notice_page table.notice_write_table th{background:#f4f8fb;color:#1a2a4a;font-weight:700;padding:14px 12px;border:1px solid #e2e7ec;width:150px;text-align:left}
.notice_page table.notice_write_table td{padding:12px 14px;border:1px solid #e2e7ec;text-align:left}
.notice_page input[type=text]{width:100%;height:46px;border:1px solid #dedede;background:#fff;padding:0 16px;border-radius:4px;font-size:15px;box-sizing:border-box}
.notice_page .write_div{margin-bottom:20px}
.notice_page #wr_content{width:100%;min-height:360px;border:1px solid #dedede;background:#fff;padding:16px;border-radius:4px;font-size:15px;line-height:1.7;box-sizing:border-box}

/* ---------- 버튼 ---------- */
.notice_page .notice_btn_wrap{text-align:center}
.notice_page .notice_btn{display:inline-block;min-width:150px;height:50px;line-height:50px;padding:0 26px;text-align:center;font-size:16px;font-weight:700;color:#fff !important;background:linear-gradient(135deg,#0072BC,#00AEEF);border:0;border-radius:8px;text-decoration:none;cursor:pointer}
.notice_page .notice_btn:hover{text-decoration:none;color:#fff}
.notice_page .notice_btn.outline{background:#fff;color:#0072BC !important;border:1px solid #0072BC}
.notice_page .notice_btn_wrap .notice_btn + .notice_btn{margin-left:12px}
@media (max-width:600px){
/* 버튼이 150px 최소폭 x 3개라 좁은 화면에서 한 줄에 못 들어가고
   줄바꿈되던 문제. flex로 폭을 균등하게 나눠서 항상 한 줄에 들어가게
   하고, 글자/여백도 줄여 화면이 작아도 넉넉히 들어갑니다. */
.notice_page .notice_btn_wrap{display:flex;gap:8px;padding:0 16px}
.notice_page .notice_btn_wrap .notice_btn{flex:1 1 0;min-width:0;height:44px;line-height:44px;padding:0 4px;font-size:14px}
.notice_page .notice_btn_wrap .notice_btn + .notice_btn{margin-left:0}
}

/* ---------- 페이지 이동(페이징) ---------- */
.notice_page .pg_wrap{margin:30px 0;text-align:center}
.notice_page .pg_wrap .pg{display:inline-block}
.notice_page .pg_page{display:inline-block;min-width:36px;height:36px;line-height:34px;padding:0 8px;margin:0 3px;border:1px solid #dedede;border-radius:4px;font-size:14px;color:#555;text-decoration:none;vertical-align:middle}
.notice_page .pg_page:hover{border-color:#0072BC;color:#0072BC;text-decoration:none}
.notice_page .pg_current{display:inline-block;min-width:36px;height:36px;line-height:34px;padding:0 8px;margin:0 3px;border-radius:4px;font-size:14px;font-weight:700;color:#fff;background:linear-gradient(135deg,#0072BC,#00AEEF);vertical-align:middle}

/* ---------- 첨부파일 (작성 폼) ---------- */
.notice_page .notice_file_wrap{margin-top:18px;border:1px solid #dde3ea;border-radius:8px;padding:16px 18px;background:#fafbfc}
.notice_page .notice_file_head{font-size:15px;font-weight:700;color:#1a2a4a;margin-bottom:10px}
.notice_page .notice_file_head span{font-size:12px;font-weight:400;color:#8a93a0}
.notice_page .notice_file_row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 0;border-top:1px dashed #e6ebf0}
.notice_page .notice_file_row:first-of-type{border-top:0}
.notice_page .notice_file_no{flex:0 0 64px;font-size:13px;color:#555}
.notice_page .notice_file_row input[type=file]{flex:1;min-width:200px;font-size:13px;height:auto;padding:6px 0;border:0;background:transparent}
.notice_page .notice_file_desc{flex:1;min-width:180px;height:36px;padding:0 10px;border:1px solid #d8dee3;border-radius:4px;font-size:13px}
.notice_page .notice_file_del{font-size:13px;color:#d62828;cursor:pointer}
.notice_page .notice_file_del input{width:auto;height:auto;vertical-align:middle;margin-right:4px}
/* ---------- 첨부파일 (상세) ---------- */
.notice_page .notice_file_list{margin:-6px 0 30px;padding:18px 24px;background:#f4f8fb;border:1px solid #e1e8ef;border-radius:8px}
.notice_page .notice_file_list h3{font-size:14px;font-weight:700;color:#0072BC;margin:0 0 10px}
.notice_page .notice_file_list ul{list-style:none;margin:0;padding:0}
.notice_page .notice_file_list li{padding:6px 0}
.notice_page .notice_file_list a{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:#1a2a4a;text-decoration:none}
.notice_page .notice_file_list a:hover strong{color:#0072BC;text-decoration:underline}
.notice_page .notice_file_list .file_meta{font-size:12px;color:#8a93a0}
.notice_page .notice_file_list .file_desc{flex-basis:100%;font-size:12px;color:#666;padding-left:26px}
/* ---------- 첨부 표시 (목록) ---------- */
.notice_page .file_mark{margin-left:6px;font-size:12px;color:#8a93a0}
@media (max-width:600px){
.notice_page .notice_file_row{gap:6px}
.notice_page .notice_file_no{flex-basis:100%}
.notice_page .notice_file_list{padding:14px 16px}
}



/* 공지사항 상세 본문 안 다운로드 버튼 */
.notice_page .notice_view_table td a.button {
    background-color: #22aef2;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    border: none;
    border-radius: 30px;
    padding: 12px 24px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s;
    margin: 0 auto;
}
.notice_page .notice_view_table td a.button:hover {
    background-color: #0072BC;
    color: #fff;
}