/* 더치유의원 건강정보 블로그 — 스타일
   토큰 근거: www.thechiu-clinic.co.kr 실측(2026-11-06, 계산된 스타일).
   실측이 아닌 값은 HYPOTHESIS로 표시. */

:root {
  /* 색 */
  --bg: #F6F3EE;          /* 실측: body 배경 rgb(246,243,238) */
  --surface: #FFFFFF;     /* 실측: 흰 면 */
  --ink: #1F1F1F;         /* 실측: 메뉴·제목 글자 rgb(31,31,31) */
  --ink-body: #404040;    /* 실측: 센터 페이지 긴 본문 rgb(64,64,64), 2026-11-06 /pigmentedlesions */
  --muted: #767676;       /* 실측: 보조 글자 rgb(118,118,118) */
  --line: #404040;        /* 실측: 패널 구분선 1px rgb(64,64,64) */
  --line-soft: #DDD8D1;   /* HYPOTHESIS: 목록 행 구분선. 홈페이지 #EEEEEE는 베이지 위에서 안 보여 한 단계 진하게 */
  --taupe: #928D87;       /* 실측: 센터 페이지 제목 패널 rgb(146,141,135) */
  --taupe-deep: #7A7570;  /* 실측: 푸터 배경 rgb(122,117,112) */
  --brand: #7C5B48;       /* 실측: meta theme-color */
  --on-dark: #FFFFFF;

  /* 글자 */
  --font: "Pretendard GOV Variable", "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; /* 실측: Pretendard GOV Variable */
  --tracking: -0.5px;     /* 실측: 본문 letter-spacing */
  --fs-nav: 15px;         /* 실측: 상단 메뉴 */
  --fs-small: 14px;       /* 실측: 푸터 제목 */
  --fs-body: 17px;        /* HYPOTHESIS: 홈페이지 16px보다 1단계 크게. 긴 글 읽기용 */
  --lh-body: 1.85;        /* HYPOTHESIS: 한글 장문 기준 */
  --fs-h1: 36px;          /* 실측: 센터 페이지 제목 36px/700 */
  --fs-h2: 24px;          /* HYPOTHESIS */
  --fs-h3: 19px;          /* HYPOTHESIS */

  /* 간격·폭 */
  --gutter: 48px;         /* 실측 근사: 콘텐츠 좌우 여백 */
  --header-h: 50px;       /* 실측 근사: 상단 메뉴 높이 */
  --subnav-h: 30px;       /* 실측 근사: 보조 메뉴 높이 */
  --measure: 680px;       /* HYPOTHESIS: 본문 한 줄 약 40자 */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: var(--tracking);
  word-break: keep-all;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 10; }

/* 상단 메뉴: 홈페이지와 같은 3단 구성(왼쪽 메뉴 · 가운데 로고 · 오른쪽 메뉴) */
.site-header {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.site-header .bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: var(--header-h); padding: 0 var(--gutter);
}
.site-header nav ul { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; font-size: var(--fs-nav); }
.site-header nav.right ul { justify-content: flex-end; }
.site-header nav a[aria-current="page"] { font-weight: 700; }
.site-header .logo img { height: 20px; width: auto; }
.subnav { border-bottom: 1px solid var(--line); background: var(--bg); }
.subnav ul { display: flex; justify-content: center; gap: 48px; list-style: none; margin: 0; padding: 0; height: var(--subnav-h); align-items: center; font-size: 13px; color: var(--muted); overflow-x: auto; }
.subnav a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.menu-toggle { display: none; }

/* 머리 패널: 홈페이지 센터 페이지의 좌측 토프 패널을 그대로 가져옴 */
.split { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.split > * { min-width: 0; }
.panel {
  background: var(--taupe); color: var(--on-dark);
  padding: 56px var(--gutter); min-height: 360px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
}
.panel h1 { font-size: var(--fs-h1); font-weight: 700; margin: 0; line-height: 1.3; }
.panel p { margin: 0; max-width: 34em; line-height: 1.6; }
.panel .crumb { font-size: var(--fs-small); opacity: .85; margin: 0 0 16px; }
.panel .crumb a:hover { text-decoration: underline; }

/* 화살표 행 목록: 홈페이지 '시술' 목록과 같은 형식 */
.rows { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); display: flex; flex-direction: column; justify-content: flex-end; }
.rows li + li { border-top: 1px solid var(--line); }
.rows li:first-child { border-top: 1px solid var(--line); }
.rows a { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 18px 24px; font-weight: 700; font-size: 15px; }
.rows a small { display: block; font-weight: 500; color: var(--muted); font-size: 13px; margin-top: 2px; }
.rows a:hover { background: var(--surface); }
.rows .arrow { font-weight: 400; }

/* 글 목록 */
.listing { padding: 64px var(--gutter) 96px; }
.listing h2 { font-size: 18px; margin: 0 0 20px; }
.post-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.post-list li { border-bottom: 1px solid var(--line-soft); }
.post-list a { display: grid; grid-template-columns: 120px 1fr 110px; gap: 24px; padding: 22px 0; align-items: baseline; }
.post-list .cat { font-size: 13px; color: var(--muted); }
.post-list .title { font-size: 18px; font-weight: 700; line-height: 1.45; }
.post-list .excerpt { display: block; font-weight: 500; font-size: 15px; color: var(--muted); margin-top: 6px; line-height: 1.6; }
.post-list time { font-size: 13px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.post-list a:hover .title { text-decoration: underline; text-underline-offset: 4px; }
.empty { color: var(--muted); padding: 32px 0; }

/* 글 본문 */
.article-head .panel { min-height: 300px; }
.article-head .meta { font-size: var(--fs-small); display: flex; flex-wrap: wrap; gap: 4px 20px; opacity: .9; }
.article-head .cover { background: var(--surface); border-left: 1px solid var(--line); }
.article-head .cover img { width: 100%; height: 100%; object-fit: cover; }
.article-head .cover.none { display: flex; align-items: flex-end; padding: 32px; }
.article-head .cover.none img { width: 150px; height: auto; opacity: .35; }

.article-wrap { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.toc { padding: 48px var(--gutter); }
.toc nav { position: sticky; top: calc(var(--header-h) + var(--subnav-h) + 32px); }
.toc h2 { font-size: var(--fs-small); margin: 0 0 12px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); font-size: 14px; }
.toc li { border-bottom: 1px solid var(--line-soft); }
.toc a { display: block; padding: 10px 0; color: var(--muted); }
.toc a:hover { color: var(--ink); }

.article { border-left: 1px solid var(--line); padding: 48px var(--gutter) 72px; background: var(--surface); }
.prose { max-width: var(--measure); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-body); font-weight: 400; /* HYPOTHESIS: 17px 긴 글은 500보다 400이 덜 튐 */ }
.prose h2, .prose h3, .prose strong, .prose th { color: var(--ink); }
.prose > * + * { margin-top: 1.1em; }
.prose p { margin: 0; }
.prose h2 { font-size: var(--fs-h2); line-height: 1.4; margin: 2.4em 0 0; padding-top: 1em; border-top: 1px solid var(--line); scroll-margin-top: 110px; }
.prose h3 { font-size: var(--fs-h3); line-height: 1.45; margin: 1.8em 0 0; scroll-margin-top: 110px; }
.prose h2 + *, .prose h3 + * { margin-top: .7em; }
.prose strong { font-weight: 700; }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.3em; margin-bottom: 0; }
.prose li + li { margin-top: .35em; }
.prose blockquote { margin: 1.4em 0 0; padding: .2em 0 .2em 1em; border-left: 3px solid var(--taupe); color: #4A4A4A; }
.prose figure { margin: 1.6em 0 0; }
.prose figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.table-wrap { overflow-x: auto; margin-top: 1.4em; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.6; }
.prose th, .prose td { border-bottom: 1px solid var(--line-soft); padding: 10px 12px; text-align: left; vertical-align: top; }
.prose thead th { border-bottom: 1px solid var(--line); font-weight: 700; background: var(--bg); }

/* 핵심 요약(포맷 모듈 필수 칸) */
.summary { background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 24px; }
.summary h2 { font-size: 15px; margin: 0 0 8px; padding: 0; border: 0; }
.prose .summary + * { margin-top: 2em; }
.summary ul { margin: 0; padding-left: 1.1em; font-size: 16px; line-height: 1.75; }

/* 글 끝: 참고자료·관련 진료·예약 */
.prose .refs { margin-top: 3em; }
.prose .updated { margin-top: 1.5em; }
.refs { margin-top: 3em; font-size: 14px; color: var(--muted); line-height: 1.7; }
.refs h2 { font-size: 15px; color: var(--ink); border: 0; padding: 0; margin: 0 0 6px; }
.refs ol { padding-left: 1.2em; margin: 0; }
.updated { margin-top: 2em; font-size: 13px; color: var(--muted); }

.next-steps { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.next-steps .panel { min-height: 0; padding: 40px var(--gutter); }
.next-steps .panel h2 { font-size: 22px; margin: 0; }
.next-steps .rows { justify-content: stretch; }
.next-steps .rows li { flex: 1; display: flex; }
.next-steps .rows li:first-child { border-top: 0; }
.next-steps .rows a { flex: 1; }

/* 글 하단: 네이버 예약 · 구글 지도 */
.visit { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.visit > div { padding: 40px var(--gutter); min-width: 0; }
.visit > div + div { border-left: 1px solid var(--line); }
.visit h2 { font-size: 18px; margin: 0 0 16px; }
.visit iframe { display: block; width: 100%; border: 1px solid var(--line-soft); background: var(--surface); }
.btn-booking { display: block; text-align: center; background: var(--taupe-deep); color: var(--on-dark); font-weight: 700; font-size: 16px; padding: 16px 20px; border: 1px solid var(--taupe-deep); }
.btn-booking:hover { background: var(--ink); border-color: var(--ink); }
.visit-hours { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--line-soft); font-size: 14px; color: var(--ink-body); }
.visit-hours li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.visit .map iframe { height: 360px; }
.visit address { font-style: normal; margin-top: 16px; color: var(--ink-body); line-height: 1.7; }
.visit .links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; font-size: 14px; }
.visit .links a { text-decoration: underline; text-underline-offset: 3px; }

/* 푸터: 홈페이지와 같은 토프 배경 5단 */
.site-footer { background: var(--taupe-deep); color: var(--on-dark); font-size: 13px; line-height: 1.9; }
.site-footer .cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 48px var(--gutter) 40px; }
.site-footer h2 { font-size: var(--fs-small); font-weight: 700; letter-spacing: .6px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.7); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer .hours li { display: flex; justify-content: space-between; gap: 12px; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .bottom { border-top: 1px solid rgba(255,255,255,.5); padding: 18px var(--gutter); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.site-footer .bottom img { height: 16px; width: auto; }

/* 태블릿·모바일 */
@media (max-width: 960px) {
  :root { --gutter: 24px; }
  .split, .article-wrap, .next-steps, .visit { grid-template-columns: 1fr; }
  .visit > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .rows, .article, .article-head .cover { border-left: 0; }
  .article-head .cover { border-top: 1px solid var(--line); max-height: 320px; }
  .article-head .cover.none { display: none; }
  .toc { padding-bottom: 8px; }
  .toc nav { position: static; }
  .panel { min-height: 240px; }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .site-header .bar { grid-template-columns: auto 1fr; height: 52px; }
  .site-header nav.left { display: none; }
  .site-header .logo { justify-self: start; }
  .site-header nav.right ul { gap: 18px; font-size: 14px; }
  .site-header nav.right li.hide-sm { display: none; }
  .subnav ul { justify-content: flex-start; gap: 24px; padding: 0 var(--gutter); }
  .panel { padding: 40px var(--gutter); }
  .panel h1 { font-size: 28px; }
  .post-list a { grid-template-columns: 1fr; gap: 6px; }
  .post-list time { text-align: left; }
  .article { padding: 32px var(--gutter) 56px; }
  .site-footer .cols { grid-template-columns: 1fr; }
  .site-footer .bottom { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
@media print { .site-header, .subnav, .toc, .next-steps, .site-footer { display: none; } .article { border: 0; } }