@charset "utf-8";
/* [2026-10-14] 사진형 게시판(현장모니터링 77·언론뉴스 78·이벤트 84) PC 새 디자인
   head.sub.php 가 이 게시판 화면에서만 불러온다. 주소에 &bd=old 를 붙이면 옛 화면.
   글꼴 Pretendard(굵기 400/500/700), 색은 클린앤제이 파랑 #218fe0·초록 #5fb246. 화면 구조(HTML)는 그대로 */

body .total_board_list_wrap, body .total_board_view_wrap, body .pg_wrap {
  font-family:'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  letter-spacing:-0.2px; color:#1f2937;
}
body .total_board_list_wrap :is(p, div, a, span, li, h2, h3, dt, dd, em, strong),
body .total_board_view_wrap :is(p, div, a, span, li, h2, h3, dt, dd, em, strong),
body .pg_wrap :is(a, strong) { font-family:inherit; }
body .total_board_list_wrap, body .total_board_view_wrap { width:100% !important; box-sizing:border-box; }

/* ---------- 현장모니터링·언론뉴스 목록 (사진 + 글) ---------- */
body .board_webzine, body .board_webzine2 { margin:0; padding:0; border-top:2px solid #1f2937; list-style:none; }
body .board_webzine > li, body .board_webzine2 > li {
  display:grid; grid-template-columns:200px 1fr; grid-template-rows:auto 1fr; column-gap:24px;
  float:none; width:auto; height:auto; margin:0; padding:22px 4px; border:0; border-bottom:1px solid #eef0f3; background:none;
}
body .board_webzine > li > div[style*="clear"], body .board_webzine2 > li > div[style*="clear"] { display:none; }
body .board_webzine .wz_contimg, body .board_webzine2 .wz_contimg {
  grid-column:1; grid-row:1 / span 2; float:none; width:200px; height:138px; margin:0; padding:0; border:0;
  border-radius:12px; background:#eef2f6; overflow:hidden;
}
body .board_webzine .wz_contimg a, body .board_webzine2 .wz_contimg a { display:block; width:100%; height:100%; }
body .board_webzine .wz_contimg img, body .board_webzine2 .wz_contimg img {
  display:block; width:100%; height:100%; object-fit:cover; border:0; transition:transform .35s ease;
}
body .board_webzine > li:hover .wz_contimg img, body .board_webzine2 > li:hover .wz_contimg img { transform:scale(1.05); }
body .board_webzine .wz_contbox, body .board_webzine2 .wz_contbox { grid-column:2; grid-row:1; float:none; width:auto; margin:0; padding:4px 0 0; }
body .board_webzine .wz_contit, body .board_webzine2 .wz_contit { margin:0 0 8px; padding:0; }
body .board_webzine .wz_contit a, body .board_webzine2 .wz_contit a {
  display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  color:#111827; font-size:18px; font-weight:700; line-height:1.4; letter-spacing:-0.4px;
}
body .board_webzine > li:hover .wz_contit a, body .board_webzine2 > li:hover .wz_contit a { color:#218fe0; }
body .board_webzine .wz_info { align-self:start; margin-top:4px; }
body .board_webzine .wz_content { display:none; } /* 현장모니터링은 내용 칸이 주소와 같아 아래 지역 표시만 둔다 */
body .board_webzine2 .wz_content { height:auto !important; margin:0; padding:0; }
body .board_webzine2 .wz_content a {
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  color:#6b7280; font-size:14.5px; line-height:1.6;
}
body .board_webzine .wz_info, body .board_webzine2 .wz_info {
  grid-column:2; grid-row:2; align-self:end; display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;
  position:static; float:none; width:auto; margin:10px 0 2px; padding:0; border:0; list-style:none; text-align:left;
}
body .board_webzine .wz_info li, body .board_webzine2 .wz_info li {
  float:none; width:auto; margin:0; padding:0; border:0; background:none; color:#9ca3af; font-size:13.5px; line-height:1.5; text-align:left;
}
body .board_webzine .wz_info .wz_info_area {
  display:inline-flex; align-items:center; gap:4px; max-width:100%; padding:4px 10px; border-radius:14px;
  background:#e8f3fc; color:#1477c2; font-weight:500; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
body .board_webzine .wz_info .wz_info_area:before {
  content:""; flex:0 0 12px; width:12px; height:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22%231477c2%22%3E%3Cpath d=%22M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z%22/%3E%3C/svg%3E") no-repeat center/contain;
}
body .board_webzine2 .wz_info .sv_member { color:#6b7280; }

/* ---------- 이벤트 목록 (카드) ---------- */
body .board_category_tab { margin:0 0 22px; }
body #bo_cate { margin:0; padding:0; border:0; }
body #bo_cate h2 { position:absolute; font-size:0; line-height:0; overflow:hidden; }
body #bo_cate_ul { width:auto !important; display:inline-flex; gap:4px; margin:0; padding:4px; border:0; border-radius:12px; background:#f1f4f7; list-style:none; }
body #bo_cate_ul li { float:none; width:auto; margin:0; padding:0; border:0; }
body #bo_cate_ul a {
  display:block; float:none; width:auto; height:38px; margin:0; padding:0 22px; border:0 !important; border-radius:9px; background:none;
  color:#6b7280; font-size:14.5px; font-weight:500; line-height:38px; text-align:center; transition:background .15s, color .15s;
}
body #bo_cate_ul a:hover { color:#1f2937; }
body #bo_cate_ul a#bo_cate_on { background:#fff; color:#218fe0; font-weight:700; box-shadow:0 1px 4px rgba(15,59,95,.12); }
body .board_event { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:30px 20px; margin:0; padding:0; list-style:none; }
body .board_event:after { display:none; }
body .board_event > li { float:none; width:auto !important; height:auto; margin:0 !important; padding:0; border:0; }
body .board_event li a.photo {
  display:block; position:relative; aspect-ratio:237 / 263; border:0; border-radius:16px; background:#eef2f6; overflow:hidden;
  box-shadow:0 4px 14px rgba(15,59,95,.08); transition:transform .25s ease, box-shadow .25s ease;
}
body .board_event li a.photo img { display:block; width:100% !important; height:100% !important; object-fit:cover; border:0 !important; transition:transform .35s ease; }
body .board_event li:hover a.photo { transform:translateY(-4px); box-shadow:0 12px 26px rgba(15,59,95,.14); }
body .board_event li:hover a.photo img { transform:scale(1.04); }
body .board_event li:has(.event_02) a.photo img { filter:grayscale(.85); opacity:.7; }
body .board_event li > div { padding:0 2px; }
body .board_event li h2 { margin:14px 0 8px; padding:0; line-height:1.4; }
body .board_event li h2 a.subject {
  display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  color:#111827; font-size:16px; font-weight:700; letter-spacing:-0.3px;
}
body .board_event li:hover h2 a.subject { color:#218fe0; }
body .board_event li:has(.event_02) h2 a.subject { color:#6b7280; }
body .board_event li .event_01, body .board_event li .event_02 {
  display:inline-block; height:26px; margin:0; padding:0 10px; border:0 !important; border-radius:13px; font-size:12.5px; font-weight:700; line-height:26px;
}
body .board_event li .event_01 { background:#eaf6e4; color:#3f8a2a !important; }
body .board_event li .event_01:before { content:""; display:inline-block; width:6px; height:6px; margin:0 6px 1px 0; border-radius:50%; background:#5fb246; animation:cnjph_blink 1.6s ease-in-out infinite; }
body .board_event li .event_02 { background:#f1f3f5; color:#9ca3af !important; }
@keyframes cnjph_blink { 0%, 100% { opacity:1; } 50% { opacity:.25; } }

/* ---------- 페이지 번호 ---------- */
body .pg_wrap { padding:30px 0 0; margin:0 0 20px; text-align:center; }
body .pg_wrap .pg { display:inline-flex; flex-wrap:wrap; justify-content:center; gap:6px; }
body .pg_wrap .pg_page, body .pg_wrap .pg_current {
  display:inline-block; min-width:38px; height:38px; margin:0; padding:0 10px; border:1px solid #e5e8ec; border-radius:8px; box-sizing:border-box;
  background:#fff; color:#4b5563; font-size:14px; font-weight:500; line-height:36px; text-align:center;
}
body .pg_wrap a.pg_page:hover { border-color:#218fe0; color:#218fe0; }
body .pg_wrap .pg_current { border-color:#218fe0; background:#218fe0; color:#fff; font-weight:700; }

/* ---------- 글 보기 (현장모니터링·언론뉴스) ---------- */
body .total_board_view_wrap .tbl_view_head { margin:0 0 6px; padding:0; border:0; border-top:2px solid #1f2937; background:none; }
body .total_board_view_wrap .tbl_view_head .tit {
  margin:0; padding:26px 4px 12px; border:0; background:none; color:#111827; font-size:26px; font-weight:700; line-height:1.4; letter-spacing:-0.6px;
}
body .total_board_view_wrap .tbl_view_head .info { margin:0; padding:0 4px 18px; border:0; border-bottom:1px solid #e5e8ec; background:none; }
body .total_board_view_wrap .tbl_view_head .info dl { display:flex; flex-wrap:wrap; align-items:center; gap:6px 6px; margin:0; padding:0; }
body .total_board_view_wrap .tbl_view_head .info dt,
body .total_board_view_wrap .tbl_view_head .info dd { float:none; width:auto; margin:0; padding:0; border:0; background:none; font-size:14px; line-height:1.5; }
body .total_board_view_wrap .tbl_view_head .info dt { color:#9ca3af; }
body .total_board_view_wrap .tbl_view_head .info dt:before { display:none; }
body .total_board_view_wrap .tbl_view_head .info dd { margin-right:14px; color:#4b5563; font-weight:500; }
body .total_board_view_wrap .tbl_view_head .info dd[style*="0072c6"] { padding:3px 10px; border-radius:14px; background:#e8f3fc; color:#1477c2 !important; }
body .total_board_view_wrap #bo_v_con { padding:24px 0 10px; color:#1f2937; font-size:16px; line-height:1.85; word-break:keep-all; overflow-wrap:anywhere; }
body .total_board_view_wrap #bo_v_con img, body .total_board_view_wrap #bo_v_img img { max-width:100%; height:auto; border-radius:12px; }

/* ---------- 글 보기 (이벤트) — 제목을 맨 위로 ---------- */
body .total_board_view_wrap:has(> h3.subject) { display:flex; flex-direction:column; }
body .total_board_view_wrap > h3.subject, body .board_table > h3.subject {
  order:-2; font-family:inherit !important; margin:0; padding:26px 4px 12px; border:0; border-top:2px solid #1f2937; background:none;
  color:#111827; font-size:26px; font-weight:700; line-height:1.4; letter-spacing:-0.6px;
}
body .total_board_view_wrap > ul.write_info {
  order:-1; display:flex; flex-wrap:wrap; gap:6px 18px; height:auto; margin:0 0 6px; padding:0 4px 18px; border:0; border-bottom:1px solid #e5e8ec; list-style:none;
}
body .total_board_view_wrap > ul.write_info li { float:none; height:auto; margin:0; padding:0; border:0; background:none !important; color:#6b7280; font-family:inherit !important; font-size:14px !important; font-weight:500 !important; line-height:1.5 !important; }
body .total_board_view_wrap > ul.write_info .info_date:before { content:"등록일 "; color:#9ca3af; }
body .total_board_view_wrap > ul.write_info .info_hit:before { content:"조회 "; color:#9ca3af; }
body .total_board_view_wrap .view_image { padding:24px 0 0; text-align:center; }
body .total_board_view_wrap .view_image #bo_v_atc_title { position:absolute; font-size:0; line-height:0; overflow:hidden; }

/* ---------- 목록 버튼·이전글/다음글 ---------- */
body .total_board_view_wrap .view_btn { display:flex; justify-content:flex-end; margin:20px 0 14px; padding:0; border:0; }
body .total_board_view_wrap .view_btn:after { display:none; }
body .total_board_view_wrap .view_btn div { float:none !important; }
body .total_board_view_wrap .view_btn a {
  display:inline-block; height:42px; padding:0 22px; border:1px solid #d6dde5; border-radius:8px; background:#fff;
  color:#374151; font-size:14.5px; font-weight:500; line-height:40px; text-decoration:none;
}
body .total_board_view_wrap .view_btn a:hover { border-color:#218fe0; color:#218fe0; }
body .table-view-nav { margin:0 0 30px; padding:0; border:0; }
body .table-view-nav ul { margin:0; padding:0; border-top:1px solid #e5e8ec; list-style:none; }
body .table-view-nav li { margin:0; padding:0; border:0; border-bottom:1px solid #e5e8ec; }
body .table-view-nav li a {
  display:flex; align-items:center; gap:16px; height:auto; padding:16px 4px; border:0; background:none; color:#374151; text-decoration:none;
}
body .table-view-nav li a:hover { background:#f8fbfe; }
body .table-view-nav li a em { order:-1; flex:0 0 auto; position:static; margin:0; padding:3px 10px; border-radius:6px; background:#f1f3f5; color:#6b7280; font-size:12.5px; font-style:normal; font-weight:700; }
body .table-view-nav li a em img { display:none; }
body .table-view-nav li a em:after, body .table-view-nav li a em:before { display:none !important; }
body .table-view-nav li a .nav-title { padding:0 !important; }
body .table-view-nav li a .nav-title { flex:1; min-width:0; position:static; margin:0; padding:0; background:none; }
body .table-view-nav li a .nav-title span { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#1f2937; font-size:15px; font-weight:500; }
body .view_btn_ne_pr { margin:0 0 30px; padding:0; border:0; border-top:1px solid #e5e8ec; }
body .view_btn_ne_pr > div { display:flex; align-items:center; gap:16px; margin:0; padding:16px 4px; border:0; border-bottom:1px solid #e5e8ec; }
body .view_btn_ne_pr span { flex:0 0 auto; margin:0; padding:3px 10px; border:0; border-radius:6px; background:#f1f3f5; color:#6b7280; font-size:12.5px; font-weight:700; }
body .view_btn_ne_pr a { flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#1f2937; font-size:15px; font-weight:500; text-decoration:none; }
body .view_btn_ne_pr a:hover { color:#218fe0; }