@charset "UTF-8";
/* ═══════════════════════════════════════════
   공지사항 / 이벤트 / 아티클 (edu_4.html)
   원본: prototype/design/index.html <style> 블록에서 분리
═══════════════════════════════════════════ */

/* [2026-09-08] 여기 있던 @media 3개를 파일 맨 아래 「반응형」 절로 옮겼다.
   이유는 그 절의 주석 참고 — 같은 블록 안에서도 살아 있는 줄과 죽은 줄이 섞여 있었다. */

/* ═══ 게시판 목록 페이지 ═══
   [2026-08-19] 범용 게시판(/user/bbs/{bbsCd}, #page-board)도 이 규칙을 쓴다.
   공지와 id 를 나눈 이유는 푸터의 showNotice() 가 goPage('page-notice') 라서
   다른 게시판 화면에 #page-notice 가 있으면 공지로 이동하지 않기 때문이다.
   배경은 공지와 같은 값을 공유해야 한다 — 회색 위에 흰 .board-wrap 을 얹어
   카드 경계를 만드는 구조라, 배경이 흰색이면 목록이 배경에 묻힌다. */

#page-notice, #page-event, #page-board {
  display: none; min-height: 70vh; background: var(--gray-bg);
}

/* ── 게시판 상세페이지 (공지 · 범용 공통) ── */

#page-notice-detail, #page-board-detail { display: none; min-height: 70vh; background: var(--gray-bg); }

.notice-detail-wrap {
  max-width: 900px; margin: 0 auto; padding: 48px 32px 100px;
}

.notice-detail-card {
  background: var(--tr-white); border: 1px solid var(--gray-line); border-radius: 10px; overflow: hidden;
}

.notice-detail-head { padding: 32px 34px 24px; border-bottom: 1px solid var(--gray-line); }

.notice-detail-title { font-size: 21px; font-weight: 900; color: var(--tr-graphite); line-height: 1.4; display: flex; align-items: flex-start; gap: 10px; }

.notice-detail-meta { font-size: 12.5px; color: var(--gray-mid); margin-top: 12px; display: flex; align-items: center; gap: 8px; }

.notice-detail-body {
  padding: 32px 34px; font-size: 14px; line-height: 1.85; color: var(--tr-graphite); white-space: pre-line; min-height: 160px;
}

.notice-detail-foot { padding: 22px 34px 30px; display: flex; justify-content: center; }

.notice-detail-list-btn {
  border: 1px solid var(--gray-line); border-radius: 100px; padding: 10px 32px;
  font-size: 13.5px; font-weight: 700; color: var(--tr-graphite); transition: all .2s;
}

.notice-detail-list-btn:hover { border-color: var(--tr-orange); color: var(--tr-orange); background: var(--tr-light-amber); }

/* 검색 */

.board-search {
  display: flex; gap: 8px; align-items: center;
}

.board-search input {
  height: 40px; border: 1.5px solid var(--gray-line); border-radius: 7px;
  padding: 0 14px; font-size: 13px; font-family: var(--sans);
  outline: none; width: 220px; transition: border-color .2s;
}

.board-search input:focus { border-color: var(--tr-orange); }

.board-search-btn {
  height: 40px; padding: 0 16px; background: var(--tr-orange); color: #fff;
  border-radius: 7px; font-size: 13px; font-weight: 700;
  font-family: var(--sans); border: none; cursor: pointer;
}

/* 카테고리 탭 */

.board-tabs {
  display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap;
}

.board-tab {
  padding: 7px 18px; border-radius: 100px; font-size: 13px; font-weight: 600;
  border: 1.5px solid var(--gray-line); background: #fff; color: var(--gray-mid);
  cursor: pointer; font-family: var(--sans); transition: all .2s;
}

/* 테이블 */

.board-table {
  width: 100%; border-collapse: collapse;
  background: var(--tr-white); border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}

.board-table thead tr {
  background: var(--tr-graphite); color: #fff;
}

.board-table th {
  padding: 14px 16px; font-size: 13px; font-weight: 700; text-align: center;
}

.board-table th:nth-child(2) { text-align: left; }

.board-table td {
  padding: 14px 16px; font-size: 13.5px; border-bottom: 1px solid var(--gray-line);
  color: var(--tr-graphite); text-align: center; vertical-align: middle;
}

.board-table td:nth-child(2) { text-align: left; }

.board-table td:nth-child(2):hover { color: var(--tr-orange); }

/* [2026-08-19] 제목뿐 아니라 행 전체를 눌러도 상세로 간다(board.js 의 위임 핸들러).
   커서를 행으로 올린다 — 빈 목록 행(.board-empty)에는 .board-row 가 없어 제외된다. */
.board-table tbody tr.board-row { cursor: pointer; }

.board-table tbody tr:last-child td { border-bottom: none; }

.board-table tbody tr:hover { background: var(--tr-light-amber); }

.board-tag {
  display: inline-block; padding: 2px 9px; border-radius: 100px;
  font-size: 11px; font-weight: 700; margin-right: 6px; vertical-align: middle;
}

.board-tag.event    { background: var(--tr-light-amber); color: var(--tr-dark-amber); }

.board-tag.new-tag  { background: #fdecea; color: #c0392b; }

.board-tag.update   { background: var(--tr-light-sky);   color: var(--tr-dark-sky); }

.board-new-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #c0392b; margin-left: 5px; vertical-align: middle;
}

.board-fix-icon { color: var(--tr-orange); font-size: 12px; }

/* [2026-08-19] .board-pg-btn 은 component.css 로 옮겼다.
   페이저(common.js renderPagerButtons)는 게시판 전용이 아니라 공용 컴포넌트다. */

/* [2026-08-18] 실데이터 연동으로 추가된 요소 (프로토타입 원본에는 없음) */

/* 목록 비어 있을 때 */

.board-empty { text-align: center; padding: 48px 0; color: var(--gray-mid); font-size: 14px; }

/* 목록 제목 옆 첨부 아이콘 */

.board-file-icon { font-size: 11px; color: var(--gray-mid); margin-left: 4px; }

/* 상세 첨부파일 */

.notice-detail-file { padding: 0 28px 4px; }

.notice-detail-file a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--tr-orange); text-decoration: underline;
  padding: 4px 0; margin-right: 14px;
}

.notice-detail-file i { font-size: 12px; }


/* ═══════════════════════════════════════════
   반응형  [2026-09-08]
   원래 이 파일 맨 위(7~26행)에 있던 @media 3개를 여기로 옮겼다.

   미디어쿼리는 특이도를 올려주지 않아서, 기준 규칙(.board-table·.board-search input)이
   그 «뒤» 에 있는 동안 같은 블록 안에서도 결과가 갈렸다 —
   · .board-table th:nth-child(4)(0,2,1) 는 기준 규칙(0,1,1)을 이겨 «동작»
   · .board-search input / .board-table 글자·여백(같은 특이도)은 «덮임»
   그래서 폰에서 열은 사라지는데 글자·여백은 PC 값이고 검색창은 220px 로 남아 있었다.
   값은 옮기기만 하고 바꾸지 않았다.

   ※ .board-wrap · .board-head · .board-crumb-inner · .board-pg-btn 은
     component.css 쪽 「게시판 반응형」 절이 담당한다(2026-08-20 에 같은 이유로 정리됨).
═══════════════════════════════════════════ */

@media (max-width: 1100px) {
.board-search input { width: 180px; }
}

@media (max-width: 860px) {
.board-table th:nth-child(4),
  .board-table td:nth-child(4) { display: none; }
.board-search input { width: 100%; }
.board-search { width: 100%; }
}

@media (max-width: 540px) {
.board-table { font-size: 12.5px; }
.board-table th, .board-table td { padding: 10px 8px; }
.board-table th:nth-child(3),
  .board-table td:nth-child(3),
  .board-table th:nth-child(5),
  .board-table td:nth-child(5) { display: none; }
}

/* ═══════════════════════════════════════════
   모바일 개선  [2026-09-08]
   시안 : 작업내역/시안/20260908_게시판_모바일_시안.html
═══════════════════════════════════════════ */

@media (max-width: 860px) {
.board-search-btn { flex-shrink: 0; }
.board-search input { flex: 1; min-width: 0; }
.board-head { gap: 12px; margin-bottom: 16px; }
.board-head-title { font-size: 19px; gap: 8px; }
.board-head-title i { font-size: 16px; }

/* 분류 탭(자료실·이벤트) — flex-wrap 이라 여러 줄이 된다 */
.board-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 14px; }
.board-tabs::-webkit-scrollbar { display: none; }
.board-tab { flex: 0 0 auto; white-space: nowrap; padding: 6px 14px; font-size: 12px; }

.board-table th { padding: 11px 10px; font-size: 12.5px; }
.board-table td { padding: 12px 10px; font-size: 13px; }

/* 상세 — 반응형 규칙이 아예 없어 폰에서도 래퍼 32px + 카드 34px 을 쓴다 */
.notice-detail-wrap { padding: 20px 16px 60px; }
.notice-detail-head { padding: 20px 16px 16px; }
.notice-detail-title { font-size: 17px; }
.notice-detail-meta { margin-top: 9px; font-size: 11.5px; flex-wrap: wrap; gap: 6px; }
.notice-detail-body { padding: 20px 16px; font-size: 13.5px; line-height: 1.8; min-height: 120px; }
/* 본문에 에디터 HTML 이 들어오는 게시판(자료실·이벤트)이 있다 */
.notice-detail-body img { max-width: 100%; height: auto; }
.notice-detail-body table { display: block; max-width: 100%; overflow-x: auto; }
.notice-detail-file { padding: 0 16px 4px; }
.notice-detail-file a { word-break: break-all; }
.notice-detail-foot { padding: 16px 16px 22px; }
/* [2026-09-13] <a> 라 인라인이면 width 가 안 먹고 좌우 여백 0 만 적용돼 글자에 붙은 알약이 됐다 */
.notice-detail-list-btn { display: block; width: 100%; padding: 12px 0; text-align: center; }
}

@media (max-width: 540px) {
/* 폰 목록 — 위 「반응형」 절이 번호(1)를 남기고 작성일(3)을 감춘다.
   무엇이 최신인지가 더 중요하므로 반대로 뒤집는다. */
.board-table th:nth-child(1), .board-table td:nth-child(1) { display: none; }
.board-table th:nth-child(3), .board-table td:nth-child(3) { display: table-cell; width: 78px; }
.board-table th { padding: 10px 8px; font-size: 12px; }
.board-table td { padding: 11px 8px; font-size: 12.5px; }
.board-table td:nth-child(2) { line-height: 1.45; }
.board-table td:nth-child(3) { color: var(--gray-mid); font-size: 11.5px; white-space: nowrap; }
.board-tag { font-size: 10px; padding: 2px 7px; margin-right: 4px; }
.notice-detail-wrap { padding: 16px 12px 48px; }
.notice-detail-title { font-size: 16px; }
}

/* [2026-09-13] 이벤트 목록 — 위 규칙들은 4번째 열(공지·자료실의 「조회」)을 감추는데,
   이벤트 게시판은 4번째 열이 「상태」라 진행중/종료를 폰에서 볼 수 없었다(QA D10).
   폰에서는 기간 대신 상태를 남긴다. th 에 인라인 width 가 있어 폭은 !important. */
@media (max-width: 860px) {
#page-event .board-table th:nth-child(4),
  #page-event .board-table td:nth-child(4) { display: table-cell; }
}

@media (max-width: 540px) {
#page-event .board-table th:nth-child(3),
  #page-event .board-table td:nth-child(3) { display: none; }
#page-event .board-table th:nth-child(4) { width: 64px !important; }
#page-event .board-table td:nth-child(4) { white-space: nowrap; }
}