/* 동북권 ICT이노베이션스퀘어 게시판 - board.css (커뮤니티 · 게시판 페이지 전용, community.css 를 합침 2026-10-01) - 불러오는 순서 : common → layout → board - 게시판 공통 : 목록(날짜 타일 줄 목록 · 상단 고정 공지 · 내 글) / 게시글 보기(머리 · 본문 · 첨부파일 · 이전글 다음글) / 게시판 안 메뉴 · 쓰기 버튼 / 글쓰기 마무리 - 커뮤니티 : 하위 메뉴 · 자료실 분류 색 · 분야 색 · 포트폴리오 카드 · 홍보 · 언론 카드 · 행사 · 프로그램 · 설문 - 검색 · 분류는 공통 조건 찾기(common.css .filter-box), 입력 양식은 common.css .form-list */ /* ===================== 게시판 목록 : 날짜 타일 + 제목 + 정보 + 화살표 (줄 전체 클릭) ===================== - 상단 고정 공지 : li.is-notice (연파랑 줄) + 제목 앞 공지 (빨간 둥근 배지 + 핀) - 새 글(3일 이내) : li.is-new + - 첨부파일 : 첨부파일 있음 - 제목 링크의 ::after 가 줄 전체를 덮어 어디를 눌러도 이동 (링크 글자는 제목만이라 스크린리더가 짧게 읽음) - 긴 제목 : PC 1줄 말줄임 / 태블릿(1000px 이하)부터 2줄 말줄임 (전체 글자는 그대로 있어 스크린리더는 다 읽음) */ .bd-list{margin:0;padding:0;border-top:2px solid var(--ink);} .bl-item{position:relative;display:flex;align-items:center;gap:clamp(16px, 11.71px + 1.143vw, 30px);padding:clamp(16px, 14.16px + 0.49vw, 22px) clamp(4px, -1.51px + 1.469vw, 22px);border-bottom:1px solid #e3ecf7;transition:background .2s;} .bl-item:hover{background:#f8fbff;} .bl-date{ /* 날짜 타일 : 하늘색 바탕 (상단 고정 공지 줄은 파란 바탕 · 흰 글자) */ flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:80px;height:80px;margin:0; border:1px solid transparent;border-radius:22px;background:var(--sky);transition:background .25s,border-color .25s; } .bl-day{font-family:var(--font-title);font-size:clamp(22.5px, 20.20px + 0.612vw, 30px);line-height:1;color:var(--primary);} .bl-ym{margin-top:2px;font-size:12px;font-weight:600;color:var(--gray-700);} .bl-body{flex:1 1 auto;min-width:0;} .bl-title{display:flex;align-items:center;gap:8px;margin:0;} .bl-tt{ /* 제목 글자 묶음 (공지 배지 + 제목 링크) PC : flex 로 배지 · 제목 가운데 맞춤 + 제목 1줄 말줄임 / 1000px 이하 : 글자 흐름(둘째 줄이 배지 아래 왼쪽부터) + 2줄 말줄임 */ display:flex;align-items:center;flex:0 1 auto;min-width:0; font-size:clamp(16.5px, 16.04px + 0.122vw, 18px);font-weight:700;color:var(--ink); } .bl-title a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);text-underline-offset:4px;transition:color .2s;} .bl-tt > .bd-tag + a,.bl-tt > .bl-notice + a{margin-left:10px;} /* 태그 · 공지 배지 뒤 제목 : 왼쪽 10px 더 띄움 (사용자 지시) / 태그 없는 제목은 그대로 (아래 정보 줄과 맞춤) */ .bl-title a::after{content:'';position:absolute;inset:0;z-index:1;} /* 줄 전체 클릭 영역 */ .bl-title a:focus-visible{outline:none;} .bl-title a:focus-visible::after{outline:2px solid var(--primary);outline-offset:-2px;border-radius:6px;} .bl-item:hover .bl-title a{color:var(--primary);text-decoration:underline;} .bs-file{flex:none;width:18px;height:18px;} .bd-new{ /* 새 글 : 빨간 원 N (흰 글자 대비 5.16:1) */ flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%; background:var(--red);color:#fff;font-size:12px;font-weight:800;line-height:1; } .bl-meta{display:flex;flex-wrap:wrap;margin:9px 0 0;font-size:clamp(13px, 12.69px + 0.082vw, 14px);color:var(--gray-700);} .bl-meta > span + span{margin-left:12px;padding-left:12px;background:linear-gradient(#d7dce6, #d7dce6) left center/1px 11px no-repeat;} /* 사이 세로줄 (장식) */ .bl-go{ /* 오른쪽 화살표 원 (장식) : 마우스를 올리면 파랗게 채워지며 살짝 밀림 */ flex:none;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid #d7dce6;border-radius:50%;color:var(--gray-700); transition:background .25s,border-color .25s,color .25s,transform .25s var(--ease); } .bl-go::before{ content:'';width:16px;height:16px;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat; mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");mask-position:center;mask-size:contain;mask-repeat:no-repeat; } .bl-item:hover .bl-go{border-color:var(--primary);background:var(--primary);color:#fff;transform:translateX(4px);} /* 상단 고정 공지 : 연파랑 줄 + 흰 날짜 타일 + 제목 앞 빨간 "공지" 배지(핀) + 제목 더 굵게 */ .bl-item.is-notice{background:#f5f9fe;} .bl-item.is-notice:hover{background:#edf4fd;} .bl-item.is-notice .bl-date{border-color:var(--primary);background:var(--primary);} /* 상단 고정 공지 : 날짜 타일 파란 바탕 + 흰 글자 (사용자 지시 2026-10-06) */ .bl-item.is-notice .bl-day{color:#fff;} .bl-item.is-notice .bl-ym{color:rgba(255,255,255,.85);} /* 파란 바탕 대비 6.8:1 */ .bl-notice{ /* 공지 배지 : 빨간 둥근 바탕 + 흰 핀 (흰 글자 대비 5.16:1) - 제목 글자 줄 안에 들어감 */ flex:none;display:inline-flex;align-items:center;gap:4px;height:28px;margin-right:8px;padding:0 12px 0 9px;border-radius:999px; /* 폭 = 글자 길이대로 (분류 태그 폭 통일에서 제외 - 사용자 지시) */ background:var(--red);color:#fff;font-size:clamp(12px, 11.69px + 0.082vw, 13px);font-weight:800;line-height:1;white-space:nowrap; } .bl-notice::before{content:'';flex:none;width:14px;height:14px;background:url("../images/board/bd_pin_icon.svg") center/contain no-repeat;} /* 핀 (장식) */ .bl-item.is-notice .bl-title a{font-weight:800;} .bl-item.is-notice .bl-go{border-color:#c9d8ee;background:#fff;} .bl-item.is-notice:hover .bl-go{border-color:var(--primary);background:var(--primary);} .bl-empty{padding:clamp(48px, 40.65px + 1.959vw, 72px) 20px;border-bottom:1px solid #e3ecf7;text-align:center;font-size:clamp(14.5px, 14.04px + 0.122vw, 16px);color:var(--gray-700);} /* 검색 결과 없음 :
  • */ .bd-badge{ /* 공지 배지 (게시글 보기 머리) : 목록 공지 배지와 같은 빨강, .is-pin = 핀 아이콘 */ display:inline-flex;align-items:center;justify-content:center;gap:5px;height:30px;padding:0 13px;border-radius:999px; /* 폭 = 글자 길이대로 (분류 태그 폭 통일에서 제외) */ background:var(--red);color:#fff;font-size:clamp(12px, 11.69px + 0.082vw, 13px);font-weight:800;white-space:nowrap; } .bd-badge.is-pin{padding-left:10px;} .bd-badge.is-pin::before{content:'';flex:none;width:15px;height:15px;background:url("../images/board/bd_pin_icon.svg") center/contain no-repeat;} /* 분류 태그 (자료실 등) : 목록 제목 앞 · 보기 머리 - 공지 배지(빨간 알약)와 구분되게 모서리 덜 둥근 연한 바탕 (글자 대비 4.5:1 이상) 교육자료 (보라) / is-form 서식 (초록) / is-report 결과보고 (주황) - 연파랑 배경(제목 칸 · 공지 줄) 위에서도 구분되는 색 */ .bd-tag{ /* 가로 크기 통일 : 5글자(채용설명회 · 시설·장비)까지 같은 폭 + 글자 가운데 (사용자 지시) / 더 긴 글자(과정명 등)만 늘어남 */ flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:6.4em;height:28px;padding:0 11px;border-radius:8px;text-align:center; background:var(--primary-light);color:var(--primary);font-size:clamp(12px, 11.69px + 0.082vw, 13px);font-weight:700;line-height:1;white-space:nowrap; } .bl-tt .bd-tag{margin-right:8px;} .bv-tags .bd-tag{height:30px;padding:0 13px;} @media (max-width:1000px){ /* 태블릿부터 : 제목 2줄 말줄임 · 배지와 아이콘은 첫 줄에 맞춤 */ .bl-title{align-items:flex-start;} .bl-tt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere;} .bl-title a{overflow:visible;white-space:normal;} .bl-notice{height:24px;padding:0 10px 0 8px;vertical-align:top;} /* 배지 · 분류 태그 : 첫 줄 위에 맞춤 (높이 24 ≒ 줄 높이라 가운데가 글자 가운데) */ .bl-tt .bd-tag{height:24px;padding:0 9px;vertical-align:top;} .bl-title .bs-file{margin-top:4px;} .bl-title .bd-new{margin-top:3px;} } @media (max-width:768px){ .bl-go{display:none;} .bl-date{width:64px;height:64px;border-radius:18px;} .bl-day{font-size:clamp(23px, 21.94px + 0.282vw, 26.45px);} .bl-ym{font-size:12px;} } @media (max-width:640px){ .bl-item{align-items:flex-start;padding:clamp(16px, 14.16px + 0.49vw, 22px) 6px;} .bl-item.is-notice,.bl-item.is-mine{padding:clamp(16px, 14.16px + 0.49vw, 22px) 10px;} /* 배경 있는 줄(공지 고정 · 내 글)은 안쪽 여백 조금 더 */ .bl-title{gap:6px;} .bl-tt{font-size:clamp(16px, 15.54px + 0.122vw, 17.5px);} .bl-title .bs-file{width:17px;height:17px;} .bl-notice,.bl-tt .bd-tag{margin-right:6px;} .bl-meta{margin-top:7px;font-size:clamp(13px, 12.69px + 0.082vw, 14px);} .bl-meta{gap:3px 12px;} /* 모바일 : 세로줄 대신 간격 (줄이 바뀌어도 줄 앞에 세로줄이 남지 않게) */ .bl-meta > span + span{margin-left:0;padding-left:0;background:none;} .bl-meta .bl-hash{flex-basis:100%;} /* 기술 태그는 따로 한 줄 */ } /* ===================== 게시글 보기 (게시판 보기 공통) ===================== .bv-head(배지 · 제목 · 작성자/등록일/조회) → .bv-content(에디터 내용) → .bv-files(첨부파일) → .bv-nav(이전글 · 다음글) → 목록 버튼 */ .bv-head{border-top:2px solid var(--ink);border-bottom:1px solid #e3e9f1;} /* 게시판 머리 : 굵은 윗선 + 연한 아랫선 (온라인 강의 보기 .ov-head 와 같은 모양) */ .bv-tit{padding:clamp(26px, 22.94px + 0.816vw, 36px) clamp(16px, 12.33px + 0.98vw, 28px);border-bottom:1px solid #e3e9f1;background:#f5f9fe;} /* 배지 + 제목 : 연파랑 배경 (작성자 줄은 배경 없음) */ .bv-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px;} .bv-title{margin:0;font-size:clamp(21px, 18.86px + 0.571vw, 28px);font-weight:800;line-height:1.4;color:var(--ink);word-break:keep-all;overflow-wrap:anywhere;} .bv-meta{ /* 작성자(왼쪽) + 등록일 | 조회(오른쪽) : 한 줄에 다 안 들어가 오른쪽 묶음이 다음 줄로 내려가면 왼쪽부터 (사용자 지시 2026-11-02, 예전엔 오른쪽 끝) — space-between 이라 혼자 남은 줄은 왼쪽 */ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px; padding:clamp(13px, 11.78px + 0.327vw, 17px) clamp(16px, 12.33px + 0.98vw, 28px);font-size:clamp(13.5px, 13.19px + 0.082vw, 14.5px); } .bv-meta dl{display:flex;flex-wrap:wrap;align-items:center;margin:0 0 0 -19px;clip-path:inset(0 0 0 19px);} /* 왼쪽 19px(아래 구분선 13px + 칸 안 간격 6px)를 가림 → 줄 첫 칸 앞 세로줄은 안 보이고 글자는 예전 자리 */ .bv-meta dl > div{display:flex;align-items:center;gap:6px;} .bv-meta dl > div::before{content:'';flex:none;width:1px;height:11px;margin:0 6px;background:#cfd8e6;} /* 세로 구분선 (장식) : 모든 칸 앞 — 줄이 바뀌어도 줄 첫 칸은 위 가림으로 선 없이 시작 (사용자 지시 2026-11-02) */ .bv-meta dt{flex:none;font-weight:700;color:#363636;white-space:nowrap;} /* 항목 이름(제출 기간 등)은 쪼개지 않음 — 좁으면 값(dd)만 줄바꿈 */ .bv-meta dd{margin:0;color:var(--gray-700);} /* 본문 : 관리자 에디터로 쓴 내용이 그대로 들어감 - 문단 · 목록 · 굵게 · 링크 · 이미지 · 표 기본 모양 */ .bv-content{ padding:clamp(36px, 28.65px + 1.959vw, 60px) clamp(16px, 12.33px + 0.98vw, 28px) clamp(40px, 32.65px + 1.959vw, 64px); /* 왼쪽 여백 = 머리(제목 · 작성자 줄)와 같게 */ font-size:clamp(15.5px, 15.04px + 0.122vw, 17px);line-height:1.85;color:#2b3346;word-break:keep-all;overflow-wrap:anywhere; } .bv-content > :first-child{margin-top:0;} .bv-content > :last-child{margin-bottom:0;} .bv-content p{margin:0 0 1.1em;} .bv-content strong,.bv-content b{font-weight:800;color:var(--ink);} .bv-content a{color:var(--primary);font-weight:700;text-decoration:underline;text-underline-offset:3px;} .bv-content a:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:3px;} .bv-content ul,.bv-content ol{margin:0 0 1.2em;padding:0;} .bv-content ul li{position:relative;padding-left:18px;} .bv-content ul li::before{content:'';position:absolute;left:3px;top:.8em;width:6px;height:6px;border-radius:50%;background:var(--primary);} /* 목록 점 (장식) */ .bv-content ol{padding-left:1.5em;list-style:decimal;} .bv-content li + li{margin-top:.35em;} .bv-content img{display:block;max-width:100%;height:auto;border-radius:16px;} /* 이미지(포스터 등) : 왼쪽 정렬, 원래 크기까지 */ .bv-content p:has(> img){margin-bottom:1.6em;} .bv-content table{width:100%;margin:0 0 1.2em;border-collapse:collapse;border-top:2px solid var(--ink);font-size:.9em;} .bv-content th,.bv-content td{padding:10px 14px;border-bottom:1px solid #e3ecf7;text-align:left;} .bv-content th{background:#f4f9fe;font-weight:700;color:var(--ink);} /* 첨부파일 : 파일 하나 = 링크 하나 [확장자 · 파일명 · 크기 · 내려받기] (링크 글자에 파일명이 들어가 어느 파일인지 알 수 있음) */ .bv-files{overflow:hidden;border:1px solid #e3ecf7;border-radius:22px;background:#fff;} .bf-title{ /* 첨부파일 제목 줄 : 따로 빼서 연파랑 배경 */ display:flex;align-items:center;gap:8px;margin:0;padding:clamp(14px, 12.78px + 0.327vw, 18px) clamp(18px, 13.71px + 1.143vw, 32px); border-bottom:1px solid #e3ecf7;background:#f5f9fe;font-size:clamp(15.5px, 15.04px + 0.122vw, 17px);font-weight:800;color:var(--ink); } .bf-list{padding:clamp(4px, 2.78px + 0.327vw, 8px) clamp(18px, 13.71px + 1.143vw, 32px);} .bf-title::before{content:'';flex:none;width:19px;height:19px;background:url("../images/board/bd_file_icon02.svg") center/contain no-repeat;} /* 클립 (장식) */ .bf-count{color:var(--primary);} .bf-list li + li{border-top:1px dashed #dfe7f2;} .bf-link{display:flex;align-items:center;gap:12px;padding:14px 2px;} .bf-link:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:10px;} .bf-ext{ /* 확장자 : 흰 글자 대비 모두 4.5:1 이상 */ flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:50px;height:26px;padding:2px 8px 0;border-radius:7px; /* 위 2px : 대문자 글자가 위로 떠 보이지 않게 (글자 위아래 여백 같게) */ background:var(--gray-700);color:#fff;font-size:12px;font-weight:800;line-height:1;letter-spacing:.3px;text-align:center; } .bf-ext.is-pdf{background:var(--red);} .bf-ext.is-xls{background:#1d7a46;} .bf-ext.is-hwp{background:#1f5fbf;} .bf-ext.is-doc{background:#2b579a;} .bf-ext.is-zip{background:#7a4a14;} .bf-name{min-width:0;font-size:clamp(14px, 13.69px + 0.082vw, 15px);font-weight:600;color:var(--ink);overflow-wrap:anywhere;text-underline-offset:3px;transition:color .2s;} .bf-size{flex:none;font-size:clamp(12px, 11.69px + 0.082vw, 13px);color:var(--gray-500);} .bf-cnt{flex:none;font-size:clamp(12px, 11.69px + 0.082vw, 13px);color:var(--gray-500);} /* 내려받은 횟수 (자료실) */ .bf-size + .bf-cnt{position:relative;padding-left:11px;} .bf-size + .bf-cnt::before{content:'';position:absolute;left:0;top:50%;width:1px;height:10px;margin-top:-5px;background:#d7dce6;} /* 사이 세로줄 (장식) */ .bf-down{ flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;margin-left:auto;padding:0 15px;border-radius:999px; background:var(--primary-light);color:var(--primary);font-size:clamp(13px, 12.69px + 0.082vw, 14px);font-weight:700;transition:background .2s,color .2s; } .bf-down::before{ /* 내려받기 화살표 (장식, 글자색을 따라감) */ content:'';flex:none;width:15px;height:15px;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.5v8M4.5 7.5 8 11l3.5-3.5M3 13.5h10'/%3E%3C/svg%3E") center/contain no-repeat; mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.5v8M4.5 7.5 8 11l3.5-3.5M3 13.5h10'/%3E%3C/svg%3E");mask-position:center;mask-size:contain;mask-repeat:no-repeat; } .bf-link:hover .bf-name{color:var(--primary);text-decoration:underline;} .bf-link:hover .bf-down{background:var(--primary);color:#fff;} /* 이전글 · 다음글 :