716 lines
15 KiB
CSS
716 lines
15 KiB
CSS
@charset "utf-8";
|
|
|
|
/* ==========================================================================
|
|
BOARD.CSS
|
|
일반 게시판 / 갤러리 게시판 공통 스타일
|
|
|
|
브레이크포인트
|
|
├─ PC 1025px ~ : 번호 | 제목 | 날짜 가로 한 줄
|
|
├─ 태블릿 769~1024px : 간격·폰트 소폭 축소
|
|
└─ 모바일 ~768px : 번호+날짜 위 / 제목 아래 카드형 전환
|
|
└ 소형 ~480px : 패딩·검색·페이지네이션 추가 조정
|
|
|
|
─────────────────────────────────────────────────────
|
|
SECTION 1. 게시판 탭
|
|
SECTION 2. 검색 영역
|
|
SECTION 3. 리스트 (ul/li)
|
|
SECTION 4. 페이지네이션
|
|
SECTION 5. 갤러리 게시판 (추후 사용)
|
|
SECTION 6. 반응형 — 태블릿 (≤1024px)
|
|
SECTION 7. 반응형 — 모바일 카드형 (≤768px)
|
|
SECTION 8. 반응형 — 소형 모바일 (≤480px)
|
|
========================================================================== */
|
|
|
|
|
|
|
|
|
|
/* ==========================================================================
|
|
SECTION 2. 검색 영역
|
|
========================================================================== */
|
|
.board-search-wrap {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.board-search {
|
|
display: flex;
|
|
align-items: stretch;
|
|
width: 100%;
|
|
max-width: 55rem;
|
|
height: 6rem;
|
|
border: 1px solid var(--bd-color);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background: #fff;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
/* 셀렉트박스 */
|
|
.search-select-wrap {
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
width: 14rem;
|
|
border-right: 1px solid var(--bd-color);
|
|
background: #fff;
|
|
}
|
|
|
|
.search-select {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0 3.2rem 0 1.6rem;
|
|
font-size: 1.5rem;
|
|
font-weight: 500;
|
|
color: var(--dark);
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.select-arrow {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 0.8rem;
|
|
transform: translateY(-50%);
|
|
pointer-events: none;
|
|
color: var(--cont2);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.select-arrow .material-symbols-outlined {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
/* 검색 인풋 */
|
|
.search-input-wrap {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0; /* flex 자식 overflow 방지 */
|
|
}
|
|
|
|
.search-input {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0 1.6rem;
|
|
font-size: 1.5rem;
|
|
color: var(--dark);
|
|
border: none;
|
|
outline: none;
|
|
background: transparent;
|
|
}
|
|
|
|
.search-input::placeholder {
|
|
color: #aab3bf;
|
|
}
|
|
|
|
/* 검색 버튼 */
|
|
.search-btn {
|
|
flex-shrink: 0;
|
|
width: 6rem;
|
|
background: var(--navy);
|
|
border: none;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.search-btn:hover { background: #0b85e0; }
|
|
.search-btn:active { background: #0972c4; }
|
|
|
|
.search-btn .material-symbols-outlined {
|
|
font-size: 3.2rem;
|
|
}
|
|
|
|
|
|
.board-list-wrap {
|
|
width: 100%;
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
/* ul 초기화 */
|
|
.board-list {
|
|
border-top: 2px solid var(--navy);
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* ── 개별 행 ── */
|
|
.board-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0;
|
|
padding: 0;
|
|
border-bottom: 1px solid var(--bd-color);
|
|
transition: background 0.15s;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.board-item:hover {
|
|
background: var(--bg);
|
|
}
|
|
|
|
/* 번호 */
|
|
.item-num {
|
|
flex-shrink: 0;
|
|
width: 10rem;
|
|
padding: 2rem 1.2rem;
|
|
text-align: center;
|
|
font-size: 1.5rem;
|
|
font-weight: 500;
|
|
color: #C2D1E0;
|
|
font-family: var(--e-font);
|
|
}
|
|
|
|
/* 제목 */
|
|
.item-title {
|
|
flex: 1;
|
|
min-width: 0; /* 텍스트 overflow 처리를 위해 필수 */
|
|
display: block;
|
|
padding: 2.4rem 1.2rem;
|
|
font-size: 1.8rem;
|
|
font-weight: 400;
|
|
color: var(--dark);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
transition: color 0.15s;
|
|
}
|
|
|
|
.item-title:hover {
|
|
color: var(--primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 날짜 */
|
|
.item-date {
|
|
flex-shrink: 0;
|
|
width: 14rem;
|
|
padding: 2rem 1.2rem;
|
|
text-align: center;
|
|
font-size: 1.6rem;
|
|
color: #C2D1E0;
|
|
white-space: nowrap;
|
|
font-family: var(--e-font);
|
|
}
|
|
|
|
/* 데이터 없음 */
|
|
.board-item.board-empty {
|
|
display: block;
|
|
text-align: center;
|
|
padding: 7rem 0;
|
|
color: #aab3bf;
|
|
font-size: 1.6rem;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.board-item.board-empty:hover {
|
|
background: transparent;
|
|
}
|
|
|
|
|
|
/* ==========================================================================
|
|
SECTION 4. 페이지네이션
|
|
========================================================================== */
|
|
.board-pagination-wrap {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 1rem 0 2rem;
|
|
}
|
|
|
|
.board-pagination {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
/* 화살표 버튼 */
|
|
.pg-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 3.6rem;
|
|
height: 3.6rem;
|
|
background: #fff;
|
|
border: 0;
|
|
border-radius: 4px;
|
|
color: #000;
|
|
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
|
cursor: pointer;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.pg-btn .material-symbols-outlined { font-size: 1.8rem; }
|
|
|
|
.pg-btn:hover {
|
|
background: var(--bg);
|
|
border-color: var(--primary);
|
|
color: var(--primary);
|
|
}
|
|
|
|
.pg-btn:disabled,
|
|
.pg-btn.disabled {
|
|
opacity: 0.35;
|
|
cursor: default;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 숫자 목록 */
|
|
.pg-list {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
margin: 0 0.4rem;
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
/* 숫자 버튼 */
|
|
.pg-num {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 3.6rem;
|
|
height: 3.6rem;
|
|
background: #fff;
|
|
border: 0;
|
|
border-radius: 4px;
|
|
font-size: 1.6rem;
|
|
font-weight: 500;
|
|
color: var(--cont2);
|
|
font-family: var(--e-font);
|
|
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
|
cursor: pointer;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.pg-num:hover {
|
|
background: var(--bg);
|
|
border-color: var(--primary);
|
|
color: var(--primary);
|
|
}
|
|
|
|
.pg-num.active {
|
|
background: var(--primary);
|
|
border-color: var(--primary);
|
|
color: #fff;
|
|
font-weight: 700;
|
|
cursor: default;
|
|
}
|
|
|
|
|
|
/* ==========================================================================
|
|
SECTION 5. 갤러리 게시판 (추후 사용)
|
|
board_gallery.html 에서 .board-gallery-wrap 사용
|
|
========================================================================== */
|
|
|
|
/* 갤러리 그리드 */
|
|
.board-gallery-wrap {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 3rem;
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
/* 갤러리 카드 */
|
|
.gallery-card {
|
|
display: block;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
margin-bottom: 2rem;
|
|
transition: box-shadow 0.2s, transform 0.2s;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
/* 썸네일 */
|
|
.gallery-card__thumb {
|
|
position: relative;
|
|
width: 100%;
|
|
padding-top: 70%; /* 3:2 비율 */
|
|
background: var(--bg);
|
|
overflow: hidden;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.gallery-card__thumb:hover {
|
|
box-shadow: 0 8px 24px rgba(19, 152, 248, 0.12);
|
|
}
|
|
|
|
.gallery-card__thumb img {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.gallery-card:hover .gallery-card__thumb img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.gallery-card__thumb .no-img {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #c5cdd6;
|
|
}
|
|
|
|
|
|
/* 카드 내용 */
|
|
.gallery-card__body {
|
|
padding: 1.4rem 0 1.6rem;
|
|
}
|
|
|
|
.gallery-card__title {
|
|
font-size: 2rem;
|
|
font-weight: 600;
|
|
color: var(--dark);
|
|
line-height: 1.5;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
margin-bottom: 0.8rem;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
SECTION 6. 반응형 — 태블릿 (≤1024px)
|
|
========================================================================== */
|
|
@media (max-width: 1024px) {
|
|
|
|
/* 번호 컬럼 살짝 좁힘 */
|
|
.item-num { width: 8rem; }
|
|
.item-date { width: 12rem; }
|
|
|
|
/* 갤러리 3열 */
|
|
.board-gallery-wrap {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
/* ── 검색 ── */
|
|
.board-search {
|
|
max-width: 100%;
|
|
height: 4.8rem;
|
|
}
|
|
|
|
.search-select-wrap { width: 10rem; }
|
|
|
|
.search-select {
|
|
font-size: 1.4rem;
|
|
padding-left: 1.2rem;
|
|
}
|
|
|
|
.search-input {
|
|
font-size: 1.4rem;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
/* ── 리스트 카드형 전환 ── */
|
|
.board-list-wrap {
|
|
border-top-width: 2px;
|
|
}
|
|
|
|
.item-num {
|
|
order: 1;
|
|
flex: none;
|
|
width: 5rem;
|
|
padding: 1.6rem 0.4rem;
|
|
font-size: 1.3rem;
|
|
text-align: center;
|
|
}
|
|
.item-num::after { display: none; }
|
|
|
|
.item-title {
|
|
order: 2;
|
|
flex: 1;
|
|
min-width: 0;
|
|
width: 0; /* overflow 강제 제한 */
|
|
padding: 1.6rem 0.6rem;
|
|
font-size: 1.5rem;
|
|
font-weight: 400;
|
|
white-space: nowrap; /* 한 줄 */
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.item-date {
|
|
order: 3;
|
|
flex: none;
|
|
width: 9rem;
|
|
padding: 1.6rem 0.4rem;
|
|
font-size: 1.2rem;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
|
|
/* 갤러리 2열 */
|
|
.board-gallery-wrap {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 1.6rem;
|
|
}
|
|
.gallery-card {
|
|
margin-bottom:0;
|
|
}
|
|
.gallery-card__title {
|
|
font-size:1.5rem;
|
|
}
|
|
|
|
|
|
/* 페이지네이션 버튼 크기 */
|
|
.pg-btn,
|
|
.pg-num {
|
|
width: 3.8rem;
|
|
height: 3.8rem;
|
|
}
|
|
}
|
|
|
|
|
|
/* ==========================================================================
|
|
SECTION 8. 반응형 — 소형 모바일 (≤480px)
|
|
========================================================================== */
|
|
@media (max-width: 480px) {
|
|
|
|
/* 검색 */
|
|
.board-search-wrap { margin-bottom: 2.4rem; }
|
|
|
|
.board-search { height: 4.4rem; }
|
|
|
|
.search-select-wrap { width: 9rem; }
|
|
|
|
.search-select { font-size: 1.35rem; }
|
|
|
|
.search-input {
|
|
font-size: 1.35rem;
|
|
padding: 0 0.8rem;
|
|
}
|
|
|
|
.search-btn { width: 5rem; }
|
|
|
|
/* 리스트 */
|
|
.board-item { padding: 1.4rem 1.2rem; }
|
|
|
|
.item-title { font-size: 1.45rem; }
|
|
|
|
/* 갤러리 2열 유지, 간격 축소 */
|
|
.board-gallery-wrap { gap: 1.2rem; }
|
|
|
|
|
|
/* 페이지네이션 — 첫/마지막 버튼 숨김 */
|
|
.pg-btn.pg-first,
|
|
.pg-btn.pg-last {
|
|
display: none;
|
|
}
|
|
|
|
.pg-btn,
|
|
.pg-num {
|
|
width: 3.4rem;
|
|
height: 3.4rem;
|
|
font-size: 1.35rem;
|
|
}
|
|
|
|
.pg-btn .material-symbols-outlined { font-size: 1.6rem; }
|
|
}
|
|
|
|
|
|
/* =============================================
|
|
게시판 뷰 — 추가 스타일
|
|
============================================= */
|
|
|
|
/* 뷰 헤더 */
|
|
.board-view-head {
|
|
border-top: 2px solid var(--color-primary, #1a3c6e);
|
|
border-bottom: 1px solid #ddd;
|
|
padding: 22px 4px;
|
|
}
|
|
.board-view-head .view-title {
|
|
font-size: 2.4rem;
|
|
font-weight: 600;
|
|
color: #111;
|
|
line-height: 1.5;
|
|
margin-bottom: 14px;
|
|
}
|
|
.board-view-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.board-view-meta .meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: 1.6rem;
|
|
color: #888;
|
|
}
|
|
.board-view-meta .meta-item .material-symbols-outlined {
|
|
font-size: 1.6rem;
|
|
color: #aaa;
|
|
}
|
|
|
|
/* 본문 */
|
|
.board-view-body {
|
|
min-height: 280px;
|
|
padding: 40px 4px;
|
|
border-bottom: 1px solid #ddd;
|
|
font-size: 1.6rem;
|
|
color: #333;
|
|
line-height: 1.9;
|
|
}
|
|
.board-view-body img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
margin: 16px 0;
|
|
}
|
|
|
|
/* 첨부파일 */
|
|
.board-view-attach {
|
|
padding: 2.4rem 0.2rem;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
.board-view-attach .attach-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 1.6rem;
|
|
font-weight: 600;
|
|
color: #444;
|
|
margin-bottom: 10px;
|
|
}
|
|
.board-view-attach .attach-label .material-symbols-outlined {
|
|
font-size: 1.4rem;
|
|
color: #777;
|
|
}
|
|
.attach-file-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
.attach-file-list li a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 1.4rem;
|
|
color: #555;
|
|
text-decoration: none;
|
|
transition: color 0.2s;
|
|
}
|
|
.attach-file-list li a:hover {
|
|
color: var(--color-primary, #1a3c6e);
|
|
text-decoration: underline;
|
|
}
|
|
.attach-file-list li a .material-symbols-outlined {
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
/* 이전글 / 다음글 */
|
|
.board-view-nav {
|
|
margin-top: 0;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
.board-view-nav .nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 14px 4px;
|
|
border-top: 1px solid #eee;
|
|
}
|
|
.board-view-nav .nav-item:first-child {
|
|
border-top: none;
|
|
}
|
|
.board-view-nav .nav-label {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: 1.6rem;
|
|
font-weight: 600;
|
|
color: #999;
|
|
min-width: 54px;
|
|
}
|
|
.board-view-nav .nav-label .material-symbols-outlined {
|
|
font-size: 1.6rem;
|
|
}
|
|
.board-view-nav .nav-link {
|
|
flex: 1;
|
|
font-size: 1.6rem;
|
|
color: #444;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
transition: color 0.2s;
|
|
}
|
|
.board-view-nav .nav-link:hover {
|
|
color: var(--color-primary, #1a3c6e);
|
|
}
|
|
.board-view-nav .nav-link.disabled {
|
|
color: #bbb;
|
|
pointer-events: none;
|
|
cursor: default;
|
|
}
|
|
.board-view-nav .nav-date {
|
|
flex-shrink: 0;
|
|
font-size: 1.4rem;
|
|
color: #aaa;
|
|
}
|
|
|
|
/* 버튼 영역 */
|
|
.board-view-btn-wrap {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 36px;
|
|
}
|
|
.btn-list {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 10px 30px;
|
|
background: #fff;
|
|
border: 1px solid #bbb;
|
|
border-radius: 4px;
|
|
font-size: 1.6rem;
|
|
color: #555;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: background 0.2s, border-color 0.2s, color 0.2s;
|
|
}
|
|
.btn-list:hover {
|
|
background: var(--color-primary, #1a3c6e);
|
|
border-color: var(--color-primary, #1a3c6e);
|
|
color: #fff;
|
|
}
|
|
.btn-list .material-symbols-outlined {
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
/* 반응형 */
|
|
@media (max-width: 768px) {
|
|
.board-view-head .view-title {
|
|
font-size: 1.8rem;
|
|
}
|
|
.board-view-nav .nav-date {
|
|
display: none;
|
|
}
|
|
} |