/* 섬세이 이전본: 블로그 글(/55/posts/…) 읽기 서식. site_fixes.py 가 블로그 글 페이지에만 연결한다.
   2026-10-02 사용자 요청: "블로그 양식을 읽기 쉽게, 더 예쁘게". 다른 페이지는 원본 서식 그대로 둔다.
   - 본문 폭 720px · 왼쪽 정렬 · 한글 본문 글꼴(Pretendard) 17px · 줄 간격 1.9
   - 글 안의 인라인 서식(가운데 정렬·16px)은 덮어쓴다. 사진은 본문 폭에 맞추고 둥글게
   - 방문자에게 필요 없는 관리자 단추(수정·지우기)는 숨긴다 */
body.sf-blog {
  --b-ink: #2f2c26;
  --b-body: #3d3931;
  --b-muted: #7a7264;
  --b-line: #d6d2c4;
  --b-soft: #efede5;
  --b-accent: #8a6f4d;
  --b-w: 720px;
}

/* 글 전체 틀 */
body.sf-blog .board_view { max-width: var(--b-w); margin: 0 auto !important; padding: 0 20px; box-sizing: content-box; }

/* 제목 */
body.sf-blog .board-title::before, body.sf-blog .board-title::after { display: none !important; }
body.sf-blog .board-title { border: 0 !important; padding: 0 !important; margin: 0 0 14px !important; }
body.sf-blog .board-title .view_tit {
  font-family: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', sans-serif !important;
  font-size: clamp(26px, 2.2vw + 14px, 34px) !important; line-height: 1.38 !important; font-weight: 700 !important;
  letter-spacing: -0.02em !important; color: var(--b-ink) !important; word-break: keep-all; text-wrap: balance; margin: 0 !important;
}
body.sf-blog .board_summary { border-top: 0 !important; border-bottom: 1px solid var(--b-line) !important; padding: 0 0 22px !important; margin: 0 0 40px !important; }
body.sf-blog .board_summary .author { font-size: 13px !important; color: var(--b-muted) !important; letter-spacing: .04em; }
body.sf-blog .board_summary .tools,
body.sf-blog .board_summary .author a[href="#"],
body.sf-blog .board_summary .author .dropdown { display: none !important; }

/* 본문: 글꼴은 전부 한글 본문 글꼴로, 크기·정렬은 '일반 문단'에만(강조 상자는 원래 디자인 유지) */
body.sf-blog .board_txt_area, body.sf-blog .board_txt_area div, body.sf-blog .board_txt_area p,
body.sf-blog .board_txt_area span, body.sf-blog .board_txt_area li {
  font-family: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', sans-serif !important;
}
body.sf-blog .board_txt_area { font-size: 17px !important; line-height: 1.9 !important; color: var(--b-body) !important; word-break: keep-all; overflow-wrap: anywhere; }
body.sf-blog .board_txt_area ._comment_body_ > div:not([style*="background"]),
body.sf-blog .board_txt_area ._comment_body_ > div:not([style*="background"]) > p:not([style*="background"]),
body.sf-blog .board_txt_area ._comment_body_ > p:not([style*="background"]) {
  font-size: 17px !important; line-height: 1.9 !important; text-align: left !important; color: var(--b-body) !important;
}
body.sf-blog .board_txt_area ._comment_body_ > div:not([style*="background"]) > p:not([style*="background"]),
body.sf-blog .board_txt_area ._comment_body_ > p:not([style*="background"]) { margin: 0 0 1.15em !important; padding: 0 !important; }
/* 문단 사이 빈 줄(height:14px 칸)은 원래 높이 그대로 */
body.sf-blog .board_txt_area div[style*="height:14px"] { font-size: 0 !important; line-height: 0 !important; height: 14px !important; }
/* 단계 제목(회색 배경 문단 → 왼쪽 갈색 선을 두른 소제목) */
body.sf-blog .board_txt_area p[style*="background"][style*="font-weight:700"] {
  background: transparent !important; padding: 2px 0 2px 16px !important; margin: 8px 0 22px !important;
  border-left: 3px solid var(--b-accent) !important; border-radius: 0 !important;
  font-size: 22px !important; line-height: 1.5 !important; text-align: left !important; color: var(--b-ink) !important;
  letter-spacing: -0.015em; word-break: keep-all; text-wrap: balance;
}
body.sf-blog .board_txt_area p[style*="background"][style*="font-weight:700"] img { margin-top: 20px !important; }
body.sf-blog .board_txt_area p[style*="background"][style*="font-weight:700"] br { display: none; }
/* 구분선(가운데 짧은 선)은 본문 폭 기준 가운데에 */
body.sf-blog .board_txt_area div[style*="height:1px"][style*="background"] { margin-left: auto !important; margin-right: auto !important; border-radius: 0 !important; }
body.sf-blog .board_txt_area p:empty { display: none; }
body.sf-blog .board_txt_area div[style*="padding:0 8px"] { padding: 0 !important; }
body.sf-blog .board_txt_area strong, body.sf-blog .board_txt_area b { color: var(--b-ink) !important; font-weight: 700 !important; }
body.sf-blog .board_txt_area a { color: var(--b-accent) !important; text-decoration: underline; text-underline-offset: 3px; }

/* 소제목(글 안의 h2·h3, 그리고 배경 상자로 만든 단계 제목) */
body.sf-blog .board_txt_area h1, body.sf-blog .board_txt_area h2, body.sf-blog .board_txt_area h3 {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important; color: var(--b-ink) !important;
  text-align: left !important; letter-spacing: -0.015em; word-break: keep-all; text-wrap: balance;
}
body.sf-blog .board_txt_area h2 { font-size: 23px !important; line-height: 1.45 !important; margin: 2.4em 0 .8em !important; font-weight: 700 !important; }
body.sf-blog .board_txt_area h3 { font-size: 19px !important; line-height: 1.5 !important; margin: 2em 0 .6em !important; font-weight: 700 !important; }

/* 글 맨 위 '의료진 칼럼' 머리 상자: 제목과 겹쳐 보이지 않게 얇게 */
body.sf-blog .board_txt_area ._comment_body_ > div:first-child[style*="border-le"] {
  background: transparent !important; padding: 0 0 0 16px !important; margin: 0 0 36px !important;
  border-left: 3px solid var(--b-accent) !important;
}
body.sf-blog .board_txt_area ._comment_body_ > div:first-child[style*="border-le"] * { font-size: 14px !important; line-height: 1.7 !important; color: var(--b-muted) !important; }

/* 배경색 상자(프로그램 구성·단계 제목 등) */
body.sf-blog .board_txt_area div[style*="background"] { border-radius: 10px; }
body.sf-blog .board_txt_area div[style*="background"][style*="text-align:center"],
body.sf-blog .board_txt_area div[style*="background"][style*="text-align: center"] { padding: 18px 22px !important; }

/* 사진 */
body.sf-blog .board_txt_area img {
  display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important;
  margin: 32px auto !important; border-radius: 8px;
}
body.sf-blog .board_txt_area figure { margin: 32px 0 !important; }
body.sf-blog .board_txt_area figcaption, body.sf-blog .board_txt_area img + span, body.sf-blog .board_txt_area img + em {
  display: block; font-size: 13px !important; color: var(--b-muted) !important; margin-top: -18px; text-align: center !important;
}

/* 구분선·인용·목록·표 */
body.sf-blog .board_txt_area hr { border: 0 !important; border-top: 1px solid var(--b-line) !important; margin: 48px 0 !important; width: 100% !important; }
body.sf-blog .board_txt_area blockquote {
  margin: 28px 0 !important; padding: 4px 0 4px 18px !important; border-left: 3px solid var(--b-line) !important; color: var(--b-muted) !important;
}
body.sf-blog .board_txt_area ul, body.sf-blog .board_txt_area ol { padding-left: 1.3em !important; margin: 0 0 1.2em !important; }
body.sf-blog .board_txt_area li { margin: .3em 0; }
body.sf-blog .board_txt_area table { width: 100% !important; border-collapse: collapse; margin: 28px 0 !important; font-size: 15px !important; }
body.sf-blog .board_txt_area th, body.sf-blog .board_txt_area td { border-bottom: 1px solid var(--b-line) !important; padding: 10px 8px !important; text-align: left !important; vertical-align: top; }
body.sf-blog .board_txt_area th { color: var(--b-ink) !important; font-weight: 700; background: var(--b-soft) !important; }

/* 글 아래: 다음 글·목록 */
body.sf-blog .comment_section { max-width: var(--b-w); margin: 56px auto 0 !important; border-top: 1px solid var(--b-line); padding-top: 20px !important; }
body.sf-blog .comment_section .comment-block { display: none !important; }
body.sf-blog .list_tap a { font-family: 'Pretendard Variable', Pretendard, sans-serif !important; font-size: 15px !important; color: var(--b-ink) !important; }
body.sf-blog .table_bottom .btn { border-radius: 999px !important; padding: 8px 22px !important; }

@media (max-width: 767px) {
  body.sf-blog .board_view { padding: 0 18px; }
  body.sf-blog .board_txt_area ._comment_body_ > div:not([style*="background"]),
  body.sf-blog .board_txt_area ._comment_body_ > div:not([style*="background"]) > p:not([style*="background"]),
  body.sf-blog .board_txt_area ._comment_body_ > p:not([style*="background"]) { font-size: 16.5px !important; line-height: 1.85 !important; }
  body.sf-blog .board_txt_area p[style*="background"][style*="font-weight:700"] { font-size: 20px !important; }
  body.sf-blog .board_txt_area img { margin: 24px auto !important; border-radius: 6px; }
  body.sf-blog .board_summary { margin-bottom: 28px !important; }
}

/* 소제목 안에 그림이 함께 든 경우(예: '프로그램 구성' 그림)는 선이 그림 높이만큼 길어지므로 선 없이 */
body.sf-blog .board_txt_area p[style*="background"][style*="font-weight:700"]:has(img) { border-left: 0 !important; padding-left: 0 !important; }

/* 영어 글 전체 목록(/55/en/) */
body.sf-blog .sf-en-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
body.sf-blog .sf-en-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none !important; color: inherit !important; }
body.sf-blog .sf-en-card img { width: 100% !important; aspect-ratio: 3 / 2; object-fit: cover; margin: 0 0 6px !important; border-radius: 8px; }
body.sf-blog .sf-en-card .sf-en-date { font-size: 12px !important; color: var(--b-muted) !important; }
body.sf-blog .sf-en-card strong { font-size: 17px !important; line-height: 1.4 !important; color: var(--b-ink) !important; }
body.sf-blog .sf-en-card .sf-en-ex { font-size: 14px !important; line-height: 1.6 !important; color: var(--b-muted) !important;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body.sf-blog .sf-en-card:hover strong, body.sf-blog .sf-en-card:focus-visible strong { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) { body.sf-blog .sf-en-list { grid-template-columns: 1fr; } }
body.sf-blog .sf-en-card .sf-en-date { margin-top: 0 !important; text-align: left !important; display: block; }