/* ==========================================================================
   매일감비환 — 마운자로 이후 요요관리 랜딩
   기존 감비환 랜딩(청록 + 명조)의 결을 유지하되 여백과 위계를 정제한 버전
   ========================================================================== */

/* --- 1. 폰트 --------------------------------------------------------------- */
/* 원본 mail100diet.com 이 쓰는 서체 그대로(imweb 배포본을 자체 호스팅) */
@font-face {
  font-family: "chosun_ilbo_myungjo";
  src: url("fonts/chosun_ilbo_myungjo.woff2?v=1") format("woff2"),
       url("fonts/chosun_ilbo_myungjo.woff?v=1") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 원본이 이미지로 넣었던 구간은 산세리프(Pretendard)였습니다 — 그 구간만 이 서체를 씁니다 */
@font-face {
  font-family: "Pretendard Variable";
  src: local("Pretendard Variable"),
       url("fonts/PretendardVariable.woff2?v=1") format("woff2-variations");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

/* 조선일보 100년체 — 조선일보명조에 없는 문장부호(· — “ ” → ① 『 』 등)만
   메우는 용도입니다. 그 글자들만 남겨 24KB 로 줄였습니다. */
@font-face {
  font-family: "ChosunCentennial";
  src: url("fonts/ChosunCentennial.woff2?v=2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 원본(mail100diet.com)은 본문·제목·버튼까지 전부 조선일보명조를 씁니다.
   Pretendard 는 폰트가 안 뜰 때의 대체용입니다. */

/* 제목용 서체는 --font-heading 한 줄만 바꾸면 전체가 교체됩니다.
   후보: "Pretendard"(현재) / "Gowun Batang" / "Noto Serif KR"
   (명조 계열로 되돌릴 때는 index.html 의 구글폰트 link 도 함께 살려주세요) */

/* --- 2. 토큰 --------------------------------------------------------------- */
:root {
  /* 브랜드 청록 — 기존 랜딩 실측값 */
  --teal: #2cabbc;
  --teal-deep: #1994a4;
  --teal-ink: #12707d;
  --teal-tint: #e9f6f8;
  --teal-tint-2: #f5fbfc;
  --teal-text: #35b7c8;   /* 원본 강조 텍스트 색 rgb(53,183,200) */

  /* 무채색 */
  --ink: #1b1d1f;
  --ink-2: #4a4f55;
  --muted: #878d93;
  --line: #e7eaec;
  --line-soft: rgba(0, 0, 0, 0.06);

  /* 배경 */
  --bg: #ffffff;
  --bg-soft: #f9f9f9;
  --bg-dark: #14171a;
  --canvas: #e9ebec;

  /* 강조 */
  --kakao: #fee500;
  --kakao-ink: #191600;
  --warn: #d8563a;
  --red: #e0342b;
  --warn-tint: #fdf1ee;

  /* 타이포 */
  --font-myungjo: "chosun_ilbo_myungjo", "ChosunCentennial", "Nanum Myeongjo", "Apple SD Gothic Neo", serif;
  --font-heading: var(--font-myungjo);
  --font-sans: var(--font-myungjo);
  --font-ui: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;

  /* 리듬 */
  --wrap: 520px;
  --pad: 15px;
  --gap-sec: 80px;
  --gap-sec-sm: 56px;

  /* 모션 */
  --ease: cubic-bezier(0, 0.55, 0.45, 1);
  --dur: 820ms;

  --radius: 5px;
  --radius-card: 16px;
}

/* --- 3. 리셋 --------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0;
  /* 한글은 단어 중간에서 절대 끊기지 않게 */
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

/* 줄바꿈 다듬기
   - 제목류: balance → 여러 줄의 길이를 고르게 나눠 마지막 줄만 짧아지는 걸 막음
   - 본문류: pretty → 마지막 줄에 한 단어만 남는(고아 단어) 현상을 막음 */
.hero__title,
.h-lead,
.h-sec,
.h-sub,
.eyebrow,
.card__title,
.option__t,
.step__t,
.point__t,
.closing__key,
.stat__cap,
.faq__q > span:not(.q):not(.chev) {
  text-wrap: balance;
}

.body,
.note,
.bubble,
.evidence__src,
.faq__a p,
.foot__legal {
  text-wrap: pretty;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
p,
ul,
ol,
figure,
dl,
dd {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

/* --- 4. 페이지 골격 -------------------------------------------------------- */
.page {
  max-width: var(--wrap);
  margin: 0 auto;
  background: var(--bg);
  overflow: hidden;
}

@media (min-width: 560px) {
  .page {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
  }
}

.sec {
  padding: var(--gap-sec) var(--pad);
}

.sec--tight {
  padding-block: var(--gap-sec-sm);
}

.sec--flush {
  padding-inline: 0;
}

.sec--soft {
  background: var(--bg-soft);
}

.sec--tint {
  background: var(--teal-tint-2);
}

.sec--dark {
  background: var(--bg-dark);
  color: #fff;
}

/* 밝은 섹션이 연달아 붙을 때만 얇은 선으로 나눔 */
.sec + .sec:not(.sec--soft):not(.sec--tint):not(.sec--dark) {
  border-top: 1px solid var(--line-soft);
}

@media (max-width: 420px) {
  :root {
    --pad: 15px;
    --gap-sec: 62px;
    --gap-sec-sm: 46px;
  }
}

/* --- 5. 타이포 부품 -------------------------------------------------------- */
/* 섹션 태그 — 옅은 배경 대신 청록을 꽉 채워 확실히 눈에 걸리게 */
.eyebrow {
  display: inline-block;
  padding: 9px 22px;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.5;
}

.sec--dark .eyebrow {
  background: rgba(255, 255, 255, 0.12);
  color: #7fd6e2;
  box-shadow: none;
}

.label-en {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}

.h-lead {
  font-family: var(--font-heading);
  font-size: clamp(28px, 8vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

.h-sec {
  font-family: var(--font-heading);
  font-size: clamp(28px, 8vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

.h-sub {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.012em;
}

.body {
  font-size: 24px;
  line-height: 1.5;
  color: var(--ink);
}

.body--sm {
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-2);
}

.note {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

.center {
  text-align: center;
}

/* 브랜드명 강조 — 원본 36px / 700 / #35B7C8 */
.brand {
  font-size: 1.2em;
  font-weight: 700;
  color: var(--teal-text);
}

/* 큰 글씨 강조는 원본 색(#35B7C8), 작은 글씨는 대비를 위해 진한 청록 */
.tl {
  color: var(--teal-text);
}

.body--sm .tl,
.note .tl {
  color: var(--teal-deep);
}

.b {
  font-weight: 700;
  color: var(--ink);
}

.stack > * + * {
  margin-top: 22px;
}

.stack-sm > * + * {
  margin-top: 9px;
}

.stack-lg > * + * {
  margin-top: 44px;
}

/* 청록 브러시 밑줄 — 기존 랜딩의 손그림 밑줄을 정제한 형태 */
.mark {
  /* 줄이 넘어가도 밑줄 하이라이트가 끊기지 않게 */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background: linear-gradient(
    to top,
    rgba(44, 171, 188, 0.26) 0 34%,
    transparent 34%
  );
  padding: 0 1px;
  font-weight: 700;
  color: var(--ink);
}

/* --- 5-b. 원본(mail100diet.com) 타이포 규격 그대로 ------------------------- */
/* 실측: 대제목 30/700 · 브랜드 36/700 · 스토리 26/400 · 본문 24/400
        줄 사이 8~9px · 문단 사이 38~48px · 자간 normal · 정렬 center       */

.o {
  text-align: center;
  color: #000;
  letter-spacing: -0.01em;
}

.o + .o {
  margin-top: 46px;
}

.o36 { font-size: 36px; font-weight: 700; line-height: 1.28; }
.o30 { font-size: 30px; font-weight: 700; line-height: 1.38; }
.o30n{ font-size: 30px; font-weight: 400; line-height: 1.38; }
.o26 { font-size: 26px; font-weight: 400; line-height: 1.42; }
.o24 { font-size: 24px; font-weight: 400; line-height: 1.46; }
.o22 { font-size: 22px; font-weight: 400; line-height: 1.5; }
.o20 { font-size: 20px; font-weight: 400; line-height: 1.52; }
.o18 { font-size: 18px; font-weight: 700; line-height: 1.5; }
.o16 { font-size: 16px; font-weight: 400; line-height: 1.6; }
.o18n{ font-size: 18px; font-weight: 400; line-height: 1.5; }
.o .up20 { font-size: 20px; font-weight: 700; }
.o15 { font-size: 15px; font-weight: 400; line-height: 1.66; }

/* 강조 — 원본은 굵기·크기·색 세 가지로만 강조합니다 */
.o b,
.o strong { font-weight: 700; }
.o.q,  .o .q  { color: #35b7c8; }   /* 주 청록 */
.o.q2, .o .q2 { color: #5ab9be; }   /* 보조 청록 */
.o.it, .o .it { font-style: italic; }   /* 원본이 눕힌 인용 문구 */
.o .ul { text-decoration: underline; text-underline-offset: 3px; }
.o .up { font-size: 1.25em; }       /* 단어만 크게 (결혼·육아·엄마) */
.o .up7{ font-size: 1.25em; font-weight: 700; }
.o.gray, .o .gray { color: #b5b5b5; }
.o.red,  .o .red  { color: #fa0000; }

/* 원본 이미지 → 텍스트 전환 블록 */
.o-band { background: #f6f6f6; }
.pill {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 10px;
  background: #e2f4f7;
  color: #35b7c8;
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.o.ostep { margin-top: 30px; }
.o.ohead { margin-top: 54px; }
.thinw { font-weight: 400; }
.dots { color: #35b7c8; font-size: 26px; letter-spacing: 0.42em; line-height: 1; }
.thin { font-weight: 400; font-size: 0.85em; }

/* 사진 — 원본은 전부 375px 풀블리드, 모서리 0, 사진 사이 여백 0 */
.ophoto {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* 블록 사이 세로 리듬 */
.oblock { padding: 62px var(--pad); }
.oblock--tight { padding: 44px var(--pad); }
.oblock--soft { background: #f9f9f9; }

.obtn-wrap {
  padding: 0 var(--pad);
  margin-top: 40px;
  display: grid;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

/* --- 6. 버튼 --------------------------------------------------------------- */
/* 참고 사이트(mail100diet.com) 실측 규격: 14px / 700 / padding 8~9px 20px / radius 5px */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 11px 26px;
  border-radius: var(--radius);
  background: var(--teal-ink);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 6px 18px rgba(18, 112, 125, 0.24);
  transition: background 200ms var(--ease), transform 200ms var(--ease),
    box-shadow 200ms var(--ease);
}

/* 라벨(알약)과 확실히 구분되도록 주요 CTA 에는 화살표를 붙임 */
.btn:not(.btn--ghost):not(.btn--kakao):not(.btn--sm)::after {
  content: "→";
  font-size: 0.95em;
  line-height: 1;
  transform: translateY(-0.5px);
  transition: transform 220ms var(--ease);
}

.btn:not(.btn--ghost):not(.btn--kakao):not(.btn--sm):hover::after {
  transform: translate(3px, -0.5px);
}

.btn:hover {
  background: #0d5c66;
  box-shadow: 0 8px 22px rgba(18, 112, 125, 0.34);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: none;
}

.btn:focus-visible {
  outline: 2px solid var(--teal-ink);
  outline-offset: 3px;
}

/* 여러 개를 세로로 쌓을 때 — 가장 긴 버튼에 폭을 맞춰 좌우를 나란히 */
.btn-stack {
  display: grid;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

.btn-stack .btn {
  width: 100%;
}

/* 가로로 늘리지 않고, 글자 길이에 맞춘 폭으로 가운데 정렬 */
.btn--block {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

/* 같은 '신청/예약' 계열이지만 한 단계 밝게 — 주 CTA 와 구분 */
.btn--alt {
  background: var(--teal);
  box-shadow: 0 6px 18px rgba(44, 171, 188, 0.24);
}

.btn--alt:hover {
  background: var(--teal-deep);
  box-shadow: 0 8px 22px rgba(44, 171, 188, 0.32);
}

.btn--ghost {
  background: #fff;
  color: var(--teal-ink);
  box-shadow: inset 0 0 0 1.5px var(--teal);
}

.btn--ghost:not(:hover) {
  box-shadow: inset 0 0 0 1.5px var(--teal);
}

.btn--ghost:hover {
  background: var(--teal-tint);
  box-shadow: inset 0 0 0 1.5px var(--teal), 0 6px 18px rgba(25, 148, 164, 0.16);
}

.btn--kakao {
  background: var(--kakao);
  color: var(--kakao-ink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.btn--kakao:hover {
  background: #f2d900;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

.btn--sm {
  min-height: 32px;
  padding: 6px 15px;
  font-size: 13.5px;
  background: var(--teal);
  box-shadow: none;
}

.btn--sm:hover {
  background: var(--teal-deep);
  box-shadow: none;
}

.btn .ico {
  width: 17px;
  height: 17px;
  flex: none;
}

/* --- 7. 헤더 --------------------------------------------------------------- */
.hdr {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 60;
  width: 100%;
  max-width: var(--wrap);
  left: 50%;
  transform: translateX(-50%);
  height: 58px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px 0 var(--pad);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms var(--ease), background 240ms var(--ease);
}

.hdr.is-stuck {
  border-bottom-color: var(--line);
}

.hdr__logo {
  font-family: "Montserrat", var(--font-ui);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.hdr__logo .dot {
  color: var(--teal);
}

.hdr__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 상단 메뉴는 로고와 같은 서체로 통일 (전 페이지 공통) */
.hdr__nav a,
.hdr__nav .btn {
  font-family: "Montserrat", var(--font-ui);
}

.hdr__nav a {
  padding: 8px 9px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink-2);
  transition: color 180ms var(--ease);
}

.hdr__nav a:hover {
  color: var(--teal-deep);
}

.hdr__nav .btn {
  margin-left: 4px;
}

/* --- 8. 히어로 ------------------------------------------------------------- */
.hero {
  padding-top: 58px;
  background: var(--bg-soft);
}

/* 원본 말풍선 이미지 실측: 배경 #EAEAEA · 폭 250px · 높이 99px · 간격 22px
   #1·#3 왼쪽 81px, #2 왼쪽 45px, 상단 38px / 하단 40px (375px 기준) */
.bubbles {
  padding: 38px 0 40px;
  background: #eaeaea;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.bubble {
  position: relative;
  width: 288px;
  max-width: calc(100% - 74px);
  min-height: 108px;
  padding: 0 16px;
  border-radius: 20px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  /* 줄바꿈 없이 한 줄로 — 화면 폭에 맞춰 글자 크기가 함께 줄어듭니다 */
  white-space: nowrap;
  font-size: clamp(15px, 5vw, 19px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-2);
}

.bubble strong {
  font-weight: 700;
  color: var(--teal-deep);
}

/* 문장이 긴 말풍선은 두 줄로 (메인 랜딩) */
.bubble--multi {
  white-space: normal;
  font-size: clamp(15.5px, 5vw, 19px);
  line-height: 1.55;
}

.bubble--multi strong {
  display: block;
  margin-top: 3px;
}

.bubble::after {
  content: "";
  position: absolute;
  bottom: 15px;
  width: 0;
  height: 0;
  border: 9px solid transparent;
}

.bubble--r {
  align-self: flex-end;
  margin-right: 36px;
  border-bottom-right-radius: 4px;
}

.bubble--r::after {
  right: -13px;
  border-left-color: #fff;
  border-right-width: 4px;
}

.bubble--l {
  align-self: flex-start;
  margin-left: 37px;
  border-bottom-left-radius: 4px;
}

.bubble--l::after {
  left: -13px;
  border-right-color: #fff;
  border-left-width: 4px;
}

.hero__copy {
  padding: 0 var(--pad) 78px;
  text-align: center;
}

.hero__title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 8vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

.hero__title em {
  font-style: normal;
  color: var(--teal-deep);
}

.hero__rule {
  width: 34px;
  height: 2px;
  margin: 26px auto;
  background: var(--teal);
}

/* --- 9. 카드 --------------------------------------------------------------- */
.card {
  padding: 26px 20px;
  border-radius: var(--radius-card);
  background: #fff;
  border: 1px solid var(--line);
}

.sec--soft .card,
.sec--tint .card {
  border-color: rgba(0, 0, 0, 0.05);
}

.card--dark {
  background: var(--bg-dark);
  border-color: var(--bg-dark);
  color: #fff;
}

.card--dark .body {
  color: rgba(255, 255, 255, 0.78);
}

.card__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.card--dark .card__no {
  background: #fff;
  color: var(--bg-dark);
}

.card__head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
}

.card__title {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.45;
}

/* 카드 안 본문은 제목보다 작게 */
.card .body,
.option .body {
  font-size: 21px;
  line-height: 1.58;
}

.cards {
  display: grid;
  gap: 14px;
}

/* --- 10. 오답 리스트 (블록5) ---------------------------------------------- */
.option {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  padding: 22px 22px 22px 20px;
  border-radius: var(--radius-card);
  background: #fff;
  border: 1px solid var(--line);
}

.option__x {
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--warn-tint);
  color: var(--warn);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.option__t {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.45;
  margin-bottom: 9px;
}

.option .body--sm { font-size: 19px; }

/* --- 11. 스텝 (블록7) ------------------------------------------------------ */
.steps {
  counter-reset: s;
  display: grid;
  gap: 0;
}

.step {
  position: relative;
  padding: 0 0 30px 46px;
}

.step:last-child {
  padding-bottom: 0;
}

.step::before {
  counter-increment: s;
  content: counter(s);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 14.5px;
  top: 36px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    rgba(44, 171, 188, 0.5),
    rgba(44, 171, 188, 0.08)
  );
}

.step__t {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.55;
  padding-top: 2px;
}

/* --- 11-b. 마무리 블록 (블록7) --------------------------------------------- */
.closing {
  margin-top: 76px;
  padding-top: 66px;
  border-top: 1px solid var(--line);
}

.closing__key {
  margin: 20px 0 14px;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.7;
  color: var(--ink);
}

.closing__key em {
  font-style: normal;
  color: var(--teal-deep);
  box-shadow: inset 0 -0.42em 0 rgba(44, 171, 188, 0.18);
}

/* --- 12. 통계 ------------------------------------------------------------- */
.stat {
  padding: 30px 24px;
  border-radius: var(--radius-card);
  text-align: center;
}

.stat__num {
  font-family: var(--font-heading);
  font-size: clamp(44px, 13.2vw, 58px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.045em;
  color: var(--teal-deep);
  font-variant-numeric: tabular-nums;
}

.stat__unit {
  font-family: var(--font-sans);
  font-size: 0.42em;
  font-weight: 700;
  margin-left: 3px;
  letter-spacing: -0.02em;
}

.stat__cap {
  margin-top: 10px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink-2);
}

.sec--dark .stat__num {
  color: #5fd0de;
}

.sec--dark .stat__cap {
  color: rgba(255, 255, 255, 0.72);
}

.stat-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.stat-split .stat {
  padding: 26px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.stat-split .stat__num {
  font-size: clamp(28px, 8vw, 36px);
}

.stat-split .stat--muted .stat__num {
  color: rgba(255, 255, 255, 0.72);
}

/* 연구 근거 — 논문 사진(좌우 꽉) → 출처 2줄 → 숫자 */
.evidence {
  margin-top: 34px;
  text-align: center;
}

.evidence__shot {
  width: 100%;
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.evidence__src {
  margin: 16px var(--pad) 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--muted);
}

.evidence__stat {
  margin: 26px var(--pad) 0;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

/* --- 12-b. 마무리 배너 (프로그램 안내 마지막) ------------------------------ */
/* --- 13. 성분 포인트 ------------------------------------------------------- */
.point {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 18px;
  align-items: center;
  padding: 20px;
  border-radius: var(--radius-card);
  background: #fff;
  border: 1px solid var(--line);
}

/* 성분 사진이 준비되면 .point__thumb 안의 span 을 <img> 로 교체하면 됩니다 */
.point__thumb {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff, var(--teal-tint) 72%);
  border: 1px solid rgba(44, 171, 188, 0.22);
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-size: 21px;
  color: var(--teal-ink);
  letter-spacing: -0.04em;
  overflow: hidden;
}

.point__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.point__tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--teal);
}

.point__t {
  margin: 4px 0 5px;
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.45;
}

/* --- 14. 슬라이더 ---------------------------------------------------------- */
.slider {
  position: relative;
}

.slider__viewport {
  overflow: hidden;
}

.slider__track {
  display: flex;
  transition: transform 500ms var(--ease);
  will-change: transform;
}

.slider__slide {
  flex: 0 0 100%;
  min-width: 0;
}

.slider__slide img {
  width: 100%;
  border-radius: 0;
  background: #fff;
}

/* 자료·후기 사진 — 원본처럼 1:1 박스에 옅은 회색 바탕을 깔고
   아주 흐린 검정 레이어를 위에 얹어 흰 배경과 구분되게 합니다. */
.slider--bleed .slider__slide,
.slider--contain .slider__slide {
  position: relative;
  background: #efefef;
}

.slider--bleed .slider__slide::after,
.slider--contain .slider__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.055);
  pointer-events: none;
}

/* 슬라이더별 화면 비율은 원본 실측값(--ar)을 그대로 씁니다 */
.slider--bleed .slider__slide img,
.slider--contain .slider__slide img {
  aspect-ratio: var(--ar, 1);
  object-fit: cover;
  object-position: center;
  background: #efefef;
  display: block;
}

.slider--contain .slider__slide {
  display: grid;
  place-items: center;
  padding: 0 2px;
}

.slider--contain .slider__slide img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0;
}

/* 좌우 꽉 찬 슬라이드에서 정사각 자료 사진 */
.slider--bleed .slider__slide img[width="828"],
.slider--bleed .slider__slide img[width="718"] {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* 좌우 여백 없이 화면 끝까지 */
.slider--bleed .slider__slide img {
  border-radius: 0;
}

/* 넘기기 화살표 — 이미지 위에 반투명으로 얹힘 */
.slider__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  opacity: 0.72;
  transition: opacity 200ms var(--ease), background 200ms var(--ease);
}

.slider__nav:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.44);
}

.slider__nav:focus-visible {
  opacity: 1;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.slider__nav::before {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 1.8px solid #fff;
  border-right: 1.8px solid #fff;
}

.slider__nav--prev {
  left: 10px;
}

.slider__nav--prev::before {
  transform: rotate(-135deg);
  margin-left: 3px;
}

.slider__nav--next {
  right: 10px;
}

.slider__nav--next::before {
  transform: rotate(45deg);
  margin-right: 3px;
}

/* 사진 비율이 섞인 슬라이드 — 4:3 으로 통일해 넘길 때 높이가 흔들리지 않게 */
.slider--43 .slider__slide img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* 원장 사진 슬라이드 — 사진 위에 이름 얹기 */
.slider--43 .slider__slide {
  margin: 0;
}

.doc {
  position: relative;
  margin: 0;
}

.doc::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.66), transparent);
  pointer-events: none;
}

.doc__name {
  position: absolute;
  left: var(--pad);
  bottom: 24px;
  z-index: 2;
  color: rgba(255, 255, 255, 0.86);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

.doc__name strong {
  margin-left: 7px;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.045em;
  color: #fff;
}

/* --- 15. 이미지 블록 ------------------------------------------------------- */
.figure img {
  width: 100%;
  border-radius: 0;
}

.figure--flush img {
  border-radius: 0;
}

.figure figcaption {
  margin-top: 12px;
}

/* --- 15-b. 간수치 수치 · 주의 문구 ------------------------------------------ */
/* 자체 데이터가 카드의 주인공 — 논문 인용은 근거로 뒤에 붙습니다 */
.liver-fact {
  margin: 20px 0 0;
  padding: 24px 16px 22px;
  border-radius: 14px;
  background: var(--teal-tint);
  text-align: center;
}

.liver-fact__num {
  font-size: 54px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--teal-deep);
  font-variant-numeric: tabular-nums;
}

.liver-fact__num small {
  margin-left: 4px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.liver-fact__cap {
  margin-top: 12px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -0.035em;
  color: var(--ink);
}

.liver-fact__cap b {
  font-weight: 800;
  color: var(--teal-ink);
}

/* 논문 인용 — 보조 정보로 낮춤 */
.liver-note {
  font-size: 15px;
  line-height: 1.66;
  letter-spacing: -0.02em;
  color: var(--muted);
}

/* 주의 문구 — 흐린 각주 대신 눈에 걸리는 띠로 */
.caution {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  padding: 15px 18px;
  border-radius: 10px;
  background: var(--teal-tint);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: -0.03em;
  color: var(--teal-ink);
  text-align: center;
}

.caution__i {
  flex: none;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

/* 가격표 위 라벨 */
.price-label {
  font-family: var(--font-heading);
  font-size: clamp(26px, 7.5vw, 33px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.045em;
  color: var(--teal-deep);
  text-align: center;
}

/* --- 15-c. 가격 패키지 카드 -------------------------------------------------- */
.pkg-group + .pkg-group {
  margin-top: 44px;
}

.pkg-group__head {
  text-align: center;
  margin-bottom: 20px;
}

.pkg-group__note {
  margin-top: 7px;
  font-size: 13.5px;
  color: var(--muted);
}

.pkg-list {
  display: grid;
  gap: 14px;
}

.pkg {
  position: relative;
  border-radius: var(--radius-card);
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
}

.pkg--best {
  border: 1.5px solid var(--teal);
  box-shadow: 0 10px 30px rgba(44, 171, 188, 0.16);
}

.pkg__media {
  position: relative;
  background: var(--bg-soft);
}

.pkg__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* 할인율 · BEST 배지 — 사진 좌상단에 나란히 */
.pkg__badges {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
}

.pkg__save {
  display: inline-flex;
  align-items: baseline;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(44, 171, 188, 0.34);
}

.pkg__save small {
  font-size: 13.5px;
  font-weight: 800;
  margin-left: 0;
}

.pkg__best {
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(224, 52, 43, 0.34);
}

.pkg__body {
  padding: 20px 16px 22px;
}

.pkg__tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(44, 171, 188, 0.42);
  color: var(--teal-deep);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pkg__title {
  margin: 12px 0 0;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.34;
  letter-spacing: -0.05em;
  white-space: nowrap;
  color: var(--ink);
}

.pkg__title em {
  font-style: normal;
  color: var(--teal-deep);
}

.pkg__spec {
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  color: var(--ink-2);
  letter-spacing: -0.03em;
}

.pkg__ck {
  flex: none;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.pkg__spec b {
  font-weight: 800;
  color: var(--ink);
}

.pkg__unit {
  margin-left: auto;
  font-size: 13.5px;
  color: var(--muted);
  white-space: nowrap;
}

.pkg__price {
  margin-top: 14px;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
  font-family: var(--font-heading);
  color: var(--teal-deep);
}

.pkg__price b {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.pkg__price span {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-2);
}

/* --- 15-d. 3분할 지표 (메인 랜딩) ------------------------------------------- */
.metric3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.metric3 > div {
  background: #fff;
  padding: 22px 6px;
  text-align: center;
}

.metric3 b {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  font-family: var(--font-heading);
  font-size: clamp(20px, 5.6vw, 25px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.15;
  color: var(--teal-deep);
  white-space: nowrap;
}

.metric3 b i {
  font-style: normal;
  font-size: 0.56em;
  font-weight: 700;
  margin-left: 1px;
}

.metric3 span {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* 손글씨 느낌의 짧은 인용 (원장 스토리) */
.say {
  margin: 30px 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(20px, 5.6vw, 25px);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -0.042em;
  color: var(--teal-ink);
}

.say small {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: -0.02em;
}

/* --- 15-e. 칼럼 상세 ---------------------------------------------------------- */
.art__meta {
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--muted);
}

.art__meta b {
  color: var(--ink-2);
  font-weight: 700;
}

.art__meta i {
  font-style: normal;
  opacity: 0.4;
}

/* 핵심 요약 — AI 가 그대로 인용하는 자리 */
.art__sum {
  margin: 30px 0 34px;
  padding: 24px 22px;
  border-radius: var(--radius-card);
  background: var(--teal-tint);
  border-left: 4px solid var(--teal);
}

.art__sum h2 {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--teal-ink);
}

.art__sum ul {
  display: grid;
  gap: 9px;
}

.art__sum li {
  position: relative;
  padding-left: 16px;
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.66;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: pretty;
}

.art__sum li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
}

/* 본문 */
.art h2 {
  margin: 40px 0 14px;
  font-family: var(--font-heading);
  font-size: clamp(21px, 5.8vw, 25px);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.042em;
  color: var(--ink);
  text-wrap: balance;
}

.art h3 {
  margin: 26px 0 10px;
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.5;
  color: var(--ink);
}

.art p {
  margin-top: 16px;
  font-size: 19px;
  line-height: 1.72;
  color: var(--ink-2);
  text-wrap: pretty;
}

.art ul.art__list {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.art ul.art__list li {
  position: relative;
  padding-left: 17px;
  font-size: 19px;
  line-height: 1.72;
  color: var(--ink-2);
  text-wrap: pretty;
}

.art ul.art__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.66em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
}

/* 표 — AI 가 구조를 읽기 좋게 */
.art__table {
  margin-top: 18px;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
}

.art__table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

.art__table th,
.art__table td {
  padding: 12px 13px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  line-height: 1.55;
  letter-spacing: -0.02em;
}

.art__table th {
  background: var(--bg-soft);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.art__table td {
  color: var(--ink-2);
}

.art__table tr:last-child th,
.art__table tr:last-child td {
  border-bottom: 0;
}

/* 출처 */
.art__src {
  margin-top: 30px;
  padding: 18px 20px;
  border-radius: 12px;
  background: var(--bg-soft);
  font-size: 13px;
  line-height: 1.75;
  color: var(--muted);
}

.art__src b {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-2);
}

/* 함께 보면 좋은 글 */
.related {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.related > b {
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--teal);
}

.related a {
  display: block;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: pretty;
  transition: color 180ms var(--ease);
}

.related a:hover {
  color: var(--teal-deep);
}

.related a::after {
  content: " →";
  color: var(--teal);
}

/* 의료 고지 */
.art__disc {
  margin-top: 30px;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--muted);
}

/* --- 16. FAQ --------------------------------------------------------------- */
.faq {
  border-top: 1px solid var(--line);
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__q {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 22px 0;
  text-align: left;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.6;
  color: var(--ink);
}

.faq__q .q {
  flex: none;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 800;
  color: var(--teal);
  line-height: 1.62;
}

.faq__q .chev {
  margin-left: auto;
  flex: none;
  width: 11px;
  height: 11px;
  margin-top: 8px;
  border-right: 1.8px solid var(--muted);
  border-bottom: 1.8px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 280ms var(--ease);
}

.faq__item.is-open .faq__q .chev {
  transform: rotate(-135deg);
}

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms var(--ease);
}

.faq__item.is-open .faq__a {
  grid-template-rows: 1fr;
}

.faq__a > div {
  overflow: hidden;
}

.faq__a p {
  padding: 0 0 24px 30px;
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink-2);
}

/* --- 17. GIF 단계 ---------------------------------------------------------- */
.dose {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-soft);
}

.dose img {
  width: 100%;
}

/* --- 18. 푸터 & 고정 CTA --------------------------------------------------- */
.foot {
  padding: 46px var(--pad) 54px;
  background: var(--bg-dark);
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  line-height: 1.9;
}

.foot__name {
  font-size: 16.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}

.foot dl {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 2px 10px;
}

.foot dt {
  color: rgba(255, 255, 255, 0.4);
}

.foot__legal {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.38);
}

/* --- 18-b. 서브 페이지 공통 -------------------------------------------------- */
.foot__biz {
  margin-top: 20px;
  font-size: 12px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.34);
}

/* 페이지 머리말 */
.phead {
  padding: 96px var(--pad) 46px;
  background: var(--bg-soft);
  text-align: center;
}

.phead .label-en {
  margin-bottom: 12px;
}

.phead__title {
  font-family: var(--font-heading);
  font-size: clamp(29px, 8.2vw, 37px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.phead__sub {
  margin-top: 16px;
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* 사진과 글이 한 덩어리인 페이지 머리말 */
.phero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 66vh;
  padding: 100px var(--pad) 40px;
  overflow: hidden;
  background: var(--bg-dark);
}

.phero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 26%;
}

.phero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.84) 0%,
    rgba(0, 0, 0, 0.5) 44%,
    rgba(0, 0, 0, 0.16) 100%
  );
}

.phero__copy {
  position: relative;
  z-index: 2;
  width: 100%;
  color: #fff;
}

.phero__copy .label-en {
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.56);
}

.phero__title {
  font-family: var(--font-heading);
  font-size: clamp(29px, 8.2vw, 37px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.045em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.5);
}

.phero__title span {
  color: #7fd6e2;
}

.phero__sub {
  margin-top: 14px;
  font-size: 20px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.84);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
  text-wrap: pretty;
}

/* 사진이 돌아가는 배경 위에 글이 얹히는 머리말 */
.phero--slides {
  align-items: center;
  justify-content: center;
  min-height: 58vh;
  padding: 110px var(--pad) 56px;
  text-align: center;
}

.phero__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.slider--bg,
.slider--bg .slider__viewport,
.slider--bg .slider__track,
.slider--bg .slider__slide {
  height: 100%;
}

.slider--bg .slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.slider--bg .slider__nav {
  display: none;
}

.phero--slides::after {
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.66) 0%,
    rgba(0, 0, 0, 0.74) 100%
  );
}

.phero--slides .phero__copy {
  z-index: 2;
}

.phero--slides .phero__sub strong {
  color: #7fd6e2;
  font-weight: 700;
}

/* 본문 단락 */
.prose > p + p {
  margin-top: 26px;
}

.prose p {
  font-size: 20px;
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* 인용 */
.pull {
  margin: 34px 0;
  padding: 30px 24px;
  border-radius: var(--radius-card);
  background: var(--teal-tint);
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(20px, 5.6vw, 25px);
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: -0.042em;
  color: var(--teal-ink);
  text-wrap: balance;
}

.sign {
  margin-top: 34px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
  text-align: right;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}

/* 사진 격자 */
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.grid2 img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
}

/* 글 목록 */
.posts {
  border-top: 1px solid var(--line);
}

.post {
  display: block;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  transition: background 180ms var(--ease);
}

.post:hover .post__t {
  color: var(--teal-deep);
}

.post__n {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--teal);
}

.post__t {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: pretty;
  transition: color 180ms var(--ease);
}

/* 절차 3단계 */
.flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: 6px;
  text-align: center;
}

.flow__step {
  padding: 20px 6px;
  border-radius: 14px;
  background: var(--teal-tint);
}

.flow__n {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-bottom: 9px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.flow__t {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.5;
}

.flow__arrow {
  align-self: center;
  color: var(--teal);
  font-size: 15px;
  font-weight: 700;
}

/* 안내 박스 */
.notice {
  padding: 26px 20px;
  border-radius: var(--radius-card);
  background: var(--bg-soft);
  text-align: center;
}

.notice__t {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.notice__d {
  margin-top: 12px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

.hot {
  color: var(--red);
  font-weight: 700;
}

/* --- 19. 스크롤 등장 ------------------------------------------------------- */
.rv {
  opacity: 0;
  transform: translateY(26px);
}

.rv.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.rv-1.is-in {
  transition-delay: 90ms;
}
.rv-2.is-in {
  transition-delay: 180ms;
}
.rv-3.is-in {
  transition-delay: 270ms;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .rv {
    opacity: 1;
    transform: none;
  }
  .slider__track {
    transition: none;
  }
  .faq__a {
    transition: none;
  }
}

@media (max-width: 374px) {
  .pkg__title { font-size: 21.5px; }
}


/* ---------------------------------------------------------------------------
   원본 이미지 → 실제 텍스트로 옮긴 블록 (SEO/GEO)
   아이콘·약재 사진은 원본 이미지에서 그대로 잘라 썼습니다.
--------------------------------------------------------------------------- */

/* 22.5만통 / -7kg / 72% 지표 3개 */
.mstat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 34px var(--pad) 40px;
  background: #f9f9f9;
}

.mstat__item { text-align: center; }

.mstat__ic {
  width: 74px;
  height: 74px;
  margin: 0 auto;
  display: block;
}

.mstat__num {
  margin: 12px 0 0;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #000;
  white-space: nowrap;
}

.mstat__cap {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: #b5b5b5;
  letter-spacing: -0.03em;
}

/* 약재 사진 */
.herb {
  display: block;
  width: 74%;
  max-width: 300px;
  height: auto;
  margin: 26px auto 22px;
}

/* 원장 프로필 */
.docp {
  display: flex;
  align-items: stretch;
  background: linear-gradient(100deg, #77ccd6 0%, #3aa9bd 55%, #2ba0b6 100%);
  color: #fff;
  overflow: hidden;
}

.docp__photo {
  flex: 0 0 55%;
  width: 55%;
  align-self: flex-end;
  display: block;
  height: auto;
  -webkit-mask-image: linear-gradient(to right, #000 80%, transparent 100%);
  mask-image: linear-gradient(to right, #000 80%, transparent 100%);
}

.docp__body {
  flex: 1 1 auto;
  padding: 26px 14px 26px 0;
  align-self: center;
}

.docp__role {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 5px;
}

.docp__role::before {
  content: "";
  width: 3px;
  height: 13px;
  background: #fff;
  display: inline-block;
}

.docp__name {
  margin: 6px 0 14px;
  font-family: var(--font-heading);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.1;
}

.docp__career {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  line-height: 1.72;
  letter-spacing: -0.035em;
}

.docp__career + .docp__career { margin-top: 12px; }

/* 비대면 진료 순서 3단계 (마운자로 페이지의 세로 .steps 와 이름이 겹치지 않게 분리) */
.stepline {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  margin-top: 26px;
}

.stepline__item { flex: 0 0 auto; width: 92px; text-align: center; }

.stepline__item img { width: 66px; height: auto; display: block; margin: 0 auto; }

.stepline__cap {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #444;
}

.stepline__arrow {
  flex: 0 0 auto;
  align-self: center;
  margin-top: 22px;
  color: #c9c9c9;
  font-size: 17px;
}

@media (max-width: 359px) {
  .stepline__item { width: 80px; }
  .stepline__item img { width: 56px; }
}

/* FAQ 그룹 구분 */
.faq__group {
  margin: 30px 0 6px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #2cabbc;
}

.faq__group:first-child { margin-top: 0; }

/* 원본이 이미지로 넣었던 구간(말풍선·누적 처방·지표·성분·가격 헤더·원장 프로필)은
   원본에서도 산세리프였습니다. 그 구간에만 적용합니다. */
.sans,
.sans h1, .sans h2, .sans h3,
.sans p, .sans li, .sans span, .sans b, .sans strong, .sans em {
  font-family: var(--font-ui);
  letter-spacing: -0.035em;
}

/* 슬라이드 인디케이터 — 원본처럼 사진 위 하단 가운데 */
.slider__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}

.slider__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.22);
  transition: background 200ms var(--ease);
}

.slider__dot.is-on { background: rgba(0, 0, 0, 0.55); }

/* 지표 아이콘 — 둥근 박스는 CSS로, 글리프만 이미지(고해상도) */
.mstat__ic {
  width: 72px;
  height: 72px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 26px;
  background: #f1f1f1;
}

.mstat__ic img {
  width: 60%;
  height: auto;
  display: block;
}

/* 슬라이더 바로 앞뒤 블록 — 원본 실측: 글→사진 30px, 사진→글 18~23px */
.oblock--tail { padding-bottom: 30px; }
.oblock--head { padding-top: 20px; }


/* ---------------------------------------------------------------------------
   데스크탑 화면 (1024px 이상)
   원본 mail100diet.com 은 PC 에서 모바일과 전혀 다른 화면을 보여줍니다.
   PC 는 긴 이미지 10장으로 된 별도 레이아웃이라, 그대로 옮겼습니다.
   모바일 본문(.mob)은 1024px 이상에서 display:none 이라 접근성 트리·데스크탑
   렌더링에서 완전히 빠집니다. 그래서 데스크탑 이미지에는 실제 alt 를 달고
   .dtop 안에 h1 을 따로 둡니다. 예전처럼 aria-hidden + alt="" 로 두면
   데스크탑을 기준으로 렌더링하는 크롤러(빙 등)에게 이 페이지는
   제목도 본문도 없는 이미지 덩어리로 보입니다.
--------------------------------------------------------------------------- */
.dtop { display: none; }

/* 화면에는 안 보이지만 스크린리더·크롤러는 읽는 텍스트 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0;
}

@media (min-width: 1024px) {
  .dtop { display: block; background: #fff; padding-top: 58px; }
  .mob { display: none; }

  .dtop__img {
    display: block;
    width: 626px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }

  .dtop__img--dose { width: 626px; }

  /* 원본 PC 화면에서 이 자리에만 153px 간격이 있습니다 */
  .dtop__img--gap { margin-bottom: 153px; }

  .dtop__slider {
    width: 626px;
    max-width: 100%;
    margin: 0 auto;
  }

  /* 데스크탑 슬라이더는 회색 바탕·어두운 톤 없이 원본 그대로 */
  .dtop__slider .slider__slide { background: #fff; }
  .dtop__slider .slider__slide::after { content: none; }
  .dtop__slider .slider__slide img { background: #fff; }

  .dtop__note {
    margin: 34px auto 30px;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--ink);
  }

  /* 데스크탑에서는 본문 폭 제한을 풀고 공통 구간만 가운데로 */
  .page { max-width: none; }

  .hdr { max-width: none; }

  .oblock,
  .oblock--tight,
  .oblock--soft,
  .sec,
  .foot {
    max-width: 626px;
    margin-inline: auto;
  }

  .ophoto { max-width: 626px; margin-inline: auto; }
}