/* =========================================================================
   ad-guide.css — 증상가이드 문서 조판 (.adg-*)

   광교퍼스트 피부과의 "아카이브" 조판을 내과로 옮긴 것.
   참조: https://1skinderma.com/안면홍조-치료-방법 (그쪽 PAGE-SPEC.md 의 arc-* 문법)

   원래는 「가슴이 답답하고, 조이는 느낌」 한 글의 `_seran_content_css` 메타에
   두고 시안을 잡았다. 시안이 확정돼 **증상가이드 전체가 같은 조판을 쓰게 되어**
   여기로 올렸다. 이제 각 글은 CSS 없이 본문 HTML 만 쓰면 된다.

   선택자에 `.medisync01-prose` 를 직접 붙인다 — 메타에 있을 때는
   Seran_Content_CSS 가 붙여 줬지만 이제 그 경로를 거치지 않는다.

   부품
     .adg-lede      도입(글 + 사진)
     .adg-sec       번호 섹션 (좌측 레일 + 본문)
     .adg-cause     원인 가로 스트립
     .adg-scenes    증상 장면 4컷 (16:9 를 4등분)
     .adg-check     자가 점검 체크리스트 (지면에서 색을 쓰는 유일한 자리)
     .adg-cond      질환 비교 (선 구분 · 정사각 그림)
     .adg-cta       전체 폭 사진 + 인디고 베일 + 오른쪽 문구

   색은 medisync01-tokens.css 토큰에서 받는다. 여기서 hex 를 새로 만들지 않는다
   (--adg-* 는 그 토큰을 이 조판용으로 이름 붙인 것뿐이다).
   ========================================================================= */


.medisync01-prose .adg{
  /* 잉크·본문은 파랑 기가 도는 중립색이다. 순수 회색을 쓰면 인디고 옆에서
     탁해 보인다 — 배경 뒤 색으로 살짝 끌어당긴다. */
  --adg-ink: #1C2331;
  --adg-body: #57616F;
  --adg-mute: #93A0B0;

  --adg-brand: var(--medisync01-orange, #090A73);      /* 토큰명이 orange 지만 인디고다 */
  --adg-brand-2: var(--medisync01-orange-soft, #3A3BA0);
  --adg-sky: var(--medisync01-line-warm, #DCEAF6);
  --adg-wash: var(--medisync01-bg-warm, #F4F8FC);
  --adg-line: #E4EAF1;

  /* 체크리스트 전용 — 지면에서 색을 쓰는 유일한 자리.
     --adg-wash(#F4F8FC)는 거의 흰색이라 '포인트'로 읽히지 않는다.
     --adg-sky(#DCEAF6)는 본문 글씨 뒤 배경으로는 조금 진하다. 그 사이 값. */
  --adg-check-bg: #EAF3FB;
  --adg-check-line: #D3E4F2;   /* 하늘색 위에서 읽히는 구분선. 회색은 묻힌다 */

  /* 응급 표시 전용. 브랜드색과 분리한다 — 인디고로 응급을 표시하면
     "브랜드 강조"와 "지금 119" 가 같은 색이 되어 위험 신호가 묻힌다. */
  --adg-alert: #B3261E;
  --adg-alert-bg: #FDF3F2;

  color: var(--adg-body);
  font-size: 16px;
  line-height: 1.9;
}

.medisync01-prose .adg *{ box-sizing: border-box; min-width: 0; }
.medisync01-prose .adg img{ display: block; max-width: 100%; height: auto; }
.medisync01-prose .adg p{ margin: 0 0 1.05em; }
.medisync01-prose .adg p:last-child{ margin-bottom: 0; }
.medisync01-prose .adg strong{ color: var(--adg-ink); font-weight: 600; }

/* 공통 조각 ------------------------------------------------------------- */

.medisync01-prose .adg-kicker{
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--adg-brand);
}

/* 표제 위 도입 한 마디.
   원본에서 "고혈압이란? / 수치로 진단되는 조용한 위험" 처럼 두 줄로 던지던
   묶음을, 변환기가 각각 절로 쪼개 앞쪽이 **제목만 있는 빈 절**이 됐다.
   앞줄을 표제 위 도입으로 되돌린다 — 절 하나가 사라지고 흐름이 이어진다. */
.medisync01-prose .adg-lead-in{
  margin: 0 0 6px;
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.02em;
  color: var(--adg-brand-2);
}

.medisync01-prose .adg-h2{
  margin: 0 0 20px;
  font-size: clamp(24px, 3.1vw, 36px);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -.03em;
  color: var(--adg-ink);
  text-wrap: balance;
}

.medisync01-prose .adg-lead{
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.9;
  max-width: 68ch;
}

/* 이미지 액자 — 참조 페이지의 둥근 액자를 하늘색 테두리로 옮겼다. */
.medisync01-prose .adg-fig{
  margin: 0;
  border: 1px solid var(--adg-sky);
  border-radius: var(--medisync01-radius-lg, 20px);
  overflow: hidden;
  background: var(--adg-wash);
}
.medisync01-prose .adg-fig figcaption{
  padding: 12px 16px;
  border-top: 1px solid var(--adg-sky);
  font-size: 13px;
  line-height: 1.6;
  color: var(--adg-mute);
  background: #fff;
}

/* 도입 ------------------------------------------------------------------ */

/* 글과 사진이 **가로폭을 반씩** 나눈다.
   전에는 사진 칸을 380px 로 묶었는데, 도입 사진 17장 중 절반이
   「정상 ↔ 이상」 비교컷(X-ray 두 장, 해부도 두 장)이라 380px 안에서는
   좌우 두 컷이 각각 190px 로 쪼그라들어 무엇을 비교하는지 안 보였다.
   비교컷이 읽히는 것이 도입부의 일이므로 사진에 절반을 준다. */
.medisync01-prose .adg-lede{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  /* 사진을 글 **첫 줄에 맞춘다**. center 로 두면 글이 길어질수록 사진이
     한가운데로 내려가 제목과 어긋나고, 위아래로 빈 칸이 생겨 떠 보인다. */
  align-items: start;
  padding: 0 0 clamp(48px, 6vw, 76px);
}

/* 사진이 없는 도입은 한 열로 접는다. 지금은 17지면 모두 도입 사진이 있지만
   (예전엔 6곳이 비어 오른쪽 칸이 빈 채로 남았다), 사진 없는 글이 새로
   들어와도 빈 칸이 생기지 않게 규칙은 남겨 둔다. */
.medisync01-prose .adg-lede:not(:has(.adg-lede__fig)){
  grid-template-columns: 1fr;
}

/* 원본 비율 그대로 둔다.
   전에는 4:3 으로 묶어 지면마다 널뛰는 도입부 높이를 눌렀는데, 그 대가로
   2:1 가로컷(심비대·호흡곤란·기침 X-ray 비교)의 좌우가 잘려 나가
   「정상」 쪽 컷이 화면 밖으로 밀렸다. 잘라서 높이를 맞추느니 높이가
   조금 달라지는 편이 낫다 — 실제 범위는 1:1 ~ 2.18:1 로 넓지 않다. */
.medisync01-prose .adg-lede__fig img{
  display: block;
  width: 100%;
  height: auto;
}
.medisync01-prose .adg-lede__h{
  margin: 0 0 22px;
  font-size: clamp(22px, 2.7vw, 31px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.025em;
  color: var(--adg-ink);
}
.medisync01-prose .adg-lede__text p{
  font-size: clamp(15px, 1.4vw, 16.5px);
  max-width: 60ch;
}

/* 번호 섹션 ------------------------------------------------------------- */

.medisync01-prose .adg-sec{
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 48px);
  padding: clamp(48px, 6.5vw, 84px) 0;
  border-top: 1px solid var(--adg-line);
}

/* 좌측 레일 — 큰 연한 번호 + 영문 색인 라벨.
   sticky 로 두면 긴 섹션을 읽는 동안 자기 위치가 계속 보인다. */
.medisync01-prose .adg-sec__rail{
  position: sticky;
  top: 96px;
  align-self: start;
}
.medisync01-prose .adg-num{
  display: block;
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--adg-sky);
  font-variant-numeric: tabular-nums;
}
.medisync01-prose .adg-sec__rail .adg-kicker{ margin-top: 10px; }

/* 섹션 우측 그림 — 검사 지면의 절별 대표 이미지 ------------------------- */

/* 절 하나가 "번호 · 본문 · 그림" 세 칸이 된다.
   그림을 본문 아래에 두면(예전 `.ad-figure`) 세 줄짜리 글 밑에 정사각 사진이
   덩그러니 놓여 절이 사진 높이만큼 늘어졌다. 옆에 세우면 글이 짧아도
   절의 높이가 그림 하나로 정해져 지면 전체의 박자가 고르게 맞는다.

   `:has()` 로 잡는다 — 그림이 있는 절만 3칸이 되고, 없는 절은 종전 2칸
   그대로다. 본문 저자가 수식 클래스를 따로 붙이지 않아도 된다(검사 25 지면을
   손으로 고칠 것이므로 규칙은 마크업 하나로 끝나야 한다). */
.medisync01-prose .adg-sec:has(> .adg-aside){
  grid-template-columns: 148px minmax(0, 1fr) clamp(210px, 23vw, 300px);
}

.medisync01-prose .adg-aside{
  margin: 0;
  align-self: start;
  /* 레일과 같은 선에서 출발한다 — h2 윗변에 그림 윗변을 맞춘다. */
  padding-top: 4px;
}

/* 정사각으로 고정한다. 원본이 1024×1024 라 비율은 이미 맞지만, 나중에
   다른 비율의 사진이 들어와도 절의 높이가 흔들리지 않게 못을 박아 둔다. */
/* 정사각으로 고정한다. 원본이 1024×1024 라 비율은 이미 맞지만, 나중에
   다른 비율의 사진이 들어와도 절의 높이가 흔들리지 않게 못을 박아 둔다.
   테두리는 세 장의 결이 서로 달라서 넣는다 — 원리 도해는 배경이 순백이라
   선이 없으면 지면에 녹아 그림으로 읽히지 않고, 검사 장면은 거의 검은 사진이라
   반대로 덩어리로 뜬다. 같은 1px 로 묶어야 세 절이 한 벌로 보인다. */
.medisync01-prose .adg-aside img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--adg-line);
  border-radius: var(--medisync01-radius);
  background: var(--adg-wash);
}

/* 좁은 칸의 설명은 왼쪽 정렬이다. 테마 기본값(`.medisync01-prose figcaption`)이
   가운데 정렬이라 두 줄이 되면 들쭉날쭉해지고 그림 왼변과도 어긋난다. */
.medisync01-prose .adg-aside figcaption{
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  text-align: left;
  color: var(--adg-mute);
}

/* 원인 5개 — 참조의 01~05 가로 스트립 */

.medisync01-prose .adg-cause{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: clamp(28px, 3.4vw, 44px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--adg-line);
}
.medisync01-prose .adg-cause > li{
  padding: 24px 18px 4px 0;
  border-right: 1px solid var(--adg-line);
}
.medisync01-prose .adg-cause > li:last-child{ border-right: 0; padding-right: 0; }

/* 칸 수를 **항목 수에 맞춘다**.
   격자를 5열로 고정해 두면 항목이 2개인 스트립(고혈압 지면의 수축기/이완기)은
   왼쪽 2칸만 쓰고 오른쪽 3칸이 빈 채로 남는다. 항목이 5보다 적으면 그 수만큼만
   나눈다 — `:has()` 로 "N번째가 마지막"인지 물어 개수를 센다. */
.medisync01-prose .adg-cause:has(> li:nth-child(2):last-child){ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.medisync01-prose .adg-cause:has(> li:nth-child(3):last-child){ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.medisync01-prose .adg-cause:has(> li:nth-child(4):last-child){ grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 6개는 5열이 아니라 **3열 두 줄**이다.
   5열로 두면 여섯 번째 하나만 둘째 줄 왼쪽 끝에 덩그러니 남아, 스트립이
   깨진 것처럼 보인다(「아랫배 통증」의 원인 6개가 그 상태였다).
   3+3 이면 두 줄이 꽉 차고, 좁은 화면의 3열 규칙과도 같은 모양이 된다. */
.medisync01-prose .adg-cause:has(> li:nth-child(6):last-child){ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.medisync01-prose .adg-cause:has(> li:nth-child(6):last-child) > li:nth-child(3n){ border-right: 0; padding-right: 0; }
.medisync01-prose .adg-cause:has(> li:nth-child(6):last-child) > li:nth-child(n+4){ border-top: 1px solid var(--adg-line); }
.medisync01-prose .adg-cause > li::before{ content: none; }   /* 테마 ul 마커 무력화 */
.medisync01-prose .adg-cause__n{
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--adg-brand-2);
  font-variant-numeric: tabular-nums;
}
.medisync01-prose .adg-cause h3{
  margin: 10px 0 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.02em;
  color: var(--adg-ink);
}
.medisync01-prose .adg-cause h3 small{
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--adg-mute);
  letter-spacing: 0;
}
.medisync01-prose .adg-cause p{
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--adg-body);
}

/* 그림을 얹은 원인 스트립 ------------------------------------------------
   골격은 위 스트립 그대로다. 칸 맨 위에 정사각 그림만 하나 더 올린다 —
   원인이 다섯이면 그림도 다섯이라, 눈으로 먼저 훑고 글로 확인하게 된다.
   (참조: 「가슴이 답답하고, 조이는 느낌」 01 절 + 질환 카드의 정사각 그림) */
.medisync01-prose .adg-cause--fig > li{ padding-top: 18px; }
.medisync01-prose .adg-cause__fig{
  margin: 0 18px 14px 0;
}
.medisync01-prose .adg-cause > li:last-child .adg-cause__fig{ margin-right: 0; }
/* 높이를 **고정**한다. aspect-ratio 로 두면 칸마다 그림 폭이 달라지는 만큼
   높이도 달라져 번호와 제목 줄이 어긋난다(마지막 칸은 오른쪽 여백이 없어
   36px 더 넓다 — 그만큼 혼자 키가 커졌다).
   원본이 순백 배경 삽화라 contain 으로 담아도 빈자리가 티나지 않는다. */
.medisync01-prose .adg-cause__fig img{
  display: block;
  width: 100%;
  height: clamp(118px, 12.5vw, 166px);
  object-fit: contain;
  border: 1px solid var(--adg-line);
  border-radius: var(--medisync01-radius, 12px);
  background: #fff;
}
/* 그림이 붙으면 칸 위 여백이 두 번(스트립 선 + 그림) 생겨 번호가 처진다. */
.medisync01-prose .adg-cause--fig .adg-cause__n{ margin-top: 2px; }

@media (max-width: 1000px){
  /* 3열로 접히면 마지막 줄 오른쪽 칸의 그림 여백이 어긋난다. */
  .medisync01-prose .adg-cause--fig > li:nth-child(3n) .adg-cause__fig{ margin-right: 0; }
}
@media (max-width: 700px){
  .medisync01-prose .adg-cause--fig > li{
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 0 16px;
    align-items: start;
  }
  .medisync01-prose .adg-cause--fig .adg-cause__fig{
    grid-row: 1 / span 3;
    margin: 0;
  }
  .medisync01-prose .adg-cause--fig .adg-cause__fig img{ height: 96px; }
}

/* 증상 장면 4컷 ---------------------------------------------------------
   전체가 16:9 인 띠 하나를 가로로 4등분한다. 칸 하나는 4:9 —
   세로로 긴 창이라 인물 한 명이 꽉 차 보인다.

   비율은 aspect-ratio 로 띠에 한 번만 건다. 칸마다 걸면 반올림 차이로
   높이가 1px 씩 어긋나 아래 선이 톱니처럼 보인다.

   이미지는 2:3 원본을 object-fit:cover 로 담는다. 미리 4:9 로 잘라 두면
   화면이 접혀 칸 비율이 달라질 때 쓸 수 없다. */
/* 섹션 01 과 02 사이에 놓이는 전체 폭 띠 — 레일 칸까지 쓴다.
   섹션 안(.adg-sec__main)에 두면 레일의 큰 번호가 제목이 아니라 사진과
   나란히 서서, 번호와 제목이 서로 떨어져 보인다. */
.medisync01-prose .adg-scenes{
  margin: 0;
  padding: clamp(40px, 5vw, 64px) 0 clamp(8px, 1vw, 14px);
  border-top: 1px solid var(--adg-line);
}
.medisync01-prose .adg-scenes__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  aspect-ratio: 16 / 9;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;            /* 둥근 모서리로 사진을 잘라 낸다 */
}
.medisync01-prose .adg-scene{
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--adg-line);
}
.medisync01-prose .adg-scene img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;  /* 얼굴이 위쪽에 있어 조금 위를 본다 */
}
/* 글자는 이미지에 굽지 않고 얹는다 — 문구를 고치거나 번역할 수 있어야 한다.
   사진 아래쪽이 밝은 컷도 있어 어두운 그라데이션을 깔아 대비를 확보한다. */
.medisync01-prose .adg-scene figcaption{
  position: absolute;
  inset: auto 0 0 0;
  padding: 34px 16px 16px;
  background: linear-gradient(180deg, rgba(16, 20, 28, 0) 0%, rgba(16, 20, 28, .78) 62%, rgba(16, 20, 28, .88) 100%);
  color: #fff;
}
.medisync01-prose .adg-scene__n{
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .72);
  font-variant-numeric: tabular-nums;
}
.medisync01-prose .adg-scene__t{
  display: block;
  font-size: clamp(13px, 1.15vw, 15px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.02em;
  word-break: keep-all;
}
.medisync01-prose .adg-scenes__note{
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--adg-mute);
}


/* 섹션 안의 작은 제목 — 원문에 h5 로 들어 있던 소제목. */
.medisync01-prose .adg-subh{
  margin: clamp(22px, 2.6vw, 32px) 0 12px;
  font-size: clamp(16px, 1.6vw, 18px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.02em;
  color: var(--adg-ink);
}
.medisync01-prose .adg-subh:first-child{ margin-top: 0; }

/* 섹션 본문에 섞여 들어오는 설명 이미지.
   원고마다 크기가 제각각이라 폭을 묶고 가운데 정렬한다 — 안 그러면
   작은 이미지는 왼쪽에 붙고 큰 이미지는 단을 뚫는다. */
.medisync01-prose .adg-sec__fig{
  margin: clamp(22px, 2.6vw, 32px) auto 0;
  max-width: 720px;
}
.medisync01-prose .adg-sec__fig img{ width: 100%; }

/* 홀로 서는 정사각 그림.
   기본 .adg-sec__fig 는 720px 액자라 정사각 원본이 들어오면 세로로 720px 를
   먹어 절 하나를 통째로 차지한다. 홀로 놓일 때는 조금 줄여 본문과 균형을 잡는다. */
.medisync01-prose .adg-sec__fig--sq{
  max-width: 520px;
}

/* 가로로 긴 띠 이미지(1920×600 협진 의료진 배너 등).
   기본 720px 액자에 넣으면 3.2:1 배너가 720×225 로 쪼그라들어 안의 글씨가
   안 읽히고, `.adg-figs` 격자에 넣으면 4:3 으로 잘려 인물이 반쯤 날아간다
   (「아랫배 통증」·「오른쪽 윗배 통증」이 그 상태였다).
   폭 제한을 풀어 절 본문 폭을 다 쓰게 하고, 비율은 원본 그대로 둔다. */
.medisync01-prose .adg-sec__fig--band{
  max-width: none;
}
.medisync01-prose .adg-sec__fig--band + .adg-sec__fig--band{
  margin-top: clamp(12px, 1.4vw, 18px);
}
.medisync01-prose .adg-sec__fig--sq img{
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.medisync01-prose .adg-sec__fig--sq figcaption{
  text-align: left;
}

/* 한 절 안에서 **연달아 오는 그림**은 한 행을 나눠 쓴다.
   낱장으로 두면 720px 액자가 세로로 쌓여, 짝을 이루는 그림(정상↔이상,
   구조↔실제 영상)이 서로 다른 이야기처럼 떨어져 보이고 지면만 길어진다.
   묶음은 본문 변환기가 `.adg-figs--N` 으로 감싼다(연속 2장 이상일 때만).

   격자 안의 액자는 max-width 를 풀어야 칸을 꽉 채운다 — 720px 제한이
   남아 있으면 2열에서 칸보다 좁아져 가운데에 떠 버린다. */
.medisync01-prose .adg-figs{
  display: grid;
  gap: clamp(12px, 1.4vw, 18px);
  margin: clamp(22px, 2.6vw, 32px) 0 0;
  align-items: start;
}
.medisync01-prose .adg-figs .adg-sec__fig{
  margin: 0;
  max-width: none;
}
/* 짝수는 2열, 3장은 3열. 4장은 2×2 가 3+1 보다 안정적이다. */
.medisync01-prose .adg-figs--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.medisync01-prose .adg-figs--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.medisync01-prose .adg-figs--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 나란히 놓이면 액자 높이가 제각각이라 아랫변이 어긋난다.
   같은 행 안에서만 비율을 맞춘다(단독 그림은 원본 비율 그대로 둔다). */
.medisync01-prose .adg-figs .adg-sec__fig img{
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* 정사각 원본(773×773 · 1080×1080)이 많아 4:3 으로 자르면 위아래가 잘린다.
   3열은 칸이 좁으므로 정사각을 유지한다. */
.medisync01-prose .adg-figs--3 .adg-sec__fig img{ aspect-ratio: 1 / 1; }

/* 순백 배경 해부 삽화 묶음.
   cover 로 자르면 심장·폐가 화면 밖으로 밀린다. 원본이 이미 흰 바탕이라
   contain 으로 담고 남는 자리는 같은 흰색으로 메운다. */
.medisync01-prose .adg-figs--sq .adg-sec__fig img{
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
}
.medisync01-prose .adg-figs--sq .adg-sec__fig{
  border: 1px solid var(--adg-line);
  border-radius: var(--medisync01-radius, 12px);
  overflow: hidden;
  background: #fff;
}
.medisync01-prose .adg-figs--sq figcaption{
  padding: 10px 14px 12px;
  border-top: 1px solid var(--adg-line);
  font-size: 13px;
  line-height: 1.6;
  text-align: left;
  color: var(--adg-mute);
  background: #fff;
}

@media (max-width: 860px){
  /* 좁은 화면에서 3열은 손톱만해진다. 2열로 접고, 마지막 홀수 장은 전폭. */
  .medisync01-prose .adg-figs--3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .medisync01-prose .adg-figs--3 .adg-sec__fig:last-child{ grid-column: 1 / -1; }
  .medisync01-prose .adg-figs--3 .adg-sec__fig:last-child img{ aspect-ratio: 16 / 9; }
}
@media (max-width: 520px){
  /* 더 좁아지면 짝이라도 한 열로 — 2열에서는 그림 속 글자가 안 읽힌다. */
  .medisync01-prose .adg-figs{ grid-template-columns: 1fr !important; }
  .medisync01-prose .adg-figs .adg-sec__fig:last-child{ grid-column: auto; }
  .medisync01-prose .adg-figs .adg-sec__fig img{ aspect-ratio: auto; }
}

/* 원인 스트립에 설명이 없는 항목이 섞일 수 있다(용어만 있는 경우). */
.medisync01-prose .adg-cause h3:last-child{ margin-bottom: 24px; }

/* 자가 점검 ------------------------------------------------------------- */

/* 골격은 다른 블록과 같은 **선 구분**이다 (테마의 .sg-cases/.sg-case) —
   여는 굵은 선 2px + 행마다 1px 실선. 다만 여기 한 곳만 하늘색을 깐다.

   왜 여기인가. 이 지면에서 독자가 **자기 얘기인지 판단하는 자리**가
   체크리스트다. 나머지는 설명이고 여기만 행동을 부른다. 색을 한 곳에만
   쓰면 그 자리가 눈에 먼저 든다 — 여러 곳에 나눠 쓰면 아무 데도 강조되지 않는다.
   (빨강은 응급 표시 전용이라 여기 쓸 수 없다.)

   여는 선은 잉크가 아니라 브랜드 인디고로 바꾼다. 하늘색 위에서 잉크는
   그냥 어두운 줄로 보이지만, 인디고는 배경과 같은 계열이라 패널의
   윗변으로 읽힌다. */
.medisync01-prose .adg-check{
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.medisync01-prose .adg-check__cap{
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--adg-brand);
}
.medisync01-prose .adg-check__list{
  margin: 0;
  padding: clamp(6px, 1vw, 10px) clamp(20px, 2.6vw, 30px);
  list-style: none;
  border-top: 2px solid var(--adg-brand);
  background: var(--adg-check-bg);
}
/* 표식과 문장을 격자 두 칸으로 놓는다 — 테마 행이 [썸네일][내용] 인 것과 같은 골격.
   예전처럼 absolute + padding-left 로 두면 문장이 두 줄이 될 때
   두 번째 줄이 표식 아래로 흘러 들어간다. */
.medisync01-prose .adg-check__list > li{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin: 0;
  padding: 20px 0;
  border-bottom: 1px solid var(--adg-check-line);
  font-size: 16px;
  line-height: 1.65;
  color: var(--adg-ink);
}
/* 체크 표식은 그린다 — 원문은 "✔" 글자였는데, 글자로 두면 글꼴마다
   크기·기준선이 달라 줄이 흔들린다. */
.medisync01-prose .adg-check__list > li::before{
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--adg-brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}
.medisync01-prose .adg-check__list > li:last-child{ border-bottom: 0; }

.medisync01-prose .adg-flag{
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  padding: 18px 0 18px 22px;
  border-left: 3px solid var(--adg-brand);
}
.medisync01-prose .adg-flag p{
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--adg-ink);
}
.medisync01-prose .adg-flag p:last-child{ margin-bottom: 0; color: var(--adg-body); }

/* 의심 질환 카드 -------------------------------------------------------- */


/* 나머지 셋도 같은 선 문법으로. 대표 항목만 선이고 이쪽만 상자면
   한 섹션에 디자인 언어가 둘이 되어 부딪힌다.
   병렬 비교 항목이라 열은 유지하고 상자만 걷어낸다 — 세로 실선으로 나눈다. */
/* 구분선을 border 로 긋지 않고 **격자 틈으로 비쳐 보이게** 한다.
   컨테이너 배경을 선 색으로 깔고 칸마다 흰 배경을 덮으면, 1px 틈이 그대로
   구분선이 된다. border 로 그리면 열이 접힐 때마다 "몇 번째 칸의 오른쪽
   선을 끄고 몇 번째부터 위쪽 선을 켤지" 를 nth-child 로 일일이 맞춰야 하고,
   2열에서 마지막 항목의 행 구분선이 왼쪽 절반에서 끊겼다.
   이 방식은 세로·가로 선이 어느 폭에서든 끝까지 이어진다. */
.medisync01-prose .adg-cond{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  align-items: stretch;
  background: var(--adg-line);
  border-bottom: 1px solid var(--adg-line);
}
.medisync01-prose .adg-cond__card{
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.8vw, 30px) clamp(18px, 2.2vw, 26px);
  border: 0;
  border-radius: 0;
  background: #fff;              /* 컨테이너의 선 색을 덮는다 */
}
/* 양 끝 칸은 지면 좌우 끝에 맞춘다 — 안쪽 여백을 두면 본문 세로줄과 어긋난다. */
.medisync01-prose .adg-cond__card:first-child{ padding-left: 0; }
.medisync01-prose .adg-cond__card:last-child{ padding-right: 0; }
.medisync01-prose .adg-cond__card h3,
.medisync01-prose .adg-cond__feature h3{
  margin: 0 0 18px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--adg-line);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--adg-ink);
}
.medisync01-prose .adg-cond__card h3 small,
.medisync01-prose .adg-cond__feature h3 small{
  font-size: 13px;
  font-weight: 400;
  color: var(--adg-mute);
  letter-spacing: 0;
  white-space: nowrap;   /* "(심장" / "마비)" 로 갈라지지 않게 */
}
.medisync01-prose .adg-cond__card h3 small::before,
.medisync01-prose .adg-cond__feature h3 small::before{ content: "("; }
.medisync01-prose .adg-cond__card h3 small::after,
.medisync01-prose .adg-cond__feature h3 small::after{ content: ")"; }

/* 항목명과 값 — 라벨을 좌측 고정폭으로 두면 카드끼리 눈이 맞는다. */
.medisync01-prose .adg-cond dl,
.medisync01-prose .adg-cond__feature dl{ margin: 0 0 18px; display: grid; gap: 10px; }
.medisync01-prose .adg-cond__feature dl{ margin-bottom: 0; }
.medisync01-prose .adg-cond dl > div,
.medisync01-prose .adg-cond__feature dl > div{
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
}
.medisync01-prose .adg-cond dt,
.medisync01-prose .adg-cond__feature dt{
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--adg-mute);
  letter-spacing: -.01em;
}
.medisync01-prose .adg-cond dd,
.medisync01-prose .adg-cond__feature dd{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--adg-ink);
}

/* 응급 카드 — 유일하게 색을 쓰는 자리다. 나머지를 조용하게 둔 이유가 이것. */
/* 협심증 대표 행 — 이 질환만 **실제 조영술 영상**이 따로 있어
   한 줄을 통째로 쓴다. 왼쪽 설명, 오른쪽에 그림 두 장(구조 · 실제).
   상자를 쓰지 않고 선으로 여닫는 것은 다른 블록과 같다. */
.medisync01-prose .adg-cond__feature{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: clamp(24px, 3vw, 46px);
  align-items: center;
  margin: clamp(26px, 3.2vw, 40px) 0 0;
  padding: clamp(26px, 3vw, 34px) 0;
  border: 0;
  border-top: 2px solid var(--adg-ink);
  border-bottom: 1px solid var(--adg-line);
  border-radius: 0;
  background: none;
}
/* 그림 두 장은 **어느 화면에서든 나란히** 둔다 — 위아래로 쌓으면
   "구조 ↔ 실제" 의 짝이 끊긴다. 붙어 있어야 비교가 된다. */
.medisync01-prose .adg-cond__featureFigs{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 16px);
}
.medisync01-prose .adg-cond__fig.adg-cond__fig--pair{
  margin: 0;
  height: auto;   /* 카드용 고정 높이를 이긴다 (0,2,0 > 0,1,0) */
  overflow: visible;   /* 고정 높이일 때 캡션을 잘라내던 것을 푼다 */                 /* 카드용 고정 높이를 쓰지 않는다 */
  border-radius: 10px;
  overflow: hidden;
}
.medisync01-prose .adg-cond__fig.adg-cond__fig--pair img{
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
/* 실제 조영술은 어두운 사진이라 흰 지면에서 스스로 경계가 선다.
   일러스트(흰 배경)와 나란히 두면 둘의 무게가 달라 보이므로
   일러스트 쪽에만 옅은 바탕을 깔아 두 칸의 무게를 맞춘다. */
/* 바탕은 **그림 뒤에만** 깐다. figure 에 주면 캡션까지 덮여
   왼쪽 캡션만 색 띠 위에 앉고 오른쪽은 흰 바탕이라 짝이 어긋나 보인다. */
.medisync01-prose .adg-cond__fig.adg-cond__fig--pair:not(.is-real) img{
  background: var(--adg-wash);
  border-radius: 10px;
}
.medisync01-prose .adg-cond__fig.adg-cond__fig--pair.is-real img{ object-fit: cover; }
.medisync01-prose .adg-cond__fig.adg-cond__fig--pair figcaption{
  padding: 9px 4px 0;
  border-top: 0;
  background: none;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--adg-mute);
  text-align: center;
}

/* 설명 그림 — 정사각 일러스트를 **고정 높이 칸**에 담는다.
   aspect-ratio 로 칸 폭에 비율을 걸면 안 된다. 양 끝 카드는 지면 끝에
   붙이려고 한쪽 안쪽 여백이 없어 폭이 더 넓은데, 그러면 그 두 칸의
   그림만 커져 **제목 줄이 카드마다 어긋난다.** 실제로 그렇게 밀렸다.
   높이를 고정하면 폭과 무관하게 네 그림이 같은 크기로 선다.

   높이를 명시하므로 이미지가 늦게 와도 아래 글이 밀리지 않는다(CLS). */
.medisync01-prose .adg-cond__fig{
  margin: 0 0 16px;
  height: clamp(150px, 15.5vw, 205px);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  border: 0;
}
.medisync01-prose .adg-cond__fig img{
  width: 100%;
  height: 100%;
  object-fit: contain;   /* 흰 배경 일러스트라 잘라내지 않고 담는다 */
}

.medisync01-prose .adg-cond__disclaimer{
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--adg-mute);
}

/* 실제 조영술 영상 — 그림 넷이 기전을 설명하고, 이 한 장이 "검사에서
   이렇게 보인다" 를 잇는다. 일러스트와 구분되게 액자를 살려 둔다. */
.medisync01-prose .adg-cond__real{
  max-width: 380px;
  margin: clamp(26px, 3.2vw, 38px) 0 0;
}
.medisync01-prose .adg-cond__real img{ width: 100%; }

/* 응급 열은 **여는 선만 빨강**으로 표시한다.
   채운 상자를 쓰면 선 문법에서 이 칸만 튀어나오고, 아래 빨간 띠와도 겹쳐
   같은 정보를 두 번 강조하게 된다. box-shadow inset 을 쓰는 이유는
   border-top 을 주면 격자 안에서 이 칸만 아래로 1px 밀리기 때문이다. */
.medisync01-prose .adg-cond__card.is-urgent{
  /* none 이 아니라 흰색이어야 한다. 격자 틈 방식에서 칸을 투명하게 두면
     컨테이너의 선 색이 그대로 비쳐 이 열만 회색으로 뜬다. */
  background: #fff;
  box-shadow: inset 0 2px 0 0 var(--adg-alert);
}
.medisync01-prose .adg-cond__card.is-urgent h3{ color: var(--adg-alert); }
.medisync01-prose .adg-cond__urgent{
  display: flex;
  align-items: center;
  gap: 10px;
  /* auto 로 남는 공간을 흡수해 카드 높이가 달라도 바닥에 붙는다.
     최소 간격은 위쪽 dl 의 margin-bottom 이 만든다 — 여기에 padding 을
     주면 띠(빨간 배경) 자체가 두꺼워진다. */
  margin: auto 0 0;
  padding: 13px 16px;
  border-radius: 12px;
  background: var(--adg-alert);
  color: #fff;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.5;
}
.medisync01-prose .adg-cond__urgent strong{ color: #fff; font-weight: 700; }
/* 아이콘과 문장은 **정확히 두 덩어리**여야 한다.
   문장을 flex 컨테이너의 자식 텍스트로 흘려 두면 "즉시" / <strong>119</strong> /
   "또는 응급실로…" 가 각각 별개의 flex 아이템이 되어, 좁은 칸에서
   "11 / 9" 처럼 숫자 한가운데가 잘린다. 실제로 그렇게 깨졌다. */
.medisync01-prose .adg-cond__urgentIcon{
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.medisync01-prose .adg-cond__urgentTxt{ flex: 1 1 auto; min-width: 0; }
.medisync01-prose .adg-cond__urgentTxt strong{ white-space: nowrap; }




/* 진단 CTA — 전체 폭 사진 + 인디고 베일 + 오른쪽 문구 ------------------

   본문은 1200px 안에 있으므로 화면 끝까지 펴려면 컨테이너를 뚫어야 한다.
   `margin-inline: calc(50% - 50vw)` 이 그 일을 한다. 100vw 가 스크롤바
   .medisync01-prose 폭만큼 넘치는 문제는 **테마 쪽 `.sg{ overflow-x: clip }`** 이 받는다
   (medisync01-symptom.css). 여기(.adg)에 걸면 안 된다 — .adg 는 1200px 컨테이너
   안이라 확장분을 도로 잘라 버린다. 실제로 그렇게 갇혔다. */
.medisync01-prose .adg-cta{
  position: relative;
  min-height: clamp(380px, 42vw, 520px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  margin-top: clamp(44px, 5.5vw, 76px);
}

/* 전체 폭으로 펴는 것은 **지면(.sg) 안에서만** 한다.
   100vw 로 컨테이너를 뚫는 기법이라 넘치는 만큼을 잘라 줄 조상이 필요한데,
   그 역할을 medisync01-symptom.css 의 `.sg { overflow-x: clip }` 이 한다.
   콘솔 편집기 캔버스에는 .sg 가 없다 — 거기서 확장이 걸리면 잘라 줄 것이
   없어 캔버스가 가로로 터진다. 조건을 붙여 캔버스에서는 컨테이너 폭으로 둔다. */
.sg .medisync01-prose .adg-cta{
  margin-inline: calc(50% - 50vw);
  width: 100vw;
}

.medisync01-prose .adg-cta__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 의사·모니터가 왼쪽에 오도록. 세로는 얼굴이 잘리지 않게 살짝 위로. */
  object-position: 32% 42%;
  z-index: -2;
}
/* 인디고 베일 — 왼쪽은 사진을 살리고 오른쪽으로 갈수록 짙어진다.
   검정 대신 브랜드 인디고를 쓰면 이 띠가 지면의 다른 인디고(사례 캐러셀)와
   같은 계열로 읽힌다. */
.medisync01-prose .adg-cta::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    rgba(9,10,115,0) 0%,
    rgba(9,10,115,.26) 34%,
    rgba(9,10,115,.86) 64%,
    rgba(9,10,115,.95) 100%);
}
.medisync01-prose .adg-cta__in{
  width: min(var(--medisync01-content-width, 1200px), calc(100% - 48px));
  margin-inline: auto;
  padding: clamp(40px, 5vw, 64px) 0;
}
.medisync01-prose .adg-cta__copy{
  margin-left: auto;              /* 오른쪽으로 민다 */
  max-width: 500px;
  color: #fff;
}
.medisync01-prose .adg-cta__k{
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--medisync01-olive, #C2E8FC);
}
.medisync01-prose .adg-cta__h{
  margin: 0 0 18px;
  font-size: clamp(23px, 2.9vw, 34px);
  font-weight: 600;
  line-height: 1.36;
  letter-spacing: -.03em;
  color: #fff;
  word-break: keep-all;
}
.medisync01-prose .adg-cta__p{
  margin: 0;
  font-size: clamp(15px, 1.4vw, 16.5px);
  line-height: 1.85;
  color: rgba(255,255,255,.9);
  word-break: keep-all;
}
.medisync01-prose .adg-cta__p strong{ color: #fff; font-weight: 600; }
.medisync01-prose .adg-cta__note{
  margin: 16px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(255,255,255,.62);
}

@media (max-width: 860px){
  /* 좁아지면 오른쪽 칸이 사라진다 — 베일을 위아래로 돌려 아래쪽을 짙게 하고
     문구를 그 위에 얹는다. 가로 그라데이션 그대로면 글자가 사진에 묻힌다. */
  .medisync01-prose .adg-cta{ min-height: 0; align-items: flex-end; }
  .medisync01-prose .adg-cta__bg{ object-position: 34% 34%; }
  .medisync01-prose .adg-cta::before{
    background: linear-gradient(180deg,
      rgba(9,10,115,.18) 0%,
      rgba(9,10,115,.55) 34%,
      rgba(9,10,115,.92) 66%,
      rgba(9,10,115,.96) 100%);
  }
  .medisync01-prose .adg-cta__in{ padding: clamp(150px, 34vw, 230px) 0 clamp(30px, 5vw, 44px); }
  .medisync01-prose .adg-cta__copy{ margin-left: 0; max-width: none; }
}

/* Diagnosis 띠 ↔ 사례 띠 이음매 -----------------------------------------

   본문 마지막 블록이 Diagnosis 띠(.adg-cta)이고 바로 다음 절이 사례
   캐러셀(#sg-cases)인 지면이 23건 있다(검사 상세 대부분 + 증상가이드 일부).
   그 사이에 흰 줄 193px 이 낀다 —
     .sg-section 아래 여백 116px + 아래 실선 1px + .alc 위 여백 76px.
   둘 다 전체폭 인디고 띠라, 같은 색 띠가 흰 줄 하나로 갈라져 보인다.
   여백을 걷어 한 덩어리로 잇는다.

   조건을 :has() 로 좁히는 이유. 관련 검사(#sg-exams)가 사이에 끼는 지면
   16건에서는 두 띠가 붙어 있지 않아 이 여백이 그대로 필요하다. 그래서
   "본문이 Diagnosis 띠로 끝나고 **바로 뒤가** 사례 캐러셀일 때"로 못박는다
   (실측: 23건에만 걸리고 나머지 19건에는 걸리지 않는다).

   .adg-cta 는 .adg/.gne-egd01 래퍼 안의 마지막 자식이라 :last-child 로 잡힌다.
   :has() 미지원 브라우저에서는 지금처럼 흰 줄이 남을 뿐 깨지지 않는다. */
.sg .sg-section:has(.adg-cta:last-child):has(+ #sg-cases){
  padding-bottom: 0;
  border-bottom: 0;
}
/* .alc 위 여백은 파셜 안 <style> 에 있어 문서 순서상 뒤에 온다.
   id + 클래스로 특이도를 올려 두어야 이긴다. */
.sg .sg-section:has(.adg-cta:last-child) + #sg-cases > .alc{
  margin-top: 0;
}

/* 반응형 ---------------------------------------------------------------- */

/* 좁아지면 4칸이 손가락만큼 좁아진다. 2열로 접고 비율도 바꾼다.
   16:9 를 유지한 채 2열로 만들면 칸이 8:9 로 뭉툭해져 인물이 잘린다. */
@media (max-width: 860px){
  .medisync01-prose .adg-scenes__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    aspect-ratio: 8 / 9;       /* 2열 × 2행 → 칸은 그대로 4:9 */
  }
}
@media (max-width: 520px){
  .medisync01-prose .adg-scenes__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    aspect-ratio: 4 / 5;       /* 더 좁으면 칸을 조금 넓혀 얼굴이 살게 */
  }
  .medisync01-prose .adg-scene figcaption{ padding: 26px 11px 12px; }
  .medisync01-prose .adg-scene__t{ font-size: 12.5px; }
}

@media (max-width: 1000px){
  .medisync01-prose .adg-cause{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 항목 수 규칙(`:has()`)은 (0,3,0) 이라 위 줄(0,2,0)로는 못 이긴다.
     4칸짜리 스트립이 태블릿·모바일에서도 4열을 붙들고 있어서, 「호흡곤란」
     04 절의 질환 4개가 500px 안에서 4열로 눌려 **글자가 세로 한 줄씩
     쏟아졌다**. 같은 모양으로 다시 적어야 접힌다.
     4칸은 **2×2** 로 접는다 — 3열로 두면 둘째 줄에 하나만 남아 어색하다.
     2·3칸짜리는 이미 3 이하라 그대로 둔다. */
  .medisync01-prose .adg-cause:has(> li:nth-child(4):last-child){ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 구분선은 위의 3열 기준(`3n`·`n+4`)이라 2열에서는 자리가 어긋난다 —
     행 끝(02)에 세로선이 남고 열 사이(03)에는 선이 없으며, 두 행 사이 가로선도
     빠진다. 2열 기준으로 다시 긋는다. `:has()` 가 붙어 (0,4,1) 이라 위를 이긴다. */
  .medisync01-prose .adg-cause:has(> li:nth-child(4):last-child) > li:nth-child(3n){ border-right: 1px solid var(--adg-line); }
  .medisync01-prose .adg-cause:has(> li:nth-child(4):last-child) > li:nth-child(2n){ border-right: 0; }
  .medisync01-prose .adg-cause:has(> li:nth-child(4):last-child) > li:nth-child(n+3){ border-top: 1px solid var(--adg-line); }
  /* 3열로 접히면 1·2·3 행의 오른쪽 칸에 세로선이 남아 어긋나 보인다.
     3의 배수 자리에서만 선을 지운다. */
  .medisync01-prose .adg-cause > li:nth-child(3n){ border-right: 0; }
  .medisync01-prose .adg-cause > li:nth-child(n+4){ border-top: 1px solid var(--adg-line); }
}

/* 그림 스트립은 **여기서 한 열이 된다.**
   위 조판의 주석은 "한 열이 되면 글 옆으로 접어 붙인다" 인데, 정작 한 열이 되는
   지점은 560px 이라 561~700px 에서는 3열 안에 96px 그림과 글이 함께 들어가
   한 칸이 130px 남짓으로 눌렸다("다리에서 생긴 / 혈전이 폐혈관을 / 막아 발생.").
   접는 지점을 `.adg-cause--fig > li` 의 96px 그리드와 맞춘다.

   **이 블록은 반드시 위 1000px 블록 뒤에 있어야 한다.** 항목 수 규칙(`:has()`)이
   (0,3,0) 이라 같은 모양으로 다시 적어 명시도를 맞추는데, 그러면 승부는 순서로
   갈린다 — 앞에 두면 1000px 블록의 3열이 그대로 이긴다(실제로 그랬다).
   그림 없는 스트립(.adg-cause 단독)은 종전대로 560px 까지 3열을 유지한다. */
@media (max-width: 700px){
  .medisync01-prose .adg-cause--fig,
  .medisync01-prose .adg-cause--fig:has(> li:nth-child(2):last-child),
  .medisync01-prose .adg-cause--fig:has(> li:nth-child(3):last-child),
  .medisync01-prose .adg-cause--fig:has(> li:nth-child(4):last-child){
    grid-template-columns: 1fr;
    border-top: 0;
  }
  .medisync01-prose .adg-cause--fig > li{
    border-right: 0;
    border-top: 1px solid var(--adg-line);
    padding: 20px 0 4px;
  }
}

@media (max-width: 860px){
  /* 레일을 위로 눕힌다 — 번호와 라벨을 한 줄로. */
  .medisync01-prose .adg-sec{ grid-template-columns: 1fr; gap: 18px; }

  /* 우측 그림도 같이 접는다.
     `:has()` 규칙이 (0,3,0) 이라 위의 `.medisync01-prose .adg-sec`(0,2,0)로는
     못 이긴다 — 같은 모양으로 다시 적어야 3칸이 풀린다.
     접힌 뒤에도 **정사각을 유지한다.** 16:9 로 눕히면 원리 도해의 인체가
     위아래로 잘린다. 대신 폭을 묶어 글 아래에서 사진만 커지지 않게 한다. */
  .medisync01-prose .adg-sec:has(> .adg-aside){ grid-template-columns: 1fr; }
  .medisync01-prose .adg-aside{ padding-top: 0; max-width: 360px; }
  .medisync01-prose .adg-sec__rail{
    position: static;
    display: flex;
    align-items: baseline;
    gap: 12px;
  }
  .medisync01-prose .adg-num{ font-size: 30px; }
  .medisync01-prose .adg-sec__rail .adg-kicker{ margin-top: 0; }

  .medisync01-prose .adg-lede{ grid-template-columns: 1fr; }
  .medisync01-prose .adg-lede__fig{ order: -1; }          /* 모바일에선 사진이 먼저 눈에 든다 */

  /* 대표 행을 한 열로 접고 **그림 두 장을 위로** 올린다.
     좁은 화면에서는 사진이 먼저 눈에 들고, 설명은 그 아래에서 읽힌다.
     두 장은 여기서도 나란히 둔다 — 위아래로 쌓으면 "구조 ↔ 실제" 의
     짝이 끊겨 각각 다른 이야기처럼 보인다. */
  .medisync01-prose .adg-cond__feature{ grid-template-columns: 1fr; gap: 22px; }
  .medisync01-prose .adg-cond__featureFigs{ order: -1; }

  /* 열 수만 바꾸면 된다 — 구분선은 격자 틈이 알아서 그린다. */
  .medisync01-prose .adg-cond{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 칸이 넓어지면 라벨·값을 다시 나란히 — 세로로 쌓으면 허전하다. */
  .medisync01-prose .adg-cond dl > div{ display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: baseline; }
  .medisync01-prose .adg-cond dt{ margin-bottom: 0; }
  .medisync01-prose .adg-cond__card{ padding-left: clamp(18px, 2.2vw, 26px); padding-right: clamp(18px, 2.2vw, 26px); }
  .medisync01-prose .adg-cond__card:nth-child(odd){ padding-left: 0; }
  .medisync01-prose .adg-cond__card:nth-child(even){ padding-right: 0; }

  /* 항목이 홀수면 마지막 칸이 비는데, 격자 틈 방식에서는 그 빈칸에
     컨테이너 배경(선 색)이 그대로 드러나 큰 회색 덩어리가 된다.
     마지막 항목을 두 칸에 걸쳐 빈칸 자체를 없앤다. */
  .medisync01-prose .adg-cond__card:last-child:nth-child(odd){
    grid-column: 1 / -1;
    padding-right: 0;
  }
}

@media (max-width: 620px){
  .medisync01-prose .adg-cond{ grid-template-columns: 1fr; }
  .medisync01-prose .adg-cond__card{ padding-left: 0; padding-right: 0; }
  /* 1열에서는 칸을 조금 키워도 된다. */
  .medisync01-prose .adg-cond__fig{ height: 230px; }
}

@media (max-width: 560px){
  .medisync01-prose .adg-cause{ grid-template-columns: 1fr; border-top: 0; }
  /* 위와 같은 이유 — 항목 수 규칙을 한 열로 되돌린다. */
  .medisync01-prose .adg-cause:has(> li:nth-child(2):last-child),
  .medisync01-prose .adg-cause:has(> li:nth-child(3):last-child),
  .medisync01-prose .adg-cause:has(> li:nth-child(4):last-child){ grid-template-columns: 1fr; }
  .medisync01-prose .adg-cause > li{
    border-right: 0;
    border-top: 1px solid var(--adg-line);
    padding: 20px 0 4px;
  }
  .medisync01-prose .adg-cause > li:nth-child(n+4){ border-top: 1px solid var(--adg-line); }
  .adg-cond dl > div,
.medisync01-prose .adg-cond__feature dl > div{ grid-template-columns: 1fr; gap: 2px; }
  .adg-cond dt,
.medisync01-prose .adg-cond__feature dt{ font-size: 12px; }
}

@media (prefers-reduced-motion: reduce){
  .medisync01-prose .adg-sec__rail{ position: static; }
}