/*
 * 명화 이야기(art_story) · 컬러 가이드(color_guide) 게시판 공용 — v1.0.5
 * 글 모양은 예전 페이지 CSS(juni-test-art-story.css / juni-test-color-guide.css)를 그대로 쓰고,
 * 이 파일에는 게시판에만 있는 부분(검색·관리 버튼·쪽 번호·빈 목록)만 넣습니다.
 */

/* ---------- 목록 머리: 검색 + 관리 버튼 ---------- */
.jbd-list-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:8px}
.jbd-list-heading > div > p{margin:0;color:#75669E;font-size:11px;font-weight:850;letter-spacing:.16em}
.jbd-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.jbd-search{display:flex;align-items:center;height:42px;border:1px solid rgba(0,0,0,.12);border-radius:999px;background:#fff;overflow:hidden}
.jbd-search input[type=search]{width:210px;height:100%;padding:0 6px 0 18px;border:0;background:transparent;font-size:14px;color:inherit;outline:0}
.jbd-search input[type=search]::-webkit-search-cancel-button{display:none}
.jbd-search button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:100%;border:0;background:transparent;color:#5c5a55;font-size:15px;cursor:pointer}
.jbd-search button:hover,.jbd-search:focus-within button{color:#e8370d}
.jbd-search:focus-within{border-color:#e8370d}

.jbd-admin{display:flex;gap:6px;flex-wrap:wrap}
.jbd-btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 15px;border:1px solid rgba(0,0,0,.14);border-radius:999px;background:#fff;color:#2a2a2a;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.jbd-btn:hover{border-color:#e8370d;color:#e8370d}
.jbd-btn--dark{border-color:#2a2a2a;background:#2a2a2a;color:#fff}
.jbd-btn--dark:hover{border-color:#e8370d;background:#e8370d;color:#fff}
.jbd-admin--view{position:relative;z-index:1;margin-top:22px}

.jbd-search-result{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px;padding:12px 16px;border-radius:12px;background:rgba(0,0,0,.035);color:#55524b;font-size:14px}
.jbd-search-result a{margin-left:auto;color:#2a2a2a;font-weight:700;text-decoration:none}
.jbd-search-result a:hover{color:#e8370d}

/* 조회수 (관리자에게만) — 컬러 사인과 같은 눈 아이콘 + 주황 배지 */
.jbd-hit{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:999px;background:#FDEBE5;color:#c2410c!important;font-size:12px;font-weight:700;letter-spacing:0;line-height:1.6;vertical-align:middle}
.jbd-hit .fa{font-size:12px}
.jt-art-row__date .jbd-hit{margin-top:6px}
.jt-guide-card__meta .jbd-hit{margin-left:8px}
.jt-art-article__meta .jbd-hit::before,.jt-guide-article__meta .jbd-hit::before{display:none!important;content:none!important}

/* 빈 목록 */
.jbd-empty{padding:70px 20px;text-align:center;color:#75726a}
.jbd-empty .fa{display:block;margin-bottom:14px;font-size:34px;color:#c9c3b8}
.jbd-empty p{margin:0;line-height:1.8}

/* 쪽 번호 (그누보드 기본 출력) */
.jbd-paging{margin-top:28px;text-align:center}
.jbd-paging .pg_wrap{float:none;display:inline-block;margin:0}
.jbd-paging .pg{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.jbd-paging .pg_page,.jbd-paging .pg_current{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;border:1px solid rgba(0,0,0,.12);border-radius:999px;background:#fff;color:#2a2a2a;font-size:14px;text-decoration:none;line-height:1}
.jbd-paging .pg_current{border-color:#2a2a2a;background:#2a2a2a;color:#fff;font-weight:700}
.jbd-paging a.pg_page:hover{border-color:#e8370d;color:#e8370d}

/* ---------- 명화 이야기 목록: 검색칸이 들어간 목차 머리 ---------- */
.jt-art-list__heading .jbd-tools{margin-left:auto}

/* ---------- 컬러 가이드 목록: 카드 사이 간격 (예전 목록과 같게) ---------- */
.jt-guide-list .jbd-list-heading{margin-bottom:30px}

/* ---------- 컬러 가이드 보기: 이전·다음 이야기 (명화 이야기와 같은 모양, 가이드 색) ---------- */
.jbd-pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 24px 20px}
.jbd-pager__item{min-width:0;padding:24px 26px;border:1px solid #E1E5EB;border-radius:22px;background:#F7F8FA;color:#242C37;text-decoration:none;transition:transform .18s ease,border-color .18s ease,background-color .18s ease}
.jbd-pager__item--next{text-align:right}
.jbd-pager__direction{display:block;margin-bottom:8px;color:#75669E;font-size:11px;font-weight:850;letter-spacing:.04em}
.jbd-pager__item strong{display:block;overflow:hidden;color:#242C37;font-size:15px;font-weight:760;line-height:1.55;letter-spacing:-.025em;text-overflow:ellipsis;white-space:nowrap}
.jbd-pager__item[href]:hover,.jbd-pager__item[href]:focus-visible{transform:translateY(-2px);border-color:#e8370d;background:#fff}
.jbd-pager__item[href]:hover .jbd-pager__direction{color:#e8370d}
.jbd-pager__item.is-disabled{opacity:.42;cursor:default}
@media (max-width:760px){.jbd-pager{grid-template-columns:1fr;gap:10px;margin:0 16px 16px}.jbd-pager__item{padding:20px 21px;border-radius:18px}.jbd-pager__item--next{text-align:left}.jbd-pager__item strong{white-space:normal}}

/* ---------- 본문 글꼴·크기: 컬러 사인 본문(.jcs-content)과 같게 (v1.0.2) ----------
 * 작품 정보·그림 설명·참고자료·POINT 같은 꾸밈 상자는 예전 모양 그대로 두고,
 * 읽는 글(문단·첫 문단·마지막 문단·소제목·목록)만 하나로 맞춥니다. */
.jbd-content .jt-art-article__content > p,
.jbd-content .jt-art-article__content section > p,
.jbd-content .jt-art-story-note p:not(.jt-art-story-note__label),
.jbd-content .jt-guide-article__content > p,
.jbd-content .jt-guide-article__content section > p,
.jbd-content .jt-guide-note p:not(.jt-guide-note__label),
.jbd-content .jt-art-article__content section > ul li,
.jbd-content .jt-art-article__content section > ol li,
.jbd-content .jt-guide-article__content section > ul li,
.jbd-content .jt-guide-article__content section > ol li{
    color:#30343f!important;
    font-family:Pretendard,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif!important;
    font-size:17px!important;
    font-weight:400;
    line-height:1.95!important;
    letter-spacing:-.01em!important;
    word-break:keep-all;
    overflow-wrap:break-word;
}
.jbd-content .jt-art-article__content > p,
.jbd-content .jt-art-article__content section > p,
.jbd-content .jt-guide-article__content > p,
.jbd-content .jt-guide-article__content section > p{margin-bottom:1.3em}
.jbd-content .jt-art-story-note p:last-child,.jbd-content .jt-guide-note p:last-child{margin-bottom:0}
/* 첫 문단·마지막 문단도 같은 크기 (마지막 문단 위 구분선은 그대로) */
.jbd-content .jt-art-article__lead,.jbd-content .jt-art-article__ending,.jbd-content .jt-guide-article__lead{font-size:17px!important;line-height:1.95!important}
/* 소제목 */
.jbd-content .jt-art-article__content section h2,
.jbd-content .jt-guide-article__content section h2,
.jbd-content .jt-art-article__content > h2,
.jbd-content .jt-guide-article__content > h2{
    color:#24262f;
    font-family:Pretendard,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
    font-size:25px;
    font-weight:800;
    line-height:1.45;
    letter-spacing:-.03em;
}
.jbd-content .jt-art-article__content h3,.jbd-content .jt-guide-article__content h3{font-family:Pretendard,"Noto Sans KR",sans-serif;font-size:21px;font-weight:800;line-height:1.45;color:#24262f}
.jbd-content .jt-art-article__content strong,.jbd-content .jt-guide-article__content strong{color:#24262f}
/* 본문 속 기울임(작품명 등)도 같은 글꼴로 */
.jbd-content .jt-art-article__content section > p em,
.jbd-content .jt-guide-article__content section > p em,
.jbd-content .jt-guide-article__content > p em{font-family:inherit}
@media (max-width:700px){
    .jbd-content .jt-art-article__content > p,
    .jbd-content .jt-art-article__content section > p,
    .jbd-content .jt-art-story-note p:not(.jt-art-story-note__label),
    .jbd-content .jt-guide-article__content > p,
    .jbd-content .jt-guide-article__content section > p,
    .jbd-content .jt-guide-note p:not(.jt-guide-note__label),
    .jbd-content .jt-art-article__content section > ul li,
    .jbd-content .jt-art-article__content section > ol li,
    .jbd-content .jt-guide-article__content section > ul li,
    .jbd-content .jt-guide-article__content section > ol li,
    .jbd-content .jt-art-article__lead,.jbd-content .jt-art-article__ending,.jbd-content .jt-guide-article__lead{font-size:16px!important;line-height:1.9!important}
    .jbd-content .jt-art-article__content section h2,
    .jbd-content .jt-guide-article__content section h2,
    .jbd-content .jt-art-article__content > h2,
    .jbd-content .jt-guide-article__content > h2{font-size:21px}
    .jbd-content .jt-art-article__content h3,.jbd-content .jt-guide-article__content h3{font-size:19px}
}

/* 닫는 꺾은괄호(〉): 예전 명조체에 맞춘 당김(-.45em)이 바뀐 글꼴에서는 글자와 겹침 → 당김 없앰 (컬러 사인과 같게) */
.jbd-content .jt-art-angle-close{margin-right:0!important}

/* 본문 속 그림: 아래 문단과 붙지 않게 위아래 간격 (예전 CSS는 아래 간격이 0) */
.jbd-content .jt-art-article__content .jt-art-figure,
.jbd-content .jt-guide-article__content figure{margin-top:36px;margin-bottom:36px}
/* 에디터로 넣은 그림(문단 안 이미지)도 위아래 간격 — 컬러 사인과 같게 */
.jbd-content .jt-art-article__content p > img,
.jbd-content .jt-guide-article__content p > img{display:block;max-width:100%;height:auto;margin:28px auto;border-radius:14px}
@media (max-width:700px){
    .jbd-content .jt-art-article__content .jt-art-figure,
    .jbd-content .jt-guide-article__content figure{margin-top:28px;margin-bottom:28px}
}

/* ---------- 보기: 첨부 이미지 ---------- */
.jbd-attach img{display:block;max-width:100%;height:auto;margin:0 auto}
.jbd-content img{max-width:100%;height:auto}

@media (max-width:760px){
    .jt-art-list__heading{flex-wrap:wrap}
    .jt-art-list__heading .jbd-tools,.jbd-tools{width:100%;margin-left:0}
    .jbd-search{flex:1;min-width:0}
    .jbd-search input[type=search]{width:100%;min-width:0}
}

/* 화면에는 숨기고 읽기 프로그램에만 (그누보드 기본 CSS를 쓰지 않는 화면이라 따로 넣음) */
.jbd-body .sound_only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}

/* 글 제목: 단어 중간에서 줄이 바뀌지 않게 */
.jbd-body .jt-art-article__header h1,
.jbd-body .jt-guide-article__header h1{word-break:keep-all;overflow-wrap:break-word}