/* =========================================================================
   ad-doc.css — 문서형 본문 부품집

   이 프로젝트의 콘텐츠 방침: 검사·건강검진·검진프로그램·증상가이드의 내용을
   구조 필드로 쪼개지 않고 **본문 하나**로 두고, 콘솔 GrapesJS 편집기에서
   페이지마다 자유롭게 구성한다.

   그래서 전역 CSS 가 맡는 범위를 좁게 잡는다 —
     · 여기(ad-doc)는 자주 쓰는 섹션 부품의 **기본 모양**만 정의한다.
     · 페이지 고유의 디자인은 글마다 `_seran_content_css` 메타(콘솔 편집기의
       CSS 탭)에 넣는다. Seran_Content_CSS 가 `.medisync01-prose` 하위로 스코프해
       그 글에서만 싣는다.
   즉 이 파일은 '강제'가 아니라 '시작점'이다. 편집기에서 벗어나도 깨지지 않는다.

   부품 목록
     .ad-doc__sec              문서 섹션 (h2 + 내용)
     .ad-doc__sec--caution     주의 성격 섹션 (좌측 표시선)
     .ad-chips                 적응증 같은 짧은 항목 나열 → 칩
     .ad-steps                 순서가 의미를 나르는 단계 (ol)
     .ad-cautions              주의 항목 (경고 아이콘)
     .ad-faq / .ad-faq__a      자주 묻는 질문 아코디언 (details/summary)

   색·글꼴·폭은 전부 medisync01-tokens.css 토큰에서 온다. 여기서 hex 를 만들지 않는다.
   ========================================================================= */

.medisync01-prose .ad-doc__sec {
  margin: 0 0 clamp(40px, 5vw, 68px);
  scroll-margin-top: 84px;           /* 스티키 헤더에 제목이 가리지 않게 */
}

.medisync01-prose .ad-doc__sec:last-child { margin-bottom: 0; }

.medisync01-prose .ad-doc__sec > h2 {
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--medisync01-line);
  font-family: var(--medisync01-font-display);
  font-size: var(--medisync01-fs-h3);
  font-weight: 700;
  line-height: var(--medisync01-lh-h3);
  letter-spacing: -.02em;
  color: var(--medisync01-ink);
}

/* 주의 성격 섹션 — 색이 아니라 '표시선'으로 성격을 알린다.
   색만으로 구분하면 색을 구별하기 어려운 사람에게 정보가 사라진다. */
.medisync01-prose .ad-doc__sec--caution {
  padding: 24px 26px;
  border-left: 3px solid var(--medisync01-error);
  background: var(--medisync01-bg-soft);
  border-radius: 0 var(--medisync01-radius) var(--medisync01-radius) 0;
}

.medisync01-prose .ad-doc__sec--caution > h2 {
  border-bottom-color: color-mix(in srgb, var(--medisync01-error) 30%, transparent);
}

/* ── 칩: 적응증·증상처럼 짧고 병렬적인 항목 ───────────────────────────── */

.medisync01-prose ul.ad-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.medisync01-prose ul.ad-chips > li {
  margin: 0;
  padding: 7px 14px;
  border: 1px solid var(--medisync01-olive-dark);
  border-radius: 999px;
  background: var(--medisync01-olive);
  color: var(--medisync01-on-accent);   /* 배경이 밝은 하늘이라 전경은 짙은 남색 */
  font-size: var(--medisync01-fs-sm);
  font-weight: 600;
  line-height: 1.5;
}

.medisync01-prose ul.ad-chips > li::before { content: none; }

/* ── 단계: 번호가 정보다 ─────────────────────────────────────────────── */

.medisync01-prose ol.ad-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ad-step;
}

.medisync01-prose ol.ad-steps > li {
  counter-increment: ad-step;
  position: relative;
  margin: 0;
  padding: 16px 0 16px 58px;
  border-bottom: 1px solid var(--medisync01-line-soft);
  line-height: var(--medisync01-lh);
}

.medisync01-prose ol.ad-steps > li:last-child { border-bottom: 0; }

.medisync01-prose ol.ad-steps > li::before {
  content: counter(ad-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 14px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: var(--medisync01-on-brand);
  font-family: var(--medisync01-font-display);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── 주의 항목 ──────────────────────────────────────────────────────── */

.medisync01-prose ul.ad-cautions {
  margin: 0;
  padding: 0;
  list-style: none;
}

.medisync01-prose ul.ad-cautions > li {
  position: relative;
  margin: 0;
  padding: 9px 0 9px 30px;
  line-height: var(--medisync01-lh);
}

.medisync01-prose ul.ad-cautions > li::before {
  content: "!";
  position: absolute;
  left: 0;
  top: 13px;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--medisync01-error);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

/* ── FAQ 아코디언 ───────────────────────────────────────────────────── */

.medisync01-prose details.ad-faq {
  margin: 0 0 10px;
  padding: 0;
  border: 1px solid var(--medisync01-line);
  border-radius: var(--medisync01-radius);
  background: var(--brand-secondary);
  overflow: hidden;
}

.medisync01-prose details.ad-faq > summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  font-weight: 600;
  color: var(--medisync01-ink);
  line-height: 1.6;
  list-style: none;
  transition: background var(--medisync01-dur) var(--medisync01-ease);
}

.medisync01-prose details.ad-faq > summary::-webkit-details-marker { display: none; }

/* 펼침 표시 — 회전하는 갈매기. 색이 아니라 방향으로 상태를 알린다. */
.medisync01-prose details.ad-faq > summary::after {
  content: "";
  flex: 0 0 auto;
  margin-left: auto;
  margin-top: 6px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--brand-primary);
  border-bottom: 2px solid var(--brand-primary);
  transform: rotate(45deg);
  transition: transform var(--medisync01-dur) var(--medisync01-ease);
}

.medisync01-prose details.ad-faq[open] > summary::after { transform: rotate(-135deg); margin-top: 10px; }

.medisync01-prose details.ad-faq > summary:hover { background: var(--medisync01-bg-mega); }

.medisync01-prose details.ad-faq > summary:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
}

.medisync01-prose details.ad-faq .ad-faq__a {
  padding: 0 20px 18px;
  border-top: 1px solid var(--medisync01-line-soft);
  padding-top: 16px;
  color: var(--medisync01-ink-2);
  line-height: var(--medisync01-lh);
}

.medisync01-prose details.ad-faq .ad-faq__a > :first-child { margin-top: 0; }
.medisync01-prose details.ad-faq .ad-faq__a > :last-child  { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .medisync01-prose details.ad-faq > summary,
  .medisync01-prose details.ad-faq > summary::after { transition: none; }
}

@media (max-width: 640px) {
  .medisync01-prose ol.ad-steps > li { padding-left: 46px; }
  .medisync01-prose ol.ad-steps > li::before { width: 32px; height: 32px; font-size: 12px; }
  .medisync01-prose .ad-doc__sec--caution { padding: 18px 18px 18px 20px; }
}

/* ── 본문 그림 ──────────────────────────────────────────────────────────
   검사의 imageN(적응증 곁·검사 과정 곁 삽화)이 여기로 온다.
   원본이 1080×1080 정사각 인포그래픽이라 폭을 다 쓰면 세로가 과하게 길어진다.
   그래서 본문 폭 안에서 한 번 더 좁히고 가운데 정렬한다.
------------------------------------------------------------------------ */

.medisync01-prose figure.ad-figure {
  margin: 26px auto 0;
  max-width: 560px;
  padding: 0;
}

.medisync01-prose figure.ad-figure .ad-figure__img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--medisync01-line-warm);
  border-radius: var(--medisync01-radius);
  background: var(--medisync01-bg-soft);
}

.medisync01-prose figure.ad-figure figcaption {
  margin-top: 10px;
  font-size: var(--medisync01-fs-sm);
  line-height: 1.6;
  color: var(--medisync01-ink-3);
  text-align: center;
}

/* 섹션의 마지막 그림 아래 여백은 섹션이 갖는다 — 이중 여백 방지 */
.medisync01-prose .ad-doc__sec > figure.ad-figure:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .medisync01-prose figure.ad-figure { max-width: 100%; margin-top: 20px; }
}

/* ── 구 스니펫 호환 부품 ──────────────────────────────────────────────────
   inc/class-legacy-shortcodes.php 가 그리는 마크업.
   구 사이트는 색을 쇼트코드 인자로 받았지만 여기서는 브랜드 토큰을 따른다 —
   지면마다 버튼 색이 따로 노는 것을 막는다.
------------------------------------------------------------------------ */

.ad-pillnav { margin: 0 0 26px; }

/* 클래스를 두 번 겹쳐 (0,2,0) 으로 올린다 — 상위 산문/지면 시트가
   `.sg-body ul`·`.medisync01-prose ul` 같은 (0,1,1) 규칙으로 마커와 들여쓰기를
   넣기 때문에, 한 번만 걸면 알약 앞에 불릿 점이 남는다. */
.ad-pillnav__list.ad-pillnav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ad-pillnav__item.ad-pillnav__item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ad-pillnav__item::marker { content: ""; }
.ad-pillnav__item::before { content: none; }

/* (0,2,0) — 지면 시트의 `.sg-body a { text-decoration: underline }` 를 이겨야
   알약이 버튼으로 읽힌다. 밑줄 그은 알약은 링크도 버튼도 아닌 모양이 된다. */
.ad-pillnav__link.ad-pillnav__link {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid var(--medisync01-line);
  border-radius: 999px;
  background: var(--brand-secondary);
  color: var(--medisync01-ink-2);
  font-size: var(--medisync01-fs-sm);
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  transition: background var(--medisync01-dur) var(--medisync01-ease),
              color var(--medisync01-dur) var(--medisync01-ease),
              border-color var(--medisync01-dur) var(--medisync01-ease);
}

.ad-pillnav__link:hover,
.ad-pillnav__link:focus-visible {
  border-color: var(--brand-primary);
  background: var(--medisync01-bg-mega);
  color: var(--brand-primary);
}

/* 지금 보고 있는 지면 — 채운 알약. hover 와 구분되어야 한다. */
.ad-pillnav__link.is-current {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  color: var(--medisync01-on-brand);
}

/* 링크 버튼 그리드 — 각 글이 자기 색을 갖고 있으면 인라인 style 이 이긴다. */
.ad-linkbtns.ad-linkbtns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.ad-linkbtns__item.ad-linkbtns__item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ad-linkbtns__item::marker { content: ""; }
.ad-linkbtns__item::before { content: none; }

.ad-linkbtns__link.ad-linkbtns__link {
  display: inline-block;
  padding: 11px 20px;
  border: 1px solid var(--brand-primary);
  border-radius: 999px;
  background: var(--brand-primary);
  color: var(--medisync01-on-brand);
  font-size: var(--medisync01-fs-sm);
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  transition: filter var(--medisync01-dur) var(--medisync01-ease), transform var(--medisync01-dur) var(--medisync01-ease);
}

.ad-linkbtns__link:hover,
.ad-linkbtns__link:focus-visible { filter: brightness(1.12); transform: translateY(-1px); }