@charset "utf-8";

/* BeyondCare 게시글 본문 스타일 (블로그·공지 등 긴 글)
 *
 * 게시글은 마크업만 DB 에 저장되고 <style> 태그는 저장 과정에서 사라진다.
 * 그래서 글에서 쓰는 스타일은 전부 이 파일에 둔다. 글쓴이는 클래스만 붙이면 된다.
 *
 * 뷰 스킨(sh_basic_res / gallery01_res)이 본문을 .bc_post 로 감싸므로
 * 모든 규칙을 .bc_post 하위로 한정한다 — 사이트 다른 영역에 새지 않게.
 *
 * 색은 사이트 브랜드 팔레트를 쓴다. 네이비 #14394E / 골드 #F2B33D.
 * 글쓴이가 인라인으로 색을 지정하면 이 파일이 무시되므로, 색은 클래스로만 준다.
 * (막대 '폭'처럼 글마다 달라지는 수치만 인라인 style 로 둔다)
 */

/* ── 본문 기본 ───────────────────────────────────────────── */
.bc_post{max-width:760px;margin:0 auto;padding:10px 0 40px;line-height:1.8;color:#333;word-break:keep-all;overflow-wrap:anywhere}
.bc_post h1{margin:0 0 24px;font-size:26px;font-weight:700;color:#14394E;line-height:1.4}
.bc_post h2{margin:34px 0 8px;padding-left:12px;border-left:4px solid #F2B33D;font-size:19px;font-weight:700;color:#14394E;line-height:1.5}
.bc_post h3{margin:20px 0 6px;font-size:16px;font-weight:700;color:#14394E}
.bc_post p{margin:0 0 14px}
.bc_post a{color:#14394E;text-decoration:underline;text-underline-offset:3px}

/* ── 이미지 + 캡션 ───────────────────────────────────────────
   <figure>/<figcaption> 은 게시글 저장 시 제거되므로 div 로 쓴다 */
.bc_post .post-img{margin:18px 0}
.bc_post .post-img img{display:block;width:100%;height:auto;border-radius:8px}
.bc_post .post-cap{margin-top:6px;font-size:12px;color:#6B7280}

/* ── 자주 묻는 질문 ──────────────────────────────────────── */
.bc_post .faq-item{margin-bottom:14px}
.bc_post .faq-q{font-weight:700;color:#14394E}

/* ── 상담 유도 박스 ──────────────────────────────────────── */
.bc_post .cta-box{margin-top:30px;padding:18px 20px;border:1px solid rgba(242,179,61,.55);border-radius:8px;background:rgba(242,179,61,.10)}
.bc_post .cta-box p{margin:0}

/* ── 통계 카드 ───────────────────────────────────────────── */
.bc_post .chart-card{margin:18px 0;padding:20px 22px;border:1px solid #e5e8eb;border-radius:8px;background:#f8fafb}
.bc_post .chart-card h4{margin:0 0 4px;font-size:15px;font-weight:700;color:#14394E}
.bc_post .chart-sub{margin-bottom:16px;font-size:12.5px;color:#6B7280}

/* 가로 막대 — 폭(width)만 글에서 인라인으로 주고, 색은 아래 클래스로 */
.bc_post .bar-row{margin-bottom:14px}
.bc_post .bar-label{display:flex;justify-content:space-between;gap:10px;margin-bottom:4px;font-size:13px;color:#333}
.bc_post .bar-track{height:22px;border-radius:5px;background:#eceff3;overflow:hidden}
.bc_post .bar-fill{display:flex;align-items:center;height:100%;border-radius:5px 0 0 5px}
.bc_post .bar-fill.navy{background:#14394E}
.bc_post .bar-fill.gold{background:#F2B33D}
.bc_post .bar-fill.gray{background:#aab3c0}

/* 누적 막대 + 범례 */
.bc_post .stack-track{display:flex;height:26px;border-radius:5px;overflow:hidden}
.bc_post .stack-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:8px;font-size:12.5px;color:#444}
.bc_post .stack-legend .dot{display:inline-block;width:9px;height:9px;margin-right:5px;border-radius:2px}
.bc_post .stack-legend .dot.navy{background:#14394E}
.bc_post .stack-legend .dot.gold{background:#F2B33D}
.bc_post .stack-legend .dot.gray{background:#aab3c0}

/* 주석·출처 — 원본은 #8b93a0(3.10:1) / #9aa1ad(2.60:1) 로 WCAG 4.5:1 미달이었다.
   #6B7280 은 4.83:1 로 통과하면서 회색 톤은 그대로 유지된다 */
.bc_post .chart-note{margin-top:14px;padding:10px 12px;border:1px solid rgba(242,179,61,.55);border-radius:6px;background:rgba(242,179,61,.10);font-size:12.5px;color:#555}
.bc_post .chart-source{margin-top:10px;font-size:11.5px;color:#6B7280}

/* ── 모바일 ─────────────────────────────────────────────── */
@media (max-width:768px){
.bc_post{padding:0 0 30px}
.bc_post h1{font-size:22px}
.bc_post h2{font-size:17px}
.bc_post h3{font-size:15px}
.bc_post .chart-card{padding:16px 14px}
.bc_post .bar-label{font-size:12.5px}
.bc_post .stack-legend{gap:6px 12px}
}