안에 를 넣으면 안 되는 건 아니지만 마크업을 납작하게 둔다). */
.cd-grid {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 22px;
margin: 0 0 46px;
}
.cd-card {
display: block; text-decoration: none; color: inherit;
border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
background: #fff; transition: box-shadow .18s, transform .14s, border-color .18s;
}
.cd-card:hover {
text-decoration: none; transform: translateY(-3px);
border-color: rgba(13,37,95,.22); box-shadow: 0 14px 30px rgba(13,14,17,.10);
}
.cd-thumb { display: block; position: relative; aspect-ratio: 16 / 10; background: var(--soft); overflow: hidden; }
.cd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.cd-card:hover .cd-thumb img { transform: scale(1.04); }
/* 사진이 없는 글 — 빈 회색 칸 대신 제목 머리글자를 크게 깐다 */
.cd-thumb.is-blank { display: grid; place-items: center; background: linear-gradient(135deg, #f4f6fb 0%, #e9edf6 100%); }
.cd-thumb.is-blank em {
font-style: normal; font-size: 46px; font-weight: 800; letter-spacing: -.04em;
color: rgba(13,37,95,.22);
}
.cd-body { display: block; padding: 20px 20px 22px; }
.cd-tags { display: block; margin-bottom: 9px; }
.cd-tags i {
font-style: normal; display: inline-block; margin: 0 6px 0 0; padding: 3px 9px;
border-radius: 999px; background: rgba(13,37,95,.06); color: var(--navy);
font-size: 11px; font-weight: 700; letter-spacing: -.01em;
}
.cd-title {
display: block; font-size: 17px; font-weight: 700; line-height: 1.45; color: var(--ink);
letter-spacing: -.03em; margin-bottom: 9px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cd-text {
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--sub);
}
.cd-date { display: block; margin-top: 14px; font-size: 12px; color: #9aa1b1; letter-spacing: .02em; }
.cd-empty {
margin: 0 0 46px; padding: 70px 20px; text-align: center;
border: 1px dashed var(--line); border-radius: 10px;
color: var(--sub); font-size: 15px; background: var(--soft);
}
@media (max-width: 1240px) { .cd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .cd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; } }
@media (max-width: 640px) {
.cd-grid { grid-template-columns: 1fr; gap: 20px; }
.cd-body { padding: 17px 17px 19px; }
.cd-title { font-size: 16px; }
}
/* ───────── 답변형 게시판 (질문과 답변) ─────────
질문 바로 아래 한 칸 들여쓴 답변 줄. 모바일에서 표가 카드로 접히므로
들여쓰기는 padding 이 아니라 배경·아이콘으로 구분한다. */
.board-table tr.answer-row > td { background: rgba(13,37,95,.028); }
.board-table tr.answer-row .num { color: rgba(13,37,95,.35); font-weight: 700; }
.ans-arrow { font-style: normal; }
.ans-tag {
display: inline-block; margin-right: 7px; padding: 2px 8px;
border-radius: 999px; background: var(--navy); color: #fff;
font-size: 11px; font-weight: 700; letter-spacing: -.01em; vertical-align: 1px;
}
.board-table tr.answer-row .subj a { color: var(--sub); }
.board-table tr.answer-row .subj a:hover { color: var(--navy); }
/* 글쓰기 화면 — 어느 질문에 다는 답변인지 */
.answer-to {
margin: 0 0 14px; padding: 11px 14px; border-radius: 8px;
background: var(--soft); border: 1px solid var(--line);
font-size: 14px; color: var(--sub);
}
.answer-to b { color: var(--ink); font-weight: 700; }
/* 게시판 상단 인트로 — 정적 페이지의 .pg-intro 를 그대로 쓰되 아래 여백만 줄인다.
.post-body 로 감싸는 이유는 .gr-lead·.gr-quote 규칙이 .post-body 아래에만 걸려 있어서다. */
.board-intro { margin: 0 0 30px; }
/* 리드 문장이 PC 에서 한 줄로 떨어지게 — 정적 페이지의 900px 제한을 풀고 컨테이너 폭을 다 쓴다 */
.board-intro .pg-intro { padding-bottom: 0; max-width: none; }
.post-body.board-intro .gr-lead { font-size: 19px; }
@media (max-width: 768px) {
.board-intro { margin-bottom: 22px; }
.post-body.board-intro .gr-lead { font-size: 17px; }
}
/* 게시판 글자 크기 — 표·카드가 본문보다 작아 보여 한 단계 올린다(2026-09-15 요청). */
.board-page .board-table th,
.board-page .board-table td { font-size: 15.5px; padding-top: 14px; padding-bottom: 14px; }
.board-page .board-table th { font-size: 13.5px; }
.board-page .board-table .subj a { font-size: 15.5px; }
.cd-title { font-size: 18.5px; }
.cd-text { font-size: 15px; }
.cd-date { font-size: 12.5px; }
.post-body.board-intro .gr-lead { font-size: 20px; }
@media (max-width: 768px) {
.board-page .board-table th,
.board-page .board-table td { font-size: 14.5px; }
.cd-title { font-size: 17px; }
.cd-text { font-size: 14.5px; }
}
/* ───────── 글쓰기 — 태그 고르기 ───────── */
.write-form .tag-field { margin-bottom: 8px; }
.tag-pick { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 6px; }
.tag-pick button {
padding: 6px 13px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--line); background: #fff; color: var(--sub);
font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: -.02em;
transition: background .15s, color .15s, border-color .15s;
}
.tag-pick button:hover { border-color: rgba(13,37,95,.3); color: var(--navy); }
.tag-pick button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.tag-hint { margin: 0 0 18px; font-size: 12.5px; color: #9aa1b1; }
/* ───────── 게시판 검색 — 필드와 버튼을 한 덩어리 알약으로 (2026-09-21) ─────────
FAQ 분류 탭(42px 알약)과 같은 높이·같은 곡률. 질문과 답변·수행사례·FAQ 세 게시판 공통.
main.css 의 36px 네모 규칙(.board-tools .search …)보다 특이도를 한 단계 올려 덮는다. */
.board-page .board-tools .search {
display: flex; align-items: center; gap: 0;
height: 42px; padding: 4px; box-sizing: border-box;
background: #fff; border: 1px solid var(--line); border-radius: 999px;
transition: border-color .18s, box-shadow .18s;
}
.board-page .board-tools .search:focus-within {
border-color: var(--navy); box-shadow: 0 0 0 3px rgba(13,37,95,.10);
}
.board-page .board-tools .search input {
-webkit-appearance: none; appearance: none;
flex: 1 1 auto; width: 230px; min-width: 0; height: 100%;
padding: 0 12px 0 36px; border: 0; border-radius: 999px; outline: 0;
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1b1' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 12px 50% / 16px no-repeat;
font-family: inherit; font-size: 14.5px; color: var(--ink);
}
.board-page .board-tools .search input::placeholder { color: #9aa1b1; }
.board-page .board-tools .search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.board-page .board-tools .search button {
flex: 0 0 auto; height: 100%; padding: 0 20px; border: 0; border-radius: 999px;
background: var(--navy); color: #fff; cursor: pointer;
font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: -.01em;
transition: background .18s;
}
.board-page .board-tools .search button:hover { background: var(--accent); }
/* 관리자 글쓰기 버튼도 같은 높이·곡률 */
.board-page .board-tools .btn-primary { height: 42px; padding: 0 20px; border-radius: 999px; }
/* FAQ — 분류 탭 오른쪽에 검색을 한 줄로. 탭이 많아 넘치면 검색이 다음 줄 오른쪽으로 내려간다 */
.faq-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; }
.faq-head .faq-cats { margin: 0; }
.faq-head .board-tools { margin-left: auto; }
@media (max-width: 768px) {
.board-page .board-tools { width: 100%; }
.board-page .board-tools .search { flex: 1 1 auto; }
.board-page .board-tools .search input { width: auto; }
.faq-head .board-tools { margin-left: 0; }
}