/* DermaFocus 원고 리디자인: GBG 레이아웃 위에 덧씌우는 차별화 레이어.
   색: 아이보리 + 로즈 핑크 + 흐릿한 검정. 폰트와 본문 레이아웃 뼈대는 GBG를 유지한다.

   정렬 규칙
   - 바깥 선: 로고, 상단 패널, 본문, 목차, 푸터의 바깥 끝은 모두 .container 양쪽 끝에 맞춘다.
   - 기준선 A: 일반 본문 글자와 모든 박스 테두리의 왼쪽 끝 = 본문 열 왼쪽 끝.
   - 기준선 B: 모든 박스 안 글자 = 기준선 A + --df-inset. 상단 패널, 핵심 요약, 표 첫 열·마지막 열,
     안내 박스, 이해관계 박스, 관련 글 카드가 같은 값을 쓴다.
   - 세로 간격: 섹션 사이 --df-section, 블록(표, 박스, FAQ) 위 --df-gap, 제목 아래 --df-title-gap. */
:root {
  --df-ivory: #fbf8f1;
  --df-ivory-deep: #f3ece0;
  --df-rose: #c4587a;
  --df-rose-deep: #a8435f;
  --df-blush: #f7e3e9;
  --df-smoke: #2e2729;
  --df-smoke-2: #51454a;
  --df-text: #3d3437;
  --df-muted: #7b6e70;
  --df-line: #e6dccf;

  --df-inset: 32px;
  --df-inset-bordered: calc(var(--df-inset) - 1px); /* 1px 테두리가 있는 박스는 테두리만큼 빼서 기준선 B를 맞춘다 */
  --df-box-y: 28px;
  --df-gap: 24px;
  --df-title-gap: 16px;
  --df-section: 56px;
  --df-radius-lg: 28px;
  --df-radius: 18px;
}

html body { background: var(--df-ivory); color: var(--df-smoke); }
html body main { background: var(--df-ivory); }

/* 헤더 */
html body .site-header { background: rgba(251, 248, 241, .94); border-bottom: 1px solid rgba(196, 88, 122, .16); }
html body .nav-link:after { background: var(--df-rose); }

/* 배포 사이트 전용 모바일 메뉴. JavaScript 없이 details로 작동한다. */
html body .article-menu { display: none; position: relative; margin-left: auto; }
html body .article-menu > summary {
  min-width: 56px;
  padding: 9px 12px;
  border: 1px solid var(--df-line);
  border-radius: 999px;
  color: var(--df-smoke);
  font-size: 12px;
  font-weight: 750;
  text-align: center;
  list-style: none;
  cursor: pointer;
}
html body .article-menu > summary::-webkit-details-marker { display: none; }
html body .article-menu > nav {
  position: absolute;
  z-index: 20;
  top: calc(100% + 12px);
  right: 0;
  width: min(260px, calc(100vw - 36px));
  padding: 10px;
  border: 1px solid var(--df-line);
  border-radius: 16px;
  background: #fffdf9;
  box-shadow: 0 18px 46px rgba(46, 39, 41, .14);
}
html body .article-menu .nav-link { display: block; padding: 11px 12px; border-radius: 10px; }
html body .article-menu .nav-link:hover { background: var(--df-blush); }

/* ── 상단 패널 ─────────────────────────────────────────────
   .page-band는 투명한 바깥 여백만 맡고, 패널 자체는 .container가 그린다.
   그래서 패널의 양쪽 끝이 본문 열과 목차 바깥선에 정확히 맞는다. 원형 장식은 쓰지 않는다. */
html body .page-band {
  overflow: visible;
  margin: 0;
  padding: var(--df-gap) 0 0;
  border: 0;
  background: transparent;
  color: #fff;
}
html body .page-band-orbit { display: none; }
html body .page-band > .container {
  padding: 48px var(--df-inset);
  border-radius: var(--df-radius-lg);
  background:
    radial-gradient(140% 120% at 100% 0%, rgba(214, 112, 146, .42) 0%, rgba(214, 112, 146, .12) 40%, transparent 64%),
    linear-gradient(150deg, #2b2427 0%, #3d3336 52%, #57474d 100%);
}
html body .page-band .breadcrumbs { margin: 0 0 32px; }
html body .page-band .breadcrumbs ol { flex-wrap: wrap; row-gap: 4px; color: rgba(251, 248, 241, .6); word-break: keep-all; }
html body .page-band .breadcrumbs li:not(:last-child) { white-space: nowrap; }
html body.article-page .page-band .breadcrumbs span:before { content: none; }
html body .page-band .breadcrumbs a:hover { color: #fff; }
html body .page-intro { max-width: none; margin: 0; }
html body .page-band .section-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid rgba(247, 227, 233, .45);
  border-radius: 999px;
  color: var(--df-blush);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
}
html body .page-band .page-title {
  max-width: 17em;
  margin: 20px 0 16px;
  color: #fff;
  font-weight: 720;
  letter-spacing: -.045em;
  line-height: 1.14;
}
html body .page-band .page-description { max-width: 40em; margin: 0; color: rgba(251, 248, 241, .78); }

/* ── 본문 열과 목차 ─────────────────────────────────────────── */
html body main > .section { padding-top: var(--df-section); padding-bottom: 96px; }
html body .content-layout { align-items: start; }

html body .article > .guide-meta {
  display: flex;
  align-items: center;
  min-height: 28px;
  margin: 0 0 var(--df-gap);
  color: var(--df-muted);
}
html body .article > .guide-meta a { color: var(--df-smoke-2); text-decoration: underline; text-decoration-color: rgba(196, 88, 122, .4); text-underline-offset: 3px; }
html body .tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 12px;
  background: transparent;
  color: var(--df-rose-deep);
  border: 1px solid rgba(196, 88, 122, .45);
  border-radius: 999px;
  line-height: 1;
}

/* 목차: 제목 줄의 높이와 위치를 본문 메타 줄(28px)과 맞춘다 */
html body .toc {
  top: 104px;
  margin: 0;
  padding: 0 0 0 20px;
  border: 0;
  border-left: 2px solid var(--df-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html body .toc > h2 {
  display: flex;
  align-items: center;
  min-height: 28px;
  margin: 0 0 12px;
  color: var(--df-rose-deep);
  line-height: 1;
}
html body .toc-list a { border-bottom: 0; padding: 7px 0; color: var(--df-muted); line-height: 1.5; }
html body .toc-list a:hover { color: var(--df-smoke); }

/* ── 섹션 리듬 ─────────────────────────────────────────────── */
html body .article-section { margin: 0 0 var(--df-section); padding: 0; border-bottom: 0; }
html body .article-section + .article-section:before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin: 0 0 var(--df-gap);
  border-radius: 3px;
  background: var(--df-rose);
}
html body .article-section > h2 { margin: 0 0 var(--df-title-gap); color: var(--df-smoke); font-weight: 720; letter-spacing: -.035em; }
html body .article-section p { margin: 0 0 16px; color: var(--df-text); }
html body .article-section > :last-child,
html body .article-section#summary > :last-child { margin-bottom: 0; }
html body .article-section strong { color: var(--df-smoke); box-shadow: inset 0 -.42em 0 rgba(247, 227, 233, .95); }

/* 표, 안내 박스, 체크 목록, 그림은 모두 위쪽 --df-gap 한 가지 간격 */
html body .article-section .table-scroll,
html body .article-section .section-note,
html body .article-section .check-grid,
html body .article-section .diagram-figure,
html body .article-section .faq-list,
html body .article-section .source-list,
html body .article-section .article-list,
html body .article-section .evidence-list { margin: var(--df-gap) 0 0; }
html body .article-section > h2 + .table-scroll,
html body .article-section > h2 + .faq-list,
html body .article-section > h2 + .source-list,
html body .article-section > h2 + .article-list { margin-top: 0; }

/* 핵심 요약 */
html body .article-section#summary {
  padding: var(--df-box-y) var(--df-inset);
  border-radius: var(--df-radius-lg);
  background: linear-gradient(180deg, var(--df-blush) 0%, rgba(247, 227, 233, .45) 100%);
}
html body .article-section#summary strong { box-shadow: none; }

/* 표 */
html body .table-scroll {
  border: 1px solid var(--df-line);
  border-radius: var(--df-radius);
  background: #fffdf9;
  box-shadow: none;
}
html body .compare-table th,
html body .compare-table td { padding: 14px 16px; word-break: keep-all; overflow-wrap: break-word; }
html body .compare-table th:first-child,
html body .compare-table td:first-child { padding-left: var(--df-inset-bordered); }
html body .compare-table th:last-child,
html body .compare-table td:last-child { padding-right: var(--df-inset-bordered); }
html body .compare-table th {
  vertical-align: middle;
  background: var(--df-smoke);
  color: var(--df-ivory);
  font-weight: 700;
  border-bottom: 0;
}
html body .compare-table td { vertical-align: top; border-bottom: 1px solid var(--df-line); color: var(--df-text); }
html body .compare-table td:first-child { background: rgba(247, 227, 233, .55); color: var(--df-smoke); }
html body .compare-table tbody tr:hover td { background: rgba(243, 236, 224, .7); }
html body .compare-table tbody tr:hover td:first-child { background: var(--df-blush); }

/* 안내 박스 */
html body .section-note {
  padding: 20px var(--df-inset);
  border: 0;
  border-radius: var(--df-radius);
  background: var(--df-ivory-deep);
  color: var(--df-smoke-2);
}

html body .evidence-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 0;
  list-style: none;
  color: var(--df-text);
}
html body .evidence-list li {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 18px 20px 18px 46px;
  border: 1px solid var(--df-line);
  border-radius: var(--df-radius);
  background: rgba(255, 255, 255, .62);
  line-height: 1.8;
}
html body .evidence-list li::before {
  content: "";
  position: absolute;
  top: 1.05em;
  left: 20px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--df-rose);
  box-shadow: 0 0 0 5px rgba(198, 78, 113, .09);
}

/* FAQ: 질문 글자와 +/− 기호를 한 줄 가운데에 맞춘다 */
html body .faq-list details { margin: 0; padding: 20px 0; border-top: 1px solid var(--df-line); }
html body .faq-list details:last-child { border-bottom: 1px solid var(--df-line); }
html body .faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  color: var(--df-smoke);
}
html body .faq-list summary::-webkit-details-marker { display: none; }
html body .faq-list summary:after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--df-blush);
  color: var(--df-rose-deep);
  font-weight: 700;
  line-height: 1;
}
html body .faq-list details[open] summary:after { content: "\2212"; }
html body .faq-list details p { margin: 12px 44px 0 0; }

/* 출처: 번호까지 기준선 A 안쪽으로 */
html body .source-list { padding-left: 0; list-style-position: inside; }
html body .source-row { padding: 14px 0; border-bottom: 1px solid var(--df-line); }
html body .source-row a { color: var(--df-rose-deep); }
html body .source-row span { margin-top: 4px; }

/* 이해관계 박스 */
html body .disclosure {
  margin: 0 0 var(--df-section);
  padding: calc(var(--df-box-y) - 1px) var(--df-inset-bordered);
  border: 1px solid var(--df-line);
  border-left: 1px solid var(--df-line);
  border-radius: var(--df-radius-lg);
  background: #fffdf9;
  box-shadow: none;
}
html body .disclosure h2 { margin: 0 0 12px; }
html body .disclosure p { margin: 0 0 8px; }
html body .disclosure > :last-child { margin-bottom: 0; }

/* 관련 글 카드 */
html body .article-list .guide-card {
  padding: calc(var(--df-box-y) - 1px) var(--df-inset-bordered);
  border: 1px solid var(--df-line);
  border-radius: var(--df-radius);
  background: #fffdf9;
}
html body .article-list .guide-card:hover { transform: none; border-color: var(--df-rose); }

/* 푸터 */
html body .site-footer { background: linear-gradient(170deg, #2b2427 0%, #3a3033 60%, #4a3d42 100%); }

html body :focus-visible { outline: 2px solid var(--df-rose); outline-offset: 3px; }

@media (max-width: 760px) {
  :root { --df-inset: 20px; --df-box-y: 24px; --df-section: 48px; --df-radius-lg: 22px; --df-radius: 16px; }
  html body .page-band { padding-top: 12px; }
  html body .page-band > .container { padding: 32px var(--df-inset); }
  html body .page-band .breadcrumbs { margin-bottom: 24px; }
  html body main > .section { padding-top: 40px; padding-bottom: 72px; }
  html body .toc { max-height: 310px; margin-bottom: var(--df-gap); overflow: auto; overscroll-behavior: contain; }
  /* 좁은 화면: 표를 줄이지 않고 옆으로 밀어 보게 한다 */
  html body .compare-table { min-width: 600px; }
  html body .compare-table td:first-child { white-space: normal; min-width: 120px; }
  html body .faq-list details p { margin-right: 0; }
}

@media (max-width: 1020px) {
  html body .article-menu { display: block; }
}

/* 설명 그림: 표와 같은 테두리 박스, 캡션 글자는 기준선 B */
html body .diagram-figure {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--df-line);
  border-radius: var(--df-radius);
  background: #fffdf9;
}
html body .diagram-figure img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; } /* GBG 원고 이미지의 3:2 자르기를 풀어 설명 그림 전체를 보여준다 */
html body .diagram-figure.is-portrait img { max-width: 460px; margin-inline: auto; }
html body .diagram-figure figcaption {
  margin: 0;
  padding: 16px var(--df-inset-bordered) 18px;
  border-top: 1px solid var(--df-line);
  color: var(--df-muted);
  font-size: 13px;
  line-height: 1.7;
  word-break: keep-all;
}
html body .diagram-figure figcaption strong { color: var(--df-smoke-2); box-shadow: none; }

/* 표, 그림 다음에 이어지는 문단도 같은 --df-gap만큼 띄운다 */
html body .article-section .table-scroll + p,
html body .article-section .diagram-figure + p { margin-top: var(--df-gap); }