/* ============================================================
비욘드치과병원 — Blogger(Contempo) 브랜드 스타일시트
적용 위치: 테마 > 맞춤설정 > 고급 > CSS 추가
전제      : 광고 미노출, 본문 마크업은 수정하지 않음, XML 편집 없음
============================================================
[서체]
맨 윗줄 @import는 반드시 파일 맨 위에 있어야 합니다.
붙여넣을 때 그 위에 다른 내용을 두지 마십시오.
본문 — Noto Serif KR 400/700. Google Fonts가 한글을 100여 조각으로
나눠 두고 그 글에 쓰인 조각만 보내므로 글당 100~200KB 선입니다.
제목 — 김해가야체 Bold 한 벌. 첫 방문 때만 받고 이후에는 캐시됩니다.
font-display: swap 이라 받는 동안에도 글은 바로 읽힙니다.
CDN이 응답하지 않으면 Noto Serif KR 700으로 자동 대체됩니다.
[테마 컬러 메타 (선택)]
모바일 브라우저 상단 바 색까지 맞추시려면 테마 > HTML 수정에서
theme-color 값을 #F5F6F2 로 바꾸시면 됩니다. 본문과는 무관합니다.
============================================================ */
/* ── 1. 브랜드 토큰 ───────────────────────────────────────── */
:root {
/* BI 가이드 3.1 — 브랜드 전용 컬러 (변형 금지) */
--bdh-navy:       #182645;
--bdh-peach:      #F6D3B9;
--bdh-offwhite:   #F5F6F2;
--bdh-lightblue:  #D3E4F1;
--bdh-purple:     #8E5E8F;
/* 텍스트 컬러 — Deep Navy 틴트. 가이드 8장 「텍스트 컬러 규칙」 확정안 */
--ink-900: #182645;   /* 제목·강조.   대비 15.1:1 */
--ink-700: #2A3753;   /* 본문 기본.   대비 12.3:1 */
--ink-500: #5C6879;   /* 캡션·메타.   대비  5.2:1 */
/* 면 */
--paper:      #F5F6F2;
--surface:    #FFFFFF;
--rule:       #D3E4F1;
--rule-soft:  #E4EDF2;
--zebra:      #EBF3F9;
/* 서체 — 제목은 김해가야체 Bold, 본문은 Noto Serif KR.
UI용(캡션·표·라벨)은 기기에 이미 있는 고딕이라 추가 전송량 0입니다. */
--font-head: "GimhaeGaya", "Noto Serif KR", "Noto Serif CJK KR",
"AppleMyungjo", "Nanum Myeongjo", serif;
--font-body: "Noto Serif KR", "Noto Serif CJK KR",
"AppleMyungjo", "Nanum Myeongjo", serif;
--font-ui:   -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
"Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
/* 본문 폭 — 모바일 기준 한 줄 25~30자, 데스크톱 38~42자 */
--measure: 44rem;
}
/* ── 2. 전역 ─────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body,
body.item-view,
.content,
.content-outer {
background: var(--paper) !important;
color: var(--ink-700) !important;
font-family: var(--font-body) !important;
}
/* 한글 조판 기본값 — 어절 중간에서 줄이 끊기지 않게 */
body, .post-body, .post-title, h1, h2, h3, h4, h5, h6,
li, td, th, dd, dt, figcaption, blockquote, summary {
word-break: keep-all;
overflow-wrap: break-word;
-webkit-font-smoothing: antialiased;
}
::selection { background: var(--bdh-peach); color: var(--ink-900); }
:focus-visible {
outline: 2px solid var(--bdh-navy);
outline-offset: 2px;
border-radius: 2px;
}
/* ── 3. 헤더 / 블로그 이름 ───────────────────────────────── */
/* Contempo는 어두운 사진 위에 흰 글씨를 얹는 구조입니다.
배경을 Off White로 바꾸는 이상 헤더 안의 모든 텍스트 색을 되짚어야 합니다. */
.centered-top-container,
.centered-top,
.centered-top-placeholder,
.header-widget,
.header-widget > div,
.blog-name,
#header,
header .widget,
.sticky .centered-top-container {
background-color: var(--paper) !important;
background-image: none !important;
box-shadow: none !important;
text-shadow: none !important;
}
.centered-top-container,
.sticky .centered-top-container {
border-bottom: 1px solid var(--rule) !important;
}
/* 블로그 이름 */
body .blog-name h1.title,
body .blog-name h1.title a,
body .header-widget h1,
body .header-widget h1 a,
body .widget.Header h1,
body .widget.Header h1 a {
font-family: var(--font-head) !important;
color: var(--ink-900) !important;
font-weight: 700;
letter-spacing: -0.02em;
text-shadow: none !important;
}
/* 블로그 설명 — 흰 글씨로 남는 지점 */
body .header-widget .description,
body .header-widget .description span,
body .blog-name .description,
body .blog-name .description span,
body .widget.Header .description,
body #header .description,
body .header-widget p {
font-family: var(--font-ui) !important;
color: var(--ink-500) !important;
font-size: 0.875rem !important;
line-height: 1.7 !important;
opacity: 1 !important;
text-shadow: none !important;
}
/* 상단 아이콘(메뉴·검색·공유)과 검색 입력창 */
body .centered-top .svg-icon-24,
body .centered-top-container svg,
body .centered-top-container .svg-icon-24,
body .search svg,
body .hamburger-menu svg,
body .svg-icon-24 { fill: var(--bdh-navy) !important; }
body .search input,
body .search-input input,
body .search .section input {
color: var(--ink-900) !important;
font-family: var(--font-ui) !important;
}
body .search input::placeholder { color: var(--ink-500) !important; }
body .search-expand-icon,
body .search-close { color: var(--ink-900) !important; }
/* ── 4. 글 컨테이너 ─────────────────────────────────────── */
.post-outer-container,
.post-outer,
.post,
.comments {
background: var(--paper) !important;
box-shadow: none !important;
border: 0 !important;
}
.post-body,
.post-title,
.post-footer,
.byline {
max-width: var(--measure);
margin-left: auto;
margin-right: auto;
}
/* ── 5. 글 제목과 메타 ──────────────────────────────────── */
.post-title,
.post-title.entry-title,
.post-title a {
font-family: var(--font-head) !important;
color: var(--ink-900) !important;
font-size: 1.625rem !important;   /* 26px */
line-height: 1.38 !important;
letter-spacing: -0.022em;
font-weight: 700;
text-wrap: balance;
margin: 0 0 0.6em !important;
}
.byline,
.byline a,
.post-footer,
.post-footer a,
.post-header .published {
font-family: var(--font-ui) !important;
color: var(--ink-500) !important;
font-size: 0.8125rem !important;  /* 13px */
letter-spacing: 0;
}
/* ── 6. 본문 타이포 ─────────────────────────────────────── */
.post-body,
.post-body p,
.post-body li,
.post-body dd {
font-family: var(--font-body) !important;
font-size: 1.0625rem !important;  /* 17px — 모바일 장문 기준 */
line-height: 1.85 !important;
letter-spacing: -0.008em;
color: var(--ink-700) !important;
}
.post-body p {
margin: 0 0 1.5em;
text-wrap: pretty;
}
.post-body strong,
.post-body b {
color: var(--ink-900);
font-weight: 700;
}
/* Blogger가 넣는 불필요한 빈 문단 정리 */
.post-body p:empty,
.post-body br + br { display: none; }
/* ── 7. 소제목 ──────────────────────────────────────────── */
.post-body h2,
.post-body h3,
.post-body h4 {
font-family: var(--font-head) !important;
color: var(--ink-900) !important;
font-weight: 700;
letter-spacing: -0.02em;
text-wrap: balance;
scroll-margin-top: 5.25rem;       /* 고정 헤더 아래로 앵커 정렬 */
}
/* 시그니처 — BI 가이드 5.1 Shape(세로 바)에서 파생한 섹션 마커 */
.post-body h2 {
position: relative;
font-size: 1.375rem !important;   /* 22px */
line-height: 1.45 !important;
margin: 2.9em 0 0.85em;
padding-left: 0.72em;
}
.post-body h2::before {
content: "";
position: absolute;
left: 0;
top: 0.32em;
bottom: 0.24em;
width: 3px;
background: var(--bdh-navy);
}
.post-body h3 {
font-size: 1.1875rem !important;  /* 19px */
line-height: 1.5 !important;
margin: 2.2em 0 0.7em;
}
.post-body h4 {
font-size: 1.0625rem !important;
margin: 1.8em 0 0.6em;
color: var(--ink-700) !important;
}
/* ── 8. 링크 ────────────────────────────────────────────── */
.post-body a:not(.separator a) {
color: var(--ink-900);
text-decoration: underline;
text-decoration-thickness: 2px;
text-decoration-color: rgba(24, 38, 69, 0.75);
text-underline-offset: 0.22em;
transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.post-body a:not(.separator a):hover,
.post-body a:not(.separator a):focus-visible {
color: var(--bdh-purple);
text-decoration-color: var(--bdh-purple);
}
/* 목차 블록 — 링크만으로 구성된 목록은 밑줄을 옅게 눌러 밀도를 낮춤.
투명으로 지우면 링크인지 알 수 없어져 옅게 남깁니다. */
.post-body ul li > a:only-child {
text-decoration-thickness: 1px;
text-decoration-color: rgba(24, 38, 69, 0.3);
}
.post-body ul li > a:only-child:hover {
text-decoration-color: var(--bdh-purple);
}
/* ── 9. 목록 ────────────────────────────────────────────── */
.post-body ul,
.post-body ol {
margin: 0 0 1.5em;
padding-left: 1.25em;
}
.post-body li { margin-bottom: 0.55em; }
.post-body li::marker { color: var(--bdh-purple); }
.post-body ul { list-style: none; padding-left: 0.2em; }
.post-body ul > li {
position: relative;
padding-left: 1.05em;
}
.post-body ul > li::before {
content: "";
position: absolute;
left: 0.1em;
top: 0.82em;
width: 4px;
height: 4px;
background: var(--bdh-purple);
}
/* ── 10. 표 ─────────────────────────────────────────────── */
.post-body table {
width: 100%;
border-collapse: collapse;
margin: 1.9em 0;
font-family: var(--font-ui);
font-size: 0.9375rem;             /* 15px */
line-height: 1.65;
border: 0;
}
.post-body th {
background: var(--bdh-navy);
color: var(--bdh-offwhite);
font-weight: 600;
text-align: left;
padding: 0.72em 0.85em;
letter-spacing: -0.005em;
vertical-align: middle;
border: 0;                        /* 이전 회색 테두리 규칙 무력화 */
}
.post-body td {
padding: 0.72em 0.85em;
border: 0;                        /* 이전 회색 테두리 규칙 무력화 */
border-bottom: 1px solid var(--rule);
color: var(--ink-700);
vertical-align: top;
}
.post-body tbody tr:nth-child(even) td { background: var(--zebra); }
.post-body tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
/* 첫 열이 날짜·단계 같은 키 값인 표에서 줄바꿈 방지 */
.post-body td:first-child { white-space: nowrap; }
/* ── 11. 이미지와 캡션 ──────────────────────────────────── */
.post-body img,
.post-body .separator img {
width: 100%;
height: auto;
border-radius: 2px;
display: block;
}
.post-body .separator {
margin: 2.4em 0 0.9em !important;
text-align: center;
clear: both;
}
.post-body .separator a {
margin: 0 !important;             /* Blogger 기본 margin-left:1em 제거 */
display: block;
}
/* 캡션 — 「*설명* 」 형태로 단독 이탤릭 문단인 경우 */
.post-body p > em:only-child,
.post-body p > i:only-child {
display: block;
font-family: var(--font-ui);
font-style: normal;
font-size: 0.8125rem;             /* 13px */
line-height: 1.6;
color: var(--ink-500);
text-align: center;
letter-spacing: 0;
margin-top: -0.4em;
}
/* ── 12. 인용과 접기 상자 ───────────────────────────────── */
.post-body blockquote {
margin: 1.9em 0;
padding: 0.15em 0 0.15em 1.15em;
border-left: 3px solid var(--bdh-peach);
color: var(--ink-700);
font-style: normal;
}
.post-body details {
margin: 1.9em 0;
padding: 1.1em 1.25em;
background: var(--surface);
border: 1px solid var(--rule);
border-radius: 2px;
}
.post-body details[open] { padding-bottom: 0.4em; }
/* summary 안에 strong 태그가 들어 있는 마크업 기준.
기존 회색 상자 규칙(background/border/padding)을 여기서 되돌립니다. */
.post-body summary {
display: flex;
align-items: baseline;
gap: 0.5em;
cursor: pointer;
font-family: var(--font-ui);
font-size: 0.9375rem;
font-weight: 600;
color: var(--ink-900);
list-style: none;
letter-spacing: -0.005em;
padding: 0;
margin: 0;
background: none;
border: 0;
border-radius: 0;
transition: color 0.15s ease;
}
.post-body summary:hover { background: none; color: var(--bdh-purple); }
.post-body summary strong { display: inline; font-weight: 600; color: inherit; }
/* 브라우저 기본 삼각형 제거 — 세 가지를 모두 걸어야 확실합니다 */
.post-body summary { list-style-type: none; }
.post-body summary::-webkit-details-marker { display: none; }
.post-body summary::marker { content: ""; font-size: 0; }
/* 기호는 반드시 유니코드 이스케이프로.
Blogger가 CSS를 저장할 때 비ASCII 문자를 &#숫자; 로 바꿔 버립니다. */
.post-body summary::before {
content: "\002B";                 /* + */
flex: none;
color: var(--bdh-purple);
font-weight: 400;
line-height: 1;
}
.post-body details[open] summary { margin-bottom: 0.9em; }
.post-body details[open] summary::before { content: "\2212"; }  /* − */
/* ── 13. 구분선 ─────────────────────────────────────────── */
.post-body hr {
border: 0;
border-top: 1px solid var(--rule);
margin: 3.2em auto;
width: 100%;
}
/* 연속된 hr은 하나로 */
.post-body hr + hr { display: none; }
/* ── 14. 라벨·사이드바·댓글·푸터 ────────────────────────── */
.post-labels a,
.post-footer .byline.post-labels a {
display: inline-block;
font-family: var(--font-ui);
font-size: 0.75rem;
line-height: 1;
padding: 0.45em 0.7em;
margin: 0 0.35em 0.35em 0;
background: var(--bdh-lightblue);
color: var(--ink-900) !important;
border-radius: 2px;
text-decoration: none !important;
}
.post-labels a:hover {
background: var(--bdh-navy);
color: var(--bdh-offwhite) !important;
}
.sidebar-container,
.sidebar-container .widget,
.footer-widgets,
.footer {
background: var(--paper) !important;
color: var(--ink-700) !important;
}
.sidebar-container .widget h3.title,
.widget > h3.title,
.comments h3,
.comments .title {
font-family: var(--font-head) !important;
color: var(--ink-900) !important;
font-size: 0.9375rem !important;
letter-spacing: 0.02em;
font-weight: 700;
}
.sidebar-container .widget a,
.footer-widgets a,
.comments a { color: var(--ink-700) !important; }
.blog-pager a,
.blog-pager .blog-pager-newer-link,
.blog-pager .blog-pager-older-link {
font-family: var(--font-ui) !important;
color: var(--ink-900) !important;
}
.footer .credits,
.credits,
.credits a {
font-family: var(--font-ui) !important;
font-size: 0.75rem !important;
color: var(--ink-500) !important;
}
/* Contempo 기본 구독 버튼·플로팅 버튼의 강조색 */
.subscribe-button,
.snippet-fade,
.jump-link a {
font-family: var(--font-ui) !important;
color: var(--ink-900) !important;
}
/* ── 15. 데스크톱 ───────────────────────────────────────── */
@media (min-width: 769px) {
.post-title,
.post-title.entry-title,
.post-title a { font-size: 2.125rem !important; line-height: 1.32 !important; }
.post-body,
.post-body p,
.post-body li,
.post-body dd { font-size: 1.125rem !important; line-height: 1.8 !important; }
.post-body h2 { font-size: 1.625rem !important; }
.post-body h3 { font-size: 1.3125rem !important; }
.post-body h4 { font-size: 1.125rem !important; }
.post-body table { font-size: 1rem; }
}
/* ── 16. 좁은 화면 보정 ─────────────────────────────────── */
@media (max-width: 480px) {
.post-body,
.post-title,
.post-footer,
.byline { padding-left: 4vw; padding-right: 4vw; }
/* 표는 가로 스크롤로 — 셀을 줄여 읽는 것보다 낫습니다 */
.post-body table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
font-size: 0.875rem;
}
.post-body table tbody,
.post-body table thead { display: table; width: 100%; min-width: 34rem; }
.post-body .separator {
margin-left: -4vw !important;
margin-right: -4vw !important;
}
.post-body img { border-radius: 0; }
}
/* ── 17. 접근성 ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { transition: none !important; animation: none !important; }
}